/* GBR — developer chat UI · depends on ../../colors_and_type.css */

/* Canon ratio tokens — proportional scaling within perceptual bounds.
   Grid flows with viewport (vw); clamp() caps floor for readability + ceiling for ultrawide drift.
   See feedback_web_canon_ratio_principle.md. */
:root {
  --shell-rail: clamp(220px, 16vw, 290px);
  --shell-side: clamp(260px, 18vw, 340px);
  /* Reinforce the sans stack with Pretendard (Korean) and explicit system fallbacks.
     Brave fingerprinting can silently block Google Fonts (Geist) — without a Korean-
     aware fallback chain, host-specific metrics shift main column width and the
     admin 3-col layout (.ch-shell.dev) collapses. Override colors_and_type.css's
     --font-sans so every descendant of .ch-shell inherits the safer stack. */
  --font-sans: 'Pretendard Variable', 'Pretendard', 'Geist', 'Söhne', 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

/* Default = guest layout (2-col). `.dev` modifier expands to 3-col for admins. */
.ch-shell { display: grid; grid-template-columns: var(--shell-rail) 1fr; height: 100vh; height: 100dvh; background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-sans); overflow: hidden; }
.ch-shell.dev { grid-template-columns: var(--shell-rail) 1fr var(--shell-side); }

/* ---- Hamburger (header) + Rail close button (in-rail) ---- */
.ch-hamburger {
  display: none;  /* shown via media query on mobile */
  background: transparent; border: 0; color: var(--fg-2);
  width: 36px; height: 36px; font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: var(--r-2);
}
.ch-hamburger:hover { background: var(--bg-elevated); color: var(--fg-1); }
.ch-rail-close {
  margin-left: auto; background: transparent; border: 0; color: var(--fg-4);
  width: 28px; height: 28px; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 3px;
  display: none;  /* shown via media query on mobile */
}
.ch-rail-close:hover { color: var(--fg-1); background: var(--bg-elevated); }

/* backdrop element (always present in DOM, only visible when rail open on mobile) */
.ch-rail-backdrop { display: none; }

/* ---- Mobile (≤ 820px): rail is a drawer, side panel hidden ----
   Both .ch-shell AND .ch-shell.dev must be re-declared here. Specificity of
   .ch-shell.dev (0,2,0) outranks the base .ch-shell (0,1,0) rule, so without
   the joint selector admin users keep the 3-col template even on mobile and
   the main column gets squeezed to ~0. */
@media (max-width: 820px) {
  .ch-shell,
  .ch-shell.dev { grid-template-columns: 1fr; position: relative; }
  .ch-side { display: none; }

  .ch-rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 84vw; max-width: 320px;
    z-index: 50;
    transform: translateX(-100%); transition: transform .2s ease;
    background: var(--bg-canvas);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  .ch-shell.rail-open .ch-rail { transform: translateX(0); }
  .ch-rail-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 49; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .ch-shell.rail-open .ch-rail-backdrop { opacity: 1; pointer-events: auto; }

  .ch-hamburger { display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; }
  .ch-rail-close { display: flex; align-items: center; justify-content: center; }

  .ch-main { min-width: 0; }
  .ch-header { padding: 0 10px 0 6px; flex-wrap: nowrap; min-width: 0; }
  .ch-thread-inner { padding: 0 16px; max-width: 100%; }
  .ch-composer-wrap { padding: 10px 12px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .ch-composer { max-width: 100%; }

  /* Mobile header overflow strategy — horizontal scroll inside .ch-title.
     Why scroll instead of ellipsis: long Korean session titles + the model/temp
     chips no longer fit on one line of a 360-400px viewport. Truncating with
     ellipsis would hide both. A hidden horizontal scroll keeps everything
     reachable and the scrollbar invisible.
     Also fixes a selector bug: the previous `.ch-title > span:first-child`
     rule never matched because <button.ch-hamburger> is the first child of
     .ch-title (the markup puts the menu button inside .ch-title for layout
     reasons). The Korean title text inside <span> therefore had no `nowrap`
     applied and word-broke per character. */
  .ch-title {
    font-size: 12.5px;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;  /* iOS Safari momentum */
  }
  .ch-title::-webkit-scrollbar { display: none; } /* WebKit / Brave */
  .ch-title > * { flex-shrink: 0; white-space: nowrap; }
  .ch-title > span:first-of-type { overflow: visible; text-overflow: clip; }
  .ch-title .tag { font-size: 10px; padding: 1px 5px; }

  /* Pin the hamburger to the left edge so it stays reachable even when the
     user scrolls horizontally through a long title. Background blocks the
     title text sliding underneath. */
  .ch-title > .ch-hamburger {
    position: sticky;
    left: 0;
    background: var(--bg-canvas);
    z-index: 2;
  }

  .ch-msg .content { font-size: 14.5px; }
  .ch-header-actions { gap: 4px; flex-shrink: 0; }
  .ch-header-actions .ch-icon-btn { width: 30px; height: 30px; }
}

/* ---- Medium viewport (821-1199px): suppress DevPanel so .dev doesn't squeeze main.
   At <1200px the 3-col template ( rail | 1fr | side ) gives main as little as
   ~400px after both clamp() floors — below readable line-length. Fall back to
   2-col and hide the side panel; admin still gets DevPanel at ≥1200px. */
@media (min-width: 821px) and (max-width: 1199px) {
  .ch-shell.dev { grid-template-columns: var(--shell-rail) 1fr; }
  .ch-shell.dev .ch-side { display: none; }
  .ch-shell.rail-collapsed.dev { grid-template-columns: 0 1fr; }
}

/* ---- Desktop: hamburger can be used to toggle rail off if user wants more space ---- */
@media (min-width: 821px) {
  .ch-shell.rail-collapsed { grid-template-columns: 0 1fr; }
  .ch-shell.rail-collapsed.dev { grid-template-columns: 0 1fr var(--shell-side); }
  .ch-shell.rail-collapsed .ch-rail { display: none; }
}

/* ---- Mobile login: scrollable column layout ---------------------------
   Root cause of the earlier non-scroll bug: the panel is `position: absolute`
   on desktop (orb-centered hero pattern). On mobile that meant the panel
   contributed *nothing* to .scene's height, so the container had nothing to
   scroll past the orb. Container overflow-y: auto was a no-op.
   Fix: in mobile we flip the panel back to natural flow (position: relative)
   so .scene actually grows tall, the container scrolls, and the panel itself
   needs no inner max-height. Desktop layout untouched (only this media
   block changes).

   Canon ratio principle: sizes/positions use vw/vh/% or design tokens
   (spacing/type scale). Pixels only allowed for typography reading-width
   ceilings (e.g. `min(92vw, 360px)`). See feedback_web_canon_ratio_principle. */
@media (max-width: 820px) {
  /* Drop fixed-position + flex on mobile: body owns the scroll (see index.html).
     The hero pattern (position: fixed; inset: 0; display: flex; justify-content:
     center) works on desktop but on Brave/iOS Safari it interacts poorly with
     nested overflow:auto + inputs/keyboard. Switching to `display: block` +
     static position + min-height: 100dvh keeps the visual (login fills the
     viewport) while letting the natural document flow scroll. .scene keeps its
     own flex centering for its children. */
  .ch-login {
    display: block;
    position: static;
    inset: auto;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-top: 3vh;
    padding-bottom: max(4vh, env(safe-area-inset-bottom));
    text-align: center;                   /* fallback for inline children */
  }
  .ch-login .scene {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Cancel the desktop translate effect on mobile — replace with a vertical
     rhythm in vh so orb sits near viewport-center when closed and demotes
     to a compact header when the login panel takes the stage. */
  .ch-login .scene {
    transform: none !important;
    padding-top: 8vh;
    transition: padding-top .45s cubic-bezier(.2,.7,.2,1);
  }
  .ch-login.open .scene {
    transform: none !important;
    padding-top: 3vh;
  }

  /* Orb: viewport-proportional with perceptual floor/ceiling (clamp).
     On open it shrinks to a compact mark so the panel becomes the visual
     centerpiece — the user has already chosen to sign in, the orb's job
     was to invite the tap. */
  .ch-login .orb {
    width: clamp(140px, 22vw, 200px);
    height: clamp(140px, 22vw, 200px);
    transition: width .4s cubic-bezier(.2,.7,.2,1),
                height .4s cubic-bezier(.2,.7,.2,1);
  }
  .ch-login.open .orb {
    width: clamp(64px, 12vw, 96px);
    height: clamp(64px, 12vw, 96px);
  }
  /* Higher specificity (0,4,0) than base's (0,3,0) so 50% wins regardless of
     source order quirks. The base sets 128px and the prior mobile rule was
     78px; both pinned the logo at desktop size and broke the open-state shrink. */
  .ch-login .scene .orb .logo { width: 50%; height: 50%; }
  .ch-login .orb .ring { inset: 11%; }
  .ch-login .orb .ring.r2 { inset: 4%; }
  .ch-login .orb .ring.r3 { inset: -4%; }
  .ch-login .orb .glow { inset: 8%; }
  .ch-login .orb .halo { inset: 6%; }
  .ch-login .hint { margin-top: var(--space-3); font-size: var(--t-12); }
  /* Hint is just guidance to tap the orb — once tapped, it's noise that
     pushes the panel down. Remove from flow entirely (base only sets
     opacity 0 which keeps the empty line). */
  .ch-login.open .hint { display: none; }

  /* Panel re-enters normal flow on mobile.
     - position: relative → contributes to .scene height → container scrolls.
     - transform: none cancels the desktop translate(-50%, …) hero centering.
     - max-height: none + overflow: visible → no nested scroll, page scrolls.
     - Hidden until .open so closed state doesn't show an empty form.
     - `min(92vw, 360px)` keeps reading-width within the panel (typography
       layer — fixed ceiling is allowed per the ratio-principle exception). */
  .ch-login .panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(92vw, 360px);
    margin: var(--space-5) auto 0;
    padding: var(--space-4);
    max-height: none;
    overflow: visible;
  }
  .ch-login:not(.open) .panel { display: none; }
  .ch-login.open .panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .ch-login .panel h2 { font-size: var(--t-18); margin: 0 0 var(--space-3); }
  .ch-login .panel button.primary { height: clamp(36px, 5.5vh, 44px); }
}

/* ===== Left rail: threads ============================================ */
.ch-rail { display: flex; flex-direction: column; border-right: 1px solid var(--border-1); background: var(--bg-canvas); min-height: 0; }
.ch-rail-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border-1); }
.ch-rail-brand img { height: 30px; }
.ch-rail-brand .wm { font-weight: 600; font-size: 13px; letter-spacing: 0.16em; color: var(--accent); }
.ch-rail-brand .ver { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); }

