/* ── Tokens & reset ──────────────────────────────────────────────── */
:root{
  /* ── NextMoveTheory design system — COOL palette (inherited) ──────────
     Apple-MacBook-Air vibe: cool near-white canvas, light blue-grey surfaces,
     near-black cool ink, a bright blue accent. Tokens map 1:1 to NMT's
     theme-cool.css; the whole app reads these vars so it propagates here. */
  /* ink + neutrals (greys derived from cool ink #0f1722 via alpha) */
  --ink:#0f1722; --text:#0f1722;
  --muted:rgb(15 23 32 / .6);      /* secondary text */
  --text-dim:rgb(15 23 32 / .42);  /* tertiary — hints, kbd, disabled */
  --border:rgb(15 23 32 / .11); --rule:rgb(15 23 32 / .16);
  /* surfaces — crisp white cards on a cool near-white canvas */
  --bg:#ffffff;          /* surfaces: slides, cards, panels */
  --canvas:#fcfdff;      /* cool near-white — page + letterbox */
  --surface:#eff2f7;     /* cool soft fill — inputs, options, hover */
  --surface-2:#e3e9f1;   /* cool stronger fill — tracks, badges */
  /* accent = neutral near-black (NMT's emphasis fill); bright blue for links */
  --accent:#141414; --accent-2:#2c2c2c; --accent-light:#c3d2e6;
  --accent-soft:#eef3fa;
  --link:#0a66d6; --link-hover:#0850ab;
  --aqua:#2997ff; --aqua-50:#eef5ff; --aqua-100:#d8e9ff; --aqua-600:#0a6cf0;
  --sienna:#c3d2e6; --sienna-50:#eef2f8; --sienna-100:#dde6f1; --sienna-700:#2f5a8f;
  /* semantic */
  --green:#059669; --yellow:#c79a2b; --red:#d63031; --orange:#2f5a8f;
  --letterbox:#fcfdff;
  /* radii — NMT scale (control · tile · card) */
  --radius:16px; --radius-sm:8px; --radius-tile:12px;
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;            /* UI chrome */
  --font-slide:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* slide deck content */
  --font-serif:'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--canvas);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
.btn-primary{display:inline-block;text-align:center;text-decoration:none;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:14px 22px;font-size:1rem;font-weight:600;transition:background .15s,transform .1s}
.btn-primary:hover{background:var(--accent-2)} .btn-primary:active{transform:scale(.98)}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn-primary.saved,.btn-primary.saved:hover{background:var(--green)}
.save-btn{margin-top:18px}
.btn-secondary{display:inline-block;text-align:center;text-decoration:none;background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 22px;font-size:1rem;font-weight:600}
.error{color:var(--red);margin-top:10px;font-size:.9rem;min-height:1.2em}

/* ── 16:9 virtual canvas ─────────────────────────────────────────── */
.viewer-body{background:var(--letterbox);overflow:hidden}
.viewer-layout{position:fixed;inset:0;display:flex}
.canvas-viewport{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--letterbox);overflow:auto;padding:12px}
.canvas-stage{position:relative;flex:0 0 auto}
.canvas-stage.hidden{display:none}
/* Image slides go full-bleed: image fills the whole viewport (max area, no distortion). */
.full-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--bg);display:none;padding:12px;box-sizing:border-box}
.full-image.show{display:block}
.canvas-slide{position:absolute;top:0;left:0;width:1280px;min-height:960px;background:var(--bg);transform-origin:top left;box-shadow:0 0 0 1px var(--border),0 12px 48px rgba(0,0,0,.12);border-radius:4px}
/* Slide deck content keeps its own typeface (IBM Plex Sans); the UI chrome
   around it uses the inherited NMT font (Inter). .pdf-slide-inner is the
   off-screen capture target used when building the personalized PDF. */
#slide-inner,#preview-inner,.pdf-slide-inner{position:relative;width:100%;min-height:960px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 84px;text-align:center;box-sizing:border-box;font-family:var(--font-slide)}
.pdf-slide-inner{width:1280px} /* height grows with content; captured at natural height */
.pdf-answer{width:100%;max-width:900px;font-size:26px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px}

