/**
 * Call Panel Responsive Sizing
 * Feature flag: Add class "call-panel-responsive" to body to enable
 * This file contains dynamic sizing rules that can be toggled on/off
 */

/* Only apply when feature flag is enabled */
body.call-panel-responsive {
  /* Define CSS custom properties for dynamic sizing */
  --call-panel-available-height: calc(100dvh - var(--header-height, 76px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  
  /* Base sizes that will scale (more conservative) */
  --call-profile-base-size: 96px; /* Match original w-24 */
  --call-timer-base-size: 36px;
  --call-button-base-size: 56px;
  --call-spacing-base: 20px;
}

/* Directory/Contacts View - Enable scrolling on all devices */
body.call-panel-responsive #callPanelContactsView:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.call-panel-responsive #callPanelContactsView:not(.hidden) #callPanelContactsList {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Call History View - Enable scrolling on all devices */
body.call-panel-responsive #callHistoryView:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.call-panel-responsive #callHistoryView:not(.hidden) #callHistoryList {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Call Park View - Enable scrolling on all devices */
body.call-panel-responsive #callParkView:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.call-panel-responsive #callParkView:not(.hidden) #parkList {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Favorites View - Enable scrolling on all devices */
body.call-panel-responsive #callPanelFavoritesView:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.call-panel-responsive #callPanelFavoritesView:not(.hidden) #callPanelFavoritesList {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Active Call View - Responsive Sizing */
body.call-panel-responsive #activeCallView {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: auto !important;
  padding-top: clamp(8px, 1vh, 16px) !important;
  padding-bottom: clamp(12px, 2vh, 24px) !important;
  padding-left: clamp(12px, 2vw, 24px) !important;
  padding-right: clamp(12px, 2vw, 24px) !important;
  gap: clamp(8px, 1.5vh, 20px) !important;
}

/* Profile Picture - Dynamic Sizing */
body.call-panel-responsive .active-call-avatar-wrapper > div {
  /* Override Tailwind w-24 h-24 (96px) with responsive sizing */
  width: clamp(80px, 12vw, 120px) !important;
  height: clamp(80px, 12vw, 120px) !important;
  min-width: 80px !important;
  max-width: 120px !important;
  min-height: 80px !important;
  max-height: 120px !important;
  font-size: clamp(24px, 4vw, 32px) !important;
}

/* More conservative sizing for smaller screens */
@media (max-height: 700px) {
  body.call-panel-responsive .active-call-avatar-wrapper > div {
    width: clamp(70px, 10vw, 100px) !important;
    height: clamp(70px, 10vw, 100px) !important;
    max-width: 100px !important;
    max-height: 100px !important;
  }
}

@media (max-height: 600px) {
  body.call-panel-responsive .active-call-avatar-wrapper > div {
    width: clamp(60px, 8vw, 90px) !important;
    height: clamp(60px, 8vw, 90px) !important;
    max-width: 90px !important;
    max-height: 90px !important;
    font-size: clamp(20px, 3vw, 28px) !important;
  }
}

/* Timer - Dynamic Font Size */
body.call-panel-responsive #callTimer {
  font-size: clamp(28px, 6vw, 48px) !important;
}

@media (max-height: 600px) {
  body.call-panel-responsive #callTimer {
    font-size: clamp(24px, 5vw, 36px) !important;
  }
}

/* Call Control Buttons - Dynamic Sizing */
body.call-panel-responsive .call-control-btn {
  width: clamp(44px, 10vw, 64px) !important;
  height: clamp(44px, 10vw, 64px) !important;
  min-width: 44px !important; /* Minimum touch target */
  min-height: 44px !important;
  font-size: clamp(16px, 3vw, 20px) !important;
}

/* Spacing Adjustments */
body.call-panel-responsive .active-call-info-section {
  gap: clamp(8px, 2vh, 24px);
}

/* Text Sizing */
body.call-panel-responsive #activeCallName {
  font-size: clamp(18px, 4vw, 22px) !important;
}

