/* =====================================================================
   Floating chrome layout
   ---------------------------------------------------------------------
   Five independently-authored widgets are pinned to the viewport on every
   page: the cookie consent bar, the AI chatbot, the scroll-to-top button,
   the language switcher and the Twitch live card. Each was positioned in
   isolation, so they overlapped: the chatbot covered the consent text,
   the scroll-to-top button sat behind the consent bar (z-index 99 vs
   1000) and was unreachable, and the Twitch card ran into the flags.

   This file is the single place that arranges them. Loaded from
   footer.ejs after chatbot.css so it wins on source order.

   Layout, bottom-up:
     bottom edge  cookie consent bar (full width)
     bottom-right chatbot
     bottom-left  scroll-to-top
     right        language flags, clear of the chatbot
     right, above Twitch card, bottom-anchored above the flags

   --chrome-cookie-offset is set by site-shell.js to the consent bar's
   measured height while it is on screen, and 0 once dismissed, so every
   widget lifts and settles together.
   ===================================================================== */

:root {
  --chrome-cookie-offset: 0px;
}

/* Chatbot — clears the consent bar instead of covering it. */
.wyd-chatbot {
  bottom: calc(24px + var(--chrome-cookie-offset));
  transition: bottom 0.25s ease;
}

/* Scroll-to-top — moved to the bottom-left. The bottom-right corner is
   occupied by the chatbot, whose 430px-wide bar swallowed this button
   both horizontally and in stacking order. */
.scroll__top {
  right: auto;
  left: 24px;
}

.scroll__top.open {
  bottom: calc(30px + var(--chrome-cookie-offset));
}

@media (max-width: 767.98px) {
  .scroll__top {
    left: 16px;
  }

  .scroll__top.open {
    bottom: calc(20px + var(--chrome-cookie-offset));
  }
}

/* Language switcher — the ID selector in main.css beats a class here, so
   match on the ID to take over positioning. */
#floating-lang-switcher {
  bottom: calc(100px + var(--chrome-cookie-offset));
  transition: bottom 0.25s ease;
}

/* Twitch card — bottom-anchored so it stacks above the flags rather than
   growing down into them. Smaller breakpoints already anchor from the
   bottom in main.css; those values just gain the consent offset. */
.twitch-card {
  top: auto;
  bottom: calc(210px + var(--chrome-cookie-offset));
}

@media (max-width: 1199.98px) {
  .twitch-card {
    bottom: calc(220px + var(--chrome-cookie-offset));
  }
}

@media (max-width: 767.98px) {
  .twitch-card {
    bottom: calc(190px + var(--chrome-cookie-offset));
  }
}

/* A collapsed Twitch card is short, so it can sit closer to the stack. */
.twitch-card.collapsed {
  bottom: calc(150px + var(--chrome-cookie-offset));
}

@media (prefers-reduced-motion: reduce) {
  .wyd-chatbot,
  #floating-lang-switcher {
    transition: none;
  }
}