/* teleprompter/style.css - escopado dentro de .teleprompter-page */
.teleprompter-page {
  --bg: #0b1220;
  --panel: #0f1724;
  --panel-light: #ffffff;
  --muted: #94a3b8;
  --muted-light: #606675;
  --accent: #3b82f6;
  --accent-2: #f97316;
  --text-light: #111827;
  --text-dark: #e6edf3;
  box-sizing: border-box;
}

/* Layout principal */
.teleprompter-page .teleprompter-container{
  width:100%;
  max-width:980px;
  height:62vh;
  background:#000;
  border-radius:12px;
  border:2px solid rgba(74,85,104,0.35);
  overflow:hidden;
  position:relative;
  box-shadow:0 8px 30px rgba(2,6,23,0.6);
  transition:height .25s ease;
  margin: 0 auto;
}
.teleprompter-page .teleprompter-container.fullscreen{
  height:100vh; max-width:100%; border-radius:0;
}

.teleprompter-page .mirrored-text-wrapper{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:28px; box-sizing:border-box; pointer-events:none;
}
.teleprompter-page .mirrored-text-wrapper.mirrored{ transform:scaleX(-1); }

.teleprompter-page #teleprompterText{
  position:absolute; left:50%;
  transform:translateX(-50%) translateY(0);
  white-space:pre-wrap; word-wrap:break-word;
  text-align:center; font-weight:700; color:#fff; line-height:1.5; will-change:transform;
}

/* linhas individuais para destaque */
.teleprompter-page .tele-line{ margin:0 0 0.6rem 0; padding:0; font-size:inherit; }
.teleprompter-page .tele-line.current{ background:rgba(255,255,255,0.06); padding:6px 8px; border-radius:6px; }

/* tele-blocks (duplicados para loop) */
.teleprompter-page .tele-block{ display:block; }

/* CONTROLS: largura alinhada à teleprompter-container e alinhamento à esquerda */
.teleprompter-page .controls{
  width:30%;
  max-width:980px;
  background:var(--panel);
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 6px 18px rgba(2,6,23,0.5);
  margin: 18px auto 0;
  box-sizing: border-box;
  text-align: left;           /* importante: força alinhamento à esquerda */
}

/* espaçamento consistente entre itens de controls */
.teleprompter-page .controls > * { margin-bottom:12px; }

/* Evita centralização indesejada em children com display flex/grid */
.teleprompter-page .controls .flex { justify-content: flex-start; }
.teleprompter-page .controls .grid { justify-items: start; }

/* Inputs e botões */
.teleprompter-page input[type=range]{ appearance:none; height:8px; border-radius:999px; background:rgba(255,255,255,0.06); width:100%; }
.teleprompter-page input[type=range]::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:999px; background:var(--accent); }
.teleprompter-page .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; border:none; }
.teleprompter-page .btn:active{ transform:translateY(1px); }

/* hint / labels */
.teleprompter-page .hint{ color:var(--muted); font-size:13px; display:block; }

/* links do menu centralizados e sem sublinhado; hover laranja */
.teleprompter-page a{ color:inherit; text-decoration:none; }
.teleprompter-page h1.text-3xl, .teleprompter-page h3{ text-align:center; }
.teleprompter-page a:hover { color: var(--accent-2); }

/* Small screens */
@media (max-width:900px){
  .teleprompter-page .teleprompter-container{ height:56vh; }
  .teleprompter-page .controls{ width:100%; }
}

/* -----------------------
   LIGHT-MODE OVERRIDES
   (detecta body.theme-light OR .light-mode OR prefers-color-scheme)
   ----------------------- */

/* prefer explicit theme class on body (recommended) */
body.theme-light .teleprompter-page .controls,
body.light-mode .teleprompter-page .controls,
.teleprompter-page[data-theme="light"] .controls {
  background: var(--panel-light);
  border-color: rgba(0,0,0,0.06);
  color: var(--text-light);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* labels and hints in light mode should be dark enough to read */
body.theme-light .teleprompter-page .hint,
body.light-mode .teleprompter-page .hint,
.teleprompter-page[data-theme="light"] .hint {
  color: var(--muted-light);
}

/* input track darker in light mode */
body.theme-light .teleprompter-page input[type=range],
body.light-mode .teleprompter-page input[type=range],
.teleprompter-page[data-theme="light"] input[type=range] {
  background: rgba(0,0,0,0.08);
}
body.theme-light .teleprompter-page input[type=range]::-webkit-slider-thumb,
body.light-mode .teleprompter-page input[type=range]::-webkit-slider-thumb,
.teleprompter-page[data-theme="light"] input[type=range]::-webkit-slider-thumb {
  background: var(--accent);
}

/* button text color in light mode */
body.theme-light .teleprompter-page .btn,
body.light-mode .teleprompter-page .btn,
.teleprompter-page[data-theme="light"] .btn {
  color: var(--text-light);
}

/* also adapt the teleprompter text color if needed (rare) */
body.theme-light .teleprompter-page #teleprompterText,
body.light-mode .teleprompter-page #teleprompterText,
.teleprompter-page[data-theme="light"] #teleprompterText {
  color: black; /* if you prefer black text on white teleprompter in light mode; otherwise remove */
}

/* ---- Fix: garantir legibilidade do painel controls em modo claro ---- */

