/* ============================================================
   mcp-scene — the Claude MCP step of "The AI layer".

   Claude's own desktop app, drawn at the size it is shown rather
   than as a scaled canvas. The Pricing step scales a 1280px page
   down, which suits a dense product table and would not suit this
   screen: on a phone it would put Claude's answers at 4px. So this
   window reflows instead. A container query on the screen gives it
   Claude's sidebar when it is wide and Claude's phone layout when
   it is narrow. Claude's words are 12px in the wide window and
   14px in the narrow one: 14 is off the page's 4px type scale, and
   chosen with Elif (10 Sep 2026) because 16 read as a close-up and
   12 flattened the messages into the labels.

   Anything that is not the point of the story is a dot or a line,
   as in the Pricing and Properties steps: the chat history, the
   other connectors, the model picker, the listings nobody asked
   about.

   Driven by assets/js/mcp-scene.js, which uses the same cue engine
   as the Pricing step. There is no cursor: a press is the pressed
   thing lifting (.tapish, shared with pricing-scene.css). It keeps
   the same motion contract as well.

   Facts: Claude reads Base360 through the MCP connector and may
   write prices (Elif, 8 Sep 2026; data/ still says read-only).
   Tool names, scopes and figures are illustrative demo data.
   ============================================================ */

/* ---------- the window ---------- */
[data-scene="mcp"] .mac-screen {
  container: cl / inline-size;
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--claude-paper);
}
/* In the pinned frame every screen is the same fixed-height box. */
@media (min-width: 1024px) {
  .js .step [data-scene="mcp"] .mac-screen { aspect-ratio: auto; min-height: 288px; }
}
/* Below it the window gets a height instead of a ratio: Claude's
   phone layout needs room for one card above the composer. */
@media (max-width: 1023px) {
  [data-scene="mcp"] .mac-screen { aspect-ratio: auto; height: clamp(320px, 46dvh, 400px); }
}

/* ---------- Claude ---------- */
[data-scene="mcp"] .cl {
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  /* Claude's words. The wide window is the desktop app seen from a
     step back, so they sit a size under the page's body text and
     more of the conversation fits; the phone layout is the close-up
     and brings them up to 14px (container query below). */
  --msg-fs: 12px; --msg-lh: 20px; --msg-gap: 12px;
  --hello-fs: 20px; --hello-lh: 28px;
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 184px minmax(0, 1fr);
  background: var(--claude-paper); color: var(--claude-ink);
  font: 400 12px/16px var(--mock-font);
}
[data-scene="mcp"] .cl :where(p, ul, li) { margin: 0; padding: 0; }
[data-scene="mcp"] .cl :where(ul) { list-style: none; }
[data-scene="mcp"] .cl :where(b, strong) { font-weight: 600; }
[data-scene="mcp"] .cl :where(code) { font: inherit; }
[data-scene="mcp"] .cl img { display: block; max-width: none; }
[data-scene="mcp"] .cl .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-scene="mcp"] .cl-spark { display: block; flex: none; color: var(--claude-accent); }
[data-scene="mcp"] .cl-spark svg { display: block; width: 100%; height: 100%; }

/* A dot where an icon would be, a line where the words would be. */
[data-scene="mcp"] .cl em:empty { display: block; width: var(--w, 60%); height: 4px; border-radius: 2px; background: var(--claude-ghost); }
[data-scene="mcp"] .cl-opt b { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--claude-ghost); }

/* An item that opens from nothing: rows 0fr → 1fr, so whatever
   sits around it moves over smoothly instead of jumping. */
[data-scene="mcp"] .grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--spring); }
[data-scene="mcp"] .grow > div { min-height: 0; overflow: hidden; opacity: 0; translate: 0 8px; transition: opacity .4s var(--ease), translate .6s var(--spring); }
[data-scene="mcp"] .grow.in { grid-template-rows: 1fr; }
[data-scene="mcp"] .grow.in > div { opacity: 1; translate: 0 0; }

