.transcript {
  position: relative;
  width: min(calc(100% - 32px), var(--reading-width));
  min-height: 100%;
  margin: 0 auto;
  padding: 34px 0 72px;
}

/* Workspace owns the place, not the message grammar. This quiet marker and the
   canvas wash make that place persistent while bubbles, cards, and code keep
   their existing provider/state semantics. */
.transcript[data-workspace]::before {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 28px;
  overflow: hidden;
  padding: 3px 10px;
  border-right: 1px solid color-mix(in srgb, var(--row-accent, var(--purple)) 34%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--row-accent, var(--purple)) 34%, transparent);
  color: color-mix(in srgb, var(--row-accent, var(--text-muted)) 62%, var(--text-muted));
  content: attr(data-workspace) " workspace";
  font-size: 0.5625rem;
  font-weight: 750;
  letter-spacing: .075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.timeline {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 22px;
  opacity: 1;
  transition: opacity .11s ease-out;
}

/* Masks a chat switch's replaceChildren swap: the outgoing chat fades out,
   the incoming one is mounted and scrolled into place while invisible, then
   fades in already correct — so the reader never sees a frame of the new
   transcript sitting at the old chat's scroll offset. transform/opacity only. */
.timeline.is-switching { opacity: 0; }

.timeline-page-button {
  display: block;
  min-height: 34px;
  margin: 0 auto 24px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.6875rem;
}

.timeline-page-button:hover { border-color: var(--border-strong); color: var(--text); }

.timeline-empty {
  display: grid;
  min-height: 52vh;
  place-items: center;
  align-content: center;
  color: var(--text-muted);
  text-align: center;
}

.timeline-empty > span { color: var(--purple); font-size: 1.75rem; }
.timeline-empty h2 { margin: 14px 0 4px; color: var(--text); font-size: 1.5rem; letter-spacing: -.035em; }
.timeline-empty p { margin: 0; }

.timeline-row {
  position: relative;
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  contain: layout style;
}

.timeline-row.is-user { align-items: flex-end; }

.message-bubble {
  position: relative;
  max-width: min(78%, 700px);
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.is-user .message-bubble {
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--border));
  border-radius: 15px 15px 4px 15px;
  background: color-mix(in srgb, var(--purple-soft) 74%, var(--surface-1));
  color: var(--text);
  white-space: pre-wrap;
}

.message-stack {
  width: min(78%, 700px);
  max-width: 100%;
  overflow: hidden;
  border-radius: 15px 15px 4px 15px;
}
.message-stack .message-bubble { width: 100%; max-width: 100%; }
.message-stack:not(.has-portal-layer) { overflow: visible; }
.message-stack.has-portal-layer {
  border: 1px solid color-mix(in srgb, var(--purple) 34%, var(--border));
  background: color-mix(in srgb, var(--purple-soft) 58%, var(--surface-1));
}
.message-stack.has-portal-layer .message-bubble { border: 0; }
.message-prepend {
  width: 100%;
  max-width: none;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--purple) 22%, var(--border));
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--purple-soft));
  color: var(--text-muted);
}

.message-prepend summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}
.message-prepend summary::-webkit-details-marker { display: none; }
.message-layer-heading { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.message-layer-heading strong { color: var(--purple); font-size: .6875rem; letter-spacing: .01em; }
.message-layer-heading small { overflow: hidden; color: var(--text-muted); font-size: .5625rem; text-overflow: ellipsis; white-space: nowrap; }
.message-layer-state { flex: none; color: var(--text-muted); font-size: .5625rem; font-weight: 700; }
.message-prepend[open] .message-layer-state { font-size: 0; }
.message-prepend[open] .message-layer-state::after { content: "Hide"; font-size: .5625rem; }
.message-prepend-body {
  max-height: 280px;
  overflow: auto;
  padding: 9px 11px 10px;
  border-top: 1px solid color-mix(in srgb, var(--purple) 18%, var(--border));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.6875rem/1.5 var(--font-mono);
}

.message-prepend + .message-bubble {
  border-radius: 0 0 4px 15px;
}
.message-user-label { display: block; margin-bottom: 3px; color: color-mix(in srgb,var(--purple) 78%,var(--text)); font-size: .5625rem; font-weight: 750; letter-spacing: .025em; text-transform: uppercase; }

.is-assistant .message-bubble { width: 100%; max-width: 100%; }
.message-content > :first-child { margin-top: 0; }
.message-content > :last-child { margin-bottom: 0; }
.message-content p { margin: 0 0 13px; }
.message-content h1, .message-content h2, .message-content h3 { margin: 1.4em 0 .55em; color: var(--text); line-height: 1.2; letter-spacing: -.025em; }
.message-content h1 { font-size: 1.5em; }
.message-content h2 { font-size: 1.28em; }
.message-content h3 { font-size: 1.1em; }
.message-content ul, .message-content ol { margin: 10px 0; padding-left: 24px; }
.message-content li + li { margin-top: 5px; }
.message-content blockquote { margin: 14px 0; padding-left: 14px; border-left: 3px solid var(--border-strong); color: var(--text-muted); }
.message-content a { color: #aa96ff; text-underline-offset: 3px; }
.message-content code:not(pre code) { padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: #e7dcff; font-family: var(--font-mono); font-size: .9em; }

.code-block {
  position: relative;
  margin: 15px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #090a0e;
}

.code-block pre { margin: 0; padding: 38px 15px 15px; overflow: auto; }
.code-block code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.55; }
.code-language { position: absolute; top: 10px; left: 14px; color: var(--text-muted); font: 700 0.5625rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.code-copy { position: absolute; z-index: 1; top: 7px; right: 8px; padding: 4px 7px; border-radius: 5px; background: var(--surface-3); color: var(--text-muted); cursor: pointer; font-size: 0.625rem; }
.table-wrap { max-width: 100%; margin: 15px 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.table-wrap th, .table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.table-wrap th { background: var(--surface-2); color: var(--text); }

.message-time,
.message-delivery,
.message-retry,
.message-copy {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.625rem;
}

.message-time { opacity: .8; }
.is-user .message-time, .is-user .message-delivery, .is-user .message-retry { margin-right: 5px; }
.message-copy { padding: 2px 0; background: transparent; cursor: pointer; opacity: 0; }
.timeline-row:hover .message-copy, .message-copy:focus-visible { opacity: 1; }
.message-retry { padding: 3px 7px; border-radius: 5px; background: var(--surface-2); color: var(--danger); cursor: pointer; }
.timeline-row[data-delivery="sending"], .timeline-row[data-delivery="queued"] { opacity: .78; }

.is-streaming .message-content { white-space: pre-wrap; }
.is-streaming .message-content::after { display: inline-block; width: 6px; height: 1em; margin-left: 3px; border-radius: 1px; background: var(--claude); vertical-align: -.15em; content: ""; animation: stream-caret 1s steps(2) infinite; }
@keyframes stream-caret { 50% { opacity: .25; } }

/* height:auto so the width/height attributes only supply the aspect ratio — the
   reserved box then matches the clamped box exactly, and nothing shifts. */
.message-bubble.is-media img { display: block; width: auto; height: auto; max-width: min(100%, 620px); max-height: 520px; border: 1px solid var(--border); border-radius: var(--radius-md); object-fit: contain; }
.message-bubble.is-media video { display: block; width: 100%; max-width: min(100%, 620px); max-height: 520px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #000; }
.message-bubble.is-media audio { display: block; width: 100%; max-width: min(100%, 420px); }
.message-file { display: inline-flex; min-height: 42px; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-1); text-decoration: none; }

.timeline-row.is-system { align-items: center; }
.is-system p { margin: 0; padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 0.6875rem; }
.timeline-row.is-activity { width: 100%; }
.timeline-card { width: min(100%, 680px); min-height: 54px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-muted); }

/* A completed turn is a range in the real transcript, not a separate "your
   turn" object. The boundary and rail provide orientation during the brief
   arrival beat; the messages and cards remain their ordinary components. */
.arrival-boundary { display:flex;align-items:center;gap:11px;color:var(--text-muted);font-size:0.5625rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; }
.arrival-boundary::before,.arrival-boundary::after { height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--border));content:""; }
.arrival-boundary::after { background:linear-gradient(90deg,var(--border),transparent); }
.timeline-row.is-arrival-range::before { position:absolute;top:-14px;bottom:-14px;left:-13px;width:2px;border-radius:999px;background:color-mix(in srgb,var(--purple) 56%,var(--border));content:"";opacity:.72; }
.timeline-row.is-arrival-start::before { top:0; }
.timeline-row.is-arrival-end::before { bottom:0; }
.timeline-row.is-arrival-playing { z-index:1;animation:arrival-lift .9s ease both; }
.timeline-row.is-arrival-playing .agent-card-button.primary { animation:arrival-action .9s ease both; }
@keyframes arrival-lift { 0%{filter:brightness(1);transform:translateY(0)}38%{filter:brightness(1.16);transform:translateY(-2px)}100%{filter:brightness(1);transform:translateY(0)} }
@keyframes arrival-action { 0%,100%{box-shadow:none}45%{box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 20%,transparent),0 10px 28px rgb(0 0 0 / 24%)} }

.arrival-jump { position:sticky;z-index:5;bottom:10px;display:flex;width:min(100%,280px);min-height:48px;align-items:center;align-self:center;gap:10px;margin:14px auto 0;padding:7px 11px;border:1px solid color-mix(in srgb,var(--purple) 45%,var(--border));border-radius:12px;background:var(--surface-2);box-shadow:0 12px 30px rgb(0 0 0 / 28%);color:var(--text-soft);cursor:pointer;text-align:left; }
.arrival-jump-icon { display:grid;width:32px;height:32px;flex:none;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--purple-soft) 68%,var(--surface-3));color:var(--purple);font-weight:800; }
.arrival-jump strong { color:var(--text);font-size:0.75rem; }
.arrival-jump small { color:var(--text-muted);font-size:0.5625rem; }

/* The standing rail. Sticky like the arrival pill and at the same offset, but
   right-aligned and never shown at the same time as it, so the bottom of the
   transcript only ever carries one thing to tap. The needs pill borrows the
   attention colour the pending cards themselves use, so the control and the
   card it points at read as the same object; the bottom button stays neutral
   because "back to live" is navigation, not a demand. */
.chat-rail { position:sticky;z-index:5;bottom:10px;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;margin:14px 0 0;pointer-events:none; }
.chat-rail > * { pointer-events:auto; }
.chat-rail-needs { display:flex;min-height:48px;max-width:min(100%,300px);align-items:center;gap:10px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--state-attention) 52%,var(--border));border-radius:12px;background:var(--surface-2);box-shadow:0 12px 30px rgb(0 0 0 / 28%);color:var(--text-soft);cursor:pointer;text-align:left; }
.chat-rail-icon { display:grid;width:32px;height:32px;flex:none;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--state-attention) 22%,var(--surface-3));color:var(--state-attention);font-weight:800; }
.chat-rail-needs strong { color:var(--text);font-size:0.75rem; }
.chat-rail-needs small { color:var(--text-muted);font-size:0.5625rem; }
.chat-rail-bottom { display:grid;width:40px;height:40px;flex:none;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface-2);box-shadow:0 10px 24px rgb(0 0 0 / 26%);color:var(--text-soft);cursor:pointer;font-size:0.9375rem;font-weight:700; }
.chat-rail-bottom:hover { color:var(--text);border-color:color-mix(in srgb,var(--text-soft) 40%,var(--border)); }

.working-indicator{--working-accent:var(--claude);display:flex;width:min(100%,520px);min-height:64px;align-items:center;gap:13px;margin-top:24px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--working-accent) 44%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--surface-1) 92%,var(--working-accent));color:var(--text-soft)}
.working-indicator[data-provider=codex]{--working-accent:var(--codex);background:color-mix(in srgb,var(--surface-1) 94%,var(--working-accent))}
.working-copy{display:grid;min-width:0;flex:1;gap:2px}
.working-indicator strong{color:var(--text);font-size:0.8125rem}
.working-indicator small{color:var(--text-muted);font-size:0.625rem}
.working-actions{display:flex;gap:7px;margin-left:auto}
.working-stop{display:inline-flex;min-height:36px;align-items:center;justify-content:center;gap:7px;margin:0;padding:0 11px;border:1px solid var(--danger);border-radius:9px;font:750 0.6875rem/1 var(--font-ui)}
.working-stop::before{display:block;width:8px;height:8px;background:currentColor;content:""}
.working-orbit{position:relative;display:block;width:38px;height:38px;flex:none;overflow:hidden;border-radius:10px;background:color-mix(in srgb,var(--working-accent) 8%,var(--surface-2))}
.working-orbit::after{position:absolute;top:50%;right:7px;left:7px;height:1px;background:color-mix(in srgb,var(--working-accent) 30%,transparent);content:""}
.working-orbit i{position:absolute;z-index:1;top:50%;left:6px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:color-mix(in srgb,var(--working-accent) 82%,white);box-shadow:0 0 8px color-mix(in srgb,var(--working-accent) 76%,transparent);opacity:0;animation:working-packet-drive 1.35s linear infinite}
.working-orbit i:nth-child(2){width:5px;height:5px;margin-top:-2.5px;animation-delay:.11s;opacity:.76}.working-orbit i:nth-child(3){width:3px;height:3px;margin-top:-1.5px;animation-delay:.19s;opacity:.48}
.working-indicator[data-provider=codex] .working-orbit{border-radius:8px}
.working-indicator[data-provider=codex] .working-orbit i{border-radius:1px}
@keyframes working-packet-drive{0%{opacity:0;transform:translateX(-2px)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(25px)}}

#v2Connection[data-tone="ok"] { color: var(--state-working); }
#v2Connection[data-tone="error"] { color: var(--danger); }
.composer-stop { margin: 0 3px 0 7px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); cursor: pointer; font-size: inherit; }
.composer-stop:disabled { opacity: .6; }

