/* Enhansys frontend — Polish #2 (monochrome redesign, tokens v2). Design tokens inlined from design/enhansys-tokens-v2.css so platform/frontend/ stays self-contained (Caddy serves this directory alone). Keep in sync if the token file changes. Both themes via [data-theme] on — see index.html for the flash-free bootstrap script and app.js for the toggle. */ :root { --bg: #FFFFFF; --panel: #F7F6F4; --panel-2: #EEECE9; --text: #1B1B1A; --text-2: rgba(27, 27, 26, 0.78); --text-muted: rgba(27, 27, 26, 0.5); --text-faint: rgba(27, 27, 26, 0.32); --border: rgba(27, 27, 26, 0.09); --btn-bg: #1B1B1A; --btn-tx: #FAFAF9; --code-bg: #1B1B1A; --code-tx: #D8D6D2; --code-muted: rgba(250, 250, 249, 0.5); /* the one functional color exception (decisions); dark values match the prototype's own error surface verbatim, light is a derived tint */ --error-bg: #FBEAE8; --error-text: #9A3324; --error-border: rgba(154, 51, 36, 0.25); --ok-bg: #DFF2E2; --ok-text: #1E7A44; --ok-border: rgba(30, 122, 68, 0.4); --warn-bg: #FBF1CE; --warn-text: #8A6D0B; --warn-border: rgba(138, 109, 11, 0.4); --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --text-base: 14px; --text-title: 16px; /* weight 400, color --text-2 */ --text-label: 10.5px; /* uppercase, tracking .12em, weight 500 */ --text-data: 12px; /* mono */ --text-meta: 11px; /* mono, muted */ --tracking-label: 0.12em; --radius-sm: 10px; /* fields, small buttons */ --radius-md: 12px; /* list items, chips */ --radius-lg: 16px; /* cards, sections */ --radius-xl: 20px; /* composer */ --radius-pill: 9999px; /* buttons, pills, dots */ --shadow-soft: 0 2px 14px rgba(27, 27, 26, 0.05); --col-history: 280px; --col-inputs: 350px; --chat-width: 760px; --bar-height: 64px; } [data-theme="dark"] { --bg: #0F0F10; --panel: #171717; --panel-2: #222221; --text: #F2F1EF; --text-2: rgba(242, 241, 239, 0.8); --text-muted: rgba(242, 241, 239, 0.52); --text-faint: rgba(242, 241, 239, 0.3); --border: rgba(255, 255, 255, 0.08); --btn-bg: #F2F1EF; --btn-tx: #141414; --code-bg: #060606; --code-tx: #C9C7C3; --code-muted: rgba(250, 250, 249, 0.45); --error-bg: #2A1215; --error-text: #FF8A80; --error-border: #5C2B2E; --ok-bg: #12291B; --ok-text: #7BD6A0; --ok-border: rgba(123, 214, 160, 0.35); --warn-bg: #2B2410; --warn-text: #E2C462; --warn-border: rgba(226, 196, 98, 0.35); } * { box-sizing: border-box; } /* smooth theme switch: the big surfaces fade instead of snapping */ body, .app-shell, .history-sidebar, .artifacts-panel, .thread-bar, .composer-shell, .composer, .conversation, .thread-item, .theme-toggle, .icon-toggle { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); -webkit-font-smoothing: antialiased; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } .hidden { display: none !important; } h1, h2 { margin: 0; } .mono { font-family: var(--font-mono); } .eyebrow { font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .muted-small { color: var(--text-muted); font-size: 13px; } .brand-line { display: flex; align-items: center; gap: 10px; min-width: 0; } .brand-mark { font-size: 13px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text); } /* --- buttons: primary solid ink pill, secondary ghost pill (rule 6) ------- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: 8px 18px; font-size: 13px; font-weight: 500; border: 1px solid transparent; transition: opacity 0.15s, background 0.15s; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--btn-bg); color: var(--btn-tx); } .btn-primary:hover { opacity: 0.85; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--panel-2); } /* --- boot / signin -------------------------------------------------------- */ .boot, .signin-view { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--bg); } .boot-msg { color: var(--text-muted); } /* Clerk avatars (user + organization initials): brand peach instead of Clerk's default purple — Andrea's call (2026-07-12). Same value on both themes; ink initials for contrast. Belt-and-braces with the appearance.elements.avatarBox set in app.js (portaled popovers included). */ .cl-avatarBox { background: #FCC4AC !important; color: #1B1B1A !important; } /* --- app shell ------------------------------------------------------------ */ .app-shell { display: grid; grid-template-columns: var(--col-history) minmax(0, 1fr) var(--col-inputs); transition: grid-template-columns 0.2s ease; height: 100vh; overflow: hidden; background: var(--bg); } /* right sidebar collapsed to nothing; the toggle button lives in the thread-bar (always visible) so it stays reachable either way */ .app-shell.artifacts-collapsed { grid-template-columns: var(--col-history) minmax(0, 1fr) 0; } .history-sidebar, .center-shell, .artifacts-panel { min-width: 0; min-height: 0; } /* --- sidebar: panel tone + thin hairlines between sections (Andrea, WP3) -- */ .history-sidebar { display: flex; flex-direction: column; background: var(--panel); color: var(--text); border-right: 1px solid var(--border); } .history-header { flex: 0 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--border); } .btn-new { width: 100%; text-align: center; } .thread-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; } .thread-item { position: relative; cursor: pointer; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text); padding: 10px 32px 10px 12px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 4px; } .thread-item:hover, .thread-item.active { background: var(--panel-2); } .thread-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thread-meta { display: flex; align-items: center; gap: 8px; } .thread-pin { margin-right: 6px; font-size: 12px; color: var(--text-muted); } /* ⋮ kebab: hidden until the row is hovered (or its menu is open / it has keyboard focus); same muted-glyph-that-inks recipe as .icon-ghost */ .thread-kebab { position: absolute; top: 8px; right: 6px; width: 24px; height: 24px; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; } .thread-item:hover .thread-kebab, .thread-item.menu-open .thread-kebab, .thread-kebab:focus-visible { opacity: 1; } .thread-kebab:hover { color: var(--text); background: var(--panel); } /* floating context menu (Pin/Rename/Delete), positioned by app.js */ .ctx-menu { position: fixed; z-index: 70; min-width: 150px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 4px; display: flex; flex-direction: column; } .ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; text-align: left; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text); } .ctx-item:hover { background: var(--panel-2); } .ctx-icon { width: 16px; text-align: center; font-size: 13px; color: var(--text-muted); } /* Delete is the destructive one: red text AND icon; the rest stay standard */ .ctx-item.danger, .ctx-item.danger .ctx-icon { color: var(--error-text); } .ctx-item.danger:hover { background: var(--error-bg); } .history-footer { flex: 0 0 auto; padding: 12px 16px; min-height: 56px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); } #clerkOrg { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } #clerkUser { flex: 0 0 auto; display: flex; align-items: center; } /* Theme toggle: matches the prototype's own control exactly — tonal pill, no border, muted text that brightens to full ink on hover, sized to its own content and pinned to the right edge (not stretched/centered), same as the prototype's own footer row. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 32px; padding: 5px 13px; border: none; border-radius: var(--radius-pill); background: var(--panel-2); color: var(--text-muted); font-size: 12px; font-weight: 500; transition: color 0.15s; } .theme-toggle:hover { color: var(--text); } /* Clerk's org switcher + user button render into the sidebar footer, which now follows --panel (light in the light theme, dark in the dark theme — no longer always-dark as in G8). Force the inline TRIGGERS to the theme's own text color so they read in both directions; the dropdown/popover cards are portaled to (outside .history-footer) and stay untouched. */ .history-footer .cl-organizationSwitcherTrigger, .history-footer .cl-organizationSwitcherTrigger *, .history-footer .cl-userButtonTrigger, .history-footer .cl-userButtonTrigger * { color: var(--text) !important; } /* --- status badges: tonal pills, error is the only colored one ----------- */ .status-badge, .thread-badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 2px 10px; border-radius: var(--radius-pill); text-transform: uppercase; white-space: nowrap; background: var(--panel-2); color: var(--text-muted); } .thread-badge { font-size: 10px; padding: 1px 9px; } /* base pill for the typed-card state badges; sits BEFORE the semantic colour classes so their colored border wins the cascade (both are single-class). */ .badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; padding: 2px 9px; border-radius: var(--radius-pill); text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; } /* neutral count pill (e.g. the Files card's attachment count) */ .badge-count { background: var(--panel-2); color: var(--text-muted); } /* semantic state colors (Andrea): pastel fill, darker line, colored text */ .badge-inprogress { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); } .badge-closed { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .badge-error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } /* Dropped = a business-terminal state (lost deal / half-done). Red like error — the label tells them apart; error stays for technical failures. */ .badge-dropped { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } .status-badge.clickable { cursor: pointer; } /* --- center / chat --------------------------------------------------------- */ .center-shell { display: flex; flex-direction: column; position: relative; background: var(--bg); } .thread-bar { flex: 0 0 var(--bar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: var(--bg); border-bottom: 1px solid var(--border); } .thread-bar-actions { display: flex; align-items: center; gap: 10px; } /* same tonal-pill recipe as .theme-toggle, sized down for an icon glyph */ .icon-toggle { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-pill); border: none; background: var(--panel-2); color: var(--text-muted); font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: color 0.15s; } .icon-toggle:hover { color: var(--text); } .thread-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .thread-title-block h1 { font-family: var(--font-sans); font-size: var(--text-title); font-weight: 400; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } /* inline ghost action next to the title (rename): no pill, just a muted glyph that inks on hover — same restraint as the confirm()-minimal close action */ .icon-ghost { flex: 0 0 auto; border: none; background: none; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: var(--radius-md); transition: color 0.15s; } .icon-ghost:hover { color: var(--text); } .conversation { flex: 1 1 auto; overflow-y: auto; padding: 24px; } .message-stack { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto; } .empty-state { max-width: 620px; margin: 48px auto; text-align: center; color: var(--text-muted); } .empty-state h2 { font-family: var(--font-sans); font-size: 28px; color: var(--text); margin-bottom: 12px; font-weight: 400; } .empty-state p { line-height: 1.6; } .message { display: flex; flex-direction: column; gap: 6px; } .message-label { font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .message-body { border-radius: var(--radius-lg); padding: 12px 16px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; } .message.user { align-items: flex-end; } .message.user .message-body { background: var(--panel); border-radius: 18px; max-width: 78%; } /* the agent's actual reply gets a box of its own: bordered card, left-aligned — clearly a chat message, clearly not the user's tonal bubble */ .message.agent .message-body { background: var(--bg); border: 1px solid var(--border); max-width: 100%; } .message-body p { margin: 0 0 8px; } .message-body p:last-child { margin-bottom: 0; } .message-body h1, .message-body h2, .message-body h3 { font-family: var(--font-sans); font-weight: 500; margin: 12px 0 6px; line-height: 1.3; color: var(--text-2); } .message-body h1 { font-size: 17px; } .message-body h2 { font-size: 15px; } .message-body h3 { font-size: 14px; } .message-body ul, .message-body ol { margin: 6px 0; padding-left: 20px; } .message-body li { margin: 2px 0; } .message-body code { font-family: var(--font-mono); font-size: var(--text-data); background: var(--panel-2); padding: 1px 5px; border-radius: 4px; } .message-body pre { font-family: var(--font-mono); font-size: var(--text-data); background: var(--code-bg); color: var(--code-tx); padding: 12px 14px; border-radius: var(--radius-md); overflow-x: auto; } .message-body pre code { background: transparent; padding: 0; color: inherit; } /* tables: header by tone + thin row rules (Andrea, WP3) */ .message-body table { border-collapse: collapse; margin: 8px 0; font-size: 13px; display: block; overflow-x: auto; width: 100%; } .message-body th, .message-body td { padding: 6px 12px; text-align: left; border-bottom: 1px solid var(--border); } .message-body th { background: var(--panel); font-weight: 500; color: var(--text-2); } /* --- Reasoning… fold: all of a turn's intermediate activity in one closed- by-default

between the user message and the agent reply ----- */ .reasoning { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); } .reasoning summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text-muted); font-size: 12.5px; } .reasoning summary::-webkit-details-marker { display: none; } .reasoning-caret { display: inline-block; font-size: 10px; color: var(--text-faint); transition: transform 0.15s; } .reasoning[open] > summary .reasoning-caret { transform: rotate(90deg); } .reasoning-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } /* turn in flight: the label breathes so the collapsed row reads as live */ .reasoning.live .reasoning-label { animation: reasoning-pulse 1.6s ease-in-out infinite; } @keyframes reasoning-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .reasoning-body { max-height: 260px; overflow-y: auto; padding: 6px 12px 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .reasoning-entry { color: var(--text-faint); font-size: 12.5px; font-family: var(--font-mono); overflow-wrap: anywhere; } .reasoning-entry.tool::before { content: "· "; } /* agent progress-narration folded into the reasoning: sans, quoted-block look so it reads as prose next to the monospace tool/log lines */ .reasoning-entry.text { font-family: var(--font-sans); color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 8px; } .reasoning-entry.text p { margin: 0 0 4px; } .reasoning-entry.text p:last-child { margin-bottom: 0; } /* --- "Enhansys Agent is working" row: the entity name + a circular spinner, shown for the whole turn (Andrea). Mirrors .message-label for the name so it reads as the same chat entity. --------------------------------- */ .agent-pending { max-width: 820px; margin: 4px auto 0; display: flex; align-items: center; gap: 8px; } .agent-pending-name { font-size: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } /* Same wheel the legacy frontend spins through its run phases (neutral track ring + one moving arc, spin 0.8s linear), with the arc in #FCC4AC. */ .agent-spinner { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--border); /* neutral track ring */ border-top-color: #FCC4AC; /* the single moving arc — #FCC4AC */ animation: agent-spin 0.8s linear infinite; } @keyframes agent-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .agent-spinner { animation-duration: 1.6s; } } .message.event-line .message-body { background: transparent; padding: 4px 0; color: var(--text-faint); font-size: 13px; font-family: var(--font-mono); } .message.error-line .message-body { background: var(--error-bg); color: var(--error-text); font-family: var(--font-sans); border-radius: var(--radius-md); } /* --- awaiting banner (informational, not an error: stays monochrome) ------ */ .awaiting-banner { flex: 0 0 auto; margin: 0 24px; padding: 10px 14px; background: var(--panel-2); border-radius: var(--radius-md); color: var(--text); font-weight: 500; text-align: center; } /* --- composer: the only shadowed surface in the app ------------------------ */ .composer-shell { flex: 0 0 auto; padding: 12px 24px 16px; background: var(--bg); border-top: 1px solid var(--border); } .attachment-tray { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .attachment-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px; max-width: 220px; } .attachment-chip .chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-chip.err { border-color: var(--error-border); color: var(--error-text); } .composer { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 8px; background: var(--bg); box-shadow: var(--shadow-soft); } .composer:focus-within { border-color: var(--text-faint); } .attach-button, .send-button { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .send-button { width: 38px; height: 38px; background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-tx); } .send-button:disabled, .composer.disabled .send-button { opacity: 0.5; cursor: not-allowed; } #messageInput { flex: 1 1 auto; border: none; outline: none; resize: none; max-height: 180px; padding: 6px 4px; background: transparent; line-height: 1.5; color: var(--text); font-family: var(--font-sans); } .composer-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; text-align: center; } .drop-overlay { position: absolute; inset: 0; z-index: 20; background: var(--bg); opacity: 0.94; border: 2px dashed var(--text-faint); display: flex; align-items: center; justify-content: center; font-size: 20px; font-family: var(--font-sans); color: var(--text); } /* --- artifacts panel -------------------------------------------------------- */ .artifacts-panel { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); overflow: hidden; } .artifacts-header { flex: 0 0 auto; padding: 20px 20px 12px; border-bottom: 1px solid var(--border); } .artifacts-list { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } /* File cards — ported verbatim from the approved prototype's Documenti card: document thumbnail left, name + format line, pill actions. Cards sit on panel; the primary (report.pdf) on the darker panel-2, so the thumbnail's --bg ground reads as paper on both. */ .artifact-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 12px; } .artifact-item.primary { background: var(--panel-2); } .artifact-thumb { width: 34px; height: 42px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; } /* format-tag thumbnails (MD / CSV / JSON …): plain text at 12px in the paper box — the prototype's MD, not a mono muted chip. */ .artifact-thumb.tag { font-size: 12px; font-weight: 500; } .artifact-info { flex: 1 1 auto; min-width: 0; } .artifact-badge { display: inline-block; margin-right: 7px; vertical-align: 1px; font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: #FCC4AC; color: #1B1B1A; border-radius: var(--radius-pill); padding: 1px 7px; } .artifact-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artifact-fmt { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; } .artifact-actions { display: flex; gap: 6px; flex: 0 0 auto; } .artifact-btn { font-size: 11.5px; font-weight: 500; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text); } .artifact-btn:hover { background: var(--panel-2); } .artifact-btn.primary { color: var(--btn-tx); background: var(--btn-bg); border-color: var(--btn-bg); } .artifact-btn.primary:hover { opacity: 0.85; } /* --- typed-artifact cards (Parameters / Checks) + the in-chat report chip, ported verbatim from the approved prototype ------------------------------ */ /* in-chat report chip: appears when the report lands, opens the preview pane */ .report-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; transition: background 0.15s; max-width: 340px; } .report-chip:hover { background: var(--panel-2); } .report-chip .doc-ico { width: 30px; height: 36px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; } .report-chip .rc-name { font-weight: 500; font-size: 13px; } .report-chip .rc-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } /* collapsible typed card */ .tcard { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .tcard-head { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; color: var(--text); padding: 13px 14px; text-align: left; } .tcard-head:hover { background: var(--panel-2); } .tcard-caret { font-size: 10px; color: var(--text-faint); transition: transform 0.18s; flex: 0 0 auto; } .tcard.open .tcard-caret { transform: rotate(90deg); } .tcard-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; } .tcard-title { flex: 1 1 auto; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; } .tcard-state { flex: 0 0 auto; } /* Card bodies cap at ~half the column and scroll inside (Andrea: a long Parameters list must not monopolize the panel); overscroll-behavior keeps the wheel from spilling into the panel scroll at the edges. */ .tcard-body { display: none; padding: 4px 14px 16px; border-top: 1px solid var(--border); max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; } .tcard.open .tcard-body { display: block; } /* Parameters: sections of read-only field readouts */ .psection { margin-top: 14px; } .psection-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px; } .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pgrid .field.full { grid-column: 1 / -1; } .field { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .field-label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field-val { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field-val.text { font-size: 12px; } .field-val .u { color: var(--text-muted); font-size: 11px; } /* provenance chips: neutral tonal — document/user provided vs assumed */ .prov { font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-pill); white-space: nowrap; flex: 0 0 auto; } .prov.doc { background: var(--panel-2); color: var(--text-muted); } .prov.ass { background: transparent; color: var(--text-faint); border: 1px dashed var(--border); } .pnote { font-size: 11px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; } .prov-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .prov-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); } /* Checks */ .check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .check:last-of-type { border-bottom: none; } .check-mark { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; margin-top: 1px; } .check.pass .check-mark { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); } .check.warn .check-mark { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); } .check.block .check-mark { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); } .check-text { flex: 1 1 auto; min-width: 0; } .check-name { font-size: 13px; font-weight: 500; color: var(--text); } .check-msg { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; } .check-legend { font-size: 10.5px; color: var(--text-faint); margin-top: 12px; font-family: var(--font-mono); } /* attachment rows stacked inside the collapsible Files card */ .files-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } /* --- report preview pane: slides in from the right, wider than the panel -- No display:none toggle — the pane stays in the DOM and animates via .show (off-screen + non-interactive without it), so the slide transition runs. */ .preview-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(27, 27, 26, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .preview-backdrop.show { opacity: 1; pointer-events: auto; } .preview-pane { position: fixed; top: 0; right: 0; height: 100%; width: min(620px, 92vw); z-index: 61; background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow-soft); transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; flex-direction: column; } .preview-pane.show { transform: translateX(0); } .preview-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .preview-title { flex: 1 1 auto; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview-tabs { display: flex; gap: 4px; background: var(--panel-2); border-radius: var(--radius-pill); padding: 3px; } .preview-tabs button { border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: var(--radius-pill); } .preview-tabs button.active { background: var(--bg); color: var(--text); box-shadow: var(--shadow-soft); } .preview-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-pill); border: none; background: var(--panel-2); color: var(--text-muted); font-size: 16px; line-height: 1; } .preview-close:hover { color: var(--text); } .preview-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; } /* a rendered PDF keeps a light paper ground in both themes (real PDFs are light) */ .preview-frame { width: 100%; height: 100%; border: none; background: #fff; display: block; } .preview-loading { color: var(--text-muted); font-size: 13px; padding: 24px; } /* markdown fallback view reuses the chat message-body typography */ .preview-md { max-width: 660px; margin: 0 auto; padding: 24px; background: transparent; border: none; } .preview-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } /* --- modal dialog: app-styled prompt()/confirm() replacement -------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27, 27, 26, 0.45); } .modal { width: 100%; max-width: 440px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 12px; } .modal-title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--text); } .modal-message { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); } .modal-input { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); } .modal-input:focus { outline: none; border-color: var(--text-faint); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* destructive confirm (Delete / Mark as Dropped): red fill, not the ink pill */ .btn-primary.danger { background: var(--error-text); color: var(--bg); border-color: var(--error-text); } .btn-primary.danger:hover { opacity: 0.9; } /* --- toast ---------------------------------------------------------------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--btn-bg); color: var(--btn-tx); padding: 12px 18px; border-radius: var(--radius-lg); max-width: 480px; font-size: 13px; } .toast.error { background: var(--error-bg); color: var(--error-text); } @media (max-width: 960px) { /* .app-shell.artifacts-collapsed is more specific than .app-shell, so it must be re-asserted here too, or a collapse state persisted from a wider window would override this single-column layout. */ .app-shell, .app-shell.artifacts-collapsed { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .history-sidebar { display: none; } .artifacts-panel { display: none; } }