/* ============================================================
   SMART SLIDES V2 — design tokens
   Palette: ink navy base, electric cyan primary accent,
   warm amber used sparingly for AI/attention moments.
   Type: Space Grotesk (display) + Inter (body/UI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink-950:#070a12;
  --ink-900:#0c1120;
  --ink-800:#121a2c;
  --ink-700:#1a2338;
  --ink-600:#26314a;
  --ink-500:#3a4766;
  --line:#22304a;

  --cyan:#3fd6d0;
  --cyan-soft:rgba(63,214,208,.14);
  --amber:#ffb454;
  --amber-soft:rgba(255,180,84,.14);
  --coral:#ff6b6b;

  --text-hi:#eef2fb;
  --text-mid:#a9b6d1;
  --text-low:#6f7d9c;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --shadow-1: 0 10px 30px -12px rgba(0,0,0,.55);
  --topbar-h:60px;
  --dock-h:64px;
}

*{box-sizing:border-box; min-width:0;}
html,body{height:100%; max-width:100%;}
html{overflow-x:hidden;}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(63,214,208,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(255,180,84,.06), transparent 55%),
    var(--ink-950);
  color:var(--text-hi);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); margin:0;}
p{margin:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px;}

/* ---------- TOPBAR ---------- */
.topbar{
  height:var(--topbar-h);
  display:flex; align-items:center; gap:20px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background:rgba(9,13,24,.72);
  backdrop-filter:blur(14px);
  position:relative; z-index:30;
}
.topbar__brand{display:flex; align-items:center; gap:9px; color:var(--cyan);}
.brand__text{display:flex; align-items:baseline; gap:5px; color:var(--text-hi); font-family:var(--font-display);}
.brand__name{font-weight:700; font-size:16px; letter-spacing:.2px;}
.brand__version{font-size:11px; color:var(--cyan); font-weight:600; background:var(--cyan-soft); padding:1px 6px; border-radius:5px;}

.topbar__deck{display:flex; align-items:center; gap:10px; min-width:0; flex:1; padding-left:6px; border-left:1px solid var(--line);}
.deck__name{font-size:13.5px; color:var(--text-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.deck__status{font-size:11.5px; padding:3px 9px; border-radius:20px; background:var(--ink-700); color:var(--text-low); border:1px solid var(--line); white-space:nowrap;}
.deck__status[data-state="loaded"]{color:var(--cyan); border-color:rgba(63,214,208,.35); background:var(--cyan-soft);}
.deck__status[data-state="busy"]{color:var(--amber); border-color:rgba(255,180,84,.35); background:var(--amber-soft);}

.topbar__presentcta{
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  background:linear-gradient(135deg, var(--cyan), #35b8ff);
  color:var(--ink-950); border:none; border-radius:10px;
  padding:8px 14px; font-weight:700; font-size:12.5px; cursor:pointer;
  white-space:nowrap; transition:.15s; box-shadow:0 6px 18px -8px rgba(63,214,208,.55);
}
.topbar__presentcta:hover{filter:brightness(1.08);}
.topbar__presentcta:disabled{opacity:.35; cursor:not-allowed; filter:none; box-shadow:none;}

.topbar__signals{display:flex; gap:6px;}
.signal{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line); color:var(--text-low);
  padding:5px 10px; border-radius:20px; font-size:11.5px; cursor:default;
}
.signal .dot{width:6px; height:6px; border-radius:50%; background:var(--text-low); display:inline-block;}
.signal[data-active="true"]{color:var(--text-hi); border-color:rgba(63,214,208,.4);}
.signal[data-active="true"] .dot{background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
.signal[data-active="listening"] .dot{background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulseDot 1.1s infinite;}
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.35;}}

.iconbtn{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--ink-700); border:1px solid var(--line); border-radius:10px;
  color:var(--text-mid); cursor:pointer; transition:.15s;
}
.iconbtn:hover{color:var(--text-hi); border-color:var(--ink-500);}
.iconbtn--ghost{background:transparent; width:28px; height:28px;}
.iconbtn--accent{background:var(--cyan); color:var(--ink-950); border:none;}
.iconbtn--accent:hover{filter:brightness(1.08); color:var(--ink-950);}

