/* #interaction: dark band with a 3D coverflow of avatars. The live demo
   lives inside the Nina-spooky card. Transforms come from demo-carousel.js. */
html body #main-content #interaction{overflow-x:clip;background:#25231c!important;color:#faf8f3}
html body #main-content #interaction h2{color:#faf8f3!important}
html body #main-content #interaction .toda-proof-grid>div:first-child>span{color:#9db4f2!important}

/* Halloween copy only while Nina-spooky is the centre card. */
#interaction:not(.is-spooky) .hw-on{display:none!important}
#interaction:not(.is-spooky) .hw-off{display:inline!important}
/* Both copies share one grid cell, so the heading keeps the taller one's
   height and the page below does not move when the centre card changes. */
html.has-js[data-halloween] #interaction .demo-swap{display:grid}
html.has-js[data-halloween] #interaction .demo-swap>span{grid-area:1/1;display:block!important}
html.has-js[data-halloween] #interaction:not(.is-spooky) .demo-swap>.hw-on,
html.has-js[data-halloween] #interaction.is-spooky .demo-swap>.hw-off{visibility:hidden}

#interaction .demo-carousel{--w:360px;--h:450px;position:relative;margin-top:16px}
/* The lens: static perspective, never tweened. */
#interaction .demo-carousel-track{position:relative;height:calc(var(--h) + 64px);perspective:1600px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
#interaction .demo-carousel.is-dragging .demo-carousel-track{cursor:grabbing}
#interaction .demo-carousel-card{
  position:absolute;top:0;left:50%;width:var(--w);margin:0 0 0 calc(var(--w) / -2);
  transform-origin:50% 50%;backface-visibility:hidden;
}
#interaction .demo-carousel-card:focus-visible{outline:none}
#interaction .demo-carousel-card:focus-visible .demo-carousel-media{outline:3px solid #9db4f2;outline-offset:4px}

#interaction .demo-carousel-media{position:relative;width:100%;height:var(--h);overflow:hidden;border-radius:28px;background:#5f6063}
#interaction .demo-carousel-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;pointer-events:none;-webkit-user-drag:none}
/* Depth cue = a dark layer whose opacity JS sets (compositor-only; no blur filter). */
#interaction .demo-carousel-shade{position:absolute;inset:0;z-index:7;background:#14130f;opacity:0;pointer-events:none;will-change:opacity}
/* The centre card's idle clip sits over its poster. It starts while its card
   is still arriving and fades in slowly, so the card lands already playing;
   it fades out quickly when its card leaves. */
#interaction .demo-carousel-clip{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transition:opacity .16s linear;pointer-events:none}
#interaction .demo-carousel-clip.is-on{opacity:1;transition:opacity .5s ease-out}

/* Name and role under every card, the centre one included, also during a
   conversation. Fixed height (one line each), so a longer title never moves
   what follows. */
#interaction .demo-carousel-name{height:44px;margin-top:14px;padding-left:4px;overflow:hidden;color:#faf8f3;font:600 17px/1.3 Archivo,sans-serif}
#interaction .demo-carousel-name :is(strong,span){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#interaction .demo-carousel-name span{margin-top:1px;color:#b9b5ab;font-weight:400;font-size:15px}
/* Without JS the cards stack and the last one shows: only its name. */
html:not(.has-js) #interaction .demo-carousel-card:not(:last-child) .demo-carousel-name{visibility:hidden}

/* "Talk with [name]": one pill, bottom centre. After a conversation the
   restart button takes the same place and look (the start button is hidden). */
#interaction .demo-carousel-talk,
html body #main-content #interaction .demo-carousel #startDemo,
html body #main-content #interaction .demo-carousel .toda-demo-restart{
  position:absolute;z-index:8;left:50%;bottom:24px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;min-height:52px!important;margin:0;padding:12px 24px 12px 20px;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(20,19,16,.66)!important;
  color:#fff!important;white-space:nowrap;text-decoration:none!important;
  font:600 16px/1.3 Archivo,sans-serif!important;cursor:pointer;transition:background .2s ease,opacity .3s ease;
}
#interaction .demo-carousel-talk::before,
#interaction .demo-carousel #startDemo::before,
#interaction .demo-carousel .toda-demo-restart::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
#interaction .demo-carousel-talk:hover,
html body #main-content #interaction .demo-carousel #startDemo:hover,
html body #main-content #interaction .demo-carousel .toda-demo-restart:hover{background:rgba(20,19,16,.82)!important}
#interaction .demo-carousel-card:not(.is-current) :is(.demo-carousel-talk,#startDemo,.toda-demo-restart){opacity:0;pointer-events:none}
/* The pill rules above set display; [hidden] must still win (it did not:
   the start button stayed visible, inert, over the end panel and email form). */
html body #main-content #interaction .demo-carousel :is(#startDemo,.toda-demo-restart)[hidden]{display:none!important}
#interaction .demo-carousel-card.has-live .demo-carousel-talk{display:none}

/* The live demo fills the Nina card. Its cover shows her portrait until the
   live avatar is ready; then the cover fades and the avatar shows. */
html body #main-content #interaction .demo-carousel .toda-live-demo{
  position:absolute;inset:0;width:100%;max-width:none;height:100%;min-height:0!important;margin:0;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden;
}
html body #main-content #interaction .demo-carousel .toda-demo-cover{background:var(--demo-poster) 50% 20%/cover no-repeat!important}
/* The live render frames like the square poster: a square as tall as the card,
   centred and cropped at the sides, so poster, clip and live avatar line up.
   (Overrides the inline size the demo page computes for its old layout.) */
#interaction .demo-carousel #avatar,
#interaction .demo-carousel .toda-live-demo[data-demo-state] #avatar{left:50%!important;top:0!important;bottom:auto;width:var(--h)!important;height:var(--h)!important;max-width:none!important;transform:translateX(-50%)}
#interaction .demo-carousel .toda-demo-consent{left:0!important;inset:0;padding:24px 20px!important;justify-content:flex-end;background:none!important}
#interaction .demo-carousel .demo-carousel-intro{display:none}
#interaction .demo-carousel .toda-demo-consent .toda-demo-status:empty{display:none}
/* Email gate needs solid ground over her portrait. */
#interaction .demo-carousel .toda-demo-consent.is-email{padding:24px 22px!important;background:linear-gradient(180deg,rgba(250,248,243,0) 8%,rgba(250,248,243,.92) 34%,var(--paper) 52%)!important}
/* End panel: one short line and one button, low on the card so her face stays
   visible. A translucent dark scrim in the band's own colour fades up from the
   bottom (a white panel glared in the dark band); light text on it stays far
   above AA. Room underneath for the "Talk with …" pill (24px offset + 52px
   pill + 12px gap). */
#interaction .demo-carousel .toda-demo-consent.is-ended{padding:24px 16px 88px!important;background:linear-gradient(0deg,rgba(37,35,28,.92) 0,rgba(37,35,28,.86) 150px,rgba(37,35,28,.5) 200px,rgba(37,35,28,0) 260px)!important}
#interaction .demo-carousel .toda-demo-consent.is-ended:has(.toda-demo-restart[hidden]){padding-bottom:20px!important}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-upsell strong{max-width:100%;color:#faf8f3;font:600 18px/1.25 Archivo,sans-serif!important;letter-spacing:-.01em;text-wrap:balance}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-signup{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:10px 20px;white-space:nowrap;font:600 15px/1.3 Archivo,sans-serif!important}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-status{margin-top:8px;color:#d9d5cb;font-size:14px!important;line-height:1.4!important}
#interaction .demo-carousel-language[hidden]{display:none!important}
/* Call bar (Johann, 07/11/2026: the white bar was far too big on phones):
   the dark glass pill of "Talk with …", in the same place, on one row: the
   state, then stop (while the avatar talks), mic and hang up. A fixed width
   per screen, so the buttons never move under a finger when the state
   changes; a long state wraps inside it (14px, never cut). Light text on the
   glass stays above AA even over a white background (5.6:1). */
