/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard layout — loaded after styles.css and overrides it.

   Two collapsible panels (backend stats, knowledge base) around one always
   visible query card. Kept in its own file so the base theme stays untouched,
   and written to degrade gracefully: nothing here depends on a single fragile
   property to stay legible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The gradient-text logo relied on background-clip:text. Where that doesn't
   apply — older engines, forced-colors mode, a stale stylesheet — the element
   renders as a solid gradient block with invisible text, which is exactly what
   it did. Solid colour is less clever and always readable. */
.logo-container h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.logo-container {
    margin-bottom: 26px;
}

.app-container {
    align-items: stretch;
}

.sidebar {
    gap: 4px;
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 36px 32px 64px;
    max-height: 100vh;
    overflow-y: auto;
}

/* main-content is a flex column with a capped height and its own scrollbar.
   Its children (.panel has overflow:hidden) would otherwise be squeezed by
   flexbox — an overflow!=visible item is allowed to shrink below its content,
   so an open panel got clipped mid-way instead of the page scrolling. Pinning
   flex-shrink:0 keeps every card at its natural height and lets main-content
   scroll to reveal all of it. */
.main-content > .panel,
.main-content > .query-pane {
    flex-shrink: 0;
}

/* ── Collapsible panels ──────────────────────────────────────────────────── */

.panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.panel:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-md);
}

.panel.open {
    border-color: var(--accent-violet-glow);
}

/* Every reset here is deliberate: without them a button falls back to the
   user-agent style (white background, black text, chunky border), which is how
   these rendered when the stylesheet hadn't loaded. */
.panel-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    background: transparent;
    background-color: transparent;
    border: 0;
    border-radius: 16px;
    color: var(--text-primary);
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition-smooth);
}

.panel-toggle:hover {
    background-color: var(--inset-bg);
}

.panel-toggle:focus-visible {
    outline: 2px solid var(--accent-violet);
    outline-offset: -2px;
}

.panel-toggle-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--accent-violet-glow);
    color: var(--accent-violet);
}

.panel-toggle-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: block;
}

.panel-toggle-label {
    flex-shrink: 0;
}

.panel-toggle-meta {
    margin-left: auto;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-toggle-caret {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-toggle-caret svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.panel-toggle[aria-expanded="true"] .panel-toggle-caret {
    transform: rotate(90deg);
    color: var(--accent-violet);
}

.panel-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--card-border);
    animation: panel-in 0.18s ease-out;
}

@keyframes panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar .panel {
    background: transparent;
    border-color: transparent;
}

.sidebar .panel-toggle {
    padding: 11px 14px;
    font-size: 0.85rem;
    border-radius: 10px;
}

.sidebar .panel-body {
    padding: 2px 14px 10px;
    gap: 0;
    border-top-color: transparent;
}

.side-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.8rem;
}

.side-section:last-child {
    border-bottom: 0;
}

.side-label {
    color: var(--text-secondary);
}

.side-value {
    font-weight: 600;
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    text-align: right;
}

#llm-badge {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}

/* ── Query card ──────────────────────────────────────────────────────────── */

.query-pane {
    gap: 18px;
    padding: 30px 32px;
}

.query-pane h1 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
}

.query-pane .card-header {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.query-pane .description {
    font-size: 0.88rem;
    margin-top: -8px;
}

.input-group {
    margin-bottom: 0;
}

.input-group textarea {
    min-height: 118px;
    font-family: var(--font-body);
}

.input-group textarea::placeholder {
    color: var(--text-muted);
}

.query-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.top-k-control input {
    width: 62px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 7px 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.top-k-control input:focus {
    outline: none;
    border-color: var(--accent-violet);
}

.query-progress {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: right;
    margin-top: -6px;
}

kbd {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-primary);
}

/* ── Answer + sources ────────────────────────────────────────────────────── */

.response-card {
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 22px 24px;
}

.response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.response-header h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
}

.response-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.source-count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.references-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.error-text {
    color: var(--error-red);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn-secondary {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    border-color: var(--accent-violet);
    background: var(--accent-violet-glow);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-ghost:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent-violet);
}

.btn-danger {
    color: var(--error-red);
    border-color: rgba(217, 48, 37, 0.22);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(217, 48, 37, 0.22);
    border-color: var(--error-red);
}

.btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Upload ──────────────────────────────────────────────────────────────── */

.hidden-input {
    display: none;
}

.drag-drop-zone {
    padding: 34px 24px;
    border-radius: 14px;
}

.drag-drop-zone h4 {
    font-size: 1rem;
}

.drag-drop-zone span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.upload-cloud-icon {
    fill: var(--text-muted);
    margin-bottom: 10px;
    transition: var(--transition-smooth);
}

.drag-drop-zone:focus-visible {
    outline: 2px solid var(--accent-violet);
    outline-offset: 3px;
}

.upload-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.upload-actions .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
}

.upload-status-box {
    margin-top: 0;
}

/* ── Document list ───────────────────────────────────────────────────────── */

.doc-list-section {
    border-top: 1px solid var(--card-border);
    padding-top: 16px;
}

.doc-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.doc-list-header h3 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
}

.doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.84rem;
}

.doc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-chunks {
    color: var(--text-muted);
    font-size: 0.76rem;
    flex-shrink: 0;
}

.empty-note {
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* ── Live server pull ────────────────────────────────────────────────────── */

.server-section {
    border-top: 1px solid var(--card-border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.server-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.server-header h3 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
}

.server-state {
    font-size: 0.75rem;
    color: var(--text-muted);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.server-state.success {
    color: var(--success-green);
    border-color: rgba(15, 157, 88, 0.22);
    background: rgba(15, 157, 88, 0.22);
}

.server-state.error {
    color: var(--error-red);
    border-color: rgba(217, 48, 37, 0.22);
    background: rgba(217, 48, 37, 0.22);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.field-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.field-input {
    width: 100%;
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 0.85rem;
}

.field-input:focus {
    outline: none;
    border-color: var(--accent-violet);
    box-shadow: 0 0 0 3px var(--accent-violet-glow);
}

.field-input::placeholder {
    color: var(--text-muted);
}

select.field-input {
    cursor: pointer;
}

.field-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.server-advanced {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 10px 14px;
    background: var(--inset-bg);
}

.server-advanced summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-secondary);
    list-style: none;
}

.server-advanced summary::-webkit-details-marker {
    display: none;
}

.server-advanced summary::before {
    content: "+ ";
    color: var(--accent-violet);
    font-weight: 700;
}

.server-advanced[open] summary::before {
    content: "\2212 ";
}

.server-advanced[open] summary {
    margin-bottom: 12px;
}

.server-advanced .field + .field {
    margin-top: 10px;
}

.server-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.server-actions .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
}

.server-result {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 10px 14px;
    word-break: break-word;
}

.server-result.success {
    color: var(--success-green);
    border-color: rgba(15, 157, 88, 0.22);
}

.server-result.error {
    color: var(--error-red);
    border-color: rgba(217, 48, 37, 0.22);
}

/* Checkbox with an explanatory sub-label (e.g. the transcription opt-in). */
.check-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--inset-bg);
    cursor: pointer;
}

.check-field input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent-violet);
    flex-shrink: 0;
    cursor: pointer;
}

.check-field span {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.check-field em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── Connections & keys (runtime settings) ───────────────────────────────── */

.settings-intro {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 18px;
}

.settings-group {
    padding: 16px 0;
    border-top: 1px solid var(--card-border);
}
.settings-group:first-of-type {
    border-top: none;
    padding-top: 0;
}

.settings-group h3 {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin: 0 0 12px;
}

/* The env-var name shown inside a field label. */
.field-label code,
.settings-intro code,
.field-note code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.78em;
    color: var(--text-secondary);
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 1px 5px;
}

.field-state {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}
.field-state.runtime {
    color: var(--success-green);
    border-color: rgba(15, 157, 88, 0.22);
}
.field-state.env {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan-glow);
}
.field-state.unset {
    color: var(--text-muted);
    opacity: 0.7;
}

.field-note {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 10px 0 0;
}

/* Stacked, full-width fields (used for the Groq key/model so the long key box
   gets the whole row instead of sharing it). */
.settings-subgroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Groq fields when Ollama is the active provider — visible but de-emphasised. */
.groq-only.dimmed {
    opacity: 0.45;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .main-content {
        padding: 20px 16px 48px;
    }
    .query-pane {
        padding: 24px 20px;
    }
    .query-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .query-controls .btn-primary {
        justify-content: center;
    }
    .field-row {
        flex-direction: column;
    }
}

