/* Eden Secretary Chat — design: Kimi K3's "Atelier" (docs/mockups/unified-chat-kimi/option-1.html),
   with Eden Code's composer (Summit Glass, scoped to .jc so its tokens don't fight Atelier's). */

/* ============ TOKENS (Atelier) ============ */
:root{
  --accent:#0a84ff; --accent-soft:rgba(10,132,255,.12);
  --orb:linear-gradient(135deg,#3fb8f2,#1677c9);
  --bg:#f5f5f7;
  --wash1:rgba(216,232,250,.9); --wash2:rgba(251,244,236,.9);
  --content:#ffffff; --content2:#f7f7f9;
  --text:#1d1d1f; --text2:#6e6e73; --text3:#86868b;
  --glass:rgba(255,255,255,.62); --glass2:rgba(250,250,252,.72);
  --hairline:rgba(0,0,0,.06); --rim:rgba(255,255,255,.5);
  --sep:rgba(0,0,0,.07);
  --sh1:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.10);
  --sh2:0 2px 6px rgba(0,0,0,.06),0 24px 64px rgba(0,0,0,.16);
  --run:#30d158; --wait:#e6b800; --done:#8e8e93; --warn:#ff9f0a; --danger:#ff453a;
  --spring:cubic-bezier(.32,.72,0,1);
  --r-lg:20px; --r-md:14px; --r-sm:9px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#161618; --wash1:rgba(20,42,66,.55); --wash2:rgba(30,26,20,.5);
  --content:#1e1e20; --content2:#242426;
  --text:#f5f5f7; --text2:#98989d; --text3:#8e8e93;
  --glass:rgba(32,32,34,.62); --glass2:rgba(38,38,40,.74);
  --hairline:rgba(255,255,255,.09); --rim:rgba(255,255,255,.16);
  --sep:rgba(255,255,255,.09);
  --sh1:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
  --sh2:0 2px 6px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  font-size:15px;line-height:1.35;letter-spacing:-.1px;color:var(--text);
  background:var(--bg);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(900px 620px at 8% -10%,var(--wash1),transparent 60%),
    radial-gradient(900px 700px at 105% 115%,var(--wash2),transparent 60%);
}
[hidden]{display:none!important}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.5}
a{color:var(--accent)}
button:focus-visible,[contenteditable]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-soft, rgba(10,132,255,.25))}
svg.ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
::-webkit-scrollbar{width:8px;height:8px}
/* Scrollbars show only while something scrolls (.is-scrolling, set by app.js for a moment). */
::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.is-scrolling::-webkit-scrollbar-thumb,.is-scrolling ::-webkit-scrollbar-thumb{background:rgba(120,120,128,.35)}
*{scrollbar-color:transparent transparent}
.is-scrolling,.is-scrolling *{scrollbar-color:rgba(120,120,128,.35) transparent}
::-webkit-scrollbar-track{background:transparent}

/* ============ GLASS ============ */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh1);
}
.card{background:var(--content);border-radius:var(--r-lg);box-shadow:0 1px 3px rgba(0,0,0,.06),inset 0 0 0 .5px var(--hairline)}

/* ============ APP FRAME ============ */
#app{display:flex;gap:12px;height:100vh;height:100dvh;padding:12px}
#center{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

/* ============ SIDEBAR ============ */
#sidebar{width:var(--side-w,260px);flex:none;border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;
  transition:width .38s var(--spring),transform .38s var(--spring),opacity .25s ease,margin .38s var(--spring),visibility 0s linear 0s}
/* collapse animates (no display:none) and leaves the tab order once closed */
#sidebar.closed{width:0;margin-right:-12px;opacity:0;pointer-events:none;visibility:hidden;
  transition:width .38s var(--spring),opacity .25s ease,margin .38s var(--spring),visibility 0s linear .38s}
.side-search{display:flex;gap:6px;padding:12px 12px 8px;align-items:center}
.side-search .fake{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--r-sm);background:var(--content2);color:var(--text3);font-size:13px;box-shadow:inset 0 0 0 .5px var(--hairline);cursor:text;text-align:left}
.side-search .fake span{flex:1}
.side-search .fake kbd{font:500 10.5px/1 -apple-system,sans-serif;color:var(--text3)}
.side-scroll{flex:1;overflow-y:auto;padding:0 8px 8px}
.sec-h{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--text3);text-transform:uppercase;padding:14px 8px 5px;cursor:pointer;user-select:none;text-align:left;gap:6px}
.sec-h .txt{flex:1}
.sec-h .chev{width:11px;height:11px;transition:transform .3s var(--spring)}
.sec.closed .sec-h .chev{transform:rotate(-90deg)}
.sec-add{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;color:var(--text3)}
.sec-add:hover{background:rgba(120,120,128,.14);color:var(--text)}
.sec-add svg{width:12px;height:12px}
/* section collapse: grid rows animate instead of display:none */
.sec-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--spring),opacity .2s;opacity:1}
.sec-items>div{overflow:hidden;min-height:0}
.sec.closed .sec-items{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .32s var(--spring),opacity .2s,visibility 0s linear .32s}
.sec-sub{font-size:10.5px;color:var(--text3);padding:6px 10px 2px;font-weight:600}
.sitem{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:var(--r-sm);font-size:13.5px;text-align:left;color:var(--text);transition:background .15s;position:relative}
.sitem:hover{background:rgba(120,120,128,.12)}
.sitem.active{background:var(--accent-soft);color:var(--accent);font-weight:500}
.sitem .ic{width:16px;height:16px;color:var(--text2)}
.sitem.active .ic{color:var(--accent)}
.sitem .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .sub{display:block;font-size:11px;color:var(--text3);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.sitem.child{padding-left:20px;font-size:13px}
.sitem .pin-ic{width:11px;height:11px;color:var(--text3)}
.side-empty{font-size:12px;color:var(--text3);padding:4px 10px 6px}
.dots{display:flex;gap:4px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.run{background:var(--run);box-shadow:0 0 0 2px rgba(48,209,88,.2)}
.dot.wait{background:var(--wait)}
.dot.done{background:var(--done)}
.side-foot{display:flex;align-items:center;gap:9px;padding:10px 12px;border-top:.5px solid var(--sep)}
.side-foot .grow{flex:1;min-width:0}
.side-foot .who{font-size:12px;font-weight:600}
.orb{width:26px;height:26px;border-radius:26%;background:#0E2747 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/56% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px rgba(14,39,71,.25);flex:none}
/* The Ask Eden mark (askeden.com's header): navy with a white mark; flipped in dark mode. */
[data-theme="dark"] .orb{background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%230E2747' stroke='%230E2747' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/56% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .orb{background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%230E2747' stroke='%230E2747' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/56% no-repeat}}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
.listen{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3)}
.listen .ld{width:6px;height:6px;border-radius:50%;background:var(--done)}
.listen.on .ld{background:var(--run);animation:pulse 2.4s ease-in-out infinite}
/* waiting on the owner's "Let Eden use Eden Secretary?" card (was in calendar.css, which now loads with the calendar) */
.listen.wait .ld{background:var(--wait);animation:pulse 1.2s ease-in-out infinite}
.listen.wait{color:var(--text2)}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.iconbtn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--text2);transition:background .15s;flex:none}
.iconbtn:hover{background:rgba(120,120,128,.14);color:var(--text)}
.iconbtn[aria-pressed="true"]{color:var(--accent)}

/* ============ TITLEBAR ============ */
#titlebar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--r-lg);flex:none;min-width:0}
#titlebar .tb-title{font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;border-radius:6px;padding:1px 4px}
#titlebar .tb-title[contenteditable="true"]{background:var(--accent-soft);outline:none;text-overflow:clip}
.branch{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--text2);background:var(--content2);padding:3px 8px;border-radius:20px;box-shadow:inset 0 0 0 .5px var(--hairline);white-space:nowrap}
.branch svg{width:11px;height:11px}
.tag{font-size:10.5px;font-weight:600;color:var(--text2);background:rgba(120,120,128,.14);padding:2px 8px;border-radius:12px;white-space:nowrap}
.tag.temp{color:var(--warn);background:rgba(255,159,10,.12)}
.tb-sp{flex:1}
.ctxwrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);white-space:nowrap}
.ctxwrap svg{transform:rotate(-90deg)}
.kbdhint{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3);padding:4px 9px;border-radius:7px;box-shadow:inset 0 0 0 .5px var(--hairline)}
.kbdhint:hover{background:rgba(120,120,128,.12);color:var(--text2)}
#btnHamburger{display:none}
#btnCanvasBack{display:none}

/* ============ SPLIT / TRANSCRIPT ============ */
#split{flex:1;min-height:0;display:flex;gap:0;position:relative}
#scrollcol{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:4px 4px 20px;scroll-padding-bottom:20px}
#transcript{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding:4px 8px}
#divider{width:12px;flex:none;cursor:col-resize;display:none;align-items:center;justify-content:center;touch-action:none}
#divider::after{content:"";width:4px;height:44px;border-radius:2px;background:rgba(120,120,128,.35);transition:background .15s}
#divider:hover::after,#divider:focus-visible::after{background:var(--accent)}
#split.art-open #divider{display:flex}
body.col-resize{user-select:none;cursor:col-resize}
body.col-resize iframe{pointer-events:none}

/* empty state */
#empty{max-width:640px;margin:8vh auto 0;text-align:center;padding:0 12px}
#empty .orb{display:none!important}
#empty h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.4px}
#empty p.lead{font-size:15px;color:var(--text2);margin-top:8px}
.sugg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px;text-align:left}
.sugg button{background:var(--content);border-radius:var(--r-md);padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.05),inset 0 0 0 .5px var(--hairline);font-size:13px;color:var(--text);transition:transform .2s var(--spring)}
.sugg button:hover{transform:translateY(-1px)}
.sugg button b{display:block;font-weight:600;margin-bottom:2px}
.sugg button span{color:var(--text3);font-size:12px}
.hints{margin-top:20px;display:flex;flex-direction:column;gap:6px;align-items:center}
.hint{font-size:12px;color:var(--text2);background:rgba(255,159,10,.1);border-radius:10px;padding:6px 12px;box-shadow:inset 0 0 0 .5px rgba(255,159,10,.3)}
.hint button{color:var(--accent);font-weight:600;margin-left:4px}

/* messages */
.msg{display:flex;flex-direction:column;position:relative}
.msg.user{align-items:flex-end}
.msg.user .msg-acts{margin:2px 0 0;position:relative;z-index:2}
.msg.user .bubble{background:var(--accent);color:var(--accent-contrast, #fff);border-radius:19px 19px 5px 19px;padding:9px 14px;max-width:75%;font-size:15px;box-shadow:0 1px 3px rgba(10,132,255,.35);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user .bubble .utext{display:block}
.msg.user .bubble.clamp .utext{max-height:16.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.msg.user .bubble .more{display:block;margin-top:6px;border:0;border-radius:10px;padding:3px 10px;font:inherit;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.2);cursor:pointer}
.msg.user .bubble .more:hover{background:rgba(255,255,255,.3)}
.msg.user .bubble .more:focus-visible{outline:2px solid #fff;outline-offset:2px}
.steered{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--accent);margin:0 4px 3px 0;align-self:flex-end}
.msg.user .u-imgs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:75%;margin-bottom:8px}
.msg.user .u-img{display:block;max-width:min(240px,100%);max-height:192px;width:auto;height:auto;border-radius:18px;object-fit:cover;background:rgba(120,120,128,.18)}
.msg.user .u-imgs.multi .u-img{width:108px;height:108px;max-width:none}
.msg.user .u-img.gone{width:108px;height:108px}
.msg.user .bubble .ctxchip{display:inline-flex;margin:6px 4px 0 0;font-size:11.5px;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:10px;white-space:nowrap}
.attach{display:flex;align-items:center;gap:8px;margin-top:8px;background:rgba(255,255,255,.16);border-radius:10px;padding:6px 9px;font-size:12px;white-space:normal}
.attach .thumb{width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#8ec9f2,#3b6ea5 60%,#1d3a5f);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);object-fit:cover;flex:none}
.msg.assistant .bubble{background:var(--content);border-radius:var(--r-lg);padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06),inset 0 0 0 .5px var(--hairline);overflow-wrap:anywhere;min-width:0}
.msg.assistant .bubble:has(> .eden-pics:only-child),.msg.assistant .bubble:has(> .eden-pic-wait:only-child){background:transparent;padding:0;box-shadow:none;width:fit-content;max-width:100%}
.msg-acts{display:flex;gap:4px;opacity:0;transition:opacity .2s;margin-top:6px;justify-content:flex-end;align-items:center}
.msg.assistant .msg-acts{justify-content:flex-start}
.msg:hover .msg-acts,.msg:focus-within .msg-acts,.msg.last .msg-acts{opacity:1}
@media (hover:none){.msg-acts{opacity:1}}
.msg-acts .iconbtn{width:26px;height:26px;color:var(--text3)}
.msg-acts svg{width:14px;height:14px}
.msg-followups{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-width:min(640px,100%)}
.followup-btn{display:flex;align-items:center;gap:9px;width:100%;padding:7px 11px;border:0;border-radius:11px;background:transparent;color:var(--text2);font:inherit;font-size:13px;line-height:1.35;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 .5px var(--hairline);transition:background .15s ease,color .15s ease,transform .15s var(--spring)}
.followup-btn:hover,.followup-btn:focus-visible{background:var(--content);color:var(--text);transform:translateX(2px);outline:none}
.followup-ic{color:var(--text3);font-size:13px;line-height:1;flex:none}
.followup-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.followup-arr{width:12px;height:12px;color:var(--text3);opacity:0;transform:translateX(-2px);transition:opacity .15s ease,transform .15s ease;flex:none}
.followup-btn:hover .followup-arr,.followup-btn:focus-visible .followup-arr{opacity:.85;transform:none}
.edit-box{width:min(620px,100%);background:var(--content);border-radius:var(--r-lg);padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.06),inset 0 0 0 1px var(--accent)}
.edit-box textarea{width:100%;border:0;resize:none;background:none;font:inherit;color:var(--text);min-height:60px;max-height:300px;outline:none}
.edit-box .row{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.notice{font-size:11.5px;color:var(--text3);margin:6px 0 0 4px}
.notice.warn{color:var(--warn)}
.errbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:9px 12px;border-radius:var(--r-md);background:rgba(255,69,58,.08);box-shadow:inset 0 0 0 .5px rgba(255,69,58,.35);font-size:13px;color:var(--text)}
.errbox .ic{color:var(--danger)}
.errbox span{flex:1;min-width:0}
.stopped{font-size:11.5px;color:var(--text3);margin-top:8px}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:pulse 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

/* routing chip */
.msg-head{margin:0 0 6px 4px;display:flex;flex-direction:column;align-items:flex-start}
.chip-wrap{position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.route-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;color:var(--text2);padding:4px 10px;border-radius:20px;background:var(--glass2);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),0 1px 3px rgba(0,0,0,.06);transition:transform .2s var(--spring);max-width:100%;white-space:nowrap}
.route-chip:hover,.route-chip[aria-expanded="true"]{transform:translateY(-1px)}
.route-chip .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--done)}
.pdot.anthropic,.pdot.claude{background:#d08159}.pdot.openai,.pdot.gpt{background:#4d9f8a}.pdot.gemini{background:#5b7fd0}.pdot.kimi{background:#8b6fc0}
.chip-cost{color:var(--text3);font-family:ui-monospace,Menlo,monospace;font-size:10.5px}
.badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:12px;white-space:nowrap}
.badge.gemini{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 .5px rgba(10,132,255,.3)}
.badge.rules{color:var(--text2);background:rgba(120,120,128,.14);box-shadow:inset 0 0 0 .5px var(--hairline)}
.badge.pinned{color:var(--warn);background:rgba(255,159,10,.12)}
.rationale{font-size:11px;color:var(--text3);margin:4px 0 0 4px;max-width:560px}
/* chip popover: one floating layer, opened by click, hover-intent or keyboard */
.chip-pop{position:fixed;z-index:80;width:260px;border-radius:16px;padding:12px;opacity:0;transform:scale(.94) translateY(-4px);transform-origin:top left;pointer-events:none;visibility:hidden;transition:opacity .22s var(--spring),transform .22s var(--spring),visibility 0s linear .22s}
.chip-pop.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s var(--spring),transform .22s var(--spring)}
.cp-t{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.cp-why{font-size:11px;color:var(--text2);margin-top:8px;line-height:1.4}
.cp-link{font-size:11px;color:var(--accent);margin-top:6px;display:inline-block;font-weight:500}
.cp-row{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);margin-top:4px;gap:8px}
.cp-row b{font-weight:500;font-family:ui-monospace,Menlo,monospace;color:var(--text)}
.scatter{width:100%;display:block;color:var(--text)}
.scatter .pt{cursor:default}
.scatter-empty{font-size:11px;color:var(--text3);padding:12px 0}

/* thinking */
.thinking{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text3);padding:2px 0}
.thinking .chv{width:12px;height:12px;transition:transform .3s var(--spring)}
.thinking[aria-expanded="true"] .chv{transform:rotate(90deg)}
.thinking .think-ic{color:var(--accent);width:13px;height:13px}
.thinking.live .think-ic{animation:pulse 1.2s infinite}
.think-body{overflow:hidden;max-height:0;transition:max-height .38s var(--spring);font-size:12.5px;color:var(--text2);line-height:1.55}
.think-body>div{padding:6px 0 10px 19px;border-left:2px solid var(--sep);margin-left:5px;white-space:pre-wrap}

