/* Sidebar session-status marks + bottom-right question card (2026-09-08).
 *
 * Marks (one per row, conversations/session-status.js):
 *   .csm-working  breathing dot  amber  the agent is working
 *   .csm-question ?       amber      a question is waiting for your reply
 *   .csm-finished ✓       --b2-ok    finished, not opened since
 *   .csm-error    ⚠       --b2-warn  stopped with an error, not opened since
 * Semantic colours (review 2026-09-07): blue stays collaboration-only, green =
 * done, red = needs-you/danger (unused here), orange-brown = run error. */

/* Trailing mark (user pick R2, 2026-09-09): the mark is the last thing in the
 * row, after the title and the team icon, so every row's mark sits on the same
 * right edge. No reserved slot — an empty slot is display:none. It fades out
 * while the ⋯ overlay shows on hover (theme-b2-light §45). Row gap spaces it. */
.conv-status-mark {
    position: relative; flex: 0 0 13px; width: 13px; height: 13px;
    display: inline-grid; place-items: center; margin: 0;
    color: #D99A1E; line-height: 0;
}
.conv-status-mark.csm-empty { display: none; }
.conv-status-mark svg { width: 13px; height: 13px; display: block; }
.conv-status-mark.csm-finished { color: var(--b2-ok, #0E9F6E); }
.conv-status-mark.csm-error { color: var(--b2-warn, #B54708); }
/* D5 breathing dot (user pick 2026-09-08, replaces the P4 ripple ring): a 7px
 * dot — same size as the collaboration unread dot, colour tells them apart —
 * that only breathes in opacity (1 → .5, 2.8 s), never scales or expands. */
.csm-core { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: currentColor; animation: csm-breath 2.8s ease-in-out infinite; }
@keyframes csm-breath { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .csm-core { animation: none; } }

/* ---------- Bottom-right question card (notifications/pending-replies.js) ----
 * V3 "chat bubble": a message from the other conversation's agent that came
 * over to this corner. Type scale = chat area (.message-content 15→14/1.6,
 * .message-meta 10.5) + composer (.input-wrapper 16px, .send-btn 28px);
 * option list = the docked card's .uq-line family (main.css). No blue. */
.qc-corner {
    position: fixed; right: 24px; bottom: 24px; z-index: 11000;
    width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 10px 12px 12px; border-radius: 16px;
    background: var(--b2-bg, #FAFAF9); border: 1px solid var(--b2-line, #E5E7EB);
    box-shadow: 0 10px 38px #11121621, 0 2px 7px #1112160d;
    color: var(--b2-ink, #111216); font-family: var(--f-sans, sans-serif);
    animation: qc-rise .22s ease-out both;
}
@keyframes qc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qc-corner { animation: none; } }
.qc-meta { display: flex; align-items: center; gap: 6px; padding: 0 4px 6px; font-size: 10.5px; color: var(--b2-ink-3, #6B7280); min-width: 0; }
.qc-title { flex: 0 1 auto; min-width: 0; font-weight: 600; color: var(--b2-ink-2, #4B5563); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-sep, .qc-prog, .qc-clock { flex: none; }
.qc-clock, .qc-prog { font-family: var(--f-mono, ui-monospace, monospace); font-weight: 600; font-variant-numeric: tabular-nums; }
.qc-spacer { flex: 1 1 0; }
.qc-open {
    flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0;
    border: 0; background: none; cursor: pointer; font: 500 11px/1 var(--f-sans, sans-serif);
    color: #94671E; white-space: nowrap;
}
.qc-open:hover { color: #704B10; text-decoration: underline; text-underline-offset: 3px; }
.qc-close { flex: none; font-size: 14px !important; margin: 0 !important; }
.qc-bubble { background: var(--b2-surface, #FFFFFF); border: 1px solid var(--b2-line, #E5E7EB); border-radius: 16px 16px 16px 6px; padding: 12px 14px 8px; }
.qc-text { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--b2-ink, #111216); overflow-wrap: anywhere; }
.qc-bubble .uq-line { padding: 5px 8px; }
.qc-bubble .uq-send { margin: 8px 0 2px 8px; }
.qc-composer {
    display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 7px 8px 7px 14px;
    background: var(--b2-surface, #FFFFFF); border: 1px solid var(--b2-line, #E5E7EB); border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08); transition: border-color .12s;
}
.qc-composer:focus-within { border-color: var(--b2-user-rule, #E0B65E); }
.qc-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 13px var(--f-sans, sans-serif); color: var(--b2-ink, #111216); }
.qc-input::placeholder { color: var(--b2-ink-4, #9CA3AF); }
.qc-send { flex: none; }
.qc-send svg { width: 14px; height: 14px; }
.qc-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 4px 0; font-size: 11px; color: var(--b2-ink-3, #6B7280); }
.qc-sleft { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.qc-status-warn .qc-stext { color: var(--b2-warn, #B54708); }
.qc-status-error .qc-stext { color: var(--b2-err, #DC2626); }
.qc-back, .qc-more { border: 0; background: none; padding: 0; cursor: pointer; font: 500 11px var(--f-sans, sans-serif); color: var(--b2-ink-3, #6B7280); white-space: nowrap; }
.qc-back:hover, .qc-more:hover { color: var(--b2-ink, #111216); text-decoration: underline; }
.qc-corner :is(button, input):focus-visible { outline: 2px solid rgba(224, 182, 94, .65); outline-offset: 1px; }
@media (max-width: 520px) { .qc-corner { right: 16px; bottom: 16px; } }