/**
 * 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 {
  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-tablet .bottom-nav,
body.is-tablet #callPanelNav,
body.is-tablet #smsFilterNav,
body.is-tablet #chatFilterNav {
  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: 72px;
  min-height: 72px;
}

/* 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
   ============================================ */

body.is-android {
  /* Android navigation bar handling */
  /* Most Android devices use software nav that's already accounted for in viewport */
}

body.is-android.is-pwa {
  /* Android TWA/PWA specific handling if needed */
}

/* ============================================
   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;
}