/* ---------- sidebar ---------- */
[data-scene="mcp"] .cl-side {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: 12px 8px;
  background: color-mix(in srgb, var(--claude-fill) 45%, var(--claude-paper));
  border-right: 1px solid var(--claude-line);
}
[data-scene="mcp"] .cl-side > * { flex: none; }
[data-scene="mcp"] .cl-brand { display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 8px; padding: 0 8px; font: 500 20px/24px var(--serif); letter-spacing: -.02em; }
[data-scene="mcp"] .cl-brand .cl-spark { width: 20px; height: 20px; }
[data-scene="mcp"] .cl-new { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; font-weight: 500; }
[data-scene="mcp"] .cl-new i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--claude-accent); color: var(--card); }
[data-scene="mcp"] .cl-new .ic { width: 12px; height: 12px; stroke-width: 2.4; }
[data-scene="mcp"] .cl-g { display: flex; align-items: center; height: 32px; padding: 0 8px; }
[data-scene="mcp"] .cl-hist { flex: 1 1 auto; min-height: 0; margin-top: 8px; overflow: hidden; }
[data-scene="mcp"] .cl-rec { display: flex; align-items: center; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--claude-fill); font-weight: 500; }
[data-scene="mcp"] .cl-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 8px 0; border-top: 1px solid var(--claude-line); }
[data-scene="mcp"] .cl-user img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
[data-scene="mcp"] .cl-user span { display: grid; gap: 4px; min-width: 0; }
[data-scene="mcp"] .cl-user b { font-weight: 500; }

/* ---------- the conversation column ----------
   Four rows: top bar, feed, dock, and a spacer under the dock.
   On a new chat the spacer shares the free height with the feed,
   so the greeting and composer sit a little above the middle, as
   Claude's do; on the first send the spacer closes and the
   composer settles to the bottom. */
[data-scene="mcp"] .cl-main {
  position: relative; min-width: 0; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1.5fr);
  transition: grid-template-rows .8s var(--spring);
}
[data-scene="mcp"] .cl.is-chat .cl-main { grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 0fr); }

[data-scene="mcp"] .cl-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; }
[data-scene="mcp"] .cl-burger { display: none; gap: 4px; width: 16px; }
[data-scene="mcp"] .cl-burger i { height: 2px; border-radius: 1px; background: var(--claude-ink-2); }
[data-scene="mcp"] .cl-title { font-weight: 500; opacity: 0; translate: 0 4px; transition: opacity .4s var(--ease), translate .5s var(--spring); }
[data-scene="mcp"] .cl-title.on { opacity: 1; translate: 0 0; }
[data-scene="mcp"] .cl-share { display: flex; align-items: center; justify-content: center; width: 64px; height: 28px; margin-left: auto; border: 1px solid var(--claude-line); border-radius: 8px; }

/* Bottom-anchored and clipped: new items land at the bottom and
   what came before rises out under a short fade. */
