/* V9.1 — Balão do assistente (balão 1, geral). Só carrega quando AGENTE_ATIVO está ligada.
   Usa APENAS tokens semânticos do design system (app.css) → contraste correto nos 2 temas SEM nenhuma
   media query de cor (o tema é via data-theme; os tokens já se adaptam). z-index abaixo do modal (1050)
   e do toast (1080). Classes prefixadas `agente-` para não colidir/herdar collapse de outras telas. */

.agente-raiz { position: fixed; right: 20px; bottom: 20px; z-index: 1040; }

/* Botão flutuante (FAB) — abre/fecha o painel */
.agente-fab {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--brand-600); color: #fff;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  transition: transform .12s ease, filter .12s ease;
}
.agente-fab:hover { filter: brightness(1.06); transform: translateY(-1px); }
.agente-fab:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

/* Painel de conversa */
.agente-painel {
  position: fixed; right: 20px; bottom: 20px; z-index: 1041;
  width: 360px; max-width: calc(100vw - 32px);
  height: 520px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
  background: var(--card-bg); color: var(--text-body);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-xl); overflow: hidden;
}
.agente-painel[hidden] { display: none; }

.agente-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
}
.agente-cab-titulo { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.agente-x {
  border: none; background: transparent; color: var(--text-body);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.agente-x:hover { color: var(--text-strong); }

.agente-msgs {
  flex: 1 1 auto; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* Bolhas */
.agente-msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.agente-msg-user { align-self: flex-end; background: var(--tint-brand); color: var(--on-tint-brand); border-bottom-right-radius: 4px; }
.agente-msg-bot  { align-self: flex-start; background: var(--bg-surface-2); color: var(--text-body); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.agente-msg-erro { align-self: flex-start; background: var(--tint-danger, var(--bg-surface-2)); color: var(--on-tint-danger, var(--text-body)); border: 1px solid var(--alert-border-danger, var(--border)); }

/* "digitando…" */
.agente-typing { align-self: flex-start; color: var(--text-body); opacity: .7; font-style: italic; font-size: .85rem; }

.agente-vazio { color: var(--text-body); opacity: .75; font-size: .85rem; text-align: center; margin: auto 8px; }

.agente-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--card-bg); }
.agente-input {
  flex: 1 1 auto; resize: none; max-height: 120px;
  background: var(--bg-surface); color: var(--text-body);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  font: inherit;
}
.agente-input:focus { outline: 2px solid var(--brand-400); outline-offset: 0; border-color: var(--brand-600); }
.agente-enviar {
  flex: 0 0 auto; width: 40px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--brand-600); color: #fff; font-size: 1.05rem;
}
.agente-enviar:hover { filter: brightness(1.06); }
.agente-enviar:disabled { opacity: .5; cursor: default; }

/* ── Variante FINANCEIRO (balão 2, só master) — vermelho, para distinguir do balão geral (azul) ──
   Vermelho FIXO no FAB/enviar (independente de tema, como os badges de cargo master); bolha do usuário
   pelos tokens de danger (theme-aware). Contraste conferido nos 2 temas. */
.agente-fin .agente-fab,
.agente-fin .agente-enviar { background: #b91c1c; }          /* red-700: branco sobre ele ≈ 6,4:1 */
.agente-fin .agente-fab:hover,
.agente-fin .agente-enviar:hover { filter: brightness(1.1); }
.agente-fin .agente-fab:focus-visible { outline-color: #f87171; }
.agente-fin .agente-input:focus { outline-color: #f87171; border-color: #b91c1c; }
.agente-fin .agente-msg-user {
  background: var(--tint-danger, rgba(185, 28, 28, .16));
  color: var(--on-tint-danger, var(--text-strong));
  border: 1px solid var(--alert-border-danger, var(--border));
}

/* Mobile: painel quase cheio, ancorado no rodapé */
@media (max-width: 480px) {
  .agente-raiz { right: 12px; bottom: 12px; }
  .agente-painel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 80px); }
}