/* ============================================================
   DESIGN TOKENS — see designs/tenacity-vault-redesign-v3_2.html

   Two layers, deliberately:
     1. The palette below (--ground, --panel, --primary, --data …) is the
        source of truth. Change a colour here and it moves everywhere.
     2. The legacy names (--bg-card, --text-main, --tokens-in-color …) are
        aliases onto that palette. Hundreds of rules and a fair amount of
        inline markup still reference them, so they stay — but nothing
        below this block should define a colour of its own again.
   ============================================================ */
:root{
/* — palette: light — */
--ground:#F2F5FA;--panel:#FFFFFF;--raised:#F7F9FC;--hover:#EBF1F8;
--line:#DBE2EC;--line-soft:#E9EEF4;
--text:#111823;--text-2:#3C4759;--muted:#5E6C80;
--primary-base:#0063D6;--primary-hi:#0052B4;--on-primary:#FFFFFF;--primary-dim:rgba(0,99,214,.09);
--data:#0D7794;--ok:#12794A;--warn:#8F5502;--bad:#BE2F39;
/* Text on a filled red. White in both themes — unlike --on-primary, which
   flips dark so it can sit on the lighter dark-mode blue. */
--on-bad:#FFFFFF;
--tint-a:rgba(0,99,214,.09);--tint-b:rgba(18,121,74,.10);
--tint-c:rgba(143,85,2,.10);--tint-d:rgba(13,119,148,.10);
--tint-bad:rgba(190,47,57,.10);
--grid:rgba(20,30,50,.07);
--scrim:rgba(30,41,59,.38);
--shadow:0 12px 30px -14px rgba(16,24,40,.18);

/* — type — */
--font-display:'Syne',system-ui,sans-serif;
--font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,'Consolas',monospace;

/* — surface aliases — */
--bg-body:var(--ground);--bg-hero:var(--ground);--bg-panel:var(--raised);
--bg-card:var(--panel);--bg-input:var(--raised);
/* the four that were referenced but never defined */
--sidebar-bg:var(--panel);--surface-color:var(--panel);
--text-color:var(--text);--bg-main:var(--ground);

/* — text / action aliases — */
--text-main:var(--text);--text-muted:var(--muted);
--primary:var(--primary-base);--primary-hover:var(--primary-hi);
--border:var(--line);--collapser-arrow:var(--text);
/* The answer bubble sits on --panel, not --raised: the chat column is the
   ground, and raised is only one step off it — in light mode #F7F9FC on
   #F2F5FA, which reads as no step at all. Panel gives it a white card. */
--chat-ai-bg:var(--panel);--chat-user-bg:var(--primary-base);--chat-user-text:var(--on-primary);
/* The source card sits one step above the bubble, and its gutter one step
   below the card. Both are relative to whatever the bubble is, so they are
   tokens rather than fixed surfaces — see the dark block. */
--src-card-bg:var(--raised);--src-gutter-bg:var(--panel);

/* — dashboard aliases: same four roles, new palette — */
--tokens-in-color:var(--primary-base);--tokens-out-color:var(--ok);
--storage-color:var(--warn);--total-tokens-color:var(--data);
--chart-grid:var(--grid);--progress-bg:var(--hover);
--status-normal:var(--ok);--status-moderate:var(--warn);--status-high:var(--bad);

--nav-height:70px;
}

[data-theme="dark"]{
/* — palette: dark. Ground is lifted off near-black so panels can sit
     above it without the page reading as a void. — */
--ground:#1A202B;--panel:#222A38;--raised:#2A3342;--hover:#333D4D;
--line:#394456;--line-soft:#2F3949;
--text:#EDF1F7;--text-2:#C4CDDB;--muted:#96A2B5;
--primary-base:#4A93FF;--primary-hi:#6BA8FF;--on-primary:#07101E;--primary-dim:rgba(74,147,255,.17);
--data:#43C8E4;--ok:#42D397;--warn:#F7AE33;--bad:#F45E65;
--tint-a:rgba(74,147,255,.16);--tint-b:rgba(66,211,151,.16);
--tint-c:rgba(247,174,51,.16);--tint-d:rgba(67,200,228,.16);
--tint-bad:rgba(244,94,101,.16);
--grid:rgba(200,210,225,.08);
--scrim:rgba(8,12,20,.6);
--shadow:0 20px 46px -18px rgba(0,0,0,.55);

/* Dark inverts two relationships.
   The input well sits *below* its panel rather than above it, so it reads as
   a recess in both themes. */
--bg-input:var(--ground);
/* And the answer bubble goes the other way: dark's --raised is lighter than
   --panel, so raised is the bigger step off the ground here, where in light it
   is very nearly the ground itself. Each theme takes whichever lifts more. */
--chat-ai-bg:var(--raised);
/* Which pushes the source card up a step too. On the light theme's white
   bubble, raised is the card; here the bubble *is* raised, so a card on raised
   would be invisible — it needs the next surface up. */
--src-card-bg:var(--hover);--src-gutter-bg:var(--raised);
}

body{font-family:var(--font-body);background-color:var(--bg-body);color:var(--text-main);margin:0;transition:background-color 0.3s,color .3s}

/* NAVBAR & BUTTONS */
/* No bottom rule: the bar is --panel and the page below it is --ground, so the
   surface change already separates them and the line just read as an underline. */
.navbar{ height:var(--nav-height);background:var(--bg-card);display:flex;align-items:center;padding:0 2rem;position:sticky;top:0;z-index:100}
.nav-container{width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); }
/* The mark is a fixed 34px square. The old .logo-circle was 72px inside a 70px
   navbar, so it overflowed the bar top and bottom. */
.logo-mark { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
.logo-word { line-height: 1; white-space: nowrap; }
/* "AI" carries the same weight as the rest of the wordmark — <strong> would
   otherwise try to go bolder than the 800 already set on .logo. */
.logo-word strong { font-weight: inherit; }
.logo-vault { font-style: italic; color: var(--primary); }

/* The wordmark and the nav controls together need roughly 1000px. Below that
   the controls are the part you actually operate, so the wordmark goes and the
   mark carries the brand on its own — otherwise the bar runs off the right
   edge and takes the whole page into a sideways scroll. */
@media (max-width: 1080px) {
    .logo-word { display: none; }
}
.logo-icon_old { width: 24px; height: 24px; background: var(--primary); border-radius: 4px; }
.logo-circle{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.logo-icon{width:100%;height:auto;object-fit:contain;display:block}
.btn-primary { background: var(--primary); color: var(--on-primary); border: none; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary.big { padding: 0.9rem 2rem; font-size: 1rem; }
.btn-secondary.big { background:transparent;border:1px solid var(--border);color:var(--text-2);padding:.9rem 2rem;font-size:1rem;border-radius:8px;cursor:pointer;font-weight:600}
.btn-secondary.big:hover { background:var(--hover);color:var(--text-main); }
.btn-success { background-color: var(--ok); color: var(--on-primary); }
.btn-error {background-color:var(--bad); color:var(--on-bad);}
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-main); padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.btn-outline:hover { background: var(--hover); }
/* Square outlined icon buttons, so the theme and dashboard controls read as a
   matched pair rather than two loose glyphs. */
.btn-icon { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted);
            font-size: 1rem; cursor: pointer; padding: 0; margin-right: 8px; box-sizing: border-box;
            width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
            transition: background .15s, border-color .15s, color .15s; }
.btn-icon:hover { background: var(--hover); color: var(--text-main); }
.btn-icon svg { width: 18px; height: 18px; }
.btn-text { background: none; border: none; color: var(--text-muted); cursor: pointer; text-decoration: underline; }

/* Nav chips: language and the signed-in user. */
.nav-links { display: flex; align-items: center; gap: 8px; }
/* Entries that exist only in the phone menu (documents, upload). */
.nav-mobile-only { display: none; }
#user-display { font-family: var(--font-mono); font-size: .75rem; color: var(--text-2);
                border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px;
                white-space: nowrap; }
#admin-btn { text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap; }
#admin-btn:hover { text-decoration: underline; }
/* Settings as an outlined ghost button rather than underlined text. */
#settings-btn { text-decoration: none; border: 1px solid var(--border); border-radius: 8px;
                padding: 7px 14px; font-size: .85rem; font-weight: 600; color: var(--text-2);
                white-space: nowrap; transition: background .15s, color .15s; }
#settings-btn:hover { background: var(--hover); color: var(--text-main); }
/* The dropdown list itself still needs room for full language names, even
   though the trigger is now a compact code chip. */
/* The list still needs room for full language names, even though the trigger
   is a compact code chip. Border/shadow are set with the open state below. */
.dropdown-options { min-width: 190px; right: 0; left: auto; border-radius: 8px; background: var(--bg-card); }

/* The spinner */
.btn-primary .spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: var(--collapser-arrow); border-radius: 50%; animation: spin 0.7s linear infinite; }
.btn-primary.loading .spinner { display: inline-block; position: relative; top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }


/* HERO SECTION */
.hero-section { background: var(--bg-hero); padding: 6rem 0; border-bottom: 1px solid var(--border); }
.container { margin: 0 auto; padding: 0 2rem; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero-text h1 { color: var(--text-main); font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.07; margin-bottom: 1.5rem; }
.hero-text .highlight { color: var(--primary); }
.small-text{font-size: 0.75em;color: var(--text-muted);}
.hero-sub { color: var(--text-muted); font-size: 1.25rem; line-height: 1.6; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 1rem; }

/* MOCKUP WINDOW */
.mockup-window{background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);transition:transform .3s ease}
.mockup-window:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
.mockup-header { background: var(--bg-panel); padding: 12px 16px; display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
/* Status dot (Odoo connection etc). The 6px animated typing dot lives under
   .typing-dots .dot — scoped there so the two no longer collide. */
.dot { width: 10px; height: 10px; border-radius: 50%; }
/* Hero traffic lights: neutral, so they read as chrome rather than status. */
.dotHome { width: 10px; height: 10px; border-radius: 50%; background: var(--hover); }
.dotHome.red, .dotHome.yellow, .dotHome.green { background: var(--hover); }
.red { background: var(--bad); } .yellow { background: var(--warn); } .green { background: var(--ok); }
.mockup-body { padding: 24px; background: var(--bg-card); display: flex; flex-direction: column; gap: 16px; height: 250px; }
.mock-chat-bubble { padding: 12px; border-radius: 9px; width: 80%; font-size: 0.85rem; line-height: 1.45; }
.mock-chat-bubble.ai { background: var(--raised); border: 1px solid var(--line); color: var(--text-2); align-self: flex-start; }
.mock-chat-bubble.user { background: var(--primary); color: var(--on-primary); align-self: flex-end; width: 60%; font-weight: 500; }
.mock-line { height: 8px; background: var(--border); border-radius: 4px; margin-bottom: 6px; }
.mock-chat-bubble.user .mock-line { background: rgba(255,255,255,0.4); }
.long { width: 90%; } .short { width: 50%; } .medium { width: 70%; }
/* Tagged chip rather than loose blue text — same information, reads as a citation. */
.mock-source { display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size: 10px; color: var(--primary-hi); background: var(--primary-dim); border-radius: 5px; padding: 3px 7px; margin-top: 8px; }

/* FEATURES SECTION */
.features-section { padding: 5rem 0; background: var(--bg-body); }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.5rem; color: var(--text-main); }
.section-header p { color: var(--text-muted); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:2rem;transition:box-shadow 0.2s,transform .2s,border-color .2s}

.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--primary); }
/* Labelled tint block. Previously a saturated fill that rendered as an empty
   coloured slab until the i18n title resolved — now it carries the label itself. */