[data-scene="mcp"] .cl-feed {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0; overflow: hidden; padding: 0 24px 16px;
  -webkit-mask-image: linear-gradient(transparent, #000 24px);
          mask-image: linear-gradient(transparent, #000 24px);
}
[data-scene="mcp"] .cl-feed > .grow { flex: none; width: 100%; max-width: 480px; margin-inline: auto; }
[data-scene="mcp"] .cl-feed > .grow > div > * { margin-top: var(--msg-gap); }

[data-scene="mcp"] .cl-u { width: fit-content; max-width: 85%; margin-left: auto; padding: 8px 12px; border-radius: 16px; background: var(--claude-fill); font-size: var(--msg-fs); line-height: var(--msg-lh); }
[data-scene="mcp"] .cl-a { font-size: var(--msg-fs); line-height: var(--msg-lh); }
[data-scene="mcp"] .cl-feed > .grow > div > .cl-busy { width: 20px; height: 20px; margin-top: 12px; }
[data-scene="mcp"] .cl-busy.spin svg { animation: cl-think 1.6s var(--ease) infinite; }

/* A tool call, as Claude shows it: the connector, a count, a
   status, and a body that opens while the tools run. */
[data-scene="mcp"] .cl-tg { border: 1px solid var(--claude-line); border-radius: 12px; }
[data-scene="mcp"] .cl-tg-h { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; color: var(--claude-ink-2); }
[data-scene="mcp"] .cl-tg-h img { width: 16px; height: 16px; border-radius: 4px; }
[data-scene="mcp"] .cl-tg-h span { color: var(--claude-ink); font-weight: 500; }
[data-scene="mcp"] .cl-tg-h .cl-st { margin-left: auto; }
[data-scene="mcp"] .cl-tg-h .ic { transition: rotate .4s var(--spring); }
[data-scene="mcp"] .cl-tg.open .cl-tg-h .ic { rotate: 180deg; }
[data-scene="mcp"] .cl-tg-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--spring); }
[data-scene="mcp"] .cl-tg.open .cl-tg-b { grid-template-rows: 1fr; }
[data-scene="mcp"] .cl-tg-b > div { min-height: 0; overflow: hidden; }
[data-scene="mcp"] .cl-tg-l { display: grid; padding: 4px 0 8px; border-top: 1px solid var(--claude-line); }
[data-scene="mcp"] .cl-call { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 12px; }
[data-scene="mcp"] .cl-call span { margin-left: auto; color: var(--claude-ink-2); opacity: 0; transition: opacity .3s var(--ease); }
[data-scene="mcp"] .cl-call.ok span { opacity: 1; }
[data-scene="mcp"] .cl-st { position: relative; flex: none; width: 12px; height: 12px; border: 2px solid var(--claude-line); border-radius: 50%; }
[data-scene="mcp"] .cl-tg:not(.ok) .cl-tg-h .cl-st,
[data-scene="mcp"] .cl-call.run:not(.ok) .cl-st { border-top-color: var(--claude-ink-2); animation: cl-spin .8s linear infinite; }
[data-scene="mcp"] .cl-tg.ok .cl-tg-h .cl-st,
[data-scene="mcp"] .cl-call.ok .cl-st { border-color: transparent; }
[data-scene="mcp"] .cl-tg.ok .cl-tg-h .cl-st::after,
[data-scene="mcp"] .cl-call.ok .cl-st::after { content: ""; position: absolute; left: 2px; top: -1px; width: 4px; height: 8px; border: solid var(--claude-ink-2); border-width: 0 2px 2px 0; rotate: 45deg; }

/* The chart Claude draws: three listings named and flagged, the
   rest a line and a bar. */
[data-scene="mcp"] .cl-card { padding: 12px 16px; border: 1px solid var(--claude-line); border-radius: 12px; background: var(--card); }
[data-scene="mcp"] .cl-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
[data-scene="mcp"] .cl-card-h span { color: var(--claude-ink-2); }
[data-scene="mcp"] .cl-bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; align-items: center; gap: 12px; height: 24px; }
[data-scene="mcp"] .cl-nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-scene="mcp"] .cl-bars i { position: relative; height: 8px; }
[data-scene="mcp"] .cl-bars i::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v);
  border-radius: 4px; background: var(--claude-ghost);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--spring) calc(.3s + var(--j) * 90ms);
}
[data-scene="mcp"] .in .cl-bars i::before { transform: none; }
[data-scene="mcp"] .cl-bars .is-flag i::before { background: var(--claude-accent); }
[data-scene="mcp"] .cl-bars b { text-align: right; }
[data-scene="mcp"] .cl-bars b em { margin-left: auto; }

/* The two opportunities, one after the other. */
[data-scene="mcp"] .cl-opps { display: grid; gap: 8px; }
[data-scene="mcp"] .cl-opp {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px;
  padding: 12px; border: 1px solid var(--claude-line); border-radius: 12px; background: var(--card);
  opacity: 0; translate: 0 8px;
  transition: opacity .4s var(--ease) calc(.2s + var(--j) * .4s), translate .6s var(--spring) calc(.2s + var(--j) * .4s);
}
[data-scene="mcp"] .in .cl-opp { opacity: 1; translate: 0 0; }
[data-scene="mcp"] .cl-opp-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--claude-accent) 14%, transparent); color: color-mix(in srgb, var(--claude-accent) 80%, var(--claude-ink)); }
[data-scene="mcp"] .cl-opp > span:last-child { display: grid; }
[data-scene="mcp"] .cl-opp small { font-size: 12px; line-height: 16px; color: var(--claude-ink-2); }
[data-scene="mcp"] .cl-opp b { font-size: var(--msg-fs); line-height: var(--msg-lh); }
[data-scene="mcp"] .cl-opp b + span { color: var(--claude-ink-2); }

