/* Inbox scene: one shared inbox for WhatsApp, Instagram and Messenger.
   Rail + conversation list (channel badges, unread dots, tags, assignees, filters)
   + thread (customer message, AI-suggested reply, approval strip, next step).
   Every selector below is scoped under [data-app-scene="inbox"]. Tokens
   --showcase-* come from the host (see styles.css); these are the scene's own. */
[data-app-scene="inbox"] {
  --ib-ease: cubic-bezier(.22, 1, .36, 1);
  --ib-green: oklch(.72 .16 150);
  --ib-green-tint: oklch(.72 .16 150 / .12);
  --ib-amber: oklch(.8 .15 80);
  --ib-amber-tint: oklch(.8 .15 80 / .07);
  --ib-red: oklch(.68 .19 25);
  --ib-whatsapp: oklch(.48 .11 152);
  --ib-instagram: oklch(.5 .14 350);
  --ib-messenger: oklch(.46 .12 275);
}

/* Signed-in user in the top bar: `.app-user` is shared chrome from styles.css (sizing,
   circle, background); this only adds what an <img> needs that a text span doesn't. */
[data-app-scene="inbox"] img.app-user { object-fit: cover; border: 1px solid oklch(1 0 0 / .14); }

/* Layout shell: rail, conversation list, thread */
[data-app-scene="inbox"] .ib-shell {
  display: grid;
  grid-template-columns: 36px 234px minmax(0, 1fr);
  height: calc(100% - 42px);
  min-height: 0;
}
[data-app-scene="inbox"] .ib-rail,
[data-app-scene="inbox"] .ib-list,
[data-app-scene="inbox"] .ib-thread { min-width: 0; min-height: 0; overflow: hidden; }

/* Rail */
[data-app-scene="inbox"] .ib-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 5px;
  border-inline-end: 1px solid var(--showcase-line);
  background: oklch(.105 .01 264 / .7);
}
[data-app-scene="inbox"] .ib-rail button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--showcase-muted);
  transition: background 160ms, color 160ms, transform 100ms;
}
[data-app-scene="inbox"] .ib-rail button svg { width: 14px; height: 14px; }
[data-app-scene="inbox"] .ib-rail button:hover { background: var(--showcase-panel-2); color: var(--showcase-text); }
[data-app-scene="inbox"] .ib-rail button:active { transform: scale(.92); }
[data-app-scene="inbox"] .ib-rail button.is-active { background: oklch(.28 .09 264 / .55); color: oklch(.78 .12 263); }

/* Conversation list */
[data-app-scene="inbox"] .ib-list {
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--showcase-line);
  background: oklch(.13 .01 264 / .55);
}
[data-app-scene="inbox"] .ib-list-head {
  display: flex;
  flex: none;
  height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--showcase-line);
}
[data-app-scene="inbox"] .ib-list-head strong { color: var(--showcase-text); font-size: 9px; font-weight: 700; }
[data-app-scene="inbox"] .ib-list-head button {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--showcase-muted);
  transition: background 160ms, color 160ms;
}
[data-app-scene="inbox"] .ib-list-head button svg { width: 12px; height: 12px; }
[data-app-scene="inbox"] .ib-list-head button:hover { background: var(--showcase-panel-2); color: var(--showcase-text); }

[data-app-scene="inbox"] .ib-filters {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--showcase-line);
}
[data-app-scene="inbox"] .ib-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--showcase-muted);
  font-size: 7px;
  font-weight: 600;
  transition: background 160ms, color 160ms, border-color 160ms;
}
[data-app-scene="inbox"] .ib-filter b { font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
[data-app-scene="inbox"] .ib-filter:hover { background: oklch(.19 .02 264 / .5); }
[data-app-scene="inbox"] .ib-filter.is-active { border-color: var(--showcase-line); background: var(--showcase-panel-2); color: var(--showcase-text); }
[data-app-scene="inbox"] .ib-filter b.ib-count-amber { color: var(--ib-amber); }
[data-app-scene="inbox"] .ib-filter b.ib-count-green { color: var(--ib-green); }

[data-app-scene="inbox"] .ib-rows { flex: 1; overflow: hidden; padding-block-end: 6px; }

[data-app-scene="inbox"] .ib-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--showcase-line);
  background: transparent;
  text-align: start;
  transition: background 160ms;
}
[data-app-scene="inbox"] .ib-row:hover:not(.is-selected) { background: oklch(.19 .02 264 / .55); }
[data-app-scene="inbox"] .ib-row.is-selected { background: oklch(.19 .025 264 / .84); }
[data-app-scene="inbox"] .ib-row.is-selected::before {
  content: "";
  position: absolute;
  inset-block: 9px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--showcase-blue);
}