/* Personalized-slides PDF button (slides 49 = generate, 59 = download). */
.personal-slides{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
.personal-slides-note{font-size:20px;color:var(--muted);min-height:1.2em}
#draw-overlay,#preview-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.slide-img{max-width:100%;max-height:840px;object-fit:contain;object-position:center}
/* Image slides: the picture fills the whole 4:3 canvas via object-fit:contain —
   the full image is always visible, centred, with (invisible, white) letterbox
   margins, and it can never exceed the canvas, so no slide ever scrolls. The
   draw overlay still sits on top. */
.host-image{padding:0 !important}
.host-image .slide-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center}

/* Viewer overlays: a separate scroller keeps overlays fixed while tall slides scroll. */
.viewer-vp{display:block;overflow:hidden;padding:0}
.canvas-scroll{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;background:var(--letterbox)}
.canvas-scroll.tall-scroll{overflow-y:auto;overflow-x:hidden}
.timer-badge{position:absolute;top:14px;right:14px;z-index:6;background:rgba(13,13,15,.85);color:#fff;padding:7px 14px;border-radius:20px;font-size:1rem;font-weight:600;display:none}
.timer-badge.show{display:block} .timer-badge.ending{background:var(--red)}
.timer-badge.inline{position:static;display:none;font-size:.85rem;padding:4px 10px;margin-left:6px}
.timer-badge.inline.show{display:inline-block}
/* Top-left badges stack so they never overlap: "watching" on top, fill-count under it. */
.watch-badge{position:absolute;top:14px;left:14px;z-index:6;background:rgba(15,23,32,.82);color:#fff;padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:600;display:none}
.watch-badge.show{display:block}
.fillcount-badge{position:absolute;top:52px;left:14px;z-index:6;background:var(--aqua-50);color:var(--link);padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:600;display:none}
.fillcount-badge.show{display:block}

/* Product plaque — top-centre, clear of the corner badges, shown on every slide. */
.product-bar{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:8px;max-width:min(70vw,560px);background:rgba(15,23,32,.82);color:#fff;padding:6px 8px 6px 14px;border-radius:20px;font-size:.85rem}
.product-bar.show{display:flex}
.product-bar-label{opacity:.7;flex:0 0 auto}
.product-bar-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600}
.product-bar-btn{flex:0 0 auto;background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:14px;padding:4px 12px;font-size:.8rem;font-weight:600;cursor:pointer}
.product-bar-btn:hover{background:rgba(255,255,255,.28)}

/* Change-product modal */
.product-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(13,13,15,.55);padding:20px}
.product-modal[hidden]{display:none}
.product-modal-card{background:var(--bg);border-radius:var(--radius);padding:26px 24px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.product-modal-card h3{font-size:1.25rem}
.product-modal-note{color:var(--muted);font-size:.9rem;line-height:1.4}
.product-modal-input{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box}
.product-modal-input:focus{border-color:var(--accent)}
.product-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:2px}
.product-modal-actions .btn-primary,.product-modal-actions .btn-secondary{padding:11px 18px;font-size:.92rem}
.product-modal-actions .btn-primary:disabled{opacity:.55;cursor:default}
.viewer-nav{position:absolute;bottom:14px;left:14px;z-index:6;display:flex;gap:6px}
.nav-mini{width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.92);font-size:1.3rem;color:var(--ink);line-height:1}
.nav-mini:disabled{opacity:.3}
.return-btn{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:9;background:var(--accent);color:#fff;border:none;border-radius:28px;padding:16px 34px;font-size:1.15rem;font-weight:700;box-shadow:0 6px 22px rgba(0,0,0,.32);display:none}
.return-btn:hover{background:var(--accent-2)}
.return-btn.show{display:block}
.return-btn .ret-ico{display:inline-block;margin-right:7px;position:relative;top:2px}
.react-fabs{position:absolute;bottom:14px;right:14px;z-index:6;display:flex;gap:10px}
.react-fab{width:52px;height:52px;border:none;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2);font-size:1.5rem;line-height:1}
.react-fab:active{transform:scale(.9)}
.reaction-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.reaction-fly{position:absolute;bottom:70px;font-size:2rem;animation:fly 2s ease-out forwards}
/* My own reactions: a bright glow ring so they stand out from everyone else's. */
.reaction-fly.mine{filter:drop-shadow(0 0 9px var(--aqua)) drop-shadow(0 2px 3px rgba(0,0,0,.25));z-index:9}
@keyframes fly{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-340px) scale(1.3)}}