.icon-box { height: 48px; border-radius: 8px; display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500; margin-bottom: 1.5rem; }
.icon-box.blue { background: var(--tint-a); color: var(--primary-hi); }
.icon-box.purple { background: var(--tint-b); color: var(--ok); }
.icon-box.green { background: var(--tint-d); color: var(--data); }
.feature-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-main); }
.feature-card p { color: var(--text-muted); line-height: 1.5; margin-bottom: 1.5rem; }
.link-arrow { text-decoration: none; color: var(--primary); font-weight: 600; font-size: 0.9rem; }

/* ============================================================
   APP LAYOUT — the workspace

   Flat, not nested. The rail is a surface with a single dividing edge and the
   chat column sits straight on the ground; neither is a card. The old build
   drew a bordered, rounded box around the sidebar AND another around the chat
   AND another around the composer, which is three frames deep before any
   content — and because --sidebar-bg was undefined, the two panes rendered on
   the same colour anyway, so all that framing bought no separation.

   (.app-layout was also declared twice, as a grid here and a flex row further
   down, with the flex one silently winning. One declaration now.)
   ============================================================ */
.app-layout { display: flex; width: 100%; overflow: hidden; height: calc(100vh - var(--nav-height)); }
/* The app row is full-bleed: no container gutter, no top margin. */
#app-view.container { padding: 0; margin-top: 0 !important; max-width: none; }

/* Sidebar groups are bare — the metric cards inside them carry the surface. */
.sidebar .panel { background: transparent; border: none; padding: 0; border-radius: 0; margin-bottom: 1.25rem; }
.sidebar .panel h3 { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; }
/* The upload group needs no heading: the drop zone says what it is. */
.sidebar .panel h3[data-i18n="sidebar.upload"] { display: none; }

/* Metric card. Mono numerals so 12,480 and 86 align and read as machine output. */
.stat-box { background: var(--raised); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; margin-bottom: 6px;
            font-family: var(--font-mono); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--data); line-height: 1.15; }
.stat-box small { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; display: block; margin-top: 3px; }
.dropdown { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); }

/* UPLOAD AREA */
.upload-area { border: 1px dashed var(--border); background: var(--raised); padding: 2rem; text-align: center; border-radius: 9px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.upload-area:hover, .upload-area.dragover { border-color: var(--primary); background: var(--primary-dim); }
.status-text { padding-top: 15px; max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal; }
.lds-dual-ring, .lds-dual-ring:after { box-sizing: border-box; } .lds-dual-ring { float:left; padding-right: 25px; width: 20px; height: 20px; } .lds-dual-ring:after { content: " "; display: block; width: 16px; height: 16px; margin: 4px; border-radius: 50%; border: 6.4px solid currentColor; border-color: var(--border) transparent currentColor transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* CHAT AREA */
/* The chat column sits directly on the ground — no frame. The sidebar's
   border-right is the only division the two panes need. */
.chat-container { border: none; border-radius: 0; display: flex; flex-direction: column; background: transparent; overflow: hidden; height: 100%; flex: 1; min-width: 0; }

.message { max-width: 75%; padding: 12px 18px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; position: relative; word-wrap: break-word; margin-bottom: 10px; }
.message.user { min-width: 150px; text-align: right; align-self: flex-end; background-color: var(--chat-user-bg); color: var(--chat-user-text); border-bottom-right-radius: 3px; font-weight: 500; }
/* Single declaration — was defined twice with different backgrounds. */
.message.ai { align-self: flex-start; background-color: var(--chat-ai-bg); color: var(--text-2); border-bottom-left-radius: 3px; border: 1px solid var(--border); }
.message.ai strong { color: var(--text-main); font-weight: 600; }

.message.ai .small-text {font-size: 0.75em;color: var(--text-muted);}
.chat-input-area { padding: 1.5rem; border-top: 1px solid var(--border); display: flex; gap: 10px; background: var(--bg-card); }
.chat-input-area input { flex: 1; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-main); }

/* ============================================================
   DOC MANAGER MODAL

   Banded rather than one padded sheet: a raised header, a scrolling body, and
   a raised footer bar. The bands are what let the count and its action anchor
   at the bottom instead of trailing under the last row.
   ============================================================ */
.modal-content.banded { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 86vh; }
.modal-content.banded .modal-header-row { background: var(--raised); padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.modal-content.banded .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-content.banded .modal-footer { background: var(--raised); border-top: 1px solid var(--border); padding: 11px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 0 0 auto;
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }

/* Square outlined close, matching the navbar icon buttons. */
.btn-icon-sm { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted);
  width: 28px; height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.btn-icon-sm:hover { background: var(--hover); color: var(--text-main); }

/* Row / footer actions. Three weights, because the row's action changes with
   its state: neutral to stop work, filled to start it, outlined-red to destroy. */
.btn-row { font-family: var(--font-body); font-size: .78rem; font-weight: 600; padding: 5px 12px;
  border-radius: 7px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s; }
.btn-row.primary { background: var(--primary); color: var(--on-primary); }
.btn-row.primary:hover { background: var(--primary-hover); }
.btn-row.primary:disabled { opacity: .5; cursor: default; }
.btn-row.ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-row.ghost:hover { background: var(--hover); color: var(--text-main); }

.modal-header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.modal-actions {display: flex;justify-content: space-between;}
.modal-header-row h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--text-main); }
.close-icon { font-size: 1.5rem; line-height: 1; padding: 4px 8px; color: var(--text-muted); border-radius: 4px; transition: color 0.15s, background 0.15s; }
.close-icon:hover { color: var(--text-main); background: var(--border); text-decoration: none; }
.filter-bar { margin-bottom: 1rem; }
.filter-input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-main); box-sizing: border-box; }
/* Column labels, not a filled band — the modal body already provides the
   surface, and a second fill here just adds a stripe. */
.docs-table-header { display: grid; grid-template-columns: 1fr 100px; padding: 6px 4px; background: transparent; border: none; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--text-muted); }
/* The banded modal body does the scrolling, so the list needs no frame or
   inner scroller of its own — that was a box inside a box. */
.docs-list-container { border: none; background: transparent; }
.doc-row { display: grid; grid-template-columns: 1fr 100px; padding: 12px 4px; border-bottom: 1px solid var(--line-soft); align-items: center; transition: background 0.1s; color: var(--text-main); }
.doc-row:last-child { border-bottom: none; }
.doc-row .col-actions { display: flex; justify-content: flex-end; }
.doc-row:hover { background: var(--hover); }
/* Mono filenames: extensions and near-identical names are far easier to scan
   fixed-width. */
/* wrap + full-basis meta line so the sub-line sits under the filename rather
   than beside it in the same flex row */
.doc-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.85rem; }
.doc-name a { color: var(--text-main); text-decoration: none; }
.doc-name a:hover { color: var(--primary); }
/* Outlined, not filled: five delete buttons in a filled red were the loudest
   thing on the screen. Fills only on hover, when it's the actual target. */
