/* phase7-sesslist.css — sessions page cleanup (status-colour spec, one action, quieter colour). */

/* 1. Remove action row entirely so the list gets all the space */
html.phase5 #page-sessions .sess-foot-actions,
html.phase3 #page-sessions .sess-foot-actions,
.sess-foot-actions {
  display: none !important;
}

/* 2. + New: filled accent "+" round icon button (>=44px) top-right in header */
html.phase3 .pager-head #btn-new,
#page-sessions .pager-head #btn-new,
.sess-head-new-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50% !important;
  border: none !important;
  background: var(--accent) !important;
  color: var(--accentInk, #1e232a) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
#btn-new.sess-head-new-btn:active {
  transform: scale(0.94);
  opacity: 0.9;
}
#btn-new.sess-head-new-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* 3. Segment row cleanup & Folder name in This folder segment */
html.phase5 .sess-seg {
  border-bottom: 1px solid var(--line2);
  box-shadow: none;
}
html.phase5 .sess-seg::after,
html.phase5 .sess-seg::before,
html.phase5 .sess-seg-btn::after,
html.phase5 .sess-seg-btn::before {
  content: none !important;
  display: none !important;
}
.sess-seg-folder-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
}
.sess-seg-folder-ic {
  width: 14px;
  height: 14px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sess-seg-folder-ic svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  display: block;
}
.sess-seg-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Accent orange ONLY for the primary action (+) and the selected segment */
html.phase5 .sess-seg-btn {
  border-color: var(--line2);
  color: var(--muted);
}
html.phase5 .sess-seg-btn.on {
  border-color: var(--accent);
  color: var(--accent);
}

/* 4. Row styling: no initials avatar, 44px 2-line layout, neutral backgrounds */
html.phase5 .sess-v5-monogram {
  display: none !important;
}

html.phase5 .sess-v5-row-snap {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

html.phase5 .sess-v5-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 4px 12px 4px 10px;
  background-color: var(--surface) !important;
  background-image: none !important;
  border-left: none !important;
  box-sizing: border-box;
  opacity: 1 !important;
}

html.phase5 .sess-v5-row.active {
  background-color: var(--surface) !important;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft)) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: 7px;
}

