* { 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; }

/* ---- 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); }

#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; }
.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); }

/* ---- 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; }
.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; }

/* 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); }

/* 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; }
    .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); }

@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; }
}