:root{
  /* Design system do index.html */
  --bg:#0F1115;
  --panel:#161A20;
  --panel-2:#1D232B;
  --line:#2A313B;
  --text:#ECEEF2;
  --text-dim:#A6AFBD;
  --accent:#FF7A3D;
  --accent-dim:#5C3A26;
  /* Bolhas do chat (mantém realismo) */
  --bubble-in:#232A33;
  --bubble-out:#1F7A5C;
  --wp-bg:#0b141a;
  --danger:#e05252;
}
*{box-sizing:border-box;}
html{ min-height:100%; }
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}

/* ===== NAV GLOBAL ===== */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:54px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:15px; text-decoration:none; color:var(--text); }
.brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.brand-tag{ font-family:'Inter',sans-serif; font-weight:400; color:var(--text-dim); font-size:0.75em; margin-left:2px; }
.topnav-links{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.topnav-links::-webkit-scrollbar{ display:none; }
.topnav-links a{
  font-size:13px; color:var(--text-dim);
  padding:6px 11px; border-radius:7px;
  text-decoration:none; transition:background .12s, color .12s;
  white-space:nowrap;
}
.topnav-links a:hover{ background:var(--panel-2); color:var(--text); }
.topnav-links a.active{ background:var(--panel-2); color:var(--text); }

/* ===== DROPDOWN "GUIAS" (nav) — só CSS, sem JS, hover + teclado (:focus-within) ===== */
.nav-guias{ position:relative; flex-shrink:0; }
.nav-guias-btn{
  display:flex; align-items:center; gap:5px;
  background:transparent; border:none;
  color:var(--text-dim);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  padding:6px 11px; border-radius:7px;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.nav-guias-btn:hover, .nav-guias-btn:focus-visible{ background:var(--panel-2); color:var(--text); }
.nav-guias-chevron{ width:14px; height:14px; flex-shrink:0; transition:transform .15s; }
.nav-guias:hover .nav-guias-chevron,
.nav-guias:focus-within .nav-guias-chevron{ transform:rotate(180deg); }
.nav-guias-panel{
  position:absolute; top:100%; right:0; margin-top:6px;
  min-width:230px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  padding:6px;
  display:flex; flex-direction:column; gap:1px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:110;
}
.nav-guias:hover .nav-guias-panel,
.nav-guias:focus-within .nav-guias-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-guias-panel a{
  padding:9px 11px; border-radius:7px;
  font-size:13px; color:var(--text-dim); text-decoration:none;
  white-space:nowrap;
  transition:background .12s, color .12s;
}
.nav-guias-panel a:hover{ background:var(--panel-2); color:var(--text); }

@media (max-width:1000px){
  .nav-guias{ display:none; }
}

/* ===== FOOTER GLOBAL ===== */
footer{
  border-top:1px solid var(--line);
  margin-top:auto;
}
footer .f-wrap{
  max-width:1120px;
  margin:0 auto;
  padding:32px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 24px;
}
footer .f-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  color:var(--text);
}
footer .f-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
}
footer .f-links a{
  font-size:13px;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .12s;
}
footer .f-links a:hover{
  color:var(--text);
  text-decoration:underline;
}
footer .fine{
  font-size:12px;
  color:#5c6472;
  line-height:1.65;
  max-width:1120px;
}

/* ===== SHELL 3 colunas ===== */
.app-shell{
  display:flex;
  flex:1 1 auto;   /* antes era width:100% — agora divide espaço com as colunas de anúncio */
  min-width:0;     /* deixa encolher direito em vez de estourar a largura */
  padding-top:54px; /* altura da nav */
  min-height:100vh;
}

/* ===== SIDEBAR (abas) ===== */
.sidebar{
  width:80px;
  min-width:80px;
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 0;
  gap:4px;
  position:sticky;
  top:54px;
  height:calc(100vh - 54px);
  overflow:hidden;
}
.tab-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:60px;
  padding:10px 4px;
  border-radius:10px;
  background:transparent;
  border:none;
  color:var(--text-dim);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:500;
  transition:background .12s, color .12s;
  text-align:center;
}
.tab-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tab-btn:hover{ background:var(--panel-2); color:var(--text); }
.tab-btn.active{ background:var(--accent-dim); color:var(--accent); }

