/* Mr Pea - one stylesheet for the sign-in page, the customer app and the admin app.
   CSP is style-src 'self': no inline style attributes anywhere, so every look lives here.
   Tokens: warm paper + one sage-green accent (same family as Jay's prisma-crm); chat bubbles follow wa-hub; left nav follows rainbow-ai. */
:root{
  --paper:#faf9f6; --card:#ffffff; --ink:#201c16; --muted:#5c5548; --line:#e6e2d9; --line-strong:#cfc9bc;
  --nav-bg:#f1efe8; --nav-hover:#e6e3d9; --nav-active:#ffffff;
  --accent:#2f6f4f; --accent-ink:#ffffff; --accent-strong:#245a40; --accent-soft:#e3efe8;
  --warn:#7a4b00; --warn-soft:#fbf0d9; --bad:#b23b3b; --bad-soft:#f9e6e6; --ok:#2f6f4f;
  --me:#e3efe7; --pea:#ffffff; --code-bg:#f3f1ea; --focus:#1f5fbf;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(32,28,22,.06),0 4px 14px rgba(32,28,22,.06);
  --nav-w:264px; --bar-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16140f; --card:#201d17; --ink:#f0ece3; --muted:#a9a293; --line:#322e25; --line-strong:#463f33;
    --nav-bg:#1b1812; --nav-hover:#28241c; --nav-active:#2f2a20;
    --accent:#7fd1a1; --accent-ink:#0e1a13; --accent-strong:#9be0b6; --accent-soft:#1f3328;
    --warn:#f0c36a; --warn-soft:#352a12; --bad:#f19a9a; --bad-soft:#3a1e1e; --ok:#7fd1a1;
    --me:#24402f; --pea:#26221a; --code-bg:#1b1812; --focus:#8ab8ff;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans CJK SC",sans-serif}
h1,h2,h3{line-height:1.25;margin:0}
h1{font-size:26px} h2{font-size:20px} h3{font-size:17px}
p{margin:0 0 10px}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)} .small{font-size:14px}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.err{color:var(--bad)} .ok{color:var(--ok)}
[hidden]{display:none !important}

/* ---------- buttons, fields ---------- */
button,.btn{font:inherit;font-weight:600;min-height:44px;padding:9px 18px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button:hover,.btn:hover{background:var(--nav-hover)}
button:disabled{opacity:.55;cursor:default}
.btn-primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,button.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-danger{border-color:var(--bad);color:var(--bad);background:transparent}
.btn-big{min-height:56px;font-size:18px;padding:12px 26px;border-radius:var(--r-lg)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 12px;min-height:44px;width:100%}
textarea{resize:none;line-height:1.4}
select{appearance:auto}
label.field{display:block;font-weight:600;font-size:15px;margin-bottom:14px}
label.field>input,label.field>select,label.field>textarea{margin-top:6px;font-weight:400}
.spaced{margin:16px 0 0}
.hint{font-weight:400;color:var(--muted);font-size:14px;display:block;margin-top:4px}
input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent);flex:none}