@media (min-width: 960px) {
  .transcript { padding-top: 44px; }
  .timeline { gap: 27px; }
  .message-bubble { font-size: 1rem; line-height: 1.67; }

  /* Live work is a primary desktop state, not a phone-sized status chip left
     behind in a wide transcript. Provider colour stays static; the two motion
     layers only translate/fade so an hours-long turn remains compositor-safe. */
  .working-indicator {
    --working-accent: var(--claude);
    position: relative;
    isolation: isolate;
    width: min(100%, 960px);
    min-height: 88px;
    gap: 18px;
    margin-top: 32px;
    padding: 14px 18px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb,var(--working-accent) 54%,var(--border));
    border-left-width: 5px;
    background: linear-gradient(105deg,color-mix(in srgb,var(--working-accent) 12%,var(--surface-1)),var(--surface-1) 58%,color-mix(in srgb,var(--working-accent) 7%,var(--surface-1)));
    box-shadow: 0 18px 48px rgb(0 0 0 / 24%),inset 0 0 34px color-mix(in srgb,var(--working-accent) 7%,transparent);
  }
  .working-indicator[data-provider=codex] { --working-accent: var(--codex); }
  .working-indicator::before {
    position: absolute;
    z-index: 0;
    inset: 2px;
    border: 1px solid color-mix(in srgb,var(--working-accent) 50%,transparent);
    border-radius: 10px;
    content: "";
    opacity: .2;
    pointer-events: none;
    transform: scale(.994);
    animation: working-panel-breathe 2.8s ease-in-out infinite;
  }
  .working-indicator::after {
    position: absolute;
    z-index: 0;
    top: -45%;
    bottom: -45%;
    left: -28%;
    width: 22%;
    background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--working-accent) 15%,transparent),color-mix(in srgb,var(--working-accent) 36%,transparent),transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) skewX(-16deg);
    animation: working-panel-scan 2.8s ease-in-out infinite;
  }
  .working-indicator > * { position: relative; z-index: 1; }
  .working-indicator strong { font-size: 1.0625rem; letter-spacing: -.01em; }
  .working-indicator small { color: color-mix(in srgb,var(--working-accent) 46%,var(--text-muted)); font-size: .6875rem; }
  .working-orbit {
    position: relative;
    width: 52px;
    height: 52px;
    flex: none;
    border: 1px solid color-mix(in srgb,var(--working-accent) 34%,var(--border));
    border-radius: 14px;
    background: color-mix(in srgb,var(--working-accent) 9%,var(--surface-2));
  }
  .working-orbit::before {
    position: absolute;
    inset: 7px;
    border: 1px dashed color-mix(in srgb,var(--working-accent) 58%,transparent);
    border-radius: 50%;
    content: "";
    opacity: .7;
    animation: working-orbit-ring 2.4s cubic-bezier(.45,.05,.24,1) infinite;
  }
  .working-orbit i { left: 9px; }
  .working-actions { gap: 9px; }
  .working-indicator .composer-stop { min-height: 42px; padding-inline: 14px; font-size: .75rem; }
  .working-stop { min-height: 46px; padding-inline: 16px; font-size: .8125rem; }

  /* The return-to-live control is the second primary desktop state. Give it
     enough mass to interrupt a long transcript and an unmistakable direction,
     while leaving its compact phone treatment below untouched. */
  .arrival-jump {
    position: sticky;
    isolation: isolate;
    width: min(100%, 600px);
    min-height: 76px;
    bottom: 18px;
    gap: 15px;
    margin-top: 22px;
    padding: 11px 16px;
    overflow: hidden;
    border: 2px solid color-mix(in srgb,var(--purple) 58%,var(--border));
    border-left-width: 5px;
    border-radius: 16px;
    background: linear-gradient(105deg,color-mix(in srgb,var(--purple) 13%,var(--surface-2)),var(--surface-2) 62%,color-mix(in srgb,var(--purple) 7%,var(--surface-2)));
    box-shadow: 0 20px 52px rgb(0 0 0 / 34%),inset 0 0 28px color-mix(in srgb,var(--purple) 8%,transparent);
  }
  .arrival-jump::before {
    position: absolute;
    z-index: 0;
    inset: 2px;
    border: 1px solid color-mix(in srgb,var(--purple) 48%,transparent);
    border-radius: 12px;
    content: "";
    opacity: .24;
    pointer-events: none;
    transform: scale(.994);
    animation: arrival-jump-breathe 2.2s ease-in-out infinite;
  }
  .arrival-jump::after {
    position: absolute;
    z-index: 0;
    top: -55%;
    bottom: -55%;
    left: -30%;
    width: 24%;
    background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--purple) 16%,transparent),color-mix(in srgb,var(--purple) 38%,transparent),transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(0) skewX(-16deg);
    animation: arrival-jump-scan 3.4s ease-in-out infinite;
  }
  .arrival-jump > * { position: relative; z-index: 1; }
  .arrival-jump-icon {
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb,var(--purple) 38%,var(--border));
    border-radius: 13px;
    font-size: 1.125rem;
    animation: arrival-jump-bob 1.65s ease-in-out infinite;
  }
  .arrival-jump strong { font-size: .9375rem; }
  .arrival-jump small { margin-top: 2px; font-size: .6875rem; }
}

@keyframes working-panel-breathe { 50% { opacity: .78; transform: scale(1); } }
@keyframes working-panel-scan {
  0%, 14% { opacity: 0; transform: translateX(0) skewX(-16deg); }
  28%, 62% { opacity: .72; }
  78%, 100% { opacity: 0; transform: translateX(610%) skewX(-16deg); }
}
@keyframes working-orbit-ring { to { transform: rotate(360deg); } }
@keyframes arrival-jump-breathe { 50% { opacity: .88; transform: scale(1); } }
@keyframes arrival-jump-scan {
  0%, 12% { opacity: 0; transform: translateX(0) skewX(-16deg); }
  26%, 62% { opacity: .78; }
  80%, 100% { opacity: 0; transform: translateX(570%) skewX(-16deg); }
}
@keyframes arrival-jump-bob { 50% { opacity: .72; transform: translateY(3px); } }

