/* ─── Sofia chat — the ONE chat design, used by every surface ─────────────────
   Sofia: avatar left + white bubble.  User: dark bubble right, no avatar.
   Markup is emitted by /ui/sofia.js — pages never hand-roll chat rows. */

.sofia-msg { display:flex; align-items:flex-end; gap:8px; margin:0 0 10px; }
.sofia-msg.user { justify-content:flex-end; }

.sofia-av { width:34px; height:34px; border-radius:50%; flex:none; display:block; margin-bottom:2px; }

/* Sofia's avatar: a pink orb (the Spot) with a black spot inside. It rests in the
   centre and only hops around WHILE she's typing — one move per word (driven by
   sofia.js typeStream), then it settles back to centre. No idle animation. */
.sofia-orb { background:#F23D72; position:relative; overflow:hidden; }
.sofia-orb .pupil { position:absolute; width:42%; height:42%; top:29%; left:29%;
  border-radius:50%; background:#0B0B0B; will-change:transform; transform:translate(0,0);
  transition:transform .16s ease; }
@media (prefers-reduced-motion: reduce) { .sofia-orb .pupil { transition:none; transform:translate(0,0) !important; } }

.sofia-body { max-width:min(78%, 520px); min-width:0; }
.sofia-bubble { background:#FFFFFF; border:1px solid #ECECEA; border-radius:16px 16px 16px 5px;
                padding:11px 14px; font:400 14px/1.55 Inter,system-ui,sans-serif; color:#0D0D0D;
                box-shadow:0 1px 2px rgba(0,0,0,.04); overflow-wrap:break-word; }
.sofia-msg.user .sofia-bubble { background:#0D0D0D; border-color:#0D0D0D; color:#fff;
                                border-radius:16px 16px 5px 16px; max-width:min(78%, 520px); }

/* typing indicator */
.sofia-dots { display:inline-flex; gap:4px; align-items:center; padding:3px 2px; }
.sofia-dots i { width:6px; height:6px; border-radius:50%; background:#B9B9B4; animation:sofiaDot 1.1s ease-in-out infinite; }
.sofia-dots i:nth-child(2) { animation-delay:.15s; }
.sofia-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes sofiaDot { 0%,60%,100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-3px); opacity:1; } }

/* quick-reply chips (indented past the avatar so they hang under the bubble) */
.sofia-chips { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px 42px; }
.sofia-chip { font:500 13px/1.2 Inter,system-ui,sans-serif; color:#0D0D0D; background:#EBE8E1;
              border:1px solid #DCD9D2; border-radius:99px; padding:9px 15px; cursor:pointer; text-align:left;
              display:inline-flex; align-items:center; }
.sofia-chip:hover { border-color:#F23D72; color:#F23D72; background:#fff; }
.sofia-chip-key { color:#F23D72; font-weight:700; margin-right:7px; flex:none; }
/* cycling suggestions: dim + buzz, swap the text, then brighten back in */
.sofia-chip { transition:opacity .24s ease; }
.sofia-chip.swapping { opacity:.22; animation:sofia-chip-buzz .3s ease; }
@keyframes sofia-chip-buzz {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-2px); }
  40% { transform:translateX(2px); }
  60% { transform:translateX(-1.5px); }
  80% { transform:translateX(1.5px); }
}
@media (prefers-reduced-motion: reduce) { .sofia-chip.swapping { animation:none; } }

@media (prefers-reduced-motion: reduce) { .sofia-dots i { animation:none; } }