/**
 * 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: var(--font-size-lg); /* 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: var(--font-size-md);
  }

  /* 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: var(--font-size-md);
    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: var(--font-size-sm);
    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: var(--font-size-3xl);
  }
}

/* ========================================
 * 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: var(--font-size-md);
  }

  /* Bigger initiative badges */
  .initiative-badge {
    min-width: 40px;
    min-height: 40px;
    font-size: var(--font-size-lg);
  }
}

/* ========================================
 * 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: var(--font-size-xl);
    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: var(--font-size-3xl);
    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: var(--font-size-md);
  }
}

/* ========================================
 * 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: var(--font-size-lg);
  }

  /* 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: var(--font-size-sm);
    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: var(--font-size-md);
    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,
  button:active,
  [role="button"]:active {
    transform: scale(0.96);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /* 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;
  }

  /* Touch ripple effect for interactive elements */
  .touch-interactive {
    position: relative;
    overflow: hidden;
  }

  .touch-interactive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    pointer-events: none;
  }

  .touch-interactive:active::after {
    width: 250%;
    height: 250%;
    opacity: 1;
    transition: none;
  }

  /* Improved touch feedback for list items */
  .cs-skill-item:active,
  .cs-ability-item:active,
  .cs-save-item:active,
  .cs-inventory-item:active,
  .narrative-entry:active,
  .clickable:active {
    background: var(--color-bg-hover, rgba(255, 255, 255, 0.1));
    transform: scale(0.99);
  }

  /* Larger touch areas for small buttons */
  .split-panel__action {
    min-width: 44px;
    min-height: 44px;
  }

  /* Better touch feedback on panel tabs */
  .mobile-panel-switcher__btn:active {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(0.95);
  }
}

/* ========================================
 * SWIPE GESTURE SUPPORT
 * ======================================== */

@media (max-width: 768px) {
  /* Enable horizontal swipe on panel container */
  .swipe-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .swipe-container::-webkit-scrollbar {
    display: none;
  }

  .swipe-container > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
  }

  /* Swipe indicator dots */
  .swipe-indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .swipe-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }

  .swipe-indicator.active {
    background: var(--color-accent-primary);
    transform: scale(1.25);
  }

  /* Pull-to-refresh styling */
  .pull-to-refresh {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    transition: top 0.3s ease;
  }

  .pull-to-refresh.pulling {
    top: 10px;
  }

  .pull-to-refresh.refreshing {
    top: 10px;
  }

  .pull-to-refresh .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-text-muted);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}

/* ========================================
 * EDGE SWIPE NAVIGATION
 * ======================================== */

@media (max-width: 768px) {
  /* Edge swipe zone indicator */
  .edge-swipe-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: var(--z-sticky);
    pointer-events: none;
  }

  .edge-swipe-zone--left {
    left: 0;
  }

  .edge-swipe-zone--right {
    right: 0;
  }

  .edge-swipe-zone.active {
    background: linear-gradient(
      to right,
      rgba(97, 175, 239, 0.2),
      transparent
    );
  }

  .edge-swipe-zone--right.active {
    background: linear-gradient(
      to left,
      rgba(97, 175, 239, 0.2),
      transparent
    );
  }
}