/* ─── Chat — FAB + painel lateral ──────────────────────────────────────── */

:root {
  /* Largura do painel. Compartilhada com o padding que empurra o conteúdo,
     pra que as duas não saiam de sincronia. */
  --chat-largura: 460px;
}

/* Botão flutuante */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(20, 30, 80, 0.25);
  transition: background 150ms, transform 150ms, box-shadow 150ms;
}

.chat-fab:hover {
  background: var(--color-navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(20, 30, 80, 0.32);
}

.chat-fab__icone {
  font-size: 16px;
  line-height: 1;
}

.chat-aberto .chat-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

@media (max-width: 540px) {
  .chat-fab__label { display: none; }
  .chat-fab { padding: 14px; border-radius: 50%; }
}

/* O painel não cobre a página: empurra o conteúdo pra ele continuar
   inteiro à vista. Só em telas largas — abaixo de 900px sobra pouco espaço
   útil, e aí sobrepor é melhor que espremer. */
@media (min-width: 900px) {
  #root {
    transition: padding-right 220ms cubic-bezier(0.3, 0.7, 0.3, 1);
  }

  .chat-aberto #root {
    padding-right: var(--chat-largura);
  }
}

/* Painel lateral à direita */
.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--chat-largura);
  max-width: 100vw;
  background: var(--color-surface);
  box-shadow: -12px 0 32px rgba(20, 30, 80, 0.16);
  z-index: 945;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.3, 0.7, 0.3, 1);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-drawer.is-aberto {
  transform: translateX(0);
}

@media (max-width: 540px) {
  .chat-drawer { width: 100vw; }
}

/* Cabeçalho do drawer */
.chat-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-inset);
  flex-shrink: 0;
}

.chat-drawer__header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-drawer__titulo-bloco {
  min-width: 0;
}

.chat-drawer__pequeno {
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.chat-drawer__titulo {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.chat-drawer__header-acoes {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.chat-drawer__btn-threads,
.chat-drawer__btn-icone {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 16px;
  font-family: inherit;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.chat-drawer__btn-threads:hover,
.chat-drawer__btn-icone:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.chat-drawer__erro {
  padding: 20px;
  color: var(--color-red);
  font-size: 13px;
}

/* Threads overlay dentro do drawer */
.chat-drawer__threads-overlay {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-surface);
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.chat-drawer__threads-overlay .chat-threads {
  border-right: none;
  flex: 1;
}

/* ── Sidebar de threads (reutilizada como overlay dentro do drawer) ───── */

.chat-threads {
  background: var(--color-surface-inset);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-threads__header {
  padding: 12px 14px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
}

.chat-threads__titulo {
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.4px;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

.chat-threads__nova {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
  cursor: pointer;
  transition: background 150ms;
}

.chat-threads__nova:hover {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}

.chat-threads__vazio {
  padding: 24px 16px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
}

.chat-threads__lista {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-threads__item {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-threads__item:hover {
  background: var(--color-surface);
}

.chat-threads__item.is-ativa {
  background: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--color-navy);
}

.chat-threads__item-titulo {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-threads__item-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.chat-threads__item-data {
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.chat-threads__item-apagar {
  font-size: 14px;
  color: var(--color-text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 100ms, background 100ms, color 100ms;
}

.chat-threads__item:hover .chat-threads__item-apagar {
  opacity: 1;
}

.chat-threads__item-apagar:hover {
  background: var(--color-red-soft);
  color: var(--color-red);
}

/* ── Área da conversa dentro do drawer ─────────────────────────────────── */

.chat-conversa {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-conversa__lista {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Mensagens ──────────────────────────────────────────────────────────── */

.chat-msg {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg--user {
  align-self: flex-end;
}

.chat-msg--user .chat-msg__corpo {
  background: var(--color-navy);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-msg--assistant {
  align-self: flex-start;
  max-width: 92%;
}

.chat-msg--assistant .chat-msg__corpo {
  background: var(--color-surface-inset);
  color: var(--color-text-primary);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.chat-msg__corpo--stream::after {
  content: '▌';
  display: inline;
  color: var(--color-navy);
  animation: chat-blink 1s infinite;
}

@keyframes chat-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.chat-msg__erro {
  background: var(--color-red-soft);
  color: var(--color-red);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.chat-md-p { margin: 0; }
.chat-md-p + .chat-md-p { margin-top: 8px; }

.chat-md-list {
  margin: 6px 0;
  padding-left: 22px;
}

.chat-md-list li + li { margin-top: 3px; }

/* ── Tool trace bubble ──────────────────────────────────────────────────── */

.chat-trace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  align-self: flex-start;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.chat-trace.is-rodando {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.chat-trace.is-finalizada {
  color: var(--color-green);
  border-color: var(--color-green-soft);
}

.chat-trace__icone { font-weight: 500; }

.chat-trace.is-rodando .chat-trace__icone {
  animation: chat-trace-spin 1s infinite linear;
  display: inline-block;
}

@keyframes chat-trace-spin {
  to { transform: rotate(360deg); }
}

.chat-trace__nome { font-weight: 500; }

.chat-trace__args {
  color: var(--color-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
}

.chat-trace__resumo {
  color: var(--color-text-tertiary);
  font-size: 11px;
}

/* ── Artefatos inline ───────────────────────────────────────────────────── */

.chat-artefato {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: 100%;
  overflow-x: auto;
}

.chat-artefato__titulo {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: 0.4px;
}

.chat-artefato__rodape {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.chat-artefato--csv {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-artefato__csv-info {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.chat-artefato__csv-baixar {
  align-self: flex-start;
  background: var(--color-navy);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-navy);
  cursor: pointer;
  font-weight: 500;
}

.chat-artefato__csv-baixar:hover {
  background: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
}

.chat-artefato--erro {
  background: var(--color-amber-soft);
  color: var(--color-amber);
  font-size: 12px;
}

/* ── Sugestões iniciais ─────────────────────────────────────────────────── */

.chat-sugestoes {
  align-self: center;
  max-width: 100%;
  margin-top: 24px;
  text-align: center;
}

.chat-sugestoes__titulo {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}

.chat-sugestoes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.chat-sugestao {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 150ms, background 150ms, color 150ms;
  text-align: left;
}

.chat-sugestao:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
  background: var(--color-surface-inset);
}

/* ── Composer ──────────────────────────────────────────────────────────── */

.chat-composer {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--color-surface);
  flex-shrink: 0;
}

.chat-composer__input {
  flex: 1;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-primary);
  outline: none;
  max-height: 200px;
  overflow-y: auto;
  transition: border-color 150ms, box-shadow 150ms;
}

.chat-composer__input:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(27, 63, 139, 0.12);
}

.chat-composer__input:disabled {
  opacity: 0.7;
  cursor: wait;
}

.chat-composer__enviar {
  padding: 10px 16px;
  background: var(--color-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  white-space: nowrap;
}

.chat-composer__enviar:hover:not(:disabled) {
  background: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
}

.chat-composer__enviar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Abertura: sugestões agrupadas por intenção ────────────────────────── */

.chat-sugestoes__grupo {
  margin-top: 14px;
}

.chat-sugestoes__grupo-titulo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}

/* ─── Abertura: "o que mais você sabe fazer?" ───────────────────────────── */

.chat-capacidades {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.chat-capacidades__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--color-text-secondary);
  transition: color 0.1s;
}

.chat-capacidades__toggle:hover {
  color: var(--color-navy);
}

.chat-capacidades__seta {
  font-size: 9px;
  color: var(--color-text-tertiary);
}

.chat-capacidades__lista {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.chat-capacidades__lista li {
  margin-bottom: 2px;
}