/* fonte de títulos servida pelo próprio site (sem chamar o Google: nada do visitante vai para terceiros) */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap;
  src: url(../vendor/fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-stretch: 100%; font-display: swap;
  src: url(../vendor/fonts/bricolage-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fundo: #0b0b0c;
  --superficie: #141416;
  --superficie-2: #1c1c1f;
  --borda: #2a2a2e;
  --texto: #f2f0ea;
  --texto-2: #a19f99;
  --texto-3: #6b6a66;
  --destaque: #ffb23e;
  --destaque-escuro: #2e2414;
  --ok: #4ade80;
  --erro: #f87171;
  --raio: 10px;
  --fonte-titulo: "Bricolage Grotesque", "Inter", ui-sans-serif, system-ui, sans-serif;
  --fonte-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-prompter: "Helvetica Neue", "Inter", system-ui, -apple-system, Arial, sans-serif;

  /* ajustáveis */
  --tam: 64px;
  --entrelinha: 1.4;
  --largura: 80%;
  --linha: 30%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--fonte-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.tela { position: fixed; inset: 0; display: none; }
.tela.ativa { display: flex; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--superficie-2);
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: #26262a; }
.btn:active { transform: scale(.97); }
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: #1a1205; font-weight: 600; }
.btn.primario:hover { background: #ffc266; }
.btn.fantasma { background: transparent; }
.btn.fantasma:hover { background: var(--superficie-2); }
.btn.icone { width: 38px; padding: 0; justify-content: center; position: relative; }
.contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ok); color: #052e12; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}
.btn.icone .contador { position: absolute; top: -5px; right: -5px; }

/* ---------- início: roteiros + editor ---------- */
#editor { flex-direction: column; background: radial-gradient(120% 60% at 0% 0%, #1f1a14 0%, var(--fundo) 55%); }
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
}
.marca { display: flex; align-items: baseline; gap: 10px; font: 800 26px/1 var(--fonte-titulo); letter-spacing: -.02em; }
.marca small { font: 500 13px var(--fonte-ui); color: var(--texto-3); letter-spacing: 0; }
.marca-ponto { width: 11px; height: 11px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 14px var(--destaque); align-self: center; flex: none; }
.marca-ponto.grande { width: 16px; height: 16px; box-shadow: 0 0 24px var(--destaque); }
.topo-acoes { display: flex; gap: 6px; }
.topo-acoes .btn.icone { width: 42px; height: 42px; border-radius: 12px; }
.topo-acoes .btn.icone svg { width: 20px; height: 20px; }

.editor-corpo { flex: 1; display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.biblioteca { padding: 8px 16px 16px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.bib-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bib-topo h2 { margin: 0; font: 700 20px/1.2 var(--fonte-titulo); letter-spacing: -.01em; }
.bib-topo h2 span { color: var(--texto-3); font-weight: 500; }
.btn.novo { height: 36px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--superficie-2); }
#listaRoteiros { list-style: none; margin: 0; padding: 0 2px 2px 0; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
#listaRoteiros li {
  position: relative; padding: 14px 14px 14px 12px; border-radius: 14px; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 3px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s;
}
#listaRoteiros li:hover { background: rgba(255,255,255,.055); }
#listaRoteiros li.atual { background: linear-gradient(90deg, rgba(255,178,62,.10), rgba(255,178,62,.02)); border-color: rgba(255,178,62,.35); }
#listaRoteiros li.atual::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--destaque); }
#listaRoteiros li .alca { grid-row: 1 / span 3; color: var(--texto-3); cursor: grab; touch-action: none; display: grid; place-items: center; opacity: .55; padding: 0 2px; }
#listaRoteiros li .alca svg { width: 16px; height: 16px; fill: currentColor; }
#listaRoteiros li .nome { font: 700 16px/1.25 var(--fonte-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#listaRoteiros li .previa { grid-column: 2 / span 2; color: var(--texto-2); font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#listaRoteiros li .previa:empty { display: none; }
#listaRoteiros li .meta { grid-column: 2 / span 2; color: var(--texto-3); font-size: 12px; }
#listaRoteiros li .apagar { grid-column: 3; grid-row: 1; opacity: 0; border: 0; background: none; color: var(--texto-3); cursor: pointer; padding: 0; }
#listaRoteiros li:hover .apagar { opacity: 1; }
#listaRoteiros li .apagar:hover { color: var(--erro); }
#listaRoteiros li.arrastando { background: var(--superficie-2); border-color: var(--destaque); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
#listaRoteiros.reordenando, #listaRoteiros.reordenando * { cursor: grabbing !important; user-select: none; }
.bib-extras { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.link-acao { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; border: 0; background: none; color: var(--texto-2); cursor: pointer; font-size: 13.5px; }
.link-acao:hover { color: var(--texto); }
.link-acao svg { width: 16px; height: 16px; }

.area-texto { display: flex; flex-direction: column; min-height: 0; padding: 8px clamp(16px, 5vw, 64px) 12px; margin: 0 16px 0 0; border-radius: 20px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); }
.area-topo { display: flex; justify-content: space-between; align-items: center; min-height: 8px; }
.area-topo .voltar { display: none; }
.titulo { background: none; border: 0; outline: 0; font: 700 30px/1.2 var(--fonte-titulo); letter-spacing: -.015em; padding: 4px 0 12px; }
.titulo::placeholder, textarea::placeholder { color: var(--texto-3); }
textarea {
  flex: 1; resize: none; background: none; border: 0; outline: 0;
  font-size: 18px; line-height: 1.7; color: var(--texto); max-width: 760px;
}
.rodape-texto { display: flex; justify-content: space-between; gap: 12px; color: var(--texto-3); font-size: 13px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }

/* barra de ações (rodapé) */
.barra-acoes {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
.acoes-principais { display: flex; gap: 10px; }
.btn.grande { height: 52px; padding: 0 22px; border-radius: 16px; font: 700 16px var(--fonte-titulo); }
.btn.grande svg { width: 20px; height: 20px; }
.gravar-cam { background: #241c1c; border-color: #4a2a2a; }
.gravar-cam:hover { background: #2e2121; }
.tally { width: 14px; height: 14px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22), 0 0 14px rgba(239,68,68,.6); flex: none; }

/* o CTA da campanha: borda que respira (o único elemento "barulhento" da tela) */
.apoiar {
  position: relative; isolation: isolate; height: 52px; padding: 0 20px; border-radius: 16px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff4df; font: 700 15px var(--fonte-titulo); background: #1d1610;
}
.apoiar::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 17.5px; z-index: -2;
  background: conic-gradient(from var(--giro, 0deg), #ffb23e, #ff6b8b, #a78bfa, #ffb23e);
  animation: girar 5s linear infinite;
}
.apoiar::after { content: ""; position: absolute; inset: 1px; border-radius: 15px; background: #1d1610; z-index: -1; }
.apoiar-brilho {
  position: absolute; inset: -10px; border-radius: 24px; z-index: -3; pointer-events: none;
  background: conic-gradient(from var(--giro, 0deg), rgba(255,178,62,.55), rgba(255,107,139,.45), rgba(167,139,250,.4), rgba(255,178,62,.55));
  filter: blur(16px); opacity: .55; animation: girar 5s linear infinite, respirar 2.8s ease-in-out infinite;
}
.apoiar svg { width: 18px; height: 18px; color: var(--destaque); }
.apoiar:hover .apoiar-brilho { opacity: .9; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes girar { to { --giro: 360deg; } }
@keyframes respirar { 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .apoiar::before, .apoiar-brilho { animation: none; } }

/* janela da campanha */
#dlgApoio { width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); background: #141116; border-color: #2c2530; }
.apoio { position: relative; padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 20px; overflow: auto; max-height: calc(100dvh - 26px); }
.apoio .fechar { position: absolute; top: 14px; right: 14px; }
.apoio-topo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 620px; padding-right: 40px; }
.apoio-topo h3 { margin: 0; font: 800 34px/1.05 var(--fonte-titulo); letter-spacing: -.025em; }
.apoio-topo p { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 1.55; }
.planos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.plano.destaque { background: linear-gradient(180deg, rgba(255,178,62,.12), rgba(255,178,62,.03)); border-color: rgba(255,178,62,.5); }
.selo { position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--destaque); color: #1a1205; font-size: 12px; font-weight: 700; }
.plano-cab { display: flex; flex-direction: column; gap: 8px; }
.plano-cab h4 { margin: 0; font: 700 17px/1.25 var(--fonte-titulo); }
.preco { font: 800 38px/1 var(--fonte-titulo); letter-spacing: -.03em; }
.preco small { font-size: 16px; font-weight: 700; margin-right: 3px; color: var(--texto-2); vertical-align: 14px; letter-spacing: 0; }
.beneficios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; color: var(--texto-2); font-size: 14px; line-height: 1.4; }
.beneficios li { padding-left: 22px; position: relative; }
.beneficios li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--destaque); border-bottom: 2px solid var(--destaque); transform: rotate(-45deg); }
.plano-btn { justify-content: center; height: 46px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.apoio-rodape { margin: 0; color: var(--texto-3); font-size: 13px; text-align: center; }

/* convite discreto (depois de gravar / criar roteiro) */
.convite { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,178,62,.12), rgba(255,107,139,.08)); border: 1px solid rgba(255,178,62,.3); text-align: left; cursor: pointer; color: var(--texto); font-size: 14px; }
.convite b { font-family: var(--fonte-titulo); }
.convite svg { width: 20px; height: 20px; color: var(--destaque); flex: none; }

