* { margin:0; padding:0; box-sizing:border-box; }

/* ============================================================
   ORBIT DESIGN TOKENS — UI optimization pass.
   Dark theme per spec:  #0d1117 background · #58a6ff accent ·
   #e6edf3 text. Everything is driven by these variables; each
   semantic rule below simply consumes them, so the whole shell
   (chat, modals, quests, camera, tooltips) stays in one palette.
   Spacing follows an 8px grid; motion is 150–300ms; interactive
   targets are ≥44px on touch.
   ============================================================ */
:root {
    /* Surfaces (light→dark = raised→inset) */
    --bg: #0d1117;          /* app / page background                */
    --bg-inset: #010409;    /* inputs, code wells                   */
    --bg-raise: #161b22;    /* header, footer, cards, bubbles       */
    --bg-hover: #1c2128;    /* hover wash                           */
    --bg-active: #21262d;   /* pressed / active chips               */
    --line: #21262d;        /* default border                       */
    --line-strong: #30363d; /* stronger border / separators         */
    /* Text */
    --text: #e6edf3;        /* primary copy                         */
    --text-2: #b1bac4;      /* secondary copy                       */
    --text-3: #8b949e;      /* muted copy / labels                  */
    --text-4: #6e7681;      /* faint copy / placeholders            */
    /* Accent (Orbit blue) */
    --accent: #58a6ff;
    --accent-hi: #79c0ff;
    --accent-lo: #1f6feb;
    --accent-glow: rgba(88, 166, 255, 0.35);
    --accent-soft: rgba(88, 166, 255, 0.12);
    --accent-line: rgba(88, 166, 255, 0.4);
    /* Semantic */
    --ok: #3fb950;          --ok-soft: rgba(63, 185, 80, 0.14);
    --warn: #d29922;        --warn-soft: rgba(210, 153, 34, 0.13);
    --danger: #f85149;      --danger-soft: rgba(248, 81, 73, 0.14);
    --gold-1: #e3b341;      --gold-2: #f0883e;   /* upgrade CTA gradient */
    --gold-ink: #241500;
    /* Chrome */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 22px;
    --shadow-card: 0 20px 60px rgba(1, 4, 9, 0.72);
    --shadow-pop: 0 12px 30px rgba(1, 4, 9, 0.6);
    /* Safe-area insets (0px where unsupported) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* [hidden] must always win — every dynamic toggle in the shell relies on it. */
[hidden] { display:none !important; }

/* ---- Viewport sizing -------------------------------------------------
   Fixed flex column: header (top) + chat (flex) + footer (composer).
   Nothing may scroll the page so the composer can never be pushed off
   screen. 100dvh tracks browser-chrome-collapsed viewports; script.js
   additionally pins html/body/#app/modals to visualViewport.height so
   the soft keyboard can never hide the chat input. */
html { height:100%; }
html, body {
    height:100vh;
    height:100dvh;
    overflow:hidden;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-tap-highlight-color:transparent;
}

body { display:flex; flex-direction:column; }

/* ---- Modals ----------------------------------------------------------
   .modal is its own scroll container; the card uses margin:auto so on
   short screens / soft keyboard it stays centered when it fits and is
   scrollable when it does not. */
.modal { display:none; position:fixed; inset:0; width:100%; height:100vh; height:100dvh; background:rgba(1,4,9,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); align-items:center; justify-content:center; z-index:1000; overflow-y:auto; overscroll-behavior:contain; padding: calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal)); }
.modal.show { display:flex; }
.modal-content { background:var(--bg-raise); border-radius:var(--radius-xl); padding:28px; max-width:430px; width:100%; max-height:80vh; overflow-y:auto; overscroll-behavior:contain; margin:auto; box-shadow:var(--shadow-card); border:1px solid var(--line-strong); position:relative; }
.modal-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; }
.modal-header h2 { font-size:23px; line-height:1.25; }
.subtitle { color:var(--text-3); font-size:14px; text-align:center; margin-bottom:20px; }
.hint { font-size:13px; color:var(--text-3); line-height:1.5; margin:10px 0 0; }
.close-btn { background:none; border:none; color:var(--text-3); font-size:24px; line-height:1; cursor:pointer; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-s); transition:background .15s, color .15s; touch-action:manipulation; }
.modal-body p { color:var(--text-2); font-size:14px; margin-bottom:16px; line-height:1.65; }
/* 16px inputs prevent iOS auto-zoom on focus. */
.modal-body input, .modal-body textarea { width:100%; padding:13px 16px; border:1px solid var(--line-strong); border-radius:var(--radius-m); background:var(--bg-inset); color:var(--text); font-size:16px; margin-bottom:12px; font-family:inherit; -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s; }
.modal-body input:focus, .modal-body textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.modal-body textarea { min-height:88px; resize:vertical; }
.btn-primary { width:100%; padding:14px; background:linear-gradient(135deg, var(--accent-lo), var(--accent)); border:none; border-radius:var(--radius-m); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition:transform .15s, opacity .15s, filter .15s; touch-action:manipulation; }
.btn-primary:active { transform:scale(0.97); opacity:0.85; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-secondary { padding:11px 16px; background:var(--bg-active); border:1px solid var(--line); border-radius:var(--radius-s); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; margin:4px; transition:background .15s, color .15s; touch-action:manipulation; }
.btn-secondary:active { background:var(--line-strong); }
.btn-danger { padding:11px 16px; background:var(--danger-soft); border:1px solid rgba(248,81,73,.4); border-radius:var(--radius-s); color:#ffb3ad; font-size:13px; font-weight:600; cursor:pointer; margin:4px; transition:background .15s; touch-action:manipulation; }
.btn-danger:active { background:rgba(248,81,73,.28); }
/* Settings groups (model / language / API key / memory / access) */
.setting-group { margin-bottom:20px; }
.setting-group label { display:block; color:var(--text-2); font-size:13px; font-weight:600; margin-bottom:8px; }
.setting-group select { width:100%; padding:13px 16px; border:1px solid var(--line-strong); border-radius:var(--radius-m); background:var(--bg-inset); color:var(--text); font-size:16px; margin-bottom:12px; font-family:inherit; -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s; }
.setting-group select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.badge { background:var(--bg-active); padding:2px 10px; border-radius:20px; font-size:10px; font-weight:600; color:var(--text-3); margin-left:6px; text-transform:uppercase; letter-spacing:.4px; }
.project-item { background:var(--bg-inset); padding:13px 16px; border-radius:var(--radius-m); border:1px solid var(--line); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.project-item .info { flex:1; min-width:0; }
.project-item .name { font-weight:600; color:var(--text); }
.project-item .desc { font-size:13px; color:var(--text-3); margin-top:2px; overflow-wrap:anywhere; }
/* Compact per-idea action cluster (Export / Share / Edit / Delete) — rows
   keep the 4 buttons on one line on desktop and wrap on narrow phones. */
.project-actions { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; flex-shrink:0; }
.project-actions .idea-action { margin:0; padding:8px 9px; line-height:1; font-size:14px; min-width:34px; text-align:center; }
/* Idea-row hover summary — a one-paragraph digest of the idea folder's
   contents (local-companion builds only; shown under the row on hover). */
.idea-fsum { position:fixed; z-index:1500; max-width:min(360px, calc(100vw - 24px)); background:var(--bg-raise); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--radius-m); box-shadow:var(--shadow-pop); padding:10px 12px; display:none; pointer-events:none; font-size:13px; line-height:1.5; text-align:left; }
.idea-fsum-title { font-weight:700; color:var(--accent-hi); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.idea-fsum-body { overflow-wrap:anywhere; }
.idea-fsum-loading { opacity:.7; font-style:italic; }

/* ---- Action sheet (quick-tool pickers: Image / Task / Coach) ----------
   One reusable sheet whose rows are filled by script.js. Rows are large
   (≥52px) so a thumb never misses on mobile. */
.sheet-content { max-width:440px; padding:20px; }
.sheet-content .modal-header { margin-bottom:8px; }
.sheet-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.sheet-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--bg-active); border:1px solid var(--line); border-radius:var(--radius-m); padding:8px 10px; min-height:52px; color:var(--text); font-size:14.5px; font-family:inherit; cursor:pointer; transition:border-color .15s, background .15s, transform .1s; touch-action:manipulation; }
.sheet-item .sheet-emoji { font-size:20px; width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg-raise); border-radius:10px; border:1px solid var(--line); }
.sheet-item .sheet-text { flex:1; min-width:0; }
.sheet-item .sheet-text b { display:block; font-size:14.5px; font-weight:600; }
.sheet-item .sheet-text span { display:block; font-size:12px; color:var(--text-3); margin-top:1px; overflow-wrap:anywhere; }
.sheet-item .sheet-arrow { color:var(--text-4); font-size:18px; flex-shrink:0; }
.sheet-item:hover { border-color:var(--accent-line); background:var(--bg-hover); }
.sheet-item:active { transform:scale(0.985); }

/* ---- Pricing / upgrade modal ------------------------------------------
   Clean overlay comparing all five tiers (Free + Solo + Pro + Pro Max +
   Enterprise). Cards stack on phones and fan out side-by-side on wide
   screens; each "Subscribe" button redirects to WordPress checkout. */
.pricing-content { max-width:720px; }
.pricing-intro { color:var(--text-3); font-size:13.5px; margin:-4px 0 16px; }
/* Beat the generic .modal-body p defaults (specificity) */
.modal-body .pricing-intro { color:var(--text-3); margin:0 0 16px; }
.modal-body .pricing-note { color:var(--text-4); }
.pricing-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.price-card { position:relative; display:flex; flex-direction:column; gap:10px; background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-l); padding:16px 16px 14px; transition:border-color .2s, box-shadow .2s; }
.price-card.featured { border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-soft), 0 8px 24px rgba(1,4,9,.35); background:linear-gradient(180deg, rgba(88,166,255,.06), transparent 55%), var(--bg-inset); }
.price-card.is-current { border-color:var(--ok); box-shadow:0 0 0 1px var(--ok-soft); }
.price-head { display:flex; align-items:center; gap:8px; }
.price-name { font-weight:700; font-size:16px; color:var(--text); }
.tier-flag { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.tier-flag.free { background:var(--bg-active); color:var(--text-3); }
.tier-flag.current { background:var(--ok-soft); color:#7ee2a8; border:1px solid rgba(63,185,80,.4); }
.tier-flag.popular { background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); color:var(--gold-ink); }
.price-amount { display:flex; align-items:baseline; gap:4px; }
.price-amount .price-num { font-size:26px; font-weight:800; color:var(--text); }
.price-amount .price-per { font-size:12px; color:var(--text-3); }
.price-tagline { font-size:12.5px; color:var(--text-3); margin-top:-6px; }
.price-feats { list-style:none; display:flex; flex-direction:column; gap:6px; margin:2px 0 0; }
.price-feats li { font-size:13px; color:var(--text-2); display:flex; gap:8px; align-items:flex-start; line-height:1.45; }
.price-feats li::before { content:"✓"; color:var(--ok); font-weight:800; flex-shrink:0; }
.price-feats li.no::before { content:"—"; color:var(--text-4); }
.price-cta { margin-top:auto; padding:12px 14px; border:none; border-radius:var(--radius-m); font-size:14.5px; font-weight:800; cursor:pointer; font-family:inherit; transition:transform .15s, filter .15s, background .15s; touch-action:manipulation; }
.price-cta.primary { background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; }
.price-cta.primary:hover { filter:brightness(1.1); }
.price-cta.ghost { background:transparent; border:1px solid var(--line-strong); color:var(--text-2); }
.price-cta.ghost:hover { background:var(--bg-active); color:var(--text); }
.price-cta:active { transform:scale(0.97); }
.pricing-note { font-size:12px; color:var(--text-4); line-height:1.6; text-align:center; margin:14px 0 0; }
.pricing-later { width:100%; margin:12px 0 0; }

/* ---- Pro / plan bars ---------------------------------------------------
   Free visitors see the non-blocking banner pinned above the composer
   ("You've used X of 5 free messages") whose CTA opens the pricing modal
   in-app — never a redirect. Paid Solo/Pro users see the Pro Max bar. */
.pro-chip { display:inline-block; flex-shrink:0; background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); color:var(--gold-ink); font-size:10px; font-weight:800; letter-spacing:0.9px; padding:3px 9px; border-radius:20px; text-transform:uppercase; }
.plan-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; margin:0 calc(16px + var(--sar)) 0 calc(16px + var(--sal)); padding:8px 12px; font-size:12.5px; color:var(--text-2); background:var(--warn-soft); border:1px solid rgba(210,153,34,.35); border-radius:var(--radius-m); animation:statusIn .25s ease; }
.plan-bar .plan-text { min-width:0; line-height:1.4; }
.subscribe-btn { flex-shrink:0; border:none; cursor:pointer; border-radius:20px; padding:8px 15px; font-size:12.5px; font-weight:800; color:var(--gold-ink); background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); transition:transform .15s, filter .15s; touch-action:manipulation; white-space:nowrap; }
.subscribe-btn:hover { filter:brightness(1.08); }
.subscribe-btn:active { transform:scale(0.95); }
.upgrade-bar { background:var(--accent-soft); border-color:var(--accent-line); }
.upgrade-bar .subscribe-btn { background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; }

