/* ============================================================
   Chat com IA — view interna ao shell principal.
   Replica visualmente o padrão dos demais chats da plataforma:
   - .ai-msg-* do painel principal (style.css)
   - .dash-chat-suggestion-card dos dashboards (dashboards.css)
   Variáveis usadas: --primary, --primary-dark, --gray-50/100/200/500/700/900
   (todas já definidas globalmente no style.css).
   ============================================================ */

.ai-chat-root {
  display: flex;
  flex-direction: column;
  /* Usa toda a altura disponível dentro da .page-body (header + footer do shell
     ocupam ~120px). Antes era 180px — folga conservadora. */
  height: calc(100vh - 130px);
  min-height: 520px;
  /* Antes era max-width: 1100px. Removido pra aproveitar monitores wide.
     Em telas ultra-wide (>1800px) ainda usa toda a largura — bubbles internos
     ficam limitados pelo .ai-chat-message (88% pra user, 100% pra assistente). */
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}

/* Toolbar — limpar + exports */
.ai-chat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-wrap: wrap;
}
.ai-chat-tb-btn {
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.ai-chat-tb-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-900);
}
.ai-chat-tb-btn:active { transform: scale(0.97); }

/* Seletor de fonte ("Conversar sobre") */
.ai-chat-source-pick {
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  max-width: 240px;
}
.ai-chat-source-pick:hover { border-color: var(--gray-300); }
.ai-chat-source-pick:focus { outline: none; border-color: var(--primary); }

/* Desambiguação — bloco "respondi com X, queria outra fonte?" */
.ai-chat-disambiguation {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
}
.ai-chat-disambiguation-label {
  display: block;
  font-size: 11px;
  color: var(--gray-600);
  margin-bottom: 6px;
}
.ai-chat-disambiguation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-chat-disambiguation-chip {
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}
.ai-chat-disambiguation-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.ai-chat-disambiguation-chip:active { transform: scale(0.97); }

/* Banner de feature desabilitada — herda visual de info card padrão */
.ai-chat-disabled-banner {
  padding: 16px 20px;
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border-bottom: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
}
.ai-chat-disabled-banner strong { display: block; margin-bottom: 4px; font-size: 14px; }

/* ============================================================
   ÁREA DE MENSAGENS — espelha .ai-panel-messages
   ============================================================ */
.ai-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  /* Defesa: rolar dentro do chat não propaga pro body */
  overscroll-behavior: contain;
}

/* ============================================================
   ESTADO VAZIO — estilo .dash-chat-empty (mais limpo que .ai-welcome)
   ============================================================ */
.ai-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--gray-500);
  gap: 14px;
  padding: 32px 16px;
}
.ai-chat-empty-icon {
  font-size: 40px;
  opacity: 0.55;
  line-height: 1;
}
.ai-chat-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.ai-chat-empty-hint {
  font-size: 12px;
  color: var(--gray-500);
  max-width: 540px;
  margin: 0;
  line-height: 1.5;
}

/* Grid de cards de sugestão — espelha .dash-chat-suggestion-grid */
.ai-chat-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin-top: 6px;
}
@media (max-width: 600px) { .ai-chat-suggestions { grid-template-columns: 1fr; } }

.ai-chat-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--gray-700);
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  font-family: inherit;
  line-height: 1.4;
}
.ai-chat-suggestion:hover {
  background: var(--gray-50);
  border-color: var(--primary);
}
.ai-chat-suggestion:active { transform: scale(0.98); }

/* Agrupamento por categoria — opção B: sugestões em seções */
.ai-chat-suggestions-grouped {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin-top: 8px;
}
.ai-chat-suggestions-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-chat-suggestions-cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 2px;
}

/* ============================================================
   BUBBLES DE MENSAGEM — espelham .ai-msg / .ai-msg-user / .ai-msg-ai
   ============================================================ */
.ai-chat-message {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
/* User: bubbles azuis curtas — 70% (perguntas são curtas) */
.ai-chat-message.user { align-self: flex-end; align-items: flex-end; max-width: 70%; }
/* Assistente: respostas mais longas, mas limitadas pra legibilidade
   (linha ideal de leitura: 80-100 caracteres ~ 800px). */
.ai-chat-message.assistant { align-self: flex-start; align-items: flex-start; max-width: 92%; }

.ai-chat-bubble {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* User: copiado de .ai-msg-user */
.ai-chat-message.user .ai-chat-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}

/* Assistente: copiado de .ai-msg-ai */
.ai-chat-message.assistant .ai-chat-bubble {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-900);
  border-bottom-left-radius: 4px;
  max-width: 100%;
}

