/* ═══════════════════════════════════════════════════════════════════════
   TEASER (Desktop) — Anonymous visitor flow
   Visual language mirrors the auth chat UI: minimal "Orientation" pill
   top-left, sign-up CTA top-right, nametag left, single chat-style
   speech bubble + sleek input bar at the bottom-center. After the last
   question an inline signup panel fades in (no redirect).
   Class prefix `tz-` to keep it from clashing with onboarding's `ob-`.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #0d0d0f;
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Fullscreen video layers ── */
.tz-video-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.tz-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Brightness transition drives the fade-to-black after each question. */
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.tz-video-wrap video.tz-video-hidden { opacity: 0; pointer-events: none; }

.tz-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(13, 13, 15, 0.35) 0%,
    rgba(13, 13, 15, 0.15) 35%,
    rgba(13, 13, 15, 0.30) 65%,
    rgba(13, 13, 15, 0.85) 100%);
  pointer-events: none;
}

/* ── Top-left logo ──
   Standalone fixed element at the page ROOT (not inside a z-indexed
   wrapper). mix-blend-mode: screen blends with the backdrop only within
   the element's own stacking context — trapping the logo in a z-indexed
   top-bar meant it never saw the video and the GO logo's black letterbox
   stayed visible. Root placement (like /chat) fixes that. */
