/* Identidade visual híbrida: escopo em classe para evitar overrides globais */
html.theme-hybrid{
  --primary:#3b82f6; /* blue-500 */
  --accent-hover:#2563eb; /* blue-600 */
  /* Tokens HÍBRIDOS dedicados (não substituem os padrões do app) */
  --hy-bg:#f8fafc;
  --hy-bg-dark:#0b1120;
  --hy-card:#ffffff;
  --hy-card-dark:#111827;
  --hy-border:#e2e8f0;
  --hy-border-dark:#334155;
  --hy-text-strong:#1e293b;
  --hy-text-normal:#475569;
  --hy-text-muted:#64748b;
  --hy-text-light:#f3f4f6;
  --radius-card:20px;
  --radius-button:12px;
  --transition: all 0.3s ease-in-out;
}

/* Harmonização com tokens existentes: não sobrescreve --accent global */
html.theme-hybrid{ --accent: var(--primary); }

/* Tema claro com alto contraste: substitui tokens padrão do app */
html.theme-contrast{
  /* Paleta acessível (WCAG AA onde possível) */
  --bg:#f8fafc;            /* fundo claro */
  --fg:#0f172a;            /* texto principal bem escuro */
  --muted:#475569;         /* texto secundário */
  --card:#ffffff;          /* cartões claros */
  --border:#e2e8f0;        /* bordas suaves */
  --accent:#2563eb;        /* azul forte e legível */
  --secondary:#334155;     /* cinza-azulado para botões secundários */
  --danger:#dc2626;        /* vermelho de alerta */
  --success:#16a34a;       /* verde de sucesso */
  /* Tipografia */
  --font-sans: 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
  --heading-weight: 800;
  --body-weight: 500;
}

/* Aplicação da tipografia e microajustes quando o tema contraste estiver ativo */
html.theme-contrast body{ font-family: var(--font-sans); font-weight: var(--body-weight); letter-spacing: -0.01em; }
html.theme-contrast h1, html.theme-contrast h2, html.theme-contrast h3{ font-weight: var(--heading-weight); }
html.theme-contrast .text-muted{ color: var(--muted); }
html.theme-contrast .badge{ color: var(--muted); border-color: var(--border); }

/* Estabiliza largura quando a barra de rolagem vertical aparece */
html{ scrollbar-gutter: stable both-edges; }
body{ scrollbar-gutter: stable both-edges; }