.btn-delete { background: transparent; color: var(--bad); border: 1px solid var(--border); padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.btn-delete:hover { background: var(--bad); color: var(--on-bad); border-color: var(--bad); }
.doc-meta-sub{flex-basis:100%;font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal}

/* Indexing state, on the meta line rather than in a new column. A document
   that uploaded but produced zero chunks currently looks identical to a
   working one, and queries silently never match it. */
.doc-pill { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.doc-pill i { width: 5px; height: 5px; border-radius: 50%; display: block; background: currentColor; }
.doc-pill.ok { color: var(--ok); }
.doc-pill.warn { color: var(--warn); }
.doc-pill.bad { color: var(--bad); }

/* LOADING DOTS */
.typing-dots { display: flex; gap: 4px; padding: 4px; }
.typing-dots .dot { width: 6px; height: 6px; background: var(--text-muted); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-dots .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dots .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* UTILS */
.hidden { display: none !important; }
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background:var(--scrim); display:flex; align-items:center; justify-content:center; z-index:999; }
.modal-content { background: var(--bg-card); padding: 2.5rem; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.input-group { margin-bottom: 1rem; }
.input-group label { display: block; font-size: 0.875rem; color: var(--text-main); margin-bottom: 0.5rem; font-weight: 500; }
.input-group input { width: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; box-sizing: border-box; background: var(--bg-input); color: var(--text-main); }
.full-width { width: 100%; margin-top: 1rem; }

/* --- MARKDOWN RICH TEXT STYLES ---
   Themed off tokens now, so the per-theme overrides these rules used to need
   are gone: one declaration works in both modes. */
/* 1. Code Blocks */
.message pre{background:var(--raised);color:var(--text-main);border:1px solid var(--line);padding:12px;border-radius:8px;overflow-x:auto; margin:10px 0;font-family:var(--font-mono);font-size:0.9em;}
.message code{background:var(--hover);padding:2px 4px;border-radius:4px;font-family:var(--font-mono);font-size:0.9em;}
/* 2. Tables (Great for financial data) */ .message table{border-collapse:collapse;width:100%;margin:15px 0;font-size:0.9rem;}
.message th,.message td{border:1px solid var(--border);padding:8px 12px;text-align:left;}
.message th{background-color:var(--raised);font-weight:600;}
/* 3. Lists and Blockquotes */ .message ul,.message ol{margin-left:20px;margin-bottom:10px;}
.message blockquote{text-align:right; border-left:4px solid var(--primary);margin:10px 0;color:var(--text-muted);font-style:italic;background:var(--raised);padding:8px 15px;}

/* Sidebar
   Single declaration — previously split across two rules with conflicting
   widths and collapsed states. --sidebar-bg is now defined, so the rail reads
   as its own surface; one border-right divides it from the chat, replacing the
   full card outline. */
.sidebar{box-sizing:border-box;width:280px;min-width:280px;background:var(--sidebar-bg);border-right:1px solid var(--border);
         transition:width .3s ease,min-width .3s ease;display:flex;flex-direction:column;
         overflow-x:hidden;position:relative;padding:16px 14px}
.sidebar.collapsed{width:60px;min-width:60px;padding:16px 8px}
.sidebar.collapsed #toggle-sidebar-btn{transform:rotate(180deg)}
.sidebar.collapsed.sideBar { background-color: var(--bg-card); }

/* Knowledge Base header row: eyebrow + Manage link */
.sidebar .panel > div:first-child { margin-bottom: 10px; }

/* Footer line: version and the collapse control share it, so the arrow no
   longer floats over the middle of the rail edge. */
#version { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px;
           display: flex; justify-content: space-between; align-items: center;
           font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); text-align: left; }
.collapser { padding: 0; }
/* Collapsed, only the arrow survives — the version text is 255px wide and
   would otherwise be clipped by the 60px rail. */
.sidebar.collapsed #version { justify-content: center; }
.sidebar.collapsed .version-text { display: none; }
.btn-collapser{text-decoration:none;background:none;border:none;padding:0 2px;width:auto;height:auto;
               cursor:pointer;color:var(--muted);font-size:.8rem;line-height:1;transition:color .15s}
.btn-collapser:hover{color:var(--text-main);background:none}

/* Hide text content when collapsed */
.sidebar.collapsed h2,.sidebar.collapsed .panel,.sidebar.collapsed .doc-item,.sidebar.collapsed #app-version-display,.sidebar.collapsed .sidebar-footer{display:none;opacity:0}

/* ── Collapsed rail ───────────────────────────────────────────────────────
   Collapsing used to leave a 60px strip with nothing in it but the expand
   arrow. It now keeps the two counts and the two actions you would reopen the
   sidebar for, so the strip stays useful at a glance.
   ─────────────────────────────────────────────────────────────────────── */
.sidebar-mini { display: none; }
.sidebar.collapsed .sidebar-mini {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mini-btn {
    width: 36px; height: 36px; box-sizing: border-box; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--raised); color: var(--text-2);
    display: grid; place-items: center; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.mini-btn:hover { background: var(--hover); color: var(--text-main); border-color: var(--primary); }
.mini-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Same mono numerals as the expanded metric cards, just stacked tighter. */
.mini-stat { text-align: center; font-family: var(--font-mono); line-height: 1.1; }
.mini-stat b { display: block; font-size: .82rem; font-weight: 500; color: var(--data); letter-spacing: -0.02em; }
.mini-stat span { display: block; font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* The Main Chat Area (Fluid Width) */
main{flex:1;display:flex;flex-direction:column;position:relative}

/* History grid styles */
/* Container for the list (Scrollable Body) */
.history-grid{display:flex;flex-direction:column;overflow-y:auto;max-height:600px;border:1px solid var(--border);border-radius:8px;background:var(--surface-color)}

/* The Header Row (Stays at the top) */
.history-header{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:10px;padding:12px 15px;background:var(--sidebar-bg);border-bottom:2px solid var(--border);font-weight:700;color:var(--text-color);position:sticky;top:0;z-index:10}

/* Individual Data Rows */
.history-row{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:10px;padding:10px 15px;border-bottom:1px solid var(--border);align-items:center;font-size:.9rem;transition:background .2s}

/* Zebra Striping for readability */
.history-row:nth-child(even) { background-color: var(--raised); }

.history-row:hover { background-color: var(--hover); }

.filter-bar{display:flex;flex-direction:row;gap:10px;margin-bottom:15px;align-items:center;flex-wrap:nowrap}

.filter-group{display:flex;flex-direction:row;gap:10px;flex-wrap:nowrap;min-width:0}

.password {position: relative; display: inline-block; width:100%;}
.password .fa-eye {position: absolute;top: 70%;right: 10px;transform: translateY(-50%); cursor: pointer;}
.password .fa-eye-slash {position: absolute;top: 70%;right: 10px;transform: translateY(-50%);cursor: pointer;}

.sources-list a {color: var(--primary)}

/* ============================================================
   SOURCE CARDS
   Same information, same position under the answer — plus the passage that
   actually matched and its retrieval score. This is the reason to use Vault
   over a chatbot, and it used to render as a line of 10px blue link text.
   Degrades to a plain filename chip when the backend sends no snippet.
   ============================================================ */
.source-cards { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.source-cards .sources-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.source-card { display: flex; border: 1px solid var(--line); border-radius: 8px; background: var(--src-card-bg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s; }
.source-card:hover { border-color: var(--primary); }

/* Gutter: score as a numeral, and the same score as a fill height — the bar
   makes a weak match legible at a glance without reading the number. */
.source-card .src-gutter { width: 38px; flex: none; border-right: 1px solid var(--line); background: var(--src-gutter-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 0; }
.source-card .src-score { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: -0.02em; color: var(--data); }
.source-card .src-bar { width: 4px; flex: 1; min-height: 20px; border-radius: 3px; background: var(--hover); position: relative; overflow: hidden; }
.source-card .src-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--data); display: block; }

.source-card .src-body { padding: 8px 11px; min-width: 0; flex: 1; }
.source-card .src-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.source-card .src-name { font-family: var(--font-mono); font-size: .74rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.source-card .src-loc { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
.source-card .src-snippet { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.source-card .src-snippet mark { background: var(--primary-dim); color: var(--primary-hi); border-radius: 3px; padding: 1px 3px; }

/* Compact language chip. The trigger shows just the two-letter code (see
   dd.js); the full names and flags stay in the open list, which is where they
   are actually being compared. */
.dropdown-container{position:relative;width:auto;min-width:0;display:inline-block;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border); border-radius: 20px;}
.dropdown-selected{border:none;padding:5px 12px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .2s ease;border-radius:20px}
.dropdown-selected:hover{background:var(--hover)}
.lang-code{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-2)}
.flag-icon{width:24px;height:18px;flex-shrink:0}
.country-name{flex:1;font-size:13px;}
.arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--muted);transition:transform .2s ease}
.arrow.open{transform:rotate(180deg)}
/* Closed, this element is max-height:0 — but a border and a box-shadow still
   paint, so it rendered as a 2px rule hanging under the language chip and
   reading as an underline across the navbar. Both are applied only when open,
   which leaves it genuinely 0px tall the rest of the time. */
.dropdown-options{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);max-height:0;overflow:hidden;transition:max-height .2s ease;z-index:1000;border:0 solid var(--border);box-shadow:none;}
.dropdown-options.open{max-height:300px;overflow-y:auto;border-width:1px;box-shadow:var(--shadow)}
.dropdown-option{padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s ease;border-bottom:1px solid var(--line-soft)}
.dropdown-option:hover{background:var(--hover)}
.dropdown-option:last-child{border-bottom:none}
.dropdown-options::-webkit-scrollbar{width:6px}
.dropdown-options::-webkit-scrollbar-track{background:transparent}

.btnContainer{width:auto; display:flex; justify-content:space-between;}

/* Flat tab navigation */
.tab{display:flex;flex-wrap:wrap;background-color:var(--bg-card);border-bottom:2px solid var(--line)}
.tab button{flex:1;background-color:transparent;border:none;outline:none;cursor:pointer;padding:16px 20px;font-size:15px;font-weight:500;color:var(--text-muted);transition:all 0.2s ease;border-bottom:3px solid transparent;position:relative}
.tab button:hover {color: var(--text-main);}
/* outline:none above removes the browser ring; keyboard users get this one. */
.tab button:focus-visible{outline:2px solid var(--primary);outline-offset:-3px;color:var(--text-main)}
.tab button.active{color:var(--primary);border-bottom-color:var(--primary);background-color:transparent}

/* Flat tab content */
.tabcontent {display: none;padding: 30px 24px;background-color: var(--bg-card);}
.tabcontent.active {display: block;}
.tabcontent h3 {font-family:var(--font-display);font-size: 24px;font-weight: 700;color: var(--text-main);margin-bottom: 12px;}
.tabcontent p {font-size: 15px;line-height: 1.6;color: var(--text-2);}

/* NEW APPOROACH FOR TEXT BOX */
.timestamp {color: var(--text-muted);font-size: .72rem; line-height: 1; white-space: nowrap; position: absolute; top: -18px; left: 2px;}
.message.user .timestamp { left: auto; right: 2px; }

.content-container{display: flex;flex-direction: column;height: 100%;min-height:0;}
.chat-top{display:flex;justify-content:flex-end;padding:14px 24px 0;flex:0 0 auto}
.chat-top #clear-history-btn{font-size:.8rem;color:var(--text-muted);text-decoration:none;padding:0}
.chat-top #clear-history-btn:hover{color:var(--text-main)}
/* A thin, quiet scrollbar: it was hidden, which hid how long the conversation is. */
.chat-history{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;overflow-y:auto;overflow-x:hidden;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1.15rem}
.chat-history::-webkit-scrollbar{width:8px}
.chat-history::-webkit-scrollbar-track{background:transparent}
.chat-history::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.chat-history::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.chat-history:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* Composer: an inset card, not a full-width strip. The old border-top ran the
   whole width and read as a second divider competing with the sidebar edge. */
/* box-sizing is not reset globally in this stylesheet, so width:100% plus
   padding would push the composer past the edge of its column. */
.box-container{box-sizing:border-box;width:100%;display:flex;justify-content:center;padding:0 1.5rem 1.25rem;border-top:none;background:transparent;color:var(--text-main)}
.box{box-sizing:border-box;position:relative;border-radius:12px;border:1px solid var(--border);background:var(--panel);width:100%;padding:4px 12px 0;transition:border-color .15s}
.box:focus-within{border-color:var(--primary)}

  /* Mirror + textarea share identical text styles */
#mirror,#user-input{width:100%;padding-top:12px;font-size:15px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
#mirror{position:absolute;inset:0;overflow-y:auto;pointer-events:none;color:transparent;border-radius:12px}
#mirror mark{background:var(--primary-dim);color:transparent;border-radius:4px;position:relative;left:6px}
#user-input{position:relative;display:block;border:none;outline:none;border-radius:12px;resize:vertical;background:transparent;color:var(--text-main);caret-color:var(--collapser-arrow);min-height:100px}
#user-input::placeholder{color:var(--muted)}
.footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0 10px;border-top:1px solid var(--line-soft)}

/* Send button. There was no visible submit control — the textarea relied on
   Enter alone, which is invisible to anyone who hasn't been told. */
.btn-send{background:var(--primary);color:var(--on-primary);border:1px solid transparent;border-radius:8px;padding:6px 14px;font-family:var(--font-body);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.btn-send:hover{background:var(--primary-hover)}
.btn-send:disabled{opacity:.5;cursor:default}

/* The three footer toggles keep their controls and their behaviour — each is
   given a chip outline and a state dot, so they read as settings with a
   visible on/off rather than as loose text. The whole chip stays clickable
   because the control sits inside its <label>. */
.footer .footer-toggles{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.footer .footer-toggles > label,
.footer .footer-toggles > #odooIndicator{border:1px solid var(--line);border-radius:20px;padding:4px 11px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);background:var(--raised);
  white-space:nowrap;transition:border-color .15s}
.footer .footer-toggles > label:hover,
.footer .footer-toggles > #odooIndicator:hover{border-color:var(--primary)}

/* Checkbox rendered as the chip's state dot. */
.footer .footer-toggles input[type="checkbox"]{appearance:none;-webkit-appearance:none;
  width:6px;height:6px;border-radius:50%;background:var(--muted);border:none;
  margin:0 7px 0 0;flex:0 0 auto;cursor:pointer;transition:background .15s}
.footer .footer-toggles input[type="checkbox"]:checked{background:var(--ok)}
.footer .footer-toggles input[type="checkbox"]:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* The Chat-with-AI switch collapses to the same dot so all three chips match. */
.footer .footer-toggles .toggle-switch{width:6px;height:6px;flex:0 0 auto}
.footer .footer-toggles .toggle-slider{border-radius:50%;background:var(--muted)}
.footer .footer-toggles .toggle-slider::before{display:none}
.footer .footer-toggles input:checked + .toggle-slider{background:var(--ok)}
.footer .footer-toggles #chat-mode-switch-label{margin-left:7px !important}
#odoo-form{display: none !important;}


/* ACCORDION */
.accordion-item { border-bottom: 1px solid var(--line-soft); overflow: hidden; }
/* Style the clickable header */
summary { list-style: none; padding: 12px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
summary:hover { background: var(--hover); }
/* Custom Arrow using CSS */
summary::after { content: '▼'; font-size: 0.8rem; transition: transform 0.3s; }
details[open] summary::after { transform: rotate(180deg); }
/* The Smooth Animation Trick */
.content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; padding: 0 12px; max-height: 300px; }
details[open] .content { grid-template-rows: 1fr; padding: 12px; }
.content > div { overflow:scroll; font-size: medium; max-width: 800px; }

/* HELP */
  .guide-container {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-main);
    margin: 0 auto;
    padding: 15px;
  }

  .guide-container h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 8px;
  }

  .guide-container h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 1.1rem;
  }

  .guide-container p {
    margin: 8px 0;
  }

  .guide-container ul, .guide-container ol {
    padding-left: 20px;
    margin: 10px 0;
  }

  .guide-container li {
    margin-bottom: 8px;
  }

  .guide-container blockquote {
    background: var(--raised);
    border-left: 4px solid var(--primary);
    margin: 20px 0;
    padding: 10px 15px;
    font-style: italic;
  }

  .guide-container hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: 20px 0;
  }

  .tag-check { color: var(--ok); font-weight: bold; }
  .tag-x { color: var(--bad); font-weight: bold; }
  .tip-box {
    background: var(--primary-dim);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
  }

/* The dashboard trigger is a .btn-icon. This rule sits later in the file, so
   its padding used to override .btn-icon's, inflating a 34x34 square button
   into a ~66x54 rectangle beside the 34x34 theme toggle. Sizing now comes from
   .btn-icon alone. */