body.call-panel-responsive #activeCallNumber {
  font-size: clamp(12px, 2.5vw, 14px) !important;
}

body.call-panel-responsive #activeCallStatus {
  font-size: clamp(12px, 2.5vw, 14px) !important;
}

/* Container Queries for Fine-Tuning (when supported) */
@container (max-height: 600px) {
  body.call-panel-responsive #activeCallView {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  
  body.call-panel-responsive .active-call-info-section {
    flex-direction: row;
    align-items: center;
  }
}

@container (max-height: 500px) {
  body.call-panel-responsive .active-call-avatar-wrapper > div {
    width: 60px !important;
    height: 60px !important;
  }
  
  body.call-panel-responsive #callTimer {
    font-size: 24px !important;
  }
}

/* Media Queries for Height-Based Breakpoints */
@media (max-height: 700px) {
  body.call-panel-responsive #activeCallView {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }
  
  body.call-panel-responsive .call-controls-grid {
    gap: 8px;
  }
}

@media (max-height: 600px) {
  body.call-panel-responsive .active-call-info-section {
    margin-bottom: 8px;
  }
  
  body.call-panel-responsive #activeCallView {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
}

@media (max-height: 500px) {
  body.call-panel-responsive .active-call-avatar-wrapper {
    margin-bottom: 4px;
  }
  
  body.call-panel-responsive .call-controls-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Safe Area Adjustments */
body.call-panel-responsive #callPanelContainer {
  padding-top: 0 !important; /* Remove top padding - header already has safe area */
  padding-bottom: 0 !important; /* Remove bottom padding to fill space */
}

/* Remove any extra space from mobile call banners when empty */
body.call-panel-responsive #mobileCallBannersContainer:empty,
body.call-panel-responsive #mobileCallBannersContainer.hidden {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.call-panel-responsive #callPanelNav {
  margin-top: 0 !important;
}

/* Safe area padding only on mobile/tablet */
body.call-panel-responsive.is-mobile #callPanelNav,
body.call-panel-responsive.is-tablet #callPanelNav {
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
}

/* Ensure content fills available space - remove excess bottom space */
body.call-panel-responsive #leftSidebarContent {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.call-panel-responsive #callPanelContentInner {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* Let child views handle scrolling, not this container */
}

