/* U1 (agent feel): status pill, working avatar, Activity panel, "Worked for"
   fold and running badges. Tokens only; grayscale with the green status dot
   the Agent map chip already uses. Loaded after design-foundation.css. */

/* ---- status pill at the top of the thread ---- */
/* Centered in the thread header like Muse's; on a narrow thread it floats
   just below the header and the conversation keeps room for it. */
.thread { container-type:inline-size; container-name:thread; }
.thread-top { position:relative; z-index:4; }
.thread-status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  max-width:min(460px, calc(100% - 560px)); pointer-events:none; display:flex; justify-content:center; }
.thread-status[hidden] { display:none; }
@container thread (max-width: 799px) {
  .thread-status { top:calc(100% + 10px); transform:translate(-50%,0); max-width:calc(100% - 32px); }
  .thread-top:has(> .thread-status:not([hidden])) ~ .chat-scroll > .chat-msgs { padding-top:46px; }
}
.status-pill { pointer-events:auto; display:inline-flex; align-items:center; gap:7px; height:30px; max-width:100%; min-width:0;
  padding:0 12px 0 10px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel-2); color:var(--ink-2);
  font:inherit; font-size:12.5px; font-weight:550; letter-spacing:-.005em; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28); transition:background .15s ease, border-color .15s ease, color .15s ease; }
:root[data-theme="light"] .status-pill { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.status-pill:hover { background:var(--raise); border-color:var(--line-3); color:var(--ink); }
.status-pill:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.status-pill-icon, .run-kind { width:15px; height:15px; flex:none; display:grid; place-items:center; color:var(--ink-2); }
.status-pill-icon svg, .run-kind svg { width:15px; height:15px; }
.status-pill[data-kind]:not([data-kind="done"]):not([data-kind="stop"]) .status-pill-icon { animation:ca-pulse 1.8s ease-in-out infinite; }
.status-pill-label { display:grid; min-width:0; overflow:hidden; }
.ca-text { grid-area:1/1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .2s ease, transform .2s ease; }
.ca-text.entering { opacity:0; transform:translateY(5px); }
.ca-text.leaving { opacity:0; transform:translateY(-5px); }
.status-pill-tick { flex:none; color:var(--ink-3); font-weight:500; font-variant-numeric:tabular-nums; }
.status-pill-tick:empty { display:none; }

/* ---- the lead's working avatar and its one-line status ---- */
#pending-msg .avori-working-mark { position:relative; width:28px; height:28px; overflow:visible; transform-origin:50% 85%; }
/* Same animation name the chat has always used; now a gentle working bob. */
@keyframes avori-breathe {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  30% { transform:translateY(-1.5px) rotate(-3deg); }
  62% { transform:translateY(0) rotate(2deg); }
}
.avori-working-mark.is-working { animation:avori-breathe 1.6s ease-in-out infinite; }
.working-dots { position:absolute; right:-8px; bottom:-4px; display:inline-flex; align-items:center; gap:2px; padding:2px 3px;
  border-radius:99px; background:var(--panel-2); border:1px solid var(--line-2); pointer-events:none; }
.working-dots i { width:3px; height:3px; border-radius:50%; background:var(--ink-2); animation:ca-dot 1.2s ease-in-out infinite; }
.working-dots i:nth-child(2) { animation-delay:.15s; }
.working-dots i:nth-child(3) { animation-delay:.3s; }
#pending-msg .run-status-main { align-items:center; gap:11px; }
#pending-msg .run-status-copy { display:inline-flex; align-items:center; gap:6px; min-width:0; }
#pending-msg .run-kind { color:var(--ink-3); }
#pending-msg .run-kind:empty { display:none; }
#pending-msg .run-current { color:var(--ink-2); background:linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 38%, var(--ink) 50%, var(--ink-3) 62%, var(--ink-3) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ca-shimmer 2.6s linear infinite; }
#pending-msg .run-current.ca-swap { animation:ca-swap .22s ease, ca-shimmer 2.6s linear infinite; }
/* The words the agent is writing come first; the working line stays below. */
#pending-msg .msg-body > .live-answer + #run-status-card { margin-top:8px; }

@keyframes ca-dot { 0%, 60%, 100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-1.5px); } }
@keyframes ca-pulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } }
@keyframes ca-shimmer { 0% { background-position:110% 0; } 100% { background-position:-110% 0; } }
@keyframes ca-swap { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }

/* ---- Activity panel (a tab of the chat's right panel) ---- */
/* The panel's tabs scroll within their row so Close always stays on screen. */
.wp-head .wp-tabs { min-width:0; overflow-x:auto; scrollbar-width:none; }
.wp-head .wp-tabs::-webkit-scrollbar { display:none; }
.wp-head .wp-tabs > button { flex:none; }
.wp-head #wp-close { flex:none; }
@media (min-width: 901px) { .work-panel.activity-shelf { width:400px; max-width:42%; } }
.ca-panel { display:flex; flex-direction:column; gap:24px; min-width:0; }
.ca-lead { display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 0 2px; text-align:center; min-width:0; }
.ca-avatar { position:relative; width:72px; height:72px; display:grid; place-items:center; transform-origin:50% 85%; }
.ca-avatar :is(.agent-avatar, .blob-avatar, .agent-identity, svg) { width:100%; height:100%; }
.ca-avatar .working-dots { right:-4px; bottom:4px; gap:3px; padding:3px 5px; }
.ca-avatar .working-dots i { width:4px; height:4px; }
.ca-lead-name { font-size:17px; font-weight:600; color:var(--ink); }
.ca-now { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; color:var(--ink-3); font-size:13px; }
.ca-now-icon { width:15px; height:15px; flex:none; display:grid; place-items:center; }
.ca-now-icon svg { width:15px; height:15px; }
.ca-now-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-now-tick { flex:none; font-variant-numeric:tabular-nums; }
.ca-now-tick:empty { display:none; }
.ca-section { min-width:0; }
.ca-section h4 { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--ink); }
.ca-turn-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ca-title { margin:0; font-size:15px; font-weight:600; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }
.ca-badge { flex:none; padding:2px 8px; border:1px solid var(--line-2); border-radius:99px; font-size:11.5px; color:var(--ink-2); white-space:nowrap; }
.ca-badge.done { border-color:transparent; background:var(--green-soft); color:var(--green); }
.ca-badge.error { border-color:transparent; background:var(--red-soft); color:var(--red); }
.ca-turn-pick { display:block; margin:0 0 12px; }
.ca-turn-pick select { width:100%; min-height:34px; padding:6px 10px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel); color:var(--ink-2); font:inherit; font-size:12.5px; }
.ca-steps { list-style:none; margin:0; padding:0; }
.ca-step { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:start; padding:7px 0;
  font-size:13.5px; line-height:1.42; color:var(--ink-2); }