/* ---- App shell ---------------------------------------------------------
   #app owns the viewport and hides overflow; only #chatContainer scrolls. */
#app { display:flex; flex-direction:column; width:100%; max-width:600px; margin:0 auto; height:100vh; height:100dvh; overflow:hidden; }
header { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; padding: calc(12px + var(--sat)) calc(16px + var(--sar)) 12px calc(16px + var(--sal)); background:var(--bg-raise); border-bottom:1px solid var(--line); }
.header-left { display:flex; align-items:center; gap:10px; min-width:0; }
.logo { height:32px; width:32px; border-radius:8px; object-fit:contain; flex-shrink:0; }
.app-name { font-size:18px; font-weight:650; white-space:nowrap; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:6px; flex-shrink:0; }
.status-dot.online { background:var(--ok); box-shadow:0 0 8px rgba(63,185,80,.5); }
.status-dot.offline { background:var(--danger); box-shadow:0 0 8px rgba(248,81,73,.5); }
.header-right { display:flex; gap:2px; flex-shrink:0; }
/* Icon buttons: ≥44px touch targets, one per header control. */
.icon-btn { background:none; border:none; color:var(--text-3); font-size:20px; cursor:pointer; min-width:44px; min-height:44px; padding:6px 8px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s, transform .1s; touch-action:manipulation; }
.icon-btn:hover { background:var(--bg-active); color:var(--text); }
.icon-btn:active { transform:scale(0.92); }
.icon-btn.feedback { color:var(--ok); border:1px solid rgba(63,185,80,.45); border-radius:50%; background:var(--ok-soft); }

/* ---- Idea / folder switcher (local-companion builds only) --------------
   A slim row under the header: the dropdown shows the active idea folder
   (General when none is open) and the + New Idea button opens the create
   modal. script.js hides the row on public/serverless deploys, which have
   no local folders to switch between. */
.idea-switcher { display:flex; align-items:center; gap:8px; flex-shrink:0; padding:6px calc(16px + var(--sar)) 6px calc(16px + var(--sal)); background:var(--bg-raise); border-bottom:1px solid var(--line); }
.idea-switcher-icon { font-size:15px; line-height:1; flex-shrink:0; }
.idea-switcher-select { flex:1 1 auto; min-width:0; min-height:40px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-s); background:var(--bg-inset); color:var(--text); font-size:13.5px; font-weight:600; font-family:inherit; color-scheme:dark; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.idea-switcher-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.idea-new-btn { flex-shrink:0; min-height:40px; padding:0 14px; border:none; border-radius:var(--radius-s); background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; transition:transform .15s, filter .15s; touch-action:manipulation; }
.idea-new-btn:hover { filter:brightness(1.08); }
.idea-new-btn:active { transform:scale(0.96); }

/* #chatScroll owns the flex slot inside #app and the newest-message overlay
   button; #chatContainer is the real scroll box inside it, so the floating
   "jump to newest" pill can overlay the chat region without scrolling away. */
#chatScroll { position:relative; flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
#chatContainer { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:16px 20px 4px; display:flex; flex-direction:column; gap:12px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
/* The chat scrollbar must be findable (some platforms/browsers hide overlay
   scrollbars until a drag starts), so give it a real track + grabbable thumb. */
#chatContainer::-webkit-scrollbar { width:8px; }
#chatContainer::-webkit-scrollbar-track { background:rgba(1,4,9,0.35); border-radius:10px; }
#chatContainer::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:10px; }
#chatContainer::-webkit-scrollbar-thumb:hover { background:#3d444d; }
/* Jump-to-newest pill: floats over the bottom-right of the chat. script.js
   shows it only while the reader is scrolled up from the newest message, so
   there is always a visible way back to the bottom (and a grab target when the
   platform hides the scrollbar). */
.jump-newest { position:absolute; right:14px; bottom:12px; z-index:30; min-width:44px; height:44px; padding:0 14px; border:none; border-radius:22px; background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; font-family:inherit; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; box-shadow:var(--shadow-pop); transition:transform .15s, filter .15s, opacity .2s; touch-action:manipulation; }
.jump-newest:hover { filter:brightness(1.1); }
.jump-newest:active { transform:scale(0.94); }
.message { display:flex; gap:12px; max-width:88%; min-width:0; animation:fadeIn 0.3s ease; }
.no-anim .message { animation:none; }
.message.user { align-self:flex-end; flex-direction:row-reverse; }
.message .avatar { width:32px; height:32px; border-radius:50%; background:var(--bg-active); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; line-height:1; }
.message.bot .avatar { background:linear-gradient(135deg,#13233b,#0d1a2e); color:var(--accent-hi); font-size:17px; box-shadow:inset 0 0 0 1px var(--accent-line); }
.message.user .avatar { background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; font-size:17px; }
.message .bubble { background:var(--bg-raise); border:1px solid var(--line); padding:12px 16px; border-radius:16px; border-top-left-radius:4px; color:var(--text); font-size:15px; line-height:1.6; min-width:0; overflow-wrap:anywhere; word-wrap:break-word; }
.message.user .bubble { background:linear-gradient(135deg, var(--accent-lo), var(--accent)); border-color:transparent; color:#fff; border-radius:16px; border-top-right-radius:4px; }
.message .bubble .timestamp { font-size:10px; color:var(--text-4); margin-top:6px; display:block; text-align:right; }
.message.user .bubble .timestamp { color:rgba(255,255,255,0.65); }
/* Text highlight (v66): the 🖍️ Highlight action on every chat bubble wraps
   the reader-selected message text in a yellow mark. The color pair is
   fixed (not a skin token) on purpose — the mark has to read as "paper
   highlighter" on every skin and inside the gradient user bubble. */
.highlight-mark { background:#ffd166; color:#0d1117; border-radius:4px; padding:0 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
/* Per-message meta footer: every finalized chat bubble (user question or
   Orbit answer — live, cached, offline, or restored from history) ends with
   a slim meta row holding the timestamp on the left and a right-aligned
   action group: one-tap Copy on every bubble, plus one-tap 📝 Simplify
   (v64) on Orbit answers, so users can lift any message out of the chat
   or ask for a plain-language version of an answer. */
.msg-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; flex-wrap:wrap; }
.message .bubble .msg-foot .timestamp { margin-top:0; text-align:left; }
.msg-copy-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:28px; background:none; border:1px solid transparent; color:var(--text-3); font-family:inherit; font-size:11px; font-weight:600; line-height:1; padding:0 9px; border-radius:8px; cursor:pointer; opacity:0.85; transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; touch-action:manipulation; }
.msg-copy-btn .msg-copy-ico { font-size:12.5px; line-height:1; }
.msg-copy-btn:hover { opacity:1; color:var(--text-2); background:var(--bg-active); border-color:var(--line); }
.msg-copy-btn:active { transform:scale(0.94); }
.message.user .msg-copy-btn { color:rgba(255,255,255,0.7); }
.message.user .msg-copy-btn:hover { color:#fff; background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.28); }
.msg-actions { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.msg-simplify-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:28px; background:none; border:1px solid transparent; color:var(--text-3); font-family:inherit; font-size:11px; font-weight:600; line-height:1; padding:0 9px; border-radius:8px; cursor:pointer; opacity:0.85; transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; touch-action:manipulation; }
.msg-simplify-btn .msg-simplify-ico { font-size:12.5px; line-height:1; }
.msg-simplify-btn:hover { opacity:1; color:var(--accent-hi); background:var(--bg-active); border-color:var(--line); }
.msg-simplify-btn:active { transform:scale(0.94); }
.msg-highlight-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:28px; background:none; border:1px solid transparent; color:var(--text-3); font-family:inherit; font-size:11px; font-weight:600; line-height:1; padding:0 9px; border-radius:8px; cursor:pointer; opacity:0.85; transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; touch-action:manipulation; }
.msg-highlight-btn .msg-highlight-ico { font-size:12.5px; line-height:1; }
.msg-highlight-btn:hover { opacity:1; color:#ffd166; background:var(--bg-active); border-color:var(--line); }
.msg-highlight-btn:active { transform:scale(0.94); }
.message.user .msg-highlight-btn { color:rgba(255,255,255,0.7); }
.message.user .msg-highlight-btn:hover { color:#ffd166; background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.28); }
/* Clear-highlights (v68): the 🧹 Clear action beside Highlight strips every
   yellow mark out of one message. Coral hover reads as "removal" on every
   skin; JS hides the button until the bubble actually has marks. */
.msg-clear-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:28px; background:none; border:1px solid transparent; color:var(--text-3); font-family:inherit; font-size:11px; font-weight:600; line-height:1; padding:0 9px; border-radius:8px; cursor:pointer; opacity:0.85; transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; touch-action:manipulation; }
.msg-clear-btn .msg-clear-ico { font-size:12.5px; line-height:1; }
.msg-clear-btn:hover { opacity:1; color:#ff8fa3; background:var(--bg-active); border-color:var(--line); }
.msg-clear-btn:active { transform:scale(0.94); }
.message.user .msg-clear-btn { color:rgba(255,255,255,0.7); }
.message.user .msg-clear-btn:hover { color:#ff8fa3; background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.28); }
/* ---- Level Up (interactive depth rewrite, every Orbit answer) ----
   Under each finished Orbit answer a slim row of depth chips
   (Summary · Deconstruct · History · Data · ELI5 · Spark) lets the
   reader rewrite THAT answer in a chosen style, in place. The active
   depth is highlighted; a dashed "Original" chip restores the
   pre-rewrite text. Chips use the app's CSS variables so every skin
   stays coherent, and sit between the answer and its meta footer. */
.msg-lu { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); max-width:100%; }
.msg-lu-btn, .msg-lu-orig { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex-shrink:0; background:transparent; border:1px solid var(--line-strong); border-radius:6px; color:var(--text-3); font-family:inherit; font-size:10px; font-weight:600; line-height:1.3; padding:3px 6px; cursor:pointer; opacity:.9; transition:background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; touch-action:manipulation; }
.msg-lu-btn:hover { opacity:1; color:var(--accent-hi); border-color:var(--accent-line); background:var(--bg-active); }
.msg-lu-btn:active { transform:scale(.95); }
.msg-lu-btn.is-on { opacity:1; background:var(--accent-soft); border-color:var(--accent); color:var(--accent-hi); }
.msg-lu-orig { border-style:dashed; }
.msg-lu-orig:hover { opacity:1; color:var(--text); border-color:var(--line-strong); background:var(--bg-active); }
.msg-lu.is-busy .msg-lu-btn, .msg-lu.is-busy .msg-lu-orig { opacity:.45; cursor:default; }
.msg-lu-status { font-size:10px; color:var(--text-4); }

/* ---- Mentor chat engine -----------------------------------------
   The quiet second line under a user chat message — chat line + mentor
   evaluation line. When analyzeSignals() reads a weakness or strength
   signal in the learner's message, a slim Mentor note is drawn under the
   chat text (and above the meta footer). Chrome, not content: it is never
   stored in history and Copy / Highlight skip it like the footer. */
.mentor-note { margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,0.28); font-size:12px; line-height:1.5; color:var(--text-3); }
.message.user .bubble .mentor-note { color:rgba(255,255,255,0.92); }
.mentor-note-text { display:block; min-width:0; overflow-wrap:anywhere; word-wrap:break-word; }
.message.bot .bubble .mentor-note { border-top-color:var(--line); }

/* ---- Mentor Mode: synthesis line + progress readout (v8) ---------
   Pillar 2 paints a "Synthesis" link line on an Orbit answer whose
   question crossed subjects, and pillar 3 paints the adaptive mentor
   line (reusing .mentor-note). Both are chrome like the footer: never
   stored, and skipped by Copy / Simplify / Highlight. */
.mentor-synthesis { margin-top:8px; padding-top:8px; border-top:1px dashed var(--accent-line); font-size:12px; line-height:1.5; color:var(--text-3); }
.mentor-synthesis-text { display:block; min-width:0; overflow-wrap:anywhere; word-wrap:break-word; }
.mentor-mode-profile { border-top:1px dashed var(--line-strong); padding-top:10px; }
.mentor-mode-line { color:var(--text-2); font-size:12.5px; line-height:1.6; margin:0 0 8px; }

/* ---- Welcome / empty state ---------------------------------------------
   Rendered by script.js when there is no chat history: Orbit's welcome
   message (the first bubble), a one-line empty-state note, and tappable
   suggestion chips so a brand-new visitor knows exactly what to do next. */
.welcome-hero { display:flex; flex-direction:column; align-items:center; gap:14px; padding:26px 0 18px; animation:fadeIn .3s ease; }
.welcome-hero .message { max-width:100%; width:100%; }
.welcome-hero .message .bubble { width:fit-content; max-width:100%; }
.welcome-note { font-size:12.5px; color:var(--text-4); text-align:center; line-height:1.5; }
.welcome-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.sugg-chip { display:inline-flex; align-items:center; gap:7px; background:var(--bg-raise); border:1px solid var(--line-strong); color:var(--text-2); font-size:13px; font-weight:600; font-family:inherit; padding:10px 15px; min-height:44px; border-radius:22px; cursor:pointer; transition:border-color .15s, background .15s, color .15s, transform .1s; touch-action:manipulation; }
.sugg-chip:hover { border-color:var(--accent-line); color:var(--text); background:var(--bg-hover); }
.sugg-chip:active { transform:scale(0.96); }
.sugg-chip .chip-emoji { font-size:15px; }

/* ---- Footer / composer dock --------------------------------------------
   The composer is a rounded dock: quick-tool row (Image · Task · Coach),
   then the input + send row, then a slim meta row (uploading state left,
   keyboard hint right). The input is ≥56px tall and shows a focused
   placeholder so value is obvious at a glance. */
footer { padding:12px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); background:var(--bg-raise); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex-shrink:0; align-items:stretch; }
.composer-dock { display:flex; flex-direction:column; gap:8px; background:var(--bg-inset); border:1px solid var(--line-strong); border-radius:20px; padding:8px; transition:border-color .2s, box-shadow .2s; }
.composer-dock:focus-within { border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.quick-tools { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.quick-tools::-webkit-scrollbar { display:none; }
.quick-chip { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; background:var(--bg-active); border:1px solid var(--line); color:var(--text-2); font-size:12.5px; font-weight:600; font-family:inherit; padding:8px 13px; min-height:44px; border-radius:16px; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .1s; touch-action:manipulation; }
.quick-chip:hover { border-color:var(--accent-line); color:var(--text); }
.quick-chip:active { transform:scale(0.96); background:var(--bg-hover); }
.quick-chip .qc-emoji { font-size:15px; line-height:1; }
.composer-row { display:flex; gap:8px; align-items:flex-end; width:100%; min-width:0; }
#chatInput { flex:1 1 auto; min-width:0; min-height:56px; resize:none; overflow-y:auto; max-height:180px; padding:14px 16px; border:1px solid transparent; border-radius:16px; background:var(--bg-raise); color:var(--text); font-size:16px; font-family:inherit; line-height:1.55; outline:none; -webkit-appearance:none; appearance:none; transition:background .2s; }
#chatInput::placeholder { color:var(--text-4); }
#chatInput:focus { background:var(--bg); }
.composer-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; padding:0 4px 2px; }
/* Uplevel per-message depth picker (composer): a slim pill above the text
   row — 🧠 icon + a transparent select. Same visual language as quick-chip. */
.uplevel-row { display:flex; align-items:center; gap:6px; align-self:flex-start; max-width:100%; background:var(--bg-active); border:1px solid var(--line); border-radius:999px; padding:2px 10px 2px 8px; transition:border-color .15s; }
.uplevel-row:focus-within { border-color:var(--accent-line); }
.uplevel-icon { font-size:13px; line-height:1; }
.uplevel-select { background:transparent; border:none; color:var(--text); font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 0; cursor:pointer; color-scheme:dark; outline:none; }
.uplevel-select:hover { color:var(--text-2); }
.uplevel-select:focus-visible { box-shadow:0 0 0 2px var(--accent-soft); border-radius:8px; }
.uploading-chip { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--accent-hi); font-weight:600; }
.uploading-chip .spinner { width:14px; height:14px; border-radius:50%; border:2px solid var(--accent-soft); border-top-color:var(--accent); animation:spin .7s linear infinite; }
.composer-hint { font-size:11.5px; color:var(--text-4); text-align:right; }
.composer-hint kbd { display:inline-block; background:var(--bg-active); border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font-family:inherit; font-size:10.5px; color:var(--text-2); }
.send-btn { width:52px; height:52px; min-width:52px; border-radius:50%; background:linear-gradient(135deg, var(--accent-lo), var(--accent)); border:none; color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s, opacity .15s, filter .2s; touch-action:manipulation; box-shadow:0 4px 14px rgba(31,111,235,.35); }
.send-btn:hover:not(:disabled) { filter:brightness(1.1); }
.send-btn:active { transform:scale(0.92); opacity:0.85; }
.send-btn:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; }

/* Send / Stop combo (v75 — the composer's ONE action button; script.js toggles
   .stopping while a reply streams). Idle glyph is ➤; the stop glyph is a white
   rounded square (DeepSeek-style) and the button goes red. The
   body[data-skin] rule out-specifies each skin's #sendBtn accent glow. */
.send-btn .send-glyph { display:inline-block; line-height:1; }
.send-btn .stop-glyph { display:none; width:16px; height:16px; border-radius:3px; background:#fff; }
.send-btn.stopping .send-glyph { display:none; }
.send-btn.stopping .stop-glyph { display:block; }
.send-btn.stopping,
body[data-skin] #sendBtn.stopping { background:linear-gradient(135deg, #d1382f, #f85149); box-shadow:0 4px 14px rgba(248,81,73,.4); color:#fff; }
.send-btn.stopping:hover:not(:disabled) { filter:brightness(1.1); }
.send-btn.stopping:focus-visible { outline:2px solid #f85149; outline-offset:2px; }

/* Image attach preview bar (staged image above the dock). */
.img-preview-bar { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:14px; animation:fadeIn 0.2s ease; }
.img-preview-bar img { width:44px; height:44px; border-radius:9px; object-fit:cover; flex-shrink:0; background:var(--bg-inset); border:1px solid var(--accent-line); }
.img-preview-meta { flex:1; min-width:0; }
.img-preview-name { display:block; font-size:12.5px; color:var(--accent-hi); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.img-preview-hint { display:block; font-size:11px; color:var(--text-4); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.img-remove { flex-shrink:0; background:none; border:none; color:var(--text-3); font-size:16px; line-height:1; cursor:pointer; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.img-remove:hover { color:var(--danger); background:var(--danger-soft); }

/* Prompt cache (ported from the desktop console): prompts typed while Orbit
   is still answering are held in a small on-screen FIFO queue of removable
   chips above the composer, then auto-sent one at a time as each task
   finishes. #promptCacheBar is display:none while the queue is empty. */
.promptcache-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:var(--bg-inset); border:1px dashed var(--accent-line); border-radius:14px; animation:fadeIn 0.2s ease; }
.promptcache-label { flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:0.08em; color:var(--accent-hi); text-transform:uppercase; }
#promptCacheList { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.promptcache-chip { display:inline-flex; align-items:center; gap:7px; max-width:44vw; padding:6px 8px 6px 11px; border-radius:999px; font-size:12px; color:var(--text); background:var(--bg-raise); border:1px solid var(--accent-line); }
.promptcache-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.promptcache-text:hover { color:var(--accent-hi); }
.promptcache-x { border:none; background:transparent; color:var(--text-3); cursor:pointer; font-size:12px; line-height:1; padding:2px 4px; border-radius:6px; font-family:inherit; }
.promptcache-x:hover { color:var(--danger); background:var(--danger-soft); }
.promptcache-clear { border:1px solid var(--accent-line); background:transparent; color:var(--text-3); cursor:pointer; font-size:11px; font-weight:700; padding:5px 9px; border-radius:999px; font-family:inherit; transition:color .15s, border-color .15s; }
.promptcache-clear:hover { color:var(--text); border-color:var(--accent); }

/* Sent image thumbnails inside a user chat bubble. */
.message.user .bubble .img-attach { display:block; max-width:240px; max-height:240px; width:auto; height:auto; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,0.25); margin:0 0 6px; background:rgba(0,0,0,0.2); }
.message.user .bubble .usr-text { margin-top:2px; overflow-wrap:anywhere; word-wrap:break-word; }

/* Full-screen drag-and-drop overlay. */
.drop-overlay { position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center; background:rgba(1,4,9,0.8); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); pointer-events:none; }
.drop-overlay .drop-box { padding:34px 46px; border:2px dashed var(--accent-line); border-radius:18px; color:var(--text-2); font-size:16px; font-weight:600; letter-spacing:0.3px; text-align:center; background:var(--accent-soft); box-shadow:0 0 26px rgba(88,166,255,0.18), inset 0 0 22px rgba(88,166,255,0.08); }
.drop-overlay .drop-box span { margin-left:6px; }

/* ---- Loading state: "Thinking…" + animated dots -----------------------
   The pending bot bubble shows a "Thinking…" label followed by three
   bouncing dots; the first streamed token replaces the dots in place. */
.typing { display:flex; gap:5px; padding:6px 0 8px; align-items:center; color:var(--text-3); }
.typing .typing-label { font-size:14px; color:var(--text-3); margin-right:6px; letter-spacing:.2px; }
.typing .dot { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:typing 1.2s infinite; }
.typing .dot:nth-child(2) { animation-delay:0s; }
.typing .dot:nth-child(3) { animation-delay:0.2s; }
.typing .dot:nth-child(4) { animation-delay:0.4s; }
@keyframes typing { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-7px); opacity:1; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ---- Real-time progress line -------------------------------------------
   While the harness works on an answer, {"k":"status"} SSE frames render
   the CURRENT step as this pulsing line inside the pending bubble, so the
   user watches live progress for a task — never a frozen "working…". */
.status-message { display:flex; align-items:center; gap:8px; margin:2px 0 6px; padding:6px 10px; border:1px solid var(--accent-line); border-left:3px solid var(--accent); border-radius:10px; background:var(--accent-soft); color:var(--accent-hi); font-size:12.5px; line-height:1.45; letter-spacing:0.2px; animation:statusIn 0.25s ease; }
.status-message .status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(88,166,255,0.8); flex-shrink:0; margin:0; animation:statusPulse 1.1s ease-in-out infinite; }
.status-message .status-text { min-width:0; }
@keyframes statusPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.35; transform:scale(0.72); } }
@keyframes statusIn { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }

/* ---- Markdown-rendered bot bubbles -------------------------------------- */
.bubble p { margin:6px 0; line-height:1.6; }
.bubble p:first-child { margin-top:0; }
.bubble p:last-child { margin-bottom:0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 { margin:10px 0 4px; color:var(--text); line-height:1.3; font-weight:700; }
.bubble h1 { font-size:18px; } .bubble h2 { font-size:16px; } .bubble h3 { font-size:15px; }
.bubble h4, .bubble h5, .bubble h6 { font-size:14px; }
.bubble ul, .bubble ol { margin:6px 0; padding-left:22px; }
.bubble li { margin:3px 0; line-height:1.55; }
.bubble blockquote { margin:6px 0; padding:6px 12px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 8px 8px 0; color:var(--text-2); }
.bubble a { color:var(--accent-hi); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:2px; overflow-wrap:anywhere; }
.bubble a:hover { color:#9ecbff; }
.bubble code { font-family:Consolas,'Cascadia Code',Menlo,monospace; font-size:13px; background:var(--accent-soft); border:1px solid var(--accent-line); padding:1px 5px; border-radius:5px; }
.message.user .bubble code { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff; }
.bubble .md-pre { position:relative; margin:8px 0; padding:11px 12px; overflow-x:auto; background:var(--bg-inset); border:1px solid var(--accent-line); border-radius:12px; }
.bubble .md-pre code { background:none; border:none; padding:0; font-size:12.5px; line-height:1.6; color:var(--text-2); white-space:pre; }
.bubble .md-pre[data-lang]::after { content:attr(data-lang); position:absolute; top:7px; right:10px; font-size:9.5px; letter-spacing:1.2px; color:var(--accent); opacity:0.85; text-transform:uppercase; pointer-events:none; }

/* ---- Live thinking box (deepseek-reasoner) ----------------------------- */
.message.bot.thinkmsg { align-self:flex-start; max-width:100%; width:100%; }
.thinkmsg .bubble.thx { padding:0; overflow:hidden; border:1px dashed var(--accent-line); width:100%; max-width:none; }
.thx-head { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; user-select:none; }
.thx-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:thxPulse 1s ease-in-out infinite; }
.thx-title { font-size:12.5px; color:var(--accent-hi); letter-spacing:0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thx-hint { margin-left:auto; font-size:9.5px; letter-spacing:0.8px; text-transform:uppercase; color:var(--text-4); white-space:nowrap; flex-shrink:0; }
.thx-body { max-height:220px; overflow-y:auto; padding:8px 12px 10px; border-top:1px dashed var(--accent-line); font-family:Consolas,'Cascadia Code',Menlo,monospace; font-size:12px; line-height:1.6; color:var(--text-2); background:rgba(88,166,255,0.04); display:block; }
.thx-line { white-space:pre-wrap; word-break:break-word; }
.thx-done .thx-dot { animation:none; background:var(--ok); box-shadow:0 0 8px var(--ok); }
.thx-done .thx-title { color:#7ee2a8; }
.thx-collapsed .thx-body { display:none; }
@keyframes thxPulse { 0%,100% { opacity:1; } 50% { opacity:0.25; } }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:10px; }

/* ---- Narrow phones ------------------------------------------------------ */
@media (max-width:480px) {
    .modal-content { padding:20px 16px; }
    .message .bubble { font-size:14px; padding:10px 14px; }
    #chatContainer { padding:12px 12px 2px; }
    header { padding: calc(10px + var(--sat)) calc(12px + var(--sar)) 10px calc(12px + var(--sal)); }
    footer { padding:8px calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); gap:6px; }
    .composer-dock { gap:6px; padding:6px; border-radius:18px; }
    .uplevel-row { padding:1px 8px 1px 6px; }
    .uplevel-select { font-size:12px; padding:5px 0; }
    .quick-chip { padding:7px 11px; min-height:44px; font-size:12px; }
    #chatInput { padding:13px 14px; min-height:56px; }
    .send-btn { width:50px; height:50px; min-width:50px; }
    .plan-bar { margin:0 calc(12px + var(--sar)) 0 calc(12px + var(--sal)); padding:7px 10px; font-size:11.5px; }
    .subscribe-btn { padding:7px 12px; font-size:12px; }
    .icon-btn { min-width:40px; min-height:40px; font-size:18px; padding:4px 6px; }
    .logo { height:28px; width:28px; }
    .img-preview-bar img { width:40px; height:40px; }
    .price-card { padding:14px 14px 12px; }
}

/* ---- Very narrow (foldables / SE-class widths) -------------------------- */
@media (max-width:340px) {
    .header-left { gap:6px; }
    .app-name { font-size:15px; max-width:74px; overflow:hidden; text-overflow:ellipsis; }
    .header-right { gap:0px; flex-shrink:1; }
    .pro-chip { padding:3px 6px; font-size:9px; letter-spacing:.5px; }
    .icon-btn { min-width:36px; min-height:36px; font-size:15px; padding:4px 4px; }
    .status-dot { margin-left:3px; }
    #chatContainer { gap:8px; padding:8px 8px 2px; }
    .message { gap:8px; max-width:95%; }
    .quick-chip { padding:6px 9px; font-size:11px; gap:4px; }
    .send-btn { width:48px; height:48px; min-width:48px; }
}

/* ---- Short viewports / landscape phones ---------------------------------- */
@media (max-height:440px) {
    header { padding: calc(6px + var(--sat)) calc(10px + var(--sar)) 6px calc(10px + var(--sal)); }
    .logo { height:24px; width:24px; }
    .app-name { font-size:15px; }
    .icon-btn { font-size:15px; min-width:38px; min-height:38px; padding:2px 4px; }
    .header-right { gap:0px; }
    #chatContainer { padding:8px 10px 2px; gap:8px; }
    .message { gap:8px; }
    .message .avatar { width:26px; height:26px; font-size:14px; }
    .message .bubble { padding:8px 12px; font-size:14px; }
    footer { padding:6px calc(10px + var(--sar)) calc(8px + var(--sab)) calc(10px + var(--sal)); gap:5px; }
    .composer-dock { gap:5px; padding:5px; }
    .quick-tools { gap:5px; }
    .quick-chip { padding:5px 10px; min-height:40px; }
    #chatInput { padding:10px 12px; min-height:48px; max-height:104px; }
    .send-btn { width:44px; height:44px; min-width:44px; font-size:18px; }
    .composer-foot { min-height:0; }
    .img-preview-bar { padding:5px 8px; }
    .img-preview-bar img { width:32px; height:32px; }
    .modal-content { padding:14px 16px; }
    .modal-header { margin-bottom:10px; }
    .modal-header h2 { font-size:20px; }
}

/* ============================================================
   Desktop + polish layer (keyboard, hover, motion, wide screens)
   ============================================================ */

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.close-btn:focus-visible, .icon-btn:focus-visible, .btn-primary:focus-visible,
.btn-secondary:focus-visible, .btn-danger:focus-visible, .send-btn:focus-visible,
.subscribe-btn:focus-visible, .quick-chip:focus-visible, .sugg-chip:focus-visible,
.price-cta:focus-visible { outline-offset:2px; }

.modal.show .modal-content { animation:modalIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(0.985); } to { opacity:1; transform:none; } }

