/* Chat tasks (server/chat-tasks.js): requests the person sent while the agent
   worked, each its own turn. The Activity panel lists them, one quiet row
   each; a task's result in the thread names its task. Colour only for
   meaning: green working, amber needs you, red didn't finish. */
.ca-task-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ca-task { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:2px; border-radius:9px; }
.ca-task:hover { background:var(--hover); }
.ca-task-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; column-gap:var(--space-2, 8px); min-width:0; min-height:36px;
  padding:6px var(--space-2, 8px); border-radius:9px; color:var(--ink); font-size:14px; text-decoration:none; }
.ca-task-row:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.ca-task-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-3); }
.ca-task.st-waiting .ca-task-dot { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.ca-task.st-running .ca-task-dot { background:var(--green); box-shadow:0 0 0 3px var(--green-soft); animation:ca-pulse 1.6s ease-in-out infinite; }
.ca-task.st-attention .ca-task-dot { background:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); }
.ca-task.st-failed .ca-task-dot { background:var(--red); }
.ca-task:is(.st-done, .st-stopped, .st-failed) .ca-task-title { color:var(--ink-2); }
.ca-task-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-task-line { color:var(--ink-3); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ca-task.st-attention .ca-task-line { color:var(--ink-2); }
.ca-task-stop { display:grid; place-items:center; width:28px; height:28px; margin-right:4px; padding:0; border:0; border-radius:7px;
  background:none; color:var(--ink-3); cursor:pointer; }
.ca-task-stop:hover { background:var(--panel-2); color:var(--ink); }
.ca-task-stop:focus-visible { outline:2px solid var(--ink); outline-offset:1px; }
.ca-task-stop:disabled { opacity:.5; cursor:default; }
.ca-task-stop svg { width:14px; height:14px; }

/* The task a result came from, beside the agent's name. */
.msg .who .msg-task-tag { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; border:0;
  background:none; color:var(--ink-3); font:inherit; font-weight:400; text-align:left; cursor:pointer; }
.msg .who .msg-task-tag:hover { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
/* The time keeps its line beside a long task name. */
.msg .who:has(.msg-task-tag) time { flex:none; white-space:nowrap; }
.msg .who .msg-task-tag:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }

/* "Add to current work" under the agent's "On it" note: quiet, one tap. */
.msg-task-fold { align-self:flex-start; margin-top:4px; padding:4px 10px; border:1px solid var(--line-2); border-radius:99px;
  background:none; color:var(--ink-2); font:inherit; font-size:14px; cursor:pointer; }
.msg-task-fold:hover { background:var(--hover); color:var(--ink); }
.msg-task-fold:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.msg-task-fold:disabled { opacity:.5; cursor:default; }
.msg-task-fold[hidden] { display:none; }
.msg.user .msg-steer-task { align-self:flex-end; margin-left:auto; display:block; }

@media (max-width: 760px) {
  /* Rule zero on the phone: 16 px text, 44 px targets. */
  .msg .who .msg-task-tag { display:block; flex:0 1 auto; max-width:calc(100vw - 160px); min-height:44px; line-height:44px; font-size:16px; }
  .msg .who:has(.msg-task-tag) { align-items:center; }
  .msg-task-fold { min-height:44px; padding:8px 16px; font-size:16px; }
  /* Rule zero: nothing small on the phone. */
  .ca-task-row { min-height:48px; font-size:16px; }
  .ca-task-line { font-size:15px; }
  .ca-task-stop { width:44px; height:44px; }
  .ca-task-stop svg { width:16px; height:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-task-dot { animation:none !important; }
}