/* ---------- teleprompter ---------- */
#prompter { background: #000; color: #fff; overflow: hidden; }
#prompter[data-tema="amarelo"] { --cor-texto: #ffe44d; }
#prompter[data-tema="claro"] { background: #fff; --cor-texto: #111; }
#palco {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
#prompter.arrastando #palco { cursor: grabbing; }
#palco.espelho-h { transform: scaleX(-1); }
#palco.espelho-v { transform: scaleY(-1); }
#palco.espelho-h.espelho-v { transform: scale(-1, -1); }
#conteudo {
  position: absolute; left: 50%; top: 0; width: var(--largura); max-width: 1600px;
  transform: translate(-50%, 0); will-change: transform;
  font: 600 var(--tam)/var(--entrelinha) var(--fonte-prompter);
  color: var(--cor-texto, #fff); letter-spacing: -.005em;
  padding-bottom: 100vh;
}
#conteudo p { margin: 0 0 .7em; }
#conteudo .w { transition: opacity .35s; border-radius: .12em; }
#conteudo.foco .w { opacity: var(--opac-fora, .5); }
#conteudo.foco .w.em-foco { opacity: 1; }
/* palavra que o reconhecedor acabou de ouvir */
#conteudo .w.dita { color: var(--destaque); opacity: 1 !important; transition: color .15s; }
#prompter[data-tema="amarelo"] #conteudo .w.dita { color: #fff; }
#prompter[data-tema="claro"] #conteudo .w.dita { color: #b45309; }
#conteudo .marca {
  display: inline-block; font-size: .42em; line-height: 1; vertical-align: middle; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .35em .6em; margin: 0 .2em;
  border: 2px solid var(--destaque); color: var(--destaque); border-radius: .4em;
}