.ca-step::before { content:''; position:absolute; left:9.5px; top:28px; bottom:-8px; width:1px; background:var(--line-2); }
.ca-step:last-child::before { display:none; }
.ca-step-icon { position:relative; z-index:1; width:20px; height:20px; display:grid; place-items:center; color:var(--ink-3); background:var(--panel); }
.ca-step-icon svg { width:15px; height:15px; }
.ca-step-text { min-width:0; overflow-wrap:anywhere; }
.ca-step.said .ca-step-text { color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ca-step time { padding-top:1px; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ca-step.running .ca-step-icon { color:var(--ink); animation:ca-pulse 1.8s ease-in-out infinite; }
.ca-step.running .ca-step-text { background:linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 38%, var(--ink) 50%, var(--ink-3) 62%, var(--ink-3) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ca-shimmer 2.6s linear infinite; }
.ca-step.error .ca-step-icon { color:var(--red); }
.ca-steps.compact .ca-step { padding:5px 0; font-size:13px; }
.ca-steps.compact .ca-step::before { top:25px; }
.ca-helpers { list-style:none; margin:0 0 0 9.5px; padding:0 0 0 12px; border-left:1px solid var(--line-2); }
.ca-helper + .ca-helper { margin-top:2px; }
.ca-helper-row { display:grid; grid-template-columns:8px minmax(0,1fr); column-gap:10px; row-gap:1px; width:100%; padding:8px; border:0;
  border-radius:9px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.ca-helper-row:hover { background:var(--hover); }
.ca-helper-row:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.ca-helper-dot { grid-row:1; width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--ink-3); }
.ca-helper.st-running .ca-helper-dot { background:var(--green); box-shadow:0 0 0 3px var(--green-soft); animation:ca-pulse 1.6s ease-in-out infinite; }
.ca-helper.st-failed .ca-helper-dot { background:var(--red); }
.ca-helper-name { min-width:0; overflow-wrap:anywhere; font-size:13.5px; font-weight:550; color:var(--ink); }
.ca-helper-line { grid-column:2; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ca-helper-detail { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:2px 8px 8px 26px; font-size:12.5px; }
.ca-helper-detail[hidden] { display:none; }
.ca-helper-detail dt { color:var(--ink-3); }
.ca-helper-detail dd { margin:0; color:var(--ink-2); overflow-wrap:anywhere; }
.ca-helper > .btn { margin:0 0 8px 26px; }
.ca-results { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ca-result { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.ca-result:hover { background:var(--hover); }
.ca-result-icon { width:16px; height:16px; flex:none; color:var(--ink-3); display:grid; place-items:center; }
.ca-result-icon svg { width:16px; height:16px; }
.ca-result-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-foot { display:flex; justify-content:flex-start; }
.ca-empty { margin:0; color:var(--ink-3); font-size:13px; }

/* ---- "Worked for Ns" fold above a finished reply ---- */
.worked-fold { margin:2px 0 8px; max-width:100%; }
.worked-fold > summary { list-style:none; display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 6px 3px 0;
  border-radius:7px; color:var(--ink-3); font-size:13px; cursor:pointer; user-select:none; }
.worked-fold > summary::-webkit-details-marker { display:none; }
.worked-fold > summary:hover { color:var(--ink-2); }
.worked-fold > summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.worked-fold-lead { color:var(--ink-2); }
.worked-fold-meta::before { content:'·'; margin-right:5px; }
.worked-fold-caret { width:13px; height:13px; display:grid; place-items:center; transition:transform .15s ease; }
.worked-fold-caret svg { width:13px; height:13px; }
.worked-fold[open] .worked-fold-caret { transform:rotate(90deg); }
.worked-fold-body { margin:6px 0 4px; padding:8px 14px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel); max-width:640px; }
.worked-fold-open { margin-top:4px; padding:4px 0; border:0; background:none; color:var(--ink-2); font:inherit; font-size:12.5px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.worked-fold-open:hover { color:var(--ink); }

/* ---- running badges beside every chat with a turn in flight ---- */
.run-dot { display:none; flex:none; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft);
  animation:ca-pulse 1.6s ease-in-out infinite; }
.agent-conversation.is-running .run-dot { display:inline-block; margin-left:auto; }
.agent-rail-avatar { position:relative; }
.agent-rail-item.is-running .agent-rail-avatar > .run-dot { display:block; position:absolute; right:0; bottom:2px; }
.agent-rail-heading .rail-working { display:none; flex:none; color:var(--ink-3); font-size:10px; }
.agent-rail-item.is-running .rail-working { display:inline; }
.agent-rail-item.is-running .rail-when, .rail-when:empty { display:none; }
.sb-link.is-running .lbl::after { content:''; display:inline-block; width:6px; height:6px; margin-left:7px; border-radius:50%; background:var(--green); vertical-align:middle; }

@media (max-width: 680px) {
  .status-pill { height:32px; font-size:12.5px; }
  .worked-fold > summary { min-height:32px; }
  .ca-helper-row, .ca-result { min-height:44px; }
}
@media (prefers-reduced-motion: reduce) {
  .avori-working-mark.is-working, .working-dots i, .status-pill-icon, .ca-step.running .ca-step-icon, .ca-helper-dot, .run-dot { animation:none !important; }
  .working-dots i { opacity:.7; }
  #pending-msg .run-current, .ca-step.running .ca-step-text { animation:none !important; background:none; color:var(--ink-2); }
  .ca-text { transition:none; }
}