/* LiveCue's light and dark looks (7 Nov 2026), for the extension's side panel. Nothing moves or changes size: the
   light look swaps the colour list (app.css :root) and the few colours written straight into rules, and both looks
   get the website's slow purple background. The look is on <html data-theme>, set before anything is drawn (app.html);
   the sun/moon button next to Buy credits switches it (theme.js). Dark is the look LiveCue always had. */

/* ---------- The light colour list ---------- */
html[data-theme="light"]{
  --bg:#F7F6FC; --bg-soft:#F1EFF9; --bg-card:#FFFFFF; --bg-elev:#F4F2FB;
  --line:rgba(91,74,216,.14); --line-soft:rgba(91,74,216,.08);
  --text:#16161F; --text-dim:#4F4F66; --text-faint:#6B6B80;
  --accent:#5B4AD8; --accent-fill:#5B4AD8; --accent-soft:rgba(91,74,216,.08); --accent-line:rgba(91,74,216,.28); --accent-ink:#3F31A8;
  --green:#15803D; --green-soft:rgba(22,163,74,.1); --green-line:rgba(22,163,74,.32);
  --amber:#8A5300; --amber-soft:#FFF7E6; --amber-line:#F2D59A; --amber-ink:#7A4A00;
  --red:#B91C1C; --red-soft:#FEE2E2; --red-line:rgba(220,38,38,.3); --red-ink:#991B1B;
  color-scheme:light;
}
html[data-theme="light"] body{background:radial-gradient(ellipse at top,#EEEAFF,#F7F6FC 60%) fixed}
html[data-theme="light"] nav{background:rgba(255,255,255,.72)}
html[data-theme="light"] .btn.primary:hover{background:#4A3BB5;box-shadow:0 8px 24px rgba(91,74,216,.3)}
html[data-theme="light"] .btn.primary.glow:hover{--lc-face:#4A3BB5}
html[data-theme="light"] .btn.glow::before{opacity:.45}
html[data-theme="light"] .btn.lit:hover{--lc-face:#E9E6FA}
html[data-theme="light"] .tip b{color:var(--text)}
html[data-theme="light"] .notice .btn{border-color:rgba(22,22,31,.18);background:rgba(22,22,31,.04)}
html[data-theme="light"] .notice .btn:hover{border-color:rgba(22,22,31,.35)}
html[data-theme="light"] .panel,html[data-theme="light"] .hm-card{box-shadow:0 10px 30px -22px rgba(74,59,181,.45)}
html[data-theme="light"] .t-head,html[data-theme="light"] .pip-head,html[data-theme="light"] .pip-foot{background:#F4F2FB}
html[data-theme="light"] .qa,html[data-theme="light"] .pip-notes{background:#FFFFFF}
html[data-theme="light"] .pip-doc,html[data-theme="light"] .dock{background:#FFFFFF}
html[data-theme="light"] .panel-back{background:linear-gradient(to bottom,rgba(247,246,252,0),var(--bg) 40%)}
html[data-theme="light"] .fx-switch .knob,html[data-theme="light"] .hm-switch .knob{background:#DCDAEA}
html[data-theme="light"] .fx-switch .knob::after,html[data-theme="light"] .hm-switch .knob::after{background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.25)}
html[data-theme="light"] .fx-switch input:checked+.knob,html[data-theme="light"] .hm-switch input:checked+.knob{background:var(--accent-fill)}
html[data-theme="light"] .lc-tab.on{color:var(--accent-ink)}
html[data-theme="light"] .hm-mic{background:rgba(22,22,31,.06)}
html[data-theme="light"] .hm-card{box-shadow:0 30px 80px rgba(40,30,90,.25)}
html[data-theme="light"] .hm-card::backdrop{background:rgba(20,18,40,.35)}
html[data-theme="light"] .coach,html[data-theme="light"] .coach-arrow{background:#FFFFFF}
html[data-theme="light"] .coach{box-shadow:0 14px 44px rgba(40,30,90,.22),0 0 24px rgba(155,114,203,.18)}
html[data-theme="light"] .coach-kicker{color:#6D3FC0}
html[data-theme="light"] .coach h4,html[data-theme="light"] .coach p b,html[data-theme="light"] .coach li b{color:var(--text)}
html[data-theme="light"] .coach p,html[data-theme="light"] .coach ol{color:var(--text-dim)}
html[data-theme="light"] .coach-wait,html[data-theme="light"] .coach-row .coach-skip{color:var(--text-faint)}
html[data-theme="light"] .coach-row .coach-skip:hover{color:var(--text)}

/* After a call: the summary and its charts (sessions.css, summary-viz.css) */
html[data-theme="light"] .ss-k-other,html[data-theme="light"] .ss-k-meeting,html[data-theme="light"] .ss-talk,html[data-theme="light"] .ss-sum-bar,
html[data-theme="light"] .sv-words span,html[data-theme="light"] .sv-chip.same{background:rgba(22,22,31,.06)}
html[data-theme="light"] .ss-btn:hover,html[data-theme="light"] .ss-btn:focus-visible,html[data-theme="light"] .ss-menu button:hover,html[data-theme="light"] .ss-menu button:focus-visible,
html[data-theme="light"] .sv-icon-btn:hover{background:rgba(22,22,31,.06)}
html[data-theme="light"] .ss-live,html[data-theme="light"] .ss-menu .ss-danger,html[data-theme="light"] .ss-err{color:#B91C1C}
html[data-theme="light"] .ss-menu{box-shadow:0 18px 40px rgba(40,30,90,.18)}
html[data-theme="light"] .ss-edit input,html[data-theme="light"] .ss-sum-search input{background:#FFFFFF}
html[data-theme="light"] .ss-q,html[data-theme="light"] .sess-tabs,html[data-theme="light"] .sum-me-hint,html[data-theme="light"] .ss-talk-bar,
html[data-theme="light"] .sv-num,html[data-theme="light"] .sv-lane{background:rgba(22,22,31,.03)}
html[data-theme="light"] .ss-tag,html[data-theme="light"] .ss-sum-writing{color:var(--accent-ink)}
html[data-theme="light"] .ss-talk-them::before{background:rgba(22,22,31,.18)}
html[data-theme="light"] .ss-sum-confirm>span{color:#5C3B00}
html[data-theme="light"] .ss-sum-cost{background:rgba(22,22,31,.08)}
html[data-theme="light"] .ss-sum-detailbox,html[data-theme="light"] .ss-sum-tr{background:#FAF9FE;border-color:var(--line)}
html[data-theme="light"] .ss-sum-line.them .ss-who b{color:#0E7490}
html[data-theme="light"] .ss-sum{background:linear-gradient(180deg,rgba(91,74,216,.06),transparent 160px),#FFFFFF;box-shadow:0 18px 50px rgba(91,74,216,.1)}
html[data-theme="light"] .sv{--sv-card:#F7F6FC}
html[data-theme="light"] .sv.sv-page{--sv-card:#FFFFFF}
html[data-theme="light"] .sv-seg{background:rgba(22,22,31,.04)}
html[data-theme="light"] .sv-g-ghost,html[data-theme="light"] .sv-meter-ghost{background:rgba(22,22,31,.35)}
html[data-theme="light"] .sv-minibars,html[data-theme="light"] .sv-ot-bars{border-bottom-color:rgba(22,22,31,.14)}
html[data-theme="light"] .sv-minibars-line{border-top-color:rgba(22,22,31,.25)}
html[data-theme="light"] .sv-plot{border-bottom-color:rgba(22,22,31,.18)}
html[data-theme="light"] .sv-grid{border-top-color:rgba(22,22,31,.07)}
html[data-theme="light"] .sv-goal-line{border-top-color:rgba(22,22,31,.6)}
html[data-theme="light"] .sv-tag.miss,html[data-theme="light"] .sv-mark.miss{color:#8A5300}
html[data-theme="light"] .sv-icon-btn,html[data-theme="light"] .sv-tog{border-color:rgba(22,22,31,.14)}
html[data-theme="light"] .sv-ot-b:hover{background:rgba(22,22,31,.03)}

/* ---------- The sun/moon button (next to Buy credits) ---------- */
.theme-btn{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text-dim);cursor:pointer;flex:none;transition:color .2s,border-color .2s,background .2s}
.theme-btn:hover{color:var(--text);border-color:var(--accent-line)}
.theme-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .theme-btn{background:#FFFFFF}
.theme-btn .sun{display:none}
html[data-theme="dark"] .theme-btn .sun{display:block}
html[data-theme="dark"] .theme-btn .moon{display:none}

/* ---------- The background in the side panel: the website's slow purple light, no cursor light ---------- */
html.lc-paur{background:var(--bg)}
html.lc-paur body.in-panel{background:transparent}
.lc-paur-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;
  background:linear-gradient(180deg,#0D0B18 0%,#09080F 60%,#08070D 100%);
  --pa1:rgba(108,97,229,.5);--pa2:rgba(168,85,247,.32);--pa3:rgba(47,157,181,.13);--pdot:rgba(255,255,255,.085)}
html[data-theme="light"] .lc-paur-bg{background:linear-gradient(180deg,#F3F0FF 0%,#F8F7FD 45%,#FFFFFF 100%);
  --pa1:rgba(124,108,240,.3);--pa2:rgba(217,120,255,.2);--pa3:rgba(45,190,200,.12);--pdot:rgba(91,74,216,.12)}
.lc-paur-bg i{position:absolute;display:block;border-radius:50%;will-change:transform}
.lc-paur-bg .p1{left:-45%;top:-18vh;width:130%;height:55vh;background:radial-gradient(circle,var(--pa1),transparent 62%);animation:lc-pa-a 24s ease-in-out infinite alternate}
.lc-paur-bg .p2{right:-55%;top:-14vh;width:125%;height:50vh;background:radial-gradient(circle,var(--pa2),transparent 60%);animation:lc-pa-b 30s ease-in-out infinite alternate}
.lc-paur-bg .p3{left:-10%;top:55vh;width:120%;height:55vh;background:radial-gradient(circle,var(--pa3),transparent 60%);animation:lc-pa-c 36s ease-in-out infinite alternate}
.lc-paur-bg .pd{position:absolute;inset:0;background-image:radial-gradient(var(--pdot) 1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 90% 35% at 50% 0%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 90% 35% at 50% 0%,#000 15%,transparent 72%)}
@keyframes lc-pa-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10%,8%,0) scale(1.12)}100%{transform:translate3d(-6%,14%,0) scale(.95)}}
@keyframes lc-pa-b{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-12%,8%,0) scale(.92)}100%{transform:translate3d(5%,-4%,0) scale(1.1)}}
@keyframes lc-pa-c{to{transform:translate3d(-14%,-10%,0) scale(1.2)}}
/* Cards let a little of the light through. During a call the call screen covers it, and it stands still. */
html.lc-paur body.in-panel .panel{background:color-mix(in srgb,var(--bg-card) 84%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.lc-paur body.in-panel nav{background:color-mix(in srgb,var(--bg) 55%,transparent)}
body.docked .lc-paur-bg i,.lc-paur-bg.still i{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lc-paur-bg i{animation:none}}