/**
 * Mobile Enhancements
 * ===================
 * Additional responsive optimizations for mobile devices.
 * Complements _mobile_accessibility_fixes.css with UX improvements.
 */

/* ========================================
 * VIEWPORT & SCALING
 * ======================================== */

@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Better text sizing for mobile */
  html {
    font-size: 16px; /* Prevent iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ========================================
 * NARRATIVE INPUT AREA
 * ======================================== */

@media (max-width: 768px) {
  /* Larger input area on mobile */
  .narrative-input {
    min-height: 60px;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: var(--space-3) !important;
    border-radius: var(--radius-lg);
  }

  /* Make send button more prominent */
  .narrative-input-container .btn,
  .narrative-send-btn,
  button[type="submit"] {
    min-width: 80px;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
  }

  /* Input container spacing */
  .narrative-input-container,
  .terminal-input-area {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  /* Suggestions need more touch space */
  .suggestion-btn,
  .quick-action-btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    border-radius: var(--radius-md);
  }
}

/* ========================================
 * SCROLL CONTAINERS
 * ======================================== */

@media (max-width: 768px) {
  /* Smooth momentum scrolling on iOS */
  .narrative-box,
  .split-panel__content,
  .panel-content,
  .modal-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Scroll snap for panels on very small screens */
  .mobile-mode .split-layout-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .mobile-mode .split-child.mobile-active {
    scroll-snap-align: center;
  }
}

/* ========================================
 * FILTER BUTTONS
 * ======================================== */

@media (max-width: 768px) {
  /* Horizontal scroll for filter buttons */
  .narrative-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .narrative-filters::-webkit-scrollbar {
    display: none;
  }

  /* Larger touch targets for filter buttons */
  .nf-btn {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ========================================
 * TOOLTIPS ON MOBILE
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Make tooltips tap-dismissable */
  .help-tooltip,
  .unified-tooltip,
  [role="tooltip"] {
    max-width: calc(100vw - 32px);
  }

  /* Position tooltips in center on mobile */
  .help-tooltip {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* ========================================
 * MODALS ON MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Full-screen modals on mobile */
  .detail-modal,
  .unified-modal,
  .modal-content {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    margin: 0;
  }

  /* Sticky modal headers */
  .modal-header,
  .detail-modal__header,
  .unified-modal__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-secondary);
  }

  /* Larger close buttons */
  .modal-close,
  .detail-modal__close,
  .unified-modal__close {
    min-width: 48px;
    min-height: 48px;
    font-size: 24px;
  }
}

/* ========================================
 * CHARACTER SHEET MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack character stats vertically */
  .cs-stats-grid,
  .character-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  /* Make stat blocks more tappable */
  .cs-stat-box,
  .ability-score-box {
    min-height: 64px;
    padding: var(--space-3);
  }

  /* Larger inventory items */
  .inventory__item,
  .equipment-slot {
    min-height: 52px;
    padding: var(--space-3);
  }
}

/* ========================================
 * COMBAT PANEL MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack combatant cards */
  .combat-tracker__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Larger action buttons */
  .combat-action-btn {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
  }

  /* Bigger initiative badges */
  .initiative-badge {
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
  }
}

/* ========================================
 * QUEST LOG MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack quest cards */
  .quest-log__quests {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Larger objective checkboxes */
  .objective-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-sm);
  }

  /* Better objective spacing */
  .quest-objective {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================
 * DICE ROLLING MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Larger dice buttons */
  .roll-menu__dice-btn,
  .dice-btn {
    min-width: 56px;
    min-height: 56px;
    font-size: 18px;
    border-radius: var(--radius-lg);
  }

  /* Grid layout for dice buttons */
  .roll-menu__dice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  /* Larger roll results */
  .roll-result {
    font-size: 28px;
    padding: var(--space-4);
  }
}

/* ========================================
 * SPELLBOOK MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Larger spell slot indicators */
  .spell-slot {
    min-width: 44px;
    min-height: 44px;
  }

  /* Better spell card layout */
  .spell-card {
    padding: var(--space-3);
  }

  /* Larger cast buttons */
  .spell-cast-btn {
    min-height: 48px;
    font-size: 14px;
  }
}

/* ========================================
 * DROPDOWN MENUS MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Full-width dropdowns on mobile */
  .dropdown-menu,
  .panel-dropdown__menu {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto !important;
    max-height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Larger dropdown items */
  .dropdown-item,
  .panel-dropdown__item {
    min-height: 52px;
    padding: var(--space-4);
    font-size: 16px;
  }

  /* Add backdrop */
  .dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium-plus);
    z-index: calc(var(--z-dropdown) - 1);
  }
}

/* ========================================
 * STATUS BAR MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Compact status bar */
  .status-bar {
    padding: var(--space-1) var(--space-2);
    font-size: 11px;
    gap: var(--space-1);
  }

  /* Hide less important status items */
  .status-bar__item--secondary {
    display: none;
  }

  /* Ensure important items are visible */
  .status-bar__item--primary {
    flex-shrink: 0;
  }
}

/* ========================================
 * VERY SMALL SCREENS (< 375px)
 * ======================================== */

@media (max-width: 375px) {
  /* Even more compact layouts */
  .cs-stats-grid,
  .character-abilities {
    grid-template-columns: repeat(2, 1fr);
  }

  .roll-menu__dice-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Smaller but readable text */
  .narrative-box,
  .split-panel__content {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ========================================
 * PORTRAIT PHONE OPTIMIZATION
 * ======================================== */

@media (max-width: 480px) and (orientation: portrait) {
  /* Maximize vertical space */
  .mobile-panel-switcher {
    padding: 4px 8px;
  }

  .split-panel__header {
    padding: 2px var(--space-2);
    min-height: 28px;
  }

  /* More room for content */
  .narrative-panel-content {
    height: calc(100% - 36px); /* Account for compact switcher */
  }
}

/* ========================================
 * LANDSCAPE PHONE OPTIMIZATION
 * ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Hide non-essential chrome */
  .split-panel__header {
    display: none;
  }

  .mobile-panel-switcher {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-default);
    z-index: var(--z-fixed);
  }

  /* Adjust content for bottom tabs */
  .split-layout-container {
    padding-bottom: 44px;
  }
}

/* ========================================
 * TOUCH OPTIMIZATIONS
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects that feel weird on touch */
  .btn:hover,
  .mobile-panel-switcher__btn:hover {
    /* Keep same as default state */
  }

  /* Add active states instead */
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  /* Prevent text selection on interactive elements */
  button,
  .btn,
  .clickable,
  [role="button"] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* Remove tap highlight color */
  button,
  a,
  .btn,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }
}