/* app/static/css/chat-graph.css */
/* Knowledge-graph view (v13.2): a full-window 3D canvas with a side panel. */

/* The overlay lives outside the chat column: on a phone that column is hidden
   while the documents list is open, and a child of it would never appear. On a
   desktop it starts after the sidebar, so the tabs stay reachable. */
.graph-view {
    /* Geometry is set in JS: on a desktop the graph covers the main column and
       leaves the sidebar tabs alone; on a phone it takes the area below the tab
       row, exactly where the documents list sits. */
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* The project themes with a body class and plain colours, not variables:
       var(--bg-primary) does not exist, which is why the view stayed black in
       the light theme. */
    background: #ffffff;
    color: #1e1e1e;
}

.dark-theme .graph-view {
    background: #1e1e1e;
    color: #e0e0e0;
}

.graph-view.hidden {
    display: none;
}

.graph-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #d0d0d0;
    flex-wrap: wrap;
}

.graph-title {
    font-weight: 600;
}

.graph-layer-btn {
    border: 1px solid #c8c8c8;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.graph-search {
    min-width: 10rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #c8c8c8;
    background: transparent;
    color: inherit;
}

.graph-status {
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid #d0d0d0;
    font-size: 0.8rem;
    opacity: 0.8;
    white-space: nowrap;
}

.dark-theme .graph-status,
.dark-theme .graph-side-panel,
.dark-theme .graph-toolbar {
    border-color: #3a3a3a;
}

.graph-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.graph-canvas {
    flex: 1;
    min-width: 0;
    /* The renderer sizes its own canvas; clipping here keeps a stale, wider
       surface from pushing the cloud to one side. */
    overflow: hidden;
    cursor: grab;
    /* Panning the cloud must not scroll the page on a touch screen. */
    touch-action: none;
}

.graph-canvas:active {
    cursor: grabbing;
}

.graph-side-panel {
    width: 18rem;
    border-left: 1px solid #d0d0d0;
    padding: 0.75rem;
    overflow-y: auto;
    font-size: 0.9rem;
}

.graph-side-panel h4 {
    margin: 0 0 0.25rem;
}

.graph-node-kind {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

.graph-node-shared {
    font-size: 0.8rem;
    color: #e69138;
    margin-bottom: 0.5rem;
}

.graph-neighbours {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}

.graph-neighbours li {
    padding: 0.2rem 0;
    border-bottom: 1px solid #d0d0d0;
}

.graph-hint,
.graph-mentions {
    opacity: 0.7;
    font-size: 0.85rem;
}

/* A phone keeps the canvas usable: the panel becomes a strip below it. */
@media (max-width: 768px) {
    .graph-body {
        flex-direction: column;
    }

    .graph-side-panel {
        width: auto;
        max-height: 35%;
        border-left: none;
        border-top: 1px solid #d0d0d0;
    }
}

/* Entry points in the Documents panel. */
.documents-graph-bar {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0.6rem;
}

/* A labelled button, not a bare icon: the graph is a destination, and an emoji
   alone gave no hint of where it leads. */
.documents-graph-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.35rem 0.75rem;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.9rem;
}

.documents-graph-button:hover {
    background: rgba(76, 139, 245, 0.1);
    border-color: #4c8bf5;
}

.dark-theme .documents-graph-button {
    border-color: #3a3a3a;
}

.documents-graph-icon {
    font-size: 1rem;
    line-height: 1;
}

.documents-graph-button,
.graph-document-button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.2rem;
    opacity: 0.8;
}

.documents-graph-button:hover,
.graph-document-button:hover {
    opacity: 1;
}

.graph-build-btn {
    margin-top: 0.5rem;
    border: 1px solid #4c8bf5;
    background: transparent;
    color: inherit;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

/* The failure line is a diagnostic: it has to be selectable and copyable. */
.graph-error-detail {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
    background: rgba(200, 60, 60, 0.08);
    border-left: 3px solid #c83c3c;
    padding: 0.4rem 0.6rem;
}


/* The 3D renderer prints its own English control hint in a corner. It is not
   translatable from the bundle and duplicates what the panel says. */
.graph-canvas .scene-nav-info {
    display: none;
}