.stat-trigger {
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ========================================
   TOKEN USAGE DASHBOARD STYLES
======================================== */

/* Dashboard Modal */
.dashboard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--scrim);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.dashboard-modal.active {
    display: flex;
}

.dashboard-container {
    background: var(--bg-body);
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* Dashboard Header */
.dashboard-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dashboard-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.dashboard-title h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.dashboard-tabs {
    display: flex;
    gap: 10px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--bg-panel);
    color: var(--primary);
}

.dashboard-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

.year-selector {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-main);
    cursor: pointer;
}

/* Segmented range control. Was styled but never rendered until now — the
   markup for it did not exist. */
.time-filter {
    display: flex;
    gap: 2px;
    background: var(--raised);
    border: 1px solid var(--border);
    padding: 3px;
    border-radius: 9px;
}

.time-filter button {
    padding: 5px 11px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}

.time-filter button:hover:not(.active) {
    color: var(--text-main);
}

.time-filter button.active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 500;
}

.time-filter button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.export-btn {
    padding: 7px 16px;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s;
}

.export-btn:hover {
    background: var(--primary-hover);
}

.close-dashboard {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

/* Dashboard Content */
.dashboard-content {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    background: var(--bg-body);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Stat cards: the one place the redesign departs from the current structure.
   The 4px strip across the top becomes a 3px edge down the left, so the colour
   sits beside the number rather than heading the whole card; the tinted icon
   is dropped so the value is the only coloured element — which is what you
   actually scan for. Three elements per card instead of five. */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 18px 18px 18px 22px;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.stat-card.tokens-in::before {
    background: var(--tokens-in-color);
}

.stat-card.tokens-out::before {
    background: var(--tokens-out-color);
}

.stat-card.storage::before {
    background: var(--storage-color);
}

.stat-card.total::before {
    background: var(--total-tokens-color);
}

.stat-title {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
}

.stat-number {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 8px;
}

.stat-card.tokens-in .stat-number { color: var(--tokens-in-color); }
.stat-card.tokens-out .stat-number { color: var(--tokens-out-color); }
.stat-card.storage .stat-number { color: var(--storage-color); }
.stat-card.total .stat-number { color: var(--total-tokens-color); }

.stat-change {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-change em { font-style: normal; }

.stat-change.positive em {
    color: var(--status-normal);
}

.stat-change.negative em {
    color: var(--status-high);
}

/* Charts Section */
.charts-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
}

.chart-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 20px;
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.tokens-in {
    background: var(--tokens-in-color);
}

.legend-color.tokens-out {
    background: var(--tokens-out-color);
}

/* Bar Chart */
.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 250px;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.bar-chart::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: repeating-linear-gradient(
        to top,
        var(--chart-grid) 0px,
        var(--chart-grid) 1px,
        transparent 1px,
        transparent 50px
    );
    pointer-events: none;
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    position: relative;
}

.bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.bar {
    width: 20px;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.bar.tokens-in {
    background: var(--tokens-in-color);
}

.bar.tokens-out {
    background: var(--tokens-out-color);
}

.bar:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.bar-group--active .bar {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.bar-group--active .month-label {
    color: var(--text-main);
    font-weight: 700;
}

.month-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
    text-transform: uppercase;
}

/* Donut Chart */
.donut-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
}

.donut-chart svg {
    transform: rotate(-90deg);
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-percentage {
    font-family: var(--font-mono);
    font-size: 2.3rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-main);
    line-height: 1;
}

.donut-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.ratio-stats {
    width: 100%;
}

.ratio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ratio-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ratio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ratio-dot.tokens-in {
    background: var(--tokens-in-color);
}

.ratio-dot.tokens-out {
    background: var(--tokens-out-color);
}

.ratio-name {
    font-size: 0.9rem;
    color: var(--text-main);
}

.ratio-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
}

.storage-progress {
    margin-top: 20px;
}

.storage-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.storage-label-text {
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.storage-value {
    font-family: var(--font-mono);
    color: var(--storage-color);
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--progress-bg);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--storage-color);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Monthly Breakdown Table */
.breakdown-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.breakdown-filters {
    display: flex;
    gap: 2px;
    background: var(--raised);
    border: 1px solid var(--border);
    padding: 3px;
    border-radius: 8px;
}

.breakdown-filters button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.breakdown-filters button.active {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 500;
}

.breakdown-table {
    width: 100%;
    border-collapse: collapse;
}

.breakdown-table thead {
    background: var(--bg-panel);
}

.breakdown-table th {
    padding: 12px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--border);
}

.breakdown-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.breakdown-table tbody tr:hover {
    background: var(--bg-panel);
}

.breakdown-table td {
    padding: 15px 12px;
    color: var(--text-main);
}

.month-cell {
    font-weight: 600;
}

.tokens-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.token-bar {
    height: 6px;
    border-radius: 3px;
    min-width: 60px;
    max-width: 120px;
}

.token-bar.tokens-in {
    background: var(--tokens-in-color);
}

.token-bar.tokens-out {
    background: var(--tokens-out-color);
}

.storage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.storage-badge.normal {
    background: var(--tint-b);
    color: var(--status-normal);
}

.storage-badge.moderate {
    background: var(--tint-c);
    color: var(--status-moderate);
}

.storage-badge.high {
    background: var(--tint-bad);
    color: var(--status-high);
}

.trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.trend.up {
    color: var(--status-normal);
}

.trend.down {
    color: var(--status-high);
}

