:root {
  --bg: #0a1018;
  --panel: #0f1826;
  --panel-2: #14202f;
  --border: #1f2f44;
  --fg: #f3f6fa;
  --muted: #7d8fa6;
  --accent: #00e5ff;
  --accent-2: #ff6b1a;
  --hook: #ffd93d;
  --gancho: #00e5ff;
  --dev: #f3f6fa;
  --cta: #ff6b1a;
  --editor: #8b6bff;
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  overflow: hidden;
}
.hidden { display: none !important; }
code { font-family: ui-monospace, 'JetBrains Mono', monospace; background: var(--panel-2); padding: 1px 6px; border-radius: 5px; font-size: .85em; }

/* ---------- SIDEBAR ---------- */
#sidebar {
  width: 288px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}
.brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; padding: 0 6px; }
.brand-mark { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--accent); }
.brand-sub { font-size: 13px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.refresh {
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
  padding: 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; margin-bottom: 16px;
  transition: .15s;
}
.refresh:hover { color: var(--fg); border-color: var(--accent); }
.session-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.session-item {
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 9px; padding: 11px 13px; cursor: pointer; transition: .15s;
}
.session-item:hover { border-color: var(--accent); }
.session-item.active { border-left-color: var(--accent); background: #16243a; }
.session-item.ads { border-left-color: var(--accent-2); }
.session-item.active.ads { border-left-color: var(--accent-2); }
.si-tema { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 5px; }
.si-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; }
.si-tipo { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.si-tipo.organico { color: var(--accent); }
.si-tipo.ads { color: var(--accent-2); }
.sidebar-foot { font-size: 11px; color: var(--muted); padding: 14px 6px 0; border-top: 1px solid var(--border); margin-top: 12px; }

/* ---------- MAIN ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.empty { margin: auto; text-align: center; color: var(--muted); }
.empty-mark { font-family: ui-monospace, monospace; font-size: 64px; color: var(--border); font-weight: 700; margin-bottom: 16px; }
.empty p { margin: 6px 0; }
.empty-hint { font-size: 13px; }

.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- TOPBAR ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid var(--border); gap: 20px;
}
.topbar-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-info h1 { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: 4px 10px; border-radius: 6px; flex-shrink: 0;
  background: rgba(0,229,255,.12); color: var(--accent); border: 1px solid rgba(0,229,255,.3);
}
.badge.ads { background: rgba(255,107,26,.12); color: var(--accent-2); border-color: rgba(255,107,26,.3); }
.badge.youtube { background: rgba(255,51,68,.14); color: #ff5c6c; border-color: rgba(255,51,68,.35); }
.session-item.youtube { border-left-color: #ff3344; }
.session-item.active.youtube { border-left-color: #ff3344; background: #211722; }
.si-tipo.youtube { color: #ff5c6c; }
.yt-bullets { list-style: none; margin: 6px 0 4px; padding: 0; }
.yt-bullets li {
  position: relative; padding: 10px 8px 10px 30px; margin: 0 0 8px;
  border-left: 2px solid rgba(255,51,68,.35); background: rgba(255,255,255,.02);
  border-radius: 6px; line-height: 1.45;
}
.yt-bullets li::before {
  content: '▸'; position: absolute; left: 10px; top: 10px; color: #ff5c6c; font-weight: 700;
}
.topbar-ctrl { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.reel-nav { display: flex; align-items: center; gap: 6px; }
.nav-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--fg); font-size: 20px; cursor: pointer; line-height: 1;
}
.nav-btn:hover { border-color: var(--accent); }
.reel-counter { font-family: ui-monospace, monospace; font-size: 13px; color: var(--muted); min-width: 54px; text-align: center; }
.mode-toggle { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.mode-btn {
  background: transparent; border: none; color: var(--muted); padding: 7px 14px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.mode-btn.active { background: var(--accent); color: #04121a; }

/* ---------- REEL STRIP ---------- */
.reel-strip { display: flex; gap: 6px; padding: 12px 28px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.strip-chip {
  flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 6px 11px; cursor: pointer; font-size: 12px; color: var(--muted);
  display: flex; gap: 7px; align-items: center; transition: .15s;
}
.strip-chip:hover { border-color: var(--accent); color: var(--fg); }
.strip-chip.active { border-color: var(--accent); background: #16243a; color: var(--fg); }
.strip-n { font-family: ui-monospace, monospace; font-weight: 700; color: var(--accent); }
.strip-chip.active .strip-n { color: var(--accent); }

/* ---------- TELEPROMPTER ---------- */
.view-prompter { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.prompter-frame { flex: 1; position: relative; overflow: hidden; background: #05080d; }
.reading-line {
  position: absolute; top: 38%; left: 0; right: 0; height: 0;
  border-top: 2px solid rgba(0,229,255,.35); z-index: 3; pointer-events: none;
}
.reading-line::before, .reading-line::after {
  content: ''; position: absolute; top: -7px; border: 7px solid transparent;
}
.reading-line::before { left: 0; border-left-color: var(--accent); }
.reading-line::after { right: 0; border-right-color: var(--accent); }
.prompter-scroll { height: 100%; overflow-y: auto; scroll-behavior: auto; }
.prompter-content {
  padding: 38vh 8% 60vh; font-size: 52px; line-height: 1.5; font-weight: 600;
  transition: font-size .1s;
}
.prompter-content.mirror { transform: scaleX(-1); }
.blk { margin-bottom: 34px; }
.blk-label {
  font-family: ui-monospace, monospace; font-size: .34em; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 8px; display: block;
}
.blk-hook .blk-label { color: var(--hook); }
.blk-gancho .blk-label { color: var(--gancho); }
.blk-dev .blk-label { color: var(--muted); }
.blk-cta .blk-label { color: var(--cta); }
.blk-hook .blk-text { color: var(--hook); }
.blk-cta .blk-text { color: var(--cta); }
.reel-divider {
  text-align: center; font-family: ui-monospace, monospace; font-size: .3em;
  color: var(--border); letter-spacing: .3em; margin: 10px 0 40px;
}

.prompter-controls {
  display: flex; align-items: center; gap: 22px; padding: 16px 28px;
  border-top: 1px solid var(--border); background: var(--panel); flex-wrap: wrap;
}
.ctrl-play {
  background: var(--accent); color: #04121a; border: none; padding: 11px 26px;
  border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; min-width: 110px;
}
.ctrl-play.playing { background: var(--accent-2); }
.ctrl { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.ctrl input[type=range] { width: 130px; accent-color: var(--accent); }
.ctrl span { font-family: ui-monospace, monospace; color: var(--fg); min-width: 26px; }
.ctrl-toggle {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.ctrl-toggle.on { border-color: var(--accent); color: var(--accent); }
.hotkeys { padding: 8px 28px; font-size: 11px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); }

/* ---------- ROTEIRO + EDITOR ---------- */
.view-roteiro { flex: 1; overflow-y: auto; padding: 28px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px;
}
.card.accent-hook { border-left: 3px solid var(--hook); }
.card.accent-gancho { border-left: 3px solid var(--gancho); }
.card.accent-dev { border-left: 3px solid var(--muted); }
.card.accent-cta { border-left: 3px solid var(--cta); }
.card.accent-editor { border-left: 3px solid var(--editor); background: var(--panel-2); }
.card-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.card-label {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.accent-hook .card-label { color: var(--hook); }
.accent-gancho .card-label { color: var(--gancho); }
.accent-dev .card-label { color: var(--muted); }
.accent-cta .card-label { color: var(--cta); }
.accent-editor .card-label { color: var(--editor); }
.card-text { font-size: 16px; line-height: 1.65; white-space: pre-wrap; }
.card-text strong { color: var(--accent); }
.copy-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 11.5px;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.copy-btn.done { border-color: #2ecc71; color: #2ecc71; }
.roteiro-title { font-size: 15px; color: var(--muted); }
.roteiro-title b { color: var(--fg); }
.roteiro-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.copy-full-btn {
  background: var(--accent); color: #04121a; border: none;
  padding: 11px 20px; border-radius: 9px; cursor: pointer;
  font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; flex-shrink: 0; transition: .15s;
}
.copy-full-btn:hover { filter: brightness(1.12); }
.copy-full-btn.done { background: #2ecc71; color: #04121a; }

/* ---------- MODO SCRIPT (só a fala) ---------- */
.script-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-full-btn.ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
}
.copy-full-btn.ghost:hover { background: rgba(0,229,255,.1); filter: none; }
.copy-full-btn.ghost.done { background: #2ecc71; color: #04121a; border-color: #2ecc71; }
.script-box {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 26px 30px; font-size: 19px; line-height: 1.75;
  white-space: pre-wrap; color: var(--fg);
  user-select: text; -webkit-user-select: text;
  max-width: 820px;
}

/* ---------- MENU MOBILE (drawer) ---------- */
#menu-toggle { display: none; }
#backdrop { display: none; }

@media (max-width: 820px) {
  /* botão hambúrguer fixo no canto */
  #menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; left: 8px; z-index: 60;
    width: 44px; height: 44px; border-radius: 11px;
    background: var(--panel-2); color: var(--accent);
    border: 1px solid var(--border); font-size: 21px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.sidebar-open #menu-toggle { color: var(--fg); border-color: var(--accent); }

  /* sidebar vira gaveta deslizante */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 320px; z-index: 55;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open #backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.55); z-index: 52;
  }

  /* topbar quebra em duas linhas e abre espaço pro botão */
  .topbar { flex-wrap: wrap; padding: 12px 14px 12px 62px; gap: 10px; }
  .topbar-info h1 { font-size: 16px; white-space: normal; }
  .topbar-ctrl { width: 100%; justify-content: space-between; gap: 10px; }
  .mode-btn { padding: 7px 10px; font-size: 12px; }
  .reel-strip { padding: 10px 14px; }

  /* teleprompter usa a tela cheia */
  .prompter-content { padding: 34vh 6% 62vh; }
  .prompter-controls { gap: 12px 16px; padding: 12px 14px; }
  .ctrl input[type=range] { width: 88px; }
  .hotkeys { display: none; }

  /* modos roteiro/script */
  .view-roteiro { padding: 18px 14px; }
  .script-box { padding: 18px 16px; font-size: 17px; }
  .roteiro-header { gap: 10px; }
  .empty-mark { font-size: 44px; }
}