[data-app-scene="inbox"] .ib-row-avatar { position: relative; width: 26px; height: 26px; }
[data-app-scene="inbox"] .ib-row-avatar-pic {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: oklch(.32 .02 264);
  color: var(--showcase-text);
  font-size: 7px;
  font-weight: 700;
  object-fit: cover;
  border: 1px solid oklch(1 0 0 / .12);
}
[data-app-scene="inbox"] .ib-badge {
  position: absolute;
  bottom: -2px;
  inset-inline-end: -2px;
  display: grid;
  width: 11px;
  height: 11px;
  place-items: center;
  border-radius: 50%;
  border: 1.4px solid var(--showcase-bg);
  color: #fff;
}
[data-app-scene="inbox"] .ib-badge svg { width: 7px; height: 7px; stroke-width: 2.2; }
[data-app-scene="inbox"] .ib-badge--lg { width: 13px; height: 13px; }
[data-app-scene="inbox"] .ib-badge--lg svg { width: 8px; height: 8px; }
[data-app-scene="inbox"] .ib-badge--whatsapp { background: var(--ib-whatsapp); }
[data-app-scene="inbox"] .ib-badge--instagram { background: var(--ib-instagram); }
[data-app-scene="inbox"] .ib-badge--messenger { background: var(--ib-messenger); }

[data-app-scene="inbox"] .ib-row-body { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
[data-app-scene="inbox"] .ib-row-line1 { display: flex; min-width: 0; align-items: center; gap: 5px; }
[data-app-scene="inbox"] .ib-row-line1 strong {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  color: var(--showcase-text);
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="inbox"] .ib-tag {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--showcase-line);
  border-radius: 999px;
  color: var(--showcase-muted);
  font-size: 6.5px;
  font-weight: 500;
  white-space: nowrap;
}
[data-app-scene="inbox"] .ib-row-line2 {
  overflow: hidden;
  color: var(--showcase-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-app-scene="inbox"] .ib-row-trail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
[data-app-scene="inbox"] .ib-row-trail time { color: var(--showcase-muted); font-size: 7px; font-variant-numeric: tabular-nums; }
[data-app-scene="inbox"] .ib-indicator { position: relative; display: flex; }
[data-app-scene="inbox"] .ib-assignee-wrap { display: contents; }
[data-app-scene="inbox"] .ib-assignee {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  background: oklch(.3 .02 264);
  color: var(--showcase-text);
  font-size: 6px;
  font-weight: 700;
  object-fit: cover;
  border: 1px solid oklch(1 0 0 / .12);
}
[data-app-scene="inbox"] .ib-assignee--ai { background: var(--ib-green-tint); color: var(--ib-green); }
[data-app-scene="inbox"] .ib-assignee--ai svg { width: 8px; height: 8px; stroke-width: 2; }
[data-app-scene="inbox"] .ib-unread {
  position: absolute;
  top: -1px;
  inset-inline-end: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--showcase-blue);
  border: 1.4px solid var(--showcase-bg);
}

