/* Chat do site (assets/chat.js) — usa os tokens de styles.css */
.chat-botao {
  position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + 56px + var(--space-3)); z-index: 21;
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-petroleo); color: var(--brand-verde);
  display: grid; place-items: center; box-shadow: var(--shadow-pop);
}
.chat-botao:hover { background: var(--brand-petroleo-deep); }
.chat-botao .icone { width: 26px; height: 26px; }

.chat-painel {
  position: fixed; z-index: 30; right: var(--space-4); bottom: var(--space-4);
  width: 380px; height: min(600px, calc(100vh - 2 * var(--space-4)));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  border: 1px solid var(--border);
}
.chat-painel[hidden] { display: none; }
@media (max-width: 520px) {
  .chat-painel { inset: 0; width: auto; height: 100%; border-radius: 0; border: none; }
}

.chat-topo {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--brand-petroleo); color: #fff;
}
.chat-topo__titulo { flex: 1; min-width: 0; }
.chat-topo__titulo strong { display: block; font: 700 15px/1.3 var(--font-display); }
.chat-topo__titulo span { display: block; font-size: 12.5px; color: var(--nav-ink); }
.chat-topo button {
  background: none; border: none; color: var(--nav-ink); cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm); display: grid; place-items: center;
}
.chat-topo button:hover { color: var(--brand-verde); background: rgba(255, 255, 255, .08); }
.chat-topo button:focus-visible { outline: 2px solid var(--brand-verde); outline-offset: 1px; }

.chat-teste {
  padding: 6px var(--space-4); background: var(--warning-bg); color: var(--warning-ink);
  font-size: 12.5px; font-weight: 500;
}

.chat-lista {
  flex: 1; overflow-y: auto; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); background: var(--bg-000);
}
.chat-intro { font-size: 14px; color: var(--ink-muted); text-align: center; margin: var(--space-2) var(--space-4) var(--space-3); }

.chat-msg {
  max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg--cliente { align-self: flex-end; background: var(--brand-petroleo); color: #fff; border-bottom-right-radius: var(--space-1); }
.chat-msg--cliente a { color: var(--brand-verde); }
.chat-msg--presto { align-self: flex-start; background: var(--bg-100); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: var(--space-1); }
.chat-msg--presto a { color: var(--ink-link); }
.chat-msg__nome { display: block; font-size: 12px; font-weight: 600; color: var(--ink-link); margin-bottom: 2px; }
.chat-msg__hora { display: block; text-align: right; font-size: 11px; opacity: .65; margin-top: 2px; }

.chat-digitando { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--bg-100); border: 1px solid var(--border); border-radius: var(--radius-md); }
.chat-digitando[hidden] { display: none; }
.chat-digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-subtle); animation: chat-pulo 1.2s infinite; }
.chat-digitando i:nth-child(2) { animation-delay: .15s; }
.chat-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-pulo { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-aviso { align-self: center; font-size: 12.5px; color: var(--info-ink); background: var(--info-bg); padding: 4px 12px; border-radius: var(--radius-pill); }
.chat-erro { padding: 6px var(--space-4); font-size: 13px; color: var(--warning-ink); background: var(--warning-bg); }
.chat-erro[hidden] { display: none; }

.chat-form { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--border); background: var(--bg-100); }
.chat-form textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 42px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font: 400 15px/1.4 var(--font-sans); color: var(--ink); background: var(--bg-100);
}
.chat-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.chat-form button {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-verde); color: var(--brand-petroleo-deep); display: grid; place-items: center;
}
.chat-form button:disabled { opacity: .45; cursor: default; }
.chat-rodape { padding: 0 var(--space-3) var(--space-2); font-size: 11.5px; color: var(--ink-subtle); background: var(--bg-100); text-align: center; }

@media (prefers-reduced-motion: reduce) { .chat-digitando i { animation: none; opacity: .6; } }