.ch-new { margin: 14px 14px 6px; height: 36px; background: var(--accent); color: var(--zg-ink-50); border: 0; border-radius: var(--r-2); font-family: var(--font-sans); font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ch-new:hover { background: var(--accent-hover); }
.ch-search { margin: 6px 14px 12px; padding: 7px 10px; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); font-size: 12px; color: var(--fg-4); display: flex; align-items: center; gap: 8px; }
.ch-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-4); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 3px; }

.ch-rail-section { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-5); padding: 14px 18px 6px; }
.ch-threads { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; overflow: auto; flex: 1; min-height: 0; }
.ch-thread { padding: 10px 12px; border-radius: var(--r-2); cursor: pointer; position: relative; }
.ch-thread:hover { background: var(--bg-surface); }
.ch-thread.active { background: var(--bg-surface); }
.ch-thread.active::before { content:''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); border-radius: 2px; }
.ch-thread .t { font-size: 13px; color: var(--fg-1); font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.ch-thread:not(.active) .t { color: var(--fg-2); font-weight: 400; }
.ch-thread .m { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); }

.ch-rail-foot { border-top: 1px solid var(--border-1); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.ch-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #836D14, #CAAB29); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--zg-ink-50); }
.ch-rail-foot .who { font-size: 12px; color: var(--fg-2); }
.ch-rail-foot .sub { font-size: 10px; color: var(--fg-5); font-family: var(--font-mono); }
.ch-rail-foot .gear { margin-left: auto; color: var(--fg-4); cursor: pointer; }

/* ===== Center: conversation ========================================== */
.ch-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-header { height: 52px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.ch-title { font-size: 13.5px; color: var(--fg-1); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.ch-title .tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); border: 1px solid var(--border-1); padding: 2px 7px; border-radius: 3px; }
.ch-header-actions { display: flex; gap: 8px; }
.ch-icon-btn { width: 30px; height: 30px; border-radius: var(--r-2); border: 1px solid var(--border-1); background: transparent; color: var(--fg-3); cursor: pointer; font-size: 13px; }
.ch-icon-btn:hover { color: var(--fg-1); border-color: var(--border-2); }

.ch-thread-view { flex: 1; overflow-y: auto; padding: 28px 0; min-height: 0; }
.ch-thread-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 28px; }