/* Thread */
[data-app-scene="inbox"] .ib-thread { display: flex; flex-direction: column; background: oklch(.12 .01 264 / .5); }
[data-app-scene="inbox"] .ib-thread-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  overflow: hidden;
  padding: 0 12px;
  border-bottom: 1px solid var(--showcase-line);
}
[data-app-scene="inbox"] .ib-thread-avatar {
  position: relative;
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
}
[data-app-scene="inbox"] .ib-thread-avatar-slot { display: contents; }
[data-app-scene="inbox"] .ib-thread-avatar-pic {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: oklch(.32 .02 264);
  color: var(--showcase-text);
  font-size: 8px;
  font-weight: 700;
  object-fit: cover;
  border: 1px solid oklch(1 0 0 / .12);
}
[data-app-scene="inbox"] .ib-thread-id { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
[data-app-scene="inbox"] .ib-thread-id strong {
  overflow: hidden;
  color: var(--showcase-text);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="inbox"] .ib-thread-id small {
  overflow: hidden;
  color: var(--showcase-muted);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app-scene="inbox"] .ib-more {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  margin-inline-start: auto;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--showcase-muted);
  transition: background 160ms, color 160ms;
}
[data-app-scene="inbox"] .ib-more svg { width: 13px; height: 13px; }
[data-app-scene="inbox"] .ib-more:hover { background: var(--showcase-panel-2); color: var(--showcase-text); }

[data-app-scene="inbox"] .ib-thread-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
}

/* Reveal slots: everything the loop inserts, reveals or removes (typing indicator,
   customer/AI bubbles, the approval strip, the next-step row) lives inside one of
   these instead of toggling `hidden`. Animating grid-template-rows from 0fr to 1fr
   grows or shrinks the row's own space smoothly, so nothing below it snaps into a
   new position in a single frame. `.ib-slot-inner` supplies the min-height:0 the
   trick needs on the child that actually clips. `ib-no-anim` disables the transition
   for one frame when a change happens off-screen (opacity 0) and should not itself
   be seen animating once the content fades back in.
   Spacing between messages is a spacer inside each slot's clipped inner (not a flex
   `gap` on the body) so a closed slot's 8-11px of surrounding space collapses to 0
   along with its height, the same way a `display:none` row would contribute nothing —
   a flex `gap` cannot conditionally skip a near-zero-height item, and did leave a
   small structural overflow in the thread pane on short phone hosts. */
[data-app-scene="inbox"] .ib-msg--ambient { margin-bottom: 11px; }
[data-app-scene="inbox"] .ib-slot {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms var(--ib-ease);
}
[data-app-scene="inbox"] .ib-slot.is-open { grid-template-rows: 1fr; }
[data-app-scene="inbox"] .ib-slot.ib-no-anim { transition: none; }
[data-app-scene="inbox"] .ib-slot-inner { min-height: 0; overflow: hidden; }
/* The slot's trailing space lives INSIDE the clipped inner as a spacer, so it folds
   with the row and only grid-template-rows ever animates (no margin transition). */
[data-app-scene="inbox"] .ib-slot-inner::after { content: ""; display: block; height: 11px; }
[data-app-scene="inbox"] .ib-slot--next { margin-top: auto; }
[data-app-scene="inbox"] .ib-slot--next .ib-slot-inner::after { display: none; }

[data-app-scene="inbox"] .ib-msg {
  max-width: 68%;
  padding: 8px 10px;
  border: 1px solid var(--showcase-line);
  border-radius: 9px;
  background: var(--showcase-panel);
}
[data-app-scene="inbox"] .ib-msg p { color: oklch(.85 .01 264); font-size: 10px; font-weight: 500; line-height: 1.5; }
[data-app-scene="inbox"] .ib-msg time { display: block; margin-top: 4px; color: var(--showcase-muted); font-size: 7px; font-variant-numeric: tabular-nums; text-align: end; }
[data-app-scene="inbox"] .ib-msg--ambient { align-self: flex-start; border-color: transparent; background: transparent; padding-block: 2px; opacity: .42; }
[data-app-scene="inbox"] .ib-msg--ambient p { font-size: 8px; }
[data-app-scene="inbox"] .ib-msg--customer { align-self: flex-start; border-start-start-radius: 3px; }
[data-app-scene="inbox"] .ib-msg--ai {
  align-self: flex-end;
  min-height: 50px; /* reserves the full text-line height so drafting dots <-> reply text never changes the bubble's box */
  border-color: oklch(.42 .09 263 / .6);
  background: oklch(.2 .04 264 / .7);
  border-start-end-radius: 3px;
}
[data-app-scene="inbox"] .ib-ai-label { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; color: oklch(.76 .12 263); font-size: 7px; font-weight: 700; }
[data-app-scene="inbox"] .ib-ai-label svg { width: 10px; height: 10px; }
[data-app-scene="inbox"] .ib-drafting-dots { display: none; gap: 3px; padding: 3px 0 1px; }
[data-app-scene="inbox"] .ib-msg--ai.is-drafting p { display: none; }
[data-app-scene="inbox"] .ib-msg--ai.is-drafting .ib-drafting-dots { display: flex; }
[data-app-scene="inbox"] .ib-drafting-dots i { width: 4px; height: 4px; border-radius: 50%; background: oklch(.7 .1 263); }

