/* ==========================================================================
   VIA — assistente de IA (js/via/*)
   Gaveta à direita, cartões de comando, biblioteca e os botões ★ / ✨ ao lado
   dos campos do Pipeline. Só usa as variáveis do tema (app.css / theme.css),
   então o claro e o escuro saem de graça.
   ========================================================================== */

/* ---------------------------------------------------------------- gaveta */

.panel.via-gaveta {
  position: fixed;
  top: var(--rail-top, 76px);
  right: 14px;
  bottom: 34px;
  width: min(440px, calc(100vw - 28px));
  z-index: 330;              /* aberta, fica por cima das colunas (120) e da barra de vídeo (320); abaixo do aviso (500) */
  max-height: none;
  background: var(--panel-solid);
}
@media (max-width: 820px) {
  .panel.via-gaveta { left: 8px; right: 8px; width: auto; bottom: 8px; }
}

.via-head { cursor: default; }
.via-head .panel-title b { display: inline-flex; align-items: center; gap: 6px; }
.via-logo { color: var(--accent); font-size: 14px; line-height: 1; }
.via-head-acts { display: flex; align-items: center; gap: 4px; }
.via-hbtn {
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink-2);
  font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.via-hbtn:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,.07); }
.via-hbtn:disabled { opacity: .4; cursor: default; }

.via-tabs { margin: 10px 12px 0; }
.via-corpo { flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- mensagens */

.via-vazio p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.via-vazio b { color: var(--ink); }
.via-sugestoes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
.via-sugestoes .btn { text-align: left; white-space: normal; }

.via-msgs { display: flex; flex-direction: column; gap: 9px; }
.via-msg { font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.via-msg.eu {
  align-self: flex-end; max-width: 88%;
  padding: 7px 11px; border-radius: 12px 12px 3px 12px;
  background: rgba(255, 216, 77, .14); border: 1px solid rgba(255, 216, 77, .32); color: var(--ink);
  white-space: pre-wrap;
}
.via-msg.eu.descartado { opacity: .55; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.via-msg.ela { color: var(--ink); }
.via-msg.ela p { margin: 0 0 7px; }
.via-msg.ela p.via-h { font-weight: 650; color: var(--ink); margin-top: 4px; }
.via-msg.ela ul { margin: 0 0 7px; padding-left: 18px; }
.via-msg.ela li { margin: 2px 0; }
.via-msg.ela code, .via-cartao-op, .via-ctx code {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255,255,255,.08); color: var(--ink-2);
}
.via-msg.ela pre, .via-valor {
  margin: 0 0 7px; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(0,0,0,.25); font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.via-img { display: block; max-width: 100%; max-height: 140px; border-radius: 8px; margin-bottom: 6px; }
.via-sub { display: block; font-size: 10.5px; color: var(--ink-3); }

.via-passo { margin: 0; font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }
.via-pontos { display: inline-flex; gap: 3px; }
.via-pontos i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: via-p 1s infinite ease-in-out; }
.via-pontos i:nth-child(2) { animation-delay: .15s; }
.via-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes via-p { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .via-pontos i { animation: none; opacity: .7; } }

.via-nota { margin: 0; padding: 7px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.55;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--ink-2); }
.via-nota.erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between;
  background: rgba(255, 138, 128, .1); border-color: rgba(255, 138, 128, .4); color: var(--err); }

/* ---------------------------------------------------------------- cartões */