/* ---------- WORKSPACE GRID ---------- */
.workspace{
  height:calc(100vh - var(--topbar-h) - var(--dock-h));
  display:grid;
  grid-template-columns:220px 1fr 320px;
  grid-template-rows:1fr;
  gap:0;
  overflow:hidden;
}
.workspace > *{min-height:0; min-width:0; overflow:hidden;}
[data-mode="present"] .workspace{grid-template-columns:0 1fr 0;}
[data-mode="present"] .rail, [data-mode="present"] .copilot{display:none;}
[data-mode="present"] .dock, [data-mode="present"] .topbar{display:none;}
[data-mode="present"] .presentbar{display:flex !important;}
[data-mode="present"] .workspace{height:100vh;}

/* ---------- RAIL (left) ---------- */
.rail{
  border-right:1px solid var(--line);
  padding:16px 12px;
  display:flex; flex-direction:column; gap:18px;
  overflow-y:auto;
  background:rgba(11,15,26,.5);
}
.rail__section--grow{flex:1; min-height:0; display:flex; flex-direction:column;}
.rail__upload{
  width:100%; display:flex; align-items:center; gap:8px; justify-content:center;
  padding:11px; border-radius:var(--radius-sm); border:1px dashed var(--ink-500);
  background:var(--ink-800); color:var(--text-mid); cursor:pointer; font-size:13px; font-weight:600;
  transition:.15s;
}
.rail__upload:hover{border-color:var(--cyan); color:var(--cyan);}
.rail__label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-low); margin-bottom:10px; font-family:var(--font-body); font-weight:600;}
.rail__empty{font-size:12.5px; color:var(--text-low); line-height:1.5;}

