* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.screen {
  display: none;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
}
.screen.active { display: flex; }

/* ============ EDITOR ============ */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #222;
  background: #0a0a0a;
}
.topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  background: #0f0f0f;
  border-bottom: 1px solid #222;
  align-items: center;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-right: 1px solid #222;
}
.tool-group:last-child { border-right: none; }

.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
}

.toolbar select,
.toolbar input[type="number"] {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}

.toolbar input[type="number"] { width: 64px; }

.toolbar .unit {
  color: #888;
  font-size: 12px;
}

.toolbar input[type="range"] { accent-color: #fff; }

button {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: #2a2a2a; border-color: #555; }
button.primary { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
button.primary:hover { background: #ddd; }
button.danger:hover { background: #3a1010; border-color: #a33; }
button.active { background: #333; border-color: #666; }

.editor {
  flex: 1;
  overflow-y: auto;
  padding: 40px 60px;
  background: #000;
  color: #fff;
  font-size: 22px;
  line-height: 1.6;
  outline: none;
}
.editor:focus { background: #050505; }
.editor p { margin: 0 0 1em; }

/* ============ PROMPTER ============ */
#prompter-screen { background: #000; position: relative; }

#prompter-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
#prompter-viewport.dragging { cursor: grabbing; }

/* Wrapper que recebe o espelhamento (scale). Fica do tamanho do viewport,
   então o flip acontece ao redor do centro visível — e o texto nunca some. */
#prompter-mirror {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  overflow: visible;
}

#prompter-guide {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff2a2a 20%, #ff2a2a 80%, transparent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

#prompter-content {
  padding: 35vh 8vw 70vh;
  color: #fff;
  font-size: 48px;
  line-height: 1.5;
  will-change: transform;
  transform-origin: center center;
}
#prompter-content p { margin: 0 0 1em; }

/* Defensivo: força texto branco e fundo transparente em qualquer elemento,
   mesmo que o texto colado venha com cores/backgrounds inline */
#prompter-content, #prompter-content * {
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Mesmo tratamento no editor, para o usuário ver como ficará no prompter */
.editor, .editor * {
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Contagem regressiva antes de iniciar */
#countdown {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: clamp(120px, 22vw, 280px);
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  z-index: 4;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  animation: cdpop 1s ease-out;
}
#countdown.visible { display: flex; }
@keyframes cdpop {
  0%   { transform: scale(1.4); opacity: 0; }
  20%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Destaque da palavra atual quando o modo "seguir voz" está ativo.
   Uso text-shadow + font-weight porque o CSS defensivo força background transparente. */
#prompter-content .w.spoken-cursor {
  font-weight: 900;
  text-shadow:
    0 0 12px rgba(255, 220, 0, 0.9),
    0 0 24px rgba(255, 220, 0, 0.5);
}

/* Separador e status na barra de controles */
#prompter-controls .sep {
  width: 1px;
  height: 22px;
  background: #333;
  margin: 0 4px;
}
#prompter-controls select {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}
#btn-voice.active {
  background: #c62828;
  border-color: #c62828;
  color: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(198, 40, 40, 0); }
}
.voice-status {
  font-size: 12px;
  color: #999;
  min-width: 80px;
}
.voice-status.error { color: #ff6a6a; }

#prompter-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(10, 10, 10, 0.92);
  border-top: 1px solid #222;
  flex-wrap: wrap;
  z-index: 3;
}

#prompter-controls .ctl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
}

#prompter-controls input[type="number"] {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 8px;
  width: 64px;
  font-size: 13px;
}

#btn-toggle {
  min-width: 60px;
  font-size: 18px;
}

/* Scrollbar dark */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
  .tool-group {
    border-right: none;
    background: #1a1a1a;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 4px;
  }
  .toolbar {
    gap: 8px;
    padding: 10px;
  }
  #prompter-controls {
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  #prompter-controls .sep {
    display: none;
  }
  #prompter-controls .ctl {
    background: #1a1a1a;
    padding: 6px 10px;
    border-radius: 6px;
  }
}

@media (max-width: 600px) {
  .editor {
    padding: 20px;
    font-size: 18px;
  }
  #prompter-content {
    font-size: 32px;
    padding: 35vh 5vw 70vh;
  }
  .topbar h1 {
    font-size: 16px;
  }
  .tool-group {
    justify-content: center;
    width: 100%;
  }
  #prompter-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  #prompter-controls button, #prompter-controls .ctl {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 45%;
  }
}