/* 4px rounded LEFT STRIPE coloured by status */
html.phase5 .sess-v5-stripe,
html.phase5 .sess-v5-folder-bar {
  display: inline-block;
  width: 4px;
  height: 26px;
  min-width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

@keyframes sess-v5-stripe-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.5; transform: scaleY(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  html.phase5 .sess-v5-row[data-status="running"] .sess-v5-stripe {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* 5. 2-Line Row Content */
html.phase5 .sess-v5-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

/* Line 1: Title (light, readable) + Badges */
html.phase5 .sess-v5-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  line-height: 18px;
}

html.phase5 .sess-v5-title {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

html.phase5 .sess-v5-badge-engine {
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
  color: var(--ink-3, var(--muted));
  background: none;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
html.phase5 .sess-v5-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Line 2: Folder name + Time + Status word */
html.phase5 .sess-v5-line2 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
}

html.phase5 .sess-v5-line2-folder,
html.phase5 .sess-v5-cwd-chip {
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 550;
  text-transform: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 0;
}

html.phase5 .sess-v5-line2-sep {
  opacity: 0.5;
  flex-shrink: 0;
}

html.phase5 .sess-v5-time {
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
}

/* Status word matching status stripe */
html.phase5 .sess-v5-status-word {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 6. Badges (independent of stripe, can combine) */

/* Amber "Needs your answer" */
html.phase5 .sess-v5-badge-needsinput {
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--warn, #d97706);
  background: var(--warn-soft, rgba(217, 119, 6, 0.12));
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 999px;
  padding: 0 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Neutral outlined "New reply" */
html.phase5 .sess-v5-unread-badge,
html.phase5 .sess-v5-badge-unread {
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid var(--line2) !important;
  border-radius: 999px !important;
  padding: 0 5px !important;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
}

/* Red "Interrupted" */
html.phase5 .sess-v5-badge-interrupted {
  font-size: 10px;
  line-height: 13px;
  font-weight: 600;
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 999px;
  padding: 0 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Neutral "Temp" tag */
html.phase5 .sess-v5-badge-temp {
  font-size: 9.5px;
  line-height: 12px;
  font-weight: 550;
  color: var(--muted);
  border: 1px solid var(--line2);
  background: var(--surface2);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Pin glyph: filled, muted foreground, clearly visible */
html.phase5 .sess-v5-pin-glyph {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #94a3b8) !important;
  opacity: 0.85;
  flex-shrink: 0;
}
html.phase5 .sess-v5-pin-glyph svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ===== Round 9 (owner): colour = what needs you, carried by the badges =====
   Age colours (blue Recent / grey Older) told the owner too little; the badges
   were what he read. Now: the stripe matches the row's ONE primary status and
   the badges carry the colour. Idle rows: no stripe, no badge; idle rows older
   than 48h fade so the eye skips them. The line-2 status word is gone (the
   badge says it). */
/* Theme-proof colours: Ospi has a dozen light and dark themes and no dark
   class, so the badge TEXT is the status hue mixed toward the theme's own text
   colour (lighter on dark themes, darker on light ones) for contrast. */
html.phase5 .sess-v5-row .sess-v5-stripe { background-color: transparent !important; animation: none; }
html.phase5 .sess-v5-row[data-status="needsinput"] .sess-v5-stripe { background-color: var(--warn, #d97706) !important; }
html.phase5 .sess-v5-row[data-status="running"] .sess-v5-stripe {
  background-color: var(--accent, #F59E0B) !important;
  animation: sess-v5-stripe-pulse 1.8s ease-in-out infinite;
}
html.phase5 .sess-v5-row[data-status="interrupted"] .sess-v5-stripe { background-color: var(--danger, #ef4444) !important; }
@media (prefers-reduced-motion: reduce) {
  html.phase5 .sess-v5-row[data-status="running"] .sess-v5-stripe { animation: none !important; }
}

/* The badge says the status now: drop the line-2 word and the dot before it. */
html.phase5 .sess-v5-status-word,
html.phase5 .sess-v5-line2 .sess-v5-time + .sess-v5-line2-sep { display: none !important; }

/* Coloured badges (shared shape) */
html.phase5 .sess-v5-badges .sess-v5-live-ring,
html.phase5 .sess-v5-badge-needsinput,
html.phase5 .sess-v5-badge-unread,
html.phase5 .sess-v5-unread-badge,
html.phase5 .sess-v5-badge-interrupted {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  font-size: 10.5px !important;
  line-height: 14px !important;
  font-weight: 650 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: none !important;
}
html.phase5 .sess-v5-badges .sess-v5-live-ring {
  color: color-mix(in srgb, var(--accent, #F59E0B) 60%, var(--text)) !important;
  background: color-mix(in srgb, var(--accent, #F59E0B) 16%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #F59E0B) 45%, transparent) !important;
  animation: none !important;
}
html.phase5 .sess-v5-badges .sess-v5-live-ring::before,
html.phase5 .sess-v5-badges .sess-v5-live-ring::after { display: none !important; }
html.phase5 .sess-v5-badge-needsinput {
  color: #1f1500 !important;
  background: var(--warn, #d97706) !important;
  border: 1px solid var(--warn, #d97706) !important;
}
html.phase5 .sess-v5-badge-unread,
html.phase5 .sess-v5-unread-badge {
  color: color-mix(in srgb, #22C55E 60%, var(--text)) !important;
  background: color-mix(in srgb, #22C55E 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, #22C55E 45%, transparent) !important;
}
html.phase5 .sess-v5-badge-interrupted {
  color: var(--danger, #ef4444) !important;
  background: transparent !important;
  border: 1px solid var(--danger, #ef4444) !important;
}

/* Idle and older than 48h: fade the words, keep the row tappable. */
html.phase5 .sess-v5-row[data-status="idle"][data-age="stale"] .sess-v5-content { opacity: 0.6; }
html.phase5 .sess-v5-row.active[data-age="stale"] .sess-v5-content { opacity: 1; }

/* ===========================================================================
   Sessions redesign (SESSIONS-REDESIGN.md, owner-approved 2026-10-14):
   taller three-line rows, project colour bar + label, who, preview line,
   To reply states (New reply / Your turn / Later), compact peek button and
   the peek sheet. Colours come from the theme variables; --proj is the
   per-row project colour set in sessions.js.
   =========================================================================== */
/* Owner 2026-10-14: ~20% shorter than the first 76px cut. */
html.phase5 .sess-v5-row-snap { height: auto; min-height: 60px; max-height: none; }
html.phase5 .sess-v5-row {
  height: auto; min-height: 60px; max-height: none;
  align-items: stretch;
  padding: 6px 12px 6px 10px;
}
/* Owner 2026-10-14: colour goes to what needs action. The project is a quiet
   dot + grey name; the left bar is gone; a thin status line sits on the right
   edge (amber = needs you, accent = new reply / your turn, ok = working). */
html.phase5 .sess-v5-row[data-status] .sess-v5-stripe { display: none !important; }
html.phase5 .sess-v5-row { position: relative; padding-right: 16px; }
html.phase5 .sess-v5-row::after {
  content: ''; position: absolute; right: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: transparent; pointer-events: none;
}
html.phase5 .sess-v5-row[data-status="needsinput"]::after { background: var(--warn, #d97706); }
html.phase5 .sess-v5-row[data-status="interrupted"]::after { background: var(--danger, #c0392b); }
html.phase5 .sess-v5-row[data-status="unread"]::after { background: var(--accent); }
html.phase5 .sess-v5-row[data-status="yourturn"]::after { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html.phase5 .sess-v5-row[data-status="running"]::after { background: var(--ok, #2e8b57); }
html.phase5 .sess-v5-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
html.phase5 .sess-v5-line1 { align-items: flex-start; gap: 8px; }
html.phase5 .sess-v5-title {
  font-size: 14.5px; line-height: 18px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.phase5 .sess-v5-row.unread .sess-v5-title { font-weight: 800; }
html.phase5 .sess-v5-line2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
html.phase5 .sess-v5-status-word { display: none; }
html.phase5 .sess-v5-proj,
.sess-peek-meta .sess-v5-proj {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; font-size: 12px; line-height: 16px; padding: 0; background: none; color: var(--muted);
}
html.phase5 .sess-v5-proj::before,
.sess-peek-meta .sess-v5-proj::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--proj, var(--muted)) 75%, var(--surface));
}
html.phase5 .sess-v5-who { color: var(--muted); }
html.phase5 .sess-v5-preview {
  display: block; font-size: 12.5px; line-height: 16px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.phase5 .sess-v5-preview[hidden] { display: none; }
html.phase5 .sess-v5-badges { align-items: center; gap: 6px; flex-shrink: 0; }
html.phase5 .sess-v5-badge-yourturn,
html.phase5 .sess-v5-badge-later {
  font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 8px; border-radius: 999px; white-space: nowrap;
}
html.phase5 .sess-v5-badge-yourturn { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
html.phase5 .sess-v5-badge-later { color: var(--muted); background: var(--surface2, color-mix(in srgb, var(--muted) 14%, transparent)); }
/* Pin pill: why a quiet pinned chat stays in Active. Same shape as the
   coloured badges; due = warn hue (and the stripe), your turn = accent
   outline, note / reminder = soft grey, quiet = faint dashed. */
html.phase5 .sess-v5-badge-pin {
  display: inline-flex; align-items: center; flex-shrink: 1; min-width: 0; max-width: 14em;
  font-size: 10.5px; line-height: 14px; font-weight: 650; padding: 1px 7px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); border: 1px solid transparent;
}
html.phase5 .sess-v5-badge-pin[data-kind="due"] {
  color: color-mix(in srgb, var(--warn, #d97706) 60%, var(--text));
  background: color-mix(in srgb, var(--warn, #d97706) 16%, transparent);
  border-color: color-mix(in srgb, var(--warn, #d97706) 45%, transparent);
}
html.phase5 .sess-v5-badge-pin[data-kind="yourturn"] {
  color: color-mix(in srgb, var(--accent) 60%, var(--text)); background: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
html.phase5 .sess-v5-badge-pin[data-kind="quiet"] { font-weight: 550; background: none; border: 1px dashed var(--line); }
html.phase5 .sess-v5-row[data-pin="due"] .sess-v5-stripe { background-color: var(--warn, #d97706) !important; }
/* Inbox: a card from this chat waits on the owner. Blue, the Inbox app's hue. */
html.phase5 .sess-v5-badge-inbox {
  display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 10.5px; line-height: 14px; font-weight: 650; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: color-mix(in srgb, #2f6fd0 60%, var(--text));
  background: color-mix(in srgb, #2f6fd0 14%, transparent);
  border: 1px solid color-mix(in srgb, #2f6fd0 45%, transparent);
}
html.phase5 .sess-v5-row[data-status="inbox"] .sess-v5-stripe { background-color: #2f6fd0 !important; }
html.phase5 .sess-v5-peek {
  position: relative; flex: none; width: 26px; height: 26px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--accent);
}
html.phase5 .sess-v5-peek::after { content: ''; position: absolute; inset: -9px; }
html.phase5 .sess-v5-peek svg { width: 15px; height: 15px; }
/* Section headers: what needs you is red, To reply accent, Working ok-green. */
html.phase5 .sess-v5-group-header { display: flex; align-items: baseline; gap: 8px; }
html.phase5 .sess-v5-group-hint { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
html.phase5 .sess-v5-group[data-group="needs"] .sess-v5-group-title { color: var(--danger, #c0392b); }
html.phase5 .sess-v5-group[data-group="active"] .sess-v5-group-title { color: var(--accent); }
html.phase5 .sess-v5-group[data-group="working"] .sess-v5-group-title { color: var(--ok, #2e8b57); }
html.phase5 .sess-v5-group[data-group="earlier"] .sess-v5-row { opacity: 0.72 !important; }

/* Peek sheet */
.sess-peek-sheet { display: flex; flex-direction: column; max-height: 80vh; padding: 0 !important; }
.sess-peek-head { padding: 6px 16px 10px; border-bottom: 1px solid var(--line); }
.sess-peek-title { font-size: 17px; font-weight: 700; line-height: 22px; color: var(--text); }
.sess-peek-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--muted); }
.sess-peek-note { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.sess-peek-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
.sess-peek-turn { padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px dashed var(--line); }
.sess-peek-turn:last-child { border-bottom: 0; margin-bottom: 0; }
.sess-peek-lbl { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sess-peek-turn.latest .sess-peek-lbl { color: var(--accent); font-weight: 700; }
.sess-peek-you { background: color-mix(in srgb, var(--text) 8%, var(--surface)); border-radius: 12px; padding: 8px 11px; margin: 0 0 10px 28px; font-size: 13.5px; color: var(--text); white-space: pre-wrap; max-height: 9em; overflow: hidden; }
.sess-peek-reply { font-size: 14.5px; line-height: 1.5; color: var(--text); }
.sess-peek-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom, 0px)); border-top: 1px solid var(--line); }
.sess-peek-act { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 600; }
.sess-peek-act svg { width: 19px; height: 19px; }
.sess-peek-act.open { background: var(--accent); color: var(--accentInk, #fff); border-color: var(--accent); }

/* Foldable sections (owner 2026-10-14): the header is a button; a folded
   section keeps its header + count and hides its rows. */
html.phase5 button.sess-v5-group-header {
  -webkit-appearance: none; appearance: none; border-radius: 0;
  width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  padding: 8px 12px 4px; justify-content: flex-start; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 40px;
}
html.phase5 .sess-v5-group-chev { display: inline-flex; flex: none; width: 14px; height: 14px; margin-left: -2px; color: var(--muted); transition: transform .15s ease; }
html.phase5 .sess-v5-group-chev svg { width: 14px; height: 14px; }
html.phase5 .sess-v5-group.collapsed .sess-v5-group-chev { transform: rotate(-90deg); }
html.phase5 .sess-v5-group.collapsed .sess-v5-group-rows { display: none; }
html.phase5 .sess-v5-group.collapsed .sess-v5-group-hint { display: none; }

/* Swipe left = read / unread (owner 2026-10-14). The strip under the row shows
   what letting go does; it turns accent once the swipe is past the threshold. */
html.phase5 .sess-v5-actions.sess-v5-swipe-bg {
  width: 100%; justify-content: flex-end; align-items: center; gap: 8px;
  padding-right: 18px; background: var(--surface2, color-mix(in srgb, var(--muted) 14%, var(--surface)));
  color: var(--muted); font-size: 13px; font-weight: 700; transition: background .12s ease, color .12s ease;
}
html.phase5 .sess-v5-row-snap.armed .sess-v5-swipe-bg { background: var(--accent); color: var(--accentInk, #fff); }
html.phase5 .sess-v5-swipe-ic { display: inline-flex; width: 18px; height: 18px; }
html.phase5 .sess-v5-swipe-ic svg { width: 18px; height: 18px; }

/* Owner 2026-10-14: no project colour dot (it confused more than it helped);
   the left edge carries the account initials instead — neutral, no colour. */
html.phase5 .sess-v5-proj::before,
.sess-peek-meta .sess-v5-proj::before { content: none; display: none; }
html.phase5 .sess-v5-avatar {
  flex: none; align-self: flex-start; margin-top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  color: var(--muted); background: color-mix(in srgb, var(--text) 8%, var(--surface));
}
/* Swipe on a row with nothing waiting: grey, so letting go clearly does nothing. */
html.phase5 .sess-v5-row-snap.armed .sess-v5-swipe-bg.none { background: color-mix(in srgb, var(--muted) 18%, var(--surface)); color: var(--muted); }

/* Collapsed pinned chats (owner 2026-10-18; 2026-10-19 "thin and no pills"):
   a plain header line under Active like the others, starts folded; a small dot
   when a chat inside wants him. Inside, one thin line per chat (title + time),
   grouped under small pin-note labels; no avatar, badges, pin or preview. */
html.phase5 .sess-v5-collapsed-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: 2px; background: var(--accent); }
html.phase5 .sess-v5-collapsed-dot.work { background: var(--ok, #2e8b57); }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-row-snap { min-height: 0 !important; height: auto !important; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-row {
  min-height: 34px !important; height: auto !important; max-height: none !important;
  padding-top: 5px !important; padding-bottom: 5px !important; align-items: center !important;
}
html.phase5 .sess-v5-group[data-group="collapsed"] :is(.sess-v5-avatar, .sess-v5-badges, .sess-v5-peek, .sess-v5-pin-glyph, .sess-v5-preview, .sess-v5-proj, .sess-v5-who, .sess-v5-line2-sep, .sess-v5-status-word, .sess-v5-workers-chip) { display: none !important; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-content { flex-direction: row !important; align-items: baseline !important; gap: 10px !important; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-line1 { flex: 1 1 auto; min-width: 0; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-title { font-size: 14px !important; font-weight: 500 !important; line-height: 18px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-line2 { flex: none; flex-wrap: nowrap; }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-row::after { top: 8px; bottom: 8px; }
html.phase5 .sess-v5-sublabel { padding: 6px 14px 1px 22px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
html.phase5 .sess-v5-group[data-group="collapsed"] .sess-v5-group-rows { margin-left: 10px; border-left: 2px solid var(--line); }