/* Mobile-first sanity defaults */
* { box-sizing: border-box; }
html, body { width: 100%; }
img, video { max-width: 100%; height: auto; }

/* Safari Mobile Specific Fixes */
@supports (-webkit-touch-callout: none) {
  /* Safari Mobile specific styles */
  .chat-input-container, .input-container {
    position: relative !important;
    z-index: 999 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 8px !important;
  }

  .chat-input, .input-container input, #chat-input {
    -webkit-appearance: none !important;
    -webkit-border-radius: 8px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  .send-button, .send-btn, #send-btn {
    min-height: 44px !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
  }
}

/* Shared small-screen layout fixes */
@media (max-width: 600px) {
  /* Containers and spacing */
  .container { padding: 12px !important; width: 100% !important; }
  header { text-align: left !important; }

  /* Header badges overlapping */
  #userDisplay { position: static !important; margin: 0 0 10px 0 !important; display: inline-block !important; }

  /* Chat areas: avoid fixed heights */
  .chat-container, .messages, #chat-messages {
    height: auto !important;
    max-height: none !important;
    min-height: 40vh !important;
    padding: 12px !important;
    margin-bottom: 80px !important; /* Space for input */
  }

  /* Input rows should wrap and be more visible */
  .chat-input-container, .input-container, .input-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #0a0a0a !important;
    backdrop-filter: blur(10px) !important;
    padding: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 1000 !important;
  }

  .chat-input, .input-container input, #chat-input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .send-button, .send-btn, #send-btn {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    background: #00d4ff !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* Message bubbles should use full width when needed */
  .message, .agent-message-bubble { max-width: 100% !important; }

  /* Tabs should stack */
  .main-tabs { flex-direction: column !important; }
  .main-tab { width: 100% !important; border-right: none !important; border-bottom: 1px solid #dee2e6 !important; }
  .main-tab:last-child { border-bottom: none !important; }

  /* Tables: improve fit */
  .table-wrapper { overflow-x: auto !important; }

  /* Fix body padding to account for fixed input */
  body { padding-bottom: 100px !important; }
}

/* ============================================ */
/* COMPREHENSIVE MOBILE CHAT INTERFACE FIXES */
/* ============================================ */

/* Modern Mobile Chat Optimizations for all chat interfaces */
@media (max-width: 768px) {
  /* Universal mobile viewport optimization */
  html, body {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }

  /* Chat interface containers */
  .chat-interface, .app-container, .chat-container {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  /* Messages areas - reserve space for fixed input */
  .chat-messages, .messages-area, .messages-wrapper, .messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 120px !important; /* Space for fixed input */
    -webkit-overflow-scrolling: touch !important;
    padding-left: max(16px, env(safe-area-inset-left, 0)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0)) !important;
  }

  /* CRITICAL: Universal input area fixes */
  .chat-input-container,
  .input-area,
  .input-container,
  .input-row {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #000000 !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px !important;
    /* Safe area handling for notched phones */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0)) !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
  }

  /* Universal input field optimization */
  .chat-input,
  .message-input,
  input[type="text"],
  textarea {
    flex: 1 !important;
    min-height: 44px !important; /* iOS touch target minimum */
    max-height: 120px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 12px 16px !important;
    border-radius: 22px !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    resize: none !important;
    line-height: 1.4 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-appearance: none !important;
    outline: none !important;
  }

  .chat-input:focus,
  .message-input:focus,
  input[type="text"]:focus,
  textarea:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Universal button optimization */
  .send-button,
  .send-btn,
  .attachment-btn,
  .attachment-button,
  button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    padding: 0 16px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  /* Send button styling */
  .send-button,
  .send-btn {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
    color: white !important;
    font-weight: 600 !important;
  }

  .send-button:hover,
  .send-btn:hover,
  .send-button:active,
  .send-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3) !important;
  }

  .send-button:disabled,
  .send-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  /* Attachment button styling */
  .attachment-btn,
  .attachment-button {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    width: 44px !important;
    padding: 0 !important;
  }

  .attachment-btn:hover,
  .attachment-button:hover,
  .attachment-btn:active,
  .attachment-button:active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #00d4ff !important;
  }

  /* Mobile header adjustments */
  .chat-header,
  .header {
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 100 !important;
  }

  .chat-header h1,
  .header h1 {
    font-size: 18px !important;
  }

  /* Navigation and sidebar mobile handling */
  .history-sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(43, 43, 43, 0.98) !important;
    z-index: 2000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    display: none !important;
  }

  .history-sidebar.mobile-open,
  .sidebar.mobile-open {
    display: block !important;
    transform: translateX(0) !important;
  }

  /* Message content mobile adjustments */
  .message-content {
    max-width: 85% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }

  .message-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  /* Attachment and media mobile optimization */
  .attachment-preview,
  .upload-progress {
    position: fixed !important;
    bottom: 100px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 9998 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }

  /* Error and status messages */
  .error-message,
  .success-message,
  .typing-indicator {
    margin-bottom: 120px !important; /* Space for fixed input */
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  /* Token display and status bars */
  #tokenDisplay,
  #tokenStatusBar,
  .token-usage {
    position: fixed !important;
    bottom: 140px !important;
    left: 16px !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 9997 !important;
  }
}

/* Mobile landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .chat-messages,
  .messages-area {
    padding-bottom: 100px !important;
  }

  .chat-input-container,
  .input-area {
    padding: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
  }

  .chat-input,
  .message-input {
    max-height: 80px !important;
  }

  .chat-header {
    padding: 8px 16px !important;
  }
}

/* iOS Safari specific enhancements */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .chat-input-container,
    .input-area {
      /* iOS Safari specific positioning fix - MUST use fixed for mobile */
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 9999 !important;
    }

    .chat-input,
    .message-input {
      -webkit-appearance: none !important;
      border-radius: 22px !important;
    }

    .chat-messages,
    .messages-area {
      padding-bottom: 140px !important; /* Extra space for iOS */
    }
  }
}

/* Keyboard visibility handling */
@media (max-width: 768px) {
  body.keyboard-visible .chat-messages,
  body.keyboard-visible .messages-area {
    padding-bottom: 80px !important; /* Reduce when keyboard is visible */
  }

  body.keyboard-visible .chat-input-container,
  body.keyboard-visible .input-area {
    position: fixed !important;
    bottom: 0 !important;
    z-index: 10000 !important;
  }

  body.keyboard-visible .attachment-preview,
  body.keyboard-visible .upload-progress,
  body.keyboard-visible #tokenDisplay,
  body.keyboard-visible #tokenStatusBar {
    bottom: 100px !important;
  }
}

/* Prevent zoom on double tap */
@media (max-width: 768px) {
  * {
    touch-action: manipulation !important;
  }

  input,
  textarea,
  select {
    touch-action: manipulation !important;
    user-select: text !important;
  }
}

/* Welcome messages and empty states */
@media (max-width: 768px) {
  .welcome-message {
    padding: 60px 20px 40px 20px !important;
    text-align: center !important;
  }

  .welcome-message h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
}