/* bleed-activity (10 Nov): what the Sales Agent is doing: the strip over the tab (with the
   autopilot bar inside it), each row's status, the feed of its steps, Live and Older
   (web/bleed-activity.js). app.css tokens only, so light and dark are a token swap. The state is
   always words; the colour and the icon only repeat it. */

/* --- the strip: one line of what the agent is doing, the autopilot beside it --------------- */
#tab-bleed.bd-has-strip .bd-pulse { display: none; }   /* the strip says it now */
.bd-strip { flex: none; display: flex; align-items: center; gap: 10px 20px; padding: 10px 16px 10px 18px; border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--soft); font-size: 13px; line-height: 1.3; }
.bd-strip-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.bd-strip-head { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.bd-strip-head strong { font: 600 15px/1.25 var(--text); letter-spacing: -.01em; }
.bd-strip[data-pulse="stale"] .bd-strip-head strong { color: var(--warn); }
.bd-strip[data-pulse="stop"] .bd-strip-head strong { color: var(--stop); }
.bd-live { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.bd-live.live { background: var(--ok); animation: bd-live 2.2s var(--ease) infinite; }
.bd-live.stale { background: var(--warn); }
.bd-live.stop { background: var(--stop); }
@keyframes bd-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* two lines: what it is doing, then its numbers */
.bd-strip-main { gap: 4px 14px; }
.bd-strip-head { flex: 1 0 100%; }
.bd-strip-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-left: 14px; border-left: 1px solid var(--rule); }
.bd-strip-group.now { margin-left: 11px; padding-left: 0; border-left: 0; }
.bd-strip-label { margin-right: 6px; font: 600 10.5px var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bd-strip .bd-strip-n { height: 26px; min-height: 0; gap: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--soft); font-size: 13px; font-weight: 400; white-space: nowrap; }
.bd-strip .bd-strip-n:hover { background: var(--bg2); border-color: transparent; color: var(--ink); }
.bd-strip .bd-strip-n.on { background: var(--accent2); border-color: var(--gold-line); color: var(--ink); }
.bd-strip-n b { margin-right: 4px; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.bd-strip-n[data-bd-strip="drafting"] b { color: var(--info); }
.bd-strip-n[data-bd-strip="sent"] b { color: var(--ok); }
.bd-strip-n[data-bd-strip="held"] b { color: var(--warn); }
.bd-strip-look { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* which route the drafts are asked on; a studio-key route says why, in the warning tone */
.bd-strip-route { font-size: 12px; color: var(--muted); }
.bd-strip-route.warn { color: var(--warn); font-weight: 600; }
.bd-strip-side { flex: none; display: flex; align-items: center; gap: 10px; }
.bd-strip-auto:empty { display: none; }
/* the autopilot bar inside the strip: its mode and switch, no box of its own; today's numbers are the strip's */
.bd-strip .bd-auto { padding: 0 0 0 14px; border: 0; border-left: 1px solid var(--rule); background: transparent; box-shadow: none; flex-wrap: nowrap; gap: 8px; }
.bd-strip .bd-auto-today, .bd-strip .bd-auto-note { display: none; }
.bd-strip .bd-auto-name { gap: 6px; }
.bd-strip .bd-auto-switch { height: 30px; }
.bd-strip .bd-feed-toggle { height: 30px; min-height: 0; gap: 6px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
.bd-feed-toggle .icon { width: 15px; height: 15px; }
.bd-feed-toggle[aria-expanded="true"] { background: var(--bg2); }
.bd-feed-toggle[hidden] { display: none !important; }

/* --- a row: its status first --------------------------------------------------------------- */
.bd-li { position: relative; list-style: none; }
.bd-row2 { gap: 5px; }
.bd-row-studio { flex: none; padding: 0 7px; border: 1px solid var(--rule); border-radius: 999px; color: var(--soft); font-size: 10.5px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.bd-row-own { border-color: var(--gold-line); color: var(--accent3); }
.bd-st { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.bd-st-icon { position: relative; flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px; margin-top: -1px; border-radius: 50%; background: var(--bg2); color: var(--soft); }
.bd .bd-st-icon .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.bd-st-text { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bd-st-left { flex: none; color: var(--soft); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-st.ready { color: var(--accent3); }
.bd-st.ready .bd-st-icon { background: var(--gold-soft); color: var(--accent3); }
.bd-st.busy { color: var(--info); }
.bd-st.busy .bd-st-icon { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.bd-st.busy .bd-st-icon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--info); animation: bd-spin 1.1s linear infinite; }
.bd-st.busy .bd-st-text::after { content: "…"; display: inline-block; animation: bd-fade 1.4s ease-in-out infinite; }
.bd-st.held { color: var(--warn); }
.bd-st.held .bd-st-icon { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.bd-st.ok { color: var(--ok); }
.bd-st.ok .bd-st-icon { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.bd-st.muted { color: var(--soft); font-weight: 500; }
.bd-st.muted .bd-st-icon { color: var(--muted); }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@keyframes bd-fade { 50% { opacity: .25; } }
.bd-row2 .bd-last { color: var(--muted); font-size: 12.5px; }
.bd-row2.st-held { box-shadow: inset 3px 0 0 var(--warn); }
.bd-row2.st-ready { box-shadow: inset 3px 0 0 var(--accent3); }
.bd-row2.st-busy { box-shadow: inset 3px 0 0 var(--info); }
.bd-row2.st-muted .bd-row-top strong { color: var(--ink2); font-weight: 500; }
.bd-li.has-undo .bd-row2 { padding-bottom: 40px; }
.bd .bd-row-undo { position: absolute; left: 39px; bottom: 9px; height: 26px; min-height: 0; gap: 5px; padding: 0 10px; border-color: var(--gold-line); background: var(--gold-soft); color: var(--accent3); font-size: 12px; font-weight: 600; }
.bd .bd-row-undo .icon { width: 13px; height: 13px; }

/* --- the list: Live / Older, what a number filtered, the filters folded --------------------- */
.bd-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 12px 0; }
.bd-scope[hidden] { display: none; }
.bd-scope-segs { display: flex; gap: 3px; padding: 3px; border-radius: var(--r); background: var(--bg2); }
.bd-scope-segs .bd-seg { flex: none; padding: 0 10px; }
.bd-only { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 6px 6px 10px; border: 1px solid var(--gold-line); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.bd-only .icon { width: 13px; height: 13px; color: var(--accent3); }
.bd-only .bd-only-clear { margin-left: auto; padding: 2px 6px; font-size: 12px; }
.bd-filters.folded { display: none; }
.bd-search .bd-filters-toggle { flex: none; height: 26px; min-height: 0; gap: 4px; margin-right: -4px; padding: 0 6px; border: 0; background: transparent; color: var(--muted); }
.bd-search .bd-filters-toggle:hover, .bd-search .bd-filters-toggle[aria-expanded="true"] { background: var(--bg2); color: var(--ink); }
.bd-filters-toggle .icon { width: 14px; height: 14px; }

/* --- the feed: on the right; a rail when folded ---------------------------------------------- */
.bd.has-feed { --bd-feed-w: 300px; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 340px) var(--bd-feed-w); }
.bd.has-feed[data-feed="closed"] { --bd-feed-w: 48px; }
.bd-feed { grid-row: 1; grid-column: -2; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--rule); background: var(--paper); }
.bd-feed-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--rule); }
.bd-feed-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.bd-feed-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.bd-feed .bd-feed-close { flex: none; padding: 6px; color: var(--muted); }
.bd-feed .bd-feed-close:hover { color: var(--ink); background: var(--bg2); }
.bd-feed-rail { display: none; }
.bd-feed-note { flex: none; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.bd-feed-note:empty { display: none; }
.bd-feed-note[data-bad="1"] { color: var(--stop); }
.bd-feed-list { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 6px 8px 18px; }
.bd-feed-list > li { position: relative; }
/* a thread down the icons: one step after another */
.bd-feed-list > li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 38px; bottom: -6px; width: 1px; background: var(--rule); }
.bd-feed .bd-ev { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%; height: auto; min-height: 0; padding: 9px 8px; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--ink); font-weight: 400; text-align: left; }
.bd-feed .bd-ev:hover { background: var(--paper2); border-color: var(--rule); }
.bd-ev.fresh { animation: bd-ev-in 2.4s var(--ease); }
@keyframes bd-ev-in { 0%, 30% { background: var(--gold-soft); } 100% { background: transparent; } }
.bd-ev-icon { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg2); color: var(--soft); box-shadow: 0 0 0 3px var(--paper); }
.bd .bd-ev-icon .icon { width: 13px; height: 13px; }
.k-drafted .bd-ev-icon { background: var(--gold-soft); color: var(--accent3); }
.k-held .bd-ev-icon { background: color-mix(in srgb, var(--warn) 16%, var(--paper)); color: var(--warn); }
.k-scheduled .bd-ev-icon { background: color-mix(in srgb, var(--info) 14%, var(--paper)); color: var(--info); }
.k-sent .bd-ev-icon { background: color-mix(in srgb, var(--ok) 16%, var(--paper)); color: var(--ok); }
.k-failed .bd-ev-icon { background: color-mix(in srgb, var(--stop) 14%, var(--paper)); color: var(--stop); }
.k-skipped .bd-ev-icon, .k-undone .bd-ev-icon { color: var(--muted); }
.bd-ev-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bd-ev-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bd-ev-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.bd-ev-ago { flex: none; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-ev-text { color: var(--ink2); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.k-failed .bd-ev-text { color: var(--stop); }
.k-held .bd-ev-text { color: var(--warn); }
.bd-ev-studio { color: var(--muted); font-size: 11px; }
.bd-feed-empty { margin: 10px 4px; padding: 16px; border: 1px dashed var(--rule2); border-radius: var(--r); color: var(--soft); font-size: 13px; line-height: 1.45; }
.bd-feed-empty strong { color: var(--ink); }
.bd-feed-empty p { margin: 4px 0 0; }
/* folded: a narrow rail with the count of new steps */
.bd[data-feed="closed"] .bd-feed-title, .bd[data-feed="closed"] .bd-feed-close, .bd[data-feed="closed"] .bd-feed-note, .bd[data-feed="closed"] .bd-feed-list { display: none; }
.bd[data-feed="closed"] .bd-feed-head { justify-content: center; padding: 8px 0; border-bottom: 0; }
.bd[data-feed="closed"] .bd .bd-feed-rail, .bd[data-feed="closed"] .bd-feed-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; height: auto; min-height: 0; padding: 10px 6px; border: 0; background: transparent; color: var(--soft); }
.bd[data-feed="closed"] .bd-feed-rail:hover { color: var(--ink); background: var(--bg2); }
.bd-feed-rail-words { writing-mode: vertical-rl; font: 600 10.5px var(--text); letter-spacing: .18em; text-transform: uppercase; }
.bd-feed-rail .bd-n { background: var(--accent3); color: var(--paper); }
.bd-feed-rail .bd-n[hidden], .bd-feed-rail-latest { display: none; }

/* --- narrower: the project is a drawer, the feed stays a column ------------------------------- */
@media (max-width: 1180px) {
  .bd.has-feed { --bd-feed-w: 280px; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) var(--bd-feed-w); }
  .bd-strip { flex-wrap: wrap; }
}
/* a phone: the strip stacks; the feed is a sheet over the list, a bar when folded */
@media (max-width: 760px) {
  .bd-strip { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px; }
  .bd-strip-main { gap: 4px 8px; }
  .bd-strip-head strong { font-size: 14px; }
  .bd-strip-group { padding-left: 0; border-left: 0; margin-left: -8px; }
  .bd-strip-group.today { margin-left: 0; }
  .bd-strip-side { justify-content: space-between; }
  .bd-strip .bd-auto { padding-left: 0; border-left: 0; }
  .bd-strip .bd-auto-name { display: none; }
  .bd-strip .bd-auto-mode { white-space: nowrap; }
  .bd-feed-toggle-words { display: none; }   /* the icon, its title and count say it */
  .bd-strip .bd-feed-toggle { padding: 0 10px; }
  .bd.has-feed { grid-template-columns: minmax(0, 1fr); }
  .bd-feed { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; grid-column: auto; max-height: 72%; border-left: 0; border-top: 1px solid var(--rule2); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -18px 40px -24px rgba(0,0,0,.45); }
  .bd[data-feed="open"] .bd-feed { height: 72%; }
  .bd[data-pane="chat"] .bd-feed { display: none; }
  .bd.has-feed[data-feed="closed"] .bd-list { padding-bottom: 56px; }
  .bd[data-feed="closed"] .bd-feed-head { padding: 0; }
  .bd[data-feed="closed"] .bd-feed-rail { flex-direction: row; width: 100%; gap: 10px; padding: 14px 16px; }
  .bd[data-feed="closed"] .bd-feed-rail-words { writing-mode: horizontal-tb; flex: none; color: var(--ink); }
  .bd[data-feed="closed"] .bd-feed-rail-latest { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; text-align: left; letter-spacing: 0; text-transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-live.live, .bd-st.busy .bd-st-icon::after, .bd-st.busy .bd-st-text::after, .bd-ev.fresh { animation: none; }
}