/* Modo visual do terminal — ver visual.js. Tokens do index.html. */

#vsChave {
  position:absolute; z-index:25; top:10px; left:12px; display:flex; gap:2px; padding:3px; border-radius:11px;
  background:var(--vidro-denso); border:1px solid var(--vidro-brd);
  -webkit-backdrop-filter:var(--desfoque-leve); backdrop-filter:var(--desfoque-leve); box-shadow:0 6px 18px rgba(0,0,0,.35);
}
#vsChave[hidden] { display:none; }
#vsChave button {
  border:none; background:none; color:var(--muted); font:inherit; font-size:12px; font-weight:650;
  padding:5px 11px; border-radius:8px; cursor:pointer;
}
#vsChave button.on { background:rgba(56,189,248,.16); color:var(--accent); }
#vsChave button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

#visual {
  position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; border-radius:14px; overflow:hidden;
  background:var(--vidro-denso); border:1px solid var(--vidro-brd);
  -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque);
}
#visual[hidden] { display:none; }
.vs-rolo {
  flex:1; min-height:0; overflow-y:auto; padding:56px 18px 150px; display:flex; flex-direction:column; gap:22px; scroll-behavior:auto;
  /* o texto some sob a chave Terminal|Visual, em vez de passar por baixo dela */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 52px); mask-image:linear-gradient(to bottom, transparent 0, #000 52px);
}
.vs-vazio { margin:auto; max-width:420px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.5; display:flex; flex-direction:column; gap:6px; }
.vs-vazio b { color:var(--text); font-size:15px; }

.vs-turno { display:flex; flex-direction:column; gap:10px; width:min(820px, 100%); margin:0 auto; }
.vs-sist { align-self:center; font-size:11.5px; color:var(--muted); padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.04); }
.vs-pedido { display:flex; justify-content:flex-end; }
.vs-bolha {
  max-width:min(620px, 88%); padding:10px 14px; border-radius:16px 16px 4px 16px; white-space:pre-wrap; overflow-wrap:anywhere;
  background:rgba(56,189,248,.16); border:1px solid rgba(56,189,248,.32); color:var(--text); font-size:14px; line-height:1.45;
}
.vs-bolha small { display:block; margin-top:4px; color:var(--muted); font-size:11.5px; }

.vs-trilha { display:flex; flex-direction:column; gap:2px; padding-left:12px; border-left:2px solid rgba(255,255,255,.07); margin-left:4px; }
.vs-mais {
  align-self:flex-start; border:none; background:none; color:var(--muted); font:inherit; font-size:12px; padding:4px 6px; cursor:pointer; border-radius:6px;
}
.vs-mais:hover { color:var(--text); }
.vs-fala { font-size:13px; color:var(--muted); line-height:1.5; padding:4px 6px; }
.vs-fala p { margin:0 0 4px; }
.vs-passo { border-radius:8px; }
.vs-passo.aberto { background:rgba(255,255,255,.03); }
.vs-linha {
  width:100%; display:flex; align-items:center; gap:9px; padding:4px 6px; border:none; background:none; color:var(--text);
  font:inherit; font-size:12.5px; text-align:left; cursor:pointer; border-radius:8px; min-width:0;
}
.vs-linha:hover { background:rgba(255,255,255,.05); }
.vs-linha:focus-visible, .vs-mais:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.vs-ic { flex:none; width:18px; text-align:center; font-style:normal; font-size:11px; color:var(--muted); font-family:var(--mono); }
.vs-verbo { flex:none; color:var(--muted); }
.vs-alvo { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:12px; }
.vs-st { flex:none; width:16px; text-align:center; font-style:normal; font-size:11.5px; }
.vs-passo.ok .vs-st { color:var(--ok); }
.vs-passo.erro .vs-st { color:var(--err); }
.vs-passo.vivo .vs-st::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:vs-pulso 1.2s ease-in-out infinite; }
.vs-det { padding:2px 8px 8px 33px; display:flex; flex-direction:column; gap:6px; }
.vs-det pre, .vs-resultado pre {
  margin:0; max-height:260px; overflow:auto; padding:8px 10px; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere;
  background:rgba(0,0,0,.35); border:1px solid var(--vidro-brd); color:var(--text); font:11.5px/1.45 var(--mono);
}
.vs-saida.erro { border-color:rgba(248,113,113,.45); }
.vs-diff { display:flex; flex-direction:column; gap:3px; }
.vs-diff pre.menos { background:rgba(248,113,113,.09); border-color:rgba(248,113,113,.3); }
.vs-diff pre.mais { background:rgba(45,212,167,.09); border-color:rgba(45,212,167,.3); }
.vs-diff pre:empty { display:none; }
.vs-caminho { font-size:11px; color:var(--muted); font-family:var(--mono); overflow-wrap:anywhere; }

