/* ============================================================================
   Guided-flow panel, offline queue chip, and the live-activity affordances.
   ========================================================================== */

.flow-panel {
  position: fixed; inset-block-end: var(--s6); inset-inline-end: var(--s6);
  z-index: var(--z-flow); width: min(370px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: flow-in 320ms var(--ease-spring) both;
  max-height: min(560px, calc(100vh - 140px));
}
@keyframes flow-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }

.flow-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s2) var(--s4);
}
.flow-track { display: flex; gap: 4px; padding: 0 var(--s4) var(--s3); }
.flow-pip {
  height: 3px; flex: 1; border-radius: var(--r-full); background: var(--surface-3);
  transition: background var(--t-base) var(--ease-out);
}
.flow-pip[data-state="done"] { background: var(--success); }
.flow-pip[data-state="active"] { background: var(--accent); animation: pip-pulse 2s var(--ease-out) infinite; }
@keyframes pip-pulse { 50% { opacity: 0.5; } }

.flow-body {
  padding: 0 var(--s4) var(--s3); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s2);
}
.flow-body h3 { font-size: var(--t-h3); }
.flow-body p { line-height: 1.55; }
.flow-foot {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-block-start: 1px solid var(--border);
  background: var(--surface-2);
  border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg);
}

/* Keep the flow panel clear of the state switcher on short viewports. */
@media (max-height: 720px) { .flow-panel { inset-block-end: 76px; } }
@media (max-width: 640px) {
  .flow-panel { inset-inline: var(--s3); inset-block-end: 76px; width: auto; }
}

.flow-card {
  display: flex; flex-direction: column; gap: var(--s2); text-align: start;
  padding: var(--s4); border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; width: 100%;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.flow-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.flow-card:active { transform: translateY(0); }

/* --------------------------------------------------------- queue chip ---- */
.queue-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--s2); border-radius: var(--r-full);
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid color-mix(in oklch, var(--warning) 40%, transparent);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap;
}
.queue-chip:hover { filter: brightness(0.97); }
.queue-chip svg { width: 13px; height: 13px; }

/* ------------------------------------------------------ undo affordance -- */
.undo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--s2); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--t-xs); color: var(--muted); cursor: pointer;
}
.undo-chip:hover { background: var(--surface-3); color: var(--fg); }

/* ------------------------------------------------------- live indicator -- */
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.02em;
}
.live-pill i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  display: block; flex: none;
}

/* A row that arrived while the user was working.

   This used to be an absolutely-positioned ::before reading 'NEW', parked
   outside the row's own start edge and animated to opacity 0 after four
   seconds. Three things were wrong with it: it rendered in the card's padding
   rather than in the row, so it read as detached and clipped; it erased itself
   while the reader was still looking at the item; and being CSS `content` it
   was hardcoded English that no dictionary could reach and no leak scan could
   see. The label is now an inline badge in the row's title line, where the
   reader is already looking and where it translates.

   What belongs here is the cue on the ROW: a leading accent edge, the same
   device the table uses for its keyboard cursor. It persists for exactly as
   long as the item is genuinely new and unread, and it disappears because the
   state changed — not because a timer ran out. */
.is-new { position: relative; box-shadow: inset 3px 0 0 0 var(--accent); }
[dir="rtl"] .is-new { box-shadow: inset -3px 0 0 0 var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .flow-panel, .flow-pip[data-state="active"] { animation: none !important; }
}