/* Plano de fundo híbrido: gradiente claro com blobs */
.page-bg-hybrid{ 
  min-height: 100vh;
  background: linear-gradient(180deg, var(--hy-bg, #f8fafc) 0%, var(--hy-border, #e2e8f0) 100%);
  position: relative;
}

/* Blobs radiais sutis para elegância */
.page-bg-hybrid::before,
.page-bg-hybrid::after{
  content:""; position:absolute; width:30rem; height:30rem;
  filter: blur(60px);
  background: radial-gradient(closest-side, rgba(96,165,250,0.2), transparent);
  animation: floatBlobA 8s ease-in-out infinite alternate;
}
.page-bg-hybrid::before{ top:5%; left:10%; }
.page-bg-hybrid::after{
  bottom:10%; right:15%;
  background: radial-gradient(closest-side, rgba(167,139,250,0.18), transparent);
  animation: floatBlobB 9s ease-in-out infinite alternate;
}
.page-bg-hybrid{ --blob-shift-x:50px; --blob-shift-y:-40px; --blob-scale:1.1; }
@keyframes floatBlobA{ 0%,100%{ transform: translate(0,0) scale(1); opacity:0.8; } 50%{ transform: translate(var(--blob-shift-x), var(--blob-shift-y)) scale(var(--blob-scale)); opacity:1; } }
@keyframes floatBlobB{ 0%,100%{ transform: translate(0,0) scale(1); opacity:0.8; } 50%{ transform: translate(calc(var(--blob-shift-x) * -1), calc(var(--blob-shift-y) * 0.7)) scale(calc(var(--blob-scale) + 0.05)); opacity:1; } }
@media (max-width:640px){ .page-bg-hybrid{ --blob-shift-x:30px; --blob-shift-y:-25px; --blob-scale:1.05; } }
@media (prefers-reduced-motion: reduce){ .page-bg-hybrid::before, .page-bg-hybrid::after{ animation-duration:15s; } }

/* Sidebar fixo à esquerda, com ícones */
.sidebar{
  position: fixed; top:0; left:0; height:100vh; width:240px;
  background: var(--card); border-right:1px solid var(--border);
  padding:1rem; transition: var(--transition);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.sidebar ul{ list-style:none; padding:0; }
.sidebar li{ margin-bottom:0.5rem; }
.sidebar a{
  display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem;
  color:var(--text-normal); text-decoration:none; border-radius:var(--radius-button);
  transition: var(--transition);
}
.sidebar a:hover{ background:var(--border); color:var(--primary); }
.sidebar a.active{ background:var(--primary); color:#fff; }

/* Ícones no sidebar (usando SVG inline ou font-icons; aqui placeholders) */
.icon{ width:1.25rem; height:1.25rem; fill:currentColor; }

/* Mobile: sidebar colapsável */
@media (max-width:768px){
  .sidebar{ width:0; overflow:hidden; }
  .sidebar.open{ width:240px; }
  .main-content{ margin-left:0; transition: var(--transition); }
  .main-content.shifted{ margin-left:240px; }
}

/* Main content ajustado para sidebar */
.main-content{ margin-left:240px; padding:2rem; transition: var(--transition); }

/* Layout minimalista para a nova Home (sem sidebar) */
.home-main{ max-width: 1100px; margin: 0 auto; padding: 2rem; }
.home-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.home-brand{ display:flex; align-items:center; gap:.75rem; }
.home-brand .logo{ width:28px; height:28px; border-radius:6px; background:linear-gradient(135deg, #60a5fa, #9333ea); box-shadow:0 4px 10px rgba(0,0,0,.12); }
.home-hero{ border-radius: 18px; padding: 2rem; background: var(--card); border:1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.home-actions{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1rem; }
.stat-card{ background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 1rem; }
.stat-line{ display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--border); }
.stat-line:last-child{ border-bottom:none; }

/* Cards com animação sutil de fade-in */
.card{
  border-radius: var(--radius-card); box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  /* Usa tokens padrão do app; variantes híbridas podem usar .hy-card */
  background: var(--card); padding:1.5rem; margin-bottom:1.5rem;
  transition: var(--transition);
}
.hy-card{ background: var(--hy-card, #ffffff); }
/* Animação de entrada aplicada somente quando .fade-in estiver presente */
.fade-in{ opacity:0; transform:translateY(20px); }
.fade-in.visible, .card.visible{ opacity:1; transform:translateY(0); }

/* Accordions para métricas (expansíveis) */
.accordion{ cursor:pointer; }
.accordion-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem; background:var(--border); border-radius:var(--radius-card) var(--radius-card) 0 0;
}
.accordion-content{
  max-height:0; overflow:hidden; transition: max-height 0.3s ease;
  background:var(--card); padding:0 1rem;
}
.accordion.open .accordion-content{ max-height:500px; padding:1rem; }

/* Seções dark para contraste híbrido (ex.: métricas) */
.section-dark{ background:var(--bg-dark); color:var(--text-light); --card:var(--card-dark); --border:var(--border-dark); --text-strong:var(--text-light); --text-normal:var(--text-light); }

/* Botões e links com animações sutis */
.btn{ transition: var(--transition); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.15); }

/* Botões mais contrastantes em tema claro */
html.theme-contrast .btn.btn-outline{ color: var(--fg); border-color: var(--border); }
html.theme-contrast .btn.btn-outline:hover{ background: #edf2f7; }
html.theme-contrast .btn.btn-primary{ background: var(--accent); color: #fff; }

/* Utilitários existentes mantidos e expandidos */
.max-w-6xl{ max-width: 72rem; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.px-4{ padding-left: 1rem; padding-right: 1rem; }
.py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
.text-center{ text-align: center; }
.text-5xl{ font-size: 3rem; line-height: 1.1; }
.font-extrabold{ font-weight: 800; }
.tracking-tight{ letter-spacing: -0.01em; }
.mb-3{ margin-bottom: .75rem; }
.mb-2{ margin-bottom: .5rem; }
.mb-4{ margin-bottom: 1rem; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content: space-between; }
.gap-2{ gap: 8px; }
.ml-auto{ margin-left: auto; }
.text-white\/80{ color: rgba(255,255,255,0.8); }
.text-white\/70{ color: rgba(255,255,255,0.7); }

/* Foco acessível e hover */
.btn:focus-visible, [role="tab"]:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
.card:hover{ box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

/* Responsividade para grid */
@media (max-width: 640px){ .cols{ grid-template-columns: 1fr; } }

/* SR-only para acessibilidade */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* --- Navegação principal (tema escuro) --- */
html[data-theme="dark"] body{ scroll-behavior:smooth; }
/* Evita scroll horizontal causado pelos blobs/pseudo-elementos do fundo hero */
html[data-theme="dark"] body.page-bg-hero{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* --- Cards de personagens (Podcast) --- */
#pod-segments{ scrollbar-gutter: stable both-edges; }
#pod-segments, .panel{ width:100%; max-width:100%; }
.segment-card{ position: relative; transition: box-shadow .15s ease, background .15s ease, transform .18s ease; min-height: 56px; width:100%; box-sizing: border-box; }
.segment-card.dragging{ box-shadow: 0 10px 24px rgba(2,8,23,0.35); transform: scale(0.985); cursor:grabbing; }
.segment-card.drop-hint-top{ box-shadow: 0 -3px 0 0 var(--accent) inset, 0 -8px 24px rgba(59,130,246,0.15) inset; }
.segment-card .actions{ min-height: 40px; width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap: nowrap; min-width:0; }
.segment-card .seg-body{ margin-top: 8px; }
.segment-card .seg-body{ display:grid; grid-template-columns: 1fr; gap: 10px; width:100%; max-width:100%; }
.segment-card .seg-body .field{ width:100%; max-width:100%; }
.segment-card .seg-body .input,
.segment-card .seg-body textarea,
.segment-card .seg-body select{ width:100%; max-width:100%; }
.segment-card .seg-body .actions{ flex-wrap:wrap; }
.segment-card .seg-body *{ box-sizing:border-box; }
.pod-header-left{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.pod-toggle{ font-size: 16px; color:#fff; margin-right:4px; }
.pod-header-left .pod-title{ color:#fff; overflow:hidden; text-overflow:ellipsis; }
.pod-header-left small{ color: rgba(255,255,255,0.75); overflow:hidden; text-overflow:ellipsis; }
.drag-handle{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; cursor:grab; color: var(--muted); }
.drag-handle:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.drag-handle:active{ cursor:grabbing; }
/* Garantir consistência do cursor durante arraste */
.segment-card.dragging .drag-handle{ cursor:grabbing; }
/* Animação breve ao reordenar */
.segment-card.swap-anim{ animation: swap-bump .12s ease; }
@keyframes swap-bump{ 0%{ transform:translateY(0) } 50%{ transform:translateY(2px) } 100%{ transform:translateY(0) } }

/* Placeholder de drop (slot sombreado) */
.drop-placeholder{ height: 10px; margin: 6px 0; border-radius:8px; background: rgba(255,255,255,0.06); outline: 1px dashed var(--border); }

.topnav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background: rgba(11,17,32,0.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.topnav .brand{ display:flex; align-items:center; gap:8px; font-weight:700; }
.topnav .brand .logo{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, #60a5fa, #9333ea); box-shadow:0 4px 10px rgba(0,0,0,.18); }

.nav-toggle{ display:none; background:transparent; border:1px solid var(--border); color:var(--fg); padding:8px 10px; border-radius:8px; }
.nav-tabs{ display:flex; align-items:center; gap:6px; }
.nav-item{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; color:var(--fg); border:1px solid transparent; cursor:pointer; transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; }
.nav-item:hover{ background:#0f172a; transform:translateY(-1px); }
.nav-item[aria-selected="true"]{ border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-item .icon{ width:18px; height:18px; color:var(--fg); }

.topnav .center-nav-wrap{ flex:1; display:flex; justify-content:center; align-items:center; padding:0; }
.topnav .center-nav{ display:flex; align-items:center; gap: clamp(14px, 3.5vw, 24px); padding:0; }
.topnav .center-nav .nav-item{ margin: 0; }
.topnav .center-nav .dropdown{ margin: 0; }
.topnav .center-nav .nav-item{ 
  opacity:1; 
  color:#fff; 
  background: transparent; 
  border: none; 
  padding: 6px 10px; 
}
.topnav .center-nav .nav-item .icon{ color:#fff; }
.topnav .center-nav .nav-item:hover{ background: transparent; transform:none; }
.topnav .center-nav .nav-item::after{ display:none !important; }
.topnav .center-nav .nav-item[aria-selected="true"]{ border-color:transparent !important; box-shadow:none !important; }
.topnav .center-nav .nav-item:focus-visible{ box-shadow:none; }
.topnav .spacer{ display:none; }
/* Baixar o indicador principal apenas no topo */
.topnav .center-nav .indicator{ bottom:-6px; }

/* Dropdown no menu central (Texto em Fala) */
.topnav .center-nav .dropdown{ position:relative; display:flex; align-items:center; margin:0; top:auto; background:transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
.topnav .center-nav .dropdown-toggle{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:transparent; border:none; line-height:1; }
.topnav .center-nav .dropdown-toggle .icon{ color:#fff; }
.topnav .center-nav .dropdown-menu{
  position:absolute; top: calc(100% + 26px); left:0; min-width:100%; width:max-content;
  background: rgba(15, 23, 42, 0.55); /* #0f172a com transparência */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; box-shadow:0 12px 30px rgba(2,8,23,.6);
  padding:6px; display:none; z-index:40; list-style:none; margin:0;
}
.topnav .center-nav .dropdown-menu li{ list-style:none; }
.topnav .center-nav .dropdown.open .dropdown-menu{ display:block; }
/* Sem hover: abre apenas quando .open */
.topnav .center-nav .dropdown-item{ display:block; padding:8px 10px; color:var(--fg); text-decoration:none; border-radius:8px; }
.topnav .center-nav .dropdown-item:hover, .topnav .center-nav .dropdown-item:focus{
  background: rgba(11, 18, 32, 0.6);
}

.userbox{ position:relative; }
.avatar-btn{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--border); color:var(--fg); padding:6px 8px; border-radius:999px; cursor:pointer; }
.avatar{ width:28px; height:28px; border-radius:999px; background:#1e293b; display:inline-flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:12px; font-weight:700; }
.avatar-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }

.dropdown{ position:absolute; right:0; top:42px; min-width:180px; background:#0f172a; border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(2,8,23,.6); padding:6px; }
.dropdown[hidden]{ display:none !important; }
.dropdown-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent; color:var(--fg); border:none; padding:8px 10px; border-radius:8px; cursor:pointer; }
.dropdown-item:hover{ background:#0b1220; }
.dropdown-item .icon{ width:16px; height:16px; color:var(--fg); }

/* Responsividade do menu */
@media (max-width:768px){
  .nav-toggle{ display:inline-flex; }
  .nav-tabs{ display:flex; flex-direction:column; gap:6px; background:#0f172a; border:1px solid var(--border); border-radius:10px; padding:8px; }
  /* Oculta barra central em telas pequenas para evitar sobreposição */
  .center-nav-wrap{ display:none; }
  /* Permite quebra de linha no topo em telas menores */
  .topnav{ flex-wrap: wrap; }
  .userbox{ margin-left:auto; }
}

/* Ajustes de dropdown para telas pequenas */
@media (max-width:640px){
  .dropdown{ right:8px; left:auto; max-width: calc(100vw - 20px); }
}

/* Sublinhado animado inspirado em Navbar Menu (21st.dev) */
.topnav .nav-item{ position:relative; }
.topnav .nav-item::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: linear-gradient(90deg, #60a5fa, #9333ea);
  transform: scaleX(0); transform-origin: left; transition: transform .20s ease;
  border-radius:2px; opacity:.9;
}
.topnav .nav-item:hover::after,
.topnav .nav-item[aria-selected="true"]::after{ transform: scaleX(1); }
.topnav .nav-item:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(59,130,246,.35); }

/* --- Menu centralizado minimalista --- */
.center-nav-wrap{ display:flex; align-items:center; justify-content:center; padding:16px; }
.center-nav{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap: clamp(12px, 3vw, 22px); padding: 8px 12px; border-radius: 12px; flex-wrap: nowrap;
}
.center-nav .nav-item{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; color:var(--fg); border:1px solid transparent; cursor:pointer; transition: background .20s ease, color .20s ease, transform .20s ease, border-color .20s ease; }
.center-nav .nav-item:hover{ background:#0f172a; transform:translateY(-1px); }
.center-nav .nav-item .icon{ width:18px; height:18px; color:var(--fg); }
.center-nav .nav-item[aria-selected="true"]{ border-color:transparent; }
.center-nav .nav-item::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background: linear-gradient(90deg, #60a5fa, #9333ea);
  transform: scaleX(0); transform-origin: left; transition: transform .24s ease;
  border-radius:2px; opacity:.95;
}
.center-nav .nav-item:hover::after,
.center-nav .nav-item[aria-selected="true"]::after{ transform: scaleX(1); }
.center-nav .indicator{ position:absolute; bottom:4px; height:2px; background: linear-gradient(90deg, #60a5fa, #9333ea); border-radius:2px; transition: left .28s ease, width .28s ease, opacity .28s ease; opacity:.95; }

/* Uniformização vertical e responsividade */
.center-nav .nav-item{ line-height:1; }
@media (max-width:768px){
  .center-nav{ flex-wrap: wrap; }
}

/* --- Área de saída de roteiros --- */
.script-output{ min-height:140px; background:#0e1628; border:1px solid var(--border); border-radius:10px; padding:12px; color:var(--fg); white-space:pre-wrap; }

/* --- Modal básico reutilizável --- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-overlay[hidden]{ display:none !important; }
.modal{ width: min(1100px, calc(100% - 32px)); border-radius: 12px; overflow: hidden; background: #ffffff; color:#111827; box-shadow: 0 20px 50px rgba(0,0,0,0.35); border:1px solid #e5e7eb; }
html[data-theme="dark"] .modal{ background:#111827; color:#e5e7eb; border-color:#374151; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #e5e7eb; }
html[data-theme="dark"] .modal-header{ border-bottom-color:#374151; }
/* Debug/Fix: normalizar gap do menu central */
.topnav .center-nav > *{ margin:0 !important; padding:0 !important; }
.topnav .center-nav .dropdown.center-dropdown{ margin:0 !important; padding:0 !important; }

/* Ajuste específico: permitir que o container do Texto em Fala encolha */
#tts-dropdown{ min-width:0; }