/* ===== PAINEL CENTRAL (editor) ===== */
.editor{
  width:480px;
  min-width:320px;
  max-width:900px;
  flex:1 1 480px;
  background:var(--panel);
  border-right:1px solid var(--line);
  overflow-y:auto;
  max-height:calc(100vh - 54px);
  position:sticky;
  top:54px;
}

/* divisória arrastável entre o editor e o stage */
.resizer{
  width:6px;
  min-width:6px;
  flex-shrink:0;
  cursor:col-resize;
  background:var(--line);
  position:sticky;
  top:54px;
  height:calc(100vh - 54px);
  z-index:5;
  touch-action:none;
  transition:background .15s;
}
.resizer::after{
  content:'⋮⋮';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  color:var(--text-dim);
  font-size:13px;
  letter-spacing:2px;
  pointer-events:none;
}
.resizer:hover, .resizer.dragging{
  background:var(--accent);
}
.resizer:hover::after, .resizer.dragging::after{
  color:#1a0e06;
}

/* alça customizada da caixa "colar roteiro em massa" — substitui o
   triângulo nativo do navegador (canto inferior direito) por um puxador
   centralizado, no mesmo estilo visual da divisória do editor acima */
.textarea-resize-wrap{
  position:relative;
}
.textarea-resize-wrap textarea{
  resize:none; /* esconde a alça nativa do navegador */
}
.v-resize-handle{
  position:absolute;
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
  width:52px;
  height:14px;
  border-radius:7px;
  background:var(--line);
  cursor:row-resize;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  touch-action:none;
  transition:background .15s;
}
.v-resize-handle::after{
  content:'⋯';
  color:var(--text-dim);
  font-size:16px;
  line-height:1;
  pointer-events:none;
}
.v-resize-handle:hover, .v-resize-handle.dragging{
  background:var(--accent);
}
.v-resize-handle:hover::after, .v-resize-handle.dragging::after{
  color:#1a0e06;
}
.panel-head{
  padding:20px 20px 14px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--panel);
  z-index:10;
}
.panel-head h2{
  font-size:18px;
  color:var(--text);
  margin-bottom:4px;
}
.panel-head .sub{
  color:var(--text-dim);
  font-size:13px;
  line-height:1.55;
  font-family:'Inter',sans-serif;
  font-weight:400;
}
.tab-panel{ display:none; padding:16px 18px 24px; }
.tab-panel.active{ display:block; }

