:root {
  color-scheme: dark light;
  --bg: #0f0a1a;
  --card: #1b1230;
  --accent: #8f5bff;
  --accent-dark: #673ab7;
  --text: #f0e6ff;
  --muted: #bbaed6;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  margin: 0;
  background-color: #0f0a1a;
  background-image:
    radial-gradient(
      200% 200% at -9.6% -23.9%,
      rgba(157, 106, 240, 0.8) 0%,
      rgba(157, 106, 240, 0.55) 12%,
      rgba(157, 106, 240, 0.32) 24%,
      rgba(157, 106, 240, 0.18) 36%,
      rgba(157, 106, 240, 0.09) 48%,
      rgba(157, 106, 240, 0.04) 58%,
      rgba(157, 106, 240, 0.015) 66%,
      rgba(157, 106, 240, 0) 72%
    ),
    radial-gradient(
      200% 200% at 106.1% 120.7%,
      rgba(67, 20, 144, 0.8) 0%,
      rgba(67, 20, 144, 0.55) 12%,
      rgba(67, 20, 144, 0.32) 24%,
      rgba(67, 20, 144, 0.18) 36%,
      rgba(67, 20, 144, 0.09) 48%,
      rgba(67, 20, 144, 0.04) 58%,
      rgba(67, 20, 144, 0.015) 66%,
      rgba(67, 20, 144, 0) 72%
    );
  background-repeat: no-repeat;

  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}

main {
  width: min(960px, 100%);
  display: grid;
  gap: 24px;
}

.card {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(15, 10, 26, 0.35);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

button {
  background: var(--accent);
  border: none;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

button:not([disabled]):hover {
  background: var(--accent-dark);
}

#clearTranscriptBtn:hover,
#publisherCancelBtn:hover,
#cancelPersonaBtn:hover {
  background: #5213b9;
  border-color: #5213b9;
}

.btn-primary {
  background: #7c3aed;
  color: #fff;
  border-radius: 8px;
  padding: 8px 24px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.btn-primary:hover:not([disabled]) {
  background: #6d28d9;
}

/* ======================================================================================
   CORREÇÃO DO TEXTAREA — SCROLL HABILITADO E MELHOR USABILIDADE
====================================================================================== */

textarea {
  width: 100%;
  min-height: 220px;
  max-height: 420px; /* limite para ativar scroll */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  background: rgba(15, 10, 26, 0.6);
  color: var(--text);
  font-size: 0.95rem;

  overflow-y: auto; /* SCROLL FUNCIONANDO */
  resize: vertical; /* usuário pode aumentar manualmente */
  white-space: pre-wrap; /* mantém quebra de linha correta */
  pointer-events: auto; /* permite selecionar/copiar texto */
}

.status {
  margin-top: 16px;
  font-size: 0.95rem;
  color: var(--muted);
}

/* =======================================================================
   MODAL
======================================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-card {
  background: var(--card);
  padding: 24px;
  border-radius: 16px;
  width: min(600px, 90%);
  max-height: 80vh;
  overflow-y: auto;
}

.modal-input,
.modal-textarea {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 1rem;
}

.modal-textarea {
  min-height: 120px;
  resize: vertical;
  pointer-events: auto !important;
}

.modal-file {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.2s;
  white-space: pre-line;
}

.modal-file:hover {
  background: rgba(255, 255, 255, 0.15);
}

.modal-file.selected {
  background: rgba(143, 91, 255, 0.3);
}

.rec-indicator {
  color: #ff4f4f;
  font-weight: bold;
  visibility: hidden;
}

.btn-gray {
  background: #555;
}

.btn-green {
  background: #4caf50;
}

.btn-blue {
  background: #2196f3;
}

.persona-btn {
  background: #444;
  border: 1px solid #666;
}

.download-link {
  color: var(--accent);
}

/* =======================================================================
   IA — ESTILO DO BOTÃO DESABILITADO / STATUS
======================================================================= */

.disabled-btn {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#ai_generate_status {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  animation: pulse 1.4s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 0.9s linear infinite;
}