/* tool cards */
.tool{border-radius:var(--r-md);background:var(--content2);box-shadow:inset 0 0 0 .5px var(--hairline);margin:8px 0;overflow:hidden}
.tool-head{display:flex;align-items:center;gap:9px;width:100%;padding:8px 12px;font-size:13px;text-align:left}
.tool-head .ic{color:var(--text2);width:15px;height:15px}
.tool-head .tname{font-weight:600}
.tool-head .tsum{flex:1;min-width:0;color:var(--text3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-head .tchev{width:12px;height:12px;color:var(--text3);transition:transform .3s var(--spring)}
.tool.open .tool-head .tchev{transform:rotate(90deg)}
.tstat{width:8px;height:8px;border-radius:50%;flex:none}
.tstat.done{background:var(--run)}
.tstat.fail{background:var(--danger)}
.tstat.run{background:var(--accent);animation:pulse 1.4s infinite}
.tool-body{max-height:0;overflow:hidden;transition:max-height .38s var(--spring)}
.tool-body>div{padding:2px 12px 12px;font-size:12.5px}
.tool-body .lbl2{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);margin:8px 0 4px}
.codeblk{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;line-height:1.6;background:rgba(120,120,128,.09);border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:pre;color:var(--text);max-height:360px;overflow-y:auto}
.codeblk .ln{color:var(--text3);display:inline-block;min-width:26px;padding-right:8px;text-align:right;user-select:none}
.codeblk.err{color:var(--danger)}

/* diff */
.diff{border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 .5px var(--hairline);margin-top:2px}
.diff+.diff{margin-top:8px}
.diff-file{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;padding:6px 10px;color:var(--text);background:rgba(120,120,128,.08)}
.diff-hunk .hunk-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(120,120,128,.12);padding:5px 10px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--text2)}
.hunk-bar .hb-r{display:flex;gap:6px;align-items:center}
.hunk-actions{display:flex;gap:6px}
.cap{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:14px;background:var(--content);box-shadow:inset 0 0 0 .5px var(--hairline),0 1px 2px rgba(0,0,0,.06);transition:transform .15s var(--spring);white-space:nowrap}
.cap:hover{transform:translateY(-1px)}
.cap.ok{color:var(--run)}
.cap.rev{color:var(--danger)}
.cap.primary{background:var(--accent);color:var(--accent-contrast, #fff);box-shadow:0 1px 3px rgba(10,132,255,.4)}
.cap svg{width:12px;height:12px}
.diff pre{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;line-height:1.55;padding:8px 0;overflow-x:auto}
.diff .dl,.diff .al,.diff .cl{display:block;padding:0 12px;white-space:pre}
.diff .dl{background:rgba(255,69,58,.12);color:#c43c33}
[data-theme="dark"] .diff .dl{color:#ff8a80}
.diff .al{background:rgba(48,209,88,.13);color:#1d7a3a}
[data-theme="dark"] .diff .al{color:#6fe39a}
.diff .cl{color:var(--text3)}
.diff-hunk[data-state="reviewed"] pre{opacity:.55}
.diff-hunk[data-state="reviewed"] .hunk-actions,.diff-hunk[data-state="revert"] .hunk-actions,.chg-hunk[data-state="reviewed"] .hunk-actions,.chg-hunk[data-state="revert"] .hunk-actions{display:none}
.diff-hunk[data-state="revert"] pre{opacity:.4}
.hstate{display:none;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:12px;white-space:nowrap}
[data-state="reviewed"] .hstate.ok,[data-state="revert"] .hstate.rv{display:inline-flex;align-items:center;gap:4px}
.hstate.ok{color:var(--run);background:rgba(48,209,88,.14)}
.hstate.rv{color:var(--warn);background:rgba(255,159,10,.14)}
.hstate button{font-size:10px;color:var(--text2);text-decoration:underline}

/* permission card */
.perm{border-radius:var(--r-md);padding:12px 14px;margin:10px 0}
.perm .p-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.perm code{display:block;font-size:12px;background:rgba(120,120,128,.1);border-radius:7px;padding:7px 10px;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto}
.perm .p-acts{display:flex;gap:8px;flex-wrap:wrap}
.perm .p-mode{font-size:11px;color:var(--text3);margin-top:8px}
.perm.approved{opacity:.75}
.perm.approved .p-acts,.perm.approved .p-mode,.perm.approved code{display:none}

/* research card + sources */
.research{border-radius:var(--r-md);background:var(--content2);box-shadow:inset 0 0 0 .5px var(--hairline);padding:12px 14px;margin:0 0 8px}
.res-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.res-head .ic{color:var(--accent)}
.res-done{margin-left:auto;font-size:11px;font-weight:500;color:var(--run);white-space:nowrap}
.res-done.live{color:var(--accent)}
.res-rail{height:3px;border-radius:2px;background:rgba(120,120,128,.18);margin:9px 0 4px;overflow:hidden}
.res-rail i{display:block;height:100%;border-radius:2px;background:var(--accent);width:100%;transition:width .4s}
.res-rail.live i{width:40%;animation:rail 1.6s ease-in-out infinite}
@keyframes rail{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
sup.cite{color:var(--accent);font-weight:600;cursor:pointer;padding:0 1px;font-size:.72em}
.sources{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.src{font-size:11px;color:var(--text2);background:var(--content);padding:4px 9px;border-radius:12px;box-shadow:inset 0 0 0 .5px var(--hairline);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.research .src{background:var(--content)}
/* Q2: the verified research pipeline's steps, spend and report buttons; the report in the canvas */
.res-steps{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:3px;font-size:12px;color:var(--text2)}
.res-step{display:flex;align-items:baseline;gap:7px;line-height:1.35}
.res-dot{flex:none;width:14px;height:14px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-weight:700;box-shadow:inset 0 0 0 1px var(--hairline);transform:translateY(2px)}
.res-step.done .res-dot{background:var(--accent);color:#fff;box-shadow:none}
.res-step.error .res-dot{background:#d9534f;color:#fff;box-shadow:none}
.res-step.running .res-dot{box-shadow:inset 0 0 0 1.5px var(--accent);animation:pulse 1.2s ease-in-out infinite}
.res-step.skipped,.res-step.stopped{opacity:.65}
.res-spent{font-size:11px;color:var(--text3);margin:4px 0 0}
.res-acts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.res-acts .btn{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.art-report{position:absolute;inset:0;overflow:auto;padding:24px clamp(16px,4vw,40px);background:var(--content);color:var(--text)}
.art-report blockquote{margin:0 0 14px;padding:8px 12px;border-radius:10px;background:var(--content2);font-size:12px}
/* Q4: the first minute: a glass card under a new person's first answer (first-run.js) */
.fr-card{margin:10px 0 4px;padding:14px 16px 12px;border-radius:var(--r-md,14px);box-shadow:inset 0 0 0 .5px var(--hairline),0 6px 24px rgba(0,0,0,.08);font-size:13px;max-width:640px}
.fr-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.fr-head h3{margin:0;font-size:14px;font-weight:650}
.fr-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:600;width:100%}
.fr-x{margin-left:auto;font-size:18px;line-height:1;position:absolute;right:10px;top:8px}
.fr-card{position:relative}
.fr-row{margin:8px 0 0}
.fr-row b{display:block;font-size:12.5px;font-weight:600}
.fr-row p{margin:2px 0 0;color:var(--text2);line-height:1.45}
.fr-try{margin:12px 0 0}
.fr-try>b{font-size:12px;font-weight:600}
.fr-starters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px;margin:6px 0 0}
.fr-starter{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 10px;border-radius:10px;border:0;background:var(--content2);box-shadow:inset 0 0 0 .5px var(--hairline);color:inherit;font:inherit;cursor:pointer}
.fr-starter:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.fr-st-t{font-weight:600;font-size:12px}
.fr-st-x{font-size:11.5px;color:var(--text3);line-height:1.35}
.fr-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:12px;color:var(--text3)}
.fr-link{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.fr-link.quiet{color:var(--text3);font-weight:500;margin-left:auto}
.bubble>.sources .src{background:var(--content2)}
.src:hover{color:var(--accent)}

/* drafts pager */
.drafts{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);margin:0 6px;font-variant-numeric:tabular-nums}
.drafts button{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.drafts button:hover{background:rgba(120,120,128,.15)}
.drafts button:disabled{opacity:.3}
.drafts svg{width:11px;height:11px}
.md{transition:opacity .18s}

/* artifact link card */
.artlink{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);background:var(--content2);box-shadow:inset 0 0 0 .5px var(--hairline);padding:9px 12px;margin:8px 0;font-size:13px}
.artlink .ic{color:var(--accent)}
.artlink .grow{flex:1;min-width:0}
.artlink .grow b{font-weight:600}
.artlink .grow span{display:block;font-size:11px;color:var(--text3)}

/* ============ MARKDOWN ============ */
.md{font-size:15px;line-height:1.55}
.md>*:first-child{margin-top:0}
.md p,.md ul,.md ol,.md blockquote,.md table,.md .cblock,.md hr,.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{margin:10px 0}
.md h1{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.3px}
.md h2{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.2px}
.md h3{font-size:16px;font-weight:600}
.md h4,.md h5,.md h6{font-size:15px;font-weight:600}
.md ul,.md ol{padding-left:22px}
.md li{margin:3px 0}
.md li>ul,.md li>ol{margin:3px 0}
.md a{color:var(--accent);text-decoration:none}
.md a:hover{text-decoration:underline}
.md code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86em;background:rgba(120,120,128,.12);padding:1px 5px;border-radius:5px}
.md blockquote{border-left:3px solid var(--sep);padding:2px 0 2px 12px;color:var(--text2)}
.md hr{border:0;border-top:.5px solid var(--sep)}
.md table{border-collapse:collapse;font-size:13px;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{padding:6px 10px;border-bottom:.5px solid var(--sep);text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal;min-width:4.5em}
/* a table never breaks inside words (the bubble's overflow-wrap:anywhere made "Year" one letter per line on a phone): headers and short cells stay on one line, long cells wrap at spaces, and the table scrolls sideways in its own box */
.md th{white-space:nowrap}
.md td{max-width:22em}
.md th{font-weight:600;color:var(--text2);font-size:12px;border-bottom:1px solid var(--sep)}
.cblock{border-radius:10px;background:rgba(120,120,128,.09);box-shadow:inset 0 0 0 .5px var(--hairline);overflow:hidden}
.cb-head{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;font-size:11px;color:var(--text3);border-bottom:.5px solid var(--sep)}
.cb-head .lang{flex:1;font-family:ui-monospace,Menlo,monospace;text-transform:lowercase}
.cb-head button{font-size:11px;font-weight:500;color:var(--text2);padding:2px 8px;border-radius:7px;display:inline-flex;align-items:center;gap:4px}
.cb-head button:hover{background:rgba(120,120,128,.14);color:var(--text)}
.cb-head button.canvas{color:var(--accent)}
.cb-head svg{width:12px;height:12px}
.cblock pre{margin:0;padding:10px 12px;overflow:auto;max-height:440px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;line-height:1.55}
.cblock pre code{background:none;padding:0;font-size:inherit}

/* ============ ARTIFACT PANE ============ */
#artifact{width:46%;flex:none;display:none;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;min-width:280px}
#split.art-open #artifact{display:flex}
/* Set only by !IN_APP placement. The canvas is a sibling of #center, including its composer. */
html.canvas-column #app > #artifact{display:flex;align-self:stretch;min-height:0;min-width:0;width:52%;flex:0 1 auto}
html.canvas-column #app > #divider{display:flex;margin:0 -12px}
html.canvas-column #center{min-width:300px}
html.canvas-column #titlebar{overflow:hidden}
html.canvas-column #titlebar :is(.orb,#tbCtx,#btnPalette,#btnInspector,#btnBrowser){display:none}
@media (min-width:641px) and (max-width:1000px){
  html.canvas-column #app > #artifact{position:fixed;inset:12px;z-index:52;width:auto!important}
  html.canvas-column #app > #divider{display:none}
}
.art-head{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:none}
.art-head .a-t{font-size:13px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums}
.ver button{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text2)}
.ver button:hover{background:rgba(120,120,128,.15)}
.ver button:disabled{opacity:.3}
.ver svg{width:11px;height:11px}
.art-body{flex:1;min-height:0;overflow:auto;background:var(--content);position:relative}
.art-body iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.art-body .codeblk{margin:0;border-radius:0;max-height:none;min-height:100%;background:var(--content);padding:12px 14px}
.art-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text3)}
#artCap{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3);padding:8px 14px;background:var(--content);border-top:.5px solid var(--sep)}
#artCap span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btnAskSel{display:none}
#btnAskSel.show{display:inline-flex}
#btnEditSel{display:none}
#btnEditSel.show{display:inline-flex}
#editAsk{flex:1;display:flex;gap:6px;min-width:0}
#editAsk[hidden]{display:none}
#editAsk input{flex:1;min-width:0;font:inherit;font-size:12px;padding:4px 8px;border-radius:7px;border:.5px solid var(--sep);background:var(--content);color:var(--text)}
/* the code canvas: editor + console */
#artCode:not([hidden]){display:flex;flex-direction:column;overflow:hidden}
.ed-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:.5px solid var(--sep);flex:none}
.ed-bar select{font:inherit;font-size:12px;padding:3px 6px;border-radius:7px;border:.5px solid var(--sep);background:var(--content);color:var(--text)}
.ed-tabs{display:none}
.ed-run{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:var(--accent);color:#fff}
.ed-run .ic{width:11px;height:11px}
.ed-run.stop{background:var(--danger)}
.ed-run:disabled{opacity:.4}
.ed{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;line-height:1.6}
.ed-gut{flex:none;position:sticky;left:0;z-index:1;padding:12px 8px 12px 10px;text-align:right;color:var(--text3);background:var(--content);user-select:none;min-width:34px;font-variant-numeric:tabular-nums}
.ed-stack{position:relative;flex:1;min-width:max-content;min-height:100%}
.ed-hl,#artTa{margin:0;padding:12px 14px 12px 4px;font:inherit;line-height:inherit;white-space:pre;tab-size:2;letter-spacing:0;border:0}
.ed-hl{color:var(--text);pointer-events:none;min-height:100%}
#artTa{position:absolute;inset:0;width:100%;height:100%;resize:none;overflow:hidden;background:transparent;color:transparent;caret-color:var(--text);outline:none}
#artTa::selection{background:rgba(10,132,255,.28);color:transparent}
.tk-kw{color:#c53ab6}.tk-str{color:#c4511b}.tk-com{color:#6e7781;font-style:italic}.tk-num{color:#1c6fd6}.tk-fn{color:#6f42c1}
@media (prefers-color-scheme:dark){.tk-kw{color:#ff7ab2}.tk-str{color:#ff8170}.tk-com{color:#7f8c98}.tk-num{color:#d9c97c}.tk-fn{color:#b281eb}}
:root[data-theme="dark"] .tk-kw{color:#ff7ab2}:root[data-theme="dark"] .tk-str{color:#ff8170}:root[data-theme="dark"] .tk-com{color:#7f8c98}:root[data-theme="dark"] .tk-num{color:#d9c97c}:root[data-theme="dark"] .tk-fn{color:#b281eb}
.con-grip{flex:none;height:7px;cursor:row-resize;border-top:.5px solid var(--sep);background:var(--content);position:relative}
.con-grip::after{content:"";position:absolute;left:50%;top:2px;width:34px;height:3px;margin-left:-17px;border-radius:2px;background:var(--text3);opacity:.4}
body.row-resize{cursor:row-resize;user-select:none}
.con{flex:none;height:170px;display:flex;flex-direction:column;background:var(--content);min-height:56px}
.con-head{display:flex;align-items:center;gap:8px;padding:2px 10px 4px;font-size:11px;color:var(--text3)}
.con-t{font-weight:600;color:var(--text2)}
.con-stat.ok{color:var(--green,#2e9e4f)}.con-stat.bad{color:var(--danger)}.con-stat.busy{color:var(--accent)}
.con-out{flex:1;min-height:0;overflow:auto;margin:0;padding:4px 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text)}
.con-err{color:var(--danger)}
.con-in{flex:none;margin:4px 10px 8px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;padding:5px 8px;border-radius:7px;border:.5px solid var(--sep);background:rgba(120,120,128,.08);color:var(--text)}
@media (max-width:640px){
  .ed-tabs{display:flex}
  .con-grip{display:none}
  #artCode .con{display:none}
  #artCode.con-tab .ed{display:none}
  #artCode.con-tab .con{display:flex;flex:1;height:auto!important}
  .ed{font-size:13px}
  .con-in{font-size:16px}
}
.art-mobile-bar{display:none}

/* ============ SEGMENTED ============ */
.seg{position:relative;display:flex;background:rgba(120,120,128,.14);border-radius:9px;padding:2px;flex:none}
.seg button{position:relative;z-index:1;flex:1;font-size:12px;font-weight:500;color:var(--text2);padding:4px 10px;border-radius:7px;white-space:nowrap;transition:color .2s}
.seg button.on{color:var(--text)}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/var(--n,3));border-radius:7px;background:var(--glass2);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),0 1px 4px rgba(0,0,0,.14);transform:translateX(calc(var(--i,0)*100%));transition:transform .3s var(--spring)}
[data-theme="dark"] .seg-thumb{background:rgba(99,99,102,.7)}

/* ============ DRAWER (code activity, ⌘J) ============ */
/* stays in the flow above the composer at every width, so it never covers it */
#drawer{flex:none;max-height:0;overflow:hidden;border-radius:var(--r-lg);transition:max-height .38s var(--spring),visibility 0s linear .38s;max-width:904px;width:calc(100% - 24px);margin:0 auto;visibility:hidden}
#drawer.open{max-height:300px;visibility:visible;transition:max-height .38s var(--spring)}
.dr-head{display:flex;align-items:center;gap:4px;padding:8px 10px 0}
.dr-tab{font-size:12px;font-weight:500;color:var(--text2);padding:5px 11px;border-radius:8px}
.dr-tab.on{background:rgba(120,120,128,.16);color:var(--text)}
.dr-body{height:230px;overflow:auto;padding:10px 14px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;line-height:1.65;color:var(--text2);white-space:pre-wrap;overflow-wrap:anywhere}
.dr-body .p{color:var(--accent)}
.dr-body .ok{color:var(--run)}
.dr-body .bad{color:var(--danger)}

/* ============ INSPECTOR ============ */
#inspector{width:320px;flex:none;border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;
  transition:width .38s var(--spring),transform .38s var(--spring),opacity .25s ease,margin .38s var(--spring),visibility 0s linear 0s}
#inspector.closed{width:0;margin-left:-12px;opacity:0;pointer-events:none;visibility:hidden;
  transition:width .38s var(--spring),opacity .25s ease,margin .38s var(--spring),visibility 0s linear .38s}
.insp-in{width:320px;display:flex;flex-direction:column;min-height:0;flex:1}
.insp-tabs{padding:12px 12px 8px;display:flex;gap:6px;align-items:center}
.insp-tabs .seg{flex:1}
.insp-body{flex:1;overflow-y:auto;padding:4px 14px 16px}
.itab{display:none}
.itab.on{display:block}
.grab{display:none;width:36px;height:5px;border-radius:3px;background:rgba(120,120,128,.4);margin:8px auto 0;cursor:grab;touch-action:none}
.igrp{margin-top:14px}
.igrp .g-t{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.igrp .g-t button{font-size:11px;text-transform:none;letter-spacing:0;color:var(--accent);font-weight:500}
.icard{background:var(--content);border-radius:var(--r-md);padding:12px;box-shadow:inset 0 0 0 .5px var(--hairline),0 1px 3px rgba(0,0,0,.05)}
.icard.hl{animation:hl 1.2s var(--spring)}
@keyframes hl{0%{box-shadow:inset 0 0 0 1.5px var(--accent)}100%{box-shadow:inset 0 0 0 .5px var(--hairline)}}
.icard .muted,.muted{font-size:12px;color:var(--text3);line-height:1.45}
.tc-model{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.tc-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--text2);margin-top:6px}
.tc-row b{font-weight:500;font-family:ui-monospace,Menlo,monospace;color:var(--text)}
.tc-why{font-size:11.5px;color:var(--text3);line-height:1.45;margin-top:8px}
.tc-list{font-size:11px;color:var(--text3);margin-top:6px;padding-left:14px}
.lvl-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:6px}
.lvl-name{font-size:12px;font-weight:600;color:var(--accent);margin-top:8px}
.lvl-desc{font-size:11px;color:var(--text3);margin-top:3px;line-height:1.4}
.sl-row{margin-top:12px}
.sl-row .sl-lab{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:4px}
.sl-row .sl-lab b{color:var(--text);font-family:ui-monospace,Menlo,monospace;font-weight:500}
.sl-link{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text2)}
input[type=range].atl{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--v,50%),rgba(120,120,128,.25) var(--v,50%));outline-offset:4px}
input[type=range].atl::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25),inset 0 0 0 .5px rgba(0,0,0,.08);cursor:pointer}
input[type=range].atl::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.readout{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--text2);background:rgba(120,120,128,.1);border-radius:8px;padding:7px 10px;margin-top:12px;overflow-wrap:anywhere}
/* switch */
.switch{position:relative;display:inline-block;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;z-index:1}
.switch input:disabled{cursor:default}
.switch .tr{display:block;width:38px;height:23px;border-radius:12px;background:rgba(120,120,128,.3);transition:background .25s var(--spring);position:relative}
.switch .tr::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.switch input:checked+.tr{background:var(--run)}
.switch input:checked+.tr::after{transform:translateX(15px)}
.switch input:disabled+.tr{opacity:.45}
.switch input:focus-visible+.tr{outline:2px solid var(--accent);outline-offset:2px}
.prov{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:.5px solid var(--sep)}
.prov:last-child{border:0}
.prov .p-n{font-size:13px;font-weight:500}
.prov .p-c{font-size:10.5px;color:var(--text3)}
.prov .grow{flex:1;min-width:0}
.prov .excl{font-size:10.5px;color:var(--warn);font-weight:600;display:none}
.prov.off .excl{display:block}
.prov.off .p-n{color:var(--text3)}
.prov.na .p-c{color:var(--warn)}
select{width:100%;font:inherit;font-size:13px;color:var(--text);background:var(--content2);border:0;border-radius:9px;padding:8px 10px;box-shadow:inset 0 0 0 .5px var(--hairline);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
select:disabled{opacity:.55}
#overrideCard.pinned{box-shadow:inset 0 0 0 1.5px var(--accent),0 1px 3px rgba(0,0,0,.05)}
.pin-note{display:none;align-items:center;gap:6px;font-size:11px;color:var(--accent);font-weight:600;margin-top:8px}
#overrideCard.pinned .pin-note{display:flex}
.ov-eff{margin-top:8px}
/* plan */
.pitem{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;font-size:13px}
.pitem .box{width:19px;height:19px;border-radius:50%;border:1.5px solid rgba(120,120,128,.5);flex:none;display:flex;align-items:center;justify-content:center;transition:all .25s var(--spring);margin-top:1px}
.pitem .box svg{width:11px;height:11px;stroke:#fff;opacity:0;transform:scale(.4);transition:all .25s var(--spring)}
.pitem.done .box{background:var(--accent);border-color:var(--accent)}
.pitem.done .box svg{opacity:1;transform:scale(1)}
.pitem.done .pt{color:var(--text3);text-decoration:line-through}
.pitem.prog .pt{font-weight:500}
.pitem .live{margin-left:auto;font-size:10px;color:var(--accent);font-weight:600;flex:none}
/* changes */
.chg-head{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:.5px solid var(--sep)}
.chg-head span{font-size:12.5px;font-weight:600;flex:1;min-width:0}
.chg-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:.5px solid var(--sep);font-size:12.5px;width:100%;text-align:left}
.chg-row .grow{flex:1;min-width:0}
.chg-row .grow b{display:block;font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-row .grow span{font-size:11px;color:var(--text3)}
.chg-st{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;color:var(--warn);width:18px;flex:none}
.chg-n{font-family:ui-monospace,Menlo,monospace;font-size:11px;white-space:nowrap}
.chg-n .a{color:var(--run)}.chg-n .d{color:var(--danger)}
.chg-hunk{padding:8px 0;border-bottom:.5px solid var(--sep)}
.chg-hunk .hb{display:flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--text2);flex-wrap:wrap}
.chg-hunk .hb span.h{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-hunk .diff{margin-top:6px}
.chg-hunk[data-state="reviewed"] .diff{opacity:.5}
/* memory */
.mem-row{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:.5px solid var(--sep);font-size:13px}
.mem-row:last-child{border:0}
.mem-txt{flex:1;line-height:1.45}
.mem-note{font-size:11px;color:var(--text3);margin-top:10px;line-height:1.4}
.insp-input{width:100%;border:0;background:var(--content2);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline)}

/* ============ PALETTE ============ */
#palette{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(0,0,0,.12)}
#palette.open{display:flex}
.pal-box{width:min(560px,92vw);border-radius:18px;overflow:hidden;box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2);animation:palin .42s var(--spring)}
@keyframes palin{from{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}
.pal-in{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:.5px solid var(--sep)}
.pal-in input{flex:1;border:0;background:none;font:inherit;font-size:16px;color:var(--text);outline:none}
.pal-in input::placeholder{color:var(--text3)}
.pal-in span{font-size:11px;color:var(--text3)}
#palList{max-height:340px;overflow-y:auto;padding:6px}
.pal-grp{font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text3);padding:8px 10px 3px}
.pal-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13.5px;cursor:pointer}
.pal-it .t{flex:1 0 auto;max-width:70%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-it .ic{color:var(--text2);width:16px;height:16px}
/* the subtitle gives way first (a long one hid the title on a phone: R2-6) */
.pal-it .sub{margin-left:auto;font-size:11px;color:var(--text3);white-space:nowrap;flex:0 3 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pal-it.sel{background:var(--accent);color:#fff}
.pal-it.sel .ic,.pal-it.sel .sub{color:rgba(255,255,255,.8)}
.pal-empty{padding:18px;font-size:13px;color:var(--text3);text-align:center}
.pal-foot{display:flex;gap:14px;padding:8px 16px;font-size:10.5px;color:var(--text3);border-top:.5px solid var(--sep)}

/* ============ FLOATING PANELS / SHEETS / POPOVERS ============ */
#spacePanel{position:fixed;z-index:90;left:50%;top:50%;width:min(480px,92vw);max-height:72vh;max-height:72dvh;border-radius:20px;display:none;flex-direction:column;overflow:hidden;transform:translate(-50%,-50%)}
#spacePanel.open{display:flex;animation:spin .4s var(--spring)}
@keyframes spin{from{opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
.sp-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:.5px solid var(--sep);font-size:14px;font-weight:600}
.sp-head .t{flex:1}
.sp-body{overflow-y:auto;padding:12px 16px 16px}
.sp-search{width:100%;border:0;background:var(--content2);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline);margin-bottom:10px}
.sp-row{display:flex;gap:8px}
.sp-row .sp-search{flex:1}
.sb-res{padding:10px 0;border-bottom:.5px solid var(--sep)}
.sb-res:last-child{border:0}
.sb-res b{font-size:13px;font-weight:600;display:block}
.sb-res .m{font-size:11px;color:var(--text3)}
.sb-res p{font-size:12px;color:var(--text2);margin-top:4px;line-height:1.45;white-space:pre-wrap}
.sb-res .acts{display:flex;gap:6px;margin-top:6px}
.note-full{font-size:12.5px;color:var(--text2);line-height:1.5;white-space:pre-wrap;background:var(--content2);border-radius:10px;padding:10px 12px;max-height:40vh;overflow:auto;margin-top:6px}
.cal-day{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin:12px 0 2px}
.cal-day:first-child{margin-top:0}
.cal-ev{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:.5px solid var(--sep);font-size:13px}
.cal-ev .tm{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--accent);width:84px;flex:none}
.cal-ev .cl{margin-left:auto;font-size:11px;color:var(--text3)}
.rout-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:.5px solid var(--sep);font-size:13px}
.rout-row .grow{flex:1}.rout-row .grow span{display:block;font-size:11px;color:var(--text3)}
.sp-note{font-size:11.5px;color:var(--text3);margin-top:10px;line-height:1.45}
.sp-warn{font-size:12.5px;color:var(--text2);background:rgba(255,159,10,.1);border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 .5px rgba(255,159,10,.3);line-height:1.45}
.sp-warn b{display:block;margin-bottom:2px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12px;color:var(--text2)}
.field input,.field textarea{width:100%;border:0;background:var(--content2);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline);resize:vertical}
.field textarea{min-height:120px;line-height:1.45}
.dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;flex-wrap:wrap}
.dlg-acts .grow{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 14px;border-radius:9px;background:rgba(120,120,128,.14);color:var(--text)}
a.btn{text-decoration:none}
.btn:hover{background:rgba(120,120,128,.22)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--danger)}
.proj-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 8px;border-radius:9px;text-align:left;font-size:13px}
.proj-row:hover,.proj-row:focus-visible{background:rgba(120,120,128,.12)}
.proj-row .grow{flex:1;min-width:0}
.proj-row .grow span{display:block;font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* New code session: make a project or choose its folder, then the list; a path last (code.js projectPicker) */
.proj-new{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.proj-new .field{margin:0}
.proj-pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px;border-radius:var(--r-sm)}
.proj-pick .ic{width:16px;height:16px}
.proj-path{margin:4px 0 8px;font-size:12.5px;color:var(--text2)}
.proj-path summary{cursor:pointer;padding:4px 0}
.proj-path .key-edit{margin-top:6px}
#citePop{position:fixed;z-index:95;width:280px;border-radius:14px;padding:12px;display:none}
#citePop.open{display:block;animation:palin .3s var(--spring)}
#citePop b{font-size:12.5px;display:block;overflow-wrap:anywhere}
#citePop .u{font-size:11px;color:var(--accent);overflow-wrap:anywhere;display:block;margin-top:3px}
#citePop .acts{display:flex;gap:6px;margin-top:8px}
/* cost popover (composer meta) */
#costPop{position:fixed;z-index:85;width:240px;border-radius:14px;padding:12px;opacity:0;pointer-events:none;visibility:hidden;transform:translateY(4px);transition:opacity .22s var(--spring),transform .22s var(--spring),visibility 0s linear .22s}
#costPop.show{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition:opacity .22s var(--spring),transform .22s var(--spring)}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:34px;margin:8px 0 6px}
.sparkline i{flex:1;background:var(--accent);border-radius:2px;opacity:.55;min-height:2px}
.sparkline i:last-child{opacity:1}
.cp-f{font-size:11px;color:var(--text2);line-height:1.45}
/* sheets (settings, dialogs) */
.sheet{position:fixed;inset:0;z-index:105;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.18);padding:16px}
.sheet.open{display:flex}
.sheet-card{width:min(560px,100%);max-height:86vh;max-height:86dvh;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;animation:palin .4s var(--spring)}
.sheet-card.sm{width:min(440px,100%)}
.sheet-head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;font-size:15px;font-weight:600}
.sheet-head h2{font-size:15px;font-weight:600;flex:1}
.sheet-tabs{padding:0 16px 8px}
.sheet-body{overflow-y:auto;padding:4px 16px 18px}
.set-sec{margin-top:14px}
.set-sec h3{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.key-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--sep);flex-wrap:wrap}
.key-row:last-child{border:0}
.key-row .grow{flex:1;min-width:140px}
.key-row .p-n{font-size:13px;font-weight:500}
.key-row .p-c{font-size:11px;color:var(--text3)}
.key-row .p-c.ok{color:var(--run)}
.key-edit{display:flex;gap:6px;width:100%}
.key-edit input{flex:1;min-width:0;border:0;background:var(--content2);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline)}
.about p{font-size:13px;color:var(--text2);line-height:1.5;margin-bottom:6px}
.about b{color:var(--text)}

/* ============ TOAST / SCRIM ============ */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:120;padding:9px 18px;border-radius:20px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all .3s var(--spring);max-width:min(560px,92vw);text-align:center}
#toast.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
#toast button{color:var(--accent);font-weight:600;margin-left:10px}
#scrim{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.18);display:none}
#scrim.on{display:block}

/* ═════════════ Eden Code composer (ported from JARVIS V1 web, scoped to .jc) ═════════════ */
.jc {
  --c-canvas: 244 244 246; --c-surface: 255 255 255; --c-surface-muted: 248 248 250; --c-raised: 255 255 255;
  --c-border: 228 228 233; --c-border-strong: 208 208 214;
  --c-ink: 29 29 31; --c-ink-2: 88 88 94; --c-muted: 122 122 128; --c-subtle: 162 162 168;
  --c-fill: 229 229 234; --c-fill-2: 235 235 239; --c-fill-3: 242 242 245;
  --c-accent: 11 135 214; --c-accent-hover: 6 118 192; --c-accent-soft: 229 243 253; --c-accent-ink: 4 104 174; --c-glow: 56 168 232;
  --c-success: 36 164 78; --c-success-soft: 230 246 235; --c-success-ink: 22 128 58;
  --c-danger: 240 56 46; --c-danger-soft: 254 236 234; --c-danger-ink: 200 30 30;
  --c-warning: 255 149 0; --c-warning-soft: 255 243 224; --c-warning-ink: 190 86 0;
  --c-purple: 175 82 222; --c-purple-soft: 245 236 252; --c-purple-ink: 124 46 164;
  --glass-fill: rgba(255, 255, 255, 0.34); --glass-fill-strong: rgba(253, 253, 254, 0.84); --glass-pill: rgba(255, 255, 255, 0.9);
  --glass-blur: blur(26px) saturate(185%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 0.5px rgba(255, 255, 255, 0.55);
  --glass-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 12px 32px -8px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.035);
  --shadow-sheet: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 32px 80px -16px rgba(0, 0, 0, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.12);
  --shadow-control: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 1.5px rgba(0, 0, 0, 0.06);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  /* the later "clear glass" block (app.css 1978-1983) wins over 1553-1561 */
  --clear-fill: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.16));
  --clear-blur: blur(22px) saturate(175%);
  --clear-rim: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 0 0 0.5px rgb(255 255 255 / 0.45);
  --clear-edge: 0 0 0 0.5px rgb(0 0 0 / 0.09);
  --clear-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.20);
  --menu-fill: rgb(250 250 252 / 0.5);
  --pill-hover: rgb(var(--c-ink) / 0.06);
  --pill-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 0.5px 1px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.12);
  --cx-1: rgb(var(--c-accent)); --cx-2: rgb(var(--c-purple)); --cx-3: rgb(var(--c-success)); --cx-4: rgb(var(--c-warning)); --cx-5: rgb(var(--c-danger)); --cx-6: rgb(var(--c-muted));
  color: rgb(var(--c-ink)); font-family: var(--sans); font-size: 14px; letter-spacing: -0.006em;
}
[data-theme="dark"] .jc {
  --c-canvas: 17 17 19; --c-surface: 28 28 31; --c-surface-muted: 34 34 37; --c-raised: 40 40 44;
  --c-border: 52 52 57; --c-border-strong: 70 70 76;
  --c-ink: 245 245 247; --c-ink-2: 178 178 184; --c-muted: 140 140 147; --c-subtle: 102 102 108;
  --c-fill: 56 56 61; --c-fill-2: 48 48 53; --c-fill-3: 40 40 44;
  --c-accent: 38 150 234; --c-accent-hover: 64 166 240; --c-accent-soft: 15 44 68; --c-accent-ink: 112 190 248; --c-glow: 64 176 240;
  --c-success: 48 209 88; --c-success-soft: 16 51 28; --c-success-ink: 124 232 148;
  --c-danger: 255 69 58; --c-danger-soft: 59 21 19; --c-danger-ink: 255 179 174;
  --c-warning: 255 159 10; --c-warning-soft: 58 42 8; --c-warning-ink: 255 215 154;
  --c-purple: 191 90 242; --c-purple-soft: 48 24 64; --c-purple-ink: 220 170 255;
  --glass-fill: rgba(255, 255, 255, 0.045); --glass-fill-strong: rgba(40, 40, 44, 0.86); --glass-pill: rgba(255, 255, 255, 0.13);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.07);
  --glass-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.65);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 38px -8px rgba(0, 0, 0, 0.62);
  --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.075), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 32px 80px -16px rgba(0, 0, 0, 0.72);
  --shadow-control: 0 0 0 0.5px rgba(255, 255, 255, 0.13), 0 1px 1.5px rgba(0, 0, 0, 0.5);
  --clear-fill: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02));
  --clear-rim: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 0.5px rgb(255 255 255 / 0.1);
  --clear-edge: 0 0 0 0.5px rgb(0 0 0 / 0.55);
  --clear-shadow: 0 14px 36px -14px rgb(0 0 0 / 0.6);
  --menu-fill: rgb(44 44 50 / 0.42);
  --pill-hover: rgb(255 255 255 / 0.07);
  --pill-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 0.5px 1px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.55);
}
.jc button { font: inherit; color: inherit; }
.jc kbd { font: 500 11px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 5px; background: rgb(var(--c-surface)); color: rgb(var(--c-muted)); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.14), 0 1px 0 rgb(0 0 0 / 0.08); }

/* ── dock: queue, attachments, composer ── */
.jc-dock { flex: none; position: relative; padding: 0 0 0; }
.jc-column { max-width: 904px; width: calc(100% - 24px); margin: 0 auto; position: relative; }
.jc-todos { background: var(--glass-fill-strong); border-radius: 14px; box-shadow: var(--glass-rim), var(--glass-edge), 0 4px 14px -6px rgb(0 0 0 / 0.2); padding: 10px 14px; margin-bottom: 8px; }
.jc-attach { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.jc-thumb-img { position: relative; width: 56px; height: 56px; border-radius: 11px; overflow: hidden; box-shadow: var(--shadow-card); }
.jc-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.jc-thumb-img .jc-chip-x { position: absolute; top: 3px; right: 3px; }
.jc-composer { position: relative; border-radius: 22px; padding: 9px 10px 9px 12px; background: var(--clear-fill); backdrop-filter: var(--clear-blur); -webkit-backdrop-filter: var(--clear-blur); box-shadow: var(--clear-rim), var(--clear-edge), var(--clear-shadow); transition: box-shadow 200ms ease; }
.jc-composer:focus-within { box-shadow: var(--clear-rim), 0 0 0 1px rgb(var(--c-accent) / 0.42), 0 0 0 4px rgb(var(--c-glow) / 0.12), var(--clear-shadow); }
.jc-composer.drag { box-shadow: var(--clear-rim), 0 0 0 2px rgb(var(--c-accent) / 0.8), var(--clear-shadow); }
/* minimal top row: reactor toggle · text · steer · send */
.jc-composer-top { display: flex; align-items: flex-end; gap: 8px; }
.jc-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; }
.jc-composer-top textarea { flex: 1; width: 100%; resize: none; border: 0; outline: none; background: transparent; color: rgb(var(--c-ink)); font: inherit; font-size: 14.5px; line-height: 1.5; min-height: 24px; max-height: 220px; padding: 5px 0 5px; position: relative; z-index: 1; }
.jc-composer-top textarea:focus-visible { outline: none; }
.jc-composer-top textarea::placeholder { color: rgb(var(--c-subtle)); transition: color 120ms ease; }
.jc-input-wrap.has-ghost textarea::placeholder { color: transparent; }
.jc-ghost { position: absolute; inset: 0; padding: 5px 0; font: inherit; font-size: 14.5px; line-height: 1.5; color: rgb(var(--c-subtle)); pointer-events: none; white-space: pre; overflow: hidden; display: flex; align-items: center; z-index: 2; user-select: none; }
.jc-ghost[hidden] { display: none; }
.jc-ghost-typed { color: transparent; white-space: pre; flex: none; }
.jc-ghost-rest { color: rgb(var(--c-subtle)); overflow: hidden; text-overflow: ellipsis; white-space: pre; transition: color 120ms ease, transform 120ms ease; }
.jc-ghost.swiping .jc-ghost-rest { color: rgb(var(--c-ink) / calc(0.45 + 0.45 * var(--ghost-swipe, 0))); transform: translateX(calc(2px * var(--ghost-swipe, 0))); }
.jc-ghost-tab { pointer-events: auto; cursor: pointer; flex: none; margin-left: 8px; padding: 1px 6px; border-radius: 5px; font: 600 10.5px/1.35 var(--sans); letter-spacing: 0.01em; color: rgb(var(--c-ink-2)); background: rgb(var(--c-ink) / 0.08); box-shadow: inset 0 0 0 0.5px rgb(var(--c-ink) / 0.16); transition: background 140ms ease, color 140ms ease, opacity 120ms ease, transform 120ms ease; }
.jc-ghost-tab:hover, .jc-ghost.swiping .jc-ghost-tab { background: rgb(var(--c-accent) / 0.18); color: rgb(var(--c-accent-ink)); }
.jc-input-wrap.typing-ghost .jc-ghost-tab { opacity: 0; pointer-events: none; }
@media (hover: none) and (pointer: coarse), (max-width: 680px) {
  .jc-ghost-tab, .jc-popover.smart-pop .sm-tab { display: none !important; }
}
body.is-mobile .jc-ghost-tab, body.touch .jc-ghost-tab, body.is-mobile .sm-tab, body.touch .sm-tab {
  display: none !important;
}
.jc-composer-top .jc-round, .jc-composer-top .jc-steer, .jc-composer-top .jc-send { flex: none; margin-bottom: 1px; }
/* the reactor toggle — Eden Secretary blue, fills when the drawer is open */
.jc-orb { width: 30px; height: 30px; flex: none; margin-bottom: 1px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--c-accent)); background: rgb(var(--c-accent) / 0.13); box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.32); transition: background 200ms ease, box-shadow 200ms ease, transform 120ms ease; }
.jc-orb:hover { background: rgb(var(--c-accent) / 0.2); box-shadow: inset 0 0 0 1px rgb(var(--c-accent) / 0.45), 0 0 14px rgb(var(--c-glow) / 0.3); }
.jc-orb:active { transform: scale(0.9); }
/* Eden's mark on the input bar's left (as Eden Code has it): drawn in the orb's colour, white
   once the drawer is open; the reactor rings stay in the markup but aren't shown. */
.jc-orb .jc-reactor { display: none; }
.jc-orb::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='none' stroke='%23000' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211,93 314,90 444,236 343,353 249,352 333,251'/%3E%3Cpolygon points='252,235 160,346 282,491 186,494 52,350 151,234'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='none' stroke='%23000' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211,93 314,90 444,236 343,353 249,352 333,251'/%3E%3Cpolygon points='252,235 160,346 282,491 186,494 52,350 151,234'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.jc-orb:focus-visible { outline: 2px solid rgb(var(--c-accent) / 0.7); outline-offset: 1px; }
.jc-composer.expanded .jc-orb { color: #fff; background: rgb(var(--c-accent)); box-shadow: 0 0 16px rgb(var(--c-glow) / 0.45); }
/* drawer: unfolds the full control row out of the capsule */
.jc-composer-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.32, 0.72, 0.24, 1); width: 100%; }
.jc-composer.expanded .jc-composer-drawer { grid-template-rows: 1fr; }
.jc-composer-drawer-in { overflow: hidden; min-height: 0; }
.jc-composer:not(.expanded) .jc-composer-drawer { pointer-events: none; }
.jc-composer:not(.expanded) .jc-composer-drawer-in { visibility: hidden; transition: visibility 0s linear 300ms; }
.jc-composer .jc-composer-row { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 10px 0 2px; margin-top: 9px; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease 60ms, transform 260ms cubic-bezier(0.32, 0.72, 0.24, 1) 60ms; }
.jc-composer .jc-composer-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5px; background: linear-gradient(90deg, transparent, rgb(var(--c-ink) / 0.14), transparent); }
.jc-composer.expanded .jc-composer-row { opacity: 1; transform: none; }
/* the drawer's controls as pills: a tinted capsule with a hairline, the mode one in Eden Secretary blue */
.jc-composer-row > :is(.jc-pill, #jc-ctx, #jc-plus) { height: 26px; border: 0; border-radius: 999px; background: rgb(var(--c-ink) / 0.06); box-shadow: inset 0 0 0 0.5px rgb(var(--c-ink) / 0.11); color: rgb(var(--c-ink-2)); font-size: 12px; font-weight: 550; cursor: pointer; }
.jc-composer-row > .jc-pill { padding: 0 10px; gap: 6px; }
.jc-composer-row > #jc-plus { width: 26px; padding: 0; }
.jc-composer-row > #jc-ctx { display: inline-flex; padding: 0 9px 0 6px; gap: 5px; }
.jc-composer-row > #jc-ctx[hidden] { display: none; }
.jc-composer-row > #jc-ctx svg { width: 15px; height: 15px; }
.jc-composer-row > :is(.jc-pill, #jc-ctx, #jc-plus):is(:hover, [aria-expanded="true"]) { background: rgb(var(--c-ink) / 0.11); color: rgb(var(--c-ink)); }
.jc-composer-row > #jc-mode-btn { color: rgb(var(--c-accent-ink)); background: rgb(var(--c-accent) / 0.15); box-shadow: inset 0 0 0 0.5px rgb(var(--c-accent) / 0.4); }
.jc-composer-row > #jc-mode-btn:is(:hover, [aria-expanded="true"]) { color: rgb(var(--c-accent-ink)); background: rgb(var(--c-accent) / 0.22); }
.jc-composer-row > #jc-model::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--c-success)); box-shadow: 0 0 6px rgb(var(--c-success) / 0.8); }
.jc-composer-row > #jc-model.routed::before { background: rgb(var(--c-accent)); box-shadow: 0 0 6px rgb(var(--c-accent) / 0.8); }
.jc-spacer { flex: 1; min-width: 4px; }
.jc .jc-meta { font-size: 11.5px; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; background: transparent; cursor: pointer; padding: 0 6px; height: 26px; border-radius: 999px; font-family: var(--mono); }
.jc-meta:hover, .jc-meta[aria-expanded="true"] { background: var(--pill-hover); color: rgb(var(--c-ink)); }
.jc-meta:empty { display: none; }
.jc-ctx { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; }
.jc-ctx svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.jc-ctx circle { fill: none; stroke-width: 2.4; }
.jc-ctx .track { stroke: rgb(var(--c-ink) / 0.1); }
.jc-ctx .fill { stroke: rgb(var(--c-accent)); stroke-linecap: round; stroke-dasharray: 50.3; stroke-dashoffset: 50.3; transition: stroke-dashoffset 400ms ease; }
.jc-ctx.warn .fill { stroke: rgb(var(--c-warning)); }
.jc-ctx.full .fill { stroke: rgb(var(--c-danger)); }
button.jc-ctx { border: 0; background: transparent; color: rgb(var(--c-muted)); cursor: pointer; height: 30px; border-radius: 999px; font: inherit; font-size: 11px; transition: background-color 120ms ease, color 120ms ease; }
.jc-send { width: 32px; height: 32px; border: 0; border-radius: 16px; cursor: pointer; background: rgb(var(--c-accent)); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(var(--c-accent) / 0.3); flex: none; margin-left: 2px; transition: transform 120ms ease, background-color 120ms ease; }
.jc-send:hover { background: rgb(var(--c-accent-hover)); }
.jc-send:active { transform: scale(0.94); }
.jc-send:disabled { opacity: 0.45; cursor: default; }
.jc-send .i-stop { display: none; }
.jc-send.stop { background: rgb(var(--c-ink)); color: rgb(var(--c-surface)); }
.jc-send.stop .i-send { display: none; }
.jc-send.stop .i-stop { display: block; }
.jc-statusline { margin: 6px 4px 8px; font-size: 11.5px; color: rgb(var(--c-muted)); display: flex; gap: 10px; align-items: center; min-height: 15px; }
.jc-statusline .sp { flex: 1; }
.jc-popover { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-width: 560px; max-height: 300px; overflow-y: auto; z-index: 5; border-radius: 13px; padding: 5px; background: var(--glass-fill-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--glass-edge), var(--shadow-sheet); display: flex; flex-direction: column; }
.jc-popover button { display: flex; gap: 12px; align-items: baseline; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; color: rgb(var(--c-ink)); }
.jc-popover button strong { font-weight: 600; min-width: 84px; }
.jc-popover button code { font: 12.5px var(--mono); }
.jc-popover button span { color: rgb(var(--c-muted)); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-popover.smart-pop button { align-items: center; gap: 9px; }
.jc-popover.smart-pop .sm-ic { color: rgb(var(--c-accent)); font-size: 11.5px; flex: none; opacity: 0.85; }
.jc-popover.smart-pop .sm-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.jc-popover.smart-pop .sm-tx strong { min-width: 0; font-weight: 600; color: inherit; }
.jc-popover.smart-pop .sm-tx span { font-size: 13px; color: rgb(var(--c-muted)); }
.jc-popover.smart-pop button.active .sm-ic, .jc-popover.smart-pop button:hover .sm-ic,
.jc-popover.smart-pop button.active .sm-tx span, .jc-popover.smart-pop button:hover .sm-tx span { color: rgb(255 255 255 / 0.88); }
.jc-popover.smart-pop .sm-tab { flex: none; padding: 1px 6px; border-radius: 5px; font: 600 10px/1.35 var(--sans); color: rgb(var(--c-ink-2)); background: rgb(var(--c-ink) / 0.08); box-shadow: inset 0 0 0 0.5px rgb(var(--c-ink) / 0.14); }
.jc-popover.smart-pop button.active .sm-tab, .jc-popover.smart-pop button:hover .sm-tab { color: #fff; background: rgb(255 255 255 / 0.2); box-shadow: none; }
.jc-popover button.active, .jc-popover button:hover { background: rgb(var(--c-accent)); color: #fff; }
.jc-popover button.active span, .jc-popover button:hover span { color: rgb(255 255 255 / 0.8); }
.jc-popover .pop-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: rgb(var(--c-muted)); padding: 5px 10px 2px; }
/* menus: glass, items highlight in the accent */
.jc-menu { position: fixed; z-index: 110; min-width: 250px; max-width: 340px; max-height: min(460px, calc(100vh - 24px)); overflow-y: auto; border-radius: 16px; padding: 6px; background: var(--menu-fill); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); box-shadow: var(--clear-rim), var(--glass-edge), var(--shadow-sheet); display: flex; flex-direction: column; font-size: 13.5px; }
.jc-menu.rich { min-width: 292px; }
/* Rows keep their own height and the menu scrolls: a squeezed two-line row spilled into the next. */
.jc-menu > * { flex-shrink: 0; }
.jc-menu button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 9px; cursor: pointer; color: rgb(var(--c-ink)); transition: background-color 90ms ease; }
.jc-menu button:hover, .jc-menu button:focus-visible { background: rgb(var(--c-accent)); color: #fff; outline: none; }
.jc-menu button .k { margin-left: auto; font-size: 12px; opacity: 0.6; }
.jc-menu hr { border: 0; border-top: 0.5px solid rgb(var(--c-border)); margin: 4px 8px; }
.jc-menu .jc-menu-switch { justify-content: space-between; }
.jc-menu .sw { width: 32px; height: 19px; border-radius: 10px; background: rgb(var(--c-ink) / 0.16); position: relative; flex: none; justify-self: end; }
.jc-menu .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); transition: left 200ms var(--ease-spring); }
.jc-menu .sw.on { background: rgb(var(--c-success)); }
.jc-menu .sw.on::after { left: 15px; }
.jc-menu .jc-mi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 32px; }
.jc-menu .jc-mi:not(:has(> .ic:first-child)) { grid-template-columns: minmax(0, 1fr) auto; }
.jc-menu .jc-mi > .ic:first-child { color: rgb(var(--c-ink-2)); }
.jc-menu .mi-text { display: flex; flex-direction: column; min-width: 0; }
.jc-menu .mi-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-menu .mi-text small { font-size: 11.5px; line-height: 1.35; color: rgb(var(--c-muted)); white-space: normal; }
.jc-menu .jc-mi .ic-check { color: rgb(var(--c-accent)); }
.jc-menu .jc-mi .ic-chev { color: rgb(var(--c-muted)); }
.jc-menu .jc-mi:hover .ic, .jc-menu .jc-mi:focus-visible .ic, .jc-menu .jc-mi:hover .mi-text small, .jc-menu .jc-mi:focus-visible .mi-text small, .jc-menu .jc-mi[data-sub-open="1"] .ic { color: inherit; }
.jc-menu .jc-mi:hover .mi-text small, .jc-menu .jc-mi:focus-visible .mi-text small { opacity: 0.85; }
.jc-menu .jc-mi[data-sub-open="1"]:not(:hover):not(:focus-visible) { background: rgb(var(--c-ink) / 0.07); }
.jc-menu .jc-mi.danger .mi-label, .jc-menu .jc-mi.danger > .ic:first-child { color: rgb(var(--c-danger-ink)); }
.jc-menu .jc-mi.danger:hover { background: rgb(var(--c-danger)); }
.jc-menu .jc-mi.danger:hover .mi-label, .jc-menu .jc-mi.danger:hover > .ic { color: #fff; }
.jc-menu .jc-mi[disabled] { opacity: 0.45; cursor: default; }
.jc-menu .jc-mi[disabled]:hover { background: transparent; color: rgb(var(--c-ink)); }
.jc-menu .jc-mi[disabled]:hover .ic, .jc-menu .jc-mi[disabled]:hover small { color: rgb(var(--c-muted)); }
.jc-menu .jc-mi.muted .mi-label { opacity: 0.5; } /* a locked model (askeden.com: Claude without your key): opens Settings › Models & API keys */
.jc-menu-head { margin: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: rgb(var(--c-muted)); text-transform: uppercase; }
.jc-menu-foot { margin: 4px 10px 3px; padding-top: 6px; border-top: 0.5px solid rgb(var(--c-border)); font-size: 11.5px; color: rgb(var(--c-muted)); }
.jc-round { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgb(var(--c-ink-2)); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.jc-round:hover, .jc-round[aria-expanded="true"] { background: var(--pill-hover); color: rgb(var(--c-ink)); }
.jc-round:focus-visible, .jc-pill:focus-visible, .jc-send:focus-visible, .jc-meta:focus-visible, button.jc-ctx:focus-visible { outline: 2px solid rgb(var(--c-accent) / 0.7); outline-offset: 1px; }
.jc-pill { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: 30px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: transparent; color: rgb(var(--c-ink-2)); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
.jc-pill > span { overflow: hidden; text-overflow: ellipsis; }
.jc-pill:hover, .jc-pill[aria-expanded="true"] { background: var(--pill-hover); color: rgb(var(--c-ink)); }
.jc-pill .jc-chev-d { flex: none; opacity: 0.55; }
.jc-pill.ghost { padding: 0 9px; }
#jc-model { max-width: 180px; }
.jc-mode-ic { display: inline-flex; flex: none; }
#jc-mode-btn[data-mode="edits"] { color: rgb(var(--c-accent-ink)); }
#jc-mode-btn[data-mode="plan"] { color: rgb(var(--c-purple-ink)); }
#jc-mode-btn[data-mode="search"], #jc-mode-btn[data-mode="research"] { color: rgb(var(--c-accent-ink)); }
#jc-mode-btn[data-mode="research"] .jc-mode-ic { color: rgb(var(--c-glow)); filter: drop-shadow(0 0 4px rgb(var(--c-glow) / 0.5)); }
.jc-composer-row > #jc-mode-btn[data-mode="auto"] { color: rgb(var(--c-danger-ink)); background: rgb(var(--c-danger) / 0.09); box-shadow: inset 0 0 0 0.5px rgb(var(--c-danger) / 0.35); }
.jc-gauge { flex: none; }
.jc-gauge path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.jc-gauge .g-track { stroke: rgb(var(--c-ink) / 0.14); }
.jc-gauge .g-fill { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 44; transition: stroke-dashoffset 300ms var(--ease-spring); }
/* the router's ✦ chip (as in Model Router's <model-router-chip>, compact in the row) */
#jc-router .spark { color: rgb(var(--c-accent)); font-size: 12px; }
#jc-router .sub { color: rgb(var(--c-muted)); font-weight: 500; }
#jc-router.loading .spark, #jc-router.rating .spark { animation: jc-pulse 1s ease-in-out infinite; }
#jc-router { max-width: 230px; }
@keyframes jc-pulse { 50% { opacity: 0.3; } }
@media (max-width: 760px) {
  .jc-composer-row .jc-meta, .jc-composer-row .jc-ctx span { display: none; }
  #jc-model { max-width: 120px; }
  #jc-mode-label { max-width: 86px; }
  #jc-router { max-width: 120px; }
  #jc-router .sub { display: none; }
}
@media (max-width: 480px) { #jc-router { display: none !important; } }
/* attachments: pictures as thumbnails, files as chips */
.jc-chip-x { width: 18px; height: 18px; border: 0; border-radius: 9px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 12px; line-height: 18px; cursor: pointer; padding: 0; flex: none; }
.jc-file-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 260px; height: 36px; padding: 0 6px 0 10px; border-radius: 11px; background: var(--clear-fill); box-shadow: var(--clear-rim), var(--clear-edge); font-size: 12.5px; color: rgb(var(--c-ink)); }
.jc-file-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.jc-file-chip small { color: rgb(var(--c-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jc-file-chip.video { padding-left: 4px; }
.jc-file-chip .vthumb { width: 44px; height: 28px; object-fit: cover; border-radius: 7px; flex: none; background: rgb(var(--c-ink) / .08); }
.jc-file-chip .ic { color: rgb(var(--c-accent-ink)); flex: none; }
.jc-file-chip.ctx .ic { color: rgb(var(--c-purple-ink)); }
.jc-file-chip.persona .ic { color: rgb(var(--c-warning-ink)); }
.jc-file-chip .jc-chip-x { background: rgb(var(--c-ink) / 0.12); color: rgb(var(--c-ink)); }
/* follow-ups waiting for the current step */
.jc-queue { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.jc-queued { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--glass-edge); font-size: 13px; }
.jc-queued-kicker { font-size: 11px; font-weight: 600; color: rgb(var(--c-accent-ink)); }
.jc-queued-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--c-ink-2)); }
.jc-queued-x { width: 24px; height: 24px; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--c-muted)); cursor: pointer; }
.jc-queued-steer { flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: 12px; cursor: pointer; font-size: 11.5px; font-weight: 600; color: rgb(var(--c-accent-ink)); background: rgb(var(--c-accent) / 0.13); }
.jc-queued-steer:hover { background: rgb(var(--c-accent) / 0.2); }
.jc-queued-x:hover { background: rgb(var(--c-ink) / 0.07); color: rgb(var(--c-ink)); }
.jc-queued-wait { flex-wrap: wrap; }
.jc-queued-wait .jc-queued-kicker { flex: 1 0 100%; }
/* effort: a glass slider */
.jc-effort-pop { position: fixed; z-index: 111; width: 344px; max-width: calc(100vw - 16px); padding: 12px 14px 12px; border-radius: 16px; background: var(--menu-fill); -webkit-backdrop-filter: blur(40px) saturate(200%); backdrop-filter: blur(40px) saturate(200%); box-shadow: var(--clear-rim), var(--glass-edge), var(--shadow-sheet); color: rgb(var(--c-ink)); }
.ep-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 10px; }
.ep-head span { font-weight: 600; color: rgb(var(--c-accent-ink)); }
#ep-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 40%; }
#ep-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--c-accent)) 0 var(--fill), rgb(var(--c-ink) / 0.12) var(--fill) 100%); box-shadow: inset 0 0 0 0.5px rgb(var(--c-ink) / 0.08); }
#ep-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: rgb(255 255 255 / 0.92); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.22), inset 0 1px 0 #fff; }
#ep-range:focus-visible { outline: none; }
#ep-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgb(var(--c-glow) / 0.45), 0 2px 6px rgb(0 0 0 / 0.22); }
.ep-ticks { position: relative; height: 14px; margin: 6px 11px 0; font-size: 10.5px; color: rgb(var(--c-muted)); }
.ep-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ep-note { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: rgb(var(--c-ink-2)); min-height: 34px; }
.jc-slider { position: relative; --thumb: 28px; --p: 0.4; border-radius: 10px; height: 32px;
  background: linear-gradient(90deg, rgb(var(--c-ink) / 0.16) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)), rgb(var(--c-ink) / 0.07) 0);
  box-shadow: inset 0 0 0 0.5px rgb(var(--c-ink) / 0.08); }