@media (hover:hover) and (pointer:fine) {
    .btn-primary:hover:not(:disabled) { filter:brightness(1.1); box-shadow:0 6px 18px rgba(88,166,255,.25); }
    .btn-secondary:hover { background:var(--bg-hover); }
    .btn-danger:hover { background:rgba(248,81,73,.22); }
    .close-btn:hover { color:var(--text); }
    .project-item { transition:border-color 0.2s, background 0.2s; }
    .project-item:hover { border-color:var(--line-strong); background:var(--bg-hover); }
    ::-webkit-scrollbar { width:8px; height:8px; }
    ::-webkit-scrollbar-thumb { background:var(--line-strong); }
    ::-webkit-scrollbar-thumb:hover { background:#3d444d; }
}

/* Wide screens: float the app as a desktop window. The floating window
   (tall header/footer chrome + 28px vertical margins) only makes sense on
   desktop-shaped viewports. Landscape phones (iPhone 844–932 CSS px wide,
   390–430 px tall; Android 915×412) pass the old width test alone and ended
   up with the desktop chrome on a 430 px tall screen — the composer + header
   swallowed the chat. Gate the desktop shell on BOTH dimensions; the
   short-and-wide media query below takes over for landscape phones. */
@media (min-width:720px) and (min-height:520px) {
    body {
        background:
            radial-gradient(900px 640px at 82% -12%, rgba(88,166,255,0.08), transparent 60%),
            radial-gradient(760px 560px at -8% 112%, rgba(88,166,255,0.06), transparent 60%),
            #010409;
    }
    #app { max-width:880px; margin:14px auto; height:calc(100vh - 28px); height:calc(100dvh - 28px); background:var(--bg); border:1px solid var(--line-strong); border-radius:20px; box-shadow:var(--shadow-card); }
    #chatContainer { padding:22px 28px 6px; gap:16px; }
    .message { max-width:78%; }
    .message .avatar { width:38px; height:38px; font-size:19px; }
    .message .bubble { font-size:15.5px; padding:14px 18px; }
    .message .bubble .timestamp { font-size:11px; }
    header { padding:18px 26px; }
    .logo { height:36px; width:36px; border-radius:10px; }
    .app-name { font-size:20px; }
    .status-dot { width:10px; height:10px; margin-left:8px; }
    .icon-btn { font-size:22px; min-width:48px; min-height:48px; }
    footer { padding:16px 24px calc(16px + var(--sab)) 24px; gap:12px; }
    .plan-bar { margin:0 24px; padding:10px 14px; font-size:13px; }
    .composer-dock { padding:10px; gap:10px; }
    .quick-chip { font-size:13px; padding:9px 14px; }
    #chatInput { font-size:16px; padding:15px 20px; border-radius:18px; }
    .send-btn { width:54px; height:54px; min-width:54px; }
    .modal-content { max-width:560px; padding:34px 40px; border-radius:24px; max-height:84vh; }
    .modal-header h2 { font-size:26px; }
    .subtitle { font-size:15px; }
    .setting-group label { font-size:14px; }
    .modal-body p { font-size:14.5px; }
    .btn-primary { font-size:16px; }
    .project-item { padding:14px 18px; }
    /* Pricing: real side-by-side comparison on wide screens. */
    .pricing-grid { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
}

/* Landscape phones / short-and-wide windows (≥720 CSS px wide but under
   520 px tall): NOT a floating desktop window — the shell goes full-bleed
   wide so a one-hand landscape grip can still reach the composer, and the
   compact short-viewport sizing from the (max-height:440px) rules above
   keeps the header/footer slim. Without this block the app fell back to
   the centered ≤600 px phone column and wasted both landscape gutters. */
@media (min-width:720px) and (max-height:519px) {
    body { background:var(--bg); }
    #app { max-width:none; margin:0; height:100vh; height:100dvh; background:transparent; border:0; border-radius:0; box-shadow:none; }
    header { padding: calc(6px + var(--sat)) calc(18px + var(--sar)) 6px calc(18px + var(--sal)); }
    footer { padding:6px calc(18px + var(--sar)) calc(8px + var(--sab)) calc(18px + var(--sal)); gap:6px; }
    .logo { height:26px; width:26px; border-radius:7px; }
    .app-name { font-size:16px; }
    #chatContainer { padding:10px 20px 4px; }
    .message { max-width:72%; }
    .quick-chip { min-height:40px; }
    #chatInput { max-height:104px; }
    .composer-dock { border-radius:16px; }
    .modal-content { max-width:520px; padding:18px 22px; }
    .plan-bar { margin:0 18px; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; scroll-behavior:auto !important; }
}

/* Phones/tablets (coarse pointers): skip the GPU-heavy backdrop blur behind
   overlays (the dark scrim already separates modal from chat) and make every
   remaining tap target reach the ≥44 px guideline. Desktop (fine pointers)
   keeps the frosted-glass effect and compact buttons. (.camera-overlay is
   handled by a SECOND coarse-pointer block at the end of the file — its own
   rule is defined later than this one, so at equal specificity it would win
   and re-apply the blur.) */
@media (pointer:coarse) {
    .modal, .drop-overlay { backdrop-filter:none; -webkit-backdrop-filter:none; }
    .subscribe-btn, .verify-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    .btn-secondary, .btn-danger { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ============================================================
   DAILY QUESTS + CAMERA VERIFICATION (verify-quests.js)
   ============================================================ */
.quest-panel { flex-shrink:0; border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(88,166,255,0.05), rgba(88,166,255,0)); padding:10px calc(16px + var(--sar)) 12px calc(16px + var(--sal)); animation:questIn .3s ease; }
.quest-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.quest-head-title { font-size:15px; font-weight:700; color:var(--text); letter-spacing:0.2px; }
.quest-xp { flex-shrink:0; background:var(--bg-active); border:1px solid var(--line-strong); color:#e3b341; font-size:12px; font-weight:800; padding:5px 12px; border-radius:20px; white-space:nowrap; }
.quest-xp.quest-bump { animation:xpBump 0.6s ease; }
@keyframes xpBump { 0% { transform:scale(1); } 35% { transform:scale(1.28); } 100% { transform:scale(1); } }
.quest-progress { font-size:12px; color:var(--text-3); margin:4px 0 8px; }
.quest-list { display:flex; flex-direction:column; gap:8px; }
.quest-item { display:flex; align-items:center; gap:10px; background:var(--bg-raise); border:1px solid var(--line); border-radius:14px; padding:8px 10px; transition:opacity .3s, border-color .3s; }
.quest-item.quest-done { opacity:0.66; border-color:rgba(63,185,80,0.35); }
.quest-emoji { width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--bg-inset); border-radius:11px; }
.quest-meta { flex:1; min-width:0; }
.quest-name { font-size:14px; font-weight:600; color:var(--text); }
.quest-point { font-size:11.5px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quest-act { flex-shrink:0; }
.verify-btn { border:none; cursor:pointer; font-weight:800; border-radius:20px; padding:8px 16px; font-size:13px; color:#fff; background:linear-gradient(135deg, var(--accent-lo), var(--accent)); transition:transform .15s, filter .15s; touch-action:manipulation; }
.verify-btn:active { transform:scale(0.95); }
.verify-btn:disabled { opacity:0.5; cursor:wait; }
.quest-done-badge { display:inline-block; background:var(--ok-soft); color:#7ee2a8; border:1px solid rgba(63,185,80,0.45); border-radius:20px; padding:6px 12px; font-size:12px; font-weight:800; }
@keyframes questIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* ---- Camera overlay (verify flow) ---- */
.camera-overlay { position:fixed; inset:0; width:100%; height:100vh; height:100dvh; z-index:1200; background:rgba(1,4,9,0.96); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:calc(14px + var(--sat)) calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal)); animation:camFade .2s ease; }
@keyframes camFade { from { opacity:0; } to { opacity:1; } }
.cam-sheet { width:100%; max-width:460px; background:var(--bg); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; max-height:92vh; max-height:92dvh; }
.cam-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.cam-title { font-size:14px; font-weight:600; color:var(--text-2); line-height:1.4; }
.cam-close { background:none; border:none; color:var(--text-3); font-size:19px; cursor:pointer; padding:4px 10px; flex-shrink:0; border-radius:8px; }
.cam-close:active { color:var(--text); }
.cam-stage { position:relative; height:min(56vh, 460px); background:#000; overflow:hidden; }
.cam-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cam-still { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; inset:12% 10%; pointer-events:none; }
.scan-corner { position:absolute; width:26px; height:26px; border:3px solid var(--accent); opacity:0.95; filter:drop-shadow(0 0 6px rgba(88,166,255,0.9)); }
.scan-corner.tl { top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.scan-corner.tr { top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.scan-corner.bl { bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.scan-corner.br { bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0; }
.scan-line { position:absolute; left:2%; right:2%; top:4%; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--accent), #ffffff, var(--accent), transparent); box-shadow:0 0 14px 2px rgba(88,166,255,0.75); animation:scanMove 2.4s ease-in-out infinite; }
@keyframes scanMove { 0% { top:4%; opacity:0.4; } 15% { opacity:1; } 50% { top:92%; opacity:1; } 65% { opacity:1; } 100% { top:4%; opacity:0.4; } }
.cam-msg { position:absolute; left:0; right:0; bottom:0; margin:12px; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.5; text-align:center; }
.cam-msg.busy { background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-hi); animation:camBusyPulse 1.4s ease-in-out infinite; }
.cam-msg.ok { background:var(--ok-soft); border:1px solid rgba(63,185,80,0.5); color:#7ee2a8; }
.cam-msg.err, .cam-msg.bad { background:var(--danger-soft); border:1px solid rgba(248,81,73,0.5); color:#ffb3ad; }
@keyframes camBusyPulse { 0%,100% { opacity:0.85; } 50% { opacity:0.5; } }
.cam-foot { display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--line); }
.cam-btn { flex:1; border:none; border-radius:14px; padding:13px 8px; font-size:14px; font-weight:800; cursor:pointer; touch-action:manipulation; }
.cam-btn.go { background:linear-gradient(135deg, var(--accent-lo), var(--accent)); color:#fff; }
.cam-btn.go:active { transform:scale(0.97); }
.cam-btn.go:disabled { opacity:0.55; cursor:wait; transform:none; }
.cam-btn.ghost { background:var(--bg-active); color:var(--text-2); }
.cam-btn.ghost:active { background:var(--line-strong); }

/* ---- XP toast ---- */
.xp-toast { position:fixed; top:calc(14px + var(--sat)); left:50%; transform:translate(-50%,-18px); z-index:1400; background:linear-gradient(135deg, var(--gold-1), var(--gold-2)); color:var(--gold-ink); font-weight:800; padding:10px 18px; border-radius:30px; box-shadow:var(--shadow-pop); font-size:14px; opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease; white-space:nowrap; }
.xp-toast.show { opacity:1; transform:translate(-50%,0); }

/* ---- Orbit toast (background commands + ephemeral notes) ---- */
.orbit-toast { position:fixed; top:calc(54px + var(--sat)); left:50%; transform:translate(-50%,-10px); z-index:1400; background:var(--bg-raise); color:var(--text); border:1px solid var(--line-strong); border-left:3px solid var(--accent); padding:9px 16px; border-radius:10px; box-shadow:var(--shadow-pop); font-size:13px; line-height:1.45; max-width:min(90vw, 440px); text-align:center; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.orbit-toast.show { opacity:1; transform:translate(-50%,0); }
.orbit-toast.err { border-left-color:var(--danger); }

@media (max-width:480px) {
    .quest-panel { padding:8px calc(12px + var(--sar)) 10px calc(12px + var(--sal)); }
    .quest-item { gap:8px; padding:7px 8px; }
    .quest-emoji { width:34px; height:34px; font-size:18px; }
    .quest-point { max-width:150px; }
    .verify-btn { padding:7px 12px; font-size:12px; }
    .cam-stage { height:min(52vh, 380px); }
}

/* ============================================================
   HOVER TOOLTIPS (Tippy.js — custom "orbit" theme)
   ============================================================ */
.tippy-box[data-theme~='orbit'] {
    background-color:var(--bg-raise);
    color:var(--text);
    border:1px solid var(--line-strong);
    border-radius:6px;
    padding:0;
    font-size:12.5px;
    line-height:1.5;
    max-width:280px;
    box-shadow:var(--shadow-pop);
    text-align:left;
}
.tippy-box[data-theme~='orbit'] .tippy-content { padding:8px 12px; }
.tippy-box[data-theme~='orbit'] > .tippy-arrow { color:var(--bg-raise); }
.tippy-box[data-theme~='orbit'][data-placement^='top'] > .tippy-arrow::before { border-top-color:var(--bg-raise); }
.tippy-box[data-theme~='orbit'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color:var(--bg-raise); }
.tippy-box[data-theme~='orbit'][data-placement^='left'] > .tippy-arrow::before { border-left-color:var(--bg-raise); }
.tippy-box[data-theme~='orbit'][data-placement^='right'] > .tippy-arrow::before { border-right-color:var(--bg-raise); }
@media (pointer:coarse) {
    .tippy-box[data-theme~='orbit'] { pointer-events:none; }
}
@media (max-width:480px) {
    .tippy-box[data-theme~='orbit'] { font-size:12px; max-width:240px; }
    .tippy-box[data-theme~='orbit'] .tippy-content { padding:7px 11px; }
}


/* ---- Kids vs Monsters identity picker (first-launch onboarding) ----------
   "Are you a kid... or a monster?" — two big choice cards. Kid = free
   (5 msg/day), Monster = $29/mo unlimited; Monster Light lives in the
   pricing screen. Kept at the end so it overrides generic .modal-body p
   defaults with #identityModal specificity. */
.identity-grid { display:flex; flex-direction:column; gap:10px; margin:2px 0 14px; }
.identity-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--bg-inset); border:1px solid var(--line-strong); border-radius:var(--radius-l); padding:14px 16px; color:var(--text); font-family:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; touch-action:manipulation; }
.identity-card:hover { border-color:var(--accent-line); }
.identity-card:active { transform:scale(0.98); }
.identity-card .id-emoji { font-size:26px; width:52px; height:52px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg-raise); border-radius:14px; border:1px solid var(--line); }
.identity-card .id-main { flex:1; min-width:0; }
.identity-card .id-main b { display:block; font-size:17px; font-weight:800; }
.identity-card .id-sub { display:block; font-size:12.5px; color:var(--text-3); margin-top:2px; }
.identity-card .id-arrow { color:var(--text-4); font-size:18px; flex-shrink:0; }
.identity-card.kid { border-color:rgba(63,185,80,.5); }
.identity-card.kid .id-emoji { background:var(--ok-soft); }
.identity-card.kid:hover { box-shadow:0 0 0 1px var(--ok-soft), 0 0 18px rgba(63,185,80,.12); }
.identity-card.monster { border-color:rgba(248,81,73,.55); background:linear-gradient(180deg, rgba(248,81,73,.1), transparent 70%), var(--bg-inset); }
.identity-card.monster .id-emoji { background:var(--danger-soft); }
.identity-card.monster .id-arrow { color:#ffa198; }
.identity-card.monster:hover { box-shadow:0 0 0 1px var(--danger-soft), 0 0 18px rgba(248,81,73,.14); }
#identityModal .modal-body p { margin-bottom:14px; }
#identityModal .pricing-note { font-size:12px; margin:0 0 12px; }
#identityModal .btn-secondary { width:100%; margin:0; }
@media (max-width: 420px) {
    .identity-card { padding:12px 12px; gap:10px; }
    .identity-card .id-emoji { width:46px; height:46px; font-size:22px; }
    .identity-card .id-main b { font-size:15.5px; }
}


/* Settings "Who are you?" switch — full-width stacked taps, clearly labeled */
#chooseSideKidBtn, #chooseSideMonsterBtn { display:block; width:100%; margin:6px 0 0; text-align:center; }

/* Camera overlay re-deblur for coarse pointers. Its own rule above
   (backdrop-filter:blur(8px)) is declared AFTER the coarse-pointer block, so
   at equal specificity it would win and the GPU blur would stay on phones.
   Declared last so the coarse-pointer intent always wins here. */
@media (pointer:coarse) {
    .camera-overlay { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ============================================================
   COMMUNITY (Idea Board · Workspaces · Showcase · Shared Memory)
   Zero-AI network features — dark theme, same design tokens.
   ============================================================ */
.community-content { width:min(760px, 96vw); max-width:760px; display:flex; flex-direction:column; max-height:86vh; }
.community-content .modal-body { overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }

/* v53 Builder-tools modal (templates/snippets/guides) — same look as Community panes. */
.tools-content { width:min(640px, 96vw); max-width:640px; max-height:86vh; display:flex; flex-direction:column; }
.tools-content .modal-body { overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.toolsPane-section { margin-bottom:18px; }
.toolsPane-section-title { font-size:13px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 8px; }
.community-tabs { display:flex; gap:6px; padding:12px 20px 0; flex-wrap:wrap; }
.community-tab { flex:1 1 auto; min-width:0; background:transparent; border:1px solid transparent; color:var(--text-3); font-size:13px; font-weight:600; padding:9px 6px; border-radius:var(--radius-m); cursor:pointer; transition:background .15s,color .15s,border-color .15s; touch-action:manipulation; }
.community-tab:hover { background:var(--bg-hover); color:var(--text-2); }
.community-tab.is-active { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-hi); }
.community-pane { padding:4px 2px 8px; }
.community-pane .comm-section { margin-bottom:18px; }
.community-pane .comm-section-title { font-size:13px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 8px; }
.community-pane .comm-hint { font-size:12.5px; color:var(--text-3); margin:0 0 10px; line-height:1.45; }
.community-pane input[type="text"], .community-pane textarea { background:var(--bg-inset); }
.community-pane .comm-row { display:flex; gap:8px; margin-bottom:8px; }
.community-pane .comm-row input { flex:1; }
.community-pane .comm-row .btn-primary { width:auto; padding:12px 18px; flex-shrink:0; }
.community-pane .btn-secondary, .community-pane .btn-danger { width:auto; margin:0; }
/* Board posts */
.comm-post { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-m); padding:13px 14px; margin-bottom:10px; }
.comm-post .comm-post-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.comm-post .comm-post-title { font-size:15px; font-weight:700; color:var(--text); word-break:break-word; }
.comm-post .comm-post-by { font-size:11.5px; color:var(--text-4); white-space:nowrap; }
.comm-post .comm-post-body { font-size:13.5px; color:var(--text-2); margin:6px 0 8px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.comm-post .comm-post-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.comm-vote { display:inline-flex; align-items:center; gap:5px; background:var(--bg-active); border:1px solid var(--line); color:var(--text-2); font-size:13px; padding:5px 10px; border-radius:999px; cursor:pointer; transition:all .15s; }
.comm-vote:hover { border-color:var(--accent-line); }
.comm-vote.on { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-hi); }
.comm-comment-toggle { font-size:12.5px; color:var(--text-3); background:none; border:none; cursor:pointer; padding:4px 6px; }
.comm-comments { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.comm-comment { font-size:13px; color:var(--text-2); margin-bottom:6px; line-height:1.45; word-break:break-word; }
.comm-comment .comm-comment-by { color:var(--accent-hi); font-weight:600; }
.comm-comment .comm-comment-at { color:var(--text-4); font-size:11px; margin-left:6px; }
.comm-empty { color:var(--text-4); font-size:13px; text-align:center; padding:22px 8px; }
/* Workspaces */
.comm-ws-card { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; margin-bottom:10px; }
.comm-ws-card .comm-ws-name { font-weight:700; color:var(--text); font-size:15px; }
.comm-ws-card .comm-ws-desc { font-size:13px; color:var(--text-3); margin:3px 0 8px; line-height:1.4; word-break:break-word; }
.comm-ws-card .comm-ws-meta { font-size:11.5px; color:var(--text-4); margin-bottom:8px; }
.comm-ws-live { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; }
.comm-ws-entries { max-height:300px; overflow-y:auto; margin:10px 0; display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch; }
.comm-ws-entry { font-size:13px; color:var(--text-2); line-height:1.45; word-break:break-word; background:var(--bg-raise); border-radius:var(--radius-s); padding:8px 10px; }
.comm-ws-entry .comm-ws-entry-head { font-size:11.5px; color:var(--text-4); margin-bottom:2px; }
.comm-ws-entry .comm-ws-entry-head b { color:var(--accent-hi); font-weight:600; }
.comm-ws-file-link { color:var(--accent-hi); font-size:12.5px; text-decoration:none; }
.comm-ws-members { font-size:12px; color:var(--text-3); margin:8px 0; display:flex; flex-wrap:wrap; gap:6px; }
.comm-ws-member { background:var(--bg-active); border-radius:999px; padding:3px 10px; }
.comm-ws-composer { display:flex; gap:8px; align-items:flex-end; }
.comm-ws-composer textarea { flex:1; min-height:44px; resize:none; }
/* Showcase */
.comm-showcase-card { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-m); padding:13px 14px; margin-bottom:10px; }
.comm-showcase-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.comm-showcase-name { font-weight:700; color:var(--text); }
.comm-showcase-role { font-size:11px; color:var(--gold-1); }
.comm-showcase-tagline { font-size:13px; color:var(--text-2); margin:4px 0 8px; line-height:1.45; word-break:break-word; }
.comm-plugin { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--bg-raise); border-radius:var(--radius-s); padding:7px 10px; margin-bottom:6px; font-size:13px; }
.comm-plugin .comm-plugin-name { font-weight:600; color:var(--text); }
.comm-plugin .comm-plugin-tag { color:var(--text-3); font-size:12px; }
.comm-hire-btn { background:var(--gold-1); color:var(--gold-ink); border:none; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.comm-inbox-item { font-size:13px; color:var(--text-2); background:var(--bg-raise); border-radius:var(--radius-s); padding:8px 10px; margin-bottom:6px; line-height:1.45; word-break:break-word; }
/* Shared Memory */
.comm-mem-card { background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 14px; margin-bottom:10px; }
.comm-mem-name { font-weight:700; color:var(--text); font-size:14.5px; word-break:break-word; }
.comm-mem-meta { font-size:11.5px; color:var(--text-4); margin:3px 0 8px; }
.comm-mem-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ============================================================
   NETWORK EFFECTS — stats chips on Idea rows, ♡ like button,
   🔔 notification bell + inbox (see script.js NETWORK EFFECTS).
   ============================================================ */
.idea-stat-row { display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }
.idea-stat { font-size:11.5px; color:var(--text-3); display:inline-flex; align-items:center; gap:3px; }
.idea-stat b { font-weight:700; color:var(--text-2); font-variant-numeric:tabular-nums; }
.idea-like-btn {
  background:transparent; border:1px solid var(--line); border-radius:999px;
  width:26px; height:22px; line-height:1; padding:0; margin-left:auto;
  cursor:pointer; font-size:13px; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, border-color .12s ease;
}
.idea-like-btn:hover { transform:scale(1.12); border-color:var(--gold-1); }
.idea-like-btn.liked { border-color:#f85149; background:rgba(248,81,73,.12); }
.notif-badge {
  position:absolute; top:2px; right:-2px; min-width:16px; height:16px;
  border-radius:999px; background:#f85149; color:#fff; font-size:10px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
  box-shadow:0 0 0 2px var(--bg, #1e1e2e);
}
.icon-btn { position:relative; }
.notif-content .modal-body { padding-bottom:16px; }
.notif-markall { margin-bottom:10px; width:auto; }
.notif-list { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.notif-item {
  background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:9px 11px; font-size:13px;
}
.notif-item.unread { border-left:3px solid var(--gold-1); background:var(--bg-raise); }
.notif-item-text { color:var(--text); line-height:1.45; word-break:break-word; }
.notif-item-time { font-size:11px; color:var(--text-4); margin-top:3px; }

/* ============================================================
   SKINS (v54) — "🎨 Skin" in Settings (Settings → Skin).
   Every skin is a pure CSS-custom-property override on <body
   data-skin="...">, so the whole app (chat, modals, buttons,
   composer, community panes) re-themes through the variables it
   already uses. The default Orbit look sets no data-skin and is
   untouched. Applied at boot from localStorage orbit_skin by
   applySavedLook() in script.js; never affects stored data.
   ============================================================ */
body[data-skin="ocean"] {
  --bg: #0a1220;          /* deep navy                    */
  --bg-inset: #060d18;
  --bg-raise: #0f1b2e;
  --bg-hover: #14243c;
  --bg-active: #182b46;
  --line: #182b46;
  --line-strong: #27405f;
  --accent: #4cc2ff;      /* bright aqua accent           */
  --accent-hi: #8adfff;
  --accent-lo: #0b6cbd;
  --accent-glow: rgba(76, 194, 255, 0.35);
  --accent-soft: rgba(76, 194, 255, 0.12);
  --accent-line: rgba(76, 194, 255, 0.4);
}
body[data-skin="candy"] {
  --bg: #171226;          /* dark violet                  */
  --bg-inset: #100b1e;
  --bg-raise: #231a3a;
  --bg-hover: #2c2149;
  --bg-active: #33265a;
  --line: #33265a;
  --line-strong: #4a3a70;
  --accent: #ff5fd0;      /* hot candy-pink accent        */
  --accent-hi: #ff9be6;
  --accent-lo: #b3157f;
  --accent-glow: rgba(255, 95, 208, 0.35);
  --accent-soft: rgba(255, 95, 208, 0.13);
  --accent-line: rgba(255, 95, 208, 0.4);
}
body[data-skin="midnight"] {
  --bg: #04040a;          /* near-black                  */
  --bg-inset: #000003;
  --bg-raise: #0a0a14;
  --bg-hover: #12121f;
  --bg-active: #171728;
  --line: #171728;
  --line-strong: #26263c;
  --accent: #7b6bff;      /* electric violet accent      */
  --accent-hi: #a99cff;
  --accent-lo: #4f3fd8;
  --accent-glow: rgba(123, 107, 255, 0.35);
  --accent-soft: rgba(123, 107, 255, 0.13);
  --accent-line: rgba(123, 107, 255, 0.4);
}
body[data-skin="retrowave"] {
  --bg: #160c2e;          /* deep synthwave purple        */
  --bg-inset: #0d0620;
  --bg-raise: #1d1140;
  --bg-hover: #271554;
  --bg-active: #301a66;
  --line: #2c1a5c;
  --line-strong: #472a86;
  --accent: #ff2ea6;      /* hot neon-magenta accent      */
  --accent-hi: #ff86d0;
  --accent-lo: #a3126f;
  --accent-glow: rgba(255, 46, 166, 0.4);
  --accent-soft: rgba(255, 46, 166, 0.15);
  --accent-line: rgba(255, 46, 166, 0.45);
  /* Retrowave horizon: a soft neon-sun glow rising from the
     bottom edge plus magenta/cyan under-glows, purely atmospheric —
     every surface above still uses the variable tokens, so the
     whole shell (chat, modals, buttons, composer) stays legible. */
  background-image:
    radial-gradient(90% 46% at 50% 108%, rgba(255, 46, 166, 0.16), transparent 62%),
    radial-gradient(70% 34% at 18% 116%, rgba(79, 63, 216, 0.2), transparent 60%),
    radial-gradient(60% 30% at 84% 116%, rgba(18, 194, 233, 0.12), transparent 58%);
}
/* Let the sunset glow show through the app frame on the desktop card too
   (the phone column is already transparent behind the chat scroll). */
body[data-skin="retrowave"] #app { background:transparent; }
/* RetroSkin — the light-cycle grid from the RetroSkin project, worn by Orbit.
   Neon cyan on light-cycle black, a faint 44px grid wash and a magenta
   under-glow so the shell reads as the same skin as the desktop wallpaper
   (Projects/RetroSkin). Same contract as every other skin: pure variable
   overrides, no stored data touched. */
body[data-skin="retroskin"] {
  --bg: #05070d;          /* light-cycle black            */
  --bg-inset: #020305;
  --bg-raise: #0b1119;
  --bg-hover: #101823;
  --bg-active: #16202e;
  --line: #16202e;
  --line-strong: #24455a;
  --accent: #00ffff;      /* RetroSkin neon cyan          */
  --accent-hi: #9bfdff;
  --accent-lo: #00a6a6;
  --accent-glow: rgba(0, 255, 255, 0.35);
  --accent-soft: rgba(0, 255, 255, 0.12);
  --accent-line: rgba(0, 255, 255, 0.42);
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(90% 46% at 50% 108%, rgba(255, 0, 255, 0.13), transparent 62%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
body[data-skin="retroskin"] #app { background:transparent; }
/* The status-dot / brand edges pick the new accent too. */
body[data-skin="ocean"] #sendBtn,
body[data-skin="candy"] #sendBtn,
body[data-skin="midnight"] #sendBtn,
body[data-skin="retrowave"] #sendBtn,
body[data-skin="retroskin"] #sendBtn {
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* ============================================================
   FEATURE GATES (v56) — tier + legal-hold status badges
   Rendered by script.js applyOrbitFeatureGates(): a gated entry
   point carries data-gate-badge (chip text), data-gate-kind
   (tier | info | hold) and data-gate-hold (legal | regulatory |
   investor). The chip is a pure ::after so it survives the
   data-i18n text rewrites applyLanguage() performs. Locked tier
   rows get the accent ring so the "why" is one hover away.
   ============================================================ */
.orbit-gated { cursor: help; }
.orbit-gated::after {
  content: attr(data-gate-badge);
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.7;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
  background: var(--bg-active);
  color: var(--text-2);
  border: 1px solid var(--line-strong);
}
/* Paid-tier labels on a storeless public build: neutral, non-locking. */
.orbit-gated[data-gate-kind="info"]::after {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}
/* Tier lock: the visitor is below the required plan. */
.orbit-gated[data-gate-kind="tier"] {
  box-shadow: inset 0 0 0 1px var(--accent-line);
  border-radius: var(--radius-s);
}
.orbit-gated[data-gate-kind="tier"]::after {
  background: var(--accent-soft);
  color: var(--accent-hi);
  border-color: var(--accent-line);
}
/* Legal / regulatory review holds: amber warning chip. */
.orbit-gated[data-gate-kind="hold"][data-gate-hold="legal"]::after,
.orbit-gated[data-gate-kind="hold"][data-gate-hold="regulatory"]::after {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: rgba(210, 153, 34, .38);
}
/* Investor unlock holds: red chip — these are the pitch items. */
.orbit-gated[data-gate-kind="hold"][data-gate-hold="investor"]::after {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(248, 81, 73, .42);
}
/* Community tab chips must not overflow the tab row. */
.community-tab.orbit-gated { flex-wrap: nowrap; }
.community-tab.orbit-gated::after { margin-left: 5px; }
/* Compact screens: keep the chip readable but smaller. */
@media (max-width: 480px) {
  .orbit-gated::after { font-size: 9px; padding: 1px 6px; letter-spacing: .2px; }
}

/* ============================================================
   BUFF BAR + WORKSPACE PANELS (Phases B–F)
   Marketplace, AI Agents, Rosetta Stone and Collab boards — the
   panels behind the buff-bar buttons in index.html. Local-
   companion-only surface: script.js keeps #buffBar hidden unless
   Orbit runs beside the local companion server. Colors use the
   shell CSS variables so every skin themes the panels too.
   ============================================================ */
.buff-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px calc(16px + var(--sar)) 10px calc(16px + var(--sal));
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}
.buff-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  background: var(--bg-active);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  touch-action: manipulation;
}
.buff-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent-line); }
.buff-btn:active { transform: scale(.97); }
.buff-btn.is-open {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
}
.buff-btn span { white-space: nowrap; }

.buff-panel {
  flex-shrink: 0;
  margin: 10px calc(16px + var(--sar)) 0 calc(16px + var(--sal));
  padding: 14px;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  animation: statusIn .22s ease;
}
.buff-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.buff-panel-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text); }
.buff-panel-sub { margin: 0 0 8px; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.buff-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.buff-field {
  flex: 2 1 160px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--bg-inset);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  color-scheme: dark;
  transition: border-color .2s, box-shadow .2s;
}
.buff-field-sm { flex: 1 1 90px; }
.buff-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.buff-action {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-s);
  background: linear-gradient(135deg, var(--accent-lo), var(--accent));
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, filter .15s, opacity .15s;
  touch-action: manipulation;
}
.buff-action:hover { filter: brightness(1.08); }
.buff-action:active { transform: scale(.97); }
.buff-action:disabled { opacity: .55; cursor: default; }

.buff-list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-inset);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buff-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 9px 11px;
}
.buff-item-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.buff-item-desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.buff-meta { font-size: 11.5px; color: var(--text-4); margin-top: 3px; font-weight: 400; }
.buff-price {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-1, #d29922);
}
.buff-tags { font-size: 11px; color: var(--accent-hi); margin-top: 4px; opacity: .85; }
.buff-empty {
  color: var(--text-4);
  font-size: 12.5px;
  text-align: center;
  padding: 14px 8px;
  margin: 0;
}
.buff-err {
  color: #f85149;
  font-size: 12.5px;
  text-align: center;
  padding: 10px 8px;
  margin: 0;
}
#rosetta-output {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 20px;
}
/* ============================================================
   v69 BUFF PANEL UPGRADES — Marketplace buy buttons, AI Agent
   run rows + results, Collab create-board form, small panel
   header controls. Consumes the shell tokens so every skin
   themes these too. English-only product copy.
   ============================================================ */
.buff-head-btn {
  flex-shrink: 0;
  min-height: 28px;
  padding: 2px 10px;
  background: var(--bg-active);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  touch-action: manipulation;
}
.buff-head-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--accent-line); }
.buff-head-btn:active { transform: scale(.96); }
.buff-head-btn:disabled { opacity: .5; cursor: default; }
.buff-subhead {
  margin: 2px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* Marketplace listing rows with a Buy action on the right. */
.buff-item-col { flex-direction: column; }
.buff-item-main { flex: 1 1 auto; min-width: 0; }
.buff-buy {
  flex-shrink: 0;
  align-self: center;
  margin-left: 10px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, opacity .15s, transform .1s;
  touch-action: manipulation;
}
.buff-buy:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.buff-buy:active { transform: scale(.96); }
.buff-buy:disabled { opacity: .5; cursor: default; background: var(--bg-active); color: var(--text-4); border-color: var(--line-strong); }
.buff-buy.is-pending { opacity: .75; cursor: wait; }
/* AI Agent cards: task input + Run, then a result line. */
.buff-run-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; width: 100%; }
.buff-run-input { flex: 1 1 170px; min-width: 0; }
.buff-run-out {
  display: none;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--bg-inset);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.buff-run-out.is-shown { display: block; }
.buff-run-out.is-err { border-color: var(--danger); color: var(--danger); }
.buff-run-out .buff-run-head { display: block; font-weight: 700; color: var(--ok); margin-bottom: 2px; }
/* Collab board cards: meta strip under the pitch. */
.buff-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-4);
}
.buff-card-meta .buff-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-active);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
}
.buff-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.buff-action-sm {
  flex-shrink: 0;
  min-height: 30px;
  padding: 0 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-lo), var(--accent));
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, filter .15s, opacity .15s;
  touch-action: manipulation;
}
.buff-action-sm:hover { filter: brightness(1.08); }
.buff-action-sm:active { transform: scale(.96); }
.buff-action-sm:disabled { opacity: .55; cursor: default; }
.buff-action-sm.is-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
}
.buff-action-sm.is-ghost:hover { color: var(--text); border-color: var(--accent-line); background: var(--bg-hover); }
.buff-owner-tag { color: var(--gold-1); font-weight: 700; }
/* One-tap Simplify: active state on the footer button while the bubble is
   showing the simplified rewrite (tap again to restore the original). */
