/* GoLine1 sample-call player: choose a call, press Play, and follow the conversation.

   Unlayered and loaded last, so it wins over the layered legacy player rules in demo-console.css
   (@layer player-base, player) whatever their specificity; only their !important rules - the
   reduced-motion switch-off and [hidden] - still beat it, which is intended. Where a rule here
   replaces a legacy one, the legacy rule is named beside it so both can be folded into the design
   system together. */

html:root .demo-page .abc { --abc-header-h:64px; --abc-player-h:0px; }

/* The two tabs share one line on most phones; demo.css spaces them for a desktop and they wrap at 390px. */
@media (max-width:600px) {
  html:root .demo-page .demo-tabs { gap:4px; }
  html:root .demo-page .demo-tabs button { margin-right:10px; min-height:44px; font-size:15px; white-space:nowrap; }
  html:root .demo-page .demo-tab-note { margin-left:4px; padding:2px 6px; font-size:11px; }
}

/* ---- Above Play: what you are about to hear ---------------------------------------------- */
html:root .demo-page .abc-fiction-line { margin:0 2px 10px; color:#4d5c72; font-size:13px; line-height:1.5; }
html:root .demo-page .abc-picker-more { padding:0 2px 12px; }

/* ---- Player. A direct child of .abc-experience, so it can stay pinned for the whole call. -- */
html:root .demo-page #abc-player { display:grid; grid-template-columns:auto minmax(80px,1fr) auto auto; align-items:center; gap:12px; margin:0 0 12px; padding:10px 14px; }
html:root .demo-page #abc-player .abc-play { grid-column:1; grid-row:1; min-height:44px; }
html:root .demo-page #abc-player .abc-playback { grid-column:2; grid-row:1; min-width:0; }
html:root .demo-page #abc-player #abc-elapsed { grid-column:3; grid-row:1; margin:0; }
html:root .demo-page #abc-player .abc-sound { grid-column:4; grid-row:1; min-height:44px; padding:8px 12px; }
/* Pinned under the site header while a call runs - paused included, so Resume stays in reach. */
html:root .demo-page .abc[data-playing="true"] #abc-player { position:sticky; top:var(--abc-header-h); z-index:25; box-shadow:0 8px 18px rgba(16,28,45,.12); }

/* ---- Scenario chips: every call visible, one tap to choose ------------------------------- */
html:root .demo-page .abc-chip-row { position:relative; }
html:root .demo-page .abc[data-mode] .abc-examples { display:flex; flex-wrap:wrap; gap:8px; margin:0; grid-template-columns:none; }
html:root .demo-page .abc[data-mode] .abc-scenario,
html:root .demo-page .abc[data-mode] .abc-scenario[aria-pressed="true"] { flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid #c9d3e3; border-radius:999px; background:#fff; color:#101c2d; text-align:center; box-shadow:none; }
html:root .demo-page .abc[data-mode] .abc-scenario:hover { border-color:#2457e6; background:#eaf0ff; }
html:root .demo-page .abc[data-mode] .abc-scenario[aria-pressed="true"] { border-color:#2457e6; background:#2457e6; color:#fff; }
html:root .demo-page .abc[data-mode] .abc-scenario b { font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap; color:inherit; }
html:root .demo-page .abc[data-mode] .abc-picker-intro { margin:10px 0 4px; }

/* ---- About this example: voices, hosting and caveats, out of the way of Play -------------- */
html:root .demo-page .abc-about { margin:6px 0 0; }
html:root .demo-page .abc-about>summary { display:inline-flex; align-items:center; min-height:44px; color:#2457e6; font-size:14px; font-weight:700; cursor:pointer; }
html:root .demo-page .abc-about-body { display:grid; gap:12px; margin:4px 0 6px; padding:14px 16px; border:1px solid #dbe1eb; border-radius:10px; background:#fff; }
html:root .demo-page .abc-about .abc-voice-preset { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
html:root .demo-page .abc-about .abc-voice-preset label { color:#101c2d; font-size:13px; }
html:root .demo-page .abc-about .abc-voice-preset select { min-height:44px; max-width:100%; border:1px solid #c9d3e3; background:#f5f7fb; color:#101c2d; font-size:14px; }
/* demo-console.css hides this helper (.abc-voice-preset small); in the disclosure it is the point. */
html:root .demo-page .abc-about .abc-voice-preset small { display:block; position:static; flex-basis:100%; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; color:#4d5c72; font-size:12px; line-height:1.5; }
html:root .demo-page .abc-about-notes { display:grid; gap:6px; margin:0; padding-left:18px; color:#4d5c72; font-size:13px; line-height:1.55; }
html:root .demo-page .abc-about-notes a { color:#2457e6; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* The reset note only belongs to the reset call (demo-console.css styles
   .abc-password-note as a banner; here it is one more caveat in the list). */
html:root .demo-page .abc[data-mode] .abc-about .abc-password-note { display:none; margin:0; padding:0; border:0; background:none; color:inherit; font-size:inherit; }
html:root .demo-page .abc[data-mode][data-scenario="password"] .abc-about .abc-password-note { display:list-item; }

/* ---- Filled details stay legible --------------------------------------------------------
   The value used to arrive through abc-arrive (demo-console.css: opacity 0 -> 1 on [data-value])
   and the card through abc-detail-capture (demo-console.css), both attached to .is-filled, so a
   settled card carried them for good. Whenever the browser replayed them - a full-page render,
   a re-layout - the value painted from its first frame: grey text on navy. The text now never
   animates; the arrival is a brief ring on .is-new, which the script always clears. */
html:root .demo-page .abc .abc-fld.is-filled [data-value] { animation:none; opacity:1; transform:none; }
html:root .demo-page .abc[data-mode="sample"] .abc-fld.is-filled { animation:none; }
html:root .demo-page .abc[data-mode] .abc-fld.is-filled.is-new { animation:abc-player-captured .9s ease-out; }
@keyframes abc-player-captured { from { box-shadow:0 0 0 4px #6792ff; } to { box-shadow:0 0 0 0 rgba(103,146,255,0); } }
html:root .demo-page .abc .abc-fld.is-not-needed { border-style:dashed; background:#f5f7fb; }
html:root .demo-page .abc .abc-fld.is-not-needed [data-empty] { color:#4d5c72; font-size:13px; }

/* ---- Conversation: the newest line is pinned by the script, so no smooth-scroll lag -------- */
html:root .demo-page .abc .abc-transcript { scroll-behavior:auto; overscroll-behavior:contain; }

/* ---- End of the call -------------------------------------------------------------------- */
html:root .demo-page .abc-done:focus { outline:none; }
/* demo-console.css sets .abc[data-mode="sample"] .abc-phone-link to display:inline, which left the
   link a few pixels tall and off the line of the replay button beside it. */
html:root .demo-page .abc[data-mode="sample"] .abc-done-links { align-items:center; }
html:root .demo-page .abc[data-mode="sample"] .abc-done-links .abc-phone-link,
html:root .demo-page .abc[data-mode="sample"] .abc-done-actions #ld-again { display:inline-flex; align-items:center; min-height:44px; line-height:1.3; }
html:root .demo-page .abc[data-mode="sample"] .abc-done-actions .abc-btn { min-height:44px; }

/* ---- Other tap targets in the workspace -------------------------------------------------- */
html:root .demo-page .abc[data-mode] .abc-present { min-height:44px; }
html:root .demo-page .abc[data-mode] .abc-reference button { min-height:44px; min-width:44px; }
html:root .demo-page .abc[data-mode] .abc-mobile-views button { min-height:44px; }

@media (min-width:801px) {
  /* While a sample plays, the panels take the height left under the header, the pinned player and
     the call status, so the conversation's newest line is on screen (demo-console.css fixes 690px). */
  html:root .demo-page .abc[data-mode="sample"] .abc-panels { height:clamp(440px,var(--abc-fit-h,690px),690px); grid-template-rows:minmax(0,52fr) minmax(0,48fr); }
  html:root .demo-page .abc[data-mode="sample"] .abc-result { overflow-y:auto; }
}

@media (max-width:800px) {
  /* A phone shows every call in one swipeable row; the fade marks the side with more. */
  html:root .demo-page .abc[data-mode] .abc-examples { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:2px 2px 4px; }
  html:root .demo-page .abc[data-mode] .abc-examples::-webkit-scrollbar { display:none; }
  html:root .demo-page .abc[data-mode] .abc-scenario,
  html:root .demo-page .abc[data-mode] .abc-scenario[aria-pressed="true"] { flex:none; scroll-snap-align:start; padding:8px 14px; border-radius:999px; text-align:center; }
  html:root .demo-page .abc-chip-row::before,
  html:root .demo-page .abc-chip-row::after { content:""; position:absolute; top:0; bottom:4px; width:44px; pointer-events:none; opacity:0; transition:opacity .2s; }
  html:root .demo-page .abc-chip-row::before { left:0; background:linear-gradient(to left,rgba(245,247,251,0),#f5f7fb 80%); }
  html:root .demo-page .abc-chip-row::after { right:0; background:linear-gradient(to right,rgba(245,247,251,0),#f5f7fb 80%); }
  html:root .demo-page .abc-chip-row[data-more-start="true"]::before,
  html:root .demo-page .abc-chip-row[data-more-end="true"]::after { opacity:1; }

  /* The step tracker: four steps on one line. The connectors used to be sized from the step's own
     width (demo-console.css, max-width 480px) and ran past the right edge of the screen. */
  html:root .demo-page .abc[data-mode] .abc-journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:8px 6px 10px; }
  html:root .demo-page .abc[data-mode] .abc-journey li { flex-direction:column; align-items:center; gap:4px; min-width:0; font-size:11px; line-height:1.25; text-align:center; overflow-wrap:anywhere; }
  html:root .demo-page .abc[data-mode] .abc-journey li>span { width:24px; height:24px; flex:none; font-size:11px; }
  html:root .demo-page .abc[data-mode] .abc-journey li:not(:last-child)::after { content:""; position:absolute; top:12px; left:calc(50% + 16px); right:calc(-50% + 16px); width:auto; height:1px; margin:0; }

  /* Playing on a phone: the conversation gets the screen. The scene repeats the chosen call, the
     summary repeats the Details tab, and the panel heading repeats its tab. */
  html:root .demo-page .abc[data-mode="sample"] .abc-workspace-top,
  html:root .demo-page .abc[data-playing="true"] .abc-compact-summary { display:none; }
  html:root .demo-page .abc[data-mode="sample"] .abc-panel>header { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  html:root .demo-page .abc[data-mode="sample"] .abc-panel { position:relative; height:clamp(300px,var(--abc-fit-h,430px),720px); min-height:0; }
  html:root .demo-page .abc[data-mode="sample"] .abc-mobile-views { padding:6px 8px; }
  html:root .demo-page .abc[data-mode="sample"] .abc-reaction { min-height:0; padding:8px 12px; }

  html:root .demo-page .abc-done-actions,
  html:root .demo-page .abc[data-mode="sample"] .abc-sample-next { width:100%; }
  html:root .demo-page .abc[data-mode="sample"] .abc-sample-next .abc-btn { flex:1 1 200px; }
}

@media (max-width:600px) {
  /* Idle: Play across the full width, as before. Playing: one compact pinned row. */
  html:root .demo-page #abc-player { grid-template-columns:minmax(0,1fr) auto auto; gap:8px 10px; padding:9px 10px; }
  html:root .demo-page #abc-player .abc-play { grid-column:1 / -1; grid-row:1; width:100%; }
  html:root .demo-page #abc-player .abc-playback { grid-column:1; grid-row:2; }
  html:root .demo-page #abc-player #abc-elapsed { grid-column:2; grid-row:2; }
  html:root .demo-page #abc-player .abc-sound { grid-column:3; grid-row:2; }
  html:root .demo-page .abc[data-playing="true"] #abc-player { grid-template-columns:auto minmax(0,1fr) auto auto; padding:6px 8px; margin-left:-4px; margin-right:-4px; }
  html:root .demo-page .abc[data-playing="true"] #abc-player .abc-play { grid-column:1; width:auto; min-width:96px; }
  html:root .demo-page .abc[data-playing="true"] #abc-player .abc-playback { grid-column:2; grid-row:1; }
  html:root .demo-page .abc[data-playing="true"] #abc-player #abc-elapsed { grid-column:3; grid-row:1; }
  html:root .demo-page .abc[data-playing="true"] #abc-player .abc-sound { grid-column:4; grid-row:1; }
  /* "Fictional call" is said above Play; pinned, the line only speaks up when audio has failed. */
  html:root .demo-page .abc[data-playing="true"][data-audio="ok"] #abc-player #abc-playback-label { display:none; }
  html:root .demo-page .abc[data-playing="true"] #abc-player #abc-playback-label { margin-top:3px; font-size:11px; line-height:1.3; }
}