/* Spheric Capital — Production Library Dark warm background, forest-green accent, Fraunces + DM Sans. Brand tokens mirror demo/static/style.css so the production app reads as a continuation of the demo, not a separate visual world. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300&display=swap'); /* ── Theme tokens ── Default + dark palette share one :root rule so anything not explicit falls back to dark (matches the prior single-theme behaviour). Light theme only overrides the colour tokens, leaving spacing / radius / shadow inherited. The active theme is set via the data-theme attribute on , which is read/written by the Account-menu toggle and persisted in localStorage. */ :root, :root[data-theme="dark"] { --accent: #2D5A3D; --accent-light: #3a7a52; --accent-muted: rgba(45,90,61,0.25); --accent-text: #6abf82; --bg: #0F0F0E; --bg-raised: #1A1918; --bg-card: #1F1E1D; --bg-input: #141413; --ink: #E8E6DF; --ink-soft: #A8A49C; --ink-faint: #6B6760; --amber: #C8943E; --amber-muted: rgba(200,148,62,0.15); --amber-text: #E8B34A; --red: #D94444; --red-muted: rgba(217,68,68,0.15); --border: #2E2D2A; --border-light: #252422; --radius: 6px; --shadow: 0 1px 4px rgba(0,0,0,0.3); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); /* Spacing scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; /* Scroll system */ --scroll-thumb: var(--border); --scroll-track: transparent; } :root[data-theme="light"] { /* Linen-paper feel: a muted, slightly-darkened-from-white page that mirrors the dark theme's warmth inverted. Cards are a softer cream (not pure white) so nothing feels harsh or clinical. The forest-green accent from dark mode stays intact; the palette just flips to the light side while keeping the same tonal temperament. */ --accent: #2D5A3D; /* forest green — same as dark */ --accent-light: #3a7a52; --accent-muted: rgba(45,90,61,0.10); --accent-text: #2D5A3D; --bg: #E8E3D5; /* soft linen / oatmeal */ --bg-raised: #F0EBDE; /* raised surface — lighter */ --bg-card: #F2EEE2; /* cream cards, not white */ --bg-input: #F8F4E9; /* inputs brighter so they read as active */ --ink: #2A2520; /* warm near-black, soft */ --ink-soft: #5C5448; --ink-faint: #8F8776; --amber: #8B5A1A; --amber-muted: rgba(139,90,26,0.10); --amber-text: #6E451A; --red: #A92E2E; --red-muted: rgba(169,46,46,0.08); --border: #BFB7A2; /* visible but muted */ --border-light: #D4CDB8; --shadow: 0 1px 2px rgba(42,37,32,0.05); --shadow-lg: 0 6px 20px rgba(42,37,32,0.10); } * { box-sizing: border-box; margin: 0; padding: 0; } /* ── Universal box ── Base surface for cards, panels, rows — everything with bg-card + border. */ .box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } /* Subtle elevation in light mode — cards lift off the warm-paper bg. Skipped in dark mode where shadows don't register on dark-on-dark. */ :root[data-theme="light"] .box { box-shadow: var(--shadow); } .box--dashed { border-style: dashed; } .box--interactive { transition: border-color 0.15s, background 0.15s; cursor: pointer; } .box--interactive:hover { border-color: var(--accent-text); background: var(--bg-raised); } /* ── Universal pinned bar ── Bottom action bars, compose bars, selection trays. */ .pinned-bar { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 16px; background: var(--bg-raised); display: flex; align-items: center; gap: var(--space-lg); } /* ── Universal scroll container ── Add .scroll-box to any overflow-y element for: thin scrollbar, overscroll containment, and automatic scroll-fade indicators. */ .scroll-box { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); overscroll-behavior-y: contain; } /* Page-level scroll: autohide pattern. Transparent by default, JS toggles .scrolling on activity / edge hover. */ main { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 0.3s; overscroll-behavior-y: none; } main.scrolling { scrollbar-color: var(--scroll-thumb) var(--scroll-track); } html, body { overflow: hidden; height: 100vh; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; line-height: 1.65; font-size: 15px; -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); text-decoration: none; transition: color 0.15s, opacity 0.15s; } a:hover { opacity: 0.8; } /* ─── Header (copied shape from demo/templates/base.html) ─── */ header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; } .header-inner { max-width: 1000px; margin: 0 auto; padding: 24px 24px 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } .header-brand { display: flex; flex-direction: column; } .subtitle { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 2px; } .logo { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-faint); letter-spacing: 1.5px; } .header-nav { display: flex; gap: 20px; align-items: center; } .header-nav a { font-size: 13px; font-weight: 500; color: var(--ink-soft); border-bottom: none; letter-spacing: 0.2px; } .header-nav a:hover { color: var(--accent-text); } /* ─── Main layout — header+footer pinned, main scrolls ─── */ main { max-width: 1000px; margin: 0 auto; padding: 24px 24px 16px; flex: 1; min-height: 0; overflow-y: auto; width: 100%; display: flex; flex-direction: column; } /* Generic pinned-top / scroll-area pattern. Use .page-fixed-top for controls that stay visible, .page-scroll-area for the content that scrolls. */ /* Fixed-height header zone above page content. Same height across pages (Library, Draft, Brief, Chat) so docs don't shift vertically when switching tabs. */ .page-fixed-top { flex-shrink: 0; min-height: 46px; display: flex; flex-direction: column; justify-content: flex-end; } .page-scroll-area { flex: 1; position: relative; scrollbar-gutter: stable; } /* ── Universal rail layout ── Two-column shell: main content + right rail with filters / actions. Used by Generate, Brief, Library, Chat. Rail collapses below content on narrow viewports. */ .page-rail-layout { display: flex; flex: 1; min-height: 0; gap: 0; } .page-rail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding-right: 12px; } .page-rail { width: 280px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 16px 16px 12px 20px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg); } .rail-section { margin-bottom: var(--space-lg); min-width: 0; flex-shrink: 0; } .rail-section--fill { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 80px; overflow: hidden; margin-bottom: var(--space-md); } .rail-heading { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .rail-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .rail-presets .chip { text-align: center; padding: 5px 8px; font-size: 12px; width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-presets .preset-vendor-select { grid-column: 1 / -1; width: 100%; margin-top: 2px; padding: 5px 8px; font-size: 12px; } .rail-meta { font-size: 12px; color: var(--ink-faint); display: flex; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .rail-meta .tray-count { font-size: 13px; font-weight: 600; color: var(--ink); } .rail-meta .tray-warning { font-size: 11px; font-weight: 600; margin-top: 4px; } .rail-selected-list { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; } .rail-selected-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 4px 0; } .rail-selected-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; line-height: 1.2; min-width: 0; } .rail-selected-item .doc-vendor-pill { flex-shrink: 0; font-size: 10px; padding: 1px 5px; } .rail-selected-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); min-width: 0; } .rail-selected-remove { flex-shrink: 0; background: none; border: none; color: var(--ink-faint); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; } .rail-selected-remove:hover { color: var(--red); } .rail-action { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; } .rail-action .btn { width: 100%; } /* Narrow viewport: rail wraps under content */ @media (max-width: 900px) { .page-rail-layout { flex-direction: column; } .page-rail { width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 12px 16px; } .rail-section--fill { flex: 0 0 auto; } .rail-selected-list { max-height: 120px; } } /* Scroll indicator: fade gradient at top/bottom of scrollable areas. --fade-bg lets containers on raised surfaces override the gradient color. */ .scroll-fade-wrap { --fade-bg: var(--bg); position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; } .scroll-fade-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 32px; background: linear-gradient(transparent, var(--fade-bg)); pointer-events: none; opacity: 0; transition: opacity 0.2s; } .scroll-fade-wrap.has-more-below::after { opacity: 1; } .scroll-fade-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: linear-gradient(var(--fade-bg), transparent); pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; } .scroll-fade-wrap.has-more-above::before { opacity: 1; } /* Override fade-bg for containers on raised surfaces */ .chat-sidebar .scroll-fade-wrap, .draft-area-visible .scroll-fade-wrap { --fade-bg: var(--bg-raised); } /* Collapse the wrap when its scroll child is hidden (e.g., inactive tabs) — otherwise the wrap keeps flex: 1 and steals space from visible siblings. */ .scroll-fade-wrap:has(> [style*="display: none"]), .scroll-fade-wrap:has(> [style*="display:none"]), .scroll-fade-wrap:has(> [hidden]) { display: none; } h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--ink); line-height: 1.25; } h1 { font-size: 28px; margin-bottom: 4px; } h2 { font-size: 22px; margin-bottom: 4px; } h3 { font-size: 17px; margin-bottom: 4px; } .page-desc { font-size: 14px; color: var(--ink-faint); margin-bottom: 24px; } /* ─── Search bar ─── */ .search-form { display: flex; gap: 10px; margin-bottom: 24px; } .search-input { flex: 1; padding: 12px 16px; background: var(--bg-input); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; } .search-input:focus { border-color: var(--accent-text); background: var(--bg-raised); } .search-input::placeholder { color: var(--ink-faint); } /* ─── Filter chips ─── */ .filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; justify-content: flex-start; } .filter-label { font-size: 11px; font-weight: 600; color: var(--ink-faint); letter-spacing: 1px; text-transform: uppercase; margin-right: 12px; min-width: 70px; /* fixed column so all chip rows line up */ display: inline-block; text-align: left; } .chip { background: var(--bg-card); color: var(--ink-soft); font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); transition: all 0.15s; } .chip:hover { border-color: var(--accent-text); color: var(--ink); } .chip.active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent-text); } /* ─── Document list ─── */ .doc-list { display: flex; flex-direction: column; gap: 6px; } .doc-row-link { text-decoration: none; color: inherit; border-bottom: none; display: block; /* Pair with .doc-row width:100% so the link stretches edge-to- edge and the hover/click area matches the visible row. */ width: 100%; } .doc-row-link:hover { border-bottom: none; } /* doc-row self-contains .box properties because it appears in 9 templates */ .doc-row { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 7px 12px; /* Always fill the parent width. Without this, rows in some ancestor layouts (tab-panes, narrow scroll-boxes, first-render before JS hydration) were shrinking to content width, making history lists look "half as wide" compared to a later render of the same page. width: 100% + box-sizing: border-box pins rows to the list's full width across chat / brief / drafts. */ width: 100%; box-sizing: border-box; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s, background 0.15s, transform 0.05s; cursor: pointer; } .doc-row:hover { border-color: var(--accent-text); background: var(--bg-raised); } .doc-row:active { transform: scale(0.998); } /* .doc-row--no-badge: variant for lists without a type-badge column (chat sessions, research briefs). Drops the 44px first column that normally holds a type badge. Use instead of scattering inline grid-template-columns overrides in templates. */ .doc-row--no-badge { grid-template-columns: 1fr auto auto; } .type-badge { background: var(--border); color: var(--ink-soft); font-size: 10px; font-weight: 700; text-align: center; padding: 6px 8px; border-radius: 4px; letter-spacing: 0.5px; text-transform: uppercase; min-width: 46px; } .type-badge.pdf { background: #c0392b; color: white; } .type-badge.xlsx, .type-badge.xls { background: #1e6641; color: white; } .type-badge.docx, .type-badge.doc { background: #1e4e8c; color: white; } .type-badge.csv { background: #7a5c1c; color: white; } .type-badge.body { background: var(--ink-faint); color: var(--bg); } /* Main column: subject (big) + filename-row (smaller) + optional snippet */ .doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .doc-subject { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-filename-row { font-size: 12px; color: var(--ink-faint); display: flex; gap: 10px; align-items: baseline; flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .doc-filename-row .doc-filename { color: var(--ink-soft); font-weight: 500; font-size: 12px; font-family: 'DM Sans', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; /* Never shrink — "1 source" / "3 sources" should always render in full, even when paired with a long preview text on the same row. Without this, flex would squeeze it to "1 sourc…". Only the .doc-sender (preview) should shrink. */ flex-shrink: 0; } .doc-filename-row .doc-filename::before { content: "📄 "; font-size: 11px; margin-right: 2px; } .doc-filename-row .doc-sender { color: var(--ink-faint); /* Match the subject row's truncation — when the sender is long (Mailgun bounce VERP addresses especially) it should end with "…" at the container edge, not a hard chop. The `min-width: 0` is required for text-overflow to kick in inside a flex item. */ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-filename-row .doc-sender::before { content: "· "; opacity: 0.6; margin-right: 2px; } .doc-snippet { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; word-break: break-word; /* Collapse the literal newlines that come back from the FTS5 snippet */ white-space: normal; min-width: 0; max-width: 100%; } .doc-snippet mark { background: var(--amber-muted); color: var(--amber-text); padding: 0 2px; border-radius: 2px; } /* Vendor pill on the right — text is centered, the pill box fits its content exactly (no fixed min-width) so it ends where the text ends. */ .doc-vendor-pill { background: var(--accent-muted); color: var(--accent-text); border: 1px solid var(--accent); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; text-align: center; align-self: center; } .doc-vendor-pill--none { background: transparent; color: var(--ink-faint); border-color: var(--border); font-style: italic; font-weight: 500; } /* Row-action buttons (admin panel — Remove / Resend on each row) */ .btn-row-action { padding: 8px 14px; background: var(--bg-raised); color: var(--ink-soft); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap; align-self: center; } .btn-row-action:hover { border-color: var(--accent-text); color: var(--ink); background: var(--bg-card); } .btn-row-action--danger { color: var(--red); border-color: var(--red-muted); } .btn-row-action--danger:hover { border-color: var(--red); color: var(--red); background: var(--red-muted); } .btn-row-action-placeholder { padding: 8px 14px; font-size: 11px; font-style: italic; color: var(--ink-faint); align-self: center; white-space: nowrap; } /* Far-right stack: status + size/pages + date, each on its own line, tabular-nums for clean right alignment. */ .doc-right-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; font-variant-numeric: tabular-nums; } .doc-right-stack .status-tag { align-self: flex-end; } .doc-size-line { font-size: 11px; color: var(--ink-faint); white-space: nowrap; } /* Per-email "Select all / Deselect" toggle in picker group headers. Kept intentionally quiet — sits under the date line, flips label based on how many children are currently checked. */ .select-all-btn { align-self: flex-end; background: transparent; border: 1px solid var(--border-light); color: var(--ink-faint); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; transition: color 0.12s, border-color 0.12s, background 0.12s; } .select-all-btn:hover { color: var(--ink); border-color: var(--accent-text); } .select-all-btn--active { color: var(--accent-text); border-color: var(--accent-text); } .doc-date-line { font-size: 11px; color: var(--ink-faint); white-space: nowrap; } /* ─── Status tags ─── */ .status-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: 0.5px; text-transform: uppercase; } .status-tag.queued { background: var(--amber-muted); color: var(--amber-text); } .status-tag.processing { background: var(--amber-muted); color: var(--amber-text); } .status-tag.generating { background: var(--amber-muted); color: var(--amber-text); /* Pulsing dot + animated opacity so users can visually distinguish "still working" from "done" at a glance in the history list. */ position: relative; padding-left: 18px; animation: status-pulse 1.6s ease-in-out infinite; } .status-tag.generating::before { content: ''; position: absolute; left: 7px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-text); transform: translateY(-50%); box-shadow: 0 0 0 0 var(--amber-text); animation: status-pulse-dot 1.6s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @keyframes status-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(200, 148, 62, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(200, 148, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 148, 62, 0); } } .status-tag.done { background: var(--accent-muted); color: var(--accent-text); } .status-tag.draft { background: var(--accent-muted); color: var(--accent-text); } .status-tag.error { background: var(--red-muted); color: var(--red); } .status-tag.failed { background: var(--red-muted); color: var(--red); } /* Enhancement (tier-2 Docling markdown) skipped for this doc — amber not red because raw text extraction still succeeded and the doc is usable. */ .status-tag.enh-skipped{ background: var(--amber-muted); color: var(--amber-text); cursor: help; } /* ─── Empty state ─── */ .empty { text-align: center; padding: 80px 24px; color: var(--ink-faint); font-size: 14px; /* Tab-panes activate with display:flex (row), which would make a block child shrink to its content width. Explicit 100% so the empty state takes the full width of its parent whether that parent is flex-row, flex-column, or plain block. */ width: 100%; box-sizing: border-box; } /* ─── Document detail view ─── */ .back-link { display: inline-block; font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; border-bottom: none; } .back-link:hover { color: var(--accent-text); } .doc-header { padding: 14px 16px; margin-bottom: 8px; } .doc-header h1 { font-size: 16px; margin-bottom: 6px; word-break: break-word; } .doc-header-meta { display: flex; flex-wrap: wrap; gap: 16px 32px; font-size: 13px; color: var(--ink-soft); margin-top: 16px; } .doc-header-meta span { display: flex; gap: 6px; } .doc-header-meta strong { color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; } .doc-text { padding: 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.75; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; } /* ─── Extraction container on document detail ─── */ .extract-box { overflow: hidden; } .extract-box-bar { padding: 10px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.5px; } .extract-panel { border-bottom: 1px solid var(--border); } .extract-panel:last-child { border-bottom: none; } .extract-panel-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--bg-card); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); user-select: none; transition: background 0.1s; } .extract-panel-bar:hover { background: var(--bg-raised); } .extract-panel-bar .chevron { transition: transform 0.2s; color: var(--ink-faint); font-size: 11px; margin-left: 8px; } .extract-panel.open .chevron { transform: rotate(90deg); } .extract-panel-content { display: none; border-top: 1px solid var(--border-light); } .extract-panel.open .extract-panel-content { display: block; } .extract-panel .doc-text { border: none; border-radius: 0; max-height: 50vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); overscroll-behavior-y: contain; } /* Legacy classes kept for compatibility */ .extract-section { margin-bottom: 28px; } .extract-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .extract-header h3 { margin: 0; } .extract-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.3px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; white-space: nowrap; } .extract-tag--fast { background: var(--bg-raised); color: var(--ink-soft); border: 1px solid var(--border); } .extract-tag--enhanced { background: var(--accent-muted); color: var(--accent-text); border: 1px solid var(--accent); } .extract-tag--pending { background: var(--amber-muted); color: var(--amber-text); border: 1px solid var(--amber); display: inline-flex; align-items: center; gap: 8px; } .extract-tag--failed { background: var(--red-muted); color: var(--red); border: 1px solid var(--red); } .pending-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-text); animation: pending-pulse 1.4s ease-in-out infinite; } @keyframes pending-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1.0; transform: scale(1.2); } } .enhance-loading { padding: 28px; display: flex; align-items: center; gap: 16px; } .enhance-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent-text); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Upload-from-machine inline status ── Single live-updating line with a small spinning dot next to it instead of a pile of stacked "still processing…" lines. Kept compact so it fits inside the rail's narrow 280px column. */ .ufm-status-live { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--ink-soft); } .ufm-status-spinner { width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent-text); border-radius: 50%; animation: spin 0.9s linear infinite; flex-shrink: 0; } .ufm-status-done { color: var(--accent-text); } .enhance-loading-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .enhance-loading-text small { color: var(--ink-faint); font-size: 11px; } /* ─── Login form ─── */ .login-wrap { width: 100%; max-width: 440px; margin: 64px auto; } .login-form { padding: 36px 36px 28px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 14px; /* Match heights between login (short) and signup (tall): content-driven with a floor so a short form never collapses below a reasonable size. */ min-height: 360px; justify-content: center; } .login-form h1 { text-align: center; font-size: 24px; } .login-form .btn { margin-top: 8px; } .login-form h1 { text-align: center; margin-bottom: 8px; } .login-form label { font-size: 12px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; } .login-form input { padding: 12px 14px; background: var(--bg-input); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; } .login-form input:focus { border-color: var(--accent-text); background: var(--bg-raised); } .login-error { color: var(--red); font-size: 13px; text-align: center; padding: 8px; background: var(--red-muted); border-radius: var(--radius); } /* ─── Buttons ─── */ .btn { padding: 12px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s, opacity 0.15s; font-family: 'DM Sans', sans-serif; letter-spacing: 0.2px; display: inline-block; text-align: center; } /* .btn-primary styling now lives in the kit (kit/css/components.css). Dropped the local duplicate here once the submodule was bumped to pick up denovoworks/denovo-kit PR #3 (white text on green). */ .btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .btn-secondary { background: var(--bg-card); color: var(--ink-soft); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-raised); color: var(--ink); } /* Chat list primary CTA — match the Generate Brief / Generate Draft look exactly. Spheric's .btn is `display: inline-block` (vs kit's inline-flex) so an was rendering with a slightly different vertical rhythm than the generate buttons (both lived inside .rail-action with width:100%). Normalise to inline-flex + explicit min-height here. */ .chat-new-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-decoration: none; } /* ─── Footer ─── */ footer { max-width: 1000px; margin: 0 auto; padding: 8px 24px; border-top: 1px solid var(--border); font-size: 10px; color: var(--ink-faint); text-align: center; letter-spacing: 0.5px; flex-shrink: 0; width: 100%; } /* ─── Document picker (shared by generate + chat) ─── */ .picker-container { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; } .picker-top { flex-shrink: 0; } .picker-scroll { flex: 1; scrollbar-gutter: stable; } /* Selection tray is a direct child of picker-container, pinned at bottom */ .doc-picker-list .doc-row { grid-template-columns: 28px 48px 1fr auto auto; } .doc-checkbox-col { display: flex; align-items: center; justify-content: center; } .doc-checkbox-col input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-text); cursor: pointer; } .doc-picker-row { cursor: pointer; } .doc-picker-row:has(input:checked) .doc-row { border-color: var(--accent); background: rgba(45,90,61,0.08); } .selection-tray { /* extends .pinned-bar via HTML class */ } /* When picker is used inside a page that has its own action bar, hide the picker's built-in tray */ .has-own-action-bar .selection-tray { display: none !important; } /* Consistent pinned bottom bars — now use .pinned-bar base class */ .bottom-action-bar { /* extends .pinned-bar via HTML class */ } .tray-count { font-weight: 600; color: var(--ink); font-size: 14px; } .tray-tokens { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .tray-warning { font-size: 12px; font-weight: 600; } .selection-tray .btn { margin-left: auto; } .preset-vendor-wrap { display: inline-flex; align-items: center; gap: 6px; } .preset-vendor-select { padding: 6px 10px; background: var(--bg-input); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 12px; } /* ─── Draft output (generate + draft detail) ─── */ .draft-output { padding: 24px; font-size: 14px; line-height: 1.75; color: var(--ink); flex: 1; margin-bottom: 0; } .draft-output h1 { color: var(--accent-text); margin: 0 0 16px; font-size: 24px; font-family: 'Fraunces', serif; font-weight: 600; } .draft-output h2 { color: var(--accent-text); margin: 24px 0 12px; font-size: 20px; } .draft-output h3 { color: var(--ink); margin: 20px 0 10px; font-size: 17px; } .draft-output h4 { color: var(--ink-soft); margin: 16px 0 8px; font-size: 15px; } .draft-output strong { color: var(--ink); } /* padding-left keeps list markers (both bullets and numbers) INSIDE the box. The global `* { padding: 0 }` reset strips default
    /