/*
 * Mobile and overflow fixes. render-page.ts links this after the hashed bundles under /assets/seo/css/,
 * which are cached as immutable and carry their own copy of the voice orb styles, so corrections land here.
 * Rules are the same specificity as the bundle's (or one step higher) and win by coming later.
 */

/* Backstop only. The causes of horizontal overflow are fixed where they happen, below. clip (unlike hidden)
   does not create a scroll container, so sticky headers keep working. */
html,
body {
  overflow-x: clip;
}

/* ---------- Voice orb: overflow ---------- */

/* The filament texture and the conic ring rotate. A rotating square has a larger layout box than its circle,
   which pushed the page 3-6px wider than the screen. Clip to the orb (2px of margin keeps the 1px outer ring). */
#hubbly-voice-assistant .hubbly-orb-breath {
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 2px;
}

/* In the docked mini orb the labels are visually hidden in a 1px box. With nowrap their text ran far to the
   right of the viewport (a span at right=446px). Let it wrap inside the box instead. */
#hubbly-voice-assistant[data-placement="dock"] .hubbly-voice-invitation,
#hubbly-voice-assistant[data-placement="dock"] .hubbly-voice-launch-label,
#hubbly-voice-assistant[data-placement="dock"] .hubbly-voice-kind,
#hubbly-voice-assistant[data-placement="dock"] .hubbly-voice-launch-status {
  max-width: 1px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ---------- Voice orb: artwork and boot ---------- */

/* The filament image is attached only after load/idle (voice-orb-boot.js adds html.hubbly-orb-art). The bundled
   copies of voice-orb.css name the image directly, so they are neutralised here first. */
html.hubbly-orb-defer:not(.hubbly-orb-art) #hubbly-voice-assistant .hubbly-orb-texture { background-image: none; }
html.hubbly-orb-defer.hubbly-orb-art #hubbly-voice-assistant .hubbly-orb-texture { background-image: url("/assets/hubbly-orb-filament.webp"); }

/* Before voice-orb.mjs has loaded, the orb button is shown in the bottom-right corner. */
#hubbly-voice-assistant[data-boot="pending"][data-placement="dock"] {
  left: auto;
  top: auto;
  right: 16px;
  bottom: 16px;
}

/* ---------- Voice orb: mobile ---------- */

@media (max-width: 768px) {
  /* The mini orb sits bottom-right on every page. voice-placement.mjs positions it; keep it above the home
     indicator on notched phones. */
  #hubbly-voice-assistant[data-placement="dock"]:not([data-expanded="true"]) {
    translate: 0 calc(-1 * env(safe-area-inset-bottom, 0px));
  }

  /* Open panel = bottom sheet. It is anchored to the bottom of the visible viewport and capped so the site
     header stays uncovered (--voice-sheet-max is the visible height minus the header). */
  #hubbly-voice-assistant[data-placement="dock"][data-sheet="true"][data-expanded="true"] {
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--voice-sheet-bottom, 0px);
    width: 100%;
    height: auto;
    max-height: var(--voice-sheet-max, calc(100dvh - 72px));
    translate: none;
    z-index: 90;
    pointer-events: none;
  }
  #hubbly-voice-assistant[data-placement="dock"][data-sheet="true"][data-expanded="true"] .hubbly-voice-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    width: 100%;
    max-height: inherit;
  }
  #hubbly-voice-assistant[data-placement="dock"][data-sheet="true"][data-expanded="true"] .hubbly-voice-launch {
    flex: 0 0 64px;
    margin: 0 max(16px, env(safe-area-inset-right)) 8px 0;
    pointer-events: auto;
  }
  #hubbly-voice-assistant[data-placement="dock"][data-sheet="true"][data-expanded="true"] .hubbly-voice-panel {
    position: static;
    width: 100%;
    max-height: calc(var(--voice-sheet-max, calc(100dvh - 72px)) - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    background: rgba(12, 12, 11, .98);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
    pointer-events: auto;
  }
  /* A 300px Turnstile widget never fits the panel; a compact one is 150px. This is the backstop. */
  #hubbly-voice-assistant [data-voice-turnstile] { max-width: 100%; overflow-x: clip; }
  #hubbly-voice-assistant .hubbly-voice-tooltip { font-size: 11px; }
}

/* ---------- Layout overflow at 375px ---------- */

@media (max-width: 850px) {
  /* /explore: the platform heading is nowrap, and a 1fr track grows to its min-content (383px in a 375px page). */
  .platform { grid-template-columns: minmax(0, 1fr); }
  .platform-copy { min-width: 0; }
}

/* ---------- Text labels: at least 11px (12px for running notes) ---------- */

/* The bundle sets these labels to 8-10px in its own 600px and 700px queries, with two or three classes of
   specificity, so the floor uses !important. Every selector below was measured below 11px at 375px; none
   of them is a place where the site intentionally sets something larger on mobile. */

@media (max-width: 850px) {
  body .announcement span,
  body .eyebrow,
  body .aeo-descriptor,
  body .chapter-kicker,
  body .chapter-kicker span,
  body .button,
  body .header-cta,
  body .booking-email,
  body .footer-links h3,
  body .footer-bottom a,
  body .footer-bottom span,
  body .hero-footer a,
  body .hero-footer span,
  body .inner-hero-footer span,
  body .voice-hero-footer span,
  body .related-grid a span,
  body .legal-aside span,
  body .platform-points span,
  body .image-caption,
  body .stage-index,
  body .step-meta,
  body .step-number,
  body .product-card-index,
  body .product-card-cue span,
  body .story-topline span,
  body .story-beat-index,
  body .voice-lane-index,
  body .voice-lane-grid li,
  body .voice-clock p,
  body .voice-clock span,
  body .voice-flow-track strong,
  body .voice-recovery-visual span,
  body .voice-steps-grid li span,
  body .voice-handoff-grid span,
  body .why-details .why-item span,
  body .journey-tail span,
  body .journey-tail i,
  body .motion-label,
  body .console-topline span,
  body .connection-external,
  body .connection-pending,
  body .scan-handoff label,
  body .roi-group legend,
  body .roi-advanced summary,
  body .roi-math summary,
  body .roi-heading-grid span,
  body .roi-number span,
  body .roi-primary span,
  body .roi-results-top span,
  body .roi-metrics span,
  body .roi-return span {
    font-size: 11px !important;
  }

  body .scan-field-help,
  body .roi-disclaimer,
  body .source-note,
  body .external-note,
  body .voice-external-note,
  body .story-caption,
  body .voice-flow-foot p,
  body .voice-team-figure figcaption {
    font-size: 12px !important;
  }
}

/* ---------- Tap targets: 44px ---------- */

@media (max-width: 850px) {
  body .footer-brand .brand,
  body .legal-aside a,
  body .legal-hero nav ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links inside a sentence keep their line; vertical padding extends the tap area to 44px. */
  body .scan-consent a,
  body .legal-content p a {
    padding-block: 13px;
  }
}

/* ---------- /explore ROI sliders: larger thumbs and hit areas ---------- */

@media (max-width: 850px) {
  /* The track is the input's own gradient background. Keep it 4px tall in the middle of a 44px-high input. */
  .roi-field input[type=range] {
    height: 44px;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 50%;
    touch-action: pan-y;
  }
  .roi-field input[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
  }
  .roi-field input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
  }
}