#linhaLeitura {
  position: absolute; left: 0; right: 0; top: var(--linha); height: 0; pointer-events: none;
  border-top: 1px dashed rgba(255,178,62,.25);
}
#linhaLeitura .seta { position: absolute; top: -12px; border: 12px solid transparent; }
#linhaLeitura .seta.e { left: 0; border-left: 18px solid var(--destaque); }
#linhaLeitura .seta.d { right: 0; border-right: 18px solid var(--destaque); }

#contagem {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  padding: 0 24px; text-align: center; background: rgba(0,0,0,.82); pointer-events: none;
}
#contagem b { font: 800 28vh/1 var(--fonte-ui); color: var(--destaque); }
#contagem p { margin: 0; max-width: 520px; font: 600 clamp(18px, 2.6vh, 26px)/1.4 var(--fonte-titulo); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
#avisoComando {
  position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%);
  padding: 12px 22px; border-radius: 999px; background: var(--destaque); color: #1a1205;
  font: 600 18px/1.2 var(--fonte-ui); box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transition: opacity .4s, transform .4s; pointer-events: none; white-space: nowrap;
}
#avisoComando.saindo { opacity: 0; transform: translate(-50%, 10px); }
#fim {
  position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda);
  font-size: 15px; color: var(--texto-2);
}

#hud {
  position: absolute; left: 0; right: 0; top: 0; padding: 12px 16px;
  background: linear-gradient(#000d, #0000); transition: opacity .35s, transform .35s;
  color: var(--texto);
}
#prompter.ocultar-hud #hud { opacity: 0; transform: translateY(-12px); pointer-events: none; }
#prompter.ocultar-hud { cursor: none; }
.hud-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hud-direita { margin-left: auto; display: flex; gap: 8px; }
#hud .btn { background: rgba(28,28,31,.85); backdrop-filter: blur(8px); }

