/**
 * Base Styles & Reset
 * ====================
 * Global resets, box-sizing, and foundational HTML/body styles
 */

* {
  box-sizing: border-box;
}

/*
 * Unified safe-area source.
 * On both mobile platforms the NATIVE layer sizes the webview inside the
 * system trays, so env(safe-area-inset-*) correctly resolves to 0 there:
 * Android pads the activity root view (scripts/android/MainActivity.kt),
 * iOS pins the WKWebView to the safe area layout guide (src-tauri lib.rs).
 * env() still matters for plain mobile browsers, where the page really
 * does extend under the trays with viewport-fit=cover.
 */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --sai-top: var(--safe-area-inset-top);
  --sai-bottom: var(--safe-area-inset-bottom);
  --sai-left: var(--safe-area-inset-left);
  --sai-right: var(--safe-area-inset-right);
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 175, 248, 0.1) 0, transparent 25%),
    radial-gradient(circle at 80% 0%, rgba(0, 42, 144, 0.18) 0, transparent 30%), #0a0a0a;
  color: var(--color-text);
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.mailbox-mode {
  overflow: hidden;
}

#mailbox-root {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#profile-root,
#contacts-root,
#calendar-root {
  height: 100%;
  overflow-y: auto;
}

#rl-app {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  visibility: hidden;
}

#rl-app.ready {
  visibility: visible;
}

/* Body has id=rl-app; use self-selector for login-centered layout */
body:not(.mailbox-mode)#rl-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Login shell needs full width for proper centering */
.fe-login-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login-root {
  width: 100%;
}

/* Starfield background */
.fe-stars {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* Keep stars visible on login page even in light mode */
body:not(.mailbox-mode) .fe-stars {
  display: block;
}

/* Hide stars in mailbox mode (they would be distracting) */
body.mailbox-mode .fe-stars {
  display: none;
}

/* Light mode body styles */
body.light-mode {
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 175, 248, 0.08) 0, transparent 25%),
    radial-gradient(circle at 80% 0%, rgba(0, 42, 144, 0.12) 0, transparent 30%), #f5f7fb;
  color: #0f172a;
  --color-bg: #ffffff;
  --color-panel: #ffffff;
  --color-bg-secondary: #f3f4f6;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-muted: #1f2937;
  --color-accent: #2563eb;
  --color-accent-strong: #16a34a;
  --color-surface-strong: #0f172a;
  --color-surface: #f9fafb;
  --color-border-light: #e5e7eb;
  --color-text-secondary: #5f6368;
  --color-error: #dc2626;
  --color-success: #16a34a;
}

body.light-mode:not(.mailbox-mode) {
  /* Keep the galaxy vibe even in light mode */
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 175, 248, 0.08) 0, transparent 25%),
    radial-gradient(circle at 80% 0%, rgba(0, 42, 144, 0.14) 0, transparent 30%), #0a0a0a;
  color: var(--color-text);
}

/* Note: Android WebView is padded with system bar insets at the native level
 * (see MainActivity.kt), so body/app content never draws under the status bar
 * or navigation bar. iOS uses env() directly. CSS vars are kept available
 * for components that want to extend into the safe area intentionally. */

/* On mobile, hide the starfield and make the login shell fill the viewport.
 * The dark space-themed background doesn't work well on small screens where
 * the login card can't float freely. Instead, let the card fill edge-to-edge. */
@media (max-width: 640px) {
  .fe-stars {
    display: none !important;
  }

  body:not(.mailbox-mode)#rl-app {
    justify-content: flex-start;
    background: var(--color-bg, #ffffff);
  }

  .fe-login-shell {
    width: 100%;
    height: 100%;
    flex: 1;
    justify-content: center;
  }

  /* Make login card fill full width on mobile */
  .fe-login-shell [data-slot='card'] {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* Ensure inputs don't trigger zoom on iOS */
@media (max-width: 640px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not(
      [type='submit']
    ):not([type='reset']),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Smooth keyboard transitions */
  body {
    transition: height 0.3s ease;
  }

  /* Prevent body scroll when keyboard is open */
  body.keyboard-open {
    position: fixed;
    width: 100%;
  }
}

/* Visual Viewport API support for keyboard handling */
@supports (height: 100dvh) {
  @media (max-width: 640px) {
    #mailbox-root,
    #settings-root,
    #profile-root,
    #contacts-root,
    #calendar-root {
      height: 100dvh;
    }
  }
}

/* Keep the last interactive row above the home indicator/navigation bar. */
@media (max-width: 640px) {
  .fe-mobile-page-scroll {
    padding-bottom: calc(1rem + var(--sai-bottom)) !important;
    scroll-padding-bottom: calc(1rem + var(--sai-bottom));
  }
}

/* ============================================
   MOBILE TYPOGRAPHY SCALING
   Increase font sizes for better readability on mobile
   ============================================ */
@media (max-width: 640px) {
  /* Scale up base font sizes on mobile for readability. Each keeps the
   * --fe-text-scale multiplier from tokens.css so the OS text size setting
   * still applies on top of the mobile bump. */
  :root {
    --text-2xs: calc(11px * var(--fe-text-scale));
    --text-xs: calc(12px * var(--fe-text-scale));
    --text-sm: calc(13px * var(--fe-text-scale));
    --text-base: calc(14px * var(--fe-text-scale));
    --text-md: calc(15px * var(--fe-text-scale));
    --text-lg: calc(16px * var(--fe-text-scale));
    --text-xl: calc(18px * var(--fe-text-scale));
    --text-2xl: calc(20px * var(--fe-text-scale));
    --text-3xl: calc(22px * var(--fe-text-scale));
  }

  /* Ensure body text is at least 14px for readability */
  body {
    font-size: calc(14px * var(--fe-text-scale));
    line-height: 1.5;
  }

  /* Message content should be comfortable to read */
  .fe-message-subject {
    font-size: calc(15px * var(--fe-text-scale));
  }

  .fe-message-from,
  .fe-message-snippet,
  .fe-message-date {
    font-size: calc(13px * var(--fe-text-scale));
  }

  /* Folder list items */
  .fe-folder {
    font-size: calc(15px * var(--fe-text-scale));
  }
}

/* ============================================
   ACCESSIBILITY: FOCUS INDICATORS
   Ensure visible focus states on mobile for keyboard navigation
   ============================================ */
@media (max-width: 640px) {
  /* Enhanced focus indicators for touch devices using keyboard */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--color-primary, #00aff8);
    outline-offset: 2px;
  }

  /* Allow opt-out for inputs inside styled containers (e.g., recipient fields) */
  input.outline-none:focus-visible,
  textarea.outline-none:focus-visible {
    outline: none;
  }
}