.via-cartao {
  padding: 10px 11px; border-radius: 11px;
  border: 1px solid rgba(255, 216, 77, .38); border-left: 3px solid var(--accent);
  background: rgba(255, 216, 77, .06);
}
.via-cartao-t { font-size: 12px; color: var(--ink-2); margin-bottom: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.via-cartao-t b { color: var(--ink); }
.via-cartao-x { margin: 0 0 7px; font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }
.via-tag {
  font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px;
  padding: 1px 6px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
textarea.via-valor { width: 100%; resize: vertical; display: block; }
textarea.via-valor:focus { outline: none; border-color: var(--accent); }
.via-valor.ro { margin-bottom: 6px; }
.via-cartao-op { display: inline-block; margin-bottom: 7px; }
.via-cartao-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.via-cartao-salvar { display: flex; gap: 6px; margin-bottom: 7px; }
.via-cartao-salvar .txt { flex: 1; }
.via-cartao-st { margin: 7px 0 0; font-size: 11.5px; color: var(--ok); }
.via-cartao-perm { border-color: var(--line); border-left-color: var(--cyan); background: rgba(255,255,255,.04); }
.via-params { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 7px; font-size: 11.5px; }
.via-params dt { font-family: var(--mono); color: var(--ink-3); }
.via-params dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- compor */

.via-compor { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); background: rgba(255,255,255,.02); }
.via-compor textarea {
  width: 100%; resize: none; min-height: 52px; max-height: 160px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-size: 12.5px; line-height: 1.5;
}
.via-compor textarea:focus { outline: none; border-color: var(--accent); }
.via-compor-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.via-img-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.via-img-opt input { accent-color: var(--accent); }
.via-ctx {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px;
  padding: 5px 8px; border-radius: 8px; background: rgba(255, 216, 77, .08); border: 1px dashed rgba(255, 216, 77, .4);
  font-size: 11px; color: var(--ink-2);
}
.via-ctx b { color: var(--ink); }
.via-ctx button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.via-uso { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- chave */

.via-aviso {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.55;
  border: 1px solid rgba(255, 216, 77, .35); background: rgba(255, 216, 77, .07); color: var(--ink-2);
}
.via-aviso b { color: var(--ink); }
.via-aviso code { font-size: 10.5px; }
.via-radios { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 4px; font-size: 11.5px; color: var(--ink-2); }
.via-radios label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.via-radios input, .via-modelo input { accent-color: var(--accent); }
.via-modelos { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.via-modelo {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--line-2); cursor: pointer; font-size: 12px;
}
.via-modelo.on { border-color: var(--accent); background: rgba(255, 216, 77, .07); }
.via-modelo span { display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: baseline; }
.via-modelo em { font-style: normal; color: var(--ink-3); font-size: 11px; }
.via-modelo i { flex-basis: 100%; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.via-chave input[type="password"] {
  width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.05);
  color: var(--ink); font: inherit; font-family: var(--mono); font-size: 12px;
}
.via-chave input[type="password"]:focus { outline: none; border-color: var(--accent); }
.via-estado.ok { color: var(--ok); }
.via-estado.erro { color: var(--err); }
.via-estado.testando { color: var(--ink-2); }
.btn.via-perigo { color: var(--err); }
.via-chave a { color: var(--ink-2); }

/* ---------------------------------------------------------------- biblioteca */

.via-bib-filtro { display: flex; gap: 6px; margin-bottom: 9px; }
.via-bib-filtro select {
  flex: none; max-width: 48%; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel-solid); color: var(--ink); font-size: 12px;
}
.via-bib-filtro .txt { flex: 1; min-width: 0; }
.via-bib-lista { display: flex; flex-direction: column; gap: 8px; }
.via-bib-item { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); }
.via-bib-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.via-bib-o { font-size: 10.5px; color: var(--ink-3); margin: 2px 0 6px; }

/* ---------------------------------------------------------------- ★ / ✨ ao lado do campo */

.ctl-cmd { position: relative; }
.ctl-cmd .ctl-label { padding-right: 104px; }
.via-campo-bts { position: absolute; top: -2px; right: 0; display: inline-flex; gap: 4px; }
.via-mini {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.05);
  color: var(--ink-2); font-size: 10.5px; line-height: 1; padding: 3px 6px; cursor: pointer;
}
.via-mini:hover { color: var(--ink); border-color: var(--accent); }
.via-mini.tem { color: var(--accent); }
.via-mini i { font-style: normal; font-family: var(--mono); font-size: 9.5px; }
.via-mini-ia { color: var(--accent); }
/* o popover entra NO FLUXO, logo abaixo do campo: absoluto, era cortado pelo overflow do nó/painel */
.via-pop {
  margin-top: 6px;
  padding: 9px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-solid); box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.via-pop-t { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
.via-pop-lista { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.via-pop-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--ink); cursor: pointer; font-size: 11.5px;
}
.via-pop-item:hover { border-color: var(--accent); }
.via-pop-item span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.via-pop-novo { display: flex; gap: 5px; margin-top: 7px; }
.via-pop-novo .txt { flex: 1; min-width: 0; padding: 5px 7px; font-size: 11px; }