.vs-todos { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--vidro-brd); font-size:12.5px; }
.vs-todos b { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.vs-todo { display:flex; gap:8px; color:var(--text); }
.vs-todo i { font-style:normal; width:14px; flex:none; color:var(--muted); }
.vs-todo.completed { color:var(--muted); text-decoration:line-through; }
.vs-todo.completed i { color:var(--ok); }
.vs-todo.in_progress i { color:var(--accent); }

.vs-vivo { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--accent); padding:4px 6px; }
.vs-giro { display:inline-block; animation:vs-gira 2.4s linear infinite; }
@keyframes vs-gira { to { transform:rotate(360deg); } }
@keyframes vs-pulso { 50% { opacity:.25; } }

.vs-resultado {
  display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(rgba(45,212,167,.07), rgba(45,212,167,.02)); border:1px solid rgba(45,212,167,.3);
  box-shadow:var(--vidro-topo);
}
.vs-resultado.interrompido { background:rgba(245,181,68,.06); border-color:rgba(245,181,68,.35); }
.vs-resultado header { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--muted); }
.vs-resultado header b { color:var(--ok); font-size:13px; }
.vs-resultado.interrompido header b { color:var(--warn); }
.vs-chip { padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); font-size:11.5px; color:var(--text); }
.vs-chip.ok { color:var(--ok); background:rgba(45,212,167,.12); }

.vs-md { font-size:14px; line-height:1.6; color:var(--text); overflow-wrap:anywhere; min-width:0; }
.vs-md > :first-child { margin-top:0; }
.vs-md > :last-child { margin-bottom:0; }
.vs-md p { margin:0 0 10px; }
.vs-md h1, .vs-md h2, .vs-md h3 { font-size:15px; margin:14px 0 6px; }
.vs-md ul, .vs-md ol { margin:0 0 10px; padding-left:22px; }
.vs-md li { margin:2px 0; }
.vs-md code { font:12.5px var(--mono); padding:1px 5px; border-radius:5px; background:rgba(255,255,255,.08); }
.vs-md pre code { padding:0; background:none; }
.vs-md a { color:var(--accent); }
.vs-md strong { color:#fff; }
.vs-md table { border-collapse:collapse; display:block; overflow-x:auto; max-width:100%; margin:4px 0 10px; font-size:13px; }
.vs-md th, .vs-md td { border:1px solid var(--vidro-brd); padding:5px 9px; text-align:left; vertical-align:top; }
.vs-md th { background:rgba(255,255,255,.05); }
.vs-md blockquote { margin:0 0 10px; padding:2px 12px; border-left:3px solid var(--vidro-brd); color:var(--muted); }

.vs-prints { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px; }
.vs-img { display:block; max-width:100%; max-height:360px; border-radius:10px; border:1px solid var(--vidro-brd); background:rgba(255,255,255,.03); cursor:zoom-in; min-height:40px; object-fit:contain; }
.vs-det .vs-img { max-width:min(420px, 100%); }

@media (max-width:860px) {
  #vsChave { top:8px; left:8px; }
  .vs-rolo { padding:52px 10px 140px; gap:18px; }
  .vs-bolha { max-width:92%; }
  .vs-det { padding-left:12px; }
}
@media (prefers-reduced-motion: reduce) { .vs-giro, .vs-passo.vivo .vs-st::before { animation:none; } }

/* a sugestão do Claude Code (o texto cinza da caixa do terminal) como botão, no pé do modo visual */
.vs-sugestao {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:min(720px, calc(100% - 24px));
  display:flex; gap:6px; z-index:2; animation:vs-sobe .2s ease-out;
}
.vs-sugestao[hidden] { display:none; }
@keyframes vs-sobe { from { opacity:0; transform:translate(-50%, 8px); } }
.vs-sug-enviar {
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; cursor:pointer; text-align:left;
  background:var(--vidro-denso); border:1px solid rgba(56,189,248,.4); color:var(--text); font:inherit; font-size:13.5px;
  -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque); box-shadow:var(--vidro-topo), 0 10px 28px rgba(0,0,0,.45);
}
.vs-sug-enviar:hover { border-color:var(--accent); background:rgba(56,189,248,.12); }
.vs-sug-enviar i { font-style:normal; flex:none; }
.vs-sug-enviar span { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.vs-sug-enviar span { overflow-wrap:anywhere; }
.vs-sug-enviar small { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.vs-sug-enviar b { flex:none; color:var(--accent); font-size:15px; }
.vs-sug-editar {
  flex:none; width:44px; border-radius:14px; cursor:pointer; font-size:15px; color:var(--muted);
  background:var(--vidro-denso); border:1px solid var(--vidro-brd); -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque);
}
.vs-sug-editar:hover { color:var(--text); border-color:rgba(255,255,255,.25); }
.vs-sug-enviar:focus-visible, .vs-sug-editar:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:860px) { .vs-sugestao { bottom:8px; width:calc(100% - 16px); } }