.seletor { display: inline-flex; padding: 3px; border-radius: var(--raio); background: rgba(28,28,31,.85); border: 1px solid var(--borda); }
.seletor button { border: 0; background: none; padding: 0 14px; height: 30px; border-radius: 7px; cursor: pointer; color: var(--texto-2); font-weight: 500; }
.seletor button.ativo { background: var(--destaque); color: #1a1205; font-weight: 600; }

.btn.tocar { width: 46px; height: 46px; border-radius: 50%; justify-content: center; padding: 0; background: var(--destaque) !important; border-color: var(--destaque); color: #1a1205; }
.btn.tocar svg { width: 20px; height: 20px; }
.btn.tocar .i-pause { display: none; }
#prompter.tocando .btn.tocar .i-play { display: none; }
#prompter.tocando .btn.tocar .i-pause { display: block; }

.grupo { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: var(--raio); background: rgba(28,28,31,.85); border: 1px solid var(--borda); }
.grupo .btn { height: 30px; width: 30px; border: 0; background: none !important; }
.grupo .valor { min-width: 44px; text-align: center; line-height: 1.05; }
.grupo .valor small { display: block; font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; }
.grupo select { background: none; border: 0; max-width: 180px; padding: 0 6px; height: 30px; outline: 0; }
.grupo select option { background: var(--superficie); }
.medidor { width: 6px; height: 26px; border-radius: 3px; background: #333; position: relative; overflow: hidden; margin-left: 8px; }
.medidor i { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: var(--ok); transition: height .08s; }

.status { font-size: 13px; color: var(--texto-2); display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.status:empty { display: none; }
.status.ouvindo::before { background: var(--ok); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulso 1.4s infinite; }
.status.aguardando::before { background: var(--destaque); }
.status.erro::before { background: var(--erro); }
@keyframes pulso { 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

#progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.06); }
#progresso i { display: block; height: 100%; width: 0; background: var(--destaque); transition: width .3s; }

.painel {
  position: absolute; top: 72px; right: 16px; width: 320px; max-height: calc(100% - 96px); overflow: auto;
  background: rgba(20,20,22,.96); backdrop-filter: blur(12px); border: 1px solid var(--borda); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px; color: var(--texto); font-size: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.painel h3 { margin: 0; font-size: 15px; }
.painel label { display: flex; flex-direction: column; gap: 6px; color: var(--texto-2); }
.painel label output { float: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.painel label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--texto); }
.painel input[type=range] { accent-color: var(--destaque); width: 100%; }
.painel input[type=checkbox] { accent-color: var(--destaque); width: 16px; height: 16px; }
.painel select { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; height: 36px; padding: 0 8px; }
.atalhos { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--borda); color: var(--texto-2); font-size: 13px; }
.atalhos b { color: var(--texto); margin-bottom: 4px; }
.atalhos kbd { min-width: 0; }
kbd { display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 2px; border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; font: 11px var(--fonte-ui); text-align: center; color: var(--texto); background: var(--superficie-2); }

/* ---------- diálogo do controle remoto ---------- */
dialog { border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); color: var(--texto); padding: 0; max-width: min(420px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(4px); }
.dlg { padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; }
.dlg h3 { margin: 4px 0 0; padding: 0 40px; font-size: 19px; }
.dlg p { margin: 0; color: var(--texto-2); font-size: 14px; }
.dlg .fechar { position: absolute; top: 12px; right: 12px; }
.qr { background: #fff; padding: 12px; border-radius: 12px; line-height: 0; }
.qr img, .qr svg { width: 200px; height: 200px; image-rendering: pixelated; }
.codigo { font: 700 30px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .25em; color: var(--destaque); }
.link-remoto { color: var(--texto-2); font-size: 12px; word-break: break-all; }
.aviso { background: var(--destaque-escuro); border: 1px solid #5a4318; padding: 10px 12px; border-radius: 10px; color: #f5d9a6 !important; text-align: left; }
.dicas { text-align: left; margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 13px; }
.conexoes { font-weight: 600; color: var(--texto) !important; }
.conexoes.ligado { color: var(--ok) !important; }

@media (max-width: 760px) {
  /* celular: uma coisa por vez. A lista de roteiros é a tela inicial; tocar num roteiro abre o texto */
  .topo { padding-left: 18px; padding-right: 12px; }
  .editor-corpo { grid-template-columns: 1fr; }
  .biblioteca { padding: 4px 14px 8px; }
  #editor.vendo-roteiro .biblioteca { display: none; }
  #editor:not(.vendo-roteiro) .area-texto { display: none; }
  .area-texto { margin: 0 10px; padding: 6px 16px 10px; }
  .area-topo { margin: 0 -8px; }
  .area-topo .voltar { display: inline-flex; padding: 0 10px 0 4px; color: var(--texto-2); }
  .titulo { font-size: 26px; }
  textarea { font-size: 17px; }
  #listaRoteiros li .apagar { display: none; }
  .barra-acoes { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.35) 30%); }
  .acoes-principais > .btn { flex: 1; justify-content: center; padding: 0 12px; }
  .apoiar { width: 100%; }
  .planos { grid-template-columns: 1fr; }
  .apoio { padding: 24px 16px 18px; }
  .apoio-topo h3 { font-size: 28px; }
  .dica-atalho { display: none; }
  .painel { left: 16px; right: 16px; width: auto; }
  #grupoVelocidade .valor small { display: none; }
}

.codigo-entrada {
  width: 270px; max-width: 100%; height: 56px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2);
  text-align: center; font: 700 26px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; outline: 0;
}
.codigo-entrada:focus { border-color: var(--destaque); }
.trazer-status { min-height: 1.4em; }
.trazer-status.ok { color: var(--ok) !important; font-weight: 600; }
.trazer-status.erro { color: var(--erro) !important; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- teleprompter com câmera ---------- */
#camVideo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: scaleX(-1); background: #000;
}
#camVideo.sem-espelho { transform: none; }
#camVideo.preencher { object-fit: cover; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; margin: -6px -6px 0 0; position: sticky; top: -18px; background: inherit; z-index: 1; }
#veu { position: absolute; inset: 0; background: rgba(0,0,0,var(--veu, .45)); pointer-events: none; }
#prompter.camera { background: #000; }
#prompter.camera #conteudo { text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); }
#prompter.camera #conteudo.foco .w { opacity: var(--opac-fora, .5); }
#prompter.camera #conteudo.foco .w.em-foco { opacity: 1; }
#prompter.camera #progresso { bottom: auto; top: 0; }
#btnCamera.ligado { background: var(--destaque) !important; color: #1a1205; border-color: var(--destaque); }

#barraCamera {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(#0000, #000a); pointer-events: none;
}
#barraCamera > * { pointer-events: auto; }
.cam-info { display: flex; gap: 10px; align-items: center; font-size: 12px; color: rgba(255,255,255,.8); text-shadow: 0 1px 4px #000; min-height: 24px; }
#tempoGravacao { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(220,38,38,.9); color: #fff; font: 600 14px/1.2 var(--fonte-ui); font-variant-numeric: tabular-nums; }
#tempoGravacao i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .2; } }
.cam-botoes { display: flex; align-items: center; gap: 36px; }
.btn.redondo { width: 46px; height: 46px; border-radius: 50%; background: rgba(28,28,31,.7) !important; backdrop-filter: blur(8px); }
.gravar {
  width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(0,0,0,.25);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.gravar i { width: 54px; height: 54px; border-radius: 50%; background: #ef4444; transition: all .2s; }
.gravar.gravando i { width: 28px; height: 28px; border-radius: 6px; }
.gravar:active { transform: scale(.95); }
/* gravando: só o essencial na tela */
#prompter.gravando-video .cam-botoes .btn.redondo { opacity: 0; pointer-events: none; }
#prompter.gravando-video #infoCamera { display: none; }

.secao-camera { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.nota { color: var(--texto-3); font-size: 12px; line-height: 1.4; }

.dlg-gravacoes { align-items: stretch; text-align: left; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
.dlg-gravacoes h3 { text-align: center; }
#previa { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; }
.lista-gravacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-gravacoes li { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--superficie-2); }
.lista-gravacoes li.nova { border-color: var(--destaque); }
.lista-gravacoes .g-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lista-gravacoes .g-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-gravacoes .g-meta { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.lista-gravacoes .g-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.lista-gravacoes .g-acoes .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.lista-gravacoes .g-acoes .perigo { margin-left: auto; color: var(--erro); }
.vazio { text-align: center; padding: 12px 0; }
/* gravando com os botões escondidos: fica só o botão de parar, discreto, e o tempo */
#prompter.ocultar-hud.gravando-video #barraCamera { background: none; }
#prompter.ocultar-hud.gravando-video .gravar { opacity: .45; transition: opacity .35s; }
#prompter.ocultar-hud.camera #hud { opacity: 0; }
.dica-galeria { background: var(--destaque-escuro); border: 1px solid #5a4318; padding: 10px 12px; border-radius: 10px; color: #f5d9a6 !important; font-size: 13px; text-align: left; }
#alertaCamera { position: absolute; left: 16px; right: 16px; top: calc(50% - 40px); padding: 14px 16px; border-radius: 14px; background: rgba(220,38,38,.95); color: #fff; font-weight: 600; text-align: center; z-index: 5; }
.g-diag { margin: 0; font-size: 11px; color: #fca5a5; line-height: 1.4; word-break: break-word; }
details.g-diag summary { cursor: pointer; }
details.g-diag p { margin: 4px 0 0; color: var(--texto-3); }
.lista-gravacoes li.convite-li { padding: 0; border: 0; background: none; }
.plano-btn { color: var(--texto); }
.plano-btn.primario { color: #1a1205; }
.apoio-topo .marca-ponto { align-self: flex-start; margin: 4px 0 2px; }
/* condições da campanha (passo 2 da janela) */
#dlgApoio.no-termo .planos, #dlgApoio.no-termo .apoio-rodape { display: none; }
.termo { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,178,62,.35); max-width: 640px; }
.termo h4 { margin: 0; font: 700 18px/1.3 var(--fonte-titulo); }
.termo h4 span { color: var(--destaque); }
.termo ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--texto-2); font-size: 14.5px; line-height: 1.5; }
.concordo { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.concordo input { width: 20px; height: 20px; accent-color: var(--destaque); }
.termo-acoes { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.termo-acoes .btn { height: 46px; border-radius: 12px; text-decoration: none; justify-content: center; }
.termo-acoes .btn.primario { flex: 1; max-width: 340px; }
#irPagamento[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.dlg-texto { align-items: stretch; text-align: left; }
.dlg-texto h3 { padding: 0 40px 0 0; font: 700 22px/1.2 var(--fonte-titulo); }
.dlg-texto ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 12px; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.dlg-texto b { color: var(--texto); }
#dlgPrivacidade { max-width: min(520px, calc(100vw - 24px)); }

/* ---------- boas-vindas: votação ---------- */
#dlgNovidades { width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); background: #141116; border-color: #2c2530; }
.novidades { position: relative; padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; max-height: calc(100dvh - 26px); }
.novidades .fechar { position: absolute; top: 14px; right: 14px; }
.novidades h3 { margin: 0; padding-right: 44px; font: 800 30px/1.05 var(--fonte-titulo); letter-spacing: -.025em; }
.nov-sub { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 1.5; }
.recursos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voto {
  position: relative; overflow: hidden; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 14px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
  transition: border-color .2s, background .2s, transform .1s;
}
.voto:hover { border-color: rgba(255,178,62,.45); }
.voto:active { transform: scale(.985); }
.rec-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,178,62,.12); color: var(--destaque); }
.rec-icone svg { width: 20px; height: 20px; }
.rec-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rec-texto b { font: 700 16px/1.25 var(--fonte-titulo); }
.rec-texto small { color: var(--texto-2); font-size: 13px; line-height: 1.4; }
.rec-votos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.rec-votos b { font: 800 22px var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.rec-votos small { color: var(--texto-3); font-size: 11px; margin-top: 3px; }
.rec-barra { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); }
.rec-barra i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ffb23e, #ff6b8b); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.voto.meu { border-color: var(--destaque); background: linear-gradient(90deg, rgba(255,178,62,.14), rgba(255,178,62,.03)); }
.voto.meu .rec-icone { background: var(--destaque); color: #1a1205; }
.nov-status { margin: 0; min-height: 1.3em; color: var(--ok); font-size: 14px; font-weight: 600; }
.nov-fundador { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255,178,62,.3); background: linear-gradient(90deg, rgba(255,178,62,.1), rgba(255,107,139,.06)); }
.nov-fundador p { margin: 0; flex: 1; color: var(--texto-2); font-size: 14px; line-height: 1.45; }
.nov-fundador b { color: var(--texto); }
.nov-fundador .btn { flex: none; border-color: rgba(255,178,62,.5); }
.nov-entrar { justify-content: center; width: 100%; }
@media (max-width: 760px) {
  .novidades h3 { font-size: 26px; }
  .nov-fundador { flex-direction: column; align-items: stretch; }
  .nov-fundador .btn { justify-content: center; }
}

/* janela da campanha: centralizada + barra de apoiadores */
.apoio-topo { align-items: center; text-align: center; max-width: 640px; margin: 0 auto; padding: 0 28px; }
.apoio-topo .marca-ponto { align-self: center; }
.meta-apoio { width: 100%; max-width: 460px; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.meta-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--texto-2); }
.meta-linha b { font: 800 26px var(--fonte-titulo); color: var(--texto); font-variant-numeric: tabular-nums; margin-right: 4px; }
.meta-alvo { color: var(--texto-3); font-size: 13px; }
.meta-barra { height: 12px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.meta-barra i { display: block; height: 100%; width: 0; min-width: 12px; border-radius: 999px; background: linear-gradient(90deg, #ffb23e, #ff6b8b, #a78bfa); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.meta-apoio small { color: var(--texto-3); font-size: 13px; }
.plano { text-align: center; align-items: stretch; }
.plano-cab { align-items: center; }
.selo { left: 50%; transform: translateX(-50%); white-space: nowrap; }
.beneficios { align-items: center; }
.beneficios li { padding-left: 0; }
.beneficios li::before { position: static; display: inline-block; margin: 0 8px 2px 0; vertical-align: middle; }
.apoio-rodape { text-align: center; }

/* ---------- início: cartões com Editar/Excluir; Iniciar só dentro do roteiro ---------- */
#listaRoteiros li .card-acoes { grid-column: 2 / span 2; display: flex; gap: 8px; margin-top: 8px; }
.card-acoes button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--texto-2); font-size: 13px; cursor: pointer; }
.card-acoes button:hover { color: var(--texto); background: rgba(255,255,255,.08); }
.card-acoes .excluir:hover { color: var(--erro); border-color: rgba(248,113,113,.4); }
.selo-beta { font: 700 10.5px var(--fonte-ui); letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; background: rgba(239,68,68,.18); color: #fca5a5; border: 1px solid rgba(239,68,68,.35); }
@media (min-width: 761px) {
  /* computador: Iniciar à esquerda (o roteiro está aberto ao lado), câmera no centro, campanha à direita */
  .barra-acoes { grid-template-columns: 1fr auto 1fr; }
  .acoes-principais { display: contents; }
  #btnIniciar { justify-self: start; }
  .apoiar { justify-self: end; }
}
@media (max-width: 760px) {
  #editor:not(.vendo-roteiro) #btnIniciar { display: none; } /* sem roteiro aberto, não há o que iniciar */
  .acoes-principais { justify-content: center; }
}

/* ---------- teleprompter: barra flutuante de baixo (só ícones) ---------- */
#hudBase {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 12px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.7) 60%);
  transition: opacity .3s, transform .3s; pointer-events: none;
}
#hudBase > * { pointer-events: auto; }
#prompter.ocultar-hud #hudBase { opacity: 0; transform: translateY(12px); }
#prompter.ocultar-hud #hudBase > * { pointer-events: none; }
.barra-flutuante {
  display: flex; align-items: center; gap: 6px; padding: 7px;
  border-radius: 999px; background: rgba(24,24,27,.78); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.ico {
  position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent;
  color: rgba(255,255,255,.82); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s;
}
.ico svg { width: 22px; height: 22px; }
.ico:hover, .ico[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; }
.ico.ligado { color: var(--destaque); }
.ico.ligado::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
#btnCamera.ligado { color: #f87171; background: transparent !important; border: 0; }
#hudBase .btn.tocar { width: 60px; height: 60px; margin: 0 4px; box-shadow: 0 6px 20px rgba(255,178,62,.35); }
#hudBase .btn.tocar svg { width: 26px; height: 26px; }
.pop {
  order: -1; width: min(300px, calc(100vw - 32px)); margin-bottom: 10px; padding: 14px 16px; border-radius: 18px;
  background: rgba(20,20,22,.96); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px;
}
.pop-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.pop-topo output { color: var(--destaque); font-variant-numeric: tabular-nums; }
.pop small { color: var(--texto-3); font-size: 12px; line-height: 1.4; }
.pop input[type=range] { accent-color: var(--destaque); width: 100%; }
.passo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.passo button { width: 64px; height: 44px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; font: 700 16px var(--fonte-ui); cursor: pointer; }
.passo output { font: 800 22px var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.passo output::after { content: "px"; font-size: 12px; color: var(--texto-3); margin-left: 2px; }
/* com a câmera ligada, o centro da barra vira o botão de gravar */
#prompter.camera #hudBase .btn.tocar { visibility: hidden; }
#barraCamera { z-index: 3; padding-bottom: calc(16px + env(safe-area-inset-bottom)); gap: 6px; }
#barraCamera .cam-info { position: absolute; bottom: calc(100px + env(safe-area-inset-bottom)); }
.so-camera { display: none !important; }
#prompter.camera .so-camera { display: inline-flex !important; }
#prompter.camera #progresso { bottom: auto; top: 0; }
@media (max-width: 760px) {
  /* topo enxuto no celular: tela cheia não existe no iPhone e o seletor de microfone fica estreito */
  #btnTela { display: none; }
  .grupo select { max-width: 120px; }
}
#barraCamera { background: none; }
/* com câmera: o botão de gravar ocupa exatamente o lugar do play na barra */
#barraCamera { padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
#barraCamera .gravar { width: 60px; height: 60px; border-width: 3px; }
#barraCamera .gravar i { width: 46px; height: 46px; }
#barraCamera .gravar.gravando i { width: 22px; height: 22px; }
#barraCamera .cam-info { bottom: calc(96px + env(safe-area-inset-bottom)); }
/* painel da barra aberto: tira da frente a legenda da resolução */
#prompter:has(.pop:not([hidden])) .cam-info { opacity: 0; }
/* avisos ("Espelho horizontal", comandos de voz) acima da barra de baixo */
#avisoComando { bottom: calc(120px + env(safe-area-inset-bottom)); }

/* ---------- espelhamento ---------- */
#faixaEspelho {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 16px 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(255,178,62,.1); border: 1px solid rgba(255,178,62,.3); font-size: 14px;
}
#faixaEspelho .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--destaque); animation: piscar 1.2s infinite; }
#faixaEspelho.ok .ponto { background: var(--ok); animation: none; box-shadow: 0 0 10px var(--ok); }
#txtEspelho { flex: 1; min-width: 160px; font-weight: 600; }
#faixaEspelho .btn { height: 34px; padding: 0 12px; font-size: 13px; }
body.modo-espelho #btnApoiar,
body.modo-espelho #secaoCamera, body.modo-espelho #grupoMic, body.modo-espelho .so-camera,
body.modo-espelho #btnTrazer, body.modo-espelho #btnGravacoes { display: none !important; }
#limiteEspelho { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(0,0,0,.88); }
#limiteEspelho b { font: 700 22px var(--fonte-titulo); }
#limiteEspelho p { margin: 0; max-width: 420px; color: var(--texto-2); line-height: 1.5; }
.espelhar-aqui { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--borda); }
.espelhar-aqui b { font-size: 14px; }
.espelhar-aqui small { color: var(--erro); min-height: 1.2em; font-size: 13px; }
.seletor.ligacao { width: 100%; }
.seletor.ligacao button { flex: 1; padding: 0 8px; font-size: 13px; }
#explicaLigacao { min-height: 4.4em; }
#outraAba { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(8,8,10,.94); }
#outraAba b { font: 700 22px var(--fonte-titulo); }
#outraAba p { margin: 0; max-width: 440px; color: var(--texto-2); line-height: 1.5; }
/* confirmação de conexão na janela do QR */
#dlgRemoto.confirmado .dlg > :not(.confirma):not(.fechar) { display: none !important; }
.confirma { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 8px; }
.confirma .check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(74,222,128,.15); color: var(--ok); animation: surgir .35s ease-out; }
.confirma .check svg { width: 40px; height: 40px; stroke-width: 3; }
.confirma b { font: 700 22px var(--fonte-titulo); }
.confirma p { margin: 0; }
@keyframes surgir { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confirma .check { animation: none; } }
.estado-conexao { color: var(--destaque); }
.estado-conexao.ok { color: var(--ok); }
.estado-conexao::before { content: "● "; }
#btnConectar.conectado { color: var(--ok); border-color: rgba(74,222,128,.4); }

/* ---------- Tay: roteiros a partir de vídeos virais (js/tay.js) ---------- */
#dlgTay { max-width: min(520px, calc(100vw - 32px)); width: 100%; }
.dlg-tay { gap: 14px; max-height: min(86vh, 760px); overflow: auto; }
.dlg-tay h3 { text-wrap: balance; }
.dlg-tay p { font-size: 14.5px; line-height: 1.5; }
.tay-perfil { display: flex; gap: 12px; align-items: center; padding-right: 40px; }
.tay-perfil > span:last-child { min-width: 0; }
.tay-perfil b { display: block; font: 700 18px/1.25 var(--fonte-titulo); overflow-wrap: anywhere; }
.tay-perfil small { color: var(--texto-3); font-size: 13px; }
.tay-av { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--destaque-escuro); color: var(--destaque); font: 800 17px var(--fonte-titulo); }
.tay-resumo { color: var(--texto) !important; }
.tay-etiquetas, .tay-estrutura { display: flex; flex-wrap: wrap; gap: 6px; }
.tay-etiquetas span, .tay-estrutura span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.tay-etiquetas span.forte { background: var(--destaque-escuro); border-color: #5a4318; color: var(--destaque); }
.tay-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); margin-top: 4px; }
.tay-lista { display: flex; flex-direction: column; gap: 8px; }
.tay-video, .tay-tema { text-align: left; width: 100%; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--borda); color: var(--texto); padding: 12px 14px; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.tay-video:hover, .tay-tema:hover { border-color: rgba(255,178,62,.55); background: rgba(255,178,62,.05); }
.tay-video { display: flex; gap: 12px; align-items: flex-start; }
.tay-vezes { flex: none; min-width: 52px; font: 800 20px/1.2 var(--fonte-titulo); color: var(--destaque); font-variant-numeric: tabular-nums; }
.tay-video-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tay-video b, .tay-tema b { font-weight: 600; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.tay-video small, .tay-tema small { color: var(--texto-3); font-size: 12.5px; line-height: 1.4; }
.tay-video .tay-porque { color: var(--texto-2); }
.tay-tema { display: flex; flex-direction: column; gap: 4px; }
.tay-selo { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--destaque); }
.tay-gancho { color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.tay-tema.bloqueado .tay-gancho { filter: blur(4px); user-select: none; }
.tay-mecanismo { display: flex; flex-direction: column; gap: 8px; background: var(--superficie-2); border-radius: 14px; padding: 12px 14px; }
.tay-mecanismo p { color: var(--texto) !important; }
.tay-ref { display: flex; gap: 8px; }
.tay-ref input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: inherit; }
.tay-passos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tay-passos li { display: flex; gap: 10px; align-items: center; color: var(--texto-3); }
.tay-passos li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--borda); }
.tay-passos li.ativo { color: var(--texto-2); }
.tay-passos li.ativo::before { border-color: var(--destaque); border-top-color: transparent; animation: tay-gira .8s linear infinite; }
.tay-passos li.feito { color: var(--texto); }
.tay-passos li.feito::before { background: var(--destaque); border-color: var(--destaque); }
@keyframes tay-gira { to { transform: rotate(360deg); } }
.area-texto.tay-escrevendo { position: relative; }
.area-texto.tay-escrevendo::after { content: "A Tay está escrevendo…"; position: absolute; top: 14px; right: 18px; font-size: 12px; color: var(--destaque); animation: tay-pisca 1.2s infinite; pointer-events: none; }
@keyframes tay-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tay-passos li.ativo::before, .area-texto.tay-escrevendo::after { animation: none; } }
:root { --comando: #5ea8ff; }
.titulo.tay-comando { color: var(--comando); }
.tay-dica { margin: -2px 0 6px; font-size: 13px; color: var(--comando); opacity: .85; }
.tay-isca { font-size: 13.5px !important; color: var(--texto-2) !important; }
.tay-isca b { color: var(--texto); font-weight: 600; }
.tay-ponte { color: var(--comando) !important; opacity: .9; }
.tay-nota { font-size: 13px !important; color: var(--texto-3) !important; }
.tay-tema .tay-estrutura { margin-top: 4px; }
/* esqueleto do roteiro enquanto a Tay começa a escrever */
.tay-esqueleto { flex: 1; max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding: 18px 0 8px; }
.tay-esqueleto span { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--superficie-2) 0%, var(--borda) 50%, var(--superficie-2) 100%); background-size: 200% 100%; animation: tay-brilho 1.4s linear infinite; }
.tay-esqueleto i { display: block; height: 6px; }
@keyframes tay-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .tay-esqueleto span { animation: none; } }
.tay-esqueleto span:nth-child(3n+1) { width: 94%; } .tay-esqueleto span:nth-child(3n+2) { width: 80%; } .tay-esqueleto span:nth-child(3n) { width: 88%; } .tay-esqueleto span:last-child { width: 58%; }
/* comando no título: balões no lugar do texto (Briefing e Gerar) */
.tay-comando-painel { flex: 1; max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding: 14px 0 8px; }
.tay-briefing textarea { width: 100%; min-height: 110px; padding: 14px 16px; border-radius: 18px 18px 18px 4px; border: 1px solid var(--borda); background: var(--superficie-2); font-size: 16px; line-height: 1.55; max-width: none; }
.tay-briefing textarea:focus { border-color: var(--comando); }
.tay-baloes { display: flex; flex-wrap: wrap; gap: 10px; }
.tay-balao { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 20px 20px 20px 0; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: 600 15px var(--fonte-titulo, inherit); cursor: pointer; }
.tay-balao svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tay-balao:hover { border-color: var(--comando); }
.tay-balao.primario { background: var(--comando); border-color: var(--comando); color: #06121f; }
.tay-balao.primario:hover { filter: brightness(1.08); }
.tay-balao.ouvindo { border-color: #ff5a5a; color: #ff8a8a; }
.tay-balao.ouvindo svg { animation: tay-pisca 1s infinite; }
@media (prefers-reduced-motion: reduce) { .tay-balao.ouvindo svg { animation: none; } }
/* conta: entrar com a senha e criar a conta */
.tay-form { display: flex; flex-direction: column; gap: 10px; }
.tay-form input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 16px; }
.tay-form input:focus { outline: 0; border-color: var(--comando); }
.tay-form .btn.primario { height: 48px; }
.tay-form-erro { color: #ff8a8a !important; font-size: 14px !important; }
.tay-link { align-self: center; background: none; border: 0; color: var(--texto-2); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.tay-salvar { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--comando); background: var(--superficie-2); }
.tay-salvar small { color: var(--texto-2); font-size: 13.5px; }
/* aviso de mudança de endereço (só no endereço antigo, para quem tem gravações) */
.aviso-mudanca { position: fixed; inset: auto 16px calc(16px + env(safe-area-inset-bottom)); width: auto; max-width: 520px; margin: 0 auto; color: var(--texto); display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--superficie-2); border: 1px solid var(--destaque); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.aviso-mudanca p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; }
.aviso-mudanca .btn { align-self: flex-start; }
.aviso-mudanca:not([open]) { display: none; }
.aviso-mudanca::backdrop { background: rgba(0,0,0,.55); }