/**
 * MomoTokki mobile-web shell styles.
 * Loaded after styles.css; active only under html.mw-layout-mobile / .mw-shell.
 * Desktop topbar/sidebar first-paint suppression is injected inline by
 * lib/mobile-web-inject.js; converted page styles retain their scoped rules.
 */

html.mw-layout-mobile {
  /* ── Colors (native parity) ── */
  --mw-color-primary: #1db88a;
  --mw-color-primary-dark: #17a67a;
  --mw-color-bg: #0d0d0d;
  --mw-color-surface: #111111;
  --mw-color-surface-elevated: #1a1a1a;
  --mw-color-border: #222222;
  --mw-color-border-light: #2a2a2a;
  --mw-color-text: #ffffff;
  --mw-color-text-secondary: #aaaaaa;
  --mw-color-text-muted: #666666;
  --mw-color-text-hint: #444444;
  --mw-color-error: #e74c3c;
  --mw-color-warning: #f59e0b;
  --mw-color-info: #3b82f6;
  --mw-color-tab-inactive: #7a7a7a;
  --mw-color-input-bg: #1e1e1e;
  --mw-color-input-border: #2e2e2e;

  /* ── Spacing scale ── */
  --mw-space-1: 4px;
  --mw-space-2: 8px;
  --mw-space-3: 12px;
  --mw-space-4: 16px;
  --mw-space-5: 20px;
  --mw-space-6: 24px;
  --mw-space-8: 32px;
  --mw-space-10: 40px;

  /* ── Radius scale ── */
  --mw-radius-sm: 8px;
  --mw-radius-md: 12px;
  --mw-radius-lg: 16px;
  --mw-radius-xl: 20px;
  --mw-radius-pill: 999px;
  --mw-radius-fab: 29px;

  /* ── Typography ── */
  --mw-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mw-font-size-xs: 11px;
  --mw-font-size-sm: 13px;
  --mw-font-size-md: 15px;
  --mw-font-size-lg: 17px;
  --mw-font-size-xl: 20px;
  --mw-font-size-2xl: 24px;
  --mw-font-weight-normal: 400;
  --mw-font-weight-medium: 500;
  --mw-font-weight-semibold: 600;
  --mw-font-weight-bold: 700;
  --mw-line-height-tight: 1.2;
  --mw-line-height-normal: 1.45;
  --mw-line-height-relaxed: 1.6;

  /* ── Layout ── */
  /* Native tabBarVisibility.js: height 60 + safe-area; padding 6 top / 8 bottom live inside that 60. */
  --mw-tab-bar-padding-top: 6px;
  --mw-tab-bar-padding-bottom: 8px;
  --mw-tab-bar-inner-height: calc(
    60px - var(--mw-tab-bar-padding-top) - var(--mw-tab-bar-padding-bottom)
  );
  --mw-tab-bar-height: calc(60px + env(safe-area-inset-bottom, 0px));
  --mw-page-padding-x: var(--mw-space-4);
  --mw-page-padding-bottom: var(--mw-space-4);
  --mw-header-height: 52px;
  --mw-touch-min: 44px;
  /* Shared small checkbox size for guest-flow consent/terms checkboxes (landing
     try card, guest-convert sheet) — the box itself stays compact; the >=44px
     tap target comes from the surrounding label's own min-height, not the box. */
  --mw-consent-checkbox-size: 26px;

  /* ── Safe areas ── */
  --mw-safe-top: env(safe-area-inset-top, 0px);
  --mw-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mw-safe-left: env(safe-area-inset-left, 0px);
  --mw-safe-right: env(safe-area-inset-right, 0px);

  /* ── Viewport height ── */
  --mw-vh: 100vh;
  --mw-vh: 100dvh;

  /* ── Motion ── */
  --mw-duration-fast: 120ms;
  --mw-duration-normal: 200ms;
  --mw-duration-slow: 320ms;
  --mw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html.mw-layout-mobile {
    --mw-duration-fast: 0ms;
    --mw-duration-normal: 0ms;
    --mw-duration-slow: 0ms;
  }

  html.mw-layout-mobile .mw-shell *,
  html.mw-layout-mobile .mw-shell *::before,
  html.mw-layout-mobile .mw-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html.mw-layout-mobile .mw-shell {
  font-family: var(--mw-font-family);
  color: var(--mw-color-text);
}

/* Converted content pages use the document as their sole vertical scroller.
   Messages and Chat opt out: both use fixed-viewport shells with internal
   overflow scrollers; forcing document scroll here lets html/body win over
   their own overflow locks and leaks gestures (keyboard on Chat, list/thread
   on Messages). */
html.mw-layout-mobile:not(.mw-auth-active):not(.mw-messages-active):not(.mw-chat-active) {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.mw-layout-mobile:not(.mw-auth-active):not(.mw-messages-active):not(.mw-chat-active) body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Chrome on iPad uses BODY as the scrolling host. Keeping the top-level
   viewport fixed prevents CriOS's browser toolbar from collapsing and leaves
   fixed UI anchored to the physical viewport throughout the gesture. */
html.mw-layout-mobile.mw-scroll-host {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.mw-layout-mobile.mw-scroll-host:not(#mw-host) body {
  position: fixed !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch;
}

/* CriOS pans its visual viewport when a fixed body has no consumable scroll
   range. Keep a tested 2px range available without adding visible content,
   layout participation, focus stops, or pointer targets. On pages taller than
   one viewport this endpoint remains inside their existing scroll extent. */
html.mw-layout-mobile.mw-scroll-host:not(#mw-host) body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: calc(100% + 2px);
  visibility: hidden;
  pointer-events: none;
}

html.mw-layout-mobile.mw-scroll-host.mw-scroll-host-modal-locked:not(#mw-host) body {
  overflow-y: hidden !important;
}

/* Messages opts out of the normal document-scroll contract (114-126 above) and
   otherwise inherits styles.css html/body { overflow-y: scroll }. On CriOS
   tablet that leaves document scroll leaking under the fixed .mw-messages-host
   shell — list/thread gestures move windowScrollY and collapse the toolbar
   even though #convList / #chatMessages are the intended scrollers. When the
   body scroll host is active, keep gestures inside those internal overflow
   containers instead of chaining to the locked body scroller. */
html.mw-layout-mobile.mw-scroll-host.mw-messages-active:not(#mw-host) .conv-list,
html.mw-layout-mobile.mw-scroll-host.mw-messages-active:not(#mw-host) .chat-messages {
  overscroll-behavior: contain;
}

/* Cross-page mobile hardening: every native control keeps a real 44px target. */
html.mw-layout-mobile button:not([hidden]),
html.mw-layout-mobile select:not([hidden]),
html.mw-layout-mobile summary,
html.mw-layout-mobile input[type="button"]:not([hidden]),
html.mw-layout-mobile input[type="submit"]:not([hidden]),
html.mw-layout-mobile input[type="reset"]:not([hidden]),
html.mw-layout-mobile input[type="checkbox"]:not([hidden]),
html.mw-layout-mobile input[type="radio"]:not([hidden]),
html.mw-layout-mobile [role="button"]:not([hidden]) {
  min-width: var(--mw-touch-min) !important;
  min-height: var(--mw-touch-min) !important;
  box-sizing: border-box;
}

html.mw-layout-mobile .dc-card-name,
html.mw-layout-mobile .wall-post-author-link,
html.mw-layout-mobile .games-lb-full-link {
  min-width: var(--mw-touch-min) !important;
  min-height: var(--mw-touch-min);
  display: inline-flex;
  align-items: center;
}

html.mw-layout-mobile a[href]:focus-visible,
html.mw-layout-mobile button:focus-visible,
html.mw-layout-mobile select:focus-visible,
html.mw-layout-mobile input:focus-visible,
html.mw-layout-mobile textarea:focus-visible,
html.mw-layout-mobile summary:focus-visible,
html.mw-layout-mobile [role="button"]:focus-visible {
  outline: 2px solid var(--mw-color-primary) !important;
  outline-offset: 2px;
}

/* A resting pull-to-refresh hint must be neither visible nor hit-testable. */
html.mw-layout-mobile .mw-profile-ptr,
html.mw-layout-mobile .mw-discover-ptr,
html.mw-layout-mobile .mw-messages-ptr,
html.mw-layout-mobile .mw-games-ptr {
  visibility: hidden;
  pointer-events: none;
}

html.mw-layout-mobile .mw-profile-ptr--visible,
html.mw-layout-mobile .mw-profile-ptr--refreshing,
html.mw-layout-mobile .mw-discover-ptr--visible,
html.mw-layout-mobile .mw-discover-ptr--refreshing,
html.mw-layout-mobile .mw-messages-ptr--visible,
html.mw-layout-mobile .mw-messages-ptr--refreshing,
html.mw-layout-mobile .mw-games-ptr--visible,
html.mw-layout-mobile .mw-games-ptr--refreshing {
  visibility: visible;
}

/* ── Page shell ── */
html.mw-layout-mobile .mw-page {
  min-height: var(--mw-vh);
  min-height: calc(var(--mw-vh-px, 1vh) * 100);
  background: var(--mw-color-bg);
  padding-top: var(--mw-safe-top);
  padding-bottom: calc(var(--mw-tab-bar-height) + var(--mw-page-padding-bottom));
  padding-left: calc(var(--mw-page-padding-x) + var(--mw-safe-left));
  padding-right: calc(var(--mw-page-padding-x) + var(--mw-safe-right));
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-page.mw-page--tab-hidden,
html.mw-layout-mobile html.mw-tab-bar-hidden .mw-page {
  padding-bottom: calc(var(--mw-safe-bottom) + var(--mw-page-padding-bottom));
}

/* ── Stack header ── */
html.mw-layout-mobile .mw-header {
  height: var(--mw-header-height);
  display: flex;
  align-items: center;
  gap: var(--mw-space-2);
  padding: 0 var(--mw-space-4);
  background: var(--mw-color-bg);
  border-bottom: 0.5px solid var(--mw-color-border);
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-header__title {
  flex: 1;
  min-width: 0;
  font-size: var(--mw-font-size-lg);
  font-weight: var(--mw-font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mw-layout-mobile .mw-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mw-touch-min);
  min-height: var(--mw-touch-min);
  color: var(--mw-color-text);
  text-decoration: none;
  border: 0;
  background: transparent;
  border-radius: var(--mw-radius-sm);
}

html.mw-layout-mobile .mw-header__back:focus-visible {
  outline: 2px solid var(--mw-color-primary);
  outline-offset: 2px;
}

/* ── Card ── */
html.mw-layout-mobile .mw-card {
  background: var(--mw-color-surface);
  border: 0.5px solid #1e1e1e;
  border-radius: var(--mw-radius-md);
  padding: var(--mw-space-4);
}

/* ── List row ── */
html.mw-layout-mobile .mw-list-row {
  min-height: 52px;
  padding: var(--mw-space-3) var(--mw-space-4);
  display: flex;
  align-items: center;
  gap: var(--mw-space-3);
  border-bottom: 0.5px solid var(--mw-color-border);
  color: var(--mw-color-text);
  text-decoration: none;
  background: transparent;
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-list-row:active,
html.mw-layout-mobile .mw-list-row:focus-visible {
  background: var(--mw-color-surface-elevated);
}

html.mw-layout-mobile .mw-list-row:focus-visible {
  outline: 2px solid var(--mw-color-primary);
  outline-offset: -2px;
}

/* ── Pill ── */
html.mw-layout-mobile .mw-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--mw-space-3);
  border-radius: var(--mw-radius-pill);
  font-size: var(--mw-font-size-sm);
  font-weight: var(--mw-font-weight-medium);
  background: var(--mw-color-surface-elevated);
  color: var(--mw-color-text-secondary);
  border: 1px solid transparent;
}

html.mw-layout-mobile .mw-pill--active {
  background: rgba(29, 184, 138, 0.15);
  color: var(--mw-color-primary);
  border-color: rgba(29, 184, 138, 0.35);
}

/* ── Badge ── */
html.mw-layout-mobile .mw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mw-color-primary);
  color: #fff;
  font-size: 9px;
  font-weight: var(--mw-font-weight-bold);
  line-height: 1;
  box-sizing: border-box;
}

/* ── Buttons ── */
html.mw-layout-mobile .mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--mw-space-4);
  border-radius: var(--mw-radius-md);
  border: 1px solid transparent;
  font-size: var(--mw-font-size-md);
  font-weight: var(--mw-font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-btn--primary {
  background: var(--mw-color-primary);
  color: #04342c;
}

html.mw-layout-mobile .mw-btn--secondary {
  background: transparent;
  border-color: var(--mw-color-border-light);
  color: var(--mw-color-text);
}

html.mw-layout-mobile .mw-btn--destructive {
  background: transparent;
  color: var(--mw-color-error);
}

html.mw-layout-mobile .mw-btn--icon {
  min-width: var(--mw-touch-min);
  min-height: var(--mw-touch-min);
  padding: 0;
  border-radius: var(--mw-radius-sm);
}

html.mw-layout-mobile .mw-btn:focus-visible {
  outline: 2px solid var(--mw-color-primary);
  outline-offset: 2px;
}

/* ── Sheet ── */
html.mw-layout-mobile .mw-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1100;
}

html.mw-layout-mobile .mw-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  background: var(--mw-color-surface);
  border-top-left-radius: var(--mw-radius-lg);
  border-top-right-radius: var(--mw-radius-lg);
  max-height: min(90dvh, 90vh);
  max-height: min(calc(var(--mw-vh-px, 1vh) * 90), 90vh);
  padding-bottom: calc(var(--mw-space-4) + var(--mw-safe-bottom));
  overflow: auto;
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-more-list {
  padding-top: var(--mw-space-2);
}

html.mw-layout-mobile .mw-more-item .mw-tab-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}

html.mw-layout-mobile .mw-more-item__label {
  font-size: var(--mw-font-size-md);
}

/* ── FAB match ── */
html.mw-layout-mobile .mw-fab-match {
  width: 58px;
  height: 58px;
  border-radius: var(--mw-radius-fab);
  background: var(--mw-color-primary);
  border: 3px solid var(--mw-color-bg);
  box-shadow: 0 0 8px rgba(29, 184, 138, 0.4);
  position: relative;
  top: -18px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

html.mw-layout-mobile .mw-tab-fab-glyph {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-left: 3px;
  line-height: 1;
}

/* ── Skeleton ── */
@keyframes mw-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

html.mw-layout-mobile .mw-skeleton {
  background: linear-gradient(90deg, #1a1a1a 0%, #242424 50%, #1a1a1a 100%);
  background-size: 200px 100%;
  animation: mw-shimmer 1.2s ease infinite;
  border-radius: var(--mw-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html.mw-layout-mobile .mw-skeleton {
    animation: none;
    background: #1a1a1a;
  }
}

/* ── Empty state ── */
html.mw-layout-mobile .mw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--mw-space-8);
  gap: var(--mw-space-3);
}

html.mw-layout-mobile .mw-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--mw-color-text-muted);
}

