/* ------------------------------------------------------------------ * * Theme presets (specs 0029/0030). Warm is the default (:root); each * * [data-theme="…"] block overrides the same variables so the scoped * * component CSS — which reads var(--…) — switches wholesale. The JS * * (window.relai.setTheme) also stamps data-base="light|dark" on * * so mode-level rules (Bootstrap overrides, scrollbars) key off the * * base rather than the preset name. * * ------------------------------------------------------------------ */ /* Warm — the default identity (spec 0030): terracotta accent, cream surfaces, Newsreader display serif. Text-bearing terracotta is darkened from the design's #C6603D to pass WCAG AA; the vivid value survives on hover/decoration. */ :root { --bg: #faf6f0; --surface: #f4ece1; --surface-hover: #efe5d6; --surface-active: #f6e4db; /* accent-soft — active rows per the handoff */ --elevated: #ffffff; /* top bars, inputs, menus, drawer */ --text: #2a2521; --text-muted: #6f655a; --border: #ebe2d6; --border-strong: #e6dcce; --accent: #a64a28; /* links/text accent (AA on bg + sidebar) */ --accent-2: #c6603d; /* the design's vivid terracotta — decorative */ --accent-grad: linear-gradient(135deg, #c6603d, #c6603d); --accent-soft: #f6e4db; /* pills, badges, active sidebar row */ --accent-ink: #9a4a2c; /* text on accent-soft */ --sage: #54704f; /* success / online / grounding signals (AA) */ --sage-soft: #e4eedf; --cta: #b0532f; /* terracotta CTA, white ink (AA 5.1) */ --cta-ink: #ffffff; --cta-hover: #c6603d; --bubble-user-bg: #b0532f; --bubble-user-text: #ffffff; --bubble-agent-bg: #ffffff; --bubble-agent-text: #2a2521; --danger: #b3392f; --error-bg: #f7ddd8; --error-text: #7a2e20; --code-bg: rgba(90, 70, 40, 0.08); --glow: 0 0 0 0 transparent; --radius: 0.75rem; /* inputs, cards, menus (design: 10–16px) */ --radius-bubble: 1rem; /* chat bubbles (16px) */ --radius-lg: 1.375rem; /* dialogs, cards (18–26px) */ --shadow-card: 0 18px 44px -26px rgba(80, 40, 20, 0.3); --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; } /* Warm Dark — the Warm identity after sunset (spec 0030 follow-up): espresso near-black surfaces, cream ink, terracotta accent lightened for AA on dark. Keeps the Newsreader display serif and the Warm radii from :root. */ [data-theme="warmdark"] { --bg: #171310; --surface: #211b16; --surface-hover: #281f19; --surface-active: #2e231b; --elevated: #1c1712; --text: #f2ece3; --text-muted: #b3a99c; --border: #33291f; --border-strong: #443729; --accent: #e08b63; --accent-2: #c6603d; --accent-grad: linear-gradient(135deg, #c6603d, #c6603d); --accent-soft: #3a2317; --accent-ink: #f0b596; --sage: #8fb586; --sage-soft: #1d2a1c; --cta: #b0532f; --cta-ink: #ffffff; --cta-hover: #c6603d; --bubble-user-bg: #b0532f; --bubble-user-text: #ffffff; --bubble-agent-bg: #211b16; --bubble-agent-text: #f2ece3; --danger: #ff8a7a; --error-bg: #3a1712; --error-text: #ffc0b3; --code-bg: rgba(255, 255, 255, 0.07); --glow: 0 0 0 1px rgba(198, 96, 61, 0.14); --shadow-card: 0 18px 44px -20px rgba(0, 0, 0, 0.6); } /* Classic — the pre-0030 light look, kept for anyone who explicitly chose it. */ [data-theme="light"] { --bg: #ffffff; --surface: #f8f9fa; --surface-hover: #e9ecef; --surface-active: #d0e3f7; --elevated: #ffffff; --text: #212529; --text-muted: #6c757d; --border: #dee2e6; --border-strong: #ced4da; --accent: #4f46e5; --accent-2: #0ea5e9; --accent-grad: linear-gradient(135deg, #4f46e5, #0ea5e9); --accent-soft: #e2e0fb; --accent-ink: #3a34ad; --sage: #2e7d4f; --sage-soft: #ddefe3; --cta: #f5a623; /* amber — the pre-0030 primary action color */ --cta-ink: #1c1404; --cta-hover: #f6b242; --bubble-user-bg: #4f46e5; --bubble-user-text: #ffffff; --bubble-agent-bg: #e9ecef; --bubble-agent-text: #212529; --danger: #dc3545; --error-bg: #f8d7da; --error-text: #842029; --code-bg: rgba(0, 0, 0, 0.06); --glow: 0 0 0 0 transparent; --radius: 0.6rem; --radius-bubble: 0.85rem; --radius-lg: 0.9rem; --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45); --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } [data-theme="dark"] { /* Palette aligned to the marketing landing so the app reads as the same product. */ --bg: #0b0d12; --surface: #151922; --surface-hover: #1b212c; --surface-active: #222b3a; --elevated: #11151c; --text: #eceef4; --text-muted: #aab0bf; --border: #262c38; --border-strong: #333b4a; --accent: #818cf8; /* indigo (brand lead) */ --accent-2: #38bdf8; /* cyan */ --accent-grad: linear-gradient(135deg, #818cf8, #38bdf8); --cta: #f5a623; /* amber — the primary action color (landing CTA) */ --cta-ink: #1c1404; --cta-hover: #f6b242; --bubble-user-bg: #2f6fed; --bubble-user-text: #ffffff; --bubble-agent-bg: #1b212c; --bubble-agent-text: #eceef4; --danger: #ff6b6b; --error-bg: #2a1416; --error-text: #ffb3b8; --code-bg: rgba(255, 255, 255, 0.08); --glow: 0 0 0 1px rgba(129, 140, 248, 0.18), 0 0 14px rgba(56, 189, 248, 0.10); --accent-soft: #262f4d; --accent-ink: #b6bdff; --sage: #7fb27a; --sage-soft: #1b2a1e; --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Midnight — OLED near-black "ethereal glass": hairline borders, one calm, desaturated steel-blue accent, no brand gradient (taste-skill soft-skill / redesign audit). Dark base. */ [data-theme="midnight"] { --bg: #050505; --surface: #0e0e11; --surface-hover: #16161a; --surface-active: #1d1d24; --elevated: #101014; --text: #f2f2f4; --text-muted: #9a9aa4; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.17); --accent: #8fb8e8; --accent-2: #8fb8e8; --accent-grad: linear-gradient(135deg, #8fb8e8, #8fb8e8); --cta: #f5a623; --cta-ink: #1c1404; --cta-hover: #f6b242; --bubble-user-bg: #1f3a5f; --bubble-user-text: #f2f2f4; --bubble-agent-bg: #131317; --bubble-agent-text: #f2f2f4; --danger: #ff7a7a; --error-bg: #2a1113; --error-text: #ffb4b4; --code-bg: rgba(255, 255, 255, 0.07); --glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 30px rgba(0, 0, 0, 0.55); --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.7); --accent-soft: #16202b; --accent-ink: #9ec3ec; --sage: #7fae7a; --sage-soft: #14201a; --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Paper — warm-cream editorial: espresso ink, muted sage accent, softer corners, serif display type, warm-tinted shadows (soft-skill "Editorial Luxury"). Light base. */ [data-theme="paper"] { --bg: #fdfbf7; --surface: #f7f3ea; --surface-hover: #f0eadd; --surface-active: #e9e0ce; --elevated: #fffdf8; --text: #2b2119; --text-muted: #6f6455; --border: #e8e0d0; --border-strong: #d8cdb8; --accent: #5d7052; --accent-2: #5d7052; --accent-grad: linear-gradient(135deg, #5d7052, #5d7052); --cta: #f5a623; --cta-ink: #1c1404; --cta-hover: #f6b242; --bubble-user-bg: #4a5d3f; --bubble-user-text: #fdfbf7; --bubble-agent-bg: #f0eadd; --bubble-agent-text: #2b2119; --danger: #b3392f; --error-bg: #f7ddd8; --error-text: #7a2e20; --code-bg: rgba(90, 70, 40, 0.08); --glow: 0 0 0 0 transparent; --radius: 0.8rem; --radius-bubble: 1.2rem; --radius-lg: 1.2rem; --shadow-card: 0 18px 50px rgba(90, 70, 40, 0.22); --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif; --accent-soft: #e6ecdf; --accent-ink: #47563e; --sage: #54704f; --sage-soft: #e4eedf; } /* Mono — grayscale minimalism: one desaturated slate accent, tight corners, borders over shadows (taste-skill minimalist-skill). Light base. */ [data-theme="mono"] { --bg: #fcfcfc; --surface: #f5f5f5; --surface-hover: #ededed; --surface-active: #e2e2e2; --elevated: #ffffff; --text: #1a1a1a; --text-muted: #737373; --border: #e4e4e4; --border-strong: #cfcfcf; --accent: #4a5568; --accent-2: #4a5568; --accent-grad: linear-gradient(135deg, #4a5568, #4a5568); --cta: #171717; --cta-ink: #ffffff; --cta-hover: #2e2e2e; --bubble-user-bg: #262626; --bubble-user-text: #ffffff; --bubble-agent-bg: #f0f0f0; --bubble-agent-text: #1a1a1a; --danger: #d43f3a; --error-bg: #f6dede; --error-text: #7c2323; --code-bg: rgba(0, 0, 0, 0.05); --glow: 0 0 0 0 transparent; --radius: 0.35rem; --radius-bubble: 0.4rem; --radius-lg: 0.5rem; --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.14); --accent-soft: #e8e8e8; --accent-ink: #333333; --sage: #3f6b3f; --sage-soft: #e3ece3; --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Fjord — teal + warm-orange action color from ui-ux-pro-max's WCAG-adjusted productivity palette (#0D9488 / #EA580C family). Light base. */ [data-theme="fjord"] { --bg: #f0fdfa; --surface: #e6f7f3; --surface-hover: #ddf2ed; --surface-active: #c8ebe2; --elevated: #ffffff; --text: #134e4a; --text-muted: #5c7672; --border: #c9e9e1; --border-strong: #99e0d2; --accent: #0f766e; --accent-2: #0f766e; --accent-grad: linear-gradient(135deg, #0f766e, #0f766e); --cta: #c2410c; --cta-ink: #ffffff; --cta-hover: #ea580c; --bubble-user-bg: #0f766e; --bubble-user-text: #ffffff; --bubble-agent-bg: #e2f3ef; --bubble-agent-text: #134e4a; --danger: #dc2626; --error-bg: #fadcdc; --error-text: #8a1f1f; --code-bg: rgba(13, 90, 80, 0.08); --glow: 0 0 0 0 transparent; --shadow-card: 0 18px 50px rgba(19, 78, 74, 0.22); --accent-soft: #d6f0ea; --accent-ink: #0b5f58; --sage: #2e7d4f; --sage-soft: #ddefe3; --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /*#if (SampleContent)*/ html, body { font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; height: 100%; margin: 0; max-width: 100%; overflow-x: hidden; /* app-wide guard: a stray wide child can't scroll the page sideways */ background-color: var(--bg); color: var(--text); transition: background-color 0.2s ease, color 0.2s ease; } /* iOS standalone-PWA safe areas: with viewport-fit=cover the web view extends under the status bar and the home indicator, so the top chrome and bottom composer must inset by env(safe-area-inset-*) or they collide with the system clock/battery (and home bar). !important is needed to override the components' scoped padding shorthands. No-op in a normal browser tab (insets are 0). */ @supports (padding-top: env(safe-area-inset-top)) { .chat-topbar, .rm-topbar { padding-top: calc(0.5rem + env(safe-area-inset-top)) !important; } .chat-sidebar, .rm-sidebar { padding-top: env(safe-area-inset-top); } .input-bar, .dm-input { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important; } /* ...but a composer inside a board tile is NOT at the screen bottom — the tile is a card in a scrolling grid — so it must not reserve the home-indicator inset, or every tile gets dead space below its composer. The grid itself insets below. */ .board-tile .input-bar, .board-tile .dm-input { padding-bottom: 0.75rem !important; } } a, .btn-link { color: var(--accent); } /* Inline SVG icons () sit on the text baseline and never shrink in a flex row. */ .ui-icon { vertical-align: -0.15em; flex: none; } /* An icon that's the sole content of a button (gear, close, delete) centres instead. */ button > .ui-icon:only-child { vertical-align: middle; } /* Shared loading spinner (sidebar, workspace, per-chat history load). */ .ws-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; padding: 2rem 1rem; color: var(--text-muted); font-size: 0.9rem; } .ws-spinner { width: 1.6rem; height: 1.6rem; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: ws-spin 0.7s linear infinite; } @keyframes ws-spin { to { transform: rotate(360deg); } } /* Honour reduced-motion: slow the spin rather than stop it (still conveys progress). */ @media (prefers-reduced-motion: reduce) { .ws-spinner { animation-duration: 1.8s; } } .btn-primary { color: var(--cta-ink); background-color: var(--cta); border-color: var(--cta); font-weight: 600; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: var(--cta-ink); background-color: var(--cta-hover); border-color: var(--cta-hover); } /* Base polish (spec 0029, from the taste-skill redesign audit): headings take the theme's display face, buttons give physical press feedback, and numeric tables align their digits. Layout-neutral — no geometry changes. */ h1, h2, h3 { font-family: var(--font-display); } code, pre, kbd, samp { font-family: var(--font-mono); } button:not(:disabled) { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; } button:not(:disabled):active { transform: scale(0.98); } table { font-variant-numeric: tabular-nums; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.12rem var(--bg), 0 0 0 0.28rem var(--accent); } .content { padding-top: 1.1rem; } /*#endif*/ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } /* Custom Blazor reconnect modal (App.razor) — theme-aware so it's readable in dark mode. The framework toggles components-reconnect-{show,failed,rejected,hide}; we show the matching message and theme the card with the app tokens. */ #components-reconnect-modal { display: none; position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } .reconnect-dialog { background-color: var(--elevated); color: var(--text); border: 1px solid var(--border); border-radius: 0.6rem; padding: 1rem 1.25rem; max-width: min(22rem, 90vw); text-align: center; font-size: 0.95rem; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5); } .reconnect-dialog a.reload { color: var(--accent); font-weight: 600; } /* Only the message for the current state is shown. */ .reconnect-dialog > span { display: none; } #components-reconnect-modal.components-reconnect-show .reconnect-rejoining { display: inline; } #components-reconnect-modal.components-reconnect-failed .reconnect-failed-msg { display: inline; } #components-reconnect-modal.components-reconnect-rejected .reconnect-rejected-msg { display: inline; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .status-bar-safe-area { display: none; } @supports (-webkit-touch-callout: none) { .status-bar-safe-area { display: flex; position: sticky; top: 0; height: env(safe-area-inset-top); background-color: #f7f7f7; width: 100%; z-index: 1; } .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); } } /* ------------------------------------------------------------------ * * Dark-mode overrides for Bootstrap-driven surfaces the components * * don't style themselves (form controls, tables, alerts in the agent * * editor, etc.). Scoped component CSS handles the rest via var(--…). * * ------------------------------------------------------------------ */ [data-base="dark"] .form-control, [data-base="dark"] .form-select, [data-base="dark"] .form-check-input { background-color: var(--elevated); color: var(--text); border-color: var(--border-strong); } [data-base="dark"] .form-control::placeholder { color: var(--text-muted); } /* Light chevron so the select arrow is visible on a dark control. */ [data-base="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6e9ef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-base="dark"] .bg-light { background-color: var(--surface) !important; color: var(--text); } [data-base="dark"] .border { border-color: var(--border) !important; } [data-base="dark"] .text-muted, [data-base="dark"] .form-text { color: var(--text-muted) !important; } [data-base="dark"] .table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); } [data-base="dark"] .table > :not(caption) > * > * { border-color: var(--border); } [data-base="dark"] .alert-danger { background-color: var(--error-bg); color: var(--error-text); border-color: transparent; } [data-base="dark"] .btn-secondary { background-color: var(--surface-hover); border-color: var(--border-strong); color: var(--text); } [data-base="dark"] .btn-outline-secondary { color: var(--text); border-color: var(--border-strong); } /* Cool, unobtrusive scrollbars in dark mode. */ [data-base="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-base="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } [data-base="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); } [data-base="dark"] ::-webkit-scrollbar-track { background: transparent; }