/* Responsive overrides (load after styles.css) moved out of index.html inline <style> */

@media (max-width: 600px) {
      .pdf-actions {
        grid-template-columns: 1fr;
      }
    }

/* Mobile specific style optimizations */
    @media (max-width: 600px) {
      [data-view="portal"],
      [data-view="verify"],
      [data-view="generator"],
      [data-view="recovery"],
      [data-view="final-gift"],
      [data-view="failure"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-y: auto !important;
        padding: 32px 16px !important;
        position: absolute !important;
        min-height: 100% !important;
      }
      
      [data-view="portal"] > *,
      [data-view="verify"] > *,
      [data-view="generator"] > *,
      [data-view="recovery"] > *,
      [data-view="final-gift"] > *,
      [data-view="failure"] > * {
        margin: auto 0 !important;
        flex-shrink: 0;
      }

      .portal-card, .verify-shell, .final-card, .desktop-dialog, .recovery-console, .unlock-shell {
        padding: 24px 16px !important;
        border-radius: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      
      .recovery-console {
        height: clamp(340px, 62svh, 540px) !important;
        font-size: 0.82rem !important;
      }
      
      #recoveryLog {
        gap: 8px !important;
      }

      .portal-grid h1 {
        font-size: 3.8rem !important;
      }
      .portal-grid h2 {
        font-size: 1.35rem !important;
      }
      .dialog-body {
        padding: 16px 10px !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }
      .dialog-body h2 {
        font-size: 1.8rem !important;
      }
      dl {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      .timeline-header h2, .gallery-view h2 {
        font-size: 2.2rem !important;
      }
      .birthday-copy h2 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
      }
      .photo-card {
        width: 190px !important;
      }
      .audio-control-floating {
        top: 16px !important;
        right: 16px !important;
      }
      .terminal-title {
        font-size: 0.72rem !important;
      }
      .cake {
        right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        transform: scale(0.8) !important;
        transform-origin: bottom right !important;
      }
    }

/* Heavy mobile + touch optimization (she will open this on her phone) */
    @media (max-width: 768px) {
      .birthday-scroll-container,
      .timeline-view,
      .gallery-view,
      .recovery-console,
      .final-gift-view,
      .final-card-view,
      [data-view] {
        -webkit-overflow-scrolling: touch;
      }

      /* Lighter glass blur keeps low/mid phones smooth */
      .glass,
      .generator-window,
      #pdfDownloadStage,
      #decryptionStage {
        backdrop-filter: blur(16px) saturate(1.1) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
      }

      /* No hover on touch, so the volume slider stays open and reachable */
      .audio-control-floating {
        top: calc(14px + env(safe-area-inset-top)) !important;
        right: calc(14px + env(safe-area-inset-right)) !important;
        padding: 8px 14px !important;
      }
      .audio-slider-container {
        width: 64px !important;
      }

      /* Two-up photo album reads better than one giant column on a phone */
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }
      .gallery-grid figure {
        border-radius: 18px !important;
      }

      /* Thumb-friendly full-width CTA above the home indicator */
      .button.floating {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        transform: none !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        min-height: 54px !important;
        font-size: 1.05rem !important;
        box-shadow: 0 14px 40px rgba(17, 19, 24, 0.42) !important;
      }
      .button.floating:hover {
        transform: none !important;
      }
      .button.floating:active {
        transform: scale(0.98) !important;
      }

      .button {
        min-height: 52px;
      }

      /* Roomier strip cards and gentler vertical rhythm */
      .cinematic-strip {
        gap: 14px !important;
        padding: 22px 6vw 96px !important;
      }
      .photo-card figcaption {
        font-size: 0.92rem !important;
        padding: 10px !important;
      }
    }

/* On a phone the card IS the screen: full-bleed panel that fills the
       viewport height, content vertically centered, keyboard-aware. No floating
       box, no outer scroll. The decryption (system lock) panel matches. */
    @media (max-width: 768px) {
      /* Full-bleed on phones. Height/position come from the all-widths rule
         below; here we just kill the outer padding and let the card stretch. */
      [data-view="portal"],
      [data-view="verify"],
      [data-view="final-gift"] {
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: center !important;
      }

      .portal-card,
      .verify-shell {
        display: flex !important;
      }

      .portal-card,
      .verify-shell,
      .unlock-shell {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding:
          max(22px, calc(env(safe-area-inset-top) + 14px))
          20px
          max(22px, calc(env(safe-area-inset-bottom) + 14px)) !important;
      }

      .portal-card .brand-row,
      .verify-shell .brand-row,
      .unlock-shell .brand-row {
        margin-bottom: 18px !important;
        font-size: 0.8rem;
      }

      .portal-grid {
        gap: 10px !important;
      }
      .portal-grid h1 {
        font-size: 4.4rem !important;
        line-height: 0.9 !important;
      }
      .portal-grid h2 {
        font-size: 1.55rem !important;
      }
      .portal-grid .button.primary {
        width: 100%;
        min-height: 54px;
        margin-top: 6px;
        font-size: 1.05rem;
      }
      .package-line {
        margin: 20px 0 14px !important;
        padding: 14px !important;
        gap: 12px !important;
      }
      .package-line span {
        font-size: 0.82rem;
        line-height: 1.4;
      }
      .fine-print {
        margin-top: 12px !important;
        font-size: 0.76rem !important;
      }
      .verification-steps {
        margin: 18px 0 !important;
        gap: 12px !important;
      }
      .answer-form {
        margin-top: 18px !important;
      }
      .answer-form label {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3;
      }
      .unlock-shell p {
        font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
      }

      /* Stacked field + button: keep the input at its real height. In a column
         flex row, flex:1 collapses the field-basis to 0 and squishes it. */
      .answer-row {
        flex-direction: column !important;
        gap: 12px !important;
      }
      .answer-row .field-input {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 54px !important;
      }
      .answer-row .button {
        width: 100% !important;
        min-height: 54px !important;
      }
    }

/* Touch devices: neutralize sticky hover shadow on the primary CTA */
    @media (hover: none) {
      .button.primary:hover {
        box-shadow: 0 18px 45px rgba(17, 19, 24, 0.24);
      }
    }

/* Keyboard-aware sizing for the input screens on every device and browser
   (Samsung Chrome, Samsung Internet, iPhone/iPad Safari). JS keeps
   --app-height/--app-top in sync with the visual viewport, so the view always
   overlays exactly the visible area: opening the keyboard slides the content up
   rather than covering the input, and the page never scrolls. Applied at all
   widths so iPad Safari gets it too, not just phones. Loads after the @media
   blocks above so it wins over their position rules. */
[data-view="portal"],
[data-view="verify"],
[data-view="final-gift"] {
  position: fixed !important;
  top: var(--app-top, 0) !important;
  bottom: auto !important;
  height: var(--app-height, 100svh) !important;
  min-height: 0 !important;
}