s that LOOK like buttons
but aren't
tags (the in-header burger / gear, toggle switches, color pickers, etc.) —
those weren't matched by the plain `button` selector and were the source of the "I-beam still
flickers on these specific buttons" report. */
button,a.s-btn,.mini,.sess-menu-btn,.sess-x,.s-btn,.cf-btns button,.arch-row button,.arch-foot button,.hold-menu button,.sess-menu-dd button,.lp-item,.sess-entry,.lp-grp-hdr button,.lp-header button,
.mob-burger,.mob-floating-btn,
.s-tog,.s-tog .knob,
.s-sec-h,
input[type="color"],input[type="range"],input[type="checkbox"],input[type="radio"],
.tab-btn,.t-tab,.sn-item,.sett-tab,
[role="button"]{
-webkit-user-select:none!important;user-select:none!important;
-webkit-tap-highlight-color:transparent!important;
-webkit-touch-callout:none!important;
}
/* Press-and-grow animation while finger is held down on a bubble (mobile only). The .holding class
is added on touchstart and removed on touchend / touchcancel / touchmove-aborted / menu-open.
The transform builds up over the same 500 ms window as the long-press timer, so the bubble feels
like it's "winding up" — by the time the menu pops, the bubble is at full scale, then snaps back. */
.bubble{transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s cubic-bezier(.2,.8,.3,1)}
@media (hover: none),(pointer: coarse){
.bubble.holding{transform:scale(1.045);box-shadow:0 12px 28px rgba(0,0,0,.18);z-index:10;transition:transform .42s cubic-bezier(.2,.8,.3,1),box-shadow .42s cubic-bezier(.2,.8,.3,1)}
}
/* Long-press context menu — used for both bubbles and session rows on mobile. Theme-aware (var(--bg2)
et al.) so it matches the golden / dark theme Ksena uses by default. Built dynamically each open
with items relevant to the long-pressed thing. Anchored near the touch point and clamped into the
viewport. Outside-tap closes it. */
/* Frosted-glass hold-menu — the bg2 gets mixed with transparent so the backdrop-filter blur
shows through. saturate(180%) keeps the chat colors underneath from washing out into a
flat gray sheet. The border + shadow stay subtle so the menu reads as a floating panel
instead of a hard rectangle. */
.hold-menu{position:fixed;background:color-mix(in srgb,var(--bg2) 72%,transparent);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(var(--ov),.14);border-radius:14px;padding:6px;z-index:9100;display:none;min-width:220px;max-width:280px;box-shadow:0 14px 44px rgba(0,0,0,.45);font-family:"Quicksand","DM Sans",sans-serif;animation:holdMenuIn .14s ease-out}
/* "Used: " header line at the top of the hold-menu for AI bubbles. Non-interactive
label, sits above the first action button with a soft divider. */
.hold-menu .hold-menu-info{padding:9px 14px 9px;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(var(--ov),.10);margin-bottom:4px}
.hold-menu.show{display:block}
@keyframes holdMenuIn{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.hold-menu button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--text);font-size:14px;padding:11px 14px;border-radius:9px;cursor:pointer;text-align:left;font-family:inherit;font-weight:500}
.hold-menu button:active{background:rgba(var(--ov),.08)}
.hold-menu button.danger{color:#d44040}
.hold-menu button.danger:active{background:rgba(180,40,40,.12)}
.hold-menu button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;display:block}
.hold-menu hr{border:none;border-top:1px solid rgba(var(--ov),.08);margin:4px 6px}
.day-sep{align-self:center;font-size:13px;padding:5px 12px;border-radius:14px;cursor:pointer;position:relative}
.typing-ind{display:none;align-items:center;gap:8px;padding:4px 16px;flex-shrink:0;box-shadow:0 -2px 8px rgba(var(--ov),.05)}
.typing-ind.show{display:flex}
.typing-ind .typing-dots{padding:0}
.typing-ind .typing-dot{background:var(--accent)}
.typing-ind .status-text{font-size:11px;color:var(--muted);font-style:italic;letter-spacing:.02em}
.typing-row{display:flex;align-items:center;padding:4px 0;opacity:0;animation:typingFadeIn .3s ease forwards}
/* Web-search typing state: the detective — a magnifier that pulses and drifts like it's
examining clues (Ksena 2026-05-14; deliberately NOT a spinner), plus a small status label. */
.search-scan{display:flex;align-items:center;gap:7px;padding:0 4px}
.search-mag{width:17px;height:17px;color:var(--accent);animation:magScan 2.2s ease-in-out infinite;transform-origin:center}
.search-label{font-size:11px;color:var(--muted);font-style:italic;letter-spacing:.02em}
@keyframes magScan{0%{transform:translate(0,0) scale(1)}18%{transform:translate(3px,-2px) scale(1.14)}38%{transform:translate(-2px,2px) scale(.94)}58%{transform:translate(2px,2px) scale(1.1)}78%{transform:translate(-3px,-1px) scale(1)}100%{transform:translate(0,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.search-mag{animation:none}}
/* ── Thinking pill (reasoning models) — collapsed chip above the reply; expands to a quote box
in smaller muted text. Ksena 2026-05-14, Claude-app style. */
.think-wrap{margin:0 0 8px}
.think-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(var(--ov),.06);border:1px solid rgba(var(--ov),.1);color:inherit;opacity:.75;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .12s,border-color .12s}
.tp-bulb{width:13px;height:13px;flex-shrink:0}
/* Reasoning-ON indicator in the top bar (her 2026-07-04 ask — a shining bulb, not a dot). */
.think-on-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 6px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.think-on-pill[hidden]{display:none}
.think-on-pill .tp-bulb{width:12px;height:12px;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 60%,transparent))}
.think-pill:hover{opacity:1;border-color:var(--accent)}
.think-chev{width:12px;height:12px;transition:transform .18s}
.think-wrap.collapsed .think-chev{transform:rotate(-90deg)}
.think-body{margin-top:6px;padding:8px 10px;border-left:2px solid rgba(var(--ov),.18);background:rgba(var(--ov),.04);border-radius:0 8px 8px 0;font-size:.85em;line-height:1.5;color:inherit;opacity:.75;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
.think-body::-webkit-scrollbar{width:6px}
.think-body::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
.think-wrap.collapsed .think-body{display:none}
/* ── Live Voice Mode (her design handoff 2026-07-03). Fidelity: high — tokens verbatim from the
README; fonts aligned to the app's existing serif/sans per its instruction. Light theme is the
default styling; dark overrides ride body[data-mode="dark"]. */
.vc-screen{position:fixed;inset:0;z-index:9500;background:#cfc2b0;overflow:hidden}
body[data-mode="dark"] .vc-screen{background:#000}
.vc-screen[hidden]{display:none}
/* vc-card: invisible full-bleed wrapper on mobile; the popup card on desktop (below). */
.vc-card{position:absolute;inset:0}
/* DESKTOP POPUP (2026-08-06, her ask — linn4jace LIVE CALL style): the screen becomes a glass
scrim blurring the app; the call itself lives in a centered rounded card. Mobile keeps the
full-screen takeover (a popup on a phone is just a smaller phone). */
@media (min-width:900px){
.vc-screen{background:rgba(30,24,14,.30);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}
body[data-mode="dark"] .vc-screen{background:rgba(14,9,3,.22)} /* light veil only — the blur does the work; .42 read as pitch black over the dark app */
.vc-card{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);height:min(680px,90vh);border-radius:26px;overflow:hidden;background:#cfc2b0;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 90px rgba(0,0,0,.5)}
body[data-mode="dark"] .vc-card{background:#050505;border-color:rgba(255,255,255,.09)}
}
.vc-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 55% at 50% -12%,rgba(255,255,255,.35),transparent 60%)}
body[data-mode="dark"] .vc-sheen{background:radial-gradient(130% 55% at 50% -12%,rgba(255,255,255,.09),transparent 60%)}
/* content overlay lets clicks fall through to the visualizer (tap canvas = cycle variant);
only the interactive clusters re-enable pointer events */
.vc-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 26px calc(24px + env(safe-area-inset-bottom));pointer-events:none} /* top 26→14 / bottom 40→24 (her 2026-07-07 layout pass: LIVE VOICE + panel higher, controls lower) */
.vc-top,.vc-panel,.vc-controls{pointer-events:auto}
/* Mid-call generated image card: expands in center-stage (scale+fade pop), rounded + shadowed;
sits between the panel and the controls, over the lifeline (which dips via its center attr). */
.vc-img{margin-top:6px;pointer-events:auto;opacity:0;transform:scale(.6) translateY(12px);transition:opacity .3s ease,transform .38s cubic-bezier(.2,.9,.3,1.18);z-index:8;max-width:min(78vw,400px)} /* margin 18→6 (her tweak: image higher, clear of the lifeline) */
.vc-img.in{opacity:1;transform:scale(1) translateY(0)}
.vc-img[hidden]{display:none}
.vc-img img{display:block;width:100%;max-height:36vh;object-fit:contain;border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
/* The rp-toggle chevron pierced the call screen on desktop — hide ALL of it while a call is up. */
body.kxd-on-call .rp-toggle{display:none!important}
.vc-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.vc-back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,251,238,.4);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#453a26;padding:0}
body[data-mode="dark"] .vc-back{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#f3e8d0}
.vc-live{font-family:'Quicksand','DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(69,58,38,.45)}
body[data-mode="dark"] .vc-live{color:rgba(243,232,208,.4)}
.vc-topspacer{width:40px}
/* Panel chrome FULLY retired (2026-08-06 round 2, her clarification): no outline, no glass
slab, no shadow — the name/timer/state float entirely clear over the visualizer. */
.vc-panel{margin-top:26px;padding:18px 34px;display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;box-shadow:none}
.vc-name{font-family:'Cormorant Upright',Georgia,serif;font-weight:600;font-size:34px;line-height:1;color:#1b2220} /* 40→34 per her 2026-07-07 layout pass */
body[data-mode="dark"] .vc-name{color:#344b43;text-shadow:0 2px 24px rgba(39,170,137,.35)}
.vc-timer{font-family:'Quicksand','DM Sans',sans-serif;font-size:12px;letter-spacing:.3em;color:rgba(69,58,38,.6)}
body[data-mode="dark"] .vc-timer{color:rgba(243,232,208,.55)}
/* state word: her gold in dark; light mode needs a dark warm brown — bright yellow drowned
on the light background (her note 2026-07-03) */
.vc-state{font-family:'Quicksand','DM Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#4a3f30}
body[data-mode="dark"] .vc-state{color:#ffae00}
.vc-controls{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:64px} /* 42→64 (her 2026-07-08: "don't be afraid" — more air between mute and hang-up) */
.vc-mute{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(69,58,38,.07);border:1px solid rgba(255,255,255,.6);color:rgba(69,58,38,.8);transition:background .15s,color .15s}
body[data-mode="dark"] .vc-mute{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);color:rgba(243,232,208,.85)}
.vc-mute.on{background:#ffae00;color:#fff8e6;border-color:transparent}
body[data-mode="dark"] .vc-mute.on{background:#ffae00;color:#221604}
.vc-mute .vc-slash{opacity:0;transition:opacity .15s}
.vc-mute.on .vc-slash{opacity:1}
.vc-end{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;border:none;background:#ffae00;color:#fff8e6;box-shadow:0 12px 32px rgba(255,174,0,.35)}
body[data-mode="dark"] .vc-end{color:#221604}
.vc-end svg{transform:rotate(135deg)}
/* open/close v2 (her note: the old scale-down showed the screen's edges). The screen never
scales now — a SOFT radial shadow swallows it from the edges inward (::before, oversized so
its rim always lies beyond the viewport), then flat black (::after) finishes the last beat.
Opening runs the bloom in reverse: black lifts first, then the shadow retreats outward. */
.vc-screen::before{content:'';position:absolute;inset:-70%;pointer-events:none;z-index:6;background:radial-gradient(circle at 50% 52%,rgba(0,0,0,0) 24%,rgba(0,0,0,.85) 46%,#000 62%);opacity:0;transform:scale(2.6);transition:transform .6s cubic-bezier(.45,.05,.35,1),opacity .35s ease .25s}
.vc-screen.vc-veiled::before{opacity:1;transform:scale(.62);transition:transform .6s cubic-bezier(.45,.05,.35,1),opacity .2s ease}
.vc-screen::after{content:'';position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:7;transition:opacity .28s ease}
.vc-screen.vc-veiled::after{opacity:1;transition:opacity .3s ease .32s}
@media (prefers-reduced-motion:reduce){.vc-screen::before,.vc-screen::after,.vc-card::before,.vc-card::after{transition:none}}
/* DESKTOP (2026-08-06, her "it's pitch black" report): the veil above covers the whole SCREEN —
on the popup layout that blacked out the glass scrim too. Move the bloom INSIDE the card
(same radial + flat-black two-beat, same timings); the blurred app behind stays visible. */
@media (min-width:900px){
.vc-screen::before,.vc-screen::after{display:none}
.vc-card::before{content:'';position:absolute;inset:-70%;pointer-events:none;z-index:6;background:radial-gradient(circle at 50% 52%,rgba(0,0,0,0) 24%,rgba(0,0,0,.85) 46%,#000 62%);opacity:0;transform:scale(2.6);transition:transform .6s cubic-bezier(.45,.05,.35,1),opacity .35s ease .25s}
.vc-screen.vc-veiled .vc-card::before{opacity:1;transform:scale(.62);transition:transform .6s cubic-bezier(.45,.05,.35,1),opacity .2s ease}
.vc-card::after{content:'';position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:7;transition:opacity .28s ease}
.vc-screen.vc-veiled .vc-card::after{opacity:1;transition:opacity .3s ease .32s}
}
@keyframes typingFadeIn{to{opacity:1}}
.typing-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-right:-8px;position:relative}
.typing-av:last-of-type{margin-right:6px}
.typing-dots{display:flex;align-items:center;gap:4px;padding:4px 0}
.typing-dot{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:dotSway 1.4s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes dotSway{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.drawing-stars{display:flex;align-items:center;gap:5px;padding:4px 0}
.drawing-star{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--accent);animation:starSway 1.4s ease-in-out infinite}
.drawing-star:nth-child(2){animation-delay:.2s}
.drawing-star:nth-child(3){animation-delay:.4s}
.drawing-star svg{width:100%;height:100%;display:block}
@keyframes starSway{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
.img-gen-error{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(220,80,80,.08);border:1px solid rgba(220,80,80,.25);border-radius:10px;margin-bottom:6px;font-size:13px}
.img-gen-error .err-icon{font-size:14px;opacity:.75}
.img-gen-error .err-text{flex:1;opacity:.8}
.img-retry-btn{padding:4px 10px;font-size:12px;background:var(--accent);color:#111;border:none;border-radius:8px;cursor:pointer;font-family:inherit;font-weight:600}
.img-retry-btn:hover{opacity:.9}
.img-retry-btn:disabled{opacity:.5;cursor:wait}
.fmt-wrap{display:flex;align-items:center;border-top:1px solid var(--border);background:var(--chrome);flex-shrink:0;min-width:0;max-width:100%}
.fmt-wrap[data-hidden="1"]{display:none}
.fmt-bar{display:flex;gap:2px;padding:6px 60px 0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;flex:1;min-width:0;scrollbar-width:none}
.fmt-bar::-webkit-scrollbar{display:none}
.fmt-arrow{width:18px;height:26px;border-radius:5px;background:none;border:none;color:var(--muted);display:none;place-items:center;cursor:pointer;flex-shrink:0;padding:0;opacity:.3;transition:opacity .15s;margin:0 1px}
.fmt-arrow:hover{opacity:1}
.fmt-arrow svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fmt-wrap.needs-scroll .fmt-arrow{display:grid}
.fmt-b{width:28px;height:26px;border-radius:5px;background:none;border:1px solid transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;font-family:'Crimson Text',serif;font-size:14px;font-weight:700;padding:0;transition:all .12s;flex-shrink:0}
.fmt-b:hover{color:var(--text);background:var(--ctrl);border-color:var(--ctrl-b)}
.fmt-b svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}
.fmt-sep{width:1px;height:18px;background:var(--border);margin:4px 3px;flex-shrink:0}
.composer{background:var(--chrome);padding:10px 14px;display:flex;gap:8px;align-items:center;position:relative}
/* ── + menu (composer actions dropdown) ─────────────────────────────────────────────
Opens UPWARD from the + button (composer sits at the bottom of the viewport).
Themed like the other dropdown panels: var(--ctrl) surface, soft shadow, 6px gold scrollbar
not needed (short list). Extensible: new actions = new .plus-menu-item rows. */
.plus-menu{position:absolute;bottom:calc(100% + 8px);left:14px;min-width:210px;background:var(--ctrl);border:1px solid var(--ctrl-b);border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,.22);z-index:1500;display:none;overflow:hidden;padding:4px}
.plus-menu.open{display:block;animation:plusMenuIn .16s cubic-bezier(.2,.8,.3,1)}
@keyframes plusMenuIn{0%{opacity:0;transform:translateY(6px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
.plus-menu-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s;user-select:none;-webkit-tap-highlight-color:transparent}
.plus-menu-item:hover{background:rgba(var(--ov),.08)}
.plus-menu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--muted)}
.plus-menu-item span:first-of-type{flex:1}
/* Mini toggle switch for on/off rows (web search) */
.plus-menu-switch{flex-shrink:0;width:32px;height:18px;border-radius:999px;background:rgba(var(--ov),.15);position:relative;transition:background .18s}
.plus-menu-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s}
.plus-menu-switch.on{background:var(--accent)}
.plus-menu-switch.on::after{left:16px}
/* Thinking power dropdown (2026-08-06 v2, her ask): a sub-row under the Thinking toggle,
expanding an app-styled option list — never a native select. Options adapt to the active
model's REAL supported levels (bridge catalog per-model / NanoGPT low-med-high). */
.plus-menu-effort{padding:0}
.plus-menu-effort[hidden]{display:none}
.pm-eff-head{display:flex;align-items:center;gap:8px;padding:8px 11px 8px 37px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--muted);user-select:none;-webkit-tap-highlight-color:transparent;transition:background .12s}
.pm-eff-head:hover{background:rgba(var(--ov),.08)}
.pm-eff-cur{margin-left:auto;color:var(--text);font-size:12px}
.pm-eff-chev{width:12px;height:12px;flex-shrink:0;transition:transform .15s}
.plus-menu-effort.open .pm-eff-chev{transform:rotate(180deg)}
.pm-eff-list{display:none;padding:0 4px 4px 33px}
.plus-menu-effort.open .pm-eff-list{display:block}
.pm-eff-opt{padding:6px 11px;border-radius:8px;font-size:12.5px;color:var(--text);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .12s}
.pm-eff-opt:hover{background:rgba(var(--ov),.08)}
.pm-eff-opt.on{color:var(--accent);font-weight:600}
/* + button states: rotate to × while the menu is open; gold + badge dot while web search is on */
#attachBtn svg{transition:transform .18s}
#attachBtn.menu-open svg{transform:rotate(45deg)}
#attachBtn{position:relative}
#attachBtn .ws-badge{display:none;position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--chrome)}
#attachBtn.ws-on{border-color:var(--accent);color:var(--accent)}
#attachBtn.ws-on .ws-badge{display:block}
/* Selection formatting mini-menu — floats centered above the pill while composer text is
selected. Same surface treatment as the + menu. */
.sel-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:none;gap:2px;background:var(--ctrl);border:1px solid var(--ctrl-b);border-radius:10px;padding:3px;box-shadow:0 8px 26px rgba(0,0,0,.22);z-index:1500}
/* Dedicated entrance keyframes: they MUST carry the translateX(-50%) centering — reusing
plusMenuIn overrode the base transform for 160ms, so the menu appeared right-of-center and
then SNAPPED to the middle when the animation released the transform (Ksena's "it jumps"). */
.sel-menu.show{display:flex;animation:selMenuIn .16s cubic-bezier(.2,.8,.3,1)}
@keyframes selMenuIn{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.97)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
/* Mobile: skipped entirely (Ksena's call, same as Discord) — the web platform has NO API to
join or outrank the native copy/paste selection toolbar; that's a native-app privilege. */
@media (hover:none),(pointer:coarse){.sel-menu{display:none!important}}
.sel-menu button{width:30px;height:30px;border:none;background:transparent;border-radius:7px;color:var(--text);cursor:pointer;font-size:13px;font-family:inherit;display:grid;place-items:center;padding:0}
.sel-menu button:hover{background:rgba(var(--ov),.08);color:var(--accent)}
/* ── ChatGPT-style composer button choreography ─────────────────────────────
Visibility is fully CSS-driven off .composer's data-cstate (+ .dictating override), so the
JS only ever flips one attribute/class and never touches style props. */
#micBtn,#voiceBtn,#sendBtn,#stopBtn,#dictCancelBtn{display:none}
.composer[data-cstate="empty"] #micBtn,.composer[data-cstate="empty"] #voiceBtn{display:grid}
.composer[data-cstate="typed"] #micBtn,.composer[data-cstate="typed"] #sendBtn{display:grid}
.composer[data-cstate="gen"] #micBtn,.composer[data-cstate="gen"] #stopBtn{display:grid}
.composer[data-cstate="gen-typed"] #sendBtn,.composer[data-cstate="gen-typed"] #stopBtn{display:grid}
.composer.dictating #micBtn,.composer.dictating #dictCancelBtn{display:grid!important}
.composer.dictating #voiceBtn,.composer.dictating #sendBtn,.composer.dictating #stopBtn{display:none!important}
/* Circular right-slot buttons (voice / send / stop) — round, icon-only */
/* padding:0 needs !important: .send-btn's legacy text-button padding (0 14px) is declared later
in the sheet and was shoving the arrow off-center inside the fixed-width circle. */
.comp-circle{border-radius:50%!important;width:38px!important;height:38px!important;min-width:38px;flex-shrink:0;padding:0!important}
.comp-circle svg{width:17px;height:17px}
#sendBtn.comp-circle{background:var(--accent);border-color:var(--accent);color:#1a1410;font-size:0}
#sendBtn.comp-circle:hover{filter:brightness(1.06)}
#stopBtn.comp-circle{background:var(--accent);border-color:var(--accent);color:#1a1410}
#stopBtn.comp-circle svg{width:14px;height:14px}
/* (Three orphan rules + a TRUNCATED, NEVER-CLOSED comment used to live right here — the broken
comment swallowed every rule down to the pills block, which is why the composer textarea spent
days wearing browser-default monospace + resize gripper + focus ring. Exorcised 2026-05-13.) */
/* Gold hover for the pill's ghost buttons — one of the exorcised fossils was accidentally
doing this for the mic and Ksena loved it ("a very pretty yellow"). Now it's intentional,
and the whole ghost family matches. ID selectors outrank .comp-btn:hover's var(--text). */
#attachBtn:hover,#emojiBtn:hover,#micBtn:hover,#dictCancelBtn:hover{color:var(--accent)}
.attach-preview{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 0;background:var(--chrome);align-items:flex-start}
.attach-preview:empty{display:none}
.attach-thumb{position:relative;width:60px;height:60px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.1);flex-shrink:0;border:1px solid rgba(var(--ov),.12)}
.attach-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.attach-thumb .x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:13px;line-height:1;text-align:center;cursor:pointer;border:none;padding:0;display:flex;align-items:center;justify-content:center}
.attach-thumb .x:hover{background:rgba(0,0,0,.85)}
.composer[data-hidden="1"]{display:none}
/* padding-y 13px = (44px height − 18px line box) / 2, so a single line sits EXACTLY on the
vertical center of the pill (Ksena's perfectionism itch, 2026-05-13). */
.comp-input{font-family:'Quicksand','DM Sans',sans-serif;font-size:15px;flex:1;background:var(--input-bg);border:1px solid var(--ctrl-b);color:var(--text);padding:13px 14px;border-radius:14px;outline:none;min-width:0;min-height:44px;max-height:120px;overflow-y:auto;line-height:1.2;box-sizing:border-box}
.comp-input::placeholder{color:var(--text-40)}
/* ── RICH COMPOSER (2026-07-08): the contenteditable div that replaced the textarea. It sizes
itself (min/max-height above — the old JS height juggling is retired for the composer).
white-space:pre-wrap renders \n and preserves spaces; :empty::before is the placeholder. */
.comp-rich{white-space:pre-wrap;word-break:break-word;caret-color:var(--text);cursor:text}
.comp-rich:empty::before{content:attr(data-placeholder);color:var(--text-40);pointer-events:none}
/* Pills inside the rich composer get their COLORS BACK (the thing she missed since the overlay
inversion): real colored text on a soft chip, atomic (contenteditable=false → deletes as one). */
/* iOS HARDENING (round 40): WebKit's user-select propagates into contenteditable children and can
leave them flaky to select/edit — the documented cure is to assert `text` on the editable itself.
This app has user-select:none scattered over every button-shaped thing (see the big rule near the
tap-chrome block) plus user-select:all on the pills below, so the composer sits in a neighbourhood
full of it. Stated explicitly here so the editable can never inherit or half-inherit the wrong
value — a candidate for her "tapping a misspelled word works maybe half the time". */
[contenteditable]{-webkit-user-select:text;user-select:text}
/* user-select:all → the pill is one selection unit: mouse/touch sweeps flow OVER it instead of
stopping dead at the contenteditable=false boundary (her report: double-click selection died at
the @mention), and tapping a pill selects it whole. */
/* Typography matches the .sc-tag example chips above the System Prompt (her 2026-07-08 spec: same
font size, weight, and in-chip padding as those; colors stay per-type). */
.comp-rich .pill{border-radius:6px;padding:2px 8px;margin:0 2px;font-size:10px;font-weight:600;line-height:1.2;box-shadow:none;white-space:nowrap;vertical-align:1px;-webkit-user-select:all;user-select:all}
.comp-rich .pill-mention{background:rgba(39,170,137,.16);color:#27aa89!important;-webkit-text-fill-color:#27aa89!important} /* Dieter's viridian — his story-ring color (her 2026-07-08 spec) */
.comp-rich .pill-slash{background:rgba(120,150,180,.22);color:#7396b8!important;-webkit-text-fill-color:#7396b8!important}
.comp-rich .pill-tag{background:rgba(180,140,90,.25);color:#b08a54!important;-webkit-text-fill-color:#b08a54!important}
/* Pills-in-textarea (Discord-style mention/slash/tag highlighting). The textarea is the input layer
AND renders the visible text; a sibling overlay div sized to inset:0 on the wrap mirrors the same
text invisibly, with @mentions / /commands / {tags} wrapped in .pill spans whose BACKGROUND chip is
the only painted part (see the inverted-layers note below). We deliberately do NOT pad/border the
pills — that would change their rendered width and de-align the chips from the textarea text. */
/* The pill renderer relies on the textarea and the overlay div rendering the SAME text at
pixel-identical positions. Two text-shaping pipelines threaten that:
1. Browsers apply kerning across the whole textarea text run, but the overlay breaks at
every boundary — so text touching a pill edge loses its kerning,
drifting the overlay's character positions a few pixels right of the textarea's by
the time you reach the bottom of a paragraph.
2. Ligatures (fi, fl, etc.) can also fire differently across the same run boundary.
Both end up showing as a "cursor offset" — backspace deletes characters before where the
caret visually sits — and as a faint ghost on selection. Disabling both shaping passes on
both elements forces glyph-by-glyph identical layout. Slight visual cost (kerning is gone)
but unavoidable for the textarea-over-overlay technique. */
.pill-wrap>textarea,.pill-overlay{font-kerning:none;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"kern" 0}
.pill-wrap{position:relative;display:block;width:100%}
/* In the composer (a flex row with attach + textarea + send/stop buttons) the wrap inherits the
textarea's old flex:1 slot. Other parents (sc-field divs in Settings) use the default block. */
.composer>.pill-wrap{flex:1;min-width:0;width:auto}
/* ── INVERTED LAYERS (2026-07-07, the "stuck cursor" fix) ─────────────────────────────────────
Previously the TEXTAREA's text was transparent and the overlay rendered the visible text. Any
wrap-point disagreement between the two rendering pipelines (which iOS still produced during
deletions, despite the kerning/ligature clamps) made the visible words sit on a different line
than the caret — Ksena's "the cursor is stuck inside another word / there's a ghost of the word"
while editing. Now the TEXTAREA renders its own visible text: caret and glyphs come from the SAME
engine, so they can never disagree, no matter how the layout reflows. The overlay's job shrinks to
painting the pill BACKGROUND chips (its text is fully transparent, pills included, so glyphs are
never double-drawn). Worst remaining failure = a chip tint a couple px off on a reflow edge case —
cosmetic, instead of the text itself lying about where it is. */
.pill-wrap>textarea{display:block;width:100%;position:relative;z-index:2;background:transparent!important;color:var(--text);caret-color:var(--text);-webkit-text-fill-color:var(--text)}
.pill-wrap>textarea::placeholder{color:var(--text-40);-webkit-text-fill-color:var(--text-40);opacity:1}
.pill-wrap>textarea::selection{background:rgba(242,192,91,.32)}
.pill-overlay{position:absolute;inset:0;pointer-events:none;color:transparent;z-index:1;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;font-family:inherit;font-size:inherit}
/* The pill chips: background + radius only. NO horizontal padding (width must stay = the text width)
and NO text color — the glyphs above them are the textarea's; the overlay only supplies the tint. */
.pill{border-radius:4px}
/* Transparent text applies ONLY to overlay chips (the textarea-mirror system, still used by the
System Core Prompt). The rich composer's pills are real visible text — see .comp-rich .pill. */
.pill-overlay .pill{color:transparent!important;-webkit-text-fill-color:transparent!important}
/* The inset ring (box-shadow paints INSIDE the box and never affects text layout — no ghost risk)
makes the chip read as a deliberate tag rather than a smudge, since the text itself can no longer
carry the colour (see inverted-layers note). */
.pill-mention{background:rgba(242,192,91,.30);box-shadow:inset 0 0 0 1px rgba(242,192,91,.5)}
/* Dust-blue chip for slash commands — soft slate that reads against the input bg without competing
with the gold mentions. */
.pill-slash{background:rgba(120,150,180,.30);box-shadow:inset 0 0 0 1px rgba(120,150,180,.5)}
/* Warm bronze chip for {template tags} — keeps the warm-but-soft vibe of the golden theme. */
.pill-tag{background:rgba(180,140,90,.32);box-shadow:inset 0 0 0 1px rgba(180,140,90,.55)}
.comp-btn{height:38px;min-width:38px;display:grid;place-items:center;background:var(--ctrl);border:1px solid var(--ctrl-b);color:var(--text);border-radius:10px;cursor:pointer}
.send-btn{padding:0 14px;font-weight:700;font-family:'Quicksand','DM Sans',sans-serif;font-size:14px}
/* ── Composer pill (Ksena's redesign 2026-05-17) ─────────────────────────────────────────────
The whole composer is ONE rounded pill: + inside the left edge, emoji/mic/voice-send cluster
inside the right edge, textarea transparent in between. All secondary buttons are borderless
ghosts; only voice/send/stop keep the accent circle. (The choreography/data-cstate rules and
the accent-circle styling live in the earlier "composer button choreography" block — this
block is the pill look + the states that used to sit in a duplicated copy of that block,
deduped 2026-05-17.) */
/* FROSTED FLOATING COMPOSER (her 2026-07-04 goal, the real Claude look): the composer floats
over the bottom of the messages via the absolutely-positioned .composer-dock; chat text scrolls
BEHIND it and shows through the frosted glass, muted, then disappears under it. Translucent bg +
backdrop-blur = the frost. --frost knob on .composer controls how see-through it is. */
/* Frosted floating pill. NO box-shadow glow (it leaked onto the side panels) — the "shadow" she
wants is the full-chat-width scrim behind it (see .panel-center::after below). */
/* CARET FIX round 32 (2026-08-12, her screenshot #1 — round 31's selection nudge did NOT cure it):
the frost used to sit on .composer itself, which made it a backdrop-filtered ANCESTOR of the
contenteditable #input. WebKit paints the caret of an editable into the wrong compositing layer
under exactly that condition — caret stranded above the pill, frozen mid-word while typing. The
glass now lives on a ::before instead, so no ancestor of #input carries a filter and the look is
unchanged. .composer takes z-index:1 so its ::before (z-1) still paints ABOVE .dock-scrim — its
own stacking context — rather than letting the scrim wash over the pill. Plain z-index makes a
stacking context but NOT a backdrop root, so ::before still samples the chat behind it. */
.composer{background:transparent;border:1px solid var(--ctrl-b);border-radius:26px;margin:0 10px 10px;padding:5px 9px;align-items:center;position:relative;z-index:1;--frost:40%}
.composer::before{content:'';position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--input-bg) var(--frost,40%),transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);z-index:-1;pointer-events:none}
/* Refused-send SHAKE (her 2026-07-08 call — replaces the "Stop the current reply first" toast):
the classic not-yet headshake. Applied by sendText when a send is blocked mid-generation. */
@keyframes kxShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.composer.shake{animation:kxShake .38s ease}
/* Desktop: the composer locks to the BUBBLE COLUMN width (770px, same as .messages' centered
content) instead of stretching to fill the panel — her 2026-07-08 note: hiding the right panel
or zooming out let the bar balloon across the whole space. Mobile keeps its own margins. */
@media(min-width:769px){.composer{width:calc(100% - 20px);max-width:770px;margin-left:auto;margin-right:auto}}
/* The dock holds the composer (+ reply/attach chrome) and floats it over the chat. */
.composer-dock{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none}
.composer-dock>*{pointer-events:auto}
/* THE SCRIM (her 2026-07-04 drawing): a full-chat-width gradient across the BOTTOM of the chat,
in the theme colour (--bg), dense at the very bottom and dissolving upward into transparent.
Sits BEHIND the composer (z4 < dock z6) and ABOVE the messages text (z auto) — so chat text
melts into the theme colour as it nears the bar, and the composer floats on top. Contained to
.panel-center, so it never leaks onto the side panels (unlike the box-shadow did). Tunable
--scrim-h (height). */
/* The scrim lives INSIDE the dock (z6) as its own element, so it's guaranteed above ALL message
content (action bars are z5, bubbles can create stacking contexts) and below the composer, which
paints on top of it. Full chat width, theme-colour gradient dissolving up. (Earlier it was a
.panel-center::after at z4 which the message layer could out-stack — that's why it "didn't work"
in the real app even though it looked right in the lab.) */
/* GLASS SCRIM (2026-08-06, her iOS-style ask): frosted blur rising from the composer, masked
to dissolve upward — messages melt into glass instead of into a black gradient. The colour
wash rides at half strength for text contrast; --scrim-a / --scrim-h stay her tuning knobs. */
.dock-scrim{position:absolute;left:0;right:0;bottom:0;height:var(--scrim-h,60px);background:linear-gradient(to top,color-mix(in srgb,var(--glass-tint-bot) calc(var(--scrim-a,100%) * 0.55),transparent),transparent);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);-webkit-mask-image:linear-gradient(to top,#000 25%,transparent);mask-image:linear-gradient(to top,#000 25%,transparent);pointer-events:none!important}
body.kxd-welcome .dock-scrim{display:none}
/* THE KEYBOARD SEAM (2026-08-12, her screenshot #2 — NOT the keyboard's own colour). While typing,
the body pins to the visual viewport: the app stops at the keyboard's top edge and the canvas
(html) fills the rest. Her lemon-theme test PROVED that canvas is ours — it follows the theme —
so the seam is a colour delta we can close, not native chrome.
v1 hid the scrim while the keyboard was up. That killed the seam but also killed the blur behind
the composer, which she uses and wants (her verdict) — so the scrim stays, and the CANVAS moves
to meet it instead: --kbd-canvas is --bg lifted by the same 55% wash the scrim's bottom carries,
so the two sides land on the same colour with the glass intact. In lemon the scrim's tint IS --bg
(see .dock-scrim above), so no lift is needed there. */
:root{--kbd-canvas:#190f05} /* golden canvas: #0a0703 under the scrim's 55% #261606 wash */
/* ── OUR OWN CARET (round 36) ─────────────────────────────────────────────────────────────────
Six rounds, six dead theories, then the probe answered it: caret rect t=425, input rect t=425,
DELTA 0. WebKit's geometry is EXACT — it just paints the blinking bar one status-bar height
(sat=59px) too high. Nothing reachable from CSS or JS controls that painter, and the fix isn't
worth her edge-to-edge PWA (round 24's translucent status bar is restored and staying).
So we hide the system caret and draw our own at the coordinates the probe PROVED correct. This
is the one approach that cannot miss: the same rect that measured DELTA 0 is the rect we paint
at, and a plain DOM element goes through the normal render path — the one that positions her
text correctly — instead of the broken caret painter.
Touch devices only; desktop's native caret is fine and keeps its drag/blink behaviour. */
body.kxd-owncaret #input{caret-color:transparent} /* the liar goes invisible; ours takes over */
/* SELECTION VISIBILITY IN THE RICH FIELDS (round 44). Her test settled that iOS ignores ::selection
outright — the blue she sees in plain textareas is iOS's OWN colour, not ours — and that it draws
contenteditable selections in its INACTIVE grey. On golden that grey all but merges with the
background, so she can select text and not see it. The colour is unreachable; the CONTRAST is not.
Rather than lightening the app (her words: "and I hate that"), the field lifts ONLY while a
selection is actually live, so nothing changes at rest. Dark theme only — she says lemon reads
fine already. Covers both rich fields, since #input and #scCorePrompt share .comp-rich. */
html:not(.th-lemon) .comp-rich.kxd-selbg{background:rgba(255,255,255,.15)!important;border-radius:12px}
.comp-rich{transition:background .12s ease}
/* SELECTION HIGHLIGHT (round 37, her ask; round 38 makes it actually take). The UA default grey
vanishes against golden's near-black — she could not see what she had selected.
WHY v1 FAILED: it set only `background`, on purpose, to leave each bubble's text colour intact.
But the CSSWG resolution Safari implements is "if there IS a colour in the author origin the UA
must respect it; if there ISN'T, the UA may apply magic" — background alone counts as no colour,
so Safari kept washing it back to its own grey. Both properties must be declared for Safari to
honour either. Solid accent + near-black text: legible in golden AND lemon, since both accents
(#f2c05b / #c9a44a) are light enough to carry dark text.
WHY v2 ALSO FAILED — no var() in here. Custom properties inside HIGHLIGHT pseudos are a very
recent capability (default-on only from Chrome 134; WebKit does not honour them), so Safari threw
`background:var(--accent)` away and fell straight back to grey. Her memory of "it used to be
golden" was real and is the tell: .pill-wrap>textarea::selection has always worked, and it uses a
LITERAL rgba. So these are literals too, with the theme split done by selector instead.
v3 STILL SHOWED DARK ON HER PHONE. Standing theory: WebKit-on-iOS ignores ::selection inside
EDITABLE fields and draws the system highlight, which reads dark rather than the familiar blue
because this app declares color-scheme:dark (the same declaration that keeps her keyboard dark).
Her Chrome-on-iOS test cannot separate the two — every iOS browser is WebKit underneath.
ROUND 42 puts that theory to the test instead of asserting it, since the scope she actually meant
is the COMPOSER (the typing field), not message bubbles. Explicit #input targeting does double
duty: if a page-wide rule was losing to something, this outranks it; if iOS is ignoring author
styling outright, this changes nothing and the theory is confirmed. Gold either way — a test does
not have to be ugly to be decisive (her point, and she is right). */
::selection{background:#f2c05b;color:#14100a}
::-moz-selection{background:#f2c05b;color:#14100a}
html.th-lemon ::selection{background:#c9a44a;color:#14100a}
html.th-lemon ::-moz-selection{background:#c9a44a;color:#14100a}
/* The composer, named outright — highest specificity we can give a highlight pseudo. `#input *`
covers text sitting inside child nodes (pills, formatting spans), which a bare #input::selection
would miss. */
#input::selection,#input *::selection{background:#f2c05b;color:#14100a}
#input::-moz-selection,#input *::-moz-selection{background:#f2c05b;color:#14100a}
html.th-lemon #input::selection,html.th-lemon #input *::selection{background:#c9a44a;color:#14100a}
/* THE ACTUAL GREY (round 41 — HER catch: "the classic iOS selection is blue, not grey", and desktop
was fine all along). On mobile .bubble is user-select:none (see the touch block near the top) so
long-pressing a message NEVER selects text — the custom hold-menu owns that gesture. What she was
seeing is therefore not a selection at all: it is WebKit's default tap highlight, a translucent
BLACK, applied because -webkit-tap-highlight-color is only zeroed on button-shaped elements and
nowhere else. Hence grey on phone, gold on desktop, and never iOS blue. Cure: paint the tap
highlight in the app's own gold. It inherits, so html covers everything; the button rules that
set `transparent!important` still win where a flash is unwanted. Literals, not var() — same
lesson as ::selection above. */
html{-webkit-tap-highlight-color:rgba(242,192,91,.28)}
html.th-lemon{-webkit-tap-highlight-color:rgba(201,164,74,.32)}
.kxd-caret{position:absolute;width:2px;border-radius:1px;background:var(--text);pointer-events:none;z-index:2;display:none}
body.kxd-owncaret .kxd-caret.on{display:block;animation:kxdCaretBlink 1.06s steps(1,end) infinite}
@keyframes kxdCaretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
html.th-lemon{--kbd-canvas:#eae7e0} /* lemon: tint == --bg already, canvas stays put */
/* Chat images are click-to-expand (lightbox) — show the zoom cursor as the affordance. */
.msg-imgs img{cursor:zoom-in}
.msg-imgs img.img-editing{cursor:default}
/* In-edit remove-image ✕ button overlaid on an attached image (shown while editing the linked text). */
.msg-imgs{position:relative}
.img-rm-x{position:absolute;top:4px;right:4px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:15px;line-height:24px;text-align:center;cursor:pointer;z-index:3;padding:0;display:flex;align-items:center;justify-content:center}
.img-rm-x:hover{background:rgba(200,40,40,.9)}
.comp-btn{background:transparent;border:none;color:var(--muted);border-radius:50%;transition:color .15s,background .15s}
.comp-btn:hover{color:var(--text);background:rgba(var(--ov),.08)}
.comp-input{background:transparent!important;border:none!important;padding:10px 6px}
.comp-input:focus{border:none}
#micBtn svg,#dictCancelBtn svg,#emojiBtn svg{width:18px;height:18px}
#sendBtn:disabled{opacity:.45;cursor:not-allowed}
#micBtn.recording{background:#e05050;color:#fff;border-color:#e05050;animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,80,80,.55)}50%{box-shadow:0 0 0 7px rgba(224,80,80,0)}}
/* Emoji lives in the pill's right cluster, always visible except while dictating. */
.composer.dictating #emojiBtn{display:none!important}
/* Voice-mode circle: Ksena's hand-picked golds per theme (2026-05-13).
Light (default root) #FFD280 with #F1C960 hover; dark #FFBC30 with the brightness hover. */
#voiceBtn.comp-circle{background:#FFD280;border:none;color:#1a1410}
#voiceBtn.comp-circle:hover{background:#F1C960;color:#1a1410}
body[data-mode="dark"] #voiceBtn.comp-circle{background:#FFBC30}
body[data-mode="dark"] #voiceBtn.comp-circle:hover{background:#FFBC30;filter:brightness(1.06)}
#voiceBtn.comp-circle svg{fill:currentColor;stroke:none}
/* Formatting toolbar retired (Ksena 2026-05-17: "I simply know how to format the text").
DOM + JS stay for the sister app cherry-pick parity; only the UI is gone. Emoji moved into the pill. */
.fmt-wrap{display:none!important}
/* Read-aloud speaker button states (action bar .mini). Loading = an iOS-style 12-spoke
"rice grain" spinner (SMIL-rotated SVG injected by _spin12On), not the icon twirling.
The icon-hide selectors use `>` so they can't hide the spinner's own nested svg. */
.actions-br .mini.playing{color:var(--accent)}
.actions-br .mini.playing svg{animation:ttsThrob 1s ease-in-out infinite}
.actions-br .mini{position:relative}
.actions-br .mini.loading>svg{display:none}
@keyframes ttsThrob{0%,100%{opacity:1}50%{opacity:.45}}
.spin12{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.spin12 svg{width:15px;height:15px;display:block}
#micBtn .spin12 svg{width:17px;height:17px}
/* Dictation: while TRANSCRIBING the mic goes neutral (recording red is only for recording)
with the same spoke spinner. */
#micBtn{position:relative}
#micBtn.transcribing{background:rgba(var(--ov),.08);color:var(--muted);animation:none}
#micBtn.transcribing>svg{display:none}
/* Stop-generating button. Lives next to Send. Disabled until typingIn[activeChat] has entries. */
.stop-btn{height:34px;min-width:34px;padding:0 10px;display:grid;place-items:center;border-radius:10px;cursor:pointer;background:rgba(180,40,40,.12);border:1px solid rgba(180,40,40,.28);color:#d44040;transition:opacity .15s,background .15s}
.stop-btn:disabled{opacity:.32;cursor:default;background:rgba(var(--ov),.04);border-color:rgba(var(--ov),.08);color:var(--muted)}
.stop-btn:not(:disabled):hover{background:rgba(180,40,40,.2)}
.stop-btn svg{width:14px;height:14px}
.rp-header{padding:18px 16px 14px;font-weight:600;position:sticky;top:0;z-index:1;background:rgba(var(--ov),.02);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center;font-family:'Cormorant Upright',Georgia,serif;font-size:17px;letter-spacing:.02em}
.rp-body{flex:1;overflow-y:auto;min-width:260px}
.rp-avatar-area{padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.rp-av{width:72px;height:72px;border-radius:50%;background:rgba(var(--ov),.06);display:grid;place-items:center;font-weight:700;font-size:26px;color:var(--text-88);overflow:hidden;cursor:pointer;border:2px solid rgba(var(--ov),.1);transition:border-color .2s}
.rp-av:hover{border-color:rgba(var(--ov),.2)}
.rp-av img{width:100%;height:100%;object-fit:cover}
.rp-av-name{font-size:18px;font-weight:600;font-family:'Cormorant Upright',Georgia,serif}
.rp-av-btns{display:flex;gap:6px}
.s-sec{border-bottom:1px solid rgba(var(--ov),.05)}
.s-sec-h{padding:10px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);transition:color .15s}
.s-sec-h:hover{color:var(--text)}
.s-sec.collapsed .s-sec-b{display:none}.s-sec.collapsed .arr{transform:rotate(-90deg)}
.s-sec-b{padding:6px 16px 12px}
.s-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;gap:8px;flex-wrap:wrap}
.s-lbl{flex:1;font-size:12px;min-width:60px}
.s-tog{position:relative;width:36px;height:20px;background:rgba(var(--ov),.06);border-radius:10px;cursor:pointer;border:1px solid rgba(var(--ov),.08);transition:background .2s;flex-shrink:0}
.s-tog.on{background:rgba(122,106,58,.6)}.s-tog .knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:left .2s}
.s-tog.on .knob{left:18px}
.s-clr{width:28px;height:20px;border:1px solid rgba(var(--ov),.08);border-radius:5px;cursor:pointer;padding:0;overflow:hidden;flex-shrink:0}
.s-clr input{width:100%;height:100%;border:none;cursor:pointer;padding:0}
.s-rng{width:85px;accent-color:var(--accent);flex-shrink:0}
.s-val{width:30px;text-align:right;font-size:10px;color:var(--muted);font-family:'JetBrains Mono',monospace;flex-shrink:0}
.s-sel{background:rgba(var(--ov),.04);color:var(--text);border:1px solid rgba(var(--ov),.08);border-radius:7px;padding:3px 6px;font-size:11px;font-family:inherit;cursor:pointer;max-width:165px}
/* (.s-font-sel rules removed — no more native in Appearance; .fancy-sel handles
font dropdowns via opts.optStyleFn = function(v){return 'font-family:'+v} so each option
previews itself, and the closed-trigger mirrors the selected option's style.) */
.s-sel option{padding:4px 6px;font-size:14px}
.s-inp{background:rgba(var(--ov),.04);color:var(--text);border:1px solid rgba(var(--ov),.08);border-radius:7px;padding:4px 8px;font-size:12px;font-family:inherit;width:100px;outline:none}
.s-btn{background:rgba(var(--ov),.04);color:var(--text);border:1px solid rgba(var(--ov),.08);border-radius:7px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:inherit;font-weight:600;transition:all .15s}
.s-btn:hover{background:rgba(var(--ov),.08)}
.s-btn.danger{background:rgba(180,40,40,.15);border-color:rgba(180,40,40,.25);color:#d44040;font-weight:700}
.icon-pick{width:30px;height:30px;border-radius:7px;background:rgba(var(--ov),.04);border:1px solid rgba(var(--ov),.06);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;transition:all .15s}
.icon-pick:hover{color:var(--text);background:rgba(var(--ov),.08)}
.icon-pick.sel{border-color:var(--accent);color:var(--accent);background:rgba(242,192,91,.10)}
.icon-grid{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
.icon-grid .icon-pick{position:relative}
.icon-grid .icon-pick svg{width:14px;height:14px}
.icon-grid .icon-pick img{width:14px;height:14px;object-fit:cover;border-radius:50%}
.icon-grid .icon-pick .ico-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:9px;padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:10;margin-bottom:4px}
.icon-grid .icon-pick:hover .ico-tip{display:block}
.s-sub{font-size:10px;color:var(--muted);padding:6px 0 2px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* Reply preview (redesigned 2026-07-09, her call): the old full-width square strip predated the
floating composer pill and clashed with it. Now it's a matching frosted chip hovering just above
the pill — same glass (frost + blur + ctrl border), same width/centering rules, rounded 18. */
.reply-bar{display:none;align-items:center;gap:10px;padding:7px 12px;margin:0 10px 6px;border:1px solid var(--ctrl-b);border-radius:18px;background:color-mix(in srgb,var(--input-bg) var(--frost,40%),transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
@media(min-width:769px){.reply-bar{width:calc(100% - 20px);max-width:770px;margin-left:auto;margin-right:auto}}
.reply-bar.active{display:flex}
.reply-bar-color{width:3px;height:30px;border-radius:2px;flex-shrink:0}
.reply-bar-content{flex:1;overflow:hidden}
.reply-bar-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar-text{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar-close{width:24px;height:24px;border-radius:50%;background:none;border:1px solid var(--ctrl-b);color:var(--muted);font-size:16px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;padding:0;line-height:1}
.reply-bar-close:hover{color:var(--text);background:var(--ctrl)}
.reply-quote{margin-bottom:8px;padding:6px 10px;border-left:3px solid #888;border-radius:0 8px 8px 0;background:rgba(var(--ov),.06);cursor:pointer;overflow:hidden;max-width:100%;box-sizing:border-box;word-break:break-word}
.reply-quote-name{font-size:11px;font-weight:600;margin-bottom:2px}
.reply-quote-text{font-size:13px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.crop-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9960;padding:16px}
.crop-ov.show{display:flex}
.crop-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:16px;width:320px;max-width:96vw}
.crop-wrap{position:relative;width:260px;height:260px;margin:8px auto;border-radius:12px;border:1px solid var(--border);background:#050505;overflow:hidden;touch-action:none}
#cropCanvas{width:100%;height:100%;display:block}
.crop-guide{pointer-events:none;position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 100vmax rgba(0,0,0,.35);border:2px dashed rgba(var(--ov),.35)}
.crop-ctrls{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap;justify-content:center}
/* Toast redesigned 2026-07-08 (her spec): subtle and delicate — a small single-line pill floating
just above the composer bar instead of the old chunky banner at the top. Slides up on show. */
.toast{position:fixed;bottom:calc(var(--dock-h,84px) + 12px);left:50%;transform:translateX(-50%) translateY(8px);background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-88);border:1px solid var(--border);padding:5px 14px;border-radius:999px;font-size:11px;letter-spacing:.02em;opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap;max-width:min(86vw,520px);overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.confirm-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9998}
.confirm-ov.show{display:flex}
.confirm-box{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:20px 24px;width:300px;max-width:90vw;text-align:center}
.confirm-box p{margin:0 0 16px;font-size:16px}
.cf-btns{display:flex;gap:10px;justify-content:center}
.cf-btns button{padding:8px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--ctrl-b);font-family:inherit}
.cf-cancel{background:var(--ctrl);color:var(--text)}.cf-ok{background:#6b2a2a;color:#f3eee8;border-color:#8a3a3a}
.messages::-webkit-scrollbar,.rp-body::-webkit-scrollbar,.lp-list::-webkit-scrollbar,.comp-input::-webkit-scrollbar{width:6px}
.messages::-webkit-scrollbar-thumb,.rp-body::-webkit-scrollbar-thumb,.lp-list::-webkit-scrollbar-thumb,.comp-input::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
@media(max-width:768px){
/* Session panel: a little wider than the old flat 280px, but capped so a gap stays on the
right (her 2026-07-04 ask — don't cover the whole screen). */
.panel-left{position:fixed;left:0;top:0;bottom:0;z-index:301;width:88vw;max-width:330px;min-width:0;transform:translateX(-100%);transition:transform .3s;box-shadow:4px 0 20px rgba(0,0,0,.5);will-change:transform}
.panel-left.show{transform:translateX(0)}
.lp-header span,.lp-nm,.lp-info{display:block!important}
.lp-item{padding:10px 12px;justify-content:flex-start}
/* Mirrors the left panel (88vw / max 330px, chat visible behind + overlay) instead of the old
full-screen 100vw takeover — her 2026-07-07 ask: "slide out the same way the left panel does". */
.panel-right{position:fixed;right:0;top:0;bottom:0;z-index:300;width:88vw;max-width:330px;min-width:0;transform:translateX(100%);transition:transform .3s;box-shadow:-4px 0 20px rgba(0,0,0,.5);background:var(--bg2)!important;will-change:transform}
.panel-right.show{transform:translateX(0)}
.panel-center{min-width:0;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column}
.messages{flex:1;overflow-y:auto;padding:14px 10px;min-height:0;padding-bottom:0}
.messages::after{height:var(--dock-h,78px)} /* same spacer-not-padding fix, mobile fallback height */
/* Mobile: the scrim reads too short vs desktop, so it's taller here (her 2026-07-06 tuning: 100px). */
/* 100→132px (2026-08-06): her verdict — 132 is perfect. (A 180 experiment lived for one
deploy; she never asked for it. Don't "improve" this number again without her saying so.) */
.dock-scrim{height:132px}
.mob-burger{display:grid!important}
/* Floating buttons appear only when the body is in welcome-state. body.kxd-welcome is toggled by showEmptyState/showChatState. */
body.kxd-welcome .mob-floating{display:flex;position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:0;right:0;padding:0 12px;justify-content:space-between;z-index:50;pointer-events:none} /* fixed ignores body/panel padding — it adds the status-bar inset itself (her round 14: the burger drowned under the clock) */
body.kxd-welcome .mob-floating .mob-floating-btn{pointer-events:auto}
body.kxd-welcome:has(.memory-page) .mob-floating{display:none} /* Dream Journal only (her call): the burger sat ON the ← Home button — Home wins there */
.rp-header{display:flex;align-items:center;justify-content:center;position:relative}
.rp-close{display:grid}
.cp-statusbar{padding:6px 12px 2px}
.cp-chatbar{padding:8px 10px 10px}
/* Bigger gap between the menu button and Dieter's avatar/title (her 2026-07-04 note). */
.cp-hdr-left{margin-left:12px;gap:9px}
.cp-hdr-right .hdr-btn{width:28px;height:28px}
.fmt-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding:6px 6px 0;gap:1px}
.fmt-wrap{flex-shrink:0}
.fmt-b{width:32px;height:30px;flex-shrink:0}
.composer{padding:8px 10px;flex-shrink:0}
/* 16px = the comfortable phone-input standard; padding-y 10px centers the 19.2px line box
in the 40px field (same centering math as desktop). */
.comp-input{font-size:16px;padding:10px 12px;min-height:40px}
.send-btn{font-size:14px;padding:0 10px}
.comp-btn{height:34px;min-width:34px}
.lp-themes{padding:8px 10px 14px}
.cp-av-stack .cp-av{width:30px;height:30px;font-size:12px}
.cp-name{font-size:13px}
.cp-presence{font-size:11px}
.reply-bar{flex-shrink:0}
.typing-ind{flex-shrink:0;padding:0 14px}
.cp-header{flex-shrink:0}
/* AI image bubbles: the inline style sets max-width:320px, which overflows on a ~360px-wide phone
where the bubble itself is capped at 72%. Constrain to 100% of bubble width on mobile. */
.bubble .msg-imgs.natural img{max-width:100%!important;height:auto!important}
/* Mobile keyboards have built-in emoji input — the picker button is redundant. */
.fmt-emoji-only{display:none!important}
/* Mobile UI font bumps (~+10%) — bubble + name fonts are scaled in applyRowStyle (JS) since they're inline-styled.
The rules below catch CSS-level UI text that's still too small on a phone. !important is needed because
several desktop defaults (.sc-label, .sc-input, .lp-preview …) are declared later in the source than this
media block — without !important they'd overwrite our mobile-targeted bumps. */
/* (Composer font/padding consolidated into the earlier mobile block — single source.) */
.lp-nm{font-size:14px!important}
.lp-preview{font-size:12px!important}
/* Session list text was too small on a phone (her 2026-07-04 note). */
.sess-entry .sess-name{font-size:14px!important}
.sess-entry .sess-preview{font-size:12.5px!important}
.cp-name{font-size:14px!important}
.cp-presence{font-size:12px!important}
.bubble .meta{font-size:12px!important}
.sn-item{font-size:12px!important}
.sc-input{font-size:14px!important}
.sc-label{font-size:12px!important}
/* Composer pill (her 2026-07-07 tuning):
- side margins 5px → 9px (the bar was touching the screen edges too much);
- gap 8px → 4px + input side padding 6px → 2px (the empty seams between the +/mic buttons
and the text were too wide);
- bottom lift stays generous while the chat is just open (readability/clickability above the
home-indicator), but COLLAPSES when the soft keyboard is up — see body.kxd-kbd below. */
.composer{margin:0 13px calc(7px + env(safe-area-inset-bottom,0px));padding:4px 9px;gap:4px} /* 9px read as "same as before" to her — 13px makes the inset visible */
.reply-bar{margin:0 13px 6px} /* frosted reply chip tracks the composer's mobile side margins */
.comp-input{padding:10px 2px}
/* Soft keyboard open (body.kxd-kbd, set from a visualViewport listener): the keyboard covers the
home-indicator zone, so the safe-area lift is dead space — drop the body's safe-area padding and
pull the composer down to a slim 6px so it sits snug on the keyboard (her yellow-wave note). */
body.kxd-kbd{padding-bottom:0}
body.kxd-kbd .composer{margin-bottom:6px}
/* Round 30b (the pill's second verdict, cb 846 vs body h476): the body pins to the visual
viewport while typing, but .panel-center was still 100dvh (852 — iOS dvh ignores the
keyboard) and carried the composer dock right past the body's bottom. While the keyboard
is up, the column obeys its shrunken parent. */
body.kxd-kbd .panel-center{height:100%}
/* The theme orbs (.lp-themes) are the BOTTOMMOST left-panel element, so THEY carry the
safe-area lift above the iPhone home-indicator zone — padding the footer only lifted
General and left the orbs stranded low (Ksena). Footer returns to its normal spacing. */
.lp-themes{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
/* Keep the circles actually CIRCULAR on phones (the 34px comp-btn height was squishing the
38px-wide voice button into an oval). */
.comp-circle{width:34px!important;height:34px!important;min-width:34px}
}
/* Emoji picker button is desktop-only — phones have a native emoji keyboard (same reasoning
as the retired toolbar's fmt-emoji-only rule). */
@media (pointer:coarse){#emojiBtn{display:none!important}}
/* Backend login overlay (Phase 6) — shown only when /api/me reports unauthenticated. */
/* Dark-golden login screen (matches Ksena's default golden theme so the moment she opens
the app she sees something cohesive). The overlay uses a deep brown gradient; the card
sits on top of it in dark brown with a warm gold accent. */
#kxdLoginOverlay{display:none;position:fixed;inset:0;background:linear-gradient(180deg,#191610 0%,#0a0703 100%);align-items:center;justify-content:center;z-index:99999;font-family:'Quicksand','DM Sans',sans-serif}
#kxdLoginOverlay.show{display:flex!important;visibility:visible!important}
#kxdLoginOverlay *{visibility:visible!important;pointer-events:auto!important}
body.kxd-needs-login>*{visibility:hidden!important;pointer-events:none!important}
body.kxd-needs-login>#kxdLoginOverlay{visibility:visible!important;pointer-events:auto!important}
body.kxd-needs-login>script,body.kxd-needs-login>style{visibility:hidden} /* harmless — neither has rendered output */
.kxd-login-card{background:#191610;padding:36px 40px;border-radius:16px;max-width:380px;width:90%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 24px rgba(242,192,91,.08);border:1px solid #3a2f1a}
.kxd-login-card h2{font-size:34px;color:#f2c05b;margin:0 0 4px;font-family:'Great Vibes','GreatVibesFallback',Georgia,serif;font-weight:400;letter-spacing:.5px}
.kxd-login-sub{color:#ccbea2;font-size:13px;margin:0 0 22px}
.kxd-login-card input{width:100%;padding:12px 14px;background:#0d0a05;border:1px solid #3a2f1a;color:#e5e2db;border-radius:10px;font-size:14px;outline:none;box-sizing:border-box;font-family:inherit;transition:border-color .15s,box-shadow .15s;margin-top:10px}
.kxd-login-card input:first-of-type{margin-top:0}
.kxd-login-card input:focus{border-color:#f2c05b;box-shadow:0 0 0 3px rgba(242,192,91,.18)}
.kxd-login-card input::placeholder{color:#80703a}
/* The :not(.pw-toggle) is the bug fix Ksena spotted in the screenshot — without it, the eye toggle
inherits Enter's full-width gold styling and becomes a giant bar covering the password input.
Now Enter alone gets the big-button styling; the eye button keeps its compact sit-on-the-right look
from the global .pw-toggle rules. */
.kxd-login-card button:not(.pw-toggle){margin-top:14px;width:100%;padding:12px;background:#f2c05b;color:#1a1410;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,box-shadow .15s;letter-spacing:.3px}
.kxd-login-card button:not(.pw-toggle):hover{background:#d4a045;box-shadow:0 4px 14px rgba(242,192,91,.32)}
.kxd-login-card button:not(.pw-toggle):disabled{opacity:.55;cursor:wait}
#kxdLoginErr{color:#e07070;font-size:12px;margin-top:10px;min-height:14px}
/*
* KxD messenger layer — COPIED VERBATIM from ../ksenaxdieter/index.html
*
* Second \3c style> block. Same rule as kxd-base.css: do not retype or tidy.
*/
/* Hide What's New system */
/* Chat contact styles */
.lp-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ov),.16) 50%,transparent);margin:6px 16px} /* fade-both-ends hairline (her round 13: "it looks classy") */
/* Sticky-pin Ksena's self indicator at the top of the chats list so she stays visible while
the rest of the list scrolls underneath. position:sticky with top:0 anchors it to the
scroll container's edge.
IMPORTANT: opacity must NOT be on the element itself — that makes the entire box (including
its background) translucent and chat items behind would bleed through. Apply the dim only
to text/icons via .lp-self:not(.active) > * {opacity:.7}, keep the box bg fully opaque. */
.lp-self{position:sticky;top:0;z-index:5;background:var(--bg2);padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;margin:0 10px;border:1px solid transparent;transition:background .15s}
.lp-self:not(.active) > *{opacity:.7;transition:opacity .15s}
.lp-self.active{background:color-mix(in srgb,var(--accent) 8%,var(--bg2));border-color:color-mix(in srgb,var(--accent) 10%,var(--border))}
.lp-self .lp-av{width:38px;height:38px}
.lp-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.lp-time{font-size:10px;color:var(--muted);margin-left:auto;flex-shrink:0}
.lp-grp-hdr{padding:8px 16px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.lp-grp-hdr button{background:none;border:none;color:var(--accent);font-size:16px;cursor:pointer;padding:0 4px;font-weight:700}
/* Group creation overlay */
.grp-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9990}
.grp-ov.show{display:flex}
.grp-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:340px;max-width:95vw;padding:24px}
.grp-card h3{font-family:'Cormorant Upright',Georgia,serif;color:var(--accent);font-size:18px;margin-bottom:16px;text-align:center}
.grp-card label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13px}
.grp-card input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.grp-card input[type=text]{width:100%;background:var(--input-bg);border:1px solid var(--ctrl-b);color:var(--text);border-radius:10px;padding:9px 13px;font-family:inherit;font-size:13px;outline:none;margin-bottom:12px}
.grp-btns{display:flex;gap:8px;margin-top:16px}
.grp-btns button{flex:1;padding:10px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--ctrl-b)}
.grp-btn-cancel{background:var(--ctrl);color:var(--text)}
.grp-btn-create{background:var(--accent);color:#111;border-color:var(--accent)}
/* Autocomplete */
.ac-popup{position:absolute;bottom:100%;left:14px;right:80px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:none;box-shadow:0 -4px 16px rgba(0,0,0,.4);z-index:10;margin-bottom:4px}
.ac-popup.show{display:block}
.ac-item{padding:8px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;transition:background .1s}
.ac-item:hover,.ac-item.selected{background:rgba(var(--ov),.06)}
.ac-item .ac-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ac-item .ac-cmd{font-family:'Menlo','Consolas',monospace;font-size:13px;font-weight:600;color:#7396b8} /* matches the slash pill's blue (her 2026-07-08 spec — list and pill agree) */
/* AI settings sections in right panel */
.ai-s-section{padding:8px 16px 12px;border-bottom:1px solid rgba(var(--ov),.05)}
.ai-s-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.ai-s-field{margin-bottom:10px}
.ai-s-label{font-size:11px;color:var(--muted);margin-bottom:4px;display:block}
.ai-s-input{width:100%;background:rgba(var(--ov),.04);color:var(--text);border:1px solid rgba(var(--ov),.08);border-radius:7px;padding:6px 10px;font-size:12px;font-family:inherit;outline:none}
.ai-s-input:focus{border-color:var(--accent)}
textarea.ai-s-input{min-height:70px;resize:vertical;line-height:1.4}
/* Emoji picker — horizontal category tab strip + search + scrollable body with category sections.
Layout (top to bottom): cat-tabs | search | body. Body scrolls; tabs and search are pinned. */
.emoji-pop{position:fixed;background:var(--bg2);border:1px solid var(--border);border-radius:12px;z-index:9980;box-shadow:0 8px 24px rgba(0,0,0,.5);width:360px;max-width:calc(100vw - 24px);height:400px;display:none;flex-direction:column;overflow:hidden}
.emoji-pop.show{display:flex}
.emoji-cats{display:flex;border-bottom:1px solid var(--border);padding:0 4px;flex-shrink:0;background:var(--bg2)}
.emoji-cat{flex:1;height:38px;background:none;border:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;border-radius:0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:inherit}
.emoji-cat svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emoji-cat:hover{color:var(--text)}
.emoji-cat.active{color:var(--accent);border-bottom-color:var(--accent)}
.emoji-search{padding:8px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative}
.emoji-search input{width:100%;background:var(--input-bg);border:1px solid var(--ctrl-b);color:var(--text);border-radius:8px;padding:6px 10px 6px 30px;font-family:inherit;font-size:13px;outline:none;box-sizing:border-box}
.emoji-search input:focus{border-color:var(--accent)}
.emoji-search::before{content:'';position:absolute;left:18px;top:50%;width:14px;height:14px;margin-top:-7px;background:url("data:image/svg+xml;utf8, would have rendered an
un-stylable OS popup (native popups on Chromium Windows ignore most CSS, which
is why the Settings → Appearance dropdowns looked light-on-white in the dark theme).
Mirrors .model-pick's visual style but for value/label option lists. Wraps a hidden