[data-app-scene="inbox"] .ib-msg--typing { display: flex; align-self: flex-start; gap: 3px; padding: 9px 11px; }
[data-app-scene="inbox"] .ib-msg--typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--showcase-muted); }

[data-app-scene="inbox"] .ib-approval {
  position: relative;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  align-self: flex-end;
  width: fit-content;
  min-width: 280px;
  max-width: 78%;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid oklch(.55 .12 80 / .4);
  border-radius: 9px;
  background: var(--ib-amber-tint);
  transition: border-color 220ms, background 220ms;
}
[data-app-scene="inbox"] .ib-approval-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ib-amber); }
[data-app-scene="inbox"] .ib-approval-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  transition: opacity 220ms var(--ib-ease), filter 220ms var(--ib-ease), transform 220ms var(--ib-ease);
}
[data-app-scene="inbox"] .ib-approval-copy strong { color: var(--showcase-text); font-size: 9px; font-weight: 600; }
[data-app-scene="inbox"] .ib-approval-copy small { color: var(--showcase-muted); font-size: 8px; }
[data-app-scene="inbox"] .ib-approval-copy small b { color: var(--showcase-text); font-weight: 700; font-variant-numeric: tabular-nums; }
[data-app-scene="inbox"] .ib-approval-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 220ms var(--ib-ease), filter 220ms var(--ib-ease), transform 220ms var(--ib-ease);
}
[data-app-scene="inbox"] .ib-btn-ghost,
[data-app-scene="inbox"] .ib-btn-solid {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 600;
  transition: transform 120ms, box-shadow 160ms, background 160ms;
}
[data-app-scene="inbox"] .ib-btn-ghost { border: 1px solid var(--showcase-line); background: transparent; color: var(--showcase-muted); }
[data-app-scene="inbox"] .ib-btn-ghost:hover { background: var(--showcase-panel-2); color: var(--showcase-text); }
[data-app-scene="inbox"] .ib-btn-solid { border: 1px solid transparent; background: var(--showcase-blue); color: #fff; }
[data-app-scene="inbox"] .ib-btn-solid:hover { transform: translateY(-1px); box-shadow: 0 4px 12px oklch(.66 .18 263 / .35); }
[data-app-scene="inbox"] .ib-btn-solid:active,
[data-app-scene="inbox"] .ib-btn-ghost:active { transform: scale(.96); }
[data-app-scene="inbox"] .ib-btn-ghost kbd,
[data-app-scene="inbox"] .ib-btn-solid kbd {
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 7px;
  font-weight: 600;
}
[data-app-scene="inbox"] .ib-btn-ghost kbd { background: oklch(1 0 0 / .06); color: var(--showcase-muted); }
[data-app-scene="inbox"] .ib-btn-solid kbd { background: oklch(1 0 0 / .16); color: #fff; }

[data-app-scene="inbox"] .ib-approved {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  background: inherit;
  transition: opacity 220ms var(--ib-ease), transform 220ms var(--ib-ease);
}
[data-app-scene="inbox"] .ib-approved svg { flex: none; width: 14px; height: 14px; color: var(--ib-green); }
[data-app-scene="inbox"] .ib-approved strong { display: block; color: var(--showcase-text); font-size: 9px; font-weight: 600; }
[data-app-scene="inbox"] .ib-approved small {
  display: block;
  overflow: hidden;
  color: var(--showcase-muted);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-app-scene="inbox"] .ib-approval.is-approved { border-color: oklch(.6 .14 150 / .45); background: var(--ib-green-tint); }
[data-app-scene="inbox"] .ib-approval.is-approved .ib-approval-dot { background: var(--ib-green); }
[data-app-scene="inbox"] .ib-approval.is-approved .ib-approval-copy,
[data-app-scene="inbox"] .ib-approval.is-approved .ib-approval-actions { opacity: 0; filter: blur(3px); transform: translateY(-5px); pointer-events: none; }
[data-app-scene="inbox"] .ib-approval.is-approved .ib-approved { opacity: 1; transform: none; pointer-events: auto; }

[data-app-scene="inbox"] .ib-next {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--showcase-line);
  color: var(--showcase-muted);
  font-size: 8px;
}
[data-app-scene="inbox"] .ib-next svg { width: 12px; height: 12px; flex: none; color: oklch(.72 .1 263); }
[data-app-scene="inbox"] .ib-next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[data-app-scene="inbox"] .ib-composer {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 12px 12px;
  padding: 0 9px;
  border: 1px solid var(--showcase-line);
  border-radius: 8px;
  background: var(--showcase-panel);
  color: var(--showcase-muted);
  transition: border-color 160ms;
}
[data-app-scene="inbox"] .ib-composer:hover,
[data-app-scene="inbox"] .ib-composer:focus-within { border-color: oklch(.66 .18 263 / .4); }
[data-app-scene="inbox"] .ib-composer span { flex: 1; font-size: 8px; }
[data-app-scene="inbox"] .ib-composer button {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--showcase-blue);
  color: #fff;
  transition: transform 120ms, box-shadow 160ms;
}
[data-app-scene="inbox"] .ib-composer button svg { width: 11px; height: 11px; }
[data-app-scene="inbox"] .ib-composer button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px oklch(.66 .18 263 / .35); }

