/* HWStudio — composição no padrão de estúdio (imagem: grade + barra de prompt; vídeo: painel + histórico)
   com a identidade H&W: preto profundo, serifada itálica + pincel laranja. */

:root {
  --laranja: #ff4700;
  --laranja-2: #ff6a2b;
  --laranja-texto: #ff7a40;
  --laranja-suave: rgba(255, 71, 0, .12);
  --laranja-borda: rgba(255, 71, 0, .5);

  --fundo: #f3f2ef;
  --painel: #ffffff;
  --painel-2: #f7f6f3;
  --chip: #eeede9;
  --chip-hover: #e5e3de;
  --elevada: #ffffff;
  --borda: rgba(20, 18, 15, .08);
  --borda-forte: rgba(20, 18, 15, .16);
  --texto: #15130f;
  --texto-2: #5a564f;
  --texto-3: #8d887f;
  --sombra: 0 1px 2px rgba(20, 18, 15, .05), 0 8px 24px rgba(20, 18, 15, .06);
  --sombra-forte: 0 24px 70px rgba(20, 18, 15, .22);
  --palco: #e9e7e2;
  --ok: #16a34a;
  --erro: #dc2626;
  --marca-hw: #15130f;

  --raio: 14px;
  --raio-p: 10px;
  --raio-g: 20px;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --pincel: "Permanent Marker", "Marker Felt", cursive;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Geist", -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0a0a0b; --painel: #141416; --painel-2: #19191c; --chip: #222226; --chip-hover: #2b2b30;
    --elevada: #1d1d21; --borda: rgba(255, 255, 255, .06); --borda-forte: rgba(255, 255, 255, .12);
    --texto: #f4f2ee; --texto-2: #a6a29b; --texto-3: #6c6964;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-forte: 0 30px 90px rgba(0, 0, 0, .7);
    --palco: #0f0f11; --marca-hw: #f4f2ee; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #0a0a0b; --painel: #141416; --painel-2: #19191c; --chip: #222226; --chip-hover: #2b2b30;
  --elevada: #1d1d21; --borda: rgba(255, 255, 255, .06); --borda-forte: rgba(255, 255, 255, .12);
  --texto: #f4f2ee; --texto-2: #a6a29b; --texto-3: #6c6964;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-forte: 0 30px 90px rgba(0, 0, 0, .7);
  --palco: #0f0f11; --marca-hw: #f4f2ee; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
a { color: var(--laranja-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--laranja); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ───────── topo ───────── */
.app { display: grid; grid-template-rows: 52px 1fr; height: 100vh; }
.topo { display: flex; align-items: center; gap: 22px; padding: 0 16px; position: relative; z-index: 20; }
.marca { display: flex; align-items: baseline; gap: 5px; text-decoration: none !important; user-select: none; flex: none; }
.marca .hw { font-family: var(--serif); font-style: italic; font-size: 25px; line-height: 1; color: var(--marca-hw); letter-spacing: -.4px; }
.marca .studio { font-family: var(--pincel); font-size: 19px; line-height: 1; color: var(--laranja); transform: rotate(-4deg) translateY(1px); }
.nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--texto-3); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color .15s; }
.nav a:hover { color: var(--texto); }
.nav a.ativo { color: var(--laranja-texto); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pilula { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--chip); border: 0; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.pilula .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.pilula.off .ponto { background: var(--erro); }
.pilula b { color: var(--texto); font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--laranja), #a32a00); color: #fff; font-weight: 600; font-size: 12.5px; display: grid; place-items: center; }

.vista { min-height: 0; overflow: hidden; position: relative; }

/* ───────── chips e popovers ───────── */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 11px;
  border: 0; background: var(--chip); color: var(--texto); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .15s;
}
.chip:hover { background: var(--chip-hover); }
.chip svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }
.chip .seta svg { width: 13px; height: 13px; }
.chip.ligado { color: var(--laranja-texto); }
.chip.ligado svg { color: var(--laranja-texto); }
.chip.dupla { padding: 0; gap: 0; }
.chip.dupla button { height: 36px; min-width: 38px; border: 0; background: none; display: grid; place-items: center; color: var(--texto-2); }
.chip.dupla button:hover { color: var(--texto); }
.chip.dupla button:disabled { opacity: .3; cursor: default; }
.chip.dupla .sep { width: 1px; height: 16px; background: var(--borda-forte); }
.chip.dupla button.on { color: var(--laranja-texto); }
.passo { display: inline-flex; align-items: center; height: 36px; border-radius: 11px; background: var(--chip); padding: 0 4px; gap: 2px; font-size: 13.5px; font-weight: 500; }
.passo button { width: 28px; height: 28px; border: 0; background: none; color: var(--texto-2); border-radius: 8px; display: grid; place-items: center; }
.passo button:hover:not(:disabled) { background: var(--chip-hover); color: var(--texto); }
.passo button:disabled { opacity: .3; cursor: default; }
.passo button svg { width: 14px; height: 14px; }
.passo span { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.passo span small { color: var(--texto-3); font-size: 13.5px; }

.popover {
  position: fixed; z-index: 70; min-width: 200px; max-width: min(560px, calc(100vw - 16px)); max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--elevada); border: 1px solid var(--borda-forte); border-radius: 16px; box-shadow: var(--sombra-forte);
  animation: pop .16s ease both;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.985); } }
.pop-rolagem { overflow-y: auto; padding: 6px; }
.pop-titulo { font-size: 12.5px; color: var(--texto-3); padding: 8px 10px 6px; }
.pop-item {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left;
  padding: 9px 10px; border-radius: 10px; font-size: 14px; color: var(--texto);
}
.pop-item:hover, .pop-item.foco { background: var(--chip); }
.pop-item.ativo { background: var(--chip); }
.pop-item .ico { width: 22px; display: grid; place-items: center; color: var(--texto-2); flex: none; }
.pop-item .ico svg { width: 16px; height: 16px; }
.pop-item .check { margin-left: auto; color: var(--laranja-texto); display: grid; }
.pop-item .check svg { width: 16px; height: 16px; }
.pop-item .forma { border: 1.6px solid currentColor; border-radius: 3px; }
.pop-busca { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.pop-busca svg { width: 18px; height: 18px; color: var(--texto-3); }
.pop-busca input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; }
.pop-grupo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); padding: 12px 12px 6px; }
.pop-grupo svg { width: 14px; height: 14px; }
.modelo-item { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; text-align: left; padding: 10px; border-radius: 12px; }
.modelo-item:hover, .modelo-item.foco { background: var(--chip); }
.modelo-item.ativo { background: var(--chip); }
.modelo-item .tile { width: 44px; height: 44px; border-radius: 11px; background: var(--chip-hover); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--texto-2); letter-spacing: .02em; }
.modelo-item.ativo .tile { color: var(--laranja-texto); }
.modelo-item .n { font-size: 14.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modelo-item .d { font-size: 12.5px; color: var(--texto-3); margin-top: 1px; }
.modelo-item .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; border-radius: 6px; background: var(--chip-hover); color: var(--texto-2); font-size: 11.5px; font-weight: 500; }
.tag svg { width: 11px; height: 11px; }
.selo { display: inline-flex; height: 19px; padding: 0 7px; align-items: center; border-radius: 6px; font-size: 10.5px; font-weight: 800; font-style: italic; letter-spacing: .03em; background: var(--laranja); color: #fff; text-transform: uppercase; }
.modelo-item .check { margin-left: auto; color: var(--laranja-texto); }
.modelo-item .check svg { width: 18px; height: 18px; }
.pop-form { padding: 14px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; width: 360px; max-width: 100%; }

/* ───────── campos de formulário (avançado, modais) ───────── */
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.campo label, .campo .titulo { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.campo .obrig { color: var(--laranja); margin-left: 3px; }
.campo .valor { font-family: var(--mono); font-size: 12px; }
.ajuda { font-size: 12px; color: var(--texto-3); line-height: 1.45; }
input.texto, select.texto, textarea.texto {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--painel-2); outline: 0; transition: border-color .2s, box-shadow .2s;
}
textarea.texto { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
input.texto:focus, select.texto:focus, textarea.texto:focus { border-color: var(--laranja-borda); box-shadow: 0 0 0 4px var(--laranja-suave); }
select.texto { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d887f' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.segmento { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--chip); border-radius: 12px; }
.segmento button { flex: 1 0 auto; min-width: 44px; border: 0; background: none; padding: 7px 10px; border-radius: 9px; color: var(--texto-2); font-size: 13px; font-weight: 500; }
.segmento button:hover { color: var(--texto); }
.segmento button.ativo { background: var(--elevada); color: var(--texto); box-shadow: var(--sombra); }
.deslizante { display: flex; align-items: center; gap: 12px; }
input[type=range] { flex: 1; appearance: none; height: 4px; border-radius: 4px; background: var(--borda-forte); outline: 0; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.deslizante input[type=number] { width: 76px; text-align: center; font-family: var(--mono); font-size: 12.5px; height: 34px; padding: 0 6px; }
.chave-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chave-linha .t { font-size: 13.5px; font-weight: 500; }
.chave-linha .s { font-size: 12px; color: var(--texto-3); }
.interruptor { position: relative; width: 40px; height: 24px; flex: none; }
.interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 999px; background: var(--borda-forte); transition: background .2s; }
.interruptor span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.interruptor input:checked + span { background: var(--laranja); }
.interruptor input:checked + span::after { transform: translateX(16px); }

/* mídia (caixas de envio) */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.slot { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--chip); display: grid; place-items: center; color: var(--texto-3); }
.slot.vazio { border: 1.5px dashed var(--borda-forte); background: none; cursor: pointer; }
.slot.vazio:hover, .arrastando { border-color: var(--laranja) !important; color: var(--laranja-texto); background: var(--laranja-suave) !important; }
.slot img, .slot video { width: 100%; height: 100%; object-fit: cover; }
.slot .dica { font-size: 11px; text-align: center; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slot .dica svg { width: 18px; height: 18px; }
.remover { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.remover svg { width: 12px; height: 12px; }
.slot:hover .remover, .caixa-midia:hover .remover, .ref:hover .remover { opacity: 1; }
.carregando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.giro { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--laranja); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.audio-ico { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: var(--texto-2); padding: 6px; word-break: break-all; text-align: center; }
.audio-ico svg { width: 20px; height: 20px; color: var(--laranja-texto); }
.link-url { font-size: 12px; color: var(--texto-3) !important; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; align-self: flex-start; }
.link-url:hover { color: var(--texto) !important; }

/* ───────── página IMAGEM ───────── */
.pg-imagem { height: 100%; display: flex; flex-direction: column; }
.barra-res { display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; }
.barra-res .filtros { display: flex; gap: 6px; }
.barra-res .dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tamanho { display: flex; align-items: center; gap: 8px; width: 150px; color: var(--texto-3); }
.tamanho svg { width: 14px; height: 14px; flex: none; }
.filtro { height: 32px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--texto-3); font-size: 13px; font-weight: 500; }
.filtro:hover { color: var(--texto); }
.filtro.ativo { background: var(--chip); color: var(--texto); }
.res-rolagem { flex: 1; overflow-y: auto; padding: 0 16px 230px; }
.grade { display: flex; align-items: flex-start; gap: 6px; }
.grade > .gcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.grade > .gcol > .cartao { margin-bottom: 0; }

.composer {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px)); z-index: 10;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch;
  padding: 14px 14px 14px 18px; border-radius: 22px;
  background: color-mix(in srgb, var(--painel) 92%, transparent); border: 1px solid var(--borda-forte);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--sombra-forte);
}
.comp-esq { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.comp-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.ref { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--chip); flex: none; }
.ref img, .ref video { width: 100%; height: 100%; object-fit: cover; }
.composer textarea {
  width: 100%; border: 0; outline: 0; background: none; resize: none; font-size: 15px; line-height: 1.5;
  min-height: 26px; max-height: 180px; padding: 2px 0;
}
.composer textarea::placeholder { color: var(--texto-3); }
.comp-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gerar-grande {
  width: 150px; border: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 10px 30px rgba(255, 71, 0, .35);
  transition: transform .15s, opacity .2s, box-shadow .2s;
}
.gerar-grande small, .gerar-largo small { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; opacity: .95; }
.gerar-grande small svg, .gerar-largo small svg { width: 13px; height: 13px; }
.gerar-grande:hover:not(:disabled), .gerar-largo:hover:not(:disabled) { transform: translateY(-1px); }
.gerar-grande:disabled, .gerar-largo:disabled { background: var(--chip-hover); color: var(--texto-3); box-shadow: none; cursor: not-allowed; }
.gerar-grande .falta { font-size: 11px; font-weight: 500; opacity: .9; text-align: center; padding: 0 8px; line-height: 1.3; }

/* cartões de resultado */
.cartao { break-inside: avoid; margin-bottom: 6px; position: relative; border-radius: 6px; overflow: hidden; background: var(--painel); cursor: zoom-in; animation: entrar .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: scale(.985); } }
.cartao .midia { position: relative; background: var(--palco); }
.cartao .midia img, .cartao .midia video { width: 100%; height: auto; }
.cartao .midia.varias { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cartao .tag-tipo { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 500; backdrop-filter: blur(8px); }
.cartao .tag-tipo svg { width: 11px; height: 11px; }
.cartao .sobre { position: absolute; inset: auto 0 0 0; padding: 40px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; opacity: 0; transition: opacity .2s; display: flex; align-items: flex-end; gap: 8px; }
.cartao:hover .sobre { opacity: 1; }
.cartao .sobre .txt { flex: 1; min-width: 0; }
.cartao .sobre p { margin: 0; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao .sobre .autor { font-size: 11px; opacity: .7; margin-top: 3px; }
.cartao .sobre .acoes { display: flex; gap: 4px; flex: none; }
.cartao .sobre .acoes button, .cartao .sobre .acoes a { width: 30px; height: 30px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); }
.cartao .sobre .acoes button:hover, .cartao .sobre .acoes a:hover { background: var(--laranja); }
.cartao .sobre .acoes svg { width: 15px; height: 15px; }
.cartao.processando, .cartao.falhou { cursor: default; }
.cartao.processando .midia { aspect-ratio: var(--ar, 1); display: grid; place-items: center; overflow: hidden; background: linear-gradient(110deg, var(--painel) 30%, var(--painel-2) 50%, var(--painel) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; }
.cartao.processando .midia::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 71, 0, .3), transparent); filter: blur(10px); animation: pulsar 2.4s ease-in-out infinite; }
@keyframes brilhar { to { background-position: -150% 0; } }
@keyframes pulsar { 50% { transform: scale(1.25); opacity: .6; } }
.estado { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px; }
.estado .t { font-weight: 600; font-size: 13px; }
.estado .s { font-size: 11.5px; color: var(--texto-3); font-family: var(--mono); }
.estado > svg { width: 28px; height: 28px; color: var(--texto-3); }
.estado .cancelar { margin-top: 2px; height: 28px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--chip); font-size: 12px; color: var(--texto-2); }
.estado .cancelar:hover { color: var(--erro); }
.cartao.falhou .midia { aspect-ratio: var(--ar, 1); display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--painel) 0 10px, var(--painel-2) 10px 20px); }
.cartao.falhou .estado > svg, .cartao.falhou .estado .t { color: var(--erro); }
.cartao.falhou .estado .s { font-family: var(--sans); max-width: 240px; }
.cartao.falhou .apagar { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--chip); display: grid; place-items: center; color: var(--texto-2); }
.cartao.falhou .apagar svg { width: 13px; height: 13px; }

.vazio-res { min-height: 50vh; display: grid; place-items: center; text-align: center; color: var(--texto-3); padding: 24px; }
.vazio-res .grande { font-family: var(--serif); font-style: italic; font-size: 46px; color: var(--texto); line-height: 1.05; margin-bottom: 10px; letter-spacing: -.5px; }
.vazio-res .grande em { font-family: var(--pincel); font-style: normal; color: var(--laranja); font-size: 40px; }
.vazio-res p { margin: 0 auto; max-width: 400px; }