.ch-msg { display: flex; gap: 14px; }
.ch-msg .ava { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-top: 1px; }
.ch-msg.user .ava { background: var(--bg-elevated); color: var(--fg-2); border: 1px solid var(--border-1); }
.ch-msg.asst .ava { background: transparent; border: 1px solid var(--accent-edge); padding: 2px; }
.ch-msg.asst .ava img { width: 100%; height: 100%; object-fit: contain; }
.ch-msg .body { flex: 1; min-width: 0; }
.ch-msg .role { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ch-msg.asst .role { color: var(--accent); }
.ch-msg .role .time { font-family: var(--font-mono); color: var(--fg-5); letter-spacing: 0; text-transform: none; }
.ch-msg .content { font-size: 15px; line-height: 1.65; color: var(--fg-1); }
.ch-msg .content p { margin: 0 0 12px; }
.ch-msg .content p:last-child { margin-bottom: 0; }
.ch-msg.user .content { color: var(--fg-2); }
.ch-msg .content code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-surface); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 3px; color: var(--accent); }
.ch-msg .content .math { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--fg-1); display: block; padding: 14px 0; }
.ch-codeblock { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-3); margin: 12px 0; overflow: hidden; }
.ch-codeblock .cb-head { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); }
.ch-codeblock .cb-head .copy { color: var(--fg-3); cursor: pointer; }
.ch-codeblock pre { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--fg-2); overflow-x: auto; }
.ch-codeblock pre .c { color: var(--fg-5); }
.ch-codeblock pre .k { color: var(--accent); }
.ch-codeblock pre .s { color: #9BC585; }
.ch-codeblock pre .n { color: #E08573; }

.ch-msg-actions { display: flex; gap: 6px; margin-top: 10px; opacity: 0; transition: opacity .15s; }
.ch-msg:hover .ch-msg-actions { opacity: 1; }
.ch-msg-actions button { font-family: var(--font-sans); font-size: 11px; color: var(--fg-4); background: transparent; border: 1px solid var(--border-1); padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.ch-msg-actions button:hover { color: var(--fg-1); border-color: var(--border-2); }

.ch-streaming { display: inline-flex; align-items: center; gap: 6px; }
.ch-streaming .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: chpulse 1.2s ease-in-out infinite; }
@keyframes chpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ===== Composer ====================================================== */
.ch-composer-wrap { padding: 14px 24px 22px; border-top: 1px solid var(--border-1); flex-shrink: 0; background: var(--bg-canvas); }
.ch-composer { max-width: 760px; margin: 0 auto; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-4); padding: 12px 14px 10px; transition: border-color .15s, box-shadow .15s; }
.ch-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,171,41,0.16); }
.ch-composer textarea { width: 100%; background: transparent; border: 0; outline: none; resize: none; color: var(--fg-1); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; min-height: 44px; max-height: 200px; }
.ch-composer textarea::placeholder { color: var(--fg-5); }
.ch-composer-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ch-composer-bar .left { display: flex; gap: 4px; }
.ch-composer-bar .left button { width: 28px; height: 28px; background: transparent; border: 0; color: var(--fg-4); cursor: pointer; border-radius: var(--r-2); }
.ch-composer-bar .left button:hover { color: var(--fg-1); background: var(--bg-elevated); }
.ch-composer-bar .spacer { flex: 1; }
.ch-composer-bar .hint { font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); margin-right: 8px; }
.ch-composer-bar .hint kbd { color: var(--fg-3); border: 1px solid var(--border-1); padding: 1px 4px; border-radius: 2px; margin: 0 2px; }
.ch-send { width: 32px; height: 32px; background: var(--accent); color: var(--zg-ink-50); border: 0; border-radius: var(--r-2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.ch-send:hover { background: var(--accent-hover); }
.ch-send.disabled { background: var(--bg-elevated); color: var(--fg-5); cursor: not-allowed; }
.ch-send.stopping { background: var(--zg-danger); color: var(--zg-ink-50); }
.ch-send.stopping:hover { filter: brightness(1.1); }

/* ===== Right panel: developer playground ============================= */
.ch-side { border-left: 1px solid var(--border-1); background: var(--bg-canvas); overflow-y: auto; min-height: 0; }
.ch-side-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border-1); display: flex; justify-content: space-between; align-items: center; }
.ch-side-head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.ch-side-head .seg { display: inline-flex; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 2px; }
.ch-side-head .seg button { font-size: 11px; padding: 3px 8px; border: 0; background: transparent; color: var(--fg-3); border-radius: 3px; cursor: pointer; }
.ch-side-head .seg button.on { background: var(--bg-elevated); color: var(--fg-1); }

.ch-side-section { padding: 16px 20px; border-bottom: 1px solid var(--border-1); }
.ch-side-section h4 { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 12px; font-weight: 500; }

.ch-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ch-field:last-child { margin-bottom: 0; }
.ch-field-top { display: flex; justify-content: space-between; font-size: 12px; }
.ch-field-top .name { color: var(--fg-2); }
.ch-field-top .val { font-family: var(--font-mono); color: var(--fg-1); }
.ch-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 2px; background: var(--border-2); outline: none; border-radius: 2px; }
.ch-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ch-slider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }

.ch-select { width: 100%; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 8px 10px; font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); outline: none; }

.ch-curl { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 12px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--fg-2); overflow-x: auto; }
.ch-curl .c { color: var(--fg-5); }
.ch-curl .k { color: var(--accent); }
.ch-curl .s { color: #9BC585; }

.ch-keychip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); }
.ch-keychip .label { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); flex: 1; }
.ch-keychip .reveal { font-size: 11px; color: var(--accent); cursor: pointer; }

.ch-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-usage .item .lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-5); }
.ch-usage .item .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; color: var(--fg-1); margin-top: 4px; }
.ch-usage .item .sub { font-size: 11px; color: var(--fg-4); margin-top: 2px; }

/* ===== Loading screen ================================================ */
.ch-loading { position: fixed; inset: 0; background: var(--bg-canvas); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; font-family: var(--font-sans); color: var(--fg-1); }
.ch-loading .mark { position: relative; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; }
.ch-loading .mark img { width: 96px; height: 96px; object-fit: contain; animation: chBreathe 2.4s ease-in-out infinite; }
.ch-loading .mark .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent-edge); }
.ch-loading .mark .arc { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); animation: chSpin 1.6s linear infinite; }
@keyframes chBreathe { 0%, 100% { opacity: 0.92; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes chSpin { to { transform: rotate(360deg); } }

.ch-loading .wm { margin-top: 28px; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; color: var(--accent); }
.ch-loading h1 { font-family: var(--font-sans); font-weight: 600; font-size: 30px; font-weight: 400; letter-spacing: -0.01em; margin: 10px 0 0; color: var(--fg-1); }
.ch-loading .status { margin-top: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; min-height: 1.3em; display: inline-flex; align-items: center; gap: 10px; }
.ch-loading .status::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: chpulse 1.2s ease-in-out infinite; }

.ch-loading .progress { margin-top: 18px; width: 240px; height: 2px; background: var(--border-1); border-radius: 2px; overflow: hidden; }
.ch-loading .progress .bar { height: 100%; background: var(--accent); width: 0; transition: width .4s ease; }
.ch-loading .meta { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-5); letter-spacing: 0.08em; }
.ch-loading .meta .pct { color: var(--fg-3); }

