/* ====================================================================
   web/css/skills-no-chat.css — as skills do Ring no campo de mensagem
   (11/10/2026, js/skills-no-chat.js). DS v2 (areas/produto/v7/ds-v2):
   os tokens do DS valem só dentro do painel (css/ds-v2.css); aqui os
   valores entram como variáveis locais dos três blocos (popover, folha,
   chip), sem mudar o resto do chat.
   ==================================================================== */
.skl-pop, .skl-bandeja, .skl-sec {
  --skl-ink: #0a1628; --skl-ink-2: #5b6472; --skl-ink-3: #676e7a;
  --skl-hair: rgba(10,22,40,.08); --skl-hair-2: rgba(10,22,40,.14);
  --skl-fundo: #ffffff; --skl-fill: #f5f5f7; --skl-hover: rgba(10,22,40,.045); --skl-ativo: rgba(10,22,40,.07);
  --skl-azul: #152848; --skl-azul-claro: #eef2f8; --skl-azul-texto: #33476b; --skl-foco: #152848;
  --skl-sombra-pop: 0 0 0 1px rgba(10,22,40,.06), 0 12px 32px rgba(10,22,40,.12);
  --skl-sombra-folha: 0 -12px 40px rgba(10,22,40,.18);
  --skl-ease: cubic-bezier(.23,1,.32,1); --skl-d-curta: 180ms; --skl-d-media: 240ms;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--skl-ink);
}
@media (prefers-reduced-motion: reduce) {
  .skl-pop, .skl-bandeja, .skl-sec { --skl-d-curta: 0ms; --skl-d-media: 0ms; }
}

/* ---------- a lista do "/" (popover acima do campo, no computador e no celular) ---------- */
.skl-pop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30;
  max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--skl-fundo); border-radius: 16px; box-shadow: var(--skl-sombra-pop);
  padding: 6px 0 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--skl-d-curta) var(--skl-ease), transform var(--skl-d-curta) var(--skl-ease);
}
.skl-pop.aberta { opacity: 1; transform: none; }
.skl-pop[hidden] { display: none; }
.skl-pal { max-width: 440px; }

