/* ==========================================
   Mobile Fix for iPhone 11 (375x812)
   Sidebar + Responsive Overrides
   ========================================== */

/* --- Viewport & Layout --- */
html, body {
  overflow-x: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* --- Sidebar: Force closed on mobile, close on outside tap --- */
/* These target common sidebar/panel patterns in React apps */
[data-state="open"],
[class*="sidebar"][class*="open"],
[class*="sidebar"][class*="active"],
[class*="drawer"][class*="open"],
[class*="panel"][class*="open"],
[class*="slide"],
aside[class*="open"],
aside[class*="active"],
div[class*="sidebar"],
div[class*="drawer"],
div[class*="side-panel"] {
  /* On mobile, sidebar overlays */
}

/* Backdrop overlay - close sidebar on tap */
.fixed.inset-0,
div[class*="backdrop"],
div[class*="overlay"],
div[role="dialog"] ~ div.fixed,
[data-radix-portal] > div:first-child {
  -webkit-tap-highlight-color: transparent;
}

/* --- Sidebar width on mobile --- */
@media (max-width: 768px) {
  div[class*="sidebar"],
  div[class*="drawer"],
  div[class*="side-panel"],
  aside {
    max-width: 80vw !important;
    width: 80vw !important;
    min-width: 0 !important;
  }
}

/* --- Prevent body scroll when sidebar open --- */
body.sidebar-open,
body:has(div[class*="sidebar"][class*="open"]),
body:has(div[class*="drawer"][class*="open"]),
body:has(aside[class*="open"]) {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* --- iPhone 11 specific (375x812) --- */
@media screen and (width: 375px) and (height: 812px),
       screen and (width: 390px) and (height: 844px) {
  /* Safe area insets for notch */
  body {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
}

/* --- General mobile fixes --- */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  /* Fix grid/flex layouts */
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Stack side-by-side layouts */
  [class*="flex-row"] {
    flex-direction: column !important;
  }
  
  /* Full-width containers */
  main, [class*="container"], [class*="content"], [class*="main"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Header/navbar mobile */
  header, nav, [class*="header"], [class*="navbar"], [class*="topbar"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  /* Font scaling for readability */
  body {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  
  /* Chat input area fix */
  [class*="input"], [class*="textarea"], textarea, input[type="text"] {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px !important; /* Minimum tap target */
  }
  
  /* Button tap targets */
  button, a, [role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Hide sidebar toggle on desktop only patterns */
  [class*="lg:flex"], [class*="md:flex"] {
    flex-direction: column !important;
  }
  
  /* Sidebar: transform off-screen on mobile by default */
  div[class*="sidebar"],
  div[class*="drawer"],
  aside {
    position: fixed !important;
    z-index: 9999 !important;
    transition: transform 0.3s ease !important;
  }
}

@media (min-width: 769px) {
  /* Desktop: sidebar can be inline */
  div[class*="sidebar"],
  div[class*="drawer"],
  aside {
    position: relative !important;
  }
}

/* --- PWA standalone mode --- */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* --- Keyboard avoidance for chat input --- */
@media (max-width: 768px) {
  [class*="chat"] [class*="input"],
  [class*="chat"] textarea,
  [class*="chat"] input {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}
/* cache bust */