/* Myna's story as a stage, not a chat (the owner, 2 Nov: "focus on them, characters in the centre, larger, the line on
   screen like a reel"). Loaded last on /myna, so it replaces the docked music-player bar:
   - Pulse and Myna stand large in the middle; whoever speaks steps forward, the other steps back.
   - The line being said is the reel caption: big, centred, each word lighting as it is spoken (myna.js), with a sticker
     saying who is speaking. Pulse's thoughts float above him as a bubble.
   - The player sits under the caption; the chat log folds behind "Transcript" (story.js); Myna's plan and the person
     typing stay in view.
   - Tap Pulse: his heart beats. Tap Myna: she chirps. ← → move between parts; space pauses. */

/* ---- the stage ---- */
.myna-page.is-docked .myna-top { position: relative; top: auto !important; display: grid; grid-template-columns: 1fr; grid-template-areas: "pair" "text" "ctl" "acts" "bar";
  justify-items: center; gap: 18px; width: min(1040px, 100%); min-height: min(78vh, 760px); align-content: center; margin: 0 auto; padding: 40px 20px 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; }
html:not(.is-embed) body:has(.myna-page.is-docked)::before { display: none; }

/* ---- the two of them, large ---- */
.myna-page.is-docked .myna-pair { grid-area: pair; display: flex; align-items: flex-end; justify-content: center; gap: clamp(28px, 7vw, 96px); margin: 0; position: relative; }
.myna-page.is-docked .myna-pair::before { content: ""; position: absolute; left: 50%; bottom: 46%; width: clamp(40px, 8vw, 110px); transform: translateX(-50%);
  border-top: 2px dashed color-mix(in srgb, var(--on-surface) 25%, transparent); }
.myna-page.is-docked .myna-who { display: grid; justify-items: center; gap: 8px; transition: transform .5s cubic-bezier(.2, 1.2, .3, 1), opacity .4s ease, filter .4s ease; position: relative; }
.myna-page.is-docked .myna-who-name { display: block; margin: 0; font: 700 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-surface-variant); }
.myna-page.is-docked .pm.is-small { width: clamp(104px, 14vw, 150px); height: clamp(104px, 14vw, 150px); }
.myna-page.is-docked .pm.is-small .pm-mark { width: 52%; height: 52%; }
.myna-page.is-docked .myna-orb { width: clamp(150px, 20vw, 230px); height: clamp(116px, 15vw, 178px); cursor: pointer; }
.myna-page.is-docked .myna-orb .mb { width: auto; height: 100%; max-width: 100%; }
.myna-page.is-docked .myna-who:not(.is-pulse) .myna-who-name { position: relative; z-index: 2; margin-top: 6px; }
.myna-page.is-docked .myna-ring { display: block; }
.myna-page.is-docked .pulse-orb { cursor: pointer; }
/* who is speaking steps forward */
.myna-page.is-docked[data-who="pulse"] .myna-who.is-pulse, .myna-page.is-docked[data-who="think"] .myna-who.is-pulse,
.myna-page.is-docked[data-who="myna"] .myna-who:not(.is-pulse) { transform: scale(1.1) translateY(-6px); opacity: 1; filter: none; }
.myna-page.is-docked[data-who="pulse"] .myna-who:not(.is-pulse), .myna-page.is-docked[data-who="think"] .myna-who:not(.is-pulse),
.myna-page.is-docked[data-who="myna"] .myna-who.is-pulse { transform: scale(.88); opacity: .5; filter: saturate(.5); }
/* a tap */
.is-poked { animation: poke .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes poke { 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.96) rotate(2deg); } }

/* ---- Pulse's thought, as a bubble above him ---- */
.myna-page.is-docked .myna-think { display: block; position: absolute; bottom: 100%; left: 50%; width: max-content; max-width: min(320px, 70vw); margin: 0 0 12px;
  padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--surface); border: 1.5px solid var(--on-surface); box-shadow: 3px 3px 0 var(--on-surface);
  font: italic 500 var(--fs-xl)/1.35 var(--font-hand); color: var(--on-surface); opacity: 0; transform: translate(-30%, 8px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1); z-index: 3; }
.myna-page.is-docked .myna-think.on { opacity: 1; transform: translate(-30%, 0) scale(1); }