/* Config: com a aba da Via são cinco abas; numa coluna de 316 px elas quebram linha em vez de sumir */
.tabs.cfg-tabs { flex-wrap: wrap; }
.tabs.cfg-tabs button { flex: 1 1 auto; }

/* Coisas: ações da Via */
.coisas-via { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------------------------------------------------------------- anexos (📎, arrastar, colar) */

.via-anexos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.via-anexo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex: none;
  border: 1px solid var(--line); background: rgba(0,0,0,.25);
}
.via-anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.via-anexo i {
  position: absolute; left: 3px; bottom: 3px; font-style: normal; font-family: var(--mono); font-size: 9.5px;
  padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.65); color: #fff;
}
.via-anexo.preparando b { color: var(--ink-3); font-weight: 400; }
.via-anexo.fora img { opacity: .35; }
.via-anexo input[type="checkbox"] { position: absolute; top: 3px; right: 3px; margin: 0; accent-color: var(--accent); }
.via-anexo-x {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 20px; cursor: pointer;
}
.via-anexo-x:hover { background: var(--err); }
.via-rascunho { margin-bottom: 7px; }
.via-aviso-anexo { margin: 0 0 6px; font-size: 11px; color: var(--ink-2); }
.via-compor-esq { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.via-clipe {
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.05); color: var(--ink);
  font-size: 15px; line-height: 1; padding: 5px 8px; cursor: pointer;
}
.via-clipe:hover:not(:disabled) { border-color: var(--accent); }
.via-clipe:disabled { opacity: .4; cursor: default; }
.via-msg.eu .via-anexo { width: 56px; height: 56px; }
.via-link {
  display: inline-block; margin-top: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px;
}
.via-link:hover { color: var(--ink); }
.panel.via-gaveta.via-soltando { outline: 2px dashed var(--accent); outline-offset: -4px; }
.via-solte {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 600; border-radius: inherit;
}
.via-cartao-treinar { border-left-color: var(--cyan); }
.via-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; margin-left: auto; }
.via-quem { color: var(--ok); }

/* ---------------------------------------------------------------- base de conhecimento */

.via-msg-acts { display: flex; justify-content: flex-end; margin-top: -2px; }
.via-base-bt { opacity: .75; }
.via-base-bt:hover { opacity: 1; }
.via-salvo { font-size: 11px; color: var(--ok); }
.via-base-pop { flex-basis: 100%; width: 100%; }
.via-base-form {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 9px;
  border: 1px dashed var(--line); background: rgba(255,255,255,.03);
}
.via-base-form .txt { width: 100%; box-sizing: border-box; }
.via-base-form .via-valor { margin: 0; }
.via-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; margin: 2px 0 4px; }
.via-check input { accent-color: var(--accent); }
.via-check b { color: var(--ink); font-weight: 600; }
.via-busca-nota { margin: -3px 0 0; font-size: 10.5px; color: var(--ink-3); }
.via-tag-equipe { background: var(--cyan); }
.via-base-texto { max-height: 160px; overflow-y: auto; }
.via-aviso-srv { color: var(--warn, var(--ink-3)); }
.via-hist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.via-hist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px;
  border-radius: 8px; border: 1px solid var(--line-2); font-size: 11.5px;
}
.via-hist-item span { display: flex; flex-direction: column; min-width: 0; }
.via-hist-item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.via-hist-item i { font-style: normal; color: var(--ink-3); font-size: 10.5px; }
/* quatro abas: em telas estreitas o rótulo longo («Chave e modelo») quebra em duas linhas em vez de vazar */
.via-tabs button { min-width: 0; flex: 1 1 auto; }
@media (max-width: 520px) {
  .via-tabs button { white-space: normal; line-height: 1.2; padding-left: 4px; padding-right: 4px; }
}

/* ---------------------------------------------------------------- tema claro */

