/*
 * The floating "แจ้งปัญหา" bubble from feedback-bubble.js.
 *
 * Bottom-right and above everything except the notice banner and a modal: it must be reachable
 * while a learner is stuck, which is when it is worth having, but it must never cover the control
 * a learner is trying to press. The exam pages carry a fixed bottom bar, so it sits clear of it.
 */
.ielts-bubble {
  position: fixed;
  z-index: 9500;
  right: 20px;
  /*
   * Clear of the exam pages' fixed bottom bar, and of a phone's home indicator. The bar declares its
   * own height, so read it rather than guess: a hard 84px put the bubble 28px INTO a 112px bar on a
   * 390px screen — measured, not assumed. The fallback is for the pages that have no bar at all.
   */
  bottom: calc(var(--exam-bottom-nav, 68px) + 16px + env(safe-area-inset-bottom, 0px));
  /*
   * Anchored to the edge itself and held off it by the transform, so that collapsing is one
   * movement along one axis: `right` stays put and only the transform changes.
   */
  right: 0;
  transform: translateX(-18px);
  transition: transform .24s cubic-bezier(.2, .7, .3, 1);
}

/*
 * The resting state. Slid off to the right until 38px of the badge is left against the edge — enough
 * to be recognised as the LINE mark and to be a touch target, not enough to sit over the page.
 *
 * A fixed box pushed past the viewport does not add to scrollable overflow, so this cannot give the
 * page a horizontal scrollbar.
 */
.ielts-bubble.is-collapsed { transform: translateX(calc(100% - 38px)); }
.ielts-bubble.is-collapsed .ielts-bubble-link { box-shadow: -3px 4px 16px rgba(11, 27, 68, .22); }
.ielts-bubble.is-collapsed .ielts-bubble-link span { opacity: 0; }

.ielts-bubble-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 10px;
  border-radius: 999px;
  /* White, because the badge is already a finished green tile. Green on green reads as a rendering
     fault when the two greens are one step apart, which #06C755 and the badge's #00C300 are. */
  background: #fff;
  color: #17224a;
  font: 700 14px/1 Inter, 'Noto Sans Thai', Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(11, 27, 68, .26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ielts-bubble-link img { width: 24px; height: 24px; flex: none; display: block; }
/* Fades rather than vanishing, so the pill does not snap width part-way through the slide. */
.ielts-bubble-link span { transition: opacity .14s ease; }
.ielts-bubble-link:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11, 27, 68, .32); }
.ielts-bubble-link:active { transform: translateY(0); }
.ielts-bubble-link:focus-visible { outline: 3px solid #06c755; outline-offset: 3px; }


/* Room is scarce on a phone and the label is not what identifies it — the badge is. Collapses to a
   circle, keeping the accessible name on the anchor itself. */
@media (max-width: 560px) {
  .ielts-bubble { transform: translateX(-12px); }
  .ielts-bubble-link { padding: 10px; }
  .ielts-bubble-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Still collapses — it just arrives there without the slide. */
  .ielts-bubble, .ielts-bubble-link, .ielts-bubble-link span { transition: none; }
  .ielts-bubble-link:hover { transform: none; }
}