/* Responsive */
@media (max-width: 968px) {
    .charts-section {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-content {
        padding: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .bar-chart {
        height: 200px;
    }

    .breakdown-table {
        font-size: 0.85rem;
    }

    .dashboard-controls {
        flex-wrap: wrap;
    }
}


/* Responsive design */
@media (max-width: 768px) {
    .tab {
        flex-wrap: wrap;
    }

    .tab button {
        flex: 1 1 50%;
        font-size: 14px;
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .tab button {
        flex: 1 1 100%;
    }
}


/* ============================================================
   RESPONSIVE

   Three things drive the breakpoints:
     ~1080px  the wordmark stops fitting beside the nav controls (above)
     ~900px   the landing hero's two columns stop working side by side
     ~768px   the 280px sidebar leaves the chat unusably narrow, and the nav
              controls no longer fit on one row at all

   The rule throughout is to re-lay-out rather than hide: the nav becomes a
   dropdown holding the same controls, and the sidebar collapses to the mini
   rail it already has, turned on its side.
   ============================================================ */

/* The hamburger only exists below 768px. */
.nav-menu-btn { display: none; }

@media (max-width: 900px) {
    /* Hero: one column, and the decorative mockup goes last and full width. */
    .hero-layout { grid-template-columns: 1fr; gap: 2rem; }
    .hero-section { padding: 3rem 0; }
    .hero-text h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .hero-sub { font-size: 1.05rem; }
    .container { padding: 0 1.25rem; }
    .features-section { padding: 3rem 0; }
    .section-header { margin-bottom: 2rem; }
    .cards-grid { gap: 1.25rem; }
}

@media (max-width: 768px) {
    /* ── Navbar ───────────────────────────────────────────────────────── */
    .navbar { padding: 0 1rem; position: relative; }
    .nav-container { gap: 10px; }
    .nav-menu-btn { display: inline-flex; margin-right: 0; flex: 0 0 auto; }

    /* The wordmark comes back below 768px. It was hidden from 1080px down
       because it could not share the bar with the full control row — but here
       that row is behind the hamburger, so the space exists again. Scaled to
       fit the narrowest phone alongside the mark and the menu button. */
    .logo-word { display: inline; }
    .logo { font-size: 1rem; gap: 8px; min-width: 0; }
    .logo-mark { width: 30px; height: 30px; }
    .logo-word { overflow: hidden; text-overflow: ellipsis; }

    /* .nav-links becomes a panel under the bar. Every control it held is still
       in it — nothing is dropped, it just stacks. */
    .nav-links {
        display: none;
        position: absolute; top: 100%; right: 1rem; left: 1rem;
        flex-direction: column; align-items: stretch; gap: 10px;
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: 12px; box-shadow: var(--shadow);
        padding: 14px; z-index: 200;
    }
    .nav-links.open { display: flex; }
    .nav-links > .nav-mobile-only { display: flex; }

    /* The panel carries the account-level controls: language, theme, settings,
       documents, upload, logout. The usage dashboard, the administration view
       and the greeting stay desktop-only — their grids need the width. */
    .nav-links #dashboard-trigger,
    .nav-links #admin-btn,
    .nav-links #user-display { display: none !important; }
    .nav-links #settings-btn,
    .nav-links .nav-mobile-only { justify-content: flex-start; }

    /* One row shape for every item: same width, height, radius and border, so
       the panel reads as a list rather than three unrelated controls. */
    .nav-links > * {
        width: 100%; margin-right: 0 !important; box-sizing: border-box;
        min-height: 44px; border: 1px solid var(--border); border-radius: 10px;
        background: var(--bg-card); color: var(--text-main);
        font-family: var(--font-body); font-size: .9rem; font-weight: 500;
        display: flex; align-items: center; padding: 0 14px; gap: 10px;
    }
    .nav-links > *:hover { background: var(--hover); }

    /* Each control then only needs its own internals aligned to that row. */
    .nav-links .btn-icon { height: auto; justify-content: flex-start; }
    .nav-links .btn-icon::after { content: attr(title); font-family: inherit; font-size: inherit; font-weight: inherit; }
    .nav-links #logout-btn { justify-content: flex-start; }

    /* The language picker is the row itself: the container supplies the frame,
       so its inner trigger drops its own border, padding and radius. */
    .dropdown-container { position: relative; }
    .dropdown-selected { flex: 1; min-height: 42px; padding: 0; border-radius: 0;
                         background: transparent; justify-content: space-between; }
    .dropdown-selected:hover { background: transparent; }
    .dropdown-options { left: 0; right: 0; min-width: 0; }

    /* ── Workspace ────────────────────────────────────────────────────── */
    /* Stack: the sidebar becomes a strip across the top, carrying the same
       mini rail used when it is collapsed — counts, document manager, upload. */
    .app-layout { flex-direction: column; height: calc(100dvh - var(--nav-height)); }
    .sidebar, .sidebar.collapsed {
        width: 100%; min-width: 0; flex: 0 0 auto;
        border-right: none; border-bottom: 1px solid var(--border);
        padding: 8px 14px;
    }
    .sidebar .panel, .sidebar #version { display: none; }
    /* Stated outright rather than left to the .panel rule above: uploading is a
       desktop task, and the drop zone is a big dashed box that would otherwise
       eat the top third of a phone screen. Belt and braces — if that panel is
       ever unhidden, this still holds. */
    .sidebar .upload-area, .sidebar file-uploader, .sidebar #upload-status { display: none !important; }
    .sidebar .sidebar-mini, .sidebar.collapsed .sidebar-mini {
        display: flex; flex-direction: row; align-items: center;
        justify-content: center; gap: 28px; width: 100%;
    }
    /* Counts only. Managing documents and uploading are desktop tasks, so the
       two buttons that open them are not offered here. */
    .sidebar-mini #mini-manage,
    .sidebar-mini #mini-upload { display: none; }
    .sidebar-mini .mini-usage { display: none; }
    /* Laid out as "9 Docs" rather than stacked — the strip is full width, so
       the label sits beside the numeral instead of under it. */
    .mini-stat { display: flex; align-items: baseline; gap: 6px; }
    .mini-stat span { margin-top: 0; font-size: .68rem; }

    .chat-container { flex: 1 1 auto; min-height: 0; }
    .chat-history { padding: 1rem .9rem; gap: .85rem; }
    .message { max-width: 88%; font-size: .9rem; padding: 10px 14px; }
    .chat-top { padding: 10px 14px 0; }
    .box-container { padding: 0 .9rem .9rem; }
    .box { padding: 4px 10px 0; }
    #user-input { min-height: 68px; font-size: 16px; } /* 16px stops iOS zooming on focus */
    .footer { flex-wrap: wrap; gap: 8px; }
    .footer .footer-toggles { gap: 5px; }
    .btn-send { width: 100%; justify-content: center; }

    /* ── Modals ───────────────────────────────────────────────────────── */
    .modal { padding: 12px; align-items: flex-start; padding-top: 24px; }
    .modal-content { padding: 1.25rem; width: 100% !important; }
    .modal-content.banded { max-height: 88dvh; }
    .modal-content.banded .modal-header-row,
    .modal-content.banded .modal-body,
    .modal-content.banded .modal-footer { padding-left: 14px; padding-right: 14px; }
    .modal-content.banded .modal-footer { flex-wrap: wrap; }
    .doc-row, .docs-table-header { grid-template-columns: 1fr 84px; }

    /* The document browser's own responsive rules live in its stylesheet —
       that sheet is injected at runtime and so lands after this one, which
       would beat any override written here. */

    /* ── Dashboard ────────────────────────────────────────────────────── */
    .dashboard-header { padding: 12px 14px; }
    .dashboard-controls { flex-wrap: wrap; gap: 8px; width: 100%; }
    .dashboard-title h2 { font-size: 1.15rem; }
}

@media (max-width: 480px) {
    .hero-actions { flex-direction: column; }
    .hero-actions button { width: 100%; }
    .message { max-width: 94%; }
    .doc-row, .docs-table-header { grid-template-columns: 1fr 72px; }
    .logo { font-size: .95rem; }
}


/* ── Plan usage bars (sidebar + collapsed rail) ─────────────────────────── */
/* The fill reveals a fixed green→amber→red gradient laid across the whole
   track, so the colour at the tip reads as the percentage. Colours are the
   theme's own status tokens, so dark mode follows automatically. */
:root{--usage-ok:var(--ok);--usage-warn:var(--warn);--usage-over:var(--bad);--usage-gradient:linear-gradient(90deg,var(--usage-ok) 0%,var(--usage-ok) 45%,var(--usage-warn) 78%,var(--usage-over) 100%)}
.plan-box{background:var(--raised);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin-top:6px}
.plan-box.hidden{display:none}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.plan-name{font-family:var(--font-mono);font-size:.64rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.plan-month{font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.usage-row{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.usage-row span:last-child{color:var(--text-main)}
.usage-bar{height:4px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:3px}
.usage-bar i,.mini-usage i{display:block;height:100%;width:0;border-radius:3px;transition:width .4s ease,background .3s}
.usage-bar i{background-repeat:no-repeat;background-position:left center}
.usage-note{font-size:.68rem;line-height:1.35;margin-top:6px;color:var(--text-muted)}
.usage-note:empty{display:none}
.usage-note.lvl-warn{color:var(--usage-warn)}
.usage-note.lvl-over{color:var(--usage-over)}
.mini-usage{display:flex;flex-direction:column;gap:3px;width:36px}
.mini-usage i{height:3px;width:100%;background:var(--border)}


/* ══════════════════════════════════════════════════════════════════════════
   Admin cards, Cuentas grid, request pills (ported from tenacity-lex)
   ══════════════════════════════════════════════════════════════════════════ */
.admin-card{background:var(--bg-panel);padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid var(--border)}
.admin-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.admin-card-head h4{margin:0 0 2px}
.admin-card-head small{color:var(--text-muted);display:block;line-height:1.35}
.admin-inline{display:flex;align-items:center;gap:8px;white-space:nowrap}
.admin-inline input[type=month],.admin-select{padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-main);font:inherit;font-size:.85rem}
.admin-editor{background:var(--bg-input);padding:12px 14px;border-radius:6px;margin-bottom:14px;border:1px solid var(--border)}
.admin-editor h5{margin:0 0 10px;font-size:.95rem}
.admin-form-grid{display:grid;gap:10px;margin-bottom:10px}
.admin-form-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.admin-form-grid label,.admin-form-full{display:flex;flex-direction:column;gap:4px;min-width:0}
.admin-form-full{margin-bottom:10px}
.admin-form-grid small,.admin-form-full small{color:var(--text-muted);font-size:.75rem}
.admin-form-grid input,.admin-form-grid select,.admin-form-full input{width:100%;padding:8px;box-sizing:border-box;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-main);font:inherit}
.admin-form-actions{display:flex;gap:10px;align-items:center}
.admin-empty{padding:14px;color:var(--text-muted)}
.admin-empty.err{color:var(--bad)}
.cell-strong{font-weight:600}
.cell-muted{color:var(--text-muted)}
.cell-sub{font-size:.75rem;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-sub.lvl-warn{color:var(--warn)}
.cell-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-row.grid-cuentas .cell-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.acct-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.acct-badge.st-active{background:var(--tint-b);color:var(--ok);border-color:var(--ok)}
.acct-badge.st-limit_reached{background:var(--tint-c);color:var(--warn);border-color:var(--warn)}
.acct-badge.st-suspended{background:var(--tint-bad);color:var(--bad);border-color:var(--bad)}
.acct-badge.st-demo_expired{background:var(--hover);color:var(--text-muted);border-color:var(--border)}
.acct-badge.st-demo{background:var(--primary);color:var(--on-primary);margin-left:6px;font-size:.66rem;padding:1px 6px}
.acct-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.78rem;color:var(--text-muted);user-select:none}
.acct-toggle .acct-switch{width:36px;height:20px}
.acct-toggle .acct-toggle-txt{min-width:16px;font-weight:600}
.acct-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.acct-btn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-main);font:600 .78rem var(--font-body);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.acct-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--hover)}
.acct-btn.is-on{border-color:var(--warn);color:var(--warn)}
.acct-btn.danger{padding:0 8px;color:var(--text-muted)}
.acct-btn.danger:hover{border-color:var(--bad);color:var(--bad);background:var(--tint-bad)}
.acct-usage{display:grid;grid-template-columns:52px 1fr 36px;align-items:center;gap:6px;font-size:.72rem;margin-top:4px}
.acct-usage-label{color:var(--text-muted)}
.acct-usage .usage-bar{display:block;height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:0}
.acct-usage .usage-bar i{display:block;height:100%;border-radius:2px;background-repeat:no-repeat;background-position:left center}
.acct-usage-val{text-align:right;font-variant-numeric:tabular-nums}
.acct-request{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 8px}
.tab-pill{display:inline-block;margin-left:6px;min-width:18px;padding:0 6px;border-radius:999px;background:var(--bad);color:var(--on-bad);font-size:.7rem;font-weight:700;line-height:18px;text-align:center;vertical-align:middle}
#admin-btn{position:relative}
.nav-count{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--bad);color:var(--on-bad);font-size:.65rem;font-weight:700;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg-card)}

/* ══════════════════════════════════════════════════════════════════════════
   Locked account: the padlock, the sealed controls, the sign, the notices
   ══════════════════════════════════════════════════════════════════════════ */
body.account-locked .box{border-style:dashed;opacity:.55;min-height:0}
body.account-locked.lock-done .box{display:none}
body.account-locked .box-container{flex-wrap:wrap}
.notice-overlay,.account-lock-overlay{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim);backdrop-filter:blur(7px) saturate(.9);-webkit-backdrop-filter:blur(7px) saturate(.9);animation:lockFadeIn .25s ease both}
@keyframes lockFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lockFadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.account-lock-dialog{position:relative;width:min(680px,100%);max-height:90vh;display:flex}
.notice-dialog{position:relative;width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:14px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow);animation:lockFadeInUp .35s ease both}
.notice-dialog>h3{margin:0;padding-right:34px;font-size:1.05rem}
.account-notices-bar{display:flex;align-items:center;gap:10px;margin:10px 190px 0 20px;padding:9px 14px;border:1px solid var(--border);border-left:4px solid var(--ok);border-radius:10px;background:var(--bg-card);font-size:.9rem}
.account-notices-bar .bar-icon{font-size:1.05rem;line-height:1}
.account-notices-bar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.account-notices-bar .btn-text{white-space:nowrap;color:var(--primary);font-weight:600;text-decoration:none}
@media (max-width:820px){.account-notices-bar{margin:44px 12px 0}}
.account-lock-dialog .account-placard{width:100%;margin:0;max-height:none;box-shadow:var(--shadow);animation:lockFadeInUp .35s ease both}
.notice-close,.account-lock-close{position:absolute;top:8px;right:10px;z-index:1;width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:1.5rem;line-height:1;cursor:pointer}
.notice-close:hover,.account-lock-close:hover{background:var(--hover);color:var(--text-main)}
.account-lock-bar{display:flex;align-items:center;gap:10px;width:90%;margin:0 auto;padding:10px 14px;border:1.5px dashed var(--warn);border-radius:12px;background:var(--bg-card);font-size:.9rem}
.account-lock-bar .bar-icon{font-size:1.1rem;line-height:1}
.account-lock-bar .bar-sub{color:var(--text-muted);font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-lock-bar .btn-text{white-space:nowrap;color:var(--primary);font-weight:600;text-decoration:none}
@media (max-width:640px){.account-lock-bar{flex-wrap:wrap}.account-lock-overlay{padding:10px;align-items:flex-end}}
.eaten{visibility:hidden !important;pointer-events:none !important}
/* A control under the padlock: jolts, dims and fades. */
.struck{animation:struck .5s cubic-bezier(.3,.9,.4,1) forwards;transform-origin:center 20%;position:relative}
@keyframes struck{0%{transform:none;filter:none;opacity:1}12%{transform:translateY(4px) scale(1.02,.95)}30%{transform:translateY(2px)}55%{transform:translateY(3px);filter:blur(.4px) grayscale(.6);opacity:.7}100%{transform:translateY(8px) scale(.96);filter:blur(2px) grayscale(1);opacity:0}}
.account-placard{display:flex;gap:16px;align-items:flex-start;width:90%;margin:6px auto 0;max-height:46vh;overflow:auto;padding:16px 18px;border:1.5px solid var(--warn);border-radius:12px;background:var(--bg-card);box-shadow:0 2px 12px var(--border);animation:lockFadeInUp .5s ease both}
.account-placard .placard-icon{font-size:2rem;line-height:1}
.account-placard h3{margin:0 0 6px;font-size:1.05rem}
.account-placard p{margin:0 0 8px;color:var(--text-main);line-height:1.45}
.account-placard .placard-sub,.account-placard .placard-foot{font-size:.8rem;color:var(--text-muted)}
.account-placard .placard-actions{display:flex;gap:8px;align-items:flex-end;margin:8px 0}
.account-placard textarea{flex:1;min-width:0;resize:vertical;font:inherit;font-size:.85rem;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text-main)}
.account-placard .placard-sent{margin:8px 0;color:var(--ok);font-weight:600}
@media (max-width:640px){.account-placard{flex-direction:column;gap:8px}.account-placard .placard-actions{flex-direction:column;align-items:stretch}}
.account-notices{display:flex;flex-direction:column;gap:10px;overflow:auto}
.account-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);animation:lockFadeInUp .4s ease both}
.account-notice.ok{border-left:4px solid var(--ok)}
.account-notice.no{border-left:4px solid var(--warn)}
.account-notice .notice-icon{font-size:1.3rem;line-height:1.2}
.account-notice .notice-body{flex:1;min-width:0;font-size:.9rem}
.account-notice .notice-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.account-notice .notice-reply{margin:6px 0 0;padding:8px 10px;border-radius:6px;background:var(--bg-panel);white-space:pre-wrap;line-height:1.4}
.account-notice .notice-ok{align-self:center;white-space:nowrap}

