/* Turnkey CFO client portal. Light cream world, one emerald accent, frosted
   glass over the elemental background. Every colour is painted explicitly so
   nothing borrows a system theme. */
:root{
  --ink:#0A0A0A; --ink-2:#2B332E; --muted:#5C6660; --faint:#8A938C;
  --cream:#FBFAF7; --accent:#00E676; --accent-deep:#00894A; --accent-ink:#062A16;
  --client:#00E676;                       /* overridden per client at login */
  --glass:rgba(255,255,255,.74);
  --glass-2:rgba(255,255,255,.90);
  --line:rgba(10,10,10,.09);
  --edge:rgba(255,255,255,.85);
  --shadow:0 18px 44px rgba(10,40,26,.13), 0 2px 8px rgba(10,40,26,.07);
  --tabbar:76px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:'Plus Jakarta Sans',Segoe UI,system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
  overflow:hidden;
}

/* ---------- the ground: elemental ribbons, fixed, drifting slowly ---------- */
#bg{
  position:fixed; inset:-6% -6% -6% -6%; z-index:0;
  background-image:url("/bg-mobile.webp");
  background-size:cover; background-position:center;
  will-change:transform;
}
#bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,250,247,.30) 0%, rgba(251,250,247,.52) 46%, rgba(251,250,247,.78) 100%);
}
@media (min-width:820px){ #bg{ background-image:url("/bg-desktop.webp"); } }
/* The ground is still. Motion belongs to the load and to the send, and to
   nothing else (peer review r1, item 18). */

/* ---------------------------------------------------------------- shell -- */
.app{
  position:relative; z-index:1; display:flex; flex-direction:column;
  max-width:1200px; margin:0 auto; width:100%;
  /* --vh is written by the visualViewport listener in app.js; 100dvh is the
     fallback for a browser that has none. On iOS Safari dvh does NOT shrink for
     the keyboard, which is how the composer ended up underneath it. */
  height:100dvh; height:var(--vh, 100dvh);
}
header{ padding:calc(env(safe-area-inset-top) + 14px) 18px 4px; flex:none; }
.brandbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* 220 on a phone, 300 on a desktop. On the login screen the mark is the hero and
   gets the full width. In the header it shares the row with the client's own
   mark, so each is capped at a share of the row rather than wrapping to two
   lines and eating half the screen. */
.logo{ width:220px; max-width:min(220px, 34vw); height:auto; display:block; flex:none; }
.app.out .logo{ max-width:min(220px, 64vw); }
.lockup{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
.lockup .with{ flex:none; color:var(--faint); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
/* The client's mark at the same visual weight as ours, never a 44px afterthought. */
.clientlogo{ height:auto; width:auto; max-height:56px; max-width:min(220px, 34vw); object-fit:contain; display:block; flex:none; }

/* On a phone the two marks own the first row and the account line sits under
   them, right aligned. Cramming all three onto one row put the client's name on
   top of our logo. */
@media (max-width:819px){
  .spacer{ display:none }
  .lockup{ flex:1 1 100% }
  .who{ width:100%; margin-left:0; display:flex; align-items:baseline;
        justify-content:space-between; gap:12px; margin-top:2px }
  .brandbar .who b{ max-width:none; flex:1 1 auto; min-width:0; text-align:left }
}

/* Logged out there is no client yet, so the mark sits centred over the one panel. */
.app.out header{ padding-top:calc(env(safe-area-inset-top) + 30px); }
.app.out .brandbar{ justify-content:center; }
.app.out .lockup{ justify-content:center; }
.app.out main{ align-items:center; }
.app.out .stack{ width:100%; }
.spacer{ flex:1 }
.who{ margin-left:auto; flex:none; text-align:right; font-size:12px; color:var(--muted); font-weight:600; line-height:1.35; }
.who b{ display:block; color:var(--ink); font-size:13px; font-weight:800; max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:820px){ .who{ font-size:12.5px } .who b{ font-size:14px; max-width:none } }
.signout{ font:inherit; font-size:12px; font-weight:600; background:none; border:0; color:var(--muted); cursor:pointer; padding:2px 0; text-decoration:underline; }

/* ------------------------------------------------------------- desktop nav */
.railnav{ display:none; gap:6px; margin:14px 0 0; }
.railnav button{
  font:inherit; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer;
  background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:relative;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.railnav button:hover{ transform:translateY(-1px) }
.railnav button[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ------------------------------------------------------------------ main -- */
main{ flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 18px 0; }
.view{ display:none; flex:1; min-height:0; }
.view.on{ display:flex; flex-direction:column; }
.scroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:20px; }
.stack{ display:flex; flex-direction:column; gap:14px; }

/* ----------------------------------------------------------------- glass -- */
.panel{
  background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:20px;
  backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.panel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, var(--edge), rgba(255,255,255,0) 62%);
}
.panel.solid{ background:var(--glass-2) }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
h1{ font-size:26px; line-height:1.2; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
h2{ font-size:18px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
p{ margin:0 0 12px }
p:last-child{ margin-bottom:0 }
.sub{ color:var(--muted); font-size:14px; }
.big{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }

/* ------------------------------------------------------------------ rail -- */
.rail{ display:flex; align-items:flex-start; margin:18px 0 14px; }
.step{ flex:1; text-align:center; position:relative; }
.step .dot{
  width:16px; height:16px; border-radius:50%; margin:0 auto 8px;
  background:#fff; border:2px solid var(--line); position:relative; z-index:2;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.step .bar{ position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--line); z-index:1; }
.step:first-child .bar{ display:none }
.step.done .dot{ background:var(--accent); border-color:var(--accent); }
.step.done .bar{ background:var(--accent) }
.step.now .dot{ background:var(--accent); border-color:var(--accent); transform:scale(1.35); box-shadow:0 0 0 6px rgba(0,230,118,.20); }
.step .lbl{ font-size:11.5px; font-weight:700; color:var(--faint); line-height:1.25; padding:0 2px; }
.step.done .lbl,.step.now .lbl{ color:var(--ink) }
/* The active dot is bigger and haloed. It does not also pulse forever. */

/* ----------------------------------------------------------------- chips -- */
.chiprow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.chip{
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:999px;
  padding:6px 13px; cursor:pointer; text-align:left;
}
.chip.tint{ background:color-mix(in srgb, var(--client) 15%, #fff); border-color:color-mix(in srgb, var(--client) 34%, #fff); }
.pill{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:4px 10px; background:color-mix(in srgb, var(--client) 18%, #fff);
  color:var(--ink); border:1px solid color-mix(in srgb, var(--client) 36%, #fff);
}

/* --------------------------------------------------------------- buttons -- */
.btn{
  font:inherit; font-weight:800; font-size:15px; border:0; border-radius:14px; padding:13px 20px;
  cursor:pointer; background:var(--accent); color:var(--accent-ink);
  box-shadow:0 8px 20px rgba(0,230,118,.28); transition:transform .12s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,230,118,.34) }
.btn:active{ transform:translateY(1px) scale(.985); box-shadow:0 4px 12px rgba(0,230,118,.26) }
.btn[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none }
.btn.quiet{
  background:rgba(255,255,255,.86); color:var(--ink); border:1px solid var(--line); box-shadow:none;
}
.btn.quiet:hover{ box-shadow:0 6px 16px rgba(10,40,26,.10) }
.btn.link{ background:none; border:0; box-shadow:none; color:var(--muted); font-weight:600; padding:12px 2px; text-decoration:underline; }
.btn.small{ font-size:13.5px; padding:9px 15px; border-radius:12px }
a.btn{ display:inline-block; text-decoration:none; text-align:center }
:where(button,a,input,textarea):focus-visible{ outline:3px solid var(--accent-deep); outline-offset:2px }

/* ------------------------------------------------------------------ form -- */
label{ display:block; font-weight:700; font-size:13px; margin:0 0 7px }
input[type=email],input[type=text]{
  width:100%; font:inherit; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:rgba(255,255,255,.94); color:var(--ink);
}
input[type=text]#code{ letter-spacing:.34em; font-weight:800; font-size:19px; text-align:center }
.row{ display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap }
.err{ color:#B3261E; font-size:13.5px; margin-top:12px; font-weight:600 }
.note{ color:var(--muted); font-size:13px; margin-top:12px }
.hide{ display:none !important }

/* -------------------------------------------------------------- messages -- */
#list{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:12px; padding:6px 2px 14px;
}
.sep{ align-self:center; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  margin:8px 0 2px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:999px; padding:3px 12px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.newline{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.newline i{ flex:1; height:1px; background:color-mix(in srgb, var(--accent) 55%, #fff) }
.newline span{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-deep) }
.msg{ max-width:82%; display:flex; flex-direction:column }
.msg.mine{ align-self:flex-end; align-items:flex-end }
.author{ font-size:11px; font-weight:700; color:var(--ink-2); margin:0 0 5px; align-self:flex-start;
  background:rgba(255,255,255,.72); border-radius:999px; padding:2px 9px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.msg.mine .author{ align-self:flex-end }
.tag{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:1px 7px; margin-left:6px; color:var(--accent-deep);
  background:rgba(0,230,118,.14); border:1px solid rgba(0,230,118,.30);
}
.bubble{
  background:var(--glass-2); border:1px solid var(--line); border-radius:20px 20px 20px 6px;
  padding:12px 16px; white-space:pre-wrap; overflow-wrap:anywhere;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 6px 18px rgba(10,40,26,.08);
}
.mine .bubble{
  border-radius:20px 20px 6px 20px;
  background:color-mix(in srgb, var(--client) 16%, #fff);
  border-color:color-mix(in srgb, var(--client) 32%, #fff);
}
.mine.pending .bubble{ opacity:.6 }
.when{ font-size:10.5px; font-weight:600; color:var(--ink-2); margin-top:5px; align-self:flex-start;
  background:rgba(255,255,255,.66); border-radius:999px; padding:1px 8px }
.msg.mine .when{ align-self:flex-end }
.thumb{ margin-top:9px; border-radius:14px; overflow:hidden; border:1px solid var(--line); max-width:260px; background:#fff }
.thumb img{ display:block; width:100%; height:auto; cursor:pointer }
.empty{ margin:auto; text-align:center; color:var(--muted); padding:30px 16px; max-width:340px }
.empty .big{ margin-bottom:8px }

#composer{
  flex:none; padding:12px 0 14px; background:linear-gradient(180deg, rgba(251,250,247,0), rgba(251,250,247,.92) 34%);
}
.compbox{
  background:var(--glass-2); border:1px solid var(--line); border-radius:20px; padding:10px 12px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:var(--shadow);
}
textarea{
  width:100%; font:inherit; padding:6px 4px; border:0; background:none; color:var(--ink);
  resize:none; min-height:26px; max-height:150px;
}
textarea:focus{ outline:none }
.bar{ display:flex; gap:8px; align-items:center; margin-top:6px }
.state{ font-size:12.5px; color:var(--muted); font-weight:600 }
.drop{ position:fixed; inset:0; z-index:60; background:rgba(0,230,118,.13); border:3px dashed var(--accent-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:var(--accent-ink) }

/* -------------------------------------------------------------- observer -- */
.wholinks{ display:inline-flex; gap:14px }
.app.observer #composer, .app.observer #newConv, .app.observer .member{ opacity:.5; pointer-events:none }
.app.observer #sheet{ display:none !important }

/* ------------------------------------------------------------------ team -- */
.team{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-top:14px }
.member{
  font:inherit; text-align:center; cursor:pointer; border:1px solid var(--line); border-radius:18px;
  padding:16px 10px 14px; background:rgba(255,255,255,.62); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition:transform .12s ease, box-shadow .18s ease, background .15s ease;
}
.member:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,40,26,.10); background:rgba(255,255,255,.92) }
.member img{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:6px;
  border:3px solid #fff; box-shadow:0 4px 12px rgba(10,40,26,.14) }
.member .mname{ font-weight:800; font-size:14.5px }
.member .mrole{ font-size:11.5px; font-weight:600; color:var(--muted) }
.member .msg-cta{ margin-top:8px; font-size:12px; font-weight:800; color:var(--accent-deep);
  background:rgba(0,230,118,.13); border-radius:999px; padding:5px 11px }
#pickList{ margin-top:14px }

/* ------------------------------------------------------------- documents -- */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 10px; font-size:13px; font-weight:700 }
.crumbs button{ font:inherit; font-weight:700; border:0; background:none; color:var(--accent-deep); cursor:pointer; padding:2px 4px; border-radius:6px }
.crumbs button:hover{ background:rgba(0,230,118,.12) }
.crumbs button[disabled]{ color:var(--ink); cursor:default; background:none }
.crumbs .sep2{ color:var(--faint) }
.panel.docs{ padding:16px 12px 12px }
.panel.docs .crumbs{ padding:0 6px }
.files{ display:flex; flex-direction:column; gap:4px; margin-top:4px }
.file{
  display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:12px; width:100%;
  font:inherit; text-align:left; border:0; border-radius:14px; padding:11px 10px; cursor:pointer;
  background:rgba(255,255,255,.55); color:var(--ink); transition:background .15s ease, transform .12s ease;
}
.file:hover{ background:rgba(255,255,255,.92); transform:translateY(-1px) }
.file:active{ transform:translateY(0) }
.file.busy{ opacity:.55; cursor:progress }
.file svg{ width:22px; height:22px; stroke:var(--ink-2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.file.isdir svg:first-child{ stroke:var(--accent-deep); fill:rgba(0,230,118,.14) }
.file .fname{ font-weight:700; font-size:14.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file .fmeta{ font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; text-align:right }
.file .fmeta i{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--faint); vertical-align:middle; margin:0 2px }
.file.isdir{ grid-template-columns:24px 1fr auto 16px }
.file .chev{ width:16px; height:16px; stroke:var(--faint) }
.docnote{ font-size:12.5px; padding:0 6px }
.linkish{ font:inherit; font-weight:700; border:0; background:none; padding:0; color:var(--accent-deep); cursor:pointer; text-decoration:underline }
@media (max-width:420px){ .file .fmeta{ font-size:11px } .file .fmeta .dt, .file .fmeta i{ display:none } }

/* --------------------------------------------------------- conversations */
/* Two panes. Under 820px the pair is twice the width of the screen and slides
   sideways, so the list and the conversation are one gesture apart. Above it
   both are on screen, list left. */
#v-messages{ overflow:hidden }
.panes{ flex:1; min-height:0; display:flex; width:200%; transform:translateX(0); }
.pane{ flex:0 0 50%; min-width:0; min-height:0; display:flex; flex-direction:column; }
.panes.onthread{ transform:translateX(-50%) }
@media (prefers-reduced-motion:no-preference){
  .panes{ transition:transform .3s cubic-bezier(.22,.7,.3,1) }
}

.convhead{ display:flex; align-items:center; gap:10px; flex:none; padding:2px 2px 10px }
.convhead h2{ margin:0; font-size:16px }
.convhead .btn{ margin-left:auto; white-space:nowrap }
.convs{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
        display:flex; flex-direction:column; gap:8px; padding:0 2px 16px }

.conv{
  position:relative; width:100%; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:13px 44px 12px 14px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background .15s ease, transform .12s ease, border-color .15s ease;
}
.conv:hover{ background:var(--glass-2); transform:translateY(-1px) }
.conv.on{ border-color:color-mix(in srgb, var(--accent) 50%, #fff); background:var(--glass-2) }
.conv.pinned{ background:color-mix(in srgb, var(--accent) 7%, var(--glass-2)) }
.convtop{ display:flex; align-items:baseline; gap:8px }
.convtop b{ font-size:14.5px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.conv .ago{ margin-left:auto; flex:none; font-size:11px; font-weight:700; color:var(--faint) }
.minis{ display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0 }
.mini{
  font-size:10.5px; font-weight:700; color:var(--ink-2); border-radius:999px; padding:2px 9px;
  background:rgba(255,255,255,.80); border:1px solid var(--line);
}
/* A Turnkey person carries the emerald dot. A client's own colleague does not,
   so it is obvious at a glance which side of the table someone sits on. */
.mini.tk{ color:var(--accent-ink); background:rgba(0,230,118,.13); border-color:rgba(0,230,118,.30) }
.mini.tk::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent-deep); margin-right:5px; vertical-align:1px }
.conv .prev{ margin-top:8px; font-size:12.5px; color:var(--muted); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.conv .badge{ top:12px; right:12px }

/* ------------------------------------------------------- conversation head */
.thhead{ flex:none; display:flex; align-items:center; gap:10px; padding:2px 2px 10px }
.thtitle{ min-width:0; flex:1 1 auto }
.thtitle b{ display:block; font-size:16px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.thtitle span{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px }
.backbtn{
  flex:none; width:36px; height:36px; border-radius:12px; border:1px solid var(--line); cursor:pointer;
  background:rgba(255,255,255,.86); display:flex; align-items:center; justify-content:center;
}
.backbtn svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* --------------------------------------------------------------- the sheet */
.sheetwrap{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center }
.sheetbg{ position:absolute; inset:0; background:rgba(10,20,15,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.sheet{
  position:relative; width:100%; max-width:560px; max-height:92%; display:flex; flex-direction:column;
  background:var(--cream); border:1px solid var(--line); border-radius:24px 24px 0 0;
  box-shadow:0 -18px 50px rgba(10,40,26,.22);
}
@media (prefers-reduced-motion:no-preference){
  .sheet{ animation:sheetup .28s cubic-bezier(.16,.84,.32,1) both }
  @keyframes sheetup{ from{ transform:translateY(26px); opacity:0 } to{ transform:none; opacity:1 } }
}
.sheethead{ flex:none; display:flex; align-items:center; gap:10px; padding:18px 20px 6px }
.sheethead h2{ margin:0; font-size:19px }
.closebtn{ margin-left:auto; flex:none; width:34px; height:34px; border-radius:11px; border:0; cursor:pointer;
  background:rgba(10,10,10,.05); display:flex; align-items:center; justify-content:center }
.closebtn svg{ width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:2.2; stroke-linecap:round }
.sheetbody{ flex:1; min-height:0; overflow-y:auto; padding:10px 20px 4px }
.sheetbody textarea{ border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.94); padding:12px 14px }
.grouplab{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:18px 0 0 }
.opt{ font-weight:600; color:var(--faint) }
.pick{ margin-top:8px }
.pickchip{ padding:8px 14px; font-size:13px; opacity:.72 }
.pickchip.tk::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent-deep); margin-right:7px; vertical-align:1px }
.pickchip.on{ opacity:1; background:color-mix(in srgb, var(--accent) 16%, #fff);
  border-color:color-mix(in srgb, var(--accent) 46%, #fff) }
.sheetfoot{ flex:none; display:flex; align-items:center; gap:10px; padding:12px 20px calc(env(safe-area-inset-bottom) + 16px);
  border-top:1px solid var(--line) }

@media (min-width:820px){
  .panes{ width:100%; transform:none }
  .panes.onthread{ transform:none }
  .paneList{ flex:0 0 320px; max-width:320px; border-right:1px solid var(--line); padding-right:16px }
  .paneThread{ flex:1 1 auto; padding-left:18px }
  .backbtn{ display:none }
  .sheetwrap{ align-items:center }
  .sheet{ border-radius:24px; max-height:82% }
}

/* -------------------------------------------------------------- tab bar --- */
.tabbar{
  flex:none; display:flex; gap:4px; padding:8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background:var(--glass-2); border-top:1px solid var(--line);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
}
.tabbar button{
  flex:1; font:inherit; font-size:11px; font-weight:700; color:var(--muted); background:none; border:0;
  border-radius:14px; padding:7px 2px 5px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:3px; position:relative; transition:color .18s ease, background .18s ease;
}
.tabbar button svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.tabbar button[aria-selected="true"]{ color:var(--ink); background:rgba(0,230,118,.13) }
.badge{
  position:absolute; top:2px; right:calc(50% - 22px); min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--accent); color:var(--accent-ink);
  font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
}
.railnav .badge{ position:static; margin-left:7px; display:inline-block; vertical-align:1px }

#confetti{ position:fixed; inset:0; z-index:70; pointer-events:none }

/* ------------------------------------------------------------- entrance --- */
@media (prefers-reduced-motion:no-preference){
  .rise{ animation:rise .62s cubic-bezier(.16,.84,.32,1) both }
  .rise:nth-child(2){ animation-delay:.07s } .rise:nth-child(3){ animation-delay:.14s }
  .rise:nth-child(4){ animation-delay:.21s } .rise:nth-child(5){ animation-delay:.28s }
  @keyframes rise{ from{opacity:0; transform:translateY(16px) scale(.985)} to{opacity:1; transform:none} }
  .logo{ animation:settle .8s cubic-bezier(.16,.84,.32,1) both }
  @keyframes settle{ from{opacity:0; transform:translateY(-10px) scale(.94)} to{opacity:1; transform:none} }
  h1.greet{ animation:fadein .7s ease-out .16s both }
  @keyframes fadein{ from{opacity:0} to{opacity:1} }
  /* The send micro-interaction: a new bubble arrives, it does not just appear. */
  .msg{ animation:pop .22s ease-out both }
  @keyframes pop{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
}

/* --------------------------------------------------------------- layout --- */
@media (min-width:820px){
  .logo{ width:300px; max-width:300px }
  .app.out .logo{ max-width:300px }
  .clientlogo{ max-height:72px; max-width:260px }
  header{ padding:26px 28px 4px }
  main{ padding:10px 28px 20px }
  .railnav{ display:flex }
  .tabbar{ display:none }
  h1{ font-size:32px }
  .stack{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
  .stack .wide{ grid-column:1 / -1 }
  .msg{ max-width:64% }
}
@media (max-width:400px){ header{padding-left:14px;padding-right:14px} main{padding-left:14px;padding-right:14px} }

/* ------------------------------------------------------- delivered, quietly */
/* Under prefers-reduced-motion there is no confetti, so the moment is a card
   rather than nothing at all (peer review r1, L1). */
.done-card{
  display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px 16px;
  border-radius:16px; background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.34);
}
.done-card .mark{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.done-card .mark svg{ width:20px; height:20px; stroke:var(--accent-ink); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.done-card b{ font-size:15px; font-weight:800; display:block }
.done-card span{ font-size:13px; color:var(--muted); font-weight:600 }

/* --------------------------------------------------- classes, not attributes */
/* The CSP has no 'unsafe-inline', and style-src-attr falls back to style-src, so
   an inline style="" attribute is blocked as surely as an inline <style>. These
   four replace the ones the page used to carry. */
.loginbox{ max-width:520px }
.mt6{ margin-top:6px }
.mt18{ margin-top:18px }