/* Convert scene: the decision moment. An AI draft measured against the confidence threshold,
   four ways for a person to act on it, and the deal it is attached to moving stage.
   Every selector below is scoped under [data-app-scene="convert"]. */

[data-app-scene="convert"] {
  --convert-green: oklch(.72 .16 150);
  --convert-green-line: oklch(.72 .16 150 / .45);
  --convert-green-tint: oklch(.72 .16 150 / .14);
  --convert-green-surface: oklch(.2 .045 152);
  --convert-green-text: oklch(.9 .07 152);
  --convert-amber: oklch(.8 .15 80);
  --convert-amber-line: oklch(.8 .15 80 / .5);
  --convert-amber-tint: oklch(.8 .15 80 / .14);
}

/* Layout: thread + decision on the left, the deal on the right */
[data-app-scene="convert"] .convert-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  height: calc(100% - 46px);
  min-height: 0;
}
[data-app-scene="convert"] .convert-thread {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-inline-end: 1px solid var(--showcase-line);
}
[data-app-scene="convert"] .convert-deal {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 11px 12px 12px;
  background: oklch(.13 .012 264 / .78);
}

/* Thread header */
[data-app-scene="convert"] .convert-thread-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border-bottom: 1px solid var(--showcase-line);
}
[data-app-scene="convert"] .convert-avatar {
  display: grid;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  background: oklch(.34 .02 264);
  color: oklch(.93 .01 264);
  font-size: 8px;
  font-weight: 800;
}
[data-app-scene="convert"] .convert-avatar-sm { width: 15px; height: 15px; font-size: 6px; }
/* Profile pictures: same box as the initials badge, cropped to a circle, a 1 px hairline. */
[data-app-scene="convert"] img.convert-avatar,
[data-app-scene="convert"] img.convert-avatar-sm,
[data-app-scene="convert"] img.app-user { box-sizing: border-box; border: 1px solid var(--showcase-line); object-fit: cover; }
[data-app-scene="convert"] .convert-thread-who { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
[data-app-scene="convert"] .convert-thread-who strong { overflow: hidden; color: var(--showcase-text); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-thread-who small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--showcase-muted); font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-channel-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: oklch(.62 .17 150); }

/* Thread body: one customer line and one AI reply. The second exchange never inserts new
   elements — it crossfades the SAME bubbles to their second-exchange copy (see the message
   swap block below), so nothing here is ever added, removed or resized during the loop. */
[data-app-scene="convert"] .convert-thread-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  overflow: hidden;
  padding: 10px 11px;
}
[data-app-scene="convert"] .convert-msg { max-width: 88%; min-width: 0; padding: 7px 9px; border: 1px solid var(--showcase-line); border-radius: 8px; background: var(--showcase-panel); }
[data-app-scene="convert"] .convert-msg-text { color: oklch(.85 .01 264); font-size: 8px; line-height: 1.5; }
[data-app-scene="convert"] .convert-msg small { display: block; margin-top: 4px; color: var(--showcase-muted); font-size: 6px; font-variant-numeric: tabular-nums; text-align: end; }
[data-app-scene="convert"] .convert-msg.is-customer { align-self: flex-start; border-start-start-radius: 3px; }
[data-app-scene="convert"] .convert-msg.is-ai { align-self: flex-end; border-color: oklch(.42 .09 263 / .7); background: oklch(.2 .04 264 / .85); border-end-end-radius: 3px; }
[data-app-scene="convert"] .convert-msg-tag { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; color: oklch(.74 .12 263); font-size: 7px; font-weight: 700; letter-spacing: .03em; }
[data-app-scene="convert"] .convert-msg-tag svg { width: 9px; height: 9px; }

/* Message swap (customer line and its timestamp): both exchanges' copy are always laid out,
   stacked in the same grid cell (the bubble's box therefore sizes to the taller of the two,
   from the very first paint) and only one is opaque at a time. Swapping the second question in
   for the loop's second half only crossfades opacity + a small transform, so the bubble never
   resizes or moves and the messages after it never reflow. */
