/* Tela Consulta IA (Módulo Vendas, etapa 10). Traduzida do protótipo do
   Claude Design ("CDC Vendas - Consulta IA (standalone).html"), extraído
   linha a linha em openspec/changes/painel-vendas-consulta-ia/handoff-prototipo-interacao.md
   — toda medida em px abaixo vem do markup do protótipo, não é
   aproximada. As cores literais do protótipo (que era só tema escuro)
   viraram tokens equivalentes, pra tela funcionar nos dois temas:
     #020617 → --color-bg          #0f172a → --color-surface
     #0b1424 → --color-surface-subtle   #1e293b → --color-border
     #e2e8f0 → --color-ink         #f1f5f9 → --color-ink-forte
     #cbd5e1 → --color-ink-soft    #94a3b8 → --color-muted
     #64748b → --color-subtle      #475569 → --color-disabled
     #34d399 → --color-focus       #38bdf8 → --info-text
   CSS global (não .razor.css) e todo seletor prefixado por
   ".consulta-ia" — ver .claude/rules/arquitetura.md. */

.consulta-ia {
  display: flex;
  height: 100%;
  min-height: 0;
  gap: 0;
}

/* ─── Barra lateral de conversas ─── */

.consulta-ia__sidebar {
  width: 168px;
  flex: none;
  background: var(--color-surface-subtle);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.consulta-ia__sidebar-topo {
  flex: none;
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
}

.consulta-ia__btn-nova {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  border-radius: 9px;
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--color-focus);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.consulta-ia__btn-nova:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.consulta-ia__btn-nova:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.consulta-ia__sidebar-rotulo {
  flex: none;
  font-size: 9.5px;
  color: var(--color-disabled);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 10px 5px;
}

.consulta-ia__lista-conversas {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.consulta-ia__conversa {
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
}

.consulta-ia__conversa--ativa {
  border-color: var(--success-border);
  background: var(--color-kpi-highlight-bg);
}

.consulta-ia__conversa-linha {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.consulta-ia__conversa-btn {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.consulta-ia__conversa-titulo {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__conversa--ativa .consulta-ia__conversa-titulo {
  color: var(--color-focus);
}

.consulta-ia__conversa-quando {
  display: block;
  font-size: 9.5px;
  color: var(--color-subtle);
  margin-top: 2px;
}

/* Ícones de renomear/excluir só no hover da linha — mesmo
   comportamento do protótipo (não poluem a lista em repouso). */
.consulta-ia__conversa-acoes {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}

.consulta-ia__conversa:hover .consulta-ia__conversa-acoes,
.consulta-ia__conversa:focus-within .consulta-ia__conversa-acoes {
  opacity: 1;
}

.consulta-ia__acao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 16px;
  color: var(--color-disabled);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__acao-icone:hover {
  color: var(--color-muted);
}

.consulta-ia__acao-icone--perigo:hover {
  color: var(--danger-text);
}

.consulta-ia__input-titulo {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg);
  border: 1px solid var(--success-border);
  border-radius: 7px;
  color: var(--color-ink);
  font-size: 11px;
  padding: 4px 7px;
}

/* ─── Coluna principal ─── */

.consulta-ia__principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.consulta-ia__cabecalho {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
}

.consulta-ia__titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.consulta-ia__subtitulo {
  font-size: 10.5px;
  color: var(--color-subtle);
  margin-top: 1px;
}

.consulta-ia__badge-acesso {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-focus);
  background: var(--color-kpi-highlight-bg);
  border: 1px solid var(--success-border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

/* ─── Painel "Resultado" ─── */

.consulta-ia__resultado {
  flex: none;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.consulta-ia__resultado-barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
}

.consulta-ia__toggle-resultado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-disabled);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__toggle-resultado:hover {
  color: var(--color-muted);
}

.consulta-ia__seta--fechada {
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.consulta-ia__seta--aberta {
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.consulta-ia__procedencia {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--color-subtle);
  background: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.consulta-ia__procedencia--alerta {
  color: var(--warning-text);
}

.consulta-ia__procedencia:hover {
  opacity: 0.8;
}

.consulta-ia__procedencia-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__spacer {
  flex: 1;
}

.consulta-ia__resultado-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.consulta-ia__toggle-tipo {
  display: flex;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.consulta-ia__tipo {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-subtle);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__tipo--ativo {
  background: var(--color-primary-soft);
  color: var(--color-focus);
}

.consulta-ia__btn-csv {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--info-text);
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
  cursor: pointer;
}

.consulta-ia__frames {
  flex: none;
  height: 172px;
  display: flex;
  gap: 10px;
  padding: 0 16px 10px;
}

.consulta-ia__card {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.consulta-ia__card--tabela {
  flex: 1.15;
  padding: 10px 0 0;
  overflow: hidden;
}

.consulta-ia__card-cabecalho {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.consulta-ia__card--tabela .consulta-ia__card-cabecalho {
  padding: 0 12px;
}

.consulta-ia__card-rotulo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-disabled);
}

.consulta-ia__card-nota {
  font-size: 10px;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed var(--color-border);
  border-radius: 9px;
  color: var(--color-disabled);
  font-size: 10.5px;
  text-align: center;
  padding: 0 12px;
}

.consulta-ia__vazio--tabela {
  margin: 0 12px 12px;
}

/* ─── Gráfico ─── */

.consulta-ia__gr {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.consulta-ia__gr-barras {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.consulta-ia__gr-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.consulta-ia__gr-valor {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.consulta-ia__gr-barra {
  width: 100%;
  background: var(--info-text);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: height 0.4s ease;
}

.consulta-ia__gr-barra--destaque {
  background: var(--color-focus);
}

.consulta-ia__gr-rotulos {
  flex: none;
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.consulta-ia__gr-rotulo {
  flex: 1;
  min-width: 0;
  font-size: 9px;
  color: var(--color-subtle);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__gr-rotulo-linha {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
}

.consulta-ia__gr-valor-linha {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__gr-linha-area {
  flex: 1;
  min-height: 0;
  position: relative;
}

.consulta-ia__gr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── Tabela do resultado ─── */

.consulta-ia__tabela {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.consulta-ia__tabela-cabecalho {
  flex: none;
  display: grid;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.consulta-ia__th {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-subtle);
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__tabela-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.consulta-ia__tr {
  display: grid;
  border-bottom: 1px solid var(--color-surface-subtle);
}

.consulta-ia__td {
  font-size: 11px;
  color: var(--color-ink);
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Chat ─── */

.consulta-ia__chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.consulta-ia__conversa-vazia {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
}

.consulta-ia__vazia-texto {
  text-align: center;
}

.consulta-ia__vazia-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.consulta-ia__vazia-sub {
  font-size: 11px;
  color: var(--color-subtle);
  margin-top: 3px;
}

.consulta-ia__exemplos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 380px;
}

.consulta-ia__exemplo {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-muted);
  cursor: pointer;
}

.consulta-ia__exemplo:hover {
  border-color: var(--success-border);
  color: var(--color-ink);
}

.consulta-ia__linha-msg {
  display: flex;
  justify-content: flex-start;
}

.consulta-ia__linha-msg--direita {
  justify-content: flex-end;
}

.consulta-ia__balao-wrap {
  max-width: 92%;
  min-width: 0;
}

.consulta-ia__balao-wrap--usuario {
  max-width: 74%;
}

/* Bico no canto inferior esquerdo (IA) — a do usuário inverte. */
.consulta-ia__balao {
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px;
}

.consulta-ia__balao--usuario {
  background: var(--color-kpi-highlight-bg);
  border: 1px solid var(--success-border);
  border-radius: 12px 12px 4px 12px;
  padding: 9px 13px;
  font-size: 12px;
  color: var(--color-ink);
  line-height: 1.5;
}

.consulta-ia__balao--ia {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consulta-ia__balao--flex {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}

.consulta-ia__balao--erro {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.consulta-ia__balao--limite {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.consulta-ia__texto-resposta {
  font-size: 12px;
  color: var(--color-ink);
  line-height: 1.6;
}

.consulta-ia__icone-estado {
  flex: none;
  margin-top: 1px;
  color: var(--color-subtle);
}

.consulta-ia__balao--erro .consulta-ia__icone-estado {
  color: var(--danger-text);
}

.consulta-ia__balao--limite .consulta-ia__icone-estado {
  color: var(--warning-text);
}

.consulta-ia__estado-conteudo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consulta-ia__estado-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.consulta-ia__estado-titulo--erro {
  font-weight: 700;
  color: var(--danger-text);
}

.consulta-ia__estado-titulo--limite {
  font-weight: 700;
  color: var(--warning-text);
}

.consulta-ia__estado-texto {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.55;
  margin-top: 3px;
}

.consulta-ia__estado-dica {
  font-size: 10px;
  color: var(--color-muted);
}

/* Premissa assumida — âmbar, acima do bloco de SQL, separada do texto
   da resposta (Requirement "Transparência do SQL gerado"). */
.consulta-ia__premissa {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--warning-text);
  background: var(--warning-wash);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  padding: 5px 9px;
}

.consulta-ia__btn-focar {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-subtle);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__btn-focar--ativo {
  color: var(--color-focus);
}

.consulta-ia__rodape-balao {
  border-top: 1px solid var(--color-border);
  padding-top: 9px;
}

.consulta-ia__sql-barra {
  display: flex;
  align-items: center;
  gap: 12px;
}

.consulta-ia__btn-sql {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--info-text);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__btn-copiar {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-subtle);
  background: none;
  border: none;
  cursor: pointer;
}

.consulta-ia__btn-copiar--ok {
  color: var(--color-focus);
}

.consulta-ia__sql {
  margin: 8px 0 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: var(--info-text);
  white-space: pre-wrap;
  overflow-x: auto;
}

.consulta-ia__limite-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.consulta-ia__btn-liberacao {
  height: 28px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.consulta-ia__btn-liberacao:disabled {
  cursor: default;
  opacity: 0.85;
}

.consulta-ia__limite-obs {
  font-size: 10px;
  color: var(--color-muted);
}

.consulta-ia__limite-destino {
  font-size: 9.5px;
  color: var(--color-subtle);
}

/* Indicador "digitando" */

.consulta-ia__digitando {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px 12px 12px 4px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--color-muted);
}

.consulta-ia__pontos {
  display: flex;
  gap: 4px;
}

.consulta-ia__ponto {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-focus);
  opacity: 0.9;
  animation: consulta-ia-pulso 1.2s ease-in-out infinite;
}

.consulta-ia__ponto--2 {
  opacity: 0.6;
  animation-delay: 0.15s;
}

.consulta-ia__ponto--3 {
  opacity: 0.3;
  animation-delay: 0.3s;
}

@keyframes consulta-ia-pulso {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consulta-ia__ponto {
    animation: none;
  }

  .consulta-ia__gr-barra {
    transition: none;
  }
}

/* ─── Campo de pergunta ─── */

.consulta-ia__entrada {
  flex: none;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.consulta-ia__entrada-linha {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.consulta-ia__textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  box-sizing: border-box;
  height: 36px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--color-ink);
  line-height: 1.4;
  font-family: inherit;
}

.consulta-ia__textarea::placeholder {
  color: var(--color-disabled);
}

.consulta-ia__btn-enviar {
  flex: none;
  height: 36px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-primary-strong);
  color: var(--color-surface);
  border: none;
  cursor: pointer;
}

.consulta-ia__btn-enviar:disabled {
  background: var(--color-border);
  color: var(--color-disabled);
  cursor: not-allowed;
}

.consulta-ia__entrada-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consulta-ia__dica-exemplos {
  font-size: 9.5px;
  color: var(--color-disabled);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.consulta-ia__contador {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-disabled);
  white-space: nowrap;
}

.consulta-ia__contador--alerta {
  color: var(--warning-text);
}

.consulta-ia__contador--limite {
  color: var(--danger-text);
}

/* ─── Confirmação de exclusão ───
   Não existe no protótipo: divergência deliberada, ver Requirement
   "Gerenciar conversas". Segue o padrão de modal do Shell. */

.consulta-ia__backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.consulta-ia__modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  padding: 18px 20px;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.consulta-ia__modal-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-forte);
}

.consulta-ia__modal-texto {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.55;
}

.consulta-ia__modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.consulta-ia__modal-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  color: var(--color-ink);
  cursor: pointer;
}

.consulta-ia__modal-btn--perigo {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}