/*!
 * Artemis Responsive Design System v1.0.0
 * Mobile-First Responsive Framework
 * Instance 3 Deliverable - Breakpoints & Adaptive Layouts
 */

/* ============================================
   MOBILE-FIRST BASE STYLES
   ============================================ */

/*
 * Base styles are designed for mobile (320px+)
 * We progressively enhance for larger screens
 */

/* Ensure content is accessible on small screens */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

.artemis-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--artemis-space-4);
    padding-right: var(--artemis-space-4);
}

/* Small devices (landscape phones, 640px and up) */
@media (min-width: 640px) {
    .artemis-container {
        max-width: 640px;
        padding-left: var(--artemis-space-6);
        padding-right: var(--artemis-space-6);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .artemis-container {
        max-width: 768px;
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .artemis-container {
        max-width: 1024px;
    }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    .artemis-container {
        max-width: 1280px;
    }
}

/* 2XL devices (1536px and up) */
@media (min-width: 1536px) {
    .artemis-container {
        max-width: 1536px;
    }
}

/* ============================================
   RESPONSIVE GRID SYSTEM
   ============================================ */

.artemis-grid {
    display: grid;
    gap: var(--artemis-space-4);
}

/* Mobile: Single column by default */
.artemis-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Tablet and up: 2 columns */
@media (min-width: 640px) {
    .artemis-grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .artemis-grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .artemis-grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .artemis-grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .artemis-grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .artemis-grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================
   CHAT WIDGET RESPONSIVE STYLES
   ============================================ */

/* Mobile: Chat widget takes full screen */
.artemis-chat-widget {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    z-index: var(--artemis-z-chat-widget);
}

/* Chat bubble on mobile */
.artemis-chat-bubble {
    position: fixed;
    bottom: var(--artemis-space-4);
    right: var(--artemis-space-4);
    width: var(--artemis-chat-bubble-size);
    height: var(--artemis-chat-bubble-size);
    border-radius: var(--artemis-radius-full);
    z-index: var(--artemis-z-chat-widget);
}

/* Small devices (640px and up): Slightly smaller but still prominent */
@media (min-width: 640px) and (max-width: 767px) {
    .artemis-chat-widget {
        width: 100vw;
        height: 100vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

    .artemis-chat-bubble {
        bottom: var(--artemis-space-5);
        right: var(--artemis-space-5);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 1023px) {
    .artemis-chat-widget {
        width: 360px;
        height: 550px;
        bottom: var(--artemis-chat-widget-mobile-offset);
        right: var(--artemis-chat-widget-mobile-offset);
        border-radius: var(--artemis-radius-xl);
    }

    .artemis-chat-bubble {
        bottom: var(--artemis-space-6);
        right: var(--artemis-space-6);
    }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    .artemis-chat-widget {
        width: var(--artemis-chat-widget-width);
        height: var(--artemis-chat-widget-height);
        bottom: var(--artemis-chat-widget-mobile-offset);
        right: var(--artemis-chat-widget-mobile-offset);
        border-radius: var(--artemis-radius-xl);
    }

    .artemis-chat-bubble {
        bottom: var(--artemis-space-6);
        right: var(--artemis-space-6);
    }
}

/* ============================================
   MESSAGE BUBBLES RESPONSIVE
   ============================================ */

.artemis-message-content {
    max-width: 85%;
}

@media (min-width: 640px) {
    .artemis-message-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .artemis-message-content {
        max-width: 75%;
    }
}

@media (min-width: 1024px) {
    .artemis-message-content {
        max-width: 70%;
    }
}

/* ============================================
   NAVIGATION RESPONSIVE
   ============================================ */

/* Mobile: Hidden by default, shown via toggle */
.artemis-sidebar {
    position: fixed;
    top: 73px; /* P0 FIX: Fixed value to prevent cutoff - Oct 29, 2025 */
    left: 0;
    bottom: 0;
    width: var(--artemis-sidebar-width, 200px);
    transform: translateX(-100%);
    transition: transform var(--artemis-transition-base);
    z-index: var(--artemis-z-fixed);
    padding-top: var(--artemis-space-2); /* Extra padding to prevent first item cutoff */
}

.artemis-sidebar.artemis-sidebar-open {
    transform: translateX(0);
}

/* Mobile overlay when sidebar is open */
.artemis-sidebar-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--artemis-bg-overlay);
    z-index: calc(var(--artemis-z-fixed) - 1);
    pointer-events: none; /* Allow clicks to pass through to sidebar */
}

.artemis-sidebar-overlay.artemis-active {
    display: block;
}

/* ========================================================================
   MOBILE FIX: Reduce sidebar overlay opacity on mobile (Oct 30, 2025)
   Issue: 50% black overlay too heavy on mobile, makes sidebar unreadable
   User report: "menu/navigation panel looks weird" (extremely faded)
   Solution: Reduce opacity to 10% on mobile viewports
   ======================================================================== */
@media (max-width: 767px) {
    .artemis-sidebar-overlay {
        background: rgba(0, 0, 0, 0.1) !important; /* Light overlay on mobile */
    }
}

/* Tablet and up: Show sidebar by default */
@media (min-width: 768px) {
    .artemis-sidebar {
        transform: translateX(0);
    }

    .artemis-sidebar-overlay {
        display: none !important;
    }
}

/* ============================================
   HEADER RESPONSIVE
   ============================================ */

.artemis-header {
    height: 60px;
}

.artemis-header-title {
    font-size: var(--artemis-font-size-lg);
}

@media (max-width: 640px) {
    .artemis-header-title {
        font-size: var(--artemis-font-size-base);
    }

    /* Hide secondary header elements on mobile */
    .artemis-header-secondary {
        display: none;
    }
}

/* ============================================
   CARDS RESPONSIVE
   ============================================ */

.artemis-card {
    margin-bottom: var(--artemis-space-4);
}

@media (min-width: 768px) {
    .artemis-card {
        margin-bottom: var(--artemis-space-6);
    }
}

/* ============================================
   FORM ELEMENTS RESPONSIVE
   ============================================ */

/* Ensure form elements are touch-friendly on mobile */
.artemis-input,
.artemis-btn {
    min-height: 44px; /* iOS recommended touch target */
}

@media (min-width: 768px) {
    .artemis-input,
    .artemis-btn {
        min-height: 36px;
    }
}

/* ============================================
   TYPOGRAPHY RESPONSIVE
   ============================================ */

/* Fluid typography scaling */
@media (max-width: 640px) {
    :root {
        --artemis-font-size-2xl: 1.25rem;
        --artemis-font-size-3xl: 1.5rem;
        --artemis-font-size-4xl: 1.875rem;
    }
}

/* ============================================
   RESPONSIVE VISIBILITY UTILITIES
   ============================================ */

/* Hide on mobile */
.artemis-hidden-xs {
    display: none;
}

@media (min-width: 640px) {
    .artemis-hidden-xs {
        display: block;
    }
}

/* Show only on mobile */
.artemis-visible-xs {
    display: block;
}

@media (min-width: 640px) {
    .artemis-visible-xs {
        display: none;
    }
}

/* Hide on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
    .artemis-hidden-md {
        display: none;
    }
}

/* Show only on tablet */
.artemis-visible-md {
    display: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .artemis-visible-md {
        display: block;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .artemis-hidden-lg {
        display: none;
    }
}

/* Show only on desktop */
.artemis-visible-lg {
    display: none;
}

@media (min-width: 1024px) {
    .artemis-visible-lg {
        display: block;
    }
}

/* ============================================
   SPACING RESPONSIVE UTILITIES
   ============================================ */

/* Mobile spacing */
.artemis-p-mobile {
    padding: var(--artemis-space-4);
}

.artemis-m-mobile {
    margin: var(--artemis-space-4);
}

/* Tablet spacing */
@media (min-width: 768px) {
    .artemis-p-tablet {
        padding: var(--artemis-space-6);
    }

    .artemis-m-tablet {
        margin: var(--artemis-space-6);
    }
}

/* Desktop spacing */
@media (min-width: 1024px) {
    .artemis-p-desktop {
        padding: var(--artemis-space-8);
    }

    .artemis-m-desktop {
        margin: var(--artemis-space-8);
    }
}

/* ============================================
   TOUCH & POINTER ADAPTATIONS
   ============================================ */

/* Increase touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .artemis-btn,
    .artemis-input,
    a.artemis-link {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ORIENTATION SPECIFIC STYLES
   ============================================ */

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .artemis-chat-widget {
        height: 100vh;
    }

    .artemis-header {
        height: 50px;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina displays */
    .artemis-card,
    .artemis-input,
    .artemis-btn {
        border-width: 0.5px;
    }
}

/* ============================================
   SAFE AREA INSETS (iOS NOTCH SUPPORT)
   ============================================ */

@supports (padding: max(0px)) {
    .artemis-header {
        padding-left: max(var(--artemis-space-4), env(safe-area-inset-left));
        padding-right: max(var(--artemis-space-4), env(safe-area-inset-right));
    }

    .artemis-chat-widget {
        padding-bottom: max(var(--artemis-space-4), env(safe-area-inset-bottom));
    }

    .artemis-chat-bubble {
        bottom: max(var(--artemis-space-4), env(safe-area-inset-bottom));
        right: max(var(--artemis-space-4), env(safe-area-inset-right));
    }
}

/* ============================================
   PRINT MEDIA QUERIES
   ============================================ */

@media print {
    /* Hide interactive elements when printing */
    .artemis-chat-widget,
    .artemis-chat-bubble,
    .artemis-sidebar,
    .artemis-btn,
    .artemis-no-print {
        display: none !important;
    }

    /* Optimize for print */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    .artemis-container {
        max-width: 100%;
        padding: 0;
    }

    /* Prevent page breaks inside elements */
    .artemis-card,
    .artemis-message {
        page-break-inside: avoid;
    }

    /* Force backgrounds for important elements */
    .artemis-alert {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ============================================
   CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --artemis-border-medium: #000000;
        --artemis-text-primary: #000000;
        --artemis-text-secondary: #333333;
    }

    .artemis-btn-primary {
        border: 2px solid currentColor;
    }
}

/* ============================================
   DARK MODE DETECTION
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Auto dark mode support when data-theme is not explicitly set */
    :root:not([data-theme]) {
        --artemis-text-primary: #ffffff;
        --artemis-text-secondary: #b3b3b3;
        --artemis-bg-primary: #121212;
        --artemis-bg-secondary: #1e1e1e;
        --artemis-border-medium: #363636;
    }
}

/* ============================================
   RESPONSIVE TESTING HELPERS (Development Only)
   ============================================ */

/*
 * These classes help visualize breakpoints during development.
 * Remove in production builds.
 */

.artemis-debug-breakpoint::before {
    content: 'XS';
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 99999;
}

@media (min-width: 640px) {
    .artemis-debug-breakpoint::before {
        content: 'SM';
        background: rgba(255, 165, 0, 0.8);
    }
}

@media (min-width: 768px) {
    .artemis-debug-breakpoint::before {
        content: 'MD';
        background: rgba(255, 255, 0, 0.8);
        color: black;
    }
}

@media (min-width: 1024px) {
    .artemis-debug-breakpoint::before {
        content: 'LG';
        background: rgba(0, 255, 0, 0.8);
        color: black;
    }
}

@media (min-width: 1280px) {
    .artemis-debug-breakpoint::before {
        content: 'XL';
        background: rgba(0, 0, 255, 0.8);
    }
}

@media (min-width: 1536px) {
    .artemis-debug-breakpoint::before {
        content: '2XL';
        background: rgba(128, 0, 128, 0.8);
    }
}

/* ===================================================================
   CRITICAL FIX: MOBILE OVERFLOW (OCT 26, 2025 - UX AUDIT)
   Impact: 0/3 mobile breakpoints → 3/3 mobile breakpoints passing
   Issue: Horizontal scrolling required on 320px, 375px, 414px devices
   =================================================================== */

* {
  box-sizing: border-box !important;
}

html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-sidebar,
.sidebar {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.header,
.header-container {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.header-left,
.header-right {
  max-width: none !important;
  overflow-x: visible !important;
  flex-shrink: 1 !important;
  flex-wrap: nowrap !important;  /* Changed from wrap to nowrap - mobile fix Oct 27 */
}

.header-right {
  gap: 4px !important;
}

.header-btn,
.connect-btn,
.export-btn {
  padding: 6px 8px !important;
  font-size: 12px !important;
  flex-shrink: 1 !important;
}

.btn-text {
  display: none !important;
}

.segment-card,
.card,
.content-card {
  max-width: 100% !important;
  min-width: unset !important;
  overflow-x: hidden !important;
}

.chat-widget,
.chat-container,
.artemis-assistant {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

img {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 414px) {
  .header-container {
    padding: 8px 12px;
  }

  .nav-sidebar {
    width: 100vw;
    left: 0;
    right: 0;
  }

  .header-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  .segment-card {
    min-width: unset;
    width: 100%;
  }

  .chat-widget {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
  }

  .business-type-btn,
  .tell-sports-btn {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 375px) {
  .header-container {
    padding: 6px 10px;
    font-size: 14px;
  }

  .header-btn {
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* Logo styling - preserve aspect ratio on all devices */
.logo-image {
  height: 40px;
  width: auto;
  object-fit: contain; /* Prevents distortion */
  display: block;
}

@media (max-width: 320px) {
  .header-container {
    padding: 4px 8px;
    font-size: 12px;
  }

  .logo-image {
    height: 40px; /* Smaller on tiny screens */
    width: auto;
    /* object-fit: contain inherited from base rule */
  }
}
/*!
 * Artemis Mobile UX Fixes - CORRECTED CLASS NAMES
 * Date: October 27, 2025
 * Version: 1.0 (Verified Against Actual HTML)
 *
 * IMPORTANT: These class names have been verified to exist in the HTML.
 * Copy-paste these fixes into artemis-responsive.css
 */

/* ============================================
   P0 FIX #1: Mobile Sidebar Navigation
   Issue: First menu item "AI Assistant" cut off
   Target: .sidebar (VERIFIED - exists in index.html:106)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: var(--artemis-header-height, 73px); /* Match header height */
    left: 0; /* Keep at edge, use transform to hide */
    width: var(--artemis-sidebar-width, 200px);
    height: calc(100vh - var(--artemis-header-height, 73px)); /* Adjust height to fit below header */
    z-index: 998;
    transform: translateX(-100%); /* Hidden off-screen */
    transition: transform 0.3s ease; /* Animate transform, not left */
    background: var(--color-surface, #ffffff);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .sidebar.active {
    transform: translateX(0); /* Slide into view */
  }

  /* Ensure navigation items have proper padding at top */
  .sidebar-nav {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* Ensure first navigation link is visible */
  .sidebar-nav a:first-child,
  .nav-item:first-child {
    margin-top: 0;
  }

  /* Dark mode support */
  [data-theme="dark"] .sidebar,
  .dark-mode .sidebar {
    background: var(--color-surface-dark, #1a1a1a);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
  }
}

/* Tablet breakpoint - keep sidebar visible */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    top: 60px;
    left: 0;
    height: calc(100vh - 60px);
  }
}

/* ============================================
   P0 FIX #2: Dark Mode ZIP Section (CORRECTED)
   Issue: White box appears in dark mode
   Target: .zip-input-container, .zip-input, .zip-tags (VERIFIED)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

/* Light mode defaults */
:root {
  --color-surface: #ffffff;
  --color-surface-elevated: #f9fafb;
  --color-input-background: #ffffff;
  --color-input-border: #d1d5db;
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-icon: #9ca3af;
}

/* Dark mode */
[data-theme="dark"],
.dark-mode {
  --color-surface: #1a1a1a;
  --color-surface-elevated: #2a2a2a;
  --color-input-background: #2a2a2a;
  --color-input-border: #444444;
  --color-text-primary: #ffffff;
  --color-text-secondary: #d1d5db;
  --color-icon: #9ca3af;
}

/* ZIP Code Section - Universal (Light & Dark) */
.zip-input-container {
  background-color: var(--color-surface-elevated);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.zip-input {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--color-input-background);
  border: 2px solid var(--color-input-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 16px;
  transition: all 0.2s ease;
}

.zip-input:focus {
  outline: none;
  /* Cloudline Modern - Accent focus ring */
  border-color: var(--artemis-accent, #8E7CC3);
  box-shadow: 0 0 0 3px rgba(142, 124, 195, 0.15);
}

.zip-input::placeholder {
  color: var(--color-text-secondary);
}

/* ZIP tags container - CORRECTED from .zip-code-list */
.zip-tags {
  background-color: var(--color-surface);
  border-radius: 8px;
  padding: 12px;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--color-input-border);
}

/* ZIP add button */
.zip-add-btn {
  padding: 12px 16px;
  /* Cloudline Modern - Electric Violet gradient */
  background: linear-gradient(135deg, var(--artemis-accent, #8E7CC3) 0%, var(--artemis-accent-hover, #A08DD6) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(142, 124, 195, 0.3);
}

.zip-add-btn:hover {
  transform: translateY(-1px);
  /* Cloudline Modern - Enhanced glow on hover */
  box-shadow: 0 6px 16px rgba(142, 124, 195, 0.4);
}

/* Dark mode specific adjustments */
[data-theme="dark"] .zip-input-container,
.dark-mode .zip-input-container {
  background-color: var(--color-surface-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .zip-input,
.dark-mode .zip-input {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .zip-input:focus,
.dark-mode .zip-input:focus {
  /* Cloudline Modern - Dark: Glowing accent focus ring */
  border-color: var(--artemis-accent, #A08DD6);
  box-shadow: 0 0 0 3px rgba(160, 141, 214, 0.25), 0 0 20px rgba(160, 141, 214, 0.2);
}

[data-theme="dark"] .zip-tags,
.dark-mode .zip-tags {
  background-color: var(--color-surface);
  border-color: var(--color-input-border);
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] .zip-tags::-webkit-scrollbar,
.dark-mode .zip-tags::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] .zip-tags::-webkit-scrollbar-track,
.dark-mode .zip-tags::-webkit-scrollbar-track {
  background: var(--color-surface-elevated);
  border-radius: 4px;
}

[data-theme="dark"] .zip-tags::-webkit-scrollbar-thumb,
.dark-mode .zip-tags::-webkit-scrollbar-thumb {
  background: var(--color-input-border);
  border-radius: 4px;
}

[data-theme="dark"] .zip-tags::-webkit-scrollbar-thumb:hover,
.dark-mode .zip-tags::-webkit-scrollbar-thumb:hover {
  background: #666666;
}

/* ============================================
   P0 FIX #3: Body Overflow Scrolling (CORRECTED)
   Issue: Body overflow hidden prevents scrolling
   Target: body, .content (VERIFIED - .content is main container)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

body {
  overflow: visible; /* Allow normal body scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  overscroll-behavior-y: none; /* Prevent pull-to-refresh on mobile */
  position: relative;
}

/* Prevent iOS bounce scroll without breaking scrolling */
html {
  overscroll-behavior-y: none;
  height: 100%;
}

/* Main content area should be scrollable - CORRECTED to .content */
.content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  min-height: calc(100vh - 60px);
}

/* ============================================
   P1 FIX #4: Header Button Crowding (CORRECTED)
   Issue: Too many buttons in header on mobile
   Target: .connect-btn, .header-right (VERIFIED)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

@media (max-width: 768px) {
  /* Hide database status button on mobile - CORRECTED class name */
  .connect-btn {
    display: none;
  }

  /* Add database status to footer instead */
  .footer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: var(--color-surface-elevated);
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
  }

  .footer-status-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

  /* Reduce button padding on mobile - CORRECTED to .header-right */
  .header-right button {
    padding: 8px 12px;
    font-size: 0.875rem;
  }

  /* Icon-only mode for buttons with text */
  .header-btn .btn-text {
    display: none;
  }

  /* Adjust notification badge size */
  .notification-badge {
    padding: 2px 6px;
    font-size: 0.75rem;
  }

  /* Stack header actions for very small screens */
  @media (max-width: 375px) {
    .header-right {
      gap: 4px;
    }
  }
}

/* Show database status in desktop */
@media (min-width: 769px) {
  .footer-status {
    display: none;
  }

  .connect-btn {
    display: inline-flex;
  }
}

/* ============================================
   P1 FIX #5: Database Status Button Text (CORRECTED)
   Issue: Text truncation on small screens
   Target: .connect-btn (VERIFIED)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

@media (max-width: 768px) {
  .connect-btn {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
}

/* ============================================
   P1 FIX #6: Quick Start Button Grid (CORRECTED)
   Issue: Buttons too close together
   Target: .business-type-buttons, .business-type-btn (VERIFIED)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

@media (max-width: 768px) {
  /* CORRECTED class names from HTML */
  .business-type-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* Increased from default */
    padding: 16px;
  }

  .business-type-btn {
    min-height: 88px; /* WCAG AAA: 44x44 doubled for safety */
    padding: 16px 12px;
    border-radius: 12px;
    font-size: 0.9375rem;
  }

  .business-type-btn i {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
  }
}

/* Geofencing page uses different class name */
@media (max-width: 768px) {
  .business-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .business-type-card {
    min-height: 88px;
    padding: 16px 12px;
  }
}

/* Single column for very small screens */
@media (max-width: 360px) {
  .business-type-buttons,
  .business-types-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   P1 FIX #7: Chat Widget FAB Position (CORRECTED)
   Issue: FAB positioned in corner, hard to reach
   Target: .mobile-chat-fab (VERIFIED)
   Status: ✅ SAFE TO DEPLOY
   ============================================ */

@media (max-width: 768px) {
  .mobile-chat-fab {
    /* Move to bottom-center for better thumb reach */
    position: fixed;
    bottom: 24px;
    right: 50%;
    transform: translateX(50%);
    width: 60px;
    height: 60px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
  }

  /* Add label above FAB on mobile */
  .mobile-chat-fab::before {
    content: 'Need help?';
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mobile-chat-fab:hover::before {
    opacity: 1;
  }
}

/* ============================================
   END OF CORRECTED MOBILE FIXES
   ============================================ */

/* ============================================
   MOBILE FIX: Remove Height Constraints on Content Pages
   Date: October 28, 2025
   Issue: 58-72% of content cut off on mobile devices
   Pages Affected: Geofencing, HTML5 Ads
   Root Cause: Desktop-first layout with viewport-locked heights
   Fix Type: Surgical (Option A)
   ============================================ */

@media (max-width: 768px) {
  /* Fix geofencing-specific overflow - increased specificity */
  main.geo-main,
  main.main-content.geo-main {
    overflow-y: auto !important;
    overflow: auto !important;
    height: auto !important;
  }

  /* Fix main content overflow (all pages) */
  main,
  main.main-content {
    overflow-y: auto !important;
    overflow: auto !important;
    height: auto !important;
  }

  /* Allow app container to grow with content */
  .app-container {
    height: auto !important;
    max-height: none !important;
    min-height: calc(100vh - 93px); /* Maintain minimum height */
    overflow-y: visible !important;
  }
}

/*
 * DEPLOYMENT INSTRUCTIONS:
 *
 * 1. Copy this entire file
 * 2. Paste at the END of: /Users/cullari/artemis-superior-app/shared/artemis-responsive.css
 * 3. Deploy using: ./deploy_mobile_fixes_safe_oct27.sh
 * 4. Test on real mobile devices
 *
 * ROLLBACK:
 * If issues occur, remove everything from "P0 FIX #1" onwards from artemis-responsive.css
 */

/* ========================================================================
   CRITICAL FIX #1: Z-Index and Pointer Events (Oct 30, 2025)
   Issue: Element layering and interaction problems on mobile
   Mobile UX Analysis: FAB and hamburger menu interaction issues
   ======================================================================== */

/* FAB Button - Highest Z-Index for Accessibility */
#artemis-chat-bubble,
.artemis-chat-bubble {
  z-index: 10000 !important; /* Above all navigation and backdrop */
  position: fixed !important;
  bottom: 20px;
  right: 20px;
  pointer-events: auto !important; /* Ensure it's clickable */
}

/* Hamburger Menu Button - Must be clickable */
.hamburger,
button.hamburger,
.sidebar-toggle {
  z-index: 10002 !important; /* Above header, below modal */
  position: relative !important;
  pointer-events: auto !important; /* Ensure it's clickable */
}

/* Ensure header stays above backdrop but below chat */
header.header,
.artemis-global-header,
.header {
  z-index: 10001 !important; /* Above backdrop */
  position: relative;
  pointer-events: auto !important;
}

/* Sidebar must be above backdrop */
.sidebar {
  z-index: 999 !important;
  pointer-events: auto !important;
}

/* Sidebar overlay/backdrop should not block header buttons */
.sidebar-overlay,
.backdrop {
  z-index: 998 !important; /* Below sidebar */
  pointer-events: auto !important; /* Allow clicks to close sidebar */
}

/* Ensure header buttons are never blocked */
@media (max-width: 768px) {
  .header button,
  header button,
  .header-right button {
    position: relative !important;
    z-index: 10003 !important; /* Above hamburger menu */
    pointer-events: auto !important;
  }
}

/* ========================================================================
   HIGH PRIORITY FIX #4: Touch Target Sizes (Oct 30, 2025)
   Issue: Buttons below 44x44px minimum (iOS HIG)
   Mobile UX Analysis: FAB 36x36px, header buttons 36x36px
   ======================================================================== */

@media (max-width: 768px) {
  /* FAB Button - Large Touch Target */
  #artemis-chat-bubble,
  .artemis-chat-bubble,
  button[aria-label*="Open chat"] {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Header Buttons - Minimum 44x44px (iOS HIG Compliant) */
  .header button,
  .artemis-global-header button,
  header button,
  .header-right button,
  .header-left button,
  button[aria-label*="Toggle"],
  button[aria-label*="Settings"],
  button[aria-label*="Open Chat"],
  .header .btn-icon,
  header .btn-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .btn-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Hamburger Menu Button */
  .hamburger,
  button.hamburger,
  .sidebar-toggle,
  button[aria-label*="navigation"] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Business Type Selection Buttons - Larger for Primary Actions */
  .business-type-btn,
  .business-card,
  button[class*="business"],
  button h3 {
    min-height: 56px !important;
    padding: 16px !important;
    touch-action: manipulation; /* Disable double-tap zoom */
  }

  /* Chat Send Button */
  button[aria-label*="Send"],
  .artemis-send-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  /* All buttons get touch-friendly spacing */
  button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* ========================================================================
   MEDIUM PRIORITY FIX #5: Hero Heading Font Size (Oct 30, 2025)
   Issue: h1 same size as body text (18px)
   Mobile UX Analysis: Hero heading not prominent enough
   ======================================================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 16px;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 12px;
  }

  h3 {
    font-size: 18px !important;
    line-height: 1.4;
    font-weight: 600;
  }

  /* Ensure hero text is prominent */
  .hero h1,
  .hero-section h1,
  [class*="hero"] h1 {
    font-size: 32px !important;
    line-height: 1.2;
  }
}

/* ========================================================================
   BONUS: Mobile UX Enhancements
   ======================================================================== */

@media (max-width: 768px) {
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Better tap feedback */
  button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }

  /* Focus visible for accessibility */
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  /* Chat widget full height on mobile */
  .artemis-chat-widget,
  #artemis-chat-widget,
  [role="dialog"][class*="artemis"] {
    height: 90vh !important;
    max-height: 90vh;
  }

  /* Input area sticks to bottom */
  .artemis-input-container {
    position: sticky;
    bottom: 0;
  }

  /* Prevent text size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ========================================================================
   END OF MOBILE UX CRITICAL FIXES - October 30, 2025
   ======================================================================== */