:root{
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#eef1f5; --line:#e3e7ee;
  --txt:#1b2430; --muted:#69748a; --accent:#2f6bff; --me:#2f6bff;
  --auto:#12a06a; --assist:#cc7a00; --manual:#8b93a3; --danger:#e5484d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent)}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important}
.muted{color:var(--muted);font-size:13px;margin:.2em 0 1em}

#app{height:100dvh;display:flex;flex-direction:column;max-width:780px;margin:0 auto;position:relative;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
/* slick screen swap: a fresh view fades+rises in when un-hidden (list ↔ task ↔ settings) */
.screen:not(.hidden){animation:screenIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* topbar */
.topbar{display:flex;align-items:center;gap:10px;justify-content:space-between;flex:none;
  padding:12px 14px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:19px;letter-spacing:-.4px}
.logo{margin-right:3px}
.iconbtn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;color:var(--muted);font-size:20px;flex:none;display:flex;align-items:center;justify-content:center;transition:background .14s ease,color .14s ease,transform .1s ease}
.iconbtn:hover{background:var(--panel2);color:var(--txt)}
.iconbtn:active{transform:scale(.9)}
/* ---- Header "My Browser" badge ------------------------------------------------
   The per-user browser is a real Chrome burning this box's RAM/CPU, and the user
   is the only one who can sign it into their accounts — so its state belongs in
   the header, not buried in a settings page. Green = up and quiet, red = not
   running, amber blinking = something is actually driving it right now. */
.browser-badge{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 8px;border-radius:16px;border:1px solid transparent;background:transparent;color:var(--muted);flex:none;cursor:pointer;line-height:1;transition:background .14s ease,border-color .14s ease}
.browser-badge:hover{background:var(--panel2);border-color:var(--line)}
.browser-badge:active{transform:scale(.94)}
.browser-badge .bb-glyph{font-size:18px;filter:grayscale(1) opacity(.7)}
.browser-badge .bb-dot{width:8px;height:8px;border-radius:50%;background:#9aa3ad;flex:0 0 auto}
.browser-badge.ok .bb-glyph{filter:none}
.browser-badge.ok .bb-dot{background:#2fa84f;box-shadow:0 0 6px #2fa84f88}
.browser-badge.bad .bb-dot{background:#e5484d;box-shadow:0 0 6px #e5484d88}
/* In use / doing work = AMBER and blinking. Green must mean "up and idle": a browser
   rendering in the background is spending real CPU on a 2-vCPU box, and that has to be
   visible at a glance rather than hiding behind a calm green dot. */
.browser-badge.busy{border-color:#d9a218}
.browser-badge.busy .bb-glyph{filter:none;animation:bb-pulse 1.6s ease-in-out infinite}
.browser-badge.busy .bb-dot{background:#d9a218;animation:bb-blink 1s ease-in-out infinite}
@keyframes bb-blink{0%,100%{opacity:1;box-shadow:0 0 8px #d9a218}50%{opacity:.25;box-shadow:none}}
@keyframes bb-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){
  .browser-badge.busy .bb-dot,.browser-badge.busy .bb-glyph{animation:none}
}
.action:active{transform:scale(.92)}

/* ---- PRIMARY NAVIGATION: Tasks · Texts · Email · Calls -------------------------------
   Four named places, the width of the app, on every one of the four screens. It replaced a
   row of five unlabelled emoji in the header (🌐📨💳🟢✅) which put the mailbox at the same
   weight as a status light and named neither. The rule that sorts them: a PLACE you go to is
   a tab, a STATE you glance at is not. Payments, the browser, connections and service health
   were states or side trips and moved into the ☰ menu, where each gets a word. */
.appnav{display:flex;flex:none;gap:2px;padding:0 6px;background:var(--panel);
  border-bottom:1px solid var(--line)}
.appnav a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 4px 10px;border-bottom:2.5px solid transparent;text-decoration:none;
  color:var(--muted);font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;
  transition:color .14s ease,border-color .14s ease}
.appnav a:hover{color:var(--txt)}
.appnav a.on{color:var(--accent);border-bottom-color:var(--accent)}
/* How many new things are waiting behind a tab you are NOT looking at. Cleared by opening the
   tab, not by opening every message inside it. */
.appnav .nb{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--danger);
  color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center;
  font-variant-numeric:tabular-nums}
.appnav a.on .nb{background:var(--accent)}
@media (max-width:430px){
  .appnav a{font-size:14px;gap:5px;padding:11px 2px 9px}
  .appnav .nb{min-width:17px;height:17px;line-height:17px;font-size:10.5px;padding:0 4px}
}
/* Something in the ☰ menu needs attention (browser down, a service down, a connection missing).
   The dot is the whole alarm: the word for WHICH is one tap away, inside the menu. */
#hdr-menu{position:relative}
.hdr-dot{position:absolute;top:5px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 2px var(--panel);display:none}
.hdr-dot.on{display:block}
.hdr-dd .dd-note{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)}
.hdr-dd .dd-note.bad{color:var(--danger)}
.hdr-dd .dd-note.busy{color:var(--assist)}
.hdr-dd .dd-note.ok{color:var(--auto)}

/* ---- top banner (service degraded / switched to extra usage) ---- */
.topbanner{flex:none;padding:9px 14px;font-size:13.5px;display:flex;align-items:center;gap:10px;
  justify-content:space-between;border-bottom:1px solid var(--line)}
.topbanner.alert{background:#fff4e5;color:#8a4b00;border-bottom-color:#f3d9b0}
.topbanner.warnbar{background:#fdecec;color:#a3282c;border-bottom-color:#f3c0c2}
.topbanner .tb-msg{flex:1;min-width:0}
.topbanner .tb-x{border:none;background:transparent;color:inherit;font-size:15px;line-height:1;opacity:.7;padding:2px 6px}
.topbanner .tb-x:hover{opacity:1}

/* ---- usage & service-health card (Settings) ---- */
.health-box{margin:2px 0 12px}
.hz-row{display:flex;flex-wrap:wrap;gap:7px}
.hz-pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:4px 9px;border-radius:20px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt)}
.hz-pill.down{background:rgba(229,72,77,.10);border-color:rgba(229,72,77,.35);color:#a3282c}
.hz-pill.degraded{background:rgba(204,122,0,.10);border-color:rgba(204,122,0,.32);color:#8a4b00}
.usage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.ug-cell{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.ug-n{font-weight:700;font-size:18px;letter-spacing:-.3px}
.ug-l{font-size:11.5px;color:var(--muted);margin-top:2px}
.ug-cell.over{border-color:rgba(244,180,60,.5)}.ug-cell.over .ug-n{color:#f4c150}
@media(max-width:420px){.usage-grid{grid-template-columns:repeat(2,1fr)}}
#back,#settings-back{font-size:30px;line-height:1}

/* ===== thread list (slick cards + single-status) ===== */
.threadlist{flex:1;overflow-y:auto;padding:8px 10px;scroll-behavior:smooth}
.thread{position:relative;display:flex;gap:13px;align-items:center;padding:12px 40px 12px 12px;cursor:pointer;
  border-radius:16px;background:transparent;
  transition:background .16s ease, box-shadow .18s ease, transform .12s ease}
.thread:hover{background:var(--panel);box-shadow:0 6px 20px rgba(24,39,75,.08)}
.thread:active{transform:scale(.987)}
/* gentle staggered entrance — only on first paint (JS toggles .first-load) to avoid re-flash on updates */
.threadlist.first-load .thread{animation:rowIn .34s cubic-bezier(.22,1,.36,1) both}
.threadlist.first-load .thread:nth-child(2){animation-delay:.03s}
.threadlist.first-load .thread:nth-child(3){animation-delay:.06s}
.threadlist.first-load .thread:nth-child(4){animation-delay:.09s}
.threadlist.first-load .thread:nth-child(5){animation-delay:.12s}
.threadlist.first-load .thread:nth-child(6){animation-delay:.15s}
.threadlist.first-load .thread:nth-child(7){animation-delay:.18s}
.threadlist.first-load .thread:nth-child(n+8){animation-delay:.21s}
@keyframes rowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* app-icon avatar (rounded square) */
.avatar{width:48px;height:48px;border-radius:15px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:23px;background:var(--panel2);box-shadow:0 1px 2px rgba(24,39,75,.07);transition:transform .16s ease}
.thread:hover .avatar{transform:scale(1.05) rotate(-1.5deg)}
.avatar .av-fav{width:27px;height:27px;border-radius:7px;object-fit:contain}
.avatar.auto{background:rgba(18,160,106,.14)}
.avatar.assist{background:rgba(204,122,0,.15)}
.avatar.manual{background:rgba(139,147,163,.17)}
.avatar.unknown{background:rgba(47,107,255,.12)}
.avatar.done{background:rgba(18,160,106,.16);color:var(--auto);font-size:22px}
.avatar.closed{background:var(--panel2);color:var(--muted);font-size:22px}
.th-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.th-row1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.th-label,.th-heading{display:flex;align-items:center;gap:8px;min-width:0}
.th-label{flex:1}
.task-number{display:inline-flex;align-items:center;flex:none;gap:1px;padding:2px 6px;
  border:1px solid #d5e0fa;border-radius:6px;background:#edf2ff;color:#365bb0;
  font-size:11px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.task-number [aria-hidden]{color:#6079b1;font-weight:500}
#th-number{display:flex;flex:none}
.th-name{font-weight:600;font-size:15.5px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-time{color:var(--muted);font-size:11.5px;font-weight:500;flex:none}
.unread{background:var(--accent);color:#fff;border-radius:20px;font-size:11px;font-weight:700;padding:1px 7px;flex:none}
/* ONE status line: a colored dot + short text (single icon + short text) */
.th-status{display:flex;align-items:center;gap:8px}
.tdot{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;
  font-size:12.5px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdot::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.tdot.needs{color:var(--danger)} .tdot.needs::before{background:var(--danger)}
.tdot.ready{color:var(--auto)} .tdot.ready::before{background:var(--auto)}
.tdot.working{color:var(--accent)} .tdot.working::before{background:var(--accent);animation:blip 1.5s ease-in-out infinite}
.tdot.waiting{color:#5b6675} .tdot.waiting::before{background:#98a1b2}
.tdot.monitoring{color:#0d9488} .tdot.monitoring::before{background:#14b8a6}
.tdot.reminder{color:var(--assist)} .tdot.reminder::before{background:var(--assist)}
.tdot.paused{color:var(--muted)} .tdot.paused::before{background:var(--muted)}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(47,107,255,.5)}70%{box-shadow:0 0 0 5px rgba(47,107,255,0)}}
.th-frac{margin-left:auto;flex:none;font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
/* thin progress bar */
.th-prog{height:3px;border-radius:3px;background:var(--panel2);overflow:hidden}
.th-prog>i{display:block;height:100%;border-radius:3px;width:0;
  background:linear-gradient(90deg,var(--accent),#6f9bff);transition:width .6s cubic-bezier(.22,1,.36,1)}
.th-prog.alldone>i{background:linear-gradient(90deg,var(--auto),#3ec78d)}
/* per-row quick action */
.row-menu{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:32px;border:none;
  background:transparent;color:var(--muted);font-size:21px;border-radius:9px;line-height:1;opacity:0;transition:.14s}
.thread:hover .row-menu{opacity:.8}
.row-menu:hover{background:var(--panel2);color:var(--txt);opacity:1}
/* optimistic 'reading…' row */
.pending-row{opacity:.8}
.row-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.done-thread .th-name{color:var(--muted);text-decoration:line-through}
.thread.completed{opacity:.62}
.thread.completed .th-name{color:var(--muted);text-decoration:line-through}
.clean-btn{display:block;width:calc(100% - 20px);margin:8px 10px 4px;background:var(--panel2);border:1px solid var(--line);
  color:var(--muted);border-radius:12px;padding:10px;font-size:13px;font-weight:600;transition:.14s}
.clean-btn:hover{color:var(--txt);background:#e6eaf0}
.done-toggle{display:flex;align-items:center;gap:8px;width:calc(100% - 20px);margin:8px 10px 0;background:none;border:none;
  border-top:1px solid var(--line);padding:14px 6px;color:var(--muted);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;transition:color .14s}
.done-toggle:hover{color:var(--txt)}
.done-count{background:var(--panel2);border-radius:20px;padding:1px 8px}
.just-done-label{margin-top:0;border-top:0;color:var(--auto);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .threadlist.first-load .thread{animation:none}
  .tdot.working::before{animation:none}
  .screen:not(.hidden){animation:none}
  *{scroll-behavior:auto!important}
}

/* address book */
.contacts-search{flex:none;margin:8px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;color:var(--txt);font-size:15px;outline:none;padding:9px 15px}
.contact-row .avatar{background:var(--accent);color:#fff;font-weight:700;font-size:18px}
.ct-name{width:100%;background:none;border:none;border-bottom:1px solid var(--line);color:var(--txt);font-size:18px;font-weight:600;padding:6px 2px;outline:none;margin-bottom:6px}
.ct-ids{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 4px}
.ct-tasks{display:flex;flex-direction:column;gap:6px}
.ct-task{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--accent);border-radius:8px;padding:9px 11px;font-size:14px}
.ct-task:hover{background:#e6eaf0}
.ct-int{font-size:13px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--txt)}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:30px}
.empty-emoji{font-size:50px;margin-bottom:8px}

/* ===== composer (shared) ===== */
.composer-wrap{flex:none;border-top:1px solid var(--line);background:var(--bg);padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.attach-preview{display:flex;gap:6px;flex-wrap:wrap}
.attach-preview:not(:empty){margin-bottom:8px}
.composer{display:flex;gap:8px;align-items:center}
.composer textarea{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:22px;
  color:var(--txt);font-size:16px;outline:none;padding:11px 16px;resize:none;font-family:inherit;
  line-height:1.35;min-width:0;min-height:44px;max-height:120px;overflow-y:auto}
.composer textarea:focus{border-color:var(--accent)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--muted);font-size:19px;flex:none}
.icon-btn:hover{background:var(--panel2);color:var(--txt)}
.action{width:46px;height:46px;border-radius:50%;border:none;font-size:20px;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:.15s}
.action.mic{background:var(--panel2);color:var(--txt)}.action.mic:hover{background:var(--line)}
.action.send{background:var(--accent);font-size:19px}.action.send:hover{filter:brightness(1.12)}
.action.recording{background:var(--danger);animation:pulse 1.1s infinite}
.task-toggle{width:46px;height:46px;min-width:46px;min-height:46px;border-radius:50%;border:none;
  flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;
  transition:filter .15s ease,transform .1s ease,opacity .15s ease}
.task-toggle.pause{background:var(--danger)}
.task-toggle.resume{background:var(--auto)}
.task-toggle:hover{filter:brightness(1.08)}
.task-toggle:active{transform:scale(.92)}
.task-toggle:disabled{cursor:wait;opacity:.62;transform:none;filter:none}
.task-toggle:focus-visible{outline:3px solid rgba(47,107,255,.42);outline-offset:2px}
@media(max-width:360px){
  .composer-wrap{padding-left:8px;padding-right:8px}
  .composer{gap:6px}
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,93,93,.5)}70%{box-shadow:0 0 0 12px rgba(255,93,93,0)}100%{box-shadow:0 0 0 0 rgba(255,93,93,0)}}
.chip-file{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12.5px}
.chip-file button{background:none;border:none;color:var(--muted);font-size:15px;line-height:1;padding:0}

/* ===== chat thread ===== */
.thread-head .th-id{flex:1;min-width:0}
.th-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-sub{color:var(--muted);font-size:12.5px;margin-top:1px}
.messages{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.loading{text-align:center;color:var(--muted);padding:30px}
.c-intro{max-width:80%;margin:18px auto;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.msg{display:flex;flex-direction:column;max-width:84%}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.bot{align-self:flex-start;align-items:flex-start}
.bubble{padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.msg.me .bubble{background:var(--me);color:#fff;border-bottom-right-radius:5px}
.msg.bot .bubble{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px}
.human-support-label{display:flex;align-items:center;gap:6px;margin:0 7px 4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.02em}
.human-support-label span{color:var(--accent);font-size:8px}
.msg.human-support .bubble{border-color:rgba(47,107,255,.34);box-shadow:inset 3px 0 0 rgba(47,107,255,.72)}
.m-time{font-size:10.5px;color:var(--muted);margin:2px 6px 0}
.m-update{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.m-update li{position:relative;padding-left:15px}
.m-update li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.m-update li strong,.m-card strong,.m-todo strong{color:#1d4ed8;background:rgba(59,111,255,.12);padding:1px 5px;border-radius:5px;font-weight:700}
.m-card{margin-top:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.m-card-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px;font-weight:700}
.m-todo{margin-top:10px;background:rgba(255,212,121,.08);border:1px solid rgba(255,212,121,.3);border-radius:10px;padding:10px}
.m-todo-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--assist);margin-bottom:5px;font-weight:700}
.m-todo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
/* COMPACT "your turn" status chip at the top of a thread — icon + short text only; the full
   what-to-do text lives in the message thread below (so it's not shown twice) */
.turn-chip{display:flex;align-items:center;gap:8px;margin:8px 12px;padding:9px 13px;border-radius:12px;
  background:rgba(255,212,121,.16);border:1px solid rgba(255,212,121,.5);color:var(--txt);font-size:14px;
  animation:rowIn .3s cubic-bezier(.22,1,.36,1) both}
.turn-chip b{font-weight:700}
.turn-n{background:var(--assist);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:0 7px;line-height:18px}
.turn-hint{margin-left:auto;color:var(--muted);font-size:11.5px;font-weight:500}
/* mid-run help: an advisor / fresh Claude agent stepped in — collapsible marker in the thread */
.advisory{align-self:stretch;margin:2px 0}
.adv-head{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 11px;border-radius:11px;
  background:linear-gradient(90deg,rgba(47,107,255,.09),rgba(47,107,255,.04));border:1px solid rgba(47,107,255,.2);
  font-size:13px;font-weight:600;color:var(--accent);transition:background .14s}
.adv-head:hover{background:rgba(47,107,255,.13)}
.adv-ico{font-size:15px;line-height:1}
.adv-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adv-head .caret{color:var(--accent);margin-left:0}
.adv-time{margin-left:auto;color:var(--muted);font-size:10.5px;font-weight:500;flex:none}
.adv-body{margin:6px 4px 2px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  font-size:13px;line-height:1.5;color:var(--txt)}
.adv-body strong{color:#1d4ed8}
/* full-bleed generated task icon inside the app-icon avatar */
.avatar.has-img{background:transparent;box-shadow:0 1px 3px rgba(24,39,75,.14)}
.av-img{width:100%;height:100%;border-radius:15px;object-fit:cover;display:block}
.bubble.comm{font-size:13.5px;color:var(--muted);background:var(--panel2)}
.bubble.comm b{color:var(--txt);font-weight:600}
.comm-line{cursor:pointer;display:flex;align-items:center;gap:5px}
.caret{color:var(--muted);font-size:10px;margin-left:auto}
.comm-body{margin-top:7px;font-size:13px;white-space:pre-wrap;border-top:1px solid var(--line);padding-top:7px;max-height:320px;overflow:auto}
/* call brief / result rendering (thread + details modal) */
.comm-sub{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:9px 0 5px;font-weight:600}
.comm-sub:first-child{margin-top:0}
.call-outcome{white-space:normal;color:var(--txt)}
.call-note{white-space:normal;color:var(--danger);margin-top:6px}
.tx{display:flex;flex-direction:column;gap:6px;white-space:normal}
.tx-turn{position:relative;max-width:88%;padding:7px 10px;border-radius:12px;font-size:13px;line-height:1.45}
.tx-turn.agent{align-self:flex-start;background:rgba(59,111,255,.14);border:1px solid rgba(59,111,255,.3);border-bottom-left-radius:4px}
.tx-turn.them{align-self:flex-end;background:rgba(54,201,138,.12);border:1px solid rgba(54,201,138,.3);border-bottom-right-radius:4px}
.tx-who{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tx-empty{color:var(--muted);font-style:italic}
.sys{align-self:center;color:var(--muted);font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:3px 12px}
.sys.err{color:var(--danger);border-color:rgba(255,93,93,.3)}
/* agent update: one-line headline, tap to expand the rest */
.m-head{cursor:pointer;display:flex;align-items:baseline;gap:6px}
.m-head .h-txt{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.m-head.open .h-txt{display:block;-webkit-line-clamp:unset;overflow:visible}
.m-head .caret{flex:none}
/* repeat "no news" ticks: slim gray one-liner, expandable */
.sys.nochange{cursor:pointer;display:flex;align-items:center;gap:7px;max-width:92%;min-width:0}
.sys.nochange .nc-head{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sys.nochange .nc-time{flex:none;font-size:10.5px;opacity:.75}
.sys.nochange .caret{flex:none;margin-left:0}
.sys-body{align-self:center;max-width:92%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--txt)}
.sys-body .m-card{margin-top:0}.sys-body .m-update+.m-card{margin-top:10px}
.sys-body{white-space:pre-wrap}
/* folded-inbound / approval notes: title-only used to hide the body — now a tappable expander */
.sys.sys-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.sys.sys-toggle:hover{background:var(--panel2)}
.sys.sys-toggle .caret{margin-left:2px}
/* source block: the ORIGINAL inbound (text/email/call log) an alert refers to — collapsed, tap to view */
.srcblock{align-self:center;width:92%;max-width:92%;margin:3px 0}
.src-head{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 12px}
.src-head:hover{background:var(--panel2)}
.src-head .caret{margin-left:auto}
.src-body{margin:6px 2px 2px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;font-size:13px;color:var(--txt);max-height:440px;overflow:auto}
.src-subj{font-weight:600;margin-bottom:6px}
.src-text{white-space:pre-wrap}
/* rendered HTML email (sandboxed) */
.mailframe{width:100%;border:0;border-radius:8px;background:#fff;height:120px;display:block}
.comm-body.mail{white-space:normal;max-height:540px}
/* ===== connection status bar (top of home) ===== */
.connbar{display:flex;align-items:center;gap:6px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--line);background:var(--panel);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.connbar::-webkit-scrollbar{display:none}
.cb-lead{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:2px}
.cb-pill{flex:none;display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 10px;
  font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--txt);line-height:1}
.cb-pill .cb-ic{font-size:14px}
.cb-pill .cb-dot{width:7px;height:7px;border-radius:50%;flex:none}
/* connected → compact green check, no label */
.cb-pill.ok{background:rgba(18,160,106,.10);border-color:rgba(18,160,106,.28);padding:5px 8px}
.cb-pill.ok .cb-dot{background:var(--auto)}
/* missing → red, labelled, gently pulsing so it can't be missed */
.cb-pill.miss{background:rgba(229,72,77,.10);border-color:rgba(229,72,77,.40);color:#b3282c}
.cb-pill.miss .cb-dot{background:var(--danger);animation:cbpulse 1.8s ease-in-out infinite}
/* soft (browser) → amber action, not an error */
.cb-pill.soft{background:rgba(204,122,0,.10);border-color:rgba(204,122,0,.34);color:var(--assist)}
.cb-pill.soft .cb-dot{background:var(--assist)}
.cb-pill.more{color:var(--muted);padding:5px 9px}
.cb-pill:hover{filter:brightness(.98);border-color:var(--accent)}
@keyframes cbpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 5px rgba(229,72,77,0)}}
/* ===== payment card form ===== */
.card-form{display:flex;flex-direction:column;gap:12px}
.cf-field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);position:relative}
.cf-field input{font:inherit;font-size:15px;font-weight:500;color:var(--txt);background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none;width:100%}
.cf-field input:focus{border-color:var(--accent);background:var(--panel)}
.cf-row{display:flex;gap:10px}
.cf-row .cf-field{flex:1;min-width:0}
.cf-brand{position:absolute;right:12px;top:31px;font-size:12px;font-weight:700;color:var(--muted);pointer-events:none}
.card-legacy{font-size:12.5px;color:var(--assist);margin:0}
.card-form .fe-actions{display:flex;align-items:center;gap:10px;margin-top:4px}
/* ===== Claude connection page ===== */
.cc-status{display:flex;align-items:center;gap:9px;font-size:15px;padding:10px 12px;border-radius:10px;margin-bottom:2px}
.cc-status .cc-dot{width:10px;height:10px;border-radius:50%;flex:none}
.cc-status.ok{background:rgba(18,160,106,.10);border:1px solid rgba(18,160,106,.28)}
.cc-status.ok .cc-dot{background:var(--auto)}
.cc-status.warn{background:rgba(204,122,0,.10);border:1px solid rgba(204,122,0,.32);color:var(--assist)}
.cc-status.warn .cc-dot{background:var(--assist)}
.cc-card{margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.cc-card-h{font-weight:700;font-size:14px;margin-bottom:2px}
.cc-opt{font-weight:400;color:var(--muted);font-size:12px}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cc-keyform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cc-keyform input{flex:1;min-width:180px;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:none}
.cc-keyform input:focus{border-color:var(--accent)}
.cc-card code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12.5px}
.cc-flow:not(:empty){margin-top:12px;border-top:1px dashed var(--line);padding-top:11px}
.cc-step{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:9px 0}
.cc-num{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cc-step input{flex:1;min-width:150px;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 11px;outline:none}
.cc-step input:focus{border-color:var(--accent)}
.cc-hint{font-size:12px;color:var(--muted)}
.cc-err{color:var(--danger);font-size:13px;display:block;margin-top:2px}
/* ===== task documents ===== */
.docsbox{padding:8px 14px;border-top:1px solid var(--line)}
.docsbox.open{padding-bottom:12px}
.docs-head{display:flex;align-items:center;gap:9px;cursor:pointer}
.docs-label{flex:1;min-width:0;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docsbox.open .docs-label{font-weight:600}
.docs-count{display:inline-block;min-width:17px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);background:var(--panel2);border-radius:9px;padding:1px 5px;margin-left:2px}
.docs-head .caret{flex:none;color:var(--muted);font-size:11px}
.docsbox:not(.open) .docs-body{display:none}
.docs-body{margin-top:7px;display:flex;flex-direction:column;gap:2px}
.doc-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:6px 8px;font-size:13.5px;color:var(--txt);cursor:pointer}
.doc-row:hover{background:var(--panel2)}
.doc-row .doc-ico{flex:none}
.doc-row .doc-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-row .doc-size{flex:none;font-size:11.5px;color:var(--muted)}
/* attachment chips on chat messages */
.sys-chips{align-self:center;max-width:92%}
.sys-chips .doc-chips{margin-top:2px;justify-content:center}
.doc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.doc-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:4px 9px;font-size:12px;color:var(--txt);cursor:pointer}
.doc-chip:hover{border-color:var(--accent)}
.doc-chip span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* document preview popup */
.doc-head .doc-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.doc-actions{display:flex;align-items:center;gap:8px;flex:none}
.btn-dl{display:inline-block;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;border-radius:8px;padding:5px 11px;text-decoration:none}
.btn-dl:hover{filter:brightness(1.1)}
.btn-open{color:var(--muted);font-size:15px;text-decoration:none;padding:2px 4px}
.doc-body{display:flex;flex-direction:column;min-height:120px}
.doc-img{max-width:100%;max-height:68vh;object-fit:contain;border-radius:8px;margin:0 auto;display:block;background:#fff}
.doc-frame{width:100%;height:68vh;border:0;border-radius:8px;background:#fff}
.doc-av{width:100%}
.doc-video{max-height:64vh;border-radius:8px;background:#000}
.doc-pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;margin:0}
.doc-none{color:var(--muted);text-align:center;padding:40px 14px}
.working-ack{color:var(--muted)}

/* ===== sheet (options) ===== */
.sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sheet-panel{position:relative;width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px 16px 0 0;padding:8px;display:flex;flex-direction:column;gap:2px;animation:up .2s ease}
@keyframes up{from{transform:translateY(30px)}to{transform:none}}
.sheet-item{background:none;border:none;color:var(--txt);text-align:left;padding:14px 16px;font-size:15.5px;border-radius:10px}
.sheet-item:hover{background:var(--panel2)}
.sheet-item.danger{color:var(--danger)}
.sheet-item.cancel{color:var(--muted);justify-content:center;text-align:center;margin-top:4px;border-top:1px solid var(--line)}

/* ===== modal (log) ===== */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-panel{position:relative;width:100%;max-width:640px;max-height:84vh;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.agentlog{flex:1;overflow:auto;background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:11px;margin:0;
  font:11.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#9aa3b2;white-space:pre-wrap;word-break:break-word}
/* full-details modal */
.detail-scroll{flex:1;overflow:auto;padding:2px 2px 4px}
.d-ev{border-left:2px solid var(--line);padding:2px 0 10px 12px;margin-bottom:10px;position:relative}
.d-ev::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.d-ev.agent_run::before{background:var(--accent)}.d-ev.email_sent::before,.d-ev.email_received::before{background:var(--accent2)}
.d-ev.call_placed::before,.d-ev.call_result::before{background:var(--auto)}.d-ev.error::before{background:var(--danger)}
.d-ev.plan::before{background:#ffd479}
.d-evmeta{font-size:11px;color:var(--muted);margin-bottom:3px}
.d-evhead{font-weight:600;font-size:14px}
.d-evbody{font-size:13px;color:var(--txt);white-space:pre-wrap;margin-top:3px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.d-ev .upd{margin:0;padding-left:16px}.d-sub{margin-top:6px;font-size:13px}
.internals-btn{margin-top:8px;background:var(--panel2);border:1px solid var(--line);color:var(--accent);
  border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:600}
.internals-btn:hover{background:#e6eaf0}.internals-btn.on{color:var(--txt)}
.internals{margin-top:8px}
.internals .step{font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.step.thought{color:#8b949e}
.step.cmd{font-family:ui-monospace,Menlo,Consolas,monospace}
.step.cmd .tool{color:var(--auto);font-weight:700}
.step.cmd code{color:var(--txt);background:var(--panel2);padding:1px 5px;border-radius:5px;word-break:break-all}
.step .step-out{background:#0b0d11;border:1px solid var(--line);border-radius:6px;padding:7px 9px;margin-top:4px;
  font:11px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#8b93a3;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}
.step.session{color:var(--muted)}.step.final{color:var(--auto)}

/* expand/collapse for long blocks (emails, transcripts, tool outputs) */
.clampwrap{position:relative}
.clampable{max-height:300px;overflow:hidden}
.clampwrap.expanded .clampable{max-height:none}
.clampwrap .step-out{max-height:none;overflow:visible}
.expand-btn{margin-top:6px;background:var(--panel2);border:1px solid var(--line);color:var(--accent);
  border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer}
.expand-btn:hover{background:#e6eaf0}

/* ===== usage modal ===== */
.usage-top{display:flex;gap:12px;margin:4px 0 8px}
.usage-big{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.usage-big .num{display:block;font-size:22px;font-weight:800;color:var(--txt)}
.usage-big .cap{font-size:11px;color:var(--muted)}
.usage-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
.usage-tbl th{text-align:right;color:var(--muted);font-weight:600;padding:5px 6px;border-bottom:1px solid var(--line)}
.usage-tbl th:first-child,.usage-tbl td:first-child{text-align:left}
.usage-tbl td{text-align:right;padding:5px 6px;border-bottom:1px solid var(--line)}
.usage-tbl td.mdl{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--txt);word-break:break-all}

/* ===== plan & API keys ===== */
.sysstatus{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.sysrow{display:flex;gap:10px;align-items:flex-start}
.sysrow .dot{margin-top:5px;flex:none}
.dot.warn{background:#e0a458}
.sysrow .sl{font-size:13.5px;color:var(--txt);font-weight:600}
.sysrow .ssub{font-size:12px;color:var(--muted);margin-top:1px}
/* Each provider's button sits under that provider's own row, so it is obvious which one it acts on. */
.sysrow .sys-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}

/* ===== chips & layer intro ===== */
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  vertical-align:middle;letter-spacing:.02em;text-transform:uppercase}
.chip.who{background:#2b2348;color:#c9b8ff}
.chip.how{background:#16324a;color:#8fd2ff}
.chip.facts{background:#143524;color:#8ee0b0}
.chip.mini{font-size:9.5px;background:var(--panel2);color:var(--muted);text-transform:none;font-weight:600}
.card.intro{background:linear-gradient(180deg,var(--panel),var(--panel2))}
.layers{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:7px}
.layers li{font-size:13px;color:var(--txt)}

/* ===== agent context inventory ===== */
.agent-context{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.ac-grp-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent);margin:12px 0 4px}
.ac-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.ac-main{flex:1;min-width:0}
.ac-role{font-size:12px;color:var(--muted);margin-top:2px}
.ac-loc{font-size:11px;color:var(--muted2,#6b7280);font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:2px}
.ac-view{flex:none;align-self:center}
.ac-skills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.skill-chip{font-size:10.5px;background:var(--panel2);border:1px solid var(--line);color:#aeb4c0;
  padding:1px 7px;border-radius:6px}
.cf-pre{white-space:pre-wrap;word-break:break-word;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;
  color:#c7ccd6;background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:12px;margin:0}

/* ===== context & files list ===== */
.ctxfiles{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.file-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;color:var(--txt)}
.file-row:hover{border-color:var(--accent);background:#eef1f6}
.file-row .fr-icon{font-size:18px;flex:none;width:22px;text-align:center}
.fr-main{flex:1;min-width:0}
.fr-title{display:block;font-size:14px;font-weight:600}
.fr-sub{display:block;font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-tag{flex:none;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.fr-tag.editable{background:#1b3a2a;color:#7fe0a8}
.fr-tag.ro{background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.fr-tag.auto{background:transparent;color:var(--muted2,#6b7280)}

/* hover hint (?) */
.hint{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;
  cursor:help;vertical-align:middle;position:relative;margin-left:5px}
.hint::after{content:attr(data-tip);position:absolute;top:130%;left:0;width:250px;z-index:50;
  background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12px;
  font-weight:400;line-height:1.45;color:#c7ccd6;opacity:0;pointer-events:none;transition:opacity .12s;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
.hint:hover::after{opacity:1}
@media(max-width:600px){
  .hint::after{position:fixed;top:72px;left:16px;right:16px;width:auto}
}

/* popup file editor */
.editor-body .fe-text{width:100%;min-height:46vh;box-sizing:border-box;resize:vertical;
  font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#0b0d11;color:#dfe3ea;
  border:1px solid var(--line);border-radius:8px;padding:11px}
.fe-actions{display:flex;align-items:center;gap:10px;margin-top:10px}

/* ===== settings ===== */
.settings-body{flex:1;overflow-y:auto;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
.card h2{margin:0 0 2px;font-size:17px}
/* Settings stays one scrolling page; disclosures keep less-used controls close at hand. */
#view-settings .settings-body{padding:20px 16px 36px;scroll-behavior:smooth}
.settings-section{padding:20px;margin-bottom:18px}
.settings-section>h2,.settings-section #contact-access-title{margin:0 0 16px;font-size:19px;letter-spacing:-.2px}
.settings-row{border-top:1px solid var(--line);margin:0}
.settings-row>summary{display:flex;align-items:center;gap:16px;min-height:70px;padding:14px 0;cursor:pointer;list-style:none}
.settings-row>summary::-webkit-details-marker{display:none}
.settings-row>summary::after{content:'›';margin-left:auto;flex:none;font-size:24px;font-weight:400;line-height:1;color:var(--muted);transition:transform .15s}
.settings-row[open]>summary::after{transform:rotate(90deg)}
.settings-row>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.settings-row-label{display:block;min-width:0;margin:0;font-size:15px;font-weight:600;line-height:1.4}
.settings-row-description{display:block;margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--muted)}
.settings-row-body{padding:0 0 20px;overflow-wrap:anywhere}
.settings-row-body>p:first-child{margin-top:0}
.settings-row-body>div:only-child:empty{display:none}
.settings-section .btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.settings-section .btn.ghost:hover{background:var(--panel2)}
.settings-requests{padding-bottom:18px}
.settings-requests>h3{margin:0 0 8px;font-size:15px;font-weight:600}
.settings-requests>p{margin-top:0}
.settings-section [tabindex="-1"]{scroll-margin-top:20px}
#settings-people #contact-access-form{padding:16px;background:var(--panel2);border-radius:12px}
#settings-people #contact-access-form .btn{justify-self:start}
#settings-people #contact-access-list:empty{display:none}
@media(max-width:520px){
  #view-settings .settings-body{padding:14px 12px 28px}
  .settings-section{padding:16px;margin-bottom:14px}
  .settings-row>summary{min-height:66px;padding:13px 0;gap:10px}
  .settings-section .btn{max-width:100%;white-space:normal}
  #settings-people #contact-access-form{padding:12px}
}
/* A second subject inside one card, when the two are plainly one thing (context and its vault,
   engine and the keys that pay for it) and two cards only made the reader scroll to join them. */
.card .card-sub{margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;font-weight:700;letter-spacing:-.1px}
.integrations{display:flex;flex-direction:column;gap:10px}
.intg{display:flex;align-items:center;gap:10px}
.intg .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--danger)}
.intg .dot.ok{background:var(--auto)}.intg .dot.soon{background:#4a5160}
.integrations.soon{margin-top:8px;opacity:.6}
.intg .lbl{font-weight:600}
.intg .det{color:var(--muted);font-size:12px;margin-left:auto;text-align:right}
.ctxlist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ctx-item{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:8px 10px}
.ctx-item .k{font-weight:600;min-width:110px}
.ctx-item .v{color:var(--muted);flex:1;word-break:break-word}
.ctx-item .del{background:none;border:none;color:var(--muted);font-size:16px}
.ctx-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ctx-add input{flex:1;min-width:120px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:9px 11px;outline:none}
.chk{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13px}
.gcal-email{display:flex;gap:8px;align-items:center;margin:6px 0 12px;flex-wrap:wrap}
.gcal-email code{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;word-break:break-all;flex:1;min-width:160px}
.gcal-email .btn{margin-top:0;padding:7px 12px}
.gcal-list{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.gcal-item{display:flex;align-items:center;gap:10px;background:var(--panel2);border-radius:8px;padding:8px 11px;font-size:14px;cursor:pointer}
.gcal-item span:nth-of-type(1){flex:1}
.ctxmd-add{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.ctxmd-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ctxmd-row .btn{margin-top:0}
.ctxmd-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:6px 0 6px}
#ctxmd{font-size:12.5px;min-height:200px}
.add{width:40px;height:40px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-size:22px;flex:none}
textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:11px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;outline:none;resize:vertical}
.btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;margin-top:10px}
.saved{color:var(--auto);font-size:13px;margin-left:10px}

.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);
  color:var(--txt);padding:10px 18px;border-radius:12px;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.4);font-size:14px}

/* WhatsApp connection (settings) */
.wa-status{margin:6px 0 12px;padding:11px 13px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:14px;line-height:1.5}
.wa-status code{background:rgba(0,0,0,.25);border-radius:6px;padding:1px 6px;font-size:12.5px}
.wa-status.ok{border-color:rgba(54,201,138,.4);background:rgba(54,201,138,.10)}
.wa-status.warn{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.10)}
.wa-status.off{border-color:var(--line)}
.wa-senders{margin-top:7px;font-size:12.5px;color:var(--muted)}
.wa-actions{display:flex;gap:8px;flex-wrap:wrap}
.wa-actions .btn{margin-top:0}

/* ===== Lisa: account + Google connection ===== */
.account-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-box .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--panel2);
  display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.account-box .acc-id{flex:1;min-width:140px}
.account-box .acc-name{font-weight:600}
.account-box .acc-mail{color:var(--muted,#9aa3b2);font-size:13px}
.gconn .gconn-head{font-weight:600;margin-bottom:8px}
.gconn .scopes{display:flex;flex-wrap:wrap;gap:8px}
.gconn .scope{font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid rgba(0,0,0,.13);
  color:var(--muted,#9aa3b2)}
.gconn .scope.on{color:#9be3a8;border-color:rgba(120,220,140,.4);background:rgba(120,220,140,.08)}
.btn.primary{background:#3b6ef0;border-color:#3b6ef0;color:#fff}
.btn.primary:hover{background:#3360da}
.gpreview{margin-top:14px;display:grid;gap:12px}
.gp-block{background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 12px}
.gp-h{font-weight:600;font-size:13px;margin-bottom:6px}
.gp-row{font-size:13px;padding:2px 0;border-top:1px solid rgba(0,0,0,.05)}
.gp-row:first-of-type{border-top:0}
.gp-row.muted{color:var(--muted,#9aa3b2)}

/* ===== Lisa: onboarding + grouped integrations ===== */
.onboard-wrap{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:32px 18px 60px;overflow-y:auto}
.onboard-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px;max-width:460px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ob-logo{font-size:48px;line-height:1}
.onboard-card h1{margin:8px 0 4px;font-size:25px}
.ob-tag{color:var(--muted,#9aa3b2);font-size:14px;line-height:1.55;margin:0 0 18px}
.ob-section-h{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted,#9aa3b2);margin:18px 0 8px;font-weight:600}
.gbtn-ob{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;
  border-radius:11px;background:#fff;color:#1f2328;font-weight:600;text-decoration:none}
.gbtn-ob:hover{background:#f1f3f5}
.gbtn-ob .gmark{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
  border-radius:50%;background:#4285F4;color:#fff;font-weight:700;font-size:13px}
.ob-scopes{font-size:12px;margin-top:8px}
.ob-connected{background:rgba(120,220,140,.08);border:1px solid rgba(120,220,140,.35);color:#9be3a8;
  border-radius:10px;padding:10px 12px;font-size:14px}
.ob-identity{display:grid;gap:8px}
.ob-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 12px;font-size:13.5px}
.ob-row span{color:var(--muted,#9aa3b2)} .ob-row code{color:var(--txt)}
.ob-continue{width:100%;margin-top:18px}
.ob-skip{font-size:12px;margin-top:10px}
.acc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.intg-sub{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted,#9aa3b2);
  font-weight:600;margin:14px 0 6px}
.intg-sub:first-child{margin-top:0}
.intg-access{font-size:11px;color:var(--muted,#9aa3b2);border:1px solid rgba(0,0,0,.14);
  border-radius:999px;padding:1px 7px;margin-left:4px}
.intg-connect{margin-left:auto;color:#8ab4f8;font-weight:600;text-decoration:none;font-size:13.5px}

/* ===== Lisa: admin dashboard ===== */
.admin-users{display:flex;flex-direction:column;gap:10px}
.admin-row{background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:10px 12px}
.admin-id{display:flex;align-items:center;gap:10px}
.admin-id .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--panel2);display:inline-flex;align-items:center;justify-content:center}
.admin-name{font-weight:600;font-size:14px}
.admin-mail{color:var(--muted,#9aa3b2);font-size:12.5px}
.badge.admin{font-size:10px;background:#3b6ef0;color:#fff;border-radius:999px;padding:1px 7px;vertical-align:middle}
.admin-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12.5px;color:var(--muted,#9aa3b2)}
.admin-stats .on{color:#9be3a8} .admin-stats .off{color:#9aa3b2}
.admin-lisa{margin-top:6px;font-size:12px;color:var(--muted,#9aa3b2);font-family:ui-monospace,monospace}

/* ===== Lisa: connections catalog ===== */
.conn-note{margin:6px 2px 10px}
.conn-catalog{display:flex;flex-direction:column;gap:18px}
.conn-group .conn-cat{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted,#9aa3b2);
  font-weight:700;margin:0 2px 8px}
.conn-item{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);border-radius:11px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.conn-advanced{display:flex;flex-direction:column;gap:18px}
.conn-advanced[hidden]{display:none}
.conn-advanced-toggle{align-self:flex-start}
a.conn-item{color:inherit;text-decoration:none}
.conn-item:hover{background:rgba(0,0,0,.06)}
.conn-ic{font-size:22px;width:30px;text-align:center;flex:0 0 auto}
.conn-info{flex:1;min-width:0}
.conn-name{font-weight:600;font-size:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.conn-auth{font-size:11px;color:var(--muted,#9aa3b2);font-weight:400}
.conn-data{font-size:12.5px;color:var(--muted,#9aa3b2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn-pill{font-size:11px;padding:2px 9px;border-radius:999px;flex:0 0 auto}
.conn-pill.soon{color:#cdb56b;border:1px solid rgba(220,190,90,.35);background:rgba(220,190,90,.08)}
.conn-pill.on{color:#9be3a8;border:1px solid rgba(120,220,140,.4);background:rgba(120,220,140,.08)}
#view-connections .contacts-search{margin:6px 0}

/* ===== Lisa: connected accounts list (Settings → Connections) ===== */
.connected-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.cx-item{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:8px 10px;border-radius:9px;background:rgba(0,0,0,.035)}
.cx-ic{width:22px;text-align:center;font-size:16px;flex:none}
.cx-main{flex:1;min-width:0}
.cx-l{color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-acct{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-acct.muted{opacity:.8}
.cx-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--line)}
.cx-dot.on{background:#2bb673;box-shadow:0 0 0 3px rgba(43,182,115,.16)}
.cx-dot.off{background:#cfd6e0}
.cx-group{background:rgba(0,0,0,.035);border-radius:9px;padding:2px 0 6px}
.cx-group .cx-item{background:none;padding-bottom:2px}
.cx-caps{padding:0 12px 2px 42px;font-size:12.5px;color:var(--muted)}
.cx-acts{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px 4px 42px}
.imessage-nudges label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}
.imessage-nudges input{width:auto;accent-color:var(--accent)}
.imessage-nudges p{margin:6px 0}
#imessage-edit-form{display:flex;flex-direction:column;gap:8px;overflow:auto}
#imessage-edit-form .contacts-search{margin:0}
.imessage-edit-webhook{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.imessage-edit-webhook .imessage-webhook{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.imessage-edit-webhook .imessage-webhook[hidden]{display:none}
.imessage-edit-webhook .imessage-webhook input{width:100%;box-sizing:border-box}
.imessage-edit-webhook .imessage-webhook p{margin:0}
.cx-mini{font-size:12px;font-weight:600;color:var(--accent);background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer}
.cx-mini.ghost{color:var(--muted)}
.cx-mini.connect{margin-left:auto}
.cx-d{font-size:12.5px;color:var(--muted,#9aa3b2)}
.cx-d.on{color:#9be3a8}
/* built-in (always-on) capabilities, shown on the settings page */
.builtins-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:4px 2px 6px}
.builtins{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.bi{font-size:12px;font-weight:600;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.bi.on{color:#1f8a52}
/* compact account header */
.account-box{padding:2px 0}
.btn.ghost.sm{margin-top:0;padding:6px 12px;font-size:13px;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
#line-voice-state.line-ready{color:#087747}
#line-phone-action.btn.ghost.sm{color:var(--txt)}
/* connect-more popup head */
.cm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cm-head b{font-size:16px}
#cm-list{overflow-y:auto}

/* ===== Lisa: contact sync (CardDAV) ===== */
.cd-form{display:flex;flex-direction:column;gap:9px}
.cd-form select,.cd-form input{padding:10px 12px;border-radius:9px;border:1px solid rgba(0,0,0,.14);
  background:var(--panel2);color:var(--txt);font-size:14px;width:100%;box-sizing:border-box}
.cd-hidden{display:none}
.cd-hint{font-size:12px}
.cd-status{font-size:13.5px;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.09)}
.cd-status.on{background:rgba(120,220,140,.08);border-color:rgba(120,220,140,.35)}
.cd-status.off{background:rgba(255,180,80,.08);border-color:rgba(255,180,80,.35)}
.cd-err{color:#ffb4b4;font-size:12px;margin-top:4px}
.cd-import{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ===== Lisa: contact-sync sources ===== */
.carddav{display:flex;flex-direction:column;gap:12px}
.src{background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.08);border-radius:11px;padding:11px 13px}
.src-h{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.src-ic{width:20px;text-align:center}

/* ===== Lisa: connectable catalog (inline connect forms) ===== */
.conn-pill.connect{color:#8ab4f8;border:1px solid rgba(120,160,240,.4);background:rgba(120,160,240,.08);cursor:pointer}
.conn-pill.on{color:#9be3a8;border:1px solid rgba(120,220,140,.4);background:rgba(120,220,140,.08)}
.conn-form[hidden]{display:none}
.conn-form{display:flex;flex-direction:column;gap:8px;margin:-2px 2px 10px;padding:10px;border:1px solid rgba(0,0,0,.09);border-radius:10px;background:rgba(0,0,0,.18)}
.conn-form .cf-in{padding:9px 11px;border-radius:8px;border:1px solid rgba(0,0,0,.14);background:var(--panel2);color:var(--txt);font-size:14px}
.cf-row{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ===== Lisa: branded one-click connect button (contact sync) ===== */
.gbtn-sync{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:11px;
  background:#fff;color:#1f2328;font-weight:600;text-decoration:none;font-size:14.5px}
.gbtn-sync:hover{background:#f1f3f5}
.gbtn-sync .gmark{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
  border-radius:50%;background:#4285F4;color:#fff;font-weight:700;font-size:13px}

/* ---- live terminal: the raw Claude engine ---- */
.term{flex:1;min-height:0;overflow:auto;background:#0a0d13;color:#c9d1d9;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:12px 14px;border-radius:10px;white-space:pre-wrap;word-break:break-word}
.term .t-meta{color:#6e7681;border-bottom:1px solid #21262d;padding-bottom:8px;margin-bottom:10px}
.term .t-dim{color:#6e7681}
.term .t-think{color:#8b949e;margin:7px 0}
.term .t-cmd{color:#7ee787;margin:9px 0 2px}
.term .t-prompt{color:#58a6ff;font-weight:700}
.term .t-tool{color:#d2a8ff;font-weight:600}
.term .t-out{color:#9aa7b4;margin:0 0 6px;padding-left:10px;border-left:2px solid #21262d}
.term .t-final{color:#e3b341;margin:12px 0 4px;font-weight:600}
.term-live{margin-left:auto;margin-right:10px;display:flex;align-items:center;gap:5px;
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8b949e;white-space:nowrap}
.term-live .dot{width:8px;height:8px;border-radius:50%;background:#3fb950;
  box-shadow:0 0 6px #3fb950;animation:tpulse 1.2s infinite}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------------- goal + sub-task plan panel ---------------- */
.planwrap{flex:none;background:var(--panel);border-bottom:1px solid var(--line)}
.planwrap:empty{display:none}
.planbox{padding:8px 14px}
.planbox.open{padding-bottom:12px}
.plan-head{display:flex;align-items:center;gap:9px}
.plan-head.clickable{cursor:pointer}
.plan-head .pp-bar{flex:none;width:70px}
.plan-label{flex:1;min-width:0;font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planbox.open .plan-label{white-space:normal;overflow:visible;font-weight:600}
.plan-head .caret{flex:none;color:var(--muted);font-size:11px}
.plan-body{margin-top:8px}
.planbox:not(.open) .plan-body{display:none}
.pp-bar{flex:1;height:6px;border-radius:6px;background:var(--panel2);overflow:hidden}
.pp-fill{height:100%;background:var(--accent);border-radius:6px;transition:width .4s ease}
.pp-fill[style*="width:100%"]{background:var(--auto)}
.pp-count{flex:none;font-size:11.5px;font-weight:700;color:var(--muted);min-width:30px;text-align:right}
.plan-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.plan-steps li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--txt);line-height:1.35}
.plan-steps .st-ico{flex:none;font-size:13px;line-height:1.4}
.plan-steps .st-txt{display:flex;flex-direction:column;min-width:0}
.plan-steps .st-note{font-size:12px;color:var(--muted);line-height:1.3;margin-top:1px;font-weight:400;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.plan-steps li.st-done .st-title{color:var(--muted);text-decoration:line-through}
.plan-steps li.st-skipped .st-title{color:var(--muted);text-decoration:line-through;opacity:.7}
.plan-steps li.st-active .st-title{color:var(--accent);font-weight:600}
.plan-steps li.st-blocked .st-title{color:var(--danger)}
/* compact progress chip on the task list row */
.subchip{font-size:11px;font-weight:700;padding:1.5px 8px;border-radius:20px;background:var(--panel2);color:var(--muted)}
.subchip.alldone{background:rgba(18,160,106,.15);color:var(--auto)}
/* "channels smoke-tested" confirmation line under the messaging channels */
.cx-verified{font-size:11.5px;color:var(--auto);margin:2px 0 4px 34px;opacity:.9}

/* ===== payments view ===== */
.pay-body{flex:1;overflow-y:auto;padding:12px 12px 28px;animation:screenIn .22s ease}
.pay-summary{display:flex;gap:10px;margin-bottom:6px}
.pay-sum-item{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;box-shadow:0 1px 2px rgba(24,39,75,.05)}
.pay-sum-n{font-size:19px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.pay-sum-l{font-size:10.5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.pay-card{display:flex;align-items:center;gap:7px;background:rgba(47,107,255,.07);border:1px solid rgba(47,107,255,.2);border-radius:12px;padding:10px 12px;font-size:13px;margin-top:12px}
.pay-card .muted{font-size:12px}
.pay-card-ico{font-size:16px}
.pay-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:18px 4px 6px}
.pay-row{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:14px;transition:background .14s ease,transform .1s ease}
.pay-row.clickable{cursor:pointer}
.pay-row.clickable:hover{background:var(--panel);box-shadow:0 4px 16px rgba(24,39,75,.06)}
.pay-row.clickable:active{transform:scale(.99)}
.pay-ico{width:42px;height:42px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--panel2)}
.pay-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pay-r1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pay-vendor{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-amt{font-weight:700;font-size:15px;flex:none;font-variant-numeric:tabular-nums}
.pay-what{font-size:13px;color:var(--txt);line-height:1.35}
.pay-r3{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:1px}
.pay-cat{font-size:11px;font-weight:600;color:var(--muted);background:var(--panel2);border-radius:20px;padding:1px 8px}
.pay-rec{font-size:11px;font-weight:700;color:#0d9488;background:rgba(20,184,166,.13);border-radius:20px;padding:1px 8px}
.pay-meta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pay-for{margin-top:3px;font-size:12px;color:var(--accent);font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================================
   Urgency, projects and memory (2026-08-07)
   ----------------------------------------------------------------------------
   Only ONE thing in the list is allowed to shout, and it is a real deadline. A
   critical task gets a red edge and a countdown; a low-priority background watch
   is dimmed and sinks to the bottom; everything else looks exactly as before.
   The moment every row has a badge, no row has one.
   ========================================================================== */
.thread.urg-critical{background:rgba(229,72,77,.05)}
.thread.urg-critical::before{content:"";position:absolute;left:2px;top:11px;bottom:11px;width:3px;
  border-radius:3px;background:var(--danger)}
.thread.urg-critical:hover{background:rgba(229,72,77,.09)}
.thread.urg-low{opacity:.6}
.thread.urg-low:hover{opacity:1}
/* countdown pill — only ever rendered on a critical task that has a real deadline */
.deadline{flex:none;font-size:11px;font-weight:700;letter-spacing:.2px;padding:1px 7px;border-radius:20px;
  background:rgba(229,72,77,.13);color:var(--danger);font-variant-numeric:tabular-nums}
.deadline.past{background:var(--danger);color:#fff}
/* project chip on a member row: quiet, just enough to see the row has a bigger context */
.proj-chip{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
  color:var(--muted);background:var(--panel2);border-radius:20px;padding:1px 7px;max-width:150px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* project group header in the list */
.proj-head{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;margin-top:4px;
  border:none;background:transparent;border-radius:14px;color:var(--txt);transition:background .16s ease}
.proj-head:hover{background:var(--panel)}
.proj-ico{width:34px;height:34px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--panel2)}
.proj-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.proj-name{font-weight:700;font-size:14px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-goal{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-count{flex:none;font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.proj-caret{flex:none;color:var(--muted);font-size:12px;width:12px}
.proj-body{padding-left:14px;border-left:2px solid var(--line);margin-left:18px}

/* settings: memory list */
.mem-row{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.mem-row:last-child{border-bottom:none}
.mem-main{flex:1;min-width:0}
.mem-name{font-weight:650;font-size:13.5px;word-break:break-word}
.mem-desc{font-size:12.5px;color:var(--muted);margin-top:1px}
.mem-del{flex:none;border:none;background:transparent;color:var(--muted);font-size:15px;padding:2px 4px;border-radius:8px}
.mem-del:hover{background:var(--panel2);color:var(--danger)}
.proj-edit{flex:none;color:var(--muted);font-size:16px;line-height:1;padding:2px 6px;border-radius:8px}
.proj-edit:hover{background:var(--panel2);color:var(--txt)}

/* ---- drag a task into / out of a project, or onto another task ----------------
   The row itself lifts (no ghost clone) so the list never reflows mid-gesture and
   the drop target stays exactly where the eye left it. */
.thread.dragging{position:relative;z-index:30;opacity:.94;cursor:grabbing;
  background:var(--panel);box-shadow:0 14px 34px rgba(24,39,75,.22);transform-origin:center}
.thread.dragging .row-menu{opacity:0}
#threadlist{touch-action:pan-y}          /* a vertical swipe still scrolls; a long-press drags */
/* "this task joins that project" */
.drop-into{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:14px;
  background:rgba(47,107,255,.07)}
/* "do something WITH that task" — merge or group; a different question, a different colour */
.drop-onto{outline:2px solid var(--auto);outline-offset:-2px;border-radius:16px;
  background:rgba(18,160,106,.09)}
.sheet-head{padding:12px 16px 8px;font-size:12.5px;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-sub{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px;
  white-space:normal;line-height:1.35}
/* the standing purpose, shown on the task screen so the owner sees what Lisa is steering by */
.mgoal{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:9px 11px;
  background:rgba(47,107,255,.06);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  font-size:12.5px;line-height:1.4;color:var(--txt);cursor:pointer}
.mgoal:hover{background:rgba(47,107,255,.1)}
.mgoal .mg-ico{flex:none;font-size:13px;line-height:1.3}
.mgoal .mg-sub{display:block;color:var(--muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.mgoal.empty{color:var(--muted);background:transparent;border-left-color:var(--line)}
/* Appears only while dragging a task that is inside a project — the way OUT. A dense list has no
   empty space to drop on, so "out" needs a named target rather than a gap to aim at. */
#drop-out{position:sticky;top:0;z-index:25;margin:0 0 6px;padding:11px 12px;border-radius:14px;
  border:2px dashed var(--muted);background:var(--panel);color:var(--muted);
  font-size:12.5px;font-weight:650;text-align:center}
#drop-out.drop-into{border-style:solid;border-color:var(--accent);color:var(--accent);
  background:rgba(47,107,255,.08);outline:none}

/* --- call recordings: a button that becomes a player --- */
.rec-box{margin:2px 0 4px;display:flex;align-items:center;gap:8px}
.rec-load{border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer;
  border-radius:18px;padding:6px 13px;font-size:12.5px;font-weight:600}
.rec-load:hover{background:var(--panel)}
.rec-len{font-weight:500;color:var(--muted);margin-left:4px}
.rec-audio{width:100%;max-width:320px;height:34px}
.rec-dl{text-decoration:none;color:var(--muted);font-size:15px}

/* task-screen 2026-09-11 ------------------------------------------------------------------
   Three things: the goal header is one line, the thread has three lanes, and a transcript
   distinguishes what was said from what was merely queued up. */

/* --- the one-line header: goal on the left, progress and estimate on the right --- */
.plan-head{gap:8px}
.plan-head .mgoal{flex:1;min-width:0;display:inline-flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;text-align:left;align-items:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin:0;padding:2px 6px;border:0;border-radius:7px;background:transparent;
  font-size:12.5px;line-height:1.35;color:var(--txt);cursor:pointer}
.plan-head .mgoal:hover{background:rgba(11,43,92,.07)}
.plan-head .mgoal.mg-unset{color:var(--muted);background:transparent}
/* The icon carries its own metrics so a tall emoji fallback cannot set the height of the row,
   and the label is the part that ellipsises when the goal is longer than the line. */
.mg-ico{flex:none;font-size:13px;line-height:1.2;height:1.2em}
.mg-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-head .mgoal.mg-unset .mg-txt{color:var(--muted)}
.planbox.open .plan-head .mg-txt{white-space:normal;overflow:visible}
.mg-from{flex:none;margin-left:6px;font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.4px}
.plan-head .pp-bar{flex:none;width:54px}
.plan-head .eta-chip{flex:none;margin-left:0}
.planbox.open .plan-head .mgoal{white-space:normal;overflow:visible}
.plan-goal{font-size:13px;line-height:1.4;color:var(--txt);font-weight:600;margin:2px 0 7px;
  padding-left:16px;position:relative}
.plan-goal::before{content:'\2714\fe0e';position:absolute;left:0;color:var(--auto);font-weight:700}

/* --- summary + battle plan, one box --- */
.ctxbox{margin:8px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:6px 10px}
.ctxbox>summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--muted);
  list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxbox>summary::-webkit-details-marker{display:none}
.ctxbox>summary::before{content:'\25b8\00a0';color:var(--muted)}
.ctxbox[open]>summary::before{content:'\25be\00a0'}
.ctx-body{font-size:12.5px;line-height:1.5;color:var(--txt);margin-top:6px}
.ctx-sec+.ctx-sec{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.ctx-h{font-weight:700;font-size:12px;color:var(--muted);margin-bottom:3px}

/* --- the closing page: what a finished task cost, and what we learned ---
   Collapsed at the very bottom of a finished task, and the same body in a modal from its ⋯.
   Deliberately quiet: this is a record, not an alert, and it sits under the last message.
   No inner scroller here, because it is the LAST thing in the message list, so it grows and the
   thread scrolls it. A box that scrolls inside a scrolling list is a trap on a phone. The modal
   keeps its own scroll, because there it IS the whole screen. */
.pmbox{margin:14px 2px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:7px 11px}
.pmbox>summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--muted);
  list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmbox>summary::-webkit-details-marker{display:none}
.pmbox>summary::before{content:'\25b8\00a0';color:var(--muted)}
.pmbox[open]>summary::before{content:'\25be\00a0'}
.pmbox .pm-body{margin-top:8px}
.pm-body{font-size:12.5px;line-height:1.55;color:var(--txt);overflow-wrap:anywhere}
.pm-body p{margin:5px 0}
.pm-lead{font-weight:600;font-size:13px;line-height:1.45;margin:0 0 4px}
.pm-sec{margin-top:11px;padding-top:9px;border-top:1px solid var(--line)}
.pm-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.pm-h{font-weight:700;font-size:11.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pm-row{display:flex;gap:10px;align-items:baseline;padding:2.5px 0}
.pm-row+.pm-row{border-top:1px dotted var(--line)}
.pm-k{flex:none;width:11.5em;color:var(--muted)}
.pm-v{flex:1;min-width:0}
.pm-list{margin:4px 0;padding-left:18px}
.pm-list li{margin:3px 0}
.pm-note{color:var(--muted);font-size:11.5px;margin-top:9px}
.pm-note .row-spin{margin-right:6px;vertical-align:-1px}
.pm-badge{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  padding:1.5px 7px;border-radius:9px;background:var(--panel2);color:var(--muted);margin-left:5px;vertical-align:1px}
.pm-badge.delivered{background:#e8f6ec;color:#1e7a3c}
.pm-badge.partial{background:#fdf3e2;color:#9a6b16}
.pm-badge.abandoned{background:#fde8e8;color:#c0392b}
.modal-acts{display:flex;align-items:center;gap:4px;flex:none}
@media (max-width:480px){.pm-row{display:block}.pm-k{width:auto;display:block;font-size:11px}}

/* --- three lanes -------------------------------------------------------------------------
   left   = what Lisa sent out     (calls she placed, mail, texts, invitations)
   right  = what came back to us   (their calls, their replies)
   middle = Lisa thinking out loud (plans, notes, an advisor stepping in, system lines)      */
.msg.out{align-self:flex-start;align-items:flex-start}
.msg.in{align-self:flex-end;align-items:flex-end}
.msg.mid{align-self:center;align-items:stretch;max-width:92%}
.msg.out .bubble.comm{background:#eef2fa;border:1px solid #ccd8ef;color:#3c4763;
  border-bottom-left-radius:5px}
.msg.out .bubble.comm b{color:#1f3c74}
.msg.in .bubble.comm{background:#ecf6ef;border:1px solid #c4e2ce;color:#33513d;
  border-bottom-right-radius:5px}
.msg.in .bubble.comm b{color:#1c6b39}
.msg.in .m-time{text-align:right}
.msg.mid .bubble{background:#fdf8ee;border:1px solid #eee0c6;color:#4a4132;border-radius:13px}
.msg.mid .bubble .m-card{background:#fffdf8;border-color:#eee0c6}
.msg.mid .bubble.comm{background:#fdf8ee;border:1px solid #eee0c6;color:#6b5d45}
.msg.mid .bubble.comm b{color:#6b4f1d}
.msg.mid .m-time{align-self:center}
/* the rest of the middle lane: bare system lines and the advisor markers */
.sys,.sys-body{background:#fdf8ee;border-color:#eee0c6;color:#6b5d45}
.sys.err{background:#fdeeee;border-color:rgba(229,72,77,.3);color:var(--danger)}
.advisory{align-self:center;width:92%;max-width:92%}

/* --- what she said, and what she had queued up to say --- */
.tx-turn.cut{border-style:dashed}
.tx-unsaid{display:block;margin-top:4px;padding-left:10px;border-left:2px solid rgba(0,0,0,.1);
  color:#9aa1ae;font-weight:300;font-size:12.5px;line-height:1.45}
.tx-silent{color:#9aa1ae;font-style:italic}
.tx-turn.cut .tx-who{color:#b08340}
.tx-fix{display:block;margin-top:3px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:help}

/* Owner-controlled visitor sharing. */
#contact-access-form { display: grid; gap: 8px; margin-top: 16px; }
#contact-access-card input, #contact-access-card select, #contact-access-card textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid #7775; border-radius: 8px; color: inherit; background: transparent; }
#contact-access-card select option { color: #202020; background: #fff; }
#contact-access-card .mem-row { flex-wrap: wrap; }
#contact-access-card .btn.ghost { background: var(--panel); border: 1px solid var(--line); color: var(--txt); }
#contact-access-card .btn.ghost:hover { background: var(--panel2); }
.privacy-request { padding: 16px 0; border-top: 1px solid #7774; overflow-wrap: anywhere; }
.privacy-request button { margin-top: 8px; }
.privacy-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 0 8px; }
.privacy-request button { white-space: normal; max-width: 100%; }
.privacy-guidance { margin-top: 16px; padding: 12px; border: 1px solid #7774; border-radius: 8px; }
.privacy-guidance p { margin: 8px 0; }
.privacy-request-status:empty { display: none; }
.privacy-review-reason { padding: 12px; margin: 12px 0; border-radius: 8px; background: var(--panel2); font-size: 13px; }
.privacy-review-reason p { margin: 6px 0 0; line-height: 1.5; }
.privacy-access-editor { padding-top: 12px; }
.privacy-access-editor label { display: block; margin-bottom: 6px; }
.privacy-access-status:empty { display: none; }


.task-intelligence{margin:0;border:0;border-radius:0}
.task-intelligence summary{align-items:center;gap:4px 10px;padding:6px 12px;font-size:11px}
.task-intelligence summary>.mgoal{flex:1;min-width:100px;display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--txt);text-align:left;padding:2px 0;font:inherit;font-size:12px;cursor:pointer}
.task-intelligence summary>span{white-space:nowrap}
.task-intelligence .task-decision-body{max-height:28vh;overflow:auto}
.activity-group{border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:7px 10px;font-size:12.5px;flex:none}
.activity-head{display:flex;align-items:baseline;gap:8px;cursor:pointer}
.activity-head>span:first-child{flex:1;min-width:0}
.activity-head time{font-size:10px;color:var(--muted);white-space:nowrap}
.activity-body{padding-top:8px;display:flex;flex-direction:column;gap:6px}
.activity-body.hidden{display:none}
.messages{min-height:0}.messages>*{flex-shrink:0}
.thread-head .th-sub{flex-wrap:nowrap;min-width:0}.th-sub-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.task-intelligence summary>.mgoal{flex-basis:100%}.task-intelligence summary{gap:3px 10px}.activity-head{flex-wrap:wrap}.activity-head time{margin-left:auto}}

.task-intelligence summary{display:flex;flex-wrap:wrap;color:var(--muted);cursor:pointer}.task-decision-body{padding:0 12px 8px}.task-decision-body p{margin:6px 0}.task-intelligence .mg-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctx-body{max-height:36vh;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}#th-plan{flex-shrink:0;max-height:55vh;overflow:auto}.plan-body,.docs-body{max-height:28vh;overflow:auto;overscroll-behavior:contain}
.engine-chip{font:inherit;font-size:10px;line-height:1.2;border:1px solid var(--line,#e2e8e5);border-radius:20px;padding:3px 7px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;color:var(--muted,#64746b);flex-shrink:1}
.engine-chip:empty{display:none}.engine-setting{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;font-size:13px}.engine-setting select{max-width:65%;padding:7px;border:1px solid var(--line,#ddd);border-radius:6px;background:var(--card,#fff);color:inherit}

.lisa-voice-button{border:1px solid var(--line);background:var(--panel);color:var(--accent);border-radius:7px;padding:5px 9px;min-height:30px;font-size:12px;cursor:pointer;flex:none}
.lisa-voice-button.connected{background:var(--accent);color:var(--panel)}
.lisa-voice-panel{position:fixed;right:16px;bottom:18px;width:330px;max-width:calc(100vw - 24px);z-index:250;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 8px 35px #0002;color:var(--txt)}
.lisa-voice-panel[hidden],.lisa-voice-panel [hidden]{display:none!important}
.voice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.voice-heading button{font-size:22px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.lisa-voice-panel p{font-size:13px;line-height:1.5;margin:10px 0;max-height:140px;overflow:auto}
.voice-controls{display:flex;gap:7px;flex-wrap:wrap}
.voice-controls button,.voice-confirmation button{border:1px solid var(--line);background:var(--panel2);color:var(--txt);padding:7px 13px;border-radius:7px;font-size:12px;cursor:pointer}
.voice-controls [data-voice=start]{background:var(--accent);color:var(--panel)}
.voice-controls [data-voice=end]{margin-left:auto;color:var(--danger)}
.voice-confirmation{border:1px solid var(--accent);padding:9px;border-radius:8px;margin-bottom:10px}
@media(max-width:520px){.lisa-voice-panel{right:12px;bottom:12px}.lisa-voice-button{padding:4px 7px;font-size:11px}}
.delegate-form{display:grid;gap:8px}.delegate-form>input,.delegate-form>select{width:100%;padding:8px;border:1px solid var(--line,#ddd);border-radius:6px;background:var(--panel,#fff);color:inherit}.delegate-form>div{display:flex;gap:10px;flex-wrap:wrap;font-size:12px}#delegate-controls p button{margin-left:10px}#delegate-controls details{max-height:200px;overflow:auto}#delegate-controls section{padding-top:12px;border-top:1px solid var(--line,#ddd)}

/* Personal WhatsApp linked-device setup. */
.wa-personal{padding:4px 0;line-height:1.5}
.wa-personal h3{margin:4px 0 10px}
.wa-personal p{margin:10px 0}
.wa-qr{display:block;width:280px;max-width:100%;height:auto;background:#fff;border-radius:8px}
.wa-qr[hidden],.wa-personal [hidden]{display:none}
.wa-steps{padding-left:24px}
.wa-nudges{display:flex;align-items:center;gap:8px}
.wa-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wa-error{color:var(--red,#b42318);font-size:13px}

.instruction-admin-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 6px;border:1px solid #dad3c4;border-radius:5px;background:#f2eee5;color:#6b604a;font:600 10px/1.3 system-ui,sans-serif;white-space:nowrap}
#settings-upload[hidden]{display:none}

/* Admin view stays in a slim strip above the app, including on small screens. */
body:has(>#imp-banner){--admin-banner-height:calc(40px + env(safe-area-inset-top));padding-top:0!important}
body:not(.preview-admin-view)>#imp-banner{position:fixed;inset:0 0 auto;z-index:9999;height:var(--admin-banner-height);padding:env(safe-area-inset-top) 12px 0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;background:#b8860b;color:#fff;box-shadow:0 2px 8px #0003;font:600 13px/1.3 system-ui,sans-serif}
body:not(.preview-admin-view)>#imp-banner>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.preview-admin-view)>#imp-banner button{flex:none;border:0;border-radius:7px;padding:5px 10px;background:#fff;color:#7a5a00;font:700 12px/1.3 system-ui,sans-serif;cursor:pointer}
body:not(.preview-admin-view)>#imp-banner button:focus-visible{outline:3px solid #fff;outline-offset:2px}
body:has(>#imp-banner):not(.preview-admin-view) #app .topbar{padding-top:var(--admin-banner-height);padding-bottom:4px}
body:has(>#imp-banner):not(.preview-admin-view) #view-settings .settings-topbar{height:auto;min-height:72px}
@media(max-width:520px){body:not(.preview-admin-view)>#imp-banner button{font-size:0}body:not(.preview-admin-view)>#imp-banner button::after{content:'Exit';font-size:12px}}