/* Sweet Mobile Optimizations
   Loaded AFTER main Tailwind build to override/add mobile-specific styles.
   Target: phones (<768px), tablets get some improvements too. */

/* ---- Zero Horizontal Scroll ---- */
html, body, #root {
  overflow-x: hidden;
  max-width: 100vw;
}

* {
  -webkit-overflow-scrolling: touch;
}

/* ---- Touch Target Minimums (44px Apple HIG, 48px Material) ---- */
@media (max-width: 767px) {
  button, 
  [role="button"],
  a.motion-button,
  .touch-target {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- Safe Area Insets for Notched Phones ---- */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Sticky bottom elements — safe-area handled inline on the input container */
@media (max-width: 767px) {
  /* Input container safe area class (for elements that need it) */
  .input-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---- Prevent iOS Safari Zoom on Input Focus ---- */
@media (max-width: 767px) {
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
}

/* ---- File Manager Full Screen on Mobile ---- */
@media (max-width: 767px) {
  .file-manager-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ---- Session Sidebar Improvements ---- */
@media (max-width: 767px) {
  /* Make the mobile session sidebar slightly narrower */
  .session-sidebar-mobile {
    max-width: 85vw;
  }
  
  /* Larger tap targets for session list items */
  .session-list-item {
    min-height: 52px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* ---- Chat Message Improvements ---- */
@media (max-width: 767px) {
  /* Give messages more width on mobile */
  .message-bubble {
    max-width: 92% !important;
  }
  
  /* Better line-height for readability on small screens */
  .message-content p {
    line-height: 1.6;
  }
  
  /* Code blocks scroll better on mobile */
  .message-content pre {
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* ---- Tool Tile Mobile Adjustments ---- */
@media (max-width: 767px) {
  .tool-tile {
    padding: 10px 12px;
  }
  
  .tool-tile pre,
  .tool-tile .output-block {
    max-height: 40vh;
    font-size: 11px;
  }
}

/* ---- Scroll to Bottom Button Position ---- */
@media (max-width: 767px) {
  .scroll-bottom-btn {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Dark Mode OLED Optimization (save battery) ---- */
@media (prefers-color-scheme: dark) {
  .dark .bg-gray-900 {
    background-color: #000 !important; /* True black for OLED */
  }
}

/* ---- Momentum Scrolling (iOS smooth scroll) ---- */
.momentum {
  -webkit-overflow-scrolling: touch;
}

/* ---- Prevent Text Selection on UI Elements (improves touch UX) ---- */
.header-btn,
.session-list-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---- Active States for Touch Feedback ---- */
@media (hover: none) and (pointer: coarse) {
  button:active,
  .session-list-item:active {
    opacity: 0.7;
    transition: opacity 0.1s;
  }
}

/* ---- Nav/Header Responsive ---- */
@media (max-width: 767px) {
  /* Compact header on mobile */
  .header-mobile {
    padding: 8px 12px;
  }
  
  /* Ensure hamburger menu is prominent */
  .hamburger-btn {
    padding: 8px;
  }
}

/* ---- Prevent Content Shift When Keyboard Opens ---- */
@media (max-width: 767px) {
  /* Use dynamic viewport height — accounts for mobile browser chrome */
  .h-screen {
    height: 100dvh;
    height: -webkit-fill-available;
  }
  .min-h-screen {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
  
  /* Force no horizontal overflow anywhere */
  .overflow-y-auto,
  .overflow-auto {
    overflow-x: hidden !important;
  }
  
  /* Reduce text size slightly on very small screens */
  .text-base {
    font-size: 15px;
  }
}