/* Mood mobile-native v3 — design tokens (max-width: 1023px) */

@media (max-width: 1023px) {
  body.mood-layout-v2.mood-mobile-v3 {
    /* Breakpoints (reference for JS) */
    --mob-bp-sm: 360px;
    --mob-bp-md: 390px;
    --mob-bp-lg: 430px;

    /* Touch */
    --mob-touch-min: 44px;
    --mob-tap-gap: 8px;

    /* Z-index stack (mobile shell) */
    --z-mob-sticky: 100;
    --z-mob-dock: calc(var(--z-rail) + 10);
    --z-mob-menu: calc(var(--z-rail) + 20);
    --z-mob-sheet: calc(var(--z-modal) - 50);
    --z-mob-modal: var(--z-modal);
    --z-mob-toast: var(--z-toast);

    /* Spacing tuned for small screens */
    --mob-gutter: var(--space-4);
    --mob-section-gap: var(--space-5);

    /* Full viewport (Safari dvh) */
    --mob-vh: 100dvh;
    --mob-vh-fallback: 100vh;

    /* Dock-safe bottom padding for main content */
    --mob-main-pad-bottom: calc(var(--mood-dock-offset) + var(--space-5));

    /* Floating pill header (Safari safe-area + dock parity) */
    --mood-header-pill-gap: 10px;
    --mood-header-pill-h: var(--mood-tabbar-h, 56px);
    --mood-header-offset: calc(
      var(--email-banner-offset, 0px)
      + env(safe-area-inset-top, 0px)
      + var(--mood-header-pill-gap)
      + var(--mood-header-pill-h)
      + var(--mood-header-pill-gap)
    );
    --header-stack-offset: var(--mood-header-offset);
    --mob-main-pad-top: var(--mood-header-offset);
    /* Apple-style menu groups */
    --mob-menu-group-radius: 14px;
    --mob-menu-row-h: 48px;
    --mob-menu-separator: color-mix(in srgb, var(--border) 45%, transparent);
    --mob-fill-secondary: color-mix(in srgb, var(--text) 6%, var(--surface-2));
    --mob-fill-tertiary: color-mix(in srgb, var(--text) 4%, var(--surface-2));
  }

  html[data-theme="light"] body.mood-layout-v2.mood-mobile-v3 {
    --mob-fill-secondary: rgba(120, 120, 128, 0.12);
    --mob-fill-tertiary: rgba(120, 120, 128, 0.08);
    --mob-menu-separator: rgba(60, 60, 67, 0.12);
  }

  /* Prevent iOS input zoom */
  body.mood-mobile-v3 input,
  body.mood-mobile-v3 select,
  body.mood-mobile-v3 textarea {
    font-size: 16px;
  }

  /* Touch feedback pattern */
  @media (hover: none), (pointer: coarse) {
    body.mood-mobile-v3 .btn:active,
    body.mood-mobile-v3 .mood-mob-dock__item:active,
    body.mood-mobile-v3 .mood-mob-menu__quick-chip:active {
      transform: scale(0.97);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.mood-mobile-v3 .mood-mob-dock__item,
    body.mood-mobile-v3 .mood-mob-menu__quick-chip {
      transition: none !important;
    }
  }
}