/* ---- the reel caption ---- */
.myna-page.is-docked .np-text { grid-area: text; display: grid; justify-items: center; gap: 10px; text-align: center; width: 100%; }
.myna-page.is-docked .myna-status { order: 3; font: 500 12px/1.4 var(--font-sans); color: var(--on-surface-variant); text-align: center; }
.myna-page.is-docked .myna-speaker { display: inline-block; order: 1; margin: 0; padding: 5px 11px 4px; border-radius: 7px; background: var(--on-surface); color: var(--surface);
  font: 700 11.5px/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--primary); }
.myna-page.is-docked .myna-speaker:empty { visibility: hidden; }
.myna-page.is-docked .myna-caption { order: 2; display: block; overflow: visible; max-width: 24ch; min-height: 2.3em; margin: 0;
  font: 600 clamp(28px, 4.4vw, 54px)/1.14 var(--font-hand); letter-spacing: -.01em; text-align: center; text-wrap: balance; color: var(--on-surface); }
.myna-page.is-docked .myna-caption[data-size="l"] { font-size: clamp(25px, 3.5vw, 44px); max-width: 28ch; }
.myna-page.is-docked .myna-caption[data-size="m"] { font-size: clamp(22px, 2.8vw, 36px); max-width: 34ch; line-height: 1.2; }
.myna-page.is-docked .myna-caption[data-size="s"] { font-size: clamp(20px, 2.3vw, 30px); max-width: 40ch; line-height: 1.24; }
.myna-page.is-docked .myna-caption span { color: color-mix(in srgb, var(--on-surface) 22%, transparent); transition: color .18s ease; }
.myna-page.is-docked .myna-caption span.on { color: var(--on-surface); }
.myna-page.is-docked[data-who="myna"] .myna-caption span.on:last-of-type { color: var(--primary); }

/* ---- the player, under the caption ---- */
.myna-page.is-docked .np-ctl { grid-area: ctl; display: flex; gap: 10px; }
.myna-page.is-docked .np-btn { width: 52px; height: 52px; }
.myna-page.is-docked .np-acts { grid-area: acts; justify-content: center; flex-wrap: wrap; overflow: visible; padding: 0; }
.myna-page.is-docked .np-act { padding: 7px 14px; font-size: 13px; }
.myna-page.is-docked .np-bar { grid-area: bar; width: min(560px, 100%); height: 4px; margin: 6px 0 0; border-radius: 999px; }

/* ---- below the stage: the plan, the person typing, and the transcript on request ---- */
.myna-page.is-docked .myna-paper { width: min(980px, 100%); margin: 24px auto 0; }
.myna-tx { display: block; margin: 0 auto 14px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--on-surface); background: var(--surface); color: var(--on-surface);
  font: 600 13px/1 var(--font-sans); cursor: pointer; }
.myna-tx::after { content: "  ⌄"; } .myna-tx[aria-expanded="true"]::after { content: "  ⌃"; }
.myna-tx:hover { background: var(--on-surface); color: var(--surface); }
.myna-paper.is-tx-closed .myna-said { display: none; }

