/* LiveCue on the web: the app page (/app) and its floating window.
   The floating window gets a copy of these rules; its styles are the .pip-doc ones at the end. */
:root{
  --bg:#0D0D14; --bg-soft:#13131C; --bg-card:#181824; --bg-elev:#1E1E2C;
  --line:rgba(255,255,255,.08); --line-soft:rgba(255,255,255,.05);
  --text:#EDEDF4; --text-dim:#A6A6BC; --text-faint:#8A8AA2;
  --accent:#8B82F0; --accent-fill:#6C61E5; --accent-soft:rgba(139,130,240,.14); --accent-line:rgba(139,130,240,.35); --accent-ink:#C9C4FF;
  --green:#2BC48F; --green-soft:rgba(43,196,143,.13); --green-line:rgba(43,196,143,.35);
  --amber:#E8B44C; --amber-soft:rgba(232,180,76,.12); --amber-line:rgba(232,180,76,.3); --amber-ink:#F0CF86;
  --red:#E24B4A; --red-soft:rgba(226,75,74,.12); --red-line:rgba(226,75,74,.32); --red-ink:#FF9D9C;
  --radius:14px; --radius-lg:18px;
  --font-h:"Space Grotesk",system-ui,sans-serif; --font-b:"Inter",system-ui,sans-serif; --font-m:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{background:radial-gradient(ellipse at top,#17131f,#0b0b10 60%) fixed;color:var(--text);font-family:var(--font-b);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-h);letter-spacing:-.02em;line-height:1.2}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,select{font:inherit;color:inherit}
.wrap{max-width:880px;margin:0 auto;padding:0 24px}

/* Nav, same as the other signed-in pages */
nav{border-bottom:1px solid var(--line);background:rgba(13,13,20,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.nav-in{display:flex;align-items:center;height:62px;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:700;font-size:19px;color:var(--text)}
.logo:hover{text-decoration:none}
.logo-dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#5B4FE0);display:grid;place-items:center;font-size:13px;color:#fff}
.nav-right{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px;color:var(--text-dim)}
.nav-right a{color:var(--text-dim)}
.nav-right a:hover{color:var(--text);text-decoration:none}
.nav-credits{font-family:var(--font-m);font-size:12px;color:var(--accent);background:var(--accent-soft);padding:4px 11px;border-radius:99px;white-space:nowrap}
.nav-credits.low{color:var(--amber);background:var(--amber-soft)}
.banner{background:var(--amber-soft);border-bottom:1px solid var(--amber-line);color:var(--amber-ink);font-size:13px;padding:9px 0}
.banner a{color:var(--amber-ink);text-decoration:underline}

/* Page */
main.wrap{padding-top:44px;padding-bottom:80px}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.eyebrow.live{color:var(--green)}
.eyebrow.warn{color:var(--amber)}
.eyebrow.ended{color:var(--text-faint)}
h1{font-size:32px;margin-bottom:10px}
.lead{color:var(--text-dim);font-size:16px;max-width:640px}
.fine{font-size:13px;color:var(--text-faint);margin-top:12px}
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;margin-top:24px}
.loading{padding:80px 0;text-align:center;color:var(--text-faint);font-size:14px}

/* Buttons, same pill look as the home page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:99px;font-size:14px;font-weight:600;line-height:1.3;border:1px solid var(--line);cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,color .2s;font-family:var(--font-b);background:transparent;color:var(--text);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent-line);text-decoration:none}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
.btn.primary:hover{background:#5F55D6;box-shadow:0 8px 24px rgba(139,130,240,.35)}
.btn.big{padding:14px 36px;font-size:16px}
.btn.sm{padding:6px 14px;font-size:13px}
.btn.xs{padding:3px 11px;font-size:11.5px}
.btn.danger{color:var(--red-ink);border-color:var(--red-line)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Start */
.steps{list-style:none;counter-reset:step;display:grid;gap:14px;margin-bottom:26px}
.steps li{counter-increment:step;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--text-dim);font-size:15px}
.steps li::before{content:counter(step);width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--font-m);font-size:13px;font-weight:500;line-height:1}
.steps b{color:var(--text);font-weight:600}
.steps i{font-style:normal;color:var(--text)}
.start-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.start-row .fine{margin-top:0;max-width:420px}
.note{margin-top:16px;font-size:13px;color:var(--amber-ink)}
.tip{margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);font-size:14px}
.tip b{color:#fff;font-weight:600}

/* Settings: language and speech engine */
.settings{display:grid;gap:18px}
.set-row{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;align-items:start}
.set-label{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding-top:8px}
select{background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;color:var(--text);min-width:200px;cursor:pointer}
.engine{display:grid;gap:8px;font-size:14px;color:var(--text-dim);padding-top:5px}
.engine-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.engine-note{font-size:13px;color:var(--text-faint)}
.engine .btn{justify-self:start}
.lang-set{display:grid;gap:10px;justify-items:start}
.also-en{display:grid;gap:3px}

/* Small labels */
.pill{font-family:var(--font-m);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:var(--green-soft);color:var(--green);white-space:nowrap;line-height:1.5}
.pill.std{background:var(--accent-soft);color:var(--accent-ink)}
.pill.wait{background:var(--line);color:var(--text-dim)}
.label{font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}

/* Session */
.sess-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px}
.sess-head h1{margin-bottom:8px}
.sess-actions{display:flex;flex-wrap:wrap;gap:10px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.chip{font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);color:var(--text-dim);background:var(--bg-soft);white-space:nowrap}
.chip.on{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.chip.warn{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.chip.mono{font-family:var(--font-m);font-size:12px}
.meter{flex:0 0 90px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.meter span,.meter-line span{display:block;height:100%;width:0;background:var(--accent);transition:width .1s linear}
.notice{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;padding:12px 14px;border-radius:12px;font-size:14px;background:var(--amber-soft);color:var(--amber-ink);border:1px solid var(--amber-line)}
.notice.info{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.notice.error{background:var(--red-soft);color:var(--red-ink);border-color:var(--red-line)}
.notice > span{flex:1 1 240px}
.notice .btn{color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.notice .btn:hover{border-color:rgba(255,255,255,.35)}

/* Transcript, on the page and in the window */
.t-panel{padding:0;overflow:hidden}
.t-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line-soft);background:#191926}
.t-count{font-family:var(--font-m);font-size:11px;color:var(--text-faint)}
.t-box{max-height:55vh;min-height:200px;overflow-y:auto;padding:16px 18px;overscroll-behavior:contain}
.t-lines p{position:relative;margin:0 -6px 10px;padding:0 6px;border-radius:6px;color:var(--text-dim);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.t-lines.tappable p{cursor:pointer;transition:background .15s}
.t-lines.tappable p:hover{background:var(--accent-soft);color:var(--text)}
.t-lines p.asked::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:2px;border-radius:2px;background:var(--accent-line)}
.t-hint{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.t-lines p.latest{color:var(--text)}
.t-interim{color:var(--text);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
/* Also hear English: what the English listener heard during a line, in a small line under it. A line only it heard
   is a line of its own, with the same EN tag. */
.t-en{display:block;margin-top:1px;font-size:12.5px;line-height:1.45;color:var(--text-faint)}
.t-en::before{content:'EN';display:inline-block;margin-right:7px;padding:0 4px;border:1px solid var(--line);border-radius:4px;font:600 9px/15px var(--font-m);letter-spacing:.06em;color:var(--text-faint);vertical-align:1px}
.t-lines p.en-only .t-en{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit}
.t-empty{color:var(--text-faint);font-size:14px}
.t-empty .t-tip{margin-top:10px;font-size:12.5px}

/* Answers, on the page and in the window */
.qa-panel{margin-top:16px}
.qa-box{max-height:50vh;min-height:130px;overflow-y:auto;padding:14px 18px;overscroll-behavior:contain}
.qa-empty{color:var(--text-faint);font-size:14px}
.qa-list{display:flex;flex-direction:column;gap:10px}
.qa{border:1px solid var(--line-soft);border-radius:12px;padding:11px 13px;background:#1C1C2A}
.qa:first-child{border-color:var(--accent-line)}
.qa-label{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.qa-time{margin-left:auto;color:var(--text-faint);letter-spacing:0;text-transform:none}
.qa-q{font-size:13.5px;color:var(--text-dim);margin-bottom:7px;overflow-wrap:anywhere}
.qa-q.lines{white-space:pre-line}
.qa-a{font-size:15px;color:var(--text);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.qa-a b{color:var(--accent-ink);font-weight:600}
.qa-msg{font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.qa.warn .qa-msg,.qa.nocredits .qa-msg{color:var(--amber-ink)}
.qa.err .qa-msg{color:var(--red-ink)}
.qa-msg a{color:var(--accent-ink);text-decoration:underline}
.qa-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.qa-thinking{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-faint)}
.qa-thinking i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bob 1s infinite}
.qa-thinking i:nth-child(2){animation-delay:.15s}
.qa-thinking i:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.qa-thinking i{animation:none}}
.ask-row{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-soft)}
.ask-row input{flex:1 1 auto;min-width:0;background:var(--bg-elev);border:1px solid var(--line);border-radius:99px;padding:8px 15px;font:inherit;font-size:14px;color:var(--text);outline:none}
.ask-row input::placeholder{color:var(--text-faint)}
.ask-row input:focus{border-color:var(--accent)}

/* Settings: answer style */
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--bg-elev)}
.seg-btn{border:0;background:transparent;color:var(--text-dim);padding:5px 16px;border-radius:99px;font-size:13.5px;font-weight:600;cursor:pointer}
.seg-btn[aria-checked="true"]{background:var(--accent-fill);color:#fff}
.seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-dim);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
#modeNote{font-size:14px;color:var(--text-dim);overflow-wrap:anywhere}
.seg-btn.locked{color:var(--text-faint)}
.seg-btn.locked::after{content:"Paid";margin-left:6px;font-family:var(--font-m);font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:var(--amber-soft);color:var(--amber);vertical-align:1px}

/* Settings: notes about the job */
.notes{display:grid;gap:8px;padding-top:2px}
.notes textarea,.pip-notes textarea{width:100%;background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.5;color:var(--text);outline:none;resize:vertical}
.notes textarea{min-height:96px}
.notes textarea:focus,.pip-notes textarea:focus{border-color:var(--accent)}
.notes textarea:disabled{opacity:.6;cursor:not-allowed}
.notes textarea::placeholder,.pip-notes textarea::placeholder{color:var(--text-faint)}
.notes-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;color:var(--text-faint)}
.notes-hint{flex:1 1 260px;line-height:1.45}
.notes-count{font-family:var(--font-m);font-size:11px;color:var(--text-faint);white-space:nowrap}
.notes-msg{font-size:13px;color:var(--text-faint)}
.notes-msg:empty{display:none}
.notes-msg.ok{color:var(--green)}
.notes-msg.err{color:var(--red-ink)}

/* A streamed answer, and one that was cut off */
.caret{display:inline-block;width:7px;height:1em;margin-left:3px;vertical-align:-2px;background:var(--accent);border-radius:1px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
.qa-a.partial{color:var(--text-dim);margin-bottom:6px}
/* An early answer that an update replaced, or a note that one did */
.qa.replaced{opacity:.62}
.qa.replaced .qa-msg{color:var(--text-faint)}
.qa-note{margin-top:7px;font-size:12.5px;color:var(--text-faint)}

/* Session details */
details.diag{margin-top:22px;font-size:13px;color:var(--text-faint)}
details.diag summary{cursor:pointer;color:var(--text-dim);width:max-content}
details.diag pre{margin:12px 0;padding:12px 14px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);font-family:var(--font-m);font-size:11.5px;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;overflow-wrap:anywhere}
details.diag p{margin-top:10px}

@media (max-width:640px){
  .wrap{padding:0 16px}
  main.wrap{padding-top:30px;padding-bottom:60px}
  h1{font-size:26px}
  .panel{padding:20px}
  .t-panel{padding:0}
  .set-row{grid-template-columns:1fr;gap:6px}
  .set-label{padding-top:0}
  .nav-right{gap:12px;font-size:13px}
  .nav-credits{display:none}
  .nav-right .lc-buy .lc-buy-off{display:none}
}

/* ---------- Floating window (Document Picture-in-Picture) ---------- */
.pip-doc{height:100vh;overflow:hidden;background:#14141E;font-size:13.5px;line-height:1.5}
.pip{display:flex;flex-direction:column;height:100vh}
.pip-head{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#191926;border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.pip-title{font-family:var(--font-h);font-weight:600;font-size:14px;letter-spacing:-.01em}
.pip-status{margin-left:auto;font-family:var(--font-m);font-size:11px;color:var(--text-dim);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);flex:0 0 8px}
.dot.on{background:var(--green)}
.dot.live{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s infinite}
.dot.warn{background:var(--amber)}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.dot.live{animation:none}}
.meter-line{height:2px;background:var(--line-soft);flex:0 0 2px;overflow:hidden}
.pip .notice{margin:10px 12px 0;padding:9px 11px;font-size:12.5px;gap:8px;flex:0 0 auto}
.pip .notice > span{flex-basis:100%}
.pip-credits{margin-left:auto;font-family:var(--font-m);font-size:11px;color:var(--accent);white-space:nowrap}
.pip-credits.low{color:var(--amber)}
/* Buy credits in the window's header: green, standing still (it's on screen during the call) */
.pip-buy{flex:0 0 auto;font-size:11px;font-weight:700;line-height:1.2;padding:4px 9px;border-radius:999px;background:#15803D;color:#fff !important;text-decoration:none !important;white-space:nowrap}
.pip-buy:hover{background:#166534}
.pip-sec{display:flex;align-items:center;gap:8px;padding:9px 14px 0;flex:0 0 auto}
.pip-sec .pip-status{margin-left:auto}
.pip-qa{flex:3 1 0;min-height:90px;overflow-y:auto;padding:7px 12px 8px;overscroll-behavior:contain}
.pip-qa .qa{padding:9px 11px;border-radius:10px}
.pip-qa .qa-a{font-size:14px}
.pip-qa .qa-q{font-size:12.5px;margin-bottom:5px}
.pip-qa .qa-empty{font-size:12.5px;padding:2px 2px 0}
.pip-body{flex:2 1 0;max-height:none;min-height:60px;padding:6px 14px 8px}
.pip-body .t-lines p{font-size:13px;margin-bottom:6px}
.pip-body .t-interim{font-size:13px}
.pip-body .t-en{font-size:11.5px}
.pip-body .t-empty{font-size:12.5px}
.pip .ask-row{padding:8px 12px;flex:0 0 auto}
.pip .ask-row input{font-size:13px;padding:6px 12px}
.pip-foot{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line-soft);background:#191926;font-size:11.5px;color:var(--text-faint);flex:0 0 auto}
.pip-note{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pip-time{font-family:var(--font-m)}
.pip-foot .btn{padding:4px 12px;font-size:12px}
.pip-modes{display:flex;align-items:center;gap:8px;padding:9px 12px 0;flex:0 0 auto}
.pip-modes .seg{padding:2px}
.pip-modes .seg-btn{padding:3px 10px;font-size:12px}
.pip-modes .seg-btn.locked::after{margin-left:4px;padding:0 5px}
.pip-modes .btn{margin-left:auto}
.pip-modes .btn.has::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.pip-notes{margin:9px 12px 0;padding:10px;border:1px solid var(--accent-line);border-radius:12px;background:#1C1C2A;flex:0 0 auto;display:grid;gap:7px}
.pip-notes textarea{height:112px;resize:none;font-size:12.5px;padding:8px 10px;border-radius:10px}
.pip-notes.expert textarea#pNotesText{height:64px}
.pip-notes #pProfile{padding-bottom:8px;margin-bottom:1px;border-bottom:1px solid var(--line-soft)}
.pip-notes-foot{display:flex;align-items:center;gap:8px;font-size:11.5px}
.pip-notes-foot .notes-msg{flex:1 1 auto;font-size:11.5px;display:block}
/* Step 3: a prepared answer, written ahead from the CV */
.qa-label .qa-tag{margin-left:8px;padding:1px 7px;border-radius:99px;font-size:9.5px;letter-spacing:.05em;color:var(--green);background:var(--green-soft)}

/* First-run sound check (Phase 4) */
.first-run{margin-bottom:22px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink);font-size:14px;line-height:1.55}
.first-run b{color:var(--text)}
.link-btn{background:none;border:0;padding:0;margin-top:14px;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--accent-ink)}
.sound-check{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--bg-card);border:1px solid var(--accent-line)}
.sc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;font-size:14px}
.sc-sum{margin-left:auto;font-family:var(--font-m);font-size:12px;color:var(--text-faint)}
.sc-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.sc-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim)}
.sc-list li.done{color:var(--text)}
.sc-list li.bad{color:var(--amber-ink)}
.ck{flex:0 0 20px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;line-height:1}
.sc-list li.done .ck{border-color:var(--green-line);background:var(--green-soft);color:var(--green)}
.sc-list li.done .ck::before{content:"✓"}
.sc-list li.bad .ck{border-color:var(--amber-line);background:var(--amber-soft);color:var(--amber)}
.sc-list li.bad .ck::before{content:"!"}
.sc-list li.now .ck{border-color:var(--accent-line)}
.sc-meter{flex:0 0 120px;height:8px;margin-left:auto;border-radius:99px;background:var(--line);overflow:hidden}
.sc-meter span{display:block;height:100%;width:0;background:var(--green);transition:width .1s linear}
.sc-fine{color:var(--text-faint);font-size:12.5px}
.sc-done{margin-top:12px;font-size:14px;color:var(--green)}
/* The session screen stays still while it fills up. The sound check keeps a line for its result, and on a computer
   "Copy transcript" keeps its place (left of Stop) before the first words arrive, so the header doesn't wrap and push the
   answers and transcript down. */
#checkDone{min-height:22px}
#checkDone[hidden]{display:block!important;visibility:hidden}
@media (min-width:900px){
  body:not(.in-panel) #btnCopyText{order:-1}
  body:not(.in-panel) #btnCopyText[hidden]{display:inline-flex!important;visibility:hidden}
}
.pip-check{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 12px;font-size:11.5px;color:var(--text-faint);border-bottom:1px solid var(--line-soft);flex:0 0 auto}
.pip-check b{color:var(--text-dim);font-weight:600}
.pip-check span.done{color:var(--green)}
.pip-check span.bad{color:var(--amber)}

/* ---------- Motion: the same moves as the homepage demo, softer where you read during a call ----------
   Only looks. Everything here stops for people whose computer asks for less motion (at the end). */
@property --lc-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --lc-g{syntax:'<angle>';initial-value:0deg;inherits:true}
@keyframes lc-spin{to{--lc-a:360deg}}
@keyframes lc-glow{to{--lc-g:360deg}}

/* Start: colours turning around the button, with a soft glow behind it */
.btn.glow{position:relative;isolation:isolate;border-color:transparent;background:transparent;--lc-face:var(--accent-fill);animation:lc-glow 3.5s linear infinite;transition:transform .15s ease,box-shadow .2s}
.btn.glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;border:2px solid transparent;background:linear-gradient(var(--lc-face),var(--lc-face)) padding-box,conic-gradient(from var(--lc-g),#4285F4,#9B72CB,#D96570,#F2A60C,#4285F4) border-box}
.btn.glow::before{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;background:conic-gradient(from var(--lc-g),#4285F4,#9B72CB,#D96570,#F2A60C,#4285F4);filter:blur(12px);opacity:.65;transition:opacity .25s}
.btn.primary.glow:hover{background:transparent;box-shadow:none;--lc-face:#7A70EA}
.btn.glow:hover::before{opacity:.95}
.btn.glow:active{transform:scale(.97)}
.btn.glow:disabled::before{opacity:0}

/* The floating window pops in when it opens */
@keyframes lc-win-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
.pip{animation:lc-win-in .5s cubic-bezier(.2,1.3,.4,1)}

/* While an answer is being written: a thin ring of colours turns around the window, and around the card on this tab.
   Kept light for long calls: the window's ring is four 2px edges sharing one gradient, and both turn in 30 steps a
   second rather than every frame, so the window redraws only a thin border, and only while an answer is written.
   The card ring is for the LiveCue tab only; in the window the ring around the window does that job. */
@property --lc-r{syntax:'<angle>';initial-value:0deg;inherits:true}
@keyframes lc-ring{to{--lc-r:360deg}}
.pip-ring{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .45s;animation:lc-ring 2.6s steps(78) infinite paused}
.pip-ring i{position:absolute;background:conic-gradient(from var(--lc-r) at 50% 50%,#4285F4,#9B72CB,#D96570,#F2A60C,#4285F4) fixed}
.pip-ring i:nth-child(1){left:0;right:0;top:0;height:2px}
.pip-ring i:nth-child(2){left:0;right:0;bottom:0;height:2px}
.pip-ring i:nth-child(3){top:0;bottom:0;left:0;width:2px}
.pip-ring i:nth-child(4){top:0;bottom:0;right:0;width:2px}
.pip-ring.on{opacity:.85;animation-play-state:running}
.qa{position:relative}
.qa-box .qa.thinking::after,.qa-box .qa.streaming::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--lc-a),#4285F4,#9B72CB,#D96570,#F2A60C,#4285F4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;animation:lc-spin 2.6s steps(78) infinite}

/* Answer words fade in as they arrive: a quick plain fade (the blur made new words look smeared, in Hindi most) */
@keyframes lc-word{from{opacity:0}}
.qa-a .w{animation:lc-word .2s ease-out}

/* "Question spotted": the line lights up with a tag and a small burst of dots */
@keyframes lc-line-hi{0%,35%{background:rgba(139,130,240,.16)}100%{background:transparent}}
@keyframes lc-chip{0%{opacity:0;transform:scale(.4) translateY(6px);animation-timing-function:cubic-bezier(.2,1.6,.4,1)}14%{opacity:1;transform:none}82%{opacity:1;transform:none;animation-timing-function:ease-in}100%{opacity:0;transform:translateY(-3px)}}
@keyframes lc-burst{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--x),var(--y)) scale(.3)}}
.t-lines p.spotted{animation:lc-line-hi 3s ease-out}
.t-lines p.spotted::after{content:"\2726  Question spotted";position:absolute;right:4px;top:-9px;padding:0 8px;border-radius:99px;font:700 9.5px/1.7 var(--font-b);letter-spacing:0;color:#fff;white-space:nowrap;background:linear-gradient(90deg,#4285F4,#9B72CB,#D96570);box-shadow:0 4px 14px rgba(155,114,203,.45);pointer-events:none;animation:lc-chip 3s both}
.t-burst{position:absolute;right:62px;top:-1px;width:0;height:0;pointer-events:none}
.t-burst i{position:absolute;width:5px;height:5px;border-radius:50%;animation:lc-burst .75s ease-out forwards}

/* Fastest / Recommended / Expert: a pill slides to the one you pick */
.seg{position:relative}
.seg-btn{position:relative;z-index:1;transition:color .25s}
.seg-pill{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:99px;background:var(--accent-fill);box-shadow:0 0 14px rgba(139,130,240,.45);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.2,1.25,.4,1),width .42s cubic-bezier(.2,1.25,.4,1),opacity .2s}
.pip-modes .seg-pill{top:2px;bottom:2px}
.seg.pilled .seg-pill{opacity:1}
.seg.pilled .seg-btn[aria-checked="true"]{background:transparent}

/* Answer now glows while it works on your press */
.btn.hot,.btn.hot:hover{border-color:transparent;background:var(--accent);color:#fff;box-shadow:0 0 18px rgba(139,130,240,.65)}
/* Answer now: Start's colours turning around its edge, with a soft glow of the same colours behind it, from the first
   line in the transcript while LiveCue listens; the face turns purple while its answer comes. It stays on for the whole
   call, so it is kept light: the colours are drawn once and turned as one layer (the graphics side moves it, nothing is
   redrawn), the button clips them to a thin edge, and the glow behind stands still. */
@property --lc-face{syntax:'<color>';initial-value:transparent;inherits:true}
.btn.lit{position:relative;isolation:isolate;overflow:hidden;--lc-face:var(--bg-elev);transition:--lc-face .2s,color .2s,transform .15s,box-shadow .25s}
.btn.lit,.btn.lit:hover{border-color:transparent;background:transparent;box-shadow:-5px 0 12px -3px rgba(66,133,244,.7),5px 0 12px -3px rgba(217,101,112,.7),0 -4px 10px -4px rgba(155,114,203,.7),0 4px 10px -4px rgba(242,166,12,.65)}
/* The colours stand still (17 Oct): turning them all through a call was most of LiveCue's own work on the page, about
   4,000 style updates a minute against 2,200 without, measured in a 60 s call. */
.btn.lit::before{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;z-index:-2;background:conic-gradient(#4285F4,#9B72CB,#D96570,#F2A60C,#4285F4);pointer-events:none}
.btn.lit::after{content:"";position:absolute;inset:1.5px;border-radius:inherit;z-index:-1;background:var(--lc-face);pointer-events:none}
.btn.lit:hover{--lc-face:#28283A;box-shadow:-6px 0 14px -3px rgba(66,133,244,.95),6px 0 14px -3px rgba(217,101,112,.95),0 -4px 12px -4px rgba(155,114,203,.95),0 4px 12px -4px rgba(242,166,12,.9)}
.btn.lit:active{transform:scale(.97)}
.btn.lit.hot,.btn.lit.hot:hover{color:#fff;--lc-face:var(--accent-fill);box-shadow:-6px 0 14px -3px rgba(66,133,244,.95),6px 0 14px -3px rgba(217,101,112,.95),0 -4px 12px -4px rgba(155,114,203,.95),0 4px 12px -4px rgba(242,166,12,.9)}

/* ---------- Practice interview, with a guide (practice.html is the pretend meeting) ---------- */
.practice-card{display:flex;align-items:center;gap:14px}
.practice-card .practice-text{flex:1}
.start-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.practice-done{border-color:var(--accent-line)}
.practice-done h2{margin:2px 0 16px;font:600 22px/1.3 var(--font-h)}
.practice-done .steps{margin-bottom:12px}
.practice-done .fine{margin:0}
.practice-done .cta-row{margin-top:16px}
/* The guide's bubble, on this tab or in the floating window, next to the part it talks about */
.coach{position:fixed;z-index:70;width:min(330px,calc(100vw - 16px));padding:13px 14px 12px;border-radius:14px;background:#1F1D30;border:1px solid rgba(155,114,203,.6);
  box-shadow:0 14px 44px rgba(0,0,0,.6),0 0 24px rgba(155,114,203,.2);color:var(--text);font-size:13px;line-height:1.5;text-align:left}
.coach-kicker{font:600 10px/1.2 var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:#C9B6F2;margin-bottom:5px}
.coach h4{margin:0 0 4px;font:600 14.5px/1.35 var(--font-h);color:#fff}
.coach p{margin:0 0 8px;color:#C3C3D6}
.coach p b,.coach li b{color:#fff;font-weight:600}
.coach ol{margin:2px 0 8px;padding-left:20px;color:#C3C3D6}
.coach li{margin-bottom:2px}
.coach-pic svg{display:block;width:100%;height:auto;margin:2px 0 9px;border-radius:9px}
.coach-wait{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#9C9CB4;font-size:12px}
.coach-wait i{width:7px;height:7px;border-radius:50%;background:#9B72CB;animation:lc-coach-blink 1.4s ease-in-out infinite}
@keyframes lc-coach-blink{50%{opacity:.25}}
.coach-row{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.coach-row .coach-skip{margin-right:auto;padding:0;background:none;border:0;color:#8F8FA8;font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.coach-row .coach-skip:hover{color:#C3C3D6}
.coach-arrow{position:absolute;width:12px;height:12px;background:#1F1D30;border-left:1px solid rgba(155,114,203,.6);border-top:1px solid rgba(155,114,203,.6)}
.coach.below .coach-arrow{top:-7px;transform:rotate(45deg)}
.coach.above .coach-arrow{bottom:-7px;transform:rotate(225deg)}
.coach.right .coach-arrow{left:-7px;transform:rotate(-45deg)}
.coach.left .coach-arrow{right:-7px;transform:rotate(135deg)}
.coach.over .coach-arrow,.coach.center .coach-arrow{display:none}
.coach.tight .coach-pic{display:none}
.coach.squeeze .coach-in{overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.pip-doc .coach{font-size:12.5px;padding:11px 12px 10px}
.pip-doc .coach h4{font-size:13.5px}
/* What the guide points at: a soft ring in the Start colours, standing still */
.coach-on{outline:2px solid #9B72CB !important;outline-offset:3px;box-shadow:0 0 0 6px rgba(155,114,203,.16),0 0 26px rgba(66,133,244,.32) !important}
.pip-doc .coach-on{outline-offset:2px}

/* Sound check: each tick pops when a step passes */
@keyframes lc-tick{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:none}}
.sc-list li.done .ck{animation:lc-tick .45s ease-out}

/* The look (Settings): Lite, the default, keeps calls calm: colours stand still and words fade in plainly. Vivid, for
   fast computers, brings back the turning colours on Answer now, the turning rings while an answer is written, and
   the soft blur as words appear. (Measured 17 Oct, 60 s call: Lite about 2,300 style updates a minute, Vivid 4,000.) */
@keyframes lc-turn{to{transform:rotate(1turn)}}
@keyframes lc-word-soft{from{opacity:0;filter:blur(3px)}}
.fx-vivid .btn.lit::before{animation:lc-turn 3.5s linear infinite}
.fx-vivid .qa-a .w{animation:lc-word-soft .34s ease-out}
html:not(.fx-vivid) .qa-box .qa.thinking::after,html:not(.fx-vivid) .qa-box .qa.streaming::after,html:not(.fx-vivid) .pip-ring{animation:none}

/* The Look switch in Settings */
.fx-switch,.hm-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text);user-select:none}
.fx-switch input,.hm-switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.fx-switch .knob,.hm-switch .knob{position:relative;width:38px;height:22px;border-radius:999px;background:#2A2A3C;border:1px solid var(--line);transition:background .2s,border-color .2s;flex-shrink:0}
.fx-switch .knob::after,.hm-switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#C9C6E8;transition:transform .2s,background .2s}
.fx-switch input:checked+.knob,.hm-switch input:checked+.knob{background:var(--accent-fill);border-color:transparent}
.fx-switch input:checked+.knob::after,.hm-switch input:checked+.knob::after{transform:translateX(16px);background:#fff}
.fx-switch input:focus-visible+.knob,.hm-switch input:focus-visible+.knob{outline:2px solid var(--accent);outline-offset:2px}

/* The Buy credits button in the top bar (buy.js adds its glow; it stands still during a call) */
.nav-right .lc-buy{display:inline-flex;align-items:center;padding:7px 13px;border-radius:999px;background:#15803D;color:#fff;font-weight:700;font-size:13px;line-height:1.1;text-decoration:none;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .fx-vivid .btn.lit::before,.fx-vivid .qa-a .w,.btn.glow,.coach-wait i,.pip,.pip-ring,.qa-box .qa.thinking::after,.qa-box .qa.streaming::after,.qa-a .w,.t-lines p.spotted,.t-lines p.spotted::after,.sc-list li.done .ck{animation:none}
  .seg-pill,.seg-btn{transition:none}
}

/* ---------- Inside the LiveCue extension's side panel (/app?in=panel) ---------- */
body:not(.in-panel) .panel-only{display:none!important}
body.in-panel .web-only{display:none!important}
body.in-panel{background:var(--bg)}
body.in-panel .nav-in{height:52px;gap:12px}
body.in-panel .logo{font-size:0;gap:0}                /* Chrome's panel header already says LiveCue: the mark is enough */
body.in-panel .logo-dot{width:22px;height:22px;font-size:11px;border-radius:7px}
body.in-panel .nav-right{gap:12px;font-size:13px}
body.in-panel .nav-right a{white-space:nowrap}
body.in-panel #settings{scroll-margin-top:64px}
/* The panel is narrow: the top bar has the Buy credits button instead of the credits count (the count shows in the
   live view and in Settings), and the button leaves out the sale percent (the note and the pricing page give it). */
body.in-panel .nav-credits{display:none}
body.in-panel .nav-right .lc-buy .lc-buy-off{display:none}
body.in-panel main.wrap{padding-top:22px;padding-bottom:96px}
body.in-panel h1{font-size:22px}
body.in-panel .lead{font-size:14.5px}
body.in-panel .panel{padding:16px;margin-top:16px}
body.in-panel .steps{gap:10px;margin-bottom:16px}
body.in-panel .steps li{grid-template-columns:24px 1fr;gap:10px;font-size:14px}
body.in-panel .steps li::before{width:24px;height:24px;font-size:12px}
body.in-panel .start-row .btn.big{width:100%}
body.in-panel .practice-card{flex-direction:column;align-items:flex-start;gap:12px}   /* narrow: the button under the text */
body.in-panel .practice-card .practice-text{flex:none}
body.in-panel select{min-width:0;width:100%}
body.in-panel .settings .seg{display:flex;width:100%}
body.in-panel .settings .seg-btn{flex:1 1 auto;padding:5px 8px}
body.in-panel .t-box{max-height:none}
.panel-target{font-size:13px;line-height:1.45;color:var(--amber-ink);background:var(--amber-soft);border:1px solid var(--amber-line);border-radius:10px;padding:9px 12px;margin:0 0 14px;overflow-wrap:anywhere}
.panel-target.on{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
/* The floating window's layout, docked: it fills the panel while LiveCue listens */
.dock{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:50;background:#14141E}
body.docked{overflow:hidden}
@media (max-width:340px){
  .pip-docked .pip-modes .seg-btn{padding:3px 7px}
  .pip-docked .pip-modes .btn{padding-left:9px;padding-right:9px}
}
.dock.off{display:none}
/* Shown while Settings has the live view set aside */
.panel-back{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding:16px;background:linear-gradient(to bottom,rgba(13,13,20,0),var(--bg) 40%)}
.panel-back .btn{width:100%;justify-content:center}

/* Hear me (batch S3): the Start screen's line, the "Hearing you" button (this tab and the window) and the first-time
   card. Your words never show during the call, so these show only whether LiveCue hears you. */
.hm-start{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;color:var(--text-faint)}
.hm-start.on{color:var(--text-dim)}
.hm-mic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.06);position:relative}
.hm-mic::before{content:"";position:absolute;left:8px;top:5px;width:6px;height:9px;border-radius:3px;background:currentColor;opacity:.7}
.hm-start.on .hm-mic{background:var(--green-soft);color:var(--green)}
.hm-chip{cursor:pointer;font:inherit;font-size:12.5px}
.hm-chip::before,.hm-pip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--text-faint)}
.hm-chip.on::before,.hm-pip.on::before{background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.hm-chip.warn::before,.hm-pip.warn::before{background:var(--amber)}
.hm-chip:hover{border-color:var(--accent-line);color:var(--text)}
.hm-chip:focus-visible,.hm-pip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pip-foot .hm-pip{padding:3px 10px;font-size:11.5px;white-space:nowrap}
.hm-pip.on{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.hm-pip.warn{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.hm-card{margin:auto;max-width:min(520px,calc(100vw - 32px));width:100%;padding:0;border:1px solid var(--accent-line);border-radius:var(--radius-lg);background:var(--bg-card);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hm-card::backdrop{background:rgba(5,5,10,.62);backdrop-filter:blur(3px)}
.hm-in{padding:24px 24px 20px}
.hm-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:12px}
.hm-card h2{font-size:21px;margin:0 0 10px}
.hm-text{font-size:14.5px;line-height:1.6;color:var(--text-dim)}
.hm-text p{margin:0 0 10px}
.hm-points{margin:0 0 12px;padding-left:20px;display:grid;gap:6px}
.hm-fine{font-size:12.5px;color:var(--text-faint)}
.hm-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (max-width:520px){.hm-in{padding:20px 16px 16px}.hm-btns .btn{flex:1}}