/* ========================================================================== Forge UI — Design System -------------------------------------------------------------------------- Single source of truth for the look & feel. Everything is driven by the design tokens in the :root block below — to re-theme the app, change the tokens, not the rules. Dark mode is automatic (follows the OS) and can be forced with `data-theme="light|dark"` on . Sections: 1. Design tokens (light) 6. Chat surface (Phase 34/35) 2. Design tokens (dark) 7. Agent card · trust · trace 3. Base / reset 8. Rooms surface (Phase 38) 4. Primitives (button, field) 9. Auth / login 5. Layout + sidebar 10. Framework error UI ========================================================================== */ /* 1. Design tokens — light (default) ------------------------------------- */ :root { color-scheme: light; /* Surfaces (back-to-front) */ --bg: #f7f6f3; --surface-sunken: #efeee9; --surface: #ffffff; --surface-hover: #f3f2ec; --surface-active: #ecebe4; /* Lines */ --border: #e6e4dd; --border-strong: #d5d2c8; /* Text (high-to-low emphasis) */ --text: #1c1b19; --text-muted: #6b6862; --text-subtle: #9a968d; /* Brand accent — "forge ember" */ --accent: #c2410c; --accent-hover: #9a3412; --accent-soft: #fbeee6; --accent-contrast: #ffffff; /* Ink — the primary solid button/control colour */ --ink: #1c1b19; --ink-hover: #35322c; --ink-contrast: #ffffff; /* Semantic — verified / unverified / retry */ --success: #2e7d52; --success-bg: #e8f5ee; --success-border: #4caf82; --danger: #b53c3c; --danger-bg: #fdeaea; --danger-border: #e05252; --warning: #92600a; --warning-bg: #fef8ec; /* Radii */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(20, 18, 15, 0.05); --shadow: 0 1px 3px rgba(20, 18, 15, 0.07), 0 4px 12px rgba(20, 18, 15, 0.05); --shadow-lg: 0 8px 30px rgba(20, 18, 15, 0.12); /* Type */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Motion */ --transition: 130ms ease; /* Focus ring */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* 2. Design tokens — dark ------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1a1917; --surface-sunken: #201f1c; --surface: #262523; --surface-hover: #2f2d2a; --surface-active: #37342f; --border: #35332e; --border-strong: #47443d; --text: #ece9e3; --text-muted: #a8a49a; --text-subtle: #77736a; --accent: #f97316; --accent-hover: #fb8c3c; --accent-soft: #3a2417; --accent-contrast:#1a1917; --ink: #ece9e3; --ink-hover: #d6d2c9; --ink-contrast: #1a1917; --success: #5cc98d; --success-bg: #16301f; --success-border: #2e7d52; --danger: #f28b82; --danger-bg: #3a1d1d; --danger-border: #b53c3c; --warning: #e0b64e; --warning-bg: #362b13; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } } /* Explicit override (for a future in-app theme toggle) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #1a1917; --surface-sunken: #201f1c; --surface: #262523; --surface-hover: #2f2d2a; --surface-active: #37342f; --border: #35332e; --border-strong: #47443d; --text: #ece9e3; --text-muted: #a8a49a; --text-subtle: #77736a; --accent: #f97316; --accent-hover: #fb8c3c; --accent-soft: #3a2417; --accent-contrast:#1a1917; --ink: #ece9e3; --ink-hover: #d6d2c9; --ink-contrast: #1a1917; --success: #5cc98d; --success-bg: #16301f; --success-border: #2e7d52; --danger: #f28b82; --danger-bg: #3a1d1d; --danger-border: #b53c3c; --warning: #e0b64e; --warning-bg: #362b13; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } /* 3. Base / reset -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } h1, h2, h3 { font-weight: 600; line-height: 1.3; color: var(--text); } h2 { font-size: 20px; } ::selection { background: var(--accent-soft); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Themed scrollbars (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); } ::-webkit-scrollbar-track { background: transparent; } /* 4. Primitives — buttons & fields --------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--transition), border-color var(--transition), color var(--transition); } .btn:hover { background: var(--surface-hover); text-decoration: none; } .btn:disabled { opacity: 0.55; cursor: default; } .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--ink-contrast); } .btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--ink-contrast); } .btn-primary:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--surface); } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); } /* Quiet text button — used for inline actions like "show thinking", "sign out" */ .btn-link { background: none; border: none; padding: 0; height: auto; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: color var(--transition); } .btn-link:hover { color: var(--accent); text-decoration: none; } .field { height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 15px; transition: border-color var(--transition), box-shadow var(--transition); } .field::placeholder { color: var(--text-subtle); } .field:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } /* 5. Layout + sidebar ---------------------------------------------------- */ .app-shell { display: flex; height: 100vh; } .app-main { flex: 1; min-width: 0; } /* Simple centred page (rooms list, login) */ .page { padding: var(--space-6); max-width: 720px; margin: 0 auto; width: 100%; } .page-narrow { max-width: 480px; } .page-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); } .session-nav { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; } .session-nav-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .session-nav-title { font-size: 12px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.06em; } .session-new { width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: none; cursor: pointer; font-size: 16px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; line-height: 1; transition: background var(--transition), color var(--transition); } .session-new:hover { background: var(--surface-hover); color: var(--text); } .session-list { flex: 1; overflow-y: auto; padding: var(--space-2) 0; } .session-item { padding: var(--space-2) var(--space-4); cursor: pointer; transition: background var(--transition); } .session-item:hover { background: var(--surface-hover); } .session-item.active { background: var(--surface-active); box-shadow: inset 3px 0 0 var(--accent); } .session-item-top { display: flex; align-items: center; gap: var(--space-2); } .session-trust { flex-shrink: 0; font-size: 13px; } .st-pass { color: var(--success); } .st-fail { color: var(--danger); } .st-none { color: var(--text-subtle); } .session-title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-meta { font-size: 11px; color: var(--text-subtle); margin-top: 2px; padding-left: 21px; } .session-empty { font-size: 12px; color: var(--text-subtle); padding: var(--space-4); } /* 6. Chat surface (Phase 34/35) ------------------------------------------ */ .chat-shell { display: flex; flex-direction: column; height: 100vh; } .chat-topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface); } .chat-title { font-size: 15px; font-weight: 600; } .chat-meta { font-size: 12px; color: var(--text-muted); margin-left: auto; } .mission-picker { font-size: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 9px; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color var(--transition); } .mission-picker:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } .mission-label { font-size: 11px; color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; white-space: nowrap; } .chat-messages { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .msg-user { align-self: flex-end; background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: 14px; max-width: 70%; color: var(--text); } .msg-agent { align-self: flex-start; width: 100%; } .chat-input-row { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); } .chat-input { flex: 1; height: 38px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .chat-input::placeholder { color: var(--text-subtle); } .chat-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); } .chat-send { height: 38px; padding: 0 var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--ink-contrast); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition); } .chat-send:hover:not(:disabled) { background: var(--ink-hover); } .chat-send:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--surface); cursor: default; } /* 7. Agent card · trust · trace ------------------------------------------ */ .agent-card { border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); } .card-verified { border-color: var(--success-border); } .card-unverified { border-color: var(--danger-border); } .card-running { border-color: var(--border); } .agent-card-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .agent-answer { padding: var(--space-3) var(--space-4); font-size: 15px; line-height: 1.65; color: var(--text); } .trust-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); } .verified { background: var(--success-bg); color: var(--success); } .unverified { background: var(--danger-bg); color: var(--danger); } .trust-icon { font-size: 12px; } .show-thinking { font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; transition: color var(--transition); } .show-thinking:hover { color: var(--accent); } .thinking-pulse { font-size: 13px; color: var(--text-muted); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .trace-panel { border-top: 1px solid var(--border); background: var(--surface-sunken); } .trace-row { display: flex; align-items: baseline; gap: var(--space-3); padding: 7px var(--space-4); border-bottom: 1px solid var(--border); font-size: 12px; } .trace-row:last-child { border-bottom: none; } .trace-expert { font-weight: 600; color: var(--text-muted); min-width: 100px; flex-shrink: 0; } .trace-text { color: var(--text-subtle); flex: 1; } .trace-status { font-size: 11px; padding: 1px 7px; border-radius: var(--radius-sm); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; } .trace-pass .trace-status { background: var(--success-bg); color: var(--success); } .trace-fail .trace-status { background: var(--danger-bg); color: var(--danger); } .trace-retry { padding: var(--space-2) var(--space-4); font-size: 12px; color: var(--warning); background: var(--warning-bg); border-bottom: 1px solid var(--border); } /* Markdown rendered inside an agent answer */ .agent-answer table { border-collapse: collapse; width: 100%; margin-top: var(--space-2); font-size: 13px; } .agent-answer th { background: var(--surface-sunken); text-align: left; padding: 6px 10px; border: 1px solid var(--border); font-weight: 600; } .agent-answer td { padding: 6px 10px; border: 1px solid var(--border); } .agent-answer h2 { font-size: 15px; font-weight: 600; margin: var(--space-3) 0 var(--space-2); } .agent-answer p { margin-bottom: var(--space-2); } .agent-answer p:last-child { margin-bottom: 0; } .agent-answer code { background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; } /* 8. Rooms surface (Phase 38) -------------------------------------------- */ .room { display: flex; flex-direction: column; height: 100vh; max-width: 940px; margin: 0 auto; width: 100%; } .room-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface); } .room-back { font-size: 13px; color: var(--text-muted); } .room-back:hover { color: var(--accent); } .room-name { font-size: 17px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .room-members { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-you { margin-left: auto; font-size: 12px; color: var(--text-subtle); flex-shrink: 0; white-space: nowrap; } .room-badge { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: var(--radius-sm); } .room-invite { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: 13px; } .invite-field { flex: 1; max-width: 420px; height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); font-size: 12px; font-family: var(--font-mono); } .room-stream { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } /* A human message: avatar + name/time + bubble. Own messages align right. */ .room-msg { display: flex; gap: var(--space-3); max-width: 85%; } .room-msg-own { align-self: flex-end; flex-direction: row-reverse; } .msg-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; text-transform: uppercase; } .room-msg-own .msg-avatar { background: var(--accent-soft); color: var(--accent); } .msg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .room-msg-own .msg-body { align-items: flex-end; } .msg-meta { font-size: 12.5px; color: var(--text-subtle); } .msg-sender { font-weight: 600; color: var(--text-muted); } .msg-bubble { display: inline-block; padding: var(--space-3) var(--space-4); border-radius: var(--radius) var(--radius) var(--radius) var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 15.5px; line-height: 1.5; color: var(--text); word-break: break-word; } .msg-bubble-own { border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius); background: var(--accent-soft); border-color: transparent; } /* An agent message spans the full column so its trust card can breathe. */ .room-msg-agent { align-self: stretch; max-width: 100%; } .agent-thinking { align-self: flex-start; display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-muted); font-style: italic; } .agent-thinking::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); animation: pulse 1.2s ease-in-out infinite; } .room-composer { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); } .room-input { flex: 1; } .room-empty { padding: var(--space-6); text-align: center; color: var(--text-muted); } .room-hint { margin: auto; max-width: 420px; text-align: center; padding: var(--space-5); } .room-hint-title { font-size: 15px; font-weight: 600; color: var(--text); } .room-hint-sub { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); line-height: 1.6; } .room-hint-sub strong { color: var(--accent); font-weight: 600; } /* Rooms list */ .room-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); } .room-list-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-3) var(--space-4); transition: border-color var(--transition), box-shadow var(--transition); } .room-list-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .room-list-name { font-weight: 600; color: var(--text); } .room-list-item:hover .room-list-name { color: var(--accent); } .room-list-desc { color: var(--text-muted); font-size: 13px; margin-top: 2px; } .empty-state { color: var(--text-muted); padding: var(--space-5) 0; } /* 9. Auth / login -------------------------------------------------------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-6); } .auth-title { font-size: 22px; } .auth-sub { color: var(--text-muted); margin: var(--space-2) 0 var(--space-5); } .auth-provider { width: 100%; margin-bottom: var(--space-3); } .auth-note { color: var(--text-subtle); font-size: 12px; } .auth-dev { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); } .auth-dev-label { color: var(--text-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); } .auth-dev-list { display: flex; flex-direction: column; gap: var(--space-2); } .auth-dev-list a { font-size: 13px; color: var(--text-muted); } .auth-dev-list a:hover { color: var(--accent); } /* Shared helpers */ .flex-spacer { flex: 1; } .header-actions { display: flex; align-items: center; gap: var(--space-4); } .avatar { border-radius: var(--radius-pill); background: var(--surface-active); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .avatar-sm { width: 24px; height: 24px; font-size: 11px; } /* Account menu — persistent identity + sign-out (native
dropdown) */ .account-menu { position: relative; flex-shrink: 0; } .account-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); transition: background var(--transition); } .account-menu > summary::-webkit-details-marker { display: none; } .account-menu > summary:hover { background: var(--surface-hover); } .account-name { font-size: 13px; color: var(--text); } .account-caret { font-size: 11px; color: var(--text-muted); font-style: normal; } .account-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-2); z-index: 50; } .account-identity { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); } .account-identity-name { font-size: 13px; font-weight: 600; } .account-identity-email { font-size: 12px; color: var(--text-muted); } .account-signout { display: block; width: 100%; text-align: left; background: none; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; color: var(--text); cursor: pointer; transition: background var(--transition), color var(--transition); } .account-signout:hover { background: var(--danger-bg); color: var(--danger); } /* 10. Framework error UI ------------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: var(--space-3) var(--space-5); background: var(--warning-bg); color: var(--warning); box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); } #blazor-error-ui .reload { color: var(--accent); margin-left: var(--space-3); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-4); top: var(--space-3); } .blazor-error-boundary { padding: var(--space-4); background: var(--danger-bg); color: var(--danger); } .blazor-error-boundary::after { content: "An error has occurred."; }