/* Conteúdo markdown dentro do bubble — copiado de .ai-msg-ai descendants */
.ai-chat-bubble h1,
.ai-chat-bubble h2,
.ai-chat-bubble h3,
.ai-chat-bubble h4 { margin: 8px 0 4px; font-size: 14px; }
.ai-chat-bubble h1 { font-size: 16px; }
.ai-chat-bubble h2 { font-size: 15px; }

.ai-chat-bubble p { margin: 4px 0; }
.ai-chat-bubble p:first-child { margin-top: 0; }
.ai-chat-bubble p:last-child { margin-bottom: 0; }

.ai-chat-bubble ul,
.ai-chat-bubble ol { padding-left: 20px; margin: 4px 0; }
.ai-chat-bubble li { margin: 2px 0; }

.ai-chat-bubble strong { color: var(--primary-dark); }

.ai-chat-bubble code {
  background: #e8e8e8;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

.ai-chat-bubble pre {
  background: #f8f9fa;
  color: #333;
  border: 1px solid #e0e0e0;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
  max-height: 400px;
  overflow-y: auto;
}
.ai-chat-bubble pre code { background: none; padding: 0; color: inherit; }

.ai-chat-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 12px;
}
.ai-chat-bubble table th,
.ai-chat-bubble table td {
  border: 1px solid var(--gray-200);
  padding: 4px 8px;
  text-align: left;
}
.ai-chat-bubble table th {
  background: var(--gray-100);
  font-weight: 600;
}

/* ============================================================
   FONTES CONSULTADAS — bloco discreto abaixo da resposta
   Espelha o estilo .ai-msg-info (verde sutil) pra "consultei"
   ============================================================ */
.ai-chat-sources {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
}
.ai-chat-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  font-size: 11px;
  color: var(--gray-700);
  cursor: help; /* tooltip mostra timestamp exato */
}
.ai-chat-source-tag .freshness {
  font-size: 10px;
  opacity: 0.7;
  font-style: italic;
}
/* Cor por idade do snapshot — discreto, alinhado com dash-chat-freshness-* */
.ai-chat-source-tag.freshness-fresh { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ai-chat-source-tag.freshness-old   { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.ai-chat-source-tag.freshness-stale { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ai-chat-source-tag.freshness-old .freshness,
.ai-chat-source-tag.freshness-stale .freshness { opacity: 1; }

.ai-chat-confidence {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 8px;
}
.ai-chat-confidence.high   { background: #d1fae5; color: #065f46; }
.ai-chat-confidence.medium { background: #fef3c7; color: #92400e; }
.ai-chat-confidence.low    { background: #fee2e2; color: #991b1b; }
.ai-chat-confidence.none   { background: var(--gray-100); color: var(--gray-600); }

/* ============================================================
   LIMITATIONS — herda estilo .ai-msg-info amarelo
   ============================================================ */
.ai-chat-limitations {
  margin-top: 6px;
  font-size: 11.5px;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #fbbf24;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.5;
}
.ai-chat-limitations strong { color: #92400e; }

/* ============================================================
   LOADING — espelha .ai-msg-loading / .dash-chat-msg-loading
   ============================================================ */
.ai-chat-thinking {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-500);
  font-size: 13px;
  font-style: italic;
  padding: 12px 16px;
}
.ai-chat-thinking-dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray-500);
  margin: 0 1px;
  animation: ai-chat-dot 1.4s infinite both;
  opacity: 0.6;
}
.ai-chat-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-chat-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   ERROR — espelha .ai-msg-error
   ============================================================ */
.ai-chat-error {
  align-self: stretch;
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #c62828;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
}

/* ============================================================
   ÁREA DE INPUT — espelha .ai-panel-input / .ai-input-row
   ============================================================ */
.ai-chat-input-area {
  border-top: 1px solid var(--gray-200);
  padding: 16px 20px;
  background: #fff;
  overflow: visible;
  position: relative;
  z-index: 10;
}

.ai-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.ai-chat-input-row textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  max-height: 140px;
  outline: none;
  background: #fff;
  color: var(--gray-900);
  margin-bottom: 0;
}
.ai-chat-input-row textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.ai-chat-send-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  height: 36px;
}
.ai-chat-send-btn:hover:not(:disabled) { background: var(--primary-dark); }
.ai-chat-send-btn:disabled {
  background: var(--gray-200);
  cursor: not-allowed;
  color: var(--gray-500);
}

.ai-chat-input-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gray-500);
}
.ai-chat-meta-warning { color: #92400e; font-weight: 600; }

/* ============================================================
   ABA "Chat com IA" no Builder de Dashboards — sem mudanças visuais críticas
   ============================================================ */
.ai-catalog-section { display: flex; flex-direction: column; gap: 16px; }

.ai-catalog-section label.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ai-catalog-section .ai-catalog-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 24px;
  border-left: 2px solid var(--gray-200);
}
.ai-catalog-section .ai-catalog-fields[hidden] { display: none; }

