/* Mobile cookie banner compaction (Codex audit Phase 2 Item #17).
 *
 * Termly's default banner is bottom-fixed and ~358px tall on mobile because
 * its three buttons (Accept / Decline / Preferences) stack vertically
 * (column-reverse). At 390x844 that's 42% of the viewport — the hero
 * "Start free →" CTA at vy=553 is hidden behind the banner top edge
 * at vy=486.
 *
 * This file:
 *   1. Caps the banner at 160px max-height on viewports <=768px and
 *      forces overflow-y:auto so any content longer than 160px scrolls
 *      inside the banner instead of pushing the visible area higher.
 *   2. Forces the button row to flex-direction:row so Accept/Decline
 *      sit inline (saves ~120px vs the default column-reverse).
 *   3. Tightens internal padding/gap to maximize the readable message
 *      area inside the cap.
 *   4. Bumps the support-chat floating button up enough to clear the
 *      capped banner so it stays clickable.
 *
 * Selectors target Termly's stable `.t-consentPrompt` hook plus their
 * hash-suffixed `termly-styles-{section}-XXXXXX` pattern. Selectors with
 * hash-style suffix matching (`[class*="termly-styles-buttons-"]`) are
 * resilient to Termly version bumps because the prefix portion is stable.
 *
 * Desktop (>768px) is intentionally untouched — banner there is already
 * a slim bottom strip and not blocking any CTA.
 *
 * Verification: at 390x844 with this CSS active, the banner caps at
 * 160px, the hero "Start free →" CTA at vy=553-606 is fully visible
 * with ~78px of clearance, and the support-chat button stays clickable
 * at bottom:184px (just above the banner top edge at vy=684).
 */

@media (max-width: 768px) {
  /* Banner root — cap height, ensure bottom-anchored, allow internal
     scroll if Termly's content runs longer than the cap. !important is
     required because Termly inlines styles via its injected stylesheet
     with high specificity. */
  .t-consentPrompt,
  [class*="termly-styles-termly-banner-"] {
    max-height: 160px !important;
    overflow-y: auto !important;
    bottom: 0 !important;
    top: auto !important;
  }

  /* Inline the button row so Accept / Decline / Preferences sit
     side-by-side instead of column-reverse stacking. */
  [class*="termly-styles-buttons-"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 0 !important;
  }

  /* Compress button padding to keep the inline row from wrapping
     awkwardly on narrow viewports. */
  [class*="termly-styles-buttons-"] [class*="termly-styles-module-root-"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Tighten the message + content padding to reclaim vertical space
     for the (now visible) message text within the 160px cap. */
  [class*="termly-styles-content-"] {
    padding: 12px !important;
    gap: 8px !important;
  }
  [class*="termly-styles-message-"] {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Support-chat floating button (public/support-chat.js sets
     bottom:88px on mobile). Bump higher so it sits above the
     capped 160px banner with a small visible gap. Banner top
     is at viewport_h - 160; chat button at bottom:184px gives
     ~24px of clearance above the banner top edge.

     The chat button stylesheet is injected by support-chat.js
     after this stylesheet loads, but our @media block has equal
     specificity AND wins on source order because support-chat.js
     loads asynchronously. Test post-deploy and bump !important
     here if Termly's z-index:999999 visually obscures the button. */
  #ob-chat-btn {
    bottom: 184px !important;
  }
}