.msg-simplify-btn.is-on {
  opacity: 1;
  color: var(--accent-hi);
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ============================================================
   MENTOR ENGINE PANEL (synthesis + mentor)
   Shared by the composer Mentor chip modal. Everything consumes
   the shell CSS variables so all skins (five, incl. retrowave) theme it. Mood hints:
   green = momentum topic, red = needs-attention topic. */
.mentor-content { max-width: 470px; padding: 20px; }
.mentor-body { padding-top: 2px; }
.mentor-mode { color: var(--accent-hi); font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.mentor-mode-desc { color: var(--text-3); font-size: 12px; line-height: 1.5; margin: 2px 0 8px; }
.mentor-hint { color: var(--text-3); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
.mentor-modewrap { margin-bottom: 8px; }
.mentor-modebar { display: flex; gap: 6px; margin: 0 0 4px; }
.mentor-mode-btn { flex: 1; background: var(--bg-active); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-weight: 700; font-family: inherit; padding: 9px 10px; border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .1s; touch-action: manipulation; }
.mentor-mode-btn:hover { border-color: var(--accent-line); color: var(--text); }
.mentor-mode-btn.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.mentor-mode-btn:active { transform: scale(0.98); }
.mentor-caption { color: var(--text-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.mentor-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mentor-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--bg-active); border: 1px solid var(--line); border-left: 3px solid var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 7px 11px 7px 9px; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s, color .15s, transform .1s; touch-action: manipulation; }
.mentor-chip:hover { border-color: var(--accent-line); color: var(--text); }
.mentor-chip:active { transform: scale(0.97); }
.mentor-chip.is-sel { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.mentor-chip.is-strong { border-left-color: #3fb950; }
.mentor-chip.is-weak { border-left-color: #f85149; }
.mentor-pill { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg-raise); border: 1px solid var(--line-strong); color: var(--text-3); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mentor-chip.is-sel .mentor-pill { color: var(--accent-hi); border-color: var(--accent); }
.mentor-signal-label { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.mentor-signal-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mentor-signal { background: var(--bg-active); border: 1px solid var(--line); color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; padding: 8px 12px; border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; touch-action: manipulation; }
.mentor-signal:hover { border-color: var(--accent-line); background: var(--bg-hover); }
.mentor-signal:active { transform: scale(0.97); }
.mentor-link { background: none; border: none; color: var(--text-3); font-size: 11.5px; font-family: inherit; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mentor-link:hover { color: var(--text-2); }
.mentor-out { margin-top: 6px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.mentor-out-title { color: var(--accent-hi); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.mentor-out-text { color: var(--text); font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; }
.mentor-deep { background: var(--accent-lo); border: none; color: #fff; font-size: 12.5px; font-weight: 700; font-family: inherit; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: filter .15s, transform .1s; touch-action: manipulation; }
.mentor-deep:hover { filter: brightness(1.15); }
.mentor-deep:active { transform: scale(0.98); }
.mentor-synth-btn { display: block; width: 100%; margin-top: 12px; background: var(--bg-active); border: 1px solid var(--accent-line); color: var(--accent-hi); font-size: 13px; font-weight: 700; font-family: inherit; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .15s, border-color .15s; touch-action: manipulation; }
.mentor-synth-btn:hover { background: var(--accent-soft); }
.mentor-profile { margin-top: 10px; }
.mentor-synth { color: var(--text-2); font-size: 12.5px; line-height: 1.65; margin: 0; background: var(--bg-active); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 10px 12px; }

/* ============================================================
   TASK ASSISTANT PANEL (deliverable breakdown + timeline +
   drafts). Shared by the composer Task Assistant chip modal.
   Consumes the shell CSS variables so all skins (five, incl. retrowave) theme it.
   Priority tags: red = urgent, amber = high, blue = medium,
   grey = low. */
.ta-content { max-width: 540px; padding: 20px; }
.ta-body { padding-top: 2px; }
.ta-banner { padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--bg-active); border: 1px solid var(--line); border-left: 3px solid var(--accent); margin-bottom: 12px; }
.ta-banner-human { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.ta-banner-sub { color: var(--text-3); font-size: 12px; line-height: 1.5; }
.ta-input-wrap { margin-bottom: 12px; }
.ta-input-label { color: var(--text-2); font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.ta-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 108px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-inset); color: var(--text); font-size: 14px; font-family: inherit; line-height: 1.6; outline: none; transition: border-color .15s, box-shadow .15s; }
.ta-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ta-input::placeholder { color: var(--text-4); }
.ta-hint { color: var(--text-4); font-size: 11.5px; line-height: 1.55; margin: 6px 2px 8px; }
.ta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ta-btn { border: none; font-family: inherit; font-weight: 700; cursor: pointer; border-radius: 12px; padding: 10px 14px; font-size: 13px; transition: filter .15s, transform .1s, background .15s, border-color .15s; touch-action: manipulation; }
.ta-btn:active { transform: scale(0.98); }
.ta-btn-primary { background: linear-gradient(135deg, var(--accent-lo), var(--accent)); color: #fff; }
.ta-btn-primary:hover { filter: brightness(1.12); }
.ta-btn-ghost { background: var(--bg-active); border: 1px solid var(--line-strong); color: var(--text-2); }
.ta-btn-ghost:hover { border-color: var(--accent-line); color: var(--text); background: var(--bg-hover); }
.ta-btn-ai { display: block; width: 100%; margin-top: 10px; background: var(--accent-lo); color: #fff; }
.ta-btn-ai:hover { filter: brightness(1.15); }
.ta-status { min-height: 18px; color: var(--danger); font-size: 12px; font-weight: 600; margin: 2px 0 8px; opacity: 0; transition: opacity .2s ease; }
.ta-status.is-visible { opacity: 1; }
.ta-results { margin-top: 4px; }
.ta-count { color: var(--text-3); font-size: 11.5px; font-weight: 600; margin-bottom: 10px; }
.ta-section { margin-bottom: 14px; }
.ta-section-title { color: var(--text-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.ta-muted { color: var(--text-4); font-size: 12.5px; line-height: 1.55; margin: 0; }
.ta-reco { background: var(--bg-active); border: 1px solid var(--accent-line); border-radius: 14px; padding: 10px 12px; }
.ta-reco-why { color: var(--text-3); font-size: 11.5px; margin-top: 6px; padding-left: 30px; }
.ta-task { display: flex; gap: 9px; align-items: flex-start; padding: 7px 2px; }
.ta-check { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.ta-task-body { min-width: 0; flex: 1; }
.ta-task-desc { color: var(--text); font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.ta-task.is-done .ta-task-desc { color: var(--text-4); text-decoration: line-through; }
.ta-task-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ta-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9px; font-size: 10.5px; font-weight: 700; background: var(--bg-raise); border: 1px solid var(--line); color: var(--text-3); }
.ta-tag.is-urgent { color: #f85149; background: var(--danger-soft); border-color: transparent; }
.ta-tag.is-high { color: #d29922; background: var(--warn-soft); border-color: transparent; }
.ta-tag.is-medium { color: var(--accent-hi); background: var(--accent-soft); border-color: transparent; }
.ta-tag.is-imp { color: var(--gold-1); background: rgba(227, 179, 65, 0.14); border-color: transparent; }
.ta-tag.is-deadline { color: var(--text-2); }
.ta-slot { background: var(--bg-active); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.ta-slot-overdue { border-color: var(--danger); background: var(--danger-soft); }
.ta-slot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ta-slot-title { color: var(--text); font-size: 13.5px; font-weight: 800; }
.ta-slot-time { color: var(--text-3); font-size: 11px; font-weight: 600; }
.ta-slot-tip { color: var(--text-3); font-size: 11.5px; line-height: 1.5; margin: 3px 0 2px; }
.ta-slot-overdue .ta-slot-title { color: var(--danger); }
.ta-slot-list { margin-top: 2px; }
.ta-draft-label { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.ta-draft-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ta-draft-tab { background: var(--bg-active); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 7px 11px; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; touch-action: manipulation; }
.ta-draft-tab:hover { border-color: var(--accent-line); color: var(--text); }
.ta-draft-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.ta-draft-pre { margin: 0; padding: 11px 13px; background: var(--bg-inset); border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--text); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; font-family: inherit; max-height: 240px; overflow-y: auto; }
.ta-copy-ok { color: var(--ok); font-size: 12px; font-weight: 700; min-width: 60px; }

/* ============================================================
   WORKSPACE DRAWERS (v4) — right-side GROUP CHAT + left-side
   SUBFILES sidebar. Fixed slide-over panels docked into the free
   side margin on wide screens; full drawers with a dimmed backdrop
   on narrow viewports. Both consume the shell design tokens so all
   skins (five, incl. retrowave) stay coherent. group_chat.js / subfiles.js render the
   content; body.sf-open / body.gc-open drive the visibility.
   ============================================================ */
.drawer-backdrop { position: fixed; inset: 0; z-index: 990; background: rgba(1,4,9,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; pointer-events: none; }
body.sf-open #sfBackdrop,
body.gc-open #gcBackdrop { opacity: 1; pointer-events: auto; }

.drawer { position: fixed; top: 0; bottom: 0; z-index: 995; display: flex; flex-direction: column; background: var(--bg); border-color: var(--line-strong); box-shadow: var(--shadow-pop); width: min(380px, 94vw); transition: transform .25s ease, visibility .25s ease; visibility: hidden; }
.drawer-left { left: 0; border-right: 1px solid var(--line-strong); transform: translateX(-105%); }
.drawer-right { right: 0; border-left: 1px solid var(--line-strong); transform: translateX(105%); }
body.sf-open .drawer-left,
body.gc-open .drawer-right { transform: translateX(0); visibility: visible; }

/* On wide screens the app column is a centered max-width:600px shell, so the
   side margins are empty — dock the drawer inside the free margin (no
   backdrop, since nothing is covered). */
@media (min-width: 1380px) {
    .drawer-backdrop { display: none !important; }
    .drawer-left { width: min(340px, calc((100vw - 640px) / 2 - 6px)); }
    .drawer-right { width: min(340px, calc((100vw - 640px) / 2 - 6px)); }
}

/* ---- shared drawer head / body / foot ---- */
.drawer-head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: calc(12px + var(--sat)) 12px 12px calc(16px + var(--sal)); background: var(--bg-raise); border-bottom: 1px solid var(--line); }
.drawer-head-text { min-width: 0; flex: 1; }
.drawer-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; }
.drawer-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-meta { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.drawer-foot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + var(--sab)); background: var(--bg-raise); border-top: 1px solid var(--line); }

/* ============================================================
   SUBFILES (left drawer) — project → subfolder file tree
   ============================================================ */
.sf-list { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.sf-note { color: var(--text-3); font-size: 11.5px; line-height: 1.55; padding: 2px 4px 4px; }
.sf-empty { margin: auto; text-align: center; color: var(--text-4); font-size: 13px; line-height: 1.6; padding: 26px 10px; }
.sf-project { background: var(--bg-raise); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sf-project.is-open { border-color: var(--accent-line); }
.sf-project-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 10px; cursor: pointer; min-height: 44px; touch-action: manipulation; }
.sf-project-head:hover { background: var(--bg-hover); }
.sf-caret { flex: 0 0 auto; width: 14px; color: var(--text-4); font-size: 11px; }
.sf-project-icon { flex: 0 0 auto; font-size: 15px; }
.sf-project-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sf-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-project-desc { color: var(--text-4); font-size: 11px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-open-chip { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--accent-hi); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 4px 9px; }
.sf-open-chip:hover { filter: brightness(1.15); }
.sf-project-body { border-top: 1px solid var(--line); background: var(--bg-inset); padding: 4px 0 8px; }
.sf-tree { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.sf-file { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); padding: 4px 0; min-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-file-ico { flex: 0 0 auto; font-size: 13px; opacity: .85; }
.sf-sub { display: flex; flex-direction: column; }
.sf-sub-head { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: none; color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 0; min-height: 36px; cursor: pointer; touch-action: manipulation; }
.sf-sub-head:hover { color: var(--text); }
.sf-sub-head .sf-caret { width: 12px; font-size: 10px; }

/* ============================================================
   GROUP CHAT (right drawer) — rooms, messages, gentle moderation
   ============================================================ */
.drawer-tabs-row { flex-shrink: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.drawer-tabs-row::-webkit-scrollbar { display: none; }
.gc-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-raise); color: var(--text-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; touch-action: manipulation; white-space: nowrap; }
.gc-tab:hover { border-color: var(--accent-line); color: var(--text); }
.gc-tab.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.gc-tab.is-active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.gc-tab-add { border-style: dashed; color: var(--text-3); }
.drawer-body-chat { display: flex; overflow: hidden; }
.gc-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.gc-empty { margin: auto; text-align: center; color: var(--text-4); font-size: 13px; line-height: 1.5; padding: 24px 8px; }
.gc-msg.sys { align-self: center; max-width: 94%; display: flex; justify-content: center; }
.gc-msg.sys .gc-bubble { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-2); border-radius: 999px; padding: 5px 13px; font-size: 11.5px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.gc-msg.msg { display: flex; gap: 8px; max-width: 88%; align-items: flex-start; }
.gc-msg.msg.own { align-self: flex-end; flex-direction: row-reverse; }
.gc-ava { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: var(--bg-active); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-2); overflow: hidden; }
.gc-msg.msg.own .gc-ava { background: linear-gradient(135deg, var(--accent-lo), var(--accent)); color: #fff; border-color: transparent; }
.gc-msg-inner { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.gc-msg.msg.own .gc-msg-inner { align-items: flex-end; }
.gc-meta-line { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-4); padding: 0 4px; }
.gc-msg.msg.own .gc-meta-line { flex-direction: row-reverse; }
.gc-author { font-weight: 700; color: var(--text-3); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-msg.msg .gc-bubble { background: var(--bg-raise); border: 1px solid var(--line); padding: 8px 12px; border-radius: 15px; border-top-left-radius: 4px; color: var(--text); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.gc-msg.msg.own .gc-bubble { background: linear-gradient(135deg, var(--accent-lo), var(--accent)); border-color: transparent; color: #fff; border-radius: 15px; border-top-right-radius: 4px; }
.gc-composer { flex-direction: column; align-items: stretch; gap: 8px; }
.gc-composer-row { display: flex; align-items: center; gap: 8px; }
.gc-add-member { align-self: flex-start; background: var(--bg-active); border: 1px dashed var(--line-strong); color: var(--text-3); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; touch-action: manipulation; }
.gc-add-member:hover { border-color: var(--accent-line); color: var(--text); }
.gc-input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-inset); color: var(--text); font-family: inherit; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.gc-input::placeholder { color: var(--text-4); }
.gc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gc-composer .send-btn { width: 46px; height: 46px; min-width: 46px; font-size: 19px; }

/* ============================================================
   LEGAL LINKS — Terms of Service + Privacy Policy.
   The full legal documents are standalone pages (tos.html /
   privacy.html). These styles dress the in-app entry points:
   the consent line in the first-launch Terms modal and the
   Legal group in Settings. Links always open in a new tab so
   the reader never loses an unsaved chat.
   ============================================================ */
.tos-legal-link { font-size: 12px; color: var(--text-3); margin: 10px 0 4px; line-height: 1.5; }
.tos-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 13px; }
.tos-legal-links a {
    color: var(--accent); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .15s, color .15s;
}
.tos-legal-links a:hover { color: var(--accent-hi); border-bottom-color: var(--accent-line); }
.tos-legal-links span { color: var(--text-4); }
.setting-group .tos-legal-links { margin: 0; }


/* ---- Notebook (orbit-int shell v11) ---------------------------------------------------
   A Word-style document surface. The editor is a real contenteditable page
   sized to the modal, with a wrapping toolbar above it so formatting stays
   reachable on narrow phones. */
.notebook-content { max-width: 820px; }
.notebook-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  margin-bottom: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
}
.nb-tool {
  min-width: 34px;
  min-height: 32px;
  padding: 4px 9px;
  background: var(--bg-active);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s, color .15s, border-color .15s;
}
.nb-tool:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.nb-tool:active { transform: scale(.96); }
.nb-tool.nb-underline u { text-underline-offset: 2px; }
.nb-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line-strong); }
.notebook-content {
  min-height: 42vh;
  max-height: 48vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  background: var(--bg-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.75;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.notebook-content:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.notebook-content h1 { font-size: 25px; line-height: 1.3; margin: 0 0 12px; }
.notebook-content h2 { font-size: 20px; line-height: 1.3; margin: 18px 0 10px; }
.notebook-content p { margin: 0 0 12px; }
.notebook-content ul, .notebook-content ol { margin: 0 0 12px; padding-left: 26px; }
.notebook-content li { margin-bottom: 5px; }
.notebook-content blockquote {
  margin: 12px 0;
  padding: 4px 14px;
  border-left: 3px solid var(--accent-line);
  color: var(--text-2);
}
.notebook-content code {
  background: var(--bg-active);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: Consolas, Menlo, monospace;
  font-size: 13.5px;
}
.notebook-content:empty::before {
  content: 'Start writing…';
  color: var(--text-4);
}
.notebook-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
}
.notebook-actions .notebook-save { width: auto; padding: 12px 22px; margin: 0 4px 0 0; }
.notebook-list { display: flex; flex-direction: column; gap: 8px; }
.notebook-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 4px;
}
.notebook-open {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.notebook-open:hover { background: var(--bg-hover); }
.notebook-item-name { font-size: 14.5px; font-weight: 600; }
.notebook-item-meta { font-size: 12px; color: var(--text-3); }
.notebook-del { margin: 0; align-self: center; }

/* ---- Ideas document actions (orbit-int shell v12) ----------------------
   The Notebook/Spreadsheet buttons own the top row of the Ideas panel so
   they are always visible, even before any idea row exists. */
.ideas-actions .action-btn { flex: 0 1 auto; }

/* ---- Spreadsheet (orbit-int shell v12) ---------------------------------
   A real <table> grid with sticky row/column headers. Cells are
   contenteditable and use the same tokens as the Notebook surface so every
   skin themes the grid automatically. */
.spreadsheet-content { max-width: 900px; }
.spreadsheet-grid {
  max-height: 46vh;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--bg-inset);
}
.ss-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ss-table th, .ss-table td { border: 1px solid var(--line); padding: 0; }
.ss-colhead, .ss-rowhead, .ss-corner {
  background: var(--bg-active);
  color: var(--text-3);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  min-width: 74px;
  padding: 4px 6px;
}
.ss-colhead, .ss-corner { position: sticky; top: 0; z-index: 1; }
.ss-rowhead { position: sticky; left: 0; z-index: 1; min-width: 38px; }
.ss-corner { left: 0; z-index: 2; }
.ss-cell {
  min-width: 74px;
  height: 30px;
  padding: 5px 8px;
  color: var(--text);
  vertical-align: top;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  transition: background .12s, box-shadow .12s;
}
.ss-cell:hover { background: var(--bg-hover); }
.ss-cell:focus, .ss-cell.ss-sel {
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 2px var(--accent);
}