/* 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 .32s var(--out) both}
.swap{animation:fade .22s ease 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}

/* ---------- login ---------- */
#login{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{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;animation:rise .45s var(--out) both}
#login .mark{width:44px;height:44px;border-radius:12px;background:var(--text);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
#login h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
#login 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 .15s,box-shadow .15s}
.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 .12s,opacity .15s}
.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 .3s var(--out) both}
.lswap{align-self:center;font-size:.8125rem}

/* ---------- shell ---------- */
.shell{height:100%;display:flex;overflow:hidden;animation:fade .3s ease 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 .15s .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)}
.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 .15s,color .15s}
.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 .15s,color .15s,box-shadow .15s,opacity .15s}
.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 .3s var(--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 .15s}
.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 .2s var(--out),color .15s}
.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 .15s,box-shadow .15s}
.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 .26s var(--out) both}
.kids.opening::before{animation:fade .3s ease 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 .15s,box-shadow .15s}
.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 .15s,border-color .15s,background .15s}
.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 .15s,background .15s}
.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 .15s,color .15s}
.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 .15s}
.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 .15s,color .15s}
.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.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}
#messages.swap{animation:fade .24s ease both}

/* ---------- 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 .5s var(--out) both}
.hero>*:nth-child(2){animation-delay:.05s}.hero>*:nth-child(3){animation-delay:.1s}.hero>*:nth-child(4){animation-delay:.15s}
.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 .28s var(--out),width .28s var(--out)}

/* ---------- conversation ---------- */
.turn{display:flex;flex-direction:column;gap:14px;min-width:0}
.me{display:flex;justify-content:flex-end}
.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 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 .3s var(--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 .25s ease both}
.sstate .ic{color:var(--dim)}
.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 .3s var(--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 .25s ease 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 .15s}
.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 .15s}
.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 .12s}
.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 .15s,color .15s}
.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 .25s var(--out)}
.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 .3s var(--out),opacity .2s ease}
.wseg.open>.wseg-body{grid-template-rows:1fr;opacity:1}
.wseg-body>div{min-height:0;overflow:hidden}
/* 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 .15s,background .15s,color .15s}
.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 .15s}
.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 .15s,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 .15s,color .15s}
.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 .15s}
.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 .2s var(--out),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}

/* 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 .15s,background .15s}
.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 .15s,background .15s}
.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 .15s,color .15s,border-color .15s}
.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 .18s var(--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 .15s,background .15s}
.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 .12s,background .15s,opacity .15s;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 .12s,background .15s,border-color .15s}
.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)}
.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}
#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 .2s ease,transform .25s var(--out)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.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 .22s var(--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 .15s,background .15s}
.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:pop .22s var(--out) both;transition:background .15s}
#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 .15s,color .15s,transform .12s}
.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 .12s,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 .26s var(--out),width .26s var(--out)}
/* 「插话」: said while Claude works goes straight into the run; 排队: after it */
.sgm.steer-tg{margin-right:6px;border-radius:999px;animation:pop .2s var(--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:30px}
.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 .28s var(--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 .3s ease 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 .28s var(--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 .2s ease 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 .2s ease 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 .15s,color .15s,border-color .15s}
.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)}
/* 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{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 .2s var(--out) both;transition:border-color .15s}
.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 .15s,background .15s,color .15s}
.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 .15s ease 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 .15s}
.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 .15s,background .15s}
.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 .15s,border-color .15s,color .15s}
.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 .15s}
.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 .15s,background .15s}
.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 .15s}
.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 .15s}
.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:nowrap;text-decoration:underline dotted var(--line3);text-underline-offset:4px;transition:background .15s,color .15s}
/* 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 .15s,background .15s}
.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 .12s}
.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 .12s}
.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 .15s,color .15s}
.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 .12s,color .12s}
.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 .12s}
.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 .18s ease 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 .15s,opacity .15s}
#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 .26s var(--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 .15s .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 .18s var(--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 .12s}
.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 .2s var(--out)}
.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 .15s,transform .12s}
.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 .15s,color .15s}
.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 .15s}
.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 .3s var(--out) both}
.set-body.swap>*:nth-child(2){animation-delay:.04s}.set-body.swap>*:nth-child(3){animation-delay:.08s}
.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 .4s var(--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 .3s ease 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 .3s var(--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 .15s}
.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 .15s,color .15s}
.more:hover{background:var(--hover);color:var(--text)}
.more svg{transition:transform .25s var(--out)}
.more[aria-expanded="true"] svg{transform:rotate(180deg)}
.repo-more{display:flex;flex-direction:column;gap:8px;padding:0 16px 14px;animation:rise .25s var(--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 .3s var(--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 .2s var(--out)}
.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 .25s var(--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 .3s var(--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 .2s ease 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 .28s var(--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 .35s var(--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 .15s}
.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 .25s ease 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 .15s,border-color .15s}
.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}
  .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}
}