/* ============================================================ Self-hosted webfont — Baloo 2 (the display/brand face). Was loaded from Google Fonts (fonts.googleapis.com CSS + gstatic woff2); self-hosted now so no third-party CDN sees our users' IP/referrer on every pageload, and the CSP can drop Google entirely. Baloo 2 ships as a VARIABLE font — one woff2 per subset covers weights 500–700, so a single @font-face with a weight range is correct (and we only ship latin + latin-ext; the devanagari/vietnamese subsets Google served are dropped — unused here). Body copy stays system-ui (no webfont). SIL OFL 1.1 (Ek Type). ============================================================ */ @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/baloo2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/baloo2-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Icons — self-hosted inline SVG (lib/icons.js via the {{{icon}}} helper); size with font-size or width/height, color via currentColor. Replaced Font Awesome. */ .icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; } /* ============================================================ Design tokens — cool slate palette, light + dark. :root is the light theme (also the no-JS fallback); [data-theme="dark"] overrides. theme.js resolves "auto" → light|dark before paint, so the html element always carries a concrete data-theme. Components consume tokens only, never raw hex — the palette is the single knob. The neutrals are slate (the raven's cool grey); the brand accent is royal blue. ============================================================ */ :root { --bg: #f4f6f9; /* cool slate off-white — calm, not clinical */ --surface: #ffffff; /* cards, bubbles, raised UI */ --panel: var(--surface); /* legacy alias */ --ink: #182130; /* cool slate near-black text */ --text: var(--ink); /* legacy alias (inputs, chips) */ --muted: #667085; /* slate grey */ --accent: #3457e0; /* royal blue — the brand */ --accent-ink: #ffffff; /* text/icon on an accent fill */ --border: #e3e8ef; /* cool slate hairline */ --error: #d64545; --font-display: "Baloo 2", system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* App-shell geometry — a messaging client. Desktop: a fixed left nav rail + a full-width pane. Mobile (< 880px): the rail is replaced by a fixed top bar + bottom tab bar. --content-max caps reading width WITHIN the pane (chat, prose) so full-width text stays legible. The 880px breakpoint is hardcoded in media queries (custom props can't be used in media conditions). */ --rail-w: 248px; /* desktop nav rail */ --content-max: 760px; /* readable cap inside the pane */ --chat-max: 1080px; /* wider cap for the chat thread (full-width, left-aligned msgs) */ --mtop-h: 54px; /* mobile fixed top bar */ --tabbar-h: 64px; /* mobile fixed bottom nav */ } [data-theme="dark"] { --bg: #10141c; /* cool slate charcoal, not warm black */ --surface: #191f2a; --ink: #e8ecf3; --muted: #8b95a7; --accent: #6b8aff; /* brighter royal for dark contrast */ --accent-ink: #ffffff; --border: #262d3a; --error: #ff6b6b; } /* ── Accent skins ("skins" in the UI) ──────────────────────────────────────── The accent color is independent of light/dark — data-accent on swaps the --accent token, mirroring how data-theme swaps the palette. Server-rendered before paint (layouts) so there's no flash; persisted on the User (POST /api/accent). "royal" is the default — it's the :root/[data-theme] values above. Every skin keeps white ink (--accent-ink stays #fff), at parity with royal, so the hardcoded white-on-accent fills (buttons, chips) stay legible. Each skin declares a LIGHT value and a (slightly brighter) DARK value; the two-attribute dark selector outranks the single-attribute [data-theme="dark"] base, so dark mode picks the dark value. The swatch list in lib/skins.js must stay in sync with the keys here (the route validates against it). Royal IS the default (the :root/[data-theme] values), but it gets an explicit block too so a royal SWATCH (a button carrying its own data-accent="royal") can paint itself from --accent regardless of the page's current skin. Coral/blue are kept as pickable options (and so any pre-rebrand stored value still resolves). */ [data-accent="royal"] { --accent: #3457e0; } [data-theme="dark"][data-accent="royal"] { --accent: #6b8aff; } [data-accent="teal"] { --accent: #14b8a6; } [data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; } [data-accent="violet"] { --accent: #8b5cf6; } [data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; } [data-accent="blue"] { --accent: #3b82f6; } [data-theme="dark"][data-accent="blue"] { --accent: #5b9bff; } [data-accent="amber"] { --accent: #f59e0b; } [data-theme="dark"][data-accent="amber"] { --accent: #fbb024; } [data-accent="rose"] { --accent: #f43f6b; } [data-theme="dark"][data-accent="rose"] { --accent: #ff5c81; } [data-accent="coral"] { --accent: #ff6a3d; } [data-theme="dark"][data-accent="coral"] { --accent: #ff7a52; } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.5 var(--font-body); background: var(--bg); color: var(--ink); } h1, h2, h3, .brand-wordmark { font-family: var(--font-display); } /* .wrap is the NON-dashboard page frame (landing, auth, onboarding). The dashboard uses the app-shell (rail + pane) instead — see .app-shell below. */ .wrap { max-width: 980px; margin: 0 auto; padding: 24px; } a { color: var(--accent); } .muted { color: var(--muted); } /* The HTML `hidden` attribute must win — any component that sets its own `display` (flex/grid/inline-flex) otherwise overrides it, so a JS/template `hidden` toggle silently does nothing (this was the storefront's "everything looks installed" bug: .skill-installed { display: inline-flex } beat [hidden]). One global rule fixes it everywhere and lets the per-component [hidden] overrides retire. */ [hidden] { display: none !important; } .error { color: var(--error); } /* Utility: hide regardless of a component's own display rule (the onboarding chat box, error lines, etc. carry class="hidden" until JS reveals them). */ .hidden { display: none !important; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } pre { background: var(--panel); padding: 12px 14px; border-radius: 8px; overflow:auto; } .hero { text-align: center; padding: 64px 0; } .hero h1 { font-size: 56px; margin: 0; } .tagline { font-size: 22px; } .sub { color: var(--muted); } .cta-row { margin-top: 28px; display: flex; gap: 12px; justify-content: center; } .btn { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } /* Secondary button: a real raised surface (not a transparent outline that vanishes on the warm bg), with a defined border + subtle lift, and a coral accent on hover. */ .btn-ghost { background: var(--panel); border-color: color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-danger { background: transparent; border-color: var(--error); color: var(--error); } .btn-danger:hover { background: var(--error); color: #fff; } /* Disabled buttons: dimmed, no pointer, and hover styles neutralized. */ .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; } .btn-danger:disabled:hover, .btn-danger[disabled]:hover { background: transparent; color: var(--error); } /* ── Free-tier paywall modal (platform chrome; the agent never triggers it) ── */ .paywall { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 20px; } .paywall.is-open { display: flex; } .paywall__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .paywall__card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px 24px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 14px; } .paywall__face { font-size: 40px; line-height: 1; } img.paywall__face { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto; } .paywall__title { font-family: "Baloo 2", system-ui, sans-serif; font-size: 22px; margin: 0; color: var(--ink); } .paywall__body { margin: 0; color: var(--text); opacity: 0.85; font-size: 15px; line-height: 1.5; } .paywall__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .paywall__actions .btn { width: 100%; justify-content: center; } /* Kill iOS Safari's double-tap-to-zoom on tappable controls (e.g. the chat jump-to-latest arrow read as a double-tap → the view zoomed in). Pinch-zoom is untouched, so accessibility zoom still works. */ button, a, textarea, .btn { touch-action: manipulation; } /* ── Account / Settings (the human's profile) ─────────────────────────────── */ .settings { display: flex; flex-direction: column; gap: 16px; max-width: 540px; margin: 0 auto; } .settings-head { display: flex; align-items: center; gap: 14px; } .settings-title { margin: 0; font-size: 22px; } .settings-sub { margin: 2px 0 0; font-size: 14px; } .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } .settings-section > h2 { margin: 0; font-size: 16px; } .settings-section > h3 { margin: 0; } .settings-section > .sub { margin: -8px 0 2px; font-size: 13px; } .settings-section .field { gap: 6px; } .settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ff-input:disabled { opacity: 0.65; cursor: not-allowed; } /* Notifications toggle: label left, switch right. */ .settings-toggle { justify-content: space-between; flex-wrap: nowrap; cursor: pointer; gap: 16px; } .settings-toggle > span:first-child { font-size: 14px; line-height: 1.45; } .ff-switch { flex: none; -webkit-appearance: none; appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background 0.15s ease; } .ff-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .ff-switch:checked { background: var(--accent); } .ff-switch:checked::after { transform: translateX(18px); } .ff-switch:disabled { opacity: 0.6; cursor: wait; } /* Standalone notice page (unsubscribe confirmation). */ .notice { max-width: 480px; margin: 12vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; } .notice-heading { margin: 0; } .notice-message { margin: 0; line-height: 1.55; } .key-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 14px; } .key-status .ok { color: var(--accent); font-weight: 600; } .key-status .warn { color: var(--error); font-weight: 600; } .key-status .ok .icon, .key-status .warn .icon { margin-right: 4px; } .key-rotate { display: flex; gap: 8px; } .key-rotate .ff-input { flex: 1; } .key-remove { margin: 10px 0 0; } /* Inline text button (no chrome) — used for the quiet "Remove key" disconnect. */ .btn-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; color: var(--accent); } .btn-link.danger { color: var(--error); } .btn-link:disabled { opacity: 0.5; cursor: default; } .plan-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; text-transform: capitalize; font-weight: 600; } /* Danger zone (Profile tab) — the data-custody delete affordance. */ /* The danger zone is a .settings-section card like the others — it sits in the same flex gap, so it needs NO extra top margin/padding (that double-spaced it). A faint error-tinted border keeps it distinct without shouting. */ .danger-zone { border-color: color-mix(in srgb, var(--error) 35%, var(--border)); } .danger-zone h3 { margin: 0 0 6px; color: var(--error); font-size: 15px; } .danger-zone .muted { margin: 0 0 12px; } .acct-delete-confirm { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .acct-delete-actions { display: flex; gap: 8px; } /* Inputs (shared by onboarding + the profile knobs) */ .ff-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 16px; /* 16px keeps iOS from auto-zooming on focus */ font-family: inherit; } .ff-input:focus { outline: none; border-color: var(--accent); } /* Form fields + chips — shared by the account/settings page. */ .field { display: flex; flex-direction: column; gap: 8px; } .field > label { font-size: 13px; color: var(--text); font-weight: 600; } .field > label .muted { font-weight: 400; } .chipset { display: flex; gap: 8px; flex-wrap: wrap; } .chip { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; transition: border-color 0.12s, background 0.12s; } .chip:hover { border-color: var(--accent); } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* Accent skin picker — a row of color swatches. Each swatch carries its OWN data-accent="", so the [data-accent] blocks above re-set --accent on that button and it paints itself (no inline styles — the CSP forbids them, and this reuses the one accent palette so the preview can't drift from the applied color). The selected one gets a ring. Same data-field wiring shape as the theme chipset. */ .swatchset { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.12s, transform 0.08s; } .swatch:hover { transform: scale(1.06); } .swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } .swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); } .pf-status { min-height: 18px; font-size: 13px; margin: 0; } .pf-status.err { color: var(--error); } /* (The .about-* read-only profile page was retired 2026-06-15 — Delete moved into Settings → Agents; its styles were removed with it.) */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .card.narrow { max-width: 420px; margin: 48px auto; } .stack { display: flex; flex-direction: column; gap: 14px; } .stack label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .stack input { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: 15px; } /* ── Auth (sign-in / check-email) — the one door. Same warm chrome as the landing (pub-header/footer wrap these pages), one centered card. ── */ .auth { display: flex; justify-content: center; padding: 40px 0 64px; } .auth__card { width: 100%; max-width: 470px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; box-shadow: 0 16px 42px rgba(0,0,0,0.06); } .auth__face { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); font-size: 28px; line-height: 1; margin-bottom: 16px; } .auth__title { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.01em; } .auth__lede { margin: 0 0 22px; color: var(--muted); line-height: 1.55; font-size: 15.5px; } .auth__lede strong { color: var(--ink); } .auth__form { display: flex; flex-direction: column; gap: 9px; } .auth__label { font-size: 13px; font-weight: 700; color: var(--ink); } .auth__input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: 15px; } .auth__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .auth__submit { width: 100%; margin-top: 4px; } .auth__steps { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; } .auth__steps li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--muted); } .auth__stepE { flex: none; width: 1.5em; text-align: center; font-size: 16px; } .auth__fine { margin: 18px 0 0; } .auth__fine a, .auth__lede a { color: var(--accent); } /* check-email variant: centered, no form */ .auth__card--center { text-align: center; } .auth__card--center .auth__face { margin-left: auto; margin-right: auto; } .auth__card--center .auth__submit { margin-top: 8px; } /* The /join profile picker — a real "pick a face" list: uniform full-width, left-aligned tiles (not content-width buttons) with a fixed emoji column so the names line up. An "or" divider sets the returning members apart from the new-person tile, which reads as a distinct, lighter action. */ .join-who { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .join-who__list { display: flex; flex-direction: column; gap: 10px; } .join-who form { margin: 0; } .join-who__btn { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start; text-align: left; padding: 14px 16px; font-size: 16px; font-weight: 600; } .join-who__btn:hover { border-color: var(--accent); color: var(--ink); } .join-who__emoji { flex: none; width: 1.6em; text-align: center; font-size: 22px; line-height: 1; } .join-who__or { display: flex; align-items: center; gap: 12px; margin: 2px 2px; color: var(--muted); font-size: 13px; } .join-who__or::before, .join-who__or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .join-who__btn--new { border-style: dashed; color: var(--muted); } .join-who__btn--new:hover { border-color: var(--accent); color: var(--ink); } /* ════════════════════════════════════════════════════════════════════════════ APP SHELL — a messaging client. Desktop (≥880px): a fixed left nav rail + a scrolling pane. Mobile (<880px): the rail is hidden; a fixed top bar (.mtop) + bottom tab bar (.tabbar) take over. The 880px breakpoint is hardcoded (custom props can't drive media queries). ════════════════════════════════════════════════════════════════════════════ */ .app-shell { display: flex; min-height: 100dvh; } .pane { flex: 1; min-width: 0; } .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .brand .icon { width: 24px; height: 24px; color: var(--accent); } /* Brand mark = an of the 🐦‍⬛ Fluent emoji (public/brand-mark.png), so the wordmark face is identical on every platform — Safari/Firefox don't substitute their own emoji font. */ .brand-face { width: 24px; height: 24px; flex: none; object-fit: contain; } /* Other brand-face images (the same Fluent-emoji brand mark), each sized to match the glyph it replaced. Nested forms sit INSIDE their tinted container; standalone forms are the img itself. */ .auth__face img { width: 30px; height: 30px; object-fit: contain; } .land-badge__face img { width: 15px; height: 15px; object-fit: contain; } .lchat-av--agent img { width: 20px; height: 20px; object-fit: contain; } img.onb-choose__face { width: 40px; height: 40px; object-fit: contain; } img.onb-choose__emoji { width: 30px; height: 30px; object-fit: contain; } .brand-wordmark { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); } .brand-dot { color: var(--accent); } /* ── The rail (desktop) ─────────────────────────────────────────────────────── */ .rail { position: sticky; top: 0; align-self: flex-start; flex: none; width: var(--rail-w); height: 100dvh; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; background: var(--bg); border-right: 1px solid var(--border); } .rail__brand { padding: 4px 10px 12px; } .rail__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .rail__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 15px; } .rail__item .icon { width: 20px; height: 20px; } .rail__item:hover { background: var(--surface); color: var(--ink); } .rail__item.is-active { background: var(--surface); color: var(--ink); font-weight: 600; } .rail__item.is-active .icon { color: var(--accent); } .rail__count { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; /* Always 600 so the active state's font-weight bump (.rail__item.is-active) doesn't re-weight the digits and jiggle the pill's width when you click between sections. */ font-weight: 600; } .rail__foot { margin-top: auto; } /* ── Mobile top bar (.mtop) — brand left, agent + account right. Hidden ≥880px. ── */ .mtop { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 10px; height: var(--mtop-h); padding: 0 14px; background: var(--bg); border-bottom: 1px solid var(--border); } .mtop__brand { flex: none; } .mtop__right { display: flex; align-items: center; gap: 8px; } /* ── Agent switcher (.bswitch) — rail row by default; avatar circle in the mtop. The menu (switch / new / About) is identical in both. ───────────────────── */ .bswitch { position: relative; } .bswitch-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; } .bswitch-btn:hover { background: var(--surface); } /* Mid-birth: a non-interactive switcher (no menu, no caret) — just the newborn's ✨+name, filling in live. Mirrors .bswitch-btn padding so it sits identically. */ .bswitch--newborn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; } .bswitch-avatar { font-size: 28px; line-height: 1; flex: none; } .bswitch-label { display: flex; flex-direction: column; min-width: 0; } .bswitch-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; } .bswitch-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bswitch-caret { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); } /* Mobile top bar: avatar-only circular trigger. */ .mtop .bswitch-btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-color: var(--border); border-radius: 999px; background: var(--surface); } .mtop .bswitch-avatar { font-size: 22px; } .mtop .bswitch-label, .mtop .bswitch-caret { display: none; } .bswitch-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .bswitch-menu[hidden] { display: none; } .mtop .bswitch-menu { left: auto; right: 0; } .bswitch-menu__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6px 10px 4px; } .bswitch-menu__sep { height: 1px; background: var(--border); margin: 6px 4px; } .bswitch-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px; } .bswitch-item:hover { background: var(--bg); } .bswitch-item.is-active { font-weight: 600; } .bswitch-item__avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--bg); font-size: 16px; } .bswitch-item__avatar--new, .bswitch-item__avatar--ghost { color: var(--muted); font-size: 12px; } .bswitch-item__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bswitch-item__check { margin-left: auto; color: var(--accent); font-size: 12px; } /* ── Account cluster (shared: rail foot + mobile top bar) ───────────────────── */ .acct { position: relative; } .acct-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer; line-height: 1.2; } .acct-btn:hover { background: var(--surface); } .acct-avatar { font-size: 22px; line-height: 1; flex: none; } .acct-avatar--lg { font-size: 26px; } /* Both account + member avatars are now the .acct-avatar SPAN with their own emoji (the face Dustav set for the person — NOT the brand raven). The img form is kept sized in case any surface still points at a raster mark. */ img.acct-avatar { width: 22px; height: 22px; object-fit: contain; flex: none; } img.acct-avatar--lg { width: 26px; height: 26px; } .acct-btn__label { display: flex; flex-direction: column; min-width: 0; } .acct-btn__name { font-size: 14px; font-weight: 600; } .acct-btn__email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } /* Mobile top bar: avatar-only circular trigger (no label row). */ .mtop .acct-btn { width: 38px; height: 38px; padding: 0; justify-content: center; border-color: var(--border); border-radius: 999px; background: var(--surface); } .mtop .acct-btn__label { display: none; } .acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } /* Rail foot opens UPWARD and stretches to the rail width. */ .acct--up .acct-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; } .acct-menu[hidden] { display: none; } .acct-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .acct-email { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-menu__form { margin: 0; } .acct-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: none; background: none; border-radius: 10px; color: var(--ink); font-size: 15px; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; } .acct-menu__item:hover { background: var(--bg); } .acct-menu__item .icon { width: 18px; height: 18px; color: var(--muted); } .acct-menu__item--dev { color: var(--muted); } /* ── Bottom tab bar (mobile only, full width) ──────────────────────────────── */ .tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; /* Pin to the geometry token so the copilot peek bar (bottom: --tabbar-h) sits FLUSH on top of it — without this the bar's content only added up to ~58px, leaving a ~6px strip of calendar showing. */ min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); align-items: center; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 11px; } .tabbar__item .icon { width: 18px; height: 18px; } .tabbar__item:hover { color: var(--ink); } .tabbar__item.is-active { color: var(--accent); } /* Section-nav loading state (public/js/nav-loading.js): on click, hide the icon and show a small spinner in its place, so a full-page navigation reads as "loading", not a dead click. Same ring as the files reader (.glass-spinner / glass-spin), sized to the nav icon — 20px on the rail, 18px in the tab bar. */ .rail__item.is-loading .icon, .tabbar__item.is-loading .icon { display: none; } .rail__item.is-loading::before, .tabbar__item.is-loading::before { content: ""; flex: none; box-sizing: border-box; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: glass-spin 0.7s linear infinite; } .rail__item.is-loading::before { width: 20px; height: 20px; } .tabbar__item.is-loading::before { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { .rail__item.is-loading::before, .tabbar__item.is-loading::before { animation: none; } /* static ring still reads as a status indicator */ } /* ── The pane content: a readable column, centered. Files/Skills opt wider. ─── */ .tabpane { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 56px; } .tabpane.hidden { display: none; } #tab-context, #tab-skills { max-width: 1080px; } /* ── Mobile: hide the rail, show the bars, pad the pane clear of both. ──────── */ @media (max-width: 879px) { .rail { display: none; } .mtop { display: flex; } .tabbar { display: flex; } .tabpane { max-width: 640px; padding: calc(var(--mtop-h) + 16px) 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); } #tab-context, #tab-skills { max-width: 640px; } /* Re-match the pane's mobile padding so the hero still bleeds to the column edges + the top bar. */ .fam-hero { margin: calc(-1 * (var(--mtop-h) + 16px)) -16px 24px; padding: 32px 16px 28px; } } /* ── Chat — a native thread filling the WHOLE pane: full-width header + scroller + composer, each with its inner content centered to reading width. The scrollbar rides the panel edge; the text stays in a tidy column. ───────── */ #tab-chat { max-width: none; margin: 0; /* fill the pane, edge to edge */ display: flex; flex-direction: column; height: 100dvh; padding: 0; /* the three bars own their padding */ } /* Fixed header bar — spans the pane, content centered. */ .chat-head { flex: none; border-bottom: 1px solid var(--border); padding: 12px 24px; } .agent-strip { display: flex; align-items: center; gap: 8px; max-width: var(--chat-max); margin: 0 auto; } .agent-strip__avatar { font-size: 22px; } .agent-strip__name { font-weight: 600; } .agent-strip__copy { margin-left: auto; font-size: 15px; padding: 5px 12px; } .agent-strip__restart { font-size: 15px; padding: 5px 12px; color: var(--muted); } .agent-strip__restart:hover { color: var(--error); } .onb-restart-msg { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } /* The scroller IS the panel; each row centers itself to the (wide) chat width. */ .messages { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px 24px; } .messages > .ce-row { width: 100%; max-width: var(--chat-max); margin-left: auto; margin-right: auto; } .note { align-self: center; font-size: 12px; color: var(--muted); } /* Composer docked at the foot — full-width bar, content centered. The input is a