/* The app's own look (ui/app.html). The fonts, colors and basics it shares with the admin page: ui/css/base.css. */
/* code reads as typed: no ligatures (as code, pre, .mono and .ver in base.css) */
kbd,.code{font-variant-ligatures:none;font-feature-settings:"calt" 0,"liga" 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:rgba(163,188,255,.28)}
*::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.18)}
/* ---------- motion (rise, fade, pop and spin: base.css) ---------- */
@keyframes popdown{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pc,rgba(233,185,94,.5))}70%{box-shadow:0 0 0 6px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(233,185,94,0)}50%{box-shadow:0 0 0 4px rgba(233,185,94,.12)}}
@keyframes slidein{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.enter{animation:rise var(--d-4) var(--e-out) both}
.swap{animation:fade var(--d-3) var(--e-out) both}
.spin{width:12px;height:12px;border-radius:50%;border:1.6px solid rgba(255,255,255,.18);border-top-color:var(--text2);animation:spin .8s linear infinite;flex:none}
.shimmer *{color:transparent !important}
.shimmer{background:linear-gradient(100deg,var(--muted) 0%,var(--muted) 38%,#FFFFFF 50%,var(--muted) 62%,var(--muted) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;animation:shimmer 2.4s linear infinite}
/* ---------- leaving (0.64) ----------
   What goes away plays its way out — quickly, speeding up, out of the pointer's way at once — instead of vanishing in
   one frame (app-01-base.js leave()): back toward the button a menu came from, a dialog sinking as its dimming fades, the
   file viewer beside the conversation narrowing away while the conversation widens back. */
.leaving{pointer-events:none !important}
@keyframes sinkup{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--rise) * -.66)) scale(var(--pop))}}
.menu.leaving{animation:sink var(--d-2) var(--e-in) both}
.menu.leaving[data-side="bottom"]{animation-name:sinkup}
.cmodal.leaving{animation:fadeout var(--d-2) var(--e-in) both}
.cmodal.leaving>*{animation:sink var(--d-2) var(--e-in) both}
#viewer.leaving{animation:fadeout var(--d-2) var(--e-in) both}
@keyframes vout{to{width:0;min-width:0;opacity:0}}
@media (min-width:1000px){#viewer.leaving:not(.over){animation:vout var(--d-2) var(--e-in) both}}
/* (opening and leaving beside the conversation: what it shows keeps its width and is uncovered, not squeezed) */
#viewer[style*="--vw-final"]{overflow:hidden}
#viewer[style*="--vw-final"]>*{min-width:var(--vw-final);max-width:var(--vw-final)}
/* hover (0.64): a row lights up the moment the pointer is on it and lets go softly (as Linear's lists do) */
.trow:hover,.navrow:hover,.menu .mi:hover,.rbtn:hover,.sbtn:hover{transition-duration:0s}

/* ---------- login ---------- */
#login,#linkPage{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,rgba(255,255,255,.05),transparent 60%)}
#login form,#linkPage form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;animation:rise .45s var(--out) both}
#login .mark,#linkPage .mark{width:44px;height:44px;border-radius:12px;background:var(--text);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
#login h1,#linkPage h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
#login p,#linkPage p{margin:0 0 6px;color:var(--muted);font-size:.8125rem}
.field{height:46px;padding:0 14px;border:1px solid var(--line-field);border-radius:12px;background:var(--surface);outline:none;transition:border-color var(--d-1),box-shadow var(--d-1)}
.field:focus{border-color:var(--line-typing);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.btn-primary{height:46px;border:0;border-radius:12px;background:var(--text);color:#111;font-weight:600;transition:transform var(--d-1),opacity var(--d-1)}
.btn-primary:active{transform:scale(.98)}
.err{color:var(--bad);font-size:.8125rem;min-height:20px}
.lfields{display:flex;flex-direction:column;gap:10px}
.lfields.swap>*{animation:rise var(--d-3) var(--e-out) both}
.lswap{align-self:center;font-size:.8125rem}

/* ---------- shell ---------- */
.shell{height:100%;display:flex;overflow:hidden;animation:fade var(--d-3) var(--e-out) both}
.side{position:relative;width:var(--side-w);max-width:45vw;flex:none;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;transition:width .28s var(--out)}
.side.sizing{transition:none}
/* the sidebar's edge: drag to make it wider or narrower, double-click for the usual width */
.side-edge{position:absolute;top:0;bottom:0;right:-4px;width:8px;z-index:4;cursor:col-resize;touch-action:none}
.side-edge::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;border-radius:2px;background:transparent;transition:background var(--d-1) .05s}
.side-edge:hover::after,.side.sizing .side-edge::after{background:rgba(255,255,255,.18)}
.side-edge:focus-visible{outline:none}.side-edge:focus-visible::after{background:var(--focus)}
body.sizing,body.sizing *{cursor:col-resize !important;user-select:none !important}
.side-top{padding:14px 10px 6px;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 12px}
.logo{width:24px;height:24px;border-radius:7px;background:var(--text);display:flex;align-items:center;justify-content:center;flex:none}
.brand strong{font-size:.9375rem;font-weight:600;letter-spacing:-.005em}
.brand .ver{margin-left:auto;font-size:.6875rem;color:var(--dim);font-family:var(--mono)}
/* (0.61) the buttons at the right of the sidebar's top row: 全部标为已读 (only while some are unread), 收起侧栏 */
.sbtn{flex:none;width:28px;height:28px;margin:-4px -4px -4px 0;border:0;border-radius:8px;background:transparent;color:var(--dim);display:inline-flex;align-items:center;justify-content:center;transition:background var(--d-1),color var(--d-1)}
.sbtn:hover{background:var(--hover);color:var(--text)}
.sbtn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.sbtn[hidden]{display:none}
.brand .ver+.sbtn{margin-left:2px}
/* (0.61) the sidebar folded away (Ctrl+B): a narrow strip on the left, as in Codex's and Claude's apps; its top button
   opens the sidebar again, and carries a dot while a conversation is unread or waits for the person */
.rail{display:none}
.rbtn{position:relative;flex:none;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background var(--d-1),color var(--d-1)}
.rbtn:hover{background:var(--hover);color:var(--text)}
.rbtn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rgap{flex:1}
.rdot{position:absolute;top:6px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--unread);box-shadow:0 0 0 2px var(--side)}
.rdot.ask{background:var(--warn)}
.rdot[hidden]{display:none}
@media (min-width:761px){
  /* (out of the way while the sidebar is open: not reached with Tab either) */
  .rail{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;position:relative;z-index:3;width:0;overflow:hidden;padding:12px 0;background:var(--side);border-right:1px solid transparent;visibility:hidden;transition:width var(--d-4) var(--e-std),border-color var(--d-4),visibility 0s var(--d-4)}
  .shell.mini .rail{width:56px;border-right-color:var(--line);visibility:visible;transition:width var(--d-4) var(--e-std),border-color var(--d-4),visibility 0s}
  .side{transition:width var(--d-4) var(--e-std),margin-left var(--d-4) var(--e-std)}
  .shell.mini .side:not(.open){margin-left:calc(-1 * var(--side-w) - 1px);visibility:hidden;transition:margin-left var(--d-4) var(--e-std),visibility 0s var(--d-4)}
  /* (0.64) folding and unfolding: what is in the sidebar fades out first and in last, so the moment in between is an
     empty panel gliding — not a slice of the list beside the strip's buttons. The strip's buttons, the other way round. */
  .side>*{transition:opacity var(--d-3) var(--e-std) 70ms}
  .shell.mini .side:not(.open)>*{opacity:0;transition:opacity var(--d-1) var(--e-in)}
  .rail>*{transition:opacity var(--d-3) var(--e-std) 90ms}
  .shell:not(.mini) .rail>*{opacity:0;transition:opacity var(--d-1) var(--e-in)}
  .shell.mini .side .side-edge{display:none}
  /* folded away, it opens over the page for a moment (the search, Ctrl+K): picking a conversation folds it again,
     sliding back out over the page (.closing) */
  .shell.mini .side.open{position:fixed;inset:0 auto 0 0;z-index:20;max-width:none;margin-left:0;visibility:visible;box-shadow:0 0 50px rgba(0,0,0,.6);animation:peek var(--d-3) var(--e-out) both}
  .shell.mini .side.open>*{opacity:1;transition:none}
  .shell.mini .side.open.closing{animation:peekout var(--d-2) var(--e-in) both;pointer-events:none}
  .side.snap,.side.snap>*{transition:none !important}
}
@keyframes peek{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes peekout{to{transform:translateX(-24px);opacity:0}}
@media (max-width:760px){.sbtn#sideToggle{display:none}}
@media (prefers-reduced-motion:reduce){.rail,.side,.shell.mini .side:not(.open),.side>*,.rail>*{transition:none}.shell.mini .side.open{animation:none}}
/* (0.64) the folded sidebar's strip: how many conversations wait for the person; a click opens the next one */
.rwait{margin-top:6px}
.rwn{min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--unread-solid);color:#fff;font-size:.6875rem;font-weight:650;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.rwait[data-ask="true"] .rwn{background:var(--warn);color:#1A1A1A}
/* (0.64) the list's edges: 「↓ 2 个做完没看」 where the list doesn't show them — scrolled out of sight, or in a closed
   folder (as Slack's and Discord's 「More unreads」); a click scrolls to it */
.edgepill{position:absolute;left:50%;z-index:5;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px 0 9px;border:0;border-radius:999px;background:var(--unread-solid);color:#fff;font-size:.75rem;font-weight:550;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;transform:translateX(-50%);animation:edgein var(--d-2) var(--e-out) both;transition:filter var(--d-1)}
.edgepill.up{animation-name:edgeinup}
.edgepill[data-ask="true"]{background:var(--warn);color:#1A1A1A}
.edgepill:hover{filter:brightness(1.1)}
.edgepill:active{transform:translateX(-50%) scale(.96)}
@keyframes edgein{from{opacity:0;transform:translate(-50%,6px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
@keyframes edgeinup{from{opacity:0;transform:translate(-50%,-6px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
/* a row gone to (the edge button, Alt+Shift+↓): lit up for a moment */
.trow.flash{animation:rowflash 1.3s var(--e-std)}
@keyframes rowflash{0%,35%{background:rgba(94,149,255,.2)}100%{background:transparent}}
/* (0.61) a conversation that answered after the person last saw it: a dot where its time was, its name brighter */
.udot{flex:none;width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--unread)}
.udot.bad{background:var(--bad)}
.trow.unread .t{color:var(--text);font-weight:600}
.navrow{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--text2);text-align:left;transition:background var(--d-1),color var(--d-1)}
.navrow:hover{background:var(--hover);color:var(--text)}
.navrow[aria-current="page"]{background:var(--active);color:var(--text)}
.navrow .ic{color:var(--muted)}
.navrow .kbd{margin-left:auto;font-size:.6875rem;color:var(--dim);font-family:var(--mono)}
a.navrow{text-decoration:none}
.side-scroll{flex:1;min-height:0;overflow-y:auto;padding:8px 10px 12px;display:flex;flex-direction:column;gap:14px}
.group{display:flex;flex-direction:column;gap:1px}
.ghead{display:flex;align-items:baseline;gap:6px;padding:6px 10px 4px;font-size:.75rem;color:var(--dim)}
.ghead b{font-weight:500;color:var(--muted)}
.group .empty{font-size:.75rem;color:var(--dim);padding:2px 10px 6px}
/* one list: folders (pinned first, then the latest) with their conversations, then conversations outside folders */
.trow{position:relative;display:flex;align-items:center;min-height:34px;border-radius:9px;color:var(--text2);transition:background var(--d-1),color var(--d-1),box-shadow var(--d-1),opacity var(--d-1)}
.trow:hover{background:var(--hover);color:var(--text)}
.trow.cur{background:var(--active);color:var(--text)}
.trow.cur .m{color:var(--muted)}
.trow.enter{animation:slidein var(--d-4) var(--e-out) both}
.tmain{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:inherit;background:transparent;color:inherit;text-align:left;font:inherit}
.tmain:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;box-shadow:none}
.trow .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84375rem}
.trow .m{flex:none;font-size:.71875rem;color:var(--dim);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
/* 专一 (one bubble) or 协作 (two): the same quiet grey on every row */
.who{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;color:var(--dim);transition:color var(--d-1)}
.who .ic{display:inline-flex}
.trow:hover .who,.trow.cur .who,.trow.renaming .who{color:var(--muted)}
.trow .fic,.trow .pin{flex:none;display:inline-flex;color:var(--muted)}
.trow .pin{color:var(--dim)}
.trow.grp .chev{flex:none;display:inline-flex;width:10px;margin:0 -3px 0 -4px;color:var(--dim);transition:transform var(--d-3) var(--e-std),color var(--d-1)}
.trow.grp .tmain[aria-expanded="true"] .chev{transform:rotate(90deg)}
.trow.grp:hover .chev{color:var(--text)}
.trow.grp .t{color:var(--text)}
/* "···" on hover or focus (always there on touch screens), in place of the time or count */
.trow .act{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:7px;background:var(--hover);color:var(--muted);display:none;align-items:center;justify-content:center}
.trow .act:hover,.trow .act[aria-expanded="true"]{background:var(--active);color:var(--text)}
.trow:hover .act,.trow:focus-within .act,.trow .act[aria-expanded="true"]{display:flex}
.trow:hover .m,.trow:focus-within .m,.trow:has(.act[aria-expanded="true"]) .m{visibility:hidden}
@media (hover:none){.trow .act{position:static;transform:none;display:flex;flex:none;margin-right:4px;background:transparent}.trow .m{visibility:visible !important}}
.kids{position:relative;display:flex;flex-direction:column;gap:1px;border-radius:9px;transition:background var(--d-1),box-shadow var(--d-1)}
.kids::before{content:"";position:absolute;left:17px;top:4px;bottom:4px;border-left:1px solid var(--line)}
.trow.child{min-height:31px}
.kids.opening>*{animation:kidin var(--d-4) var(--e-out) both}
.kids.opening::before{animation:fade var(--d-3) var(--e-out) both}
@keyframes kidin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.trow.child .tmain{padding-left:30px}
.trow.child .t{font-size:.8125rem}
.kempty{padding:5px 10px 7px 30px;font-size:.75rem;color:var(--dim)}
/* renaming in place */
.trow.renaming{gap:9px;padding:0 6px 0 10px;background:var(--active)}
.trow.renaming.child{padding-left:30px}
.rn{flex:1;min-width:0;height:26px;padding:0 8px;border:1px solid var(--line3);border-radius:7px;background:var(--surface);color:var(--text);font:inherit;font-size:.84375rem;outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
/* moving conversations by dragging them onto a folder (or back into the list) */
.side.dragging .trow:not(.grp):not(.dragsrc):hover{background:transparent}
.trow.dragsrc,.kids.dragsrc{opacity:.4}
/* where a dragged conversation or folder lands (putting the list in order) */
.dropline{position:relative;height:0;margin:0 6px;pointer-events:none}
.dropline::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;background:var(--link)}
.dropline::after{content:"";position:absolute;left:-3px;top:-4px;width:8px;height:8px;border-radius:50%;border:2px solid var(--link);background:var(--side);box-sizing:border-box}
.trow.drop,.kids.drop,.group.drop{background:rgba(163,188,255,.07);box-shadow:inset 0 0 0 1px rgba(163,188,255,.5)}
.trow.drop .fic{color:var(--link)}
.group{border-radius:10px;transition:background var(--d-1),box-shadow var(--d-1)}
.fempty{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:6px 10px;border:1px dashed var(--line2);border-radius:9px;background:transparent;color:var(--dim);font-size:.78125rem;text-align:left;transition:color var(--d-1),border-color var(--d-1),background var(--d-1)}
.fempty:hover,.fempty.drop{color:var(--text2);border-color:var(--line3);background:var(--hover)}
.fempty.drop{border-color:rgba(163,188,255,.6);color:var(--link)}
.morebtn{align-self:flex-start;margin:4px 10px 2px;font-size:.75rem;color:var(--dim)}
.morebtn:hover{color:var(--text2)}
/* search */
.sfind{position:relative;display:flex;align-items:center;margin-top:6px}
.sfind>.ic{position:absolute;left:10px;display:flex;color:var(--dim);pointer-events:none}
.sfind input{width:100%;height:32px;padding:0 30px 0 32px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);color:var(--text);font-size:.8125rem;outline:none;transition:border-color var(--d-1),background var(--d-1)}
.sfind input::placeholder{color:var(--dim)}
.sfind input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.sfind input:focus{border-color:var(--line3);background:var(--surface)}
.sfind .clear{position:absolute;right:4px;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center}
.sfind .clear:hover{color:var(--text);background:var(--hover)}
.sfind .skey{position:absolute;right:8px;padding:0 5px;border:1px solid var(--line2);border-radius:5px;font:500 .65625rem/16px var(--sans);color:var(--dim);pointer-events:none}
.sfind input:focus~.skey,.sfind input:not(:placeholder-shown)~.skey{display:none}
@media (hover:none){.sfind .skey{display:none}}
.ghead .gadd{margin-left:auto;align-self:center;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;transition:background var(--d-1),color var(--d-1)}
.ghead .gadd:hover{background:var(--hover);color:var(--text)}
#title .gp{color:var(--dim);font-weight:inherit}
.badge{font-size:.6875rem;line-height:18px;padding:0 7px;border-radius:999px;background:rgba(233,185,94,.14);color:var(--warn);white-space:nowrap}
.side-foot{border-top:1px solid var(--line);padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px}
.agents{display:flex;flex-direction:column;gap:4px;padding:2px 10px 6px;font-size:.78125rem}
.agent{display:flex;align-items:center;gap:8px;min-width:0;height:22px}
.agent .nm{font-weight:500}
.agent .st{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:#4A4A4A}
/* the account (and its Claude plan) at the bottom of the sidebar */
.me-row{display:flex;align-items:center;gap:4px}
.acct-btn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:11px;background:transparent;text-align:left;transition:background var(--d-1)}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{background:var(--hover)}
.acct-btn .who2{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.acct-btn .nm{font-size:.84375rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-btn .sub{font-size:.71875rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-btn .sub b{font-weight:500;color:var(--muted)}
.acct-btn .sub .u{font-variant-numeric:tabular-nums;color:var(--muted)}
.acct-btn .sub .u.warn{color:var(--warn)}.acct-btn .sub .u.bad{color:var(--hot)}
.ava{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78125rem;font-weight:600;color:#1A1A1A;background:linear-gradient(145deg,#F0B49B,#C9785A);letter-spacing:.02em}
.ava.big{width:38px;height:38px;font-size:.9375rem}
.me-gear{flex:none;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:background var(--d-1),color var(--d-1)}
.me-gear:hover,.me-gear[aria-current="page"]{background:var(--hover);color:var(--text)}
/* usage: the plan (a dot in Claude's color, like the computers list), then one line per limit: used, a bar, the reset.
   Everything after the dot sits on one text column, the same column as the menu items' labels. */
.plan{display:flex;flex-direction:column;gap:10px;min-width:0}
.plan-head{display:flex;align-items:flex-start;gap:10px;min-width:0}
.plan-dot{flex:none;width:16px;height:20px;display:flex;align-items:center;justify-content:center}
.plan-dot .dot{background:var(--claude)}
.plan-id{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.4}
.plan-id .nm{font-size:.84375rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-mail{font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.plan-head .rf{flex:none;width:28px;height:28px;margin:-4px -4px 0 0;padding:0;justify-content:center;color:var(--dim)}
.plan-head .rf:hover{color:var(--text)}
.plan-head .rf.busy .ic{animation:spin .9s linear infinite}
.plan-body{display:flex;flex-direction:column;gap:11px;margin-left:26px;min-width:0}
.uw{display:flex;flex-direction:column;gap:6px}
.uw-top{display:flex;align-items:baseline;gap:8px;font-size:.78125rem;min-width:0}
.uw-top .n{color:var(--text2);white-space:nowrap}
.uw-top .r{color:var(--dim);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.uw-top .p{margin-left:auto;flex:none;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.uw-top .p b{font-weight:600;font-size:.78125rem;color:var(--text)}
.uw.warn .uw-top .p,.uw.warn .uw-top .p b{color:var(--warn)}
.uw.bad .uw-top .p,.uw.bad .uw-top .p b{color:var(--hot)}
/* the same quiet meter as the admin page: grey while there is room, yellow near the limit, red at it */
.ubar{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ubar>span{display:block;height:100%;width:var(--w);min-width:4px;border-radius:inherit;background:linear-gradient(90deg,#8E8E8E,#D2D2D2);transform-origin:left center;animation:grow .8s var(--out) both;transition:background .3s}
.ubar.zero>span{min-width:0}
.ubar.warn>span{background:linear-gradient(90deg,#C99236,var(--warn))}.ubar.bad>span{background:linear-gradient(90deg,#D9443A,var(--hot))}
.ubar.still>span{animation:none;transition:width .5s var(--out)}
@keyframes grow{from{transform:scaleX(0)}}
.plan-foot{font-size:.71875rem;color:var(--dim)}
/* the account panel: a menu like the others, exactly as wide as the account row it opens from */
.menu.acct{min-width:0;max-width:none}
.mepanel{display:flex;flex-direction:column;gap:1px}
.mepanel .plan{padding:8px 10px 10px}
.mepanel .plan+.plan{border-top:1px solid var(--line);padding-top:12px}
.dot.live{animation:pulse 1.8s ease-out infinite}

.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--bg)}
/* the live connection dropped (for more than 3 s): said over the top of the conversation, gone once it is back */
.livebar{position:absolute;top:60px;left:0;right:0;z-index:6;display:flex;justify-content:center;pointer-events:none}
.livebar span{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--raised);border:1px solid var(--line2);color:var(--text2);font-size:.8125rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.livebar .spin{width:12px;height:12px;border-radius:50%;border:1.6px solid var(--line3);border-top-color:var(--text2);animation:spin .9s linear infinite}
.top{flex:none;display:flex;align-items:center;gap:10px;padding:0 20px 0 24px;height:52px;border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
/* The desktop app (0.2.3+) has no title bar of its own (window.abDesktop.titleBarOverlay): the top row drags the
   window and Windows draws its three window buttons over the right end of it (about 138 × 52). Nothing changes in a
   browser or an older desktop app. --wco-r: the room the buttons take on the right (env() from the window controls
   overlay; 138px where it isn't given). */
html.in-desktop{--wco-r:calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - 138px)))}
html.in-desktop .top,html.in-desktop .side-top .brand,html.in-desktop #viewer .vbar,html.in-desktop .drag-strip{-webkit-app-region:drag;app-region:drag}
html.in-desktop .top :is(button,a,input,select,textarea,label,.chip),html.in-desktop .side-top .brand :is(button,a,input),
html.in-desktop #viewer .vbar :is(button,a,input,.vseg,.vcount),html.in-desktop :is(.view-edge,.side-edge,#menu,#mentions,.cmodal,#toast){-webkit-app-region:no-drag;app-region:no-drag}
html.in-desktop:not(.mac) .top{padding-right:calc(var(--wco-r) + 12px)}
html.in-desktop:not(.mac) #viewer .vbar{padding-right:calc(var(--wco-r) + 8px)}
.drag-strip{display:none}
html.in-desktop .drag-strip{display:block;position:fixed;top:0;left:0;right:0;height:52px;z-index:5}
/* The Mac desktop app (0.3.0+, html.mac from abDesktop.platform): the Mac's own close / minimize / zoom buttons sit at
   the top LEFT, in the same 52px row (about 18–70px from the left); nothing at the top right. What is under them moves
   right by --wco-l: the sidebar's top row (whose height moves up 2px to line up with the buttons), the top row when
   the sidebar is hidden (narrow window), the file viewer's bar when it covers the window. In full screen
   (html.fullscreen) the buttons aren't there and nothing moves. */
html.in-desktop.mac{--wco-l:76px}
html.in-desktop.mac.fullscreen{--wco-l:0px}
html.in-desktop.mac .side-top{padding-top:12px}
html.in-desktop .rail{-webkit-app-region:drag;app-region:drag}
html.in-desktop .rail .rbtn{-webkit-app-region:no-drag;app-region:no-drag}
html.in-desktop.mac:not(.fullscreen) .rail{padding-top:52px}
@media (min-width:761px){html.in-desktop.mac:not(.fullscreen) .shell.mini .top{padding-left:max(24px,calc(var(--wco-l) - 44px))}}
html.in-desktop.mac .side-top .brand{padding-left:max(8px,calc(var(--wco-l) - 2px))}
html.in-desktop.mac #viewer .vbar{padding-left:max(20px,calc(var(--wco-l) + 8px))}
@media (min-width:1000px){html.in-desktop.mac #viewer:not(.over) .vbar{padding-left:18px}}
@media (max-width:720px){html.in-desktop.mac #viewer .vbar{padding-left:max(14px,calc(var(--wco-l) + 8px))}}
@media (max-width:760px){html.in-desktop.mac .top{padding-left:max(12px,calc(var(--wco-l) + 12px))}}
.top h1{margin:0;font-size:.90625rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{flex:none;font-size:.71875rem;line-height:20px;padding:0 8px;border-radius:999px;background:var(--hover);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.iconbtn{display:none;width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--text2);align-items:center;justify-content:center;flex:none;margin-left:-8px}
.iconbtn:hover{background:var(--hover)}

.chat{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 24px;scroll-behavior:auto}
.col{max-width:768px;margin:0 auto}
#messages{display:flex;flex-direction:column;gap:28px;padding-top:12px}

/* ---------- empty / new conversation ---------- */
.hero{min-height:calc(100vh - 260px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px 0}
.hero>*{animation:rise var(--d-4) var(--e-out) both}
.hero>*:nth-child(2){animation-delay:25ms}.hero>*:nth-child(3){animation-delay:50ms}.hero>*:nth-child(4){animation-delay:75ms}
/* (a conversation still loading: nothing for a moment, then the line fades in — most load before it shows) */
.hero.late>*{animation:fade var(--d-3) var(--e-out) 260ms both}
.hero-mark{width:52px;height:52px;border-radius:16px;background:linear-gradient(145deg,#2F2F2F,#1F1F1F);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero h2{margin:0;font-size:1.625rem;font-weight:600;letter-spacing:-.015em}
.hero p{margin:0;max-width:440px;color:var(--muted);font-size:.84375rem}
.modeseg{display:inline-flex;padding:3px;border-radius:12px;background:var(--panel);border:1px solid var(--line);position:relative}
.modeseg button{position:relative;z-index:1;height:32px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:.8125rem;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.modeseg button[aria-pressed="true"]{color:var(--text)}
.modeseg .thumb{position:absolute;z-index:0;top:3px;bottom:3px;border-radius:9px;background:var(--raised);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left var(--d-4) var(--e-std),width var(--d-4) var(--e-std)}

/* ---------- conversation ---------- */
.turn{display:flex;flex-direction:column;gap:14px;min-width:0}
.me{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.me .bubble{max-width:78%;padding:10px 16px;border-radius:20px;background:var(--raised);white-space:pre-wrap;word-break:break-word;font-size:.9375rem;line-height:1.6}
.reply{display:flex;flex-direction:column;gap:10px;min-width:0}
/* what can be done with a message (app-11-actions.js): under the person's on hover, under an answer (the latest: always) */
.mact{width:28px;height:28px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--dim);display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:background var(--d-1),color var(--d-1)}
.mact:hover{background:var(--hover);color:var(--text)}
.mact:has(> :not(.ic)),.mact.word{width:auto;padding:0 9px 0 7px;font-size:.75rem}
.macts,.tacts{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity var(--d-1)}
.macts{margin:-2px -4px -10px 0}
.tacts{margin:-4px 0 0 -6px}
.turn:hover .macts,.turn:hover .tacts,.macts:focus-within,.tacts:focus-within,.tacts.last{opacity:1}
@media (hover:none){.macts,.tacts{opacity:1}}
.mact[class*="mi-"]::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat}
.mact.did::before{display:none}
.mi-copy{--mi:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2211%22 height=%2211%22 rx=%222.5%22/%3E%3Cpath d=%22M5 15V6.5A2.5 2.5 0 0 1 7.5 4H15%22/%3E%3C/svg%3E")}
.mi-edit{--mi:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15.5 4.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z%22/%3E%3C/svg%3E")}
.mact:disabled{opacity:.4;cursor:default}
.mact:disabled:hover{background:transparent;color:var(--dim)}
/* 编辑: the person's message edited where it is */
.me.editing{align-items:stretch}
.me.editing .mquote{align-self:flex-end}
.medit{display:flex;flex-direction:column;gap:10px;padding:12px 12px 10px 16px;border:1px solid var(--line-typing);border-radius:20px;background:var(--raised);animation:fade var(--d-3) var(--e-out) both}
.medit textarea{width:100%;min-height:24px;resize:none;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.9375rem;line-height:1.6;padding:0}
.medit .mrow{display:flex;align-items:center;gap:8px}
.medit .hint{flex:1;min-width:0;font-size:.75rem;color:var(--dim)}
@media (max-width:640px){.medit .hint{display:none}}
/* turns undone by an edit, or 再试一次: one quiet line where they were; opened, as they were (greyed) */
.turn.oldv{gap:10px}
.oldv-head{align-self:center;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border:1px dashed var(--line2);border-radius:999px;background:transparent;color:var(--dim);font-size:.75rem;transition:background var(--d-1),color var(--d-1),border-color var(--d-1)}
.oldv-head:hover{background:var(--hover);color:var(--text2);border-color:var(--line3)}
.oldv-head .oc{color:var(--muted)}
.oldv-in{display:flex;flex-direction:column;gap:28px;padding:14px 0 6px 16px;border-left:2px solid var(--line);opacity:.62}
/* what of an answer a message quotes (引用): grey lines above it */
.mquote{max-width:78%;display:flex;align-items:flex-start;gap:7px;padding:6px 12px 6px 10px;border-radius:12px;border:1px solid var(--line);color:var(--muted);font-size:.8125rem;line-height:1.55}
.mquote .ic{flex:none;margin-top:3px;color:var(--dim)}
.mquote .t{min-width:0;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 引用: the button by what is picked in an answer, and the quote over the box where the message is typed */
.quotebtn{position:fixed;z-index:60;height:30px;padding:0 12px 0 10px;border:1px solid var(--line3);border-radius:999px;background:var(--raised);color:var(--text);font-size:.78125rem;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow);animation:pop var(--d-2) var(--e-out) both}
.quotebtn:hover{background:#3A3A3A}
.qbox{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px -6px;padding:7px 6px 7px 10px;border-radius:12px;background:var(--raised);color:var(--text2);font-size:.8125rem;line-height:1.55;animation:fade var(--d-3) var(--e-out) both}
.qbox>.ic{flex:none;margin-top:3px;color:var(--dim)}
.qbox .t{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qbox .x{flex:none;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center}
.qbox .x:hover{color:var(--text2);background:var(--hover)}
/* what the person said while it worked, and whether it got there */
.me.steer{flex-direction:column;align-items:flex-end;gap:5px;margin:2px 0 4px;animation:rise var(--d-3) var(--e-out) both}
.me.steer .bubble{font-size:.90625rem;padding:9px 15px;background:#303030;border:1px solid rgba(163,188,255,.16)}
.me.steer.dropped .bubble{opacity:.6}
.sstate{display:inline-flex;align-items:center;gap:6px;padding-right:6px;font-size:.75rem;color:var(--dim);animation:fade var(--d-3) var(--e-out) both}
.sstate .ic{color:var(--dim)}
.me.steer .sline{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.me.steer .readnow{font-size:.75rem;padding:3px 9px}
.me.steer.delivered .sstate .ic{color:var(--ok)}
.me.steer.waiting .sstate .pd{width:6px;height:6px;border-radius:50%;background:var(--link);--pc:rgba(163,188,255,.5);animation:pulse 1.6s ease-out infinite}
.sfollow{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--dim)}
.me.steer.seen .sstate .ic,.steer.bysomeone.seen .sstate .ic{color:var(--ok)}
.me.steer.delivered .sstate .pd,.steer.bysomeone.delivered .sstate .pd,.steer.bysomeone.waiting .sstate .pd{width:6px;height:6px;border-radius:50%;background:var(--link);--pc:rgba(163,188,255,.5);animation:pulse 1.6s ease-out infinite}
/* GPT's message while Claude works */
.steer.bysomeone{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:2px 0 4px;animation:rise var(--d-3) var(--e-out) both}
.steer.bysomeone .q{font-size:.84375rem;color:var(--text2);padding:2px 0 2px 14px;border-left:2px solid var(--line2);white-space:pre-wrap;word-break:break-word}
.steer.bysomeone .sstate{padding:0}
/* what Claude answered to it */
.sreply{max-width:78%;display:flex;gap:8px;align-items:baseline;padding:7px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:.8125rem;line-height:1.6;color:var(--text2);cursor:pointer;animation:fade var(--d-3) var(--e-out) both}
.sreply .n{flex:none;font-weight:600}
.sreply .t{min-width:0;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sreply.open .t{display:block;-webkit-line-clamp:unset}
.sreply:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sreply.inans{cursor:default;background:none;border:0;padding:0 6px;gap:5px;font-size:.75rem;color:var(--dim);align-items:center}
.turn .who{display:flex;align-items:center;justify-content:flex-start;width:auto;gap:7px;font-size:.78125rem;color:var(--dim)}
.who .n{font-weight:600}
.who .arrow{color:var(--dim)}
.handoff{display:flex;flex-direction:column;gap:6px}
.handoff .q{font-size:.84375rem;color:var(--text2);padding:2px 0 2px 14px;border-left:2px solid var(--line2);white-space:pre-wrap;word-break:break-word}
.md{word-break:break-word;font-size:.9375rem;line-height:1.72;color:var(--text)}
.md>*:first-child{margin-top:0}
.md p{margin:0 0 12px}
.md>*:last-child{margin-bottom:0}
.md ul,.md ol{margin:0 0 12px;padding-left:22px}
.md li{margin:3px 0}
/* (an item's own items: a list in it, closer under it) */
.md li>ul,.md li>ol{margin:3px 0 0;padding-left:20px}
.md li>ul,.wcard .md li>ul{list-style-type:circle}
/* (items written with blank lines between them: as far apart as paragraphs) */
.md .loose>li+li{margin-top:12px}
.md h2{margin:22px 0 10px;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.md h3{margin:20px 0 8px;font-size:1rem;font-weight:600;letter-spacing:-.005em}
.md h4{margin:16px 0 6px;font-size:.9375rem;font-weight:600}
.md li::marker{color:var(--dim)}
.md a{text-decoration:underline;text-decoration-color:rgba(163,188,255,.35);text-underline-offset:3px;transition:text-decoration-color var(--d-1)}
.md a:hover{text-decoration-color:var(--link)}
.md blockquote{margin:0 0 12px;padding:2px 0 2px 14px;border-left:2px solid var(--line2);color:var(--text2)}
.md hr{border:0;border-top:1px solid var(--line2);margin:16px 0}
.md code{font-family:var(--mono);font-size:.85em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.04);border-radius:5px;padding:.1em .38em;color:#E6E6E6}
.md pre{position:relative;margin:2px 0 14px;overflow-x:auto;background:var(--code);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-family:var(--mono);font-size:.8125rem;line-height:1.65;tab-size:2}
.md pre code{border:0;color:var(--text)}
.md pre code{background:none;padding:0;font-size:inherit}
.md .copy{position:absolute;top:8px;right:8px;opacity:0;transition:opacity var(--d-1)}
.md pre:hover .copy,.md pre:focus-within .copy{opacity:1}
.md .copy{background:rgba(30,30,30,.85)}
@media (hover:none){.md .copy{opacity:1}}
.md table{display:block;width:max-content;max-width:100%;overflow-x:auto;margin:2px 0 14px;border:1px solid var(--line2);border-radius:12px;border-collapse:separate;border-spacing:0;font-size:.84375rem;line-height:1.55}
.md th,.md td{padding:8px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.md tr>*:last-child{border-right:0}
.md tbody tr:last-child>td{border-bottom:0}
.md th{background:rgba(255,255,255,.035);font-weight:600;color:var(--text);white-space:nowrap}
.md td{color:var(--text2)}
.md tbody tr{transition:background var(--d-1)}
.md tbody tr:hover{background:rgba(255,255,255,.02)}
.md strong{font-weight:600}

/* work log */
/* ---------- a turn's work (app-07-worklog.js): its words, each stretch of work one line, the one going on live ---------- */
.md.said{margin:2px 0}
/* a stretch: one quiet line, the chevron right after its words; opened, its card */
.wseg{display:flex;flex-direction:column;min-width:0}
.wseg-row{display:flex;align-items:center;gap:10px;min-width:0}
.wseg-row>.wseg-head{flex:0 1 auto;min-width:0}
.wseg-head{align-self:flex-start;max-width:100%;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 4px;margin-left:-4px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.8125rem;text-align:left;transition:background var(--d-1),color var(--d-1)}
.wseg-head:hover{background:var(--hover);color:var(--text2)}
.wseg-head .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wseg-head .chev{flex:none;display:flex;align-items:center;color:var(--dim);transition:transform var(--d-3) var(--e-std)}
.wseg-head:hover .chev{color:var(--text2)}
.wseg.open>.wseg-head .chev,.wseg.open>.wseg-row>.wseg-head .chev{transform:rotate(90deg)}
/* the one going on: a dot, what it is doing, how long (a chevron pointing down, up when open) */
.wseg-head.live{color:var(--text2)}
.wseg-head.live .chev{transform:rotate(90deg)}
.wseg.live.open>.wseg-head .chev{transform:rotate(-90deg)}
.wseg-head .wtime{flex:none;margin-left:4px;color:var(--dim);font-variant-numeric:tabular-nums}
.wseg-head.waiting{color:var(--warn)}
.wseg-head>.ic{display:flex;align-items:center}
.wdot{flex:none;width:8px;height:8px;margin:0 3px 0 2px;border-radius:50%;background:var(--claude);box-shadow:0 0 0 3px rgba(227,139,107,.18);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
.wseg-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--d-4) var(--e-std),opacity var(--d-3) var(--e-std)}
.wseg.open>.wseg-body{grid-template-rows:1fr;opacity:1}
.wseg-body>div{min-height:0;overflow:hidden}
/* a finished turn's way to its answer, folded into one line; opened: its words and lines, set off by a rule */
.tfold-in{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px 6px;padding-left:14px;border-left:2px solid var(--line)}
.tfold-in .md.said{color:var(--text2)}
/* the bar it folds into: 完成, how long and what it did, its files, 查看过程 */
.tdone{display:flex;align-items:center;gap:10px;min-height:42px;padding:5px 6px 5px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.tdone-chip{flex:none;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px 0 7px;border-radius:999px;background:rgba(99,198,143,.14);color:var(--ok);font-size:.75rem;font-weight:650}
.tdone-txt{flex:1;min-width:0;color:var(--text2);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdone .wthumbs{flex:none}
.tdone .tfold-head{flex:none;margin-left:0;align-self:center}
.tfold.open .tdone .tfold-head .chev{transform:rotate(90deg)}
.tfold-in{margin-top:10px}
.tfold+*{margin-top:14px}
/* an answer's own headings (a paragraph all in bold): set apart, so it reads in parts */
.md p.lead-h{margin:20px 0 6px;font-size:1.0625rem;color:var(--text)}
.md p.lead-h:first-child{margin-top:0}
.md p.lead-h strong{font-weight:650}
/* (a phone: the bar keeps its words; the files are in the process and under the answer) */
@media (max-width:640px){.tdone .wthumbs{display:none}}
/* the card: a step a line, a thin line between them; it grows with the page (no scrolling of its own) */
.wcard-wrap{padding:4px 0 2px}
.wcard{margin:0;padding:0;list-style:none;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.012);font-size:.8125rem;color:var(--muted)}
.wcard>li{display:flex;align-items:center;gap:9px;min-width:0;min-height:36px;padding:0 14px;border-top:1px solid var(--line)}
.wcard>li:first-child{border-top:0}
.wcard>li .x{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 0}
.wcard>li button.x{display:block;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:inherit;line-height:inherit;border-radius:4px}
.wcard .v{color:var(--muted)}
.wcard .o{color:var(--text2)}
.wcard .q,.wcard .w{color:var(--dim)}
.wcard .w{margin-left:8px}
.wcard .w.sep{margin-left:0}
.wcard>li.canopen{cursor:pointer}
.wcard>li.canopen:hover .o{color:var(--text)}
.wcard>li .open-ic{flex:none;display:flex;align-items:center;color:var(--dim);transition:transform .15s var(--ease)}
.wcard>li.shown .open-ic{transform:rotate(90deg)}
.wcard>li>.ic{flex:none;display:flex;align-items:center;color:var(--dim)}
.wcard>li.wrap{align-items:flex-start}
.wcard>li.wrap .x{white-space:normal;word-break:break-word}
/* (its words can run onto more lines: what sits beside them — the spinner, 没成功, the chevron — stays with their first line, not at the box's edge) */
.wcard>li.wrap>.ic,.wcard>li.wrap>.open-ic,.wcard>li.wrap>.wfail,.wcard>li.wrap>.step-file{display:flex;align-items:center;height:calc(.8125rem*1.6);margin-top:8px}
.wcard>li.wrap>svg{margin-top:calc(8px + (.8125rem*1.6 - 13px)/2)}
.wcard>li.think .o{color:var(--dim)}
.wcard>li.live .x{background:linear-gradient(100deg,var(--muted) 0%,var(--muted) 38%,#FFFFFF 50%,var(--muted) 62%,var(--muted) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:shimmer 2.4s linear infinite}
.wcard>li.live .x *{color:transparent}
.wcard>li.halted .o,.wcard>li.halted .v{color:var(--dim)}
.wcard>li .wfail{flex:none;font-size:.75rem;color:var(--bad)}
.wcard>li.asked>svg,.wcard>li.asked>.ic{color:var(--warn)}
.wcard>li.info .o,.wcard>li.info .x{color:var(--dim)}
.wcard>li.retry .o{color:var(--warn)}
.wcard>li.error .o{color:var(--bad)}
.wcard>li.steer .o{color:var(--text)}
.wcard>li.pstep.ok .o{color:var(--ok)}
.wcard>li.pstep.no .o{color:var(--bad)}
.wcard>li.pstep.dim .o{color:var(--dim)}
.wcard>li.pstep.rev .o{color:var(--link)}
.wcard>li.wolder .o{color:var(--dim)}
/* a subtask at work: what it does now, quiet, under its line; opened: its own steps, a card inside */
.wcard>li .wnow{flex-basis:100%;margin:-6px 0 8px;font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard>li:has(>.wnow){flex-wrap:wrap}
.wcard>li.subwrap{display:block;padding:0 14px 10px}
.wcard.sub{border-radius:10px}
/* a step opened: what it gave back, under its line, inside the card */
.wcard>li.stepout{display:block;padding:0 14px 12px;border-top:0}
.wout.box{border:1px solid var(--line);border-radius:8px;background:var(--code);overflow:hidden}
.wout .cmd{padding:7px 10px;font:.75rem/1.55 var(--mono);color:var(--text2);border-bottom:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.wout .res{margin:0;padding:7px 10px;font:.75rem/1.55 var(--mono);color:var(--muted);white-space:pre-wrap;word-break:break-word}
/* an edit's step opened: what it changed (app-09-code.js) */
.wdiff{max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.wdiff .res{margin:0;padding:7px 10px;font:.75rem/1.55 var(--mono);color:var(--muted);white-space:pre-wrap;word-break:break-word}
.wdiff-in{padding:4px 0}
.wout.thought .tx{font-size:.8125rem;line-height:1.75;color:var(--muted);white-space:pre-wrap;word-break:break-word}
.wcard .wall{margin-top:6px;font-size:.75rem}
.wcard>li.stepout.plantext .md{margin:0 0 4px;padding:2px 12px;border:1px solid var(--line);border-radius:8px;background:var(--code)}
.wcard .md li{display:list-item;padding:0;border:0;min-height:0}
.wcard .md ol{list-style:decimal}
.wcard .md ul{list-style:disc}
.wcard-foot{display:flex;justify-content:flex-end;margin-top:2px}
.wcard-foot .tk{font-size:.75rem;color:var(--dim)}
.wcard-foot .tk:hover{color:var(--text2)}
/* a step's file: a small button at its end that opens it */
.wcard li .step-file{flex:none;width:22px;height:20px;margin-left:auto;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dim);display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--d-1),background var(--d-1),color var(--d-1)}
.wcard li:hover .step-file,.wcard li .step-file:focus-visible{opacity:1}
.wcard li .step-file:hover{background:var(--hover);color:var(--text)}
@media (hover:none){.wcard li .step-file{opacity:1}}
/* a step that read or wrote a picture: the picture, small, right after its words (as it was then) */
.wcard li .step-thumb{flex:none;align-self:center;width:30px;height:22px;margin:0 0 0 2px;padding:0;border:1px solid var(--line2);border-radius:5px;overflow:hidden;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:var(--dim);cursor:zoom-in;transition:border-color var(--d-1)}
.wcard li .step-thumb:hover{border-color:var(--line3)}
.wcard li .step-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.wcard li .step-thumb.gone{cursor:pointer}
/* the step opened: the picture instead of what the tool said about it */
.stepimg{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:2px 0 4px}
.stepimg>button{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);cursor:zoom-in;max-width:100%}
.stepimg>button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.stepimg img{display:block;max-width:min(320px,100%);max-height:220px;width:auto;height:auto}
.stepimg .cap{font-size:.71875rem;color:var(--dim)}
.stepimg-wait{width:160px;height:110px;border-radius:8px;border:1px solid var(--line)}
/* the files beside a finished stretch's line (what it made or looked at), small, as in Claude's desktop app */
.wthumbs{margin-left:auto;flex:none;display:flex;align-items:center;gap:4px}
.wmore{font-size:.75rem;color:var(--dim);margin-right:4px;font-variant-numeric:tabular-nums}
.wthumb{position:relative;width:34px;height:26px;padding:0;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:zoom-in;transition:border-color var(--d-1),transform .15s}
.wthumb:not(.pic){cursor:pointer}
.wthumb:hover{border-color:var(--line3)}
.wthumb img{display:block;width:100%;height:100%;object-fit:cover}
.wthumb .fbadge{width:auto;height:auto;border:0;background:transparent;padding:0;align-self:center;font-size:.53125rem}
.wthumb.wait,.pcell.wait,.wcard li .step-thumb.wait,.stepimg-wait.wait{background:linear-gradient(90deg,var(--surface),var(--raised),var(--surface));background-size:200% 100%;animation:shimmer 1.4s linear infinite}

.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:.84375rem;color:var(--text2)}
.notice.bad{background:rgba(239,123,112,.07);border-color:rgba(239,123,112,.22);color:#F3B1AA}
.notice .ic{height:21px;color:inherit}
.notice .x{white-space:pre-wrap;word-break:break-word;min-width:0}
.notice.native a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.notice.native code{font-size:.78125rem;padding:1px 5px;border-radius:5px;background:var(--line)}
.state{display:flex;align-items:center;gap:8px;font-size:.84375rem;color:var(--muted)}
.notice .linkbtn{flex:none;white-space:nowrap;color:inherit;font-size:.8125rem;text-decoration:underline;text-underline-offset:2px}
.notice .x + .linkbtn{margin-left:auto}
.coming{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
.earlier{display:flex;justify-content:center;padding:2px 0 18px}
.earlier .linkbtn{font-size:.8125rem}
.notes{display:flex;flex-direction:column;gap:2px;font-size:.75rem;color:var(--dim)}

/* changes card */
.changes{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.changes .ch-head{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.8125rem}
.changes .ch-head strong{font-weight:600}
.changes .ch-head .sp{flex:1}
.plus{color:var(--ok)}.minus{color:var(--bad)}
.changes .files{border-top:1px solid var(--line);padding:6px 0}
.changes .file{display:flex;align-items:center;gap:10px;padding:3px 14px;font-family:var(--mono);font-size:.76875rem;color:var(--text2)}
.changes .file .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.changes .file .n{color:var(--dim);flex:none}
.bar{display:inline-flex;gap:1px;flex:none}
.bar i{width:6px;height:6px;border-radius:1.5px;background:#3A3A3A}
.bar i.a{background:var(--ok)}.bar i.d{background:var(--bad)}
.changes .ch-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--line);font-size:.78125rem;color:var(--muted)}
.changes .ch-foot code{font-family:var(--mono);font-size:.75rem;color:var(--text2)}
.pill-st{font-size:.71875rem;line-height:20px;padding:0 8px;border-radius:999px;background:var(--hover);color:var(--muted);white-space:nowrap}
.pill-st.ok{background:rgba(99,198,143,.12);color:var(--ok)}
.pill-st.warn{background:rgba(233,185,94,.13);color:var(--warn)}
.tiny{height:24px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.75rem;display:inline-flex;align-items:center;gap:5px;transition:background var(--d-1),color var(--d-1)}
.tiny:hover{background:var(--hover);color:var(--text)}

/* what Claude changed on the person's computer */
.changes .ch-head .host{color:var(--muted);font-weight:400}
.changes .file .k{flex:none;width:30px;font-family:var(--sans);font-size:.71875rem;color:var(--dim)}
.changes .file .k.new{color:var(--ok)}.changes .file .k.del{color:var(--bad)}
.changes .file .nc{flex:none;font-size:.75rem}
.changes .file .fpeek{flex:none;height:22px;margin:-2px -6px -2px 0;font-family:var(--sans)}
.changes .file .fpeek:disabled{opacity:.7;cursor:default}
.changes .file .chthumb{flex:none;width:28px;height:28px;margin:-3px -4px -3px 0;padding:0;border:1px solid var(--line2);border-radius:5px;overflow:hidden;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:var(--dim);cursor:zoom-in;transition:border-color var(--d-1)}
.changes .file .chthumb:hover{border-color:var(--line3)}
.changes .file .chthumb img{display:block;width:100%;height:100%;object-fit:cover}
.changes .file .chthumb.wait{animation:shimmer 1.4s linear infinite;background:linear-gradient(90deg,var(--surface),var(--raised),var(--surface));background-size:200% 100%}
/* the rest of a long list: opens in place (every file can be looked at) */
.changes .fmore{display:flex;align-items:center;gap:6px;width:100%;margin-top:2px;padding:4px 14px;border:0;background:transparent;color:var(--muted);font-size:.76875rem;text-align:left}
.changes .fmore:hover{color:var(--text)}
.changes .fmore .ic{transition:transform .15s}
.changes .fmore.open .ic{transform:rotate(180deg)}
.changes .ch-foot .where{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.changes .tiny.sure{background:rgba(239,123,112,.14);color:#F3B1AA}
.changes.undone{opacity:.7}
.proj{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--dim)}
.proj .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.switch{position:relative;width:38px;height:22px;flex:none;border-radius:999px;border:1px solid var(--line2);background:var(--raised);padding:0;transition:background .2s,border-color .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text2);transition:transform var(--d-3) var(--e-std),background .2s}
.switch[aria-checked="true"]{background:rgba(99,198,143,.35);border-color:rgba(99,198,143,.6)}
.switch[aria-checked="true"]::after{transform:translateX(16px);background:#fff}
.switch:disabled{opacity:.4;cursor:default}

/* permission request */
.perm{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid rgba(233,185,94,.35);border-radius:14px;background:linear-gradient(180deg,rgba(233,185,94,.07),rgba(233,185,94,.03));animation:rise .35s var(--out) both,glow 2.4s ease-in-out .4s 2}
.perm-head{display:flex;align-items:center;gap:8px;font-size:.84375rem}
.perm-head .ic{color:var(--warn)}
.perm-head strong{font-weight:600}
.perm-head .sub{margin-left:auto;font-size:.75rem;color:var(--warn)}
.perm pre.cmd{margin:0;padding:10px 12px;max-height:240px;overflow:auto;border-radius:10px;background:var(--code);border:1px solid var(--line);font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-all}
.perm pre.preview{margin:0;padding:10px 12px;max-height:200px;overflow:auto;border-radius:10px;background:var(--code);border:1px dashed var(--line2);font-family:var(--mono);font-size:.76875rem;line-height:1.55;color:var(--text2);white-space:pre-wrap;word-break:break-word}
.vis{display:inline-block;padding:0 3px;margin:0 1px;border-radius:4px;background:#3A2A12;color:var(--warn);font-size:.6875rem}
.perm .note,.perm .why{font-size:.78125rem;color:var(--muted)}
.perm .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.perm .acts .sp{flex:1}
.perm .allall{align-self:flex-start;font-size:.75rem;color:var(--muted);padding:0}
/* Claude's settings (as Codex lays them out): fast mode, the effort and the model up top, the rest folded below */
.pill.claudebtn{min-width:0}
.pill.claudebtn .lbl{max-width:200px}
.pill.claudebtn .on-ics,.pill.claudebtn .cv{flex:none}
.pill.claudebtn .on-ics{display:inline-flex;gap:3px;color:var(--link)}
.menu.cpanel{width:300px;max-width:calc(100vw - 16px);padding:12px 12px 6px}
.chead{display:grid;grid-template-columns:32px 1fr 32px;align-items:center}
.chead .ib{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;transition:color var(--d-1),background var(--d-1)}
.chead .ib:hover:not(:disabled){color:var(--text);background:var(--hover)}
.chead .ib.on,.chead .ib.on:hover:not(:disabled){color:var(--link)}
.chead .ib:disabled{opacity:.35;cursor:default}
.chead .mid{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.chead .lvl{font-size:.9375rem;font-weight:600;color:var(--link);letter-spacing:.02em}
.chead .mdl{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:1px 4px 1px 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.78125rem;white-space:nowrap}
.chead .mdl:hover{color:var(--text);background:var(--hover)}
.chead .mdl .ic{color:var(--dim)}
.cslider{position:relative;height:30px;margin:12px 0 10px;border-radius:15px;background:rgba(255,255,255,.07)}
.cslider:has(input:focus-visible){box-shadow:0 0 0 2px var(--focus)}
.cslider .fill{position:absolute;left:0;top:0;bottom:0;min-width:30px;border-radius:15px;background:color-mix(in srgb,var(--link) 50%,transparent);transition:width .18s var(--out)}
.cslider .thumb{position:absolute;top:2px;width:26px;height:26px;margin-left:-28px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);transition:left .18s var(--out);pointer-events:none}
.cslider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cslider .ticks{position:absolute;inset:0 15px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.cslider .ticks i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.22)}
/* the power in it (drawn by powerFrame): sparks may leave the track, up to the panel's edge */
.cslider canvas.pw{position:absolute;left:-12px;top:-24px;width:calc(100% + 24px);height:78px;pointer-events:none}
.chead .lvl{transition:color .3s,text-shadow .3s}
.chead .lvl.warm{text-shadow:0 0 10px color-mix(in srgb,var(--link) 45%,transparent)}
.chead .lvl.hot{color:#E2E9FF;text-shadow:0 0 12px color-mix(in srgb,var(--link) 75%,transparent),0 0 2px rgba(255,255,255,.8)}
.chead .lvl.glitch{transition:none;text-shadow:-1.6px 0 rgba(255,96,140,.8),1.6px 0 rgba(96,214,255,.8),0 0 12px color-mix(in srgb,var(--link) 75%,transparent)}
.cmore{margin:0 -12px;border-top:1px solid var(--line)}
.cmore>.mh{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 14px;border:0;background:transparent;color:var(--muted);font-size:.78125rem;text-align:left}
.cmore>.mh:hover{color:var(--text)}
.cmore>.mh .sum{flex:1;min-width:0;text-align:right;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmore>.mh>.ic{display:inline-flex;color:var(--dim);transition:transform .18s var(--out)}
.cmore.open>.mh>.ic{transform:rotate(180deg)}
.cmore .crows{display:none;padding:0 14px 6px}
.cmore.open .crows{display:block}
.cmore .r{display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px}
.cmore .r>span{font-size:.8125rem;color:var(--text2)}
.cmore .r.off>span{color:var(--dim)}
/* (the app's own switch; on, it takes the panel's light blue, as the marks on the button do) */
.cmore .switch[aria-checked="true"]{background:color-mix(in srgb,var(--link) 50%,transparent);border-color:color-mix(in srgb,var(--link) 70%,transparent)}
/* how long the conversation is (what Claude reads again at every step): a word, a thin bar to where it gets tidied up */
.clen{margin:0 -12px;padding:10px 14px 8px;border-top:1px solid var(--line)}
.clen .cl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8125rem;color:var(--text2)}
.clen .cl-v{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.78125rem;white-space:nowrap}
.clen .cl-v b{font-weight:500;color:var(--text2)}
.clen .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.clen.mid .dot{background:var(--warn)}
.clen.hi .dot{background:var(--bad)}
.clen .cl-bar{position:relative;height:3px;margin:9px 0 7px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.clen .cl-bar span{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:color-mix(in srgb,var(--ok) 70%,transparent)}
.clen.mid .cl-bar span{background:color-mix(in srgb,var(--warn) 75%,transparent)}
.clen.hi .cl-bar span{background:color-mix(in srgb,var(--bad) 75%,transparent)}
.clen p{margin:0;font-size:.71875rem;line-height:1.55;color:var(--dim)}
.cstyles{display:flex;gap:1px;padding:2px;border-radius:8px;background:rgba(255,255,255,.05)}
.cstyles button{height:22px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:.75rem;transition:color var(--d-1),background var(--d-1)}
.cstyles button:hover{color:var(--text2)}
.cstyles button[aria-checked="true"]{color:var(--text);background:var(--raised)}
/* its to-do list. The progress panel on the right (as Claude's desktop app and Codex have it), opened from the button in
   the top bar: the steps on a line that fills as they're done (the one it is on: a dot in its own colour), what it
   made, what it reached for. On a wide window the conversation moves over to make room; on a narrow one it lies over
   it. A finished turn keeps its list in its log. */
.top .progbtn{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--text2);font-size:.78125rem;white-space:nowrap;transition:background var(--d-1),color var(--d-1),border-color var(--d-1)}
.top .progbtn:hover,.top .progbtn.on{background:var(--hover);color:var(--text)}
.top .progbtn .ic{color:var(--ac,var(--muted))}
.top .progbtn .short{display:none}
.progpanel{position:absolute;top:58px;right:16px;z-index:30;width:292px;max-height:calc(100% - 190px);overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 10px;border:1px solid var(--line2);border-radius:14px;background:#222;box-shadow:var(--shadow);animation:pop var(--d-3) var(--e-out) both;transform-origin:top right}
.main.wide .progpanel{box-shadow:none}
.main.wide.prog-on .chat,.main.wide.prog-on .composer-wrap{padding-right:332px}
.pp-h{display:flex;align-items:center;justify-content:space-between;height:24px;margin-bottom:6px;font-size:.78125rem;font-weight:600;color:var(--text2)}
.pp-h button{width:24px;height:24px;margin-right:-4px;border:0;border-radius:7px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center}
.pp-h button:hover{background:var(--hover);color:var(--text)}
.pp-steps{list-style:none;margin:0;padding:0}
.pp-steps li{position:relative;display:flex;align-items:flex-start;gap:11px;padding:6px 0;font-size:.8125rem;line-height:20px;color:var(--text2)}
/* the line: from each step down to the next, filled once that step is done */
.pp-steps li:not(:last-child)::before{content:"";position:absolute;left:5px;top:21px;bottom:-6px;width:2px;border-radius:1px;background:var(--line2)}
.pp-steps li.completed:not(:last-child)::before{background:color-mix(in srgb,var(--ac) 55%,transparent)}
.pp-steps .mk{flex:none;position:relative;z-index:1;width:12px;height:20px;display:flex;align-items:center;justify-content:center}
.pp-steps .mk::after{content:"";box-sizing:border-box;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line3);background:#222}
.pp-steps li.completed .mk::after{border:0;background:color-mix(in srgb,var(--ac) 75%,transparent)}
.pp-steps li.in_progress .mk::after{width:10px;height:10px;border:0;background:var(--dim)}
.pp-steps li.now .mk::after{background:var(--ac);--pc:color-mix(in srgb,var(--ac) 55%,transparent);animation:pulse 1.6s ease-out infinite}
.pp-steps li.completed .x{color:var(--muted)}
.pp-steps li.now .x{color:var(--text)}
.pp-sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pp-sec>.l{margin-bottom:4px;font-size:.75rem;color:var(--muted)}
.pp-row{display:flex;align-items:center;gap:8px;width:calc(100% + 12px);height:30px;margin:0 -6px;padding:0 6px;border:0;border-radius:7px;background:transparent;color:var(--text2);font-size:.78125rem;text-align:left}
button.pp-row:hover{background:var(--hover);color:var(--text)}
.pp-row .ic{color:var(--muted)}
.pp-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-row .e{flex:none;font-size:.6875rem;letter-spacing:.03em;color:var(--dim)}
.pp-more{margin-top:2px;font-size:.75rem}
@media (max-width:760px){
  .top .progbtn .lbl{display:none}
  .top .progbtn .short{display:inline}
  .progpanel{top:56px;left:10px;right:10px;width:auto;max-height:calc(100% - 170px)}
}
@media (prefers-reduced-motion:reduce){.pp-steps li.now .mk::after{animation:none}}
/* (a finished turn's list, in its log) */
.prog{width:fit-content;min-width:min(320px,100%);max-width:100%;box-sizing:border-box;margin:2px 0 12px;padding:10px 16px 6px 14px;border:1px solid var(--line2);border-radius:12px}
.prog .pp-h{margin-bottom:2px;font-weight:500;color:var(--muted)}
.prog .pp-h .n{font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
.prog .pp-steps .mk::after{background:var(--bg)}
/* plan mode: the switch in the composer, and the plan Claude hands in */
.pill.planbtn.on{background:color-mix(in srgb,var(--link) 15%,transparent);color:var(--link)}
.pill.planbtn.on:hover{background:color-mix(in srgb,var(--link) 22%,transparent)}
.plancard{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;border:1px solid color-mix(in srgb,var(--link) 38%,transparent);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--link) 7%,transparent),color-mix(in srgb,var(--link) 2%,transparent));animation:rise .35s var(--out) both}
.plancard .pc-head{display:flex;align-items:center;gap:8px;font-size:.84375rem}
.plancard .pc-head .ic{color:var(--link)}
.plancard .pc-head strong{font-weight:600}
.plancard .pc-head .sub{margin-left:auto;font-size:.75rem;color:var(--muted)}
.plancard .pc-body{max-height:440px;overflow:auto;padding:4px 16px 6px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:.875rem}
.plancard .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.plancard .acts .hint{font-size:.75rem;color:var(--muted);margin-left:4px}
.plancard .pc-note{margin-bottom:-4px;font-size:.78125rem;color:var(--muted)}
.foldercard .fc-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.78125rem;color:var(--muted)}
/* Claude's questions for the person (AskUserQuestion): each with its choices as rows, one of them typed in */
.askcard .aq{display:flex;flex-direction:column;gap:6px}
.askcard .aq+.aq{padding-top:10px;border-top:1px solid var(--line)}
.askcard .aq-q{display:flex;align-items:baseline;gap:8px;font-size:.875rem;font-weight:600;line-height:1.5}
.askcard .aq-q .tag{flex:none;font-size:.71875rem;font-weight:500;line-height:20px;padding:0 7px;border-radius:6px;background:color-mix(in srgb,var(--link) 14%,transparent);color:var(--link)}
.askcard .aq-q .multi{margin-left:auto;flex:none;font-size:.75rem;font-weight:400;color:var(--muted)}
.askcard .aq-opt{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text2);text-align:left;font-size:.84375rem;line-height:1.5;transition:border-color var(--d-1),background var(--d-1)}
.askcard .aq-opt:hover{border-color:var(--line3)}
.askcard .aq-opt[aria-checked="true"]{border-color:color-mix(in srgb,var(--link) 65%,transparent);background:color-mix(in srgb,var(--link) 9%,var(--surface));color:var(--text)}
.askcard .aq-opt .mk{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid var(--line3);display:flex;align-items:center;justify-content:center;color:#111}
.askcard .aq-opt.multi .mk{border-radius:5px}
.askcard .aq-opt[aria-checked="true"] .mk{border-color:var(--link);background:var(--link)}
.askcard .aq-opt .t{display:flex;flex-direction:column;min-width:0}
.askcard .aq-opt .d{font-size:.78125rem;color:var(--muted)}
.askcard .aq-other{margin:2px 0 0 26px;width:calc(100% - 26px);height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;font-size:.84375rem}
.askcard .aq-other:focus{outline:none;border-color:color-mix(in srgb,var(--link) 60%,transparent)}
.plancard .pc-revise{display:flex;flex-direction:column;gap:8px}
.plancard .pc-revise textarea{width:100%;min-height:76px;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;font-size:.875rem;line-height:1.6}
.plancard .pc-revise textarea:focus{outline:none;border-color:color-mix(in srgb,var(--link) 60%,transparent)}
.perm .allall:hover{color:var(--text2)}
.perm .allask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:2px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.18);font-size:.78125rem;color:var(--text2)}
.perm .allask .q{flex:1 1 220px}
.perm .allask .btns{display:flex;gap:8px}
.perm .allask .warnb{color:var(--warn);border-color:rgba(233,185,94,.4)}

/* buttons */
.b1{height:34px;padding:0 14px;border:0;border-radius:10px;background:var(--text);color:#111;font-weight:600;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform var(--d-1),background var(--d-1),opacity var(--d-1);text-decoration:none !important}
.b1:hover{background:#FFFFFF}
.b2{height:34px;padding:0 14px;border:1px solid var(--line2);border-radius:10px;background:transparent;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform var(--d-1),background var(--d-1),border-color var(--d-1)}
.b2:hover{background:var(--hover);border-color:var(--line3)}
.b1:active,.b2:active,.round:active,.pill:active{transform:scale(.96)}
.b2.danger{color:var(--bad)}
.b1.sm,.b2.sm{height:30px;padding:0 12px;font-size:.78125rem;border-radius:9px}
.b1:disabled,.b2:disabled{opacity:.5;cursor:default}
.linkbtn{border:0;background:none;color:var(--muted);font-size:.78125rem;padding:0;text-align:left}
.linkbtn:hover{color:var(--text)}
.linkbtn.danger{color:var(--bad)}

#warnBar{flex:none;padding:8px 24px;background:#2A2212;border-bottom:1px solid #4A3A1A;color:#F3D9A4;font-size:.8125rem}
#warnBar .linkbtn{color:#F3D9A4;text-decoration:underline;font-size:.8125rem}
/* (0.62) not subscribed (or run out) with the website: where to 开通 */
#subBar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 24px;background:#1E2333;border-bottom:1px solid #313A55;color:#C9D6FF;font-size:.8125rem}
#subBar .linkbtn{color:#C9D6FF;text-decoration:underline;font-size:.8125rem}
#subBar[hidden]{display:none}
/* (0.66) the person's work waits for a Claude account of their own: one to add */
#claudeBar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 24px;background:#1E2333;border-bottom:1px solid #313A55;color:#C9D6FF;font-size:.8125rem}
#claudeBar .linkbtn{color:#C9D6FF;text-decoration:underline;font-size:.8125rem}
#claudeBar[hidden]{display:none}
#updBar{flex:none;padding:8px 24px;background:#1C2430;border-bottom:1px solid #2C3A4E;color:#C9D7EA;font-size:.8125rem}
#updBar .linkbtn{color:#E6EEF8;text-decoration:underline;font-size:.8125rem;margin-left:6px}

/* toast & floating */
/* (read by a screen reader, not shown) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.toast{position:fixed;left:50%;top:60px;transform:translate(-50%,-8px) scale(.98);opacity:0;pointer-events:none;max-width:min(560px,calc(100% - 32px));padding:10px 16px;border:1px solid var(--line2);border-radius:12px;background:#2A2A2A;color:var(--text);font-size:.8125rem;z-index:60;box-shadow:var(--shadow);transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.toast{display:flex;align-items:center;gap:14px}
.toast .tact{flex:none;border:0;padding:0;background:transparent;color:var(--link);font-weight:500;font-size:.8125rem}
.toast .tact:hover{text-decoration:underline}
/* a small question before something that can't be taken back easily */
.dbox{width:min(420px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;animation:pop var(--d-3) var(--e-out) both}
.dbox h2{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.dbox p{margin:0;font-size:.8125rem;line-height:1.65;color:var(--muted)}
.dchk{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:.8125rem;color:var(--text2);cursor:pointer;transition:border-color var(--d-1),background var(--d-1)}
.dchk:has(input:checked){border-color:rgba(239,123,112,.45);background:rgba(239,123,112,.06);color:var(--text)}
.dchk input{accent-color:var(--bad);width:15px;height:15px;margin:0}
.dbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
#newbelow{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);width:34px;height:34px;padding:0;border:1px solid var(--line2);border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:3;animation:nbin var(--d-3) var(--e-out) both;transition:background var(--d-1)}
/* (it stays centred while it comes and goes: pop / sink would take its translateX(-50%) away for that moment) */
@keyframes nbin{from{opacity:0;transform:translateX(-50%) translateY(var(--rise)) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
#newbelow.leaving{animation:nbout var(--d-2) var(--e-in) both}
@keyframes nbout{to{opacity:0;transform:translateX(-50%) translateY(calc(var(--rise) * .66)) scale(.9)}}
#newbelow:hover{background:var(--raised)}

/* ---------- composer ---------- */
.composer-wrap{flex:none;padding:6px 24px 16px;background:linear-gradient(180deg,rgba(26,26,26,0),var(--bg) 22px)}
.composer-wrap .col{position:relative}
.composer{display:flex;flex-direction:column;border:1px solid var(--line-field);border-radius:24px;background:var(--surface);padding:12px 12px 10px 18px;box-shadow:0 8px 28px rgba(0,0,0,.28);transition:border-color .2s,box-shadow .2s}
.composer:focus-within{border-color:var(--line-typing);box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.035)}
#input{width:100%;min-height:26px;max-height:240px;resize:none;border:0;outline:none;background:transparent;font-size:.9375rem;line-height:1.6;padding:2px 2px 8px}
#input::placeholder{color:var(--dim)}
.ctools{display:flex;align-items:center;gap:4px;margin-left:-8px}
.ctools .sp{flex:1}
.pill{height:30px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:.78125rem;display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:nowrap;transition:background var(--d-1),color var(--d-1),transform var(--d-1)}
.pill:hover,.pill[aria-expanded="true"]{background:var(--hover);color:var(--text)}
.pill .lbl{overflow:hidden;text-overflow:ellipsis}
.pill .cv{color:var(--dim)}
.pill.boxed{border:1px solid var(--line2);height:32px;padding:0 12px;border-radius:10px;color:var(--text2)}
.round{flex:none;width:34px;height:34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform var(--d-1),opacity .2s}
#send{background:#3A3A3A;color:#8A8A8A}
#send.ready{background:var(--text);color:#111}
#send .go{display:none}
/* the last reply stopped before it finished: the same button continues it (▶ instead of ↑) */
#send.cont{background:var(--text);color:#111}
#send.cont .up{display:none}
#send.cont .go{display:flex}
/* choices with a highlight that slides to the picked one (插话 / 排队, 什么时候问我) */
.sgm{position:relative;display:inline-flex;flex:none;padding:2px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.sgm>button{position:relative;z-index:1;height:28px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.78125rem;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .2s}
.sgm>button:hover{color:var(--text2)}
.sgm>button[aria-checked="true"]{color:var(--text)}
.sgm>.thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:0;width:0;border-radius:8px;background:var(--raised);box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.04);transition:left var(--d-4) var(--e-std),width var(--d-4) var(--e-std)}
/* 「插话」: said while Claude works goes straight into the run; 排队: after it */
.sgm.steer-tg{margin-right:6px;border-radius:999px;animation:pop var(--d-3) var(--e-out) both}
.sgm.steer-tg>button{height:26px;padding:0 10px;border-radius:999px;font-size:.75rem}
.sgm.steer-tg>.thumb{border-radius:999px}
#stop{background:var(--text);color:#111;position:relative}
#stop::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(255,255,255,.55);animation:spin 1s linear infinite}
.below{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 6px 0;min-height:38px}
.below .where{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--dim);min-width:0}
.below .where code{font-family:var(--mono);font-size:.71875rem;color:var(--muted)}
.below .sp{flex:1}
.hint{font-size:.71875rem;color:var(--dim);white-space:nowrap}

/* what Claude keeps running in the background of this conversation (a preview server, an experiment), each with a stop */
.bgbar{margin:0 0 8px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);overflow:hidden;animation:rise var(--d-3) var(--e-out) both}
/* a long conversation: a quiet line above the box (never a pop-up) */
.lennote{display:flex;align-items:center;gap:7px;margin:0 4px 8px;padding:0 2px;font-size:.78125rem;color:var(--dim);animation:fade var(--d-3) var(--e-out) both}
.lennote .ic{color:var(--dim);flex:none}
.lennote>span{min-width:0}
.lennote>span,.lennote .linkbtn{line-height:18px}
.lennote .linkbtn{font-size:.78125rem;flex:none;color:var(--text2)}
.lennote .x{margin-left:auto;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;flex:none}
.lennote .x:hover{color:var(--text2);background:var(--hover)}
/* 开新对话（带上交接）: the card at the top of the new conversation, and the old one's line */
.carryon{width:100%;max-width:560px;margin:0 auto 26px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);padding:11px 14px 10px;text-align:left;animation:rise var(--d-3) var(--e-out) both}
.hero .carryon{margin:18px auto 0}
.carryon .cc-head{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted);min-width:0}
.carryon .cc-head>.ic{color:var(--claude)}
.carryon .cc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carryon .cc-t b{font-weight:500;color:var(--text)}
.carryon .cc-back{margin-left:auto;flex:none;font-size:.78125rem}
.carryon .cc-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0 23px;font-size:.78125rem;color:var(--dim)}
.carryon .cc-state{display:inline-flex;align-items:center;gap:7px;min-width:0}
.carryon .cc-state .spinner{width:12px;height:12px}
.carryon.ok .cc-state .ic{color:var(--ok)}
.carryon.bad .cc-state .ic{color:var(--bad)}
.carryon .linkbtn{font-size:.78125rem;color:var(--text2)}
.carryon .cc-hint::before{content:"·";margin:0 6px 0 -1px;color:var(--dim)}
.carryon .cc-peek{display:inline-flex;align-items:center;gap:3px}
.carryon .cc-text{margin:10px 0 2px 23px;padding:10px 12px;max-height:340px;overflow:auto;border-radius:10px;background:var(--surface);font-size:.8125rem;animation:fade var(--d-3) var(--e-out) both}
.carryon .cc-text .md>:first-child{margin-top:0}
.carryon .cc-text .md>:last-child{margin-bottom:0}
.turn.carryline .cl-w{display:inline-flex;align-items:center;min-width:0}
.turn.carryline .cl-to{font-size:.75rem;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);vertical-align:bottom}
/* Claude tidied the conversation up between turns: one line where it happened, as Claude Code marks it */
.turn.tidyline{display:flex;flex-direction:row;align-items:center;gap:10px;margin:2px 0 22px;color:var(--dim);font-size:.75rem}
/* a handoff no conversation took: 看交接 · 用它开新对话 */
.turn.carryline .linkbtn{font-size:.75rem;color:var(--text2)}
.turn.carryline .cl-dot{margin:0 -4px}
.turn.carryopen{display:flex;flex-direction:column;align-items:center;margin:2px 0 22px}
.turn.carryopen>.tidyline{align-self:stretch;margin:0}
.turn.carryopen>.cl-text{width:100%;max-width:560px;margin-top:8px;padding:10px 12px;max-height:340px;overflow:auto;border-radius:10px;background:var(--surface);font-size:.8125rem;text-align:left;animation:fade var(--d-3) var(--e-out) both}
.turn.carryopen>.cl-text .md>:first-child{margin-top:0}
.turn.carryopen>.cl-text .md>:last-child{margin-bottom:0}
.turn.tidyline::before,.turn.tidyline::after{content:"";flex:1;height:1px;background:var(--line)}
.turn.tidyline .ic{color:var(--dim)}
.turn.tidyline.bad .ic{color:var(--bad)}
.bgbar .bghead{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;font-size:.78125rem;color:var(--muted)}
.bgbar .bghead b{font-weight:500;color:var(--text2)}
.bgbar .bghead .sp{flex:1}
.bgbar .bgdot{width:7px;height:7px;border-radius:50%;background:var(--ok);--pc:rgba(99,198,143,.45);animation:pulse 1.8s ease-out infinite;flex:none}
.bgrow{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 8px 4px 14px;border-top:1px solid var(--line)}
.bgrow .ic{color:var(--dim)}
.bgrow .bgt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4;padding:3px 0}
.bgrow .bgt .d{font-size:.8125rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgrow .bgt .d i{font-style:normal;font-size:.71875rem;color:var(--dim);margin-left:8px}
.bgrow .bgt code{font-family:var(--mono);font-size:.71875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgrow.stopping{opacity:.55}
.bgstop{flex:none;height:26px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--text2);font-size:.75rem;display:inline-flex;align-items:center;gap:5px;transition:background var(--d-1),color var(--d-1),border-color var(--d-1)}
.bgstop:hover{background:rgba(239,123,112,.1);border-color:rgba(239,123,112,.4);color:#F3B1AA}
.bgstop.all{border-color:transparent;color:var(--muted)}
/* the person's messages waiting their turn (排队), over the box: 立即发送 · 编辑 · 删除 (app-11-actions.js) */
.qbar .bghead .ic{color:var(--muted)}
.qrow{gap:8px}
.qrow .qn{flex:none;width:18px;height:18px;border-radius:50%;background:var(--hover);color:var(--muted);font-size:.6875rem;display:flex;align-items:center;justify-content:center}
.qrow .bgt .d{display:flex;align-items:center;gap:6px}
.qrow .bgt .d .ic{flex:none;color:var(--dim)}
.qrow .bgt .sub{font-size:.71875rem;color:var(--dim)}
.qbar .bgstop:hover{background:var(--hover);border-color:var(--line3);color:var(--text)}
.qbar .bgstop.go{border-color:rgba(163,188,255,.35);color:#C9D7FF}
.qbar .bgstop.go:hover{background:rgba(163,188,255,.12);border-color:rgba(163,188,255,.55);color:#E2EAFF}
.qbar .bgstop.del:hover{background:rgba(239,123,112,.1);border-color:rgba(239,123,112,.4);color:#F3B1AA}
@media (max-width:640px){.qbar .bgstop{width:30px;padding:0;justify-content:center}.qbar .bgstop .lbl{display:none}}
/* a reply Claude gave by itself (something it ran in the background finished) */
.autohead{display:flex;align-items:center;gap:7px;font-size:.78125rem;color:var(--dim)}
.autohead .ic{color:var(--ok)}

/* ---------- files: in the composer, in messages, in replies ---------- */
.atts{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 10px}
.att{position:relative;height:72px;border-radius:12px;background:var(--raised);border:1px solid var(--line);flex:none;animation:pop var(--d-3) var(--e-out) both;transition:border-color var(--d-1)}
.att:hover{border-color:var(--line3)}
.att .aopen{position:absolute;inset:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.att .aopen:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus)}
.att.img{width:72px;overflow:hidden}
.att.img .aopen{cursor:zoom-in}
.att.img img{width:100%;height:100%;object-fit:cover;display:block}
.att.doc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-content:center;padding:0 32px 0 12px;max-width:240px;min-width:160px}
.att.doc .fbadge{grid-row:1/3}
.att img,.att .fbadge,.att .an,.att .as,.att .aprog,.att .abar{pointer-events:none}
.att .an{font-size:.78125rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:end}
.att .as{font-size:.71875rem;color:var(--dim);align-self:start;font-variant-numeric:tabular-nums}
.att.err{border-color:rgba(239,123,112,.55)}
.att .aprog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,20,20,.55);border-radius:inherit}
.att .abar{position:absolute;left:12px;right:12px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.att .abar i{display:block;height:100%;background:var(--text);border-radius:inherit;transition:width .2s linear}
.aprog svg{display:block;transform:rotate(-90deg)}
.aprog .bg{stroke:rgba(255,255,255,.18)}
.aprog .fg{stroke:var(--text);transition:stroke-dashoffset .2s linear}
.att .aretry{position:absolute;inset:0;z-index:1;border:0;border-radius:inherit;background:rgba(40,16,14,.55);color:#F3B1AA;display:flex;align-items:center;justify-content:center}
.att .as .aredo{position:relative;z-index:1;pointer-events:auto;margin-left:6px;padding:0;border:0;background:none;color:#F3B1AA;font-size:.71875rem;text-decoration:underline;text-underline-offset:2px}
.att .ax{position:absolute;top:5px;right:5px;z-index:2;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#EDEDED;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--d-1),background var(--d-1),color var(--d-1)}
.att.doc .ax{top:50%;right:7px;transform:translateY(-50%);background:transparent;color:var(--muted)}
.att:hover .ax,.att:focus-within .ax{opacity:1}
.att .ax:hover{background:rgba(0,0,0,.85);color:#fff}
.att.doc .ax:hover{background:var(--hover);color:var(--text)}
@media (hover:none){.att .ax{opacity:1}.mhint.kbd{display:none}}
.fbadge{width:34px;height:40px;border-radius:7px;background:var(--surface);border:1px solid var(--line2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-family:var(--mono);font-size:.59375rem;font-weight:600;letter-spacing:.02em;color:var(--muted);flex:none;align-self:center}
.fbadge.k-html{color:var(--text)}
.fbadge.k-pdf{color:#F3B1AA}
.fbadge.k-image{color:var(--link)}
#attachBtn{width:32px;height:32px;color:var(--muted);background:transparent}
#attachBtn:hover{background:var(--hover);color:var(--text)}
.sendnote{font-size:.75rem;color:var(--muted);white-space:nowrap;padding-right:4px}
/* files dragged over the conversation */
#dropzone{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(14,14,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;animation:fade var(--d-3) var(--e-out) both}
#dropzone .dz{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:440px;padding:30px 40px 28px;border:1.5px dashed var(--line3);border-radius:20px;background:rgba(34,34,34,.94);text-align:center;box-shadow:var(--shadow)}
#dropzone .ic{color:var(--text2);margin-bottom:6px}
#dropzone b{font-weight:500;font-size:.9375rem;color:var(--text)}
#dropzone span{font-size:.78125rem;color:var(--dim);line-height:1.6}
/* pictures, as a tidy grid (one picture shows bigger) */
.pgrid{--cell:124px;display:grid;grid-template-columns:repeat(var(--cols,1),var(--cell));justify-content:start;gap:4px}
.pcell{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--surface);cursor:zoom-in}
.pcell img{display:block;width:100%;height:100%;object-fit:cover;transition:filter var(--d-1)}
.pcell:hover img{filter:brightness(1.1)}
.pcell:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.pcell .pmore{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:1.25rem;font-weight:500}
.pcell.blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--dim);font-size:.71875rem;padding:8px}
.pcell.blank span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgrid.one{--cell:auto}
.pgrid.one .pcell{width:auto;aspect-ratio:auto;border:1px solid var(--line)}
.pgrid.one .pcell img{width:auto;height:auto;max-width:min(300px,70vw);max-height:240px;min-width:72px;min-height:56px}
/* a message's own files sit above its text */
.mfiles{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:78%;margin-left:auto;margin-bottom:-6px}
.mfiles .pgrid{justify-content:end}
.fchips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.fchip{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);max-width:260px;text-align:left;transition:border-color var(--d-1),background var(--d-1)}
.fchip:hover{border-color:var(--line3);background:var(--surface)}
.fchip .fbadge{width:30px;height:36px;padding-bottom:5px}
.fchip .t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.fchip .t b{font-weight:500;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fchip .t i{font-style:normal;font-size:.71875rem;color:var(--dim)}
/* sound in the conversation: one player for the page; the row playing shows where it is */
.alist{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.mfiles .alist{width:min(400px,100%)}
.arow{display:flex;align-items:center;gap:12px;padding:9px 8px 9px 10px}
.arow+.arow{border-top:1px solid var(--line)}
.aplay{flex:none;width:36px;height:36px;border:1px solid var(--line2);border-radius:50%;background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;transition:background var(--d-1),border-color var(--d-1),color var(--d-1)}
.aplay:hover{border-color:var(--line3);background:var(--raised)}
.aplay:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.aplay .ic{margin-left:1px}
.aspin{width:14px;height:14px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-top-color:currentColor;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.aspin{animation-duration:2.4s}}
.arow.on .aplay{background:var(--text);border-color:var(--text);color:#111}
.arow.on .aplay .ic{margin-left:0}
.arow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.35}
.arow .t b{font-weight:500;font-size:.84375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .t i{font-style:normal;font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .t i.bad{color:var(--bad)}
.atrack{position:relative;height:16px;cursor:pointer;touch-action:none}
.atrack::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:var(--line2)}
.afill{position:absolute;left:0;top:6px;height:4px;border-radius:2px;background:var(--text);width:0}
.afill::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--text);opacity:0;transition:opacity var(--d-1)}
.atrack:hover .afill::after,.atrack.drag .afill::after,.atrack:focus-visible .afill::after{opacity:1}
.arow:not(.on) .atrack{display:none}
.arow.on .t i{display:none}
.atime{flex:none;min-width:44px;text-align:right;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.arow.on .atime{color:var(--text2)}
/* videos as tiles, the way Claude's desktop app shows them: a play button, the name (its type kept when it is cut
   short), the type; opened big over the conversation. One still on the computer that made it (too big to come with
   the reply) is fetched from there when opened: its tile says how big it is. */
.vtiles{display:flex;flex-wrap:wrap;gap:10px}
.mfiles .vtiles{justify-content:flex-end}
.vtile{display:flex;flex-direction:column;width:136px;height:116px;padding:10px 12px 11px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--text);text-align:left;transition:border-color var(--d-1),background var(--d-1)}
.vtile:hover{border-color:var(--line3);background:var(--surface)}
.vtile.viewing{border-color:var(--line3);background:var(--active)}
.vtile .pl{flex:1;display:flex;align-items:center;justify-content:center}
.vtile .pl .ic{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;padding-left:1px;transition:background var(--d-1)}
.vtile:hover .pl .ic{background:rgba(255,255,255,.17)}
.vtile .nm{display:flex;min-width:0;font-size:.75rem;line-height:18px;font-weight:500}
.vtile .nm .b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtile .nm .e{flex:none}
.vtile .mt{display:flex;align-items:center;gap:6px;min-width:0;margin-top:5px;font-size:.6875rem;line-height:16px;color:var(--dim);white-space:nowrap}
.vtile .tag{flex:none;padding:0 5px;border-radius:4px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.625rem;font-weight:600;letter-spacing:.04em}
.vtile.far .pl .ic{background:transparent;box-shadow:inset 0 0 0 1px var(--line3);color:var(--muted)}
.vtile.far:hover .pl .ic{background:rgba(255,255,255,.06);color:var(--text)}
/* a delivered file's name in the reply's text: a link to it */
.md .lpath{text-decoration:underline dotted transparent;text-underline-offset:4px;transition:text-decoration-color var(--d-1)}
.md .lpath:hover{text-decoration-color:var(--line3)}
[data-lpath]{-webkit-touch-callout:none}
.vtile.pvid.busy{cursor:progress}
.md code.fref{cursor:pointer;white-space:normal;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:underline dotted var(--line3);text-underline-offset:4px;transition:background var(--d-1),color var(--d-1)}
/* a picture's name in the answer starts with the picture, tiny */
.md .fref .fmini{display:inline-block;width:1.25em;height:1.25em;margin:0 .35em 0 -.15em;vertical-align:-.3em;border-radius:3px;object-fit:cover;border:1px solid var(--line2);background:var(--surface)}
.md code.fref:focus-visible,.md .lref.fref:focus-visible{outline:2px solid var(--focus) !important;outline-offset:1px}
.md code.fref:hover,.md code.fref:focus-visible{background:var(--raised);color:var(--text);text-decoration-color:var(--muted)}
/* a link in the reply to one of its files: reads as a link, opens the file */
.md .lref.fref{cursor:pointer;color:var(--text);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;border-radius:4px}
.md .lref.fref:hover,.md .lref.fref:focus-visible{text-decoration-color:var(--muted);background:var(--raised)}
.md .fref.k-folder::before{content:"";display:inline-block;width:13px;height:11px;margin:0 5px 0 0;vertical-align:-1px;background:currentColor;opacity:.65;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M1 2.2C1 1.5 1.5 1 2.2 1h3.6l1.6 1.6h6.4c.7 0 1.2.5 1.2 1.2v6.9c0 .7-.5 1.2-1.2 1.2H2.2c-.7 0-1.2-.5-1.2-1.2z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13'%3E%3Cpath d='M1 2.2C1 1.5 1.5 1 2.2 1h3.6l1.6 1.6h6.4c.7 0 1.2.5 1.2 1.2v6.9c0 .7-.5 1.2-1.2 1.2H2.2c-.7 0-1.2-.5-1.2-1.2z' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.vgroup.hl .vghead{background:var(--raised);transition:background .3s}
.md .fref.k-audio::before{content:"";display:inline-block;width:0;height:0;margin:0 6px 1px 1px;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent currentColor;opacity:.7}
/* "all N files": opens the file panel */
.fall{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px 8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;transition:border-color var(--d-1),background var(--d-1)}
.fall:hover{border-color:var(--line3);background:var(--surface)}
.fall>.ic:first-child{color:var(--muted)}
.fall .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.fall .t b{font-weight:500;font-size:.84375rem}
.fall .t i{font-style:normal;font-size:.75rem;color:var(--dim)}
.fall>.ic:last-child{color:var(--dim)}
.frow.far .fbadge{opacity:.65}
/* the file panel's list */
#viewer .vstage.vliststage,#viewer:not(.over) .vstage.vliststage{display:block;overflow:auto;padding:0;background:var(--side)}
.vlist{padding:6px 0 24px}
.vgroup+.vgroup{margin-top:2px}
.vghead{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 18px;border:0;background:var(--side);color:var(--text2);font-size:.78125rem;text-align:left}
.vghead b{font-weight:500;font-family:var(--mono);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vghead i{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.vghead .ic{color:var(--dim);transition:transform .15s}
.vghead[aria-expanded="false"] .ic{transform:rotate(-90deg)}
.vgfiles .frow{padding:7px 10px 7px 22px}
.vgfiles .frow .fbadge{width:28px;height:32px;padding-bottom:4px;font-size:.53125rem}
.vgfiles .frow+.frow{border-top:0}
.vgfiles .frow .acts .fbtn:not(.icon){opacity:0;transition:opacity var(--d-1)}
.vgfiles .frow:hover .acts .fbtn,.vgfiles .frow:focus-within .acts .fbtn{opacity:1}
@media (hover:none){.vgfiles .frow .acts .fbtn:not(.icon){opacity:1}}
#viewer .vbar.withback{padding-left:8px}
#viewer .vback svg{transform:scaleX(-1)}
#viewer .vload{display:flex;align-items:center;gap:10px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--text2);animation:spin .8s linear infinite}
/* what a reply delivered */
.outs{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.ohead{display:flex;align-items:center;gap:8px;min-height:28px;font-size:.78125rem;color:var(--muted)}
.ohead .sp{flex:1}
.flist{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.frow{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;cursor:pointer;transition:background var(--d-1)}
.frow:hover{background:rgba(255,255,255,.025)}
.frow+.frow{border-top:1px solid var(--line)}
.frow .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.frow .t b{font-weight:500;font-size:.84375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .t i{font-style:normal;font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .acts{display:flex;align-items:center;gap:2px;flex:none}
.fbtn{flex:none;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text2);font-size:.78125rem;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:background var(--d-1),color var(--d-1)}
.fbtn:hover{background:var(--hover);color:var(--text);text-decoration:none}
.fbtn.icon{width:30px;padding:0;justify-content:center;color:var(--muted)}
.fbtn.go{background:var(--text);color:#111;font-weight:500}
.fbtn.go:hover{background:#fff;color:#111}
.fbtn.on{background:var(--active);color:var(--text)}
/* the rest of a long list: the list's own last row (its own class: ".more" is the settings' round button) */
.fmore{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;padding:0 12px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--muted);font-size:.78125rem;transition:background var(--d-1),color var(--d-1)}
.fmore i{font-style:normal;color:var(--dim);margin-left:8px}
.fmore[aria-expanded="true"] .ic{transform:rotate(180deg)}
.fmorebox{border-top:1px solid var(--line)}
.fmorebox:first-child,.fmorebox[hidden]:first-child+.fmore{border-top:0}
.fmore:hover{background:rgba(255,255,255,.025);color:var(--text)}
.fmore .ic{color:var(--dim);transition:color var(--d-1)}
.fmore:hover .ic{color:var(--text2)}
/* the file viewer: pictures, pages, PDFs, text, and a card for the rest. A panel on the right of the conversation
   on a wide screen (like Claude's and Codex's apps); the whole screen on a narrow one. */
#viewer{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:rgba(10,10,10,.94);animation:fade var(--d-3) var(--e-out) both}
.frow.viewing{background:var(--active)}
.frow.viewing:hover{background:var(--active)}
.fchip.viewing{border-color:var(--line3);background:var(--active)}
.pcell.viewing{outline:2px solid var(--line3);outline-offset:1px}
.view-edge{display:none}
#viewer .vbar{flex:none;display:flex;align-items:center;gap:4px;min-height:58px;padding:9px 12px 9px 20px}
#viewer .vt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4;margin-right:8px}
#viewer .vt b{font-weight:500;font-size:.875rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#viewer .vt i{font-style:normal;font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#viewer .vt .linkbtn{font-size:.75rem;color:var(--link);margin-left:8px}
#viewer .vcount{display:inline-flex;align-items:center;gap:2px;margin-right:6px;font-size:.78125rem;color:var(--muted);font-variant-numeric:tabular-nums}
#viewer .vcount .fbtn{display:none}
#viewer .vcount .fbtn svg,#viewer .vnav.prev svg{transform:scaleX(-1)}
#viewer .vcount .fbtn.nx svg{transform:none}
#viewer .vseg{display:inline-flex;gap:2px;padding:2px;margin-right:6px;border-radius:10px;background:rgba(255,255,255,.05)}
#viewer .vseg .fbtn{height:26px;padding:0 10px}
#viewer .vsep{width:1px;height:20px;margin:0 6px;background:var(--line2)}
#viewer .vstage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0 72px 28px}
#viewer .vstage>img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:var(--shadow);background:repeating-conic-gradient(#2a2a2a 0 25%,#333 0 50%) 0 0/16px 16px}
#viewer .vframe{width:min(1240px,100%);height:100%;border:0;border-radius:10px;background:#fff;box-shadow:var(--shadow)}
#viewer .vframe.pdf{background:#3A3A3A}
#viewer .vtext{width:min(980px,100%);max-height:100%;align-self:flex-start;margin:0 auto;overflow:auto;padding:18px 22px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--text);font-family:var(--mono);font-size:.78125rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
#viewer .vtext .cut{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--dim);font-family:var(--sans)}
/* code highlighted with line numbers, and what changed (app-09-code.js): a box the code viewer draws into */
#viewer .vcode,#viewer .vmd{width:min(980px,100%);height:100%;align-self:stretch;margin:0 auto;overflow:auto;border:1px solid var(--line2);border-radius:12px;background:var(--bg)}
#viewer .vcode>.vtext.plain{width:100%;max-height:none;margin:0;border:0;border-radius:0;background:transparent}
#viewer .vcode>.vload{justify-content:center;padding:40px 0}
#viewer .vcode-in{min-height:100%;padding:6px 0 24px}
#viewer .vcut,#viewer .vnote{padding:12px 22px;font-size:.78125rem;color:var(--dim);border-top:1px solid var(--line)}
#viewer .vnote{border-top:0;padding:40px 22px;text-align:center}
/* a Markdown file laid out */
#viewer .vmd{padding:0}
#viewer .mdfile{padding:22px 30px 36px;font-size:.90625rem}
.mdfile h1{margin:4px 0 14px;font-size:1.375rem;font-weight:600;letter-spacing:-.015em}
.mdfile h2{margin:26px 0 10px;font-size:1.125rem;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mdfile h3{margin:22px 0 8px;font-size:1rem}
.mdfile h4,.mdfile h5,.mdfile h6{margin:18px 0 6px;font-size:.9375rem;font-weight:600}
.mdfile li.task{list-style:none;margin-left:-20px}
.mdfile li.task input{margin:0 7px 0 0;vertical-align:-1px;accent-color:var(--ok)}
.mdfile li>p{margin:0 0 6px}
.mdfile .mdimg{color:var(--dim);font-size:.84375rem}
.mdfile table{display:table;width:auto}
/* what changed: how, and how much (under the bar) */
#viewer .vstat{flex:none;display:flex;align-items:center;gap:8px;padding:7px 20px;font-size:.75rem;color:var(--dim);border-bottom:1px solid var(--line)}
#viewer .vstat .plus{color:var(--ok)}
#viewer .vstat .minus{color:var(--bad)}
#viewer .vmedia{max-width:100%;max-height:100%;border-radius:8px;background:#000}
#viewer .vcard{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,100%);padding:36px 32px 30px;border:1px solid var(--line2);border-radius:18px;background:var(--panel);text-align:center}
#viewer .vcard .fbadge{width:54px;height:64px;font-size:.75rem;padding-bottom:11px;margin-bottom:8px;border-radius:10px}
#viewer .vcard b{font-weight:500;font-size:.9375rem;overflow-wrap:anywhere}
#viewer .vcard span{font-size:.78125rem;color:var(--dim);line-height:1.65}
#viewer .vcard .fbtn.go{margin-top:10px;height:34px;padding:0 16px}
#viewer .vload{font-size:.8125rem;color:var(--dim)}
#viewer .vnav{position:absolute;top:50%;z-index:1;width:44px;height:44px;margin-top:-36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text);display:flex;align-items:center;justify-content:center;transition:background var(--d-1),opacity var(--d-1)}
#viewer .vnav:hover{background:rgba(255,255,255,.16)}
#viewer .vnav.prev{left:14px}
#viewer .vnav.next{right:14px}
#viewer .vnav:disabled{opacity:.2;cursor:default;background:rgba(255,255,255,.08)}
@keyframes vin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (min-width:1000px){
  #viewer:not(.over){position:relative;inset:auto;z-index:3;flex:none;width:var(--view-w,calc((100vw - var(--side-w)) * .5));min-width:360px;max-width:calc(100vw - var(--side-w) - 440px);background:var(--side);border-left:1px solid var(--line);animation:vin var(--d-4) var(--e-out) both}
  #viewer:not(.over) .vbar{height:52px;min-height:0;padding:0 8px 0 18px;border-bottom:1px solid var(--line)}
  #viewer:not(.over) .vbar .lbl{display:none}
  #viewer:not(.over) .vbar>.fbtn:not(.icon){width:32px;padding:0;justify-content:center}
  #viewer:not(.over) .vcount{margin-right:4px}
  #viewer:not(.over) .vcount .fbtn{display:inline-flex}
  #viewer:not(.over) .vnav{display:none}
  #viewer:not(.over) .vsep{margin:0 4px}
  #viewer:not(.over) .vstage{padding:0;background:var(--bg)}
  #viewer:not(.over) .vstage>img{max-width:calc(100% - 48px);max-height:calc(100% - 48px)}
  #viewer:not(.over) .vframe{width:100%;border-radius:0;box-shadow:none}
  #viewer:not(.over) .vtext{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0;background:var(--bg)}
  #viewer:not(.over) :is(.vcode,.vmd){width:100%;border:0;border-radius:0}
  #viewer:not(.over) .vstat{padding:7px 18px}
  #viewer:not(.over) .vmedia{max-width:calc(100% - 48px)}
  #viewer:not(.over) .vcard{margin:0 24px}
  /* its left edge: drag to make it wider or narrower, double-click for half and half */
  #viewer:not(.over) .view-edge{display:block;position:absolute;top:0;bottom:0;left:-4px;width:8px;z-index:4;cursor:col-resize;touch-action:none}
  .view-edge::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;border-radius:2px;background:transparent;transition:background var(--d-1) .05s}
  .view-edge:hover::after,#viewer.sizing .view-edge::after{background:rgba(255,255,255,.18)}
  #viewer.sizing .vframe{pointer-events:none}
}
@media (max-width:720px){
  .pgrid{--cell:calc((min(78vw,330px) - 4px) / 2)}
  .pgrid.many{--cols:2 !important}
  .outs .pgrid{--cell:calc((min(100vw - 48px,360px) - 4px) / 2)}
  #viewer{background:#0E0E0E}
  #viewer .vbar{min-height:52px;padding:6px 6px 6px 14px}
  #viewer .vbar .lbl{display:none}
  #viewer .vbar .fbtn:not(.icon){width:32px;padding:0;justify-content:center}
  #viewer .vseg .fbtn:not(.icon){width:auto;padding:0 8px}
  #viewer .vsep{display:none}
  #viewer .vbar .vopen{display:none}
  #viewer .vcount .fbtn{display:inline-flex}
  #viewer .vstage{padding:0 0 env(safe-area-inset-bottom)}
  #viewer .vframe,#viewer .vtext{border-radius:0;border-left:0;border-right:0;width:100%}
  #viewer .vnav{display:none}
}

/* ---------- menus ---------- */
.menu{position:fixed;z-index:70;min-width:200px;max-width:min(340px,calc(100vw - 16px));max-height:min(420px,calc(100vh - 24px));overflow-y:auto;padding:6px;border:1px solid var(--line2);border-radius:14px;background:#262626;box-shadow:var(--shadow);animation:pop var(--d-3) var(--e-out) both;transform-origin:bottom left}
.menu[data-side="bottom"]{animation-name:popdown;transform-origin:top left}
.menu .mt{padding:6px 10px 4px;font-size:.71875rem;color:var(--dim)}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--text);transition:background var(--d-1)}
.mi:hover,.mi:focus-visible{background:var(--hover);outline:none}
.mi:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.mi .ic{color:var(--muted)}
.mi .mlabel{flex:1;min-width:0;display:flex;flex-direction:column}
.mi .ml{font-size:.84375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi .mdesc{font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi .mcheck{width:16px;color:var(--text)}
.mi .mhint{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:var(--dim);font-variant-numeric:tabular-nums}
.mi[disabled]{opacity:.5}
.mi .mexp svg{transition:transform var(--d-3) var(--e-std)}
.mi .mexp.open svg{transform:rotate(90deg)}
.mi.danger{color:var(--bad)}
.msep{height:1px;background:var(--line);margin:5px 6px}
/* 「项目」: pick a folder on one of the person's computers */
.menu.wide{min-width:min(320px,calc(100vw - 16px));max-width:min(400px,calc(100vw - 16px))}
.mnote{padding:8px 10px;font-size:.78125rem;line-height:1.55;color:var(--muted)}
.menu.wheremenu{width:min(440px,calc(100vw - 16px));max-width:none;max-height:min(540px,calc(100vh - 24px))}
/* 文件夹 | GitHub 仓库 at the top, staying there (with the search box) while the list under them scrolls */
.menu.wheremenu.tabbed{padding-top:0}
.wtop{position:sticky;top:0;z-index:2;padding:6px 0 4px;background:#262626}
.seg.wtabs{display:flex;margin:4px 4px 8px}
.seg.wtabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.wsearch{padding:0 4px}
.wsearch .wq{width:100%;box-sizing:border-box}
.wfade{position:sticky;bottom:-6px;height:28px;margin-top:-28px;pointer-events:none;background:linear-gradient(rgba(38,38,38,0),#262626)}
.wqrow{position:relative;padding:4px 4px 6px;display:flex;align-items:center;gap:6px;color:var(--dim)}
.wqrow .wq{min-width:0;height:36px;font-family:var(--mono);font-size:.78125rem}
.wqrow .wq::placeholder{font-family:var(--sans)}
.wqrow .wgo{flex:none;height:36px;padding:0 12px}
.wqrow .wgo:disabled{opacity:.6;cursor:default}
.wherr{width:100%;box-sizing:border-box;margin:-4px 0 0;padding:8px 10px;border-radius:9px;background:rgba(239,123,112,.1);color:var(--bad);font-size:.78125rem;line-height:1.5;text-align:left}
.wadd{margin:2px 4px 4px;padding:24px 16px 20px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.022);display:flex;flex-direction:column;align-items:center;gap:14px}
.wwhere{font-size:.84375rem;line-height:1.5;color:var(--muted);text-align:center}
.wwhere b{color:var(--text);font-weight:600}
.wcomp{border:0;background:transparent;color:var(--text);font-weight:600;font-size:.84375rem;line-height:1.5;display:inline-flex;align-items:center;gap:2px;padding:0 3px;margin:0 1px;border-radius:6px;vertical-align:baseline}
.wcomp:hover,.wcomp[aria-expanded="true"]{background:var(--hover)}
.wcomps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.wcompi{height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--muted);font-size:.78125rem;display:inline-flex;align-items:center;gap:6px}
.wcompi.on{background:var(--hover);color:var(--text)}
.wcompi .dot{width:6px;height:6px;border-radius:50%;background:#5A5A5A}.wcompi .dot.on{background:#5BC07A}
.wbtn{height:32px;padding:0 14px;border:0;border-radius:999px;background:var(--hover);color:var(--text);font-size:.8125rem;display:inline-flex;align-items:center;gap:6px;transition:background var(--d-1),transform var(--d-1)}
.wbtn:hover{background:var(--line2)}.wbtn:active{transform:scale(.97)}
.wsub{font-size:.78125rem;line-height:1.5;color:var(--dim);text-align:center;display:flex;align-items:center;gap:6px}
.wadd .wqrow{width:100%;padding:0;box-sizing:border-box}
.menu.wheremenu .mt{padding-top:10px}
.menu.wheremenu > .mt:first-child{padding-top:6px}
.whint{padding:0 10px 6px;font-size:.75rem;line-height:1.55;color:var(--dim)}
#projBtn .x{width:18px;height:18px;margin-right:-4px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--dim)}
#projBtn .pend{width:6px;height:6px;border-radius:50%;background:var(--link);flex:none}
#projBtn .x:hover{background:var(--line2);color:var(--text)}
.mfoot{padding:6px 10px 4px;font-size:.71875rem;color:var(--dim);line-height:1.5}
.mcustom{display:flex;flex-direction:column;gap:8px;padding:6px}
.mcustom .row{display:flex;gap:6px}
#mentions{position:absolute;left:8px;bottom:calc(100% + 8px);width:260px;z-index:6}
#mentions .mi.sel{background:var(--hover)}

/* ---------- settings ---------- */
#reposView .col{max-width:1000px}
.set{display:grid;grid-template-columns:184px minmax(0,1fr);gap:36px;align-items:start}
.set-nav{position:sticky;top:8px;display:flex;flex-direction:column;gap:2px}
.set-tab{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:.84375rem;text-align:left;white-space:nowrap;transition:background var(--d-1),color var(--d-1)}
.set-tab:hover{background:var(--hover);color:var(--text)}
.set-tab[aria-selected="true"]{background:var(--active);color:var(--text)}
.set-tab .ic{color:var(--dim);transition:color var(--d-1)}
.set-tab[aria-selected="true"] .ic,.set-tab:hover .ic{color:var(--text2)}
.set-body{display:flex;flex-direction:column;gap:30px;min-width:0}
.set-body.swap>*{animation:rise var(--d-3) var(--e-out) both}
.set-body.swap>*:nth-child(2){animation-delay:20ms}.set-body.swap>*:nth-child(3){animation-delay:40ms}
.acct-row{display:flex;align-items:center;gap:12px;min-width:0}
.acct-row .who2{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.acct-row .who2 b{font-weight:600;font-size:.90625rem}
.acct-row .who2 span{font-size:.78125rem;color:var(--dim)}
.acct-row .sp{flex:1}
.acct-row .b2{white-space:nowrap}
.card .plan{gap:14px}
.pg{display:flex;flex-direction:column;gap:30px;padding:28px 0 64px}
.pg-title{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:-.01em}
.pg-sec{display:flex;flex-direction:column;gap:10px;animation:rise var(--d-4) var(--e-out) both;scroll-margin-top:20px}
.pg-sec:nth-child(3){animation-delay:.04s}.pg-sec:nth-child(4){animation-delay:.08s}.pg-sec:nth-child(5){animation-delay:.12s}.pg-sec:nth-child(6){animation-delay:.16s}
.pg-head{display:flex;align-items:center;gap:8px;min-height:32px}
.pg-head h2{margin:0;font-size:.875rem;font-weight:600}
.pg-head .count{font-size:.75rem;color:var(--dim)}
.pg-head .sp{flex:1}
.card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.card .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rows{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.srow{display:flex;align-items:center;gap:16px;padding:12px 16px;min-height:58px}
.srow+.srow{border-top:1px solid var(--line)}
.srow .lab{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srow .lab b{font-weight:500;font-size:.84375rem}
.srow .lab span{font-size:.78125rem;color:var(--dim)}
.srow.perm-row{align-items:flex-start;padding:14px 16px}
.srow.perm-row .lab{gap:4px;padding-top:4px}
.srow .pdesc{line-height:1.6;max-width:460px}
.pdesc.swap{animation:fade var(--d-3) var(--e-out) both}
.muted{color:var(--muted);font-size:.8125rem}
.fine{margin:0;padding:0 4px;font-size:.75rem;color:var(--dim)}
.ok-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 3px rgba(99,198,143,.15)}
.code{font-family:var(--mono);font-size:1.625rem;letter-spacing:4px;padding:8px 16px;border-radius:12px;background:var(--code);border:1px solid var(--line2);animation:pop var(--d-4) var(--e-out) both}
.field2{height:34px;padding:0 12px;border:1px solid var(--line-field);border-radius:10px;background:var(--surface);color:var(--text);font-size:.8125rem;flex:1;min-width:180px;outline:none;transition:border-color var(--d-1)}
.field2:focus{border-color:var(--line-typing)}
.repos{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.repoitem{display:flex;flex-direction:column}
.repoitem+.repoitem{border-top:1px solid var(--line)}
.repo-main{display:flex;align-items:center;gap:12px;padding:12px 10px 12px 16px;flex-wrap:wrap}
.repo-id{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.repo-id .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:500}
.repo-id .sub{font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:.6875rem;font-weight:400;padding:0 7px;border-radius:999px;background:var(--hover);color:var(--muted);line-height:18px}
.seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--bg);border:1px solid var(--line);flex:none;position:relative}
.seg button{position:relative;z-index:1;height:28px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.78125rem;white-space:nowrap;transition:color .2s,background .2s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.more{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--d-1),color var(--d-1)}
.more:hover{background:var(--hover);color:var(--text)}
.more svg{transition:transform var(--d-3) var(--e-std)}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.repo-more{display:flex;flex-direction:column;gap:8px;padding:0 16px 14px;animation:rise var(--d-3) var(--e-out) both}
.repo-more label{font-size:.75rem;color:var(--dim)}
.repo-more .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.legend{margin:0;padding:0 4px;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:.75rem;color:var(--dim)}
.legend b{font-weight:500;color:var(--muted)}
.pick{display:flex;flex-direction:column;gap:10px;animation:rise var(--d-3) var(--e-out) both}
.dev-st{font-size:.78125rem;color:var(--dim);white-space:nowrap}
/* computers: one row each; a click opens what it runs, how it is doing and what can be done with it */
.dev{display:flex;flex-direction:column}
.dev+.dev{border-top:1px solid var(--line)}
.dev-main{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px}
.dev-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:2px 0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;border-radius:8px}
.dev-open:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.dev-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dev-id .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:500;font-size:.875rem}
.dev-id .sub{font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-id .sub.warn{color:var(--warn);white-space:normal}
.dev-chev{flex:none;display:inline-flex;color:var(--dim);transition:transform var(--d-3) var(--e-std)}
.dev-open[aria-expanded="true"] .dev-chev{transform:rotate(90deg)}
.dev-open:hover .dev-chev{color:var(--text)}
.tag.ok{background:rgba(99,198,143,.12);color:var(--ok)}
.tag.warn{background:rgba(233,185,94,.13);color:var(--warn)}
.dev-more{display:flex;flex-direction:column;gap:14px;padding:4px 16px 16px 35px;animation:rise var(--d-3) var(--e-out) both}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0;font-size:.78125rem}
.kv dt{color:var(--dim)}
.kv dd{margin:0;color:var(--text2);min-width:0;overflow-wrap:anywhere}
.kv dd .good{color:var(--ok)}
.kv dd .warn{color:var(--warn)}
.dev-acts{display:flex;gap:8px;flex-wrap:wrap}
.b2 .ic{display:inline-flex}
.dev-st.on{color:var(--muted)}
.keycard{border:1px solid rgba(99,198,143,.35);border-radius:14px;background:linear-gradient(180deg,rgba(99,198,143,.08),rgba(99,198,143,.03));padding:14px 16px;display:flex;flex-direction:column;gap:10px;animation:pop var(--d-4) var(--e-out) both}
.keycard .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.keycard .k{flex:1;min-width:0;font-family:var(--mono);font-size:.78125rem;padding:8px 12px;border-radius:10px;background:var(--code);border:1px solid var(--line2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.keycard .help{font-size:.78125rem;color:var(--muted)}
.keycard .help code{font-family:var(--mono);font-size:.75rem;color:var(--text2)}
.keycard .x{margin-left:auto}
.keycard .sp{flex:1}
.keycard .cmd{white-space:normal;word-break:break-all;line-height:1.5;padding:9px 12px;font-size:.78125rem;color:var(--text)}
.keycard.pair{border-color:var(--line2);background:var(--panel)}
/* connecting a computer: one window with the steps for this system, then the install's live progress */
.cmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6);animation:fade var(--d-3) var(--e-out) both}
.cbox{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);padding:22px 22px 18px;display:flex;flex-direction:column;gap:18px;animation:pop var(--d-4) var(--e-out) both}
.cbox .hd{display:flex;align-items:flex-start;gap:12px}
.cbox .hd .t{flex:1;min-width:0}
.cbox h2{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.cbox .lead{margin:6px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.65}
.cbox .seg{align-self:flex-start}
.csteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:cs}
.csteps li{display:flex;gap:12px;align-items:flex-start;font-size:.84375rem;line-height:1.7;color:var(--text2)}
.csteps li::before{counter-increment:cs;content:counter(cs);flex:none;width:22px;height:22px;border-radius:50%;background:var(--raised);color:var(--text);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
.csteps .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:6px;border:1px solid var(--line3);border-bottom-width:2px;background:var(--surface);font-family:var(--sans);font-size:.75rem;color:var(--text);margin:0 2px;vertical-align:1px}
.ccmd{display:flex;gap:8px;align-items:center}
.ccmd code{flex:1;min-width:0;font-family:var(--mono);font-size:.75rem;padding:8px 10px;border-radius:10px;background:var(--code);border:1px solid var(--line2);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwait{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--muted);padding:12px 14px;border-radius:12px;background:var(--surface)}
.cprog{list-style:none;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.cprog li{display:flex;align-items:flex-start;gap:10px;font-size:.84375rem;color:var(--dim);line-height:1.5}
.cprog li .ic{width:18px;height:20px;flex:none;justify-content:center}
.cprog li.done{color:var(--text2)}
.cprog li.done .ic{color:var(--ok)}
.cprog li.now{color:var(--text)}
.cprog li .hint{display:block;font-size:.78125rem;color:var(--warn);margin-top:2px}
.cprog .pdot{width:6px;height:6px;border-radius:50%;background:var(--line3)}
.cerr{padding:10px 12px;border-radius:12px;background:rgba(239,123,112,.1);border:1px solid rgba(239,123,112,.3);color:var(--bad);font-size:.8125rem;line-height:1.6}
.cdone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 2px;text-align:center;font-size:.84375rem;color:var(--text2)}
.cdone .big{width:52px;height:52px;border-radius:50%;background:rgba(99,198,143,.14);color:var(--ok);display:flex;align-items:center;justify-content:center;animation:pop var(--d-4) var(--e-out) both}
.cdone b{color:var(--text)}
.cdone .ctip{font-size:.78125rem;color:var(--muted);line-height:1.65;max-width:400px}
.cdone .ctip code{font-family:var(--mono);font-size:.75rem;color:var(--text);background:rgba(255,255,255,.07);border-radius:5px;padding:.1em .4em}
.cfoot{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--dim);flex-wrap:wrap}
.cfoot .sp{flex:1}
.agent.connect{cursor:pointer;border:0;background:transparent;color:inherit;font:inherit;text-align:left;width:calc(100% + 12px);margin:0 -6px;padding:0 6px;border-radius:8px;transition:background var(--d-1)}
.agent.connect:hover{background:var(--hover)}
.agent.connect .st{color:var(--link)}
.keycard.pair.done{border-color:rgba(99,198,143,.35);background:linear-gradient(180deg,rgba(99,198,143,.08),rgba(99,198,143,.03))}
.keycard .seg button{height:26px;padding:0 10px;font-size:.75rem}
.keycard .dim{color:var(--dim);font-size:.75rem}
.keycard .help.dim .linkbtn{margin-left:8px;font-size:.75rem}
.pstate{display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;font-size:.8125rem;color:var(--text2);min-height:24px;animation:fade var(--d-3) var(--e-out) both}
.pstate .dim{white-space:nowrap}
.pstate.ok{color:var(--text)}
.srow.stack{flex-direction:column;align-items:stretch;gap:10px}
.pwform{display:flex;flex-direction:column;gap:8px;max-width:360px}
.pwform .field2{flex:none}
.pwform .row{display:flex;align-items:center;gap:12px}
.srow .inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srow .inline .field2{min-width:160px;max-width:220px}
.nudge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px dashed var(--line3);border-radius:999px;background:transparent;color:var(--text2);font-size:.8125rem;transition:background var(--d-1),border-color var(--d-1)}
.nudge:hover{background:var(--hover);border-color:var(--text2)}
.pick .field2{flex:none;height:36px}
.picklist{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pickitem{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 14px}
.pickitem+.pickitem{border-top:1px solid var(--line)}
.pickitem .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickitem .o{color:var(--dim)}
.pickitem .st{font-size:.75rem;color:var(--dim)}

#scrim{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
#scrim.show{opacity:1;visibility:visible}

@media (max-width:760px){
  .set{grid-template-columns:minmax(0,1fr);gap:14px}
  .set-nav{flex-direction:row;overflow-x:auto;top:0;z-index:3;margin:0 -16px;padding:6px 16px 10px;background:var(--bg);scrollbar-width:none}
  .set-nav::-webkit-scrollbar{display:none}
  .set-tab{flex:none;height:34px;padding:0 13px;border:1px solid var(--line2);border-radius:999px}
  .set-tab[aria-selected="true"]{border-color:transparent}
  .acct-row .sp{display:none}
  .acct-row .who2{flex:1}

  .side{position:fixed;inset:0 auto 0 0;z-index:20;width:min(300px,86vw);max-width:none;transform:translateX(-102%);transition:transform .32s var(--out);box-shadow:0 0 50px rgba(0,0,0,.6)}
  .side.open{transform:none}
  .side-edge{display:none}
  .hint{display:none}
  .iconbtn{display:flex}
  .top{padding:0 12px}
  .chat{padding:4px 14px 20px}
  .composer-wrap{padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
  .composer{border-radius:22px;padding:10px 10px 8px 14px}
  .me .bubble{max-width:90%}
  .hero{min-height:calc(100vh - 230px)}
  .hero h2{font-size:1.375rem}
  .modeseg button{padding:0 10px}
  .repo-main .seg{order:3;width:100%}
  .repo-main .seg button{flex:1;padding:0 6px}
  .srow{flex-wrap:wrap}
  .srow.perm-row{flex-direction:column;align-items:stretch;gap:12px}
  /* while Claude works: room for 插话 / 排队 next to the send button */
  .sgm.steer-tg{margin-right:2px}
  .sgm.steer-tg>button{padding:0 10px}
  .sgm.steer-tg>button .ic{display:none}
  .ctools:has(#steerTg:not([hidden])) #planBtn .lbl{display:none}
  .ctools:has(#steerTg:not([hidden])) #claudeBtn .on-ics{display:none}
  .sgm.perm-seg{display:flex}
  .sgm.perm-seg>button{flex:1;padding:0 6px}
  #newbelow{bottom:140px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  /* (what is working still turns, slower: it says something is going on) */
  .spin,.aspin,#stop::after,.plan-head .rf.busy .ic,.accl-foot .rf.busy .ic{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
  .shimmer{color:var(--muted) !important;background:none}
  .wdot{animation:none}
  .wcard>li.live .x{background:none;animation:none}
  .wcard>li.live .x *{color:inherit}
}
/* On a touch screen the small buttons take a finger: what answers to a tap is bigger than what is drawn */
@media (pointer:coarse){
  .ghead .gadd,.pp-h button,.lennote .x{position:relative}
  .ghead .gadd::after,.pp-h button::after,.lennote .x::after,.sfind .clear::after,.att .ax::after{content:"";position:absolute;inset:-8px}
}
/* Asked for less motion (the system's setting): things appear without moving, nothing pulses or glides; what is
   working still turns. */
@media (prefers-reduced-motion:reduce){
  @keyframes rise{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0}to{opacity:1}}
  @keyframes popdown{from{opacity:0}to{opacity:1}}
  @keyframes slidein{from{opacity:0}to{opacity:1}}
  @keyframes kidin{from{opacity:0}to{opacity:1}}
  @keyframes vin{from{opacity:0}to{opacity:1}}
  @keyframes grow{from{opacity:0}to{opacity:1}}
  @keyframes pulse{from{box-shadow:none}to{box-shadow:none}}
  @keyframes glow{from{box-shadow:none}to{box-shadow:none}}
  @keyframes shimmer{from{background-position:50% 0}to{background-position:50% 0}}
  .toast{transform:translate(-50%,0)!important}
}
/* the Claude accounts on a Claude computer: out of room, the one used first, the buttons under each */
.plan-out{align-self:flex-start;font-size:.71875rem;font-weight:600;color:var(--hot);background:color-mix(in srgb,var(--hot) 12%,transparent);border-radius:999px;padding:2px 9px}
.acc-first{font-size:.71875rem;color:var(--ok);background:rgba(99,198,143,.12);border-radius:999px;padding:2px 9px}
/* 设置 → 账号与用量: every account, one short row each (on a narrow screen its two limits go under its name) */
.accl{display:flex;flex-direction:column}
.accr{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr) minmax(0,300px) 28px;column-gap:14px;row-gap:10px;align-items:center;padding:12px 10px 12px 14px;background:var(--panel);transition:background var(--d-1)}
.accr+.accr{border-top:1px solid var(--line)}
/* (0.66) other people's own accounts on the person's computers: under theirs, by whose (logged in there for them) */
.accl-who{padding:12px 14px 6px;font-size:.75rem;color:var(--muted);background:var(--panel);border-top:1px solid var(--line)}
.accl-who+.accr{border-top:0}
.accr .plan-dot{align-self:start;height:20px;position:relative}
/* one of several: dragged into the order they're used in (a handle in the dot's place on hover; always on touch) */
.accr.sortable{cursor:grab;touch-action:pan-y}
.accr.sortable:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.accr-grip>.ic{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:0;transition:opacity var(--d-1)}
.accr-grip>.dot{transition:opacity var(--d-1),transform .15s}
@media (hover:hover){
  .accr.sortable:hover{background:color-mix(in srgb,var(--text) 4%,var(--panel))}
  .accr.sortable:hover .accr-grip>.dot{opacity:0;transform:scale(.4)}
  .accr.sortable:hover .accr-grip>.ic{opacity:1}
}
@media (hover:none){
  .accr.sortable .accr-grip{touch-action:none}
  .accr.sortable .accr-grip>.dot{opacity:0}
  .accr.sortable .accr-grip>.ic{opacity:1}
}
.accl.sorting .accr{transition:transform var(--d-3) var(--e-std),background var(--d-1)}
.accl.sorting .accr.lift{z-index:3;transition:box-shadow .2s,background var(--d-1);cursor:grabbing;background:var(--raised);border-radius:12px;border-top-color:transparent;box-shadow:var(--shadow),0 0 0 1px var(--line2)}
.accl.sorting .accr.lift .accr-grip>.dot{opacity:0}
.accl.sorting .accr.lift .accr-grip>.ic{opacity:1;color:var(--text)}
.accl.sorting .accr.lift+.accr{border-top-color:transparent}
.accr.lift.settle{transition:transform var(--d-3) var(--e-std),box-shadow .2s,background .2s;box-shadow:none}
.accr-id{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.4}
.accr-id .l1{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;min-width:0}
.accr-id .nm{font-size:.84375rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.accr-id .acc-first,.accr-id .plan-out{flex:none;align-self:center;padding:1px 8px;font-size:.6875rem;font-weight:500}
.accr-ms{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;min-width:0}
.accr-none{grid-column:1/-1;font-size:.75rem;color:var(--dim)}
.accm{display:flex;flex-direction:column;gap:5px;min-width:0}
.accm-top{display:flex;align-items:baseline;gap:6px;font-size:.75rem;line-height:1.2}
.accm-top .n{color:var(--text2);white-space:nowrap}
.accm-top .p{margin-left:auto;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.accm.warn .accm-top .p{color:var(--warn)}.accm.bad .accm-top .p{color:var(--hot)}
.accm-r{font-size:.6875rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.accr-more{width:28px;height:28px;padding:0;justify-content:center;color:var(--dim)}
.accr-more:hover,.accr-more[aria-expanded="true"]{color:var(--text)}
.accl-foot{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px 4px 16px;border-top:1px solid var(--line);font-size:.71875rem;color:var(--dim)}
.accl-foot .sp{flex:1}
.accl-foot .rf{color:var(--muted)}
.accl-foot .rf:hover{color:var(--text)}
.accl-foot .rf.busy .ic{animation:spin .9s linear infinite}
.accl{container-type:inline-size}
@container (max-width:660px){
  .accr{grid-template-columns:16px minmax(0,1fr) 28px}
  .accr-ms{grid-column:2/4;grid-row:2;padding-right:6px}
}
.addacc{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}
/* logging one in: that computer's browser, shown and used here */
.cbox.lvbox{width:min(1040px,100%);gap:12px}
.lv-bar{display:flex;align-items:center;gap:4px;min-width:0}
.lv-bar .tiny{width:30px;height:30px;padding:0;justify-content:center}
.lv-url{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.78125rem;color:var(--text2)}
.lv-url .ic{color:var(--ok);flex:none}
.lv-url .h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-screen{position:relative;width:100%;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--surface);touch-action:none;cursor:default;user-select:none;-webkit-user-select:none}
.lv-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.lv-keys{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;resize:none;caret-color:transparent;font-size:16px}
.lv-wait{display:flex;align-items:center;justify-content:center;gap:10px;min-height:260px;font-size:.84375rem;color:var(--muted);border-radius:12px;background:var(--surface)}
.lv-fail{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(239,123,112,.1);border:1px solid rgba(239,123,112,.3);color:var(--bad);font-size:.8125rem;line-height:1.6}
.lv-fail .ic{flex:none;margin-top:2px}
.lv-done{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--surface)}
.lv-done .okc{width:44px;height:44px;flex:none;border-radius:50%;background:rgba(99,198,143,.14);color:var(--ok);display:flex;align-items:center;justify-content:center;animation:pop var(--d-4) var(--e-out) both}
.lv-done>div{display:flex;flex-direction:column;gap:3px;font-size:.8125rem;color:var(--muted);line-height:1.6}
.lv-done b{color:var(--text);font-size:.875rem}
.lvbox .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lvbox .row.end{justify-content:flex-end}
.lvbox .row .sp{flex:1}
.lvbox .lv-foot .fine{padding:0}
.lvbox .lv-stats{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.lvbox .lv-stats:empty{display:none}