[data-app-scene="convert"] .convert-msg-swap { display: grid; min-width: 0; }
[data-app-scene="convert"] .convert-msg-swap > * { grid-area: 1 / 1; min-width: 0; margin: 0; opacity: 0; transform: translateY(3px); transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
[data-app-scene="convert"] .convert-msg-swap > .is-active { opacity: 1; transform: none; }
[data-app-scene="convert"] .convert-msg-swap-time { margin-top: 4px; justify-items: end; }
[data-app-scene="convert"] .convert-msg-swap-time small { margin-top: 0; }

/* AI draft: the two candidate replies and the shimmer placeholder all share one grid cell too
   (same reasoning), so drafting-in and the mid-loop redraft never change the bubble's box —
   only opacity crossfades, ever. */
[data-app-scene="convert"] .convert-msg-content { display: grid; }
[data-app-scene="convert"] .convert-msg-content > * { grid-area: 1 / 1; min-width: 0; }
[data-app-scene="convert"] .convert-msg-content .convert-msg-text { margin: 0; opacity: 0; transition: opacity .18s ease; }
[data-app-scene="convert"] .convert-msg-content .convert-msg-text.is-active { opacity: 1; }
[data-app-scene="convert"] .convert-msg.is-drafting .convert-msg-content .convert-msg-text.is-active { opacity: 0; }
[data-app-scene="convert"] .convert-shimmer { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 120px; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
[data-app-scene="convert"] .convert-msg.is-drafting .convert-shimmer { opacity: 1; }
[data-app-scene="convert"] .convert-shimmer i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--showcase-panel-2) 0%, oklch(.44 .06 264 / .95) 45%, var(--showcase-panel-2) 90%); background-size: 220% 100%; animation: convert-shimmer-sweep 1.15s linear infinite; }
[data-app-scene="convert"] .convert-shimmer i:first-child { width: 100%; }
[data-app-scene="convert"] .convert-shimmer i:last-child { width: 60%; animation-delay: .12s; }
@keyframes convert-shimmer-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Decision strip: its box is reserved at full size from the very first paint (margin included)
   and never changes size or position again for the rest of the loop. Appearing and disappearing
   twice per loop is done purely with opacity + a small transform (both compositor-only), so the
   composer below it never gets pushed down and never snaps back up. */
[data-app-scene="convert"] .convert-decision-slot {
  flex-shrink: 0;
  margin: 0 11px 9px;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .34s cubic-bezier(.22, 1, .36, 1), transform .34s cubic-bezier(.22, 1, .36, 1);
}
[data-app-scene="convert"] .convert-decision-slot.is-open { opacity: 1; transform: none; pointer-events: auto; }

[data-app-scene="convert"] .convert-decision {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--showcase-line);
  border-radius: 9px;
  background: var(--showcase-panel);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
}
[data-app-scene="convert"] .convert-decision-live { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 10px; transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
[data-app-scene="convert"] .convert-decision.is-resolved .convert-decision-live { opacity: 0; filter: blur(4px); transform: translateY(-6px); pointer-events: none; }

[data-app-scene="convert"] .convert-decision-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-app-scene="convert"] .convert-status { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--showcase-text); font-size: 8px; font-weight: 700; }
[data-app-scene="convert"] .convert-status-dot { position: relative; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--showcase-blue); transition: background-color .25s ease; }
[data-app-scene="convert"] .convert-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-confidence { display: flex; flex-shrink: 0; align-items: baseline; gap: 1px; color: var(--showcase-text); }
[data-app-scene="convert"] .convert-confidence b { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; }
[data-app-scene="convert"] .convert-confidence small { color: var(--showcase-muted); font-size: 7px; font-weight: 500; }
[data-app-scene="convert"] [data-status="pending"] .convert-status-dot { background: var(--convert-amber); }
[data-app-scene="convert"] [data-status="pending"] .convert-status span { color: var(--convert-amber); }