#interaction .demo-carousel .toda-call{left:12px;right:12px;bottom:24px;transform:none;width:min(312px,calc(100% - 24px));margin:0 auto;gap:4px;padding:4px 4px 4px 16px;border:1px solid rgba(255,255,255,.28);background:rgba(20,19,16,.66);color:#faf8f3}
#interaction .demo-carousel .toda-call-state{align-items:flex-start;gap:8px;padding:0 2px 0 0;color:#faf8f3}
#interaction .demo-carousel .toda-call-dot{margin-top:5px;background:#b9b5ab}
#interaction .demo-carousel .toda-call[data-tone="listening"] .toda-call-dot{background:#6fd3a0}
#interaction .demo-carousel .toda-call[data-tone="thinking"] .toda-call-dot{background:#e6b862}
#interaction .demo-carousel .toda-call[data-tone="speaking"] .toda-call-dot{background:#9db4f2}
#interaction .demo-carousel .toda-call-status{font:500 14px/1.2 Archivo,sans-serif;white-space:normal;text-wrap:balance}
#interaction .demo-carousel .toda-call-button{background:rgba(255,255,255,.14);color:#fff}
#interaction .demo-carousel .toda-call-button:hover{background:rgba(255,255,255,.24)}
#interaction .demo-carousel .toda-call-button:focus-visible{outline-color:#9db4f2;outline-offset:2px}
#interaction .demo-carousel .toda-call-button[data-call-mic][aria-pressed="true"]{background:#faf8f3;color:#9b3434}
#interaction .demo-carousel .toda-call-button[data-call-end]{background:#b63b36}
#interaction .demo-carousel .toda-call-button[data-call-end]:hover{background:#9f302b}
#interaction .demo-carousel .toda-call-button[data-call-interrupt]{background:transparent;color:#e8e4da}
#interaction .demo-carousel .toda-call-button[data-call-interrupt]:hover{background:rgba(255,255,255,.14)}
/* Time left: a small glass chip in the card's top corner, off the face and
   clear of the call bar (it was 10px grey text on the portrait). */
#interaction .demo-carousel .toda-demo-session{top:12px;right:12px;bottom:auto;padding:4px 10px;border-radius:999px;background:rgba(20,19,16,.66);color:#faf8f3;font:500 14px/1.3 Archivo,sans-serif;font-variant-numeric:tabular-nums}

/* Locked while a conversation runs. */
#interaction .demo-carousel.is-locked .demo-carousel-track{cursor:default}
#interaction .demo-carousel.is-locked .demo-carousel-card:not(.is-current){opacity:.25!important;pointer-events:none}

#interaction .demo-carousel-note{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:6;width:max-content;max-width:calc(100% - 32px);padding:8px 14px;border-radius:12px;background:var(--paper);color:var(--stone-900);font-size:14px;line-height:1.4;text-align:center}
#interaction .demo-carousel-note[hidden]{display:none}

@media (max-width:700px){
  #interaction .demo-carousel{--w:min(280px,calc(100vw - 96px));--h:calc(var(--w) * 1.25)}
  #interaction .demo-carousel-track{perspective:1100px;height:calc(var(--h) + 60px)}
  #interaction .demo-carousel-name{margin-top:12px}
  /* "Parler avec Spooky Nina" must keep a margin inside a 264px card. */
  #interaction .demo-carousel-talk,
  html body #main-content #interaction .demo-carousel #startDemo,
  html body #main-content #interaction .demo-carousel .toda-demo-restart{gap:8px;padding:12px 18px 12px 16px}
  /* Phones: the bar spans the card less 12px a side (three 44px buttons and
     the state share 240px); the dot gives its room to the words. */
  #interaction .demo-carousel .toda-call{padding-left:14px}
  #interaction .demo-carousel .toda-call-dot{display:none}
}