/* ===== Login ========================================================= */
.ch-login { position: fixed; inset: 0; background: var(--bg-canvas); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 110; font-family: var(--font-sans); color: var(--fg-1); overflow: hidden; }
.ch-login .scene { position: relative; display: flex; flex-direction: column; align-items: center; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ch-login.open .scene { transform: translateY(-72px); }

.ch-login .orb { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ch-login .orb .logo { width: 128px; height: 128px; object-fit: contain; position: relative; z-index: 3; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ch-login .orb:hover .logo { transform: scale(1.04); }
.ch-login .orb .ring { position: absolute; inset: 30px; border-radius: 50%; border: 1px solid var(--accent-edge); }
.ch-login .orb .ring.r2 { inset: 10px; border-color: rgba(202,171,41,0.10); }
.ch-login .orb .ring.r3 { inset: -10px; border-color: rgba(202,171,41,0.06); }

/* the orbiting light: a spinning conic gradient masked into a ring */
.ch-login .orb .glow { position: absolute; inset: 22px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 230deg, rgba(202,171,41,0.0) 240deg, rgba(202,171,41,0.55) 300deg, rgba(255,224,128,0.95) 340deg, rgba(202,171,41,0.0) 360deg); -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 64%, transparent 66%); mask: radial-gradient(circle, transparent 56%, #000 58%, #000 64%, transparent 66%); animation: chOrbit 4.2s linear infinite; filter: blur(.4px); }
.ch-login .orb .glow2 { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 180deg, transparent 0deg, transparent 280deg, rgba(202,171,41,0.45) 330deg, transparent 360deg); -webkit-mask: radial-gradient(circle, transparent 70%, #000 72%, #000 76%, transparent 78%); mask: radial-gradient(circle, transparent 70%, #000 72%, #000 76%, transparent 78%); animation: chOrbit 7.2s linear infinite reverse; opacity: 0.7; }
.ch-login .orb .halo { position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(202,171,41,0.18), transparent 60%); animation: chBreathe 3.4s ease-in-out infinite; z-index: 1; }
@keyframes chOrbit { to { transform: rotate(360deg); } }

.ch-login .hint { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; animation: chFadeBlink 2.4s ease-in-out infinite; }
.ch-login.open .hint { opacity: 0; pointer-events: none; }
@keyframes chFadeBlink { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

.ch-login .panel { position: absolute; top: calc(50% + 50px); left: 50%; transform: translate(-50%, 16px); width: 360px; padding: 22px 24px 22px; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-3); box-shadow: 0 24px 48px rgba(0,0,0,0.45), 0 0 0 1px var(--accent-edge); opacity: 0; pointer-events: none; transition: opacity .55s cubic-bezier(.2,.7,.2,1) .12s, transform .55s cubic-bezier(.2,.7,.2,1) .12s; }
.ch-login.open .panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ch-login .panel .eb { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.ch-login .panel h2 { font-family: var(--font-sans); font-weight: 600; font-size: 22px; font-weight: 400; margin: 0 0 18px; letter-spacing: -0.01em; }
.ch-login .panel .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 11px; color: var(--fg-4); }
.ch-login .panel .field input { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 9px 11px; outline: none; }
.ch-login .panel .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,171,41,0.16); }
.ch-login .panel .row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--fg-4); margin: 2px 0 14px; }
.ch-login .panel .row a { color: var(--accent); text-decoration: none; }
.ch-login .panel button.primary { width: 100%; background: var(--accent); color: var(--zg-ink-50); border: 0; height: 40px; border-radius: var(--r-2); font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ch-login .panel button.primary:hover { background: var(--accent-hover); }
.ch-login .panel .divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-5); letter-spacing: 0.14em; }
.ch-login .panel .divider::before, .ch-login .panel .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-1); }
.ch-login .panel button.sso { width: 100%; background: transparent; color: var(--fg-2); border: 1px solid var(--border-2); height: 38px; border-radius: var(--r-2); font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.ch-login .panel button.sso:hover { color: var(--fg-1); border-color: var(--accent-edge); }
.ch-login .panel .foot { margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-5); text-align: center; }

/* ===== Settings / Account shell ===================================== */
.ch-settings { display: grid; grid-template-columns: 260px 1fr; height: 100vh; background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-sans); }
/* All headings inside Settings/Modals stay sans (override the default brand italic serif). */
.ch-settings h1, .ch-settings h2, .ch-settings h3, .ch-settings h4,
.ch-modal h2 {
  font-family: var(--font-sans);
  font-style: normal;
}
.ch-settings .sub { border-right: 1px solid var(--border-1); display: flex; flex-direction: column; min-height: 0; }
.ch-settings .sub-head { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: 10px; }
.ch-settings .sub-head button { background: transparent; color: var(--fg-3); border: 0; cursor: pointer; font-size: 18px; padding: 0; }
.ch-settings .sub-head h2 { font-size: 14px; font-weight: 600; margin: 0; }
.ch-settings .sub-section { padding: 14px 12px 4px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-5); }
.ch-settings .sub-link { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 0 8px; border-radius: var(--r-2); font-size: 13px; color: var(--fg-2); cursor: pointer; position: relative; }
.ch-settings .sub-link:hover { background: var(--bg-surface); }
.ch-settings .sub-link.active { background: var(--bg-surface); color: var(--fg-1); }
.ch-settings .sub-link.active::before { content:''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--accent); border-radius: 2px; }
.ch-settings .sub-link .ico { width: 14px; height: 14px; border-radius: 3px; background: var(--bg-elevated); display: inline-block; border: 1px solid var(--border-1); transition: background .15s, border-color .15s; }
.ch-settings .sub-link:hover .ico { border-color: var(--border-2); }
.ch-settings .sub-link.active .ico { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }

.ch-settings .pane { overflow-y: auto; min-height: 0; }
.ch-settings .pane-inner { max-width: 720px; margin: 0 auto; padding: 48px 48px 80px; }
.ch-settings .pane-eb { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ch-settings .pane-eb::before { content:''; width: 22px; height: 1px; background: var(--accent); }
.ch-settings .pane-inner h1 { font-family: var(--font-sans); font-weight: 600; font-size: 36px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
.ch-settings .pane-inner .lede { font-size: 14px; color: var(--fg-3); margin: 0 0 32px; max-width: 56ch; line-height: 1.55; }

.ch-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-3); padding: 22px; margin-bottom: 16px; }
.ch-card h3 { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.ch-card .desc { font-size: 12.5px; color: var(--fg-4); margin: 0 0 18px; line-height: 1.55; }

.ch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border-1); }
.ch-row:first-of-type { border-top: 0; padding-top: 0; }
.ch-row .lbl { font-size: 13px; color: var(--fg-2); }
.ch-row .lbl small { display: block; font-size: 11.5px; color: var(--fg-4); margin-top: 2px; }
.ch-row .ctrl { display: flex; align-items: center; gap: 10px; }
.ch-row .v { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1); }
.ch-row input[type=text], .ch-row input[type=email] { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 7px 10px; color: var(--fg-1); font-family: var(--font-mono); font-size: 12.5px; outline: none; min-width: 220px; }
.ch-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,171,41,0.16); }
.ch-row button.ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--border-2); padding: 6px 12px; border-radius: var(--r-2); font-size: 12px; cursor: pointer; }
.ch-row button.ghost:hover { color: var(--fg-1); border-color: var(--accent-edge); }
.ch-row button.danger { background: transparent; color: #E08573; border: 1px solid rgba(201,92,74,0.4); padding: 6px 12px; border-radius: var(--r-2); font-size: 12px; cursor: pointer; }
.ch-row button.primary { background: var(--accent); color: var(--zg-ink-50); border: 0; padding: 7px 14px; border-radius: var(--r-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }

.ch-profile { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border-1); }
.ch-profile .pic { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #836D14, #CAAB29); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: var(--zg-ink-50); }
.ch-profile .who { flex: 1; }
.ch-profile .who .n { font-family: var(--font-sans); font-size: 22px; font-weight: 600; }
.ch-profile .who .e { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); margin-top: 2px; }
.ch-profile .who .role { display: inline-block; margin-top: 6px; font-size: 11px; padding: 2px 8px; background: var(--accent-tint); color: var(--zg-gold-300); border-radius: 9999px; }

.ch-plan { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.ch-plan .item { padding: 14px 16px; background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); }
.ch-plan .item .lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-5); margin-bottom: 6px; }
.ch-plan .item .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; color: var(--fg-1); }
.ch-plan .item .sub { font-size: 11px; color: var(--fg-4); margin-top: 2px; }

.ch-keys { display: flex; flex-direction: column; gap: 8px; }
.ch-key { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); }
.ch-key .name { font-size: 13px; color: var(--fg-1); }
.ch-key .name small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.ch-key .stat { font-size: 11px; padding: 2px 8px; border-radius: 9999px; background: rgba(111,158,92,0.16); color: #9BC585; font-family: var(--font-sans); }
.ch-key .stat.idle { background: var(--bg-elevated); color: var(--fg-4); }

.ch-switch { width: 36px; height: 20px; border-radius: 9999px; background: var(--border-2); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.ch-switch.on { background: var(--accent); }
.ch-switch::after { content:''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--zg-ink-50); transition: transform .2s; }
.ch-switch.on::after { transform: translateX(16px); }

.ch-radio-group { display: flex; gap: 6px; }
.ch-radio-group button { background: var(--bg-canvas); border: 1px solid var(--border-1); color: var(--fg-3); padding: 6px 12px; border-radius: var(--r-2); font-size: 12px; cursor: pointer; }
.ch-radio-group button.on { border-color: var(--accent); color: var(--fg-1); background: var(--accent-tint); }

.ch-kbd-list { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; font-size: 13px; }
.ch-kbd-list .l { color: var(--fg-2); padding: 8px 0; border-bottom: 1px solid var(--border-1); }
.ch-kbd-list .r { padding: 8px 0; border-bottom: 1px solid var(--border-1); }
.ch-kbd-list .r kbd { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); border: 1px solid var(--border-2); padding: 2px 6px; border-radius: 3px; margin-left: 4px; }

