/* WizardUx Mobile Optimizations
 * ALL mobile styles are contained within media queries
 *
 * CRITICAL: These styles ONLY apply on screens <= 640px
 * Desktop styles are NEVER affected by anything in this file
 *
 * Key mobile optimizations:
 * - Full-screen modal (100vw x 100dvh)
 * - Safe area support for iPhone notch/home indicator
 * - Touch-friendly button sizing (44px minimum)
 * - Compact header and footer
 * - Campfire chat pattern preserved
 */

/* ==========================================================================
   MOBILE BREAKPOINT (max-width: 640px)
   ========================================================================== */

@media (max-width: 640px) {

  /* --------------------------------------------------------------------------
     MODAL CONTAINER - True Full-Screen
     -------------------------------------------------------------------------- */

  .wizard-modal {
    width: 100vw;
    height: 100dvh;           /* Dynamic viewport height - adapts to mobile browser chrome */
    max-width: 100%;
    max-height: none;
    border-radius: 0;
    border: none;

    /* Safe area support for iPhone notch and home indicator */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .wizard-modal__inner {
    height: 100%;
  }

  /* --------------------------------------------------------------------------
     HEADER - Compact
     -------------------------------------------------------------------------- */

  .wizard-modal__header {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
  }

  .wizard-modal__title {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .wizard-modal__step-counter {
    font-size: 0.75rem;
  }

  .wizard-modal__meta {
    gap: calc(var(--wizard-spacing-block) / 4);
    margin-block-end: calc(var(--wizard-spacing-block) / 4);
  }

  /* --------------------------------------------------------------------------
     FOOTER - Safe Area + Touch-Friendly Buttons
     -------------------------------------------------------------------------- */

  .wizard-modal__footer {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
    /* Additional padding at bottom for safe area */
    padding-bottom: calc(var(--wizard-spacing-half) + env(safe-area-inset-bottom));
    min-height: 60px;
  }

  .wizard-modal__footer-inner {
    flex-wrap: wrap;
    gap: var(--wizard-spacing-half);
  }

  /* Touch-friendly button sizing - 44px minimum per Apple HIG */
  .wizard-modal__footer .btn {
    min-height: 44px;
    padding-block: 0.6em;
  }

  .wizard-modal__footer .wizard-btn--circle,
  .wizard-modal__footer .btn--circle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Hide verbose skip messages on mobile to save space */
  .wizard-modal__skip-message {
    display: none;
  }

  /* --------------------------------------------------------------------------
     CONTENT AREA - Flexible with Touch Scrolling
     -------------------------------------------------------------------------- */

  .wizard-modal__content {
    padding-inline: var(--wizard-spacing-inline);
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Compact padding for nested elements */
  .wizard-modal__content .pad {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
  }

  /* --------------------------------------------------------------------------
     WELCOME STEP
     -------------------------------------------------------------------------- */

  .wizard-welcome__image {
    max-height: 35vh;
    object-fit: cover;
  }

  .wizard-welcome__headline {
    font-size: 1.4rem;
  }

  /* --------------------------------------------------------------------------
     VIDEO STEP
     -------------------------------------------------------------------------- */

  .wizard-video__headline {
    font-size: 1.1rem;
  }

  .wizard-video__description {
    font-size: 0.85rem;
  }

  /* --------------------------------------------------------------------------
     SIGNATURE STEP
     -------------------------------------------------------------------------- */

  .wizard-signature {
    gap: var(--wizard-spacing-half);
  }

  .wizard-signature__headline {
    font-size: 1.1rem;
  }

  .wizard-signature__pledge {
    max-height: 40vh;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .wizard-signature__input-wrapper {
    flex-direction: column;
  }

  .wizard-signature__form .btn {
    width: 100%;
  }

  /* --------------------------------------------------------------------------
     INFO/FINAL STEPS
     -------------------------------------------------------------------------- */

  .wizard-info__headline {
    font-size: 1.2rem;
  }

  .wizard-checklist li {
    padding-inline: var(--wizard-spacing-inline);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --------------------------------------------------------------------------
     CONFIRMATION STEP (Profile Approval)
     -------------------------------------------------------------------------- */

  .wizard-category__header {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
  }

  .wizard-category__content {
    padding: var(--wizard-spacing-half);
  }

  .wizard-category__footer {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
  }

  .wizard-category__footer .btn {
    width: 100%;
    min-height: 44px;
  }

  /* --------------------------------------------------------------------------
     SYSTEM SETUP STEP
     -------------------------------------------------------------------------- */

  .wizard-system-setup__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wizard-spacing-half);
  }

  .wizard-system-setup__item .btn {
    width: 100%;
  }

  /* --------------------------------------------------------------------------
     INVITE STEP
     -------------------------------------------------------------------------- */

  .wizard-invite__link-container {
    flex-direction: column;
  }

  .wizard-invite__link-container .btn {
    width: 100%;
  }

  /* --------------------------------------------------------------------------
     SUMMARY NAVIGATION
     -------------------------------------------------------------------------- */

  .wizard-summary__item {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
    min-height: 44px;
  }

  /* --------------------------------------------------------------------------
     PILL BANNER - Move to bottom for thumb reach
     -------------------------------------------------------------------------- */

  .wizard-pill {
    top: auto;
    bottom: var(--wizard-spacing-block);
    right: var(--wizard-spacing-inline);
  }

  /* --------------------------------------------------------------------------
     CHAT/INTERVIEW STEP - Campfire Pattern
     This is CRITICAL - must match Campfire behavior exactly
     -------------------------------------------------------------------------- */

  /* Full-bleed chat - remove content padding */
  .wizard-modal__content:has(.wizard-chat-step),
  .wizard-modal__content:has(.wizard-chat) {
    padding: 0;
  }

  .wizard-chat-step,
  .wizard-chat-container,
  .wizard-chat {
    height: 100%;
  }

  /* Messages area - scrollable with touch optimization */
  .wizard-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .wizard-chat__messages > .messages,
  .wizard-chat__messages-list {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
  }

  /* Input wrapper with safe area padding */
  .wizard-chat__input-wrapper {
    flex: none;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Typing indicator - compact */
  .wizard-chat__typing-indicator {
    padding: 0.4em var(--wizard-spacing-inline);
  }

  .wizard-chat__typing-text {
    font-size: 0.8rem;
  }

  /* Input form - touch-friendly */
  .wizard-chat__input {
    padding: var(--wizard-spacing-half) var(--wizard-spacing-inline);
    gap: calc(var(--wizard-spacing-inline) / 2);
  }

  /* Prevent iOS zoom on focus - minimum 16px font size */
  .wizard-chat__input .input,
  .wizard-chat__input-field {
    font-size: max(16px, 1rem);
    padding: 0.6em;
  }

  /* Touch-friendly send button */
  .wizard-chat__input .btn,
  .wizard-chat__submit {
    min-width: 44px;
    min-height: 44px;
  }

  /* Smaller avatars on mobile */
  .wizard-chat .message__avatar,
  .wizard-message__avatar {
    --avatar-size: 2rem;
    width: 2rem;
    height: 2rem;
  }

  /* Message styling */
  .wizard-chat .message,
  .wizard-message {
    padding: var(--wizard-spacing-half);
  }

  .wizard-chat .message__body,
  .wizard-message__body {
    font-size: 0.95rem;
    line-height: 1.5;
  }

} /* End @media (max-width: 640px) */


/* ==========================================================================
   PWA STANDALONE MODE
   Additional adjustments when running as installed PWA
   ========================================================================== */

@media (display-mode: standalone) {
  @media (max-width: 640px) {
    .wizard-modal {
      /* In PWA mode, no browser chrome to account for */
      height: 100dvh;
    }
  }
}


/* ==========================================================================
   iOS-SPECIFIC OPTIMIZATIONS
   Prevent rubber-band scrolling on iOS
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    .wizard-modal {
      overscroll-behavior: none;
    }

    .wizard-chat__messages {
      overscroll-behavior: contain;
    }
  }
}


/* ==========================================================================
   DARK MODE ADJUSTMENTS (if needed)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .wizard-pill img {
    filter: invert(0);
  }
}

@media (prefers-color-scheme: light) {
  .wizard-pill img {
    filter: invert(100%);
  }
}