/* ============================================================================ EKO Portal — Phase 34 design system ============================================================================ Token-driven. Dark theme default; light theme via prefers-color-scheme:light AND data-theme="light" override on . Everything in the SPA references these custom properties — no hardcoded colors or sizes. Spacing: 4px grid (xs=4, sm=8, md=12, lg=16, xl=24, 2xl=32, 3xl=48). Typography: Inter / system stack, 3 weights (400/500/600), 6 sizes. Radii: pill, sm, md, lg. Shadows: 4 elevation levels. Transitions: fast (120ms) / base (180ms) / slow (260ms) easings. ============================================================================ */ :root { /* ─── Dark theme — deep navy base, not pure black. ─── */ --c-bg: #0b1220; --c-bg-elevated: #121a2c; --c-bg-sunken: #07101e; --c-bg-hover: #1a2438; --c-bg-input: #0f1626; --c-border: #1f2b44; --c-border-strong: #2c3a55; --c-text: #e8edf5; --c-text-muted: #93a0b6; --c-text-subtle: #6e7a8f; --c-primary: #5b8def; --c-primary-hover: #7aa1f5; --c-primary-soft: rgba(91, 141, 239, 0.12); --c-primary-ring: rgba(91, 141, 239, 0.32); --c-success: #2bc48a; --c-success-bg: rgba(43, 196, 138, 0.14); --c-warn: #e0a93b; --c-warn-bg: rgba(224, 169, 59, 0.14); --c-deny: #f15a64; --c-deny-bg: rgba(241, 90, 100, 0.14); --c-info: #5cc4ff; --c-info-bg: rgba(92, 196, 255, 0.12); --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, monospace; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --radius-pill: 999px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.16); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.18); --shadow-focus: 0 0 0 3px var(--c-primary-ring); --tx-fast: 120ms cubic-bezier(.4, 0, .2, 1); --tx-base: 180ms cubic-bezier(.4, 0, .2, 1); --sidebar-width: 248px; --topbar-height: 60px; /* Legacy aliases referenced by older inline styles. */ --color-bg: var(--c-bg); --color-bg-elevated: var(--c-bg-elevated); --color-border: var(--c-border); --color-text: var(--c-text); --color-text-muted: var(--c-text-muted); --color-primary: var(--c-primary); --color-primary-hover: var(--c-primary-hover); --color-active: var(--c-success); --color-warn: var(--c-warn); --color-deny: var(--c-deny); } /* ─── Light theme — warm whites + light grays, not pure white. ─── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-bg: #f6f7fb; --c-bg-elevated: #ffffff; --c-bg-sunken: #eef0f6; --c-bg-hover: #f0f3fa; --c-bg-input: #ffffff; --c-border: #e1e5ec; --c-border-strong: #c9cfd9; --c-text: #1d2230; --c-text-muted: #5b6477; --c-text-subtle: #8a93a4; --c-primary: #2563eb; --c-primary-hover: #1d4ed8; --c-primary-soft: rgba(37, 99, 235, 0.10); --c-primary-ring: rgba(37, 99, 235, 0.28); --c-success: #16a672; --c-success-bg: rgba(22, 166, 114, 0.12); --c-warn: #b8730a; --c-warn-bg: rgba(184, 115, 10, 0.12); --c-deny: #d92d3b; --c-deny-bg: rgba(217, 45, 59, 0.10); --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 2px 6px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); } } [data-theme="light"] { --c-bg: #f6f7fb; --c-bg-elevated: #ffffff; --c-bg-sunken: #eef0f6; --c-bg-hover: #f0f3fa; --c-bg-input: #ffffff; --c-border: #e1e5ec; --c-border-strong: #c9cfd9; --c-text: #1d2230; --c-text-muted: #5b6477; --c-text-subtle: #8a93a4; --c-primary: #2563eb; --c-primary-hover: #1d4ed8; --c-primary-soft: rgba(37, 99, 235, 0.10); --c-primary-ring: rgba(37, 99, 235, 0.28); --c-success: #16a672; --c-success-bg: rgba(22, 166, 114, 0.12); --c-warn: #b8730a; --c-warn-bg: rgba(184, 115, 10, 0.12); --c-deny: #d92d3b; --c-deny-bg: rgba(217, 45, 59, 0.10); --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 2px 6px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); } * { box-sizing: border-box; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--text-base) / 1.55 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--c-primary); text-decoration: none; transition: color var(--tx-fast); } a:hover { color: var(--c-primary-hover); text-decoration: underline; } .hidden { display: none !important; } .text-muted { color: var(--c-text-muted); } .text-subtle { color: var(--c-text-subtle); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-md { font-size: var(--text-md); } .mono { font-family: var(--font-mono); font-size: var(--text-sm); } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .skip-link { position: absolute; left: -1000px; top: 0; } .skip-link:focus { left: var(--space-sm); top: var(--space-sm); background: var(--c-bg-elevated); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--c-border); } /* ─── Login overlay ───────────────────────────────────────────────────── */ #login-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 30% 20%, var(--c-primary-soft), transparent 40%), var(--c-bg); display: flex; align-items: center; justify-content: center; z-index: 100; } .login-box { width: 380px; padding: var(--space-2xl); background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); } .login-logo { font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: 0.08em; color: var(--c-primary); margin-bottom: var(--space-md); display: flex; align-items: center; gap: var(--space-sm); } .login-logo::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--c-primary), #8e6cff); } .login-title { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-xs); } .login-subtitle { color: var(--c-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-lg); } /* ─── Topbar + layout ─────────────────────────────────────────────────── */ #app { min-height: 100vh; } .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-xl); background: var(--c-bg-elevated); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-1); } .topbar-brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; } .topbar-brand::before { content: ""; display: inline-block; width: 22px; height: 22px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--c-primary), #8e6cff); } .topbar-meta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-sm); } #topbar-tenant { background: var(--c-primary-soft); color: var(--c-primary); padding: 4px var(--space-sm); border-radius: var(--radius-pill); font-weight: var(--weight-medium); } .layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: calc(100vh - var(--topbar-height)); } /* ─── Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { background: var(--c-bg); border-right: 1px solid var(--c-border); padding: var(--space-lg) var(--space-md); overflow-y: auto; } .sidebar-section { margin-bottom: var(--space-xl); } .sidebar-section-label { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.08em; color: var(--c-text-subtle); text-transform: uppercase; padding: 0 var(--space-md); margin-bottom: var(--space-sm); } .nav-item { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--tx-fast), color var(--tx-fast); user-select: none; } .nav-item:hover { background: var(--c-bg-hover); color: var(--c-text); } .nav-item.active { background: var(--c-primary-soft); color: var(--c-primary); } .nav-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ─── Main content ────────────────────────────────────────────────────── */ .main { padding: var(--space-2xl); max-width: 1280px; } .page-section-label { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.10em; color: var(--c-text-subtle); text-transform: uppercase; margin-bottom: var(--space-sm); } .page-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-sm); letter-spacing: -0.01em; } .page-subtitle { color: var(--c-text-muted); margin: 0 0 var(--space-xl); font-size: var(--text-md); } /* ─── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-xl); margin-bottom: var(--space-lg); } .card-title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-sm); } .card-subtitle { color: var(--c-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); } .module-card { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); transition: border-color var(--tx-fast), box-shadow var(--tx-fast); } .module-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-2); } .module-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--c-primary-soft); color: var(--c-primary); font-size: 18px; font-weight: var(--weight-bold); } .module-card-title { font-size: var(--text-md); font-weight: var(--weight-bold); margin: 0; } .module-card-desc { color: var(--c-text-muted); font-size: var(--text-sm); margin: 0; } .module-card-footer { margin-top: auto; padding-top: var(--space-sm); } /* ─── Buttons ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans); padding: 9px var(--space-md); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--tx-fast), border-color var(--tx-fast), color var(--tx-fast), box-shadow var(--tx-fast); user-select: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn-primary { background: var(--c-primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); } .btn-secondary { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--c-bg-hover); border-color: var(--c-text-muted); } .btn-ghost { background: transparent; color: var(--c-text-muted); } .btn-ghost:hover:not(:disabled) { background: var(--c-bg-hover); color: var(--c-text); } .btn-danger { background: var(--c-deny); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-block { width: 100%; } .btn-sm { padding: 6px var(--space-sm); font-size: var(--text-xs); } /* ─── Forms ───────────────────────────────────────────────────────────── */ .form-group, .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); } .form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--c-text); } .form-input, select.form-input, textarea.form-input { width: 100%; background: var(--c-bg-input); color: var(--c-text); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); padding: 9px var(--space-md); font: var(--text-sm) / 1.4 var(--font-sans); transition: border-color var(--tx-fast), box-shadow var(--tx-fast), background var(--tx-fast); } .form-input:hover { border-color: var(--c-text-muted); } .form-input:focus, select.form-input:focus, textarea.form-input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--shadow-focus); } .form-input:disabled { background: var(--c-bg-sunken); color: var(--c-text-muted); cursor: not-allowed; } .form-help { font-size: var(--text-xs); color: var(--c-text-muted); } .form-actions { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); } .toggle-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; font-size: var(--text-sm); color: var(--c-text); } /* ─── Tables ──────────────────────────────────────────────────────────── */ .table-wrapper { border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; background: var(--c-bg-elevated); } .data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .data-table thead th { background: var(--c-bg-sunken); color: var(--c-text-muted); text-transform: uppercase; font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.06em; text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--c-border); } .data-table tbody td { padding: var(--space-md); border-bottom: 1px solid var(--c-border); vertical-align: top; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody tr { transition: background var(--tx-fast); } .data-table tbody tr:hover { background: var(--c-bg-hover); } .empty-row { color: var(--c-text-muted); text-align: center; padding: var(--space-xl); } /* ─── Badges + status pills ───────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 3px var(--space-sm); border-radius: var(--radius-pill); background: var(--c-bg-hover); color: var(--c-text-muted); border: 1px solid var(--c-border); } .badge-success, .badge-active, .badge-allow { background: var(--c-success-bg); color: var(--c-success); border-color: transparent; } .badge-warn, .badge-conditional, .badge-escalate { background: var(--c-warn-bg); color: var(--c-warn); border-color: transparent; } .badge-deny, .badge-error { background: var(--c-deny-bg); color: var(--c-deny); border-color: transparent; } .badge-info { background: var(--c-info-bg); color: var(--c-info); border-color: transparent; } .badge-muted { background: var(--c-bg-hover); color: var(--c-text-muted); } .provider-pill { display: inline-block; padding: 2px var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--c-primary-soft); color: var(--c-primary); letter-spacing: 0.02em; } /* ─── Empty states ────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: var(--space-2xl); } .empty-icon { font-size: 38px; margin-bottom: var(--space-sm); opacity: 0.7; } .empty-title { font-weight: var(--weight-bold); font-size: var(--text-md); margin-bottom: 4px; } .empty-message { color: var(--c-text-muted); font-size: var(--text-sm); max-width: 420px; margin: 0 auto; } /* ─── Step indicator (Create Agent wizard) ────────────────────────────── */ .stepper { display: flex; align-items: stretch; gap: var(--space-sm); margin-bottom: var(--space-xl); padding: var(--space-md); background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow-x: auto; } .stepper-step { display: flex; align-items: center; gap: var(--space-sm); padding: 6px var(--space-md); font-size: var(--text-xs); color: var(--c-text-muted); white-space: nowrap; border-radius: var(--radius-pill); transition: background var(--tx-fast), color var(--tx-fast); } .stepper-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--c-bg-hover); color: var(--c-text-muted); font-weight: var(--weight-bold); font-size: 11px; } .stepper-step.is-current { background: var(--c-primary-soft); color: var(--c-primary); } .stepper-step.is-current .stepper-num { background: var(--c-primary); color: #fff; } .stepper-step.is-done { color: var(--c-success); } .stepper-step.is-done .stepper-num { background: var(--c-success-bg); color: var(--c-success); } /* ─── Tool tile (Create Agent capabilities) ───────────────────────────── */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); } .tool-tile { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-lg); transition: border-color var(--tx-fast), background var(--tx-fast), box-shadow var(--tx-fast); } .tool-tile:hover { border-color: var(--c-text-muted); } .tool-tile.is-on { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: var(--shadow-2); } .tool-tile-head { display: flex; align-items: center; gap: var(--space-sm); font-weight: var(--weight-bold); font-size: var(--text-sm); } .tool-tile-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--c-bg-hover); font-size: 16px; } .tool-tile.is-on .tool-tile-icon { background: var(--c-primary); color: #fff; } /* ─── Interaction panel (dashboard chat) ──────────────────────────────── */ #interaction-panel { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-2); } .interact-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); } .interact-title { display: flex; flex-direction: column; gap: 2px; } .interact-title .page-section-label { margin-bottom: 0; } .interact-title h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); } .mode-toggle { display: inline-flex; background: var(--c-bg-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 3px; gap: 2px; } .mode-toggle button { border: none; background: transparent; color: var(--c-text-muted); padding: 6px var(--space-md); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--tx-fast), color var(--tx-fast); display: inline-flex; align-items: center; gap: 4px; } .mode-toggle button:hover { color: var(--c-text); } .mode-toggle .mode-on-grounded { background: var(--c-success-bg); color: var(--c-success); font-weight: var(--weight-bold); } .mode-toggle .mode-on-direct { background: var(--c-warn-bg); color: var(--c-warn); font-weight: var(--weight-bold); } .trust-banner { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); margin: var(--space-md) 0; font-size: var(--text-sm); font-weight: var(--weight-medium); } .trust-banner-grounded { background: var(--c-success-bg); color: var(--c-success); border-left: 3px solid var(--c-success); } .trust-banner-direct { background: var(--c-warn-bg); color: var(--c-warn); border-left: 3px solid var(--c-warn); } .trust-banner-icon { font-size: 16px; } #interact-history { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) 0; } .interact-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; } .interact-msg-user { align-self: flex-end; align-items: flex-end; } .interact-msg-model { align-self: flex-start; align-items: flex-start; } /* Phase 47: system messages are EKO-emitted errors / notices. Centered so they read as a separator-style notice rather than a chat reply. */ .interact-msg-system { align-self: center; align-items: center; max-width: 90%; } .interact-meta { font-size: 11px; color: var(--c-text-subtle); letter-spacing: 0.02em; } .interact-bubble { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .interact-msg-user .interact-bubble { background: var(--c-primary); color: #fff; border-bottom-right-radius: var(--radius-sm); } .interact-msg-model .interact-bubble { background: var(--c-bg-sunken); color: var(--c-text); border: 1px solid var(--c-border); border-bottom-left-radius: var(--radius-sm); } /* Phase 101.2 — verdict-driven bubble background. Once the SSE verdict event arrives (or the non-streaming /interact response resolves), the wrapper carries .verdict- and the bubble itself flips color. The mode pill in the meta line keeps its existing label; only the bubble background changes per verdict. */ .interact-msg-model.verdict-verified .interact-bubble { background: var(--c-verdict-verified-bg); border-color: var(--c-verdict-verified-border); } .interact-msg-model.verdict-organizationally-verified .interact-bubble { background: var(--c-verdict-organizationally-verified-bg); border-color: var(--c-verdict-organizationally-verified-border); } .interact-msg-model.verdict-partially-verified .interact-bubble { background: var(--c-verdict-partially-verified-bg); border-color: var(--c-verdict-partially-verified-border); } .interact-msg-model.verdict-unverified .interact-bubble { background: var(--c-verdict-unverified-bg); border-color: var(--c-verdict-unverified-border); } .interact-msg-model.verdict-abstain .interact-bubble { background: var(--c-verdict-abstain-bg); border-color: var(--c-verdict-abstain-border); } .interact-msg-system .interact-bubble { /* Amber-tinted neutral notice. Distinct from both the primary user bubble and the sunken-grey model bubble so a tenant cannot read an error as a model reply. */ background: rgba(217, 119, 6, 0.08); color: var(--c-text); border: 1px solid rgba(217, 119, 6, 0.45); border-radius: var(--radius-md); font-size: var(--text-sm); text-align: center; } .interact-msg-system .interact-meta { color: rgba(217, 119, 6, 0.95); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Phase 76 / Phase 4 — trust-indicator UI ─────────────────────── Inline annotations strip + summary bar + side detail panel. */ .trust-summary-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; padding: 4px 0; font-size: var(--text-xs); color: var(--c-text-muted); } .trust-pill svg { width: 12px; height: 12px; margin-right: 2px; vertical-align: -2px; } .trust-pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .trust-pill-verified { color: var(--c-success); } .trust-pill-org { color: var(--c-primary); } .trust-pill-conflicted { color: var(--c-deny); } .trust-pill-unverified { color: var(--c-warn); } .trust-chip-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-width: 100%; } .trust-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-bg-elevated); color: var(--c-text); font-size: var(--text-xs); cursor: pointer; transition: background var(--tx-fast), border-color var(--tx-fast); } .trust-chip:hover { background: var(--c-bg-hover); } .trust-chip svg { width: 14px; height: 14px; flex-shrink: 0; } .trust-chip-text { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trust-badge-verified { border-color: rgba(43, 196, 138, 0.45); color: var(--c-success); } .trust-badge-verified:hover { background: var(--c-success-bg); } .trust-badge-org { border-color: rgba(91, 141, 239, 0.45); color: var(--c-primary); } .trust-badge-org:hover { background: var(--c-primary-soft); } .trust-badge-conflicted { border-color: rgba(241, 90, 100, 0.45); color: var(--c-deny); } .trust-badge-conflicted:hover { background: var(--c-deny-bg); } .trust-badge-unverified { border-color: rgba(224, 169, 59, 0.45); color: var(--c-warn); } .trust-badge-unverified:hover { background: var(--c-warn-bg); } .trust-panel-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 998; } .trust-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--c-bg-elevated); border-left: 1px solid var(--c-border); box-shadow: var(--shadow-3); display: flex; flex-direction: column; z-index: 999; font: var(--text-sm) / 1.55 var(--font-sans); color: var(--c-text); } .trust-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--space-lg); border-bottom: 1px solid var(--c-border); } .trust-panel-title { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-bold); font-size: var(--text-md); } .trust-panel-title svg { width: 18px; height: 18px; } .trust-panel-close { appearance: none; background: transparent; border: none; color: var(--c-text-muted); cursor: pointer; font-size: 22px; line-height: 1; padding: 4px 8px; } .trust-panel-close:hover { color: var(--c-text); } .trust-panel-body { flex: 1; overflow-y: auto; padding: var(--space-lg); } .trust-detail-row { margin-bottom: 6px; } .trust-detail-claim { background: var(--c-bg-input); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: var(--space-md); font-size: var(--text-sm); } .trust-detail-sources { list-style: disc inside; padding-left: var(--space-sm); margin: 4px 0 var(--space-md); } .trust-detail-sources li { margin-bottom: 4px; font-size: var(--text-xs); } /* ─── Phase 77 / Phase 5 — Knowledge Base UI ─────────────────────── */ .kb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: var(--space-lg); } .kb-tab-btn { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--c-text-muted); cursor: pointer; font: var(--weight-medium) var(--text-sm) / 1 var(--font-sans); padding: 10px var(--space-md); transition: color var(--tx-fast), border-color var(--tx-fast); } .kb-tab-btn:hover { color: var(--c-text); } .kb-tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); } .kb-tab-body { display: flex; flex-direction: column; gap: var(--space-lg); } .kb-stat-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding: var(--space-md) 0; } .kb-stat { display: flex; flex-direction: column; gap: 2px; min-width: 140px; } .kb-stat-label { color: var(--c-text-muted); font-size: var(--text-xs); } /* Phase 52 — thinking indicator (typing dots) shown while a streamed response is in flight before the first token arrives. */ .interact-typing { display: inline-flex; gap: 4px; padding: 4px 0; } .interact-typing > span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-text-subtle); opacity: 0.4; animation: interact-typing-pulse 1.2s infinite ease-in-out both; } .interact-typing > span:nth-child(2) { animation-delay: 0.18s; } .interact-typing > span:nth-child(3) { animation-delay: 0.36s; } @keyframes interact-typing-pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1.05); } } /* ─── Phase 51 — conversation header + recent popover ────────────────── */ .conv-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--c-border); margin-bottom: var(--space-sm); } .conv-current-title { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .conv-actions { display: flex; gap: var(--space-sm); } .conv-recent-popover { position: absolute; top: 100%; right: 0; z-index: 22; margin-top: 4px; width: 320px; max-width: 90vw; max-height: 340px; overflow-y: auto; background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2, 0 8px 24px rgba(0, 0, 0, 0.25)); padding: 4px; } .conv-recent-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--c-text); } .conv-recent-item:hover { background: var(--c-bg-hover); } .conv-recent-title { font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-recent-meta { font-size: 11px; color: var(--c-text-subtle); margin-top: 2px; } /* ─── Misc ────────────────────────────────────────────────────────────── */ .state-container { display: flex; align-items: center; justify-content: center; padding: var(--space-3xl); color: var(--c-text-muted); } .spinner { width: 32px; height: 32px; border: 3px solid var(--c-border); border-top-color: var(--c-primary); border-radius: 50%; animation: spin 1s linear infinite; } .spinner-sm { width: 18px; height: 18px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } #login-error { color: var(--c-deny); background: var(--c-deny-bg); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); min-height: 0; margin: var(--space-sm) 0 var(--space-md); } #login-error:empty { display: none; } /* ─── Mobile navigation primitives ──────────────────────────────────────── Phase 50 — hamburger button + sliding sidebar + backdrop. The button stays in the topbar on every viewport; CSS hides it ≥ 769px so it only surfaces when the sidebar collapses. */ .nav-toggle { display: none; /* shown < 769px via media query below */ background: transparent; border: 1px solid var(--c-border); color: var(--c-text); width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 20px; line-height: 1; cursor: pointer; margin-right: var(--space-sm); } .nav-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } .sidebar-backdrop { display: none; /* shown only when sidebar.open is set */ position: fixed; inset: var(--topbar-height) 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 18; transition: opacity var(--tx-fast); opacity: 0; } .sidebar-backdrop.visible { display: block; opacity: 1; } /* ─── Mobile media query ───────────────────────────────────────────────── */ @media (max-width: 768px) { /* Layout collapses to a single column; the sidebar becomes an overlay that slides in from the left when .open is set on it. */ .layout { grid-template-columns: 1fr; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .sidebar { position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: 80vw; max-width: 320px; transform: translateX(-100%); transition: transform 200ms ease; z-index: 19; box-shadow: var(--shadow-3, 0 16px 48px rgba(0, 0, 0, 0.45)); } .sidebar.open { transform: translateX(0); } .main { padding: var(--space-lg) var(--space-md); } /* Topbar: hide the email pill (the tenant pill stays — it's the identity reference users actually need on mobile). The brand text shrinks one tier so all three columns fit on a 360px viewport. */ .topbar { padding: 0 var(--space-md); gap: var(--space-sm); } .topbar-brand { font-size: var(--text-sm); } .topbar-meta { gap: var(--space-sm); } #topbar-user { display: none; } #topbar-tenant { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cards / forms / inputs — bigger tap targets for touch keyboards. */ .card { padding: var(--space-md); } .form-input, .btn { min-height: 44px; } .btn-sm { min-height: 36px; } .form-row { display: flex; flex-direction: column; gap: 4px; align-items: stretch; } .form-row .form-input, .form-row .form-label { width: 100%; } .form-actions { flex-wrap: wrap; gap: var(--space-sm); } /* Tables: many existing tables are inside .table-wrapper which we keep horizontally scrollable so the data isn't lost on narrow screens (preferable to forcing a card-style reflow that loses column relationships). */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { min-width: 560px; } /* Interaction panel: stack the head; expand the chat full-width. */ .interact-head { flex-direction: column; align-items: stretch; gap: var(--space-sm); } .mode-toggle { width: 100%; } .mode-toggle button { flex: 1; } #interaction-panel { padding: var(--space-md); } #interact-history { max-height: 60vh; } .interact-msg { max-width: 95%; } /* Create Agent wizard: step indicator becomes horizontally scrollable so it doesn't crowd off-screen on narrow viewports. */ .step-indicator { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .step-indicator .step { flex: 0 0 auto; } /* Tool grid in the Capabilities step: two columns max on phones. */ .tool-grid { grid-template-columns: 1fr; } /* Page section labels — keep them visible but compact. */ .page-title { font-size: var(--text-xl); } .page-subtitle { font-size: var(--text-sm); } /* Module summary cards on dashboard reflow to single column. */ .module-grid { grid-template-columns: 1fr; } /* Dashboard chat bubble metrics scaled for narrow screens. */ .badge { white-space: nowrap; } } /* Tablet refinement — keep two-column module grids on iPad-class screens. */ @media (min-width: 769px) and (max-width: 1024px) { .module-grid { grid-template-columns: repeat(2, 1fr); } } /* Small-phone refinement — drop the brand text to icon-only when there's genuinely no horizontal room. */ @media (max-width: 380px) { .topbar-brand { font-size: 0; } .topbar-brand::before { margin-right: 0; } } /* ─── Phase 54 — analytics metric cards ───────────────────────────────── */ .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .metric-card { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: 4px; } .metric-card-value { font-size: 32px; font-weight: var(--weight-bold); line-height: 1.1; color: var(--c-text); font-variant-numeric: tabular-nums; } .metric-card-label { font-size: var(--text-sm); color: var(--c-text-muted); font-weight: var(--weight-medium); } .metric-card-sub { font-size: 11px; color: var(--c-text-subtle); letter-spacing: 0.02em; margin-top: 2px; } @media (max-width: 1024px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .metric-grid { grid-template-columns: 1fr; } .metric-card-value { font-size: 28px; } } /* ─── Phase 54 — markdown rendering inside chat bubbles ──────────────── */ .interact-bubble.md p { margin: 0 0 8px 0; } .interact-bubble.md p:last-child { margin-bottom: 0; } .interact-bubble.md h1, .interact-bubble.md h2, .interact-bubble.md h3 { margin: 12px 0 6px 0; line-height: 1.3; } .interact-bubble.md h1 { font-size: 1.25em; font-weight: var(--weight-bold); } .interact-bubble.md h2 { font-size: 1.15em; font-weight: var(--weight-bold); } .interact-bubble.md h3 { font-size: 1.05em; font-weight: var(--weight-medium); } .interact-bubble.md ul, .interact-bubble.md ol { margin: 6px 0 8px 22px; padding: 0; } .interact-bubble.md li { margin: 2px 0; } .interact-bubble.md code { background: rgba(127, 127, 127, 0.18); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 0.92em; } .interact-bubble.md pre { background: rgba(127, 127, 127, 0.12); padding: 8px 10px; border-radius: var(--radius-sm); overflow-x: auto; margin: 6px 0; font-size: 0.88em; } .interact-bubble.md pre code { background: transparent; padding: 0; } .interact-bubble.md strong { font-weight: var(--weight-bold); } .interact-bubble.md em { font-style: italic; } .interact-bubble.md a { color: var(--c-primary); text-decoration: underline; } .interact-bubble.md blockquote { border-left: 3px solid var(--c-border); padding: 2px 10px; color: var(--c-text-muted); margin: 6px 0; } /* ─── Phase 54 — Conversations tab list table ────────────────────────── */ .conversations-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); align-items: center; } .conversations-toolbar .form-input { max-width: 280px; } .conversations-row { cursor: pointer; } .conversations-row:hover { background: var(--c-bg-hover); } .conversations-title { font-weight: var(--weight-medium); color: var(--c-text); max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Phase 54 — copy/print toolbar + toast ──────────────────────────── */ .conv-action-row { display: flex; gap: var(--space-sm); align-items: center; margin-left: auto; } .copy-toast { position: fixed; right: 18px; bottom: 18px; background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--text-sm); box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,0.25)); z-index: 30; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .copy-toast.visible { opacity: 1; } /* ─── Phase 54 — print stylesheet ────────────────────────────────────── */ @media print { /* Hide every interactive surface — only the printable conversation content + EKO header + footer should render to paper. */ .topbar, .sidebar, .sidebar-backdrop, .nav-toggle, .conv-actions, .conv-recent-popover, .form-actions, .interact-head, .mode-toggle, .form-row, #interact-input, .conv-action-row, .conversations-toolbar, button, .btn { display: none !important; } body, .layout, .main, #app, #main-content { background: #fff !important; color: #000 !important; display: block !important; grid-template-columns: none !important; padding: 0 !important; margin: 0 !important; } #print-root { display: block !important; padding: 24px; max-width: 7.5in; margin: 0 auto; color: #000; background: #fff; } .print-header { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 16px; } .print-header-brand { font-weight: 700; font-size: 18px; letter-spacing: 0.04em; } .print-header-meta { color: #444; font-size: 12px; margin-top: 4px; } .print-msg { margin: 10px 0; page-break-inside: avoid; } .print-msg-meta { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .print-msg-content { font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .print-footer { margin-top: 24px; padding-top: 8px; border-top: 1px solid #999; font-size: 10px; color: #444; /* Repeat at bottom of every printed page. */ position: running(footer); } @page { margin: 0.75in 0.75in 1in 0.75in; @bottom-center { content: element(footer); } } } /* ─── Phase 61 — Mode distinction (governed vs direct) ───────────────── */ /* Mode-specific color tokens. Grounded uses a deep shield blue; direct uses warning amber. Defined here rather than in :root so the rest of the SPA's success/warn colors are unaffected. */ :root { --c-mode-grounded: #1e63d4; --c-mode-grounded-bg: rgba(30, 99, 212, 0.10); --c-mode-grounded-border: rgba(30, 99, 212, 0.45); --c-mode-direct: #d97706; --c-mode-direct-bg: rgba(217, 119, 6, 0.10); --c-mode-direct-border: rgba(217, 119, 6, 0.55); /* Phase 101.2 — verdict palette (four-state model). Drives the bubble background AND the optional verdict pill. Verified = green; Organizationally verified = teal (Phase 101.3); Partially verified = blue; Unverified = orange; Abstain = red. The bg variants are background tints; the border variants are stronger borders. */ --c-verdict-verified: #16a34a; --c-verdict-verified-bg: rgba(22, 163, 74, 0.12); --c-verdict-verified-border: rgba(22, 163, 74, 0.55); --c-verdict-organizationally-verified: #0d9488; --c-verdict-organizationally-verified-bg: rgba(13, 148, 136, 0.12); --c-verdict-organizationally-verified-border: rgba(13, 148, 136, 0.55); --c-verdict-partially-verified: #1e63d4; --c-verdict-partially-verified-bg: rgba(30, 99, 212, 0.12); --c-verdict-partially-verified-border:rgba(30, 99, 212, 0.55); --c-verdict-unverified: #d97706; --c-verdict-unverified-bg: rgba(217, 119, 6, 0.14); --c-verdict-unverified-border: rgba(217, 119, 6, 0.60); --c-verdict-abstain: #b91c1c; --c-verdict-abstain-bg: rgba(185, 28, 28, 0.10); --c-verdict-abstain-border: rgba(185, 28, 28, 0.50); } /* Phase 101.1 — verdict pill rendered ABOVE the chat bubble so the user sees the trust posture before any body text. The pill arrives on the SSE verdict event, which fires before any token chunks. */ .verdict-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 10px; margin-bottom: 6px; border-radius: 12px; font-size: var(--text-sm); border: 1px solid transparent; letter-spacing: 0.01em; } .verdict-pill strong { font-weight: 600; } .verdict-pill-detail { font-weight: 400; opacity: 0.85; } .verdict-pill-verified { background: var(--c-verdict-verified-bg); color: var(--c-verdict-verified); border-color: var(--c-verdict-verified-border); } .verdict-pill-partially-verified { background: var(--c-verdict-partially-verified-bg); color: var(--c-verdict-partially-verified); border-color: var(--c-verdict-partially-verified-border); } .verdict-pill-unverified { background: var(--c-verdict-unverified-bg); color: var(--c-verdict-unverified); border-color: var(--c-verdict-unverified-border); } .verdict-pill-abstain { background: var(--c-verdict-abstain-bg); color: var(--c-verdict-abstain); border-color: var(--c-verdict-abstain-border); } /* Phase 101.2 — "View sources" button at the bottom of model bubbles. When the response carries a non-empty sources_payload (resolved claims + their supporting sources), this button appears as a small chip below the bubble body. Clicking expands the .interact-sources-detail block. */ .interact-sources-toggle { margin-top: 8px; padding: 4px 10px; font-size: var(--text-xs); background: transparent; color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; align-self: flex-start; } .interact-sources-toggle:hover { background: var(--c-bg-sunken); color: var(--c-text); } .interact-sources-detail { margin-top: 6px; padding: 8px 10px; background: var(--c-bg-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--c-text); line-height: 1.5; } .interact-sources-detail ul { list-style: none; margin: 0; padding: 0; } .interact-sources-detail li { padding: 2px 0; } .interact-sources-detail .src-claim-label { font-weight: 600; margin-top: 4px; } .interact-sources-detail .src-citation { margin-left: 14px; color: var(--c-text-muted); } /* Bigger, more prominent mode toggle. Each pill carries the icon + the mode label so a glance reveals current state without reading the trust banner below. */ .mode-toggle.mode-toggle-lg { padding: 4px; gap: 4px; border-width: 2px; } .mode-toggle.mode-toggle-lg button { padding: 8px 14px; font-size: var(--text-sm); letter-spacing: 0.02em; min-width: 120px; justify-content: center; } .mode-toggle.mode-toggle-lg .mode-on-grounded { background: var(--c-mode-grounded); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .mode-toggle.mode-toggle-lg .mode-on-direct { background: var(--c-mode-direct); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } /* Per-message coding. .mode-grounded / .mode-direct apply to the .interact-msg wrapper, so we hit the bubble + meta line together. */ .interact-msg.mode-grounded > .interact-bubble { border-left: 4px solid var(--c-mode-grounded); background: var(--c-mode-grounded-bg); } .interact-msg.mode-direct > .interact-bubble { border-left: 4px solid var(--c-mode-direct); background: var(--c-mode-direct-bg); } .interact-msg.mode-grounded > .interact-meta::before, .interact-msg.mode-direct > .interact-meta::before { content: attr(data-mode-label) " · "; font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; margin-right: 2px; } .interact-msg.mode-grounded > .interact-meta::before { color: var(--c-mode-grounded); } .interact-msg.mode-direct > .interact-meta::before { color: var(--c-mode-direct); } /* Mode-switch divider. Inserted into the chat history at the point of the switch so the user can see WHEN governance changed and WHAT it means for subsequent responses. */ .interact-divider { align-self: stretch; margin: var(--space-sm) 0; padding: 8px 12px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--weight-medium); display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-border); } .interact-divider-grounded { background: var(--c-mode-grounded-bg); border-color: var(--c-mode-grounded-border); color: var(--c-mode-grounded); } .interact-divider-direct { background: var(--c-mode-direct-bg); border-color: var(--c-mode-direct-border); color: var(--c-mode-direct); } .interact-divider-icon { font-size: 14px; } /* Pulse the trust banner when the user newly enters direct mode so the warning cannot be missed. The animation runs once for ~1.5s. */ @keyframes ekoPulseWarning { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.0); transform: scale(1); } 20% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.30); transform: scale(1.01); } 60% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.0); transform: scale(1); } } .trust-banner-direct.pulse-once { animation: ekoPulseWarning 1.5s ease-out 1; } /* Conversations tab — compact mode badges per-row. */ .conv-mode-badges { display: inline-flex; gap: 4px; align-items: center; } .conv-mode-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 10px; font-weight: var(--weight-bold); letter-spacing: 0.04em; border-radius: var(--radius-pill); border: 1px solid transparent; } .conv-mode-badge-grounded { background: var(--c-mode-grounded-bg); color: var(--c-mode-grounded); border-color: var(--c-mode-grounded-border); } .conv-mode-badge-direct { background: var(--c-mode-direct-bg); color: var(--c-mode-direct); border-color: var(--c-mode-direct-border); } /* ─── Phase 62 — conversation_ref display ───────────────────────────── */ .conv-ref { display: inline-block; padding: 1px 6px; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.04em; background: var(--c-bg-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--tx-fast); } .conv-ref:hover { background: var(--c-mode-grounded-bg); border-color: var(--c-mode-grounded-border); } .conv-ref-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 0.04em; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg-sunken); color: var(--c-text); cursor: pointer; margin-left: 8px; } .conv-ref-badge:hover { background: var(--c-mode-grounded-bg); border-color: var(--c-mode-grounded-border); color: var(--c-mode-grounded); } .conv-ref-icon { font-size: 12px; } /* ─── Phase 64 — Dashboard redesign (governed-AI ops center) ────────── */ /* Row 1 — Tenant Status Strip. Slightly elevated card surface so it reads as a status board, distinct from the rest of the page flow. */ .status-strip { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin: var(--space-md) 0 var(--space-lg) 0; box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04)); } .status-strip-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-sm); } .status-strip-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--weight-bold); color: var(--c-text-subtle); } .status-strip-meta { font-size: 11px; color: var(--c-text-subtle); letter-spacing: 0.02em; } .status-strip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-sm); } .status-stat-card { background: var(--c-bg-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 2px; min-height: 80px; } .status-stat-card .metric-card-value { font-size: 26px; font-weight: var(--weight-bold); line-height: 1.05; color: var(--c-text); font-variant-numeric: tabular-nums; } .status-stat-card .metric-card-value.tone-warn { color: var(--c-mode-direct, #d97706); } .status-stat-card .metric-card-label { font-size: 12px; font-weight: var(--weight-medium); color: var(--c-text-muted); } .status-stat-card .metric-card-sub { font-size: 10px; color: var(--c-text-subtle); letter-spacing: 0.02em; } /* Stack to 3 cols on tablet, 2 on phone. */ @media (max-width: 1100px) { .status-strip-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .status-strip-grid { grid-template-columns: repeat(2, 1fr); } } /* Row 2 — compressed interaction panel. The textarea was 4-5 lines tall by default in some renders; explicitly cap the min-height so the empty state doesn't dominate the dashboard. The empty history container also collapses to a small height when no messages exist. */ .interact-input-compact { min-height: 70px; max-height: 220px; resize: vertical; } #interact-history.empty { min-height: 0; max-height: none; padding: 0; } .interact-empty-state { background: var(--c-bg-sunken); border: 1px dashed var(--c-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin: var(--space-sm) 0; } .interact-empty-title { margin: 0 0 4px 0; font-weight: var(--weight-bold); color: var(--c-text); } .interact-empty-message { margin: 0 0 var(--space-md) 0; color: var(--c-text-muted); font-size: var(--text-sm); line-height: 1.45; } /* Suggested prompt chips. Clickable; populate the textarea. */ .suggested-prompts-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-bold); color: var(--c-text-subtle); margin-bottom: 6px; } .suggested-prompts-grid { display: flex; flex-wrap: wrap; gap: 6px; } .suggested-prompt { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: var(--radius-pill, 999px); border: 1px solid var(--c-mode-grounded-border, var(--c-border)); background: var(--c-mode-grounded-bg, transparent); color: var(--c-mode-grounded, var(--c-text)); font-size: 12px; font-weight: var(--weight-medium); cursor: pointer; transition: background var(--tx-fast), color var(--tx-fast); text-align: left; max-width: 100%; } .suggested-prompt:hover { background: var(--c-mode-grounded, var(--c-primary)); color: #fff; } .suggested-prompt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } /* Row 3 — Action Queue. Three side-by-side action cards. */ .action-queue { margin-bottom: var(--space-lg); } .action-queue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } @media (max-width: 1024px) { .action-queue-grid { grid-template-columns: 1fr; } } .action-card { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); min-height: 180px; } .action-card-pending { border-left: 3px solid var(--c-conditional, #f59e0b); } .action-card-escalate { border-left: 3px solid var(--c-mode-direct, #d97706); } .action-card-recent { border-left: 3px solid var(--c-mode-grounded, #1e63d4); } .action-card-head { display: flex; align-items: baseline; justify-content: space-between; } .action-card-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--c-text); } .action-count { font-size: 18px; font-weight: var(--weight-bold); color: var(--c-text-subtle); font-variant-numeric: tabular-nums; } .action-card-empty { margin: 0; font-size: var(--text-sm); color: var(--c-text-muted); font-style: italic; } .action-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .action-list-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--c-text); } .action-list-item code { font-size: 11px; padding: 1px 5px; background: var(--c-bg-sunken); border-radius: var(--radius-sm); } .action-list-meta { margin-left: auto; font-size: 11px; color: var(--c-text-subtle); } .action-list-more { font-size: 11px; color: var(--c-text-subtle); font-style: italic; } .action-card-cta { align-self: flex-start; margin-top: auto; } /* Row 4 — Module Navigation (demoted). */ .module-nav { border-top: 1px solid var(--c-border); padding-top: var(--space-md); margin-top: var(--space-md); } .module-nav-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--weight-bold); color: var(--c-text-subtle); margin-bottom: var(--space-sm); } /* Decision badge tints. ABSTAIN reuses the warning palette so the visual hierarchy reads escalate < abstain < deny in severity. */ .badge-abstain { background: rgba(245, 158, 11, 0.10); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); } /* ─── Phase 69 — Inline SVG icon system ────────────────────────────────── * * Every icon in the portal is rendered through the `_icon(name)` helper * in portal.js as an inline