/* Claude asks before a tool writes. */
[data-scene="mcp"] .cl-perm { display: grid; gap: 12px; padding: 12px 16px; border: 1px solid var(--claude-line); border-radius: 12px; background: var(--card); }
[data-scene="mcp"] .cl-perm-h { display: flex; align-items: flex-start; gap: 8px; font-size: var(--msg-fs); line-height: var(--msg-lh); }
[data-scene="mcp"] .cl-perm-h img { width: 16px; height: 16px; margin-top: calc((var(--msg-lh) - 16px) / 2); border-radius: 4px; }
[data-scene="mcp"] .cl-perm-d { display: flex; flex-wrap: wrap; gap: 4px; }
[data-scene="mcp"] .cl-perm-d span { padding: 4px 8px; border-radius: 8px; background: var(--claude-fill); color: var(--claude-ink-2); }
[data-scene="mcp"] .cl-perm-b { display: flex; flex-wrap: wrap; gap: 8px; }
[data-scene="mcp"] .cl-b { display: grid; place-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--claude-line); border-radius: 8px; background: var(--card); font-weight: 500; }
[data-scene="mcp"] .cl-b.is-dark { border-color: transparent; background: var(--claude-ink); color: var(--claude-paper); }
[data-scene="mcp"] .cl-b.is-dark.hov { background: color-mix(in srgb, var(--claude-ink) 86%, var(--claude-paper)); }
[data-scene="mcp"] .cl-b.is-text { border-color: transparent; background: none; color: var(--claude-ink-2); }

/* ---------- dock: greeting, composer, tools menu ---------- */
[data-scene="mcp"] .cl-dock { display: grid; padding: 0 24px 12px; }
[data-scene="mcp"] .cl-dock > * { width: 100%; max-width: 480px; margin-inline: auto; }
[data-scene="mcp"] .cl-hello { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .8s var(--spring), opacity .4s var(--ease); }
[data-scene="mcp"] .cl-hello > div { min-height: 0; overflow: hidden; }
[data-scene="mcp"] .cl-hello-in { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 24px; font: 400 var(--hello-fs)/var(--hello-lh) var(--serif); letter-spacing: -.01em; }
[data-scene="mcp"] .cl-hello .cl-spark { width: calc(var(--hello-fs) + 4px); height: calc(var(--hello-fs) + 4px); }
[data-scene="mcp"] .cl.is-chat .cl-hello { grid-template-rows: 0fr; opacity: 0; }

[data-scene="mcp"] .cl-cwrap { position: relative; }
[data-scene="mcp"] .cl-composer { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--claude-line); border-radius: 20px; background: var(--card); box-shadow: 0 4px 16px -8px rgba(20, 20, 19, .16); }
[data-scene="mcp"] .cl-field { min-height: var(--msg-lh); padding: 0 4px; font-size: var(--msg-fs); line-height: var(--msg-lh); }
[data-scene="mcp"] .cl-phs { color: var(--claude-ink-2); }
[data-scene="mcp"] .has-text .cl-phs,
[data-scene="mcp"] .cl-ph.is-reply,
[data-scene="mcp"] .cl.is-chat .cl-ph { display: none; }
[data-scene="mcp"] .cl.is-chat .cl-ph.is-reply { display: inline; }
[data-scene="mcp"] .cl-caret { display: none; width: 2px; height: calc(var(--msg-lh) - 4px); margin: 0 1px; vertical-align: calc((var(--msg-fs) - var(--msg-lh)) / 2); background: var(--claude-ink); animation: cl-blink 1s steps(1) infinite; }
[data-scene="mcp"] .typing .cl-caret { display: inline-block; }
[data-scene="mcp"] .cl-row { display: flex; align-items: center; gap: 8px; }
[data-scene="mcp"] .cl-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--claude-line); border-radius: 8px; background: var(--card); color: var(--claude-ink-2); }
[data-scene="mcp"] .cl-btn.hov,
[data-scene="mcp"] .cl-btn.is-on { background: var(--claude-fill); color: var(--claude-ink); }
[data-scene="mcp"] .cl-badge { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 4px; border-radius: 12px; background: var(--claude-fill); font-weight: 500; opacity: 0; scale: .8; transition: opacity .3s var(--ease), scale .5s var(--spring); }
[data-scene="mcp"] .cl-badge img { width: 16px; height: 16px; border-radius: 4px; }
[data-scene="mcp"] .cl-badge.on { opacity: 1; scale: 1; }
[data-scene="mcp"] .cl-model { display: flex; align-items: center; height: 32px; margin-left: auto; padding: 0 8px; }
[data-scene="mcp"] .cl-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--claude-accent); color: var(--card); opacity: .5; }
[data-scene="mcp"] .has-text .cl-send { opacity: 1; }
[data-scene="mcp"] .cl-note { padding-top: 8px; text-align: center; color: var(--claude-ink-2); }