html.mw-layout-mobile .mw-empty__title {
  font-size: var(--mw-font-size-lg);
  font-weight: var(--mw-font-weight-semibold);
}

html.mw-layout-mobile .mw-empty__body {
  font-size: var(--mw-font-size-sm);
  color: var(--mw-color-text-muted);
}

/* ── Form field ── */
html.mw-layout-mobile .mw-field {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-2);
  margin-bottom: var(--mw-space-4);
}

html.mw-layout-mobile .mw-field__label {
  font-size: var(--mw-font-size-sm);
  color: var(--mw-color-text-secondary);
}

html.mw-layout-mobile .mw-field__input {
  height: 48px;
  padding: 0 var(--mw-space-3);
  border-radius: var(--mw-radius-sm);
  border: 1px solid var(--mw-color-input-border);
  background: var(--mw-color-input-bg);
  color: var(--mw-color-text);
  font-size: var(--mw-font-size-md);
  box-sizing: border-box;
}

html.mw-layout-mobile .mw-field__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(29, 184, 138, 0.35);
}

/* ── Tab bar ── */
html.mw-layout-mobile .mw-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* --mw-tab-bar-bottom-offset (set by layout.js from visualViewport
     measurements) compensates for browsers whose dynamic/collapsible
     toolbar can leave a plain bottom:0 drifting away from the true visible
     bottom edge during scroll — 0px when there's no such drift. */
  bottom: var(--mw-tab-bar-bottom-offset, 0px);
  z-index: 1000;
  background: var(--mw-color-surface);
  border-top: 0.5px solid var(--mw-color-border);
  padding-top: var(--mw-tab-bar-padding-top);
  padding-bottom: calc(var(--mw-tab-bar-padding-bottom) + var(--mw-safe-bottom));
  pointer-events: auto;
  translate: none;
  transition: transform var(--mw-duration-normal, 200ms) var(--mw-ease-out, ease);
}