/* ── Generic slide content (sized for the 1280x720 space) ────────── */
.info-box{max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:18px;max-height:100%;overflow:hidden}
.info-box h1{font-size:54px;font-weight:700;line-height:1.15}
.info-box .subtitle,.subtitle{font-size:30px;color:var(--muted);font-weight:500}
.body-text{font-size:30px;line-height:1.5;color:var(--ink)}
h2{font-size:40px;font-weight:600;margin-bottom:8px}

/* ── Quiz ─────────────────────────────────────────────────────────── */
.quiz-box{width:100%;max-width:920px;text-align:left}
.question{font-size:34px;font-weight:600;margin-bottom:24px;text-align:center}
.options{display:flex;flex-direction:column;gap:14px}
.option{display:flex;align-items:center;gap:16px;padding:20px 24px;font-size:24px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);text-align:left}
.option:hover{border-color:var(--accent)}
.option .letter{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-weight:600}
.option.selected{border-color:var(--accent);background:var(--surface-2)}
.option.correct{border-color:var(--green);background:rgba(0,166,125,.1)}
.option.incorrect{border-color:var(--red);background:rgba(214,48,49,.1)}
.option:disabled{opacity:.85}
.feedback{margin-top:18px;padding:16px 18px;border-radius:var(--radius-sm);font-size:22px}
.feedback.ok{background:rgba(0,166,125,.12);color:var(--green)}
.feedback.bad{background:rgba(214,48,49,.12);color:var(--red)}
.feedback .explain{margin-top:8px;color:var(--ink);font-size:20px}