@media (max-width: 640px) {
  .myna-page.is-docked .myna-top { min-height: auto; padding: 64px 14px 0; gap: 14px; }
  .myna-page.is-docked .myna-caption { max-width: 100%; }
  .myna-page.is-docked .myna-caption[data-size="xl"] { font-size: 32px; } .myna-page.is-docked .myna-caption[data-size="l"] { font-size: 27px; }
  .myna-page.is-docked .myna-caption[data-size="m"] { font-size: 23px; } .myna-page.is-docked .myna-caption[data-size="s"] { font-size: 20px; }
  .myna-page.is-docked .np-acts { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; }
  .myna-page.is-docked .myna-think { max-width: 64vw; font-size: var(--fs-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .myna-page.is-docked .myna-who, .myna-page.is-docked .myna-think { transition: none; }
  .is-poked { animation: none; }
}

/* ======== Kinetic captions (story.js dresses each word: --i order, --r tilt, --dx / --dy where it comes from) ========
   Each entrance is a damped spring written out as keyframes: it overshoots, comes back, settles, the way a thing with
   weight does. Words not yet said wait faintly in place, so the line can still be read ahead. */
.myna-page.is-docked .myna-caption span { display: inline-block; white-space: pre; transform-origin: 50% 80%; }
.myna-page.is-docked .myna-caption span:not(.on) { opacity: .16; }

/* Pulse: dropped, with a bounce (gravity, then two smaller rebounds) */
.myna-caption[data-fx="drop"] span.on { animation: k-drop .62s linear both; }
@keyframes k-drop {
  0%   { transform: translateY(-1.1em) rotate(var(--r)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  48%  { transform: translateY(0) rotate(0) scaleY(.86) scaleX(1.08); opacity: 1; animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  66%  { transform: translateY(-.18em) scaleY(1.04) scaleX(.98); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  80%  { transform: translateY(0) scaleY(.96) scaleX(1.02); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  90%  { transform: translateY(-.05em); }
  100% { transform: none; opacity: 1; } }

/* Myna: words flock in from the side on a curve, tilted like a wing, and settle */
.myna-caption[data-fx="flock"] span.on { animation: k-flock .7s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes k-flock {
  0%   { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) - 14deg)) scale(.55); opacity: 0; filter: blur(3px); }
  45%  { transform: translate(calc(var(--dx) * -.08), calc(var(--dy) * -.25)) rotate(calc(var(--r) * -.4)) scale(1.06); opacity: 1; filter: none; }
  75%  { transform: translate(0, 0) rotate(calc(var(--r) * .15)) scale(.99); }
  100% { transform: none; opacity: 1; } }

/* Thoughts: rise out of a blur in italics, then keep a slow sway */
.myna-caption[data-fx="float"] { font-style: italic; font-weight: 500; }
.myna-caption[data-fx="float"] span.on { animation: k-float .9s cubic-bezier(.2, .8, .2, 1) both, k-sway 3.2s ease-in-out .9s infinite alternate; animation-delay: 0s, calc(var(--i) * -.37s); }
@keyframes k-float { from { transform: translateY(.7em) scale(.94); opacity: 0; filter: blur(6px); } to { transform: none; opacity: .92; filter: none; } }
@keyframes k-sway { from { transform: translateY(0) rotate(0); } to { transform: translateY(-.06em) rotate(calc(var(--r) * .12)); } }

/* The words a line turns on: pop, pink, a marker swiped underneath; a question wobbles once */
.myna-page.is-docked .myna-caption span.kw.on { color: var(--primary) !important;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--primary) 20%, transparent) 62% 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  animation-name: k-pop; animation-duration: .7s; animation-timing-function: cubic-bezier(.2, 1.6, .35, 1); }
.myna-caption[data-fx="float"] span.kw.on { animation-name: k-pop, k-sway; }
@keyframes k-pop {
  0%   { transform: scale(.3) rotate(calc(var(--r) * 2)); opacity: 0; background-size: 0% 100%; }
  55%  { transform: scale(1.32) rotate(calc(var(--r) * -.5)); opacity: 1; }
  78%  { transform: scale(.94) rotate(calc(var(--r) * .2)); background-size: 100% 100%; }
  100% { transform: none; opacity: 1; background-size: 100% 100%; } }
.myna-page.is-docked .myna-caption span.q.on { animation: k-wobble .8s ease-out both; }
@keyframes k-wobble { 0% { transform: scale(.4); opacity: 0; } 40% { transform: scale(1.2) rotate(-8deg); opacity: 1; } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } 100% { transform: none; opacity: 1; } }

/* ---- the same voices, quieter, in the transcript ---- */
.myna-said li[data-fx="drop"] .myna-w.on { animation: t-drop .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.myna-said li[data-fx="flock"] .myna-w.on { animation: t-flock .5s cubic-bezier(.2, .9, .25, 1.15) both; }
.myna-said li[data-fx="float"] .myna-w.on { animation: t-float .6s ease-out both; }
.myna-said .myna-w { display: inline-block; white-space: pre; }
.myna-said .myna-w.kw.on { color: var(--primary); font-weight: 600; }
@keyframes t-drop { from { transform: translateY(-.5em) rotate(var(--r)); opacity: 0; } }
@keyframes t-flock { from { transform: translateX(var(--dx)) rotate(var(--r)); opacity: 0; } }
@keyframes t-float { from { transform: translateY(.4em); opacity: 0; filter: blur(3px); } }

@media (prefers-reduced-motion: reduce) {
  .myna-page.is-docked .myna-caption span.on, .myna-said .myna-w.on { animation: none !important; opacity: 1; }
}

/* ======== Fit and stream (the owner, 2 Nov: "text extra large; make it visible, responsive, streaming like tokens") ========
   Sizes follow the smaller of width and height, so the two characters, the line and the player fit one screen on a
   laptop, a phone, or a short window. Words not yet said are not shown at all (their places are kept, so nothing below
   jumps); each one appears as it is spoken, with a pink cursor riding the end, the way an assistant streams its answer. */
.myna-page.is-docked .myna-top { min-height: min(calc(100dvh - 70px), 820px); padding-top: clamp(16px, 3vh, 40px); gap: clamp(8px, 1.6vh, 16px); }
.myna-page.is-docked .pm.is-small { width: clamp(76px, min(11vw, 15vh), 136px); height: clamp(76px, min(11vw, 15vh), 136px); }
.myna-page.is-docked .myna-orb { width: clamp(110px, min(16vw, 22vh), 200px); height: clamp(86px, min(12vw, 17vh), 156px); }
.myna-page.is-docked .myna-caption { font-size: clamp(22px, min(3.2vw, 4.6vh), 40px); max-width: 26ch; line-height: 1.2; min-height: 0; }
.myna-page.is-docked .myna-caption[data-size="l"] { font-size: clamp(20px, min(2.6vw, 3.8vh), 32px); max-width: 32ch; }
.myna-page.is-docked .myna-caption[data-size="m"] { font-size: clamp(18px, min(2.2vw, 3.3vh), 27px); max-width: 38ch; line-height: 1.26; }
.myna-page.is-docked .myna-caption[data-size="s"] { font-size: clamp(17px, min(1.9vw, 2.9vh), 23px); max-width: 44ch; line-height: 1.3; }
.myna-page.is-docked .np-btn { width: 46px; height: 46px; }

/* streaming: unsaid words keep their place but stay out of sight; the cursor follows the last word said */
.myna-page.is-docked .myna-caption span:not(.on) { opacity: 0 !important; animation: none !important; }
.myna-page.is-docked .myna-caption span.on:has(+ span:not(.on))::after,
.myna-page.is-docked .myna-caption span.on:last-child::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-left: .06em; vertical-align: -.08em;
  background: var(--primary); border-radius: 1px; animation: k-caret .9s steps(1) infinite; }
.myna-page.is-ended .myna-caption span::after, .myna-page:not([data-who="pulse"]):not([data-who="myna"]):not([data-who="think"]) .myna-caption span::after { display: none; }
@keyframes k-caret { 50% { opacity: 0; } }

/* the entrances, shortened to a token's pace: the same voices, less travel */
.myna-caption[data-fx="drop"] span.on { animation-duration: .42s; }
.myna-caption[data-fx="flock"] span.on { animation-duration: .46s; --dx: .7em; --dy: -.2em; }
.myna-caption[data-fx="float"] span.on { animation-duration: .6s, 3.2s; }
.myna-page.is-docked .myna-caption span.kw.on { animation-duration: .5s; }

@media (max-width: 640px) {
  .myna-page.is-docked .myna-top { padding-top: 56px; }
  .myna-page.is-docked .myna-caption, .myna-page.is-docked .myna-caption[data-size] { max-width: 100%; }
  .myna-page.is-docked .myna-caption[data-size="xl"] { font-size: 26px; } .myna-page.is-docked .myna-caption[data-size="l"] { font-size: 22px; }
  .myna-page.is-docked .myna-caption[data-size="m"] { font-size: 19px; } .myna-page.is-docked .myna-caption[data-size="s"] { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .myna-page.is-docked .myna-caption span::after { animation: none; } }

/* ======== One line at a time (story.js chunk / follow): subtitles in step with the voice ======== */
.myna-page.is-docked .myna-caption, .myna-page.is-docked .myna-caption[data-size] {
  width: min(100%, 980px); max-width: min(100%, 980px); white-space: nowrap; overflow: hidden; min-height: 1.35em; line-height: 1.35;
  font-size: clamp(22px, min(3.3vw, 5vh), 44px); text-wrap: nowrap; }
.myna-page.is-docked .myna-caption span:not(.in) { display: none !important; }
.myna-page.is-docked .myna-caption.swap { animation: line-in .32s cubic-bezier(.2, .9, .3, 1); }
@keyframes line-in { from { transform: translateY(.45em); opacity: 0; filter: blur(2px); } }
@media (max-width: 640px) {
  .myna-page.is-docked .myna-caption, .myna-page.is-docked .myna-caption[data-size] { font-size: clamp(19px, 5.6vw, 24px); }
}
@media (prefers-reduced-motion: reduce) { .myna-page.is-docked .myna-caption.swap { animation: none; } }