/* Pulse, pop and flash: JS-triggered, already gated on h.motion before they can run */
[data-app-scene="inbox"] .ib-btn-solid.is-pulsing { animation: ib-pulse 1s ease-out infinite; }
@keyframes ib-pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(.66 .18 263 / .38); }
  50% { box-shadow: 0 0 0 5px oklch(.66 .18 263 / 0); }
}
[data-app-scene="inbox"] .ib-pop { animation: ib-pop 340ms var(--ib-ease) both; }
@keyframes ib-pop {
  from { opacity: .3; filter: blur(2px); transform: translateY(8px) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
[data-app-scene="inbox"] .ib-flash { animation: ib-flash 380ms var(--ib-ease); }
@keyframes ib-flash {
  from { opacity: .5; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Entrance (keyed on .is-scene-active, which is added even under reduced motion,
   so the stagger itself is gated behind the no-preference query) and idle life. */
@media (prefers-reduced-motion: no-preference) {
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-rail button { animation: ib-rail-in 320ms var(--ib-ease) both; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-rail button:nth-child(1) { animation-delay: 0ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-rail button:nth-child(2) { animation-delay: 25ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-rail button:nth-child(3) { animation-delay: 50ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-rail button:nth-child(4) { animation-delay: 75ms; }

  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row { animation: ib-row-in 340ms var(--ib-ease) both; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(1) { animation-delay: 0ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(2) { animation-delay: 20ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(3) { animation-delay: 40ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(4) { animation-delay: 60ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(5) { animation-delay: 80ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(6) { animation-delay: 100ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(7) { animation-delay: 120ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(8) { animation-delay: 140ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-row:nth-child(9) { animation-delay: 160ms; }

  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-msg,
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-approval,
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-next { animation: ib-row-in 340ms var(--ib-ease) both; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-msg--ambient { animation-delay: 30ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-msg--customer { animation-delay: 90ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-msg--ai { animation-delay: 150ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-approval { animation-delay: 210ms; }
  [data-app-scene="inbox"] .app-preview.is-scene-active .ib-next { animation-delay: 260ms; }

  @keyframes ib-rail-in { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes ib-row-in { from { opacity: .4; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  /* Idle life: a breathing unread dot, a pulsing review ring, bouncing typing/drafting dots */
  [data-app-scene="inbox"] .ib-unread { animation: ib-breathe 2.2s ease-in-out infinite; }
  [data-app-scene="inbox"] .ib-approval:not(.is-approved) .ib-approval-dot { animation: ib-ring 1.8s ease-out infinite; }
  [data-app-scene="inbox"] .ib-msg--typing i,
  [data-app-scene="inbox"] .ib-drafting-dots i { animation: ib-bounce 1s ease-in-out infinite; }
  [data-app-scene="inbox"] .ib-msg--typing i:nth-child(2),
  [data-app-scene="inbox"] .ib-drafting-dots i:nth-child(2) { animation-delay: .15s; }
  [data-app-scene="inbox"] .ib-msg--typing i:nth-child(3),
  [data-app-scene="inbox"] .ib-drafting-dots i:nth-child(3) { animation-delay: .3s; }

  @keyframes ib-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(1.2); }
  }
  @keyframes ib-ring {
    0% { box-shadow: 0 0 0 0 oklch(.8 .15 80 / .45); }
    100% { box-shadow: 0 0 0 5px oklch(.8 .15 80 / 0); }
  }
  @keyframes ib-bounce {
    0%, 60%, 100% { opacity: .4; transform: translateY(0) scale(.85); }
    30% { opacity: 1; transform: translateY(-2px) scale(1); }
  }
}

/* 907 x 545 host (1024 px page): narrower list, thread absorbs the rest */
@container app-scene (max-width: 960px) {
  [data-app-scene="inbox"] .ib-shell { grid-template-columns: 36px 204px minmax(0, 1fr); }
}

/* 333 x 363 host (phone): one focused thread panel, type stepped up a notch */
@container app-scene (max-width: 640px) {
  [data-app-scene="inbox"] .ib-shell { display: block; }
  [data-app-scene="inbox"] .ib-rail,
  [data-app-scene="inbox"] .ib-list { display: none; }
  [data-app-scene="inbox"] .ib-thread { height: 100%; }
  [data-app-scene="inbox"] .ib-msg--ambient { display: none; }
  [data-app-scene="inbox"] .ib-thread-body { padding: 10px 12px; }
  [data-app-scene="inbox"] .ib-slot-inner::after { height: 8px; }
  [data-app-scene="inbox"] .ib-msg--ai { min-height: 44px; }
  [data-app-scene="inbox"] .ib-msg { max-width: 84%; }
  [data-app-scene="inbox"] .ib-msg p { font-size: 11px; }
  [data-app-scene="inbox"] .ib-msg--ai { min-height: 44px; } /* still covers 2 lines at this font, tighter than desktop so the reveal narrative fits the shorter mobile host */
  [data-app-scene="inbox"] .ib-thread-id strong { font-size: 11px; }
  [data-app-scene="inbox"] .ib-thread-id small { font-size: 8px; }
  [data-app-scene="inbox"] .ib-ai-label { font-size: 8px; }
  [data-app-scene="inbox"] .ib-approval { align-self: stretch; width: auto; min-width: 0; max-width: none; padding: 7px 9px; }
  [data-app-scene="inbox"] .ib-approval-copy strong { font-size: 10px; }
  [data-app-scene="inbox"] .ib-approval-copy small { font-size: 9px; }
  [data-app-scene="inbox"] .ib-btn-ghost,
  [data-app-scene="inbox"] .ib-btn-solid { padding: 6px 9px; font-size: 9px; }
  [data-app-scene="inbox"] .ib-next { font-size: 9px; padding-top: 7px; }
  [data-app-scene="inbox"] .ib-composer span { font-size: 9px; }
}