/* Tools menu, wide window: a popover over the greeting. */
[data-scene="mcp"] .cl-pop {
  position: absolute; z-index: 6; left: 40px; bottom: calc(100% + 8px); width: 264px;
  display: grid; padding: 8px;
  border: 1px solid var(--claude-line); border-radius: 12px; background: var(--card);
  box-shadow: 0 16px 32px -12px rgba(20, 20, 19, .24);
  opacity: 0; visibility: hidden; translate: 0 8px; scale: .98; transform-origin: 20% 100%;
  transition: opacity .25s var(--ease), translate .4s var(--spring), scale .4s var(--spring), visibility 0s .4s;
}
[data-scene="mcp"] .cl-pop.on { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
[data-scene="mcp"] .cl-grab { display: none; }
[data-scene="mcp"] .cl-opt { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 8px; border-radius: 8px; }
[data-scene="mcp"] .cl-opt img { width: 16px; height: 16px; border-radius: 4px; }
[data-scene="mcp"] .cl-opt strong { font-weight: 500; }
[data-scene="mcp"] .cl-opt-end { display: grid; align-items: center; justify-items: end; margin-left: auto; }
[data-scene="mcp"] .cl-opt-end > * { grid-area: 1 / 1; }
[data-scene="mcp"] .cl-tog { position: relative; width: 28px; height: 16px; border-radius: 8px; background: var(--claude-ghost); transition: background .3s var(--ease), opacity .3s var(--ease); }
[data-scene="mcp"] .cl-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); transition: translate .4s var(--spring) .1s; }
[data-scene="mcp"] .cl-tog.on,
[data-scene="mcp"] .is-b360.ok .cl-tog { background: var(--claude-ink); }
[data-scene="mcp"] .cl-tog.on::after,
[data-scene="mcp"] .is-b360.ok .cl-tog::after { translate: 12px 0; }
[data-scene="mcp"] .is-b360 .cl-tog { opacity: 0; }
[data-scene="mcp"] .is-b360.ok .cl-tog { opacity: 1; }
[data-scene="mcp"] .cl-connect { display: grid; place-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--claude-line); border-radius: 8px; background: var(--card); font-weight: 500; }
[data-scene="mcp"] .cl-connect.hov { background: var(--claude-fill); }
[data-scene="mcp"] .is-b360.ok .cl-connect { opacity: 0; scale: .9; }

/* Behind the phone layout's bottom sheet; the wide menu has none. */
[data-scene="mcp"] .cl-veil { display: none; position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--claude-ink) 24%, transparent); opacity: 0; transition: opacity .3s var(--ease); }
[data-scene="mcp"] .cl-veil.on { opacity: 1; }

/* ---------- Base360's consent screen ----------
   Base360's page, so Base360's type, ink and indigo, and its own
   ghost colour for the scope nobody needs to read. */