/* ───────── página VÍDEO ───────── */
.pg-video { height: 100%; display: grid; grid-template-columns: 330px 1fr; gap: 10px; padding: 4px 16px 16px; }
.vpainel { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.vabas { display: flex; gap: 18px; padding: 14px 16px 0; border-bottom: 1px solid var(--borda); flex: none; }
.vabas button { border: 0; background: none; padding: 0 0 12px; color: var(--texto-3); font-size: 14.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vabas button:hover { color: var(--texto); }
.vabas button.ativo { color: var(--texto); border-bottom-color: var(--texto); }
.vrolagem { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vrodape { padding: 10px; flex: none; }
.gerar-largo {
  width: 100%; height: 50px; border: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 10px 30px rgba(255, 71, 0, .3);
  transition: transform .15s;
}
.falta-txt { font-size: 12px; color: var(--texto-3); text-align: center; margin-bottom: 8px; }

.capa-modelo { position: relative; height: 130px; border-radius: 14px; overflow: hidden; flex: none; background: #111; isolation: isolate; }
.capa-modelo .fundo-capa { position: absolute; inset: 0; z-index: -2; }
.capa-modelo .fundo-capa img, .capa-modelo .fundo-capa video { width: 100%; height: 100%; object-fit: cover; }
.capa-modelo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .75)); }
.capa-modelo .nome { position: absolute; left: 12px; bottom: 26px; right: 12px; font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: 24px; line-height: 1; color: var(--laranja); text-transform: uppercase; letter-spacing: .01em; }
.capa-modelo .sub { position: absolute; left: 12px; bottom: 9px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.capa-modelo .trocar { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 9px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; backdrop-filter: blur(8px); }
.capa-modelo .trocar:hover { background: var(--laranja); }
.capa-modelo .trocar svg { width: 13px; height: 13px; }

.quadros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.caixa-midia {
  position: relative; min-height: 130px; border-radius: 14px; border: 1.5px dashed var(--borda-forte); background: var(--painel-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 14px 10px; cursor: pointer;
  color: var(--texto-2); transition: border-color .15s, background .15s; overflow: hidden;
}
.caixa-midia:hover { border-color: var(--laranja-borda); }
.caixa-midia .circ { width: 40px; height: 40px; border-radius: 50%; background: var(--chip-hover); display: grid; place-items: center; color: var(--texto); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.caixa-midia .circ svg { width: 17px; height: 17px; }
.caixa-midia .t { font-weight: 600; font-size: 13.5px; color: var(--texto); line-height: 1.3; }
.caixa-midia .s { font-size: 12px; color: var(--texto-3); }
.caixa-midia .opc { position: absolute; top: 7px; right: 7px; font-size: 10.5px; color: var(--texto-3); background: var(--chip); padding: 2px 6px; border-radius: 6px; }
.caixa-midia.cheia { border-style: solid; border-color: var(--borda); padding: 6px; cursor: default; }
.caixa-midia.cheia > img, .caixa-midia.cheia > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caixa-midia .mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; width: 100%; }
.caixa-midia .mini .ref { width: auto; height: auto; aspect-ratio: 1; }
.caixa-midia .mais { aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--borda-forte); display: grid; place-items: center; color: var(--texto-3); background: none; }
.caixa-midia .mais svg { width: 16px; height: 16px; }
.caixa-midia.multi { cursor: default; justify-content: flex-start; align-items: stretch; text-align: left; }
.caixa-midia.multi .cab { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); }

.prompt-v { background: var(--painel-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.prompt-v textarea { border: 0; outline: 0; background: none; resize: none; min-height: 110px; max-height: 300px; line-height: 1.5; font-size: 14px; width: 100%; }
.prompt-v textarea::placeholder { color: var(--texto-3); }
.prompt-v .chips-in { display: flex; gap: 6px; flex-wrap: wrap; }
.prompt-v .chip { height: 30px; font-size: 12.5px; padding: 0 9px; background: var(--chip); }
.linha-v { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--painel-2); border-radius: 14px; padding: 12px 14px; }
.linha-v .t { font-size: 14px; font-weight: 500; }
.ajuste-v {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: var(--painel-2);
  border-radius: 14px; padding: 10px 14px; transition: background .15s; min-width: 0;
}
.ajuste-v:hover { background: var(--chip); }
.ajuste-v > div { min-width: 0; }
.ajuste-v .r { font-size: 12px; color: var(--texto-3); }
.ajuste-v .v { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajuste-v .v svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }
.ajuste-v > svg { margin-left: auto; width: 16px; height: 16px; color: var(--texto-3); flex: none; }
.ajustes-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ajustes-grade .ajuste-v { padding: 10px 12px; }
.ajustes-grade .ajuste-v .v { font-size: 14px; }
details.avancado { background: var(--painel-2); border-radius: 14px; }
details.avancado summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; color: var(--texto-2); }
details.avancado summary::-webkit-details-marker { display: none; }
details.avancado summary svg { width: 15px; height: 15px; transition: transform .2s; }
details.avancado[open] summary svg { transform: rotate(180deg); }
details.avancado .conteudo { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 16px; }
.tomadas { display: flex; flex-direction: column; gap: 8px; }
.tomada { display: grid; grid-template-columns: 1fr 62px 28px; gap: 6px; align-items: start; }
.tomada textarea { min-height: 52px; }
.tomada .x { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--chip); color: var(--texto-2); display: grid; place-items: center; margin-top: 6px; }
.tomada .x svg { width: 13px; height: 13px; }
.botao-mais { height: 34px; padding: 0 12px; border: 1px dashed var(--borda-forte); border-radius: 10px; background: none; color: var(--texto-2); font-size: 12.5px; }
.botao-mais:hover { color: var(--laranja-texto); border-color: var(--laranja); }
.cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cor { position: relative; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borda-forte); overflow: hidden; }
.cor input { position: absolute; inset: -6px; width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer; }
.cor .x { position: absolute; top: 0; right: 0; width: 15px; height: 15px; border: 0; background: var(--texto); color: var(--fundo); font-size: 10px; line-height: 15px; display: none; }
.cor:hover .x { display: block; }

.vpalco { display: flex; flex-direction: column; min-height: 0; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.vbarra { display: flex; align-items: center; gap: 8px; padding: 12px 14px; flex: none; flex-wrap: wrap; }
.vbarra .aba { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--chip); font-size: 13.5px; font-weight: 500; }
.vbarra .aba svg { width: 15px; height: 15px; }
.vbarra .dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.alternar { display: flex; gap: 2px; }
.alternar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 0; background: none; color: var(--texto-3); font-size: 13px; font-weight: 500; }
.alternar button svg { width: 15px; height: 15px; }
.alternar button.ativo { background: var(--chip); color: var(--texto); }
.vconteudo { flex: 1; overflow-y: auto; padding: 0 14px 14px; }
.lista-v { display: flex; flex-direction: column; gap: 12px; }
.item-v { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 10px; }
.item-v .palco-v { position: relative; background: var(--palco); border-radius: 14px; overflow: hidden; height: var(--alt, 460px); display: grid; place-items: center; }
/* preso ao palco: a altura em % não resolvia dentro da grade e o vídeo estourava (cortado embaixo) */
.item-v .palco-v video, .item-v .palco-v img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: contain; cursor: zoom-in; }
.item-v .palco-v.capa-v { cursor: pointer; }
.item-v .palco-v.capa-v img { cursor: pointer; }
.item-v .palco-v .play-v { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; pointer-events: none; transition: transform .15s; }
.item-v .palco-v .play-v svg { width: 24px; height: 24px; margin-left: 3px; }
.item-v .palco-v.capa-v:hover .play-v { transform: scale(1.08); }
.item-v .palco-v .estado { position: absolute; inset: 0; justify-content: center; }
.item-v .palco-v.processando { background: linear-gradient(110deg, var(--palco) 30%, var(--painel-2) 50%, var(--palco) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; }
.item-v .palco-v.falhou .estado > svg, .item-v .palco-v.falhou .estado .t { color: var(--erro); }
.item-v .palco-v.falhou .estado .s { font-family: var(--sans); }
.info-v { background: var(--painel-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.info-v .modelo-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; background: var(--chip); font-size: 12px; font-weight: 600; }
.info-v .entradas { display: flex; gap: 6px; flex-wrap: wrap; }
.info-v .entradas .ref { width: 42px; height: 42px; border-radius: 8px; }
.info-v .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.info-v .tags .tag { background: var(--chip); height: 24px; padding: 0 8px; font-size: 12px; }
.info-v .prompt { font-size: 12.5px; color: var(--texto-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.info-v .autor { font-size: 11.5px; color: var(--texto-3); }
.info-v .rod { margin-top: auto; display: flex; align-items: center; gap: 4px; }
.info-v .rod button, .info-v .rod a { height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--texto-2); display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; text-decoration: none; }
.info-v .rod button:hover, .info-v .rod a:hover { background: var(--chip); color: var(--texto); }
.info-v .rod svg { width: 15px; height: 15px; }
.info-v .rod .esp { flex: 1; }

/* ───────── modais / visor ───────── */
.fundo-modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 6, .6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; animation: aparecer .2s ease both; }
@keyframes aparecer { from { opacity: 0; } }
.modal { width: min(980px, 100%); max-height: min(800px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--painel); border: 1px solid var(--borda-forte); border-radius: var(--raio-g); box-shadow: var(--sombra-forte); animation: subir .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal.pequeno { width: min(480px, 100%); }
.modal-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.modal-topo h3 { margin: 0; flex: 1; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.1; }
.modal-corpo { overflow-y: auto; padding: 18px; }
.icone-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--chip); color: var(--texto-2); flex: none; }
.icone-btn:hover { color: var(--texto); background: var(--chip-hover); }
.icone-btn svg { width: 16px; height: 16px; }
.acoes-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--borda); }
.botao { height: 40px; padding: 0 14px; border-radius: 11px; border: 0; background: var(--chip); font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; color: var(--texto) !important; transition: background .15s; }
.botao:hover { background: var(--chip-hover); }
.botao svg { width: 15px; height: 15px; }
.botao.primario { background: var(--laranja); color: #fff !important; }
.botao.primario:hover { background: var(--laranja-2); }
.botao.perigo:hover { color: var(--erro) !important; }
.botao.cheio { grid-column: 1 / -1; }
.botao:disabled { opacity: .5; cursor: not-allowed; }
/* altura fixa e linha limitada: vídeo vertical não estoura a janela e o lado rola sozinho */
.visor { width: min(1280px, 100%); height: min(900px, calc(100vh - 48px)); max-height: calc(100vh - 48px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); }
.visor .palco { background: #050506; display: grid; place-items: center; min-height: 0; position: relative; }
.visor .palco > img, .visor .palco > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto !important; object-fit: contain; }
.visor .navega { z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.visor .navega:hover { background: var(--laranja); }
.visor .navega svg { width: 18px; height: 18px; }
.visor .navega.esq { left: 14px; }
.visor .navega.dir { right: 14px; }
.visor .miniaturas { z-index: 2; position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.visor .miniaturas button { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #000; }
.visor .miniaturas button.ativo { border-color: var(--laranja); }
.visor .miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.visor .lado { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--borda); }
.visor .lado .modal-corpo { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.prompt-txt { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.ficha { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px 14px; font-size: 12.5px; margin: 0; }
.ficha dt { color: var(--texto-3); }
.ficha dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }

/* ───────── páginas de texto ───────── */
.pagina { height: 100%; overflow-y: auto; }
.pagina-miolo { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.cabeca h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.8px; }
.cabeca p { margin: 8px 0 0; color: var(--texto-2); max-width: 580px; }
.blocos { display: grid; gap: 14px; }
.bloco { border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--painel); padding: 22px; }
.bloco h3 { margin: 0 0 4px; font-size: 16px; }
.bloco > p { margin: 0 0 16px; color: var(--texto-2); font-size: 13.5px; }
.linha-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.aviso { font-size: 12.5px; color: var(--texto-2); background: var(--laranja-suave); border: 1px solid var(--laranja-borda); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.aviso svg { width: 16px; height: 16px; color: var(--laranja-texto); flex: none; margin-top: 2px; }
.estado-chave { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.estado-chave .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--erro); }
.estado-chave.ok .ponto { background: var(--ok); }
code.cam, pre.cmd { font-family: var(--mono); font-size: 12px; background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; word-break: break-all; }
code.cam { padding: 2px 7px; }
pre.cmd { margin: 0; padding: 12px 14px; white-space: pre-wrap; line-height: 1.6; position: relative; }
.passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; color: var(--texto-2); font-size: 13.5px; }
.passos li::marker { color: var(--laranja-texto); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-3); padding: 0 10px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.papel { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--chip); color: var(--texto-2); }
.papel.admin { background: var(--laranja-suave); color: var(--laranja-texto); }
.inativo { opacity: .5; }

.personagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.personagem { border-radius: var(--raio); overflow: hidden; background: var(--painel); border: 1px solid var(--borda); }
.personagem .capa { aspect-ratio: 4 / 5; background: var(--palco); position: relative; }
.personagem .capa img { width: 100%; height: 100%; object-fit: cover; }
.personagem .capa .st { position: absolute; left: 10px; bottom: 10px; }
.personagem .info { padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.personagem .info .n { font-weight: 600; }
.personagem .info .v { font-size: 11.5px; color: var(--texto-3); }
.etiqueta { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, .6); color: #fff; }
.etiqueta.ok { background: rgba(22, 163, 74, .9); }
.etiqueta.erro { background: rgba(220, 38, 38, .9); }

/* login */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 20% -10%, rgba(255, 71, 0, .18), transparent 60%), var(--fundo); }
.cartao-login { width: min(400px, 100%); background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 24px; padding: 30px 26px 26px; box-shadow: var(--sombra-forte); display: flex; flex-direction: column; gap: 14px; }
.cartao-login .marca { justify-content: center; margin-bottom: 4px; }
.cartao-login .marca .hw { font-size: 40px; }
.cartao-login .marca .studio { font-size: 31px; }
.cartao-login h2 { margin: 0; text-align: center; font-weight: 500; font-size: 15px; color: var(--texto-2); }
.cartao-login .botao { height: 46px; font-size: 15px; }
.cartao-login .erro-msg { color: var(--erro); font-size: 13px; text-align: center; min-height: 18px; }

.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 10px 14px; border-radius: 12px; background: var(--texto); color: var(--fundo); font-size: 13px; box-shadow: var(--sombra-forte); animation: subir .25s ease both; }
.toast.erro { background: var(--erro); color: #fff; }
.toast svg { width: 16px; height: 16px; flex: none; }

/* ───────── responsivo ───────── */
@media (max-width: 1100px) {
  .item-v { grid-template-columns: 1fr; }
  .visor { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; overflow-y: auto; }
  .visor .palco { height: 62vh; }
  .visor .lado .modal-corpo { overflow: visible; }
  .visor .lado { border-left: 0; border-top: 1px solid var(--borda); }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto 1fr; }
  .topo { flex-wrap: wrap; padding: 10px 16px; gap: 10px 16px; }
  .nav { order: 3; width: 100%; }
  .vista, .pagina, .res-rolagem, .vconteudo { overflow: visible; height: auto; }
  .pg-imagem { height: auto; }
  .res-rolagem { padding: 0 16px 280px; }
  .grade { columns: 2 140px; }
  .composer { position: fixed; bottom: 10px; grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .gerar-grande { width: 100%; height: 52px; flex-direction: row; }
  .tamanho { display: none; }
  .pg-video { grid-template-columns: 1fr; height: auto; padding: 4px 16px 16px; }
  .vrolagem { overflow: visible; }
  .vrodape { position: sticky; bottom: 0; background: var(--painel); }
  .item-v .palco-v { height: 320px; }
  .linha-form { grid-template-columns: 1fr; }
  .cabeca h1 { font-size: 36px; }
  .pagina-miolo { padding: 20px 16px 48px; }
  .tabela { font-size: 12.5px; }
  .tabela .some { display: none; }
  .fundo-modal { padding: 0; align-items: end; }
  .modal { max-height: 92vh; border-radius: var(--raio-g) var(--raio-g) 0 0; }
}

/* popover: a rolagem fica dentro, o cabeçalho de busca fica fixo */
.popover > .pop-rolagem, .popover > .pop-form { flex: 1 1 auto; min-height: 0; }
.pop-coluna { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pop-coluna > .pop-rolagem { flex: 1 1 auto; min-height: 0; }
@media (max-width: 860px) {
  .barra-res { flex-wrap: wrap; }
  .barra-res .filtros { flex-wrap: wrap; }
  .barra-res .filtro { white-space: nowrap; }
  .barra-res .dir { width: 100%; margin-left: 0; }
  .barra-res .dir input.texto { width: 100% !important; max-width: none !important; }
}
.cartao-login .erro-msg { font-size: 14px; font-weight: 600; background: rgba(220, 38, 38, .12); border-radius: 10px; padding: 0; }
.cartao-login .erro-msg:not(:empty) { padding: 10px 12px; }

/* estilos do Genjutsu (galeria no popover) */
.estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 4px 6px 8px; }
.estilo { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--chip); cursor: pointer; }
.estilo img, .estilo video { width: 100%; height: 100%; object-fit: cover; }
.estilo .sem { display: grid; place-items: center; height: 100%; font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--texto-3); }
.estilo .n { position: absolute; inset: auto 0 0 0; padding: 18px 8px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: 12px; font-weight: 600; text-align: left; }
.estilo:hover { border-color: var(--borda-forte); }
.estilo.ativo { border-color: var(--laranja); }