/* ===== Modal ========================================================= */
.ch-modal-bg { position: fixed; inset: 0; background: rgba(11,12,15,0.7); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; animation: chFadeIn .18s ease; }
@keyframes chFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ch-modal { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-3); width: 480px; max-width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-edge); animation: chRise .26s cubic-bezier(.2,.7,.2,1); }
.ch-modal.wide { width: 560px; }
@keyframes chRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ch-modal-head { padding: 20px 24px 0; }
.ch-modal-eb { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.ch-modal h2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.ch-modal .desc { font-size: 13px; color: var(--fg-4); line-height: 1.5; margin: 8px 0 0; }
.ch-modal-body { padding: 18px 24px 6px; }
.ch-modal-body .field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fg-4); margin-bottom: 14px; }
.ch-modal-body .field input, .ch-modal-body .field textarea, .ch-modal-body .field select { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 9px 11px; outline: none; }
.ch-modal-body .field input:focus, .ch-modal-body .field textarea:focus, .ch-modal-body .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,171,41,0.16); }
.ch-modal-body .chk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--r-2); margin-bottom: 8px; cursor: pointer; }
.ch-modal-body .chk:hover { border-color: var(--border-2); }
.ch-modal-body .chk.on { border-color: var(--accent); background: var(--accent-tint); }
.ch-modal-body .chk input { margin-top: 2px; }
.ch-modal-body .chk .ti { font-size: 13px; color: var(--fg-1); }
.ch-modal-body .chk .sb { font-size: 11.5px; color: var(--fg-4); margin-top: 2px; }
.ch-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--border-1); margin-top: 14px; }
.ch-modal-foot .left { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-5); }
.ch-modal-foot .right { display: flex; gap: 8px; margin-left: auto; }
.ch-btn { border-radius: var(--r-2); padding: 8px 14px; font-size: 12.5px; font-family: var(--font-sans); cursor: pointer; border: 1px solid transparent; }
.ch-btn.ghost { background: transparent; color: var(--fg-2); border-color: var(--border-2); }
.ch-btn.ghost:hover { color: var(--fg-1); border-color: var(--accent-edge); }
.ch-btn.primary { background: var(--accent); color: var(--zg-ink-50); font-weight: 600; border-color: var(--accent); }
.ch-btn.primary:hover { background: var(--accent-hover); }
.ch-btn.danger { background: rgba(201,92,74,0.12); color: #E08573; border-color: rgba(201,92,74,0.4); font-weight: 600; }
.ch-btn.danger:hover { background: rgba(201,92,74,0.22); }

.ch-revealkey { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); background: var(--bg-canvas); border: 1px solid var(--accent-edge); border-radius: var(--r-2); padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; word-break: break-all; }
.ch-revealkey .copy { font-family: var(--font-sans); font-size: 11.5px; color: var(--accent); cursor: pointer; flex-shrink: 0; }
.ch-warn { background: rgba(201,92,74,0.1); border: 1px solid rgba(201,92,74,0.3); color: #E08573; border-radius: var(--r-2); padding: 12px 14px; font-size: 12.5px; line-height: 1.5; margin-top: 12px; }
.ch-good { background: rgba(111,158,92,0.1); border: 1px solid rgba(111,158,92,0.3); color: #9BC585; border-radius: var(--r-2); padding: 12px 14px; font-size: 12.5px; line-height: 1.5; margin-top: 12px; }

.ch-recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 14px; }
.ch-recovery-grid div { padding: 4px 0; }

.ch-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-plan-card { padding: 14px; background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-2); cursor: pointer; }
.ch-plan-card.on { border-color: var(--accent); background: var(--accent-tint); }
.ch-plan-card .nm { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.ch-plan-card .pr { font-family: var(--font-mono); font-size: 18px; color: var(--accent); margin: 6px 0; }
.ch-plan-card .ft { font-size: 11.5px; color: var(--fg-4); line-height: 1.5; }

.ch-upload-drop { border: 1px dashed var(--border-2); border-radius: var(--r-3); padding: 36px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ch-upload-drop:hover { border-color: var(--accent); background: var(--accent-tint); }
.ch-upload-drop .big { font-size: 28px; color: var(--accent); margin-bottom: 8px; }
.ch-upload-drop .ti { font-size: 13.5px; color: var(--fg-2); }
.ch-upload-drop .sb { font-family: var(--font-mono); font-size: 11px; color: var(--fg-5); margin-top: 4px; }

.ch-steps { display: flex; gap: 6px; padding: 0 24px 12px; }
.ch-steps .seg { flex: 1; height: 2px; background: var(--border-1); border-radius: 2px; }
.ch-steps .seg.on { background: var(--accent); }


/* ===== Tooltip ======================================================= */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border-2); color: var(--fg-1); padding: 5px 9px; border-radius: 4px; font-size: 11px; font-family: var(--font-sans); white-space: nowrap; z-index: 9999; pointer-events: none; box-shadow: 0 4px 10px rgba(0,0,0,0.4); animation: chTipIn .12s ease; }
[data-tip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--border-2); z-index: 9999; pointer-events: none; }
[data-tip-pos="right"]:hover::after { bottom: 50%; left: calc(100% + 10px); transform: translateY(50%); }
[data-tip-pos="right"]:hover::before { display: none; }
@keyframes chTipIn { from { opacity: 0; transform: translateX(-50%) translateY(2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== Value-edit radio stack ======================================== */
.ch-radio-stack { display: flex; flex-direction: column; gap: 6px; }
.ch-radio-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--r-2); cursor: pointer; transition: border-color .15s, background .15s; }
.ch-radio-row:hover { border-color: var(--border-2); background: var(--bg-elevated-2); }
.ch-radio-row .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-2); flex: 0 0 14px; position: relative; }
.ch-radio-row.on { border-color: var(--accent); background: var(--accent-tint); }
.ch-radio-row.on .dot { border-color: var(--accent); }
.ch-radio-row.on .dot::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent); }
.ch-radio-row .t { color: var(--fg-1); font-size: 13px; font-family: var(--font-sans); }


/* ===== Popover menu ================================================== */
.ch-popmenu { background: var(--bg-elevated); border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 6px; min-width: 220px; box-shadow: 0 16px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.4); z-index: 200; animation: chMenuIn .12s ease; }
@keyframes chMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ch-popmenu .item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; background: transparent; border: 0; border-radius: 4px; color: var(--fg-1); font-family: var(--font-sans); font-size: 12.5px; text-align: left; cursor: pointer; }
.ch-popmenu .item:hover { background: var(--bg-elevated-2); }
.ch-popmenu .item .ic { width: 16px; color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; text-align: center; }
.ch-popmenu .item .lbl { flex: 1; }
.ch-popmenu .item kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 3px; }
.ch-popmenu .item.danger { color: var(--danger); }
.ch-popmenu .item.danger:hover { background: rgba(225, 80, 80, 0.08); }
.ch-popmenu .div { height: 1px; background: var(--border-1); margin: 5px 4px; }
.ch-popmenu .section { padding: 6px 10px 4px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; }

/* Thread row hover ⋯ */
.ch-thread { position: relative; }
.ch-thread .row-more { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-4); cursor: pointer; opacity: 0; border-radius: 3px; transition: opacity .12s; font-size: 13px; }
.ch-thread:hover .row-more, .ch-thread.menu-open .row-more { opacity: 1; }
.ch-thread .row-more:hover { background: var(--bg-elevated-2); color: var(--fg-1); }
.ch-thread .pin-dot { color: var(--accent); margin-left: 6px; font-size: 8px; vertical-align: middle; }