[data-scene="mcp"] .cl-oauth {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--claude-ink) 32%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s;
}
[data-scene="mcp"] .cl-oauth.on { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-scene="mcp"] .cl-oa {
  display: grid; gap: 16px; width: min(100%, 320px); padding: 24px;
  border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: var(--sh-float);
  translate: 0 12px; scale: .98; transition: translate .5s var(--spring), scale .5s var(--spring);
}
[data-scene="mcp"] .cl-oauth.on .cl-oa { translate: 0 0; scale: 1; }
[data-scene="mcp"] .cl-oa-logo { width: auto; height: 24px; }
[data-scene="mcp"] .cl-oa-t { font-size: 16px; font-weight: 600; line-height: 24px; }
[data-scene="mcp"] .cl-oa-s { display: grid; border: 1px solid var(--line); border-radius: var(--r-field); }
[data-scene="mcp"] .cl-oa-s li { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; color: var(--slate); }
[data-scene="mcp"] .cl-oa-s li + li { border-top: 1px solid var(--line-soft); }
[data-scene="mcp"] .cl-oa-s em:not(:empty) { margin-left: auto; font-style: normal; color: var(--faint); }
[data-scene="mcp"] .cl-oa-s em.is-rw { color: var(--blue-deep); font-weight: 500; }
[data-scene="mcp"] .cl-oa-s b { width: 4px; height: 4px; flex: none; border-radius: 50%; background: var(--sky); }
[data-scene="mcp"] .cl-oa-s em:empty { background: var(--sky); }
[data-scene="mcp"] .cl-oa-b { display: flex; justify-content: flex-end; gap: 8px; }
[data-scene="mcp"] .cl-oa-btn { display: grid; place-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-field); font-weight: 500; }
[data-scene="mcp"] .cl-oa-btn.is-cta { border-color: transparent; background: var(--cta); color: var(--on-cta); }
[data-scene="mcp"] .cl-oa-btn.is-cta.hov { background: color-mix(in srgb, var(--cta) 84%, var(--ink)); }

/* The loop closes under a fade, then opens on a new chat. */
[data-scene="mcp"] .cl-fade { position: absolute; inset: 0; z-index: 20; background: var(--claude-paper); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
[data-scene="mcp"] .cl-fade.on { opacity: 1; }

/* A seek (a loop, or a click on 01–04) lands on its frame at once. */
[data-scene="mcp"] .cl.is-seeking *:not(.cl-fade),
[data-scene="mcp"] .cl.is-seeking *::before,
[data-scene="mcp"] .cl.is-seeking *::after { transition: none !important; }

@keyframes cl-spin { to { rotate: 360deg; } }
@keyframes cl-blink { 50% { opacity: 0; } }
/* The spark has eight arms, so half a turn meets itself. */
@keyframes cl-think { 0% { rotate: 0deg; scale: 1; } 50% { rotate: 90deg; scale: .72; } 100% { rotate: 180deg; scale: 1; } }

/* ---------- Claude's phone layout ----------
   Under 600px of window the sidebar goes behind a menu button,
   the tools menu becomes a bottom sheet, and the smallest extras
   (the note, the model picker, one chart row) step out. */
@container cl (max-width: 599px) {
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl { grid-template-columns: minmax(0, 1fr); --msg-fs: 14px; --msg-lh: 20px; --msg-gap: 12px; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) :is(.cl-side, .cl-note, .cl-model),
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-bars li:first-child,
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-oa-s .is-ghost { display: none; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-burger { display: grid; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-top { height: 40px; padding: 0 12px; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) :is(.cl-feed, .cl-dock) { padding-inline: 12px; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-hello-in { gap: 8px; padding-bottom: 16px; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-send { margin-left: auto; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-bars li { grid-template-columns: 88px minmax(0, 1fr) 32px; gap: 8px; }

  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-cwrap { position: static; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-pop {
    left: 0; right: 0; bottom: 0; width: auto; padding: 8px 12px 16px;
    border-width: 1px 0 0; border-radius: 16px 16px 0 0;
    opacity: 1; scale: 1; translate: 0 100%;
  }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-pop.on { translate: 0 0; }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-grab { display: block; width: 32px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--claude-ghost); }
  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-veil { display: block; }

  [data-scene="mcp"]:not(:has([data-mobile-fit].scene-canvas)) .cl-oa { gap: 12px; padding: 16px; }
}

/* ---------- the page's motion contract ---------- */
/* The spinners only run while the scene is on screen and motion is
   on; the script stops its clock under the same conditions. Reduced
   motion: no loops, no transitions, and the script parks the story
   on its last frame. */
.js [data-scene="mcp"]:not(.is-visible) *,
:root[data-motion="paused"] [data-scene="mcp"] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  [data-scene="mcp"] *, [data-scene="mcp"] *::before, [data-scene="mcp"] *::after { animation: none !important; transition: none !important; }
}