/* ===== BLOCOS DO EDITOR ===== */
.block{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
}
.block h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--text-dim);
  margin:0 0 12px;
  font-family:'Inter',sans-serif;
  font-weight:700;
}
label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--text-dim);
  margin:10px 0 5px;
  font-family:'Inter',sans-serif;
}
input[type=text], input[type=number], textarea, select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:8px;
  padding:9px 11px;
  font-size:14px;
  font-family:'Inter',sans-serif;
  resize:vertical;
  transition:border-color .15s;
}
input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--accent);
}
textarea{ min-height:90px; }
.row{ display:flex; gap:8px; }
.row > *{ flex:1; }
button{
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:10px 15px;
  font-size:14px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  transition:transform .12s, box-shadow .12s;
}
.btn-primary{
  background:var(--accent); color:#1a0e06;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -6px rgba(255,122,61,.5); }
.btn-secondary{ background:var(--panel); border:1px solid var(--line); color:var(--text); }
.btn-secondary:hover{ border-color:#454e5b; }
.btn-danger{ background:transparent; border:1px solid var(--danger); color:var(--danger); }
.btn-block{ width:100%; margin-top:8px; }
button:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none!important; transform:none!important; }

/* checkbox "li e concordo com os termos de uso" — obrigatório pra exportar */
.consent-check{
  display:flex; align-items:flex-start; gap:8px;
  margin:14px 0 4px; padding:10px 11px;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; line-height:1.55; color:var(--text-dim); font-weight:400;
  cursor:pointer;
}
.consent-check input[type=checkbox]{ width:auto; flex-shrink:0; margin-top:2px; accent-color:var(--accent); }
.consent-check a{ color:var(--accent); text-decoration:none; }
.consent-check a:hover{ text-decoration:underline; }
/* enquanto não marcado: texto vermelho e sublinhado, pra chamar atenção de
   verdade — some assim que a pessoa marca o checkbox */
.consent-check.not-agreed .consent-text{ color:var(--danger); text-decoration:underline; text-underline-offset:2px; }
.consent-check.not-agreed .consent-text a{ color:var(--danger); }

/* aviso "não feche a aba", visível durante a exportação dentro do overlay do celular */
.export-stay-warning{
  font-size:11px; color:var(--text-dim); text-align:center;
  max-width:220px; line-height:1.5;
}

/* modal de aviso ao clicar em "Gerar vídeo" — exportação só começa depois de confirmar aqui */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal-box{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:24px 26px; max-width:400px; width:100%;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.modal-box h3{
  font-size:17px; margin-bottom:14px; color:var(--text);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
}
.modal-warn-text{ margin:0; color:var(--text-dim); font-size:13.5px; line-height:1.6; }
.msg-list{ max-height:320px; overflow-y:auto; margin-top:10px; }
.msg-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px;
  border-radius:8px;
  background:var(--bg);
  margin-bottom:6px;
  border:1px solid var(--line);
}
.msg-item .tag{
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;
  margin-top:2px;
  font-family:'Inter',sans-serif;
}
.msg-item .txt{ flex:1; font-size:13.5px; line-height:1.45; word-break:break-word; }
.msg-item .meta{ font-size:11px; color:var(--text-dim); margin-top:4px; }
.item-actions{ display:flex; flex-direction:column; gap:6px; align-items:center; padding-top:1px; }
.act{ cursor:pointer; color:var(--text-dim); font-size:13px; line-height:1; padding:2px; }
.act:hover{ color:var(--accent); }
.act.del:hover{ color:var(--danger); }
.edit-form, .insert-form{ background:var(--bg); }
.insert-form{ border-style:dashed; border-color:var(--accent-dim); }
.help{ font-size:12.5px; color:var(--text-dim); margin-top:6px; line-height:1.6; font-family:'Inter',sans-serif; }
.warn-box{ display:none; font-size:12px; color:var(--danger); background:rgba(224,82,82,.12); border:1px solid var(--danger); border-radius:8px; padding:10px 12px; margin-bottom:12px; line-height:1.5; }
.help code{ color:var(--text); background:var(--bg); padding:1.5px 5px; border-radius:3px; font-size:11.5px; }
.status{
  font-size:12px;
  padding:8px 10px;
  border-radius:8px;
  margin-top:10px;
  display:none;
  font-family:'Inter',sans-serif;
}
.status.show{ display:block; }
.status.info{ background:rgba(255,122,61,.12); color:var(--accent); }
.status.rec{ background:rgba(224,82,82,.12); color:var(--danger); }

/* participantes */
.participant-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.p-letter{ width:16px; font-size:11px; color:var(--text-dim); font-weight:700; flex-shrink:0; }
.p-name{ flex:1; }
.p-color{ width:34px; height:32px; padding:2px; background:var(--bg); border:1px solid var(--line); border-radius:6px; flex:none; }
.emoji-quick{ display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
.emoji-quick span{ cursor:pointer; padding:3px 4px; font-size:16px; border-radius:5px; }
.emoji-quick span:hover{ background:var(--bg); }

/* ===== STAGE (preview phone) ===== */
.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  gap:16px;
  position:sticky;
  top:54px;
  height:calc(100vh - 54px);
  overflow:hidden;
  background:var(--bg);
}
.stage-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--text-dim);
  font-family:'Inter',sans-serif;
}
.stage-label .dot{
  width:7px; height:7px; border-radius:50%;
  background:#3ecf8e;
  flex-shrink:0;
  animation:pulse 1.6s infinite;
}
.phone-wrap{
  width:336px;
  height:702px;
  flex-shrink:0;
  min-height:0;
  overflow:hidden;
  background:#000;
  border-radius:40px;
  padding:12px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px #262c35;
  position:relative;
  transform-origin:center center;
  will-change:transform;
}
.phone-screen{
  width:100%;
  height:100%;
  border-radius:28px;
  overflow:hidden;
  background:var(--wp-bg);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* barra de status (relógio + ícones do sistema, no topo do celular) */
.status-bar{
  flex-shrink:0;
  height:26px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#1f2c34;
  font-size:12px;
  font-weight:600;
  color:#f2f4f6;
  font-family:'Inter',sans-serif;
}
.status-bar .sb-icons{ display:flex; align-items:center; gap:5px; }
.status-bar .sb-icons svg{ width:15px; height:15px; display:block; }
.status-bar .sb-battery{ display:flex; align-items:center; }

.wp-header{
  background:#1f2c34;
  padding:10px 12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.wp-header .wp-back{
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#e9edf0;
}
.wp-header .wp-back svg{ width:20px; height:20px; }
.wp-header .avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,#3a4a53,#232f36);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--text-dim);
  overflow:hidden; flex-shrink:0;
}
.wp-header .avatar img{ width:100%; height:100%; object-fit:cover; }
.wp-header .info{ flex:1; min-width:0; }
.wp-header .name{ font-size:14.5px; font-weight:600; font-family:'Inter',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-header .status-line{
  font-size:11px; color:var(--text-dim); margin-top:1px; font-family:'Inter',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.wp-header .wp-header-icons{ display:flex; align-items:center; gap:16px; flex-shrink:0; color:#e9edf0; }
.wp-header .wp-header-icons svg{ width:19px; height:19px; display:block; }

/* aviso de criptografia de ponta a ponta (mensagem de sistema, chat real) */
.enc-notice{
  align-self:center;
  max-width:84%;
  background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.06);
  color:#f0c46a;
  font-size:11.5px;
  line-height:1.55;
  text-align:center;
  padding:10px 14px;
  border-radius:8px;
  margin:4px 0 8px;
  opacity:0;
  animation: pop .18s ease forwards;
}
.enc-notice.no-anim{ opacity:1; animation:none; }
.enc-notice b{ font-weight:700; }
.enc-notice .enc-lock{ margin-right:2px; }

.wp-body{
  flex:1;
  min-height:0;
  background-color:var(--wp-bg);
  overflow:hidden;
  position:relative;
}
#wpBodyInner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:100%;
  gap:2px;
  padding:8px 8px 10px;
  will-change:transform;
}
.export-overlay{
  position:absolute; inset:14px;
  border-radius:32px; overflow:hidden;
  background:var(--wp-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px; z-index:20;
}
.export-steps{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:220px; }
.export-step{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-dim); font-family:'Inter',sans-serif; transition:color .2s; }
.export-step .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; transition:background .2s; }
.export-step.active{ color:var(--text); }
.export-step.active .dot{ background:var(--accent); animation:pulse 1s infinite; }
.export-step.done{ color:var(--text-dim); }
.export-step.done .dot{ background:#3ecf8e; animation:none; }
.export-bar{ width:100%; max-width:220px; height:7px; border-radius:5px; background:var(--panel-2); border:1px solid var(--line); overflow:hidden; }
.export-bar-fill{ height:100%; width:0%; background:var(--accent); transition:width .15s linear; }
.export-bar-label{
  font-size:12px;
  color:var(--text-dim);
  font-family:'Inter',sans-serif;
  font-variant-numeric: tabular-nums;
}
.bubble{
  max-width: 78%;
  width: fit-content;
  min-width: 0;
  padding: 6px 9px 7px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
  position:relative;
  opacity:0;
  transform: translateY(6px) scale(.98);
  animation: pop .18s ease forwards;
  word-break: break-word;
}
@keyframes pop{ to{ opacity:1; transform:translateY(0) scale(1); } }
.bubble.no-anim{ opacity:1; transform:none; animation:none; }
.bubble.in{
  background: var(--bubble-in);
  align-self:flex-start;
  border-top-left-radius: 2px;
}
.bubble.out{
  background: var(--bubble-out);
  align-self:flex-end;
  border-top-right-radius: 2px;
}
.bubble.has-reaction{ margin-bottom:10px; }
.bubble img{ max-width:100%; border-radius:6px; display:block; margin-bottom:4px; }
.bubble .sender-name{ font-size:12.5px; font-weight:600; margin-bottom:2px; }
.bubble .bubble-text{ margin-top:2px; }

/* texto corrido: fica em fluxo normal (display:inline), pra quebrar linha
   sozinho quando precisar. */
.bubble-msgtext{ display:inline; }

.bubble .time{
  font-size: 10px;
  color: rgba(233,237,239,.5);
  white-space:nowrap;
  word-break:normal;
}
.bubble .time.time-inline{
  float:right;
  margin-left:6px;
  margin-top:4px;
  line-height:1;
}
.bubble .time.time-below{
  display:block;
  text-align:right;
  margin-top:3px;
}
.bubble.out .time{ display:flex; align-items:center; gap:2px; }
.bubble.out .time.time-below{ justify-content:flex-end; }
.bubble .time.time-under{ display:block; text-align:right; margin-top:0; white-space:nowrap; }
.bubble.out .time.time-under{ display:flex; justify-content:flex-end; }

/* respostas citadas */
.reply-quote{
  background: rgba(255,255,255,.07);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 4px 6px;
  margin-bottom:4px;
}
.reply-quote .rq-name{ font-weight:600; font-size:12px; color: var(--accent); }
.reply-quote .rq-text{ color: var(--text-dim); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* reação grudada no canto */
.reaction-badge{
  position:absolute;
  bottom:-10px;
  background:#1f2c34;
  border:1px solid var(--line);
  border-radius:12px;
  padding:1px 5px;
  font-size:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  line-height:1.4;
}
.bubble.in .reaction-badge{ right:-4px; }
.bubble.out .reaction-badge{ left:-4px; }

/* emoji gigante sozinho */
.bubble.big-emoji{ background:transparent!important; padding:0; box-shadow:none; }
.bubble.big-emoji .emoji-text{ font-size:46px; line-height:1.15; display:block; }

/* separador de data */
.date-sep{
  align-self:center;
  background: rgba(255,255,255,.09);
  color: var(--text-dim);
  font-size:11.5px;
  padding:5px 11px;
  border-radius:8px;
  margin:6px 0;
  opacity:0;
  animation: pop .18s ease forwards;
}

.typing{
  align-self:flex-start;
  background: var(--bubble-in);
  border-radius: 8px;
  border-top-left-radius: 2px;
  padding: 9px 12px;
  display:flex;
  gap:4px;
  opacity:0;
  animation: pop .15s ease forwards;
}
.typing span{
  width:6px; height:6px; border-radius:50%;
  background: var(--text-dim);
  animation: blink 1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }
.wp-inputbar{
  background: #1f2c34;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}
.wp-inputbar .wp-ic{
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim);
}
.wp-inputbar .wp-ic svg{ width:20px; height:20px; }
.wp-inputbar .field{
  flex:1;
  background: #2a3942;
  border-radius: 20px;
  padding: 9px 14px;
  font-size:13px;
  color: var(--text-dim);
}
.wp-inputbar .mic{
  width:34px;height:34px;border-radius:50%;
  background: var(--accent-dim);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#ffd9c2;
}
.wp-inputbar .mic svg{ width:17px; height:17px; }
.controls{ display:flex; gap:10px; }
.bubble .time svg{ vertical-align:-1px; margin-left:2px; }
.bubble .time .check-gray{ color: rgba(233,237,239,.55); }
.bubble .time .check-blue{ color: #53bdeb; }
.img-lib-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  margin-top:10px;
}
.img-lib-item{
  position:relative;
  aspect-ratio: 1;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  background: var(--bg);
}
.img-lib-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-lib-item .num{
  position:absolute; top:3px; left:3px;
  background: rgba(0,0,0,.65);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:1px 5px;
  border-radius:4px;
}
.img-lib-item .rm{
  position:absolute; top:3px; right:3px;
  background: rgba(224,82,82,.85);
  color:#fff;
  font-size:11px;
  width:16px; height:16px;
  line-height:16px;
  text-align:center;
  border-radius:50%;
  cursor:pointer;
}
.swatches{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.swatch{
  width:28px; height:28px; border-radius:6px;
  cursor:pointer;
  border: 2px solid transparent;
}
.swatch.active{ border-color: var(--accent); }
.rec-dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--danger);
  display:inline-block;
  margin-right:6px;
  animation: pulse 1s infinite;
}
@keyframes pulse{ 50%{ opacity:.3; } }
.progress-wrap{ margin-top:8px; }
.progress-bar{
  width:100%; height:7px; border-radius:5px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow:hidden;
}
.progress-fill{
  height:100%; width:0%;
  background: var(--accent);
  transition: width .15s linear;
}
.progress-label{
  margin-top:5px;
  font-size:11.5px;
  color:var(--text-dim);
  text-align:right;
  font-family:'Inter',sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ===== ANÚNCIOS LATERAIS ===== */
.ad-lateral{
  flex:0 0 160px;
  width:160px;
  align-self:stretch;
  margin-top:54px;
  border-radius:0;
  overflow:hidden;
}
.ad-lateral.esquerda{ margin-left:16px; border-right:2px solid var(--accent); }
.ad-lateral.direita{ margin-right:16px; border-left:2px solid var(--accent); }

.ad-slot{
  position:sticky;
  top:54px;
  min-height:calc(100vh - 54px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-dim);
  font-size:11.5px;
  text-align:center;
}
.ad-lateral .ad-label{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  opacity:.7;
}

@media (max-width:1200px){
  .ad-lateral{ display:none; }
}

/* ===== SCROLLBAR CUSTOMIZADA ===== */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--panel);
}
*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track{
  background: var(--panel);
}
*::-webkit-scrollbar-thumb{
  background: var(--line);
  border-radius: 6px;
  border: 2px solid var(--panel);
}
*::-webkit-scrollbar-thumb:hover{
  background: var(--accent);
}
*::-webkit-scrollbar-corner{
  background: var(--panel);
}

/* =========================================================================
   COMPONENTES DE ARTIGO (guias / páginas de texto)
   ========================================================================= */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:12.5px; color:var(--text-dim); margin-bottom:18px;
}
.breadcrumb a{ color:var(--text-dim); text-decoration:none; }
.breadcrumb a:hover{ color:var(--text); text-decoration:underline; }
.breadcrumb .sep{ color:#4b525f; }
.breadcrumb .current{ color:var(--text); }

.toc{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 6px; }
.toc a{ font-size:13px; color:var(--text-dim); background:var(--panel); border:1px solid var(--line); padding:6px 13px; border-radius:20px; text-decoration:none; transition:border-color .15s, color .15s; }
.toc a:hover{ border-color:var(--accent); color:var(--text); text-decoration:none; }

.tip{ display:flex; gap:10px; background:rgba(255,122,61,.08); border:1px solid var(--accent-dim); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--text-dim); line-height:1.6; margin-top:12px; }
.tip .tip-ic{ flex-shrink:0; color:var(--accent); font-weight:700; }