/* ── Diagnostic quiz + result ────────────────────────────────────── */
.diag-box{width:100%;max-width:980px;text-align:left;max-height:100%;overflow:auto}
.diag-q{margin-bottom:18px}
.diag-q-text{font-size:24px;font-weight:600;margin-bottom:10px}
.diag-opts{display:flex;gap:10px;flex-wrap:wrap}
.diag-opt{padding:12px 16px;font-size:19px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm)}
.diag-opt.selected{border-color:var(--accent);background:var(--surface-2)}
.diag-branch{margin-bottom:22px}
.diag-branch .diag-opt{font-size:22px;font-weight:600;padding:14px 22px}
.hint{margin-top:12px;font-size:20px;color:var(--muted)}
.zone-badge{display:inline-block;padding:10px 22px;border-radius:30px;color:#fff;font-size:30px;font-weight:700}
.zone-badge.zone-green{background:var(--green)} .zone-badge.zone-yellow{background:var(--yellow)} .zone-badge.zone-red{background:var(--red)}
.weak-list{text-align:left;font-size:24px;color:var(--ink);max-width:900px;margin-top:8px}
.weak-list li{margin:8px 0}
.block-map{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:14px 0}
.block-chip{display:inline-block;padding:6px 16px;border-radius:20px;color:#fff;font-size:20px;font-weight:600}
.block-chip.chip-green{background:var(--green)} .block-chip.chip-yellow{background:var(--yellow)} .block-chip.chip-red{background:var(--red)}
.block-chip.chip-blind{background:#8b94a3}
.block-chip.chip-has-blind{outline:3px dashed #8b94a3;outline-offset:2px}
.blind-note{font-size:22px;font-weight:600;color:#5a6474;max-width:900px;margin-top:6px}
/* Core Jobs cards (C5) */
.job-summary{font-size:22px;color:var(--muted);max-width:980px;text-align:left;margin:0 auto 6px}
.job-card{width:100%;max-width:980px;margin:14px auto 0;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-tile);padding:22px 26px}
.job-num{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sienna-700)}
.job-title{font-size:28px;margin:4px 0 6px}
.job-statement{font-size:23px;font-weight:600;margin-bottom:4px}
.job-full{font-size:20px;color:var(--muted);margin-bottom:12px}
.job-row{display:flex;gap:14px;font-size:20px;margin:7px 0;line-height:1.45}
.job-label{flex:0 0 200px;font-weight:600;color:var(--sienna-700)}
.job-criteria{margin:0;padding-left:20px}
.job-criteria li{margin:3px 0}
.job-disclaimer{font-size:18px;color:var(--text-dim);max-width:980px;margin:16px auto 0;text-align:left}
.job-cluster{font-size:17px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px;border-top:1px solid var(--border);padding-top:12px}
.job-cs{display:flex;flex-direction:column;gap:5px}
.job-cs-row{font-size:19px;line-height:1.45}
.job-props{font-size:19px;font-weight:600;color:var(--sienna-700);margin-top:12px}
/* segments-compete cards */
.seg-cmp-card{width:100%;max-width:980px;margin:12px auto 0;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-tile);padding:18px 22px}
.seg-cmp-head{font-size:24px}
.seg-cmp-persona{font-size:19px;color:var(--muted);margin:4px 0 6px}
.seg-cmp-job{font-size:19px;margin-bottom:10px}
.job-verdict{font-size:23px;font-weight:600;line-height:1.4;background:var(--aqua-50);border-left:4px solid var(--aqua);border-radius:8px;padding:12px 16px;margin:8px 0 12px}
.job-killed s{color:var(--text-dim)}
.job-killed-how{color:var(--red);font-weight:600}
.block-arrow{color:var(--muted);font-size:20px}
.prio-head{font-size:26px;font-weight:700;margin-top:10px}
.prio-list{text-align:left;font-size:24px;color:var(--ink);max-width:900px;margin:6px auto 0;padding-left:28px}
.prio-list li{margin:10px 0}
.prio-note{font-size:20px;color:var(--muted);margin-top:10px}

/* ── Inputs ───────────────────────────────────────────────────────── */
.input-box{width:100%;max-width:880px;text-align:left;display:flex;flex-direction:column;gap:14px}
.task{font-size:28px;font-weight:500;text-align:center}
.textarea{width:100%;font-family:inherit;font-size:22px;padding:16px;border:2px solid var(--border);border-radius:var(--radius-sm);resize:vertical;outline:none}
.textarea:focus{border-color:var(--accent)}
.num-row{display:flex;align-items:center;gap:12px;justify-content:center}
.num-input{font-size:30px;padding:14px 18px;border:2px solid var(--border);border-radius:var(--radius-sm);outline:none;text-align:center;width:60%}
.num-unit{font-size:24px;color:var(--muted)}
.check-row{display:flex;align-items:center;gap:14px;padding:14px 18px;font-size:23px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm)}
.check-row.checked{border-color:var(--accent);background:var(--surface-2)}
.check-row input{width:24px;height:24px}

/* ── Generation outputs (segments, hypotheses) ───────────────────── */
.gen-box{width:100%;max-width:980px;text-align:left;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px}
.gen-body{display:flex;flex-direction:column;gap:14px}
.gen-wait{display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--muted);font-size:24px;padding:40px}
.spinner{width:46px;height:46px;border:5px solid var(--surface-2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
.spinner.inline{width:18px;height:18px;border-width:3px;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.seg-card{display:block;width:100%;text-align:left;padding:18px 20px;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm)}
.seg-card.selectable{cursor:pointer} .seg-card.selectable:hover{border-color:var(--accent)}
.seg-card.selected{border-color:var(--green);background:rgba(0,166,125,.08)}
.seg-card:disabled{opacity:.85}
.seg-name{font-size:24px;display:block;margin-bottom:6px}
.seg-persona{font-size:20px;color:var(--ink);margin-bottom:8px;line-height:1.4}
.seg-job{font-size:19px;color:var(--muted);margin-bottom:6px}
.seg-meta{font-size:18px;color:var(--muted)}
.hyp-card{padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:22px}
.hyp-card strong{font-size:24px;display:block;margin-bottom:6px}
.fallback-note{font-size:18px;color:var(--orange)}
.chosen-note{font-size:22px;color:var(--green);font-weight:600}
.custom-seg{display:flex;flex-direction:column;gap:10px;margin-top:10px}

/* ── Report ──────────────────────────────────────────────────────── */
.report-box{width:100%;max-width:920px;text-align:left;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px}
.report-box h1{font-size:42px}
.rep-row{display:flex;gap:12px;font-size:22px;padding:8px 0;border-bottom:1px solid var(--border)}
.rep-label{color:var(--muted);min-width:220px;font-weight:600}
.report-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.cta{margin-top:14px;background:var(--accent);color:#fff;text-decoration:none;padding:18px;border-radius:var(--radius);font-size:24px;font-weight:600;text-align:center}

/* ── Q&A (viewer) ─────────────────────────────────────────────────── */
.qa-box{width:100%;max-width:920px;text-align:left;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px}
.qa-form{display:flex;gap:10px;align-items:flex-end}
.qa-form .textarea{flex:1}
.qa-feed{display:flex;flex-direction:column;gap:10px}
.qa-item{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.qa-item.answered{opacity:.55}
.qa-text{font-size:22px;margin-bottom:8px}
.qa-meta{display:flex;gap:14px;align-items:center;font-size:18px;color:var(--muted)}
.qa-like{background:none;border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:18px;color:var(--muted)}
.qa-like.liked{color:var(--red);border-color:var(--red)}
.qa-answered{color:var(--green)} .qa-author{margin-left:auto}

/* ── Join overlay + status ───────────────────────────────────────── */
.join-overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(13,13,15,.92);padding:20px;overflow-y:auto}
.join-card{background:var(--bg);border-radius:var(--radius);padding:40px 34px;max-width:420px;width:100%;max-height:calc(100dvh - 40px);overflow-y:auto;text-align:center;display:flex;flex-direction:column;gap:14px}
.join-card h1{font-size:1.8rem} .join-card p{color:var(--muted)}
.join-card.hide{display:none}
/* Off-air stub: fully opaque — the ended webinar's content must not shine
   through (the translucent overlay also composites unreliably over the
   GPU-transformed slide canvas). */
#offair{background:#0d0d0f}
.offair-card .offair-ico{font-size:2.6rem;line-height:1}
.offair-card .btn-primary{margin-top:4px}
.offair-card .offair-hint{font-size:.82rem;opacity:.75;margin-top:6px}
.join-card input,.join-card select,.join-card textarea{width:100%;padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;outline:none;font-family:inherit;box-sizing:border-box}
#join-fields{display:flex;flex-direction:column;gap:12px}
.join-field{display:flex;flex-direction:column}
.join-back{background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer;padding:4px}
.field-label{font-size:.85rem;color:var(--muted);text-align:left}
.or{color:var(--muted);font-size:.9rem}
.status-pill{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(13,13,15,.85);color:#fff;padding:8px 16px;border-radius:20px;font-size:.85rem;opacity:0;transition:opacity .2s;pointer-events:none}
.status-pill.show{opacity:1}
.status-pill.warn{background:var(--orange)}

/* ── Quick-pick (choice / multi) entry fields ────────────────────── */
.join-choice{gap:8px}
.join-label{font-size:.92rem;color:var(--ink);text-align:left;font-weight:600;margin-bottom:2px}
.choice-opts{display:flex;flex-wrap:wrap;gap:8px}
.choice-chip{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:.92rem;color:var(--ink);transition:background .12s,border-color .12s}
.choice-chip:hover{background:var(--surface-2)}
.choice-chip.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.choice-other-input{margin-top:8px}
/* Per-field hint from the deck's intake config — sits under the input/chips. */
.join-hint{font-size:.81rem;line-height:1.35;color:var(--muted);text-align:left;margin-top:6px}

/* The question that blocks entry: outlined and scrolled into view, so a long
   survey can't hide WHICH answer is missing (the message sits above the button). */
.join-field.missing{outline:2px solid var(--red);outline-offset:8px;border-radius:10px}
/* flex:none — inside the card's flex column a two-line error would otherwise be
   squashed to its min-height and clipped by the button below it. */
#join-error{flex:none}
#join-error:not(:empty){text-align:left;font-weight:600}

/* Desktop: an entry survey with several chip questions does not fit a 420px
   column — the last question falls below the fold and viewers who don't guess
   to scroll answer nothing. Widen the card and let the chips spread out. */
@media (min-width: 720px){
  .join-card{max-width:760px;padding:38px 44px}
  #join-fields{gap:18px}
  .join-card .join-label{font-size:1rem}
}

/* ── Personalized-offer banner + modal + card ────────────────────── */
.offer-banner{position:fixed;left:14px;bottom:14px;z-index:30;display:none;align-items:center;gap:9px;background:var(--accent);color:#fff;border:none;border-radius:24px;padding:11px 17px 11px 14px;font-size:.92rem;font-weight:600;box-shadow:0 6px 22px rgba(15,23,32,.28);max-width:min(78vw,360px)}
.offer-banner.show{display:inline-flex}
.offer-banner:hover{background:var(--accent-2)}
.offer-banner-ico{font-size:1.15rem;line-height:1}
.offer-banner-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes offerPulse{0%,100%{box-shadow:0 6px 22px rgba(15,23,32,.28)}50%{box-shadow:0 6px 30px rgba(41,151,255,.6)}}
.offer-banner.pulse{animation:offerPulse 1.4s ease-in-out 4}

.offer-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(13,13,15,.6);padding:20px}
.offer-modal-sheet{position:relative;background:var(--bg);border-radius:var(--radius);max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:30px 28px;box-shadow:0 24px 60px rgba(15,23,32,.4)}
.offer-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:1.3rem;color:var(--muted);line-height:1}
.offer-modal-body{display:flex}

.offer-card{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left}
.offer-badge{align-self:flex-start;background:var(--accent-soft);color:var(--accent);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:.82rem;font-weight:600}
.offer-headline{font-size:1.45rem;font-weight:700;line-height:1.25;color:var(--ink)}
.offer-body{font-size:1.02rem;color:var(--ink);line-height:1.6}
.offer-body p{margin-bottom:10px} .offer-body a{color:var(--link)}
.offer-aha{background:var(--aqua-50);border-left:3px solid var(--aqua);border-radius:6px;padding:10px 13px;font-size:.98rem}
.offer-why{color:var(--muted);font-size:.95rem;font-style:italic}
.offer-price{font-size:.9rem;color:var(--muted)}
.offer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* Offer rendered on a full slide (and in the personal PDF) — scale up to deck size. */
.offer-slide .offer-card{gap:16px}
.offer-slide .offer-badge{font-size:16px}
.offer-slide .offer-headline{font-size:30px}
.offer-slide .offer-body{font-size:21px}
.offer-slide .offer-aha,.offer-slide .offer-why,.offer-slide .offer-price{font-size:19px}
.offer-slide .offer-cta,.offer-slide .offer-cta-2{font-size:20px;padding:14px 22px}

/* ── Engagement panel: Чат + Вопросы (Area G) ────────────────────── */
.panel{flex:0 0 340px;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--border);min-width:0}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);flex:0 0 auto}
.panel-tab{flex:1;background:none;border:none;padding:13px 8px;font-size:.95rem;font-weight:600;color:var(--text-dim);border-bottom:2px solid transparent}
.panel-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-badge{display:none;background:var(--red);color:#fff;font-size:.7rem;border-radius:10px;padding:0 6px;margin-left:4px;vertical-align:middle}
.tab-badge.show{display:inline-block}
.tab-pane{display:none;flex:1;min-height:0;flex-direction:column}
.tab-pane.active{display:flex}

.chat-slow{font-size:.74rem;color:var(--orange);padding:6px 12px 0;font-weight:500}
.chat-messages,.qa-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.chat-msg{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 10px}
.chat-msg.host{background:var(--sienna-50);border-color:var(--sienna)}
.chat-author{font-size:.74rem;color:var(--accent);font-weight:600;margin-bottom:2px}
.host-tag{margin-left:6px;background:var(--accent);color:#fff;font-size:.62rem;padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.4px}
.chat-text{font-size:.95rem;line-height:1.4;overflow-wrap:anywhere}
.chat-text a{color:var(--link);text-decoration:underline;overflow-wrap:anywhere}

/* Reactions: placed reactions show inline as chips; a hover-revealed trigger in
   the bottom-right corner opens an emoji palette popover. Both the trigger and
   palette are absolute, so neither ever changes the message height (no hover
   jump). The trigger is also always visible on touch devices. */
.chat-react{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.chat-react:not(:empty){margin-top:6px}
.react-chip{background:var(--surface-2);border:1px solid transparent;border-radius:14px;padding:2px 9px;font-size:.85rem;line-height:1.3;color:var(--text);cursor:pointer}
.react-chip.mine{border-color:var(--accent);background:var(--aqua-50)}
.react-trigger{position:absolute;right:8px;bottom:6px;display:none;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:50%;background:var(--bg);font-size:.95rem;line-height:1;box-shadow:0 1px 5px rgba(15,23,32,.12);cursor:pointer;z-index:3}
.react-trigger:hover{border-color:var(--accent-light)}
.chat-msg:hover .react-trigger{display:inline-flex}
.react-palette{position:absolute;right:8px;bottom:38px;display:none;gap:3px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:5px 9px;box-shadow:0 8px 24px rgba(15,23,32,.16);z-index:10}
.react-palette.open{display:flex}
.react-opt{background:none;border:none;font-size:1.2rem;line-height:1;cursor:pointer;padding:3px;border-radius:8px}
.react-opt:hover{background:var(--surface)}
.react-opt.mine{background:var(--aqua-50)}
@media(hover:none){ .react-trigger{display:inline-flex} }

.chat-input-row{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border);flex:0 0 auto}
.qa-ask{border-top:none;border-bottom:1px solid var(--border)}
.chat-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:10px 14px;color:var(--ink);font-size:.92rem;outline:none}
.chat-input:focus{border-color:var(--accent)}
.icon-send{flex:0 0 auto;width:42px;height:42px;border:none;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.icon-send:hover{background:var(--accent-light)}
.chat-error{padding:0 12px;color:var(--red);font-size:.78rem;max-height:0;overflow:hidden;transition:max-height .2s}
.chat-error.show{max-height:40px;padding:4px 12px}

/* Q&A items */
.qa-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.qa-item.answered{opacity:.55}
.qa-text{font-size:.95rem;margin-bottom:8px;overflow-wrap:anywhere}
.qa-text a{color:var(--link)}
.qa-meta{display:flex;gap:12px;align-items:center;font-size:.82rem;color:var(--text-dim)}
.qa-like{background:none;border:1px solid var(--border);border-radius:16px;padding:4px 12px;font-size:.85rem;color:var(--text-dim)}
.qa-like.liked{color:var(--red);border-color:var(--red)}
.qa-answered{color:var(--green)} .qa-author{margin-left:auto}

/* Mobile launcher bar + sheet close button — hidden on desktop, shown < 820px. */
.mobile-bar{display:none}
.panel-close{display:none}

@media(max-width:820px){
  /* The slide is the whole screen; chat/questions slide up as a sheet on demand. */
  .viewer-layout{flex-direction:column}
  .canvas-viewport{flex:1 1 auto;height:auto;min-height:0}

  /* Panel = full-screen bottom sheet, hidden until opened. */
  .panel{position:fixed;inset:0;z-index:40;flex:1 1 auto;border:none;
    transform:translateY(100%);transition:transform .25s ease;will-change:transform;
    box-shadow:0 -8px 30px rgba(15,23,32,.28)}
  body.panel-open .panel{transform:none}
  .panel-tabs{position:sticky;top:0;background:var(--bg);z-index:1}
  .panel-close{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:48px;background:none;border:none;border-left:1px solid var(--border);
    font-size:1.15rem;color:var(--muted)}

  /* Launcher bar at the bottom edge; hidden while the sheet is open. */
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--border)}
  body.panel-open .mobile-bar{display:none}
  .mobile-bar-btn{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;
    gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:22px;
    padding:12px;font-size:.98rem;font-weight:600;color:var(--ink)}
  .mobile-bar-btn:active{background:var(--surface-2)}

  /* Lift the floating slide controls above the launcher bar; the offer banner
     sits above them, and hides while the sheet is open (it lives in a higher
     root stacking layer than the sheet, so it would otherwise show through). */
  .viewer-nav{bottom:74px}
  .react-fabs{bottom:74px}
  .offer-banner{bottom:132px}
  body.panel-open .offer-banner{display:none}
}

/* ── Slide thumbnails (teacher + admin lists) ────────────────────── */
.slide-thumb{flex:0 0 auto;width:72px;height:54px;border:1px solid var(--border);border-radius:5px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.slide-thumb-img{width:100%;height:100%;object-fit:cover}
.slide-thumb-text{font-size:7px;line-height:1.2;color:var(--ink);text-align:center;padding:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.slide-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.slide-meta .slide-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slide-meta .slide-badge{align-self:flex-start}

.screen{display:none} .screen.active{display:block}

.job-row.job-result{background:var(--aqua-50);border-radius:8px;padding:8px 10px}
.job-row.job-result .job-label{color:var(--aqua-600)}
.job-row.job-result span:last-child{font-weight:600}