:root {
  color-scheme: light;
  --graphite:#1d2023; --ink:#2a2e32; --paper:#fafbf8; --chalk:#eef0ea;
  --line:#dce0d8; --stone:#59635d; --pink:#ff4f8b; --mint:#45d7a2;
  --mint-tint:#dff5e8; --cloud-tint:#e6eef6; --cloud-ink:#2b5c8a;
  --warning:#9a590e; --danger:#a5332f;
  --glass:color-mix(in srgb,var(--paper) 83%,transparent);
  --shadow:0 1px 3px #2223,0 7px 24px #2221;
  --display:"Bricolage Grotesque", sans-serif; --body:Figtree, sans-serif;
}
[data-theme=dark] {
  color-scheme: dark;
  --graphite:#eef0ea; --ink:#d6dbd2; --paper:#1d2023; --chalk:#2a2e32;
  --line:#3b4045; --stone:#a3aaa5; --mint-tint:#203e33;
  --cloud-tint:#22303d; --cloud-ink:#9cc3ea; --warning:#efb65f;
  --danger:#f28a7d; --shadow:0 4px 22px #0005;
}
*,*::before,*::after { box-sizing:border-box }
[hidden] {display:none!important}
html,body { margin:0; min-width:0; height:100% }
body { background:var(--paper); color:var(--graphite); font:15px/1.45 var(--body) }
a { color:inherit }
button,input,textarea,select { font:inherit; color:inherit }
button,a { -webkit-tap-highlight-color:transparent }
button { border:0; background:transparent; cursor:pointer }
button:disabled { cursor:default; opacity:.5 }
:focus-visible { outline:2px solid var(--pink); outline-offset:3px }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:var(--display); letter-spacing:-.03em; line-height:1.06 }
h1 { font-size:clamp(34px,5vw,48px); font-weight:800 }
h2 { font-size:24px; font-weight:750 }
h3 { font-size:17px; font-weight:700 }
small,.muted { color:var(--stone) }
svg.icon { width:19px;height:19px;flex:none;vertical-align:middle }
svg.emoji { width:1em;height:1em }
.mascot { display:inline-flex;flex:none;line-height:0; color:var(--graphite) }
.mascot svg { width:var(--face,40px);height:var(--face,40px);overflow:visible }
.skip { position:fixed; top:4px; left:4px; transform:translateY(-160%); z-index:10; padding:8px; background:var(--paper) }
.skip:focus { transform:none }
.startup { min-height:100dvh; display:grid; align-content:center; justify-items:center; gap:12px; color:var(--stone) }
.shell { display:grid; grid-template-columns:268px minmax(0,1fr); height:100dvh; overflow:hidden }
.shell.collapsed { grid-template-columns:72px minmax(0,1fr) }
.side { min-height:0; margin:8px 0 8px 8px; padding:12px 10px 10px; background:var(--chalk); border-radius:24px; display:flex; flex-direction:column; gap:12px }
.brand { display:flex; align-items:center; gap:8px; padding:0 4px 0 6px; min-height:36px; font:800 20px/1 var(--display); letter-spacing:-.03em }
.brand img { width:25px; height:25px }
.brand .square { margin-inline-start:auto }
.nav,.side-foot { display:grid;gap:2px }
.side-foot { margin-top:auto }
.row { display:flex; width:100%; align-items:center; gap:10px; min-height:36px; padding:6px 8px; text-align:start; border-radius:10px; text-decoration:none; font-weight:600 }
.row:hover,.row:focus-visible,.square:hover,.pill:hover { background:color-mix(in srgb,var(--graphite) 7%,transparent) }
.nav .row.on { background:var(--paper); box-shadow:0 1px 3px #2221 }
.row .icon,.square.quiet .icon { color:var(--stone) }
.row .forth { margin-inline-start:auto; color:var(--stone) }
.row span:first-of-type { min-width:0 }
.rows { display:grid; gap:2px }
.side-scroll { min-height:0; overflow:auto; flex:1 }
.side-scroll .row { font-size:14px }
.clipped { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.section-label { display:block; font-size:12px; font-weight:700; color:var(--stone); padding:8px; }
.side-callout { padding:11px; margin-bottom:6px; display:grid; gap:8px; border-radius:14px; background:var(--paper); box-shadow:0 1px 3px #2221 }
.side-callout small { line-height:1.3 }
.avatar { width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--graphite);color:var(--paper);font-weight:700;line-height:1 }
.collapsed .side { align-items:center; padding-inline:6px }
.collapsed .brand { padding:0 }
.collapsed .brand img,.collapsed .brand span,.collapsed .side .row span,.collapsed .side .section-label,.collapsed .side-scroll,.collapsed .side-callout,.collapsed .side .forth { display:none }
.collapsed .side .row,.collapsed .side .square { justify-content:center;width:42px;height:40px;margin:0 }
.main { min-height:0; min-width:0; position:relative; overflow:auto; display:flex; flex-direction:column }
.top { display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:12px 22px; flex:none; z-index:2 }
.grow { flex:1 }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.square,.pill,.btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;text-decoration:none; white-space:nowrap;line-height:1 }
.square { width:38px;height:38px;flex:none }
.pill { padding:6px 11px;min-height:32px;background:var(--chalk);font-size:13px;font-weight:600 }
.btn { min-height:38px; padding:8px 15px; background:var(--chalk); font-weight:700 }
.btn:hover { filter:brightness(.96) }
.btn.primary { background:var(--graphite); color:var(--paper) }
.btn.danger { color:var(--danger) }
.text-button { text-decoration:underline; text-underline-offset:3px; padding:3px 0 }
.mode { display:inline-flex; gap:3px; border-radius:999px; background:var(--chalk); padding:3px }
.mode button { min-width:65px; height:33px; border-radius:999px; font-weight:700; color:var(--stone) }
.mode button[aria-pressed=true] { color:var(--graphite); background:var(--paper); box-shadow:0 1px 4px #2222 }
.agent-pill { font:700 16px var(--display); background:transparent }
.agent-pill .mascot { --face:24px }
.home { width:min(100% - 48px,720px); margin:auto; padding:8px 0 9vh; display:grid; gap:15px }
.hero { text-align:center; display:grid; justify-items:center; gap:8px; padding-bottom:8px }
.hero .mascot { --face:90px; animation:arrive .5s ease both }
.hero p { color:var(--stone); font-size:16px }
.suggestions { display:flex; gap:7px; flex-wrap:wrap; justify-content:center }
.composer-wrap { min-width:0 }
.composer-strip { display:flex; align-items:center; gap:5px; padding:0 10px 7px }
.composer-strip .pill { background:transparent }
.composer-strip .pill:hover { background:var(--chalk) }
.composer { padding:10px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow) }
.composer:focus-within { border-color:var(--stone) }
.composer textarea { display:block; width:100%; min-height:61px; max-height:170px; border:0; outline:0; padding:5px 8px; resize:vertical; background:transparent; line-height:1.5; font-size:16px }
.composer textarea::placeholder { color:var(--stone) }
.composer .square.send { color:var(--paper); background:var(--graphite) }
.composer .square.recording { color:var(--danger);background:var(--chalk) }
.attachment { display:inline-flex; align-items:center; gap:3px; padding-inline:10px 2px; border-radius:22px; background:var(--chalk); margin:0 6px 6px 0; max-width:100% }
.attachment .square { width:31px;height:31px }
.place { color:var(--cloud-ink); background:var(--cloud-tint) }
.desktop-only,.desktop-actions { display:flex }
.mobile-only { display:none }
.page { width:min(100% - 48px,1070px); margin:0 auto; padding:24px 0 60px; display:grid; align-content:start; gap:18px }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px }
.page-heading p { color:var(--stone); max-width:540px; margin-top:7px }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:12px }
.card { display:grid; gap:8px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--paper); min-width:0 }
.card p { color:var(--stone) }
.card-header { display:flex; gap:10px; align-items:center }
.card-header > div { min-width:0; flex:1 }
.card .actions { margin-top:auto }
.agent-card { min-height:158px }
.agent-card .mascot { --face:43px }
.card meter { width:100%;height:12px;accent-color:var(--mint) }
.app-icons { display:flex; align-items:center; gap:7px }
.app-icons img { width:17px;height:17px;object-fit:contain }
.filters { display:flex; gap:7px; align-items:center; flex-wrap:wrap }
.filters .pill[aria-pressed=true] { background:var(--graphite);color:var(--paper) }
.field { width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--paper); outline-offset:1px }
.search { max-width:330px }
.list { display:grid; gap:7px }
.item { display:flex; align-items:center; gap:13px; padding:12px; background:var(--chalk); border-radius:13px; min-height:56px }
.item .caption { flex:1; min-width:0 }
.item .caption strong,.item .caption small { display:block; overflow-wrap:anywhere }
.item .status { font-size:12px; color:var(--stone) }
.item-action { display:flex; align-items:center; min-width:0; flex:1; gap:12px; text-align:start; padding:0 }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; font-size:12px; font-weight:700; color:var(--stone); background:var(--chalk) }
.badge.live { background:var(--mint-tint); color:var(--graphite) }
.badge.attention { color:var(--warning) }
.error,.status-message { padding:13px 15px; border-radius:13px; background:var(--chalk); color:var(--stone) }
.error { color:var(--danger) }
.empty { min-height:155px; display:grid; align-content:center; justify-items:start; gap:7px; padding:21px; border:1px dashed var(--line); border-radius:15px }
.section { display:grid; gap:10px }
.thread { flex:1; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; width:min(100% - 48px,740px); margin:0 auto; padding-bottom:16px; gap:12px }
.thread-body { min-height:0; overflow:auto; display:flex; flex-direction:column; gap:14px; padding:8px 3px 20px }
.thread .message { align-self:flex-start; max-width:100%; width:fit-content; overflow-wrap:anywhere; display:grid; gap:6px }
.thread .message.me { align-self:flex-end; width:fit-content; max-width:82%; border-radius:18px 18px 6px 18px; background:var(--mint-tint); padding:11px 14px }
.message p { white-space:pre-wrap }
.answer-link { color:var(--cloud-ink); text-underline-offset:3px }
.message .meta { display:flex; align-items:center; gap:7px; color:var(--stone); font-size:12px }
.message .meta .mascot { --face:27px }
.message img { max-width:100%; max-height:220px; border-radius:10px; object-fit:contain }
.timeline { display:grid; gap:8px; color:var(--stone); padding:12px 16px; border:1px solid var(--line); border-radius:14px }
.timeline summary { cursor:pointer; font-weight:700; color:var(--graphite) }
.timeline li { margin-block:4px; overflow-wrap:anywhere }
.link-list { display:grid; gap:5px }
.auth { min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; gap:30px; padding:32px clamp(22px,5vw,72px) 24px; background:var(--paper) }
.auth-brand { display:flex; align-items:center; gap:10px; justify-self:start; text-decoration:none; font:800 22px/1 var(--display); letter-spacing:-.04em }
.auth-card { align-self:center; justify-self:center; width:min(100%,390px); padding-block:16px 32px }
.auth-card header { margin-bottom:28px }
.auth-card h1 { font-size:clamp(32px,5vw,42px); margin:0 0 9px }
.auth-card p { color:var(--stone); margin:0 }
.auth-card .error { margin-bottom:14px }
.auth-form { display:grid; gap:9px }
.auth-google,.auth-email-button,.auth-email { min-height:48px; width:100%; border-radius:12px; border:1px solid var(--line); padding:0 14px }
.auth-google { display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f1f1f; border-color:#747775; font-weight:650 }
.auth-google:hover { background:#f2f4f2 }
.auth-google img { flex:none; object-fit:contain }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--stone); font-size:13px; margin-block:6px }
.auth-divider::before,.auth-divider::after { content:""; flex:1; border-top:1px solid var(--line) }
.auth-label { font-size:14px; font-weight:650 }
.auth-email { background:var(--paper); color:var(--graphite) }
.auth-email-button { background:var(--graphite); color:var(--paper); font-weight:700 }
.auth-footer { justify-self:center; color:var(--stone); font-size:13px; text-align:center }
.consent { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--stone); margin-top:9px }
.consent input { accent-color:var(--pink); width:16px; height:16px; flex:none; margin-top:2px }
.consent a { text-underline-offset:3px }
.stickers { display:none }
dialog { width:min(calc(100% - 30px),470px); max-height:min(82dvh,710px); color:var(--graphite); background:var(--paper); border:1px solid var(--line); border-radius:23px; box-shadow:var(--shadow); padding:18px; overflow:auto }
dialog[open] { animation:arrive .2s ease both }
dialog::backdrop { background:#1117; backdrop-filter:blur(3px) }
.sheet-head { display:flex; justify-content:space-between;gap:12px; align-items:center; margin-bottom:12px }
.sheet-content { display:grid; gap:10px }
.sheet-content form { display:grid; gap:10px }
.sheet-content label { display:grid; gap:4px; font-weight:600 }
.toast { position:fixed; z-index:5; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:11px 15px; border-radius:14px; background:var(--graphite); color:var(--paper); box-shadow:var(--shadow) }
@keyframes arrive { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
@media(max-width:740px) {
  .mobile-only { display:flex }
  .desktop-only,.desktop-actions,.side { display:none }
  .shell,.shell.collapsed { display:flex; flex-direction:column; }
  .main { flex:1; height:100%; }
  .top { min-height:64px; padding:8px 15px; padding-top:max(8px,env(safe-area-inset-top)); flex-wrap:wrap; gap:4px }
  .top .square,.top .mode,.agent-pill,.mobile-nav { background:var(--glass); backdrop-filter:blur(14px) saturate(180%); box-shadow:inset 0 1px 0 color-mix(in srgb,white 38%,transparent),var(--shadow) }
  .mobile-nav { margin:5px 14px max(8px,env(safe-area-inset-bottom)); z-index:2; border-radius:26px; flex:none; justify-content:space-around; gap:3px; padding:5px; border:1px solid var(--line) }
  .mobile-nav .row { width:auto; justify-content:center; flex-direction:column; gap:4px; flex:1; font-size:11px; line-height:1.1; padding:6px 1px; border-radius:19px }
  .mobile-nav .row.on { background:var(--chalk) }
  .composer { border-radius:24px; background:var(--glass); backdrop-filter:blur(12px) saturate(180%) }
  .home,.thread,.page { width:calc(100% - 30px); }
  .home { min-height:min(100%,480px); padding:0 0 16px; align-content:center; gap:11px }
  .hero { padding-bottom:9px; gap:5px }
  .hero .mascot { --face:75px }
  .suggestions { gap:5px }
  .suggestions .pill { white-space:normal;text-align:center;padding:6px 8px }
  .page { padding:12px 0 26px; gap:14px }
  .page-heading { gap:8px }
  .page-heading p { font-size:14px }
  .grid { grid-template-columns:1fr }
  .thread { padding-bottom:5px; }
  .thread .composer textarea { min-height:43px }
  dialog { position:fixed; bottom:0; width:100%; margin:auto 0 0; max-height:90dvh; border-radius:26px 26px 0 0; padding-bottom:max(18px,env(safe-area-inset-bottom)); background:var(--glass); backdrop-filter:blur(20px) saturate(180%) }
  .auth { padding:22px max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-bottom)); gap:18px }
  .stickers { display:block; position:absolute; inset:0; pointer-events:none }
  .sticker { position:absolute; width:max-content; padding:9px 14px; border-radius:16px; box-shadow:0 4px 0 #151618; color:#1d2023; font:800 26px/1 var(--display) }
  .sticker.pink { background:var(--pink); top:10%; left:28%; transform:rotate(8deg) }
  .sticker.mint { background:var(--mint); top:30%; left:-8px; transform:rotate(-15deg) }
  .sticker.yellow { background:#f5d576; top:44%; right:4px; transform:rotate(12deg) }
  .stickers .mascot { position:absolute; --face:100px; top:15%; right:-8px; transform:rotate(-13deg) }
  .stickers .mascot:first-child { top:5%; left:-9px; transform:rotate(-12deg) }
  .toast { bottom:84px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important } }