[data-app-scene="convert"] .convert-meter-track { position: relative; height: 4px; margin-top: 1px; overflow: visible; border-radius: 999px; background: var(--showcase-panel-2); }
[data-app-scene="convert"] .convert-meter-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; border-radius: inherit; background: var(--showcase-blue); transition: transform .8s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
[data-app-scene="convert"] [data-status="pending"] .convert-meter-fill { background: var(--convert-amber); }
[data-app-scene="convert"] .convert-meter-threshold { position: absolute; inset-block: -3px; inset-inline-start: 85%; width: 2px; border-radius: 1px; background: var(--showcase-text); opacity: .6; }
[data-app-scene="convert"] .convert-meter-scale { position: relative; display: flex; justify-content: space-between; margin-top: 5px; color: var(--showcase-muted); font-size: 7px; font-weight: 500; font-variant-numeric: tabular-nums; }
[data-app-scene="convert"] .convert-meter-threshold-label { position: absolute; inset-inline-start: 85%; transform: translateX(-50%); color: var(--showcase-muted); white-space: nowrap; }

/* Height reserved up front (line-height, not `:empty { display: none }`) so the reason
   fading in at the "waits for a person" moment only crossfades and never pushes the actions
   below it down. */
[data-app-scene="convert"] .convert-reason { min-height: 10px; margin: 0; overflow: hidden; color: var(--convert-amber); font-size: 7px; font-weight: 500; line-height: 10px; text-overflow: ellipsis; white-space: nowrap; }