@media (min-width: 1800px) {
  .transcript { padding-top: 48px; }
  .timeline { gap: 30px; }
  .message-bubble { font-size: 1.0625rem; }
  .is-user .message-bubble { max-width: min(72%, 800px); padding: 12px 17px; }

  .is-assistant .message-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
    width: min(100%, 1480px);
    margin-right: auto;
    margin-left: auto;
  }
  .is-assistant .message-content.stream-plain { width: min(100%, 1480px); margin-inline: auto; }
  .timeline-card { max-width: 1120px; }
  .working-indicator { width: min(100%,1120px); min-height: 94px; padding-inline: 20px; }
  .arrival-jump { width: min(100%,680px); min-height: 82px; }
  .message-bubble.is-media img { max-width: min(100%, 1000px); max-height: 680px; }
  .message-bubble.is-media video { max-width: min(100%, 1000px); max-height: 680px; }
  .code-block, .table-wrap { max-width: 1280px; }
}

@media (max-width: 560px) {
  .transcript[data-workspace]::before { display: none; }
  .transcript { width: min(calc(100% - 24px), var(--reading-width)); padding: 22px 0 42px; }
  .timeline { gap: 18px; }
  .message-bubble { max-width: 88%; font-size: 0.875rem; line-height: 1.55; }
  .message-stack { width: 88%; }
  .is-assistant .message-bubble { max-width: 100%; }
  .is-user .message-bubble { padding: 9px 12px; }
  .message-copy { display: none; }
  .timeline-empty { min-height: 48vh; }
  .timeline-empty h2 { font-size: 1.3125rem; }
  .working-indicator { width: 100%; margin-top: 18px; padding: 11px 12px; gap: 10px; }
  .working-stop { min-width: 76px; min-height: 44px; font-size: 0.75rem; }
  .working-actions { gap: 5px; }
  .timeline-row.is-arrival-range::before { left:-8px; }
  .arrival-jump { bottom:6px;width:min(100%,260px); }
  /* The phone is where a decision is hardest to find and the rail matters most,
     so the pill keeps its words and gives up its width instead — truncating the
     label would put back the "Needs you" it exists to replace. */
  .chat-rail { bottom:6px;gap:6px; }
  .chat-rail-needs { max-width:calc(100% - 48px);padding:6px 9px; }
  .chat-rail-bottom { width:36px;height:36px; }
}

@media (prefers-reduced-motion: reduce) {
  .working-orbit i,.working-orbit::before,.working-indicator::before,.working-indicator::after,
  .arrival-jump::before,.arrival-jump::after,.arrival-jump-icon { animation: none; }
  .working-orbit i { opacity: .8; }
  .timeline-row.is-arrival-playing,.timeline-row.is-arrival-playing .agent-card-button.primary { animation:none; }
  .timeline { transition: none; }
}

:root[data-v2-attention-motion="still"] .working-orbit i,
:root[data-v2-attention-motion="still"] .working-orbit::before,
:root[data-v2-attention-motion="still"] .working-indicator::before,
:root[data-v2-attention-motion="still"] .working-indicator::after,
:root[data-v2-attention-motion="still"] .arrival-jump::before,
:root[data-v2-attention-motion="still"] .arrival-jump::after,
:root[data-v2-attention-motion="still"] .arrival-jump-icon { animation: none; }

:root[data-v2-page-visible="false"] .working-orbit i,
:root[data-v2-page-visible="false"] .working-orbit::before,
:root[data-v2-page-visible="false"] .working-indicator::before,
:root[data-v2-page-visible="false"] .working-indicator::after,
:root[data-v2-page-visible="false"] .arrival-jump::before,
:root[data-v2-page-visible="false"] .arrival-jump::after,
:root[data-v2-page-visible="false"] .arrival-jump-icon { animation-play-state: paused; }