/* provedores extras */
.prov-linha { border-top: 1px solid var(--borda); padding-top: 16px; margin-top: 16px; }
.titulo-mini { font-size: 12px; font-weight: 600; color: var(--texto-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.lista-prov { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow-y: auto; }
.item-prov { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--painel-2); }
.item-prov img, .item-prov .sem-capa { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; background: var(--chip); }
.item-prov .sem-capa { display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: var(--texto-3); }
.item-prov .n { font-weight: 600; font-size: 13.5px; }
.item-prov .resumo-prov { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.item-prov .botao { flex: none; height: 34px; }
.tag-prov { background: var(--laranja-suave) !important; color: var(--laranja-texto) !important; }

/* ───────── página WORKFLOW (tela de blocos) ───────── */
.wf { height: 100%; display: grid; grid-template-rows: auto 1fr; position: relative; }
.wf-topo { display: flex; align-items: center; gap: 10px; padding: 4px 16px 10px; }
.wf-nome { border: 0; background: none; font-family: var(--serif); font-style: italic; font-size: 26px; outline: 0; min-width: 120px; width: 380px; max-width: 40vw; color: var(--texto); }
.wf-nome:focus { border-bottom: 1px solid var(--borda-forte); }
.wf-topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wf-rodar { width: auto; height: 38px; padding: 0 18px; font-size: 14.5px; }
.wf-rodar:disabled { opacity: .6; }
.wf-ferramentas { position: absolute; left: 16px; top: 70px; z-index: 5; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); }
.wf-ferramentas button { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--texto-2); text-align: left; }
.wf-ferramentas button:hover { background: var(--chip); color: var(--texto); }
.wf-ferramentas button svg { width: 16px; height: 16px; }
.wf-tela { position: relative; overflow: hidden; margin: 0 16px 16px; border-radius: var(--raio-g); border: 1px solid var(--borda);
  background-color: var(--fundo); background-image: radial-gradient(circle, var(--borda-forte) 1px, transparent 1.2px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.wf-tela.arrastando-tela { cursor: grabbing; }
.wf-camada { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wf-fios { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.wf-fio { fill: none; stroke-width: 2.4; pointer-events: none; opacity: .9; }
.wf-fio.temp { stroke-dasharray: 6 5; }
.wf-fio-toque { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.wf-fio-toque:hover { stroke: rgba(220, 38, 38, .35); }
.wf-no { position: absolute; width: 290px; background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 16px; box-shadow: var(--sombra); cursor: default; }
.wf-no.sel { border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-suave), var(--sombra); }
.wf-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borda); cursor: grab; user-select: none; }
.wf-cab:active { cursor: grabbing; }
.wf-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--chip); color: var(--laranja-texto); }
.wf-ico svg { width: 14px; height: 14px; }
.wf-titulo { font-weight: 600; font-size: 13.5px; flex: 1; }
.wf-x { width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); display: grid; place-items: center; }
.wf-x:hover { background: var(--chip); color: var(--erro); }
.wf-x svg { width: 13px; height: 13px; }
.wf-corpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.wf-porta { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--painel); border: 2.5px solid var(--cor, #999); z-index: 2; }
.wf-porta.saida { right: -8px; top: 16px; cursor: crosshair; }
.wf-porta.saida:hover { transform: scale(1.25); background: var(--cor); }
.wf-entradas { display: flex; flex-direction: column; gap: 6px; margin: 0 -12px; padding: 0 12px 4px; }
.wf-entrada-linha { position: relative; display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 12.5px; color: var(--texto-2); }
.wf-entrada-linha .wf-porta { position: absolute; left: -20px; top: 3px; }
.wf-porta.entrada.ligada { background: var(--cor); }
.wf-texto { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--borda); border-radius: 10px; background: var(--painel-2); padding: 9px 10px; font-size: 13px; line-height: 1.45; outline: 0; }
.wf-texto.pequeno { min-height: 54px; }
.wf-texto:focus { border-color: var(--laranja-borda); }
.wf-midia { position: relative; min-height: 120px; border-radius: 12px; overflow: hidden; background: var(--painel-2); display: grid; place-items: center; cursor: pointer; }
.wf-midia.vazia { border: 1.5px dashed var(--borda-forte); }
.wf-midia img, .wf-midia video { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.dica-wf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-3); }
.dica-wf svg { width: 16px; height: 16px; }
.wf-modelo { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 10px; background: var(--chip); padding: 7px 9px; text-align: left; font-size: 12.5px; font-weight: 500; }
.wf-modelo:hover { background: var(--chip-hover); }
.wf-modelo .tile { width: 26px; height: 26px; border-radius: 7px; background: var(--chip-hover); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 10.5px; color: var(--laranja-texto); flex: none; }
.wf-modelo .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-modelo svg { width: 13px; height: 13px; color: var(--texto-3); }
.wf-params { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-sel { appearance: none; border: 0; border-radius: 8px; background: var(--chip); padding: 5px 8px; font-size: 12px; color: var(--texto); max-width: 100%; cursor: pointer; }
.wf-resultado { position: relative; border-radius: 12px; overflow: hidden; background: var(--palco); min-height: 80px; display: grid; place-items: center; }
.wf-resultado img, .wf-resultado video { width: 100%; max-height: 300px; object-fit: contain; display: block; cursor: zoom-in; }
.wf-resultado.rodando { background: linear-gradient(110deg, var(--palco) 30%, var(--painel-2) 50%, var(--palco) 70%); background-size: 250% 100%; animation: brilhar 1.8s linear infinite; min-height: 140px; }
.wf-resultado.falhou .estado > svg { color: var(--erro); }
.wf-gerar { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 0; border-radius: 11px; background: linear-gradient(180deg, var(--laranja-2), var(--laranja)); color: #fff; font-weight: 600; font-size: 13.5px; }
.wf-gerar svg { width: 13px; height: 13px; }
.wf-gerar:disabled { background: var(--chip-hover); color: var(--texto-3); cursor: default; }
@media (max-width: 860px) {
  .wf { height: calc(100vh - 110px); }
  .wf-ferramentas { flex-direction: row; flex-wrap: wrap; left: 16px; right: 16px; top: auto; bottom: 26px; }
  .wf-ferramentas button span:last-child { display: none; }
  .wf-nome { width: 160px; font-size: 20px; }
}

/* ───────── página MCP ───────── */
.mcp { max-width: 980px; text-align: left; }
.mcp-abas { display: flex; justify-content: center; gap: 4px; padding: 4px; margin: 4px auto 26px; width: fit-content; max-width: 100%; flex-wrap: wrap; background: var(--chip); border-radius: 999px; }
.mcp-abas button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.mcp-abas button.ativo { background: var(--texto); color: var(--fundo); }
.mcp-titulo { text-align: center; margin: 0 auto 10px; font-family: var(--display); font-weight: 800; font-stretch: 80%; text-transform: uppercase; font-size: clamp(30px, 5vw, 52px); line-height: 1.02; letter-spacing: -.01em; max-width: 860px; }
.mcp-titulo em { font-style: normal; color: var(--laranja-texto); }
.mcp-marca { display: inline-flex; align-items: baseline; gap: 6px; text-transform: none; vertical-align: baseline; }
.mcp-marca .hw { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05em; }
.mcp-marca .studio { font-family: var(--pincel); font-weight: 400; color: var(--laranja); font-size: .85em; transform: rotate(-4deg); display: inline-block; }
.mcp-sub { text-align: center; color: var(--texto-2); margin: 0 auto 26px; max-width: 620px; }
.mcp-token { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--painel); border: 1px solid var(--borda); margin-bottom: 14px; }
.mcp-caixa { border-radius: 16px; background: var(--painel); border: 1px solid var(--borda-forte); margin-bottom: 12px; overflow: hidden; }
.mcp-caixa-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); font-size: 13px; font-weight: 600; }
.mcp-copiar { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--laranja); color: #fff; font-size: 12.5px; font-weight: 600; flex: none; }
.mcp-copiar svg { width: 14px; height: 14px; }
.mcp-caixa pre { margin: 0; padding: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; color: var(--texto-2); max-height: 340px; overflow: auto; }
.mcp-sec { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; margin: 34px 0 14px; }
.mcp-exemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mcp-exemplo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: var(--painel); position: relative; }
.mcp-exemplo:hover { border-color: var(--laranja-borda); }
.mcp-exemplo .txt { font-size: 13.5px; line-height: 1.5; color: var(--texto); }
.mcp-exemplo .cp { position: absolute; top: 12px; right: 12px; color: var(--texto-3); }
.mcp-exemplo .cp svg { width: 15px; height: 15px; }
.mcp-ferramentas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mcp-ferr { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; background: var(--painel-2); font-size: 12.5px; color: var(--texto-2); }
.mcp-ferr code { font-family: var(--mono); font-size: 12.5px; color: var(--laranja-texto); }
.tag-sem { background: rgba(220, 38, 38, .14) !important; color: #f87171 !important; }

/* ───────── pastas ───────── */
.pg-biblioteca { height: 100%; display: grid; grid-template-columns: 240px 1fr; }
.pg-biblioteca .pg-imagem { min-width: 0; }
.lado-pastas { border-right: 1px solid var(--borda); padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pasta-linha { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; font-size: 13.5px; color: var(--texto-2); cursor: pointer; border: 1.5px dashed transparent; }
.pasta-linha:hover { background: var(--chip); color: var(--texto); }
.pasta-linha.ativo { background: var(--chip); color: var(--texto); font-weight: 600; }
.pasta-linha.alvo { border-color: var(--laranja); background: var(--laranja-suave); }
.pasta-linha .ico { display: grid; color: var(--texto-3); }
.pasta-linha.ativo .ico { color: var(--laranja-texto); }
.pasta-linha .ico svg { width: 15px; height: 15px; }
.pasta-linha .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasta-linha .c { font-size: 11.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pasta-linha .acoes-pasta { display: none; gap: 2px; }
.pasta-linha:hover .acoes-pasta { display: flex; }
.pasta-linha:hover .c { display: none; }
.acoes-pasta button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); display: grid; place-items: center; }
.acoes-pasta button:hover { background: var(--chip-hover); color: var(--texto); }
.acoes-pasta svg { width: 13px; height: 13px; }
.grade.selecionando .cartao { cursor: pointer; }
.grade.selecionando .cartao::after { content: ""; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .35); z-index: 3; }
.grade.selecionando .cartao.selecionado { outline: 3px solid var(--laranja); outline-offset: -3px; }
.grade.selecionando .cartao.selecionado::after { background: var(--laranja) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--laranja); }
.barra-selecao { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 16px; background: var(--elevada); border: 1px solid var(--borda-forte); box-shadow: var(--sombra-forte); font-size: 13.5px; font-weight: 500; }
@media (max-width: 860px) {
  .pg-biblioteca { grid-template-columns: 1fr; height: auto; }
  .lado-pastas { border-right: 0; border-bottom: 1px solid var(--borda); flex-direction: row; flex-wrap: wrap; }
  .lado-pastas .titulo-mini, .lado-pastas .ajuda { width: 100%; }
}
.tam-livre { display: flex; align-items: center; gap: 6px; padding: 4px 10px 8px; }
.tam-livre input { height: 36px; width: 96px; text-align: center; }
.tam-livre .botao { height: 36px; }
.tam-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.tam-atalhos .tag { border: 0; cursor: pointer; height: 26px; }
.tam-atalhos .tag:hover { background: var(--laranja-suave); color: var(--laranja-texto); }

/* escolher do estúdio */
.btn-estudio { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--laranja-texto); font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.btn-estudio:hover { background: var(--laranja-suave); }
.btn-estudio svg { width: 13px; height: 13px; }
.caixa-midia .btn-estudio { margin-top: 2px; }
.estudio-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.estudio-item { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--palco); cursor: pointer; }
.estudio-item img, .estudio-item video { width: 100%; height: 100%; object-fit: cover; }
.estudio-item:hover { border-color: var(--borda-forte); }
.estudio-item.sel { border-color: var(--laranja); }
.estudio-rot { position: absolute; inset: auto 0 0 0; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estudio-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); color: #fff; display: grid; place-items: center; }
.estudio-check svg { width: 13px; height: 13px; }
.catalogo-barra { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.catalogo-barra .busca { position: relative; flex: 1; min-width: 200px; }
.catalogo-barra .busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.catalogo-barra .busca input { padding-left: 36px; height: 38px; }

/* ───────── lipsync: fonte do áudio (arquivo × voz + texto) ───────── */
.fonte-audio button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.fonte-audio button svg { width: 15px; height: 15px; }
.tts-bloco { display: grid; gap: 8px; }
.tts-estado { display: flex; align-items: center; gap: 10px; padding: 0 4px; flex-wrap: wrap; }
.tts-estado .ajuda { flex: 1; min-width: 160px; }
.tts-estado audio { flex: 1; min-width: 180px; height: 36px; }

/* ═════════════════════════ ACABAMENTO PREMIUM ═════════════════════════
   Mesma composição; muda a pele: luz laranja ambiente, grão, vidro, bordas em degradê, marca assinada. */
:root {
  --laranja-3: #ff9a5c;
  --brilho: rgba(255, 255, 255, .06);
  --aresta: linear-gradient(180deg, rgba(20, 18, 15, .10), rgba(20, 18, 15, .04) 45%, rgba(255, 71, 0, .16));
  --grao-op: .025;
  --vidro: rgba(255, 255, 255, .72);
  --gerar: linear-gradient(135deg, #ff8a3d 0%, #ff5410 45%, #e63b00 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #060607; --painel: #101012; --painel-2: #16161a; --chip: #1c1c21; --chip-hover: #26262c; --elevada: #18181c;
    --brilho: rgba(255, 255, 255, .05);
    --aresta: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 40%, rgba(255, 71, 0, .22));
    --grao-op: .045; --vidro: rgba(10, 10, 12, .62); --sombra-composer: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);
  }
}
:root[data-theme="dark"] {
  --fundo: #060607; --painel: #101012; --painel-2: #16161a; --chip: #1c1c21; --chip-hover: #26262c; --elevada: #18181c;
  --brilho: rgba(255, 255, 255, .05);
  --aresta: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 40%, rgba(255, 71, 0, .22));
  --grao-op: .045; --vidro: rgba(10, 10, 12, .62); --sombra-composer: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .2);
}

