/**
 * Universal Safe Area Handling
 * Works on all devices with notches, Dynamic Island, home indicators, etc.
 * 
 * Safe areas handle:
 * - iPhone notch (X, XS, 11, 12, 13, 14)
 * - iPhone Dynamic Island (14 Pro, 15, 16)
 * - Home indicator bar (all Face ID iPhones, some Android)
 * - Android display cutouts
 */

/* ============================================
   ROOT SAFE AREA VARIABLES
   ============================================ */

:root {
  /* Safe area values with fallbacks */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ============================================
   HEADER SAFE AREAS
   ============================================ */

/* Header should account for notch/Dynamic Island */
header {
  /* Use max() to ensure minimum padding even without notch */
  padding-top: max(var(--safe-area-top), 0px);
}

/* When in PWA mode, header needs extra consideration */
body.is-pwa header {
  padding-top: var(--safe-area-top);
}

/* ============================================
   MAIN CONTENT SAFE AREAS
   ============================================ */

/* Main content area respects left/right safe areas (rarely needed in portrait) */
.main-content-area {
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* ============================================
   BOTTOM NAVIGATION & INPUT SAFE AREAS
   ============================================ */

/* All bottom navigation bars - base styles */
.bottom-nav,
#callPanelNav,
#smsFilterNav,
#chatFilterNav,
#favFilterNav {
  flex-shrink: 0;
}

/* Safe area padding only on mobile/tablet (not needed on desktop) */
body.is-mobile .bottom-nav,
body.is-mobile #callPanelNav,
body.is-mobile #smsFilterNav,
body.is-mobile #chatFilterNav,
body.is-mobile #favFilterNav,
body.is-tablet .bottom-nav,
body.is-tablet #callPanelNav,
body.is-tablet #smsFilterNav,
body.is-tablet #chatFilterNav,
body.is-tablet #favFilterNav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 1px);
}

body.is-mobile .message-compose-area,
body.is-tablet .message-compose-area {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
}

body.is-mobile #sidebarContactsPagination,
body.is-tablet #sidebarContactsPagination {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* Ensure button rows inside navs have consistent height (mobile/tablet only) */
/* On desktop, let buttons determine their own height naturally */
body.is-mobile #callPanelNav > .flex,
body.is-mobile #smsFilterNav > .flex,
body.is-mobile #chatFilterNav > .flex,
body.is-tablet #callPanelNav > .flex,
body.is-tablet #smsFilterNav > .flex,
body.is-tablet #chatFilterNav > .flex {
  height: 54px;
  min-height: 54px;
}

/* Fix the nested div.relative in SMS/Chat buttons adding extra height */
.sms-nav-btn .relative {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Message input container needs safe area padding (mobile only) */
body.is-mobile .message-input-container,
body.is-mobile #messageInputContainer {
  padding-bottom: max(var(--safe-area-bottom), 8px);
}

body.is-pwa .message-input-container,
body.is-pwa #messageInputContainer {
  padding-bottom: max(var(--safe-area-bottom), 16px);
}

/* ============================================
   FULL-SCREEN VIEWS SAFE AREAS
   ============================================ */

/* Full-screen modals and views should respect all safe areas */
.modal-fullscreen,
#settingsView:not(.hidden),
#contactsView:not(.hidden) {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* Active call view - ensure controls don't get cut off */
#activeCallView {
  padding-bottom: max(var(--safe-area-bottom), 16px);
}

/* ============================================
   DIALPAD SAFE AREAS
   ============================================ */

/* Dialpad needs bottom padding for home indicator */
#dialpadView {
  padding-bottom: var(--safe-area-bottom);
}

/* Call button at bottom of dialpad */
#dialpadView .call-btn-container,
#dialpadView > div:last-child {
  padding-bottom: max(var(--safe-area-bottom), 8px);
}

/* ============================================
   MOBILE-SPECIFIC SAFE AREA HANDLING
   ============================================ */

