/* Página IA — porta o bloco "ai-*" do v1 (dashboard escuro) pro tema claro
   do 2.0. Cor de destaque: --c7 (indigo), mesma família usada em gráficos
   categóricos, aqui como acento fixo da feature (não é série de dado). */

.ai-api-bar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 16px;
  background: var(--grid); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.ai-api-bar label { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.ai-api-status { font-size: 11px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.ai-api-status.ok  { color: var(--good); }
.ai-api-status.err { color: var(--critical); }

.ai-month-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ai-month-btn {
  padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--grid); color: var(--text-2); font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: all .15s;
}
.ai-month-btn.active { background: var(--c7); color: #fff; border-color: transparent; }

.ai-mode-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.ai-mode-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--grid); color: var(--text-2); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: all .15s;
}
.ai-mode-btn.active { background: var(--surface); color: var(--text-1); border-color: var(--c7); box-shadow: var(--shadow-sm); }
.ai-mode-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.ai-gen-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 10px 22px; border-radius: var(--radius-sm); border: none;
  background: var(--c7); color: #fff; font: inherit; font-size: 13px;
  font-weight: 800; cursor: pointer; transition: opacity .15s;
}
.ai-gen-btn:disabled { opacity: .5; cursor: default; }
.ai-gen-btn svg { width: 18px; height: 18px; }

.ai-output {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 24px 28px; min-height: 280px; color: var(--text-1); font-size: 14px; line-height: 1.75;
  word-break: break-word;
}
.ai-output.empty { color: var(--muted); font-style: italic; white-space: pre-wrap; }
.ai-output h3 { font-size: 14px; font-weight: 800; color: var(--c7); margin: 18px 0 8px; }
.ai-output h3:first-child { margin-top: 0; }
.ai-output p { margin: 0 0 10px; }
.ai-output ul { margin: 0 0 12px; padding-left: 20px; }
.ai-output li { margin-bottom: 4px; }
.ai-output strong { color: var(--text-1); font-weight: 800; }

.ai-chat-wrap { display: flex; flex-direction: column; gap: 0; height: calc(100vh - 280px); min-height: 340px; }
.ai-chat-messages {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  padding: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0; min-height: 0;
}
.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg-bubble {
  max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.ai-msg.user .ai-msg-bubble { background: var(--c7); color: #fff; border-radius: 14px 4px 14px 14px; }
.ai-msg.ai   .ai-msg-bubble { background: var(--grid); color: var(--text-1); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; }
.ai-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center;
}
.ai-msg-avatar svg { width: 15px; height: 15px; color: var(--c7); }
.ai-msg.ai   .ai-msg-avatar { background: var(--grid); border: 1px solid var(--border); }
.ai-msg.user .ai-msg-avatar { background: var(--c7); color: #fff; font-size: 12px; font-weight: 800; }

.ai-chat-input-row {
  display: flex; gap: 10px; padding: 12px 16px;
  background: var(--grid); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ai-chat-textarea {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; color: var(--text-1); font: inherit; font-size: 13px; line-height: 1.5;
  resize: none; outline: none; max-height: 120px;
}
.ai-chat-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: none; flex-shrink: 0;
  background: var(--c7); color: #fff; cursor: pointer; transition: opacity .15s;
}
.ai-chat-send:disabled { opacity: .4; cursor: default; }
.ai-chat-send svg { width: 20px; height: 20px; }

.ai-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: aiDot .9s ease-in-out infinite; display: inline-block; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }