/* Capture scene: three channels feeding one queue. A lead queue, not another thread. */

[data-app-scene="capture"] .app-preview--capture { display: flex; flex-direction: column; }

/* Signed-in user's picture in the top bar, styled like the initials badge it replaces. */
[data-app-scene="capture"] .app-preview-actions img.app-user { object-fit: cover; border: 1px solid var(--showcase-line); }

[data-app-scene="capture"] .capture-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

/* Filter row: All channels, WhatsApp, Instagram, Messenger, each with a live count. */
[data-app-scene="capture"] .capture-filters {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 11px 11px 9px;
}
[data-app-scene="capture"] .capture-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--showcase-line);
  border-radius: 6px;
  background: transparent;
  color: var(--showcase-muted);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 160ms, color 160ms, border-color 160ms;
}
[data-app-scene="capture"] .capture-filter svg { width: 10px; height: 10px; flex: none; }
[data-app-scene="capture"] .capture-filter b {
  display: inline-grid;
  min-width: 15px;
  height: 13px;
  padding: 0 3px;
  place-items: center;
  border-radius: 4px;
  background: var(--showcase-panel-2);
  color: var(--showcase-muted);
  font-size: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 160ms, color 160ms;
}
[data-app-scene="capture"] .capture-filter:hover { border-color: var(--showcase-line); background: var(--showcase-panel-2); color: var(--showcase-text); }
[data-app-scene="capture"] .capture-filter.is-active { border-color: oklch(.55 .13 263 / .7); background: oklch(.66 .18 263 / .14); color: var(--showcase-text); }
[data-app-scene="capture"] .capture-filter.is-active b { background: oklch(.66 .18 263 / .24); color: oklch(.86 .09 263); }
[data-app-scene="capture"] .capture-live-dot { display: inline-block; width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--showcase-blue); margin-inline-end: 1px; }

/* Queue rows. */
[data-app-scene="capture"] .capture-rows {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
  padding: 0 11px 11px;
  overflow: hidden;
}
[data-app-scene="capture"] .capture-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  column-gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--showcase-line);
  border-radius: 8px;
  background: var(--showcase-panel);
  transition: border-color 160ms, background 160ms;
}
[data-app-scene="capture"] .capture-row:hover { border-color: var(--showcase-line); background: var(--showcase-panel-2); }
[data-app-scene="capture"] .capture-row.is-expanded {
  border-color: oklch(.55 .13 263 / .65);
  background: linear-gradient(135deg, oklch(.2 .035 264 / .94), oklch(.155 .02 264 / .94));
}
[data-app-scene="capture"] .capture-row.is-expanded::before {
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--showcase-blue);
}

/* Customer picture, with the channel it wrote in badged on top and an unread dot for unclaimed
   leads. The photo is the primary read; the channel is metadata, so it stays a small corner glyph. */