/* ── Light-theme polish ──────────────────────────────────────────────────────
   On a dark ground, separation came from glow and translucency. On white those
   cues vanish — every surface flattens into the page — so depth is carried by
   borders and shadow instead, and the accent is used sparingly for state and
   focus rather than for decoration. */

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
}

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--card-border);
    backdrop-filter: none;
}

.panel,
.query-pane,
.card {
    box-shadow: var(--shadow-sm);
}

.panel.open {
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-md);
}

/* Inputs sit *below* the card surface so the eye reads them as editable. */
.field-input,
.input-group textarea,
.top-k-control input,
#api-key-input {
    background: var(--inset-bg);
    border: 1px solid var(--inset-border);
    color: var(--text-primary);
}

.field-input:focus,
.input-group textarea:focus,
.top-k-control input:focus {
    background: var(--sidebar-bg);
    border-color: var(--accent-violet);
    box-shadow: 0 0 0 3px var(--accent-violet-glow);
    outline: none;
}

/* One solid accent instead of a violet→cyan gradient: a two-colour sweep that
   read as energetic on black looks like unfinished branding on white. */
.btn-primary {
    background: var(--accent-violet);
    color: #fff;
    border: 1px solid var(--accent-violet);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background: #4338ca;
    border-color: #4338ca;
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--sidebar-bg);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--inset-bg);
    border-color: var(--card-hover-border);
}

.drag-drop-zone {
    background: var(--inset-bg);
    border: 1.5px dashed var(--card-border);
}

.drag-drop-zone:hover {
    border-color: var(--accent-violet);
    background: #eef2ff;
}

/* Answer panel: a tinted card, so a generated answer is visibly distinct from
   the question that produced it. */
.response-card {
    background: var(--sidebar-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
}

.answer-output {
    color: var(--text-primary);
    line-height: 1.7;
}

.reference-item,
.doc-item {
    background: var(--inset-bg);
    border: 1px solid var(--card-border);
}

.badge,
.model-badge {
    background: #eef2ff;
    color: var(--accent-violet);
    border: 1px solid var(--card-hover-border);
}

/* The status dot glowed to stand out on black; on white a plain dot is clearer. */
.dot {
    box-shadow: none;
}

.status-indicator {
    color: var(--text-secondary);
}

/* Scrollbars default to dark-on-dark in some engines. */
.main-content::-webkit-scrollbar,
.doc-list::-webkit-scrollbar {
    width: 10px;
}
.main-content::-webkit-scrollbar-thumb,
.doc-list::-webkit-scrollbar-thumb {
    background: #d3d8e4;
    border-radius: 6px;
}
.main-content::-webkit-scrollbar-track,
.doc-list::-webkit-scrollbar-track {
    background: transparent;
}

/* Smart-mode toggle: the browser default checkbox sits at a different visual
   weight to the controls beside it, so it reads as unfinished markup. */
.top-k-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-violet);
    cursor: pointer;
    margin-right: 2px;
}

.top-k-control:has(input[type="checkbox"]) {
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
}

/* ── Rendered answer Markdown ────────────────────────────────────────────── */

.answer-output p { margin: 0 0 10px; }
.answer-output p:last-child { margin-bottom: 0; }

.answer-output h3,
.answer-output h4,
.answer-output h5 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    margin: 14px 0 6px;
    color: var(--text-primary);
}

.answer-output ul,
.answer-output ol { margin: 0 0 10px; padding-left: 20px; }
.answer-output li { margin-bottom: 4px; }

.answer-output code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background: var(--inset-bg);
    border: 1px solid var(--inset-border);
    border-radius: 5px;
    padding: 1px 5px;
    word-break: break-word;
}

.answer-output a { color: var(--accent-violet); word-break: break-all; }

/* A wide table must scroll inside its own box rather than stretching the card
   and pushing the page sideways — the model likes long URL cells. */
.md-table-wrap {
    overflow-x: auto;
    margin: 10px 0 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

.md-table th,
.md-table td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: top;
}

.md-table th {
    background: var(--inset-bg);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.md-table tr:last-child td { border-bottom: 0; }
.md-table td { color: var(--text-secondary); }
.md-table td strong { color: var(--text-primary); }