/* ── The padlock ── */
#vault-lock{position:fixed;left:0;top:0;width:88px;height:110px;z-index:9999;pointer-events:none;transition:transform .45s cubic-bezier(.45,.05,.35,1);will-change:transform}
#vault-lock.leave{transition-duration:.7s;transition-timing-function:cubic-bezier(.5,0,.8,.4)}
#vault-lock .vl-shadow{position:absolute;left:14px;bottom:0;width:60px;height:12px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(3px);transform:scale(.6);opacity:.5;transition:transform .16s ease-in,opacity .16s}
#vault-lock.snap .vl-shadow{transform:scale(1);opacity:.85}
/* Shackle: an inverted U of brushed steel, raised while open. */
#vault-lock .vl-shackle{position:absolute;left:22px;top:6px;width:44px;height:40px;border:9px solid #b9c2cf;border-bottom:none;border-radius:22px 22px 0 0;box-sizing:border-box;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 40%);transform:translateY(-12px) rotate(-8deg);transform-origin:right bottom;animation:vl-hover 1.4s ease-in-out infinite;transition:transform .16s cubic-bezier(.6,0,.9,.4)}
#vault-lock.snap .vl-shackle{animation:none;transform:translateY(0) rotate(0)}
@keyframes vl-hover{0%,100%{transform:translateY(-12px) rotate(-8deg)}50%{transform:translateY(-16px) rotate(-10deg)}}
/* Body: dark steel block with a keyhole. */
#vault-lock .vl-body{position:absolute;left:9px;top:40px;width:70px;height:56px;border-radius:10px;background:linear-gradient(180deg,#4b5566 0%,#2c3442 55%,#1c222d 100%);box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.35);transition:transform .16s}
#vault-lock.snap .vl-body{animation:vl-seat .32s cubic-bezier(.4,0,.2,1)}
@keyframes vl-seat{0%{transform:none}40%{transform:translateY(3px) scale(1.03,.97)}100%{transform:none}}
#vault-lock .vl-keyhole{position:absolute;left:50%;top:18px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#0b0e14;box-shadow:inset 0 1px 2px rgba(255,255,255,.15)}
#vault-lock .vl-keyhole::after{content:"";position:absolute;left:4px;top:9px;width:4px;height:12px;border-radius:0 0 2px 2px;background:#0b0e14}
#vault-lock .vl-say{position:absolute;left:100px;top:38px;padding:5px 10px;border-radius:12px;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);font:700 .82rem var(--font-body);white-space:nowrap;box-shadow:var(--shadow)}
@media (max-width:640px){#vault-lock .vl-say{left:auto;right:-8px;top:-30px}}


/* ══════════════════════════════════════════════════════════════════════════
   Admin modal: scrollable tab panels; Conexión IA card (providers/models/keys)
   ══════════════════════════════════════════════════════════════════════════ */
.llm-top{display:grid;grid-template-columns:260px 1fr;gap:10px 16px;align-items:end;margin-bottom:12px}
.llm-top label{display:flex;flex-direction:column;gap:4px}
.llm-top label small{color:var(--text-muted);font-size:.75rem}
.llm-top .llm-check{flex-direction:row;align-items:center;gap:8px;font-size:.85rem;color:var(--text-main);padding-bottom:6px}
.llm-top #llm-order{grid-column:1/-1}
.llm-row{padding:10px 8px;align-items:center}
.llm-row>div{min-width:0}
.llm-row input[type=text],.llm-row input[type=password],.llm-row select{width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-main);font:inherit;font-size:.85rem}
.llm-row input::placeholder{color:var(--text-muted);font-size:.8rem}
.llm-mrow,.llm-keywrap{display:flex;gap:6px;align-items:center}
.llm-enable{display:flex;align-items:center;gap:6px;cursor:pointer}
.llm-test{justify-content:flex-start;flex-wrap:wrap;gap:6px 8px}
.llm-test .btn-icon{font-size:.78rem;padding:4px 8px;width:auto;height:auto}
.llm-res{font-size:.76rem;color:var(--text-muted);max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llm-res.ok{color:var(--ok)}
.llm-res.err{color:var(--bad)}
.llm-sub{margin:14px 0 6px;font-size:.9rem}
.llm-status{margin-top:8px;min-height:1em}
.llm-status.ok{color:var(--ok)}
.llm-status.err{color:var(--bad)}
/* Attempt order chips: position 1 is the primary. */
.llm-order-wrap{grid-column:1/-1}
.llm-order-wrap>small{display:block;color:var(--text-muted);font-size:.75rem;margin-bottom:5px}
.llm-order-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.llm-order-item{display:inline-flex;align-items:center;gap:6px;padding:3px 5px 3px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg-card);font-size:.82rem}
.llm-order-item.first{border-color:var(--primary)}
.llm-order-item .ord-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary);font-size:.72rem}
.llm-order-item .ord-primary{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.llm-order-item .ord-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0 2px;line-height:1;font-size:.8rem;border-radius:4px}
.llm-order-item .ord-btn:hover:not([disabled]){color:var(--primary);background:var(--hover)}
.llm-order-item .ord-btn[disabled]{opacity:.3;cursor:default}
.llm-order-off{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;border:1px dashed var(--border);background:transparent;color:var(--text-muted);font-size:.78rem;text-decoration:line-through}


/* ── Facturación grids ─────────────────────────────────────────────────────── */
.doc-row.grid-accounts .acct-usage{margin-top:2px}
.admin-select{padding:6px 8px;border-radius:4px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-main);font:inherit;font-size:.82rem;width:100%;box-sizing:border-box}


/* ── Scanner button (sidebar upload panel) ─────────────────────────────────── */
.scan-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--border);border-radius:999px;background:var(--raised);color:var(--text-main);font:600 .8rem var(--font-body);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.scan-pill:hover{border-color:var(--primary);color:var(--primary);background:var(--hover)}
.scan-pill svg{flex:none}
.scan-pill.hidden{display:none}
/* On a phone the composer is tight and this is the button that belongs there:
   keep the icon, drop the label. */
@media (max-width:640px){.scan-pill span{display:none}.scan-pill{padding:6px 10px}}


/* ══════════════════════════════════════════════════════════════════════════
   Admin modal layout — one place for the box model and every table's columns.

   The overflow this replaces had three causes: grid cells default to
   min-width:auto (so a long email or a wide select pushed the row past the
   card, and the clipped result read as cells overlapping), the modal's inline
   width is a content box that its 2.5rem padding sits outside of, and the
   Users table sized four columns with bare 1fr's. So: border-box and tighter
   padding here, min-width:0 on every cell, and each card scrolls sideways
   below its table's natural width instead of clipping.
   ══════════════════════════════════════════════════════════════════════════ */
#admin-view *,#admin-view *::before,#admin-view *::after{box-sizing:border-box}
/* Cards hold the tables; a table narrower than its columns scrolls here. */
#admin-view .admin-card,#admin-view .admin-editor{min-width:0;overflow-x:auto}
#admin-view .docs-list-container{overflow-y:auto}
/* The fix for the overlap: grid items must be allowed to shrink. Covers the
   two Panel tables too (deleted-docs, search feedback), which are built in JS
   with .history-header / .history-row and their own inline templates. */
#admin-view .docs-table-header>div,#admin-view .doc-row>div,
#admin-view .history-header>div,#admin-view .history-row>div{min-width:0}
#admin-view .doc-row>div,#admin-view .history-row>div{overflow-wrap:anywhere}
#admin-view .docs-table-header,#admin-view .history-header{white-space:nowrap}
#admin-view .history-grid{overflow-x:auto}
#admin-view .history-header,#admin-view .history-row{min-width:700px}
#admin-view .doc-row .col-actions{gap:6px;flex-wrap:nowrap}
#admin-view .doc-row select,#admin-view .doc-row input{max-width:100%}

/* Column templates + the width below which the card scrolls instead of squeezing. */
.docs-table-header.grid-users,.doc-row.grid-users{grid-template-columns:minmax(130px,1.2fr) minmax(130px,1.2fr) 150px 178px;gap:10px;align-items:center;min-width:620px}
.docs-table-header.grid-plans,.doc-row.grid-plans{grid-template-columns:minmax(110px,1.2fr) 88px 96px 88px minmax(130px,2fr) 92px;gap:10px;align-items:center;min-width:660px}
.docs-table-header.grid-accounts,.doc-row.grid-accounts{grid-template-columns:minmax(110px,1.1fr) minmax(110px,1.1fr) minmax(120px,1.2fr) minmax(80px,.8fr) 160px 108px 88px;gap:10px;align-items:center;min-width:840px}
.docs-table-header.grid-cuentas,.doc-row.grid-cuentas{grid-template-columns:minmax(150px,1.4fr) minmax(170px,1.5fr) 96px 96px 76px 62px 58px 80px 150px;gap:10px;align-items:center;min-width:1020px}
.docs-table-header.grid-llm,.doc-row.grid-llm{grid-template-columns:160px minmax(180px,1.1fr) minmax(200px,1.3fr) 180px;gap:12px;align-items:center;min-width:760px}
.docs-table-header.grid-llm-tasks,.doc-row.grid-llm-tasks{grid-template-columns:minmax(200px,1.2fr) 180px minmax(140px,1fr);gap:12px;align-items:center;min-width:540px}
.doc-row.grid-users,.doc-row.grid-plans,.doc-row.grid-accounts,.doc-row.grid-cuentas{padding:10px 8px;font-size:.9rem}
/* Two-line cells (a name over its plan, a status over its bars) wrap; one-line
   cells clip with an ellipsis and keep the full text in the title attribute. */
.doc-row.grid-cuentas .cell-sub,.doc-row.grid-accounts .cell-sub{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.doc-row.grid-users .role-select{width:100%}
/* Column headers are uppercase and wider than the numeric columns they label
   ("ÚLTIMO ACCESO" over an 84px date), so they ran into each other. Let a
   header wrap inside its own column instead of spilling into the next. */
.docs-table-header>div{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.25}

@media (max-width:900px){
    .admin-form-grid,.admin-form-grid.cols-4,.grid-llm,.grid-llm-tasks{grid-template-columns:1fr !important;min-width:0}
    #admin-view .admin-card-head,#admin-view .llm-top{flex-wrap:wrap;grid-template-columns:1fr;gap:10px}
    #admin-view .admin-card-head>*{min-width:0}
    #admin-view .admin-inline{flex-wrap:wrap}
}

/* ── Ayuda modal: accordion, manual link, compact type ─────────────────────── */
#help-modal .help-content{width:680px;max-width:92vw;max-height:84vh;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem;box-sizing:border-box}
#help-modal .modal-header-row{padding-bottom:.6rem;margin-bottom:.5rem}
#help-modal .modal-header-row h2{font-size:1.15rem}
.help-docs{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;margin:4px 0 10px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:8px;background:var(--bg-panel)}
.help-docs-text{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--text-main);min-width:0}
.help-docs-text span{color:var(--text-muted);font-size:.8rem}
.help-docs-btn{white-space:nowrap;font-size:.82rem;padding:8px 14px;text-decoration:none}
.help-accordion details{border:1px solid var(--border);border-radius:8px;background:var(--bg-panel);margin:8px 0}
.help-accordion summary{list-style:none;cursor:pointer;padding:9px 12px;font-weight:600;font-size:.9rem;color:var(--text-main);display:flex;align-items:center;gap:8px}
.help-accordion summary::-webkit-details-marker{display:none}
.help-accordion summary::before{content:'▸';color:var(--text-muted);font-size:.8rem;transition:transform .15s}
.help-accordion details[open] summary::before{transform:rotate(90deg)}
.help-accordion summary:hover{color:var(--primary)}
/* The page's generic summary rule spaces the label out and appends its own ▼;
   inside the help the ▸ before the label is the only marker. */