[data-app-scene="capture"] .capture-row-avatar {
  position: relative;
  align-self: start;
  flex: none;
  margin-top: 1px;
  width: 24px;
  height: 24px;
}
[data-app-scene="capture"] .capture-row-pic {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
[data-app-scene="capture"] span.capture-row-pic {
  display: grid;
  place-items: center;
  background: var(--showcase-panel-2);
  color: var(--showcase-muted);
  font-size: 8px;
  font-weight: 700;
}
[data-app-scene="capture"] img.capture-row-pic { object-fit: cover; border: 1px solid var(--showcase-line); }
[data-app-scene="capture"] .capture-row-chanbadge {
  position: absolute;
  bottom: -2px;
  inset-inline-end: -2px;
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border-radius: 50%;
  border: 1.4px solid var(--showcase-bg);
  background: var(--showcase-panel-2);
  color: var(--showcase-muted);
}
[data-app-scene="capture"] .capture-row-chanbadge svg { width: 7px; height: 7px; }
[data-app-scene="capture"] .capture-row[data-status="new"] .capture-row-avatar::after {
  content: "";
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(.8 .15 80);
  box-shadow: 0 0 0 2px var(--showcase-panel);
}

/* Row body: name, tag, time, message preview, source, and (expanded only) original context. */
[data-app-scene="capture"] .capture-row-body { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
[data-app-scene="capture"] .capture-row-head { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
[data-app-scene="capture"] .capture-row-name {
  overflow: hidden;
  color: var(--showcase-text);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="capture"] .capture-row-tag {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--showcase-line);
  border-radius: 5px;
  color: var(--showcase-muted);
  font-size: 7px;
  font-weight: 600;
}
[data-app-scene="capture"] .capture-row-time {
  flex: none;
  margin-inline-start: auto;
  color: var(--showcase-muted);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}
[data-app-scene="capture"] .capture-row-message {
  overflow: hidden;
  color: oklch(.85 .01 264);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="capture"] .capture-row-source {
  overflow: hidden;
  color: var(--showcase-muted);
  font-size: 7px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="capture"] .capture-row-context {
  margin-top: 6px;
  padding: 8px 9px;
  border: 1px solid var(--showcase-line);
  border-radius: 7px;
  background: oklch(.105 .01 264 / .6);
}
[data-app-scene="capture"] .capture-row-context span { display: block; margin-bottom: 3px; color: var(--showcase-text); font-size: 7px; font-weight: 700; }
[data-app-scene="capture"] .capture-row-context p { overflow: hidden; color: var(--showcase-muted); font-size: 7px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Ownership: an agent avatar, an AI chip, or unassigned. */
[data-app-scene="capture"] .capture-row-owner { align-self: center; display: flex; flex: none; align-items: center; justify-content: center; }
[data-app-scene="capture"] .capture-row-owner .app-avatar { width: 20px; height: 20px; font-size: 7px; }
[data-app-scene="capture"] .capture-row-owner img.app-avatar { object-fit: cover; border: 1px solid var(--showcase-line); }
[data-app-scene="capture"] .capture-owner-ai {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 6px;
  background: oklch(.72 .16 150 / .14);
  color: oklch(.82 .13 150);
  font-size: 7px;
  font-weight: 700;
}
[data-app-scene="capture"] .capture-owner-ai svg { width: 9px; height: 9px; }
[data-app-scene="capture"] .capture-owner-unassigned { color: var(--showcase-muted); font-size: 7px; font-weight: 500; white-space: nowrap; }

/* Status chip: New (needs a person), Assigned (a person owns it), AI handled (done). */
[data-app-scene="capture"] .capture-status {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 600;
  white-space: nowrap;
}
[data-app-scene="capture"] .capture-status i { width: 5px; height: 5px; flex: none; border-radius: 50%; }
[data-app-scene="capture"] .capture-status[data-status="new"] { background: oklch(.8 .15 80 / .14); color: oklch(.82 .13 80); }
[data-app-scene="capture"] .capture-status[data-status="new"] i { background: oklch(.8 .15 80); }
[data-app-scene="capture"] .capture-status[data-status="assigned"] { background: oklch(.66 .18 263 / .16); color: oklch(.8 .1 263); }
[data-app-scene="capture"] .capture-status[data-status="assigned"] i { background: var(--showcase-blue); }
[data-app-scene="capture"] .capture-status[data-status="ai"] { background: oklch(.72 .16 150 / .16); color: oklch(.82 .13 150); }
[data-app-scene="capture"] .capture-status[data-status="ai"] i { background: oklch(.72 .16 150); }

[data-app-scene="capture"] button:focus-visible { outline: 2px solid var(--showcase-blue); outline-offset: 2px; }

/* Entrance: filters then rows settle in, staggered, from a visible resting state. */
[data-app-scene="capture"] .app-preview.is-scene-active .capture-filters { animation: capture-rise 420ms 60ms cubic-bezier(.22,1,.36,1) both; }
/* Keyed on the fixed data-enter attribute, not :nth-child — nth-child is live and renumbers on
   every insertion/eviction, and changing an element's computed animation-delay restarts its
   animation, which was replaying this transform on existing rows and stomping the FLIP
   compensation transform arrive() applies to that same property. Rows the loop inserts later
   carry no data-enter and get their own popIn() instead, so they never match this rule. */
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row[data-enter] { animation: capture-rise 460ms cubic-bezier(.22,1,.36,1) both; }
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row[data-enter="1"] { animation-delay: 140ms; }
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row[data-enter="2"] { animation-delay: 210ms; }
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row[data-enter="3"] { animation-delay: 280ms; }
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row[data-enter="4"] { animation-delay: 350ms; }
[data-app-scene="capture"] .app-preview.is-scene-active .capture-row.is-expanded .capture-row-context { animation: capture-rise 380ms 460ms cubic-bezier(.22,1,.36,1) both; }
@keyframes capture-rise { from { opacity: .34; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Shared pop, used for the Hot lead tag, an owner avatar arriving, a status flip and a count tick. */
[data-app-scene="capture"] .capture-status.is-flipping { animation: capture-pop 380ms cubic-bezier(.22,1,.36,1); }
[data-app-scene="capture"] .capture-filter b.is-ticking { animation: capture-pop 380ms cubic-bezier(.22,1,.36,1); }
@keyframes capture-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* Idle life: a breathing unread dot, a live filter dot, a softly breathing context accent. */
@media (prefers-reduced-motion: no-preference) {
  [data-app-scene="capture"] .capture-row[data-status="new"] .capture-row-avatar::after { animation: capture-breathe 2.4s ease-in-out infinite; }
  [data-app-scene="capture"] .capture-live-dot { animation: capture-breathe 2.8s ease-in-out infinite; }
  [data-app-scene="capture"] .capture-row.is-expanded::before { animation: capture-accent-breathe 3.2s ease-in-out infinite; }
}
@keyframes capture-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } }
@keyframes capture-accent-breathe { 0%, 100% { box-shadow: 0 0 0 0 oklch(.66 .18 263 / .5); } 50% { box-shadow: 0 0 5px 0 oklch(.66 .18 263 / .85); } }

/* Phone: all four rows (three plus the one that stays expanded) still have to fit inside a
   short ~370px host, so this is denser than the desktop reading, not just bigger — tighter
   paddings and gaps, and the source line drops since the message + context already carry the
   story. 400px (not 360px) so it actually catches the measured phone hosts (364 and 340px). */
@container app-scene (max-width: 400px) {
  [data-app-scene="capture"] .capture-filters { gap: 4px; padding: 8px 8px 6px; }
  [data-app-scene="capture"] .capture-filter { padding: 4px 6px; font-size: 9px; }
  [data-app-scene="capture"] .capture-filter span { display: none; }
  [data-app-scene="capture"] .capture-filter[data-filter="all"] span { display: inline; }
  [data-app-scene="capture"] .capture-filter b { font-size: 8px; }
  [data-app-scene="capture"] .capture-rows { gap: 5px; padding: 0 8px 8px; }
  [data-app-scene="capture"] .capture-row { grid-template-columns: 24px minmax(0, 1fr) auto auto; column-gap: 7px; padding: 7px; }
  [data-app-scene="capture"] .capture-row-body { gap: 2px; }
  [data-app-scene="capture"] .capture-row-avatar { width: 24px; height: 24px; }
  [data-app-scene="capture"] .capture-row-chanbadge { width: 11px; height: 11px; }
  [data-app-scene="capture"] .capture-row-chanbadge svg { width: 6px; height: 6px; }
  [data-app-scene="capture"] .capture-row-name { font-size: 10px; }
  [data-app-scene="capture"] .capture-row-tag,
  [data-app-scene="capture"] .capture-row-time,
  [data-app-scene="capture"] .capture-status,
  [data-app-scene="capture"] .capture-owner-ai,
  [data-app-scene="capture"] .capture-owner-unassigned,
  [data-app-scene="capture"] .capture-row-context span,
  [data-app-scene="capture"] .capture-row-context p { font-size: 8px; }
  [data-app-scene="capture"] .capture-row-message { font-size: 9px; }
  [data-app-scene="capture"] .capture-row-source { display: none; }
  [data-app-scene="capture"] .capture-row-context { margin-top: 4px; padding: 6px 7px; }
  [data-app-scene="capture"] .capture-row-context p { -webkit-line-clamp: 2; }
  [data-app-scene="capture"] .capture-row-owner .app-avatar { width: 20px; height: 20px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-app-scene="capture"] .capture-filters,
  [data-app-scene="capture"] .capture-row,
  [data-app-scene="capture"] .capture-row-context,
  [data-app-scene="capture"] .capture-status.is-flipping,
  [data-app-scene="capture"] .capture-filter b.is-ticking,
  [data-app-scene="capture"] .capture-row[data-status="new"] .capture-row-avatar::after,
  [data-app-scene="capture"] .capture-live-dot,
  [data-app-scene="capture"] .capture-row.is-expanded::before { animation: none; }
}