.thumbrow{display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-right:2px;}
.thumb{
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  background:var(--ink-800); transition:.15s; position:relative;
}
.thumb:hover{border-color:var(--ink-500);}
.thumb[data-active="true"]{border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan);}
.thumb__frame{aspect-ratio:16/9; background:var(--ink-700); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.thumb__frame img{width:100%; height:100%; object-fit:contain;}
.thumb__num{font-size:10.5px; padding:4px 8px; color:var(--text-low); display:flex; justify-content:space-between;}
.thumb[data-active="true"] .thumb__num{color:var(--cyan);}

/* ---------- VIEWER (center) ---------- */
.viewer{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}

.empty{width:100%; height:100%; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:32px 16px;}
.empty__inner{max-width:640px; text-align:center;}
.empty__eyebrow{color:var(--cyan); font-size:12px; letter-spacing:.06em; font-weight:600; margin-bottom:10px;}
.empty__title{font-size:clamp(24px,3.4vw,34px); line-height:1.15; color:var(--text-hi); margin-bottom:12px;}
.empty__sub{color:var(--text-mid); font-size:14.5px; line-height:1.55; max-width:480px; margin:0 auto 26px;}

.dropzone{
  border:1.5px dashed var(--ink-500); border-radius:var(--radius-lg); padding:34px 20px;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
  background:rgba(255,255,255,.015); transition:.18s; color:var(--cyan);
}
.dropzone:hover, .dropzone.dragover{border-color:var(--cyan); background:var(--cyan-soft);}
.dropzone__title{color:var(--text-hi); font-weight:600; font-size:15px;}
.dropzone__or{color:var(--text-low); font-size:12px;}
.dropzone__note{color:var(--text-low); font-size:11.5px; margin-top:6px;}

.btn{padding:10px 20px; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; border:1px solid var(--line); background:var(--ink-700); color:var(--text-hi); transition:.15s;}
.btn--primary{background:var(--cyan); color:var(--ink-950); border:none;}
.btn--primary:hover{filter:brightness(1.08);}

.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:30px;}
.feature{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 12px; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.feature__glyph{color:var(--amber); font-size:16px;}
.feature h3{font-size:13px; margin:8px 0 4px; color:var(--text-hi);}
.feature p{font-size:11.5px; color:var(--text-low); line-height:1.4;}

/* stage / slide
   Sizing is computed in JS (fitSlideToFrame) so the slide always fits the
   available box exactly, keeps its 16:9 aspect ratio, and never overflows
   or gets clipped — CSS here only handles centering and appearance. */
.stage{width:100%; height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:22px; overflow:hidden;}
.stage__frame{
  width:100%; height:100%; min-height:0; max-width:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%, #0b0f1c, #05070d 75%);
  border-radius:var(--radius-lg); border:1px solid var(--line); overflow:hidden; position:relative;
}
.slide{
  background:#fff; color:#1a1a1a;
  max-width:100%; max-height:100%;
  border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  padding:5% 6%; display:flex; flex-direction:column; justify-content:center; gap:10px; overflow:hidden;
  transition:opacity .18s ease;
  flex-shrink:0;
}
.slide h1,.slide h2,.slide h3{font-family:var(--font-body); color:#12151f;}
.slide .slide__title{font-size:clamp(16px,3vw,30px); font-weight:700; line-height:1.2;}
.slide .slide__body{font-size:clamp(11px,1.6vw,16px); color:#3a3f4d; line-height:1.5; white-space:pre-wrap;}
.slide .slide__placeholder{color:#9aa0ad; font-size:13px; text-align:center; margin:auto;}
.stage__caption{color:var(--text-low); font-size:12px;}

/* ---------- COPILOT (right) ---------- */
.copilot{
  border-left:1px solid var(--line); background:rgba(11,15,26,.55);
  display:flex; flex-direction:column; padding:14px; gap:12px; overflow-y:auto; min-height:0;
}
.copilot__header{display:flex; align-items:center; justify-content:space-between;}
.copilot__header h2{font-size:14px;}
.copilot__slideinfo{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-md); padding:10px 12px;}
.copilot__slidenum{font-size:11px; color:var(--cyan); font-weight:600;}
.copilot__slidepreview{font-size:12px; color:var(--text-mid); margin-top:4px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}

.copilot__actions{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  border:1px solid var(--line); background:var(--ink-700); color:var(--text-mid);
  padding:7px 12px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; transition:.15s;
  display:flex; align-items:center; gap:6px;
}
.chip:hover{border-color:var(--cyan); color:var(--cyan);}
.chip--muted{background:transparent;}
.chip--wide{width:100%; justify-content:center;}
.chip[data-active="true"]{background:var(--cyan-soft); border-color:var(--cyan); color:var(--cyan);}

.copilot__thread{flex:1; min-height:80px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.msg{font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:var(--radius-sm); max-width:100%;}
.msg--system{color:var(--text-low); background:transparent; border:1px dashed var(--line);}
.msg--user{background:var(--ink-700); color:var(--text-hi); align-self:flex-end; border:1px solid var(--line);}
.msg--ai{background:var(--cyan-soft); color:var(--text-hi); border:1px solid rgba(63,214,208,.3);}
.msg--error{background:rgba(255,107,107,.1); color:#ffb3b3; border:1px solid rgba(255,107,107,.3);}
.msg--notice{background:var(--amber-soft); color:var(--amber); border:1px solid rgba(255,180,84,.35);}
.msg strong{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; opacity:.7;}

.copilot__thinking{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-low);}
.thinking-dot{width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:think 1s infinite;}
.thinking-dot:nth-child(2){animation-delay:.15s;} .thinking-dot:nth-child(3){animation-delay:.3s;}
@keyframes think{0%,80%,100%{opacity:.25; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}

.speech{background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-md); padding:10px;}
.speech__row{display:flex; flex-wrap:wrap; gap:6px;}
.speech__status{font-size:11.5px; color:var(--text-low); margin-top:8px;}
.speech__status span{color:var(--cyan); font-weight:600;}

.copilot__ask{display:flex; gap:8px;}
.copilot__ask input{
  flex:1; background:var(--ink-800); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  color:var(--text-hi); font-size:12.5px;
}
.copilot__ask input:focus{border-color:var(--cyan);}
.copilot__divider{height:1px; background:var(--line);}

.voice__row{display:flex; gap:6px; align-items:center;}
.voice__row .chip--wide{flex:1;}
.voice__status,.camera__status{font-size:11.5px; color:var(--text-low); margin-top:6px;}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--text-low); display:inline-block;}
.chip[data-active="true"] .pulse{background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulseDot 1s infinite;}

.voice__heardbox{margin-top:8px; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px;}
.voice__label{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-low); margin-bottom:2px;}
.voice__said{font-size:13px; color:var(--text-hi); font-weight:600; margin-bottom:6px;}
.voice__action{font-size:12.5px; color:var(--cyan);}

.voice__guide{margin-top:8px; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;}
.voice__guide-title{font-size:12px; font-weight:600; color:var(--text-hi); margin-bottom:6px;}
.voice__guide-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 10px;}
.voice__guide-list li{font-size:11px; color:var(--text-mid);}
.voice__guide-list b{color:var(--cyan);}