/* fundo: luz ambiente + grão de filme */
body {
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(255, 71, 0, .13), transparent 62%),
    radial-gradient(900px 600px at 105% 110%, rgba(255, 71, 0, .07), transparent 60%),
    var(--fundo);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: var(--grao-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
::selection { background: rgba(255, 71, 0, .85); }

/* marca assinada */
.marca { align-items: flex-end; gap: 7px; padding-bottom: 3px; }
.marca .hw { font-size: 27px; letter-spacing: -.6px; }
.studio-sel { position: relative; display: inline-block; transform: rotate(-5deg) translateY(-1px); }
.marca .studio { display: block; transform: none; font-size: 19px; letter-spacing: .02em; text-shadow: 0 0 22px rgba(255, 71, 0, .45); }
.marca .pincel { position: absolute; left: -3px; right: -6px; bottom: -8px; height: 8px; color: var(--laranja); opacity: .85; display: block; }
.marca .pincel svg { width: 100%; height: 100%; display: block; }
.marca:hover .studio { text-shadow: 0 0 28px rgba(255, 71, 0, .7); }

/* topo em vidro, aba ativa em pílula */
.app { grid-template-rows: 60px 1fr; }
.topo { gap: 26px; padding: 0 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--fundo) 70%, transparent), transparent); }
.topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 71, 0, .35) 18%, var(--borda-forte) 45%, transparent); }
.nav { gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--painel) 70%, transparent); box-shadow: inset 0 0 0 1px var(--borda); }
.nav a { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; color: var(--texto-2); transition: color .15s, background .2s, box-shadow .2s; }
.nav a:hover { color: var(--texto); background: var(--brilho); text-decoration: none; }
.nav a.ativo { color: #fff; background: linear-gradient(180deg, rgba(255, 106, 43, .95), rgba(230, 59, 0, .95)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 18px rgba(255, 71, 0, .35); }
.avatar { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px rgba(255, 71, 0, .55), 0 6px 18px rgba(255, 71, 0, .3); }
.pilula { background: color-mix(in srgb, var(--painel) 80%, transparent); box-shadow: inset 0 0 0 1px var(--borda); }
.pilula .ponto { box-shadow: 0 0 8px currentColor; color: var(--ok); }

/* superfícies: borda em degradê + luz no topo */
.vpainel, .composer, .modal, .popover, .cartao-login, .wf-no, .mcp-caixa {
  border: 1px solid transparent;
  background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box;
}
.popover { background: linear-gradient(var(--elevada), var(--elevada)) padding-box, var(--aresta) border-box; }
.composer {
  background: linear-gradient(color-mix(in srgb, var(--painel) 88%, transparent), color-mix(in srgb, var(--painel) 88%, transparent)) padding-box, var(--aresta) border-box;
  box-shadow: var(--sombra-composer, var(--sombra-forte)), inset 0 1px 0 var(--brilho);
}
.vpainel { box-shadow: inset 0 1px 0 var(--brilho), 0 20px 50px rgba(0, 0, 0, .25); }
.wf-no.sel { border-color: transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, linear-gradient(180deg, var(--laranja-3), var(--laranja)) border-box; }

/* chips, ajustes e caixas com relevo sutil */
.chip, .ajuste-v, .filtro.ativo, .segmento, .icone-btn, .botao:not(.primario) { box-shadow: inset 0 1px 0 var(--brilho), inset 0 0 0 1px var(--borda); }
.chip:hover, .ajuste-v:hover { box-shadow: inset 0 1px 0 var(--brilho), inset 0 0 0 1px var(--borda-forte); }
.chip.ligado { box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .45), 0 0 16px rgba(255, 71, 0, .12); }
.segmento button.ativo { background: linear-gradient(180deg, var(--chip-hover), var(--elevada)); box-shadow: inset 0 1px 0 var(--brilho), 0 2px 8px rgba(0, 0, 0, .25); }
.caixa-midia { border-color: color-mix(in srgb, var(--borda-forte) 80%, rgba(255, 71, 0, .25)); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .05), transparent 60%), var(--painel-2); }
.caixa-midia:hover { border-color: var(--laranja); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .1), transparent 60%), var(--painel-2); }

/* abas do painel: sublinhado laranja com brilho */
.vabas button.ativo { border-bottom-color: var(--laranja); }
.vabas button { position: relative; }
.vabas button.ativo::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2px; height: 8px; background: radial-gradient(50% 100% at 50% 100%, rgba(255, 71, 0, .55), transparent); filter: blur(3px); pointer-events: none; }

/* capa do modelo: título com brilho */
.capa-modelo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.capa-modelo .nome { text-shadow: 0 0 24px rgba(255, 71, 0, .45), 0 2px 0 rgba(0, 0, 0, .35); }

/* botão Gerar: degradê vivo, brilho que passa */
.gerar-grande, .gerar-largo, .botao.primario { position: relative; overflow: hidden; background: var(--gerar); isolation: isolate; }
.gerar-grande, .gerar-largo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 12px 34px rgba(255, 71, 0, .38), 0 0 0 1px rgba(255, 120, 60, .35); }
.botao.primario { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px rgba(255, 71, 0, .28); }
.botao.primario:hover { background: var(--gerar); filter: brightness(1.07); }
.gerar-grande::after, .gerar-largo::after, .botao.primario::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%);
}
.gerar-grande:hover:not(:disabled)::after, .gerar-largo:hover:not(:disabled)::after, .botao.primario:hover:not(:disabled)::after { transition: transform .8s ease; transform: translateX(120%); }
.gerar-grande:disabled, .gerar-largo:disabled { background: var(--chip); box-shadow: inset 0 0 0 1px var(--borda); }

/* resultados */
.cartao { border-radius: 10px; box-shadow: 0 0 0 1px var(--borda); transition: box-shadow .2s, transform .2s; }
.cartao:hover { box-shadow: 0 0 0 1px rgba(255, 71, 0, .45), 0 14px 40px rgba(0, 0, 0, .45); }
.grade { column-gap: 8px; }
.cartao { margin-bottom: 8px; }
.vazio-res .grande { font-size: 58px; letter-spacing: -1px; }
.vazio-res .grande em { font-size: 50px; text-shadow: 0 0 34px rgba(255, 71, 0, .45); display: inline-block; transform: rotate(-3deg); }
.modal-topo h3 { font-size: 30px; }

/* login em vitrine */
.tela-login { position: relative; overflow: hidden; background: var(--fundo); }
.login-luz { position: absolute; inset: 0; pointer-events: none; }
.login-luz::before { content: ""; position: absolute; width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -58%); border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 71, 0, .0), rgba(255, 71, 0, .35), rgba(255, 140, 60, .12), rgba(255, 71, 0, .0) 60%, rgba(255, 71, 0, .25), rgba(255, 71, 0, 0));
  filter: blur(90px); opacity: .55; animation: girar 24s linear infinite; }