body.call-panel-responsive #conversationsContainer {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* On mobile, ensure content uses full available height */
@media (max-width: 849px) {
  /* CRITICAL: Ensure the sidebar fills the screen on mobile */
  body.call-panel-responsive #conversationsSidebar {
    height: calc(100vh - var(--header-height, 76px)) !important;
    height: calc(100dvh - var(--header-height, 76px)) !important; /* Fallback for iOS */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Mobile: leftSidebarHeader is hidden, so content should fill entire sidebar */
  body.call-panel-responsive #leftSidebarContent {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Ensure callPanelContainer fills the leftSidebarContent */
  body.call-panel-responsive #callPanelContainer:not(.hidden) {
    position: relative !important;
    inset: auto !important;
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Make callPanelContentInner work like conversationsContainer - flex container, not scrollable */
  body.call-panel-responsive #callPanelContentInner {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  /* CRITICAL: Force hidden views to stay hidden FIRST - highest priority */
  /* Must come before any other rules */
  body.call-panel-responsive #dialpadView.hidden,
  body.call-panel-responsive #callPanelFavoritesView.hidden,
  body.call-panel-responsive #callPanelContactsView.hidden,
  body.call-panel-responsive #callHistoryView.hidden,
  body.call-panel-responsive #callParkView.hidden,
  body.call-panel-responsive #activeCallView.hidden {
    display: none !important;
  }
  
  /* Only apply flex styles when view is NOT hidden */
  body.call-panel-responsive #dialpadView:not(.hidden) {
    /* Use flex-grow to fill available space - this is the key */
    flex: 1 1 0% !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0% !important;
    min-height: 0 !important;
    /* Override Tailwind h-full - use flex instead */
    height: auto !important;
    max-height: none !important;
    /* Override any inline styles or other CSS */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    /* Ensure it stretches to fill parent */
    align-self: stretch !important;
    width: 100% !important;
  }
  
  /* Dialpad content wrapper (the div with flex items-center justify-center h-full) - only when visible */
  /* Target the div that contains the actual dialpad content */
  body.call-panel-responsive #dialpadView:not(.hidden) > div.flex.items-center.justify-center,
  body.call-panel-responsive #dialpadView:not(.hidden) > div:last-child:not(#microphonePermissionWarning) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    /* Override Tailwind h-full - force to fill remaining space after warning */
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    /* Center content vertically */
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important; /* Allow scrolling if content is too tall */
    align-self: stretch !important;
  }
  
  /* Remove extra spacing from dialpad inner content */
  body.call-panel-responsive #dialpadView:not(.hidden) .space-y-3 {
    margin-top: 0 !important; /* No top margin */
    padding-top: 0.5rem !important; /* Small padding only */
  }
  
  /* Ensure dialpadView starts right at the top */
  body.call-panel-responsive #dialpadView:not(.hidden) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove padding from callPanelContentInner on mobile */
  body.call-panel-responsive #callPanelContentInner {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body.call-panel-responsive #callPanelFavoritesView:not(.hidden),
  body.call-panel-responsive #callPanelContactsView:not(.hidden),
  body.call-panel-responsive #callHistoryView:not(.hidden),
  body.call-panel-responsive #callParkView:not(.hidden) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  body.call-panel-responsive #activeCallView:not(.hidden) {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }
  
  /* Scrollable content areas inside views - like conversationList - only when parent is visible */
  body.call-panel-responsive #callPanelFavoritesView:not(.hidden) #callPanelFavoritesList,
  body.call-panel-responsive #callPanelContactsView:not(.hidden) #callPanelContactsList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  
  body.call-panel-responsive #callHistoryView:not(.hidden) #callHistoryList {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  
  body.call-panel-responsive #callPanelNav {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
}

/* Ensure navigation buttons are not cut off */
body.call-panel-responsive #leftSidebarHeader {
  /* Ensure header has enough height and padding */
  min-height: 101px !important;
  padding-bottom: 1rem !important;
  overflow: visible !important;
}

/* Hide left sidebar header nav buttons on mobile - use left nav drawer instead */
body.call-panel-responsive.is-mobile #leftSidebarHeader {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Hide right menu hamburger on mobile - consolidated into left nav drawer */
body.call-panel-responsive.is-mobile .header-menu-btn {
  display: none !important;
}

/* Settings view - ensure full height on mobile */
body.call-panel-responsive.is-mobile.settings-open #settingsView:not(.hidden) {
  position: fixed !important;
  top: var(--header-height, 76px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: calc(100vh - var(--header-height, 76px)) !important;
  min-height: calc(100vh - var(--header-height, 76px)) !important;
  max-height: none !important;
  z-index: 50 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  /* Override safe-areas.css padding - already accounted for in top position */
  padding-top: 0 !important;
}

body.call-panel-responsive #leftSidebarHeader .grid {
  /* Ensure grid container doesn't clip content */
  overflow: visible !important;
}

body.call-panel-responsive #showCallPanelBtn,
body.call-panel-responsive #showSMSBtn,
body.call-panel-responsive #showInternalBtn,
body.call-panel-responsive #showContactsPageBtn,
body.call-panel-responsive #navRailSettingsBtn {
  /* Ensure buttons are fully visible */
  overflow: visible !important;
  min-height: 56px !important;
  padding: 0 !important; /* Symmetric padding for vertical centering */
}

/* ============================================= */
/* CRITICAL: Hidden views MUST stay hidden      */
/* This MUST be at the end to override everything */
/* ============================================= */
body.call-panel-responsive #dialpadView.hidden,
body.call-panel-responsive #activeCallView.hidden,
body.call-panel-responsive #callPanelFavoritesView.hidden,
body.call-panel-responsive #callPanelContactsView.hidden,
body.call-panel-responsive #callHistoryView.hidden,
body.call-panel-responsive #callParkView.hidden {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}