/* ==========================================================================
   chat-bubble.css — one message in a conversation. The single owner of the
   bubble primitive: Inbox threads (src/chat, inbox.css lays out the thread
   around it) and the global help launcher (src/support) both render it.

   It lives in its own sheet, linked globally from index.html, because its
   two consumers load differently: inbox.css rides the per-route wireframes
   shell, while the help launcher is on every screen. Before this file the
   launcher carried a renamed copy (`.sm-help-msg`) — a second owner of the
   same component. Moved here unchanged from inbox.css (bar the #fff
   literal, now a token); the two additions are real variants, not
   overrides.

     <div class="msg msg--in | msg--out [msg--typing]">
       <span class="msg__avatar [msg__avatar--initials]"><img …/> | M</span>
       <div class="msg__body">
         <div class="msg__bubble">…</div>
         <span class="msg__time">2:14 PM</span>
       </div>
     </div>

   Variants
     .msg__avatar--initials  no photo (support agent): initials on brand tint
     .msg--typing            "is typing": three breathing dots in the bubble;
                             the consumer supplies the accessible text
   ========================================================================== */

.msg { display: flex; gap: var(--space-8); max-width: 78%; }
.msg--in  { align-self: flex-start; }
.msg--out { align-self: flex-end; flex-direction: row-reverse; }
.msg__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 30px;
  overflow: hidden;
  background: var(--bg-3);
  align-self: flex-end;
}
.msg__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font: var(--fw-bold) var(--fs-micro)/1 var(--font-base);
}
.msg__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg--out .msg__body { align-items: flex-end; }
.msg__bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font: var(--fw-regular) var(--fs-sm)/1.45 var(--font-base);
  overflow-wrap: break-word;
}
.msg--in  .msg__bubble { background: var(--bg-3); color: var(--ink); border-bottom-left-radius: 6px; }
.msg--out .msg__bubble { background: var(--brand); color: rgb(var(--white-rgb)); border-bottom-right-radius: 6px; }
.msg__time {
  font: var(--fw-regular) var(--fs-meta)/1.2 var(--font-base);
  color: var(--muted);
}

/* Typing: three dots breathing in sequence. */
.msg--typing .msg__bubble { display: flex; gap: 4px; padding: var(--space-12) var(--space-14); }
.msg--typing .msg__bubble i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: msg-typing 1s var(--ease) infinite;
}
.msg--typing .msg__bubble i:nth-child(2) { animation-delay: .15s; }
.msg--typing .msg__bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-typing {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Narrow threads give messages more of the row. */
@media (max-width: 880px) {
  .msg { max-width: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .msg--typing .msg__bubble i { animation: none; opacity: .7; }
}