/*
  Chat component: the Athena chat of the missing-screens design (app.js athena) — the thread, its bubbles and the
  message bar. Moved unchanged from families/ms-public-a.css on 3 Oct 2026 so the Athena pages (front matter
  css: families/ms-public-a, chat) and the site-wide Intake chat widget (partials/chat-widget.html, CHAT_ENABLED) share
  one definition. The widget's own layout is in chat-widget.css.
*/

/* Rows inset in a card — the same value families/ms-public-a.css uses for its inset rows (it keeps its own copy). */
:root { --msa-inset: var(--aw-bg-secondary); }
:root[data-theme="light"] { --msa-inset: var(--aw-bg-primary); }

.chat { display: flex; flex-direction: column; }
.chat .status { font-size: 14px; }
/* Bubbles size to their text: in Figma they stretch to fill equal grid rows, leaving tall empty boxes */
.chat .chat-thread { flex: 1 1 auto; display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 22px; }
.bubble {
  max-width: 88%;
  padding: 14px var(--aw-space-4);
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-lg);
  font-size: 13px;
  line-height: 1.55;
}
.bubble--athena { align-self: flex-start; background: var(--aw-bg-soft); color: var(--aw-text-energy); }
.bubble--user { align-self: flex-end; background: var(--msa-inset); }
.chat-input { display: flex; gap: var(--aw-space-2); margin: 0 18px 18px; }
.chat-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--aw-border-line);
  border-radius: 6px;
  background: var(--msa-inset);
  color: var(--aw-text-primary);
  font-size: 14px;
}
.chat-input input::placeholder { color: var(--aw-text-secondary); opacity: 1; }
.chat-input input:focus { outline: none; border-color: var(--aw-accent-gold-light); }
.chat-input .icon-btn { width: 48px; height: 48px; flex: none; color: var(--aw-accent-gold-light); border-color: var(--aw-border-line); }

@media (max-width: 767px) {
  .chat .chat-thread { padding: var(--aw-space-4); }
  .chat-input { margin: 0 var(--aw-space-4) var(--aw-space-4); }
}