/* ===== Share modal ==================================================== */
.ch-share-link { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-1); background: var(--bg-canvas); border-radius: var(--r-2); margin-bottom: 18px; }
.ch-share-link .lk { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-btn.success { background: var(--success); color: #0a1010; }
.ch-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch-share-h { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.ch-radio-stack-h { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-radio-stack-h button { background: var(--bg-canvas); border: 1px solid var(--border-1); color: var(--fg-2); padding: 6px 10px; border-radius: var(--r-2); font-family: var(--font-mono); font-size: 11.5px; cursor: pointer; }
.ch-radio-stack-h button.on { background: var(--accent); border-color: var(--accent); color: #0a0707; }
.ch-radio-row .t b { display: block; color: var(--fg-1); font-size: 13px; font-family: var(--font-sans); font-weight: 500; }
.ch-radio-row .t small { display: block; color: var(--fg-4); font-size: 11.5px; margin-top: 2px; font-family: var(--font-sans); }

/* ===== Export format list ============================================= */
.ch-format-list { display: flex; flex-direction: column; gap: 6px; }
.ch-format-row { display: grid; grid-template-columns: 32px 1fr auto 16px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--r-2); cursor: pointer; transition: border-color .15s, background .15s; }
.ch-format-row:hover { border-color: var(--border-2); background: var(--bg-elevated-2); }
.ch-format-row.on { border-color: var(--accent); background: var(--accent-tint); }
.ch-format-row .ico { width: 32px; height: 32px; border-radius: var(--r-2); background: var(--bg-canvas); border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.ch-format-row.on .ico { border-color: var(--accent); color: var(--accent); }
.ch-format-row .meta b { display: block; color: var(--fg-1); font-size: 13px; font-family: var(--font-sans); font-weight: 500; }
.ch-format-row .meta small { display: block; color: var(--fg-4); font-size: 11.5px; margin-top: 2px; }
.ch-format-row .sz { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.ch-format-row .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-2); position: relative; }
.ch-format-row.on .dot { border-color: var(--accent); }
.ch-format-row.on .dot::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent); }

/* ===== Search command palette ========================================== */
.ch-search-modal { width: min(640px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-2); border-radius: var(--r-3); box-shadow: 0 24px 60px rgba(0,0,0,0.6); margin-top: 12vh; overflow: hidden; animation: chMenuIn .14s ease; max-height: 70vh; display: flex; flex-direction: column; }
.ch-search-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-1); }
.ch-search-input .ic { color: var(--fg-3); font-size: 14px; }
.ch-search-input input { flex: 1; background: transparent; border: 0; color: var(--fg-1); font-family: var(--font-sans); font-size: 15px; outline: none; }
.ch-search-input kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); border: 1px solid var(--border-1); padding: 2px 5px; border-radius: 3px; }
.ch-search-results { flex: 1; overflow-y: auto; padding: 6px; }
.ch-search-section { padding: 10px 10px 4px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; }
.ch-search-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 4px; cursor: pointer; }
.ch-search-row:hover { background: var(--bg-elevated-2); }
.ch-search-row .ic { width: 16px; color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; text-align: center; }
.ch-search-row .t { flex: 1; color: var(--fg-1); font-size: 13px; font-family: var(--font-sans); }
.ch-search-row.thread .t b { display: block; font-weight: 500; }
.ch-search-row.thread .t small { display: block; color: var(--fg-4); font-size: 11.5px; margin-top: 2px; font-family: var(--font-mono); }
.ch-search-row kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 3px; }
.ch-search-empty { padding: 16px 12px; color: var(--fg-4); font-size: 12.5px; font-family: var(--font-sans); }
.ch-search-foot { border-top: 1px solid var(--border-1); padding: 8px 14px; display: flex; gap: 18px; font-family: var(--font-sans); font-size: 11px; color: var(--fg-4); }
.ch-search-foot kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); border: 1px solid var(--border-1); padding: 1px 5px; border-radius: 3px; margin-right: 4px; }

/* ===== Toast =========================================================== */
.ch-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--accent); color: var(--fg-1); padding: 10px 16px; border-radius: var(--r-2); font-family: var(--font-sans); font-size: 13px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); z-index: 9999; animation: chToastIn .18s ease; }
@keyframes chToastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }


/* ===== Admin dashboard ================================================ */
.ad-shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-sans); overflow: hidden; }

/* left rail */
.ad-rail { display: flex; flex-direction: column; border-right: 1px solid var(--border-1); min-height: 0; }
.ad-rail-brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--border-1); }
.ad-rail-brand img { height: 28px; }
.ad-rail-brand .wm { font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--accent); }
.ad-rail-brand .ver { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-5); margin-top: 2px; }
.ad-rail-section { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-5); padding: 14px 18px 6px; }
.ad-nav { display: flex; flex-direction: column; padding: 0 8px; gap: 1px; flex: 1; overflow: auto; min-height: 0; }
.ad-nav-item { text-align: left; padding: 10px 12px; border-radius: var(--r-2); background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ad-nav-item:hover:not(:disabled) { background: var(--bg-surface); }
.ad-nav-item.active { background: var(--bg-surface); position: relative; }
.ad-nav-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--accent); border-radius: 2px; }
.ad-nav-item .lbl { font-size: 13px; color: var(--fg-1); font-weight: 500; }
.ad-nav-item:not(.active):not(:disabled) .lbl { color: var(--fg-2); font-weight: 400; }
.ad-nav-item .hnt { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); }
.ad-nav-item:disabled { cursor: not-allowed; opacity: 0.45; }

.ad-rail-foot { border-top: 1px solid var(--border-1); padding: 14px 16px; display: flex; gap: 14px; justify-content: space-between; }
.ad-link { background: transparent; border: 0; color: var(--fg-3); font-family: var(--font-sans); font-size: 12px; cursor: pointer; padding: 4px 0; }
.ad-link:hover { color: var(--accent); }

/* main */
.ad-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ad-header { height: 52px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.ad-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ad-crumb-root { color: var(--fg-3); }
.ad-crumb-sep { color: var(--fg-5); }
.ad-crumb-leaf { color: var(--fg-1); font-weight: 500; }
.ad-userchip { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-2); }
.ad-userchip-name { color: var(--fg-2); }
.ad-tag { font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border-1); padding: 2px 6px; border-radius: 3px; color: var(--fg-4); letter-spacing: 0.08em; text-transform: uppercase; }
.ad-tag-admin { color: var(--accent); border-color: var(--accent-edge); }

.ad-content { flex: 1; overflow-y: auto; padding: 22px 28px 40px; }

/* shared bits */
.ad-mono { font-family: var(--font-mono); font-size: 11.5px; }
.ad-dim { color: var(--fg-4); }
.ad-error { background: rgba(201,92,74,0.08); border: 1px solid rgba(201,92,74,0.4); color: var(--zg-danger); padding: 14px 16px; border-radius: var(--r-2); font-size: 13px; }
.ad-loading { color: var(--fg-4); font-style: italic; padding: 16px 0; }
.ad-section { margin-top: 28px; }
.ad-section:first-child { margin-top: 0; }
.ad-section h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg-2); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-1); display: flex; align-items: baseline; gap: 10px; }
.ad-section h3 .ad-h3-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); font-weight: 400; }

.ad-row-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ad-btn-mini { background: transparent; border: 1px solid var(--border-1); color: var(--fg-2); padding: 4px 10px; font-size: 11.5px; border-radius: var(--r-2); cursor: pointer; }
.ad-btn-mini:hover { border-color: var(--accent-edge); color: var(--accent); }
.ad-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-3); cursor: pointer; }
.ad-toggle input { accent-color: var(--accent); }

/* metric cards */
.ad-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ad-card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-3); padding: 16px 18px; }
.ad-metric { display: flex; flex-direction: column; gap: 4px; }
.ad-metric-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-4); }
.ad-metric-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 24px; color: var(--fg-1); }
.ad-metric-sub { font-size: 11px; color: var(--fg-4); }

/* info grid (label/value rows) */
.ad-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; }
.ad-info-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,0.02); }
.ad-info-grid .k { color: var(--fg-4); }
.ad-info-grid .v { color: var(--fg-2); font-family: var(--font-mono); font-size: 12px; text-align: right; }