/* ---------- app shell: left navigation + main ---------- */
body.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.sidebar{width:var(--nav-w);flex:none;background:var(--nav-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;z-index:30}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px;font-weight:700;font-size:20px;text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:20px;font-weight:800}
.brand small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--nav-hover)}
.nav a[aria-current=page]{background:var(--nav-active);box-shadow:var(--shadow);color:var(--accent)}
.nav svg,.btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--bad);color:#fff;font-size:13px;display:grid;place-items:center}
.nav-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.who{padding:0 10px;font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who b{display:block;color:var(--ink);font-size:15px}
.nav-foot .btn-ghost{justify-content:flex-start;color:var(--ink)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--bar-h);flex:none;display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--line)}
.topbar h1{font-size:20px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar h1 small{font-size:14px;font-weight:400;color:var(--muted);margin-left:8px}
.menu-btn{display:none;padding:0;width:44px;flex:none}
.menu-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.pick{display:flex;align-items:center;gap:8px;flex:none}
.pick span{font-size:14px;color:var(--muted)}
.pick select{width:auto;min-width:200px;max-width:320px;font-weight:600}
.content{flex:1;overflow-y:auto;padding:24px}
.page{max-width:820px;margin:0 auto}
.page-wide{max-width:1040px;margin:0 auto}
body:not([data-role=admin]) .foot{display:none}
.foot{padding:18px 0 4px;text-align:center;font-size:13px;color:var(--muted)}
.scrim{display:none}

/* ---------- cards, lists, pills ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card>h2{margin-bottom:4px}
.card>.lead{color:var(--muted);margin-bottom:14px}
.card h3{margin:18px 0 6px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row>.grow{flex:1 1 180px}
.list{list-style:none;margin:0;padding:0}
.list>li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.list>li:first-child{border-top:0}
.list .what{min-width:0;flex:1 1 220px}
.list .what b{display:block}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:3px 12px;border-radius:999px;background:var(--code-bg);color:var(--muted);white-space:nowrap}
.pill.good{background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.empty{color:var(--muted);padding:10px 0;font-style:italic}
.notice-line{background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:10px 14px;font-size:15px}
.notice-line.good{background:var(--accent-soft);color:var(--accent)}
.banner{background:var(--warn-soft);color:var(--warn);padding:10px 14px;border-radius:var(--r);margin-bottom:14px;font-size:15px}
details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent);font-weight:600;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:8px;height:8px;margin-right:12px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s;flex:none}
details[open]>summary::before{transform:rotate(45deg)}
details.fold{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
details.fold>summary{font-size:17px;color:var(--ink)}

pre.diff{margin:0;padding:12px;background:var(--code-bg);border-radius:var(--r-sm);overflow-x:auto;font:13px/1.45 ui-monospace,Consolas,monospace;white-space:pre}
pre.diff .add{color:var(--ok)} pre.diff .del{color:var(--bad)} pre.diff .hunk{color:var(--muted)}
blockquote.quote{margin:6px 0;padding:6px 12px;border-left:3px solid var(--line-strong);color:var(--muted);font-size:14px;white-space:pre-wrap}
.perm-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}
.perm-row:first-of-type{border-top:0}
.perm-row b{display:block}
label.perm-row{cursor:pointer;justify-content:flex-start;gap:14px}
.perm-row .grow{flex:1;min-width:0}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;word-break:break-word}
.chips-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chips-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}

/* ---------- sign-in ---------- */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px}
.auth-card{width:100%;max-width:440px}
.auth-card .brand{justify-content:center;padding-bottom:6px}
.auth-card .tag{text-align:center;color:var(--muted);margin-bottom:20px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.names button{min-height:56px;font-size:17px}

/* ---------- chat ---------- */
.chat-pane{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--paper)}
.strip{flex:none;background:var(--card);border-bottom:1px solid var(--line)}
.strip-head{width:100%;border:0;border-radius:0;background:transparent;justify-content:flex-start;gap:14px;padding:6px 24px;min-height:56px;font-weight:600}
.strip-head:hover{background:var(--code-bg)}
.segs{display:flex;gap:4px}
.seg{width:20px;height:8px;border-radius:4px;background:var(--line-strong)}
.seg.on{background:var(--accent)}
.strip-text{flex:1;text-align:left;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.strip-link{font-weight:600;font-size:14px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.strip-head .chev{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .15s}
.strip-head[aria-expanded=true] .chev{transform:rotate(180deg)}
.strip-body{padding:0 24px 16px;max-height:42vh;overflow-y:auto}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checklist li{display:flex;gap:10px;align-items:baseline}
.checklist .tick{width:22px;flex:none;font-weight:800;color:var(--muted)}
.checklist .got .tick{color:var(--accent)}
.checklist .todo{color:var(--muted)}
.checklist b{font-weight:600}
.strip-body p{margin:10px 0 0}
.messages{flex:1;min-height:0;overflow-y:auto;padding:20px 24px 32px;display:flex;flex-direction:column;gap:6px}
.inner{width:100%;max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.day{align-self:center;font-size:13px;color:var(--muted);background:var(--code-bg);padding:2px 12px;border-radius:999px;margin:10px 0 4px}
.msg{font-size:17px;line-height:1.5;max-width:min(78%,560px);padding:10px 14px;border-radius:var(--r-lg);background:var(--pea);border:1px solid var(--line);box-shadow:0 1px 1px rgba(32,28,22,.04);word-wrap:break-word;overflow-wrap:anywhere}
.msg.customer{align-self:flex-end;background:var(--me);border-color:transparent;border-bottom-right-radius:4px}
.msg.mrpea,.msg.system{align-self:flex-start;border-bottom-left-radius:4px}
.msg .text{white-space:pre-wrap}
.msg time{display:block;text-align:right;font-size:13px;color:var(--muted);margin-top:2px}
.msg.t-status,.msg.t-system_notice{align-self:center;max-width:min(92%,620px);background:var(--code-bg);border-style:dashed;text-align:center;font-size:15px;box-shadow:none}
.msg.t-status time,.msg.t-system_notice time{text-align:center}
.msg.t-system_notice{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.msg.t-mockup,.msg.t-diff,.msg.t-preview_link,.msg.t-approval_request{align-self:stretch;max-width:none;width:100%;padding:14px 16px;border-radius:var(--r);background:var(--accent-soft);border-color:transparent;margin:6px 0}
.msg .kicker{font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--accent)}
.msg.t-mockup{background:var(--card);border-color:var(--line)}
.msg.t-approval_request{border-left:5px solid var(--accent)}
.msg.t-approval_request.jay{border-left-color:var(--warn);background:var(--warn-soft)}
.msg.t-approval_request.jay .kicker,.msg.t-approval_request.jay .ico{color:var(--warn)}
.msg img.mock{display:block;width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:8px}
.msg .btn{margin-top:8px}
.msg details{margin-top:4px}
.typing{align-self:flex-start;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-lg);border-bottom-left-radius:4px;background:var(--pea);border:1px solid var(--line);color:var(--muted);font-size:15px}
.dots{display:inline-flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bob 1.2s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.hello{margin:auto;text-align:center;max-width:560px;padding:12px 0 24px}
.hello .brand-mark{width:64px;height:64px;font-size:32px;margin:0 auto 14px}
.hello h2{font-size:26px;margin-bottom:8px}
.hello p{color:var(--muted);font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.chip{min-height:48px;border-radius:999px;padding:8px 20px;background:var(--card);border:1.5px solid var(--accent);color:var(--accent);font-weight:600}
.chip:hover{background:var(--accent-soft)}
.dock{position:relative;flex:none;background:var(--paper);border-top:1px solid var(--line);padding:12px 24px 16px}
.dock .inner{gap:10px}
.confirm-card{background:var(--accent-soft);border:2px solid var(--accent);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.confirm-card .txt{display:flex;flex-direction:column}
.conf-what{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.confirm-details{border-top:1px solid var(--line-strong)}
.confirm-details .checklist{padding-bottom:6px;max-height:30vh;overflow-y:auto}
.conf-actions{display:flex;gap:10px;align-items:center}
.conf-actions .btn-big{flex:1 1 auto}
.conf-actions .btn:not(.btn-big){min-width:96px}
@media (min-width:821px){.confirm-details .checklist{grid-template-columns:1fr 1fr;gap:6px 24px}}
.confirm-card .txt b{display:block;font-size:17px}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;max-height:160px;min-height:48px}
.composer button{min-height:48px;padding:0 24px}
.status-line{min-height:20px;font-size:14px;margin:0}

/* ---------- admin ---------- */
.stat{display:flex;gap:6px;flex-wrap:wrap}
.sha{font:14px ui-monospace,Consolas,monospace;background:var(--code-bg);padding:2px 8px;border-radius:6px}
.approve-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.approve-form label{flex:1 1 220px;font-weight:600;font-size:14px}
.approve-form input{margin-top:4px;font:14px ui-monospace,Consolas,monospace}
.act-row{padding:12px 0;border-top:1px solid var(--line)}
.act-row:first-child{border-top:0}
.act-row .when{font-size:13px;color:var(--muted)}
.act-row pre{margin:6px 0 0;padding:10px;background:var(--code-bg);border-radius:var(--r-sm);overflow-x:auto;font:12.5px/1.4 ui-monospace,Consolas,monospace;white-space:pre-wrap}
.sugg{padding:10px 0;border-top:1px solid var(--line)}
.dot.online{background:var(--ok)} .dot.slow{background:var(--warn)} .dot.offline{background:var(--bad)}
.brain{display:flex;align-items:center;gap:12px}

/* ---------- round 2 ---------- */
.dot{width:12px;height:12px;border-radius:50%;background:var(--line-strong);display:inline-block;flex:none}
.chat-online{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ok);background:var(--accent-soft);padding:3px 12px;border-radius:999px;min-width:0}
.chat-online .dot{width:9px;height:9px;background:var(--ok)}
.chat-online.away{color:var(--muted);background:var(--code-bg)}
.chat-online.away .dot{background:var(--line-strong)}
.chat-online span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-label{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:var(--muted);font-weight:600}
.pick-label svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pick select{font-size:16px;min-height:44px}
.topbar h1{flex:0 1 auto}
.topbar .pick{margin-left:auto}
.drawer-close{display:none;position:absolute;top:10px;right:10px;width:44px;padding:0}
.drawer-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sidebar{position:relative}
.menu-btn span{font-size:15px}
.tabbar{display:none}
.state-chip{display:inline-flex;align-items:center;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.state-chip.good{background:var(--accent);color:var(--accent-ink)}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.card-head .ico{color:var(--accent)}
.card-head .state-chip{margin-left:auto}
.strip-body .cap{margin-top:0}
@media (min-width:821px){.strip-body .checklist{grid-template-columns:1fr 1fr;gap:6px 24px}}
.strip.is-confirm .strip-link{display:none}
.dock::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px;background:linear-gradient(rgba(250,249,246,0),var(--paper));pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dock::before{background:linear-gradient(rgba(22,20,15,0),var(--paper))}}

/* tabs that really switch panels */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-strong);margin-bottom:18px;overflow-x:auto;scrollbar-width:thin}
.tabs [role=tab]{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);padding:0 16px;min-height:48px;white-space:nowrap;margin-bottom:-1px}
.tabs [role=tab]:hover{background:var(--code-bg)}
.tabs [role=tab][aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}

/* settings (customer) */
.perm-row .ask{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.btn-small{min-height:44px;padding:6px 14px;font-size:15px}
.form-box{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:14px;background:var(--paper)}

/* admin */
.brain-pill{display:flex;align-items:center;gap:8px;margin:0 10px;padding:6px 12px;border-radius:999px;background:var(--code-bg);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;min-height:44px}
.brain-pill .dot{width:10px;height:10px}
.banner-link{display:flex;align-items:center;gap:10px;background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:12px 16px;margin-bottom:16px;font-weight:700;text-decoration:none;min-height:48px}
.banner-link .go{margin-left:auto;text-decoration:underline}
.savebar{position:sticky;bottom:-24px;display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--card);border-top:1px solid var(--line-strong);padding:12px 0;margin-top:16px;z-index:5}
.savebar .hint{margin:0}
.savebar.dirty .hint{color:var(--warn);font-weight:700}
.proj-acc{border:1px solid var(--line);border-radius:var(--r);padding:0 14px;margin-top:12px}
.proj-acc>summary{font-size:17px;font-weight:700;color:var(--ink)}
.proj-acc>summary .count{margin-left:auto;font-weight:600;font-size:14px;color:var(--muted)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:96px;border:2px dashed var(--line-strong);border-radius:var(--r);padding:14px;cursor:pointer;position:relative;background:var(--paper);font-weight:400}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;min-height:0}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.drop .ico{color:var(--accent);width:28px;height:28px}
.drop .fname{font-weight:700}
.row .drop{flex:1 1 260px}
.sha-chip{font:14px ui-monospace,Consolas,monospace;background:var(--code-bg);color:var(--muted);padding:6px 12px;border-radius:var(--r-sm)}
dialog.confirm{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:22px;max-width:min(92vw,420px);background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.confirm::backdrop{background:rgba(0,0,0,.45)}
dialog.confirm h2{margin-bottom:8px}
dialog.confirm .row{margin-top:16px;justify-content:flex-end}
.day-head{font-size:14px;font-weight:700;color:var(--muted);margin:18px 0 4px}
.act-row{display:flex;gap:12px;align-items:flex-start}
.act-ico{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.act-ico .ico{width:18px;height:18px}
.act-ico.warn{background:var(--warn-soft);color:var(--warn)}
.act-row .what{flex:1;min-width:0}
.act-row details>summary{min-height:32px;font-size:13px;color:var(--muted);font-weight:500}
.filter{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.filter select{max-width:280px}

/* ---------- phones: left nav becomes a slide-in drawer, tab bar at the bottom ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);transform:translateX(-102%);transition:transform .2s ease;box-shadow:none;padding-top:60px;visibility:hidden}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3);visibility:visible}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:20}
  .drawer-close{display:inline-flex}
  .menu-btn{display:inline-flex;width:auto;padding:0 10px}
  .topbar{height:auto;min-height:var(--bar-h);flex-wrap:wrap;padding:8px 12px;gap:8px}
  .topbar h1{flex:1 1 auto}
  .chat-online{max-width:62%}
  .pick{order:5;flex:1 1 100%;margin-left:0;flex-direction:column;align-items:stretch;gap:2px}
  .pick select{width:100%;min-width:0;max-width:none;text-overflow:ellipsis}
  .pick-label{font-size:14px}
  #pick.admin-pick{order:0;flex:1 1 40%;flex-direction:row;margin-left:auto}
  #pick.admin-pick .pick-label{display:none}
  .content{padding:16px}
  .messages{padding:14px 12px 28px}
  .dock{padding:10px 12px 12px}
  .strip-head,.strip-body{padding-left:12px;padding-right:12px}
  .strip.is-confirm{display:none}
  .msg{max-width:90%}
  .confirm-card{padding:10px 12px}
  .confirm-card .btn-big{min-height:52px;font-size:17px;padding:8px 14px}
  .confirm-card .txt .muted{display:none}
  .tabbar{display:flex;flex:none;background:var(--card);border-top:1px solid var(--line)}
  .tabbar a{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:700}
  .tabbar a[aria-current=page]{color:var(--accent)}
  .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body.app{flex-direction:column}
  body.app>.main{flex:1;min-height:0}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
  .card{padding:16px}
  .perm-row .ask{align-items:stretch}
  .savebar{bottom:-16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- round 3 ---------- */
:root{--page-w:960px;--amber:#b7791f;--info:#1f5fbf;--info-soft:#e6eefb;--violet:#6b3fa0;--violet-soft:#efe8f8;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6f4f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--amber:#f0c36a;--info:#8ab8ff;--info-soft:#1c2a40;--violet:#c9a8f0;--violet-soft:#2b2140;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd1a1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}}
.page,.page-wide{max-width:var(--page-w)}
.phone-only{display:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.summary-line{margin:14px 0 0;color:var(--muted)}

/* chat: the checklist is one quiet line; the list of answers opens on request and the choice is remembered */
.strip-head{min-height:44px;padding:4px 24px;gap:12px}
.strip-text{flex-direction:row;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.strip-text b{flex:none}
.strip-link{font-weight:500;text-decoration:none;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.strip-link:empty{display:none}
.strip.is-confirm{display:none}
.strip-body{max-height:30vh;border-top:1px solid var(--line);padding-top:10px}
.messages{scroll-padding-top:16px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px);mask-image:linear-gradient(to bottom,transparent 0,#000 18px)}
.messages .inner{flex:1}
.hello{margin:auto}
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;font-size:15px}
.steps li b{color:var(--accent)}
.steps li span{color:var(--muted);font-size:14px}
.chat-online.away{color:var(--warn);background:var(--warn-soft)}
.chat-online.away .dot{background:var(--amber)}
.away-line{margin:0;font-size:14px;color:var(--warn);background:var(--warn-soft);border-radius:var(--r);padding:8px 12px}
.pick-label,.pick .pick-label span{font-size:15px;font-weight:700;color:var(--ink)}
.pick select{appearance:none;-webkit-appearance:none;border:1.5px solid var(--accent);padding-right:42px;background:var(--card) var(--chev) no-repeat right 14px center/16px}
.confirm-card{margin-bottom:6px}
.conf-actions .btn{min-height:48px}
.conf-actions .btn-big{min-height:56px}

/* settings (customer) */
.tabs-fit{overflow:visible}
.tabs-fit [role=tab]{flex:1;padding:0 10px;white-space:normal;line-height:1.2}
.perm-title{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.perm-plain{border-top:1px solid var(--line)}
.perm-row .grow>span{display:block}
.proj-link{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 4px}
.proj-ask{padding:10px 0 14px}
.notice-line.good{margin-top:14px}
.example{display:block;color:var(--accent);margin-top:2px}
.acc-tools{display:flex;gap:6px;padding:2px 0 4px}

/* admin: one status component, amber when Mr Pea is not answering */
.dot.never,.dot.slow,.dot.offline{background:var(--amber)}
.brain-note{margin:4px 10px 0;font-size:13px;line-height:1.35;color:var(--muted)}
.brain{flex-wrap:wrap}
.brain .grow{flex:1 1 220px}
.menu-btn{position:relative}
.menu-btn .menu-badge{position:absolute;top:2px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--bad);color:#fff;font-size:12px;display:grid;place-items:center}
.inline-pill{margin-left:8px;vertical-align:middle}
#custList>li{flex-wrap:nowrap}
.savebar{bottom:0;margin:16px -20px -20px;padding:12px 20px;border-radius:0 0 var(--r-lg) var(--r-lg)}
.savebar .btn{flex:none}
.upload-box{display:grid;gap:10px;max-width:560px;margin-top:6px}
.upload-box label.field{margin:0}
.desk-only{display:inline}
#docList .btn-primary{min-height:44px}
.plain-sum{background:var(--accent-soft);border-radius:var(--r);padding:12px 16px;margin:10px 0}
.plain-sum b{color:var(--accent)}
.plain-sum p{margin:6px 0 0}
details.tech{margin-top:4px}
details.tech>summary{color:var(--muted);font-weight:500;font-size:14px}
.id-note{font-size:13px;color:var(--muted);margin:8px 0 0}
.approve-form .btn{min-height:48px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.chip-filter{min-height:44px;padding:4px 16px;border-radius:999px;font-size:14px}
.chip-filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.act-ico.t-perm{background:var(--accent-soft);color:var(--accent)}
.act-ico.t-doc{background:var(--info-soft);color:var(--info)}
.act-ico.t-chat{background:var(--violet-soft);color:var(--violet)}
.act-ico.t-live{background:var(--warn-soft);color:var(--warn)}
.act-ico.t-acct{background:var(--code-bg);color:var(--muted)}

@media (max-width:820px){
  /* customers: the bottom tabs are the one navigation (Chat, Settings); admins keep the drawer because they have four places to go */
  body:not([data-role=admin]) .menu-btn{display:none}
  body:not([data-role=admin]) .sidebar,body:not([data-role=admin]) .scrim{display:none !important}
  .phone-only{display:inline-flex}
  .desk-only{display:none}
  .topbar{flex-wrap:nowrap;min-height:56px;padding:6px 12px;gap:8px}
  .topbar h1{flex:0 1 auto;font-size:19px}
  .pick{order:0;flex:0 1 56%;margin-left:auto;flex-direction:row;min-width:0}
  .pick-label{display:none}
  .pick select{width:100%;min-width:0;font-size:15px}
  #pick.admin-pick{display:none}
  .chat-online{max-width:none;padding:0;background:transparent}
  .chat-online #onlineText{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .chat-online .dot{width:12px;height:12px}
  .strip-head{padding:4px 12px;gap:10px}
  .seg{width:14px}
  .strip-link{display:none}
  .strip-body{max-height:36vh}
  .tabs-fit{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:0}
  .tabs-fit [role=tab]{border:1px solid var(--line-strong);border-radius:var(--r);margin:0;min-height:44px}
  .tabs-fit [role=tab][aria-selected=true]{background:var(--accent-soft);border-color:var(--accent)}
  .content{padding:16px 16px 28px}
  .steps{grid-template-columns:1fr}
  .savebar{bottom:0;margin:16px -16px -16px;padding:12px 16px}
  .perm-row .ask{align-items:stretch}
}
.appr .text{white-space:pre-line}
.menu-btn .menu-badge{left:22px;right:auto;top:-2px}
.savebar{margin:16px -20px 0;box-shadow:0 -6px 12px rgba(32,28,22,.05)}
@media (max-width:820px){.savebar{margin:16px -16px 0}}
@media (max-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:8px}.steps li{padding:8px 10px;font-size:14px}.steps li span{display:none}}
.savebar{bottom:-24px}
@media (max-width:820px){.steps{display:none}.savebar{bottom:-28px}}

/* ---------- round 4 ---------- */
/* one look for every dropdown */
select{appearance:none;-webkit-appearance:none;padding-right:42px;background:var(--card) var(--chev) no-repeat right 14px center/16px}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--accent);text-decoration:underline;text-underline-offset:3px;padding:6px 12px}
.btn-quiet:hover{background:var(--accent-soft)}

/* chat: the message area starts below the progress strip and nothing is drawn over the text (no fade, no mask) */
.messages{-webkit-mask-image:none;mask-image:none;padding-top:16px}
.dock::before{display:none}
.chat-online{margin-left:0}
.chat-online.away{color:var(--warn)}
.away-line{background:var(--code-bg);color:var(--muted);text-align:center;padding:6px 10px}
.pick-box{position:relative;display:block}
.pick-face,.pl-m{display:none}
.strip-more{flex:none;font-size:14px;font-weight:600;color:var(--accent)}
.sm-m{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 16px}
.chip .ico{width:22px;height:22px}
.hello .hello-note{background:var(--code-bg);color:var(--ink);border-radius:var(--r);padding:10px 14px;font-size:15px;margin:12px 0}
.hello .lead-in{margin-top:16px}
.confirm-card .conf-actions .btn-big{width:100%}
.conf-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.confirm-list{border-top:1px solid var(--line-strong);padding-top:8px;max-height:30vh;overflow-y:auto}
.confirm-list .checklist{padding-bottom:6px}
@media (min-width:821px){.confirm-list .checklist{grid-template-columns:1fr 1fr;gap:6px 24px}}

/* customer settings */
.tabs-fit [role=tab]{flex:0 0 auto;padding:0 22px}
.perm-title{flex-wrap:nowrap;justify-content:space-between}
.perm-title b{flex:1;min-width:0}
.perm-title .pill{flex:none}
.acc-name{flex:1;min-width:0}
.acc-sub{margin:0 0 6px}
.ver-line{margin:12px 0 0}

/* admin */
.tabs-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.tabs-scroll [role=tab]{flex:0 0 auto}
#perms{padding-bottom:24px}
.approve-form{align-items:center}
.top-pill{margin:0 0 0 auto;min-height:36px;padding:4px 12px;font-size:14px}
.conv-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;cursor:pointer}
.conv-list{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:0 14px 6px}
.conv-list .day-head{margin:12px 0 2px}
.conv-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.day-head+.conv-row{border-top:0}
.conv-row input{margin-top:3px}
.conv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.conv-meta{display:flex;gap:4px 10px;align-items:center;flex-wrap:wrap}
.conv-row.r-mrpea .conv-meta b{color:var(--accent)}
.conv-text{white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.conv-row.is-archived{opacity:.65}
.conv-row.is-archived .conv-text{font-style:italic}
.tab-badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}

@media (max-width:820px){
  /* one phone navigation for everybody: the bottom tabs */
  .sidebar,.scrim,.menu-btn{display:none !important}
  .tabbar a{position:relative}
  /* chat header: row 1 = title + status pill, row 2 = "Talking about" + the project picker, full width, 44px, short name */
  body:not([data-role=admin]) .topbar{flex-wrap:wrap;min-height:0;padding:8px 12px 10px;gap:6px 10px}
  .topbar h1{flex:0 1 auto}
  .chat-online{max-width:none;padding:4px 12px;background:var(--accent-soft)}
  .chat-online.away{background:var(--warn-soft)}
  .chat-online #onlineText{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .chat-online .dot{width:9px;height:9px}
  .pick:not(.admin-pick){order:5;flex:1 1 100%;margin:0;display:flex;flex-direction:row;align-items:center;gap:12px}
  .pick:not(.admin-pick) .pick-label{display:inline-flex;flex:none;font-size:15px}
  .pick:not(.admin-pick) .pl-d{display:none}
  .pick:not(.admin-pick) .pl-m{display:inline}
  .pick-box{flex:1;min-width:0}
  .pick-face{display:flex;align-items:center;min-height:44px;padding:0 44px 0 14px;border:1.5px solid var(--accent);border-radius:var(--r);background:var(--card) var(--chev) no-repeat right 14px center/16px;font-weight:700;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick-box select{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;font-size:16px}
  .strip-text{flex:1;min-width:0}
  .sm-d{display:none} .sm-m{display:inline}
  .strip-more{font-size:13px}
  .msg{font-size:16px}
  .confirm-card .txt .muted{display:block;font-size:14px}
  .confirm-card .conf-actions .btn-big{min-height:52px}
  .conf-sub .btn{min-height:44px}
  .hello{padding-top:4px}
  .tabs-fit [role=tab]{padding:0 10px}
  .top-pill{margin-left:auto}
  .conv-tools .btn{flex:1 1 auto}
}

/* ---------- round 5 ---------- */
/* chat: strip, chips, cards */
.seg{height:10px;border-radius:5px}
.strip-link{font-size:14px}
.strip-more{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.state-chip{font-size:14px;padding:3px 12px;color:var(--warn)}
.state-chip.good{color:var(--accent-ink)}
.msg details>summary{display:inline-flex;min-height:44px;padding:0 14px 0 12px;border:1.5px solid var(--accent);border-radius:var(--r);background:var(--card);margin-top:6px}
.msg details[open]>summary{background:var(--accent-soft)}
.hello{margin:0 auto;padding-top:5vh}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px;margin:18px auto 0}
.chip{justify-content:flex-start;border-radius:var(--r);text-align:left;min-height:56px;line-height:1.25}
.chips-note{margin:12px 0 0}
.conf-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.conf-sub .btn{min-height:44px;width:100%;padding:6px 10px;font-size:15px}
.away-line{padding:4px 10px;font-size:13px}
.pick-face{text-overflow:ellipsis}

/* customer settings */
.tabs-fit [role=tab]{font-size:14px;line-height:1.2}
.no-note{display:block;color:var(--warn);margin-top:4px}
.ask-how{display:block;margin-top:6px}
.btn-outline.phone-only{width:100%}

/* admin */
.foot{display:none !important}
.crumb{color:var(--muted);text-decoration:none;font-weight:600}
.crumb:hover{text-decoration:underline}
.crumb-sep{color:var(--muted);margin:0 8px;font-weight:400}
.click-row{cursor:pointer}
.click-row:hover{background:var(--paper)}
details.tech>summary,.act-row details>summary{font-size:14px;color:#4a4439;font-weight:600;min-height:36px}
.chip-filter{min-height:36px}
.btn-small{min-height:44px}

@media (max-width:820px){
  .chip-filter,details.tech>summary,.act-row details>summary{min-height:44px}
  .chips{grid-template-columns:1fr}
  .strip-more{font-size:13px}
  /* admin customer page: the five sections are a grid (all labels visible, no sideways swipe) and the customer picker sits under the title */
  .tabs-scroll{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-bottom:0;overflow:visible}
  .tabs-scroll [role=tab]{border:1px solid var(--line-strong);border-radius:var(--r);margin:0;min-height:44px;padding:0 4px;font-size:15px;white-space:normal;line-height:1.15}
  .tabs-scroll [role=tab][aria-selected=true]{background:var(--accent-soft);border-color:var(--accent)}
  body[data-role=admin] .topbar{flex-wrap:wrap}
  #pick.admin-pick{display:flex;order:5;flex:1 1 100%;margin:0;min-width:0}
  #pick.admin-pick .pick-box,#pick.admin-pick select{width:100%}
  .topbar .crumb-sep{margin:0 5px}
  #perms{padding-bottom:16px}
}
@media (max-width:820px){
  .pick-face{display:block;line-height:41px;padding:0 40px 0 12px;font-size:15px}
  .hello .brand-mark{width:48px;height:48px;font-size:24px;margin-bottom:8px}
  .hello h2{font-size:22px}
  .hello p{font-size:16px;margin-bottom:6px}
  .chips{gap:8px;margin-top:10px}
  .chip{min-height:48px;padding-top:4px;padding-bottom:4px}
  .strip-text b{overflow:hidden;text-overflow:ellipsis}
}
.conf-sub .btn{background:var(--card);border-color:var(--accent);color:var(--accent-strong)}

/* round 5b (manual): the "Talking about" label shared the row with the picker and cut the project name; stack it above */
@media (max-width:820px){
  .pick:not(.admin-pick){flex-direction:column;align-items:stretch;gap:4px}
  .pick:not(.admin-pick) .pick-label{font-size:14px;font-weight:600;color:var(--muted)}
  .pick-face{font-size:16px}
}

/* ---------- round 7: terms, plans, admin chat ---------- */
:root{--pc-off:#8a8578}
textarea.tall{resize:vertical;min-height:180px}

/* computer on / working / off: one icon, one dot, one word. Colour is never the only signal (off has a slash through the screen, working pulses). */
.pc-wrap{position:relative;display:inline-flex;flex:none}
.pc-status{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--code-bg);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;position:relative;flex:none}
.pc-status:hover{background:var(--nav-hover)}
.pc-status svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc-status .pc-slash{display:none;stroke:var(--bad)}
.pc-status.offline .pc-slash{display:inline}
.pc-dot{width:10px;height:10px;border-radius:50%;background:var(--pc-off);display:inline-block;flex:none}
.pc-status.idle .pc-dot{background:var(--ok)}
.pc-status.busy .pc-dot{background:var(--info);animation:pcPulse 1.4s infinite}
.pc-status.busy{border-color:var(--info)}
.pc-status.offline{color:var(--muted)}
.pc-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--info);color:var(--paper);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
@keyframes pcPulse{0%{box-shadow:0 0 0 0 rgba(31,95,191,.55)}70%{box-shadow:0 0 0 8px rgba(31,95,191,0)}100%{box-shadow:0 0 0 0 rgba(31,95,191,0)}}
.pc-tip{position:absolute;top:calc(100% + 8px);left:0;width:max-content;max-width:min(300px,86vw);background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 14px;font-size:14px;font-weight:400;line-height:1.4;z-index:40}
.plan-btn{min-height:44px;padding:6px 16px;flex:none}
.plan-btn svg{width:20px;height:20px}

/* Jay's messages: avatar J, a name, a badge, a violet tint and a stripe. No other message looks like this. */
.jay-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.jay-av{width:28px;height:28px;border-radius:50%;background:var(--violet);color:var(--paper);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.jay-name{color:var(--violet);font-size:15px}
.jay-badge{font-size:13px;font-weight:700;padding:1px 10px;border-radius:999px;background:var(--violet);color:var(--paper);white-space:nowrap}
.msg.admin{align-self:flex-start;max-width:min(82%,600px);background:var(--violet-soft);border:1px solid transparent;border-left:5px solid var(--violet);border-bottom-left-radius:4px}
.chat-banners{flex:none;display:flex;flex-direction:column;gap:6px;padding:0 24px}
.chat-banners:not(:empty){padding-top:8px}
.chat-banners p{margin:0;display:flex;gap:10px;align-items:center;border-radius:var(--r);padding:10px 14px;font-size:15px;font-weight:600}
.chat-banners .ico{flex:none}
.jay-banner{background:var(--violet-soft);color:var(--violet);border-left:5px solid var(--violet)}
.plan-banner{background:var(--warn-soft);color:var(--warn)}
.review-note{margin:8px 0 0}

/* plan and rules panel */
dialog.sheet{border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:0;width:min(94vw,580px);max-height:88vh;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
dialog.sheet[open]{display:flex;flex-direction:column}
dialog.sheet::backdrop{background:rgba(0,0,0,.45)}
.sheet-head{display:flex;align-items:center;gap:12px;padding:14px 18px 10px 20px;border-bottom:1px solid var(--line)}
.sheet-head h2{flex:1}
.sheet-head .btn{width:44px;padding:0}
.sheet-body{padding:6px 20px 20px;overflow-y:auto}
.sheet-body h3{margin:18px 0 6px;font-size:16px}
.plan-kv{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;margin:0}
.plan-kv dt{color:var(--muted)}
.plan-kv dd{margin:0;font-weight:600}
.price-big{font-size:22px;font-weight:800;color:var(--accent)}
.rules-list{margin:0;padding:0 0 0 20px;display:grid;gap:6px}
.sheet-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:14px auto 0;max-width:520px;text-align:left;display:grid;gap:4px}
.plan-card b{color:var(--accent)}
.plan-card .btn{justify-self:start;margin-top:6px}

/* customer settings: terms */
.seg-switch{display:inline-flex;border:1.5px solid var(--accent);border-radius:var(--r);overflow:hidden;margin:6px 0 10px}
.seg-switch button{border:0;border-radius:0;background:var(--card);color:var(--accent);min-height:44px;padding:0 20px}
.seg-switch button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.terms-text{white-space:pre-line;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:14px 16px;line-height:1.6;max-height:520px;overflow-y:auto}
.price-table{width:100%;border-collapse:collapse}
.price-table th,.price-table td{text-align:left;padding:10px 8px;border-top:1px solid var(--line);font-size:16px}
.price-table th{font-weight:600}
.price-table td.num{text-align:right;font-weight:700;white-space:nowrap}
.plan-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.plan-row:first-child{border-top:0}

/* admin: shared conversation pieces */
.content.fill{overflow:hidden;padding:16px 24px}
.page-wide.fill{height:100%;max-width:1240px}
.conv-layout{display:grid;grid-template-columns:minmax(280px,350px) minmax(0,1fr);gap:16px;height:100%;min-height:0}
.cl-pane,.thread{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.cl-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.cl-head h2{font-size:18px}
.cl-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.cl-item{display:flex;gap:12px;align-items:flex-start;justify-content:flex-start;width:100%;text-align:left;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;min-height:72px;padding:12px 14px;font-weight:400}
.cl-list li:first-child .cl-item{border-top:0}
.cl-item:hover{background:var(--paper)}
.cl-item[aria-current=true]{background:var(--accent-soft)}
.cl-av{width:40px;height:40px;border-radius:50%;background:var(--line);color:var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-top{display:flex;gap:8px;align-items:baseline}
.cl-top b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-top time{font-size:13px;color:var(--muted);flex:none}
.cl-prev{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.cl-flags .pill{font-size:13px;padding:1px 10px}
.thread-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);min-height:56px;flex-wrap:wrap}
.thread-head h2{font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-back{display:none;width:44px;padding:0}
.thread-tools{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center;padding:6px 16px;border-bottom:1px solid var(--line)}
.thread-tools .sel-only{display:none}
.thread.selecting .thread-tools .sel-only{display:inline-flex}
.thread-scroll{flex:1;min-height:0;overflow-y:auto;padding:6px 16px 14px;background:var(--paper)}
.thread.embedded{height:auto}
.thread.embedded .thread-scroll{flex:none;max-height:56vh;min-height:220px}
.tm{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:8px 0;border-radius:var(--r);border:1px solid var(--line);background:var(--pea)}
.tm.r-customer{background:var(--me);border-color:transparent}
.tm.r-admin{background:var(--violet-soft);border:1px solid transparent;border-left:5px solid var(--violet)}
.tm.r-system{background:var(--code-bg);border-style:dashed}
.tm.is-archived{opacity:.65}
.tm-pick{display:none;align-items:center;min-height:44px;margin:-8px 0 0 -6px;cursor:pointer}
.thread.selecting .tm-pick{display:flex}
.tm-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--line-strong);color:var(--ink);flex:none}
.tm.r-mrpea .tm-av{background:var(--accent);color:var(--accent-ink)}
.tm.r-admin .tm-av{background:var(--violet);color:var(--paper)}
.tm-main{flex:1;min-width:0}
.tm-meta{display:flex;gap:2px 10px;align-items:center;flex-wrap:wrap}
.tm-meta b{font-size:15px}
.tm.r-mrpea .tm-meta b{color:var(--accent)}
.tm.r-admin .tm-meta b{color:var(--violet)}
.tm-meta .pill{font-size:13px;padding:1px 10px}
.tm-meta .pill.jay-badge{background:var(--violet);color:var(--paper)}
.tm-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.tm-body details{margin-top:2px}
.reply-box{border-top:1px solid var(--line);padding:10px 16px 12px;background:var(--card);display:grid;gap:8px}
.reply-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reply-top b{color:var(--violet)}
.reply-top select{width:auto;min-width:180px;max-width:100%;flex:1 1 180px}
.reply-row{display:flex;gap:10px;align-items:flex-end}
.reply-row textarea{flex:1;min-height:48px;max-height:140px}
.reply-row .btn{min-height:48px;padding:0 20px}
.reply-note{margin:0;font-size:13px;color:var(--muted)}
.takeover{display:flex;gap:2px 14px;flex-wrap:wrap;align-items:center;border-radius:var(--r);background:var(--code-bg);padding:2px 12px}
.takeover.on{background:var(--violet-soft)}
.takeover .take-state{margin:0;font-size:14px;color:var(--muted)}
.takeover.on .take-state{color:var(--violet);font-weight:600}
.thread-empty{color:var(--muted);padding:40px 16px;text-align:center}

/* admin: plan, live editing, approvals, settings sections */
.plan-form{display:grid;gap:12px;padding:6px 0 14px}
.plan-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan-form label.field{margin:0}
.fee-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fee-line input[type=number]{flex:1 1 140px;width:auto}
.agree{margin:0 0 10px 36px;padding:10px 12px;border-radius:var(--r);background:var(--warn-soft);color:var(--ink);display:grid;gap:6px}
.agree label{font-weight:600;font-size:14px}
.agree textarea{min-height:64px;resize:vertical}
.agree-saved{margin:0 0 10px 36px;padding:8px 12px;border-radius:var(--r);background:var(--code-bg);font-size:14px}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.violet{background:var(--violet-soft);color:var(--violet)}
.appr .badges{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 6px}
.appr h3{margin:0 0 2px}
.rule-row{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.rule-row:first-child{border-top:0}
.rule-text{font-weight:600}
.rule-text-zh{color:var(--muted);font-size:15px}
.rule-ctl{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
.rule-ctl .btn{min-height:44px;padding:4px 14px;font-size:15px}
.rule-edit{display:grid;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--paper)}
.sys-card{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-top:12px;display:grid;gap:6px}
.sys-card h3{margin:0}
.sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kv-sm{display:grid;grid-template-columns:150px 1fr;gap:4px 14px;margin:0;font-size:15px}
.kv-sm dt{color:var(--muted)}
.kv-sm dd{margin:0;overflow-wrap:anywhere}
.help-box{background:var(--info-soft);color:var(--ink);border-radius:var(--r);padding:10px 14px;font-size:15px;margin:10px 0}
.warn-box{background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:10px 14px;font-size:15px;margin:10px 0}
.price-edit{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.price-edit input{width:140px}
.sticky-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line-strong);padding-top:12px;margin-top:14px}

@media (max-width:820px){
  .pc-status{padding:0 10px}
  .pc-status .pc-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pc-tip{position:fixed;left:12px;right:12px;top:64px;max-width:none;width:auto}
  .plan-btn{padding:6px 12px}
  .chat-banners{padding:0 12px}
  .msg.admin{max-width:92%}
  .tabs-fit{grid-template-columns:repeat(3,1fr)}
  .content.fill{padding:0}
  .conv-layout{display:block}
  .cl-pane,.thread{border-radius:0;border:0;height:100%}
  .conv-layout:not(.show-thread) .thread{display:none}
  .conv-layout.show-thread .cl-pane{display:none}
  .thread-back{display:inline-flex}
  .thread.embedded{border:1px solid var(--line);border-radius:var(--r);height:auto}
  .thread.embedded .thread-back{display:none}
  .thread-scroll{padding:4px 10px 12px}
  .tm{padding:8px 10px}
  .reply-box{padding:8px 10px 10px}
  .plan-form .grid2,.sys-grid{grid-template-columns:1fr}
  .kv-sm{grid-template-columns:1fr}
  .kv-sm dt{margin-top:6px}
  .plan-kv{grid-template-columns:96px 1fr}
  .agree,.agree-saved{margin-left:0}
  .tabbar a{font-size:12px}
  .sheet-body{padding:4px 16px 16px}
}
.thread-host{min-height:0;display:flex;flex-direction:column}
.thread-host>.thread{flex:1}
#view-conversations{height:100%}
.brain .pc-status{flex:none}

.price-table th.num{text-align:right}
.sys-card .rule-ctl select{width:auto;flex:1 1 220px;min-width:200px}
@media (max-width:820px){
  .thread-host{height:100%}
  .conv-layout{height:100%}
}
@media (max-width:820px){.conv-layout:not(.show-thread) .thread-host{display:none}}

.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-card-head .btn{margin:-6px -8px -6px 0}
@media (max-width:820px){
  .hello .brand-mark{display:none}
  .hello{padding-top:0}
  .plan-card{margin-top:10px;padding:8px 12px;font-size:14px}
  .hello h2{margin-top:4px}
  .hello .chips-note{font-size:13px}
}
@media (max-width:820px){.hello .lead-in{display:none}.hello .chips{margin-top:8px}.hello .chip{min-height:46px}.hello .chips-note{margin-top:8px}}

/* ---- Round 9: wrong-role page, automatic backup switch + warning, "only waiting" filter ---- */
.wrong-role{text-align:center;padding:28px 22px}
.wrong-role h1{font-size:24px;margin-bottom:10px}
.wrong-role .lead{font-size:18px;margin-bottom:22px;overflow-wrap:anywhere}
.wrong-role .btn-big{width:100%;white-space:normal}
.wrong-role .back-link{display:inline-block;margin-top:16px;padding:10px 6px;font-size:16px;font-weight:600;color:var(--accent)}
.bk-row{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.bk-row .switch{flex:1 1 280px;align-items:flex-start;line-height:1.3;padding:8px 0}
.bk-row .switch input{width:22px;height:22px;flex:none;margin-top:2px}
.bk-state{font-size:14px;font-weight:700;border-radius:999px;padding:2px 12px}
.bk-state.on{background:var(--accent-soft);color:var(--accent)}
.bk-state.off{background:var(--warn-soft);color:var(--warn)}
.bk-last{flex:1 1 100%;margin:0 0 6px;font-size:14px;color:var(--muted)}
dialog.confirm.bk-dialog{max-width:min(94vw,520px)}
.bk-dialog ul{margin:10px 0 0;padding-left:22px}
.bk-dialog li{margin:0 0 8px}
.bk-dialog .row{flex-wrap:wrap}
.bk-dialog .row .btn{min-height:48px;flex:1 1 180px}
.cl-filter{margin-top:6px;min-height:44px}
.cl-filter input{width:20px;height:20px;flex:none}
@media (max-width:820px){.bk-dialog .row .btn{flex:1 1 100%}}

/* ---------- round 10: voice typing (microphone button, grey "ghost" line, calm notes) ---------- */
:root{--rec:#c4372c;--rec-glow:rgba(196,55,44,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--rec:#d9534a;--rec-glow:rgba(217,83,74,.5)}}
.composer textarea,.reply-row textarea{min-width:0}
.mic-btn,.composer .mic-btn,.reply-row .mic-btn{flex:none;width:48px;min-width:48px;height:48px;min-height:48px;padding:0}
.mic-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mic-btn.on,.mic-btn.on:hover{background:var(--rec);border-color:var(--rec);color:#fff;animation:micPulse 1.4s ease-out infinite}
@keyframes micPulse{0%{box-shadow:0 0 0 0 var(--rec-glow)}100%{box-shadow:0 0 0 12px transparent}}
@media (prefers-reduced-motion:reduce){.mic-btn.on{animation:none;box-shadow:0 0 0 3px var(--rec-glow)}}
.mic-line{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0 0 8px;font-size:14px;line-height:1.35}
.mic-line[hidden],.mic-line span:empty{display:none}
.mic-live{color:var(--rec);font-weight:700}
.mic-ghost{flex:1 1 100%;color:var(--muted);font-style:italic;overflow-wrap:anywhere}
.mic-note{color:var(--muted);flex:1 1 100%}
.mic-note.bad{color:var(--bad)}
/* volume bars: five bars light up with the voice, so the person can see the microphone hears them */
.mic-meter{display:inline-flex;align-items:flex-end;gap:3px;height:18px;align-self:center}
.mic-meter[hidden]{display:none}
.mic-meter i{display:block;width:5px;border-radius:2px;background:var(--line)}
.mic-meter i:nth-child(1){height:6px}.mic-meter i:nth-child(2){height:9px}.mic-meter i:nth-child(3){height:12px}.mic-meter i:nth-child(4){height:15px}.mic-meter i:nth-child(5){height:18px}
.mic-meter[data-level="1"] i:nth-child(-n+1),.mic-meter[data-level="2"] i:nth-child(-n+2),.mic-meter[data-level="3"] i:nth-child(-n+3),
.mic-meter[data-level="4"] i:nth-child(-n+4),.mic-meter[data-level="5"] i:nth-child(-n+5){background:var(--rec)}
/* language chooser: sits just before the microphone; on phones it becomes its own full-width row above the box */
.composer select.mic-lang,.reply-row select.mic-lang{flex:none;width:auto;max-width:230px;min-height:48px;margin:0;padding:0 10px;font-size:14px}
@media (max-width:640px){
  .composer,.reply-row{flex-wrap:wrap}
  .composer select.mic-lang,.reply-row select.mic-lang{order:-1;flex:1 1 100%;max-width:none;min-height:44px}
}
/* while listening the words appear in the box itself; it is read-only until the person stops */
textarea.listening{border-color:var(--rec);box-shadow:0 0 0 3px var(--rec-glow);background:var(--card)}

/* ---------- round 11: tap-able answers under Mr Pea's question ---------- */
.choices-wrap{align-self:flex-start;max-width:100%;width:100%;margin:2px 0 8px;display:flex;flex-direction:column;gap:8px}
.choices,.choices-extra{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.choices-note{margin:0;font-size:14px;font-weight:600;color:var(--muted)}
.choice{display:inline-flex;align-items:flex-start;gap:8px;min-height:44px;max-width:100%;padding:8px 18px;border-radius:24px;border:1.5px solid var(--accent);background:var(--card);color:var(--accent-strong);font:inherit;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.choice:hover{background:var(--accent-soft)}
.choice{justify-content:flex-start}
.choice .c-text{display:flex;flex-direction:column;flex:1 1 auto;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.choice .c-label{font-size:16px}
.choice .c-hint{font-size:13px;font-weight:400;color:var(--muted);margin-top:1px}
.choice .c-tick{display:none;font-weight:800;line-height:1.3}
.choice[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.choice[aria-pressed=true] .c-hint{color:inherit;opacity:.85}
.choice[aria-pressed=true] .c-tick{display:inline}
.choice-quiet{border-style:dashed;border-color:var(--line-strong);color:var(--ink);font-weight:500}
.choice-quiet .c-label{font-size:15px}
.choice-quiet:hover{background:var(--code-bg)}
.choice[disabled]{cursor:default;opacity:.55}
.choice[disabled]:hover{background:var(--card)}
.choice[aria-pressed=true][disabled]{opacity:1}
.choice[aria-pressed=true][disabled]:hover{background:var(--accent)}
.choices.is-answered .choice{min-height:36px;padding:4px 14px}
.choices.is-answered .c-hint{display:none}
.choices-done{align-self:flex-start;min-height:48px;padding:0 32px;font-size:17px}
.choices-done[disabled]{opacity:.5}
.answer-hint{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:820px){
  .choices{flex-direction:column;align-items:stretch}
  .choices .choice{width:100%}
  .choices-extra .choice{flex:1 1 calc(50% - 8px);min-width:0}
  .choices.is-answered{flex-direction:row}
  .choices.is-answered .choice{width:auto}
}
.tm-options{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:6px;font-size:14px}
.tm-options .tm-opt-label{color:var(--muted);font-weight:600}
.tm-opt{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--code-bg);border:1px solid var(--line);color:var(--ink);font-size:13px}
.tm-opt.picked{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.tm-picked{flex:1 1 100%;color:var(--accent);font-weight:600}

/* ---------- prototype / production (skill prototype-production-mode) ---------- */
.who-pick{display:grid;gap:12px}
.who-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;min-height:76px;padding:14px 18px;font-size:18px;border-radius:var(--r-lg);background:var(--card);border:1.5px solid var(--line-strong);color:var(--ink)}
.who-card span{font-size:14px;color:var(--muted);font-weight:400}
.who-card:hover{border-color:var(--accent);background:var(--accent-soft)}
.back-link{margin-bottom:10px}
.form-box{margin-top:10px}
#rainbowBox{margin:6px 0 12px}
.err.small{font-size:14px}
.modebar{position:fixed;top:0;left:0;right:0;height:32px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;font-size:13px;font-weight:700;background:var(--card);border-bottom:1px solid var(--line)}
.modebar.proto{background:#b42318;color:#fff;border-bottom-color:#8a1a11}
.modebar .mb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.modebar .mb-spacer{flex:1}
body.has-modebar{padding-top:32px}
@media (max-width:820px){body.has-modebar .sidebar{top:32px}}
.modeswitch{display:inline-flex;border:1px solid currentColor;border-radius:999px;overflow:hidden;flex:none}
.modeswitch .ms{min-height:24px;padding:0 12px;display:inline-flex;align-items:center;font-size:12px;font-weight:700;text-decoration:none;color:inherit;background:transparent;border:0;cursor:pointer}
.modeswitch [aria-current=true]{background:var(--accent);color:var(--accent-ink);cursor:default}
.modebar.proto .modeswitch [aria-current=true]{background:#fff;color:#b42318}
.modenote{position:fixed;top:36px;right:12px;z-index:41;max-width:min(320px,calc(100vw - 24px));background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 14px;font-size:14px}
.modenote .row{display:flex;gap:10px;margin-top:10px;align-items:center}
@media (max-width:520px){.modebar .mb-text{font-size:12px}}