/* Alvo: site em modo claro (body sem .dark-mode) OR quando a página explicitou data-theme="light" */
body:not(.dark-mode) .teleprompter-page .controls,
.teleprompter-page[data-theme="light"] .controls {
  background: var(--panel-light);         /* painel claro */
  color: var(--text-light);               /* texto escuro */
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Labels e hints legíveis em modo claro */
body:not(.dark-mode) .teleprompter-page .hint,
.teleprompter-page[data-theme="light"] .hint {
  color: var(--muted-light);
}

/* Força contraste dos labels/inputs dentro do painel (evita herança do global) */
body:not(.dark-mode) .teleprompter-page .controls label,
.teleprompter-page[data-theme="light"] .controls label {
  color: var(--text-light);
  font-weight: 600;
  display: block;
}

/* Range: trilha mais escura e thumb visível (modo claro) */
body:not(.dark-mode) .teleprompter-page input[type="range"],
.teleprompter-page[data-theme="light"] input[type="range"] {
  background: rgba(0,0,0,0.08) !important;
}
body:not(.dark-mode) .teleprompter-page input[type="range"]::-webkit-slider-thumb,
.teleprompter-page[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
  background: var(--accent) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Firefox thumb */
body:not(.dark-mode) .teleprompter-page input[type="range"]::-moz-range-thumb,
.teleprompter-page[data-theme="light"] input[type="range"]::-moz-range-thumb {
  background: var(--accent) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Inputs/seletores dentro do painel (legibilidade) */
body:not(.dark-mode) .teleprompter-page .controls input,
body:not(.dark-mode) .teleprompter-page .controls textarea,
body:not(.dark-mode) .teleprompter-page .controls select,
.teleprompter-page[data-theme="light"] .controls input,
.teleprompter-page[data-theme="light"] .controls textarea,
.teleprompter-page[data-theme="light"] .controls select {
  background: transparent;
  color: var(--text-light);
  border-color: rgba(0,0,0,0.08);
}

/* Botões: garantir texto escuro quando fundo for claro */
body:not(.dark-mode) .teleprompter-page .btn,
.teleprompter-page[data-theme="light"] .btn {
  color: var(--text-light);
}

/* Se o tema do site aplicar regras muito agressivas, forçar com !important (último recurso) */
body:not(.dark-mode) .teleprompter-page .controls input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.06) !important;
}

/* ---- Forçar modo escuro no painel teleprompter ---- */
/* Alvo: body.dark-mode OR .teleprompter-page[data-theme="dark"] */
body.dark-mode .teleprompter-page .controls,
.teleprompter-page[data-theme="dark"] .controls {
  background: #0f1724 !important;     /* painel escuro */
  color: #e6edf3 !important;          /* texto claro */
  border-color: rgba(255,255,255,0.04) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6) !important;
}

/* Labels e hints */
body.dark-mode .teleprompter-page .hint,
.teleprompter-page[data-theme="dark"] .hint {
  color: #cbd5e1 !important;
}

/* Força contraste dos labels/inputs dentro do painel */
body.dark-mode .teleprompter-page .controls label,
.teleprompter-page[data-theme="dark"] .controls label {
  color: #e6edf3 !important;
}

/* Inputs/seletores: fundo escuro, texto claro e borda suave */
body.dark-mode .teleprompter-page .controls input,
body.dark-mode .teleprompter-page .controls textarea,
body.dark-mode .teleprompter-page .controls select,
.teleprompter-page[data-theme="dark"] .controls input,
.teleprompter-page[data-theme="dark"] .controls textarea,
.teleprompter-page[data-theme="dark"] .controls select {
  background: rgba(255,255,255,0.02) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Range: trilha e thumb visíveis no dark */
body.dark-mode .teleprompter-page input[type="range"],
.teleprompter-page[data-theme="dark"] input[type="range"] {
  background: rgba(255,255,255,0.04) !important;
}
body.dark-mode .teleprompter-page input[type="range"]::-webkit-slider-thumb,
.teleprompter-page[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  background: var(--accent) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Firefox thumb/track */
body.dark-mode .teleprompter-page input[type="range"]::-moz-range-thumb,
.teleprompter-page[data-theme="dark"] input[type="range"]::-moz-range-thumb {
  background: var(--accent) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
body.dark-mode .teleprompter-page input[type="range"]::-moz-range-track,
.teleprompter-page[data-theme="dark"] input[type="range"]::-moz-range-track {
  background: rgba(255,255,255,0.04) !important;
}

/* Botões: fundo saturado escuro com texto claro (se necessário) */
body.dark-mode .teleprompter-page .btn,
.teleprompter-page[data-theme="dark"] .btn {
  background-color: rgba(255,255,255,0.04) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Se o seu tema aplica 'color: #111' globalmente com !important, force o texto do painel */
body.dark-mode .teleprompter-page .controls *,
.teleprompter-page[data-theme="dark"] .controls * {
  color: inherit !important;
}

/* Se preferir garantir via classe local, adicione data-theme="dark" na div .teleprompter-page para testar */
/* Exemplo: <div class="teleprompter-page" data-theme="dark"> */


/* fallback: respect system preference if no theme class provided */
@media (prefers-color-scheme: light){
  :root .teleprompter-page .controls { background: var(--panel-light); color: var(--text-light); }
  :root .teleprompter-page .hint { color: var(--muted-light); }
}