.help-accordion summary{justify-content:flex-start}
.help-accordion summary::after{content:none}
.help-body{padding:0 14px 12px;font-size:.85rem;line-height:1.5;color:var(--text-main);overflow-wrap:anywhere}
.help-body p{margin:6px 0}
.help-body h4{margin:10px 0 4px;font-size:.85rem;font-weight:600;color:var(--text-main)}
.help-body ul,.help-body ol{margin:4px 0 8px 18px;padding:0}
.help-body li{margin:3px 0}
.help-body kbd{font-family:var(--font-sans);font-size:.78rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--bg-card)}
.help-body code{font-family:var(--font-mono);font-size:.8rem;background:var(--bg-card);border-radius:4px;padding:0 4px}
.help-badge{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);border:1px solid var(--border);border-radius:4px;padding:0 5px;vertical-align:middle}
.help-tip{border-left:3px solid var(--warn);background:var(--bg-card);padding:8px 10px;border-radius:6px;margin-top:8px;font-size:.82rem}
.help-loading{color:var(--text-muted);font-style:italic}
.tag-x{color:#A33B3B;font-weight:600}.tag-check{color:#2F6B4F;font-weight:600}
[data-theme="dark"] .tag-x{color:#E06B6B}[data-theme="dark"] .tag-check{color:#4CAF7A}

/* ── @comandos: autocomplete popover, choice chips, help table ─────────────── */
.cmd-popover{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:300px;overflow-y:auto;z-index:60;padding:4px}
.cmd-popover.hidden{display:none}
.cmd-row{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.85rem;align-items:center}
.cmd-row.active,.cmd-row:hover{background:var(--bg-panel)}
.cmd-name{font-weight:600;color:var(--primary);white-space:nowrap}
.cmd-args{color:var(--text-muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-desc{grid-column:1 / -1;color:var(--text-muted);font-size:.78rem;line-height:1.35}
.cmd-cost{font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-muted);white-space:nowrap}
.cmd-cost-gratis{color:#2F6B4F}.cmd-cost-pesado{color:#A33B3B}
[data-theme="dark"] .cmd-cost-gratis{color:#4CAF7A}[data-theme="dark"] .cmd-cost-pesado{color:#E06B6B}
.cmd-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.cmd-chip{background:transparent;border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:.8rem;color:var(--text-main);cursor:pointer;transition:border-color .15s,color .15s}
.cmd-chip:hover{border-color:var(--primary);color:var(--primary)}
.message.user .user-tag{display:inline-block;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.55);border-radius:4px;padding:1px 6px;margin-right:8px;vertical-align:middle;opacity:.9}
.help-cmd-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:6px 0}
.help-cmd-table td{padding:6px 6px;border-top:1px solid var(--border);vertical-align:top}
.help-cmd-table tr:first-child td{border-top:none}
.help-cmd-table td:first-child{white-space:nowrap}
.help-cmd-table td:last-child{text-align:right}
@media (max-width:640px){
    .cmd-popover{max-height:45vh}
    .help-docs{flex-direction:column;align-items:stretch}
    .help-cmd-table td:first-child{white-space:normal}
}

/* ── Landing: the login card sits in the hero, as in Lex ───────────────────── */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-login { width: 100%; max-width: 420px; margin: 0 auto; }
.hero-login .modal-content { box-shadow: var(--shadow); margin: 0 auto; }
.hero-login .modal-header h2 { font-family: var(--font-display); margin: 0 0 .4rem; color: var(--text-main); font-size: 1.5rem; letter-spacing: -.01em; }
.hero-login .modal-header p { margin: 0 0 1.25rem; color: var(--text-muted); font-size: .95rem; }
.hero-login .full-width { width: 100%; margin-top: .9rem; }
.login-help { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }
.login-help p { margin: 0 0 .35rem; }
.login-help a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-help a:hover { text-decoration: underline; }
/* Landing-only sign-in link: shown on small screens, where the card is a scroll away. */
.nav-login-link { display: none; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: .9rem; white-space: nowrap; }
@media (max-width: 900px) {
    body:has(#landing-view:not(.hidden)) .nav-login-link { display: inline-flex; }
    /* A returning user comes for the login card: put it first on small screens. */
    .hero-visual { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stage 1 refresh — type discipline, quiet answer metadata, icons, empty state,
   one nav hierarchy. Overrides on purpose: they read as one block and can be
   folded into the rules above once the look settles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Monospace is for data — file names, numbers, code — never for labels. */
#mirror, #user-input { font-family: var(--font-body); }
.sidebar .panel h3, .stat-box small, .plan-name, .docs-table-header, .source-cards .sources-label,
.doc-pill, .mini-stat span, .lang-code, .version-text, #user-display,
.footer .footer-toggles > label, .footer .footer-toggles > #odooIndicator,
.stat-title, .stat-change, .month-label, .donut-label, .storage-label-text, .breakdown-table th
  { font-family: var(--font-body); }
.sidebar .panel h3 { font-weight: 600; letter-spacing: .1em; }
.stat-box small, .plan-name, .docs-table-header, .source-cards .sources-label, .doc-pill { font-weight: 600; letter-spacing: .07em; }
.footer .footer-toggles > label, .footer .footer-toggles > #odooIndicator { font-size: .78rem; font-weight: 500; }
.lang-code { font-weight: 600; }

/* Stroke icons used in place of emoji. They size to the text they sit beside. */
.ic { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -3px; }
.btn-primary .ic, .btn-delete .ic, .subtab-link .ic, .acct-btn .ic { width: 14px; height: 14px; }
.btn-primary .ic + span, .subtab-link .ic { margin-right: 0; }
.subtab-link .ic { vertical-align: -2px; margin-right: 4px; }
.btn-icon .ic { width: 17px; height: 17px; }
.acct-btn .ic { width: 14px; height: 14px; }

/* 2. One quiet line under each answer: mode · time (· tokens for admins) and the actions. */
.answer-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
               margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.answer-meta .meta-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.answer-meta .meta-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--text-muted);
                          padding: 2px 8px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-soft);
                          white-space: nowrap; }
.answer-meta .meta-chip .ic { width: 11px; height: 11px; vertical-align: 0; }
.answer-meta .meta-chip.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.answer-meta .meta-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.answer-meta .meta-actions button { background: none; border: none; border-radius: 6px; cursor: pointer; padding: 4px 7px;
                                    display: inline-flex; align-items: center; justify-content: center; line-height: 0;
                                    color: var(--text-muted); transition: color .15s, background .15s; }
.answer-meta .meta-actions button:hover { color: var(--text-main); background: var(--hover); }
.answer-meta .meta-actions .retry-btn { line-height: 1; font-size: .72rem; gap: 5px; color: var(--primary); }
.answer-meta .meta-note { font-size: .72rem; color: var(--ok); margin-left: 4px; }

/* 4. Empty state: what to do first, as chips under the welcome. */
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.starter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
                border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main);
                font: 500 .8rem var(--font-body); cursor: pointer; transition: border-color .15s, color .15s; }
.starter-chip:hover { border-color: var(--primary); color: var(--primary); }
.starter-chip .ic { width: 13px; height: 13px; vertical-align: 0; }

/* Recent documents in the sidebar. */
.recent-docs { display: flex; flex-direction: column; gap: 2px; }
.recent-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-decoration: none;
              color: var(--text-2); font-size: .8rem; min-width: 0; }
.recent-row:hover { background: var(--hover); color: var(--text-main); }
.recent-row .ic { width: 14px; height: 14px; color: var(--text-muted); vertical-align: 0; }
.recent-row .recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row .recent-date { font-size: .68rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.recent-row .recent-state { font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                            color: var(--warn); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.sidebar.collapsed #recent-panel { display: none; }

/* 5. Nav: one primary action at most; everything else is quiet text. */
.nav-link { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 8px 10px; border-radius: 8px;
            font: 500 .85rem var(--font-body); text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--text-main); background: var(--hover); }
.nav-link-accent { color: var(--primary); font-weight: 600; }
.nav-link-accent:hover { color: var(--primary); }
#settings-btn { border: none; }
#user-display { border: none; padding: 0 6px; font-size: .85rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   Stage 2 — Administration as a page: a left rail and a scrolling panel, the
   full height of the window. Replaces the five-tab dialog.
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-view { display: flex; height: calc(100vh - var(--nav-height)); width: 100%; overflow: hidden; background: var(--ground); }
.admin-view.hidden { display: none; }

.admin-rail { box-sizing: border-box; width: 232px; min-width: 232px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
              display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; overflow-y: auto; }
.admin-back { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer;
              color: var(--text-muted); font: 500 .82rem var(--font-body); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; }
.admin-back:hover { background: var(--hover); color: var(--text-main); }
.admin-rail-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-rail-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none;
                  cursor: pointer; color: var(--text-2); font: 500 .9rem var(--font-body); padding: 10px 12px; border-radius: 9px;
                  transition: background .15s, color .15s; position: relative; }
.admin-rail-btn:hover { background: var(--hover); color: var(--text-main); }
.admin-rail-btn.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
.admin-rail-btn .ic { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: 0; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.admin-main-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; padding: 18px 28px 14px; border-bottom: 1px solid var(--border);
                   background: var(--panel); }
.admin-main-head h1 { margin: 0; font: 700 1.35rem var(--font-display); letter-spacing: -0.01em; color: var(--text-main); }
.admin-main-kb { font-size: .8rem; color: var(--text-muted); }
.admin-panels { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 28px 40px; }
.admin-panel { display: none; }
.admin-panel.active { display: block; animation: cb-fade .18s ease; }
@keyframes cb-fade { from { opacity: 0 } to { opacity: 1 } }

/* The pending-requests pill rides the rail entry instead of a tab. */
.admin-rail-btn .tab-pill { margin-left: auto; }

@media (max-width: 900px) {
    /* The rail becomes a scrolling strip of chips above the panel. */
    .admin-view { flex-direction: column; height: auto; min-height: calc(100vh - var(--nav-height)); }
    .admin-rail { width: 100%; min-width: 0; flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden;
                  border-right: none; border-bottom: 1px solid var(--border); padding: 8px 10px; }
    .admin-back { width: auto; margin: 0 4px 0 0; }
    .admin-back span { display: none; }
    .admin-rail-nav { flex-direction: row; gap: 4px; }
    .admin-rail-btn { white-space: nowrap; padding: 8px 12px; }
    .admin-main-head { padding: 14px 16px 12px; }
    .admin-panels { padding: 16px 14px 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stage 3 — landing: what Vault does, in three steps, beside a real answer.
   ═══════════════════════════════════════════════════════════════════════════ */
.trust-row { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.trust-row li { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-2); font-size: .95rem; font-weight: 500; }
.trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

.how-section { padding: 4.5rem 0 3.5rem; background: var(--panel); border-bottom: 1px solid var(--border); }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.how-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.how-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.how-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-dim); color: var(--primary);
           display: flex; align-items: center; justify-content: center; font: 700 .9rem var(--font-body); }
.how-steps h4 { margin: 2px 0 .35rem; font-size: 1.05rem; font-weight: 600; color: var(--text-main); }
.how-steps p { margin: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.6; }
.how-steps code { font-family: var(--font-mono); font-size: .85em; background: var(--raised); border: 1px solid var(--line-soft);
                  border-radius: 5px; padding: 1px 5px; color: var(--text-2); }
.how-shot { margin: 0; }
.how-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); background: var(--bg-card); }
.how-shot figcaption { margin-top: .7rem; font-size: .8rem; color: var(--text-muted); text-align: center; }

/* The module cards became capability cards: an outline icon, not a tint block. */
.feature-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-dim); color: var(--primary);
                display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-icon .ic { width: 19px; height: 19px; vertical-align: 0; }

