/**
 * PMERIT Responsive & Visual Fixes
 * Version: 1.0
 * Date: November 23, 2025
 * 
 * FIXES:
 * 1. More rounded chat input (pill-shaped)
 * 2. Better responsive design for all Android devices
 * 3. Device-specific optimizations
 */

/* ==========================================
   FIX #1: MORE ROUNDED CHAT INPUT
   Pill-shaped design for professional look
   ========================================== */

@media (max-width: 1023px) {
  .chat-input-wrapper {
    border-radius: 9999px !important; /* EXTREME - Creates perfect capsule like ChatGPT */
    padding: 12px 16px !important;
    
    /* Enhanced shadow for depth */
    box-shadow: 
      0 0 0 1px rgba(0, 0, 0, 0.08),
      0 3px 6px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.06) !important;
  }
  
  .chat-input-wrapper:focus-within {
    border-radius: 9999px !important; /* Match the perfect capsule */
    box-shadow: 
      0 0 0 2px rgba(42, 91, 140, 0.4),
      0 0 0 6px rgba(42, 91, 140, 0.1),
      0 6px 12px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
  }
  
  /* Ensure buttons maintain circular shape */
  .input-add-btn,
  .input-voice-btn,
  .send-btn {
    border-radius: 50% !important;
  }
}

/* ==========================================
   FIX #2: RESPONSIVE DESIGN IMPROVEMENTS
   Better support for all Android devices
   ========================================== */