@media (max-width: 849px) {
  /* On mobile, ensure conversation list doesn't go under home indicator */
  #conversationsList {
    padding-bottom: max(var(--safe-area-bottom), 60px); /* 60px for bottom nav */
  }
  
  /* Message thread needs bottom padding */
  #messageThread {
    padding-bottom: max(var(--safe-area-bottom), 8px);
  }
  
  /* Fixed bottom elements need safe area */
  .fixed-bottom,
  [class*="fixed"][class*="bottom"] {
    padding-bottom: var(--safe-area-bottom);
  }
}

/* ============================================
   NOTCH DEVICE SPECIFIC
   ============================================ */

/* Extra handling for devices with notch detected */
body.has-notch header {
  /* Ensure header content doesn't overlap with notch area */
  min-height: calc(60px + var(--safe-area-top));
}

body.has-notch #activeCallView {
  /* Give extra top padding to avoid Dynamic Island overlap */
  padding-top: max(16px, calc(var(--safe-area-top) - 20px));
}

/* ============================================
   IOS SPECIFIC FIXES
   ============================================ */

body.is-ios {
  /* Prevent rubber-band scrolling on iOS that can show address bar */
  overscroll-behavior: none;
}

/* Hide iOS keyboard accessory bar (form navigation toolbar) */
body.is-ios #messageInput,
body.is-ios textarea[enterkeyhint],
body.is-ios input[enterkeyhint] {
  /* These properties help minimize the accessory bar appearance */
  -webkit-user-modify: read-write-plaintext-only;
  -webkit-appearance: none;
}

body.is-ios.is-pwa {
  /* PWA on iOS - ensure full viewport usage */
  min-height: -webkit-fill-available;
}

/* iOS PWA status bar area */
body.is-ios.is-pwa header {
  /* Account for iOS status bar in PWA mode */
  padding-top: max(var(--safe-area-top), 20px);
}

/* ============================================
   ANDROID SPECIFIC FIXES
   ============================================ */

/*
 * Android edge-to-edge (API 35+): Chromium WebView does NOT populate
 * env(safe-area-inset-*) from WindowInsetsCompat the way iOS WKWebView
 * bridges iOS safe-area insets. The native shell forwards the pixel
 * values via window.__onSystemBarInsetsChanged(...) in app.js, which
 * writes them to the --android-inset-* custom properties below. We then
 * redefine the shared --safe-area-*/--safe-* custom properties here in
 * terms of max(env(...), var(--android-inset-*)) so every existing
 * rule that reads them gets the bridged value automatically.
 *
 * Rules that use raw env(safe-area-inset-*) directly (not via var)
 * get explicit body.is-android overrides further down.
 *
 * Cross-platform safe: selectors are scoped to body.is-android so iOS
 * and desktop are unaffected (var(--android-inset-*) is never defined
 * there; the max() operand stays at env()).
 *
 * See BUG-277 and /opt/agents/planning/reports/BUG-277-plan.md.
 */
body.is-android {
  --android-inset-top: 0px;
  --android-inset-bottom: 0px;
  --android-inset-left: 0px;
  --android-inset-right: 0px;

  /* safe-areas.css native properties (defined at :root line 16-22) */
  --safe-area-top: max(env(safe-area-inset-top, 0px), var(--android-inset-top));
  --safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom));
  --safe-area-left: max(env(safe-area-inset-left, 0px), var(--android-inset-left));
  --safe-area-right: max(env(safe-area-inset-right, 0px), var(--android-inset-right));

  /* styles.css :root aliases (defined at :root line 42-45) */
  --safe-area-inset-top: max(env(safe-area-inset-top, 0px), var(--android-inset-top));
  --safe-area-inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom));
  --safe-area-inset-left: max(env(safe-area-inset-left, 0px), var(--android-inset-left));
  --safe-area-inset-right: max(env(safe-area-inset-right, 0px), var(--android-inset-right));

  /* breakpoints.css :root aliases (defined at :root line 41-44) */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--android-inset-top));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--android-inset-left));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--android-inset-right));
}

