/* PrivateRAG — ported 1:1 from the inline styles in src/App.jsx, plus the new markdown-table, summary-card, state-tag and settings styles. */ * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } :root { /* The brand gradient is a fixed identity, not a theme colour — it sits on coloured fills in both themes and reads correctly on each. */ --gradient: linear-gradient(90deg, #4285f4, #9b72cb 45%, #d96570); /* White TEXT on a coloured fill. Not a surface, so it does not flip: a primary button is blue in both themes and its label is white in both. */ --on-accent: #fff; color-scheme: light; --surface: #fff; --surface-2: #fafbfc; --surface-3: #f8f9fa; --surface-4: #f1f3f4; --surface-5: #eceff1; --sidebar: #f0f4f9; --sidebar-2: #dde3ea; --sidebar-3: #e4e9f0; --border: #e8eaed; --border-2: #dadce0; --border-3: #e0e0e0; --border-4: #e0e3e7; --border-5: #e6e8eb; --border-6: #c4c7c5; --text: #1f1f1f; --text-2: #444746; --text-3: #5f6368; --text-4: #80868b; --text-5: #9aa0a6; --accent: #1a73e8; --accent-2: #1558d6; --accent-3: #0b57d0; --accent-tint: #e8f0fe; --ok: #137333; --ok-tint: #e6f4ea; --danger: #c5221f; --danger-2: #a50e0e; --danger-3: #d93025; --danger-tint: #fce8e6; --warn: #f9ab00; /* Readable AS TEXT on this theme's ground. Light needs a dark amber, dark needs a light one — the fill colour above is the same in both and is not a substitute for either. */ --warn-text: #8a4b00; --warn-tint: #fef7e0; --warn-tint-2: #fff4e5; --warn-border: #ffe0b2; --warn-border-2: #f6d55c; --mark: #fff3a3; --mark-2: #fef7c3; --brand-blue: #4285f4; --mark-3: #fff9c4; --accent-4: #174ea6; --accent-5: #1967d2; --accent-tint-2: #d3e2fd; --accent-tint-3: #d3e3fd; --accent-tint-4: #e3ecfd; --accent-tint-5: #e9eef6; --accent-tint-6: #eef4fe; --accent-tint-7: #f1f6fe; --accent-tint-8: #f3f7fe; --accent-tint-9: #f8fbff; --ok-2: #188038; --ok-3: #1e8e3e; --ok-4: #34a853; --ok-tint-2: #ceead6; --ok-tint-3: #f3faf5; --danger-4: #b3261e; --danger-tint-2: #f3b7b2; --danger-tint-3: #f3c0bd; --warn-text-2: #7a5900; --warn-text-3: #8a6116; --warn-text-4: #b06000; --warn-border-3: #fadf9a; --warn-border-4: #fbd9a5; --warn-border-5: #fde293; --warn-tint-3: #fdefc8; --warn-tint-4: #fef3e0; --brand-purple: #7b5cc9; --brand-tint: #e3ddf6; --brand-tint-2: #faf9fe; --text-6: #3c4043; --text-7: #b0b4b8; --text-8: #bdc1c6; --border-7: #dde1e5; --surface-6: #f6f8f9; --surface-7: #f7f8fa; --surface-8: #fbfbfc; --border-8: #eee; } /* ── Dark ───────────────────────────────────────────────────────────────── Every token above, remapped. `data-theme` is stamped on by app.js: "system" leaves it off and the media query below decides, so a reader who never touches the setting follows their OS. An explicit choice writes the attribute and must WIN over the media query, which is why the attribute selectors come after it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface: #1e1f20; --surface-2: #202124; --surface-3: #202124; --surface-4: #2d2e30; --surface-5: #303134; --sidebar: #1b1c1d; --sidebar-2: #35363a; --sidebar-3: #2a2b2e; --border: var(--text-6); --border-2: #484a4d; --border-3: var(--text-6); --border-4: var(--text-6); --border-5: var(--text-6); --border-6: #5f6368; --text: #e3e3e3; --text-2: #c7c7c7; --text-3: #9aa0a6; --text-4: #8e9296; --text-5: #7d8184; --accent: #8ab4f8; --accent-2: #aecbfa; --accent-3: #a8c7fa; --accent-tint: #1f3049; --ok: #81c995; --ok-tint: #1c3325; --danger: #f28b82; --danger-2: #f28b82; --danger-3: #f28b82; --danger-tint: #3d2523; --warn: #fdd663; --warn-text: #fdd663; --warn-tint: #3a3222; --warn-tint-2: #3a3222; --warn-border: #5c4a2a; --warn-border-2: #8a7a2a; --mark: #5c5320; --mark-2: #5c5320; --brand-blue: #8ab4f8; --mark-3: #4a441f; --accent-4: #c3d9fd; --accent-5: #a8c7fa; --accent-tint-2: #25395a; --accent-tint-3: #25395a; --accent-tint-4: #22334f; --accent-tint-5: #232733; --accent-tint-6: #1d2a3d; --accent-tint-7: #1c2634; --accent-tint-8: #1c2634; --accent-tint-9: #1b2430; --ok-2: #81c995; --ok-3: #81c995; --ok-4: #81c995; --ok-tint-2: #20402c; --ok-tint-3: #18291d; --danger-4: #f28b82; --danger-tint-2: #4a2a27; --danger-tint-3: #4a2a27; --warn-text-2: #fdd663; --warn-text-3: #fdd663; --warn-text-4: #fdd663; --warn-border-3: #6b5a2a; --warn-border-4: #6b5a2a; --warn-border-5: #6b5a2a; --warn-tint-3: #403722; --warn-tint-4: #3a3222; --brand-purple: #c9b0f0; --brand-tint: #2e2740; --brand-tint-2: #222030; --text-6: #dadce0; --text-7: #6e7276; --text-8: #6e7276; --border-7: #3c4043; --surface-6: #202124; --surface-7: #202124; --surface-8: #202124; --border-8: #3c4043; } } :root[data-theme="dark"] { --sev-orange: #d98324; --code-str: #9db8e8; --code-num: #c4b1f5; color-scheme: dark; --surface: #1e1f20; --surface-2: #202124; --surface-3: #202124; --surface-4: #2d2e30; --surface-5: #303134; --sidebar: #1b1c1d; --sidebar-2: #35363a; --sidebar-3: #2a2b2e; --border: var(--text-6); --border-2: #484a4d; --border-3: var(--text-6); --border-4: var(--text-6); --border-5: var(--text-6); --border-6: #5f6368; --text: #e3e3e3; --text-2: #c7c7c7; --text-3: #9aa0a6; --text-4: #8e9296; --text-5: #7d8184; --accent: #8ab4f8; --accent-2: #aecbfa; --accent-3: #a8c7fa; --accent-tint: #1f3049; --ok: #81c995; --ok-tint: #1c3325; --danger: #f28b82; --danger-2: #f28b82; --danger-3: #f28b82; --danger-tint: #3d2523; --warn: #fdd663; --warn-text: #fdd663; --warn-tint: #3a3222; --warn-tint-2: #3a3222; --warn-border: #5c4a2a; --warn-border-2: #8a7a2a; --mark: #5c5320; --mark-2: #5c5320; --brand-blue: #8ab4f8; --mark-3: #4a441f; --accent-4: #c3d9fd; --accent-5: #a8c7fa; --accent-tint-2: #25395a; --accent-tint-3: #25395a; --accent-tint-4: #22334f; --accent-tint-5: #232733; --accent-tint-6: #1d2a3d; --accent-tint-7: #1c2634; --accent-tint-8: #1c2634; --accent-tint-9: #1b2430; --ok-2: #81c995; --ok-3: #81c995; --ok-4: #81c995; --ok-tint-2: #20402c; --ok-tint-3: #18291d; --danger-4: #f28b82; --danger-tint-2: #4a2a27; --danger-tint-3: #4a2a27; --warn-text-2: #fdd663; --warn-text-3: #fdd663; --warn-text-4: #fdd663; --warn-border-3: #6b5a2a; --warn-border-4: #6b5a2a; --warn-border-5: #6b5a2a; --warn-tint-3: #403722; --warn-tint-4: #3a3222; --brand-purple: #c9b0f0; --brand-tint: #2e2740; --brand-tint-2: #222030; --text-6: #dadce0; --text-7: #6e7276; --text-8: #6e7276; --border-7: #3c4043; --surface-6: #202124; --surface-7: #202124; --surface-8: #202124; --border-8: #3c4043; } :root[data-theme="light"] { color-scheme: light; --surface: #fff; --surface-2: #fafbfc; --surface-3: #f8f9fa; --surface-4: #f1f3f4; --surface-5: #eceff1; --sidebar: #f0f4f9; --sidebar-2: #dde3ea; --sidebar-3: #e4e9f0; --border: #e8eaed; --border-2: #dadce0; --border-3: #e0e0e0; --border-4: #e0e3e7; --border-5: #e6e8eb; --border-6: #c4c7c5; --text: #1f1f1f; --text-2: #444746; --text-3: #5f6368; --text-4: #80868b; --text-5: #9aa0a6; --accent: #1a73e8; --accent-2: #1558d6; --accent-3: #0b57d0; --accent-tint: #e8f0fe; --ok: #137333; --ok-tint: #e6f4ea; --danger: #c5221f; --danger-2: #a50e0e; --danger-3: #d93025; --danger-tint: #fce8e6; --warn: #f9ab00; --warn-text: #8a4b00; --warn-tint: #fef7e0; --warn-tint-2: #fff4e5; --warn-border: #ffe0b2; --warn-border-2: #f6d55c; --mark: #fff3a3; --mark-2: #fef7c3; --brand-blue: #4285f4; --mark-3: #fff9c4; --accent-4: #174ea6; --accent-5: #1967d2; --accent-tint-2: #d3e2fd; --accent-tint-3: #d3e3fd; --accent-tint-4: #e3ecfd; --accent-tint-5: #e9eef6; --accent-tint-6: #eef4fe; --accent-tint-7: #f1f6fe; --accent-tint-8: #f3f7fe; --accent-tint-9: #f8fbff; --ok-2: #188038; --ok-3: #1e8e3e; --ok-4: #34a853; --ok-tint-2: #ceead6; --ok-tint-3: #f3faf5; --danger-4: #b3261e; --danger-tint-2: #f3b7b2; --danger-tint-3: #f3c0bd; --warn-text-2: #7a5900; --warn-text-3: #8a6116; --warn-text-4: #b06000; --warn-border-3: #fadf9a; --warn-border-4: #fbd9a5; --warn-border-5: #fde293; --warn-tint-3: #fdefc8; --warn-tint-4: #fef3e0; --brand-purple: #7b5cc9; --brand-tint: #e3ddf6; --brand-tint-2: #faf9fe; --text-6: #3c4043; --text-7: #b0b4b8; --text-8: #bdc1c6; --border-7: #dde1e5; --surface-6: #f6f8f9; --surface-7: #f7f8fa; --surface-8: #fbfbfc; --border-8: #eee; } body { font-family: 'Google Sans', 'Segoe UI', system-ui, sans-serif; background: var(--surface); color: var(--text); } .app { display: flex; height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { width: 276px; background: var(--sidebar); padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; overflow: hidden; /* the menu itself never scrolls — only inner lists do */ transition: margin-left 0.22s ease; } /* Unpinned: the panel slides out rather than vanishing, so the conversation reflowing to the middle of the screen reads as one movement. `margin-left` and not `display:none`, because a hidden panel has no layout and every width measured inside it (chat menus, charts) would come back 0. */ /* EXACTLY the panel's width, and it has to be exact. At -300px the panel's right edge lands at -24, so `.main` — the next flex item — starts at -24 too, and the re-open button positioned 12px inside it rendered half off-screen. box-sizing is border-box, so 276px is the whole thing including padding. */ .app.sidebar-hidden .sidebar { margin-left: -276px; } .brand { font-size: 20px; font-weight: 500; padding: 4px 8px 8px; color: var(--text-2); display: flex; align-items: flex-start; gap: 8px; } .brand-text { flex: 1; min-width: 0; } .pin-btn { flex-shrink: 0; border: none; background: transparent; color: var(--text-3); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin-top: 2px; } .pin-btn:hover { background: var(--sidebar-2); color: var(--text); } /* Tilted = not holding anything down. The same glyph in both states, so the button reads as one control with two positions rather than two buttons. */ .pin-btn.off .pin-icon { transform: rotate(45deg); opacity: 0.75; } .pin-icon { transition: transform 0.2s ease; } /* The 48px rail that stays when the panel is out (the design set's `rail48`). It is a FLEX ITEM of `.main`, not an overlay: an absolutely-positioned rail would sit on top of the conversation's first line, and the whole reason the panel folds is to give the conversation the space. */ .rail { flex: 0 0 48px; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-inline-end: 1px solid var(--t-hairline); background: var(--t-panel); } .rail[hidden] { display: none; } .rail-mark { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 6px; } .rail-mark svg { display: block; width: 100%; height: 100%; } /* The assistant's avatar is the same mark, small. */ .avatar svg { display: block; width: 100%; height: 100%; } .rail-btn { width: 32px; height: 32px; border: 0; border-radius: 9px; cursor: pointer; background: none; color: var(--text-3); padding: 0; display: flex; align-items: center; justify-content: center; } .rail-btn:hover { background: var(--accent-tint-10); color: var(--accent); } /* Under 900px the panel OVERLAYS the conversation rather than sitting beside it, so a permanent rail would take 48px off a screen that has none to give. The drawer's own control is the way back there. */ @media (max-width: 900px) { .rail { display: none; } } .brand-name { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .brand-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; } .new-chat-btn { display: flex; align-items: center; gap: 10px; background: var(--sidebar-2); border: none; border-radius: 24px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; font-family: inherit; } .side-label { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: 0.8px; padding: 12px 8px 4px; } .kb-label { display: flex; align-items: center; gap: 6px; } .kb-badge { background: var(--ok-tint); color: var(--ok); border-radius: 8px; padding: 1px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; } /* Vertical breathing room between list items (chats + indexed files). The sidebar is fixed: only these inner lists scroll on overflow. */ /* Three chats, then scroll. The sidebar has to hold the conversation list AND the knowledge bank, and at 24vh the chats took whatever they liked and the indexes were pushed below the fold — on a tall window that is most of the panel spent on a list you navigate occasionally, at the expense of the one that tells you what your answers come from. Measured rather than guessed: a row is 34px and the gap is 6px. The extra 9px deliberately leaves a SLIVER of the fourth row visible, because a cut-off row says "there is more" in a way a 6px scrollbar does not. */ /* The conversation list takes whatever the banks leave, ALWAYS — no row cap and no state class. That is the canvas's arrangement (`flex: 1` on the chats, `flex-shrink: 0` on the banks) and it is better than the three-row cap it replaces: shutting a bank gives its height to the chats by itself, so "both shut → the list owns the panel" is the layout doing arithmetic rather than a rule someone has to remember to keep in step. */ #chatList { display: flex; flex-direction: column; gap: 6px; /* basis 0, NOT auto. With `auto` the basis is the list's own content height — 260 rows, thousands of px — so in the shrink calculation the chat list outweighed the banks by an order of magnitude and the BANKS absorbed all of it: measured, a 320px bank list inside a 25px banks block. At basis 0 the banks keep their natural size and the chat list takes what is left, which is what "the chats get the rest" actually means. */ flex: 1 1 0; overflow-y: auto; /* A floor, so a long bank can never take the panel completely. */ min-height: 120px; } /* A SCROLLING flex column must not shrink its own items — it has scrollbar to spend, not height. Default `flex-shrink: 1` plus `overflow: hidden` on the snippet (which turns its automatic minimum size into 0) let 260 children squeeze every snippet to nothing: measured, a search result's snippet was 9px tall — its padding and no text at all — while the chat rows survived only because they carry a fixed height. It looked like the snippet was being clipped mid-glyph, so the clamp was the obvious suspect and the innocent one. The chat rows are covered by the same rule so the list can never do this to a row someone adds later. */ #chatList > * { flex-shrink: 0; } /* ── The two banks (accordion) ────────────────────────────────────────── From the Nocturne canvas (Canvas-4 · 5a), motion spec included verbatim: bank open/close — grid-template-rows 0fr → 1fr, 300ms cubic-bezier(.4,0,.2,1) contents — opacity 240ms caret — rotates 90° over 280ms Animating GRID ROWS is the point: it gives true auto-height with nothing measured in JavaScript, so a bank with three rows and a bank with twenty both open correctly and neither needs a hard-coded height. (A max-height guess is the usual fix and it is wrong in both directions: too small clips, too large makes the easing arrive late and look broken.) The whole block is `flex: 0 0 auto`, so it takes only what its open bank needs and the CHAT LIST above takes everything else — which is what makes "both shut → the conversation list owns the panel" fall out of the layout rather than needing a rule of its own. */ .banks { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; background: var(--t-banks); } .bank { display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; } /* The hairline between the two, inset as the canvas has it. A ::before on the SECOND bank rather than an element of its own, because `applyBankState` reorders the sections and a static divider element would be stranded at the top the first time the Bot Bank opened. */ .bank:not(:first-child)::before { content: ''; flex: 0 0 1px; margin: 0 12px; background: var(--border); } .bank-head { display: flex; align-items: center; gap: 9px; width: 100%; height: 40px; padding: 0 14px 0 12px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text); text-align: left; white-space: nowrap; min-width: 0; transition: background .14s; } /* The rail is 276px and the canvas's is 300. Something has to give when the count runs to four figures, and it must be the TITLE — the badge says whether this bank is shared with everyone or private to the reader, which is the one thing on the row that cannot be inferred from anything else. Clipped, it read "SHARE", which is a different word. */ /* Measured rather than guessed: the row has 226px of content width and its five children wanted 252. The canvas sets this on a 300px rail; ours is 276, and the 26px comes out of the title's tracking and the badge's padding rather than out of anything that carries meaning. */ .bank-head { gap: 5px; padding-right: 10px; } .bank-head .kb-badge { padding: 1px 5px; font-size: 8.5px; } .bank-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kb-badge, .bank-count, .bank-glyph, .bank-chev { flex-shrink: 0; } .bank-head:hover { background: var(--surface-4); } .bank-count { flex-shrink: 0; color: var(--text-3); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; } .bank-glyph { flex-shrink: 0; color: var(--text-2); } /* Right when shut, DOWN when open — 90°, the canvas's own figure. The same glyph in both positions, so it reads as one control with two states rather than two icons (the pin button's rule). */ .bank-chev { flex-shrink: 0; color: var(--accent); transition: transform .28s cubic-bezier(.4,0,.2,1); } .bank.open > .bank-head .bank-chev { transform: rotate(90deg); } .bank-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); } .bank.open > .bank-body { grid-template-rows: 1fr; } /* The clip is REQUIRED and must carry `min-height: 0`. A grid row of 0fr still lays its content out at full height; only an overflow-hidden child with its automatic minimum size defeated actually collapses. */ .bank-clip { overflow: hidden; min-height: 0; } .bank-inner { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 10px; opacity: 0; transition: opacity .24s ease; } .bank.open > .bank-body .bank-inner { opacity: 1; } /* A bank may hold twenty rows plus a "N more". Capped and scrolled INSIDE the animating row, so the height animation still resolves to a real auto height and the panel is never pushed past the bottom of the window. */ #kbList, #botList { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 0; /* The canvas's open bank holds three rows and can take its natural height. A real one holds twenty plus a "N more", which would take the panel and leave the conversation list a single row — measured, 443px of bank against a 498px panel. Capped, so the bank scrolls inside its own animated row and the height animation still resolves to a real number. vh so a short window gets a smaller bank rather than none of its chats. */ max-height: min(38vh, 320px); } #botList::-webkit-scrollbar { width: 6px; } #botList::-webkit-scrollbar-thumb { background: var(--border-6); border-radius: 6px; } #botList::-webkit-scrollbar-track { background: transparent; } .bank-inner .kb-actions { padding: 0 12px; } #kbList, #botList { padding-left: 12px; padding-right: 12px; } /* The ridge above the banks — see index.html. */ .banks-ridge { flex: 0 0 10px; background: linear-gradient(180deg, transparent, var(--t-fade)); } .banks-rule { flex: 0 0 1px; background: linear-gradient(90deg, transparent, var(--border-6) 12%, var(--border-6) 88%, transparent); } /* The canvas asks for this explicitly: render everything at once, keep the banks instant. A reader who has asked for less motion has asked for less motion, not for a faster version of it. */ @media (prefers-reduced-motion: reduce) { .bank-body, .bank-chev, .bank-inner { transition: none !important; } } #chatList::-webkit-scrollbar, #kbList::-webkit-scrollbar { width: 6px; } #chatList::-webkit-scrollbar-thumb, #kbList::-webkit-scrollbar-thumb { background: var(--border-6); border-radius: 6px; } #chatList::-webkit-scrollbar-track, #kbList::-webkit-scrollbar-track { background: transparent; } /* Chat row + its hover-revealed ⋮ menu */ .chat-row-wrap { position: relative; } .chat-row-wrap .chat-row { padding-right: 34px; } .chat-dots { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--text-3); cursor: pointer; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s; } .chat-row-wrap:hover .chat-dots, .chat-row-wrap.menu-open .chat-dots { opacity: 1; } .chat-dots:hover { background: rgba(0,0,0,0.07); color: var(--text); } .chat-menu { /* position/top/left are set inline (fixed) so the menu escapes the scrolling chat list instead of being clipped by it */ position: absolute; right: auto; top: auto; z-index: 220; background: var(--surface); border-radius: 12px; padding: 5px; min-width: 148px; box-shadow: 0 4px 18px rgba(0,0,0,0.18); border: 1px solid var(--border); } .chat-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); text-align: left; font-family: inherit; } .chat-menu-item:hover { background: var(--sidebar); } .chat-menu-item.danger { color: var(--danger); } .chat-menu-item.danger:hover { background: var(--danger-tint); } .chat-menu-icon { font-size: 13px; width: 16px; text-align: center; } /* Shared small modal (rename / delete confirm) */ .modal-overlay { position: fixed; inset: 0; background: rgba(31,31,31,0.45); z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); border-radius: 18px; padding: 22px 24px; width: 420px; max-width: 92vw; box-shadow: 0 12px 44px rgba(0,0,0,0.28); } .modal-title { font-size: 18px; font-weight: 600; } .modal-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; line-height: 1.55; } .modal-input { width: 100%; margin-top: 16px; border: 1px solid var(--sidebar-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; } .modal-input:focus { border-color: var(--brand-blue); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .modal-btn { border: none; border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; background: var(--sidebar); color: var(--text-2); } .modal-btn.primary { background: var(--accent); color: var(--on-accent); } .modal-btn.danger { background: var(--danger); color: var(--on-accent); } .modal-btn:hover { filter: brightness(0.96); } /* ── Chat rows (Canvas-4 · 5a) ────────────────────────────────────────── 34px, 9px radius, a 5px dot and a 12.5px title — not the 20px pill with a speech-bubble glyph it replaces. The dot carries the state (accent while this chat is the open one, muted when it is not), which frees the title to carry only the title: at 13.5px semibold on a 20px pill, a list of auto-generated titles all looked equally important. */ .chat-row { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; text-align: left; border: none; cursor: pointer; background: transparent; border-radius: 9px; padding: 0 10px; min-height: 34px; justify-content: center; font-size: 12.5px; color: var(--text-2); font-weight: 400; font-family: inherit; transition: background .14s, border-color .14s; } .chat-head { display: flex; align-items: center; gap: 9px; min-width: 0; height: 34px; } .chat-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); opacity: .55; } .chat-row:hover { background: var(--surface-4); } .chat-row.active { background: var(--accent-tint-3); } .chat-row.active .chat-title { color: var(--text); font-weight: 500; } .chat-row.active .chat-dot { background: var(--accent); opacity: 1; } /* The 2px accent mark down the left of the open chat. Inset 8px top and bottom so it reads as a mark ON the row rather than a border AROUND it. */ .chat-row.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); } .chat-row svg { flex-shrink: 0; } .chat-row .chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-row .chat-count { margin-left: auto; font-size: 10.5px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; } .add-doc-btn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px dashed var(--border-6); border-radius: 14px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: inherit; } .add-doc-btn:disabled { opacity: 0.6; cursor: default; } .add-yt-btn { border-color: var(--danger-tint-3); color: var(--text-3); } .add-yt-btn:disabled { opacity: 0.7; } /* ── Indexing progress ─────────────────────────────────────────────────── A chip while work is in flight; hovering opens the full stage list so it is always answerable which step is slow, what is done and what is still to come. */ .job-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } /* ── Queue chips (Canvas-5) ───────────────────────────────────────────── A pill per job with its own progress rail and a percentage — the running one in the accent, the rest outlined, so "which of these is actually moving" is answered without reading a word. */ .job-chip { position: relative; display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 11px; border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent); cursor: default; } .job-chip.job-queued { border-color: var(--border-6); background: transparent; color: var(--text-3); } .job-chip.job-done { border-color: var(--ok); background: var(--ok-tint); color: var(--ok); } .job-chip.job-failed { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); } .job-rail { flex-shrink: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--t-track); overflow: hidden; } .job-rail i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--t-acc-deep), var(--t-acc-lift)); transition: width .3s ease; } .job-pct { flex-shrink: 0; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; } .job-head { display: flex; align-items: center; gap: 8px; width: 100%; } .job-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-tick, .job-x { font-size: 12px; } .job-dismiss { border: none; background: none; cursor: pointer; color: inherit; opacity: 0.55; font-size: 15px; line-height: 1; font-family: inherit; } .job-dismiss:hover { opacity: 1; } .job-steps { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 22px rgba(0,0,0,0.18); min-width: 262px; color: var(--text); /* A long stage list must scroll, never run off the page — the last points of a video's eight stages were simply unreachable. */ max-height: min(60vh, 480px); overflow-y: auto; } /* Chip near the bottom of the screen: open the panel UPWARD, where the room is. */ .job-steps-up { top: auto; bottom: calc(100% + 6px); } /* The composer's attachment chips ALWAYS sit at the bottom, so their stage panel always opens upward. */ .chat-file .chat-file-steps { top: auto; bottom: calc(100% + 8px); } .chat-file:hover .chat-file-steps { display: block; } .chat-file-prepping .chat-file-label { color: var(--accent-5); } .job-chip:hover .job-steps { display: block; } .job-steps-title { font-size: 11px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-step { font-size: 12px; line-height: 1.75; color: var(--text-5); } /* upcoming = grey */ .job-step-done { color: var(--ok); } .job-step-running { color: var(--accent-5); font-weight: 600; } .job-step-failed { color: var(--danger); } .job-step-skipped { color: var(--text-8); text-decoration: line-through; } .kb-empty { font-size: 12px; color: var(--text-4); padding: 0 8px; } .kb-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .kb-item .kb-sub { margin-top: 2px; } .kb-item .kb-info { flex: 1; min-width: 0; } .kb-item .kb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .kb-item .kb-sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-item .kb-remove { border: none; background: none; cursor: pointer; color: var(--text-3); font-size: 16px; line-height: 1; font-family: inherit; } .kb-item img.kb-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; cursor: zoom-in; } /* ── Bot Bank ──────────────────────────────────────────────────────────── Pictures the assistant found by itself. Visually quieter than the user's own uploads (dashed border, no card shadow) so the two are never confused, and the remove button only appears on hover — this list grows on its own and a column of × buttons would read as clutter. */ .kb-section { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); padding: 10px 4px 2px; } .kb-section-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-4); } .kb-item.kb-bot { background: var(--surface-8); border-style: dashed; box-shadow: none; } .kb-item.kb-bot .kb-name { white-space: normal; font-weight: 400; line-height: 1.35; } .kb-item.kb-bot .kb-remove { opacity: 0; transition: opacity 0.12s; } .kb-item.kb-bot:hover .kb-remove, .kb-item.kb-bot:focus-within .kb-remove { opacity: 1; } /* Files attached to one conversation — visually distinct from the sidebar's knowledge bank, because their scope is different and that must be obvious. */ .chat-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px 0; } .chat-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--accent-tint); color: var(--accent-5); border-radius: 12px; padding: 4px 6px 4px 10px; position: relative; /* anchors the hover stage panel */ } /* A failed attachment must not look like a quiet one. It carries the reason and a retry, because nothing was stored server-side — this chip is the only evidence the file did not make it in. */ .chat-file-error { background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger); align-items: baseline; } .chat-file-why { font-size: 11px; opacity: .95; margin-left: 6px; max-width: 420px; line-height: 1.4; } .chat-file-retry { margin-left: 8px; border: 1px solid var(--danger); background: transparent; color: var(--danger); border-radius: 999px; padding: 1px 9px; font-size: 11px; cursor: pointer; font-family: inherit; font-weight: 600; flex-shrink: 0; } .chat-file-retry:hover { background: var(--danger); color: var(--on-accent); } .chat-file-x { border: none; background: none; cursor: pointer; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; font-family: inherit; padding: 0 2px; } .chat-file-x:hover { opacity: 1; } /* Retrieved-passage cards: readable in full, with the matched words marked so it is obvious WHY the passage was cited. */ .chunk-text-full { max-height: 340px; overflow-y: auto; white-space: pre-wrap; } .chunk-more { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 11.5px; color: var(--accent); padding: 4px 0 0; font-weight: 500; } .chunk-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .chunk-go { font-size: 14px; color: var(--accent); text-decoration: none; line-height: 1; padding: 0 2px; font-weight: 600; } .chunk-go:hover { color: var(--accent-4); } /* ⓘ provenance, on hover — added date vs published date vs who added it */ .chunk-info { position: relative; font-size: 12px; color: var(--text-4); cursor: help; } .chunk-info:hover { color: var(--text); } .chunk-info-panel { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); min-width: 226px; cursor: default; } .chunk-info:hover .chunk-info-panel { display: block; } .chunk-info-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; } .chunk-info-row b { color: var(--text-3); font-weight: 500; } .chunk-info-row i { color: var(--text); font-style: normal; text-align: right; } .chunk-info-stale { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--surface-4); font-size: 11px; color: var(--warn-text-4); } mark.hl { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; } .md-img-pending { display: inline-block; font-size: 12.5px; color: var(--text-3); background: var(--surface-4); border-radius: 10px; padding: 4px 10px; margin: 4px 0; } .kb-uploading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--brand-blue); padding: 6px 8px; } .spinner-blue { width: 14px; height: 14px; border: 2px solid var(--brand-blue); border-top-color: transparent; border-radius: 50%; display: inline-block; } .side-footer-wrap { margin-top: auto; display: flex; flex-direction: column; gap: 6px; } .llm-connections-btn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--sidebar-2); border-radius: 14px; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: inherit; } #providerDots { margin-left: auto; display: flex; gap: 3px; } .provider-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-6); display: inline-block; } .provider-dot.on { background: var(--ok-4); } .side-footer { font-size: 11px; color: var(--text-4); padding: 8px; line-height: 1.5; } /* ── Main area ───────────────────────────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } .scroll { flex: 1; overflow-y: auto; padding: 24px 0; } .col { max-width: 760px; margin: 0 auto; padding: 0 24px; transition: max-width 0.22s ease; } /* With the panel away the column keeps its centre and gains a little room. Deliberately a little — a text column much past this stops being easier to read and starts being harder, so the win here is the centring, not width. */ .app.sidebar-hidden .col { max-width: 860px; } /* …and the centring has to be on the SCREEN, not on `.main`. The 48px rail is a flex item, so `.main` starts 48px in and `margin: 0 auto` centred the column inside what was left — 24px right of where the reader is looking, which is exactly the thing unpinning exists to fix. A margin equal to the rail's whole width puts the free space back on the right, so the column's own centre lands on the screen's. ONE variable drives it, because two things are centred in `.main` and a second hard-coded 48 is the copy that drifts: the reading column and the scroll-to-bottom pill, which is positioned `left: 50%` of the same box. */ .app.sidebar-hidden { --rail-w: 48px; } /* The correction is PADDING on the boxes that hold the column, never a margin on the column itself: `.col` centres with `margin: 0 auto`, and setting one side to a length leaves the other `auto` to swallow every remaining pixel — measured, that pushed the column to the right edge and the offset GREW with the window. Padding keeps both margins auto and simply makes the box they centre in symmetric about the screen. */ /* Each box keeps its OWN left inset, so the correction is "your left padding plus the rail" rather than one number for both: `.scroll` is flush (its column carries the 24px) and `.input-outer` pads 24px itself, so padding both by 48 made them asymmetric in two different ways and the composer landed 12px right of the conversation it belongs under. */ .app.sidebar-hidden .scroll { padding-inline-end: var(--rail-w); } .app.sidebar-hidden .input-outer { padding-inline-end: calc(24px + var(--rail-w)); } .app.sidebar-hidden .scroll-bottom { transform: translateX(calc(-50% - var(--rail-w) / 2)); } /* Below 900px the rail is not drawn at all, so there is nothing to correct — and correcting anyway would push the column off the other side. */ @media (max-width: 900px) { .app.sidebar-hidden { --rail-w: 0px; } } /* Always-visible state tag: current LLM + tools, top of chat area */ /* ── Top bar (Canvas-4 · 5a) ─────────────────────────────────────────── 58px, a hairline underneath, three clusters. It replaces a pill that floated over the conversation — which cost nothing until something needed to scroll to the top of the page and arrived under it. */ .topbar { flex-shrink: 0; height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 26px; border-bottom: 1px solid var(--t-line); } /* The phone's way into the side panel. Hidden on a desktop, where the pin in the panel's own header already does this — two controls for one thing can only disagree with each other. */ .topbar-side { display: none; } .topbar-lib { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; } .topbar-lib svg { flex-shrink: 0; } .topbar-dot { color: var(--text-4); } .topbar-web { color: var(--text-4); } .topbar-web.on { color: var(--accent); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* The account control, as the canvas draws it: the avatar and the name in one outlined pill. It used to be a bare circle floating in the corner. */ .acct-pill { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--t-line2); background: transparent; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--text-2); transition: border-color .16s, background .16s; } .acct-pill:hover { border-color: var(--accent); background: var(--accent-tint); } /* The pill has to beat the 36px circle the bare button still declares — `width`, `border-radius` and the fill all come from that older rule, and without these the name was clipped to a 36px disc. The robot avatar goes too: the disc now carries the initial, and both drawing at once is what put a robot next to an "A". */ .acct-btn.acct-pill { width: auto; height: 34px; border-radius: 999px; background: transparent; box-shadow: none; padding: 0 12px 0 4px; } .acct-btn.acct-pill:hover { background: var(--accent-tint); } .acct-btn.acct-pill .acct-avatar { display: none; } .acct-pill-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .acct-pill-face { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(140deg, var(--t-acc-lift), var(--t-acc-deep)); color: var(--t-on-acc); display: grid; place-items: center; font-size: 11px; font-weight: 600; } .acct-pill-name { white-space: nowrap; } .state-tag-row { flex: 1; display: flex; justify-content: center; min-width: 0; } /* The model, as the canvas's pill: a live dot, the accent, an outline. */ .state-tag { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent); font-size: 12.5px; font-weight: 500; letter-spacing: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .state-tag::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } @media (max-width: 900px) { .topbar { padding: 0 10px; gap: 8px; } .topbar-lib { display: none; } /* the model and who you are survive */ .topbar-side { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; /* A5 · nothing below --tap-min */ margin-inline-start: -6px; border: 0; border-radius: 11px; background: transparent; color: var(--text-2); cursor: pointer; } .topbar-side:hover { background: var(--t-hover); color: var(--text-1); } .topbar-side:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* TRANSFORM, not margin. Here the panel is `position: fixed`, and margin does not move a fixed box — it is placed by `left: 0`. So the panel was never actually hidden on a phone: it sat over the conversation with the class set and the reader had no way to move it, which is what "there is no way to open the left side panel" was actually describing. Measured: with `sidebar-hidden` on, its left edge stayed at 0. */ .app.sidebar-hidden .sidebar { margin-left: 0; transform: translateX(-100%); } .sidebar { transition: transform 0.22s ease; will-change: transform; } } /* Empty state (greeting + LLM picker) */ .greeting { padding-top: 14vh; } .greeting-hello { font-size: 44px; font-weight: 600; line-height: 1.15; width: fit-content; /* same palette as the PrivateRAG logo, animated for a shiny sweep */ background: linear-gradient(90deg, #4285f4, #9b72cb 25%, #d96570 50%, #9b72cb 75%, #4285f4); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; } @keyframes shine { to { background-position: -300% 0; } } .greeting-sub { font-size: 24px; color: var(--border-6); font-weight: 500; margin-top: 4px; } /* LLM picker shown in the empty-chat state when no model chosen yet */ .llm-picker { margin-top: 34px; } .llm-picker-label { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 10px; } .llm-picker-row { display: flex; gap: 10px; flex-wrap: wrap; } .llm-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1.5px solid var(--sidebar-2); border-radius: 16px; padding: 14px 18px; min-width: 150px; cursor: pointer; font-family: inherit; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--text); transition: border-color 0.15s, background 0.15s; } .llm-card:hover { border-color: var(--brand-blue); background: var(--accent-tint-9); } .llm-card.selected { border-color: var(--accent); background: var(--accent-tint); } .llm-card .llm-card-sub { font-size: 11.5px; color: var(--text-3); font-weight: 400; } .llm-card:disabled { opacity: 0.45; cursor: default; } .llm-card:disabled:hover { border-color: var(--sidebar-2); background: var(--surface); } .llm-picker-hint { font-size: 12px; color: var(--text-4); margin-top: 10px; } .llm-picker-hint a { color: var(--accent); cursor: pointer; text-decoration: underline; } /* Messages */ .msg-row { display: flex; gap: 14px; margin: 22px 0; } .msg-row.user { flex-direction: row-reverse; } .avatar { width: 30px; height: 30px; border-radius: 8px; background: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 13px; font-weight: 700; } .msg-body { max-width: 82%; min-width: 0; } .status-pill { font-size: 12.5px; color: var(--ok); background: var(--ok-tint); display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 3px 10px; margin-bottom: 6px; font-weight: 500; } .status-pill .spin { width: 10px; height: 10px; border: 2px solid var(--ok); border-top-color: transparent; border-radius: 50%; display: inline-block; } /* ── Progress log ──────────────────────────────────────────────────────── One line per step the turn went through, kept after it finishes. The running step is green and spinning; completed ones stay, greyed, with how long they took — so a slow step reads as progress, not as a freeze. */ .steps { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 7px; } .step { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 3px 10px; font-weight: 500; } .step-running { color: var(--ok); background: var(--ok-tint); } .step-done { color: var(--text-3); background: var(--surface-4); } .step .spin { width: 10px; height: 10px; border: 2px solid var(--ok); border-top-color: transparent; border-radius: 50%; display: inline-block; } .step-tick { font-size: 11px; color: var(--ok); line-height: 1; } /* Inspection. The caret only appears on steps that have something to show, so an empty disclosure is never offered — same rule as the Queue's Stop button. */ .step-has-detail { cursor: default; } .step-caret { background: none; border: 0; padding: 0; margin: 0 -2px 0 0; cursor: pointer; font-size: 15px; line-height: 1; color: inherit; opacity: .55; transition: transform .14s ease, opacity .14s ease; transform-origin: 50% 50%; } .step-caret:hover { opacity: 1; } .step-caret-open { transform: rotate(90deg); opacity: 1; } .step-detail { align-self: stretch; margin: 1px 0 5px 14px; padding: 9px 11px; border-inline-start: 2px solid var(--border-2); background: var(--surface-4); border-radius: 0 8px 8px 0; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 7px; } .step-detail-note { color: var(--text-3); font-weight: 500; } .step-detail-code, .step-detail-text { margin: 0; padding: 7px 9px; background: var(--surface-2); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; } /* A wide result must scroll inside its own box — the conversation column never scrolls sideways. */ .step-detail-scroll { overflow-x: auto; max-height: 300px; } .step-detail-table { border-collapse: collapse; font-size: 11.5px; white-space: nowrap; } .step-detail-table th, .step-detail-table td { border: 1px solid var(--border-2); padding: 3px 7px; text-align: left; } .step-detail-table th { background: var(--surface-2); font-weight: 600; position: sticky; top: 0; } .sql-card-code { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; } .sql-card-table td.hl-cell, .sql-card-table th.hl-cell { background: var(--mark); } .sql-card-table tr.hl-row td:not(.hl-cell) { background: color-mix(in srgb, var(--mark) 30%, transparent); } .step-detail-item { border: 1px solid var(--border-2); border-radius: 7px; padding: 6px 8px; background: var(--surface-2); } .step-detail-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 600; color: var(--text-1); margin-bottom: 3px; } .step-detail-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-3); font-weight: 500; flex: none; } .step-detail-body { line-height: 1.55; max-height: 150px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .step-detail-more { color: var(--text-3); font-size: 11.5px; } /* Data tables — whose material a group is, and one expandable row per table. */ .idx-scope { margin-inline-start: 8px; font-weight: 500; font-size: 11px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .tbl-row { cursor: pointer; } .tbl-row .idx-body { min-width: 0; } .tbl-panel { margin: 0 0 8px 30px; } /* Text uses `--warn-text`, never `--warn`. The amber that reads correctly as a FILL or an edge is 1.87:1 as text on a light ground — measured — so the two cases need two values, and the darker one already existed unused. */ .tbl-partial { margin-top: 3px; font-size: 11.5px; color: var(--warn-text); font-weight: 500; } /* Advanced — a switch and what turning it off costs. */ .adv-top { display: flex; align-items: center; gap: 9px; cursor: pointer; } .adv-label { font-weight: 600; font-size: 14px; color: var(--text-1); } .adv-detail { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-3); } /* Usage & cost */ .usage-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .usage-controls-label { font-size: 12px; color: var(--text-3); margin-right: 2px; } .usage-pill { border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 500; } .usage-pill.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; } .usage-stat { border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; /* the sub-captions are 1 to 4 lines, which made a row of ragged cards */ display: flex; flex-direction: column; min-height: 104px; } /* Was a green ground: the shipped build marked Cached tokens and Cache savings as "good", which is a second hue carrying no information a reader acts on — they are two of six numbers. The accent line marks them as related without inventing a palette. */ .usage-stat-good { border-color: var(--accent-tint-20); background: var(--accent-tint-5); } .usage-stat-value { font-size: 22px; font-weight: 650; color: var(--text-1); line-height: 1.2; } .usage-stat-label { font-size: 12.5px; color: var(--text-2); margin-top: 3px; font-weight: 500; } .usage-stat-sub { font-size: 11px; color: var(--text-3); margin-top: 3px; line-height: 1.4; } /* Was an amber flood with an amber left bar. A warning notice is not a destructive action, so it carries no hue: the ground is the raised surface, the mark is the accent, and the copy is ordinary body text. */ .usage-warn { display: flex; gap: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; max-width: 68ch; } .usage-warn::before { content: "i"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-size: 11px; font-style: italic; font-weight: 600; display: flex; align-items: center; justify-content: center; } .usage-picker { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .usage-picker-sel[hidden] { display: none; } .usage-picker-list, .usage-picker-sel { flex: 1 1 240px; min-width: 220px; border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 12px; padding: 10px; } .usage-search { width: 100%; border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text-1); } .usage-options { max-height: 132px; overflow-y: auto; margin-top: 8px; } .usage-option { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12.5px; cursor: pointer; color: var(--text-2); } .usage-picker-head { font-size: 12.5px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; } .usage-chips { display: flex; flex-wrap: wrap; gap: 6px; } .usage-chip { border: 1px solid var(--accent); background: var(--accent-tint-3); color: var(--accent-2); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit; font-weight: 500; } .usage-chart-card { border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; } .usage-chart-title { font-size: 13.5px; font-weight: 650; color: var(--text-1); margin-bottom: 8px; } .usage-chart { width: 100%; min-height: 300px; } .usage-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border-2); } .usage-price-name { flex: 1 1 220px; font-size: 12.5px; font-weight: 500; color: var(--text-1); } .usage-price-name .idx-scope { margin-left: 8px; font-weight: 400; } .usage-price-input { width: 84px; border: 1px solid var(--border-2); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-family: inherit; background: var(--surface); color: var(--text-1); } /* The caption is what makes three filled-in boxes readable — a row of bare numbers cannot say which one is the cached rate. */ .usage-price-field { display: flex; flex-direction: column; gap: 2px; } .usage-price-cap { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-left: 2px; } .usage-price-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; } .usage-price-find { flex: 1 1 220px; min-width: 160px; border: 1px solid var(--border-2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text-1); } .usage-price-find:focus { outline: none; border-color: var(--accent); } .usage-price-pills { display: flex; gap: 6px; } .usage-price-row[hidden] { display: none; } .usage-price-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; background: var(--accent-tint-5); color: var(--text-2); font-size: 10px; font-weight: 600; letter-spacing: .03em; vertical-align: 1px; } .bubble { border-radius: 18px; font-size: 15px; line-height: 1.65; } .msg-row.user .bubble { background: var(--accent-tint-5); padding: 12px 16px; white-space: pre-wrap; } .msg-row.assistant .bubble { background: transparent; padding: 2px 0; } /* ── Markdown rendering ──────────────────────────────────────────────── */ .md p { margin: 2px 0; } .md .md-gap { height: 8px; } .md .md-h { font-weight: 600; margin: 14px 0 6px; } .md .md-h1 { font-size: 22px; } .md .md-h2 { font-size: 19px; } .md .md-h3 { font-size: 16.5px; } .md .md-h4 { font-size: 15px; } .md ul { margin: 6px 0; padding-left: 22px; } .md ol { margin: 6px 0; padding-left: 24px; } .md li { margin: 3px 0; } .md pre { background: var(--text); color: var(--border); border-radius: 12px; padding: 12px 16px; font-size: 13px; overflow-x: auto; font-family: Menlo, Consolas, monospace; line-height: 1.5; margin: 8px 0; } .md code.inline { background: var(--surface-4); border-radius: 4px; padding: 1px 5px; font-size: 0.88em; font-family: Menlo, Consolas, monospace; } /* ── Inline citations (Canvas: PrivateRAG Inline Citations) ────────────── Both of these used to be BLOCK PILLS on the baseline — a blue one for [n] and a green one for a named source — which took the citation out of the sentence and made it furniture. Origin is carried by the marker's LETTER and by the glyph, never by a second colour, so the palette stays one accent and four markers in a row remain readable. B · a superscript marker keyed to the sources list. */ .md .cite-btn { display: inline-block; min-width: 17px; height: 15px; margin: 0 1px; padding: 0 4px; border: none; cursor: pointer; border-radius: 4px; font-family: inherit; background: var(--accent-tint); color: var(--accent); font-size: 0.66em; line-height: 15px; text-align: center; vertical-align: 4px; font-weight: 600; letter-spacing: .02em; transition: background .14s ease; } .md .cite-btn:hover { background: var(--accent); color: var(--on-accent); } /* A · a named source inside the clause: prose with a dotted accent underline and a glyph for its type. No background — the sentence keeps its rhythm. */ .md a.src-ref { position: relative; display: inline; color: var(--accent); border-bottom: 1px dotted var(--accent); text-decoration: none; cursor: pointer; white-space: nowrap; } .md a.src-ref:hover { border-bottom-style: solid; } .md .src-ref-ic { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; } /* The card is `fixed` and lives on : inside the bubble it is clipped by the message column, and the bubble is rebuilt every frame while streaming. */ .src-ref-card { position: fixed; z-index: 85; width: 300px; padding: 12px 14px; border-radius: 11px; background: linear-gradient(175deg, var(--t-panel, #fbfbff), var(--t-panel2, #f1f2fb)); box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 8px; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease; } .src-ref-card.on { opacity: 1; transform: none; pointer-events: auto; } .src-ref-card-head { display: flex; align-items: center; gap: 9px; } .src-ref-sheet { width: 26px; height: 32px; flex-shrink: 0; border-radius: 4px; overflow: hidden; background: #f7f7fb; box-shadow: inset 0 3px 0 var(--tint, var(--accent)); } .src-ref-sheet img { width: 100%; height: 100%; object-fit: cover; display: block; } .src-ref-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .src-ref-title { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .src-ref-sub { font-size: 10.5px; color: var(--text-4); } .src-ref-note { font-size: 11.5px; line-height: 1.5; color: var(--text-2); } .src-ref-acts { display: flex; align-items: center; gap: 7px; } .src-ref-act { height: 24px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-2); font-size: 10.5px; display: grid; place-items: center; text-decoration: none; } .src-ref-act-primary { border-color: var(--accent); color: var(--accent); } /* C · a verbatim quote — accent rule on the left, attribution beneath it. */ .md .md-quote { margin: 10px 0; padding: 11px 14px; border: 0; border-left: 2px solid var(--accent); border-radius: 0 9px 9px 0; background: var(--accent-tint); display: flex; flex-direction: column; gap: 7px; } .md .md-quote-text { font-size: .96em; line-height: 1.6; color: var(--text); } .md .md-quote-cite { font-size: 11.5px; color: var(--text-4); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .md .md-img-wrap { margin: 12px 0; } .md .md-img-wrap img { max-width: 340px; max-height: 240px; width: auto; border-radius: 12px; border: 1px solid var(--border); cursor: zoom-in; display: block; box-shadow: 0 1px 6px rgba(0,0,0,0.08); } .md .md-img-caption { font-size: 12px; color: var(--text-4); font-style: italic; margin-top: 5px; max-width: 340px; } /* Markdown tables (new): proper columns, borders, header, zebra rows */ .md .md-table-wrap { overflow-x: auto; margin: 10px 0; } .md table { border-collapse: collapse; width: 100%; font-size: 13.5px; border: 1px solid var(--sidebar-2); border-radius: 10px; overflow: hidden; } .md th { background: var(--sidebar); color: var(--text-6); font-weight: 600; text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--sidebar-2); border-right: 1px solid var(--border); } .md td { padding: 7px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: top; } .md th:last-child, .md td:last-child { border-right: none; } .md tr:last-child td { border-bottom: none; } .md tbody tr:nth-child(even) td { background: var(--surface-2); } /* ── LaTeX / math ─────────────────────────────────────────────────────── */ .md .tex-inline, .md .tex-block { font-family: 'Cambria Math', 'Latin Modern Math', Georgia, serif; font-size: 1.05em; line-height: 1.5; } .md .tex-block { display: block; text-align: center; margin: 12px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--surface-5); border-radius: 10px; font-size: 1.15em; overflow-x: auto; } /* stacked fraction */ .md .tex-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; } .md .tex-frac .tex-num { border-bottom: 1.3px solid currentColor; padding: 0 5px 1px; } .md .tex-frac .tex-den { padding: 1px 5px 0; } .md .tex-sqrt::before { content: "√"; padding-right: 1px; } .md .tex-sqrt { border-top: 1.3px solid currentColor; display: inline-block; padding: 0 2px; } .md .tex-text { font-family: inherit; font-style: normal; } .md .tex-inline sup, .md .tex-block sup { font-size: 0.72em; } .md .tex-inline sub, .md .tex-block sub { font-size: 0.72em; } /* Inline image from a markdown ![](url) in the answer */ .md .md-inline-img { /* `min(320px, 100%)` and not a bare 320px. The cap is a READING decision — an inline illustration should not dominate the column — but as a fixed pixel value it stops being a cap and becomes an overflow the moment the column is narrower than it: at a 320px viewport the column is ~292px and a 320px image runs past it, taking the whole conversation into a sideways scroll. `min()` keeps the intent at every width. */ max-width: min(320px, 100%); max-height: 220px; border-radius: 10px; display: block; margin: 8px 0; border: 1px solid var(--border); cursor: zoom-in; box-shadow: 0 1px 6px rgba(0,0,0,0.08); } /* Preview image attached to a cited web source */ .web-card-img { width: 100%; max-height: 130px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--ok-tint-2); display: block; } /* Summary section (new): visually distinct card so conclusions are scannable */ .md .summary-card { background: var(--sidebar); border: 1px solid var(--sidebar-2); border-left: 4px solid var(--brand-blue); border-radius: 12px; padding: 12px 16px; margin: 14px 0 6px; } .md .summary-card .md-h { margin-top: 0; } /* ── The streamed answer (Canvas-4 · 5a), motion spec verbatim ────────── Each word fades up 3px out of blur(2px) over 340ms. `both` matters: the trailing words carry a NEGATIVE delay, and without a backwards fill a word told it is 200ms in would flash at its from-state for one frame first. */ @keyframes prg-word-in { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } .prg-word { /* inline-BLOCK, and the canvas's own `display: inline` is why this needed saying: `transform` does not apply to a non-replaced inline box, so the 3px rise in the keyframes was being discarded and only the fade and the blur survived. A word is its own box here, so wrapping is unaffected — the spaces between them are real text nodes. */ display: inline-block; animation: prg-word-in .6s cubic-bezier(.2,.7,.3,1) both; } /* The caret from the canvas: a 2px rule in the accent, blinking on a hard step rather than a fade — a fading caret reads as a loading spinner. */ @keyframes prg-caret { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } .cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); border-radius: 2px; margin-left: 3px; vertical-align: -0.14em; animation: prg-caret .9s steps(1) infinite; } /* "Respect prefers-reduced-motion: render the full answer at once." Not a faster version of the same motion — none of it. */ @media (prefers-reduced-motion: reduce) { .prg-word { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } .cursor { display: none !important; } } /* Retry control under a user prompt */ .retry-bar { display: flex; justify-content: flex-end; margin-top: 6px; } .retry-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--sidebar-2); background: var(--surface); color: var(--text-3); border-radius: 14px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s; } .msg-row.user:hover .retry-btn, .retry-btn:focus-visible { opacity: 1; } .retry-btn:hover { color: var(--accent); border-color: var(--brand-blue); } /* Banner above the input while a retry is armed */ /* ── Retry bar (Canvas-5) ─────────────────────────────────────────────── A warning GROUND with its own line, a spinner that says the retry is really running, and the reassurance the canvas puts in the second line: nothing was lost. Not a pill — this is a state of the turn, not a chip. */ .retry-notice { display: flex; align-items: center; gap: 11px; background: var(--t-warnbg); border: 1px solid var(--t-warnline); border-radius: 11px; padding: 11px 14px; font-size: 12.5px; color: var(--text); margin-bottom: 8px; } .retry-notice-icon { flex-shrink: 0; color: var(--t-warn); display: grid; place-items: center; } .retry-notice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .retry-notice-sub { font-size: 11px; color: var(--text-3); } .retry-notice-sub[hidden] { display: none; } .retry-spin { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--t-warnline); border-top-color: var(--t-warn); animation: prg-spin 900ms linear infinite; } @keyframes prg-spin { to { transform: rotate(360deg); } } .retry-notice-cancel { flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-6); background: transparent; cursor: pointer; color: var(--text-2); font-size: 11.5px; font-family: inherit; white-space: nowrap; transition: border-color .16s, color .16s; } .retry-notice-cancel:hover { border-color: var(--accent); color: var(--accent); } @media (prefers-reduced-motion: reduce) { .retry-spin { animation: none; } } /* Sources panel */ .sources-wrap { margin-top: 10px; } /* The canvas's pill: a books glyph, the label, the count, and a caret that turns to point at the panel it opened. */ .sources-toggle { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); font-size: 11.5px; color: var(--accent); cursor: pointer; font-family: inherit; white-space: nowrap; } .sources-toggle:hover { background: var(--accent-tint-3); } .sources-toggle-ic, .sources-caret { display: grid; place-items: center; flex-shrink: 0; } .sources-caret { transition: transform .28s cubic-bezier(.4,0,.2,1); } .sources-toggle.open .sources-caret { transform: rotate(180deg); } .sources-n { font-variant-numeric: tabular-nums; } /* Opens on max-height + opacity, per the canvas — 320ms and 260ms. `hidden` cannot ease, and the jump was what made a long source list read as a page change rather than a disclosure. The cap is generous: it bounds the easing, and the panel scrolls with the answer past it. */ .sources-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .26s ease; } .sources-panel.open { max-height: 4000px; overflow: visible; opacity: 1; } @media (prefers-reduced-motion: reduce) { .sources-panel, .sources-caret { transition: none !important; } } /* A source card leads with a page. */ .chunk-card { display: flex; gap: 11px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--surface-2); transition: background 0.4s, border-color .16s; } .chunk-card:hover { border-color: var(--accent); } .chunk-body { flex: 1; min-width: 0; } .src-thumb { flex-shrink: 0; width: 40px; height: 52px; border-radius: 4px; background: #f7f7fb; box-shadow: 0 2px 7px rgba(0,0,0,.22); padding: 6px 5px; display: flex; flex-direction: column; gap: 2.5px; overflow: hidden; } .src-thumb-title { height: 3.5px; width: 16px; border-radius: 2px; flex-shrink: 0; } .src-thumb-line { height: 2px; border-radius: 2px; background: #d7d8e2; flex-shrink: 0; } .src-thumb-line.strong { background: #c9cad6; } .chunk-head { font-size: 11.5px; font-weight: 600; color: var(--brand-blue); display: flex; align-items: flex-start; gap: 8px; } .chunk-score { color: var(--text-4); font-weight: 400; } .chunk-text { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.55; } .img-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--brand-tint); border-radius: 12px; padding: 10px 14px; margin-top: 8px; background: var(--brand-tint-2); cursor: zoom-in; } .img-card-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; } .img-card-info { min-width: 0; } .img-card-head { font-size: 11.5px; font-weight: 600; color: var(--brand-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .img-card-caption { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.45; } .web-card { display: block; border: 1px solid var(--ok-tint-2); border-radius: 12px; padding: 10px 14px; margin-top: 8px; background: var(--ok-tint-3); text-decoration: none; } .web-card-head { font-size: 11.5px; font-weight: 600; color: var(--ok); display: flex; justify-content: space-between; gap: 8px; } .web-card-head .web-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .web-card-head .web-tag { color: var(--text-4); font-weight: 400; flex-shrink: 0; } .web-card-url { font-size: 11.5px; color: var(--text-3); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Input pill ──────────────────────────────────────────────────────── */ .input-outer { padding: 8px 24px 20px; } .input-col { padding: 0; } .pill { display: flex; align-items: flex-end; gap: 6px; background: var(--sidebar); border-radius: 28px; padding: 10px 12px 10px 14px; position: relative; } .icon-btn { border: none; background: none; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-btn.open { background: var(--sidebar-2); } .attach-btn { width: auto; height: auto; padding: 6px; border-radius: 8px; } /* ── Microphone ──────────────────────────────────────────────────────── */ .mic-btn { width: auto; height: auto; padding: 6px 8px; border-radius: 8px; color: var(--text-2); gap: 6px; } .mic-btn[hidden] { display: none; } .mic-btn:hover { background: var(--surface-4); } /* Recording is the one state that must be unmistakable, because the reader cannot see that a microphone is open — a pulsing red dot and a running clock, not a subtle tint. */ .mic-btn.recording { background: var(--danger-tint); color: var(--danger); } .mic-btn.recording svg { animation: mic-pulse 1.4s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .mic-btn.working { color: var(--accent); } .mic-btn.working svg { animation: mic-pulse 0.9s ease-in-out infinite; } .mic-btn:disabled { opacity: 0.45; cursor: default; } .mic-timer { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; color: inherit; } .mic-timer[hidden] { display: none; } .menu-anchor { position: relative; display: flex; } .options-menu { position: absolute; bottom: 46px; left: 0; background: var(--surface); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 6px; width: 250px; z-index: 10; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; cursor: pointer; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--text); text-align: left; font-family: inherit; } .menu-item:hover { background: var(--sidebar); } .menu-item:disabled { opacity: 0.45; cursor: default; } .menu-item:disabled:hover { background: none; } .menu-emoji { font-size: 16px; } .menu-item-body { flex: 1; } .menu-item-sub { font-size: 11px; color: var(--text-3); } .menu-chevron { color: var(--text-3); font-size: 16px; } .menu-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border-6); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 13px; font-weight: 700; flex-shrink: 0; } .menu-check.on { border: none; background: var(--accent); } /* Submenu under a provider / effort row: ~5 rows tall, then scrolls */ .llm-submenu { margin: 2px 0 4px; padding: 2px 0 2px 10px; border-left: 2px solid var(--accent-tint); margin-left: 14px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; } .menu-item.open { background: var(--sidebar); } .menu-item.open .menu-chevron { transform: rotate(90deg); } .menu-chevron { transition: transform 0.15s; display: inline-block; } .row-label { font-weight: 500; } .llm-submenu::-webkit-scrollbar { width: 6px; } .llm-submenu::-webkit-scrollbar-thumb { background: var(--border-6); border-radius: 6px; } .llm-group-head { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-4); padding: 8px 12px 4px; } .menu-hr { border: none; border-top: 1px solid var(--border); margin: 6px 8px 0; } .model-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 12px; font-size: 13.5px; position: relative; } .model-item.selected { background: var(--accent-tint); } .model-check { width: 14px; flex-shrink: 0; color: var(--accent); font-weight: 700; font-size: 12px; line-height: 1.5; } .model-body { flex: 1; min-width: 0; } .model-name { display: block; font-weight: 500; color: var(--text); } .model-item.selected .model-name { color: var(--accent); font-weight: 600; } .model-note { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-badge { background: var(--ok-tint); color: var(--ok); border-radius: 7px; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; margin-left: 6px; vertical-align: middle; } /* Effort hint tooltip: sits to the RIGHT of the menu so it never covers the other levels. Only 3 rows here, so this submenu doesn't need to scroll and can let the tooltip overflow. */ #menuEffort .llm-submenu { overflow: visible; max-height: none; } .effort-tip { position: absolute; left: calc(100% + 10px); top: -2px; width: 232px; background: var(--text); color: var(--surface-4); border-radius: 8px; padding: 9px 11px; font-size: 11.5px; line-height: 1.5; font-weight: 400; text-align: left; opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none; z-index: 30; box-shadow: 0 4px 16px rgba(0,0,0,0.28); white-space: normal; } .effort-tip::after { /* little arrow pointing back at the row */ content: ""; position: absolute; left: -5px; top: 12px; border: 5px solid transparent; border-right-color: var(--text); border-left: none; } .effort-item:hover .effort-tip, .effort-item:focus-visible .effort-tip { opacity: 1; visibility: visible; } /* Tool tags: vertically centered against the input's text line; every future tool tag stacks underneath, all centered as a group */ .tool-tags { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; align-self: center; } .web-on-pill { background: var(--ok-tint); color: var(--ok); border-radius: 12px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; } /* The box grows with what is being written, to FIVE lines, then scrolls. One row hid everything above the caret while a long prompt was composed; growing without a ceiling walks the composer up the screen and eats the conversation it is about. The height itself is set by `autosizeInput` — `max-height` here is the backstop, computed from the same line count. */ .input-wrap { position: relative; flex: 1; min-width: 0; display: flex; } #inputBox { flex: 1; border: none; background: transparent; outline: none; resize: none; font-size: 15px; font-family: inherit; padding: 8px 0; line-height: 1.45; max-height: calc(1.45em * 5 + 16px); overflow-y: auto; /* The mirror paints the words; this paints the CARET and the selection. */ color: transparent; caret-color: var(--text-1); position: relative; z-index: 1; } /* Every property that affects where a glyph lands must match #inputBox exactly, or the mirror and the real text drift apart as the line fills. */ .input-mirror { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-size: 15px; font-family: inherit; padding: 8px 8px 8px 0; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; color: var(--text-1); } /* The mirror paints these and the textarea paints the caret over them, so a mention may change COLOUR and never METRICS: a bolder face is wider, so a 600-weight span advanced the mirror ahead of the real text by ~7px on a 21-character filename and every glyph after it drifted — which reads as the next word overlapping the end of the name. A tint says "this is a token" and costs no advance width. */ .input-mirror .mention { color: var(--accent); background: var(--accent-tint-8, rgba(145, 132, 217, .14)); border-radius: 4px; box-decoration-break: clone; } /* Withheld in THIS chat — still typable, because the reader may be about to attach the document that frees it, and greying is a hint, not a refusal. */ .input-mirror .mention.off { color: var(--text-3); text-decoration: underline dotted; } /* Opens UPWARD: the composer sits at the bottom of the screen, so a menu that dropped down would open off-screen — the same reason the attachment stage panel flips up. */ .mention-menu { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px; max-width: 460px; max-height: min(46vh, 340px); overflow-y: auto; z-index: 60; background: var(--t-panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); padding: 5px; } .mention-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit; padding: 7px 9px; border-radius: 8px; color: var(--text-1); font-size: 13px; } .mention-item:hover, .mention-item.sel { background: var(--accent-tint-10); } .mention-name { font-weight: 600; color: var(--accent); white-space: nowrap; } .mention-item.off .mention-name { color: var(--text-3); } /* A filename is long and carries spaces, so it may wrap where a tool name never does — and it keeps the mono face, because it is an identifier the reader is matching character for character. */ .mention-name.mention-file { white-space: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-word; } .mention-why { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-head { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 7px 9px 3px; } #inputBox::placeholder { color: var(--text-4); } .send-btn { border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; background: var(--sidebar-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .send-btn.ready { background: var(--gradient); } .send-btn:disabled { cursor: default; } /* Streaming: the same button, stopping instead of sending. Its own colour, so the state is readable at a glance and a stop is never mistaken for a send. */ .send-btn.stopping, .send-btn.stopping.ready { background: var(--text-2); cursor: pointer; } .send-btn.stopping:hover { background: var(--text); } /* The permanent legend under the composer is gone — see `attachHint`. This is its replacement: the explanation, on the chip, on hover, dismissible. */ .chip-hint { position: fixed; z-index: 300; display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 7px 8px 7px 11px; border-radius: 10px; background: linear-gradient(175deg, var(--t-panel), var(--t-panel2)); box-shadow: 0 0 0 1px var(--t-line2), 0 12px 30px rgba(0,0,0,.28); font-size: 11.5px; color: var(--text-2); pointer-events: auto; } .chip-hint[hidden] { display: none; } .chip-hint-text { min-width: 0; } .chip-hint-x { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 0; background: transparent; color: var(--text-4); font-size: 10px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .chip-hint-x:hover { background: var(--surface-4); color: var(--text-2); } /* The chips that carry one. `help` and not `pointer`: pointing at it explains it, clicking the CARD is what opens the source. */ .step-tag-code, .two-chip-a { cursor: help; } /* ── Lightbox ────────────────────────────────────────────────────────── */ /* The GROUND and the colours are set by the themed block further down — the canvas replaces the black scrim with a soft radial matte in the theme's own values, and hard-coding a dark scrim here fought it: on a light theme the caption and the close button were being painted for a dark backdrop that no longer existed, so both came out nearly invisible. Only the geometry lives here. */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: zoom-out; padding: 30px; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 88vw; max-height: 80vh; object-fit: contain; cursor: default; } .lightbox-close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center; transition: border-color .16s, background .16s, color .16s; } .lightbox-caption { font-size: 13.5px; font-style: italic; margin-top: 14px; max-width: 700px; text-align: center; } .lightbox-caption .lightbox-name { color: var(--t-txt); font-style: normal; } /* ── Models connections overlay ─────────────────────────────────────────── */ .settings-overlay { position: fixed; inset: 0; background: rgba(31,31,31,0.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; } .settings-overlay[hidden] { display: none; } .settings-panel { background: var(--surface); border-radius: 20px; width: 860px; max-width: 94vw; max-height: 88vh; overflow: hidden; padding: 0; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,0.25); } .settings-panel .settings-head { padding: 22px 24px 18px; margin: 0; border-bottom: 1px solid var(--border); } .settings-panel #providerCards { padding: 20px 24px 26px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .settings-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .settings-title { font-size: 20px; font-weight: 600; } .settings-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; } .settings-close { border: none; background: var(--sidebar); border-radius: 50%; width: 32px; height: 32px; font-size: 15px; cursor: pointer; color: var(--text-2); flex-shrink: 0; } .provider-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; } .provider-card-head { display: flex; align-items: center; gap: 10px; } .provider-name { font-size: 15px; font-weight: 600; flex: 1; } .provider-state { font-size: 12px; font-weight: 600; border-radius: 10px; padding: 2px 9px; } .provider-state.ok { background: var(--ok-tint); color: var(--ok); } .provider-state.bad { background: var(--danger-tint); color: var(--danger); } .provider-state.off { background: var(--surface-4); color: var(--text-3); } .provider-key-row { display: flex; gap: 8px; margin-top: 12px; } .provider-key-row input { flex: 1; border: 1px solid var(--sidebar-2); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-family: Menlo, Consolas, monospace; outline: none; } .provider-key-row input:focus { border-color: var(--brand-blue); } .pv-btn { border: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; background: var(--accent-tint); color: var(--accent); } .pv-btn.secondary { background: var(--sidebar); color: var(--text-2); } .pv-btn:disabled { opacity: 0.5; cursor: default; } .provider-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .provider-test-result { font-size: 12.5px; flex: 1; } .provider-test-result.ok { color: var(--ok); } .provider-test-result.bad { color: var(--danger); } /* Enable/disable switch */ .switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--border-6); border-radius: 22px; transition: 0.2s; } .switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); top: 3px; left: 3px; transition: 0.2s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::before { transform: translateX(18px); } .switch-label { font-size: 12.5px; color: var(--text-3); } /* ── Animations ──────────────────────────────────────────────────────── */ .spin { animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } } @keyframes blink { 50% { opacity: 0; } } .flash { animation: flashbg 2s ease-out forwards; } @keyframes flashbg { 0% { background: var(--mark-3); border-color: var(--warn-border-2); } 70% { background: var(--mark-3); } 100% { background: var(--surface-2); border-color: var(--border); } } /* A source we could not open. Shown on the card because a snippet from a stranger's repost and a fully-read primary source must not look alike. */ .web-tag-unread { color: var(--danger-4); } /* Retrieved, shown for transparency, but not cited by the answer. */ .chunk-unused { opacity: .62; } /* Said, not shouted: it explains an absence rather than reporting a fault, so it sits at the size of the metadata around it and takes no colour. */ .chunk-noline { font-size: 11px; color: var(--text-3); opacity: .8; margin-top: 6px; font-style: italic; line-height: 1.45; } .chunk-unused-tag { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--surface-4); color: var(--text-3); font-size: 11px; font-weight: 500; } /* ── Dashboard ──────────────────────────────────────────────────────────── */ .dash-overlay { position: fixed; inset: 0; background: var(--surface); z-index: 90; } .dash { display: grid; grid-template-columns: minmax(210px, 1fr) 3fr; height: 100%; } .dash-side { background: var(--surface-7); border-right: 1px solid var(--border-5); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; /* The rail is a column with three parts and only the MIDDLE one scrolls. With twenty sections the list is taller than the viewport, and while the buttons were direct children the whole rail grew and pushed "Back to chat" off the bottom of the screen — the one control that leaves the dashboard. min-height:0 is required: a flex item's automatic minimum is its content, so without it the rail refuses to be shorter than its own list and the overflow never engages. */ min-height: 0; overflow: hidden; } /* Three groups, because the nav answers three different questions: what this ACCOUNT holds, what a customer needs HELP with, and what changes the INSTALL. Without the split, a staff account saw one flat list of twenty and had to know which of them it was allowed to press. */ .dash-nav-group { display: flex; flex-direction: column; gap: 4px; } .dash-nav-group[hidden] { display: none; } .dash-nav-head { padding: 12px 11px 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .dash-nav-group + .dash-nav-group { margin-top: 4px; } .dash-nav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; /* the scrollbar must not steal width from a 44px row */ scrollbar-width: thin; } .dash-nav-list > * { flex: none; } .dash-brand { font-weight: 600; font-size: 15px; padding: 0 10px 14px; } .dash-brand-sub { font-weight: 400; font-size: 12px; color: var(--text-3); } .dash-nav { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--text); text-align: left; } .dash-nav:hover { background: var(--surface-5); } .dash-nav.on { background: var(--accent-tint-4); color: var(--accent-2); font-weight: 500; } .dash-count { margin-left: auto; font-size: 11px; color: var(--text-3); background: var(--border); border-radius: 9px; padding: 1px 7px; } /* pinned under the scrolling list, not pushed along by it */ .dash-side-foot { flex: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-5); } .dash-close { width: 100%; padding: 9px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: var(--text-2); } .dash-close:hover { background: var(--surface-4); } .dash-main { --dash-pt: 26px; --dash-px: 30px; overflow: auto; padding: var(--dash-pt) var(--dash-px) 60px; } .dash-head { margin-bottom: 20px; } .dash-title { font-size: 21px; font-weight: 600; } .dash-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; } /* A section's own explanation, above the first card. It had NO rule at all — the "class nothing styles" trap this file has recorded four times — so the one paragraph explaining what a page is for rendered at default body size and ran the full width of the page, which is the measure rule broken by the line that introduces every other rule. */ .idx-note { font-size: 13px; line-height: 1.7; color: var(--text-3); max-width: 68ch; text-wrap: pretty; margin: 0 0 16px; padding-inline: 2px; } /* The consequence half, when there is one — the same split the settings rows use: one sentence, then what it costs to get wrong. */ .idx-note b { display: block; color: var(--text-2); font-weight: 550; margin-bottom: 3px; } /* Stage card: one pipeline step and the models that can run it */ .stage { border: 1px solid var(--border-5); border-radius: 13px; padding: 16px; margin-bottom: 15px; } .stage-name { font-weight: 600; font-size: 15px; } .stage-blurb { font-size: 13px; color: var(--text-3); margin: 3px 0 12px; /* Canvas: body copy stops at 68ch even on a 2400px monitor — measured at 122ch here, which is nearly double and the single biggest reason a settings page reads as a wall. The right side of the card stays empty on purpose. */ max-width: 68ch; line-height: 1.7; text-wrap: pretty; } .stage-warn { font-size: 12.5px; color: var(--warn-text); background: var(--warn-tint-2); border: 1px solid var(--warn-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.45; } .opt { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border: 1px solid var(--border-5); border-radius: 10px; margin-bottom: 7px; cursor: pointer; } .opt:hover { background: var(--surface-2); } .opt.on { border-color: var(--accent); background: var(--accent-tint-8); } .opt.locked { opacity: .55; cursor: not-allowed; } .opt-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--text-5); margin-top: 2px; flex: 0 0 auto; } .opt.on .opt-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); } .opt-label { font-size: 14px; font-weight: 500; } .opt-note { font-size: 12.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; } .tag { font-size: 10.5px; font-weight: 600; border-radius: 7px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; } /* Canvas-6 · 4 — ONE accent. Green tags for free/active sat beside the blurple and the eye read two systems, which is the same finding as the green citation pill. The distinction survives in the WORD; only the hue goes. A second hue is reserved for failure, which is the one state that should break the palette. */ .tag-free { background: var(--accent-tint); color: var(--accent); } .tag-paid { background: var(--border); color: var(--text-2); } .tag-key { background: var(--danger-tint); color: var(--danger); } /* A recorded capability-test FAILURE. Louder than tag-key on purpose: a missing key is a setup step, a failed test is a model that does not work. */ .tag-fail { background: var(--danger); color: var(--on-accent); font-weight: 600; } /* Live failure count for a model on a stage. Grey at zero — 'never failed' is information too, and a badge that only appears on trouble makes the healthy case unreadable. */ .fail-dot { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--border); color: var(--text-2); font-size: 12px; line-height: 22px; text-align: center; cursor: pointer; margin-left: 8px; } /* Green = attempts that produced an answer, amber = attempts that did not. Both shown even at zero: "0 of 40" and "never tried" are different facts, and a badge that appears only on trouble makes the healthy case unreadable. */ .ok-dot.live { background: var(--accent-tint); color: var(--accent); font-weight: 600; } .fail-dot.live { background: var(--warn-tint); color: var(--warn-text); font-weight: 600; } .ok-dot { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--border); color: var(--text-2); font-size: 12px; line-height: 22px; text-align: center; cursor: pointer; margin-left: 8px; } .fail-dot { margin-left: 4px; } /* A stage is a CHECKLIST now, not a radio: several models can be chosen, and the order they are listed in is the order they are tried. */ .opt-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; cursor: pointer; } .opt-check.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* Only chosen rows drag — an unchosen model has no position in the chain. */ .opt-grip { flex: 0 0 auto; cursor: grab; color: var(--text-3, var(--text-2)); margin-right: 6px; font-size: 14px; line-height: 1; user-select: none; } .opt[draggable="true"] { cursor: default; } .opt.dragging { opacity: 0.45; } .opt.dragging .opt-grip { cursor: grabbing; } .stage-mode { display: flex; gap: 8px; align-items: center; margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } .stage-mode .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .stage-mode .seg button, .stage-mode .seg span { padding: 5px 12px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; font-size: 12px; } .stage-mode .seg button.on, .stage-mode .seg span.on { background: var(--accent); color: var(--on-accent); } /* the value readout is not a control: it must not look like one */ .stage-mode .seg span { cursor: default; } .stage-mode .why { font-size: 12px; color: var(--text-2); flex: 1 1 auto; } .opt-cost { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; } /* Indexes */ .idx-group { margin-bottom: 26px; } .idx-group-head { font-weight: 600; font-size: 14px; margin-bottom: 9px; } .idx-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--surface-5); border-radius: 10px; margin-bottom: 6px; } .idx-row:hover { background: var(--surface-2); } .idx-thumb { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; } .idx-body { min-width: 0; flex: 1; } .idx-title { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idx-meta { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idx-open { color: var(--accent); text-decoration: none; font-size: 13px; white-space: nowrap; } .idx-del { border: 0; background: none; color: var(--danger); font-size: 16px; cursor: pointer; padding: 2px 7px; border-radius: 6px; line-height: 1; } .idx-del:hover { background: var(--danger-tint); } .idx-empty { font-size: 13px; color: var(--text-5); padding: 6px 2px; } /* An empty state is a STATE, not leftover text, and it was being drawn as leftover text: 2px of padding against a card whose every row is inset 22px, so the one line saying "there is nothing here" was the only thing on the page not lining up with anything. It now takes the row's own inset, enough vertical room to read as a deliberate answer, and — where it is the whole content of a card — a quiet ground so the card does not look unfinished. One rule rather than 44 call sites. */ .idx-empty, .usr-empty, .q-empty { padding: 18px 22px; line-height: 1.6; max-width: 68ch; text-wrap: pretty; } /* Sole content of a card: centre it in its own space and give it a ground. `:only-child` is the test because that is exactly the case where there is no row above it to align to and nothing else to carry the card. */ .item-card > .idx-empty:only-child, .item-card > .usr-empty:only-child, .item-card > .q-empty:only-child { padding: 26px 22px 28px; text-align: center; margin-inline: auto; } /* Following a heading inside a card, it aligns with the heading rather than floating centred under it. */ .item-card > .item-shared + .idx-empty, .item-card > .item-shared + .usr-empty, .item-card > .grp-head + .idx-empty, .item-card > .grp-head + .usr-empty { padding-top: 4px; padding-bottom: 20px; } /* Inside a fold — the user card's details — the dense size is right, but it still has to line up with the rows beside it. */ .usr-det .usr-empty { font-size: 11.5px; padding: 4px 0 10px; } /* Not inside a card at all (a whole section with nothing in it): it lines up with where the first card's text would have been. */ #dashBody > .idx-empty { padding: 22px; } /* Queue: one section per pipeline stage, items move between them */ .q-section { margin-bottom: 22px; } .q-head { font-weight: 600; font-size: 14px; margin-bottom: 8px; } .q-item { border: 1px solid var(--surface-5); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; } .q-top { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .q-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-stage { color: var(--text-3); font-size: 12.5px; margin-left: auto; white-space: nowrap; } .q-barwrap { display: flex; align-items: center; gap: 9px; margin-top: 8px; } .q-bar { flex: 1; height: 7px; background: var(--border); border-radius: 5px; overflow: hidden; } .q-fill { height: 100%; background: var(--ok-3); border-radius: 5px; transition: width .4s ease; } .q-fill.failed { background: var(--danger); } .q-pct { font-size: 12px; color: var(--text-2); min-width: 34px; text-align: right; } .q-note { font-size: 12px; color: var(--text-3); margin-top: 5px; } .q-empty { font-size: 12.5px; color: var(--text-7); } /* ── Account menu (top right of the screen) ─────────────────────────────── */ /* Lives IN the top bar now (Canvas-4), so it is part of the row rather than a circle floating over the corner of the conversation. */ .acct { position: relative; } .acct-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--border-3); background: var(--surface); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .acct-btn:hover { background: var(--surface-4); } /* Signed in: light-grey circle with the robot; signed out stays the bars. The trigger itself says which state you are in before the menu is opened. */ .acct-btn.in { background: var(--border); border-color: var(--border-2); } .acct-btn.in:hover { background: var(--border-7); } .acct-avatar { display: flex; line-height: 0; } /* The state toggle in CSS, keyed on the .in class — the `hidden` attribute is not honoured on script marks a dashboard URL before any pixels exist, so the conversation is never shown on the way to a section. app.js removes the attribute the moment it has decided for real. */ html[data-boot="dash"] .app { visibility: hidden; } html[data-boot="dash"] #dashOverlay[hidden] { display: block; } /* Waiting on an upload: distinct from 'nothing typed yet'. The button is disabled either way, but only one of them resolves on its own. */ #sendBtn.waiting { cursor: progress; opacity: 0.75; } /* Which tool ran on a step, and whether it was paid for. Green = served from store; grey = a real call. */ .step-tag { margin-left: 8px; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--border); color: var(--text-3); white-space: nowrap; } .step-tag-free { background: var(--ok-tint); color: var(--ok); } /* An attach whose first attempt failed and is being retried: yellow, because it is neither 'working normally' nor 'dead' and both of those already have colours. The red final state keeps the existing .chat-file-error style. */ .chat-file-retry { background: var(--warn-tint); border-color: var(--warn-border); color: var(--warn-text); } /* Highlighted terms inside a step's inspection panel: the hunted keyword and its closest stored spellings, marked wherever they appear. */ .step-detail mark.hl-term { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; } /* Toggle under a collapsed tall block (long fence or markdown panel). */ .blk-toggle { display: block; margin: 4px 0 10px; padding: 4px 10px; font-size: 12px; color: var(--accent, #2563eb); background: transparent; border: 1px solid var(--border, #d8dee9); border-radius: 6px; cursor: pointer; } .blk-toggle:hover { background: var(--hover, rgba(0,0,0,.04)); } /* ── Advanced: segmented choice + the file-format registry ─────────────── */ .seg-row { display: flex; gap: 0; margin: 10px 0 8px; border: 1px solid var(--border, #d8dee9); border-radius: 8px; overflow: hidden; width: fit-content; } .seg-btn { padding: 6px 14px; font-size: 13px; border: none; cursor: pointer; background: var(--surface, #fff); color: var(--text, #202124); border-right: 1px solid var(--border, #d8dee9); } .seg-btn:last-child { border-right: none; } .seg-btn:hover { background: var(--surface-3, #f8f9fa); } .seg-btn.seg-on { background: var(--accent-tint, #e8f0fe); color: var(--accent-3, #0b57d0); font-weight: 600; } .fmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .fmt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; font-family: ui-monospace, monospace; color: var(--text-2, #5f6368); background: var(--surface-3, #f8f9fa); border: 1px solid var(--border, #e0e3e7); border-radius: 999px; } .fmt-chip-extra { color: var(--accent-3, #0b57d0); background: var(--accent-tint, #e8f0fe); border-color: var(--accent-tint-2, #d3e2fd); } .fmt-x { border: none; background: none; cursor: pointer; padding: 0; font-size: 11px; line-height: 1; color: inherit; opacity: .6; } .fmt-x:hover { opacity: 1; } .fmt-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .fmt-input { flex: 1 1 260px; padding: 7px 10px; font-size: 13px; color: var(--text, #202124); background: var(--surface, #fff); border: 1px solid var(--border, #d8dee9); border-radius: 8px; } .fmt-input:focus { outline: none; border-color: var(--accent, #1a73e8); } .fmt-input-ext { flex: 0 0 150px; font-family: ui-monospace, monospace; } .fmt-add-btn { padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--on-accent, #fff); background: var(--accent, #1a73e8); border: none; border-radius: 8px; } .fmt-add-btn:hover { background: var(--accent-2, #1558d6); } /* Queued prompts: waiting their turn behind the streaming answer. */ .queued-wrap { display: flex; flex-direction: column; align-items: flex-end; } .queued-bubble { opacity: .55; border: 1px dashed var(--border, #c4cbd4); } .queued-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 11px; color: var(--text-2, #5f6368); } .queued-x { border: 1px solid var(--border, #d8dee9); background: var(--surface, #fff); color: var(--text-2, #5f6368); border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1; padding: 3px 7px; } .queued-x:hover { color: var(--danger); border-color: var(--danger); } /* Collapse-from-the-top for tall panels and fences. */ .blk-head { cursor: pointer; user-select: none; } .blk-chevron { margin-left: auto; font-size: 11px; color: var(--text-2, #5f6368); padding-left: 10px; white-space: nowrap; } .blk-strip { cursor: pointer; user-select: none; font-size: 11px; color: var(--text-2, #5f6368); background: var(--surface-3, #f8f9fa); border: 1px solid var(--border, #e0e3e7); border-bottom: none; border-radius: 8px 8px 0 0; padding: 3px 10px; margin-top: 6px; } .blk-strip:hover { color: var(--accent-3, #0b57d0); } .blk-snippet { -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); } /* The running prompt's own stop control — bottom-right under the bubble. */ .msg-stop-wrap { display: flex; justify-content: flex-end; margin-top: 4px; } .msg-stop { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--accent, #1a73e8); background: var(--surface, #fff); } .msg-stop:hover { background: var(--accent-tint, #e8f0fe); } .msg-stop-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--accent, #1a73e8); } .fmt-chip-off { opacity: .45; text-decoration: line-through; } .fmt-example { font-size: 12px; color: var(--text-2, #5f6368); background: var(--surface-3, #f8f9fa); border-left: 3px solid var(--accent, #1a73e8); border-radius: 0; padding: 8px 12px; margin: 8px 0 4px; line-height: 1.5; } .fmt-example code { font-family: ui-monospace, monospace; color: var(--accent-3, #0b57d0); } /* ── The parsing-trace graph modal ─────────────────────────────────────── */ #docTreeOverlay { position: fixed; inset: 0; z-index: 300; background: rgba(20, 24, 30, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; } .dt-box { width: min(1100px, 94vw); height: min(760px, 90vh); background: var(--surface, #fff); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; position: relative; box-shadow: 0 18px 50px rgba(0,0,0,.3); } .dt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border, #e0e3e7); } .dt-title { font-weight: 600; font-size: 15px; color: var(--text, #202124); } .dt-x { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--text-2, #5f6368); padding: 4px 8px; border-radius: 6px; } .dt-x:hover { background: var(--surface-4, #f1f3f4); } .dt-body { flex: 1; display: flex; overflow: hidden; } .dt-svg-wrap { flex: 1; overflow: hidden; cursor: grab; } .dt-side { width: 320px; border-left: 1px solid var(--border, #e0e3e7); display: flex; flex-direction: column; background: var(--surface-2, #fafbfc); } .dt-side-meta { padding: 10px 14px; font-size: 12px; color: var(--text-2, #5f6368); border-bottom: 1px solid var(--border, #e0e3e7); } .dt-side-content { flex: 1; overflow: auto; padding: 12px 14px; } .dt-side-content pre { margin: 0; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: var(--text, #202124); } .dt-side-img { max-width: 100%; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--border, #e0e3e7); } .dt-line { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .dt-glyph { fill: #fff; text-anchor: middle; font-weight: 600; } .dt-label { font-size: 11px; text-anchor: middle; fill: var(--text-2, #5f6368); pointer-events: none; } .dt-pinned .dt-bg { filter: drop-shadow(0 0 7px #f9c50f) drop-shadow(0 0 3px #f9c50f); } .idx-tree { display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; font: inherit; } .dt-svg { width: 100%; height: 100%; } .dt-edge { stroke: var(--border, #d8dee9); stroke-width: 1.2; } .dt-node { cursor: pointer; } .dt-node circle { stroke: var(--surface, #fff); stroke-width: 2; transition: r .12s; } .dt-node:hover circle { filter: brightness(1.15); } .dt-node text { font-size: 11px; text-anchor: middle; fill: var(--text-2, #5f6368); pointer-events: none; } .dt-detail { position: absolute; inset: 52px 0 0 0; background: var(--surface, #fff); display: flex; flex-direction: column; } .dt-detail-head { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border, #e0e3e7); } .dt-back { border: 1px solid var(--border, #d8dee9); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; padding: 5px 12px; font-size: 13px; color: var(--accent-3, #0b57d0); } .dt-detail-meta { font-size: 12px; color: var(--text-2, #5f6368); } .dt-detail-body { flex: 1; overflow: auto; margin: 0; padding: 16px 20px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text, #202124); } .idx-tree { margin-left: 6px; } /* Deploy notice for tabs that stayed open across an update. */ .update-banner { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 400; font-size: 13px; color: var(--text, #202124); background: var(--surface, #fff); border: 1px solid var(--border, #d8dee9); border-radius: 10px; padding: 9px 14px; box-shadow: 0 6px 22px rgba(0,0,0,.18); display: flex; align-items: center; gap: 10px; } .update-banner button { border: none; border-radius: 7px; cursor: pointer; padding: 5px 12px; font-size: 13px; color: var(--on-accent, #fff); background: var(--accent, #1a73e8); } .update-banner button:hover { background: var(--accent-2, #1558d6); } /* ── Chart expand: a small canvas is the bubble's job, not the chart's ── */ .md-chart-slot { position: relative; } .chart-expand { position: absolute; top: 6px; left: 6px; z-index: 5; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); border-radius: 8px; font-size: 11px; padding: 3px 8px; cursor: pointer; font-family: inherit; opacity: 0.85; } .chart-expand:hover { opacity: 1; color: var(--accent-5); border-color: var(--accent-5); } .chart-modal-bk { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; } .chart-modal { position: relative; background: var(--surface); border-radius: 16px; padding: 18px; max-width: 96vw; max-height: 94vh; overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,0.35); } .chart-modal-x { position: absolute; top: 8px; right: 12px; z-index: 6; border: none; background: none; font-size: 22px; color: var(--text-3); cursor: pointer; font-family: inherit; } .chart-modal-x:hover { color: var(--text); } /* ── Users: three tiers of knowledge about a reader, kept visually apart ── */ .usr-card { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--surface); overflow: hidden; } .usr-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 12px 14px; font-family: inherit; font-size: 13px; color: var(--text); } .usr-name { font-weight: 600; } .usr-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-tint); color: var(--accent-5); border-radius: 8px; padding: 2px 7px; } .usr-meta { color: var(--text-4); font-size: 11.5px; } .usr-caret { margin-left: auto; color: var(--text-4); } .usr-det { padding: 4px 14px 14px; border-top: 1px solid var(--border); } .usr-sect { margin: 12px 0 6px; font-size: 12px; color: var(--text-2); } .usr-sect span { color: var(--text-4); font-size: 11px; } .usr-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); } .usr-row code { background: var(--surface-8); border-radius: 6px; padding: 1px 6px; font-size: 11.5px; } .usr-note { color: var(--text-4); font-size: 11px; } .usr-empty { font-size: 12.5px; color: var(--text-4); } .usr-btn { margin-top: 8px; border: 0; border-radius: 9px; background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-2); padding: 5px 11px; font-size: 12px; cursor: pointer; font-family: inherit; } .usr-btn:hover { color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-3); } .usr-btn:disabled { opacity: 0.55; cursor: default; } .usr-btn:hover:not(:disabled) { border-color: var(--accent-5); color: var(--accent-5); } /* Marked-image lightbox: compare against the original without leaving the view. */ .lightbox-toggle { margin-left: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; } .lightbox-toggle:hover { border-color: var(--accent-5); color: var(--accent-5); } .lightbox-key { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--text-3); white-space: pre-wrap; text-align: left; max-width: 640px; } /* ── Region geometry drawn over a plain picture ─────────────────────────── The server sends the unmarked photo plus its regions as data; the browser draws the boxes, so each one toggles individually from the chips beneath and carries its own description on hover. */ .pic-geom-wrap { position: relative; display: inline-block; max-width: 100%; width: fit-content; line-height: 0; /* no baseline gap under the img */ } .md .pic-geom-wrap { margin: 8px 0; } .pic-geom-wrap .md-inline-img { margin: 0; } .pic-geom-box { position: absolute; box-sizing: border-box; border: 3px solid #e83e3e; border-radius: 3px; pointer-events: none; } .pic-geom-tag { position: absolute; top: 0; left: 0; color: var(--on-accent, #fff); font-weight: 700; font-size: 11px; line-height: 1; padding: 2px 5px; border-bottom-right-radius: 3px; } .pic-geom-off { display: none; } .pic-geom-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; line-height: normal; } .pic-geom-chip { font: inherit; font-size: 11.5px; color: var(--text-2); background: var(--surface-2); border: 1.5px solid var(--border-2); border-radius: 10px; padding: 2px 9px; cursor: pointer; } .pic-geom-chip:hover { background: var(--surface-4); } .pic-geom-chip-off { opacity: .45; text-decoration: line-through; } .pic-geom-all { border-style: dashed; } .lightbox-geom-strip { justify-content: center; margin-top: 8px; max-width: 640px; } /* ══════════════════════════════════════════════════════════════════════════ NOCTURNE — the redesign, applied as a TOKEN REMAP. The same lever the dark-mode work used, and for the same reason: the palette is retuned at the token layer rather than re-picked rule by rule, so every existing rule takes the new look and none of them changes behaviour. Two layers: 1. `--t-*` the Nocturne tokens, copied VERBATIM from the two design canvases (PrivateRAG Chat / PrivateRAG Dashboard, THEMES map) so the app and the canvas cannot drift apart. 2. the remap — every legacy token (`--surface`, `--text`, `--accent`, …) redefined in terms of `--t-*`. Written ONCE for both themes: custom properties resolve at USE time, so a single declaration follows whichever theme is live. SPECIFICITY: the legacy theme blocks are `:root[data-theme="dark"]` and `:root:not([data-theme="light"])`, both (0,2,0). A remap at plain `:root` (0,1,0) would lose to them, so the remap is written at `:root:root` — also (0,2,0), winning on source order because it comes last in the file. THEME COVERAGE: light lives on `:root`; dark is declared twice, once for the media query and once for the explicit attribute, exactly as the legacy blocks are. `[data-theme="light"]` needs no block of its own — the media query already excludes itself with `:not([data-theme="light"])`, so an explicit light choice falls through to `:root`. ══════════════════════════════════════════════════════════════════════ */ /* — Nocturne tokens · LIGHT — */ :root { --t-page: #f6f7fe; --t-page2: #e9ebf8; --t-panel: #fbfbff; --t-panel2: #f1f2fb; /* The two tokens the item anatomy leans on, and they were never defined — `--text-1` in 42 declarations and `--t-hairline` in 15, none with a fallback, so every one of them was an INVALID declaration the browser dropped. That is why the record pages had no row separators and their titles took whatever colour they inherited: the CSS was written, parsed and silently discarded. A missing custom property fails without a word, which this file has now recorded four times. */ --sev-orange: #b25f10; --code-str: #1a6b52; --code-num: #6d4bbd; --text-1: #14161f; --t-hairline: rgba(20, 22, 31, .07); --t-panel3: #eaecf7; --t-panel4: #e0e3f2; /* opaque hover / pressed steps */ --t-card: #fbfbff; --t-card2: #f2f3fc; --t-row: #fdfdff; --t-track: rgba(41,43,49,.16); /* The banks' ground and the ridge that fades into it (Canvas-4 · 5a). */ --t-banks: rgba(41,43,49,.035); --t-fade: rgba(41,43,49,.05); --t-ok: #7fae90; --t-okbg: rgba(127,174,144,.10); --t-okline: rgba(127,174,144,.32); --t-warn: #c98b8b; --t-warnbg: rgba(201,139,139,.10); --t-warnline: rgba(201,139,139,.34); --t-attn: rgba(244,199,106,.60); --t-attnbg: rgba(244,199,106,.09); /* The account log's four severities. Dark and desaturated on purpose: a page of bright bars is a page nobody scans, and the colour is a 3px edge rather than the text so the row stays legible. */ --log-red: #a35555; --log-orange: #b5793f; --log-yellow: #a08a3c; --log-green: #5d8f6d; /* Canvas-5: the ok / warn grounds used by the health banner and retry bar. */ --t-ok: #5d8f6d; --t-okbg: rgba(93,143,109,.10); --t-okline: rgba(93,143,109,.30); --t-warn: #a35f5f; --t-warnbg: rgba(163,95,95,.08); --t-warnline: rgba(163,95,95,.28); --t-attn: rgba(196,138,0,.55); --t-attnbg: rgba(230,175,30,.11); /* The account log's four severities — see the dark block. */ --log-red: #8f4747; --log-orange: #99652f; --log-yellow: #86722c; --log-green: #4d7a5a; --t-line: rgba(41,43,49,.10); --t-line2: rgba(41,43,49,.18); --t-txt: #292b31; --t-txt2: #595d6c; --t-txt3: #75798c; /* The Z matrix: lit cubes, the two off cells, the idle/loading grey. */ --zg-lit: #292b31; --zg-off: #d6d8e0; --zg-idle: #a3a6b4; --t-acc: #796cbf; --t-acc-txt: #5d5294; --t-acc-lift: #968ae0; --t-acc-deep: #5d5294; --t-acc-soft: rgba(121,108,191,.13); --t-acc-soft2: rgba(121,108,191,.04); --t-acc-tint: #e7e5fe; --t-acc-tint2: #d2cefd; --t-acc-tint3: #f0eefe; --t-glow: rgba(145,132,217,.26); --t-glow2: rgba(181,171,252,.30); --t-input: #ffffff; --t-hover: rgba(41,43,49,.05); --t-on-acc: #f5f4ff; --t-shadow: 0 24px 60px rgba(41,43,49,.16); --t-hero1: #292b31; --t-hero2: #5d5294; --t-hero3: #796cbf; --t-code: #14161f; --t-code-txt: #e4e7f5; /* see the `.md pre` note */ --t-scrimchip: rgba(255,255,255,.82); /* the count chip over a preview */ /* What a modal sits ON. Tinted with the page's own deep indigo rather than a neutral grey — a grey scrim over a purple app reads as a different app. */ --scrim: rgba(41,43,49,.42); --t-matte: #eceefb; --t-matte2: #dfe2f2; /* the image viewer's ground */ } /* — Nocturne tokens · DARK (system) — */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn-text: #f4c76a; --t-page: #171a2b; --t-page2: #14161f; --t-panel: #232532; --t-panel2: #1a1c29; --sev-orange: #d98324; --code-str: #9db8e8; --code-num: #c4b1f5; --text-1: #f3f5fe; --t-hairline: rgba(233, 233, 237, .07); --t-panel3: #2c2f3e; --t-panel4: #363a4b; --t-card: #232532; --t-card2: #1c1e2a; --t-row: #1b1d29; --t-track: rgba(233,233,237,.14); --t-banks: rgba(15,17,25,.34); --t-fade: rgba(15,17,25,.45); --t-banks: rgba(15,17,25,.34); --t-fade: rgba(15,17,25,.45); --t-ok: #7fae90; --t-okbg: rgba(127,174,144,.10); --t-okline: rgba(127,174,144,.32); --t-warn: #c98b8b; --t-warnbg: rgba(201,139,139,.10); --t-warnline: rgba(201,139,139,.34); --t-attn: rgba(244,199,106,.60); --t-attnbg: rgba(244,199,106,.09); --log-red: #a35555; --log-orange: #b5793f; --log-yellow: #a08a3c; --log-green: #5d8f6d; --t-line: rgba(233,233,237,.08); --t-line2: rgba(233,233,237,.16); --t-txt: #f3f5fe; --t-txt2: #b2b6ca; --t-txt3: #75798c; --zg-lit: #e9e9ed; --zg-off: #3f424d; --zg-idle: #75798c; --t-acc: #9184d9; --t-acc-txt: #d2cefd; --t-acc-lift: #b5abfc; --t-acc-deep: #5d5294; --t-acc-soft: rgba(145,132,217,.16); --t-acc-soft2: rgba(145,132,217,.05); --t-acc-tint: #2b2741; --t-acc-tint2: #423a6a; --t-acc-tint3: #232838; --t-glow: rgba(145,132,217,.20); --t-glow2: rgba(76,83,151,.24); --t-input: #0f1119; --t-hover: rgba(233,233,237,.06); --t-on-acc: #14161f; --t-shadow: 0 24px 60px rgba(0,0,0,.6); --t-hero1: #f3f5fe; --t-hero2: #cfcbfb; --t-hero3: #9184d9; --t-code: #14161f; --t-code-txt: #e4e7f5; --t-scrimchip: rgba(15,17,25,.72); --scrim: rgba(10,11,17,.66); --t-matte: #1b1e2c; --t-matte2: #131520; } } /* — Nocturne tokens · DARK (explicit choice — must beat the media query) — */ :root[data-theme="dark"] { --sev-orange: #d98324; --code-str: #9db8e8; --code-num: #c4b1f5; --t-banks: rgba(15,17,25,.34); --t-fade: rgba(15,17,25,.45); --t-ok: #7fae90; --t-okbg: rgba(127,174,144,.10); --t-okline: rgba(127,174,144,.32); --t-warn: #c98b8b; --t-warnbg: rgba(201,139,139,.10); --t-warnline: rgba(201,139,139,.34); --t-attn: rgba(244,199,106,.60); --t-attnbg: rgba(244,199,106,.09); /* The account log's four severities. Dark and desaturated on purpose: a page of bright bars is a page nobody scans, and the colour is a 3px edge rather than the text so the row stays legible. */ --log-red: #a35555; --log-orange: #b5793f; --log-yellow: #a08a3c; --log-green: #5d8f6d; --warn-text: #f4c76a; /* These two MUST be repeated here. The media-query block only covers "system dark with no explicit choice"; a reader who picks Dark from the menu stamps `data-theme="dark"`, which that block excludes — so the value fell back to the light `:root` and every title rendered at a contrast ratio of 1.19 on a dark panel, which is invisible. This file's own theming rule says it: redefine under BOTH, or the toggle wins in only one direction. */ --text-1: #f3f5fe; --t-hairline: rgba(233, 233, 237, .07); --t-page: #171a2b; --t-page2: #14161f; --t-panel: #232532; --t-panel2: #1a1c29; --t-panel3: #2c2f3e; --t-panel4: #363a4b; --t-card: #232532; --t-card2: #1c1e2a; --t-row: #1b1d29; --t-track: rgba(233,233,237,.14); --t-line: rgba(233,233,237,.08); --t-line2: rgba(233,233,237,.16); --t-txt: #f3f5fe; --t-txt2: #b2b6ca; --t-txt3: #75798c; --zg-lit: #e9e9ed; --zg-off: #3f424d; --zg-idle: #75798c; --t-acc: #9184d9; --t-acc-txt: #d2cefd; --t-acc-lift: #b5abfc; --t-acc-deep: #5d5294; --t-acc-soft: rgba(145,132,217,.16); --t-acc-soft2: rgba(145,132,217,.05); --t-acc-tint: #2b2741; --t-acc-tint2: #423a6a; --t-acc-tint3: #232838; --t-glow: rgba(145,132,217,.20); --t-glow2: rgba(76,83,151,.24); --t-input: #0f1119; --t-hover: rgba(233,233,237,.06); --t-on-acc: #14161f; --t-shadow: 0 24px 60px rgba(0,0,0,.6); --t-hero1: #f3f5fe; --t-hero2: #cfcbfb; --t-hero3: #9184d9; --t-code: #14161f; --t-code-txt: #e4e7f5; --t-scrimchip: rgba(15,17,25,.72); --scrim: rgba(10,11,17,.66); --t-matte: #1b1e2c; --t-matte2: #131520; } /* — The remap: every legacy token, expressed in Nocturne — */ :root:root { /* Surfaces. Menus, modals and bubbles must stay OPAQUE — the canvas paints cards translucent over its own gradient, which reads as broken on a dropdown, so the translucency is spent on the page grounds instead and every surface token resolves to a solid step. */ --surface: var(--t-panel); --surface-2: var(--t-panel2); --surface-3: var(--t-panel2); --surface-4: var(--t-panel3); --surface-5: var(--t-panel4); --surface-6: var(--t-panel2); --surface-7: var(--t-panel2); --surface-8: var(--t-panel); --sidebar: var(--t-panel); --sidebar-2: var(--t-panel3); --sidebar-3: var(--t-panel2); /* Borders — eight legacy steps collapse onto Nocturne's two line weights. */ --border: var(--t-line2); --border-2: var(--t-line2); --border-3: var(--t-line2); --border-4: var(--t-line); --border-5: var(--t-line); --border-6: var(--t-txt3); /* also the .greeting-sub colour */ --border-7: var(--t-line2); --border-8: var(--t-line); /* Text ramp. */ --text: var(--t-txt); --text-2: var(--t-txt2); --text-3: var(--t-txt3); --text-4: var(--t-txt3); --text-5: var(--t-txt3); --text-6: var(--t-txt2); --text-7: var(--t-txt3); --text-8: var(--t-txt3); /* Accent — the whole app moves from Google blue to the Nocturne blurple. Anything that reads as TEXT takes `--t-acc-txt` (dark enough on light, light enough on dark); anything that draws a LINE takes `--t-acc`. */ --accent: var(--t-acc); --accent-2: var(--t-acc-txt); --accent-3: var(--t-acc-txt); --accent-4: var(--t-acc-deep); --accent-5: var(--t-acc); --accent-tint: var(--t-acc-tint); --accent-tint-2: var(--t-acc-tint2); --accent-tint-3: var(--t-acc-tint); --accent-tint-4: var(--t-acc-tint); --accent-tint-5: var(--t-acc-tint3); --accent-tint-6: var(--t-acc-tint3); --accent-tint-7: var(--t-acc-tint3); --accent-tint-8: var(--t-acc-tint3); --accent-tint-9: var(--t-panel2); --brand-blue: var(--t-acc); --brand-purple: var(--t-acc-lift); --brand-tint: var(--t-acc-tint2); --brand-tint-2: var(--t-acc-tint3); /* `--on-accent` DOES flip here, where it deliberately did not before: the Nocturne accent fill is a light blurple on the dark theme, so a white glyph on it would be invisible. It is the ink for the accent fill, and which ink reads depends on which theme's fill is under it. */ --on-accent: var(--t-on-acc); /* The brand gradient is the identity, and the identity is what changed. */ --gradient: linear-gradient(120deg, var(--t-acc-lift), var(--t-acc-deep)); } /* Status colours (ok / danger / warn / mark) are deliberately NOT remapped: they are semantic, they were measured against real states, and the canvas says nothing about them. Only their SURROUNDINGS moved. */ /* ── Structure ──────────────────────────────────────────────────────────── Everything below is the canvas's own geometry: the page gradient, the two glow fields, the accent as a line-and-glow rather than a fill. */ .app { position: relative; background: linear-gradient(160deg, var(--t-page) 0%, var(--t-page2) 100%); } /* The two radial glow fields, as pseudo-elements so no markup is needed. `z-index: 0` under panels at `z-index: 1`: a positioned element otherwise paints ABOVE its non-positioned siblings and the glow would sit over the conversation. */ .app::before, .app::after { content: ''; position: absolute; pointer-events: none; z-index: 0; } .app::before { top: -220px; left: 42%; width: 900px; height: 620px; background: radial-gradient(closest-side, var(--t-glow), transparent 75%); } .app::after { bottom: -280px; left: 28%; width: 780px; height: 540px; background: radial-gradient(closest-side, var(--t-glow2), transparent 72%); } .sidebar, .main { position: relative; z-index: 1; } .sidebar { background: linear-gradient(180deg, var(--t-panel), var(--t-panel2)); } /* — Brand — */ .brand { align-items: flex-start; gap: 9px; } /* The brand mark is the speech bubble itself (frontend/favicon.svg): the gradient and the shield are inside the SVG, so no tile is drawn behind it — a square behind a bubble would put a box around the thing the box was. */ .brand-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; } .brand-mark svg { display: block; width: 100%; height: 100%; } .brand-name { background: linear-gradient(92deg, var(--t-hero1), var(--t-hero3)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* — Sidebar controls — */ .new-chat-btn { border: 1px solid var(--t-acc); background: linear-gradient(180deg, var(--t-acc-soft), var(--t-acc-soft2)); color: var(--t-acc-txt); transition: box-shadow .18s; } .new-chat-btn:hover { box-shadow: 0 6px 22px var(--t-acc-soft); } .chat-search { background: var(--t-input); border: 1px solid var(--t-line); } .side-label { letter-spacing: .14em; color: var(--t-txt3); } /* The heading is ONE line: "Knowledge bank · 586 · shared", as the canvas sets it. It was three words plus a 104px "SHARED · ALL CHATS" badge in a 262px rail, so it wrapped to two lines and pushed the list down. The badge keeps its meaning in the title attribute. */ .bank-head { letter-spacing: .14em; color: var(--t-txt3); } .bank-head:hover { color: var(--t-txt2); } .kb-badge { color: var(--t-acc-txt); border: 1px solid var(--t-acc); background: transparent; border-radius: 999px; margin-left: auto; flex-shrink: 0; font-size: 9.5px; letter-spacing: .06em; padding: 2px 8px; } .kb-badge-bot { color: var(--t-txt3); border-color: var(--t-line2); } .kb-total { flex-shrink: 0; } /* A textarea does not grow for its PLACEHOLDER, so a long one ("Pick an LLM above to start chatting…") wrapped to a second line inside a box sized for one and was cut in half. The prompt is a single line in the canvas; it is a single line here, elided if the composer is too narrow to hold it. */ #inputBox::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* …and room for the ellipsis, so the prompt never runs into the send button. */ #inputBox { padding-right: 8px; } /* One line, as the canvas sets it: the rail leaves ~205px beside the mark and the pin, which "Self-hosted knowledge assistant" fits and the same string plus "· demo" did not — it wrapped and pushed the whole panel down a row. */ .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Add-to-bank actions: the canvas's three-up grid of dashed tiles, icon over a one-word label, each filling with the accent on hover. The labels were shortened to fit (see index.html) — an ~80px tile cannot set "Add document / image" at a readable size. */ .kb-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex-shrink: 0; } .add-doc-btn { height: 54px; width: auto; margin: 0; padding: 0 4px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px dashed var(--t-line2); border-radius: 10px; background: var(--t-input); color: var(--t-txt2); font-size: 10.5px; line-height: 1.1; text-align: center; transition: border-color .16s, color .16s, background .16s; } .add-doc-btn svg { flex-shrink: 0; } .add-doc-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .add-doc-btn:hover { border-color: var(--t-acc); color: var(--t-acc-txt); background: var(--t-acc-soft2); } /* ── The page itself never scrolls — only the regions inside it ─────────── `.app` was already `height: 100vh` with the conversation scrolling inside, but nothing stopped the DOCUMENT scrolling too: on mobile `100vh` counts the browser's own URL bar, so the app was always a little taller than the visible viewport and the whole page rubber-banded. Locking the document and switching to `100dvh` (the DYNAMIC viewport height, which excludes retracted browser chrome) fixes both — the shell is exactly the screen, and the only things that move are `.scroll` in the chat and `.dash-main` in the dashboard. `100vh` stays as the fallback for anything without `dvh`. */ html, body { height: 100%; overflow: hidden; overscroll-behavior: none; /* no rubber-band past the ends of an inner list */ } .app { height: 100vh; height: 100dvh; } .dash-overlay { height: 100%; height: 100dvh; overflow: hidden; } .dash { min-height: 0; } .dash-main { min-height: 0; overscroll-behavior: contain; } .scroll { min-height: 0; overscroll-behavior: contain; } /* The composer is the one part that must never be scrolled away from. */ .input-outer { flex-shrink: 0; } /* Narrow screens: the dashboard's rail becomes a horizontal chip row, and the account button is `position: fixed` at top-right on TOP of it — so the last chip scrolled underneath the avatar and could not be tapped. The row keeps the avatar's width clear at its end. */ @media (max-width: 900px) { /* Reserving width at the END of the row is not enough: the avatar is fixed to the viewport, so whichever chip is under it at the CURRENT scroll position is the one that cannot be tapped. On a narrow screen the dashboard is a full-screen overlay carrying its own nav and its own way back, so the account button simply steps aside while it is open — which is also how the canvas draws the dashboard: no avatar over the rail. */ body:has(#dashOverlay:not([hidden])) .acct { display: none; } .dash-side { padding-right: 12px; } } /* Phones: the hero is set for a 1440px canvas and has to come down, and the composer's send button must not crowd the placeholder into an ellipsis. */ @media (max-width: 560px) { .greeting { padding-top: 8vh; } .greeting-hello { font-size: 34px; } .greeting-sub { font-size: 17px; } .greeting-kicker { font-size: 10px; letter-spacing: .14em; } .kb-actions { gap: 5px; } .add-doc-btn { font-size: 10px; height: 50px; } } /* The active conversation: a soft accent wash plus the 2px accent bar the canvas puts down the left edge of every selected row. */ .chat-row.active { background: linear-gradient(90deg, var(--t-acc-soft), var(--t-acc-soft2)); box-shadow: inset 2px 0 0 var(--t-acc); } .chat-row.active .chat-count { color: var(--t-acc-txt); } .kb-item:hover { background: var(--t-hover); } /* The connection dots pulse — a live link, not a static badge. */ @keyframes noct-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } #providerDots > * { animation: noct-pulse 2.6s ease-in-out infinite; } /* — The model pill — */ /* NB the legacy rule painted this `rgba(240,244,249,.92)` — a light-mode literal the dark-mode tokenisation missed, so on the dark theme the pill was a pale slab. It is a token now, in both themes. The pill FLOATS over the conversation (`.state-tag-row` is absolute), which is why the panel colour under the accent wash is opaque: the canvas gives it a header bar to sit in, and until this markup has one, text scrolling underneath must not show through it. */ .state-tag { border: 1px solid var(--t-acc); border-radius: 999px; background: linear-gradient(180deg, var(--t-acc-soft), var(--t-acc-soft2)), linear-gradient(180deg, var(--t-panel), var(--t-panel)); color: var(--t-acc-txt); box-shadow: 0 2px 10px var(--t-acc-soft2); display: inline-flex; align-items: center; gap: 8px; } .state-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--t-acc); box-shadow: 0 0 8px var(--t-acc); } /* — The empty state — */ .greeting { display: flex; flex-direction: column; align-items: center; text-align: center; } .greeting-kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-acc-txt); margin-bottom: 12px; } /* The legacy hero swept a 300%-wide gradient on a 5s infinite `shine`. The size and the animation are reset here as well as the colours: Nocturne is a quiet system — "the accent is a line and a glow, never a flood" — and a permanent shimmer on the largest text on the page is the opposite of that. */ .greeting-hello { background: linear-gradient(96deg, var(--t-hero1) 10%, var(--t-hero2) 50%, var(--t-hero3) 92%); background-size: 100% 100%; animation: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -.03em; } .greeting-sub { font-weight: 300; letter-spacing: -.01em; color: var(--t-txt2); } /* — The composer — */ /* A gradient ring rather than a border colour: two backgrounds, one clipped to the padding box (the panel) and one to the border box (the accent sweep). */ .pill { border: 1px solid transparent; background: linear-gradient(180deg, var(--t-panel), var(--t-panel2)) padding-box, linear-gradient(120deg, var(--t-acc), var(--t-acc-soft2) 48%, var(--t-acc-deep)) border-box; } .icon-btn:hover { background: var(--t-acc-soft); color: var(--t-acc-txt); } .icon-btn.open { background: var(--t-acc-soft); color: var(--t-acc-txt); } .send-btn.ready { background: linear-gradient(140deg, var(--t-acc-lift), var(--t-acc-deep)); box-shadow: 0 0 20px var(--t-acc-soft); transition: transform .18s, box-shadow .18s; } .send-btn.ready:hover { transform: translateY(-1px); box-shadow: 0 0 28px var(--t-acc); } /* The glyph colour is set as a presentation ATTRIBUTE in app.js (`fill="#fff"` when ready). A CSS `fill` property outranks a presentation attribute, so the ink follows the theme here without touching that code — which matters, because on the dark theme the accent fill is LIGHT and a white glyph on it would disappear. */ /* ── The Zobitas Z matrix (design kit: Zobitas Logo Kit / LOGO SPEC) ──── Nine cubes on a 3×3 grid; seven are lit to draw the Z, the two flanking cells stay grey. The static logo is the HELD frame, so every placement renders correctly with no animation at all. Two motions, and only two: `.zg-play` pops the cubes on once at first paint and holds; `.zg-loop` is the loading state (a turn being written, an upload in flight) and repeats. The scatter is FIXED per cell (`--d` for the loop's phase, `--t` for the one-shot delay) — never random, so every play matches. The kit's `infinite → both` swap is NOT used for the one-shot: its loop keyframes end on the COLLAPSED frame (scale .34), so "play once and hold" would hold the grid shrunk. The -once keyframes end on the held frame. */ .zg { display: block; width: 100%; height: 100%; overflow: visible; } .zg rect { transform-box: fill-box; transform-origin: center; fill: var(--zg-lit); } .zg rect.zg-off { fill: var(--zg-off); } .zg-loop .zg rect, .zg.zg-loop rect, .send-btn.waiting .zg rect { animation: zg-pop 5.6s cubic-bezier(.3,1.4,.5,1) var(--d) infinite, zg-lit 5.6s ease-in-out infinite; } .zg-loop .zg rect.zg-off, .zg.zg-loop rect.zg-off, .send-btn.waiting .zg rect.zg-off { animation-name: zg-pop, zg-dim; } .zg-play .zg rect { animation: zg-pop-once 5.6s cubic-bezier(.3,1.4,.5,1) var(--t) both, zg-lit-once 5.6s ease-in-out both; } .zg-play .zg rect.zg-off { animation-name: zg-pop-once, zg-dim-once; } @keyframes zg-pop { 0%, 3% { transform: scale(.34); filter: brightness(.3); } 8% { transform: scale(1.16); filter: brightness(2.4); } 15%, 38% { transform: scale(1); filter: brightness(1); } 44% { transform: scale(1.08); filter: brightness(1.9); } 52%, 92% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(.34); filter: brightness(.3); } } @keyframes zg-lit { 0%, 58% { fill: var(--zg-idle); } 70%, 92% { fill: var(--zg-lit); } 100% { fill: var(--zg-idle); } } @keyframes zg-dim { 0%, 58% { fill: var(--zg-idle); } 70%, 100% { fill: var(--zg-off); } } @keyframes zg-pop-once { 0%, 3% { transform: scale(.34); filter: brightness(.3); } 8% { transform: scale(1.16); filter: brightness(2.4); } 15%, 38% { transform: scale(1); filter: brightness(1); } 44% { transform: scale(1.08); filter: brightness(1.9); } 52%, 100% { transform: scale(1); filter: brightness(1); } } @keyframes zg-lit-once { 0%, 58% { fill: var(--zg-idle); } 70%, 100% { fill: var(--zg-lit); } } @keyframes zg-dim-once { 0%, 58% { fill: var(--zg-idle); } 70%, 100% { fill: var(--zg-off); } } @media (prefers-reduced-motion: reduce) { .zg rect { animation: none !important; } } /* ── The composer on a phone: the box gets the whole width ────────────── Six controls and a "Web on" pill in one 314px row left the textarea 32px wide at 390 and 8px at 360 — measured — so the text was typed into a sliver at the right edge. Below 640px the pill WRAPS: the box is its own full-width row on top, and the controls sit in a row beneath it with Send pushed to the right. Nothing is hidden; it is the same pill, two rows deep. */ @media (max-width: 640px) { .input-outer { padding: 6px 12px 12px; } .app.sidebar-hidden .input-outer { padding-inline-end: 12px; } .pill { flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 10px 8px 12px; border-radius: 22px; } .input-wrap { flex: 1 1 100%; order: -1; width: 100%; min-width: 0; } #inputBox { flex: 1; width: 100%; padding: 6px 4px 4px; font-size: 16px; } .input-mirror { padding: 6px 4px 4px; font-size: 16px; } .send-btn { margin-inline-start: auto; width: 36px; height: 36px; } .icon-btn { width: 32px; height: 32px; } .attach-btn, .mic-btn { padding: 5px 6px; } .tool-tags { align-self: center; } .web-on-pill { padding: 3px 9px; font-size: 11.5px; } .options-menu { bottom: 42px; } } /* The send button is the Z matrix itself — no circle. */ .send-btn, .send-btn.ready, .send-btn:disabled { background: none; box-shadow: none; border-radius: 12px; padding: 0; } .send-btn #sendIcon { width: 34px; height: 34px; } /* Nothing to send: the grid in its read-only state (lit cells idle grey). Something to send: the Z lights. Uploading: the loading loop above. */ .send-btn #sendIcon rect.zg-on { fill: var(--zg-idle); transition: fill .25s ease; } .send-btn.ready #sendIcon rect.zg-on { fill: var(--zg-lit); } /* A mark that can be pressed says so: the pointer over it, and a halo around it on hover, keyboard focus and the press itself. The halo is a drop-shadow because the button has no box — it IS the shield's outline. */ .send-btn:not(:disabled) { cursor: pointer; } .send-btn { transition: filter .18s ease, transform .18s ease; } .send-btn.ready:hover, .send-btn.ready:focus-visible { transform: translateY(-1px); box-shadow: none; outline: none; filter: drop-shadow(0 0 4px var(--t-acc)) drop-shadow(0 0 14px var(--t-acc-soft)); } .send-btn.ready:active { transform: translateY(0) scale(.94); filter: drop-shadow(0 0 8px var(--t-acc-lift)) drop-shadow(0 0 18px var(--t-acc)); } /* The sidebar mark, larger, and centred on the wordmark. */ .brand { align-items: center; } .brand-mark { width: 40px; height: 40px; } @media (max-width: 900px) { .brand-mark { width: 36px; height: 36px; } } /* — Dashboard — */ .dash-nav.on { background: linear-gradient(90deg, var(--t-acc-soft), var(--t-acc-soft2)); box-shadow: inset 2px 0 0 var(--t-acc); color: var(--t-acc-txt); } .dash-nav:hover { background: var(--t-hover); } .dash-overlay { background: linear-gradient(160deg, var(--t-page) 0%, var(--t-page2) 100%); } .model-row { background: var(--t-row); border: 1px solid var(--t-line); } .model-row:hover { border-color: var(--t-acc); background: var(--t-row); } /* — Interaction states, per the system: keyboard focus is the accent ring and nothing keeps the browser default. — */ :focus-visible { outline: 2px solid var(--t-acc); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--t-acc) 30%, transparent); } /* The update banner sits at the BOTTOM, clear of the composer. At `bottom: 18px` it landed on top of the pill — covering the input is not an acceptable price for a notice about a reload — so it clears the composer, its legend row and their padding. Nocturne tokens, and the accent as an outline rather than a fill, like every other primary action in the system. */ .update-banner { bottom: 118px; background: var(--t-panel); border-color: var(--t-acc); color: var(--t-txt); box-shadow: var(--t-shadow); border-radius: 12px; } .update-banner button { background: transparent; border: 1px solid var(--t-acc); color: var(--t-acc-txt); font-family: inherit; font-weight: 500; } .update-banner button:hover { background: var(--t-acc-soft); } /* On a phone the composer is taller relative to the screen and the legend row wraps to two lines. */ @media (max-width: 560px) { .update-banner { bottom: 132px; left: 12px; right: 12px; transform: none; justify-content: space-between; } } /* ── Inverted-pair rules, repaired ──────────────────────────────────────── Five rules built a high-contrast chip by ABUSING a semantic pair: `.md pre` painted `background: var(--text); color: var(--border)`. That worked only because the legacy light palette happened to hold `--text` near-black and `--border` near-white, so the pair inverted by luck. Nocturne's tokens hold no such relationship — `--border` is a translucent LINE colour — so the remap turned every one of them into text on its own colour: a code block came out as a white slab with white text you could select but not read, which is exactly what a reader reported. The repair is not a new inversion, it is to stop inverting: on this system a raised surface is "an edge plus ambient darkness", so tooltips and toasts are elevated PANELS, and a code block gets its own deep ground token. Now nothing depends on two unrelated tokens staying opposite. */ /* A code block is an INVERTED surface, and the same one in both themes — that is what it was before the Nocturne remap (`background: var(--text)` was near-black on the light theme, with near-white text) and what every reader expects a fence to look like. Making it a theme SURFACE was the mistake: on the light theme it resolved to #eef0fa on a #f6f7fe page — a 0.03 luminance difference — so a fence read as plain text run into the prose, which is exactly how it was reported. */ .md-code { margin: 8px 0; border-radius: 12px; overflow: hidden; background: var(--t-code); border: 1px solid var(--t-line2); } .md-code-head { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px 0 14px; border-bottom: 1px solid rgba(233, 233, 237, .10); } .md-code-lang { flex: 1; min-width: 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-code-copy { flex-shrink: 0; border: 1px solid rgba(233, 233, 237, .16); background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit; font-size: 11px; border-radius: 7px; padding: 3px 10px; } .md-code-copy:hover { border-color: var(--t-acc); color: var(--t-acc-txt); } .md-code-copy.ok { border-color: var(--ok); color: var(--ok); } .md-code > pre, .md .md-code > pre { margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--t-code-txt); } .md pre { background: var(--t-code); color: var(--t-code-txt); border: 1px solid var(--t-line2); } .effort-tip { background: var(--t-panel4); color: var(--t-txt); border: 1px solid var(--t-line2); box-shadow: var(--t-shadow); } .toast { background: var(--t-panel4); color: var(--t-txt); border: 1px solid var(--t-line2); box-shadow: var(--t-shadow); } /* The caption followed the backdrop: it was pinned light while that backdrop was a fixed black scrim. The matte below is themed, so the caption is too — pinned light text on a light matte would be the same unreadable pair this whole section exists to remove. */ .lightbox-caption { color: var(--t-txt2); } .acct-btn.in { background: var(--t-panel3); border-color: var(--t-line2); } /* ── Add-a-link modal ───────────────────────────────────────────────────── The gradient ring is the composer's, so the two "you are about to give the app something" surfaces read as one family. */ .link-modal { width: 560px; padding: 0; border: 1px solid transparent; border-radius: 17px; background: linear-gradient(175deg, var(--t-panel), var(--t-panel2)) padding-box, linear-gradient(140deg, var(--t-acc), var(--t-acc-soft2) 55%, var(--t-acc-deep)) border-box; box-shadow: var(--t-shadow); } .link-modal > * { padding-inline: 26px; } .link-head { display: flex; align-items: flex-start; gap: 15px; padding-top: 24px; } .link-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--t-acc-txt); background: var(--t-acc-soft); border: 1px solid var(--t-acc); } .link-head-text { flex: 1; min-width: 0; } .link-x { border: none; background: transparent; color: var(--t-txt3); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 7px; } .link-x:hover { color: var(--t-txt); background: var(--t-hover); } .link-field { margin-top: 18px; } .link-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-txt3); margin-bottom: 8px; } .link-kinds { display: flex; gap: 8px; flex-wrap: wrap; } /* Indicators, not choices — `.on` is set when the pasted URL resolves to that kind, so the modal reports what it recognised rather than asking. */ .link-kind { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--t-line2); font-size: 12.5px; color: var(--t-txt3); white-space: nowrap; transition: border-color .16s, color .16s, background .16s; } .link-kind.on { border-color: var(--t-acc); background: var(--t-acc-soft); color: var(--t-acc-txt); } .link-input { width: 100%; height: 48px; margin: 0; border-radius: 11px; background: var(--t-input); border: 1px solid var(--t-line2); color: var(--t-txt); font-size: 14px; padding: 0 14px; } .link-input:focus { outline: none; border-color: var(--t-acc); box-shadow: 0 0 0 3px var(--t-acc-soft2); } .link-note { font-size: 11.5px; color: var(--t-txt3); margin-top: 8px; } .link-note.ok { color: var(--t-acc-txt); } .link-note.bad { color: var(--danger-3); } .link-actions { display: flex; align-items: center; gap: 9px; padding-top: 18px; padding-bottom: 22px; } .link-dest { margin-right: auto; font-size: 11.5px; color: var(--t-txt3); } .link-dest span { color: var(--t-acc-txt); } .modal-btn-primary { border: 1px solid var(--t-acc); background: linear-gradient(180deg, var(--t-acc-soft), var(--t-acc-soft2)); color: var(--t-acc-txt); font-weight: 500; } .modal-btn-primary:hover:not(:disabled) { box-shadow: 0 6px 22px var(--t-acc-soft); } .modal-btn-primary:disabled { opacity: .45; cursor: not-allowed; } /* Phone: a sheet, per the mobile canvas — full width at the bottom of the screen rather than a centred card floating in the middle of it. */ @media (max-width: 560px) { .modal-overlay:has(.link-modal) { align-items: flex-end; padding: 0; } .link-modal { width: 100%; max-width: none; border-radius: 18px 18px 0 0; } .link-actions { flex-wrap: wrap; } .link-dest { flex: 1 0 100%; margin: 0 0 8px; } .link-actions .modal-btn { flex: 1; justify-content: center; } } /* ── Dashboard, mobile navigation ───────────────────────────────────────── Desktop keeps the rail. Below 900px it is replaced by the canvas's shape: a trigger naming the section you are in, a sheet listing all of them, and a bottom bar for the four marked `data-tab`. All three are built from the rail's own buttons and act by clicking them (see `syncDashMobile`), so this is a second VIEW of the nav, never a second copy of it. */ /* .dash-mrow included: it is a CHILD OF THE DASHBOARD GRID, so leaving it displayed above 900px made a third grid item — the rail dropped to a 354px row with the nav list squeezed inside it. */ .dash-mbar, .dash-sheet, .dash-tabs, .dash-mback, .dash-mrow { display: none; } @media (max-width: 900px) { /* The rail itself goes; its buttons stay in the DOM as the source of truth. */ .dash-side { display: none; } .dash { grid-template-columns: 1fr; } /* The back control leads the section row, which is where "back" belongs and where the desktop rail puts it. 44px, because it is the only way out. */ .dash-mrow { display: flex; align-items: center; gap: 8px; margin: 12px 14px 10px; } /* on again below 900px */ .dash-mrow .dash-mbar { margin: 0; flex: 1 1 auto; min-width: 0; } .dash-mback { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; min-height: 48px; margin: 0; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 17px; cursor: pointer; } .dash-mback:hover { background: var(--surface-4); color: var(--text); } .dash-mback:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dash { grid-template-areas: none; } .dash-mbar { display: flex; align-items: center; gap: 10px; width: auto; margin: 12px 14px 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--t-acc); background: linear-gradient(120deg, var(--t-acc-soft), var(--t-acc-soft2)); color: var(--t-txt); font-family: inherit; cursor: pointer; } .dash-mbar-icon { font-size: 17px; line-height: 1; } .dash-mbar-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; } .dash-mbar-kicker { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-txt3); } .dash-mbar-name { font-size: 14px; font-weight: 500; color: var(--t-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; } .dash-mbar-count { margin-left: auto; flex-shrink: 0; font-size: 10px; white-space: nowrap; color: var(--t-acc-txt); border: 1px solid var(--t-acc); border-radius: 999px; padding: 2px 8px; } .dash-mbar-caret { font-size: 11px; color: var(--t-acc); line-height: 1; } .dash-sheet { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(10, 11, 18, .66); backdrop-filter: blur(3px); } .dash-sheet[hidden] { display: none; } .dash-sheet-panel { position: absolute; top: 74px; left: 14px; right: 14px; max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; padding: 8px; background: linear-gradient(180deg, var(--t-panel), var(--t-panel2)); box-shadow: 0 0 0 1px var(--t-line2), var(--t-shadow); } .dash-sheet-head { display: flex; align-items: center; padding: 8px 10px 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-txt3); } .dash-sheet-x { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--t-txt3); font-size: 13px; padding: 4px 6px; border-radius: 6px; } .dash-sheet-x:hover { color: var(--t-txt); background: var(--t-hover); } /* 46px rows: the canvas's ≥44px touch target, with room to spare. */ .dash-sheet-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 0 11px; border: none; border-radius: 10px; background: transparent; color: var(--t-txt); font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; } .dash-sheet-row:hover { background: var(--t-hover); } .dash-sheet-row.on { background: var(--t-acc-soft); } .dash-sheet-row.on .dash-sheet-icon, .dash-sheet-row.on .dash-sheet-label { color: var(--t-acc-txt); } .dash-sheet-icon { font-size: 16px; line-height: 1; flex-shrink: 0; } .dash-sheet-label { flex: 1; min-width: 0; } .dash-sheet-count { font-size: 11px; color: var(--t-txt3); flex-shrink: 0; } .dash-sheet-back { margin-top: 6px; border-top: 1px solid var(--t-line); border-radius: 0 0 10px 10px; color: var(--t-acc-txt); } .dash-sheet-back .dash-sheet-label { color: var(--t-acc-txt); } /* Group headings in the section sheet, so fourteen rows read as the three things they are rather than one list. */ .dash-sheet-group { padding: 14px 18px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .dash-sheet-group:first-child { padding-top: 4px; } .dash-sheet-count.has { background: var(--accent-tint-15); color: var(--accent); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; } /* The main pane sits between the trigger and the tab bar and is the only part that scrolls — same rule as the chat. */ .dash-main { --dash-pt: 0px; --dash-px: 14px; padding: var(--dash-pt) var(--dash-px) 18px; } } /* ── Image viewer: one clean image on a themed matte ────────────────────── The canvas replaces the black scrim with a soft radial ground in the theme's own values, and frames the picture rather than letting it float. */ .lightbox { background: radial-gradient(ellipse at 50% 45%, var(--t-matte) 0%, var(--t-matte2) 78%); } .lightbox img { border-radius: 12px; box-shadow: 0 0 0 1px var(--t-line2), 0 22px 50px rgba(0, 0, 0, .45); } .lightbox-close { border: 1px solid var(--t-line2); border-radius: 9px; background: var(--t-panel); color: var(--t-txt2); } .lightbox-close:hover { border-color: var(--t-acc); color: var(--t-acc-txt); } .lightbox-key { color: var(--t-txt3); } /* ── Trace rows ─────────────────────────────────────────────────────────── The row was an inline-flex pill sized to its content, with the duration concatenated into the label and the whole tag ("Iteration #1 · RUN_SQL · gpt-4.1") as one unbreakable string. Below ~480px that string is wider than the bubble, so the tag became a second column and the label wrapped to five lines — four iterations of it pushed the answer off the screen. The canvas's anatomy instead: one line per step, the label the only thing that flexes and the only thing that truncates, everything else pinned and `flex-shrink: 0`. */ .steps { align-items: stretch; gap: 0; } .step { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px; border-radius: 0; border-bottom: 1px solid var(--t-line); background: var(--t-row, var(--t-panel2)); } .steps > .step:first-of-type { border-radius: 11px 11px 0 0; } .steps > .step:last-child { border-radius: 0 0 11px 11px; border-bottom: 0; } .step-done { color: var(--t-txt2); } .step-running { color: var(--t-txt); background: var(--t-acc-soft2); } .step .spin, .step-tick, .step-caret { flex-shrink: 0; } .step-tick { color: var(--t-acc-txt); } /* `min-width: 0` is what actually lets a flex child shrink below its content — without it the label refuses to ellipsis and pushes the chip out of the row. */ .step-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .step-repeat { flex-shrink: 0; height: 20px; padding: 0 7px; border-radius: 6px; display: grid; place-items: center; white-space: nowrap; background: var(--t-acc-soft); color: var(--t-acc-txt); font-size: 10.5px; } .step-tag { flex-shrink: 0; display: flex; align-items: center; height: 20px; border-radius: 6px; overflow: hidden; background: var(--t-tag, var(--t-hover)); font-size: 10.5px; letter-spacing: .06em; max-width: 260px; } .step-tag-code { padding: 0 7px; color: var(--t-acc-txt); white-space: nowrap; } /* The hairline between the two halves, drawn by the second half's own edge so there is no extra element to keep in step. */ .step-tag-rest { padding: 0 7px; color: var(--t-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-inline-start: 1px solid var(--t-line2); } .step-tag-free .step-tag-code { color: var(--ok); } /* Pinned last and tabular, so a column of durations lines up and a row that truncates never truncates the seconds. */ .step-dur { flex-shrink: 0; min-width: 30px; text-align: right; font-size: 10.5px; color: var(--t-txt3); font-variant-numeric: tabular-nums; } /* The individual steps behind an ×N row: inset, quieter, same anatomy. */ .step-member { padding-left: 26px; background: transparent; } .step-member .step-text { color: var(--t-txt3); } @media (max-width: 767px) { /* Phone: the stage code only. The model name is still in the tag's title and in the expanded body — it is the half a 390px row cannot afford. */ .step-tag-rest { display: none; } .step-tag { max-width: 96px; height: 18px; font-size: 10px; } .step-repeat { height: 18px; font-size: 10px; } .step { gap: 7px; padding: 0 9px; } } /* The source card's chip is the trace row's chip — same class, so it can never drift. The score half stays visible on a phone (unlike a model name, the number IS the point of the chip here). */ .chunk-score.step-tag { max-width: none; } @media (max-width: 767px) { .chunk-score.step-tag .step-tag-rest { display: flex; align-items: center; } } /* An assistant turn that was interrupted before it wrote anything. Stated rather than shown as a blank bubble — the reader cannot tell an empty answer from a lost one, and only one of those is worth retrying. */ .turn-interrupted { font-size: 13px; line-height: 1.55; color: var(--t-txt3); font-style: italic; border-inline-start: 2px solid var(--warn); padding: 6px 0 6px 12px; } /* A horizontal rule, drawn the way the design system draws one: fading to transparent at both ends over 48px rather than stopping cleanly. Until now there was no rule at all and `---` reached the reader as three dashes. */ .md .md-hr { height: 1px; border: 0; margin: 16px 0; background: linear-gradient(to right, transparent, var(--t-line2) 48px, var(--t-line2) calc(100% - 48px), transparent); } /* A rule immediately before the preferences/footer italics is the model separating its answer from our own appended lines — it adds nothing there. */ .md .md-hr:last-child { display: none; } /* ══ Attachment preview cards (Canvas-4 · 4a) ══════════════════════════════ One card format, a real preview per family, and a paper sheet for anything unrecognised — so a new format needs no new artwork. */ .gen-files { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .att-head { display: flex; align-items: center; gap: 10px; } .att-head-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .att-head-pill { font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .att-all { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--border-6); font-size: 11px; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: border-color .16s, color .16s; } .att-all:hover { border-color: var(--accent); color: var(--accent); } /* Model samples: the pill beside Sources for files built from made-up data. */ .samples-toggle { border-color: var(--t-attn); color: var(--text-2); } .samples-toggle.open, .samples-toggle:hover { background: var(--t-attnbg); } .samples-panel { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--t-attn); background: var(--t-attnbg); } .samples-note { font-size: 12px; color: var(--text-2); line-height: 1.5; margin-bottom: 8px; } .samples-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 4px 0; } .samples-badge { font-size: 10px; letter-spacing: .1em; border: 1px solid var(--t-attn); border-radius: 999px; padding: 1px 7px; color: var(--text-2); } .samples-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-1); } .samples-kind { font-size: 10px; color: var(--text-3); } .samples-open { margin-left: auto; font-size: 12px; color: var(--accent); background: transparent; border: 0; cursor: pointer; font: inherit; } .att-card.att-sample .att-type::after { content: ' · SAMPLE'; } .att-grid, .att-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .att-more { margin-top: 12px; } @media (max-width: 900px) { .att-grid, .att-more { grid-template-columns: repeat(2, 1fr); } } .att-card { border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); transition: border-color .16s, transform .16s, box-shadow .16s; } .att-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px var(--accent-tint); } .att-pending { opacity: .55; } /* The radial matte the previews sit on — it makes a white sheet read as a sheet ON something rather than a hole cut in the card. */ .att-preview { position: relative; height: 144px; flex-shrink: 0; display: grid; place-items: center; padding: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, var(--t-matte), var(--t-matte2) 82%); border-bottom: 1px solid var(--border); } .att-type { position: absolute; top: 9px; left: 9px; height: 19px; padding: 0 7px; border-radius: 5px; color: var(--on-accent, #fff); font-size: 9.5px; font-weight: 500; letter-spacing: .07em; display: grid; place-items: center; white-space: nowrap; } .att-count { position: absolute; top: 9px; right: 9px; height: 19px; padding: 0 7px; border-radius: 5px; background: var(--t-scrimchip); color: var(--text-2); font-size: 9.5px; display: grid; place-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; } /* paper — a real white page at EVERY theme. A PDF is white; tinting it to the app's ground makes it read as a screenshot of the app, not a document. */ .att-sheet { width: 92px; height: 116px; border-radius: 4px; background: #f7f7fb; box-shadow: 0 6px 18px rgba(0,0,0,.35); padding: 11px 10px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; } .att-sheet-title { height: 5px; width: 34px; border-radius: 2px; flex-shrink: 0; } .att-sheet-line { height: 3px; border-radius: 2px; background: #d7d8e2; flex-shrink: 0; } .att-sheet-line.strong { background: #c9cad6; } .att-sheet-block { height: 22px; border-radius: 3px; background: #eceef6; margin: 3px 0; flex-shrink: 0; } /* table */ .att-table { width: 138px; height: 112px; border-radius: 5px; background: #f7f7fb; box-shadow: 0 6px 18px rgba(0,0,0,.35); overflow: hidden; display: flex; flex-direction: column; } .att-table-head { height: 15px; flex-shrink: 0; } .att-table-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border-bottom: 1px solid #e6e7ef; } .att-table-cell { height: 16px; padding: 6px 5px; border-right: 1px solid #e6e7ef; } .att-table-cell:last-child { border-right: 0; } .att-table-bar { display: block; height: 3px; border-radius: 2px; background: #d7d8e2; } .att-table-bar.strong { background: #c9cad6; } /* code */ .att-code { width: 100%; height: 116px; border-radius: 6px; background: var(--t-code); border: 1px solid var(--border-6); padding: 10px 11px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; line-height: 1.75; color: var(--text-3); } .att-code-line.indent { padding-left: 9px; } .att-code-key { color: var(--accent); } .att-code-str { color: var(--code-str); } .att-code-num { color: var(--code-num); } /* image */ .att-image { width: 100%; height: 116px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-6); } .att-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* media */ .att-media { position: relative; width: 100%; height: 116px; border-radius: 7px; overflow: hidden; background: linear-gradient(150deg, var(--t-acc-deep), var(--t-matte2)); display: grid; place-items: center; } .att-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px 10px; } .att-wave i { flex: 1; border-radius: 1px; background: var(--t-acc-lift); opacity: .55; } .att-play { width: 38px; height: 38px; border-radius: 50%; background: var(--t-acc-lift); display: grid; place-items: center; color: var(--t-on-acc); box-shadow: 0 0 22px var(--accent-tint); } .att-foot { padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; } .att-foot-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .att-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .att-name:hover { color: var(--accent); } .att-meta { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A file with nothing to say in its meta line still HAD one, zero pixels wide — and a flex `gap` applies to a zero-width child just as it does to any other, so it pushed the chip 8px right and 6px out of the card. `display: none` is what makes a gap disappear with the element. */ .att-meta:empty { display: none; } .att-dl { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); text-decoration: none; } .att-dl:hover { color: var(--accent); background: var(--surface-4); } /* The two-part chip — ORIGIN · SIZE. The same vocabulary the trace rows and the citation cards use, which is the point: one chip shape means one kind of fact, wherever it appears. */ .two-chip { flex-shrink: 0; display: flex; align-items: center; height: 18px; border-radius: 5px; background: var(--surface-4); overflow: hidden; /* It may never leave the card. `flex-shrink: 0` with no bound is what let a 120px chip sit in 106px of footer on a 132px phone tile — clipped mid-word at the card's edge. Measured, not guessed: 22px over at both 390 and 360, and fitting only at desktop width. */ max-width: 100%; min-width: 0; } /* The SIZE keeps its place; the origin word gives way first, because "11 KB" half-shown is a wrong number while "GENERATE…" is still the same word. This is the backstop for a longer origin or size than today's — at the tile width below, nothing truncates. */ .two-chip-a { padding: 0 6px; font-size: 10px; letter-spacing: .06em; color: var(--accent); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .two-chip-sep { width: 1px; align-self: stretch; background: var(--border-6); flex-shrink: 0; } .two-chip-b { padding: 0 6px; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; } /* An archive is a row, never a tile. */ .att-rows { display: flex; flex-direction: column; gap: 8px; } .att-zip { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 11px; background: var(--surface-8); border: 1px solid var(--border); } .att-zip-ic { flex-shrink: 0; color: var(--accent); display: grid; place-items: center; } .att-zip-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .att-zip-count { flex-shrink: 0; font-size: 10.5px; color: var(--text-3); } /* A prompt that has just been sent arrives, rather than appearing. Same vocabulary as the answer's words — a short fade up — at the canvas's own easing, so the turn reads as one movement: the prompt lands, then the words of the reply follow it. */ @keyframes prg-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .msg-row.row-in { animation: prg-row-in .34s cubic-bezier(.2,.7,.3,1) both; } /* The end of a turn. Each part of the answer's tail — the ANSWER tag, the preferences footer, the actions, the sources, the chips — eases in with its own delay (set by `settleTurn`), so the finish reads as the answer settling rather than the page flashing. A rewritten answer arriving as `final` crossfades instead of snapping. */ .tail-in { animation: tail-in .55s cubic-bezier(.2,.7,.3,1) both; } @keyframes tail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .bubble-swap { animation: bubble-swap .6s ease both; } @keyframes bubble-swap { from { opacity: .45; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tail-in, .bubble-swap { animation: none !important; } } @media (prefers-reduced-motion: reduce) { .msg-row.row-in { animation: none !important; } } /* The citation number, as its own badge — `[3]` in the answer has to be findable here at a glance. */ .src-n { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 7px; border-radius: 5px; background: var(--accent-tint); color: var(--accent); font-size: 9.5px; font-weight: 600; vertical-align: -3px; font-variant-numeric: tabular-nums; } /* ── Pinned attachments rail (Canvas-4 · 5a) ──────────────────────────── Between the conversation and the composer, because that is what these files are: the material the next turn will be answered from. */ .pinned-row { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 8px; min-width: 0; } .pinned-row[hidden] { display: none; } .pinned-toggle { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-tint); color: var(--accent); font-family: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; } .pinned-sep { opacity: .6; } .pinned-caret { transition: transform .26s cubic-bezier(.4,0,.2,1); } .pinned-row.shut .pinned-caret { transform: rotate(-90deg); } .pinned-note { flex-shrink: 0; font-size: 10.5px; color: var(--text-4); white-space: nowrap; } /* Shut: the chips and the note go, the count stays. Opacity AND width, or the row keeps its height and the composer does not move back up. */ .pinned-row.shut .chat-files, .pinned-row.shut .pinned-note { display: none; } .pinned-row .chat-files { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .pinned-row .chat-file { flex-shrink: 0; } .pinned-row .chat-files::-webkit-scrollbar { height: 5px; } .pinned-row .chat-files::-webkit-scrollbar-thumb { background: var(--border-6); border-radius: 5px; } /* On a phone the row IS the files. The "Pinned · N" pill and the note about staying in this chat cost ~150px of a 390px screen, which left the chips a narrow strip in the middle — two of them visible, both clipped. The count is the chips themselves and the rule is one you learn once, so both give their width back and the chips scroll the full width, each with its own ✕. The shut state has to be overridden too: with no toggle on screen there is nothing to re-open the row with, so a row left shut on a desktop would arrive on a phone as an attachment bar with no attachments in it. */ @media (max-width: 640px) { .pinned-toggle, .pinned-note { display: none; } .pinned-row, .pinned-row.shut { gap: 0; } .pinned-row.shut .chat-files { display: flex; } .pinned-row .chat-files { flex: 1 1 100%; width: 100%; max-width: 100%; scroll-snap-type: x proximity; padding-bottom: 3px; } .pinned-row .chat-file { scroll-snap-align: start; max-width: 78vw; } /* The name is what distinguishes one chip from the next, so it takes the room and elides; the ✕ never shrinks, or the control that removes the file is the first thing to go. */ .pinned-row .chat-file-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A 15px glyph with 2px of padding is not a tap target. It keeps its size on screen and gains the room around it, so removing the wrong file takes a deliberate press rather than a lucky one. */ .pinned-row .chat-file-x { flex-shrink: 0; opacity: .85; min-width: 30px; min-height: 30px; margin: -6px -4px -6px 0; display: inline-flex; align-items: center; justify-content: center; } } .pin-thumb { flex-shrink: 0; width: 13px; height: 16px; border-radius: 2px; background: #f7f7fb; padding: 2px; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5px; overflow: hidden; } .pin-thumb-title { height: 2px; width: 6px; border-radius: 1px; flex-shrink: 0; } .pin-thumb-line { height: 1.5px; border-radius: 1px; background: #d7d8e2; flex-shrink: 0; } /* ── Source filter pills (Canvas-4 · 4a) ──────────────────────────────── The origins present in THIS answer, with their counts. Shown only when there is more than one, because a filter over one pool is a control that can only ever do nothing. */ .src-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 8px; } .src-filter { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-6); background: transparent; font-family: inherit; font-size: 11px; color: var(--text-2); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color .16s, color .16s, background .16s; } .src-filter:hover { border-color: var(--accent); color: var(--accent); } .src-filter.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); } /* ── Attachments on a phone (Canvas-4 · 4a, 390x844) ──────────────────── "first three as a swipe rail, remainder as 52px rows; the tile never shrinks below 132px wide." A three-up grid at 390px gives 116px tiles whose preview is too small to be a preview, which is the whole point of the card. */ @media (max-width: 640px) { .att-grid { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } /* The canvas says the tile "never shrinks below 132px" — a floor, not a fixed width, and the footer needs more than the floor: the ORIGIN · SIZE chip measures 120px and the footer's own padding takes 24, so 132 clipped it by 22. 156 leaves ~12px spare, which is what a longer size than 11 KB needs, and still shows two and a bit tiles at 390px — which is what makes a rail read as a rail. */ .att-grid > .att-card { flex: 0 0 156px; min-width: 156px; scroll-snap-align: start; } .att-grid .att-preview { height: 104px; } .att-grid .att-sheet { width: 66px; height: 84px; } .att-grid .att-table { width: 106px; height: 84px; } .att-grid .att-code, .att-grid .att-image, .att-grid .att-media { height: 84px; } .att-grid::-webkit-scrollbar { height: 5px; } .att-grid::-webkit-scrollbar-thumb { background: var(--border-6); border-radius: 5px; } /* Everything past the third is a row: the same card, laid on its side, with the preview reduced to a thumbnail. No second renderer and no second DOM — which is what keeps the two layouts from drifting apart. */ .att-more { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .att-more > .att-card { flex-direction: row; align-items: center; min-height: 52px; border-radius: 11px; } .att-more .att-preview { width: 44px; height: 52px; flex-shrink: 0; padding: 7px; border-bottom: 0; border-right: 1px solid var(--border); } .att-more .att-sheet { width: 100%; height: 100%; padding: 4px 3px; gap: 2px; } .att-more .att-sheet-block { height: 8px; margin: 1px 0; } .att-more .att-table, .att-more .att-code, .att-more .att-image, .att-more .att-media { width: 100%; height: 100%; } .att-more .att-type, .att-more .att-count { display: none; } .att-more .att-foot { flex: 1; min-width: 0; padding: 8px 11px; gap: 5px; } } /* ── Health banner (Canvas-5) ─────────────────────────────────────────── A recovery is GOOD news and reads as such — a green ground and a tick, not another amber warning. The three failure severities keep their own colours. */ .alert.green { background: var(--t-okbg); border-color: var(--t-okline); color: var(--t-ok); } .alert-dismiss { flex-shrink: 0; margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--text-3); } .alert-dismiss:hover { color: var(--text); } /* ── Scroll-to-bottom (Canvas-5) ──────────────────────────────────────── A pill that SAYS how much is below rather than a bare circle: "3 new" is the reason to press it, and a circle with an arrow is not. */ .scroll-bottom { width: auto; min-width: 36px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; gap: 8px; background: linear-gradient(180deg, var(--t-panel), var(--t-panel2)); border: 0; box-shadow: 0 0 0 1px var(--t-line2), 0 8px 22px rgba(0,0,0,.28); color: var(--accent); } /* Translucent, so the conversation reads THROUGH it rather than being cut in half by a solid bar — it is a way back, not a piece of chrome. Opaque on hover, because at the moment of pressing it the thing you want to see is the button. */ .scroll-bottom { opacity: .86; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .16s ease, background .16s ease; } .scroll-bottom:hover { opacity: 1; background: linear-gradient(180deg, var(--t-panel3), var(--t-panel2)); } /* Composing is not reading. While the caret is in the box the reader is writing, not looking for the newest message, so the pill gets out of the way — the first scroll brings it back. */ .main.composing .scroll-bottom { opacity: 0; pointer-events: none; } .scroll-bottom-n { font-size: 12px; color: var(--text); white-space: nowrap; } /* ── Clarify / follow-up / action chips (Canvas-5) ────────────────────── Three different things, and the canvas gives each its own shape: a clarify chip is a CHOICE (9px radius, the first one accented), a follow-up is a full row you can read (10px, arrow in and arrow out), an action is a pill. */ .chip-group-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } /* ── A CHOICE: a pill. One line, half-round ends. ──────────────────────── Deliberately a different shape from the follow-up below it, which is a rounded ROW with a step-down arrow. The two do different jobs — one interrupts to ask before answering, the other offers to go deeper once the answer exists — and while they wore the same shape nobody could tell which was which. Neither borrows the other's now. */ .clarify-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 15px; border-radius: 999px; /* the half-circle ends */ font-size: 12px; cursor: pointer; border: 1px solid var(--border-6); background: transparent; color: var(--text-2); font-family: inherit; text-align: left; transition: border-color .16s, color .16s, background .16s; /* One line, and it stays one line. A long option ellipses and keeps its whole text in the tooltip rather than wrapping — wrapped, it stops being a pill and starts looking like the row the follow-up owns. `max-width` is what stops it scrolling the conversation sideways: a 586px nowrap chip once took the column to 644px against a 390px viewport. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; } .clarify-chip:hover { border-color: var(--accent); color: var(--accent); } .clarify-chip.primary { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); } /* An action chip changes something before it asks — coloured so it does not look like the plain 'send this text' chips beside it. Declared AFTER the base rule, or the base rule's border wins on equal specificity. */ .clarify-chip-action { border-color: var(--accent); color: var(--accent-2); background: var(--accent-tint-3); font-weight: 600; } .follow-up-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px; border-radius: 10px; cursor: pointer; border: 1px solid var(--border-6); background: transparent; font-family: inherit; font-size: 12.5px; color: var(--text); text-align: left; transition: border-color .16s; } .follow-up-chip:hover { border-color: var(--accent); } .follow-up-chip .fu-in { flex-shrink: 0; color: var(--accent); display: grid; place-items: center; } .follow-up-chip .fu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On a phone the suggestion WRAPS instead of ellipsing. The single line suits a wide screen, where the sentence fits; at 390px it cuts the suggestion in half, and a follow-up is a sentence you read before deciding — truncated, it cannot be. The arrows stay top-aligned so a two-line row still reads as one control. */ @media (max-width: 700px) { .follow-up-chip { align-items: flex-start; } .follow-up-chip .fu-in, .follow-up-chip .fu-out { margin-top: 1px; } .follow-up-chip .fu-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; overflow-wrap: anywhere; } } .follow-up-chip .fu-out { flex-shrink: 0; color: var(--text-3); display: grid; place-items: center; } /* ══ Sign in (Canvas-5) ════════════════════════════════════════════════ A full-screen split rather than a dialog: the claim on the left, the form on the right. It is the first thing anyone sees. */ .signin { position: fixed; inset: 0; z-index: 400; display: flex; overflow: hidden; font-family: inherit; background: linear-gradient(150deg, var(--t-page) 0%, var(--t-page2) 62%, var(--t-panel2) 100%); } .signin[hidden] { display: none; } /* Two slow-drifting glows. Decorative, so `pointer-events: none` — a glow that swallows a click on the form would be a very silly bug. */ .signin-glow { position: absolute; pointer-events: none; } .signin-glow-a { top: -260px; left: -160px; width: 900px; height: 700px; background: radial-gradient(closest-side, var(--t-glow), transparent 72%); animation: prg-drift 22s ease-in-out infinite; } .signin-glow-b { bottom: -320px; right: -120px; width: 820px; height: 640px; background: radial-gradient(closest-side, var(--t-glow2), transparent 70%); animation: prg-drift 28s ease-in-out infinite reverse; } @keyframes prg-drift { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-24px,18px,0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .signin-glow { animation: none; } } .signin-left { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 54px 56px; } .signin-brand { display: flex; align-items: center; gap: 11px; } .signin-mark { width: 32px; height: 32px; display: grid; place-items: center; filter: drop-shadow(0 0 14px var(--accent-tint)); } .signin-mark svg { display: block; width: 100%; height: 100%; } .signin-wordmark { font-size: 19px; font-weight: 600; letter-spacing: -.015em; background: linear-gradient(92deg, var(--t-hero1), var(--t-hero3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .signin-claim { display: flex; flex-direction: column; gap: 22px; max-width: 520px; } .signin-kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .signin-head { margin: 0; font-size: 52px; line-height: 1.08; font-weight: 500; letter-spacing: -.035em; color: var(--text); text-wrap: pretty; } .signin-sub { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--text-2); text-wrap: pretty; } .signin-facts { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; } .signin-fact { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--t-line2); font-size: 11.5px; color: var(--text-2); white-space: nowrap; } .signin-fact[hidden] { display: none; } .signin-fact svg { color: var(--accent); flex-shrink: 0; } .signin-foot { display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: var(--text-3); } .signin-foot-sep { width: 1px; height: 12px; background: var(--t-line2); } .signin-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-ok); } .signin-foot-dot.bad { background: var(--t-warn); } .signin-right { position: relative; width: 560px; flex: 0 0 560px; display: grid; place-items: center; padding: 40px 56px; box-sizing: border-box; } /* The 1px gradient edge is a PARENT, not a border — a border cannot hold a gradient that runs corner to corner. */ .signin-card-edge { width: 100%; max-width: 420px; padding: 1px; border-radius: 19px; background: linear-gradient(150deg, var(--t-acc), var(--accent-tint) 52%, var(--t-acc-deep)); } .signin-card { border-radius: 18px; padding: 30px 30px 26px; background: linear-gradient(175deg, var(--t-panel), var(--t-panel2)); display: flex; flex-direction: column; gap: 20px; } .signin-card-head { display: flex; flex-direction: column; gap: 7px; } .signin-title { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--text); } .signin-note { font-size: 13px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; } .signin-fields { display: flex; flex-direction: column; gap: 12px; } .signin-field { display: flex; flex-direction: column; gap: 6px; } .signin-label-row { display: flex; align-items: center; } .signin-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .signin-forgot { margin-left: auto; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--accent); } .signin-input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 13px; border-radius: 11px; background: var(--t-input); border: 1px solid var(--t-line2); transition: border-color .16s, box-shadow .16s; } .signin-input > svg { flex-shrink: 0; color: var(--text-3); } .signin-input:hover { border-color: var(--accent); } .signin-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } .signin-input:focus-within > svg { color: var(--accent); } .signin-input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-family: inherit; font-size: 14px; color: var(--text); } .signin-input input::placeholder { color: var(--text-4); } #loginPass { font-size: 15px; letter-spacing: .22em; } #loginPass::placeholder { letter-spacing: .22em; } .signin-eye { flex-shrink: 0; border: 0; background: none; cursor: pointer; padding: 0; color: var(--text-3); display: grid; place-items: center; } .signin-eye:hover, .signin-eye.on { color: var(--accent); } /* The switch is the checkbox, restyled — a real input, so it keeps its keyboard behaviour and its label click target. */ .signin-keep { display: flex; align-items: center; gap: 10px; cursor: pointer; } .signin-keep input { position: absolute; opacity: 0; width: 0; height: 0; } .signin-switch { width: 36px; height: 20px; border-radius: 999px; padding: 2px; flex-shrink: 0; background: var(--t-line2); display: flex; align-items: center; transition: background .18s; } .signin-switch i { width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: margin-left .18s, background .18s; } .signin-keep input:checked + .signin-switch { background: var(--accent-tint-2, var(--accent-tint)); } .signin-keep input:checked + .signin-switch i { margin-left: 16px; background: var(--t-acc-lift); } .signin-keep input:focus-visible + .signin-switch { outline: 2px solid var(--accent); outline-offset: 2px; } .signin-keep-text { font-size: 12.5px; color: var(--text-2); } .signin-go { width: 100%; height: 46px; border-radius: 12px; border: 0; cursor: pointer; background: linear-gradient(140deg, var(--t-acc-lift), var(--t-acc-deep)); color: var(--t-on-acc); font-family: inherit; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 8px 26px var(--accent-tint); transition: transform .16s, box-shadow .16s; } .signin-go:hover { transform: translateY(-1px); box-shadow: 0 12px 32px var(--accent-tint); } .signin-go:disabled { opacity: .6; cursor: default; transform: none; } .signin-or { display: flex; align-items: center; gap: 11px; } .signin-or i { flex: 1; height: 1px; background: var(--t-line2); } .signin-or span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .signin-sso { width: 100%; height: 42px; border-radius: 11px; cursor: pointer; border: 1px solid var(--t-line2); background: transparent; color: var(--text-2); font-family: inherit; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; transition: border-color .16s, color .16s; } .signin-sso:hover { border-color: var(--accent); color: var(--text); } .signin-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--t-input); border: 1px solid var(--t-line); font-size: 11px; line-height: 1.5; color: var(--text-3); } .signin-hint svg { flex-shrink: 0; margin-top: 1px; } /* Phone: the claim collapses to its kicker and headline above the card, and the card takes the width. The three fact pills and the footer go — on 390px they are the first things that stop earning their space. */ @media (max-width: 900px) { .signin { flex-direction: column; overflow-y: auto; } .signin-left { flex: 0 0 auto; padding: 28px 24px 0; gap: 22px; } .signin-head { font-size: 32px; } .signin-sub, .signin-facts, .signin-foot { display: none; } .signin-right { width: auto; flex: 1 1 auto; padding: 22px 24px 32px; } .signin-card { padding: 24px 22px 22px; gap: 16px; } } /* ══ Overlays (Canvas-5) ═══════════════════════════════════════════════ One shell for all four — Models connections, database manager, document branding, and the chat ⋮ menu's ground. A 1px gradient EDGE (a parent, not a border, because a border cannot hold a corner-to-corner gradient), the panel gradient inside it, a 36px icon tile in the header, and a footer whose left half is the sentence that says what saving will do. Applied to the markup that already exists rather than re-authoring it: the three overlays are working forms, and the point here is the chrome. */ .modal-overlay, .settings-overlay { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .modal, .settings-panel, .db-modal { border-radius: 16px; background: linear-gradient(175deg, var(--t-panel), var(--t-panel2)); box-shadow: 0 0 0 1px var(--t-line2), var(--t-shadow, 0 24px 60px rgba(0,0,0,.5)); border: 0; } /* The header, from the existing title + sub. The icon tile is a ::before on the title so no markup has to move. */ .modal-title, .settings-title { font-size: 20px; font-weight: 500; letter-spacing: -.015em; color: var(--text); } .modal-sub, .settings-sub { font-size: 12.5px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; } .ov-icon { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: var(--accent-tint); border: 1px solid var(--accent); display: grid; place-items: center; color: var(--accent); } .ov-head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 4px; } .ov-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ov-x { margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 0; background: none; cursor: pointer; color: var(--text-3); display: grid; place-items: center; } .ov-x:hover { color: var(--text); background: var(--surface-4); } /* The footer sentence: what saving will actually do, beside the buttons. */ .ov-foot-note { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-3); text-align: left; } .modal-actions { align-items: center; gap: 9px; } .modal-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--t-line2); background: transparent; color: var(--text-2); font-family: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .16s, color .16s; } .modal-btn:hover { border-color: var(--accent); color: var(--text); } .modal-btn.primary { padding: 0 18px; font-weight: 500; border-color: var(--accent); color: var(--accent); background: linear-gradient(180deg, var(--accent-tint), transparent); } .modal-btn.primary:hover { background: var(--accent-tint); } /* ── The chat ⋮ menu (Canvas-5) ───────────────────────────────────────── 6px of padding, 13px radius, 36px rows, and a key hint on the right where there is one. The rules between groups fade at both ends — the same signature as the sidebar's group headings. */ .chat-menu { position: absolute; right: auto; top: auto; z-index: 220; padding: 6px; min-width: 232px; border: 0; border-radius: 13px; background: linear-gradient(180deg, var(--t-panel), var(--t-panel2)); box-shadow: 0 0 0 1px var(--t-line2), 0 22px 48px rgba(0,0,0,.34); display: flex; flex-direction: column; gap: 1px; } .chat-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none; cursor: pointer; padding: 0 10px; min-height: 36px; border-radius: 8px; font-size: 12.5px; color: var(--text); text-align: left; font-family: inherit; transition: background .14s; } .chat-menu-item:hover { background: var(--surface-4); } .chat-menu-item.danger { color: var(--t-warn); } .chat-menu-item.danger:hover { background: var(--danger-tint); } .chat-menu-key { margin-left: auto; flex-shrink: 0; font-size: 10px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .chat-menu-rule { height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, var(--t-line2), transparent); } /* ══ In-answer panels (Canvas-5) ═══════════════════════════════════════ A chart and a rendered markdown view are the same OBJECT — a framed thing the answer produced — so they share a header: a glyph, a title, the slot's own two-part chip, and a row of 26px square tools. */ .md-panel { margin: 12px 0; border-radius: 13px; overflow: hidden; background: linear-gradient(165deg, var(--t-card), var(--t-card2)); border: 1px solid var(--border); } .md-panel-head, .md-view-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); min-width: 0; } .md-panel-ic { flex-shrink: 0; color: var(--accent); display: grid; place-items: center; } .md-panel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .md-panel-title, .md-view-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-panel-sub { font-size: 10.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .md-panel-tools { flex-shrink: 0; display: flex; gap: 5px; } /* A toggle says what state it is in. `aria-pressed` carries the same fact for anyone who cannot see the tint. */ .md-panel-rule { flex: 0 0 auto; width: 1px; height: 17px; margin: 0 2px; background: var(--border); display: block; } .md-panel-toggle.on { border-color: var(--accent-tint-20); background: var(--accent-tint-10); color: var(--accent); } /* The legend panel. Absolutely positioned in a strip the PLOT has been told not to draw in (`margin.r` is raised by exactly this width when the legend is shown), and its width is fixed — so it can neither cover the chart nor grow into it. That is the whole promise: the chart is never hidden by its own legend. */ .md-chart-panel { position: relative; } .md-chart-legend { position: absolute; right: 10px; top: 52px; bottom: 14px; width: 148px; max-width: 40%; /* a hard ceiling, not a preference */ overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: var(--t-input); box-shadow: inset 0 0 0 1px var(--border); } .md-legend-row { display: flex; align-items: flex-start; gap: 7px; width: 100%; border: 0; background: transparent; padding: 3px 4px; border-radius: 6px; text-align: left; cursor: pointer; color: var(--text-2); font: inherit; font-size: 11px; line-height: 1.35; } .md-legend-row:hover { background: var(--t-hover); color: var(--text-1); } .md-legend-row i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; margin-top: 3px; } /* WRAP, never truncate: a legend that cuts "Professional services — EMEA" to "Profession…" has stopped identifying the series it points at. */ .md-legend-row span { min-width: 0; overflow-wrap: anywhere; } .md-legend-row.off { opacity: .42; } .md-legend-row i { cursor: pointer; } .md-legend-pick { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .md-palette-menu { z-index: 130; width: 220px; padding: 6px; border-radius: 12px; background: linear-gradient(165deg, var(--t-panel), var(--t-panel2)); border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 2px; } .md-palette-row { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; text-align: left; } .md-palette-row:hover, .md-palette-row.on { background: var(--t-hover); color: var(--text-1); } .md-palette-row.on { box-shadow: inset 0 0 0 1px var(--accent); } .md-palette-strip { display: inline-flex; gap: 2px; flex: 0 0 auto; } .md-palette-strip i { width: 10px; height: 14px; border-radius: 2px; display: block; } .md-legend-row.off span { text-decoration: line-through; } .md-panel-btn { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; border: 1px solid var(--t-line2); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; transition: border-color .16s, color .16s; } .md-panel-btn:hover { border-color: var(--accent); color: var(--accent); } /* A segmented control — one thing with two positions, which is what choosing between rendered and source IS. */ .md-seg { flex-shrink: 0; display: flex; align-items: center; height: 26px; border-radius: 7px; border: 1px solid var(--t-line2); overflow: hidden; } .md-seg .md-view-btn { height: 100%; padding: 0 10px; border: 0; border-radius: 0; background: transparent; font-family: inherit; font-size: 11px; color: var(--text-3); cursor: pointer; } .md-seg .md-view-btn:hover { color: var(--text); background: transparent; } .md-seg .md-view-btn.on { background: var(--accent-tint); color: var(--accent); } .md-chart-panel .md-chart-slot { margin: 0; padding: 8px 6px 4px; } /* The numbers behind the picture. */ .md-chart-table { padding: 4px 15px 14px; overflow-x: auto; } .md-chart-table table { width: 100%; border-collapse: collapse; font-size: 12px; } .md-chart-table th, .md-chart-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); color: var(--text-2); white-space: nowrap; } .md-chart-table tr > th:first-child { text-align: left; color: var(--text); font-weight: 500; } .md-chart-table tr:first-child th { color: var(--text-3); font-weight: 500; font-size: 11px; } /* The clarify group is a labelled block, so the chips read as a question's answers rather than as buttons that happen to be there. */ .clarify-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .clarify-row .chip-group-label { flex: 1 0 100%; margin-bottom: 0; } .clarify-chip-note { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 400; } .next-row { margin-top: 10px; } /* ── LLM connection rows (Canvas-5) ───────────────────────────────────── Icon tile, name + the id the API knows it by, a meta line, then a status dot beside the word. The dot is what makes four of these scannable — you find the broken one without reading. */ .provider-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface-8); transition: border-color .16s; } .provider-card:hover { border-color: var(--accent); } .provider-card-head { display: flex; align-items: center; gap: 13px; min-width: 0; } .prov-tile { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; font-size: 13px; font-weight: 600; } .prov-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .prov-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; } .provider-name { font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } .prov-env { flex-shrink: 0; height: 17px; padding: 0 7px; border-radius: 5px; background: var(--surface-4); color: var(--text-3); font-size: 9.5px; letter-spacing: .06em; display: grid; place-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .prov-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prov-status { flex-shrink: 0; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); white-space: nowrap; } .prov-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); } .prov-dot.ok { background: var(--t-ok); box-shadow: 0 0 8px var(--t-ok); } .prov-dot.warn { background: var(--t-warn); box-shadow: 0 0 8px var(--t-warn); } .prov-status:has(.prov-dot.warn) { color: var(--t-warn); } /* ── Database manager (Canvas-5) ──────────────────────────────────────── A table is a card; a column is three fixed lanes — name, type, samples — so the eye runs down each lane instead of re-finding where the values start on every row. */ .db-table { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; margin-top: 6px; border-radius: 11px; background: var(--surface-8); border: 1px solid var(--border); font-weight: 500; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .db-table-off { color: var(--text-4); } .db-cols { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px 38px; padding-right: 12px; } .db-col { display: flex; align-items: center; gap: 10px; min-height: 26px; font-size: 11.5px; color: var(--text-2); } .db-col-name { width: 132px; flex-shrink: 0; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-col input:not(:checked) ~ .db-col-name { color: var(--text-4); } .db-col-type { width: 64px; flex-shrink: 0; font-size: 10px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .db-col-vals { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 0; } .db-col-vals.off { color: var(--text-4); } /* ── Branding: the live page preview (Canvas-5) ───────────────────────── A real white page at every theme — the thing being configured is a PDF, and tinting the preview to the app would be previewing the wrong document. */ .brand-preview-wrap { display: flex; flex-direction: column; gap: 8px; } .brand-preview-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .brand-preview { width: 100%; max-width: 250px; height: 322px; border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.28); padding: 20px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; } .bp-head { display: flex; align-items: center; gap: 7px; } .bp-logo { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; object-fit: contain; } .bp-name { width: 52px; height: 4px; border-radius: 2px; background: #3a3c46; } .bp-date { margin-left: auto; width: 26px; height: 3px; border-radius: 2px; background: #c9cad6; } .bp-rule { width: 100%; height: 2px; margin: 2px 0 4px; } .bp-h1 { width: 74%; height: 8px; border-radius: 2px; background: #3a3c46; } .bp-line { height: 3px; border-radius: 2px; background: #d7d8e2; } .bp-block { width: 100%; height: 44px; border-radius: 4px; background: #f0f1f8; margin: 3px 0; } .bp-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #e6e7ef; } .bp-foot-line { width: 96px; height: 3px; border-radius: 2px; } .bp-page { margin-left: auto; width: 10px; height: 3px; border-radius: 2px; background: #c9cad6; } /* 760px, the canvas's width for this one. The default modal is sized for a column of fields, and a side-by-side split inside it had the preview sitting on top of the controls. */ #brandOverlay .modal { max-width: 760px; width: 94vw; } .brand-split { display: flex; gap: 18px; align-items: flex-start; } .brand-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .brand-preview-wrap { width: 250px; flex-shrink: 0; } @media (max-width: 760px) { .brand-split { flex-direction: column; } .brand-preview-wrap { width: 100%; } .brand-preview { max-width: none; } } /* ── The answer's tag row and actions (Canvas-5 · 5a) ─────────────────── An answer opens with `ANSWER · gpt-4.1` and how long it took, and closes with a row of pills. Same chip vocabulary as the sources and the attachments, so the reader learns it once. */ .ans-tag-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .ans-time { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; } .ans-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .ans-actions[hidden] { display: none; } .ans-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--t-line2); background: transparent; font-family: inherit; font-size: 11.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: border-color .16s, color .16s; } .ans-pill:hover { border-color: var(--accent); color: var(--accent); } /* ── Database manager: the two columns (Canvas-5) ─────────────────────── Connections on the left with the ladder under them, the selected connection's tables on the right. */ #dbOverlay .modal { max-width: 900px; width: 95vw; } .db-split { display: flex; gap: 14px; align-items: stretch; min-height: 372px; } .db-rail { width: 236px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .db-rail-label, .db-pane-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .db-rail-list { display: flex; flex-direction: column; gap: 3px; } .db-rail-row { display: flex; align-items: center; gap: 9px; min-height: 40px; width: 100%; padding: 0 11px; border-radius: 10px; cursor: pointer; text-align: left; border: 1px solid transparent; background: transparent; font-family: inherit; color: var(--text-2); transition: background .14s, border-color .14s; } .db-rail-row:hover { background: var(--surface-4); } .db-rail-row.on { background: var(--accent-tint); border-color: var(--accent); color: var(--text); } .db-rail-row > svg { flex-shrink: 0; color: var(--text-3); } .db-rail-row.on > svg { color: var(--accent); } .db-rail-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .db-rail-name { font-size: 12.5px; font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-rail-meta { font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-rail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); } .db-rail-dot.on { background: var(--t-ok); } .db-rail-add { margin-top: 4px; min-height: 36px; border-radius: 10px; cursor: pointer; border: 1px dashed var(--t-line2); background: transparent; color: var(--text-2); font-family: inherit; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; transition: border-color .16s, color .16s; } .db-rail-add:hover, .db-rail-add.on { border-color: var(--accent); color: var(--accent); } .db-ladder { margin-top: auto; padding: 11px 12px; border-radius: 10px; background: var(--surface-8); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; } .db-ladder-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .db-rung { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-3); } .db-rung i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1.5px dashed var(--border-6); box-sizing: border-box; } .db-rung.ok { color: var(--t-ok); } .db-rung.ok i { border: 0; background: var(--t-ok); } .db-rung.bad { color: var(--t-warn); } .db-rung.bad i { border: 0; background: var(--t-warn); } .db-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .db-pane[hidden] { display: none; } .db-pane-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .db-filter { margin-left: auto; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--t-line2); background: var(--t-input); font-family: inherit; font-size: 11.5px; color: var(--text); width: 160px; } .db-filter:focus { outline: none; border-color: var(--accent); } @media (max-width: 760px) { .db-split { flex-direction: column; } .db-rail { width: auto; } .db-ladder { margin-top: 8px; } } /* The toast leaves rather than blinking out. */ .toast { transition: opacity .22s ease, transform .22s ease; } .toast.toast-out { opacity: 0; transform: translateX(-50%) translateY(6px); } /* ── Copy: present, not permanent ─────────────────────────────────────── The action row is reserved space that stays EMPTY until you point at the answer — so the column does not jump when it appears, and a finished conversation is not a wall of buttons. `visibility` as well as opacity, or an invisible row still swallows the click meant for the text under it. */ .ans-actions { opacity: 0; visibility: hidden; transition: opacity .16s ease; } @media (hover: hover) { .msg-row.assistant:hover .ans-actions, .msg-row.assistant:focus-within .ans-actions { opacity: 1; visibility: visible; } } /* Touch has no hover, so a tap on the answer reveals them (see app.js). */ @media (hover: none) { .msg-row.assistant.show-actions .ans-actions { opacity: 1; visibility: visible; } } /* ── The full-size chart modal, in the app's palette ──────────────────── Theming the PLOT transparent exposed this: the plot stopped painting its own white rectangle, so the modal's white panel became the chart's background. The panel takes the same gradient + hairline as every other surface, and the scrim is the shared one rather than a bare 55% black. */ .chart-modal-bk { background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .chart-modal { background: linear-gradient(165deg, var(--t-panel), var(--t-panel2)); box-shadow: 0 0 0 1px var(--t-line2), 0 24px 60px rgba(0,0,0,.42); padding: 20px 18px 18px; } .chart-modal-x { top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; display: grid; place-items: center; border: 1px solid var(--t-line2); background: transparent; transition: border-color .16s, color .16s; } .chart-modal-x:hover { border-color: var(--accent); color: var(--accent); } /* Plotly's modebar paints its own light ground; on a dark panel it read as a grey smudge in the corner. */ /* Plotly pins its modebar to the TOP RIGHT, and a vertical legend starts in the same corner — measured on the full-size chart, 920px² of overlap, with the legend's first entry sitting under the zoom buttons so neither could be clicked cleanly. The modebar moves to the top LEFT, which is empty on every chart type here (the y-axis title runs vertically at mid-height, not at the top). The legend keeps the corner it needs for its labels. */ .chart-modal .modebar, .md-chart-slot .modebar { background: transparent !important; right: auto !important; left: 2px !important; } /* The dark slab behind the buttons is `.modebar-group`, not `.modebar` — Plotly paints it `rgba(0,0,0,.5)`, which reads as a grey smear over a light plot and as a lighter smear over a dark one. Clearing only the outer element left it exactly as it was. */ .chart-modal .modebar-group, .md-chart-slot .modebar-group { background: transparent !important; } .chart-modal .modebar-btn, .md-chart-slot .modebar-btn { opacity: .75; } .chart-modal .modebar-btn:hover, .md-chart-slot .modebar-btn:hover { opacity: 1; } /* Plotly anchors its button tooltip `right: 50%`, i.e. it grows LEFTWARD from the button's centre. That suited a modebar in the top-right corner; with the bar moved to the left, "Download plot as a png" ran off the edge and was clipped. Flipped to grow RIGHTWARD, which is the free side now — the whole plot is to the right of these buttons. The arrow (::before) is flipped with it so it stays under the button it belongs to. */ .chart-modal .modebar-btn::after, .md-chart-slot .modebar-btn::after, .chart-modal .modebar-btn::before, .md-chart-slot .modebar-btn::before { right: auto !important; left: 50% !important; } /* …and it must be allowed OUT of the bar it lives in, or the flip just clips it against a different edge. */ .chart-modal .modebar, .md-chart-slot .modebar, .chart-modal .modebar-group, .md-chart-slot .modebar-group, .chart-modal .modebar-container, .md-chart-slot .modebar-container { overflow: visible !important; } .chart-modal .modebar-btn path, .md-chart-slot .modebar-btn path { fill: var(--text-3) !important; } .chart-modal .modebar-btn:hover path, .md-chart-slot .modebar-btn:hover path { fill: var(--accent) !important; } /* ── The mobile overlay, re-asserted ──────────────────────────────────── `@media (max-width: 900px) { .sidebar { position: fixed } }` is declared far above, and the Nocturne layer's `.sidebar, .main { position: relative }` lands AFTER it. Equal specificity, later wins — so the rail never overlaid the conversation on a narrow screen, it kept displacing it: measured at 375px, a 286px sidebar beside an 89px scroll area, with the chart still plotted at 700px and every modebar tooltip off-screen. The chart was the symptom; this is the cause. Re-declared here, at the end, where nothing can land after it. */ @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 286px; } } /* A source card's head is title + score chip + ⓘ + ↗ on one line. At 375px that row is 29px wider than the column and pushed the whole conversation into a horizontal scroll — measured, scrollWidth 398 against a 375 client. The title takes the first line and the tools wrap under it; nothing is dropped, and the citation stops dragging the page sideways. */ @media (max-width: 640px) { .chunk-head { flex-wrap: wrap; row-gap: 6px; } .chunk-head > span:first-child { flex: 1 1 100%; min-width: 0; } .chunk-tools { margin-left: auto; flex-shrink: 0; } } /* Wide CONTENT scrolls inside its own box; it never drags the page sideways. A SQL result with eight columns and an inline image are both legitimately wider than a 375px column, and on a narrow screen they were pushing the whole conversation into a horizontal scroll — which moves the composer and the sidebar with it. Standard rule, applied where the app had missed it. */ /* NOT `display: block` on the table — that collapses it to its content's minimum and rendered a SQL result 44px wide. The WRAPPER already scrolls; the table simply has to be allowed its natural width inside it, and the wrapper has to be told not to grow past its column. */ .step-detail-scroll { width: 100%; max-width: 100%; overflow-x: auto; } .step-detail-table, .sql-card-table { min-width: max-content; } .md-inline-img { max-width: 100%; height: auto; } /* ── Very narrow phones (≤ 380px) ─────────────────────────────────────── Two things stop earning their space before anything else does. */ @media (max-width: 380px) { /* The note explains a rule the chips already imply, and at 320px it was sitting on top of the chip it explains. */ .pinned-note { display: none; } /* The model pill was clipped mid-word ("OpenAI (GPT-4.1"). A flex item does not shrink below its content unless told to, so the ellipsis it already carries never engaged. */ .state-tag-row { min-width: 0; } /* `text-overflow: ellipsis` does nothing on an inline-FLEX box's own text — the label is a direct text node of the pill, so it was clipped mid-word ("OpenAI (GPT-4.1" with no ellipsis) rather than elided. As an inline-block it elides properly; the live dot is a ::before, so it is made an inline-block too and keeps its place before the text. */ .state-tag { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 32px; } .state-tag::before { display: inline-block; vertical-align: middle; margin-right: 8px; } } /* ── Canvas-6 · 8 — dashboard nav glyphs ──────────────────────────────── The labels used emoji, which the capture browser has no font for (they rendered as tofu in every one of the 40 v1.1 shots) and which, even in a real browser, read as inconsistent colour blobs beside the type. Phosphor outlines at 15px in the muted tone; the accent is reserved for the ACTIVE row, so colour means "you are here" rather than "this is an icon". */ .dash-nav-ic { flex-shrink: 0; width: 15px; height: 15px; color: var(--text-3); transition: color .14s ease; } .dash-nav:hover .dash-nav-ic { color: var(--text-2); } .dash-nav.on .dash-nav-ic { color: var(--accent-2); } /* ── Canvas-6 · 6 — the empty queue ───────────────────────────────────── One state instead of eight "idle" headings. The stage pills keep the pipeline legible without claiming anything is running. */ .q-idle { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 24px; border-radius: 14px; background: linear-gradient(168deg, var(--t-panel, var(--surface)), var(--t-panel2, var(--surface-2))); border: 1px solid var(--border); } .q-idle-ic { color: var(--text-3); display: grid; place-items: center; } .q-idle-title { font-size: 15px; font-weight: 500; color: var(--text); } .q-idle-sub { font-size: 12.5px; line-height: 1.6; color: var(--text-3); max-width: 460px; text-align: center; } .q-idle-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 2px; } .q-idle-pill { font-size: 11px; color: var(--text-3); background: var(--surface-4); border-radius: 999px; padding: 3px 10px; } .q-idle-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } .q-idle-act { min-height: 32px; padding: 0 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--border-2); background: none; font: inherit; font-size: 12.5px; color: var(--text-2); transition: border-color .14s ease, color .14s ease; } .q-idle-act:hover { border-color: var(--accent); color: var(--accent); } /* ── Canvas-6 · 2 — native controls broke the palette ─────────────────── The layout and typeface fields were default cannot host ::after, and a wrapper span would mean touching every markup site that has ever drawn one. */ select.modal-input, select.dash-select, select.opt-select { appearance: none; -webkit-appearance: none; background-color: var(--surface-4); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; background-size: 18px 18px; padding-right: 30px; border: 1px solid var(--border-2); border-radius: 9px; color: var(--text); font: inherit; font-size: 13px; min-height: 34px; } select.modal-input:focus, select.dash-select:focus { outline: none; border-color: var(--accent); } /* The dropdown LIST is drawn by the OS and cannot be styled; giving the options our own colours is the closest we get, and it stops a white list flashing open out of a dark dialog on the platforms that honour it. */ select.modal-input option, select.dash-select option { background: var(--t-panel, var(--surface)); color: var(--text); } /* Brand colour: five curated values and a hex readout, instead of the raw browser colour chip that rendered a pure blue square nothing else in the app uses. The native picker stays as the last swatch — a brand colour that is not one of five is a real requirement, so removing it would trade one honest control for a prettier dead end. */ /* The row is `align-items: flex-end`, so controls of different heights push their own labels to different heights. One shared field height rather than three boxes that happen to compute to 34 / 39 / 34 — a token, so a padding change on one control cannot silently break the alignment of the other two. */ .brand-row .brand-swatches, .brand-row .modal-input, .brand-row .seg { min-height: var(--field-h, 39px); box-sizing: border-box; } .brand-swatches { display: flex; align-items: center; gap: 7px; } .seg { align-items: center; } .brand-swatch { width: 26px; height: 26px; border-radius: 8px; cursor: pointer; padding: 0; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border-2) inset; transition: transform .12s ease, border-color .12s ease; } .brand-swatch:hover { transform: translateY(-1px); } .brand-swatch.on { border-color: var(--accent); } .brand-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#c98b8b, #d8b26a, #7fae90, #8ba6cf, #9184d9, #c98b8b); } .brand-swatch-custom input[type="color"] { position: absolute; inset: -6px; width: 200%; height: 200%; opacity: 0; cursor: pointer; border: 0; padding: 0; } .brand-hex { font-family: Menlo, Consolas, monospace; font-size: 12px; color: var(--text-3); background: var(--surface-4); border-radius: 7px; padding: 4px 8px; text-transform: uppercase; letter-spacing: .04em; } /* Typeface is two mutually exclusive options — one control with two positions, which is what a segmented control is, not a dropdown that hides half the choice behind a click. */ .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-4); border-radius: 9px; border: 1px solid var(--border-2); } .seg-btn { min-height: 28px; padding: 0 14px; border: 0; border-radius: 7px; cursor: pointer; background: none; font: inherit; font-size: 12.5px; color: var(--text-3); transition: background .14s ease, color .14s ease; } .seg-btn:hover { color: var(--text); } .seg-btn.on { background: var(--accent); color: var(--on-accent); } .seg-btn[data-font="serif"] { font-family: Georgia, 'Times New Roman', serif; } /* ── Reset card (sign-in) ─────────────────────────────────────────────── The same card as sign-in, not a second page: the reader is already looking at the thing they are trying to get into. */ .signin-reset .reset-seg { width: 100%; } .signin-reset .reset-seg .seg-btn { flex: 1; } .reset-code { font-family: Menlo, Consolas, monospace; letter-spacing: 8px; font-size: 17px; } .signin-ok { font-size: 12.5px; line-height: 1.55; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 9px; padding: 9px 11px; margin-top: 2px; } .signin-back { width: 100%; margin-top: 9px; min-height: 34px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-3); border-radius: 9px; } .signin-back:hover { color: var(--text); background: var(--surface-4); } /* A control that cannot work says so rather than opening a form whose mail goes nowhere — the dead-control rule this codebase keeps re-learning. */ .signin-forgot[disabled] { opacity: .45; cursor: not-allowed; } /* ── Signup / MFA panels (they reuse the sign-in card wholesale) ───────── Only two things are new: a code field that reads as a code, and a positive variant of the error box — "check your email" is not an error, and showing it in red is how a working signup looks broken. */ .signin-otp { font: 600 21px/1 Menlo, Consolas, monospace; letter-spacing: .32em; text-align: center; width: 100%; } .login-error.signin-ok { color: var(--t-ok, #177245); background: var(--t-okbg, rgba(23,114,69,.08)); border-color: var(--t-okline, rgba(23,114,69,.25)); } /* The auth pages own their URLs (/login, /signup). Hide the app until app.js has decided, for the same reason the dashboard boot flag exists: the shell would otherwise paint a chat screen for a moment before the overlay covers it. */ html[data-boot="auth"] .app { visibility: hidden; } /* Password confirmation: a tick or a cross inside the field, not a sentence under it — the answer belongs where the eye already is. */ .signin-match { margin-left: auto; font-size: 14px; font-weight: 700; line-height: 1; } .signin-match.ok { color: var(--t-ok, #177245); } .signin-match.no { color: var(--t-warn, #b3261e); } /* Google's button is a LINK, not a form control: it navigates away, and a