html.mw-layout-mobile .mw-tab-bar--hidden {
  transform: translateY(110%);
  pointer-events: none;
}

html.mw-layout-mobile .mw-tab-bar__inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  height: var(--mw-tab-bar-inner-height);
  max-width: 640px;
  margin: 0 auto;
}

html.mw-layout-mobile .mw-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mw-touch-min);
  min-height: var(--mw-touch-min);
  margin: 0 auto;
  color: var(--mw-color-tab-inactive);
  text-decoration: none;
}

html.mw-layout-mobile .mw-tab[aria-current="page"] {
  color: var(--mw-color-primary);
}

html.mw-layout-mobile .mw-tab-icon-wrap {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}

html.mw-layout-mobile .mw-tab-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

html.mw-layout-mobile .mw-tab-icon--ion {
  fill: none;
  color: inherit;
}

html.mw-layout-mobile .mw-tab-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  transform: none;
}

html.mw-layout-mobile .mw-tab:focus-visible,
html.mw-layout-mobile .mw-fab-match:focus-visible {
  outline: 2px solid var(--mw-color-primary);
  outline-offset: 2px;
}

/* ── Resize banner ── */
html.mw-layout-mobile .mw-resize-banner {
  position: fixed;
  top: calc(var(--mw-safe-top) + var(--mw-space-2));
  left: var(--mw-space-4);
  right: var(--mw-space-4);
  z-index: 1200;
}

html.mw-layout-mobile .mw-resize-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-3);
  padding: var(--mw-space-3) var(--mw-space-4);
  border-radius: var(--mw-radius-md);
  background: var(--mw-color-surface-elevated);
  border: 0.5px solid var(--mw-color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.mw-layout-mobile .mw-resize-banner__text {
  font-size: var(--mw-font-size-sm);
  color: var(--mw-color-text-secondary);
}

html.mw-layout-mobile .mw-resize-banner__reload {
  min-height: 36px;
  padding: 0 var(--mw-space-3);
  flex-shrink: 0;
}

/* ── Screen reader live region ── */
html.mw-layout-mobile .mw-sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Demo page helpers (isolated route only) ── */
html.mw-layout-mobile .mw-demo-panel {
  padding: var(--mw-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-3);
}

html.mw-layout-mobile .mw-demo-panel h1 {
  font-size: var(--mw-font-size-xl);
  margin: 0;
}

html.mw-layout-mobile .mw-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-2);
}

html.mw-layout-mobile .mw-demo-meta {
  font-size: var(--mw-font-size-sm);
  color: var(--mw-color-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}