.login-luz::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--borda) 1px, transparent 1px), linear-gradient(90deg, var(--borda) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 75%); }
@keyframes girar { to { transform: translate(-50%, -58%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-luz::before { animation: none; } }
.login-coluna { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(420px, 100%); }
.cartao-login { width: 100%; padding: 38px 30px 28px; border-radius: 28px; gap: 14px;
  background: linear-gradient(var(--vidro), var(--vidro)) padding-box, var(--aresta) border-box;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 1px 0 var(--brilho); }
.cartao-login .marca { margin: 0 auto 10px; }
.cartao-login .marca .hw { font-size: 54px; letter-spacing: -1.2px; }
.cartao-login .marca .studio { font-size: 40px; }
.cartao-login .marca .pincel { height: 13px; bottom: -13px; }
.cartao-login h2 { font-size: 14.5px; margin-top: 6px; }
.cartao-login input.texto { height: 48px; border-radius: 13px; }
.cartao-login .botao { height: 50px; border-radius: 14px; font-size: 15.5px; }
.cartao-login .erro-msg { background: none; min-height: 0; }
.cartao-login .erro-msg:not(:empty) { background: rgba(220, 38, 38, .12); }
.login-rodape { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.login-rodape i { width: 4px; height: 4px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 8px var(--laranja); }

/* marca grande da página MCP acompanha a assinatura */
.mcp-marca .studio { text-shadow: 0 0 26px rgba(255, 71, 0, .45); }
.mcp-abas button.ativo { background: var(--gerar); color: #fff; box-shadow: 0 6px 18px rgba(255, 71, 0, .3); }

@media (max-width: 860px) {
  .nav { background: none; box-shadow: none; padding: 0; }
  .marca .hw { font-size: 23px; }
  .marca .studio { font-size: 16px; }
}

/* ───────── marcações @Image1 / @Video1 / @Audio1 ───────── */
.marcas-caixa { position: relative; display: flex; flex-direction: column; min-width: 0; }
.marcas-caixa > textarea.com-marcas { position: relative; z-index: 1; background: transparent !important; }
.marcas-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: transparent; border: 0; margin: 0; }
.marcas-fundo mark { color: transparent; border-radius: 5px; background: rgba(255, 71, 0, .26); box-shadow: 0 0 0 1.5px rgba(255, 71, 0, .55), 0 0 12px rgba(255, 71, 0, .25); }
.marcas-fundo mark.ruim { background: rgba(220, 38, 38, .14); box-shadow: 0 0 0 1.5px rgba(220, 38, 38, .7); }
.ref { position: relative; }
.marca-ref { position: absolute; left: 3px; bottom: 3px; z-index: 2; padding: 1px 5px; border-radius: 6px; font: 600 9.5px/1.4 var(--mono); color: #fff; background: rgba(255, 71, 0, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none; }
.marca-item { gap: 10px; }
.marca-mini { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: var(--chip); flex: none; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--borda); }
.marca-mini img, .marca-mini video { width: 100%; height: 100%; object-fit: cover; }
.marca-mini svg { width: 16px; height: 16px; color: var(--laranja-texto); }
.marca-token { flex: 1; font: 600 13px var(--mono); color: var(--laranja-texto); }
.dica-marca b { color: var(--laranja-texto); font-family: var(--mono); }
.comp-refs .ref-mais { display: grid; place-items: center; border: 1.5px dashed var(--borda-forte); background: none; color: var(--texto-3); cursor: pointer; }
.comp-refs .ref-mais:hover { border-color: var(--laranja); color: var(--laranja-texto); }
.comp-refs .ref-mais svg { width: 18px; height: 18px; }
.botao.perigo-cheio { background: rgba(220, 38, 38, .14); color: #ff6b6b !important; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .4); }
.botao.perigo-cheio:hover:not(:disabled) { background: #dc2626; color: #fff !important; }
.botao.perigo-cheio[data-c] { background: #dc2626; color: #fff !important; }
.grade.selecionando .cartao .apagar { display: none; }

/* ═════════ ADMIN: Debug e Log ═════════ */
.nav a.nav-admin { position: relative; }
.badge-erro { position: absolute; top: -4px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; font: 700 10px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--fundo), 0 0 12px rgba(220, 38, 38, .6); }
.adm { max-width: 1240px; }
.adm-abas { margin-bottom: 18px; }
.adm-abas a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--texto-2); text-decoration: none !important; }
.adm-abas a svg { width: 14px; height: 14px; }
.adm-abas a.ativo { background: var(--gerar); color: #fff; box-shadow: 0 6px 18px rgba(255, 71, 0, .3); }
.adm-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin-bottom: 16px; }
.adm-cab p { flex: 1 1 360px; margin: 0; }
.adm-titulo { width: 100%; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.5px; }
.adm-titulo em { font-family: var(--pincel); font-style: normal; color: var(--laranja); font-size: .78em; text-shadow: 0 0 24px rgba(255, 71, 0, .4); }
.adm-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; padding: 8px 0; background: linear-gradient(var(--fundo) 70%, transparent); }
.adm-barra select.texto { width: auto; height: 38px; }
.adm-barra input.texto { flex: 1 1 220px; height: 38px; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.chip.ligado .ponto-vivo { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }
.adm-log { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.adm-ev { border-radius: 10px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); overflow: hidden; }
.adm-ev-linha { width: 100%; display: grid; grid-template-columns: 128px 58px 150px 1fr auto; gap: 12px; align-items: center; padding: 9px 12px; border: 0; background: none; text-align: left; font-size: 13px; }
.adm-ev-linha:hover { background: var(--brilho); }
.adm-hora { font: 12px var(--mono); color: var(--texto-3); white-space: nowrap; }
.adm-nivel { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; text-align: center; background: var(--chip); color: var(--texto-2); }
.nivel-erro .adm-nivel { background: rgba(220, 38, 38, .16); color: #ff6b6b; }
.nivel-aviso .adm-nivel { background: rgba(245, 158, 11, .16); color: #f5b041; }
.nivel-erro { box-shadow: inset 3px 0 0 #dc2626, inset 0 0 0 1px var(--borda); }
.nivel-aviso { box-shadow: inset 3px 0 0 #f59e0b, inset 0 0 0 1px var(--borda); }
.adm-tipo { color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ev.aberto .adm-msg { white-space: normal; }
.adm-quem { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.adm-det { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borda); }
.adm-det pre { margin: 0; max-height: 320px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--fundo); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; color: var(--texto-2); }
.adm-det .botao { align-self: flex-start; height: 32px; }
.adm-mais { align-self: center; margin-top: 8px; }
.adm-kvs { display: flex; flex-direction: column; }
.adm-kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; }
.adm-kv:last-child { border-bottom: 0; }
.adm-kv span { color: var(--texto-3); }
.adm-kv code { font: 12px var(--mono); color: var(--texto); word-break: break-all; }
.adm-kv.ruim code { color: #ff6b6b; }
.adm-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto-2); }
.adm-pill.ok .ponto { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.adm-pill.ativo { color: var(--laranja-texto); box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .45); }
.adm-pill.erro { color: #ff6b6b; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .5); background: rgba(220, 38, 38, .08); }
.adm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
.adm-card { border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); min-width: 0; }
.adm-card h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.adm-card h3 svg { width: 16px; height: 16px; color: var(--laranja-texto); }
.adm-card > .botao { align-self: flex-start; }
.adm-sub { font-size: 12px; color: var(--texto-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.adm-provs { display: flex; flex-direction: column; gap: 6px; }
.adm-prov { display: grid; grid-template-columns: 130px 80px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.adm-prov .botao { height: 32px; }
.adm-prov-nome { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.adm-prov .ponto { width: 8px; height: 8px; border-radius: 50%; }
.adm-prov .ponto.ok { background: #22c55e; } .adm-prov .ponto.off { background: var(--texto-3); }
.adm-teste { font-size: 12px; color: var(--texto-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.adm-teste.ok { color: #22c55e; } .adm-teste.erro { color: #ff6b6b; }
.adm-tabela { display: flex; flex-direction: column; font-size: 12.5px; }
.adm-tr { display: grid; grid-template-columns: 1.6fr .9fr 1fr .6fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borda); }
.adm-tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tr.cab { color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.adm-tr.lento span:nth-child(4) { color: #ff6b6b; font-weight: 600; }
.adm-tr .botao { height: 28px; font-size: 12px; padding: 0 10px; }
.adm-erros { display: flex; flex-direction: column; gap: 6px; }
.adm-erro-linha { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: var(--painel-2); }
.adm-erro-linha b { color: #ff6b6b; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.adm-erro-linha span { color: var(--texto-2); word-break: break-word; }
@media (max-width: 760px) {
  .adm-ev-linha { grid-template-columns: 1fr auto; }
  .adm-ev-linha .adm-tipo, .adm-ev-linha .adm-quem { display: none; }
  .adm-ev-linha .adm-msg { grid-column: 1 / -1; }
  .adm-grade { grid-template-columns: 1fr; }
  .adm-prov { grid-template-columns: 1fr auto; }
}
.adm-kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.adm-kvs.compacto .adm-kv { grid-template-columns: minmax(0, 1fr) auto; }
.adm-kvs.compacto .adm-kv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); font-family: var(--mono); font-size: 12px; }
.adm-det .adm-kv { grid-template-columns: 140px 1fr; }
.adm-prov { grid-template-columns: 1fr auto auto; row-gap: 2px; }
.adm-prov .adm-teste { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
.adm-teste:empty { display: none; }

/* ───────── correções do teste (07/10) ───────── */
/* avisos no canto de cima: embaixo tapavam a barra de prompt */
.toasts { top: 72px; bottom: auto; left: auto; right: 16px; transform: none; align-items: flex-end; }
/* cabeçalho das caixas de mídia: o título encolhe, o "Do estúdio" não quebra */
.caixa-midia .cab { gap: 8px; }
.caixa-midia .cab > span:first-child { flex: 1; min-width: 0; }
.caixa-midia .cab .btn-estudio, .caixa-midia .cab > span:last-child { white-space: nowrap; flex: none; }
/* celular: a camada premium tinha fixado o topo em 60px */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .app { grid-template-rows: auto 1fr; }
  .topo { padding: 10px 12px; gap: 8px 12px; }
  .topo::after { display: none; }
  .nav { order: 3; width: 100%; max-width: 100%; overflow-x: auto; padding: 3px; }
  .nav a { padding: 6px 11px; font-size: 13px; }
  .toasts { top: auto; bottom: 90px; left: 12px; right: 12px; align-items: center; }
  .composer { width: calc(100% - 20px); left: 10px; transform: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .topo, .vista { min-width: 0; max-width: 100vw; }
  .nav { flex-wrap: nowrap; }
}

/* ───────── saldo dos provedores (topo) ───────── */
.saldo-pilula { cursor: pointer; gap: 10px; padding: 0 12px; border: 0; }
.saldo-pilula:hover { box-shadow: inset 0 0 0 1px var(--borda-forte); }
.saldo-pilula .saldo-ico svg { width: 13px; height: 13px; color: var(--laranja-texto); display: block; }
.saldo-item { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.saldo-item i { font-style: normal; color: var(--texto-3); font-size: 11.5px; }
.saldo-item b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--texto); }
.saldo-item.vazio b { color: var(--texto-3); }
.saldo-item.baixo b { color: #f59e0b; }
.saldo-pilula.baixo { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .55), 0 0 14px rgba(245, 158, 11, .18); }
.saldo-pop { gap: 6px; }
.saldo-linha { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); margin: 0 6px 6px; }
.saldo-linha.baixo { box-shadow: inset 3px 0 0 #f59e0b; }
.saldo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.saldo-valor { font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
.saldo-linha.baixo .saldo-valor { color: #f59e0b; }
.saldo-aviso { color: var(--texto-2); }
.saldo-ajuste { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: end; margin-top: 6px; }
.saldo-ajuste label { display: grid; gap: 3px; font-size: 11.5px; color: var(--texto-3); min-width: 0; }
.saldo-ajuste input.texto { height: 32px; font-size: 13px; }
.saldo-ajuste .botao { height: 32px; }
.saldo-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px 6px; }
.saldo-rodape .botao { height: 30px; }
.saldo-admin { display: grid; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px dashed var(--borda); }
@media (max-width: 860px) {
  .saldo-pilula .saldo-item i { display: none; }
  .saldo-pilula { gap: 7px; padding: 0 9px; }
}

/* ═════════ aba Voz (estilo ElevenLabs) ═════════ */
.pg-voz { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; padding: 4px 16px 16px; min-height: 0; }
.voz-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 2px; }
.voz-abas { border-bottom: 1px solid var(--borda); padding: 6px 4px 0; }
.voz-principal { display: grid; gap: 10px; }
.voz-editor { position: relative; border-radius: 18px; border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); display: flex; flex-direction: column; }
.voz-texto { width: 100%; min-height: 260px; max-height: 52vh; resize: vertical; border: 0; outline: 0; background: none; padding: 20px 22px; font: 400 17px/1.65 var(--sans); color: var(--texto); }
.voz-texto::placeholder { color: var(--texto-3); }
.voz-editor-rodape { display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.voz-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.voz-tags .chip { height: 26px; font: 500 11.5px var(--mono); padding: 0 8px; }
.voz-conta { margin-left: auto; font: 500 12px var(--mono); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.voz-conta.estoura { color: #ff6b6b; }
.voz-lado { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 12px; border-radius: var(--raio-g); border: 1px solid transparent; background: linear-gradient(var(--painel), var(--painel)) padding-box, var(--aresta) border-box; box-shadow: inset 0 1px 0 var(--brilho); }
.voz-acao { margin-top: auto; display: grid; gap: 8px; position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(transparent, var(--painel) 30%); }
.voz-nota { text-align: center; min-height: 16px; }
#voz-gerar span { pointer-events: none; }
#voz-gerar svg { width: 18px; height: 18px; }
#voz-gerar.enviando { opacity: .7; }
.voz-cartao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: 14px; padding: 10px 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-cartao:hover { box-shadow: inset 0 0 0 1px var(--borda-forte); }
.voz-cartao > span:last-child svg { width: 16px; height: 16px; color: var(--texto-3); }
.voz-cartao-txt { flex: 1; min-width: 0; display: grid; }
.voz-cartao-txt .r { font-size: 12px; color: var(--texto-3); }
.voz-cartao-txt b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 13px var(--display); color: #fff; background: conic-gradient(from 210deg, #ff8a3d, #e63b00, #7a2bff, #ff8a3d); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.voz-avatar svg { width: 16px; height: 16px; }
.voz-slider { display: grid; gap: 6px; padding: 4px 4px 2px; }
.voz-slider .campo-topo { display: flex; justify-content: space-between; font-size: 13px; }
.voz-slider .valor { font: 500 12px var(--mono); color: var(--texto-2); }
.voz-slider input[type=range] { width: 100%; accent-color: var(--laranja); }
.voz-zona { border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--borda-forte) 80%, rgba(255, 71, 0, .3)); background: radial-gradient(120% 90% at 50% 0%, rgba(255, 71, 0, .06), transparent 60%), var(--painel); padding: 26px 18px; display: grid; gap: 16px; justify-items: center; cursor: pointer; }
.voz-zona.arrastando, .voz-zona:hover { border-color: var(--laranja); }
.voz-zona.cheia { cursor: default; border-style: solid; }
.voz-arquivo { display: grid; gap: 10px; justify-items: center; text-align: center; width: 100%; max-width: 560px; }
.voz-arquivo audio { width: 100%; }
.voz-arquivo .circ { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); }
.voz-arquivo .circ svg { width: 22px; height: 22px; color: var(--laranja-texto); }
.botao.gravando { background: #dc2626; color: #fff !important; animation: pulsar 1.4s ease-in-out infinite; }
.voz-hist-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 0; }
.voz-hist-cab h3 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; }
.voz-hist { display: grid; gap: 6px; }
.voz-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-item-txt { min-width: 0; display: grid; gap: 2px; }
.voz-item-txt p { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.voz-item audio { width: 100%; height: 36px; }
.voz-item-acoes { display: flex; gap: 6px; }
.voz-hist-estado { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-3); }
.voz-hist-estado .giro { width: 18px; height: 18px; }
.voz-hist-estado.erro { color: #ff6b6b; }
.voz-hist-estado.erro svg { width: 15px; height: 15px; flex: none; }
.voz-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.voz-filtros .segmento { flex: 1 1 260px; }
.voz-filtros input.texto { flex: 1 1 200px; height: 38px; }
.voz-filtros select.texto { width: auto; height: 38px; }
.voz-lista { display: grid; gap: 6px; margin-top: 8px; }
.voz-linha { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-linha.ativa { box-shadow: inset 0 0 0 1.5px var(--laranja); }
.voz-linha-txt { min-width: 0; display: grid; gap: 1px; }
.voz-linha-txt b { font-size: 14.5px; }
.voz-linha .icone-btn.tocando { color: var(--laranja-texto); box-shadow: inset 0 0 0 1px var(--laranja); }
@media (max-width: 860px) {
  .pg-voz { grid-template-columns: 1fr; height: auto; }
  .voz-col, .voz-lado { overflow: visible; }
  .voz-item { grid-template-columns: 1fr; }
  .voz-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .voz-linha .voz-avatar { display: none; }
}
.voz-ref { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-ref.ligada { box-shadow: inset 0 0 0 1.5px var(--laranja); }
.voz-ref .campo-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.voz-ref .botao { height: 32px; font-size: 12.5px; }
.voz-transcricao { display: grid; gap: 8px; min-width: 0; }
.voz-transcricao p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2); max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; }
.voz-transcricao .botao { height: 30px; font-size: 12px; }
/* topo nunca mais largo que a tela: o menu encolhe e rola, o selo de saldo fica compacto */
html, body { overflow-x: hidden; }
.app { width: 100%; grid-template-columns: minmax(0, 1fr); }
.topo { min-width: 0; }
.topo .nav { min-width: 0; flex: 0 1 auto; overflow-x: auto; }
.topo-dir { flex: none; }
@media (max-width: 1560px) {
  .saldo-pilula .saldo-item i { display: none; }
  .saldo-pilula { gap: 8px; }
}
.saldo-item i.curto { display: none; }
@media (max-width: 1560px) {
  .saldo-pilula .saldo-item i.longo { display: none; }
  .saldo-pilula .saldo-item i.curto { display: inline; }
}

/* ═════════ marca v2: H&W serifada, & laranja, STUDIO espaçado (sem pincel) ═════════ */
.marca.marca-v2 { align-items: center; gap: 12px; padding: 0; }
.marca-v2 .hw { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 29px; line-height: 1; letter-spacing: -.02em; color: var(--marca-hw); display: inline-flex; align-items: baseline; }
.marca-v2 .hw em { font-style: italic; color: var(--laranja); font-size: 1.06em; margin: 0 .03em 0 .01em; text-shadow: 0 0 20px rgba(255, 71, 0, .35); }
.marca-v2 .fio { width: 1px; height: 20px; flex: none; background: linear-gradient(180deg, transparent, var(--borda-forte) 25%, var(--borda-forte) 75%, transparent); }
.marca-v2 .studio { font-family: var(--display); font-weight: 700; font-stretch: 112%; font-size: 10.5px; line-height: 1; letter-spacing: .44em; margin-right: -.44em; text-transform: uppercase; color: var(--texto-2); transform: none; text-shadow: none; }
.marca.marca-v2:hover .hw em { text-shadow: 0 0 26px rgba(255, 71, 0, .6); }
.marca.marca-v2:hover .studio { color: var(--texto); text-shadow: none; }
.cartao-login .marca.marca-v2 { gap: 18px; margin: 4px auto 12px; }
.cartao-login .marca-v2 .hw { font-size: 60px; letter-spacing: -.03em; }
.cartao-login .marca-v2 .fio { height: 42px; }
.cartao-login .marca-v2 .studio { font-size: 15px; letter-spacing: .5em; margin-right: -.5em; }
.mcp-marca.marca-v2 { display: inline-flex; align-items: center; gap: .3em; vertical-align: middle; text-transform: none; }
.mcp-marca.marca-v2 .hw { font-size: 1.15em; }
.mcp-marca.marca-v2 .fio { height: .8em; }
.mcp-marca.marca-v2 .studio { font-size: .32em; }
@media (max-width: 860px) {
  .marca-v2 .hw { font-size: 24px; }
  .marca.marca-v2 { gap: 9px; }
  .marca-v2 .studio { font-size: 9px; }
}
/* destaques que usavam a fonte de pincel viram serifa itálica laranja */
.vazio-res .grande em, .adm-titulo em, .mcp-titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1em; letter-spacing: -.01em; transform: none; color: var(--laranja); text-shadow: 0 0 30px rgba(255, 71, 0, .3); }
.login-rodape { letter-spacing: .22em; }
/* H&W = arte original da marca (assets/hw-marca.png, 364×150) usada como máscara: branco no escuro, quase preto no claro */
.hw-arte { display: inline-block; flex: none; height: 30px; aspect-ratio: 364 / 150; background: var(--marca-hw);
  -webkit-mask: url("assets/hw-marca.png") center / contain no-repeat; mask: url("assets/hw-marca.png") center / contain no-repeat; }
.marca-v2 .studio { color: var(--laranja-texto); }
.marca.marca-v2:hover .studio { color: var(--laranja); }
.cartao-login .marca-v2 .hw-arte { height: 66px; }
.mcp-marca.marca-v2 .hw-arte { height: 1em; }
@media (max-width: 860px) { .marca-v2 .hw-arte { height: 25px; } }

/* ───────── emoções por frase (IA) ───────── */
.voz-ia { height: 30px; font-size: 12.5px; color: var(--laranja-texto) !important; box-shadow: inset 0 0 0 1px rgba(255, 71, 0, .4); }
.voz-ia:hover:not(:disabled) { background: var(--laranja-suave); }
.voz-ia svg { width: 14px; height: 14px; }
.emo-corpo { display: grid; gap: 12px; }
.emo-direcao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); font-size: 13px; cursor: pointer; }
.emo-direcao input { margin-top: 3px; accent-color: var(--laranja); }
.emo-lista { display: grid; gap: 6px; }
.emo-linha { display: grid; grid-template-columns: 26px minmax(0, 1fr) 210px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--painel-2); box-shadow: inset 0 0 0 1px var(--borda); }
.emo-linha.marcada { box-shadow: inset 3px 0 0 var(--laranja), inset 0 0 0 1px var(--borda); }
.emo-n { font: 600 12px var(--mono); color: var(--texto-3); text-align: center; }
.emo-txt { min-width: 0; display: grid; gap: 2px; }
.emo-txt p { margin: 0; font-size: 14px; line-height: 1.45; }
.emo-sel { height: 36px; font-size: 13px; }
.emo-chip { justify-self: start; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--chip); color: var(--texto-2); }
@media (max-width: 760px) { .emo-linha { grid-template-columns: 22px minmax(0, 1fr); } .emo-sel, .emo-chip { grid-column: 2; } }
.voz-nota.aviso-texto { color: #f5b041; }

/* ═════════ teto de gasto por pessoa ═════════ */
.teto-barra { display: block; height: 4px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: 5px; min-width: 60px; }
.teto-barra i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.teto-barra.quase i { background: #f59e0b; }
.teto-barra.cheio i { background: var(--erro); }
.teto-pilula { gap: 6px; }
.teto-pilula b { color: var(--texto); }
.teto-pilula .teto-de { color: var(--texto-3, var(--texto-2)); margin-left: -4px; }
.teto-pilula .teto-barra { width: 40px; min-width: 40px; margin: 0 0 0 2px; }
.teto-pilula.quase b { color: #f59e0b; }
.teto-pilula.cheio b { color: var(--erro); }
@media (max-width: 1560px) { .teto-pilula .longo { display: none; } }
@media (max-width: 640px) { .teto-pilula .teto-barra { display: none; } }

/* ═════════ chaves do OpenRouter (Ajustes) ═════════ */
.chaves-lista { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.chave-item { padding: 12px 14px; border-radius: 12px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--borda); }
.chave-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.chave-topo b { font-size: 14px; }
.chave-item .ajuda { overflow-wrap: anywhere; }

/* Workflow no celular: a barra de cima quebra linha em vez de empurrar "Rodar tudo" para fora */
@media (max-width: 640px) {
  .wf-topo { flex-wrap: wrap; padding: 4px 12px 10px; }
  .wf-topo-dir { margin-left: 0; flex-wrap: wrap; width: 100%; }
}

/* ═════════ convites (Equipe › Convidar vários) ═════════ */
.convites-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.convite-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--borda); }
.convite-item .ajuda { overflow-wrap: anywhere; }
/* ═════════ marca v3 · metálico: H&W original em degradê champanhe + STUDIO fino com ponto laranja ═════════ */
:root { --marca-metal: linear-gradient(180deg, #2a2622 0%, #4a4035 60%, #7a6a58 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --marca-metal: linear-gradient(180deg, #ffffff 0%, #ece3d6 45%, #b9a994 100%); } }
:root[data-theme="dark"] { --marca-metal: linear-gradient(180deg, #ffffff 0%, #ece3d6 45%, #b9a994 100%); }
.marca-metal { gap: 12px; }
.marca-metal .hw-arte { background: var(--marca-metal); filter: drop-shadow(0 1px 10px rgba(236, 227, 214, .08)); }
.marca-metal .studio { display: inline-flex; align-items: center; gap: 9px; font-family: "Geist", system-ui, sans-serif; font-weight: 300; font-stretch: normal;
  font-size: 10.5px; letter-spacing: .62em; margin-right: -.62em; text-transform: uppercase; color: var(--texto-2); }
.marca-metal .studio i { width: 5px; height: 5px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 10px var(--laranja); flex: none; }
.marca.marca-metal:hover .studio { color: var(--texto); }
.marca.marca-metal:hover .studio i { box-shadow: 0 0 16px var(--laranja); }
/* login: empilhado, H&W grande em cima */
.cartao-login .marca.marca-metal { flex-direction: column; gap: 16px; margin: 6px auto 14px; }
.cartao-login .marca-metal .hw-arte { height: 76px; }
.cartao-login .marca-metal .studio { font-size: 13.5px; }
.mcp-marca.marca-metal { gap: .35em; }
.mcp-marca.marca-metal .studio { font-size: .3em; gap: .6em; }
.mcp-marca.marca-metal .studio i { width: .5em; height: .5em; }
@media (max-width: 860px) { .marca-metal .studio { font-size: 9px; letter-spacing: .5em; margin-right: -.5em; } }

/* ═════════ biblioteca de vozes clonadas (Voz › Vozes clonadas) ═════════ */
.vozes-cab { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 14px; }
.vozes-cab h3 { margin: 0; font-size: 16px; }
.vozes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.voz-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--borda); }
.voz-card-topo { display: flex; align-items: center; gap: 10px; }
.voz-card-topo > div { flex: 1; min-width: 0; }
.voz-card-topo b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-card .tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none; font-weight: 700; font-size: 12px; color: var(--laranja-texto); background: var(--laranja-suave); }
.voz-card audio { width: 100%; height: 34px; }
.voz-card-texto { font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.icone-btn.confirmar { color: var(--erro); box-shadow: inset 0 0 0 1px var(--erro); }

/* ═════════ rolagem leve (Biblioteca e listas) ═════════ */
/* cards fora da tela não são desenhados; o tamanho reservado evita a barra de rolagem pular */
.cartao { content-visibility: auto; contain-intrinsic-size: auto 340px; animation: none; }
.cartao .midia img, .cartao .midia video { display: block; background: var(--palco); }
/* etiqueta "7s"/"vídeo": fundo sólido em vez de desfoque (desfoque em dezenas de cards trava o scroll) */
.cartao .tag-tipo { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .7); }
.midia-falhou { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; color: var(--texto-3, var(--texto-2)); font-size: 12px; }
.midia-falhou svg { width: 20px; height: 20px; opacity: .6; }
.res-rolagem, .pagina, .vrolagem, .voz-col, .lado-pastas { overscroll-behavior: contain; scrollbar-gutter: stable; }

/* Biblioteca: a linha da grade (pastas | criações) fica do tamanho da tela; quem rola é a lista, não a grade inteira */
.pg-biblioteca { grid-template-rows: minmax(0, 1fr); }
.pg-biblioteca .pg-imagem { min-height: 0; height: 100%; }
.pg-biblioteca .lado-pastas { min-height: 0; }
.res-rolagem { min-height: 0; }

/* caixa de áudio do vídeo: "Fala com voz clonada" numa linha só dela (no cabeçalho espremia o título) */
.caixa-midia .linha-fala { display: flex; margin: -2px 0 8px; }
/* ═════════ duração do vídeo: barra de tempo com o áudio por baixo ═════════ */
.pop-dur { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.pop-dur .pop-titulo { padding: 0; }
.dur-valor { font-size: 20px; font-weight: 600; }
.dur-trilho { position: relative; height: 46px; margin: 4px 6px 16px; border-radius: 10px; background: var(--chip); cursor: pointer; touch-action: none; outline: none; }
.dur-trilho:focus-visible { box-shadow: 0 0 0 2px var(--destaque, #ff4700); }
.dur-sel { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: color-mix(in srgb, var(--destaque, #ff4700) 22%, transparent); }
.dur-audio { position: absolute; left: 0; bottom: 5px; height: 16px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(120, 200, 120, .75) 0 2px, rgba(120, 200, 120, .35) 2px 4px); display: flex; align-items: center; overflow: hidden; z-index: 1; }
.dur-audio span { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 0 5px; color: var(--texto); white-space: nowrap; }
.dur-audio svg { width: 11px; height: 11px; }
.dur-marca { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--texto) 18%, transparent); }
.dur-marca i { position: absolute; top: calc(100% + 3px); left: 0; transform: translateX(-50%); font-style: normal; font-size: 10px; color: var(--texto-3); }
.dur-marca.sem-rotulo i { display: none; }
.dur-cabeca { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--texto); z-index: 2; pointer-events: none; }
.dur-cabeca span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dur-aviso { font-size: 12px; color: var(--texto-2); min-height: 16px; }
.dur-aviso.ruim { color: var(--erro); }
.dur-acoes { display: flex; gap: 8px; }

/* ═════════ SUPERCOMPUTER H&W: chat no padrão do HW Chat ═════════
   A paleta quente vale SÓ dentro de .pg-chat (e nos menus/modais do chat, marcados com .ch-tema).
   O resto do Studio não muda. */
.pg-chat, .ch-tema {
  --fundo: #faf9f5; --lateral: #f3f1ea; --painel: #ffffff; --painel-2: #f0eee6; --chip: #ebe8de; --chip-hover: #e3dfd3; --codigo: #f4f2ec;
  --elevada: #ffffff; --palco: #f4f2ec;
  --borda: rgba(31, 30, 29, .1); --borda-forte: rgba(31, 30, 29, .18);
  --texto: #1f1e1d; --texto-2: #4f4b44; --texto-3: #6b665e; --laranja-texto: #c23a00; --marca-hw: #1f1e1d;
  --ok-chat: #1e7a3e; --aviso-chat: #8a5a00;
  --shadow-composer: 0 1px 2px rgba(31, 30, 29, .05), 0 8px 28px -10px rgba(31, 30, 29, .16);
  --shadow-menu: 0 2px 6px rgba(31, 30, 29, .06), 0 16px 40px -12px rgba(31, 30, 29, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--texto);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-chat, :root:not([data-theme="light"]) .ch-tema {
    --fundo: #262624; --lateral: #1f1e1d; --painel: #30302e; --painel-2: #2b2a28; --chip: #3a3936; --chip-hover: #42413d; --codigo: #1c1b1a;
    --elevada: #30302e; --palco: #1c1b1a;
    --borda: rgba(255, 255, 255, .08); --borda-forte: rgba(255, 255, 255, .14);
    --texto: #ece9e1; --texto-2: #bdb8ad; --texto-3: #9a958c; --laranja-texto: #ff7a40; --marca-hw: #ece9e1;
    --ok-chat: #8fd6a8; --aviso-chat: #f2c26b;
    --shadow-composer: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 32px -8px rgba(0, 0, 0, .45);
    --shadow-menu: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 48px -12px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] .pg-chat, :root[data-theme="dark"] .ch-tema {
  --fundo: #262624; --lateral: #1f1e1d; --painel: #30302e; --painel-2: #2b2a28; --chip: #3a3936; --chip-hover: #42413d; --codigo: #1c1b1a;
  --elevada: #30302e; --palco: #1c1b1a;
  --borda: rgba(255, 255, 255, .08); --borda-forte: rgba(255, 255, 255, .14);
  --texto: #ece9e1; --texto-2: #bdb8ad; --texto-3: #9a958c; --laranja-texto: #ff7a40; --marca-hw: #ece9e1;
  --ok-chat: #8fd6a8; --aviso-chat: #f2c26b;
  --shadow-composer: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 32px -8px rgba(0, 0, 0, .45);
  --shadow-menu: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 48px -12px rgba(0, 0, 0, .6);
}
@keyframes hw-entrar { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hw-surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hw-pulso { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes hw-ponto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── moldura: lateral + área principal ── */
.pg-chat { height: calc(100% - 12px); margin: 0 12px 12px; display: grid; grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; transition: grid-template-columns .25s var(--ease); }
.pg-chat.recolhida { grid-template-columns: 60px minmax(0, 1fr); }
.pg-chat ::selection { background: color-mix(in srgb, var(--laranja) 32%, transparent); color: inherit; }
.ch-lado { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--lateral); border-right: 1px solid var(--borda); overflow: hidden; }
.ch-trilho { display: none; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.pg-chat.recolhida .ch-trilho { display: flex; }
.pg-chat.recolhida .ch-lado-cheio { display: none; }
.ch-lado-cheio { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ch-lado-topo { height: 52px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; }
.ch-lado-nome { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: -.01em; color: var(--texto); }
.so-cel, .ch-gaveta-btn, .ch-nova-cel { display: none !important; }
.ch-gaveta-fundo { display: none; }
.ch-ico-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: none; color: var(--texto-2); display: inline-grid; place-items: center; flex: none; padding: 0;
  transition: background .15s var(--ease), color .15s var(--ease); }
.ch-ico-btn:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.ch-ico-btn svg { width: 18px; height: 18px; }
.ch-ico-btn.mini { width: 26px; height: 26px; border-radius: 7px; color: var(--texto-3); }
.ch-ico-btn.mini svg { width: 15px; height: 15px; }
.ch-mais-redondo { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: var(--laranja); color: #fff; display: inline-grid; place-items: center; flex: none; transition: transform .15s var(--ease), background .15s; }
.ch-mais-redondo svg { width: 16px; height: 16px; stroke-width: 2.3; }
.ch-trilho .ch-mais-redondo { width: 36px; height: 36px; margin: 6px 0; }
.ch-trilho .ch-mais-redondo:hover { transform: scale(1.05); }
.ch-lado-acoes { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.ch-nova { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: var(--texto); font-size: 14px; font-weight: 500; padding: 6px; border-radius: 10px; text-align: left; transition: background .15s var(--ease); }
.ch-nova:hover { background: var(--painel-2); }
.ch-nova:hover .ch-mais-redondo { transform: scale(1.05); }
.ch-nova kbd { margin-left: auto; font: 400 11px var(--sans); color: var(--texto-3); }
.ch-busca { position: relative; display: block; }
.ch-busca > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; color: var(--texto-3); pointer-events: none; }
.ch-busca svg { width: 15px; height: 15px; }
.ch-busca input { width: 100%; height: 36px; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 0 10px 0 35px; font-size: 13.5px; color: var(--texto); outline: none;
  transition: background .15s var(--ease), border-color .15s var(--ease); }
.ch-busca input::placeholder { color: var(--texto-3); }
.ch-busca input:hover { background: var(--painel-2); }
.ch-busca input:focus { border-color: var(--borda-forte); background: var(--fundo); }
.ch-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 16px; }
.ch-secao { margin-bottom: 10px; }
.ch-grupo { margin: 0; padding: 8px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--texto-3); letter-spacing: 0; text-transform: none; }
.ch-lista-vazia { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--texto-3); }
.ch-lista-vazia.erro { text-align: left; padding: 6px 10px; }
.ch-item { position: relative; display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 3px 0 10px; border-radius: 9px; cursor: pointer; color: var(--texto-2); font-size: 13.5px;
  transition: background .15s var(--ease), color .15s var(--ease); outline-offset: -2px; }
.ch-item:hover { background: var(--painel-2); color: var(--texto); }
.ch-item.ativo { background: var(--chip); color: var(--texto); }
.ch-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 7px 0; }
.ch-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-trecho { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--texto-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ch-mais { width: 28px; height: 28px; border-radius: 7px; border: 0; padding: 0; background: none; color: var(--texto-3); display: inline-grid; place-items: center; flex: none; opacity: 0;
  transition: opacity .15s var(--ease), background .15s; }
.ch-mais svg { width: 16px; height: 16px; }
.ch-mais:hover { background: var(--chip-hover); color: var(--texto); }
.ch-mais:focus-visible, .ch-item:hover .ch-mais, .ch-item:focus-within .ch-mais, .ch-item.ativo .ch-mais, .ch-proj:hover .ch-mais, .ch-proj:focus-within .ch-mais { opacity: 1; }
.ch-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); flex: none; margin: 0 4px; }
.giro.mini { width: 13px; height: 13px; border-width: 2px; flex: none; }
.ch-renomear { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--texto); background: var(--fundo); border: 1px solid var(--laranja); border-radius: 7px; padding: 4px 8px; outline: none; }
.ch-soltas { border-radius: 10px; min-height: 48px; transition: background .15s, box-shadow .15s; }
.ch-soltas.alvo, .ch-proj.alvo { background: var(--chip); box-shadow: inset 0 0 0 1px var(--laranja); }
.ch-lista.arrastando .ch-proj:not(.alvo) { box-shadow: inset 0 0 0 1px var(--borda-forte); }
.ch-lista.arrastando .ch-proj:not(.alvo) { outline: 1px dashed var(--borda-forte); outline-offset: -1px; box-shadow: none; }
/* projetos */
.ch-proj-cab { display: flex; align-items: center; justify-content: space-between; padding-right: 3px; }
.ch-proj-titulo { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 8px 6px 4px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
.ch-proj-titulo:hover { color: var(--texto-2); }
.ch-chevron { display: inline-grid; transition: transform .2s var(--ease); }
.ch-chevron svg { width: 13px; height: 13px; }
.ch-chevron.aberto { transform: rotate(90deg); }
.ch-proj { position: relative; display: flex; align-items: center; min-height: 34px; border-radius: 9px; padding-right: 3px; transition: background .15s, box-shadow .15s; }
.ch-proj:hover { background: var(--painel-2); }
.ch-proj.ativo { background: var(--chip); }
.ch-chevron-btn { width: 24px; height: 30px; margin-left: 2px; border: 0; border-radius: 6px; background: none; padding: 0; color: var(--texto-3); display: grid; place-items: center; flex: none; }
.ch-chevron-btn:hover { color: var(--texto); }
.ch-proj-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 7px 2px 7px 0; text-align: left; font-size: 13.5px; color: var(--texto-2); }
.ch-proj:hover .ch-proj-abrir, .ch-proj.ativo .ch-proj-abrir { color: var(--texto); }
.ch-proj-ico { display: grid; flex: none; color: var(--cor); }
.ch-proj-ico svg { width: 15px; height: 15px; }
.ch-proj-abrir .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-proj-n { flex: none; font-size: 11px; color: var(--texto-3); font-variant-numeric: tabular-nums; padding-right: 4px; }
.ch-proj .ch-mais { position: absolute; right: 3px; }
.ch-proj:hover .ch-proj-n, .ch-proj:focus-within .ch-proj-n { visibility: hidden; }
.ch-proj-convs { margin: 1px 0 4px 18px; padding-left: 6px; border-left: 1px solid var(--borda); animation: hw-surgir .15s var(--ease) both; }
.ch-proj-convs .ch-lista-vazia { padding: 6px 10px; text-align: left; font-size: 12.5px; }
.ch-proj-novo { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 9px; text-align: left; font-size: 13px; color: var(--texto-3); transition: background .15s, color .15s; }
.ch-proj-novo span { display: grid; } .ch-proj-novo svg { width: 14px; height: 14px; }
.ch-proj-novo:hover { background: var(--painel-2); color: var(--texto-2); }
.ch-proj-novo.vazio { border: 1px dashed var(--borda-forte); margin: 2px 0 4px; }
.ch-link { border: 0; background: none; padding: 0; font: inherit; color: var(--laranja-texto); text-decoration: underline; text-underline-offset: 4px; }

/* ── área principal ── */
.ch-principal { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo); }
.ch-topo { flex: none; display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 12px 0 22px; }
.ch-titulo { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 400; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-chip-proj { display: inline-flex; align-items: center; gap: 6px; max-width: 30%; flex: none; height: 28px; padding: 0 11px; border: 1px solid var(--borda-forte); border-radius: 999px; background: none;
  font-size: 12px; color: var(--texto-2); transition: background .15s, color .15s; margin-right: 6px; }
.ch-chip-proj:hover { background: var(--painel-2); color: var(--texto); }
.ch-chip-proj .ico { display: grid; color: var(--cor); } .ch-chip-proj .ico svg { width: 13px; height: 13px; }
.ch-chip-proj .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-custo { font-size: 12px; color: var(--texto-3); font-family: var(--mono); margin-right: 6px; white-space: nowrap; }
.ch-botao-leve { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 9px; border: 0; background: none; color: var(--texto-2); font-size: 12.5px; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease); }
.ch-botao-leve:hover { background: var(--chip); color: var(--texto); }
.ch-botao-leve > span { display: inline-flex; }
.ch-botao-leve svg { width: 15px; height: 15px; }
.ch-botao-leve.so-icone { width: 32px; padding: 0; justify-content: center; }
.ch-botao-leve.ligado { color: var(--laranja-texto); }
.ch-botao-leve .ch-seta { opacity: .6; } .ch-botao-leve .ch-seta svg { width: 12px; height: 12px; }
.ch-dl-btn .t { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block !important; }
.ch-rolagem { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.ch-msgs { max-width: 760px; margin: 0 auto; padding: 12px 24px 40px; display: flex; flex-direction: column; gap: 32px; }
.pg-chat[data-modo="inicio"] .ch-msgs, .pg-chat[data-modo="projeto"] .ch-msgs { max-width: 720px; min-height: 100%; gap: 0; padding-top: 0; }
.pg-chat[data-modo="inicio"] .ch-msgs { justify-content: center; padding-bottom: 8vh; }
.pg-chat:not([data-modo="conversa"]) .ch-rodape { display: none; }
.ch-rodape { position: relative; flex: none; padding: 0 24px 16px; }
.ch-rodape::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: linear-gradient(to top, var(--fundo), transparent); pointer-events: none; }
.ch-ir-fim { position: absolute; top: -54px; left: 50%; transform: translateX(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda-forte); background: var(--painel);
  color: var(--texto-2); box-shadow: var(--shadow-menu); display: grid; place-items: center; padding: 0; animation: hw-surgir .15s var(--ease) both; }
.ch-ir-fim:hover { color: var(--texto); }
.ch-ir-fim svg { width: 17px; height: 17px; }
.ch-compositor { position: relative; max-width: 760px; margin: 0 auto; padding: 0; }

/* tela inicial */
.ch-inicio { display: flex; flex-direction: column; animation: hw-entrar .25s var(--ease) both; }
.ch-saudacao { margin: 0 0 34px; text-align: center; font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 46px; line-height: 1.15; letter-spacing: -.02em; color: var(--texto); }
.ch-saudacao .hw-arte { height: .74em; margin-right: 16px; vertical-align: middle; transform: translateY(-.06em); background: var(--laranja); }
.ch-inicio .ch-slot { position: relative; z-index: 1; animation: hw-entrar .25s var(--ease) 60ms both; }
.ch-sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; animation: hw-entrar .25s var(--ease) 120ms both; }
.ch-pilula { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda-forte); background: transparent; font-size: 13.5px; color: var(--texto-2);
  transition: background .15s var(--ease), color .15s var(--ease); }
.ch-pilula:hover { background: var(--painel-2); color: var(--texto); }
.ch-pilula span { display: grid; color: var(--texto-3); } .ch-pilula svg { width: 15px; height: 15px; }
.ch-inicio-rodape { margin: 26px auto 0; max-width: 520px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--texto-3); }
/* visão do projeto */
.ch-projeto { padding: 40px 0 16px; animation: hw-entrar .25s var(--ease) both; }
.ch-proj-topo { display: flex; align-items: flex-start; gap: 14px; }
.ch-proj-selo { width: 42px; height: 42px; margin-top: 4px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
.ch-proj-selo svg { width: 20px; height: 20px; }
.ch-proj-nomes { flex: 1; min-width: 0; }
.ch-proj-nomes h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -.015em; overflow-wrap: anywhere; color: var(--texto); }
.ch-proj-nomes p { margin: 3px 0 0; font-size: 13.5px; color: var(--texto-3); }
.ch-botao-sec { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; flex: none; border-radius: 10px; border: 1px solid var(--borda-forte); background: transparent; color: var(--texto); font-size: 13px;
  transition: background .15s var(--ease); }
.ch-botao-sec:hover { background: var(--painel-2); }
.ch-botao-sec span { display: inline-flex; } .ch-botao-sec svg { width: 14px; height: 14px; }
.ch-proj-instr { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); }
.ch-rotulo-mini { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.ch-proj-instr-txt { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--texto-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-proj-instr-vazio { margin: 6px 0 0; font-size: 14px; color: var(--texto-3); }
.ch-projeto .ch-slot { position: relative; z-index: 1; margin-top: 24px; }
.ch-proj-sub { margin: 40px 0 8px; font-size: 13px; font-weight: 500; color: var(--texto-3); }
.ch-proj-convs-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.ch-proj-convs-lista li { border-bottom: 1px solid var(--borda); }
.ch-proj-convs-lista button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 6px; border: 0; background: none; text-align: left; color: var(--texto); font-size: 15px; transition: background .15s; }
.ch-proj-convs-lista button:hover { background: var(--painel-2); }
.ch-proj-convs-lista .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-proj-convs-lista .q { flex: none; font-size: 12px; color: var(--texto-3); }
.ch-proj-vazio { margin: 0; padding: 32px 16px; border: 1px dashed var(--borda-forte); border-radius: 14px; text-align: center; font-size: 14px; color: var(--texto-3); }

/* ── mensagens ── */
.ch-msg { animation: hw-entrar .25s var(--ease) both; }
.ch-msg.sem-entrada { animation: none; }
.ch-msg.usuario { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ch-bolha { max-width: 80%; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--chip); color: var(--texto); font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-anexos-msg { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 80%; }
.ch-anexos-msg img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }
.ch-anexo-ico { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; }
.ch-anexo-ico svg { width: 15px; height: 15px; }
.ch-msg-acoes { display: flex; gap: 2px; opacity: 0; transition: opacity .15s var(--ease); }
.ch-msg.usuario .ch-msg-acoes { position: absolute; right: 0; top: 100%; margin-top: 2px; }
.ch-msg:hover .ch-msg-acoes, .ch-msg:focus-within .ch-msg-acoes, .ch-msg-acoes.sempre { opacity: 1; }
.ch-copiar { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 8px; border: 0; background: none; color: var(--texto-3); font-size: 12px; transition: background .15s, color .15s; }
.ch-copiar:hover { background: var(--chip); color: var(--texto); }
.ch-copiar svg { width: 14px; height: 14px; }
.ch-msg.agente { display: flex; align-items: flex-start; gap: 16px; }
.ch-selo { width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--borda-forte); background: var(--painel); display: inline-grid; place-items: center; flex: none; }
.ch-selo .hw-arte { height: 11px; background: var(--texto); }
.ch-selo.pulsando { animation: hw-pulso 1.6s ease-in-out infinite; }
.ch-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 3px; }
.ch-corpo > .ch-msg-acoes { margin: -2px 0 0 -8px; }
.ch-pensando { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 14px; color: var(--texto-3); }
.ch-pontos { display: inline-flex; gap: 4px; }
.ch-pontos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: hw-ponto 1.2s ease-in-out infinite; }
.ch-pontos i:nth-child(2) { animation-delay: .18s; } .ch-pontos i:nth-child(3) { animation-delay: .36s; }
.ch-cursor { display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--laranja); animation: ch-piscar 1s steps(2) infinite; }
@keyframes ch-piscar { 50% { opacity: 0; } }
/* markdown da resposta */
.ch-md { font-size: 15.5px; line-height: 1.7; color: var(--texto); overflow-wrap: anywhere; }
.ch-md > :first-child { margin-top: 0; } .ch-md > :last-child { margin-bottom: 0; }
.ch-md p { margin: .75em 0; }
.ch-md ul, .ch-md ol { margin: .75em 0; padding-left: 1.5em; }
.ch-md li { margin: .3em 0; padding-left: .2em; }
.ch-md li::marker { color: var(--texto-3); }
.ch-md h3, .ch-md h4 { font-family: var(--serif); font-weight: 400; line-height: 1.3; letter-spacing: -.005em; margin: 1.3em 0 .45em; }
.ch-md h3 { font-size: 1.45em; } .ch-md h4 { font-size: 1.2em; }
.ch-md b, .ch-md strong { font-weight: 600; }
.ch-md a { color: var(--laranja-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.ch-md a:hover { text-decoration-thickness: 2px; }
.ch-md hr { border: 0; border-top: 1px solid var(--borda-forte); margin: 1.6em 0; }
.ch-md :not(pre) > code { font-family: var(--mono); font-size: .86em; padding: .12em .38em; border-radius: 5px; background: color-mix(in srgb, var(--texto) 8%, transparent); border: 1px solid var(--borda); color: var(--texto); }
.ch-md blockquote { margin: 1em 0; padding: .1em 0 .1em 1em; border-left: 2px solid color-mix(in srgb, var(--laranja) 70%, transparent); color: var(--texto-2); }
.ch-md blockquote p { margin: .4em 0; }
.ch-md .md-tabela { margin: 1em 0; overflow-x: auto; border: 1px solid var(--borda-forte); border-radius: 10px; }
.ch-md table { width: 100%; border-collapse: collapse; font-size: .925em; }
.ch-md th { text-align: left; font-weight: 600; background: color-mix(in srgb, var(--texto) 4%, transparent); white-space: nowrap; }
.ch-md th, .ch-md td { padding: .55em .85em; border-bottom: 1px solid var(--borda); vertical-align: top; }
.ch-md th + th, .ch-md td + td { border-left: 1px solid var(--borda); }
.ch-md tbody tr:last-child td { border-bottom: 0; }
.ch-md .md-codigo { margin: 1em 0; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--codigo); overflow: hidden; }
.ch-md .md-codigo-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--borda); font-size: 12px; color: var(--texto-3); }
.ch-md .md-ling { font-family: var(--mono); text-transform: lowercase; }
.md-copiar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; font: 12px var(--sans); color: var(--texto-2); transition: background .15s, color .15s; }
.md-copiar:hover { background: var(--chip); color: var(--texto); }
.md-copiar svg { width: 13px; height: 13px; }
.ch-md pre { margin: 0; padding: 12px 16px; overflow-x: auto; font-family: var(--mono); font-size: .85em; line-height: 1.6; background: none; border: 0; border-radius: 0; }
.ch-md pre code { font: inherit; background: none; padding: 0; border: 0; }
/* linha de ferramenta / pensamento */
.ch-linha { border: 0; background: none; padding: 0; }
.ch-linha > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 5px 8px; margin: 0 -8px; border-radius: 9px; font-size: 13.5px; color: var(--texto-2); min-width: 0; transition: background .15s; }
.ch-linha > summary::-webkit-details-marker { display: none; }
.ch-linha > summary:hover { background: var(--painel-2); }
.ch-linha > summary .t { color: var(--texto); font-weight: 500; flex: none; }
.ch-linha > summary .s { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-family: var(--mono); font-size: 12.5px; }
.ch-linha > summary .ch-seta { margin-left: auto; display: inline-flex; opacity: .5; transition: transform .15s var(--ease); flex: none; }
.ch-linha > summary .ch-seta svg { width: 13px; height: 13px; }
.ch-linha[open] > summary .ch-seta { transform: rotate(180deg); }
.ch-ponto-st { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--texto-3); }
.ch-ponto-st.e-ok { background: #3fae7a; }
.ch-ponto-st.e-rodando, .ch-ponto-st.e-aprovada { background: var(--laranja); animation: ch-pulso 1.2s ease-in-out infinite; }
.ch-ponto-st.e-aguardando { background: #e0a43a; }
.ch-ponto-st.e-erro, .ch-ponto-st.e-recusada { background: var(--erro); }
.ch-ponto-st.e-neutro { background: var(--texto-3); }
@keyframes ch-pulso { 50% { opacity: .35; } }
.ch-preco { font-size: 12px; color: var(--texto-2); font-family: var(--mono); flex: none; }
.ch-st { font-size: 12px; flex: none; }
.ch-st.e-erro, .ch-st.e-recusada { color: var(--erro); } .ch-st.e-aguardando { color: var(--aviso-chat, #e0a43a); }
.ch-det { margin: 4px 0 6px 16px; padding-left: 12px; border-left: 2px solid var(--borda); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ch-args { margin: 0; font-size: 12px; color: var(--texto-2); background: var(--palco); border-radius: 8px; padding: 8px 10px; max-width: 100%; overflow-x: auto; white-space: pre-wrap; font-family: var(--mono); }
.ch-prompt { margin: 0; width: 100%; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; color: var(--texto-2); background: var(--palco); border-radius: 8px; padding: 8px 10px; max-height: 220px; overflow-y: auto; }
.ch-resultado { margin: 4px 0 6px 16px; }
.ch-pensou-txt { margin: 4px 0 6px 16px; padding-left: 12px; border-left: 2px solid var(--borda); color: var(--texto-3); font-size: 13px; white-space: pre-wrap; line-height: 1.5; max-height: 260px; overflow-y: auto; }
.ch-erro { font-size: 12.5px; color: var(--erro); }
.ch-aviso { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--texto-3); padding-left: 2px; }
.ch-aviso.erro { color: var(--erro); padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--erro) 30%, transparent); background: color-mix(in srgb, var(--erro) 9%, transparent); }
.ch-aviso .ch-acao { margin-left: auto; color: var(--texto); }
.ch-andamento { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.ch-andamento .s { color: var(--texto-3); }
/* mídia gerada */
.ch-midia { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-midia-item { position: relative; border-radius: 12px; overflow: hidden; background: var(--palco); max-width: 100%; }
.ch-midia-item img, .ch-midia-item video { display: block; max-width: min(100%, 420px); max-height: 420px; width: auto; height: auto; cursor: zoom-in; }
.ch-midia audio { width: 100%; max-width: 420px; }
.ch-midia.mini .ch-midia-item img { max-width: 150px; max-height: 150px; object-fit: cover; }
.ch-ref { position: absolute; left: 8px; top: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.ch-midia-acoes { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.ch-midia-item:hover .ch-midia-acoes, .ch-midia-item:focus-within .ch-midia-acoes { opacity: 1; }
.ch-midia-acoes > * { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(0, 0, 0, .65); color: #fff; display: grid; place-items: center; padding: 0; }
.ch-midia-acoes svg { width: 14px; height: 14px; }
.ch-midia-mais { min-width: 90px; border-radius: 12px; border: 1px dashed var(--borda-forte); background: var(--palco); color: var(--texto); font-size: 18px; font-weight: 600; padding: 0 16px; }
.ch-midia-mais:hover { border-color: var(--laranja); }
.ch-acao { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--borda-forte); background: var(--painel); color: var(--texto-2); font-size: 12.5px; white-space: nowrap; max-width: 220px;
  transition: border-color .15s, color .15s, background .15s; }
.ch-acao span { overflow: hidden; text-overflow: ellipsis; }
.ch-acao:hover, .ch-acao:focus-visible { border-color: var(--laranja); color: var(--texto); }
.ch-acao svg { width: 14px; height: 14px; flex: none; }
.ch-acoes-res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* permissão (atalhos 1/2) */
.ch-permissao { border: 1px solid #e0a43a; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, #e0a43a 7%, var(--painel)); margin-top: 4px; }
.ch-perm-t { display: flex; flex-direction: column; gap: 2px; }
.ch-perm-t b { font-size: 14px; }
.ch-perm-acoes { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.ch-opcao { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--borda-forte); background: var(--painel); color: var(--texto); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.ch-opcao:hover, .ch-opcao:focus-visible { border-color: var(--laranja); }
.ch-opcao.principal { border-color: var(--laranja); }
.ch-opcao kbd { font-family: var(--mono); font-size: 11px; min-width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 5px; background: var(--chip); color: var(--texto-2); }
.ch-perm-lista { display: flex; flex-direction: column; gap: 6px; }
.ch-perm-item { border: 1px solid var(--borda); border-radius: 10px; background: var(--painel); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.ch-perm-item.e-recusada { opacity: .55; }
.ch-perm-item.e-aprovada { border-color: color-mix(in srgb, #3fae7a 45%, var(--borda)); }
.ch-perm-cab { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; font-size: 13.5px; }
.ch-perm-cab b { flex: none; font-weight: 600; }
.ch-perm-modelo { flex: 1; min-width: 0; color: var(--texto-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-perm-cab .ch-preco { margin-left: auto; }
.ch-perm-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-perm-prompt { font-size: 12.5px; line-height: 1.5; color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-perm-prompt.aberto { display: block; max-height: 260px; overflow-y: auto; }
.ch-perm-item-acoes { display: flex; gap: 6px; }
.ch-perm-auto { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-perm-auto .link-url { color: var(--texto-2); }

/* ── caixa de mensagem ── */
.ch-caixa { position: relative; display: flex; flex-direction: column; border: 1px solid var(--borda-forte); border-radius: 22px; background: var(--painel); box-shadow: var(--shadow-composer);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.ch-caixa:focus-within { border-color: color-mix(in srgb, var(--texto) 24%, transparent); }
.ch-caixa.arrastando { border-color: var(--laranja); }
.ch-caixa textarea { display: block; width: 100%; min-height: 56px; max-height: 260px; resize: none; border: 0; background: none; outline: none; padding: 16px 20px 4px; font: inherit; font-size: 15.5px; line-height: 1.55; color: var(--texto); }
.ch-caixa textarea::placeholder { color: var(--texto-3); }
.ch-caixa textarea:focus-visible { outline: none; }
.ch-anexos { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px 0; }
.ch-anexo { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--chip); display: grid; place-items: center; }
.ch-anexo img { width: 100%; height: 100%; object-fit: cover; }
.ch-anexo > span svg { width: 20px; height: 20px; }
.ch-anexo button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; padding: 0; }
.ch-anexo button svg { width: 11px; height: 11px; }
.ch-anexo .carregando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); }
.ch-barra { display: flex; align-items: center; gap: 2px; padding: 6px 12px 12px; min-width: 0; }
.ch-mais-menu { width: auto; min-width: 36px; padding: 0 8px; gap: 6px; grid-auto-flow: column; }
.ch-mais-n { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.ch-mais-n svg { width: 13px; height: 13px; }
.ch-controles { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.ch-modo { border: 1px solid var(--borda); }
.ch-modo.auto { border-color: color-mix(in srgb, #3fae7a 50%, var(--borda)); color: var(--texto); }
.ch-dicas { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; min-width: 0; padding-left: 8px; }
.ch-dica { min-width: 0; text-align: right; }
.ch-dica:empty { display: none; }
.ch-dica-enter { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; opacity: 0; transition: opacity .2s var(--ease); }
.ch-caixa:focus-within .ch-dica-enter { opacity: 1; }
.ch-dica:not(:empty) + .ch-dica-enter { display: none; }
.ch-enviar { width: 36px; height: 36px; margin-left: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--laranja); color: #fff; display: grid; place-items: center; flex: none;
  transition: background .15s var(--ease), transform .15s var(--ease); }
.ch-enviar:hover:not(:disabled) { background: #ff5e1f; }
.ch-enviar:active:not(:disabled) { transform: scale(.95); }
.ch-enviar:disabled { background: var(--chip); color: var(--texto-3); opacity: 1; cursor: not-allowed; }
.ch-enviar svg { width: 18px; height: 18px; stroke-width: 2.3; }
.ch-enviar.parar { background: var(--texto); color: var(--fundo); }
.ch-enviar.parar svg { width: 14px; height: 14px; }
.ch-enviar.parar svg rect { fill: currentColor; stroke: none; }
.ch-enviar.com-texto { width: auto; border-radius: 18px; padding: 0 14px; display: inline-flex; gap: 6px; font-size: 12.5px; font-weight: 600; }
.ch-aviso-envio { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 0 6px; font-size: 12.5px; color: var(--aviso-chat, #e0a43a); }
.ch-aviso-envio[hidden] { display: none; }
.ch-aviso-envio svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ── menus e modais do chat (ficam no body: levam .ch-tema) ── */
.popover.ch-pop { background: var(--painel); border-color: var(--borda-forte); border-radius: 14px; box-shadow: var(--shadow-menu); color: var(--texto); animation: hw-surgir .15s var(--ease) both; }
.ch-pop .pop-rolagem { padding: 6px; }
.ch-pop .pop-titulo { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); padding: 6px 10px 4px; }
.ch-pop .pop-item { gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; }
.ch-pop .pop-item:hover, .ch-pop .pop-item:focus-visible { background: var(--chip); outline: none; }
.ch-pop .pop-item .ico svg { width: 15px; height: 15px; }
.ch-pop .pop-item .rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-pop .pop-item .rot.mono { font-family: var(--mono); font-size: 12.5px; }
.ch-pop .pop-item.perigo, .ch-pop .pop-item.perigo .ico { color: var(--erro); }
.ch-pop .pop-item .check { margin-left: 0; }
.ch-pop-voltar { color: var(--texto-3) !important; font-size: 12.5px !important; }
.pop-sep { height: 1px; margin: 4px 6px; background: var(--borda); }
.ch-pop-nota { padding: 4px 10px 8px; font-size: 12px; line-height: 1.45; color: var(--texto-3); }
.ch-pop-lista { max-height: 240px; overflow-y: auto; }
.ch-tog { position: relative; width: 32px; height: 18px; flex: none; border-radius: 999px; background: var(--chip-hover); transition: background .15s var(--ease); }
.ch-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ch-tog.lig { background: var(--laranja); }
.ch-tog.lig::after { left: 16px; }
.modal.ch-modal { width: min(540px, 100%); background: var(--painel); color: var(--texto); border-color: var(--borda-forte); box-shadow: var(--shadow-menu); border-radius: 18px; }
.ch-modal .modal-topo h3 { font-style: normal; font-size: 26px; }
.ch-modal .modal-topo .icone-btn { background: none; }
.ch-modal .modal-topo .icone-btn:hover { background: var(--chip); }
.ch-form { display: flex; flex-direction: column; gap: 18px; }
.ch-form .campo label { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.ch-opcional { font-weight: 400; color: var(--texto-3); }
.ch-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-cor { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; color: #fff; display: grid; place-items: center; transition: transform .15s var(--ease); }
.ch-cor:hover { transform: scale(1.1); }
.ch-cor.ativa { box-shadow: 0 0 0 2px var(--painel), 0 0 0 4px var(--texto); }
.ch-cor svg { width: 15px; height: 15px; stroke-width: 2.6; }
.ch-instr { min-height: 160px; font-size: 14px; line-height: 1.6; }
.ch-instr-rodape { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--texto-3); }
.ch-contador { flex: none; font-variant-numeric: tabular-nums; }
.ch-erro-form { padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--erro) 30%, transparent); background: color-mix(in srgb, var(--erro) 9%, transparent); color: var(--erro); font-size: 13.5px; }
.ch-erro-form[hidden] { display: none; }
.ch-form-acoes { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.ch-confirmar .ch-form-acoes { padding: 0 18px 18px; }
.ch-confirmar .modal-topo { border-bottom: 0; padding-bottom: 4px; }
.ch-confirmar .modal-corpo { padding-top: 4px; }
.ch-conf-txt { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texto-2); }
.ch-conf-det { margin: 8px 0 0; font-size: 13.5px; color: var(--texto-3); }
.botao.ch-perigo { background: #c4342b; color: #fff !important; }
.botao.ch-perigo:hover { background: #d63b31; }
/* modais antigos do chat (skills, PCs) */
.ch-skills { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow-y: auto; }
.ch-skill { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.ch-skill.desligada { opacity: .55; }
.ch-skill-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-skill-t b { font-family: var(--mono); font-size: 13px; }
.ch-skill .ajuda { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-skill-acoes { display: flex; align-items: center; gap: 14px; }
.ch-skill-nova summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.ch-chave { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-2); cursor: pointer; user-select: none; }
.ch-chave input { position: absolute; opacity: 0; pointer-events: none; }
.ch-chave .trilho { width: 30px; height: 17px; border-radius: 9px; background: var(--chip); position: relative; transition: background .15s; flex: none; }
.ch-chave .trilho::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--texto-3); transition: transform .15s, background .15s; }
.ch-chave input:checked + .trilho { background: color-mix(in srgb, var(--laranja) 45%, transparent); }
.ch-chave input:checked + .trilho::after { transform: translateX(13px); background: var(--laranja); }
.ch-chave input:focus-visible + .trilho { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* ── celular: gaveta, alvos de toque e "…" sempre à vista ── */
@media (max-width: 860px) {
  .pg-chat, .pg-chat.recolhida { grid-template-columns: minmax(0, 1fr); margin: 0; border: 0; border-radius: 0; height: calc(100dvh - 70px); position: relative; }
  .ch-lado { position: fixed; top: 0; bottom: 0; left: 0; z-index: 46; width: 86%; max-width: 320px; transform: translateX(-100%); visibility: hidden;
    transition: transform .25s var(--ease), visibility .25s; }
  .pg-chat.lista-aberta .ch-lado { transform: none; visibility: visible; box-shadow: var(--shadow-menu); }
  .pg-chat .ch-trilho { display: none !important; }
  .pg-chat .ch-lado-cheio { display: flex !important; }
  .ch-gaveta-fundo { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
  .pg-chat.lista-aberta .ch-gaveta-fundo { opacity: 1; pointer-events: auto; }
  .so-cel, .ch-gaveta-btn, .ch-nova-cel { display: inline-grid !important; }
  .so-desk { display: none !important; }
  .ch-nova kbd { display: none; }
  .ch-topo { height: 50px; padding: 0 4px; gap: 0; }
  .ch-titulo { text-align: center; padding: 0 4px; }
  .ch-botao-leve span.t, .ch-botao-leve > span:not(.ch-ponto-st):not(.ch-seta):not(:first-child) { display: none !important; }
  .ch-modo > span { display: inline !important; }
  .ch-dl-btn .t { display: none !important; }
  .ch-chip-proj { max-width: 34%; margin-right: 2px; }
  .ch-custo { display: none; }
  .ch-msgs { padding: 8px 16px 28px; gap: 26px; }
  .pg-chat[data-modo="inicio"] .ch-msgs, .pg-chat[data-modo="projeto"] .ch-msgs { padding-left: 16px; padding-right: 16px; }
  .ch-rodape { padding: 0 10px 10px; }
  .ch-bolha { max-width: 88%; }
  .ch-msg.usuario .ch-msg-acoes { position: static; margin: -4px 0 0; }
  .ch-msg.agente { gap: 12px; }
  .ch-saudacao { font-size: 34px; margin-bottom: 24px; }
  .ch-saudacao .hw-arte { margin-right: 10px; }
  .ch-projeto { padding-top: 20px; }
  .ch-proj-nomes h2 { font-size: 29px; }
  .ch-botao-sec .t { display: none; }
  .ch-dica-enter { display: none; }
  .ch-controles { flex: 0 1 auto; overflow: hidden; }
  .ch-proj-n { display: none; }
  .ch-mais { opacity: 1; }
  .ch-proj .ch-mais { position: static; }
}
@media (pointer: coarse) {
  .ch-ico-btn, .ch-mais, .ch-chevron-btn, .ch-botao-leve.so-icone, .ch-copiar, .ch-ir-fim { min-width: 44px; min-height: 44px; }
  .ch-item, .ch-proj, .ch-nova, .ch-proj-novo, .ch-botao-leve, .ch-pilula, .ch-acao, .ch-chip-proj { min-height: 44px; }
  .ch-enviar { width: 44px; height: 44px; }
  .ch-pop .pop-item { min-height: 44px; }
  .ch-midia-acoes > * { width: 40px; height: 40px; }
}
@media (hover: none) { .ch-mais, .ch-msg-acoes, .ch-midia-acoes { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pg-chat, .pg-chat *, .ch-tema, .ch-tema * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ch-selo.pulsando, .ch-pontos i, .ch-ponto-st { animation: none !important; opacity: 1 !important; }
}

/* seletor do estúdio: cartão de áudio com a fala em destaque */
.audio-cartao { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; text-align: left; }
.audio-cartao-ico { color: var(--laranja); display: inline-flex; }
.audio-cartao-ico svg { width: 20px; height: 20px; }
.audio-cartao-fala { flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--texto); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.audio-cartao-meta { font-size: 11.5px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-cartao-meta.forte { color: var(--texto-2); font-weight: 500; }
.audio-cartao { gap: 5px; } .audio-cartao-fala { margin-bottom: 4px; }
.chips-mov { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips-mov .chip { font-size: 12px; height: 28px; }
.estudio-item.preparando { outline: 2px solid var(--laranja); }
.estudio-preparando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600; }

/* organizar pastas com IA */
.org-corpo { display: flex; flex-direction: column; gap: 10px; max-height: 66vh; overflow-y: auto; }
.org-barra { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.org-barra i { display: block; height: 100%; background: var(--laranja); transition: width .4s; }
.org-linha { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--borda); border-radius: 12px; padding: 8px 10px; }
.org-info { display: flex; flex-direction: column; gap: 4px; }
.org-info .texto { height: 34px; }
.org-thumbs { display: flex; gap: 4px; }
.org-thumbs img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
@media (max-width: 700px) { .org-linha { grid-template-columns: auto 1fr; } .org-thumbs { grid-column: 1 / -1; } }

/* lista compacta (Imagem e Biblioteca) */
.lista-c { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 20px; }
.lc-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--borda); background: var(--painel); cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 112px; }
.lc-item:hover { border-color: var(--borda-forte); background: var(--painel-2); }
.lc-item.selecionado { border-color: var(--laranja); box-shadow: 0 0 0 2px color-mix(in srgb, var(--laranja) 35%, transparent); }
.lc-mini { position: relative; width: 96px; height: 96px; border-radius: 9px; overflow: hidden; background: var(--palco); display: grid; place-items: center; color: var(--texto-3); }
.lc-mini img { width: 100%; height: 100%; object-fit: cover; }
.lc-mini svg { width: 22px; height: 22px; }
.lc-mini.falhou { color: var(--erro); }
.lc-play { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.lc-play svg { width: 12px; height: 12px; }
.lc-n { position: absolute; left: 6px; top: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; }
.lc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-titulo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lc-titulo b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-tags { font-size: 12px; color: var(--texto-3); white-space: nowrap; font-family: var(--mono, monospace); }
.lc-prompt { font-size: 13px; color: var(--texto-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-prompt.lc-status { color: var(--texto-3); }
.lc-item.falhou .lc-prompt { color: var(--erro); }
.lc-meta { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-acoes { display: flex; gap: 2px; }
.lc-acoes .icone-btn, .lc-acoes > button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--texto-2); }
.lc-acoes .icone-btn:hover, .lc-acoes > button:hover { background: var(--chip); color: var(--texto); }
.lc-acoes svg { width: 16px; height: 16px; }
@media (max-width: 700px) { .lc-item { grid-template-columns: 72px minmax(0, 1fr); } .lc-mini { width: 72px; height: 72px; } .lc-acoes { grid-column: 1 / -1; justify-content: flex-end; } }
.gasto-chave td { background: var(--painel-2); }

/* editor grande do prompt */
.modal.modal-largo { width: min(1100px, 100%); }
.editor-prompt { width: 100%; min-height: 58vh; resize: vertical; font-size: 15px; line-height: 1.6; padding: 14px 16px; }

/* ───────── organização: destino da geração, busca, filtros de data, separador por dia e aprovados ───────── */
.gerar-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gerar-col .gerar-grande { flex: 1; }
.destino-gerar { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; min-width: 0; margin: 6px auto 0; padding: 2px 8px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); font-size: 11.5px; line-height: 1.4; cursor: pointer; }
.gerar-col .destino-gerar { margin-top: 0; width: 150px; }
.destino-gerar:hover { color: var(--texto); background: var(--chip); }
.destino-gerar svg { width: 12px; height: 12px; flex: none; }
.destino-gerar .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.destino-gerar:not(.sem) svg { color: var(--laranja-texto); }
.busca-mini { position: relative; display: flex; align-items: center; color: var(--texto-3); }
.busca-mini svg { position: absolute; left: 9px; width: 14px; height: 14px; pointer-events: none; }
.busca-mini input { height: 32px; width: 170px; padding-left: 30px; font-size: 13px; transition: width .2s; }
.busca-mini input:focus, .busca-mini input:not(:placeholder-shown) { width: 230px; }
.filtro-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--borda-forte); flex: none; }
.filtros { align-items: center; }
.sep-dia { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--texto-3); padding: 10px 4px 2px; }
.sep-dia:first-child { padding-top: 0; }
.voz-hist-dir { display: flex; align-items: center; gap: 8px; }
.btn-favorito.ligado, .btn-favorito.ligado:hover { color: #f5b301 !important; }
.btn-favorito.ligado svg { fill: currentColor; }
.btn-favorito:disabled { opacity: 1; cursor: default; }
.cartao .sobre .acoes .btn-favorito.ligado { background: rgba(255, 255, 255, .16); }
.selo-aprovado, .estudio-aprovado { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #f5b301; display: grid; place-items: center; pointer-events: none; }
.estudio-aprovado { top: auto; bottom: 6px; right: 6px; }
.selo-aprovado svg, .estudio-aprovado svg { width: 13px; height: 13px; fill: currentColor; }
.lc-aprovado { color: #f5b301; display: inline-grid; place-items: center; flex: none; }
.lc-aprovado svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 860px) {
  .gerar-col { width: 100%; }
  .gerar-col .destino-gerar { width: auto; }
  .busca-mini input, .busca-mini input:focus, .busca-mini input:not(:placeholder-shown) { width: 140px; }
}

/* Voz: filtros, nome do áudio e "mostrar mais" */
.voz-filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.filtro-n { margin-left: 6px; font-size: 11px; color: var(--texto-3); }
.voz-titulo { min-width: 0; display: grid; gap: 1px; }
.voz-titulo b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voz-titulo p { margin: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.voz-titulo p.ajuda { font-size: 12px; -webkit-line-clamp: 1; }
.voz-renomear { height: 34px; font-size: 14px; }
.voz-mais { justify-self: center; margin: 6px auto 0; }

/* biblioteca de vozes: barra de busca/filtros, seções por grupo, cartões compactos */
.vozes-grade.vozes-bib { display: flex; flex-direction: column; gap: 12px; }
.vozes-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vozes-filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.vozes-corpo { display: flex; flex-direction: column; gap: 14px; }
.vozes-secao { display: flex; flex-direction: column; gap: 8px; }
.vozes-bib .vozes-grade { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vozes-bib .voz-card { gap: 8px; padding: 10px; border-radius: 14px; }
.voz-card .voz-play { flex: none; color: var(--laranja-texto); }
.voz-usar { height: 30px; font-size: 13px; }
.voz-editar { display: flex; flex-direction: column; gap: 6px; padding: 6px; }