:root[data-theme="light"] .via-msg.eu { background: rgba(4, 65, 60, .07); border-color: rgba(4, 65, 60, .22); }
:root[data-theme="light"] .via-cartao { background: rgba(4, 65, 60, .04); border-color: rgba(4, 65, 60, .22); border-left-color: var(--accent); }
:root[data-theme="light"] .via-cartao-perm { border-left-color: var(--cyan); }
:root[data-theme="light"] .via-msg.ela pre,
:root[data-theme="light"] .via-valor { background: rgba(4, 65, 60, .05); }
:root[data-theme="light"] .via-msg.ela code,
:root[data-theme="light"] .via-cartao-op,
:root[data-theme="light"] .via-ctx code { background: rgba(4, 65, 60, .08); }
:root[data-theme="light"] .via-aviso { background: rgba(138, 109, 0, .06); border-color: rgba(138, 109, 0, .3); }
:root[data-theme="light"] .via-ctx { background: rgba(4, 65, 60, .05); border-color: rgba(4, 65, 60, .3); }
:root[data-theme="light"] .via-modelo.on { background: rgba(4, 65, 60, .06); }
:root[data-theme="light"] .via-mini, :root[data-theme="light"] .via-hbtn { background: rgba(4, 65, 60, .04); }
:root[data-theme="light"] .via-mini.tem, :root[data-theme="light"] .via-mini-ia, :root[data-theme="light"] .via-logo { color: #8A6D00; }
:root[data-theme="light"] .via-pop { box-shadow: 0 14px 36px rgba(0,0,0,.18); }
:root[data-theme="light"] .via-nota.erro { background: rgba(179, 38, 30, .06); border-color: rgba(179, 38, 30, .3); }
:root[data-theme="light"] .panel.via-gaveta { box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 1px 3px rgba(0, 0, 0, .10); }
:root[data-theme="light"] .via-anexo { background: rgba(4, 65, 60, .05); }
:root[data-theme="light"] .via-clipe, :root[data-theme="light"] .via-base-form { background: rgba(4, 65, 60, .04); }
:root[data-theme="light"] .via-cartao-treinar { border-left-color: var(--cyan); }

/* ==========================================================================
   VIA nos módulos e Studios (js/via/BotaoVia.js, ferramentas-modulos.js,
   ferramentas-motion3d.js) — botão «✦ Via», cartão de configuração, cartões
   do Motion 3D. Claro, escuro e código: só variáveis do tema.
   ========================================================================== */

/* aberta sobre um Studio de tela cheia (z 5000–5400): a gaveta fica por cima */
body.studio-aberto .panel.via-gaveta,
body:has(.vde, .bf3d) .panel.via-gaveta { z-index: 5350; }

/* botão ✦ no cabeçalho dos painéis (antes do ▾) */
.panel-via {
  flex: none; width: 22px; height: 22px; margin-left: auto;
  border: 0; border-radius: 6px; background: transparent; color: var(--accent);
  cursor: pointer; font-size: 12px; line-height: 1;
}
.panel-via:hover { background: rgba(255,255,255,.09); }
.panel-via + .panel-rec { margin-left: 0; }
:root[data-theme="light"] .panel-via:hover { background: rgba(0,0,0,.06); }
/* nos Studios o botão herda a classe do botão da barra; só ganha a cor de destaque */
.via-botao-modulo:not(.panel-via) { color: var(--accent, #2EF2D0); white-space: nowrap; }

/* tabela «atual → proposto» */
.via-diff { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 6px 0; }
.via-diff th, .via-diff td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.via-diff th { color: var(--ink-3); font-weight: 600; font-size: 10.5px; }
.via-diff td b { color: var(--accent); }

/* Motion 3D: prévia e listas */
.via-m3d { --via-previa-fundo: #0b1416; }
:root[data-theme="light"] .via-m3d { --via-previa-fundo: #eef5f4; }
.via-m3d-previa { display: grid; gap: 4px; margin: 6px 0; }
.via-m3d-previa canvas { width: 100%; max-width: 320px; aspect-ratio: 240 / 150; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--via-previa-fundo); }
.via-m3d-ctl { display: flex; align-items: center; gap: 6px; max-width: 320px; }
.via-m3d-ctl input[type="range"] { flex: 1; min-width: 0; }
.via-m3d-ctl small { font-family: var(--mono); color: var(--ink-3); font-size: 10.5px; min-width: 44px; text-align: right; }
.via-m3d-lista { margin: 4px 0; padding-left: 18px; font-size: 11.5px; color: var(--ink-2); }
.via-m3d-lista.corr li { color: var(--ink-2); }
.via-m3d-lista.corr li::marker { color: var(--accent); }