/* o pedido recém-enviado, antes de o transcript confirmar */
.vs-pendente .vs-bolha { opacity:.85; }
.vs-enviado { display:block; margin-top:4px; text-align:right; font-size:11px; color:var(--accent); }
.vs-vivo.lento { color:var(--warn); }
.vs-pendente { animation:vs-sobe-turno .18s ease-out; }
@keyframes vs-sobe-turno { from { opacity:0; transform:translateY(6px); } }

/* o voo do balão da caixa até a conversa (visual.js, voar) */
.vs-pendente.voando .vs-bolha { opacity:0; }
.vs-pendente.voando .vs-vivo { opacity:0; }
.vs-pendente .vs-vivo { transition:opacity .25s ease .2s; }
.vs-fantasma {
  position:fixed; z-index:200; margin:0; box-sizing:border-box; overflow:hidden; pointer-events:none;
  max-width:none !important; white-space:pre-wrap; overflow-wrap:anywhere;
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(56,189,248,.35);
}
.vs-pendente .vs-enviado { animation:vs-aparece .3s ease .45s both; }
@keyframes vs-aparece { from { opacity:0; transform:translateY(2px); } }

/* fotos anexadas ao pedido (no balão) e a miniatura do que o Claude abriu (na trilha) */
.vs-anexos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; justify-content:flex-end; }
.vs-anexos .vs-img { max-width:220px; max-height:220px; border-radius:10px; }
.vs-bolha .vs-anexos:first-child { margin-top:0; }
.vs-mini { max-width:180px !important; max-height:130px !important; margin:2px 0 6px 33px; }
@media (max-width:860px) { .vs-anexos .vs-img { max-width:160px; max-height:180px; } }

/* mídia citada no texto do Claude (embaixo da fala) e o VÍDEO na conversa (visual.js, cartaoVideo) */
.vs-midias { display:flex; flex-direction:column; gap:8px; margin:2px 0 8px; }
.vs-trilha .vs-midias { padding-left:6px; }
.vs-anexos.vs-do-texto { justify-content:flex-start; margin-top:0; }
.vs-do-texto .vs-img.falhou { display:none; }
.vs-video {
  white-space:normal; display:flex; flex-direction:column; gap:6px; max-width:100%; min-width:0;
  text-align:left; font-size:13px; color:var(--text);
}
.vs-bolha .vs-video { margin-top:6px; margin-left:auto; }
.vs-v-espera {
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; width:min(360px, 100%);
  background:rgba(255,255,255,.04); border:1px solid var(--vidro-brd);
}
.vs-v-espera > span:not([class]) { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.vs-v-espera b { font-weight:600; font-size:13px; }
.vs-v-espera small { color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-video.erro .vs-v-espera { border-color:rgba(248,113,113,.4); width:min(460px, 100%); flex-wrap:wrap; }
.vs-video.erro small { white-space:normal; overflow-wrap:anywhere; }
.vs-v-ic { flex:none; color:var(--err); font-size:16px; }
.vs-v-giro {
  flex:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.15); border-top-color:var(--accent);
  animation:vs-gira .8s linear infinite;
}
.vs-v-quadro { position:relative; width:100%; border-radius:12px; overflow:hidden; background:#000; border:1px solid var(--vidro-brd); }
.vs-v-quadro video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.vs-v-pe { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.vs-v-nome { flex:1 1 140px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-family:var(--mono); }
.vs-v-nome small { font-family:ui-sans-serif, system-ui, sans-serif; color:var(--muted); font-size:11.5px; }
.vs-v-btn {
  flex:none; border:1px solid var(--vidro-brd); background:var(--vidro-leve); color:var(--text); font:inherit; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:8px; cursor:pointer; box-shadow:var(--vidro-topo);
}
.vs-v-btn:hover { border-color:var(--accent); color:var(--accent); }
.vs-v-btn:disabled { opacity:.5; pointer-events:none; }
.vs-v-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
@media (prefers-reduced-motion: reduce) { .vs-v-giro { animation-duration:2s; } }
/* player estreito (vídeo em pé): o nome numa linha, os botões na de baixo */
.vs-video.pronto { container-type:inline-size; }
@container (max-width:340px) { .vs-v-nome { flex-basis:100%; } }