/* Small phones (320px - 375px) - Budget Android phones */
@media (max-width: 375px) {
  .chat-input-wrapper {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  
  .chat-input {
    font-size: 15px !important; /* Slightly smaller on tiny screens */
  }
  
  .input-add-btn,
  .input-voice-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
  
  .send-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
  
  .pmerit-header {
    padding: 0 12px !important;
  }
  
  .pmerit-logo {
    font-size: 1.1rem !important;
  }
}

/* Standard phones (376px - 414px) - Most common Android phones */
@media (min-width: 376px) and (max-width: 414px) {
  .chat-input-wrapper {
    padding: 10px 14px !important;
  }
  
  .chat-input {
    font-size: 16px !important;
  }
}

/* Large phones (415px - 767px) - Phablets & larger Android phones */
@media (min-width: 415px) and (max-width: 767px) {
  .chat-input-wrapper {
    padding: 12px 16px !important;
  }
  
  .chat-input {
    font-size: 16px !important;
  }
  
  /* Larger tap targets for better UX */
  .input-add-btn,
  .input-voice-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  
  .send-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}

/* ==========================================
   FIX #3: DEVICE-SPECIFIC OPTIMIZATIONS
   ========================================== */

/* iPhone X/11/12/13/14 - Safe area handling */
@supports (padding: max(0px)) {
  @media (max-width: 1023px) {
    .chat-input-container {
      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    
    .pmerit-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* High DPI Android displays - Improve text rendering */
@media (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 1023px) and (min-resolution: 192dpi) {
  .chat-input {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  .chat-message {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ==========================================
   FIX #4: TOUCH TARGET IMPROVEMENTS
   44x44px minimum for accessibility (WCAG)
   ========================================== */

@media (max-width: 1023px) {
  /* Ensure all interactive elements meet 44x44px minimum */
  .lang-selector,
  .hamburger-btn,
  .sign-in-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  
  /* Voice and send buttons touch area */
  .input-voice-btn::before,
  .send-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  
  .input-voice-btn,
  .send-btn {
    position: relative;
  }
}

/* ==========================================
   FIX #5: LANDSCAPE MODE OPTIMIZATIONS
   ========================================== */

@media (max-width: 1023px) and (orientation: landscape) {
  .chat-messages {
    /* Reduce header impact in landscape */
    height: calc(100vh - var(--header-height) - 80px) !important; /* Fallback */
    height: calc(100dvh - var(--header-height) - 80px) !important;
  }
  
  .chat-input-container {
    padding: 8px 16px !important;
  }
  
  .chat-input {
    max-height: 60px !important; /* Limit input height in landscape */
  }
}

/* ==========================================
   FIX #6: PERFORMANCE OPTIMIZATIONS
   ========================================== */

@media (max-width: 1023px) {
  /* Hardware acceleration for smooth animations */
  .chat-input-wrapper,
  .send-btn,
  .input-add-btn,
  .input-voice-btn {
    will-change: transform;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Prevent text selection during interactions */
  .input-add-btn,
  .input-voice-btn,
  .send-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Smooth scrolling for chat messages */
  .chat-messages {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* ==========================================
   FIX #7: DARK MODE ADJUSTMENTS
   Ensure rounded input looks good in both themes
   ========================================== */

[data-theme="dark"] .chat-input-wrapper {
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 3px 6px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .chat-input-wrapper:focus-within {
  box-shadow: 
    0 0 0 2px rgba(66, 153, 225, 0.5),
    0 0 0 6px rgba(66, 153, 225, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================
   FIX #8: ANDROID-SPECIFIC FIXES
   ========================================== */

@media (max-width: 1023px) {
  /* Fix for Android Chrome address bar disappearing */
  .mobile-layout {
    min-height: 100vh; /* Fallback */
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
  
  html {
    height: -webkit-fill-available;
  }
  
  /* Android keyboard handling */
  @supports (-webkit-touch-callout: none) {
    .chat-input-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
  }
}

/* ==========================================
   FIX #9: SAMSUNG DEVICES OPTIMIZATION
   Popular in Nigeria
   ========================================== */

@media (max-width: 1023px) {
  /* Samsung Internet browser fixes */
  .chat-input-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Samsung edge screen handling */
  @media (min-width: 360px) and (max-width: 412px) {
    .pmerit-header,
    .chat-input-container {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}

/* ==========================================
   FIX #10: LOW-END DEVICE PERFORMANCE
   Common in developing markets
   ========================================== */

@media (max-width: 1023px) and (max-device-width: 768px) {
  /* Reduce animations on low-end devices */
  @media (prefers-reduced-motion: reduce) {
    .chat-input-wrapper,
    .send-btn,
    .input-add-btn,
    .input-voice-btn {
      transition: none !important;
      transform: none !important;
    }
  }
  
  /* Simplify shadows on low-end devices */
  @media (max-device-pixel-ratio: 1) {
    .chat-input-wrapper {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .chat-input-wrapper:focus-within {
      box-shadow: 0 0 0 2px rgba(42, 91, 140, 0.4) !important;
    }
  }
}

/* ==========================================
   FIX #11: CUSTOMER SERVICE MODE VISIBILITY
   Ensure button is ALWAYS visible - match primary color
   ========================================== */

@media (max-width: 1023px) {
  /* Customer Service Mode Button - Mobile */
  .menu-item-customer-service {
    background: var(--primary) !important; /* Match Dashboard */
    color: var(--text-inverse) !important;
    border-color: var(--primary) !important;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
  
  .menu-item-customer-service:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }
  
  .menu-item-customer-service:active,
  .menu-item-customer-service.active {
    background: var(--primary-dark) !important;
  }
}

/* Desktop Customer Service Button */
@media (min-width: 1024px) {
  .dashboard-btn-customer-service {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
  
  .dashboard-btn-customer-service:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px);
  }
}

/* Light Mode - Explicit Override */
:root:not([data-theme="dark"]) .menu-item-customer-service,
[data-theme="light"] .menu-item-customer-service {
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dark Mode - Consistent styling */
[data-theme="dark"] .menu-item-customer-service {
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================
   FIX #12: HAMBURGER MENU DARK MODE
   ========================================== */

/* Dark Mode - Hamburger Menu Styling */
[data-theme="dark"] #hamburger-menu {
  background: #1a1a1a;
  border-right: 1px solid #333;
}

[data-theme="dark"] .menu-header {
  background: #1a1a1a;
  border-bottom-color: #333;
}

[data-theme="dark"] .menu-brand {
  color: var(--color-primary);
}

[data-theme="dark"] #menu-close-btn {
  color: #b0b0b0;
}

[data-theme="dark"] #menu-close-btn:hover {
  background: #2a2a2a;
  color: #fff;
}

[data-theme="dark"] .menu-section {
  border-bottom-color: #333;
}

[data-theme="dark"] .section-title {
  color: #888;
}

[data-theme="dark"] .user-section {
  background: #222;
}

[data-theme="dark"] .user-status {
  color: #999;
}

[data-theme="dark"] .menu-item {
  color: #e0e0e0;
}

[data-theme="dark"] .menu-item:hover {
  background: #2a2a2a;
}

[data-theme="dark"] .menu-icon {
  opacity: 0.9;
}

[data-theme="dark"] .menu-arrow {
  color: #666;
}

/* ==========================================
   FIX #13: TOGGLE SWITCHES - DARK MODE FIX
   Toggle knob must ALWAYS be white/light
   ========================================== */

/* Toggle slider track - unchecked state */
.toggle-slider {
  background-color: #555 !important; /* Visible track in both modes */
}

/* Toggle slider knob - ALWAYS white */
.toggle-slider::before {
  background-color: #ffffff !important; /* Always white knob */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checked state - primary color background */
.toggle-switch input:checked + .toggle-slider,
.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
  background-color: var(--primary) !important;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .toggle-slider {
  background-color: #444 !important;
}

[data-theme="dark"] .toggle-slider::before {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider,
[data-theme="dark"] .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
  background-color: #4AA4B9 !important; /* Teal for better visibility */
}

/* Hover states */
.toggle-slider:hover {
  background-color: #666 !important;
}

.toggle-switch input:checked + .toggle-slider:hover {
  background-color: var(--interactive-primary-hover) !important;
}

[data-theme="dark"] .toggle-slider:hover {
  background-color: #555 !important;
}

[data-theme="dark"] .toggle-switch input:checked + .toggle-slider:hover {
  background-color: #5cc4d9 !important;
}

/* ==========================================
   FIX #14: MENU OVERLAY DARK MODE
   ========================================== */

[data-theme="dark"] #menu-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* ==========================================
   FIX #15: ASSESSMENT PAGE MOBILE FIXES
   ========================================== */

@media (max-width: 1023px) {
  /* Progress container z-index - below menu overlay */
  .progress-container {
    z-index: 90; /* Below menu overlay (1000) */
  }

  /* Assessment container - make it a flex container */
  .assessment-container {
    padding: var(--space-3) var(--space-3) 100px var(--space-3); /* Bottom padding for sticky nav */
    min-height: calc(100vh - 60px); /* Fallback */
    min-height: calc(100dvh - 60px); /* Account for header */
  }

  /* Question card mobile sizing */
  .question-card {
    margin: var(--space-3) auto;
    padding: var(--space-3);
    max-width: 100%;
    padding-bottom: var(--space-2); /* Reduced bottom padding */
  }

  /* Question header - compact for mobile */
  .question-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
  }

  /* Question text - smaller spacing */
  .question-text {
    font-size: var(--text-lg);
    text-align: left;
    margin-bottom: var(--space-4);
  }

  /* Answer options - stack vertically on mobile */
  .answer-options {
    flex-direction: column !important;
    gap: var(--space-2); /* Reduced gap */
    margin-bottom: var(--space-4); /* Reduced margin */
  }

  .radio-option {
    flex-direction: row !important;
    text-align: left !important;
    padding: var(--space-2) var(--space-3); /* Reduced padding */
    min-height: 44px; /* Maintain touch target */
  }

  .radio-option input[type="radio"] {
    margin-right: var(--space-3) !important;
    margin-bottom: 0 !important;
  }

  /* STICKY Navigation buttons at bottom of screen */
  .navigation-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 80;
    gap: var(--space-3);
    margin: 0 !important;
    border-top: 1px solid var(--border-color);
  }

  .navigation-buttons .btn {
    flex: 1;
    padding: var(--space-3);
    min-width: auto;
    min-height: 48px;
  }

  /* Autosave indicator - position above nav */
  .autosave-indicator {
    position: fixed;
    bottom: 70px; /* Above nav buttons */
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-sm);
    z-index: 79;
  }
}

/* Dark mode sticky nav */
[data-theme="dark"] .navigation-buttons {
  background: var(--bg-primary);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  border-top-color: #333;
}

/* Very small screens (320px-375px) - extra compact */
@media (max-width: 375px) {
  .assessment-container {
    padding: var(--space-2) var(--space-2) 90px var(--space-2);
  }

  .question-card {
    padding: var(--space-2);
  }

  .question-text {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
  }

  .radio-option {
    padding: var(--space-2);
  }

  .radio-label {
    font-size: var(--text-sm);
  }

  .navigation-buttons {
    padding: var(--space-2) var(--space-3);
  }
}