.tz-logo-btn {
  position: fixed;
  top: 36px;
  left: 40px;
  z-index: 130;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  /* Oli #18 2026-05-26: dimmed from 0.85 to 0.25 to match the
     onboarding logo's resting state (.gg-logo-btn opacity 25%/hover
     100%). Same chrome-shimmer look on both pages now. */
  opacity: 0.25;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.tz-logo-btn:hover { opacity: 1; }

/* Tony 2026-05-29: shared-hover group. .tz-brand-group is a plain DOM
   wrapper around the logo + pill; both children stay position:fixed and
   the wrapper itself contributes no layout box. :hover on the wrapper
   activates whenever the pointer is over EITHER child, so we can light
   them up together. */
.tz-brand-group:hover .tz-logo-btn { opacity: 1; }
.tz-brand-group:hover .tz-mode-pill { opacity: 1; }

.gg-chat-logo-animated {
  width: 70px;
  height: 33px;
  flex-shrink: 0;
}

/* "Orientation" pill — matches the onboarding "Onboarding" pill
   .go-onboarding sibling: 0.5 resting, 1.0 on hover. Used to be
   0.95 (always-bright); Oli #18 (2026-05-26) wants the same dimmed
   treatment as onboarding for visual consistency. */
.tz-mode-pill {
  position: fixed;
  /* 2026-05-27: 40px -> 35px to match Oli's design */
  top: 35px;
  left: 130px;
  z-index: 130;
  border: 2px solid #fff;
  border-radius: 9px;
  padding: 5px 9px;
  /* Tony 2026-05-29: 0.5 -> 0.25 to match the GO logo's idle opacity.
     The pill was visibly brighter than the logo at rest; this puts them
     in lockstep. Hover state is unchanged (both light up to 1 via the
     .tz-brand-group:hover rules). */
  opacity: 0.25;
  transition: opacity 0.5s ease;
}
.tz-mode-pill:hover { opacity: 1; }
.tz-mode-pill-text {
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
}

/* Sign-up CTA — standalone fixed top-right. Brand "Models section
   accent" colour (#2d69c6) from admin Design Settings. */
.tz-signup-btn {
  position: fixed;
  top: 36px;
  right: 40px;
  z-index: 9999999;
  cursor: pointer;
  /* Tony 2026-05-29: locked dimensions — 70x36 on desktop. Padding
     unset so the box-model exactly matches the spec; flex centering
     keeps the "Signup" label optically centred. */
  width: 70px;
  height: 36px;
  padding: 0;
  background: #2d69c6;
  color: #fff;
  border: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.tz-signup-btn:hover {
  background: #3a7bd9;
  transform: translateY(-1px);
}

/* ── Nametag (mid-left, vertically centered) ── */
.tz-nametag {
  position: fixed;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  margin-left: 40px;
}
.tz-nametag img {
  opacity: 0.95;
  filter: brightness(1.1);
  height: 62px;
  width: 180px;
}

/* ── Bottom area: chat-style row ── */
.tz-bottom-area {
  position: fixed;
  /* Tony 2026-05-29: gap msg-bubble->msg-box AND msg-box->viewport bottom
     locked to 30px on desktop so the breathing room above and below the
     input box is symmetric. */
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  /* 50% of the viewport width (Oli's sample), clamped so it never gets
     unusably narrow or sprawls on ultra-wide monitors. */
  width: 50%;
  max-width: 1000px;
  min-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Chat message row — number circle + speech bubble (small 4px gap),
   skip button pushed to the far right (margin-left:auto), like
   onboarding's space-between counter row. */
.tz-msg-row {
  display: flex;
  align-items: center;
  gap: 4px;
  animation: tz-msg-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Number badge — brand-blue circle (#2d69c6 = --gg-primary-btn) with a
   circular progress ring that fills as the visitor advances. Fixed size
   so it stays a true circle even when the question wraps. Click no-op. */
/* Number + bubble segments — 4px gap between them, each rounded on its
   outer corners (12px). Matches the onboarding question counter
   (.div-block-133 gap:4px) — the gap is the separator, no border line. */
.tz-msg-pill {
  display: flex;
  align-items: stretch;
  /* Tony 2026-05-29 (later): 4px -> 1px so the number + question read as
     one tight unit instead of two segments with a visible separator. */
  gap: 1px;
  /* Tony 2026-05-29: locked height. The two children (num + bubble) flex
     to fill via align-items:stretch on this row; height set here keeps
     the pill a consistent 47px even when the question wraps. */
  height: 47px;
}
.tz-msg-num {
  position: relative;
  width: 44px;
  border-radius: 12px 0 0 12px;
  background: #2d69c6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
.tz-msg-num-text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  /* Tony 2026-05-29: +2px (was 13px). */
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Fixed-size ring centred in the pill (the pill itself is taller than
   wide once a question wraps, so the ring can't use inset:0). */
.tz-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* -90deg so the fill grows clockwise from 12 o'clock. */
  transform: translate(-50%, -50%) rotate(-90deg);
}
.tz-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2.5;
}
.tz-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Speech bubble — brand blue (#2d69c6), fully rounded. Separate from
   the number circle with the 4px row gap. */
.tz-msg-bubble {
  background: #2d69c6;
  color: #fff;
  /* Tony 2026-05-29: vertical padding dropped to 0 so the 47px pill
     height stays exact; flex `align-items: center` already vertically
     centres the question text inside the bubble. */
  padding: 0 16px;
  border-radius: 0 12px 12px 0;
  /* Tony 2026-05-29: +2px (was 14px). */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  max-width: min(70vw, 640px);
  display: flex;
  align-items: center;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.tz-msg-text { display: block; }

/* Skip button — onboarding's .go-onboarding-skip-btn-single: white-
   bordered box with the GO-OB-Skip.svg glyph. margin-left:auto pushes
   it to the far RIGHT of the row, matching onboarding's layout. */
.tz-msg-next {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 9px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-left: auto;
  padding: 5px 9px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.5s cubic-bezier(.25, .46, .45, .94);
  flex-shrink: 0;
}
.tz-msg-next:hover { opacity: 0.9; }
.tz-msg-next img { height: 10px; }
.tz-msg-next:disabled { opacity: 0.2; cursor: not-allowed; }

@keyframes tz-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Message box — copied from onboarding's .ob-input-wrap ──
   Tall frosted panel, green text + caret, icon row pinned bottom-right. */
.tz-input-row {
  display: flex;
  align-items: flex-end;
  width: 100%;
  transition: opacity 0.4s ease;
}
.tz-input-row.tz-input-locked {
  opacity: 0.4;
  pointer-events: none;
}

.tz-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border: 0;
  border-radius: 20px;
  padding: 14px 16px 12px 22px;
  min-height: 90px;
}

.tz-input {
  width: 100%;
  display: block;
  background: transparent;
  border: none;
  outline: none;
  color: #06ffac;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  resize: none;
  max-height: 240px;
  min-height: 24px;
  overflow-y: auto;
  caret-color: #06ffac;
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 255, 172, 0.35) transparent;
}
.tz-input::-webkit-scrollbar { width: 6px; }
.tz-input::-webkit-scrollbar-thumb { background: rgba(6, 255, 172, 0.35); border-radius: 3px; }
.tz-input::-webkit-scrollbar-track { background: transparent; }
.tz-input::placeholder { color: rgba(6, 255, 172, 0.4); }

.tz-input-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.tz-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease, background 0.2s ease;
  padding: 0;
}
.tz-icon-btn:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.6);
}
.tz-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.tz-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Send button — circular border + GO-Post.svg icon via background-image,
   matching the Webflow reference. Empty <button> markup, icon and
   styling all live here. */
/* 2026-05-27: matches the EFFECTIVE private-chat rule
   (.gg-chat-icons .submit-button !important block). The SVG IS the
   visible element — no surrounding container/border. 32x32 transparent
   wrapper, 18px white SVG centered, filter forces pure white. */
.tz-send-btn {
  background-image: url('../images/GO-Post.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 18px;
  background-color: transparent;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  opacity: 0.25;
  filter: saturate(0%) brightness(200%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tz-send-btn:hover:not(:disabled) {
  opacity: 1;
}

/* ── Inline signup panel (fades in after the last question) ──
   Styling mirrors the webflow `.signup_details-orientation` reference:
   right-aligned, vertically centred, light-tint frosted card. --gg-primary-btn
   = #2d69c6 (admin Design Settings "Models section accent"). */
.tz-signup-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 80px;
  /* Tony 2026-05-29: slide-from-right animation. Backdrop-filter elements
     (.tz-signup-card has blur(100px)) read funny when only opacity is
     animated, so we keep opacity at 1 and translate the panel itself off
     to the right when hidden. Visibility flip is delayed by the
     transition duration so pointer-events catch correctly on the way out.
     Duration: 2000ms ease-out per spec. */
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 2s ease-out, visibility 0s linear 2s;
}
.tz-signup-panel.is-visible {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  /* On the way IN, flip visibility immediately so the panel starts the
     transform animation from off-screen. */
  transition: transform 2s ease-out, visibility 0s linear 0s;
}

.tz-signup-card {
  width: 270px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border-radius: 20px;
  padding: 24px;
  /* Tony 2026-05-29: drop shadow removed per spec - the frosted card
     reads cleaner without it against the dimmed video backdrop. */
}

/* Tony 2026-05-29: when the signup panel is showing, fade out the
   standalone Signup CTA in the top-right corner. They serve the same
   purpose at that point (the panel IS the signup), and the CTA was
   competing for attention. body.tz-signup-shown is set by JS at the
   same time .is-visible is toggled on the panel. */
body.tz-signup-shown .tz-signup-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.tz-signup-btn {
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.6s ease;
}

.tz-signup-title {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
  /* Tony 2026-05-29: 2px -> 20px so there's a 20px gap between the
     "Join me" title and the "Start a relationship..." sub. */
  margin-bottom: 20px;
}
.tz-signup-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

.tz-signup-form { display: flex; flex-direction: column; }

.tz-field { margin-bottom: 0; }
.tz-field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 16px 2px;
  outline: none;
  transition: border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tz-field input::placeholder { color: rgba(255, 255, 255, 0.5); }
.tz-field input:focus { border-bottom-color: #2d69c6; }

.tz-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Tony 2026-05-29: applies to BOTH .tz-check (age + terms). Adjacent
     pair (.tz-check + .tz-check) overrides this to the tighter spacing
     below — see the next rule. So:
       password -> age   = 20px (this margin-top)
       age      -> terms = 7px  (current 12 - 5, via the + selector) */
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  cursor: pointer;
}
/* Adjacent-sibling override so only the SECOND checkbox uses the
   tighter spacing; the first one keeps the 20px breathing room above. */
.tz-check + .tz-check { margin-top: 7px; }
.tz-check input {
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #2d69c6;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.tz-check a { color: #fff; text-decoration: underline; }

.tz-signup-error {
  display: none;
  margin-top: 12px;
  font-size: 12px;
  color: #ff6b7a;
  line-height: 1.45;
}
.tz-signup-error.is-visible { display: block; }

.tz-signup-submit {
  /* Tony 2026-05-29: 14px -> 20px so there's a 20px gap between the
     "I agree" checkbox row and the Signup button. */
  margin-top: 20px;
  width: 100%;
  padding: 15px 16px;
  background: #2d69c6;
  color: #fff;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.5s, transform 0.15s ease;
}
.tz-signup-submit:hover:not(:disabled) {
  background: #3a7bd9;
  transform: translateY(-1px);
}
.tz-signup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Loading overlay (triple-dot, same hybrid timer as onboarding) ── */
.tz-overlay-loading {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tz-overlay-loading.is-dismissed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
/* Once the video is ready, fade the loading dots — the cursor-follower
   pill ("Start Orientation") becomes the affordance to tap. */
.tz-overlay-loading.is-ready .tz-tdot-row {
  opacity: 0;
  transition: opacity 280ms ease-out;
}
/* Unicorn splash: hidden (opacity 0) while the triple dots load,
   revealed only once ready — the two never show at once. WebGL still
   initialises behind opacity:0 so the reveal is instant. */
.tz-overlay-loading .gg-unicorn-splash {
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.tz-overlay-loading.is-ready .gg-unicorn-splash {
  opacity: 1;
}

/* Cursor-follower pill — floats by the mouse over the loading overlay
   (desktop). Mirrors the chat's #cursor: fixed, pointer-events:none,
   white-bordered pill. JS sets transform + opacity. */
.tz-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 160ms linear;
  border: 2px solid #fff;
  border-radius: 9px;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tz-cursor-text {
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}

.tz-tdot-row { display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: opacity 280ms ease-out; }
/* Loading dots sit above the Unicorn Studio splash (z-index 0). */
.tz-overlay-loading .tz-tdot-row { position: relative; z-index: 1; }
.tz-tdot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center bottom;
  animation: tz-tdot-bounce 1.2s ease-in-out infinite;
}
.tz-tdot:nth-child(1) { animation-delay: 0s;    }
.tz-tdot:nth-child(2) { animation-delay: 0.18s; }
.tz-tdot:nth-child(3) { animation-delay: 0.36s; }

@keyframes tz-tdot-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-7px); opacity: 1;    }
}

.tz-inline-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 95;
  padding: 12px 18px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.tz-inline-loader.is-visible { opacity: 1; }
.tz-inline-loader .tz-tdot { width: 7px; height: 7px; }

.tz-entrance-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Staggered fade + slide-in for the top chrome (logo / Orientation
   pill / Signup). revealElement() handles the opacity fade; this
   keyframe adds the slide. translateY only — these elements have no
   positioning transform, so it's safe. */
@keyframes tz-slide-in {
  from { transform: translateY(-12px); }
  to   { transform: translateY(0); }
}
.tz-slide-in { animation: tz-slide-in 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

/* Background dim applied while idle between question videos. 2026-05-27:
   0.42 -> 0.50 -> 0.75 over Tony's iteration. Less aggressive dim so
   the avatar stays clearly visible when it's the user's turn to type.
   JS removes this class the moment the next video plays so the talking
   state is full brightness (see teaser-desktop.js:260). */
.tz-bg-dimmed video { filter: brightness(0.75); }

.tz-empty {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  text-align: center;
  padding: 0 24px;
}
.tz-empty h1 { font-size: 22px; font-weight: 600; }
.tz-empty p  { font-size: 14px; color: rgba(255, 255, 255, 0.55); max-width: 420px; line-height: 1.6; }
/* In-form CTA variant: this button uses both .tz-signup-btn AND
   .tz-signup-btn-cta. The base class is now hard-locked to 70x36 for the
   top-right corner button; unset that here so the in-form CTA can size
   naturally from its padding (it sits inside the signup panel and needs
   to fit a wider label, not the fixed 70px corner box). */
.tz-signup-btn-cta {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  margin-top: 12px;
  padding: 12px 22px;
  font-size: 15px;
}

/* ── Action-alert popup — copied 1:1 from action-alerts.css so the
   teaser shows the same top-right notification the auth chat does.
   The auth system is websocket-driven and @auth-only; the teaser
   renders it client-side (see showActionAlert in teaser-desktop.js). ── */
.action-alert-container {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 2147483647;
  pointer-events: none;
}
.action-alert-panel {
  background-color: #000;
  border: 2px solid #ffffff1a;
  border-radius: 20px;
  width: 130px;
  height: 165px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(120%) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.22, 1.2, .36, 1);
}
.action-alert-panel.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.action-alert-panel.is-leaving {
  opacity: 0;
  transform: translateX(120%) scale(0.96);
}
.action-alert-media {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
}
.action-alert-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.action-alert-text {
  color: #fff;
  text-align: center;
  margin-top: 5px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  line-height: 16px;
}
.action-alert-dot {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 100px;
  background-color: #f2a66f;
}