/* ---------- grupos, linhas, rodapé (iguais na lista do "/" e na seção do "+") ---------- */
.skl-grupo { padding: 8px 16px 4px; font-size: 12px; line-height: 16px; color: var(--skl-ink-3); }
.skl-topo { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-bottom: 1px solid var(--skl-hair); }
.skl-topo-t { font-size: 13px; font-weight: 600; color: var(--skl-ink-2); }
.skl-volta {
  width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 8px;
  color: var(--skl-ink-2); cursor: pointer;
}
.skl-volta:hover { background: var(--skl-hover); }
.skl-volta svg, .skl-volta i { width: 18px; height: 18px; }
.skl-linha {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 7px 16px; box-sizing: border-box;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  font: inherit; color: var(--skl-ink);
  border-top: 1px solid var(--skl-hair);
  transition: background var(--skl-d-curta) var(--skl-ease);
}
.skl-grupo + .skl-linha, .skl-topo + .skl-linha { border-top: 0; }
.skl-linha:hover, .skl-linha.sel { background: var(--skl-azul-claro); }
.skl-linha:active { background: var(--skl-ativo); }
.skl-linha:focus { outline: none; }
.skl-linha:focus-visible { box-shadow: inset 0 0 0 2px var(--skl-foco); border-radius: 8px; }
.skl-ic {
  flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--skl-azul-claro); color: var(--skl-azul);
}
.skl-linha.ferr .skl-ic { background: var(--skl-fill); color: var(--skl-ink-2); }
.skl-ic svg, .skl-ic i { width: 18px; height: 18px; stroke-width: 1.75; }
.skl-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.skl-n { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--skl-ink); }
.skl-l { font-size: 13px; line-height: 17px; color: var(--skl-ink-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.skl-ferr { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--skl-ink-3); }
.skl-ferr svg, .skl-ferr i, .skl-seta svg, .skl-seta i { width: 15px; height: 15px; }
.skl-seta { flex: none; color: var(--skl-ink-3); display: inline-flex; }
.skl-vazio { padding: 10px 16px 12px; font-size: 13px; line-height: 18px; color: var(--skl-ink-2); }
.skl-rodape {
  position: sticky; bottom: 0; display: flex; gap: 14px; flex-wrap: wrap;
  padding: 7px 16px 8px; margin-top: 4px; background: var(--skl-fundo); border-top: 1px solid var(--skl-hair);
  font-size: 12px; line-height: 16px; color: var(--skl-ink-3);
}
.skl-rodape kbd {
  font: inherit; font-size: 11px; padding: 0 5px; border-radius: 5px;
  background: var(--skl-fill); color: var(--skl-ink-2); box-shadow: inset 0 0 0 1px var(--skl-hair-2);
}
.skl-pal .skl-rodape { display: flex; }
@media (pointer: coarse) { .skl-pal .skl-rodape { display: none; } }

/* ---------- a seção das skills dentro do "+" do visual novo (#va-plus-pop, js/visual-a.js) ---------- */
/* as linhas seguem o desenho do item do menu que já existe (sem filete, cantos 10, hover azul-06) e ganham a
   segunda linha com a descrição; o menu cresce para caber as skills e rola quando passa de 70 % da tela */
html[data-visual-a~="chat"] #va-plus-pop:has(.skl-sec) { min-width: 344px; max-width: calc(100vw - 24px); max-height: min(70vh, 600px); overflow-y: auto; overscroll-behavior: contain; }
.va-pop .skl-sec { display: block; }
.va-pop .skl-grupo { padding: 8px 12px 2px; }
.va-pop .skl-linha { border-top: 0; border-radius: 10px; padding: 6px 12px; gap: 12px; }
.va-pop .skl-linha:hover, .va-pop .skl-linha:focus-visible { background: var(--va-azul-06, #eef2f8); }
.va-pop .skl-linha:focus-visible { box-shadow: none; outline: 2px solid var(--skl-foco); outline-offset: -2px; }
.va-pop .skl-ic { width: 20px; height: 20px; border-radius: 0; background: transparent; color: var(--va-dim, #5b6472); }
.va-pop .skl-ic svg, .va-pop .skl-ic i { width: 20px; height: 20px; stroke-width: 1.8; }
.va-pop .skl-linha.ferr .skl-ic { background: transparent; }
.va-pop .skl-n { font-family: var(--va-font, inherit); }
.va-pop .skl-rodape { position: static; margin: 4px 0 0; padding: 7px 12px 4px; }
.va-pop .skl-vazio { padding: 6px 12px 8px; }

/* ---------- a skill armada no campo (o chip) ---------- */
.chat-input.tem-skill { flex-wrap: wrap; }
.chat-input.tem-skill textarea { min-width: 0; flex-basis: 0; }
.skl-bandeja { flex: 0 0 100%; order: -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.skl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 6px 4px 12px;
  background: var(--skl-azul-claro); color: var(--skl-azul);
  border-radius: 16px 16px 16px 5px;   /* a bolha do botão de skill do DS: vai para o chat */
  font-size: 13px; line-height: 18px; font-weight: 600;
}
.skl-chip > i, .skl-chip > svg { width: 16px; height: 16px; flex: none; }
.skl-chip-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.skl-chip-x {
  width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--skl-azul-texto); cursor: pointer; flex: none;
}
.skl-chip-x:hover { background: rgba(21,40,72,.1); }
.skl-chip-x svg, .skl-chip-x i { width: 14px; height: 14px; }
.skl-chip-x:focus-visible { outline: 2px solid var(--skl-foco); outline-offset: 1px; }
/* a bolha dela quando a skill foi com um detalhe (js/acoes.js montar): o nome da ação e, embaixo, o que ela escreveu */
.bubble.user.bubble-acao.com-extra { flex-wrap: wrap; white-space: normal; }
.bubble-acao .bubble-acao-extra { flex: 0 0 100%; margin: 4px 0 0; font-weight: 400; letter-spacing: 0; white-space: pre-wrap; }