/* Tema visual — cores da Arati Distribuidora (autorizada Coca-Cola), mesma
   paleta do arati-fill-rate / arati-checklist. */

:root {
  --pico-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root:not([data-theme="dark"]),
[data-theme="light"] {
  --pico-primary: #F40009;
  --pico-primary-background: #F40009;
  --pico-primary-border: #F40009;
  --pico-primary-underline: #F40009;
  --pico-primary-hover: #C40007;
  --pico-primary-hover-background: #C40007;
  --pico-primary-hover-border: #C40007;
  --pico-primary-hover-underline: #C40007;
  --pico-primary-focus: rgba(244, 0, 9, 0.375);
  --pico-primary-inverse: #FFFFFF;

  --pico-background-color: #FFFFFF;
  --pico-color: #1A1A1A;
  --pico-h1-color: #1A1A1A;
  --pico-h2-color: #1A1A1A;
  --pico-h3-color: #1A1A1A;

  --pico-card-background-color: #F5F5F5;
  --pico-card-sectioning-background-color: #F5F5F5;
  --pico-table-row-stripped-background-color: #F5F5F5;
}

a:not([role="button"]) {
  color: var(--pico-primary);
}


.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.marca { margin-bottom: 0.25rem; }
.marca span { color: var(--pico-primary); }

.aviso {
  padding: 0.75rem 1rem;
  border-left: 4px solid #E0A800;
  background: #FFF6DA;
  border-radius: var(--pico-border-radius);
}

.acoes { display: flex; gap: 0.4rem; align-items: center; }
.acoes > *, .acoes button { width: auto; margin: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.acoes form { margin: 0; }

/* Tela do chat: ocupa a altura toda, mensagens rolam, envio fica embaixo. */
main.tela-chat {
  display: flex; flex-direction: column; height: 100dvh;
  max-width: 52rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.tela-chat .topo { margin-bottom: 0.5rem; }
.mensagens { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; padding: 0.25rem; }
.msg { max-width: 88%; padding: 0.6rem 0.85rem; border-radius: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.msg p { margin: 0 0 0.45rem; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 0.45rem; padding-left: 1.2rem; }
.msg li { margin: 0; }
.msg ul li { list-style: disc; }
.msg.usuario { align-self: flex-end; background: #FDE6E7; white-space: pre-wrap; }
.msg.assistente { align-self: flex-start; background: #F5F5F5; }
.msg.pensando { color: var(--pico-muted-color); font-style: italic; }
.msg.erro { background: #FFF6DA; border-left: 3px solid #E0A800; }

/* Mensagem pronta pro contato humano. */
.encaminhar {
  margin-top: 0.6rem; padding: 0.6rem 0.75rem; background: #fff;
  border: 1px solid var(--pico-muted-border-color); border-left: 3px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
}
.encaminhar-texto { white-space: pre-wrap; margin: 0.35rem 0 0.6rem; font-size: 0.92rem; }
.encaminhar-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.encaminhar-acoes > * { width: auto; margin: 0; padding: 0.35rem 0.9rem; font-size: 0.9rem; }

.envio { display: flex; gap: 0.5rem; align-items: flex-end; margin: 0.5rem 0 0; }
.envio textarea { margin: 0; resize: none; }
.envio button { width: auto; margin: 0; }

.encaminhamento header { font-size: 0.9rem; }

@media (max-width: 600px) {
  .tela-chat .topo { flex-wrap: wrap; gap: 0.4rem; }
  .msg { max-width: 95%; }
}