.site-footer { background: var(--ground); border-top: 1px solid var(--border); padding: 1.5rem 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .85rem; color: var(--text-muted); }
.footer-version { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .how-section { padding: 3rem 0 2.5rem; }
    .how-layout { grid-template-columns: 1fr; gap: 2rem; }
    /* The steps explain the picture, so they come first on a phone. */
    .how-shot { order: 2; }
    .trust-row { margin-bottom: 1.5rem; }
}
@media (max-width: 480px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
/* The hero headline shares its row with the login card, so it sizes to that
   column rather than to the page: 3.5rem broke it over four lines. */
.hero-text h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; margin-bottom: 1.1rem; }
.hero-sub { font-size: 1.05rem; margin-bottom: 1.4rem; }
.hero-section { padding: 4rem 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Stage 4 — Administration completeness: grid filters, the audit log,
   Consumo (the dashboard inline), a third Cuentas action, last bill.
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.admin-toolbar .dropdown.refresh { margin: 0; }
.admin-filter { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input);
  color: var(--text-main); font: inherit; font-size: .85rem; min-width: 190px; }
.admin-filter:focus { outline: none; border-color: var(--primary); }
.admin-filter::placeholder { color: var(--text-muted); }

/* Audit grid */
.docs-table-header.grid-audit, .doc-row.grid-audit { grid-template-columns: 150px minmax(110px, .9fr) minmax(150px, 1fr) minmax(140px, 1fr) minmax(240px, 2.2fr);
  gap: 10px; align-items: center; min-width: 860px; }
.doc-row.grid-audit { padding: 9px 8px; font-size: .86rem; }
.doc-row.grid-audit .audit-detail { font-size: .78rem; color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.audit-action { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--border); background: var(--raised); color: var(--text-main); white-space: nowrap; }
.audit-action.user { border-color: var(--primary); color: var(--primary); }
.audit-action.account, .audit-action.request { border-color: var(--warn); color: var(--warn); }
.audit-action.billing, .audit-action.plan { border-color: var(--ok); color: var(--ok); }
.audit-action.llm, .audit-action.config, .audit-action.maintenance { color: var(--text-muted); }
.audit-scope { display: inline-flex; align-items: center; gap: 8px; margin: 8px 8px 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--primary-dim); color: var(--primary); font-size: .75rem; font-weight: 600; }
.audit-scope button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0; }
.cell-link { color: var(--primary); text-decoration: none; display: inline-block; }
.cell-link:hover { text-decoration: underline; }
.cell-link .cell-sub { color: var(--text-muted); }

/* Cuentas grew a third action (recount storage); Facturación a last-bill column. */
.docs-table-header.grid-cuentas, .doc-row.grid-cuentas { grid-template-columns: minmax(150px, 1.4fr) minmax(170px, 1.5fr) 96px 96px 76px 62px 58px 80px 196px; min-width: 1070px; }
.docs-table-header.grid-accounts, .doc-row.grid-accounts { grid-template-columns: minmax(110px, 1.1fr) minmax(110px, 1.1fr) minmax(120px, 1.2fr) minmax(80px, .8fr) 160px 112px 108px 88px; min-width: 960px; }

/* Consumo: the dashboard container out of its modal, as a section of the page */
.usage-host .dashboard-container.is-inline { max-width: none; max-height: none; box-shadow: none; border-radius: 10px; }
.usage-host .dashboard-container.is-inline .dashboard-content { max-height: none; overflow: visible; }
.usage-host .dashboard-container.is-inline .close-dashboard { display: none; }
@media (max-width: 760px) {
  .admin-toolbar, .admin-card-head .admin-inline { flex-wrap: wrap; white-space: normal; }
  .admin-filter { min-width: 0; flex: 1 1 160px; }
}

/* Administración → Panel: the embedding models, shown but not settable. */
.embed-models { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:10px;
                padding-top:10px; border-top:1px solid var(--border); font-size:.8rem }
.embed-models .embed-label { color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:.03em }
.embed-models .embed-pair { display:flex; gap:8px; flex-wrap:wrap }
.embed-models code { background:var(--bg-body); border:1px solid var(--border); border-radius:4px;
                     padding:1px 6px; font-size:.95em; color:var(--text-main) }
.embed-models .embed-note { color:var(--text-muted); font-style:italic }


/* ── Suggested next question: the placeholder reads as a proposal, not a hint ── */
.box.has-suggestion #user-input::placeholder { color: var(--primary); opacity: .62; font-style: italic; }
/* The composer row is a centred flex row: the button floats just above its top
   edge instead of taking a column beside the box. */
.box-container { position: relative; }
.suggest-use { position: absolute; bottom: 100%; left: 1.6rem; z-index: 5; margin: 0 0 6px; display: inline-flex; align-items: center; gap: 6px;
               max-width: calc(100% - 3.2rem); padding: 5px 12px; border-radius: 999px; white-space: nowrap;
               border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--primary); font-weight: 600; font-size: .8rem;
               cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.suggest-use.hidden { display: none; }
/* A keyboard has Tab: the button is for touch screens only. */
@media (hover: hover) and (pointer: fine) { .suggest-use { display: none !important; } }

/* ── Configuración → Preferencias ── */
.pref-card { background: var(--bg-panel, transparent); padding: 15px; border-radius: 8px; border: 1px solid var(--border); }
.pref-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; cursor: pointer; }
.pref-text { display: flex; flex-direction: column; gap: 4px; }
.pref-text small { color: var(--text-muted, #666); line-height: 1.4; }
.pref-switch { flex: 0 0 auto; margin-top: 2px; }
.pref-status { min-height: 1.2em; margin-top: 8px; font-size: .8rem; color: var(--text-muted, #666); }


/* ═══════════════════════════════════════════════════════════════════════════
   Review pass: dialogs, chat states, maintenance cards, a11y, reduced motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── In-app dialogs (uiAlert / uiConfirm / uiPrompt in app.js) ── */
.ui-dialog-overlay { z-index: 4000; padding: 16px; }
.ui-dialog { width: 440px; max-width: 100%; padding: 1.4rem 1.5rem 1.2rem; box-sizing: border-box; }
.ui-dialog-title { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--text-main); }
.ui-dialog-msg { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--text-main); font-size: .95rem; line-height: 1.5; }
.ui-dialog-field { display: flex; align-items: center; gap: 8px; margin-top: .9rem; }
.ui-dialog-input { flex: 1; min-width: 0; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text-main); font: inherit; font-size: .95rem; box-sizing: border-box; }
textarea.ui-dialog-input { resize: vertical; min-height: 4.5em; }
.ui-dialog-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ui-dialog-show { font-size: .8rem; white-space: nowrap; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 1.2rem; flex-wrap: wrap; }
.ui-dialog-actions button:disabled { opacity: .5; cursor: default; }
.ui-dialog-actions .btn-primary.ui-danger { background: var(--bad); color: var(--on-bad); }
.ui-dialog-actions button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Inline status lines and field errors ── */
.inline-status { font-size: .8rem; color: var(--ok); min-height: 1.2em; }
.inline-status.err { color: var(--bad); }
.inline-status:empty { min-height: 0; }
.row-status { display: block; margin-top: 3px; }
.field-error { margin-top: 4px; font-size: .78rem; color: var(--bad); }
input[aria-invalid="true"], password-with-toggle[aria-invalid="true"] { border-color: var(--bad) !important; }
#odoo-status { margin-top: 10px; }
.error-text { color: var(--bad); font-size: .85rem; margin: .7rem 0 0; }
.login-notice { margin: 0 0 1rem; padding: 9px 12px; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px; color: var(--text-main); font-size: .88rem; background: var(--raised); }
.role-select { padding: 4px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: .85rem; }
.acct-prompt { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.acct-prompt-select { padding: 2px 4px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-main); font: inherit; font-size: .75rem; }

/* ── Chat: waiting bubble, streaming, errors, Stop ── */
.message.is-loading .loading-line { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .82rem; }
.message.is-loading .stream-body:not(:empty) { margin-bottom: 8px; }
.message.is-loading .loading-elapsed { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .75rem; }
.plain-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.message.ai.is-error { border-color: var(--bad); border-left: 4px solid var(--bad); color: var(--text-main); }
.message.ai.is-error.is-stopped { border-color: var(--border); border-left-color: var(--warn); color: var(--text-muted); }
.message.is-error .error-line { display: flex; align-items: flex-start; gap: 8px; }
.message.is-error .error-line .ic { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--bad); }
.message.is-error.is-stopped .error-line .ic { color: var(--warn); }
.chat-retry-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--primary); font: 600 .8rem var(--font-body); cursor: pointer; }
.chat-retry-btn:hover { border-color: var(--primary); background: var(--hover); }
.chat-retry-btn .ic { width: 13px; height: 13px; }
.answer-meta .meta-note.err { color: var(--bad); }
.btn-send.is-stop { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn-send.is-stop:hover { background: var(--bad); color: var(--on-bad); }
.chat-top { gap: 16px; }
.chat-top #export-chat-btn { font-size: .8rem; color: var(--text-muted); text-decoration: none; padding: 0; }
.chat-top #export-chat-btn:hover { color: var(--text-main); }
.odoo-indicator { display: flex; align-items: center; gap: 6px; }
.odoo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; transition: background .2s; }

/* ── Language picker: keyboard focus ── */
.dropdown-selected:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dropdown-option:focus, .dropdown-option:focus-visible { outline: none; background: var(--hover); box-shadow: inset 3px 0 0 var(--primary); }

/* ── Shared card for settings / admin blocks (was a repeated inline style) ── */
.panel-card { background: var(--bg-panel); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border); }
.panel-card > h4 { margin-top: 0; }
.chat-grid-content { max-width: 95vw; height: 80vh; display: flex; flex-direction: column; }

/* ── Maintenance cards: Re-index · Re-embed · 200-250 Re-indexer ── */
.maint-desc { font-size: .85rem; opacity: .75; margin-bottom: 12px; }
.maint-block { margin-bottom: 12px; }
.maint-label { font-size: .8rem; opacity: .7; display: block; margin-bottom: 4px; }
.maint-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.maint-row.maint-actions { gap: 12px; }
.maint-select { min-width: 220px; max-width: 400px; height: 80px; font-size: .8rem; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.maint-select.wide { min-width: 320px; max-width: 560px; height: 120px; }
.maint-select-one { font-size: .8rem; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.maint-hint { font-size: .75rem; opacity: .55; max-width: 200px; line-height: 1.4; }
.maint-list-status { margin-top: 6px; color: var(--text-muted); }
.maint-actions .btn-delete, .maint-small { font-size: .8rem; }
.maint-badge { font-size: .82rem; padding: 3px 10px; border-radius: 12px; background: var(--raised); border: 1px solid var(--border); }
.maint-progress { margin-top: 14px; }
.maint-progress-head { display: flex; justify-content: space-between; font-size: .8rem; opacity: .75; margin-bottom: 4px; }
.maint-track { height: 8px; border-radius: 99px; background: var(--progress-bg); overflow: hidden; }
.maint-bar { height: 100%; border-radius: 99px; background: var(--primary); width: 0%; transition: width .4s ease; }
.maint-bar.data { background: var(--data); }
.maint-current { margin-top: 8px; font-size: .78rem; opacity: .8; }
.maint-dim { opacity: .55; }
.maint-current-kb { margin-right: 12px; }
.maint-skipped { margin-top: 4px; font-size: .78rem; color: var(--warn); }
.maint-log-wrap { margin-top: 10px; }
.maint-log-title { font-size: .75rem; opacity: .55; margin-bottom: 3px; }
.maint-log { max-height: 160px; overflow-y: auto; font-size: .73rem; font-family: monospace; background: var(--raised); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--text-2); white-space: pre-wrap; word-break: break-all; }
.maint-errors { margin-top: 10px; font-size: .78rem; color: var(--bad); }
.maint-verify { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.maint-verify-title { font-size: .82rem; font-weight: 600; margin-bottom: 8px; }
.maint-verify-result { margin-top: 10px; font-size: .78rem; }

/* ── Reduced motion ──
   For anyone who asked the system for less movement: no decorative animation
   (typing dots, fade-ins, the transitions of the vault-lock sequence),
   near-instant transitions, no smooth scrolling. State still changes, at once. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}