/* progress bar */
.ad-progress { flex: 1; background: var(--bg-elevated); border-radius: 2px; height: 6px; overflow: hidden; }
.ad-progress-fill { height: 100%; transition: width .3s ease, background .3s ease; }
.ad-bar-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.ad-bar-label { width: 80px; font-size: 12px; color: var(--fg-3); }
.ad-bar-value { width: 240px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }

.ad-percpu { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-1); }
.ad-percpu-cell { display: flex; align-items: center; gap: 8px; }
.ad-percpu-lbl { width: 36px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-5); }
.ad-percpu-val { width: 44px; text-align: right; }

.ad-disk { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-1); }
.ad-disk:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ad-disk-head { display: flex; gap: 12px; align-items: baseline; }
.ad-disk-label { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.ad-disk-path { font-size: 11px; }

/* search + table */
.ad-search { flex: 1; max-width: 360px; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 7px 10px; font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-1); outline: none; }
.ad-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(202,171,41,0.16); }
.ad-search::placeholder { color: var(--fg-5); }

.ad-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ad-table thead th { text-align: left; padding: 10px 12px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); font-weight: 500; border-bottom: 1px solid var(--border-1); position: sticky; top: 0; background: var(--bg-canvas); }
.ad-table thead th.num { text-align: right; }
.ad-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-1); color: var(--fg-2); vertical-align: middle; }
.ad-table tbody td.num { text-align: right; }
.ad-table tbody td.actions { text-align: right; width: 140px; }
.ad-table tbody tr:hover td { background: var(--bg-surface); }
.ad-table tbody tr.me td { background: rgba(202,171,41,0.04); }

.ad-pill { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-2); border: 1px solid var(--border-1); background: var(--bg-canvas); color: var(--fg-3); cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; transition: all .12s; }
.ad-pill:hover { color: var(--fg-1); border-color: var(--border-2); }
.ad-pill.on { background: var(--accent-tint); border-color: var(--accent-edge); color: var(--accent); }
.ad-pill:disabled { opacity: 0.45; cursor: not-allowed; }

.ad-btn-danger { background: transparent; border: 1px solid var(--border-1); color: var(--fg-3); padding: 5px 11px; font-size: 11.5px; border-radius: var(--r-2); cursor: pointer; }
.ad-btn-danger:hover:not(:disabled) { border-color: var(--zg-danger); color: var(--zg-danger); }
.ad-btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* upload + launch */
.ad-upload-row { display: flex; align-items: center; gap: 14px; }
.ad-upload-row input[type="file"] { color: var(--fg-2); font-family: var(--font-sans); font-size: 12px; }
.ad-upload-row input[type="file"]::-webkit-file-upload-button { background: var(--bg-elevated); color: var(--fg-1); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 6px 12px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; margin-right: 10px; }
.ad-upload-row input[type="file"]::-webkit-file-upload-button:hover { border-color: var(--accent-edge); color: var(--accent); }

.ad-launch-row { display: flex; gap: 10px; align-items: center; }
.ad-select { flex: 1; background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 8px 10px; font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-1); outline: none; }
.ad-select:focus { border-color: var(--accent); }
.ad-btn-primary { background: var(--accent); color: var(--zg-ink-50); border: 0; border-radius: var(--r-2); padding: 8px 16px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ad-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.ad-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* status badge */
.ad-status-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-2); text-transform: uppercase; letter-spacing: 0.08em; }
.ad-status-dot { width: 6px; height: 6px; border-radius: 50%; animation: chpulse 1.2s ease-in-out infinite; }

/* training log panel */
.ad-logpanel { background: var(--bg-canvas); border: 1px solid var(--border-1); border-radius: var(--r-3); padding: 16px 18px; }
.ad-logpanel h3 { display: flex; align-items: center; }
.ad-logpre { background: var(--zg-ink-000); border: 1px solid var(--border-1); border-radius: var(--r-2); padding: 12px 14px; margin: 0; max-height: 360px; overflow-y: auto; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--fg-2); white-space: pre-wrap; word-break: break-word; }

/* =====================================================================
   Mobile login override — MUST sit at the tail of the file.
   Why this lives here instead of in the earlier @media block (~line 130):
   the base .ch-login rule (~line 300) lands *after* that block in source
   order, and since specificity is identical (0,1,0) the cascade lets the
   base win — every mobile override silently no-ops. Putting the mobile
   declarations at the end flips the order so the cascade obeys the media
   query. Scroll-not-working in ALL browsers was this exact bug.

   Design choice (per user feedback): the orb keeps its size. Only its
   *position* shifts when the user opens the login panel — that gives the
   form room to breathe without resizing the brand mark. The panel joins
   the natural document flow so .scene grows tall enough to overflow the
   viewport, which is what enables the body to scroll. */
@media (max-width: 820px) {
  .ch-login {
    display: block;
    position: static;
    inset: auto;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-top: 3vh;
    padding-bottom: max(4vh, env(safe-area-inset-bottom));
    text-align: center;
  }
  .ch-login .scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: none !important;
    transition: padding-top .45s cubic-bezier(.2,.7,.2,1);
    padding-top: 18vh;
  }
  .ch-login.open .scene {
    transform: none !important;
    padding-top: 2vh;          /* closed orb sits mid-viewport, open it rises */
  }
  /* Orb size stays constant — only the .scene padding-top above changes,
     which moves the orb up the page. */
  .ch-login .orb {
    width: clamp(140px, 22vw, 200px);
    height: clamp(140px, 22vw, 200px);
    transition: none;
  }
  .ch-login.open .orb {
    width: clamp(140px, 22vw, 200px);
    height: clamp(140px, 22vw, 200px);
  }
  .ch-login .scene .orb .logo { width: 50%; height: 50%; }
  .ch-login .orb .ring { inset: 11%; }
  .ch-login .orb .ring.r2 { inset: 4%; }
  .ch-login .orb .ring.r3 { inset: -4%; }
  .ch-login .orb .glow { inset: 8%; }
  .ch-login .orb .halo { inset: 6%; }
  .ch-login .hint { margin-top: var(--space-3); font-size: var(--t-12); }
  .ch-login.open .hint { display: none; }

  /* Panel joins natural flow on mobile. position: relative + transform: none
     overrides the desktop hero-centered absolute positioning. With this in
     place .scene's height = orb + hint + panel content, the page grows past
     viewport, and body scroll (enabled in index.html mobile media) works. */
  .ch-login .panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: min(92vw, 360px);
    margin: var(--space-5) auto 0;
    padding: var(--space-4);
    max-height: none;
    overflow: visible;
  }
  .ch-login:not(.open) .panel { display: none; }
  .ch-login.open .panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .ch-login .panel h2 { font-size: var(--t-18); margin: 0 0 var(--space-3); }
  .ch-login .panel button.primary { height: clamp(36px, 5.5vh, 44px); }
}