[data-app-scene="convert"] .convert-actions { display: flex; flex-direction: column; gap: 5px; }
[data-app-scene="convert"] .convert-action-primary { display: flex; height: 26px; width: 100%; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; background: var(--showcase-blue); color: #fff; font-size: 8px; font-weight: 700; transition: transform .1s ease, box-shadow .25s ease; }
[data-app-scene="convert"] .convert-action-primary:hover { box-shadow: 0 0 0 1px oklch(.66 .18 263 / .5); }
[data-app-scene="convert"] .convert-action-primary:active { transform: scale(.97); }
[data-app-scene="convert"] .convert-action-primary kbd { background: rgba(255, 255, 255, .18); color: #fff; }
[data-app-scene="convert"] .convert-actions-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
[data-app-scene="convert"] .convert-action { display: flex; height: 24px; min-width: 0; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--showcase-line); border-radius: 7px; background: var(--showcase-panel-2); color: var(--showcase-muted); font-size: 8px; font-weight: 600; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
[data-app-scene="convert"] .convert-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-action:hover { border-color: var(--showcase-blue); color: var(--showcase-text); }
[data-app-scene="convert"] .convert-action:active { transform: scale(.96); }
[data-app-scene="convert"] .convert-decision kbd { display: inline-flex; height: 12px; min-width: 12px; align-items: center; justify-content: center; padding: 0 3px; border-radius: 4px; background: var(--showcase-panel-2); color: var(--showcase-muted); font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace; font-size: 7px; font-weight: 700; }

[data-app-scene="convert"] .convert-action-primary.is-pulsing { animation: convert-approve-pulse 1.1s ease-in-out 2; }
@keyframes convert-approve-pulse { 0%, 100% { box-shadow: 0 0 0 0 oklch(.66 .18 263 / .55); } 50% { box-shadow: 0 0 0 6px oklch(.66 .18 263 / 0); } }

/* Scale rather than translate for the resting offset: a translateY here would push the
   element's box past the strip's own bottom edge and register as scrollable overflow on
   `.convert-decision` (which clips it) even while the strip is fully open and idle. */
[data-app-scene="convert"] .convert-resolved { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px; background: var(--convert-green-surface); opacity: 0; pointer-events: none; transform: scale(.97); transition: opacity .26s cubic-bezier(.22, 1, .36, 1), transform .26s cubic-bezier(.22, 1, .36, 1); }
[data-app-scene="convert"] .convert-decision.is-resolved .convert-resolved { opacity: 1; pointer-events: auto; transform: none; }
[data-app-scene="convert"] .convert-resolved svg { width: 24px; height: 24px; flex-shrink: 0; padding: 5px; border-radius: 50%; background: var(--convert-green-tint); color: var(--convert-green); }
[data-app-scene="convert"] .convert-resolved strong { display: block; color: var(--convert-green-text); font-size: 8px; font-weight: 700; }
[data-app-scene="convert"] .convert-resolved small { display: block; margin-top: 2px; color: oklch(.7 .04 152); font-size: 7px; font-weight: 500; }

/* Composer */
[data-app-scene="convert"] .convert-composer { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin: 0 11px 11px; padding: 0 8px; border: 1px solid var(--showcase-line); border-radius: 8px; background: var(--showcase-panel); color: var(--showcase-muted); min-height: 30px; }
[data-app-scene="convert"] .convert-composer-text { flex: 1; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-composer button { display: grid; width: 22px; height: 22px; flex-shrink: 0; place-items: center; border-radius: 6px; background: var(--showcase-blue); color: #fff; }
[data-app-scene="convert"] .convert-composer svg { width: 11px; height: 11px; }

/* Deal card */
[data-app-scene="convert"] .convert-deal-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; min-height: 20px; }
[data-app-scene="convert"] .convert-deal-head span { color: var(--showcase-muted); font-size: 7px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
[data-app-scene="convert"] .convert-deal-head button { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: transparent; color: var(--showcase-muted); }
[data-app-scene="convert"] .convert-deal-head button:hover { background: var(--showcase-panel-2); color: var(--showcase-text); }
[data-app-scene="convert"] .convert-deal-head svg { width: 12px; height: 12px; }
[data-app-scene="convert"] .convert-deal-card { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--showcase-line); }
[data-app-scene="convert"] .convert-deal-name { overflow: hidden; color: var(--showcase-text); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-deal-sub { overflow: hidden; color: var(--showcase-muted); font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
[data-app-scene="convert"] .convert-deal-value { margin-top: 2px; color: var(--showcase-text); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-app-scene="convert"] .convert-deal-owner { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
[data-app-scene="convert"] .convert-deal-owner span:last-child { overflow: hidden; color: var(--showcase-muted); font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* Stage rail: vertical stepper (aside, wide containers) */
[data-app-scene="convert"] .convert-rail { display: flex; flex-direction: column; margin-top: 11px; }
[data-app-scene="convert"] .convert-rail-step { position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; }
[data-app-scene="convert"] .convert-rail-edge { position: absolute; inset-inline-start: 5px; top: -15px; width: 1px; height: 15px; overflow: hidden; background: var(--showcase-line); }
[data-app-scene="convert"] .convert-rail-edge-fill { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--showcase-blue); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
[data-app-scene="convert"] .convert-rail-step.is-past .convert-rail-edge-fill, [data-app-scene="convert"] .convert-rail-step.is-current .convert-rail-edge-fill { transform: scaleY(1); }
[data-app-scene="convert"] .convert-rail-dot { position: relative; z-index: 1; width: 11px; height: 11px; flex-shrink: 0; border: 2px solid var(--showcase-line); border-radius: 50%; background: var(--showcase-panel); transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
[data-app-scene="convert"] .convert-rail-step.is-past .convert-rail-dot { border-color: var(--showcase-blue); background: var(--showcase-blue); }
[data-app-scene="convert"] .convert-rail-step.is-current .convert-rail-dot { border-color: var(--showcase-blue); box-shadow: 0 0 0 3px oklch(.66 .18 263 / .18); transform: scale(1.2); }
[data-app-scene="convert"] .convert-rail-label { overflow: hidden; color: var(--showcase-muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; transition: color .25s ease, font-weight 0s; }
[data-app-scene="convert"] .convert-rail-step.is-current .convert-rail-label { color: var(--showcase-text); font-weight: 700; }
[data-app-scene="convert"] .convert-rail-step.is-past .convert-rail-label { color: var(--showcase-muted); font-weight: 500; }

/* Stage rail: compact horizontal dots (phone) */
[data-app-scene="convert"] .convert-rail-mini-wrap { display: none; margin-top: 10px; }
[data-app-scene="convert"] .convert-rail-mini { display: flex; align-items: center; gap: 0; }
[data-app-scene="convert"] .convert-rail-mini i { position: relative; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--showcase-line); }
[data-app-scene="convert"] .convert-rail-mini i:not(:last-child) { margin-inline-end: 9px; }
[data-app-scene="convert"] .convert-rail-mini i:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 100%; top: 50%; width: 9px; height: 1px; background: var(--showcase-line); transform: translateY(-50%); }
[data-app-scene="convert"] .convert-rail-mini i.is-past { background: var(--showcase-blue); }
[data-app-scene="convert"] .convert-rail-mini i.is-past:not(:last-child)::after { background: var(--showcase-blue); }
[data-app-scene="convert"] .convert-rail-mini i.is-current { background: var(--showcase-blue); box-shadow: 0 0 0 2px oklch(.66 .18 263 / .25); transform: scale(1.3); }
[data-app-scene="convert"] .convert-rail-mini-label { display: block; margin-top: 6px; color: var(--showcase-text); font-size: 8px; font-weight: 700; }

@keyframes convert-pop { 0% { opacity: .5; transform: translateY(4px) scale(.97); } 60% { opacity: 1; transform: translateY(0) scale(1.02); } 100% { transform: none; } }
[data-app-scene="convert"] .convert-pop { animation: convert-pop .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes convert-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
[data-app-scene="convert"] .convert-fade-in { animation: convert-fade-in .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes convert-strip-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
[data-app-scene="convert"] .convert-strip-in { animation: convert-strip-in .42s cubic-bezier(.22, 1, .36, 1) both; }

/* Entrance: settles in a short stagger when the scene scrolls into view */
[data-app-scene="convert"] .app-preview.is-scene-active .convert-thread-head { animation: convert-rise .48s .04s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active [data-msg] { animation: convert-rise .48s .12s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active [data-agent-message] { animation: convert-rise .48s .2s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-composer { animation: convert-rise .48s .32s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-deal-head { animation: convert-rise .48s .1s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-deal-card { animation: convert-rise .48s .18s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-step:nth-child(1) { animation: convert-rise .44s .26s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-step:nth-child(2) { animation: convert-rise .44s .3s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-step:nth-child(3) { animation: convert-rise .44s .34s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-step:nth-child(4) { animation: convert-rise .44s .38s cubic-bezier(.22, 1, .36, 1) both; }
[data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-mini-wrap { animation: convert-rise .44s .26s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes convert-rise { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Idle life: a blinking caret and a breathing dot on the row waiting for a person */
@media (prefers-reduced-motion: no-preference) {
  [data-app-scene="convert"] .convert-composer-text::after { content: ""; display: inline-block; width: 1px; height: 8px; margin-inline-start: 2px; vertical-align: -1px; background: currentColor; animation: convert-caret-blink 1.1s steps(2, start) infinite; }
  [data-app-scene="convert"] [data-status="pending"] .convert-status-dot::after { content: ""; position: absolute; inset: -3px; border: 1px solid var(--convert-amber); border-radius: 50%; opacity: 0; animation: convert-ping 2.1s ease-out .4s infinite; }
  [data-app-scene="convert"] .convert-rail-step.is-current .convert-rail-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 0 oklch(.66 .18 263 / .45); animation: convert-rail-breathe 2.6s ease-in-out .9s infinite; }
}
@keyframes convert-caret-blink { to { visibility: hidden; } }
@keyframes convert-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes convert-rail-breathe { 0%, 100% { box-shadow: 0 0 0 0 oklch(.66 .18 263 / .45); } 50% { box-shadow: 0 0 0 4px oklch(.66 .18 263 / 0); } }

/* Phone: one focused panel, deal card compact below */
@container app-scene (max-width: 480px) {
  [data-app-scene="convert"] .convert-body { display: flex; flex-direction: column; height: calc(100% - 46px); }
  [data-app-scene="convert"] .convert-thread { flex: 1; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--showcase-line); }
  [data-app-scene="convert"] .convert-deal { flex-shrink: 0; padding: 9px 11px 10px; background: oklch(.13 .012 264 / .6); }
  [data-app-scene="convert"] .convert-deal-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; padding-bottom: 0; border-bottom: 0; }
  [data-app-scene="convert"] .convert-deal-name,
  [data-app-scene="convert"] .convert-deal-sub,
  [data-app-scene="convert"] .convert-deal-owner { display: none; }
  [data-app-scene="convert"] .convert-deal-value { margin-top: 0; font-size: 11px; }
  [data-app-scene="convert"] .convert-rail { display: none; }
  [data-app-scene="convert"] .convert-rail-mini-wrap { display: block; margin-top: 0; }

  /* type steps up one notch */
  [data-app-scene="convert"] .convert-thread-who strong { font-size: 9px; }
  [data-app-scene="convert"] .convert-thread-who small { font-size: 8px; }
  [data-app-scene="convert"] .convert-msg-text { font-size: 9px; }
  [data-app-scene="convert"] .convert-msg small { font-size: 7px; }
  [data-app-scene="convert"] .convert-msg-tag { font-size: 8px; }
  [data-app-scene="convert"] .convert-status { font-size: 9px; }
  [data-app-scene="convert"] .convert-confidence b { font-size: 12px; }
  [data-app-scene="convert"] .convert-confidence small { font-size: 8px; }
  [data-app-scene="convert"] .convert-reason { font-size: 8px; }
  [data-app-scene="convert"] .convert-meter-scale { font-size: 8px; }
  [data-app-scene="convert"] .convert-action-primary { font-size: 9px; }
  [data-app-scene="convert"] .convert-action { font-size: 9px; }
  [data-app-scene="convert"] .convert-deal-head span { font-size: 8px; }
  [data-app-scene="convert"] .convert-rail-mini-label { font-size: 9px; }
  [data-app-scene="convert"] .convert-composer-text { font-size: 8px; }

  /* One focused panel: the customer's line is a quoted reference, not a second full bubble,
     and the decision strip drops its numeric scale captions, so the draft and the four
     actions below it always have room to breathe within the fixed phone host. */
  [data-app-scene="convert"] .convert-thread-head { min-height: 32px; padding-block: 5px; }
  [data-app-scene="convert"] .convert-thread-body { padding: 6px 10px; gap: 3px; }
  [data-app-scene="convert"] .convert-msg.is-customer { max-width: 100%; padding: 0 2px; border: 0; background: transparent; }
  [data-app-scene="convert"] .convert-msg.is-customer .convert-msg-text { overflow: hidden; color: var(--showcase-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  [data-app-scene="convert"] .convert-msg.is-customer small,
  [data-app-scene="convert"] .convert-msg-swap-time { display: none; }
  [data-app-scene="convert"] .convert-msg.is-ai { padding: 5px 8px; }
  [data-app-scene="convert"] .convert-msg-tag { margin-bottom: 2px; }
  [data-app-scene="convert"] .convert-decision-slot { margin: 0 10px 6px; }
  [data-app-scene="convert"] .convert-decision-live { padding: 6px 8px 7px; gap: 4px; }
  [data-app-scene="convert"] .convert-meter-scale { display: none; }
  [data-app-scene="convert"] .convert-confidence b { font-size: 11px; }
  [data-app-scene="convert"] .convert-actions { gap: 4px; }
  [data-app-scene="convert"] .convert-action-primary { height: 22px; }
  [data-app-scene="convert"] .convert-action { height: 20px; }
  [data-app-scene="convert"] .convert-composer { margin: 0 10px 6px; min-height: 22px; }
  [data-app-scene="convert"] .convert-deal { padding: 7px 11px 8px; }
  [data-app-scene="convert"] .convert-deal-card { margin-top: 5px; }
  [data-app-scene="convert"] .convert-rail-mini-wrap { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-thread-head,
  [data-app-scene="convert"] .app-preview.is-scene-active [data-msg],
  [data-app-scene="convert"] .app-preview.is-scene-active [data-agent-message],
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-composer,
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-deal-head,
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-deal-card,
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-step,
  [data-app-scene="convert"] .app-preview.is-scene-active .convert-rail-mini-wrap,
  [data-app-scene="convert"] .convert-shimmer i,
  [data-app-scene="convert"] .convert-action-primary.is-pulsing,
  [data-app-scene="convert"] .convert-pop,
  [data-app-scene="convert"] .convert-fade-in,
  [data-app-scene="convert"] .convert-strip-in { animation: none; }
  [data-app-scene="convert"] .convert-decision-live,
  [data-app-scene="convert"] .convert-resolved,
  [data-app-scene="convert"] .convert-meter-fill,
  [data-app-scene="convert"] .convert-rail-edge-fill,
  [data-app-scene="convert"] .convert-rail-dot,
  [data-app-scene="convert"] .convert-rail-label { transition-duration: 1ms; }
}