.camera__gesturebox{margin-top:8px; background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 11px;}
.camera__gesture{font-size:13px; color:var(--amber); font-weight:600;}

.camera__preview{position:relative; margin-top:8px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:#000;}
.camera__preview video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.camera__preview canvas{position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1);}

/* ---------- DOCK (bottom floating) ---------- */
.dock{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  background:rgba(14,18,32,.85); border:1px solid var(--line); border-radius:22px;
  backdrop-filter:blur(16px); box-shadow:var(--shadow-1); z-index:40;
}
.dock__btn{
  width:40px; height:40px; border-radius:14px; border:none; background:transparent; color:var(--text-mid);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s;
}
.dock__btn:hover{background:var(--ink-700); color:var(--text-hi);}
.dock__btn--play{background:var(--cyan); color:var(--ink-950); width:44px; height:44px;}
.dock__btn--play:hover{filter:brightness(1.08); background:var(--cyan);}
.dock__divider{width:1px; height:22px; background:var(--line);}
.dock__counter{font-size:12px; color:var(--text-mid); font-variant-numeric:tabular-nums; padding:0 4px; min-width:52px; text-align:center;}

/* presentation-mode minimal bar */
.presentbar{
  display:none; position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  gap:14px; align-items:center; background:rgba(0,0,0,.55); backdrop-filter:blur(10px);
  padding:10px 18px; border-radius:30px; z-index:60; color:#fff;
}
.presentbar button{background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer;}
.presentbar #pbExit{width:auto; border-radius:20px; padding:0 14px; font-size:12px;}

/* toast */
.toast{
  position:fixed; top:74px; left:50%; transform:translateX(-50%);
  background:var(--ink-800); border:1px solid rgba(255,107,107,.4); color:#ffd6d6;
  padding:11px 18px; border-radius:12px; font-size:13px; z-index:80; box-shadow:var(--shadow-1);
  max-width:90vw;
}
.toast[data-kind="info"]{border-color:rgba(63,214,208,.4); color:var(--cyan);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .workspace{grid-template-columns:190px 1fr 280px;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  body{overflow-y:auto; overflow-x:hidden; padding-bottom:76px;} /* room for the fixed dock */
  .workspace{
    display:flex; flex-direction:column; height:auto;
    overflow:visible;
  }
  .workspace > *{overflow:visible;}
  .viewer{order:1; height:56vh; min-height:300px; overflow:hidden;}
  .rail{order:2; border-right:none; border-top:1px solid var(--line); flex-direction:row; align-items:center; overflow-x:auto; overflow-y:visible;}
  .rail__section--grow{flex:1; min-width:0;}
  .thumbrow{flex-direction:row; overflow-x:auto; overflow-y:visible;}
  .thumb{min-width:88px;}
  .rail__upload{width:auto; white-space:nowrap;}
  .copilot{order:3; border-left:none; border-top:1px solid var(--line); max-height:none;}
  .topbar__deck{display:none;}

  /* dock stays fixed at the bottom on every screen size; body padding above keeps it clear of content */
  .dock{width:calc(100% - 24px); justify-content:space-between; overflow-x:auto;}

  [data-mode="present"] body{padding-bottom:0;}
  [data-mode="present"] .workspace{height:100vh; display:flex;}
  [data-mode="present"] .viewer{height:100vh;}
}

@media (max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
  .topbar__signals span{display:none;}
  .signal{padding:6px;}
  .dock__counter{min-width:40px;}
  .topbar__presentcta .presentcta__label{display:none;}
  .topbar__presentcta{padding:8px;}
}

/* touch targets */
@media (pointer:coarse){
  .dock__btn, .iconbtn, .chip, .thumb{min-height:44px;}
  .dock__btn{min-width:44px;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}