.jc-dots { position: absolute; inset: 0 calc(var(--thumb) / 2); pointer-events: none; }
.jc-dots i { position: absolute; top: 50%; width: 4px; height: 4px; border-radius: 2px; background: rgb(var(--c-ink) / 0.32); transform: translate(-50%, -50%); }
.jc-slider #ep-range { position: relative; height: 32px; display: block; }
.jc-slider #ep-range::-webkit-slider-runnable-track { height: 32px; background: transparent; box-shadow: none; }
.jc-slider #ep-range::-webkit-slider-thumb { width: var(--thumb); height: 38px; margin-top: -3px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 2px 8px rgb(0 0 0 / 0.28); transition: transform 160ms var(--ease-spring); }
.jc-slider #ep-range:active::-webkit-slider-thumb { transform: scale(0.94); }
.jc-slider + .ep-ticks { margin: 8px 14px 0; }
/* the context window popover */
.jc-ctx-pop { width: 320px; padding: 14px 14px 12px; }
.cx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.cx-head span { font-weight: 600; }
.cx-head b { font-weight: 500; font-size: 12.5px; color: rgb(var(--c-ink-2)); font-variant-numeric: tabular-nums; }
.cx-bar { position: relative; display: flex; gap: 2px; height: 8px; margin: 10px 0 10px; border-radius: 4px; overflow: hidden; background: rgb(var(--c-ink) / 0.09); }
.cx-bar i { height: 100%; min-width: 3px; border-radius: 2px; }
.cx-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cx-legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; color: rgb(var(--c-ink-2)); }
.cx-legend i { width: 8px; height: 8px; border-radius: 4px; }
.cx-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-legend b { font-weight: 500; font-variant-numeric: tabular-nums; color: rgb(var(--c-muted)); }
.cx-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: rgb(var(--c-muted)); }
.cx-actions { display: flex; gap: 8px; margin-top: 12px; }
.jc .cx-btn { flex: 1; height: 30px; border: 0; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: rgb(var(--c-accent-ink)); background: rgb(var(--c-accent) / 0.13); transition: background-color 120ms ease, transform 120ms ease; }
.jc .cx-btn:hover { background: rgb(var(--c-accent) / 0.2); }
.jc .cx-btn:active { transform: scale(0.97); }
.jc .cx-btn.danger { color: rgb(var(--c-danger-ink)); background: rgb(var(--c-danger) / 0.12); }
.jc .cx-btn.danger.armed { color: #fff; background: rgb(var(--c-danger)); }
/* the Eden Secretary reactor */
.jc-reactor { display: block; flex: none; overflow: visible; }
.jc-reactor .halo { fill: none; stroke: #3fb8f2; stroke-opacity: 0.35; stroke-width: 1.2; }
.jc-reactor .ring { fill: none; stroke: #6fd0ff; stroke-width: 2.6; stroke-dasharray: 4.1 2.3; transform-origin: 20px 20px; }
.jc-reactor .inner { fill: none; stroke: #e6f8ff; stroke-opacity: 0.45; stroke-width: 0.8; }
.jc-reactor .core { fill: url(#jc-reactor-core); filter: drop-shadow(0 0 2px rgba(64, 176, 240, 0.9)); transform-origin: 20px 20px; }
.jc-reactor .shine { fill: #fff; opacity: 0.55; }
.jc-composer.busy .jc-reactor .ring { animation: jc-spin 3.2s linear infinite; }
@keyframes jc-spin { to { transform: rotate(360deg); } }
/* steering: a follow-up into the running Code step */
.jc-steer { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: rgb(var(--c-accent-ink)); background: rgb(var(--c-accent) / 0.13); box-shadow: inset 0 0 0 0.5px rgb(var(--c-accent) / 0.3); transition: background-color 120ms ease, transform 120ms ease; }
.jc-steer:hover { background: rgb(var(--c-accent) / 0.2); }
.jc-steer:active { transform: scale(0.95); }

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  #sidebar{width:64px}
  #side-split{display:none}
  #sidebar .lbl,#sidebar .sub,#sidebar .dots,#sidebar .sec-h .txt,#sidebar .sec-add,#sidebar .side-foot .grow,#sidebar .fake span,#sidebar .fake kbd,#sidebar .sec-sub,#sidebar .side-empty,#sidebar .sitem.child,#sidebar .pin-ic{display:none}
  #sidebar .side-search{flex-direction:column}
  #sidebar .sitem{justify-content:center;padding:8px 0}
  #sidebar .sec-h{justify-content:center;padding:12px 0 4px}
  #sidebar .fake{justify-content:center;padding:6px 0;width:100%}
  #sidebar .side-foot{flex-direction:column;gap:6px}
  #sidebar.closed{width:64px;margin-right:0;opacity:1;pointer-events:auto;visibility:visible}
  #sidebar.expanded{position:fixed;left:12px;top:12px;bottom:12px;width:260px;z-index:70;box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2)}
  #sidebar.expanded .lbl,#sidebar.expanded .sub,#sidebar.expanded .sec-h .txt,#sidebar.expanded .side-foot .grow,#sidebar.expanded .fake span,#sidebar.expanded .sec-sub,#sidebar.expanded .side-empty{display:block}
  #sidebar.expanded .dots,#sidebar.expanded .sec-add,#sidebar.expanded .sitem.child,#sidebar.expanded .fake kbd,#sidebar.expanded .pin-ic{display:flex}
  #sidebar.expanded .side-search{flex-direction:row}
  #sidebar.expanded .sitem{justify-content:flex-start;padding:6px 8px}
  #sidebar.expanded .sitem.child{padding-left:20px}
  #sidebar.expanded .sec-h{justify-content:space-between;padding:14px 8px 5px}
  #sidebar.expanded .fake{justify-content:flex-start;padding:6px 10px}
  #sidebar.expanded .side-foot{flex-direction:row}
  #inspector,#inspector.closed{position:fixed;right:12px;top:12px;bottom:12px;width:min(360px,92vw);margin:0;z-index:56;transform:translateX(115%);opacity:1;visibility:hidden;pointer-events:auto;box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2)}
  #inspector.open{transform:none;visibility:visible;transition:transform .38s var(--spring),visibility 0s}
  .insp-in{width:auto}
  .kbdhint{display:none}
}
@media(max-width:640px){
  #app{padding:8px;gap:8px}
  #center{gap:8px}
  #sidebar,#sidebar.closed{position:fixed;left:8px;top:8px;bottom:8px;width:min(300px,86vw);z-index:70;transform:translateX(-120%);visibility:hidden;margin:0;opacity:1}
  #sidebar .lbl,#sidebar .sub,#sidebar .sec-h .txt,#sidebar .side-foot .grow,#sidebar .fake span,#sidebar .sec-sub,#sidebar .side-empty{display:block}
  #sidebar .dots,#sidebar .sec-add,#sidebar .sitem.child,#sidebar .fake kbd,#sidebar .pin-ic{display:flex}
  #sidebar .side-search{flex-direction:row}
  #sidebar .sitem{justify-content:flex-start;padding:8px 8px}
  #sidebar .sitem.child{padding-left:20px}
  #sidebar .sec-h{justify-content:space-between;padding:14px 8px 5px}
  #sidebar .fake{justify-content:flex-start;padding:6px 10px}
  #sidebar .side-foot{flex-direction:row}
  #sidebar.open{transform:none;visibility:visible;transition:transform .38s var(--spring),visibility 0s}
  #btnHamburger{display:flex}
  #btnSidebarDesk{display:none}
  #inspector,#inspector.closed{left:8px;right:8px;top:auto;bottom:8px;width:auto;height:62vh;height:62dvh;border-radius:24px;transform:translateY(112%)}
  #inspector.open{transform:none;z-index:60} /* above #scrim (59), which closes it on a tap outside */
  #inspector.full{height:94dvh}
  #inspector.peek{height:30dvh}
  .grab{display:block}
  #artifact{position:fixed;inset:0;z-index:52;width:auto!important;min-width:0;border-radius:0}
  #split.art-open.chat-view #artifact{display:none}
  body.canvas-hidden #btnCanvasBack{display:flex}
  #divider{display:none!important}
  .art-mobile-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
  #titlebar{padding:6px 10px;gap:6px}
  #titlebar .tb-title{font-size:14px}
  .branch,.tb-tags{display:none}
  .ctxwrap .ctxl{display:none}
  .msg.user .bubble{max-width:88%}
  .sugg{grid-template-columns:1fr}
  #empty{margin-top:3vh}
  #empty h1{font-size:22px;line-height:28px}
  .sheet{padding:0;align-items:flex-end}
  .sheet-card,.sheet-card.sm{width:100%;border-radius:24px 24px 0 0;max-height:92dvh}
  #spacePanel{top:auto;bottom:0;left:0;width:100%;transform:none;border-radius:24px 24px 0 0;max-height:86dvh}
  #spacePanel.open{animation:sheetin .4s var(--spring)}
  .jc-column{width:100%}
  .jc-statusline{margin-bottom:2px}
}
@keyframes sheetin{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-transparency: reduce){
  .glass,.seg-thumb,.route-chip,.pal-box,.chip-pop,#costPop,.jc-menu,.jc-effort-pop,.jc-popover{background:#f2f2f7}
  [data-theme="dark"] .glass,[data-theme="dark"] .seg-thumb,[data-theme="dark"] .route-chip,[data-theme="dark"] .pal-box,[data-theme="dark"] .chip-pop,[data-theme="dark"] #costPop,[data-theme="dark"] .jc-menu,[data-theme="dark"] .jc-effort-pop,[data-theme="dark"] .jc-popover{background:#2c2c2e}
  .jc-composer{background:var(--content)}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* persona rows: the row opens a chat, the pencil edits */
.srow{display:flex;align-items:center;gap:2px}
.srow .sitem{flex:1;min-width:0}
.srow .srow-edit{width:24px;height:24px;opacity:0;transition:opacity .15s}
.srow:hover .srow-edit,.srow:focus-within .srow-edit{opacity:1}
@media (hover:none){.srow .srow-edit{opacity:1}}
@media(max-width:1100px){#sidebar:not(.expanded) .srow-edit{display:none}}
@media(max-width:640px){#sidebar .srow-edit{display:flex}}

/* the narrow sidebar (an icon rail, 641–1100px, not expanded): icons only. A section's header
   would leave just its chevron (a stray "⌄" between the icons), so sections are set apart by a
   hairline instead; every section shows its items (a closed one has no header to open here),
   sections with nothing to show go, and each item's title is its tooltip. A count (Tasks
   waiting for approval) sits on the icon's corner. The phone drawer and the expanded rail
   keep the full sidebar. */
@media(min-width:641px) and (max-width:1100px){
  #sidebar:not(.expanded) .sec-h{display:none}
  #sidebar:not(.expanded) .sec:not(:has(.sitem:not(.child))){display:none}
  #sidebar:not(.expanded) .sec~.sec{margin-top:6px;padding-top:6px;border-top:.5px solid var(--hairline)}
  #sidebar:not(.expanded) .sec.closed .sec-items{grid-template-rows:1fr;opacity:1;visibility:visible}
  #sidebar:not(.expanded) .sitem .tk-badge{position:absolute;top:1px;right:9px;min-width:15px;height:15px;padding:0 4px;font-size:9.5px}
}

/* mail */
#spacePanel.wide{width:min(720px,94vw)}
.mail-meta{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--text);margin-bottom:8px;overflow-wrap:anywhere}
.mail-meta .k{display:inline-block;min-width:62px;color:var(--text3);font-size:11.5px}
.mail-confirm .sp-warn{margin-top:10px}
.mail-draft .field textarea{min-height:180px}
/* Touch screens: no keyboard hints ("? for shortcuts", ⌘K, menu shortcuts, the palette's key legend),
   unless Eden's iPad app has a hardware keyboard attached (it marks the page .eden-kbd) */
@media (hover:none),(pointer:coarse){
  :root:not(.eden-kbd) :is(#cc-mode,.kbdhint,.pal-foot,.jc-menu-foot,.jc-mi .k,.side-search .fake kbd,#sidebar .fake kbd,#sidebar.expanded .fake kbd){display:none !important}
}

/* The sidebar's edge: drag to resize (double-click resets); kept per browser. */
#side-split{flex:none;width:12px;margin:0 -12px;align-self:stretch;cursor:col-resize;position:relative;z-index:5;touch-action:none}
#side-split::after{content:"";position:absolute;top:18px;bottom:18px;left:5px;width:2px;border-radius:2px;background:transparent;transition:background .15s}
#side-split:hover::after,#side-split.drag::after,#side-split:focus-visible::after{background:rgb(var(--c-accent) / .55)}
#sidebar.closed + #side-split{display:none}
body.side-resizing{cursor:col-resize;user-select:none}
body.side-resizing #sidebar{transition:none}

/* The route line (model, cost, where it ran, why) sits under the reply and shows on hover/focus;
   while it streams, on touch screens, or with its popover open, it stays shown. */
.msg.assistant > .msg-head{order:99;margin:6px 0 0 4px}
@media (hover:hover){
  .msg.assistant > .msg-head{opacity:0;max-height:0;overflow:hidden;margin-top:0;transition:opacity .18s ease,max-height .22s ease,margin .22s ease}
  .msg.assistant:hover > .msg-head,.msg.assistant > .msg-head:focus-within,.msg.assistant.streaming > .msg-head,.msg.assistant > .msg-head:has([aria-expanded="true"]){opacity:1;max-height:240px;overflow:visible;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.msg.assistant > .msg-head{transition:none}}

/* ── the Eden apps (apps-menu.js): Eden's mark in the sidebar's foot opens them ── */
.side-foot .orb.apps-mark{cursor:pointer;transition:transform .15s var(--spring),box-shadow .15s ease}
.side-foot .orb.apps-mark:hover{transform:scale(1.06)}
.side-foot .orb.apps-mark:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side-foot .orb.apps-mark[aria-expanded="true"]{transform:scale(.96)}
.apps-pop{position:fixed;z-index:1000;width:min(320px,calc(100vw - 16px));padding:12px;border-radius:var(--r-lg);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2);animation:apps-in .18s var(--spring)}
@keyframes apps-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.apps-head{display:flex;align-items:center;gap:10px;padding:2px 4px 10px}
.apps-head .orb{width:34px;height:34px}
.apps-head-txt{display:flex;flex-direction:column;line-height:1.25}
.apps-head-txt b{font-size:14px}
.apps-head-txt span{font-size:12px;color:var(--text3)}
.apps-sec{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text3);padding:10px 4px 6px;border-top:.5px solid var(--sep)}
.apps-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.apps-item{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px;border-radius:var(--r-md);color:var(--text);text-decoration:none}
.apps-item:hover,.apps-item:focus-visible{background:rgba(120,120,128,.12);outline:none}
.apps-icon{grid-row:1 / 3;width:40px;height:40px;border-radius:26%}
.apps-icon.eden-code{background:#0E2747 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='none' stroke='%23fff' stroke-width='22' stroke-linejoin='round'%3E%3Cpolygon points='211,93 314,90 444,236 343,353 249,352 333,251'/%3E%3Cpolygon points='252,235 160,346 282,491 186,494 52,350 151,234'/%3E%3C/g%3E%3C/svg%3E") center/60% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 8px rgba(14,39,71,.25)}
.apps-icon.jarvis{background:#0b1220 radial-gradient(circle at 36% 32%,#f2fbff 0%,#a4e4ff 9%,#3fb8f2 26%,#1677c9 42%,#0a3d84 56%,transparent 58%) center/100% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(10,61,132,.3)}
.apps-icon.edu{background:none center/cover no-repeat;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.12)}
.apps-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.apps-txt b{font-size:13.5px}
.apps-txt span{font-size:12px;color:var(--text2)}
.apps-cta{grid-column:2;justify-self:start;margin-top:5px;font-size:11.5px;font-weight:600;color:var(--accent)}
.apps-more{display:block;margin-top:6px;padding:8px;border-top:.5px solid var(--sep);text-align:center;font-size:12.5px;color:var(--text2);text-decoration:none}
.apps-more:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.apps-pop{animation:none}.side-foot .orb.apps-mark{transition:none}}

/* the sidebar: the menu stays put, only the chat list scrolls (app.js renderSidebar) */
.side-scroll{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.side-top{flex:none;max-height:22%;overflow-y:auto}
.side-mid{flex:1;min-height:0;display:flex;flex-direction:column}
.side-bottom{flex:none;max-height:32%;overflow-y:auto;border-top:.5px solid var(--hairline);margin-top:4px;padding-bottom:8px}
.sec.grow{display:flex;flex-direction:column;flex:1;min-height:170px}
.sec.grow .sec-items{flex:1;min-height:90px;display:block;overflow-y:auto;overscroll-behavior:contain}
.sec.grow .sec-items>div{overflow:visible}
.sec.grow.closed{flex:none;min-height:0}
.side-mid:has(.sec.grow.closed){flex:none}
.sec.grow.closed .sec-items{min-height:0;height:0;overflow:hidden}
.folder-row.drop .sitem{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.folder-row .f-chev{width:11px;height:11px;color:var(--text3)}
.folder-row .f-count{margin-left:auto;font-size:11.5px;color:var(--text3)}
.folder-row:hover .srow-edit,.folder-row .srow-edit:focus-visible{opacity:1}
.sitem.child.more-row,.sitem.more-row{color:var(--accent);font-size:12.5px}
.side-empty.child{padding-left:34px}
.sitem[draggable=true]{cursor:default}
.tidy-nudge{display:flex;align-items:center;gap:2px;margin:4px 0 6px;border-radius:var(--r-sm);background:var(--accent-soft)}
.tidy-go{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 8px;text-align:left;color:var(--accent);font-size:13px}
.tidy-go span{display:flex;flex-direction:column;min-width:0}.tidy-go small{font-size:11.5px;color:var(--text3)}
.tidy-x{width:24px;height:24px;font-size:16px;line-height:1}
@media(min-width:641px) and (max-width:1100px){
  #sidebar:not(.expanded) .side-scroll{display:block;overflow-y:auto}
  #sidebar:not(.expanded) .side-top,#sidebar:not(.expanded) .side-mid,#sidebar:not(.expanded) .side-bottom{display:contents}
  #sidebar:not(.expanded) .sec.grow .sec-items{overflow:visible;min-height:0}
  #sidebar:not(.expanded) .tidy-nudge{display:none}
}

/* the ? help button belongs to the title bar: with the inspector open it would sit among the inspector's tabs */
body:has(#inspector:not(.closed)) #btnHelp{display:none}

.tidy-nudge.run .tidy-go{cursor:default}
.tidy-bar{display:block;height:4px;border-radius:2px;background:rgba(120,120,128,.25);margin-top:6px;overflow:hidden}
.tidy-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .4s var(--spring)}

.side-mid>.tidy-nudge{margin:8px 0 2px;flex:none}

.sec.folders:not(.closed) .sec-items{max-height:42vh;overflow-y:auto;overscroll-behavior:contain}
.sec.folders:not(.closed) .sec-items>div{overflow:visible}
.side-mid>.sec.folders{flex:none}

/* the sidebar head: New chat, search, then the strip of everyday places and what is waiting */
.newchat{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:500}
.newchat:hover{filter:brightness(1.08)}
.newchat .ic{width:14px;height:14px}
.side-head{flex:none;padding:0 8px}
.apps-strip{display:flex;gap:4px;padding:2px 4px 8px;border-bottom:.5px solid var(--hairline)}
.apps-strip .ap{position:relative;flex:1;max-width:44px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text2);box-shadow:inset 0 0 0 .5px var(--hairline)}
.apps-strip .ap:hover{background:rgba(120,120,128,.14);color:var(--text)}
.apps-strip .ap-b{position:absolute;top:-5px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;line-height:15px;text-align:center}
.cont-card{display:flex;align-items:center;gap:9px;width:calc(100% - 8px);margin:8px 4px 2px;padding:7px 9px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);text-align:left;font-size:13px}
.cont-card span{display:flex;flex-direction:column;min-width:0}.cont-card b{font-weight:500}
.cont-card small{font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){
  #sidebar .newchat span,#sidebar .cont-card{display:none}
  #sidebar .apps-strip{flex-direction:column;align-items:center}
  #sidebar .apps-strip .ap{flex:none;width:36px}
  #sidebar.expanded .newchat span{display:inline}
  #sidebar.expanded .cont-card{display:flex}
  #sidebar.expanded .apps-strip{flex-direction:row;align-items:stretch}
  #sidebar.expanded .apps-strip .ap{flex:1;width:auto}
}
@media(max-width:640px){
  #sidebar .newchat span{display:inline}
  #sidebar .cont-card{display:flex}
  #sidebar .apps-strip{flex-direction:row;align-items:stretch}
  #sidebar .apps-strip .ap{flex:1;width:auto}
}

/* "Eden was updated · Reload" (page-update.js): a page left open, after a deploy, while a reply streams or a draft waits */
.eden-updated{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:121;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:20px;background:var(--content);color:var(--text);box-shadow:0 0 0 .5px var(--hairline,rgba(0,0,0,.12)),0 8px 24px rgba(0,0,0,.18);font-size:13px;font-weight:500;max-width:calc(100vw - 32px)}
.eden-updated .iconbtn{width:28px;height:28px;font-size:17px;line-height:1}
/* on a phone: under the title bar, not over its buttons (R2-15) */
@media (max-width:640px){.eden-updated{top:calc(env(safe-area-inset-top,0px) + 66px)}}

/* A deck's PDF in the iPhone app (deck.js appPdf): the app prints this page, so while
   .eden-printing is on, a print shows only the deck's print view (R2-8). */
#edenPrint{display:none}
@media print{
  html.eden-printing,html.eden-printing body{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;position:static!important;background:#fff!important}
  html.eden-printing body>:not(#edenPrint){display:none!important}
  html.eden-printing #edenPrint{display:block!important}
}
/* The ↓ button over the chat's bottom edge while you're scrolled up (app.js, like ChatGPT's) */
.jump-down{position:absolute;left:50%;bottom:10px;z-index:6;width:40px;height:40px;margin-left:-20px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.18),inset 0 0 0 .5px var(--hairline);cursor:pointer;opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:opacity .18s,transform .18s}
.jump-down.on{opacity:1;transform:none;pointer-events:auto}
.jump-down .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Which model answered: hidden until the reply is tapped (app.js); a lookup Eden made mid-answer, as one quiet line (render.js) */
.msg.assistant.meta-hidden>.msg-head{display:none}
.msg.tool-step{align-items:flex-start;margin:-4px 0 2px}
.tool-step-line{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3);padding:2px 4px}
.tool-step-line .ic{width:13px;height:13px}

/* Pictures Eden makes (image-mode.js) */
.eden-pics{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:6px 0 4px}
.msg.assistant .bubble:has(> .eden-pics:only-child) > .eden-pics,.msg.assistant .bubble:has(> .eden-pic-wait:only-child) > .eden-pic-wait{margin:0}
.eden-pic-fig{margin:0;width:fit-content;max-width:min(100%,520px);border-radius:14px;overflow:hidden;background:var(--surface-2,rgba(127,127,127,.08));box-shadow:inset 0 0 0 .5px rgba(127,127,127,.25)}
.eden-pic{display:block;width:100%;height:auto;cursor:zoom-in}
.eden-pic-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;font-size:12.5px}
.eden-pic-note{opacity:.7}
.eden-pic-btn{font:inherit;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:8px;border:0;cursor:pointer;background:rgba(127,127,127,.16);color:inherit}
.eden-pic-btn:hover{background:rgba(127,127,127,.26)}
.eden-pic-missing{padding:18px 14px;font-size:13px;opacity:.75}
.eden-pic-wait{display:flex;flex-direction:column;gap:8px;margin:6px 0;max-width:min(100%,520px);font-size:13px;opacity:.85}
.eden-pic-shimmer{aspect-ratio:1/1;max-width:320px;border-radius:14px;background:linear-gradient(110deg,rgba(127,127,127,.10) 30%,rgba(127,127,127,.22) 50%,rgba(127,127,127,.10) 70%);background-size:200% 100%;animation:eden-pic-shimmer 1.4s linear infinite}
.eden-vid-shimmer{aspect-ratio:16/9;max-width:440px}
.eden-vid{cursor:pointer;background:#000}
@keyframes eden-pic-shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.eden-pic-shimmer{animation:none}}
/* Files in a sent message: cards above the bubble, like ChatGPT's (render.js fileCard); also the composer's chips */
.msg.user .u-files{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:75%;margin-bottom:8px}
.u-file{display:flex;align-items:center;gap:10px;min-width:0;max-width:min(320px,100%);padding:8px 14px 8px 8px;border-radius:16px;background:var(--content);box-shadow:inset 0 0 0 .5px var(--hairline),0 1px 2px rgba(0,0,0,.06)}
.u-file .f-ic{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;object-fit:cover}
.u-file .f-ic .ic{width:18px;height:18px}
.u-file .f-tx{display:flex;flex-direction:column;min-width:0}
.u-file .f-nm{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-file .f-ty{font-size:12.5px;color:var(--text3)}
.jc-file-chip.card{height:52px;max-width:280px;padding:0 8px 0 6px;gap:10px;border-radius:14px;position:relative}
.jc-file-chip.card .f-ic{flex:none;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.f-ic{background:#7d8590}
.jc-file-chip.card .f-ic .ic{color:#fff;width:16px;height:16px}
.jc-file-chip.card .f-tx{display:flex;flex-direction:column;min-width:0}
.jc-file-chip.card .nm{font-weight:600;font-size:13.5px}

span.f-ic.ft-pdf{background:#f2545b}span.f-ic.ft-sheet{background:#22a95e}span.f-ic.ft-doc{background:#3b82f6}span.f-ic.ft-slides{background:#f59e0b}span.f-ic.ft-text{background:#8b5cf6}span.f-ic.ft-code{background:#475569}span.f-ic.ft-video{background:#111}
/* Attachments in Liquid Glass, like the composer (owner, 2026-10-15): clear fill, blur, rim, edge; the type squares get a sheen */
.u-file,.jc-file-chip.card{background:var(--clear-fill);backdrop-filter:var(--clear-blur);-webkit-backdrop-filter:var(--clear-blur);box-shadow:var(--clear-rim),var(--clear-edge),0 4px 14px rgb(0 0 0 / .08)}
.u-file .f-ic,.jc-file-chip.card .f-ic{background-image:linear-gradient(180deg,rgb(255 255 255 / .28),rgb(255 255 255 / 0) 55%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .45),inset 0 0 0 .5px rgb(255 255 255 / .25)}
.msg.user .u-img{box-shadow:var(--clear-rim),0 4px 14px rgb(0 0 0 / .1)}
.jc-thumb-img img{box-shadow:var(--clear-rim)}

/* Eden News inside the app (news-panel.js), in News' own look (site public/news/news.css: Apple News idiom) */
.nw{--nw-bg:#f2f2f7;--nw-card:#fff;--nw-label:#000;--nw-label2:rgba(60,60,67,.78);--nw-label3:rgba(60,60,67,.6);--nw-sep:rgba(60,60,67,.2);--nw-fill:rgba(120,120,128,.12);--nw-blue:#007aff;--nw-green:#248a3d;--nw-glass:rgba(250,250,252,.86);--nw-edge:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(255,255,255,.5),0 0 0 .5px rgba(0,0,0,.07);--nw-wash:radial-gradient(70% 380px at 0% 0%,rgba(0,122,255,.13),transparent 70%),radial-gradient(60% 340px at 100% 0%,rgba(175,82,222,.10),transparent 70%)}
[data-theme="dark"] .nw{--nw-bg:#000;--nw-card:#1c1c1e;--nw-label:#fff;--nw-label2:rgba(235,235,245,.78);--nw-label3:rgba(235,235,245,.6);--nw-sep:rgba(84,84,88,.6);--nw-fill:rgba(118,118,128,.24);--nw-blue:#0a84ff;--nw-green:#30d158;--nw-glass:rgba(36,36,38,.86);--nw-edge:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.08),0 0 0 .5px rgba(0,0,0,.6);--nw-wash:radial-gradient(70% 380px at 0% 0%,rgba(10,132,255,.22),transparent 70%),radial-gradient(60% 340px at 100% 0%,rgba(191,90,242,.16),transparent 70%)}
.nw{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--nw-wash),var(--nw-bg);background-repeat:no-repeat;color:var(--nw-label);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif}
.nw[hidden]{display:none}
@media (min-width:900px){.nw{left:auto;width:min(440px,40vw);border-left:.5px solid var(--nw-sep);box-shadow:-20px 0 50px -20px rgba(0,0,0,.35)}}
.nw-bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 4px}
.nw-bar-t{flex:1;font-size:15px;font-weight:600;color:var(--nw-label3)}
.nw-round{width:40px;height:40px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--nw-glass);box-shadow:var(--nw-edge);color:var(--nw-label);cursor:pointer;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.nw-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
.nw-hero{padding:10px 4px 0}
.nw-eyebrow{margin:0 0 2px;font:600 13px/1.2 -apple-system,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--nw-label3)}
.nw-title{margin:0;font:700 34px/1.1 -apple-system,"SF Pro Display",sans-serif;letter-spacing:.01em}
.nw-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 6px;padding:0 16px 6px}
.nw-tabs::-webkit-scrollbar{display:none}
.nw-tab{flex:none;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--nw-fill);color:var(--nw-label);font:500 15px -apple-system,sans-serif;cursor:pointer}
.nw-tab[aria-selected="true"]{background:var(--nw-label);color:var(--nw-bg);font-weight:600}
.nw-rail{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:6px -16px 4px;padding:4px 16px 8px}
.nw-follow{flex:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px 6px 14px;border-radius:999px;background:var(--nw-glass);box-shadow:var(--nw-edge)}
.nw-follow b{font-size:15px;font-weight:600;white-space:nowrap}
.nw-count{min-width:28px;height:28px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:var(--nw-blue);color:#fff;font:700 13px -apple-system,sans-serif;display:inline-flex;align-items:center;justify-content:center}
.nw-count.zero{background:var(--nw-fill);color:var(--nw-label3)}
.nw-sec{margin:16px 4px 10px;font:700 22px/1.2 -apple-system,"SF Pro Display",sans-serif;color:var(--nw-blue);display:flex;align-items:center;gap:4px}
.nw-sec::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg) translateY(1px);margin-left:4px;border-radius:1px}
.nw-card{background:var(--nw-card);border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px -8px rgba(0,0,0,.08)}
[data-theme="dark"] .nw-card{box-shadow:none}
.nw-lead{display:flex;flex-direction:column;width:100%;padding:0;border:0;overflow:hidden;text-align:left;color:inherit;font:inherit;cursor:pointer;margin-bottom:14px}
.nw-banner{position:relative;display:flex;align-items:flex-end;padding:14px;aspect-ratio:16/9;background:var(--nw-fill)}
.nw-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nw-kicker{position:relative;padding:6px 12px;border-radius:999px;font:600 12px -apple-system,sans-serif;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(255,255,255,.2);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.nw-body{display:flex;flex-direction:column;gap:7px;padding:14px 18px 16px}
.nw-h-lead{font:700 22px/1.2 -apple-system,"SF Pro Display",sans-serif}
.nw-pub{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.nw-more{font-weight:600;color:var(--nw-label3)}
.nw-dot{width:8px;height:8px;border-radius:50%;flex:none}
.nw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--nw-label3)}
.nw-check{display:inline-flex;align-items:center;gap:4px;color:var(--nw-green);font-weight:600}
.nw-check .ic{width:13px;height:13px}
.nw-list{padding:0 16px}
.nw-row{display:flex;align-items:flex-start;gap:14px;width:100%;padding:14px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nw-row+.nw-row{box-shadow:0 -.5px 0 var(--nw-sep)}
.nw-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nw-h{font:600 17px/1.25 -apple-system,sans-serif;letter-spacing:-.02em}
.nw-thumb{width:76px;height:76px;flex:none;border-radius:14px;object-fit:cover}
.nw-empty{padding:28px;text-align:center;color:var(--nw-label3);font-size:15px}
.nw-foot{margin:18px 4px 0;font-size:13px;line-height:1.4;color:var(--nw-label3);border-top:.5px solid var(--nw-sep);padding-top:12px}
.nw-story-pic{position:relative;margin:4px -16px 0;aspect-ratio:3/2;background:var(--nw-fill)}
.nw-story-pic img{width:100%;height:100%;object-fit:cover;display:block}
.nw-credit{position:absolute;right:14px;bottom:10px;color:rgba(255,255,255,.92);font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.nw-story-head{display:flex;flex-direction:column;gap:8px;padding:14px 4px}
.nw-story-title{margin:0;font:700 26px/1.15 -apple-system,"SF Pro Display",sans-serif}
.nw-summary{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.nw-summary p{margin:0;font-size:15px;line-height:1.4;color:var(--nw-label2)}
.nw-src{color:var(--nw-blue);font-weight:600;font-size:15px;text-decoration:none}
.nw-chips{display:flex;flex-wrap:wrap;gap:8px}
.nw-chip{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--nw-fill);color:var(--nw-label);font:15px -apple-system,sans-serif;cursor:pointer}
.nw-dock{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--nw-glass);box-shadow:var(--nw-edge),0 12px 34px -10px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.nw-dock button{min-width:76px;min-height:52px;border:0;border-radius:999px;background:none;color:var(--nw-label2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 10.5px -apple-system,sans-serif;cursor:pointer}
.nw-dock button .ic{width:20px;height:20px}
.nw-dock button.on{background:var(--nw-fill);color:var(--nw-blue)}

/* ============ THEME COLOR PICKER (RGB wheel + preselected colors) ============ */
.ecp-card{display:flex;flex-direction:column;gap:14px;padding:14px}
.ecp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ecp-head{display:flex;flex-direction:column;gap:2px;min-width:0}
.ecp-title{font-size:13.5px;font-weight:600;color:var(--text)}
.ecp-sub{font-size:12px;color:var(--text2);line-height:1.35}
.ecp-reset{border:0;border-radius:999px;padding:5px 12px;font:inherit;font-size:12px;font-weight:500;background:rgba(120,120,128,.14);color:var(--text);cursor:pointer}
.ecp-reset:hover{filter:brightness(.95)}
.ecp-presets{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.ecp-swatch{position:relative;width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--sw-color,#007aff);box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 0 0 1px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.12);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform .14s ease,box-shadow .14s ease}
.ecp-swatch:hover{transform:scale(1.09)}
.ecp-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--content,#fff),0 0 0 4px var(--sw-color,#007aff),inset 0 1px 1px rgba(255,255,255,.5);transform:scale(1.06)}
.ecp-swatch[data-color="#000000"]{box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.24),0 2px 5px rgba(0,0,0,.28)}
.ecp-swatch[data-color="#000000"][aria-checked="true"]{box-shadow:0 0 0 2px var(--content,#fff),0 0 0 4px rgba(140,140,150,.9),inset 0 1px 1px rgba(255,255,255,.45)}
.ecp-swatch svg{width:13px;height:13px;opacity:0;transform:scale(.7);transition:opacity .12s ease,transform .12s ease;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ecp-swatch[aria-checked="true"] svg{opacity:1;transform:scale(1)}
.ecp-wheel-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ecp-wheel-wrap{position:relative;width:132px;height:132px;flex:none;border-radius:50%;cursor:crosshair;touch-action:none;user-select:none;background:radial-gradient(circle closest-side,#fff 0%,rgba(255,255,255,0) 100%),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 6px 18px rgba(0,0,0,.14)}
.ecp-wheel-canvas{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none}
.ecp-wheel-thumb{position:absolute;width:20px;height:20px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ecp-current,#007aff);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.38),inset 0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ecp-controls{flex:1 1 210px;min-width:0;display:flex;flex-direction:column;gap:10px}
.ecp-preview-row{display:flex;align-items:center;gap:8px}
.ecp-preview-dot{width:28px;height:28px;flex:none;border-radius:8px;background:var(--ecp-current,#007aff);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(0,0,0,.14)}
.ecp-hex{width:92px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12.5px;font-weight:600;text-transform:uppercase;padding:5px 8px;border-radius:7px;border:0;background:rgba(120,120,128,.14);color:var(--text)}
.ecp-bright-row{display:flex;flex-direction:column;gap:4px}
.ecp-bright-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text2)}
.ecp-bright{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;margin:0;background:linear-gradient(90deg,#141418 0%,var(--ecp-pure,#007aff) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);cursor:pointer}
.ecp-bright::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.15)}
.ecp-rgb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ecp-rgb-field{display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:7px;background:rgba(120,120,128,.14);font-size:11.5px;font-weight:600;color:var(--text2)}
.ecp-rgb-field input{width:100%;min-width:0;border:0;padding:0;margin:0;background:transparent;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;font-weight:600;color:var(--text);text-align:right;outline:none}
.ecp-divider{border:0;border-top:.5px solid var(--sep);margin:2px 0}
.ecp-glass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media (max-width:540px){.ecp-glass-grid{grid-template-columns:1fr}}
.ecp-glass-opt{appearance:none;border:1px solid var(--hairline,rgba(120,120,128,.18));border-radius:12px;padding:10px 11px;background:rgba(120,120,128,.08);color:var(--text);display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;cursor:pointer;transition:border-color 140ms ease,background 140ms ease,transform 120ms ease,box-shadow 140ms ease}
.ecp-glass-opt:hover{background:rgba(120,120,128,.13)}
.ecp-glass-opt:active{transform:scale(.985)}
.ecp-glass-opt[aria-checked="true"],.ecp-glass-opt.active{border-color:var(--ecp-current,var(--accent,#007aff));box-shadow:0 0 0 1px var(--ecp-current,var(--accent,#007aff)),0 6px 16px -6px rgba(0,0,0,.25);background:color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 10%,rgba(120,120,128,.08))}
.ecp-glass-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;background:#05070c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ecp-glass-pill{position:relative;padding:4px 10px;border-radius:12px 12px 3px 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;font-weight:600;color:#fff;letter-spacing:.03em}
.ecp-glass-send{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ecp-glass-capsule .ecp-glass-pill,.ecp-glass-capsule .ecp-glass-send{background:linear-gradient(165deg,rgba(255,255,255,.34) 0%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 65%,transparent) 30%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 38%,transparent) 72%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 54%,transparent) 100%);box-shadow:inset 0 2px .5px rgba(255,255,255,.68),inset 0 -1px 1px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.24),0 4px 12px -2px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 55%,transparent)}
.ecp-glass-obsidian .ecp-glass-pill,.ecp-glass-obsidian .ecp-glass-send{background:radial-gradient(110% 130% at 12% 0%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 34%,transparent) 0%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 8%,transparent) 46%,rgba(6,8,12,.92) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1.5px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 92%,transparent),0 0 14px -2px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 52%,transparent)}
.ecp-glass-crystal .ecp-glass-pill,.ecp-glass-crystal .ecp-glass-send{background:radial-gradient(85% 95% at 90% 100%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 44%,transparent),transparent 68%),linear-gradient(135deg,rgba(255,255,255,.42) 0%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 32%,transparent) 48%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 18%,transparent) 100%);box-shadow:inset 0 2px 1.5px rgba(255,255,255,.85),inset 1.5px 0 1px rgba(255,255,255,.48),inset 0 0 0 1.2px rgba(255,255,255,.44)}
.ecp-glass-crystal .ecp-glass-pill{border-radius:999px 999px 4px 999px}
.ecp-glass-seaglass .ecp-glass-pill,.ecp-glass-seaglass .ecp-glass-send{background:radial-gradient(95% 130% at 50% 110%,rgba(255,255,255,.34) 0%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 90%,transparent) 28%,color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 62%,transparent) 68%,rgba(6,18,24,.84) 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.62),inset 0 0 12px rgba(255,255,255,.28),inset 0 -4px 12px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 65%,transparent),inset 0 0 0 1px rgba(255,255,255,.32),0 4px 14px -2px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 60%,transparent)}
.ecp-glass-classic{grid-column:1 / -1}
.ecp-glass-classic .ecp-glass-pill,.ecp-glass-classic .ecp-glass-send{background:var(--ecp-current,var(--accent,#007aff));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 3px color-mix(in srgb,var(--ecp-current,var(--accent,#007aff)) 36%,transparent)}
.ecp-glass-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ecp-glass-name{font-size:12.5px;font-weight:600;color:var(--text)}
.ecp-glass-desc{font-size:11px;color:var(--text2);line-height:1.3}

/* Shared activity thread (option 4): web only; regular chat and EVES use the same component. */
html:not(.eden-app) .activity-thread {
  --at-muted:#636369; --at-blue:#096bc7; --at-glass:rgba(255,255,255,.62); --at-rim:rgba(255,255,255,.8);
  margin:0 0 12px; min-width:0; color:var(--text); font-size:12px;
}
html:not(.eden-app)[data-theme="dark"] .activity-thread {
  --at-muted:#ababb2; --at-blue:#74b8ff; --at-glass:rgba(32,32,34,.72); --at-rim:rgba(255,255,255,.16);
}
html:not(.eden-app) .activity-glass {
  border:1px solid var(--hairline); border-radius:14px; background:var(--at-glass); overflow:hidden;
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--at-rim),0 8px 24px -16px rgba(10,80,140,.2);
}
html:not(.eden-app) .activity-head {
  width:100%; min-height:44px; padding:10px 13px; display:flex; align-items:center; gap:9px;
  border:0; background:none; color:var(--text); text-align:left; font:inherit; font-weight:600; cursor:pointer;
}
html:not(.eden-app) .activity-mark {
  width:20px; height:20px; border-radius:26%; flex:none;
  background:#0E2747 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%23ffffff' stroke='%23ffffff' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/58% no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(14,39,71,.22);
}
html:not(.eden-app)[data-theme="dark"] .activity-mark {
  background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%230E2747' stroke='%230E2747' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/58% no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.32);
}
@media (prefers-color-scheme:dark) {
  html:not(.eden-app):not([data-theme]) .activity-mark {
    background:#f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='43 81 410 422'%3E%3Cg fill='%230E2747' stroke='%230E2747' stroke-width='18' stroke-linejoin='round'%3E%3Cpolygon points='211%2C93 314%2C90 444%2C236 343%2C353 249%2C352 333%2C251'/%3E%3Cpolygon points='252%2C235 160%2C346 282%2C491 186%2C494 52%2C350 151%2C234'/%3E%3C/g%3E%3C/svg%3E") center/58% no-repeat;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(0,0,0,.32);
  }
}
html:not(.eden-app) .activity-title { flex:1; min-width:0; overflow-wrap:anywhere; }
html:not(.eden-app) .activity-time { color:var(--at-muted); font:11px ui-monospace,'SF Mono',Menlo,monospace; white-space:nowrap; }
html:not(.eden-app) .activity-chevron { color:var(--at-muted); font-size:18px; transition:transform .2s cubic-bezier(.32,.72,0,1); }
html:not(.eden-app) .activity-head[aria-expanded="true"] .activity-chevron { transform:rotate(90deg); }
html:not(.eden-app) .activity-list { list-style:none; margin:0; padding:0 14px 12px; }
html:not(.eden-app) .activity-step { position:relative; display:grid; grid-template-columns:14px minmax(0,1fr); column-gap:9px; padding:7px 0; color:var(--at-muted); }
html:not(.eden-app) .activity-step:not(:last-child)::after { content:''; position:absolute; left:5px; top:25px; bottom:-3px; width:1px; background:var(--hairline); }
html:not(.eden-app) .activity-step[data-status="active"] > .activity-label,
html:not(.eden-app) .activity-step[data-status="active"] > .activity-dot { color:var(--at-blue); font-weight:600; }
html:not(.eden-app) .activity-step[data-status="stopped"] > .activity-dot { color:var(--warn); }
html:not(.eden-app) .activity-dot { text-align:center; font-size:11px; }
html:not(.eden-app) .activity-label { min-width:0; overflow-wrap:anywhere; line-height:1.5; }
html:not(.eden-app) .activity-body { grid-column:2; min-width:0; padding-top:10px; color:var(--at-muted); }
html:not(.eden-app) .activity-body:empty { display:none; }
html:not(.eden-app) .activity-trace { max-height:180px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:8px 10px; border-left:2px solid var(--at-blue); border-radius:0 9px 9px 0; background:rgba(10,132,255,.06); line-height:1.6; }
html:not(.eden-app) .activity-footer { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--at-muted); }
html:not(.eden-app) .activity-sources .g-strip { margin:4px 0 0; }
html:not(.eden-app) .activity-thread[data-phase="over"] { margin-bottom:8px; }
html:not(.eden-app) .activity-thread[data-phase="over"] .activity-glass:has(> .activity-head[aria-expanded="false"]) {
  width:fit-content; max-width:100%; border-radius:10px;
  box-shadow:inset 0 1px 0 var(--at-rim),0 2px 8px -4px rgba(10,80,140,.14);
}
html:not(.eden-app) .activity-thread[data-phase="over"] .activity-head[aria-expanded="false"] {
  width:auto; min-height:28px; padding:4px 10px 4px 7px; gap:7px; font-size:11.5px;
}
html:not(.eden-app) .activity-thread[data-phase="over"] .activity-head[aria-expanded="false"] .activity-mark {
  width:15px; height:15px; border-radius:4px;
}
html:not(.eden-app) .activity-thread[data-phase="over"] .activity-head[aria-expanded="false"] .activity-chevron {
  font-size:15px;
}
html:not(.eden-app) .activity-thread[data-phase="over"]:has(.activity-head[aria-expanded="false"]) .activity-footer {
  display:none;
}
html:not(.eden-app) .activity-meta { flex:1; min-width:0; overflow-wrap:anywhere; }
html:not(.eden-app) .activity-stop { min-width:40px; min-height:40px; padding:0 8px; border:0; background:none; color:var(--at-muted); font:inherit; cursor:pointer; }
html:not(.eden-app) .activity-warning { margin:8px 0; font-size:12px; line-height:1.5; color:var(--at-muted); white-space:pre-line; overflow-wrap:anywhere; }
html:not(.eden-app) .activity-thread [hidden] { display:none !important; }
html:not(.eden-app) .activity-thread button:focus-visible { outline:2px solid var(--at-blue); outline-offset:-3px; }
@media (prefers-reduced-motion:reduce) { html:not(.eden-app) .activity-chevron { transition:none; } }
@media (prefers-reduced-transparency:reduce) { html:not(.eden-app) .activity-glass { background:var(--content); backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* ============ OPTION A LIVE PROGRESS + GLASS INPUT BUBBLE (Web only; never in iOS/Android app) ============ */
html:not(.eden-app)[data-chat-glass] .option-a-progress{
  display:flex;flex-direction:column;gap:8px;margin-bottom:10px;
}
html:not(.eden-app)[data-chat-glass] .stage-rail{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:7px;border-bottom:.5px solid var(--sep);
}
html:not(.eden-app)[data-chat-glass] .rail-pill{
  display:inline-flex;align-items:center;gap:5.5px;font-size:11px;font-weight:500;padding:3.5px 9px;border-radius:9px;
  background:rgba(255,255,255,.68);border:.5px solid rgba(0,0,0,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 3px rgba(0,0,0,.04);
  color:var(--text2);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .rail-pill{
  background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.22);
}
html:not(.eden-app)[data-chat-glass] .rail-pill.done{color:var(--text)}
html:not(.eden-app)[data-chat-glass] .rail-pill.done .rp-ic{color:var(--run,#30d158);font-weight:700}
html:not(.eden-app)[data-chat-glass] .rail-pill.live{
  background:var(--accent-soft,rgba(10,132,255,.14));border-color:rgba(10,132,255,.42);color:var(--text);font-weight:600;
}
html:not(.eden-app)[data-chat-glass] .rail-pill.live .rp-ic{color:var(--accent);animation:pulse 1.2s ease-in-out infinite}

/* Option A Auto-Open Frosted Reasoning Window */
html:not(.eden-app)[data-chat-glass] .auto-think-glass{
  border-radius:14px;overflow:hidden;
  background:rgba(240,247,255,.76);border:1px solid rgba(10,132,255,.32);
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 24px -8px rgba(10,132,255,.18);
  transition:all .26s var(--spring);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .auto-think-glass{
  background:rgba(14,22,36,.62);border-color:rgba(56,189,248,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 24px -8px rgba(14,165,233,.24);
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass.tucked{
  background:rgba(255,255,255,.58);border-color:var(--hairline);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 4px rgba(0,0,0,.04);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .auto-think-glass.tucked{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.22);
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-head{
  width:100%;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:.5px solid var(--sep);text-align:left;cursor:pointer;color:var(--text);
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass.tucked .ath-head{
  border-bottom:0;padding:6.5px 11px;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-left{
  display:flex;align-items:center;gap:7px;min-width:0;flex:1;font-size:12px;font-weight:600;color:var(--text);
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-spark{
  color:var(--accent);flex:none;width:13px;height:13px;animation:pulse 1.3s ease-in-out infinite;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass.tucked .ath-spark{
  color:var(--run,#30d158);animation:none;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-status{white-space:nowrap;flex:none}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-sep{color:var(--text3);flex:none}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-summary{
  color:var(--accent);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass.tucked .ath-summary{
  color:var(--text2);font-weight:500;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-right{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--text2);flex:none;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-viewport{
  max-height:156px;overflow-y:auto;padding:9px 12px;margin:8px 10px;
  font-size:12px;line-height:1.52;color:var(--text2);
  border-left:2.5px solid var(--accent);border-radius:0 9px 9px 0;
  background:rgba(255,255,255,.54);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .auto-think-glass .ath-viewport{
  background:rgba(0,0,0,.22);
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass .ath-viewport>.ath-trace{
  padding:0;margin:0;border:0;white-space:pre-wrap;
}
html:not(.eden-app)[data-chat-glass] .auto-think-glass.tucked:not(.force-open) .ath-viewport{
  max-height:0!important;padding:0;margin:0;opacity:0;border:0;overflow:hidden;
}

/* Eden Code Liquid Glass Input Bar (#deck-composer.jc-composer) on Web */
html:not(.eden-app)[data-chat-glass] .jc-composer{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(28px) saturate(185%);backdrop-filter:blur(28px) saturate(185%);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 24px -10px rgba(15,23,42,.10);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .jc-composer{
  background:rgba(26,28,34,.74);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px -10px rgba(0,0,0,.45);
}
html:not(.eden-app)[data-chat-glass] .jc-composer:focus-within{
  border-color:rgba(15,23,42,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 24px -10px rgba(15,23,42,.12);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .jc-composer:focus-within{
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px -10px rgba(0,0,0,.48);
}
html:not(.eden-app)[data-chat-glass] .jc-composer .jc-composer-row > :is(.jc-pill, #jc-ctx, #jc-plus){
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(15,23,42,.11),0 1px 3px rgba(0,0,0,.04);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .jc-composer .jc-composer-row > :is(.jc-pill, #jc-ctx, #jc-plus){
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 .5px rgba(255,255,255,.13),0 2px 6px rgba(0,0,0,.22);
}
html:not(.eden-app)[data-chat-glass] .jc-composer .jc-composer-row > #jc-mode-btn{
  color:rgb(var(--c-accent-ink));
  background:rgb(var(--c-accent) / .16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px rgb(var(--c-accent) / .42);
}
html:not(.eden-app)[data-chat-glass] .jc-composer .jc-round{
  background:rgb(var(--c-ink) / .065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgb(var(--c-ink) / .12);
}
html:not(.eden-app)[data-chat-glass] .jc-composer .jc-round:hover{
  background:rgb(var(--c-ink) / .12);
}
html:not(.eden-app)[data-chat-glass] .msg.user .bubble .ctxchip{
  background:rgba(10,132,255,.12);
  border:.5px solid rgba(10,132,255,.28);
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
}
html:not(.eden-app)[data-chat-glass][data-theme="dark"] .msg.user .bubble .ctxchip{
  background:rgba(6,9,16,.55);
  border:.5px solid rgba(56,189,248,.34);
  color:#38bdf8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* Eden on a phone: fixes that only show up at phone widths (the iOS app and mobile Safari).
   Loaded after app.css, so equal selectors here win. Phone-only on purpose: every rule sits
   under max-width:640px, app.css's own phone breakpoint. Owned by the iOS app work; app.css
   is not edited for these. The iPad app's rules (wider, and only in the app) are at the end. */

@media (max-width: 640px) {
  /* The page draws edge to edge (viewport-fit=cover), so keep the title bar out from under
     the status bar and Dynamic Island, and the composer above the home indicator. The
     status line under the composer is text only, so it may sit in the top of that zone. */
  #app {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, calc(env(safe-area-inset-bottom) - 12px));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  #sidebar, #sidebar.closed {
    top: max(8px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  #inspector, #inspector.closed { bottom: max(8px, env(safe-area-inset-bottom)); }
  .sheet-card, .sheet-card.sm, #spacePanel { padding-bottom: env(safe-area-inset-bottom); }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* "? for shortcuts" and the search field's ⌘K are keyboard hints; a phone has no
     keyboard shortcuts. */
  #cc-mode, #sidebar .fake kbd { display: none; }
  /* With the hint gone the status line is usually empty; give its height back (above the
     keyboard, it read as a gap). It comes back while there's a status (replying, temporary). */
  .jc-statusline:has(> #cc-status:empty) { display: none; }

  /* While a reply streams, Steer narrows the field and the placeholder wrapped onto a
     clipped second line. Keep it to one line. */
  .jc-composer-top textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* In the iOS app (the app adds .eden-app): WebKit turns the page's scroll view off when the
     body is overflow:hidden, which also turns off pull to refresh. The layout is exactly one
     screen tall, so overflow:visible only lets it bounce. */
  html.eden-app body { overflow: visible; }
}

/* iOS zooms the page into any text field under 16px when it's focused, and doesn't zoom
   back out. 16px fields stop that. */
@media (max-width: 640px) and (pointer: coarse) {
  .jc-composer-top textarea,
  .insp-input,
  .field input, .field textarea,
  .key-edit input,
  #overrideCard select, #classifierSel, #overrideSel, #overrideEff,
  .sheet-body input, .sheet-body select, .sheet-body textarea {
    font-size: 16px;
  }
  /* …but keep the composer's long placeholder at its old size so it still fits on one line. */
  .jc-composer-top textarea::placeholder { font-size: 14.5px; }

  /* WebKit draws the text caret of a field inside a backdrop-filter at the wrong height once
     the keyboard has scrolled the page: it floated a row or so above the composer, over the
     reply. While the composer is being typed in on a touch screen it's a solid card instead of
     glass, so the caret stays in the field. */
  .jc-composer:focus-within { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--content); }

  /* No Browser toggle in the composer on a phone (owner's call): /browse still starts one. It
     shows only while browse mode is on, so it can be switched off. */
  .jc-composer-row > .jc-browse:not(.on) { display: none; }

  /* Menus list keyboard shortcuts (⌘U, ⌘,) that a phone can't type. */
  .jc-menu .k { display: none; }

  /* An attachment's × was 18px, too small to hit with a finger; 26px plus a wider hit area. */
  .jc-chip-x { width: 26px; height: 26px; border-radius: 13px; line-height: 26px; font-size: 15px; position: relative; }
  .jc-thumb-img .jc-chip-x { position: absolute; top: 2px; right: 2px; }
  .jc-chip-x::after { content: ""; position: absolute; inset: -8px; }

  /* The title bar has eight buttons; on a 402pt iPhone the chat's title was cut to one letter
     ("N…"). The logo beside it goes (it's the sidebar's and the empty chat's too), the gaps and
     buttons tighten a little, and the title keeps room for a word or two (iOS sweep B14). */
  #titlebar { gap: 3px; }
  #titlebar > .orb { display: none; }
  #titlebar > .iconbtn { width: 28px; }
  #titlebar .tb-title { min-width: 64px; }
}
/* A 402pt iPhone with privacy on and the canvas icon: ten things in the bar, and the globe was cut
   off (R2-7). The least used go into the ⋯ menu (app.js narrowItems): Help and Show canvas here, the
   inspector too on the smallest phones. */
@media (max-width: 430px) {
  #titlebar > #btnHelp, body.canvas-hidden #titlebar > #btnCanvasBack { display: none; }
}
@media (max-width: 380px) {
  #titlebar > #btnInspector { display: none; }
}

/* Eden in the iPad app (the app adds .eden-app, and .eden-ipad on an iPad), wider than a
   phone: full screen, Split View, Slide Over and Stage Manager windows. Below 641px the phone
   rules above apply (the drawer). */
@media (min-width: 641px) {
  /* Edge to edge here too: the title bar clear of the status bar, the composer of the home
     indicator. */
  html.eden-app #app {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  html.eden-app #sidebar.expanded,
  html.eden-app #inspector, html.eden-app #inspector.closed {
    top: max(12px, env(safe-area-inset-top));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}
/* From 820px (an 11-inch iPad in portrait, two thirds of a 13-inch one in landscape) there's
   room for the whole sidebar beside the chat: the icon rail's expanded state docks instead of
   floating over the chat, with no scrim. app.js keeps it open unless it's closed with ⌘B or
   the sidebar button (then it's the rail). Past 1100px it's the wide layout's own sidebar. */
@media (min-width: 820px) and (max-width: 1100px) {
  html.eden-ipad #sidebar.expanded {
    position: static;
    z-index: auto;
    box-shadow: inset 0 .5px 0 var(--rim), inset 0 0 0 .5px var(--hairline), var(--sh1);
  }
  html.eden-ipad #scrim { display: none; }
}

/* The iOS app: no pinch or double-tap zoom (it's an app, not a page); the browser panel's own page zoom is separate. */
html.eden-app, html.eden-app body { touch-action: pan-x pan-y; }

/* The iPhone and iPad apps (.eden-app): no Browser toggle in the composer either, at any width
   (the app has its own browser); shown only while browse mode is on, to switch it off. */
html.eden-app .jc-composer-row > .jc-browse:not(.on) { display: none; }

/* Eden's calendar (calendar.js): a page in the main column on wide windows (the chat can open beside it as a right
   panel), a large Liquid Glass surface over the chat on narrower ones; on Atelier's
   tokens from app.css (never edited from here). Events are tinted with their calendar's
   colour (--c) the way Apple Calendar draws them; today is the accent, the now-line is red. */

#calSurface{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.14)}
#calSurface[hidden]{display:none}
.cal{--cal-side:232px;--cal-gut:52px;position:relative;width:min(1320px,100%);height:min(900px,100%);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2);animation:calin .42s var(--spring)}
@keyframes calin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.cal button{font:inherit}

/* header */
.cal-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px 16px;border-bottom:.5px solid var(--sep);flex:none;min-width:0}
.cal-titlewrap{display:flex;align-items:center;gap:9px;min-width:0}
.cal-titlewrap .cal-ico{color:var(--accent)}
.cal-title{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-busy{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);opacity:0;transition:opacity .2s;flex:none}
.cal-busy.on{opacity:1;animation:calspin .8s linear infinite}
@keyframes calspin{to{transform:rotate(360deg)}}
.cal-sp{flex:1}
.cal-seg{width:360px}
.cal-nav{display:flex;align-items:center;gap:2px;background:rgba(120,120,128,.1);border-radius:10px;padding:2px}
.cal-nav .iconbtn{width:28px;height:28px}
.cal-today{padding:4px 12px;font-size:12.5px;background:var(--glass2);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),0 1px 3px rgba(0,0,0,.08)}
.cal-acts{display:flex;align-items:center;gap:6px}
.cal-acts .cap{padding:5px 11px;font-size:12px}
.cal-side-btn{display:none}

/* body */
.cal-body{flex:1;min-height:0;display:flex;position:relative}
.cal-side{width:var(--cal-side);flex:none;overflow-y:auto;padding:12px 12px 16px;border-right:.5px solid var(--sep);display:flex;flex-direction:column;gap:14px}
.cal-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:color-mix(in srgb,var(--content) 62%,transparent)}
.cal-view{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}

/* mini month */
.cal-mini-head{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.cal-mini-head b{flex:1;font-size:13px;font-weight:600;padding-left:4px}
.cal-mini-head .iconbtn{width:24px;height:24px}
.cal-mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cal-mini-dow{font-size:10px;font-weight:600;color:var(--text3);padding:3px 0}
.cal-mini-day{position:relative;height:27px;font-size:11.5px;font-variant-numeric:tabular-nums;border-radius:50%;color:var(--text);aspect-ratio:1;justify-self:center;width:27px}
.cal-mini-day:hover{background:rgba(120,120,128,.14)}
.cal-mini-day.other{color:var(--text3)}
.cal-mini-day.inrange{background:var(--accent-soft);border-radius:7px;width:100%}
.cal-mini-day.sel{background:rgba(120,120,128,.22);font-weight:600}
.cal-mini-day.today{background:var(--accent);color:#fff;font-weight:700}
.cal-mini-day.dot::after{content:"";position:absolute;left:50%;bottom:2px;width:3.5px;height:3.5px;margin-left:-1.75px;border-radius:50%;background:var(--text3)}
.cal-mini-day.today.dot::after{background:#fff}

/* calendars list */
.cal-group{display:flex;flex-direction:column;gap:1px}
.cal-group-h{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text3);padding:2px 4px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-cal{position:relative;display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:8px;font-size:13px;cursor:pointer;min-width:0}
.cal-cal:hover{background:rgba(120,120,128,.1)}
.cal-cal input{position:absolute;opacity:0;width:1px;height:1px}
.cal-check{width:15px;height:15px;border-radius:4.5px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--c);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12);color:#fff;transition:background .15s,box-shadow .15s}
.cal-check svg{stroke-width:3;opacity:1;transition:opacity .15s}
.cal-cal input:not(:checked)+.cal-check{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.cal-cal input:not(:checked)+.cal-check svg{opacity:0}
.cal-cal input:focus-visible+.cal-check{outline:2px solid var(--accent);outline-offset:2px}
.cal-cal .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-cal .ro{color:var(--text3)}
.cal-note{display:flex;flex-direction:column;gap:5px;align-items:flex-start;font-size:11.5px;line-height:1.4;color:var(--text3);padding:6px 6px 8px}
.cal-note b{color:var(--text);font-size:12px;font-weight:600}
.cal-note.warn{background:rgba(255,159,10,.1);border-radius:10px;box-shadow:inset 0 0 0 .5px rgba(255,159,10,.3);padding:8px 10px;color:var(--text2);margin-bottom:4px}
.cal-note .cap{margin-top:2px}

/* banners, empty, loading, connect */
.cal-banners:empty{display:none}
.cal-banner{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 10px 8px 12px;border-radius:12px;font-size:12.5px;background:var(--accent-soft);box-shadow:inset 0 0 0 .5px rgba(10,132,255,.3)}
.cal-banner span{flex:1}
.cal-banner .ic{color:var(--accent)}
.cal-main.blocked .cal-view{filter:blur(2px) saturate(.6);opacity:.45;pointer-events:none}
.cal-connect{position:absolute;z-index:6;left:50%;top:44%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));text-align:center;padding:22px 22px 18px;border-radius:20px;background:var(--glass2);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh1)}
.cal-connect-ico{width:48px;height:48px;border-radius:14px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft)}
.cal-connect h3{font-size:17px;font-weight:700;letter-spacing:-.2px}
.cal-connect p{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.45}
.cal-connect-acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.cal-connect .cal-connect-why{font-size:11.5px;color:var(--text3)}
.cal-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;font-size:13px;color:var(--text3);padding:8px 14px;border-radius:20px;background:var(--glass2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 .5px var(--hairline)}
.cal-loading{position:absolute;left:50%;top:42px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);padding:6px 13px;border-radius:20px;background:var(--glass2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),0 2px 10px rgba(0,0,0,.08);pointer-events:none}
.cal-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:calspin .8s linear infinite}

/* event chips (month, all-day strip) */
.cal-chip{--c:#8e8e93;position:relative;z-index:2;display:flex;align-items:center;gap:5px;min-width:0;height:19px;margin:1px 3px;padding:0 6px;border-radius:5px;font-size:11.5px;line-height:19px;text-align:left;color:var(--text);transition:filter .15s,transform .15s var(--spring)}
.cal-chip:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
.cal-chip .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.cal-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.cal-chip .tm{flex:none;color:var(--text3);font-size:10.5px;font-variant-numeric:tabular-nums}
.cal-chip.bar{background:color-mix(in srgb,var(--c) 24%,var(--content) 40%);color:color-mix(in srgb,var(--c) 58%,var(--text))}
.cal-chip.bar:hover{background:color-mix(in srgb,var(--c) 34%,var(--content) 30%)}
.cal-chip.bar .t{font-weight:600}
.cal-chip.cont-l{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.cal-chip.cont-r{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
.cal-chip[aria-expanded="true"],.cal-tev.sel{outline:2px solid var(--c);outline-offset:0}

/* month */
.cal-month{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex:none;border-bottom:.5px solid var(--sep)}
.cal-mhead span{font-size:11px;font-weight:600;color:var(--text3);text-align:right;padding:7px 10px 6px;text-transform:uppercase;letter-spacing:.3px}
.cal-weeks{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-week{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:hidden;border-bottom:.5px solid var(--sep)}
.cal-week:last-child{border-bottom:0}
.cal-mday{border-right:.5px solid var(--sep);display:flex;justify-content:flex-end;align-items:flex-start;padding:3px 5px 0;min-width:0}
.cal-mday:nth-child(7){border-right:0}
.cal-mday.wkend{background:rgba(120,120,128,.035)}
.cal-mday.other .cal-mnum{color:var(--text3)}
.cal-mnum{height:22px;min-width:22px;padding:0 6px;border-radius:11px;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}
.cal-mnum:hover{background:rgba(120,120,128,.14)}
.cal-mday.today .cal-mnum{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 1px 4px rgba(10,132,255,.4)}
.cal-more{position:relative;z-index:2;justify-self:start;margin:1px 6px;padding:0 6px;height:19px;border-radius:5px;font-size:11px;font-weight:600;color:var(--text2)}
.cal-more:hover{background:rgba(120,120,128,.14);color:var(--text)}

/* month on a phone: dots + the chosen day's list */
.cal-mm{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
.cal-mm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:4px 6px 8px;border-bottom:.5px solid var(--sep);flex:none}
.cal-mm-dow{font-size:10.5px;font-weight:600;color:var(--text3);text-align:center;padding:4px 0}
.cal-mm-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 6px;border-radius:10px;min-height:46px}
.cal-mm-day .n{width:28px;height:28px;line-height:28px;border-radius:50%;font-size:14px;font-variant-numeric:tabular-nums}
.cal-mm-day.other .n{color:var(--text3)}
.cal-mm-day.sel .n{background:var(--text);color:var(--content);font-weight:600}
.cal-mm-day.today .n{color:var(--accent);font-weight:700}
.cal-mm-day.today.sel .n{background:var(--accent);color:#fff}
.cal-mm-day .dots{display:flex;gap:2.5px;height:5px}
.cal-mm-day .dots i{width:5px;height:5px;border-radius:50%}
.cal-mm-list{padding:4px 12px 16px}

/* day and week: the time grid */
.cal-tg{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-tg-head,.cal-tg-allday{display:grid;flex:none;overflow-y:hidden;scrollbar-gutter:stable}
.cal-tg-head{border-bottom:.5px solid var(--sep)}
.cal-tg-day{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:8px 4px 7px;min-width:0;border-radius:0;color:var(--text2)}
.cal-tg-day:hover .n{background:rgba(120,120,128,.14)}
.cal-tg-day .w{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-tg-day .n{font-size:19px;font-weight:600;letter-spacing:-.3px;color:var(--text);min-width:30px;height:30px;line-height:30px;border-radius:15px;padding:0 4px;font-variant-numeric:tabular-nums}
.cal-tg-day.today .w{color:var(--accent)}
.cal-tg-day.today .n{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(10,132,255,.4)}
.cal-tg.n1 .cal-tg-day{justify-content:flex-start;padding-left:12px}
.cal-tg-allday{border-bottom:.5px solid var(--sep);padding:3px 0;min-height:27px;position:relative}
.cal-tg-adl{grid-column:1;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:2px;padding:3px 8px 0 0;font-size:10.5px;color:var(--text3);white-space:nowrap}
.cal-admore{font-size:10.5px;font-weight:600;color:var(--accent);padding:0 2px}
.cal-tg-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;position:relative}
.cal-tg-grid{display:grid;position:relative;background:
  repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour) - .5px),var(--sep) calc(var(--hour) - .5px),var(--sep) var(--hour));
  background-position:var(--cal-gut) 0;background-size:calc(100% - var(--cal-gut)) var(--hour);background-repeat:repeat-y}
.cal-tg-gutter{position:relative;grid-column:1}
.cal-tg-gutter span{position:absolute;right:8px;transform:translateY(-50%);font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-tg-gutter span.near-now{visibility:hidden}
.cal-col{position:relative;border-left:.5px solid var(--sep);min-width:0}
.cal-col.wkend{background-color:rgba(120,120,128,.035)}
.cal-col.today{background:color-mix(in srgb,var(--accent) 3.5%,transparent)}
.cal-tev{--c:#8e8e93;position:absolute;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:1px;overflow:hidden;padding:3px 6px 2px 8px;border-radius:6px;text-align:left;font-size:11.5px;line-height:1.25;
  background:color-mix(in srgb,var(--c) 20%,var(--content) 55%);color:color-mix(in srgb,var(--c) 55%,var(--text));
  box-shadow:inset 3px 0 0 var(--c),0 0 0 .5px color-mix(in srgb,var(--c) 30%,transparent);transition:background .15s,box-shadow .15s}
.cal-tev:hover{background:color-mix(in srgb,var(--c) 30%,var(--content) 50%);z-index:3}
.cal-tev .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-tev .tm,.cal-tev .loc{font-size:10.5px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.cal-tev.short{flex-direction:row;align-items:center;padding-top:0;padding-bottom:0}
.cal-tev.cont-t{border-top-left-radius:0;border-top-right-radius:0}
.cal-tev.cont-b{border-bottom-left-radius:0;border-bottom-right-radius:0}
.cal-tev.past{opacity:.62}
.cal-tev:focus-visible,.cal-chip:focus-visible,.cal-arow:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:6px;z-index:4}
.cal-now{position:absolute;left:var(--cal-gut);right:0;height:0;z-index:5;pointer-events:none}
.cal-now .lbl{position:absolute;right:calc(100% + 3px);top:0;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff;background:var(--danger);padding:1px 5px;border-radius:7px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-now .line{position:absolute;left:0;right:0;top:-.5px;border-top:1px solid color-mix(in srgb,var(--danger) 45%,transparent)}
.cal-now .today-line{position:absolute;top:-1px;height:2px;left:calc(var(--i) * 100% / var(--n));width:calc(100% / var(--n));background:var(--danger)}
.cal-now .today-line::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--danger)}

/* agenda */
.cal-agenda{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 20px}
.cal-ad-h{position:sticky;top:0;z-index:2;font-size:12px;font-weight:600;color:var(--text2);padding:12px 4px 5px;background:color-mix(in srgb,var(--content) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:.5px solid var(--sep)}
.cal-ad-h.today{color:var(--accent)}
.cal-ad-list{display:flex;flex-direction:column;padding:4px 0}
.cal-ad-none{font-size:12.5px;color:var(--text3);padding:10px 4px}
.cal-ad-empty{font-size:13px;color:var(--text3);text-align:center;padding:60px 0}
.cal-arow{--c:#8e8e93;display:flex;align-items:center;gap:12px;width:100%;padding:8px 8px;border-radius:10px;text-align:left;font-size:13px}
.cal-arow:hover{background:rgba(120,120,128,.1)}
.cal-arow .bar{width:4px;align-self:stretch;min-height:30px;border-radius:2px;background:var(--c);flex:none}
.cal-arow .when{width:68px;flex:none;display:flex;flex-direction:column;font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.cal-arow .when b{color:var(--text);font-weight:500;font-size:12px}
.cal-arow .what{flex:1;min-width:0;display:flex;flex-direction:column}
.cal-arow .what b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-arow .what span{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-arow .rep{color:var(--text3)}

/* the event popover */
.cal-pop{position:absolute;z-index:8;width:310px;max-height:min(520px,calc(100% - 24px));overflow-y:auto;overflow-x:hidden;border-radius:18px;padding:12px 14px 12px;display:flex;flex-direction:column;gap:7px;
  box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2);animation:palin .28s var(--spring)}
.cal-pop[hidden]{display:none}
/* more opaque than the page's glass: they sit over busy grids */
.cal-pop,.cal-sheet-card{background:color-mix(in srgb,var(--content) 86%,transparent)}
.cev-head{display:flex;align-items:flex-start;gap:9px}
.cev-head h3{flex:1;min-width:0;font-size:15px;line-height:1.3;font-weight:700;letter-spacing:-.2px;overflow-wrap:anywhere;padding-top:3px}
.cev-head .iconbtn{width:26px;height:26px;margin:-2px -4px 0 0}
.cev-bar{width:4px;align-self:stretch;min-height:22px;border-radius:2px;flex:none}
.cev-row{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--text);line-height:1.4}
.cev-row .ic{color:var(--text3);margin-top:1px}
.cev-row small{color:var(--text3);font-size:11.5px}
.cev-row .wrap{overflow-wrap:anywhere}
.cev-dot{width:10px;height:10px;border-radius:3px;flex:none;margin:3px 2px 0}
.cev-people{display:flex;flex-direction:column;gap:2px;min-width:0}
.cev-person{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cev-notes{font-size:12px;line-height:1.5;color:var(--text2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(120,120,128,.08);border-radius:10px;padding:8px 10px;max-height:150px;overflow:auto}
.cev-links{display:flex;gap:6px;flex-wrap:wrap}
.cev-links .cap{text-decoration:none;color:var(--accent)}
.cev-why{font-size:11.5px;color:var(--text3)}
.cev-acts{display:flex;align-items:center;gap:6px;margin-top:3px;padding-top:9px;border-top:.5px solid var(--sep)}
.cev-acts .grow{flex:1}
.cev-acts .cap{padding:4px 10px}

/* editor and review sheet */
.cal-sheet{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.16)}
.cal-sheet[hidden]{display:none}
.cal-sheet-card{width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;box-shadow:inset 0 .5px 0 var(--rim),inset 0 0 0 .5px var(--hairline),var(--sh2);animation:palin .36s var(--spring)}
.cal-sheet-head{display:flex;align-items:center;gap:8px;padding:14px 16px 6px}
.cal-sheet-head h3{flex:1;font-size:15px;font-weight:700;letter-spacing:-.2px}
.cal-sheet-body{overflow-y:auto;padding:6px 16px 16px}
.cal-sheet-body .field{margin-bottom:10px}
.cal-sheet-body select{margin-top:0}
.cal-fallday{display:flex;align-items:center;gap:10px;font-size:13px;margin:2px 0 12px}
.cal-ftimes{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;margin-bottom:12px}
.cal-ftimes .k{font-size:12px;color:var(--text2)}
.cal-frow{display:flex;gap:8px;min-width:0}
.cal-frow input{flex:1;min-width:0;border:0;background:var(--content2);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline)}
.cal-frow input[type=time]{flex:0 0 112px}
.cal-frow input:disabled{opacity:.55}
.cal-alerts .cal-frow select{flex:1;min-width:0}
.cal-sheet-body textarea{min-height:76px}
.cal-sheet-body textarea:disabled{opacity:.55}
.cal-fcheck{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 8px;cursor:pointer}
.cal-fcheck input{accent-color:var(--accent);width:15px;height:15px}
.cal-err{font-size:12.5px;color:var(--danger);min-height:0;margin:2px 0 6px}
.cal-err:empty{display:none}
.cal-sheet-acts{margin-top:10px}
.cal-review{display:flex;flex-direction:column;gap:7px;background:var(--content);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 .5px var(--hairline),0 1px 3px rgba(0,0,0,.05);margin-bottom:10px}
.rv-title{display:flex;align-items:center;gap:9px;font-size:15px}
.rv-title b{font-weight:700;overflow-wrap:anywhere}
.rv-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text)}
.rv-row .ic{color:var(--text3)}
.rv-notes{font-size:12px;color:var(--text2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:90px;overflow:auto}
.cal-changes{display:flex;flex-direction:column;gap:5px;margin:-2px 0 10px;font-size:12.5px}
.cal-changes .chg{display:grid;grid-template-columns:52px minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:baseline}
.cal-changes .k{color:var(--text3);font-size:11.5px}
.cal-changes .a{color:var(--text3);text-decoration:line-through;overflow-wrap:anywhere}
.cal-changes .arr{color:var(--text3)}
.cal-changes b{font-weight:600;overflow-wrap:anywhere}
.cal-which{display:flex;flex-direction:column;gap:2px;margin:0 0 8px}
.cal .sp-warn{margin-bottom:8px}
.btn.danger.solid{background:var(--danger);color:#fff}
.btn.danger.solid:hover{filter:brightness(1.06)}

/* narrower windows: the calendars list slides over the view */
@media(max-width:1100px){
  .cal-side-btn{display:flex}
  .cal-side{position:absolute;z-index:7;left:0;top:0;bottom:0;transform:translateX(-104%);transition:transform .32s var(--spring),visibility 0s linear .32s;visibility:hidden;
    background:color-mix(in srgb,var(--content) 90%,transparent);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--sh1);border-right:.5px solid var(--sep)}
  .cal.side-open .cal-side{transform:none;visibility:visible;transition:transform .32s var(--spring),visibility 0s}
  .cal-seg{width:310px}
  .cal-search{width:150px}
  .cal-acts .cal-use span{display:none}
}
@media(max-width:860px){
  .cal-head{flex-wrap:wrap;row-gap:8px}
  .cal-titlewrap{order:1;flex:1}
  .cal-acts{order:2}
  .cal-sp{order:3;flex-basis:100%;height:0}
  .cal-seg{order:4;flex:1;width:auto;min-width:0}
  .cal-nav{order:5}
  .cal-search{order:6;flex-basis:100%;width:auto}
  .cal-acts .cal-newbtn span{display:none}
}
@media(max-width:640px){
  #calSurface{padding:0;align-items:stretch}
  .cal{width:100%;height:100%;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);animation:sheetin .38s var(--spring)}
  .cal-head{padding:10px 10px 8px 12px;gap:6px}
  .cal-title{font-size:17px;line-height:22px}
  .cal-titlewrap .cal-ico{display:none}
  .cal-acts{gap:2px}
  .cal-acts .cap{padding:5px 8px}
  .cal-side{width:min(280px,84vw)}
  .cal-seg button{padding:4px 6px;font-size:11.5px}
  .cal-mhead span{text-align:center;padding:6px 2px}
  .cal-tg-day{flex-direction:column;align-items:center;gap:0;padding:6px 2px}
  .cal-tg.n1 .cal-tg-day{flex-direction:row;align-items:baseline;gap:6px}
  .cal-tg-day .n{font-size:16px;height:26px;line-height:26px;min-width:26px}
  .cal{--cal-gut:44px}
  .cal-agenda{padding:2px 10px 16px}
  .cal-pop.as-sheet{position:absolute;left:8px!important;right:8px;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:70%;border-radius:22px;animation:sheetin .32s var(--spring)}
  .cal-sheet{padding:0;align-items:flex-end}
  .cal-sheet-card{width:100%;border-radius:22px 22px 0 0;max-height:92%}
  .cal-frow input[type=time]{flex-basis:112px}
}
body.cal-open #toast{z-index:121}

/* moving and resizing events: drag (touch: after a long press), the bottom edge resizes */
.cal-tev{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cal-tev.can-drag{cursor:grab}
.cal-rsz{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.cal-rsz::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:color-mix(in srgb,var(--c) 70%,var(--text));opacity:0;transition:opacity .15s}
.cal-tev:hover .cal-rsz::after,.cal-tev:focus-visible .cal-rsz::after{opacity:.55}
@media (pointer:coarse){.cal-rsz{height:14px}.cal-rsz::after{opacity:.4}}
.cal-tev.drag-src{opacity:.35}
.cal-ghost{z-index:6;pointer-events:none;background:color-mix(in srgb,var(--c) 30%,var(--content) 60%);box-shadow:inset 3px 0 0 var(--c),0 0 0 1px var(--c),0 8px 22px rgba(0,0,0,.18);transition:none}
.cal-ghost .cal-rsz{display:none}
.cal-tev.moved{box-shadow:inset 3px 0 0 var(--c),0 0 0 1.5px var(--c);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,var(--content) 55%) 0 6px,color-mix(in srgb,var(--c) 14%,var(--content) 60%) 6px 12px)}
body.cal-dragging,body.cal-dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
body.cal-resizing,body.cal-resizing *{cursor:ns-resize!important;-webkit-user-select:none;user-select:none}
/* all-day rows (month, the week's strip): dragged to another day; the days it would cover light up */
.cal-chip.can-drag{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cal-chip.drag-src{opacity:.35}
.cal-chip.cal-ghost{margin:1px 3px}
.cal-chip.moved{box-shadow:0 0 0 1.5px var(--c);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--content) 50%) 0 6px,color-mix(in srgb,var(--c) 16%,var(--content) 58%) 6px 12px)}
.cal-mday.drop{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent)}
.cal-tg-day.drop{background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* a calendar's colour: a swatch beside each calendar, a small picker */
.cal-calrow{display:flex;align-items:center;min-width:0}
.cal-calrow .cal-cal{flex:1}
.cal-swatch{flex:none;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s}
.cal-swatch::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.cal-calrow:hover .cal-swatch,.cal-swatch:focus-visible,.cal-swatch[aria-expanded="true"]{opacity:1}
.cal-swatch:hover{background:rgba(120,120,128,.14)}
@media (hover:none){.cal-swatch{opacity:.9}}
.cal-colors{position:absolute;z-index:9;width:214px;border-radius:16px;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.cal-colors[hidden]{display:none}
.cal-colors-h{display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.cal-colors-h b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-colors-h span{font-size:11px;color:var(--text3)}
.cal-sw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cal-sw{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);transition:transform .15s var(--spring)}
.cal-sw:hover{transform:scale(1.1)}
.cal-sw svg{stroke-width:3;filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
.cal-sw[aria-checked="true"]{box-shadow:0 0 0 2px var(--content),0 0 0 3.5px var(--c)}
.cal-sw.own{background:conic-gradient(var(--c) 0 50%,color-mix(in srgb,var(--c) 45%,var(--content)) 50% 100%)}
.cal-sw:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* waiting on the owner's "Let Eden use Eden Secretary?" card */
.cal-banner.wait{background:color-mix(in srgb,var(--wait) 14%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--wait) 45%,transparent)}
.cal-banner.wait .ic{color:var(--warn)}
@media (prefers-reduced-transparency: reduce){
  .cal,.cal-pop,.cal-sheet-card,.cal-connect{background:#f2f2f7}
  [data-theme="dark"] .cal,[data-theme="dark"] .cal-pop,[data-theme="dark"] .cal-sheet-card,[data-theme="dark"] .cal-connect{background:#2c2c2e}
}

/* ---- search, year, working hours, invitations' answers ---- */
.cal-search{display:flex;align-items:center;gap:6px;width:190px;height:30px;padding:0 9px;border-radius:9px;background:rgba(120,120,128,.1);color:var(--text3);flex:none;min-width:0}
.cal-search:focus-within{box-shadow:0 0 0 2px var(--accent-soft)}
.cal-search-in{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--text);outline:none}
.cal-sr-h{font-size:13px;font-weight:600;padding:12px 2px 4px;color:var(--text2)}
.cal-sr-h small{font-weight:400;color:var(--text3)}
.cal-view.v-search{overflow-y:auto}
.cal-view.v-year{overflow-y:auto}
.cal-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 22px;padding:16px 18px 24px}
.cal-yr-h{font-size:13.5px;font-weight:700;color:var(--accent);padding:2px 4px 6px;text-align:left;border-radius:6px}
.cal-yr-h:hover{background:rgba(120,120,128,.12)}
.cal-yr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cal-yr-dow{font-size:10px;color:var(--text3);padding-bottom:2px}
.cal-yr-day{position:relative;font-size:11px;font-variant-numeric:tabular-nums;height:24px;border-radius:50%;width:24px;justify-self:center;color:var(--text)}
.cal-yr-day:hover{background:rgba(120,120,128,.14)}
.cal-yr-day.today{background:var(--accent);color:#fff;font-weight:700}
.cal-yr-day.dot::after{content:"";position:absolute;left:50%;bottom:1px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--text3)}
.cal-yr-day.today.dot::after{background:#fff}
.cal-col{background-image:linear-gradient(to bottom,rgba(120,120,128,.075) 0 var(--ws),transparent var(--ws) var(--we),rgba(120,120,128,.075) var(--we))}
.cal-col.today{background-image:linear-gradient(to bottom,rgba(120,120,128,.075) 0 var(--ws),color-mix(in srgb,var(--accent) 3.5%,transparent) var(--ws) var(--we),rgba(120,120,128,.075) var(--we))}
.cal-newghost{--c:var(--accent);opacity:.92;box-shadow:inset 3px 0 0 var(--c),0 4px 14px rgba(0,0,0,.18)}
/* declined: struck through; maybe: striped; not answered: an outline */
.cal-tev.declined,.cal-chip.declined,.cal-arow.declined{opacity:.55}
.cal-tev.declined .t,.cal-chip.declined .t,.cal-arow.declined b{text-decoration:line-through}
.cal-tev.maybe,.cal-chip.bar.maybe{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 18%,var(--content) 58%) 0 5px,color-mix(in srgb,var(--c) 8%,var(--content) 64%) 5px 10px)}
.cal-tev.invited,.cal-chip.bar.invited{background:var(--content);box-shadow:inset 0 0 0 1px var(--c)}

/* the popover: answer, guests */
.cev-rsvp{display:flex;align-items:center;gap:10px;padding:8px 0 2px;border-top:.5px solid var(--sep);margin-top:6px}
.cev-rsvp .k{font-size:12.5px;font-weight:600;color:var(--text2)}
.cev-rsvp-btns{display:flex;gap:4px}
.cev-rs{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(120,120,128,.12);color:var(--text)}
.cev-rs:hover{background:rgba(120,120,128,.2)}
.cev-rs.on{background:var(--accent);color:#fff}
.cev-rs[data-rsvp="declined"].on{background:var(--danger,#ff453a)}
.cev-rs[data-rsvp="tentative"].on{background:var(--warn,#ff9f0a)}
.cev-scope{display:flex;flex-direction:column;gap:2px;background:var(--content);border-radius:10px;padding:4px;box-shadow:var(--sh1);margin:4px 0}
.cev-scope button{text-align:left;padding:6px 10px;border-radius:7px;font-size:12.5px}
.cev-scope button:hover,.cev-scope button:focus-visible{background:var(--accent-soft)}
.cev-gsum{font-size:11.5px;color:var(--text2);margin-bottom:2px}
.cev-person{display:flex;align-items:center;gap:5px}
.cev-st{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text3)}
.st-accepted .cev-st{background:var(--run,#30d158)}
.st-declined .cev-st{background:var(--danger,#ff453a)}
.st-tentative .cev-st{background:var(--warn,#ff9f0a)}
.cev-notes.rich{white-space:normal}
.cev-notes.rich ul,.cev-notes.rich ol{padding-left:18px;margin:4px 0}
.cev-notes.rich a,.cev-files a{color:var(--accent)}
.cev-files{display:flex;flex-direction:column;gap:2px}

/* the editor */
.cal-sheet-card.cal-editor{width:min(560px,100%)}
.cal-ftitle{width:100%;border:0;background:none;font:inherit;font-size:20px;font-weight:650;letter-spacing:-.3px;color:var(--text);padding:4px 0 8px;border-bottom:1.5px solid var(--sep);margin-bottom:12px;outline:none}
.cal-ftitle:focus{border-bottom-color:var(--accent)}
.cal-fsec{display:grid;grid-template-columns:104px 1fr;align-items:start;gap:8px;margin:0 0 12px;min-width:0}
.cal-fsec>.k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);padding-top:7px}
.cal-fsec>select,.cal-fbody>select{width:100%}
.cal-fbody{min-width:0;display:flex;flex-direction:column;gap:6px}
.cal-fdot{width:9px;height:9px}
.cal-fzone{max-width:230px;font-size:12px}
.cal-fallday .grow{flex:1}
.cal-custom{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;background:var(--content2);box-shadow:inset 0 0 0 .5px var(--hairline)}
.cal-custom .k{font-size:12px;color:var(--text2);align-self:center;white-space:nowrap}
.cal-custom .cal-frow{align-items:center}
.cal-custom .cal-frow select{flex:1}
.cal-fnum{width:64px;flex:0 0 64px!important;border:0;background:var(--content);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline)}
.cal-wds{display:flex;gap:5px}
.cal-wd{width:30px;height:30px;border-radius:50%;font-size:12px;font-weight:600;background:rgba(120,120,128,.14);color:var(--text)}
.cal-wd.on{background:var(--accent);color:#fff}
.cal-ends{display:flex;flex-direction:column;gap:0}
.cal-ends .cal-fcheck{margin:3px 0}
.cal-ends input[type=date]{border:0;background:var(--content);border-radius:8px;padding:4px 8px;font:inherit;font-size:12.5px;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline)}
.cal-ends input:disabled{opacity:.5}
.cal-guests{display:flex;flex-direction:column;gap:4px}
.cal-guest{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 2px;border-radius:9px;min-width:0}
.cal-guest:hover{background:rgba(120,120,128,.08)}
.cal-gav{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:hsl(var(--h) 55% 52%)}
.cal-gname{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px;line-height:1.25;overflow:hidden}
.cal-gname span,.cal-gname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-gname b+span{font-size:11px;color:var(--text3)}
.cal-gopt{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(120,120,128,.12);color:var(--text2)}
.cal-gopt.on{background:var(--accent-soft);color:var(--accent)}
.cal-perms{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px}
.cal-perms .k{font-size:11.5px;color:var(--text3);flex-basis:100%}
.cal-perms .cal-fcheck{margin:2px 0;font-size:12.5px}
.cal-fb{border-radius:12px;background:var(--content2);padding:8px 10px;box-shadow:inset 0 0 0 .5px var(--hairline);display:flex;flex-direction:column;gap:5px}
.cal-fb-h{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.cal-fb-h small{color:var(--text3)}
.cal-fb-row{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;font-size:11.5px}
.cal-fb-row .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.cal-fb-bar{position:relative;height:16px;border-radius:5px;background:color-mix(in srgb,var(--run,#30d158) 16%,var(--content));cursor:pointer;overflow:hidden}
.cal-fb-bar .busy{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--text3) 55%,transparent)}
.cal-fb-bar .slot{position:absolute;top:-1px;bottom:-1px;border:2px solid var(--accent);border-radius:4px;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.cal-fb-na{color:var(--text3);font-style:italic}
.cal-fb-ticks{position:relative;height:13px}
.cal-fb-ticks span{position:absolute;transform:translateX(-50%);font-size:9.5px;color:var(--text3);white-space:nowrap}
.cal-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);animation:calspin .8s linear infinite;display:inline-block}
.cal-rems{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cal-rems.dim .cal-rem{opacity:.5}
.cal-rem{align-items:center;flex-wrap:wrap}
.cal-rem .k{font-size:12px;color:var(--text2)}
.cal-ecolors{display:flex;flex-wrap:wrap;gap:6px;padding-top:3px}
.cal-ecolors .cal-sw{width:22px;height:22px}
.cal-richbar{display:flex;gap:2px;margin:4px 0 4px}
.cal-rb{min-width:28px;height:26px;border-radius:7px;font-size:12.5px;color:var(--text2);display:inline-flex;align-items:center;justify-content:center}
.cal-rb:hover{background:rgba(120,120,128,.14);color:var(--text)}
.cal-rich{min-height:72px;max-height:220px;overflow-y:auto;background:var(--content2);border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.45;color:var(--text);box-shadow:inset 0 0 0 .5px var(--hairline);outline:none}
.cal-rich:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal-rich:empty::before{content:attr(data-placeholder);color:var(--text3)}
.cal-rich ul,.cal-rich ol{padding-left:20px;margin:4px 0}
.cal-rich a{color:var(--accent)}
.cal-scope-h{font-size:12.5px;font-weight:600;margin:6px 0 4px}
.cal-send{padding:8px 10px;border-radius:10px;background:var(--accent-soft)}
@media(max-width:640px){
  .cal-fsec{grid-template-columns:1fr;gap:4px}
  .cal-fsec>.k{padding-top:0}
  .cal-year{grid-template-columns:repeat(2,1fr);gap:14px;padding:12px}
  .cal-yr-day{width:20px;height:20px;font-size:10px}
  .cal-fb-row{grid-template-columns:64px 1fr}
}
.cal-fcheck input.cal-fnum,.cal-ends input[type=date]{width:auto;height:auto}
.cal-ends input[type=date]{min-width:140px}
.cal-ends>.k{align-self:flex-start}
.cal-fsec .cal-frow>.k{white-space:nowrap;align-self:center;font-size:12px;color:var(--text2)}
.cev-links a.cap.meet{background:var(--accent);color:#fff;box-shadow:none}
.cev-links a.cap.meet svg{color:#fff}
.cev-acts{flex-wrap:wrap;row-gap:6px}
@media(max-width:860px){.cal-search{order:6;flex:1 1 100%;width:auto}}
@media(max-width:1100px) and (min-width:861px){.cal-search{width:150px}}

/* ---- the calendar as a page (wide windows, calendar.js place()): it takes the chat's column; Chat opens the real
   chat as a panel on its right. Its layout follows its own width (container), not the window's. ---- */
#app.cal-page #calSurface{position:static;inset:auto;z-index:auto;flex:1;min-width:0;padding:0;background:none;display:flex;align-items:stretch}
#app.cal-page #calSurface[hidden]{display:none}
#app.cal-page .cal{width:100%;height:100%;border-radius:var(--r-lg);animation:calpage .32s var(--spring);container:cal/inline-size}
@keyframes calpage{from{opacity:0}to{opacity:1}}
#app.cal-page #center{display:none}
#app.cal-page.cal-chat #center{display:flex;flex:none;width:clamp(360px,30vw,460px);animation:calchat .32s var(--spring)}
@keyframes calchat{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
#app.cal-page #inspector{display:none}
#app.cal-page .cal-titlewrap{min-width:max-content}
/* under 1400px the chat panel takes the sidebar's place, so the calendar keeps room for a week */
@media(max-width:1399px){#app.cal-page.cal-chat #sidebar{display:none}}
/* 641-1000px: no room for two columns, so the chat slides over the calendar's right edge */
@media(max-width:1000px){
  #app.cal-page.cal-chat #center{position:fixed;z-index:60;top:12px;right:12px;bottom:12px;width:min(400px,calc(100vw - 80px));
    padding:8px;border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--sh2)}
}
.cal-chatbtn.on{background:var(--accent-soft);color:var(--accent)}
.cal-chatbtn[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#app.cal-page .cal,#app.cal-page.cal-chat #center{animation:none}}
@container cal (max-width:1180px){
  .cal-side-btn{display:flex}
  .cal-side{position:absolute;z-index:7;left:0;top:0;bottom:0;transform:translateX(-104%);transition:transform .32s var(--spring),visibility 0s linear .32s;visibility:hidden;
    background:color-mix(in srgb,var(--content) 90%,transparent);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:var(--sh1);border-right:.5px solid var(--sep)}
  .cal.side-open .cal-side{transform:none;visibility:visible;transition:transform .32s var(--spring),visibility 0s}
  .cal-seg{width:300px}
  .cal-search{width:140px}
  .cal-acts .cal-use span{display:none}
}
@container cal (max-width:860px){
  .cal-head{flex-wrap:wrap;row-gap:8px}
  .cal-titlewrap{order:1;flex:1}
  .cal-acts{order:2}
  .cal-sp{order:3;flex-basis:100%;height:0}
  .cal-seg{order:4;flex:1;width:auto;min-width:0}
  .cal-nav{order:5}
  .cal-search{order:6;flex:1 1 100%;width:auto}
  .cal-acts .cal-newbtn span{display:none}
}

/* The EVES glass pill: every EVES / verification badge on the page (docs/verify/ui.md "The glass pill").
   The approved look is marketing/eves-logo/pill-glass/ (build-glass.py is the spec, the PNGs what it looks like):
   a frosted capsule that blurs what is behind it, a white tint, a faint light at the bottom, a soft highlight across
   the top (::before), a rim brightest top-left and bottom-right (::after, a gradient border), a hairline outline, a
   soft coloured shadow, and on the left a glossy orb with a white glyph. The design is 104 SVG units tall; on the
   page it is drawn at FIXED, READABLE pixel sizes, not scaled (scaled down to a chip's height the words were 6px):
     under a reply / EVES badge   22px tall, orb 16px (3px from the left edge), "EVES" 11px/600 with .08em
                                  tracking, a 1px x 12px divider, the verdict 11px/400 (190px at most, then an
                                  ellipsis), gaps 6px, 10px on the right, blur 10px, shadow 0 1px 4px at 12%
     composer chip (compact)      20px tall, orb 14px, "EVES" 10px, no verdict (eves.css sets --eg-h/-d/-fs)
   Three custom properties are the only sizes: --eg-h (height, the radius is half), --eg-d (the orb's diameter) and
   --eg-fs (the text); everything else is the numbers above.

   Markup (glass.js glassPill builds it; the composer's chip in index.html has the same shape):
     <span class="eves-glass" data-tone="ok|warn|bad|info">
       <span class="eves-glass-orb" aria-hidden="true"></span>
       <span class="eves-glass-name">EVES</span>
       <i class="eves-glass-div" aria-hidden="true"></i><span class="eves-glass-sub">Checked by 3 models</span>   (not in .eves-glass-compact)
     </span>
   The tone only picks the orb (--eg-orb): its colours and glyph (check, !, dash) are one small SVG each, drawn from the
   generator's own ORB table, so they stay sharp at any size. To change a tone's colours or add one, edit --eg-orb-*
   below (and toneOfLabel in glass.js). The pill says only a short phrase (glass.js phraseOfLabel: issues_found "Issues
   found in this answer", eves_disputed "Not fully verified", eves_verified "Checked by N models" or "Verified",
   from_sources "From your sources", checked_on_web "Checked on the web", model_memory "Unverified"), never more than
   28 characters; the long words are in the panel it opens. Light and dark follow the page's own mechanism
   ([data-theme="dark"|"light"] on an ancestor, else prefers-color-scheme), as app.css does. */

:root {
  --eg-orb-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.36' cy='.26' r='.95'%3E%3Cstop offset='0' stop-color='%23b6f7c6'/%3E%3Cstop offset='.42' stop-color='%2334c759'/%3E%3Cstop offset='1' stop-color='%231c9a42'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.6' flood-color='%2304361a' flood-opacity='.38'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='36' cy='36' r='36' fill='url(%23o)'/%3E%3Cellipse cx='33' cy='17' rx='23' ry='13' fill='url(%23h)'/%3E%3Ccircle cx='36' cy='36' r='35' fill='none' stroke='url(%23r)' stroke-width='2'/%3E%3Cpolyline filter='url(%23s)' points='22,37 32,47 51,26' fill='none' stroke='%23fff' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --eg-orb-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.36' cy='.26' r='.95'%3E%3Cstop offset='0' stop-color='%23ffe2a8'/%3E%3Cstop offset='.42' stop-color='%23ff9f0a'/%3E%3Cstop offset='1' stop-color='%23d97800'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.6' flood-color='%2304361a' flood-opacity='.38'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='36' cy='36' r='36' fill='url(%23o)'/%3E%3Cellipse cx='33' cy='17' rx='23' ry='13' fill='url(%23h)'/%3E%3Ccircle cx='36' cy='36' r='35' fill='none' stroke='url(%23r)' stroke-width='2'/%3E%3Cg filter='url(%23s)'%3E%3Cline x1='36' y1='21' x2='36' y2='39' stroke='%23fff' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='51' r='4.6' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --eg-orb-bad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.36' cy='.26' r='.95'%3E%3Cstop offset='0' stop-color='%23ffc2b8'/%3E%3Cstop offset='.42' stop-color='%23ff5a47'/%3E%3Cstop offset='1' stop-color='%23d12f1c'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.6' flood-color='%2304361a' flood-opacity='.38'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='36' cy='36' r='36' fill='url(%23o)'/%3E%3Cellipse cx='33' cy='17' rx='23' ry='13' fill='url(%23h)'/%3E%3Ccircle cx='36' cy='36' r='35' fill='none' stroke='url(%23r)' stroke-width='2'/%3E%3Cg filter='url(%23s)'%3E%3Cline x1='36' y1='21' x2='36' y2='39' stroke='%23fff' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='51' r='4.6' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --eg-orb-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cdefs%3E%3CradialGradient id='o' cx='.36' cy='.26' r='.95'%3E%3Cstop offset='0' stop-color='%23e6e8ee'/%3E%3Cstop offset='.42' stop-color='%239a9fab'/%3E%3Cstop offset='1' stop-color='%236b707c'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1.6' flood-color='%2304361a' flood-opacity='.38'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='36' cy='36' r='36' fill='url(%23o)'/%3E%3Cellipse cx='33' cy='17' rx='23' ry='13' fill='url(%23h)'/%3E%3Ccircle cx='36' cy='36' r='35' fill='none' stroke='url(%23r)' stroke-width='2'/%3E%3Crect filter='url(%23s)' x='19' y='32' width='34' height='8' rx='4' fill='%23fff'/%3E%3C/svg%3E");
}

.eves-glass {
  --eg-h: 22px; --eg-d: 16px; --eg-fs: 11px;
  /* light (THEME.light in the generator) */
  --eg-fill: rgb(255 255 255 / .34);
  --eg-solid: rgb(246 248 253);                 /* the opaque pill for no blur / reduced transparency */
  --eg-text: #14161a; --eg-sub: rgb(40 44 52 / .78); --eg-div: rgb(40 44 52 / .22);
  --eg-rim-lo: rgb(255 255 255 / .18);
  --eg-spec: .70; --eg-bot: .22; --eg-hair: rgb(0 0 0 / .07);
  --eg-sh: .12;                                 /* the soft shadow's strength */
  --eg-orb: var(--eg-orb-info);
  --eg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 100%;
  height: var(--eg-h); margin: 0; padding: 0 10px 0 3px;
  border: 0; border-radius: calc(var(--eg-h) / 2); overflow: hidden; vertical-align: middle;
  color: var(--eg-text); font: 600 var(--eg-fs) / 1 var(--eg-font);
  text-align: left; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0) 0, rgb(255 255 255 / var(--eg-bot)) 100%),
    linear-gradient(var(--eg-fill), var(--eg-fill));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 .5px var(--eg-hair), 0 1px 4px rgb(20 34 106 / var(--eg-sh));
}
.eves-glass.eves-glass-compact { padding-right: 9px; }

/* dark (THEME.dark) */
/* (:where keeps these as quiet as the light values above, so the fallbacks at the end of the file still win) */
:where([data-theme="dark"]) .eves-glass {
  --eg-fill: rgb(16 19 28 / .42); --eg-solid: rgb(28 31 42);
  --eg-text: #f7f8fb; --eg-sub: rgb(235 238 246 / .8); --eg-div: rgb(235 238 246 / .22);
  --eg-rim-lo: rgb(159 180 255 / .18);
  --eg-spec: .40; --eg-bot: .10; --eg-hair: rgb(0 0 0 / .35); --eg-sh: .3;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme])) .eves-glass {
    --eg-fill: rgb(16 19 28 / .42); --eg-solid: rgb(28 31 42);
    --eg-text: #f7f8fb; --eg-sub: rgb(235 238 246 / .8); --eg-div: rgb(235 238 246 / .22);
    --eg-rim-lo: rgb(159 180 255 / .18);
    --eg-spec: .40; --eg-bot: .10; --eg-hair: rgb(0 0 0 / .35); --eg-sh: .3;
  }
}

/* the soft white highlight across the top 40% */
.eves-glass::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 3px; right: 3px; top: 1px; height: 40%; border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / var(--eg-spec)), rgb(255 255 255 / 0));
}
/* the rim: 1px, brightest top-left and bottom-right (a gradient border: the gradient shows only in the ring) */
.eves-glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(to bottom right, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .22) 38%, var(--eg-rim-lo) 70%, rgb(255 255 255 / .75) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* the orb: its own gloss, rim and glyph are in the picture */
.eves-glass-orb {
  flex: none; width: var(--eg-d); height: var(--eg-d); margin-right: 6px;
  background: var(--eg-orb) center / 100% 100% no-repeat;
}
.eves-glass[data-tone="ok"] { --eg-orb: var(--eg-orb-ok); }
.eves-glass[data-tone="warn"] { --eg-orb: var(--eg-orb-warn); }
.eves-glass[data-tone="bad"] { --eg-orb: var(--eg-orb-bad); }
.eves-glass[data-tone="info"] { --eg-orb: var(--eg-orb-info); }

/* EVES (the composer's chip keeps its own id and class on this span) */
.eves-glass > .eves-glass-name, .eves-glass > .jc-eves-lbl {
  flex: none; font: 600 var(--eg-fs) / 1.3 var(--eg-font); letter-spacing: .08em; color: var(--eg-text); overflow: visible;
}
/* the verdict: a 1px x 12px divider between 6px gaps, then the words */
.eves-glass-div { flex: none; width: 1px; height: 12px; margin: 0 6px; background: var(--eg-div); }
.eves-glass-sub {
  flex: 0 1 auto; min-width: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 var(--eg-fs) / 1.35 var(--eg-font); color: var(--eg-sub);
}

/* a pill that can be clicked */
button.eves-glass { cursor: pointer; appearance: none; -webkit-appearance: none; transition: transform .15s cubic-bezier(.32, .72, 0, 1); }
button.eves-glass:hover { transform: translateY(-1px); }
button.eves-glass:active { transform: none; }
button.eves-glass:focus-visible { outline: 2px solid var(--accent, #0a84ff); outline-offset: 2px; border-radius: calc(var(--eg-h) / 2); }
div.eves-glass, span.eves-glass { cursor: default; }

/* no backdrop blur in this browser: an opaque pill (the tint would let whatever is behind show through, unblurred) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .eves-glass { --eg-fill: var(--eg-solid); }
}
/* the person asked for less transparency */
@media (prefers-reduced-transparency: reduce) {
  .eves-glass { --eg-fill: var(--eg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the person asked for more contrast: the opaque pill and the full-strength words */
@media (prefers-contrast: more) {
  .eves-glass { --eg-fill: var(--eg-solid); --eg-sub: var(--eg-text); }
}
@media (prefers-reduced-motion: reduce) {
  button.eves-glass { transition: none; }
  button.eves-glass:hover { transform: none; }
}
/* Windows high contrast and friends: system colours and a plain outline (the orb's picture still shows) */
@media (forced-colors: active) {
  .eves-glass { forced-color-adjust: none; color: CanvasText; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .eves-glass::before, .eves-glass::after { display: none; }
  .eves-glass > .eves-glass-name, .eves-glass > .jc-eves-lbl, .eves-glass-sub { color: CanvasText; }
  .eves-glass-div { background: CanvasText; }
}

/* The Eden Code look for the chat (opt-in, OFF by default): the web chat drawn like the Eden Code screen of the
   iPhone app (JARVIS V1/companion/iOS/Views/Screens/CodeSessionView.swift and CodeSessionsView.swift, with
   Shared/Theme.swift, Shared/Look.swift, Views/SpaceBackground.swift, Views/Components.swift).
   Switched on by look.js: ?look=code sets <html data-look="code"> (remembered in localStorage "eden:look"),
   ?look=default clears it. Every rule is scoped under html[data-look="code"]; without it this file does nothing.

   Dark = the app's Stark Glass (its default, always night): near-black #03060d lit by the reactor's blue from
   above with the faintest warmth low in the corners; Liquid Glass with a specular top rim; reactor-blue #5cc8f7
   accent with dark ink (#03101c) on it.
   Light = the app's Obsidian by day (porcelain): flat #f4f5f7 ground, white cards with a hairline edge instead
   of glass, arc blue #0a6cb3 with white ink on it.
   In both: no chat bubbles. Every message is a left-aligned block under a small uppercase eyebrow ("YOU" muted,
   "EDEN" with the reactor orb); what you said is 16px secondary ink, the answer 16px primary ink with 1.5 leading;
   tool steps are 12px monospaced lines on a 10px rounded well; notes italic and muted; status chips are tinted
   capsules (14% fill, 28% hairline); the composer is one 52px capsule (radius 26) with + on the left and a 36px
   round send. 20px side margins on phones, 16px between entries. System sans only.
   The chat's single-column layout stays: this file changes surfaces, colours and type, not the layout.
   A few rules must outweigh app.css's chat-glass rules (html:not(.eden-app)[data-chat-glass] …) and the accent
   style tag, so they carry :not(#eden-look) only to raise their weight (no element has that id), and the few that
   app.js's injected web-glass tag sets with !important (user bubble, composer, send) answer with !important. */

/* ── tokens: Obsidian porcelain by day ── */
html[data-look="code"] {
  --cl-bg: #f4f5f7; --cl-surface: #ffffff; --cl-raised: #eceef2;
  --cl-ink: #111317; --cl-ink2: #4a4f57; --cl-muted: #646a73;
  --cl-hair: rgba(10,12,16,.08); --cl-hair2: rgba(10,12,16,.14);
  --cl-arc: #0a6cb3; --cl-on-arc: #ffffff; --cl-core: #0a3d6b;
  --cl-brass: #8a5d10; --cl-signal: #1f8a4c; --cl-alert: #c8281e;
  --cl-well: rgba(10,12,16,.045);
  --cl-glass: var(--cl-surface); --cl-blur: none;
  --cl-rim: inset 0 0 0 1px var(--cl-hair);
  --cl-shadow: none;
  --accent: var(--cl-arc); --accent-soft: rgba(10,108,179,.12); --accent-contrast: var(--cl-on-arc);
  --bg: var(--cl-bg); --content: var(--cl-surface); --content2: var(--cl-raised);
  --text: var(--cl-ink); --text2: var(--cl-ink2); --text3: var(--cl-muted);
  --glass: var(--cl-surface); --glass2: var(--cl-surface);
  --hairline: var(--cl-hair); --rim: transparent; --sep: var(--cl-hair);
  --run: var(--cl-signal); --wait: var(--cl-brass); --warn: var(--cl-brass); --danger: var(--cl-alert);
  --sh1: none; --sh2: 0 0 0 1px var(--cl-hair2), 0 24px 64px rgba(0,0,0,.14);
}
/* ── tokens: Stark Glass at night ── */
html[data-look="code"][data-theme="dark"] {
  --cl-bg: #03060d; --cl-surface: #0d131f; --cl-raised: #141c2b;
  --cl-ink: #eef3f8; --cl-ink2: rgba(235,240,248,.64); --cl-muted: #7f8ca0;
  --cl-hair: rgba(255,255,255,.09); --cl-hair2: rgba(255,255,255,.14);
  --cl-arc: #5cc8f7; --cl-on-arc: #03101c; --cl-core: #d6f3ff;
  --cl-brass: #e8c27a; --cl-signal: #30d158; --cl-alert: #ff453a;
  --cl-well: rgba(118,118,128,.12);
  --cl-glass: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  --cl-blur: blur(26px) saturate(185%);
  --cl-rim: inset 0 .8px 0 rgba(255,255,255,.28), inset 0 0 0 .8px rgba(255,255,255,.07);
  --cl-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
  --accent-soft: rgba(92,200,247,.14);
  --glass: rgba(255,255,255,.05); --glass2: rgba(20,28,43,.82);
  --sh2: 0 0 0 .5px rgba(255,255,255,.12), 0 24px 60px -20px rgba(0,0,0,.85);
}
/* the user's own accent pick (app.js's style tag) gives way to the app's while this look is on */
html[data-look="code"]:not(#eden-look) { --accent: var(--cl-arc); --accent-contrast: var(--cl-on-arc); }
/* the composer's own tokens (app.css .jc) */
html[data-look="code"] .jc {
  --c-ink: 17 19 23; --c-ink-2: 74 79 87; --c-muted: 100 106 115; --c-subtle: 140 146 155;
  --c-accent: 10 108 179; --c-accent-hover: 8 92 154; --c-glow: 10 108 179; --c-success: 31 138 76;
  --c-surface: 255 255 255;
}
html[data-look="code"][data-theme="dark"] .jc {
  --c-ink: 238 243 248; --c-ink-2: 190 198 212; --c-muted: 127 140 160; --c-subtle: 96 106 122;
  --c-accent: 92 200 247; --c-accent-hover: 128 212 250; --c-glow: 92 200 247; --c-success: 48 209 88;
  --c-surface: 3 6 13;
}

/* ── the ground ── */
html[data-look="code"] body { background: var(--cl-bg); color: var(--cl-ink); }
html[data-look="code"] body::before { background: none; }
/* night: the reactor's light from above, a breath of Stark gold and hot-rod red low in the corners, depth below */
html[data-look="code"][data-theme="dark"] body::before {
  background:
    radial-gradient(520px 420px at 50% -6%, rgba(63,184,242,.16), transparent 70%),
    radial-gradient(900px 640px at 50% -10%, rgba(12,63,120,.85), transparent 62%),
    radial-gradient(700px 520px at 85% 8%, rgba(8,36,72,.7), transparent 65%),
    radial-gradient(520px 420px at 0% 100%, rgba(28,9,7,.9), transparent 70%),
    radial-gradient(520px 420px at 100% 100%, rgba(24,17,7,.9), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45));
}

/* ── surfaces: glass at night, a white card with a hairline by day ── */
html[data-look="code"] .glass {
  background: var(--cl-glass);
  -webkit-backdrop-filter: var(--cl-blur); backdrop-filter: var(--cl-blur);
  box-shadow: var(--cl-rim), var(--cl-shadow);
}
html[data-look="code"]:not([data-theme="dark"]) .glass { box-shadow: inset 0 0 0 1px var(--cl-hair); }
html[data-look="code"] #sidebar, html[data-look="code"] #titlebar { border-radius: 18px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-look="code"][data-theme="dark"] .glass { background: var(--cl-surface); }
}

/* ── the session list (sidebar): the app's list rows ── */
html[data-look="code"] .sec-h { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--cl-muted); }
html[data-look="code"] .sitem { border-radius: 10px; padding: 7px 9px; font-size: 15px; font-weight: 500; color: var(--cl-ink); }
html[data-look="code"] .sitem .sub { font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--cl-muted); }
html[data-look="code"] .sitem:hover { background: var(--cl-well); }
html[data-look="code"] .sitem.active {
  background: var(--accent-soft); color: var(--cl-ink); font-weight: 600;
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--cl-arc) 28%, transparent);
}
html[data-look="code"] .sitem.active .ic { color: var(--cl-arc); }
html[data-look="code"] .newchat { border-radius: 10px; background: var(--accent-soft); color: var(--cl-arc); font-weight: 600; }
html[data-look="code"] .side-foot { border-top: 1px solid var(--cl-hair); }
html[data-look="code"] .side-foot .who { font-size: 13px; }
html[data-look="code"] .iconbtn { border-radius: 10px; color: var(--cl-ink2); }
html[data-look="code"] .iconbtn:hover { background: var(--cl-well); color: var(--cl-ink); }
html[data-look="code"] .dot.run { background: var(--cl-arc); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ── the navigation bar ── */
html[data-look="code"] #titlebar { min-height: 48px; }
html[data-look="code"] #titlebar .tb-title { font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
/* status chips: the app's StatusPill (a tinted capsule) */
html[data-look="code"] .branch, html[data-look="code"] .tag, html[data-look="code"] .route-chip {
  border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--cl-ink2);
  background: rgba(127,140,160,.14); box-shadow: inset 0 0 0 .5px rgba(127,140,160,.28);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-look="code"] .branch { font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; }
html[data-look="code"] .tag.temp { color: var(--cl-brass); background: color-mix(in srgb, var(--cl-brass) 14%, transparent); }
html[data-look="code"] .kbdhint { border-radius: 999px; box-shadow: inset 0 0 0 .5px var(--cl-hair2); }

/* ── empty state ── */
html[data-look="code"] #empty h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
html[data-look="code"] #empty p.lead { font-size: 16px; color: var(--cl-ink2); }
html[data-look="code"] .sugg button {
  border-radius: 18px; padding: 14px 16px; font-size: 15px;
  background: var(--cl-glass); -webkit-backdrop-filter: var(--cl-blur); backdrop-filter: var(--cl-blur);
  box-shadow: var(--cl-rim);
}
html[data-look="code"]:not([data-theme="dark"]) .sugg button { box-shadow: inset 0 0 0 1px var(--cl-hair); }
html[data-look="code"] .sugg button span { color: var(--cl-muted); font-size: 13px; }

/* ── the conversation: no bubbles, each entry a left-aligned block under an eyebrow ── */
html[data-look="code"] #transcript { gap: 16px; }
html[data-look="code"] .msg.user { align-items: flex-start; }
html[data-look="code"] .msg::before {
  order: -1; display: flex; align-items: center; gap: 7px; margin: 0 0 5px;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  text-transform: uppercase; letter-spacing: 0;
}
html[data-look="code"] .msg.user::before { content: "You"; color: var(--cl-muted); }
html[lang^="fr"][data-look="code"] .msg.user::before { content: "Vous"; }
/* "EDEN" in the reactor's ice, after the 9px orb (a glossy sphere at night, a fine dial by day) */
html[data-look="code"] .msg.assistant::before {
  content: "Eden"; color: var(--cl-core);
  padding-left: 16px;
  background: radial-gradient(circle 4.5px at 4.5px 50%, #f2fbff 0, #a4e4ff 22%, #3fb8f2 55%, #0a3d84 96%, transparent 100%) no-repeat;
}
html[data-look="code"]:not([data-theme="dark"]) .msg.assistant::before {
  background: radial-gradient(circle at 4.5px 50%, var(--cl-arc) 0 1.4px, transparent 1.6px 3.3px, var(--cl-arc) 3.4px 4.4px, transparent 4.6px) no-repeat;
}
html[data-look="code"]:not(#eden-look) .msg.user .bubble {
  background: transparent !important; color: var(--cl-ink2) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important; padding: 0; max-width: 100%;
  font-size: 16px; line-height: 1.45;
}
html[data-look="code"]:not(#eden-look) .msg.user .bubble::before { content: none !important; }
html[data-look="code"]:not(#eden-look) .msg.user .bubble .utext { color: var(--cl-ink2) !important; }
html[data-look="code"]:not(#eden-look) .msg.user .bubble a { color: var(--cl-arc) !important; }
html[data-look="code"]:not(#eden-look) .msg.user .bubble .more { color: var(--cl-arc) !important; background: var(--cl-well); }
html[data-look="code"]:not(#eden-look) .msg.user .bubble .more:focus-visible { outline-color: var(--cl-arc); }
html[data-look="code"]:not(#eden-look) .msg.user .bubble .ctxchip,
html[data-look="code"]:not(#eden-look) .msg.user .bubble .attach {
  background: var(--cl-well); color: var(--cl-ink2); border: 0; box-shadow: none;
}
html[data-look="code"] .msg.user .u-imgs { justify-content: flex-start; }
html[data-look="code"] .msg.user .u-img { border-radius: 12px; }
html[data-look="code"] .steered { align-self: flex-start; color: var(--cl-arc); }
html[data-look="code"] .msg.user .msg-acts { justify-content: flex-start; }
html[data-look="code"] .msg.assistant .bubble {
  background: transparent; box-shadow: none; border-radius: 0; padding: 0;
  font-size: 16px; line-height: 1.5; color: var(--cl-ink);
}
html[data-look="code"] .msg-head { margin-left: 0; }
html[data-look="code"] .msg-acts .iconbtn { color: var(--cl-muted); }
html[data-look="code"] .notice, html[data-look="code"] .stopped { font-size: 13px; font-style: italic; color: var(--cl-muted); margin-left: 0; }
html[data-look="code"] .followup-btn { border-radius: 10px; font-size: 14px; }
html[data-look="code"] .followup-btn:hover, html[data-look="code"] .followup-btn:focus-visible { background: var(--cl-well); }
html[data-look="code"] .edit-box { border-radius: 18px; background: var(--cl-surface); }

/* ── tool steps: one monospaced line on a 10px rounded well ── */
html[data-look="code"] .tool, html[data-look="code"] .artlink {
  border-radius: 10px; background: var(--cl-well); box-shadow: none; margin: 6px 0;
}
html[data-look="code"] .tool-head { padding: 8px 12px; gap: 8px; font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--cl-ink2); }
html[data-look="code"] .tool-head .tname { font-weight: 600; color: var(--cl-ink2); }
html[data-look="code"] .tool-head .ic { width: 12px; height: 12px; color: var(--cl-muted); }
html[data-look="code"] .tool-head .tsum { color: var(--cl-muted); font-size: 12px; }
html[data-look="code"] .tool-body > div { font-size: 12px; }
html[data-look="code"] .tstat.done { background: var(--cl-signal); }
html[data-look="code"] .tstat.run { background: var(--cl-arc); }
html[data-look="code"] .tstat.fail { background: var(--cl-alert); }
html[data-look="code"] .thinking { font-size: 13px; color: var(--cl-muted); }
html[data-look="code"] .thinking .think-ic { color: var(--cl-arc); }
html[data-look="code"] .think-body > div { border-left: 1px solid var(--cl-hair2); }
/* cards that need a decision or carry a run: the app's glass cards (radius 18) */
html[data-look="code"] .perm, html[data-look="code"] .research, html[data-look="code"] .fr-card {
  border-radius: 18px; background: var(--cl-glass);
  -webkit-backdrop-filter: var(--cl-blur); backdrop-filter: var(--cl-blur);
  box-shadow: var(--cl-rim);
}
html[data-look="code"]:not([data-theme="dark"]) :is(.perm, .research, .fr-card) { box-shadow: inset 0 0 0 1px var(--cl-hair); }
/* a card waiting on you is brass-edged, as in the app */
html[data-look="code"] .perm:not(.approved) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-brass) 40%, transparent); }
html[data-look="code"] .src { border-radius: 999px; background: var(--cl-well); box-shadow: none; font-size: 12px; }
html[data-look="code"] .cap { border-radius: 999px; }
html[data-look="code"] .cap.primary { background: var(--cl-arc); color: var(--cl-on-arc); box-shadow: none; }

/* ── code: the monospaced footnote on a well ── */
html[data-look="code"] .cblock, html[data-look="code"] .codeblk { border-radius: 12px; background: var(--cl-well); box-shadow: inset 0 0 0 .5px var(--cl-hair); }
html[data-look="code"] .cblock pre { font-size: 13px; }
html[data-look="code"] .md code { background: var(--cl-well); }
html[data-look="code"] .cblock pre code, html[data-look="code"] .codeblk code { background: none; }
html[data-look="code"] .md a, html[data-look="code"] sup.cite { color: var(--cl-arc); }

/* ── the composer: one 52px capsule, + on the left, a 36px round send ── */
html[data-look="code"]:not(#eden-look) .jc-composer {
  border-radius: 26px; border: 0 !important; min-height: 52px; padding: 8px 6px 8px 10px;
  background: var(--cl-glass) !important;
  -webkit-backdrop-filter: var(--cl-blur) !important; backdrop-filter: var(--cl-blur) !important;
  box-shadow: var(--cl-rim), var(--cl-shadow) !important;
}
html[data-look="code"]:not([data-theme="dark"]):not(#eden-look) .jc-composer { box-shadow: inset 0 0 0 1px var(--cl-hair2) !important; }
/* typing tints the glass reactor-blue, as the app does while you compose */
html[data-look="code"]:not(#eden-look) .jc-composer:focus-within {
  box-shadow: inset 0 .8px 0 color-mix(in srgb, var(--cl-arc) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cl-arc) 42%, transparent), var(--cl-shadow) !important;
}
html[data-look="code"][data-theme="dark"]:not(#eden-look) .jc-composer:focus-within {
  background: linear-gradient(180deg, rgba(92,200,247,.10), rgba(92,200,247,.04)) !important;
}
html[data-look="code"] .jc-composer-top textarea { font-size: 16px; color: var(--cl-ink); }
html[data-look="code"] .jc-composer-top textarea::placeholder { color: var(--cl-muted); }
html[data-look="code"]:not(#eden-look) .jc-composer .jc-composer-row > :is(.jc-pill, #jc-ctx, #jc-plus) {
  border: 0; color: var(--cl-ink2);
  background: rgba(127,140,160,.14); box-shadow: inset 0 0 0 .5px rgba(127,140,160,.28);
}
html[data-look="code"] .jc-composer-row > .jc-pill { font-size: 12px; font-weight: 600; }
html[data-look="code"]:not(#eden-look) .jc-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cl-arc) !important; color: var(--cl-on-arc) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-look="code"]:not(#eden-look) .jc-send::before { content: none !important; }
html[data-look="code"]:not(#eden-look) .jc-send:hover { filter: brightness(1.08); }
html[data-look="code"]:not(#eden-look) .jc-send:disabled { opacity: 1; background: var(--cl-well) !important; color: var(--cl-muted) !important; }
html[data-look="code"]:not(#eden-look) .jc-send.stop { background: var(--cl-ink); color: var(--cl-bg); }
html[data-look="code"] .jc-popover { border-radius: 18px; }
html[data-look="code"] .jc-statusline { color: var(--cl-muted); }

/* ── buttons ── */
html[data-look="code"] .btn { border-radius: 12px; }

/* ── phones: the app's 20px margins; a solid capsule while typing, as mobile.css does ── */
@media (max-width: 640px) {
  html[data-look="code"] #transcript { padding-left: 12px; padding-right: 12px; }
  html[data-look="code"]:not(#eden-look) .jc-composer:focus-within { background: var(--cl-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html[data-look="code"] #sidebar.open { background: var(--cl-surface); }
  html[data-look="code"] .sugg { grid-template-columns: 1fr; }
}


/* Standalone askedencalendar.com full-window overrides */
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  padding: 8px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { left: 12px; }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Hide chat-only header actions in standalone calendar mode (keep .cal-chatbtn visible!) */
.cal-head .cal-acts .cal-use,
.cal-head .cal-acts > button[aria-label="Close calendar"] {
  display: none !important;
}

/* Clickable Eden Logo in the calendar header & Chat toggle button */
.eden-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 .5px var(--hairline);
  cursor: pointer;
  transition: transform .16s var(--spring), box-shadow .16s ease;
  flex-shrink: 0;
  overflow: hidden;
}
.eden-logo-btn:hover {
  transform: translateY(-0.5px);
  box-shadow: 0 3px 8px rgba(10, 132, 255, 0.2), inset 0 0 0 1px var(--accent);
}
.eden-logo-btn:active {
  transform: scale(0.95);
}
.eden-logo-btn[aria-pressed="true"],
#app.cal-chat .eden-logo-btn,
body.eden-chat-open .eden-logo-btn {
  box-shadow: 0 0 0 2px var(--accent);
}
.eden-logo-btn img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 8px;
}

.cal-head .cal-acts .cal-chatbtn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.cal-head .cal-acts .cal-chatbtn img.eden-chatbtn-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: block;
}

/* Right-side Eden Calendar Chat Sidebar (#center) */
#center.eden-chat-sidebar {
  display: none;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--sh1), inset 0 .5px 0 var(--rim), inset 0 0 0 .5px var(--hairline);
  overflow: hidden;
}
#app.cal-page.cal-chat #center.eden-chat-sidebar,
body.eden-chat-open #center.eden-chat-sidebar {
  display: flex;
  flex: none;
  width: clamp(360px, 30vw, 440px);
}
@media (max-width: 1000px) {
  #app.cal-page.cal-chat #center.eden-chat-sidebar,
  body.eden-chat-open #center.eden-chat-sidebar {
    position: fixed;
    z-index: 98;
    top: 8px;
    right: 8px;
    bottom: 8px;
    height: auto;
    width: min(390px, calc(100vw - 16px));
    padding: 0;
    border-radius: var(--r-lg);
    background: var(--glass);
    box-shadow: var(--sh2), inset 0 0 0 .5px var(--hairline);
  }
}

.eden-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: .5px solid var(--sep);
  flex-shrink: 0;
}
.eden-chat-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.eden-chat-brand img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex-shrink: 0;
}
.eden-chat-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.eden-chat-titles strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.2;
}
.eden-chat-titles span {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.2;
}
.eden-chat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eden-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: .5px solid var(--sep);
  flex-shrink: 0;
}
.eden-chat-chips .cap {
  font-size: 11px;
  padding: 4px 9px;
  height: auto;
  text-align: left;
}

.eden-chat-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eden-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 92%;
  font-size: 13px;
  line-height: 1.45;
}
.eden-chat-msg.is-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  padding: 9px 13px;
  border-radius: 15px 15px 4px 15px;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.18);
}
.eden-chat-msg.is-assistant {
  align-self: flex-start;
  background: var(--content);
  color: var(--text);
  padding: 10px 13px;
  border-radius: 15px 15px 15px 4px;
  box-shadow: inset 0 0 0 .5px var(--hairline), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.eden-chat-msg-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.eden-chat-card {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--content2);
  box-shadow: inset 0 0 0 .5px var(--hairline);
  border-left: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eden-chat-card-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.eden-chat-card-meta {
  font-size: 11.5px;
  color: var(--text2);
}
.eden-chat-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.eden-chat-card-acts .cap {
  font-size: 11px;
  padding: 3px 9px;
  height: 24px;
}

.eden-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: .5px solid var(--sep);
  background: color-mix(in srgb, var(--content) 82%, transparent);
  flex-shrink: 0;
}
.eden-chat-composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 110px;
  border: 0;
  border-radius: 12px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  background: var(--content2);
  box-shadow: inset 0 0 0 .5px var(--hairline);
  resize: none;
}
.eden-chat-composer textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.eden-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .14s ease, opacity .14s ease;
}
.eden-chat-send:hover {
  transform: translateY(-0.5px);
}
.eden-chat-send:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Give the time gutter enough room for 10:00 AM / 12:00 PM current-time pill */
.cal {
  --cal-gut: 58px;
}

/* Prevent view segmented control and Today nav from colliding on narrow screens */
@media (max-width: 640px) {
  .cal-head .cal-seg {
    flex: 1 1 100%;
    width: 100%;
  }
  .eden-account-email {
    max-width: 110px;
  }
}

/* Hide empty Mac / direct-Google local source groups in standalone Eden Calendar web app */
.cal-cals > .cal-src:nth-child(1),
.cal-cals > .cal-src:nth-child(2) {
  display: none !important;
}

.eden-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: .5px solid var(--sep);
}
.eden-account-email {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text2);
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AskEden Email Sign-In Gate Overlay over the Atelier Calendar Surface */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 28, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.auth-gate[hidden] {
  display: none !important;
}
.auth-card {
  width: min(420px, 100%);
  padding: 28px 26px;
  border-radius: 20px;
  text-align: center;
}
.auth-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--content);
  box-shadow: inset 0 0 0 .5px var(--hairline), 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 12px;
}
.auth-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}
.auth-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.45;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.auth-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}
.auth-form input[type="email"] {
  width: 100%;
  border: 0;
  background: var(--content2);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  box-shadow: inset 0 0 0 .5px var(--hairline);
}
.auth-form input[type="email"]:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 2px;
}
.auth-status {
  margin: 4px 0 0;
  min-height: 18px;
  font-size: 12.5px;
  color: var(--text2);
  text-align: center;
}
.auth-status.is-error {
  color: var(--danger);
}
.auth-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: .5px solid var(--sep);
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.45;
}

/* Minimal top/footer bar for accessibility & legal links (/privacy, /terms) */
.sr-chrome {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Legal pages (/privacy, /terms) */
body.legal-page {
  overflow: auto;
  height: auto;
  min-height: 100vh;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: .5px solid var(--sep);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang {
  display: inline-flex;
  gap: 6px;
  font-size: 12px;
}
.lang a {
  color: var(--text2);
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 6px;
}
.lang a[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
  background: rgba(120,120,128,.14);
}
.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px;
}
.legal h1 { font-size: 28px; margin: 0 0 16px; }
.legal h2 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 14px; color: var(--text2); line-height: 1.6; }
.foot {
  padding: 16px 24px;
  border-top: .5px solid var(--sep);
  font-size: 12px;
  color: var(--text2);
}
.foot-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.foot-links {
  display: flex;
  gap: 14px;
}