.ai-catalog-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ai-catalog-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-size: 12px;
}
.ai-catalog-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.ai-catalog-summary {
  min-height: 80px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.ai-catalog-stale-warning {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  padding: 8px 12px;
  font-size: 12px;
  color: #92400e;
  border-radius: 4px;
  margin: 4px 0;
}

/* ── #1 Follow-ups sugeridos ─────────────────────────────── */
.ai-chat-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 2px;
}
.ai-chat-followups-label {
  font-size: 11px;
  color: var(--gray-500);
  margin-right: 2px;
}
.ai-chat-followup-chip {
  font-size: 12px;
  padding: 4px 10px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  cursor: pointer;
  transition: background .12s;
}
.ai-chat-followup-chip:hover { background: #e0e7ff; }

/* ── #4 Feedback 👍/👎 ───────────────────────────────────── */
.ai-chat-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.ai-chat-fb-btn {
  font-size: 13px;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .12s, background .12s;
}
.ai-chat-fb-btn:hover { opacity: 1; background: var(--gray-100); }
.ai-chat-fb-btn.active { opacity: 1; background: #dcfce7; border-color: #86efac; }
.ai-chat-fb-thanks { font-size: 10px; color: var(--gray-400); margin-left: 6px; font-style: italic; }

/* Botões de feedback mais discretos (menores) */
.ai-chat-feedback { margin-top: 4px; }
.ai-chat-fb-btn { font-size: 11px; padding: 1px 6px; }

/* ── #5 Fonte clicável + popover ─────────────────────────── */
.ai-chat-source-clickable { cursor: pointer; }
.ai-chat-source-clickable:hover { filter: brightness(0.96); text-decoration: underline; }
.ai-chat-source-popover {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: 10px 12px;
  max-width: 260px;
  font-size: 12px;
  z-index: 10000;
}
.ai-chat-source-popover-text { color: var(--gray-700); margin-bottom: 10px; line-height: 1.4; }
/* Variante "sem permissão" — vermelho discreto */
.ai-chat-source-popover.denied { border-color: #fecaca; background: #fef2f2; }
.ai-chat-source-popover.denied .ai-chat-source-popover-text { color: #b91c1c; font-size: 11px; }
.ai-chat-source-popover-actions { display: flex; gap: 8px; }
.ai-chat-source-popover-btn {
  font-size: 11px;
  padding: 4px 11px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.ai-chat-source-popover-btn.primary { background: var(--primary, #4f46e5); color: #fff; border-color: var(--primary, #4f46e5); }

/* ── #3 Resumo executivo (estado vazio) ──────────────────── */
.ai-chat-summary-box {
  margin: 12px 0 8px;
  padding: 10px 12px;
  background: #fdf4ff;
  border: 1px solid #f0abfc;
  border-radius: 8px;
}
.ai-chat-summary-label { font-size: 12px; color: #86198f; margin-bottom: 6px; font-weight: 600; }
.ai-chat-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chat-summary-chip {
  font-size: 12px;
  padding: 4px 10px;
  background: #fff;
  color: #86198f;
  border: 1px solid #f0abfc;
  border-radius: 14px;
  cursor: pointer;
  transition: background .12s;
}
.ai-chat-summary-chip:hover { background: #fae8ff; }