/* Header chrome — the inline style at index.html:120 was updated in this same
 * commit to read max(env(safe-area-inset-top, 0px), var(--android-inset-top, 0px))
 * so the inline (which wins over class selectors) already honors the bridged
 * Android inset. No additional body.is-android header rule needed here.
 *
 * The CSS rule `header { padding-top: max(var(--safe-area-top), 0px); }` at
 * line 29-32 also picks up the override automatically because --safe-area-top
 * is redefined on body.is-android above. */

/* Bottom-nav group — raw env() with 1px floor in safe-areas.css:73.
 * Android override raises the floor using the native-bridged inset. */
body.is-android.is-mobile .bottom-nav,
body.is-android.is-mobile #callPanelNav,
body.is-android.is-mobile #smsFilterNav,
body.is-android.is-mobile #chatFilterNav,
body.is-android.is-mobile #favFilterNav,
body.is-android.is-tablet .bottom-nav,
body.is-android.is-tablet #callPanelNav,
body.is-android.is-tablet #smsFilterNav,
body.is-android.is-tablet #chatFilterNav,
body.is-android.is-tablet #favFilterNav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom), 1px);
}

body.is-android.is-mobile .message-compose-area,
body.is-android.is-tablet .message-compose-area {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom), 12px);
}

body.is-android.is-mobile #sidebarContactsPagination,
body.is-android.is-tablet #sidebarContactsPagination {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--android-inset-bottom), 8px);
}

/* Drawer headers (left nav + header menu) in styles.css use
 *   calc(1rem + env(safe-area-inset-top, 0px))
 * which returns 1rem on Android because env() = 0. Layer in
 * var(--android-inset-top). Mirrors the !important on the source rules
 * at styles.css:2102 and :2204 so the cascade still wins. */
body.is-android #leftNavDrawer > div:first-child,
body.is-android #headerMenuDrawer > div:first-child {
  padding-top: calc(1rem + max(env(safe-area-inset-top, 0px), var(--android-inset-top))) !important;
  min-height: calc(3.5rem + max(env(safe-area-inset-top, 0px), var(--android-inset-top)));
}

/* Mobile search header (#mobileSearchHeader) — raw env() in styles.css:14548. */
body.is-android .mobile-search-header {
  padding-top: calc(10px + max(env(safe-area-inset-top, 0px), var(--android-inset-top)));
}

/* Mobile toast container — styles.css:1535 anchors toasts 64px below env top.
 * Mirror the @media (max-width: 849px) scoping of the source rule. */
@media (max-width: 849px) {
  body.is-android #toastContainer {
    top: calc(max(env(safe-area-inset-top, 0px), var(--android-inset-top)) + 64px);
  }
}

body.is-android.is-pwa {
  /* TWA/PWA-specific rules intentionally empty — the body.is-android block
   * above already redefines --safe-area-* custom properties and the explicit
   * overrides for raw env() call sites cover the PWA path via the
   * body.is-android scoping alone. */
}

/* ============================================
   KEYBOARD VISIBLE STATE
   (class added by JS when keyboard detection implemented)
   ============================================ */

body.keyboard-visible .message-input-container,
body.keyboard-visible #messageInputContainer {
  /* When keyboard is visible, reduce bottom padding */
  padding-bottom: 8px;
}

body.keyboard-visible #conversationsList,
body.keyboard-visible #messageThread {
  /* Adjust for keyboard */
  padding-bottom: 8px;
}

/* ============================================
   DEBUG MODE - Visualize Safe Areas
   Add body.debug-safe-areas to see safe area overlays
   ============================================ */

body.debug-safe-areas::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-top);
  background: rgba(255, 0, 0, 0.3);
  pointer-events: none;
  z-index: 99998;
}

body.debug-safe-areas::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-bottom);
  background: rgba(0, 0, 255, 0.3);
  pointer-events: none;
  z-index: 99998;
}