/* ============================================================ 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 — warm 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. ============================================================ */ :root { --bg: #faf7f3; /* warm off-white, not clinical */ --surface: #ffffff; /* cards, bubbles, raised UI */ --panel: var(--surface); /* legacy alias */ --ink: #1b1a17; /* warm near-black text */ --text: var(--ink); /* legacy alias (inputs, chips) */ --muted: #8a857c; --accent: #ff6a3d; /* warm coral — the brand */ --accent-ink: #ffffff; /* text/icon on an accent fill */ --border: #ece7df; --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: #16140f; /* warm charcoal, not cold black */ --surface: #1f1c16; --ink: #f0ece4; --muted: #9a948a; --accent: #ff7a52; /* a touch brighter for dark contrast */ --accent-ink: #ffffff; --border: #2c2820; --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). "coral" is the default — it's the :root/[data-theme] values above, so it needs no block here. Every skin keeps white ink (--accent-ink stays #fff), at parity with coral, 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). Coral IS the default (the :root/[data-theme] values), but it gets an explicit block too so a coral SWATCH (a button carrying its own data-accent="coral") can paint itself from --accent regardless of the page's current skin. */ [data-accent="coral"] { --accent: #ff6a3d; } [data-theme="dark"][data-accent="coral"] { --accent: #ff7a52; } [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="violet"] { --accent: #8b5cf6; } [data-theme="dark"][data-accent="violet"] { --accent: #a78bfa; } [data-accent="teal"] { --accent: #14b8a6; } [data-theme="dark"][data-accent="teal"] { --accent: #2dd4bf; } [data-accent="blue"] { --accent: #3b82f6; } [data-theme="dark"][data-accent="blue"] { --accent: #5b9bff; } * { 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; } .btn-ghost { background: transparent; } .btn-danger { background: transparent; border-color: var(--error); color: var(--error); } .btn-danger:hover { background: var(--error); color: #fff; } /* 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; } .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); } /* ── About (read-only profile — the friendly face of the glass box) ── */ .about { display: flex; flex-direction: column; gap: 16px; max-width: 540px; margin: 0 auto; } .about-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 0 4px; } .about-avatar { font-size: 64px; line-height: 1; } .about-name { margin: 0; font-size: 28px; } .about-creature { margin: 0; color: var(--muted); font-size: 15px; } .about-invite { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .about-invite__lead { margin: 0; line-height: 1.6; } .about-invite__eg { margin: 0; font-size: 14px; line-height: 1.7; } .about-invite__eg em { color: var(--ink); font-style: italic; } .about-invite__cta { align-self: flex-start; } .about-glass { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--ink); } .about-glass:hover { border-color: var(--accent); } .about-glass__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg); color: var(--accent); font-size: 18px; } .about-glass__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .about-glass__title { font-weight: 600; } .about-glass__sub { font-size: 13px; } .about-glass > .icon--chevron-right { margin-left: auto; color: var(--muted); width: 12px; height: 12px; } .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; } /* ════════════════════════════════════════════════════════════════════════════ 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 = the same 🙂 emoji the account avatar uses (.acct-avatar), so the product face and the "you" face match. Emoji, not the {{icon "friend"}} glyph. */ .brand-face { font-size: 24px; line-height: 1; flex: none; } .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, buddy + 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; } /* ── Buddy 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: 14px; } .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; } .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: 14px; 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; 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); } /* ── 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-files, #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-files, #tab-skills { max-width: 640px; } } /* ── 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; } .buddy-strip { display: flex; align-items: center; gap: 8px; max-width: var(--chat-max); margin: 0 auto; } .buddy-strip__avatar { font-size: 22px; } .buddy-strip__name { font-weight: 600; } .buddy-strip__copy { margin-left: auto; font-size: 13px; padding: 5px 12px; } .buddy-strip__restart { font-size: 13px; padding: 5px 12px; color: var(--muted); } .buddy-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