.related-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:20px 0; }
.related-links a{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; text-decoration:none; transition:border-color .15s;
}
.related-links a:hover{ border-color:var(--accent); }
.related-links .rl-eyebrow{ font-size:11.5px; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.related-links .rl-title{ font-size:15px; color:var(--text); font-family:'Bricolage Grotesque',sans-serif; font-weight:600; margin-bottom:4px; }
.related-links .rl-desc{ font-size:13px; color:var(--text-dim); line-height:1.5; }

/* =========================================================================
   MODO CELULAR
   ========================================================================= */
:root{ --ad-top-h:0px; }

.ad-top,
.preview-fab,
.sheet-bar{ display:none; }

.btn-link{
  display:block; text-align:center; text-decoration:none;
  background:var(--accent); color:#1a0e06;
  font-weight:600; font-size:14px; font-family:'Inter',sans-serif;
  padding:12px 15px; border-radius:8px;
}
.btn-link:hover{ box-shadow:0 6px 18px -6px rgba(255,122,61,.5); }

@media (max-width:1200px){
  :root{ --ad-top-h:60px; }

  .ad-top{
    display:block;
    position:fixed; top:54px; left:0; right:0;
    height:var(--ad-top-h);
    z-index:95;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .ad-top .ad-label{
    position:absolute; top:2px; left:0; right:0;
    text-align:center; line-height:1;
    font-size:9px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-dim); opacity:.7;
  }
  .ad-top-slot{
    position:absolute; top:12px; left:0; right:0; bottom:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }

  .app-shell{ padding-top:calc(54px + var(--ad-top-h)); }
  .sidebar{
    top:calc(54px + var(--ad-top-h));
    height:calc(100vh - 54px - var(--ad-top-h));
  }
  .editor{
    top:calc(54px + var(--ad-top-h));
    max-height:calc(100vh - 54px - var(--ad-top-h));
  }
  .resizer{
    top:calc(54px + var(--ad-top-h));
    height:calc(100vh - 54px - var(--ad-top-h));
  }

  body .page-shell{ padding-top:calc(54px + var(--ad-top-h)); }
  body .page-wrap h2{ scroll-margin-top:calc(54px + var(--ad-top-h) + 12px); }
  body .step-card{ scroll-margin-top:calc(54px + var(--ad-top-h) + 12px); }
}

@media (max-width:860px){
  :root{ --ad-top-h:60px; }

  .ad-top{
    display:block;
    position:fixed; top:54px; left:0; right:0;
    height:var(--ad-top-h);
    z-index:95;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .ad-top .ad-label{
    position:absolute; top:2px; left:0; right:0;
    text-align:center; line-height:1;
    font-size:9px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-dim); opacity:.7;
  }
  .ad-top-slot{
    position:absolute; top:12px; left:0; right:0; bottom:0;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }

  .topnav{ padding:0 12px; gap:10px; justify-content:flex-start; }
  .brand{ flex-shrink:0; }
  .brand-tag{ display:none; }
  .topnav-links{ display:none; } /* substituída pelo menu hambúrguer (.nav-menu-btn) */
  .topnav-links a{ padding:6px 10px; }

  .app-shell{
    display:block;
    padding-top:calc(54px + var(--ad-top-h));
    padding-bottom:calc(140px + env(safe-area-inset-bottom));
  }
  .sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:auto; min-width:0;
    height:calc(60px + env(safe-area-inset-bottom));
    flex-direction:row; align-items:stretch; justify-content:space-around;
    padding:4px 4px env(safe-area-inset-bottom); gap:0;
    border-right:none; border-top:1px solid var(--line);
    z-index:80;
  }
  .tab-btn{ flex:1 1 0; width:auto; min-width:0; min-height:0; padding:6px 2px; justify-content:center; }
  .editor{
    width:100% !important; min-width:0 !important; max-width:none !important;
    flex:none !important;
    position:static; max-height:none; overflow:visible;
    border-right:none;
  }
  .resizer{ display:none; }
  .panel-head{ top:calc(54px + var(--ad-top-h)); }
  .tab-panel{ padding:14px 14px 24px; }

  .stage{
    display:none;
    position:fixed; left:0; right:0; bottom:0;
    top:calc(54px + var(--ad-top-h));
    z-index:90;
    padding:52px 8px 8px;
    gap:0;
    overflow:hidden;
    align-items:center; justify-content:center;
  }
  body.preview-open .stage{ display:flex; top:54px; }
  body.preview-open .ad-top{ display:none; }
  body.preview-open{ overflow:hidden; }
  .stage-label{ display:none; }
  .sheet-bar{
    display:flex;
    position:absolute; top:0; left:0; right:0; height:52px;
    align-items:center; justify-content:space-between; gap:8px;
    padding:0 10px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .sheet-actions{ display:flex; gap:8px; align-items:center; }
  .sheet-bar button{ min-height:36px; padding:7px 12px; font-size:13px; }
  .preview-fab{
    display:block;
    position:fixed; right:14px;
    bottom:calc(60px + env(safe-area-inset-bottom) + 14px);
    z-index:85;
    background:var(--accent); color:#1a0e06;
    border-radius:24px; padding:12px 18px; min-height:0;
    box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
  }
  body.preview-open .preview-fab{ display:none; }

  input[type=text], input[type=number], textarea, select{ font-size:16px; }
  button{ min-height:42px; }
  .act{
    min-width:38px; min-height:38px; padding:0;
    display:flex; align-items:center; justify-content:center;
    font-size:17px;
  }
  .item-actions{ display:grid; grid-template-columns:repeat(2,38px); gap:2px; padding-top:0; }
  .msg-list{ max-height:none; }
  .emoji-quick span{ padding:7px 8px; font-size:20px; }
  .img-lib-item .rm{ width:26px; height:26px; line-height:26px; font-size:14px; }
  .v-resize-handle{ width:64px; height:22px; bottom:-14px; }
  .consent-check input[type=checkbox]{ width:20px; height:20px; }

  body .page-shell{ padding-top:calc(54px + var(--ad-top-h)); }
  body .page-wrap{ padding:32px 20px 70px; }
  body .page-wrap h1{ font-size:28px; }
  body .page-wrap h2{ scroll-margin-top:calc(54px + var(--ad-top-h) + 12px); }
  body .step-card{ padding:18px 16px; scroll-margin-top:calc(54px + var(--ad-top-h) + 12px); }
  body footer .f-wrap{ padding:0 20px; }
  body footer .f-links{ flex-wrap:wrap; gap:8px 18px; }
}

/* =========================================================================
   AVISO DE COOKIES (LGPD) — Etapa 7
   Barra fixa no rodapé da tela, leve e não bloqueante (ver js/cookie-notice.js
   pra decisão de escopo). Fica acima do sheet-bar do celular quando os dois
   coexistem, mas sem cobrir a barra de abas fixa (.sidebar) no modo celular.
   ========================================================================= */
.cookie-notice-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--panel-2); border-top:1px solid var(--line);
  padding:12px 18px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--text-dim); line-height:1.55;
}
.cookie-notice-bar .cnb-text{ flex:1 1 320px; }
.cookie-notice-bar .cnb-text a{ color:var(--accent); text-decoration:none; }
.cookie-notice-bar .cnb-text a:hover{ text-decoration:underline; }
.cookie-notice-bar .cnb-btn{
  flex-shrink:0; background:var(--accent); color:#1a0e06; border:none;
  font-weight:600; font-size:12.5px; padding:8px 16px; border-radius:7px; cursor:pointer;
}
@media (max-width:860px){
  .cookie-notice-bar{ padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  body:has(.sidebar) .cookie-notice-bar{ bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   MENU HAMBÚRGUER DO CABEÇALHO (telas estreitas)
   Botão + lista montados por js/i18n.js a partir dos links que já existem
   no nav de cada página (.topnav-links e .nav-guias-panel).
   ========================================================================= */
.nav-menu-btn, .nav-menu-panel{ display:none; }

@media (max-width:1000px){
  .nav-menu-btn{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; min-height:0; padding:0; margin-left:auto; flex-shrink:0;
    background:transparent; border:1px solid var(--line); border-radius:9px;
    color:var(--text); cursor:pointer;
    transition:background .12s, border-color .12s;
  }
  .nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"]{ background:var(--panel-2); border-color:#454e5b; }
  .nav-menu-btn svg{ width:20px; height:20px; display:block; }

  .nav-menu-panel.open{
    display:block;
    position:fixed; top:58px; right:10px; z-index:105;
    width:min(300px, calc(100vw - 20px));
    max-height:calc(100vh - 58px - 16px);
    overflow-y:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 20px 50px -12px rgba(0,0,0,.7);
    padding:8px;
  }
  .nav-menu-panel a{
    display:block; padding:11px 12px; border-radius:8px;
    font-size:14.5px; color:var(--text-dim); text-decoration:none;
    transition:background .12s, color .12s;
  }
  .nav-menu-panel a:hover, .nav-menu-panel a.active{ background:var(--panel-2); color:var(--text); }
  .nav-menu-panel .nmp-label{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-dim); opacity:.75; padding:12px 12px 4px;
  }
  .nav-menu-panel .nmp-sep{ height:1px; background:var(--line); margin:6px 4px 0; }
}