/* UI-11 (Tray, 2026-10-03; Muse is the reference). Loaded after
   chat-activity.css. The status pill under the floating agent shows an icon
   and one to three words; the "•••" typing bubble sits under the person's
   last message while the agent works and before answer text shows. */

.typing-pill .status-pill-icon { width:15px; height:15px; flex:none; display:grid; place-items:center; color:var(--ink-2); }
.typing-pill .status-pill-icon svg { width:15px; height:15px; }
.typing-pill .status-pill-icon:empty { display:none; }
.typing-pill[data-kind="approval"] .status-pill-icon { color:var(--ink); }
.typing-pill .typing-words { color:var(--ink); }

/* The bubble: an agent bubble's shape and fill, three dots that rise in turn. */
.typing-bubble { display:inline-flex; align-items:center; gap:5px; height:40px; padding:0 16px; border-radius:18px; background:var(--panel-2); }
.typing-bubble i { width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:typing-bubble-dot 1.3s ease-in-out infinite; }
.typing-bubble i:nth-child(2) { animation-delay:.18s; }
.typing-bubble i:nth-child(3) { animation-delay:.36s; }
.msg .msg-body > .live-answer + .typing-bubble { margin-top:10px; }
@keyframes typing-bubble-dot { 0%, 60%, 100% { opacity:.4; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .typing-bubble i { animation:none !important; opacity:.7; transform:none; }
}

/* A step that did not work, in a turn that carried on: marked quietly, not
   red (red is the turn ending with "Needs attention"). */
.ca-step.step-failed .ca-step-icon { color:var(--ink-3); }
.ca-step.step-failed .ca-step-text { color:var(--ink-2); }

/* The side panel's sticky document header (Results, a file, a Library item)
   takes the panel's own background, not the page's: no dark band across the
   panel in dark mode. */
.work-panel .wp-doc-head { background:var(--panel); }