/**
 * ===============================================================================================
 * LOFI SWAP MODAL - COMPREHENSIVE MOBILE RESPONSIVENESS
 * ===============================================================================================
 * 
 * This file ensures the swap modal is perfectly usable on ALL mobile devices.
 * Features:
 * - Mobile-first design approach
 * - Touch-friendly interactions
 * - Bottom sheet style on mobile
 * - Smooth scrolling when needed
 * - Safe area handling for notched devices
 * - Landscape orientation support
 * 
 * ===============================================================================================
 */

/* ===============================================================================================
 * CSS VARIABLES FOR MOBILE
 * ===============================================================================================
 */

:root {
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-safe-area-right: env(safe-area-inset-right, 0px);
  --mobile-tap-target: 44px;
  --mobile-modal-radius: 24px;
}

/* ===============================================================================================
 * MOBILE MODAL OVERLAY
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Full screen overlay on mobile */
  #lofi-swap-modal,
  #simple-lofi-swap-modal {
    padding: 0;
    align-items: flex-end; /* Bottom sheet style */
  }

  /* Bottom sheet container */
  .lofi-swap-container,
  .simple-swap-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - var(--mobile-safe-area-top) - 20px);
    height: auto;
    border-radius: var(--mobile-modal-radius) var(--mobile-modal-radius) 0 0;
    animation: mobileSlideUp 0.3s ease-out;
    transform: translateY(0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  @keyframes mobileSlideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Modal close animation */
  .lofi-swap-container.closing,
  .simple-swap-container.closing {
    animation: mobileSlideDown 0.3s ease-out;
  }

  @keyframes mobileSlideDown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
}

/* ===============================================================================================
 * MOBILE HEADER
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid rgba(138, 138, 237, 0.2);
    
    /* Drag handle indicator */
    &::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      background: rgba(138, 138, 237, 0.3);
      border-radius: 2px;
    }
  }

  .lofi-modal-header h2 {
    font-size: 18px;
    margin-top: 8px; /* Space for drag handle */
  }

  /* Larger close button for mobile */
  .lofi-modal-close {
    min-width: var(--mobile-tap-target);
    min-height: var(--mobile-tap-target);
    font-size: 24px;
    padding: 10px;
    margin: -10px -10px 0 0;
  }
}

/* ===============================================================================================
 * MOBILE CONTENT
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-content {
    padding: 16px;
    padding-bottom: calc(16px + var(--mobile-safe-area-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }

  /* Token sections with better spacing */
  .lofi-swap-token-section {
    padding: 16px;
    margin-bottom: 12px;
  }

  /* Larger input text for mobile */
  .lofi-swap-input {
    font-size: 24px;
    min-height: 40px;
    /* Prevent zoom on focus */
    touch-action: manipulation;
  }

  /* Prevent iOS zoom on input focus */
  .lofi-swap-input:focus {
    font-size: 24px;
  }

  /* Touch-friendly token selector */
  .lofi-token-selector {
    min-height: var(--mobile-tap-target);
    padding: 12px 16px;
  }

  /* Balance display adjustments */
  .lofi-balance-display {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Touch-friendly MAX button */
  .lofi-max-button {
    min-width: 44px;
    min-height: 28px;
    padding: 6px 12px;
    font-size: 10px;
  }
}

/* ===============================================================================================
 * MOBILE SWAP BUTTON
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Sticky swap button at bottom */
  .lofi-swap-button {
    position: sticky;
    bottom: 0;
    margin: 16px 0 0 0;
    padding: 16px;
    font-size: 16px;
    min-height: 56px;
    border-radius: 12px;
    z-index: 5;
    
    /* Add bottom safe area padding */
    margin-bottom: var(--mobile-safe-area-bottom);
  }

  /* Ensure button is always visible */
  .lofi-swap-content {
    padding-bottom: calc(80px + var(--mobile-safe-area-bottom));
  }
}

/* ===============================================================================================
 * MOBILE SLIPPAGE CONTROLS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-slippage-presets {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .lofi-slippage-preset {
    min-height: 40px;
    padding: 10px;
    font-size: 13px;
  }

  .lofi-slippage-input {
    width: 100%;
    min-height: 40px;
    font-size: 16px; /* Prevent zoom */
  }
}

/* ===============================================================================================
 * MOBILE TRANSACTION LIST
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Swipeable transaction items */
  .lofi-transaction-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Swipe to dismiss indicator */
  .lofi-transaction-item::after {
    content: 'Swipe to dismiss';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #8898cd;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .lofi-transaction-item.swiping::after {
    opacity: 1;
  }

  /* Smaller transaction items on mobile */
  .lofi-transaction-details {
    font-size: 13px;
  }

  .lofi-transaction-time {
    font-size: 11px;
  }
}

/* ===============================================================================================
 * MOBILE DETAIL ROWS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-details {
    font-size: 13px;
    padding: 12px;
    margin: 16px 0;
  }

  .lofi-swap-detail-row {
    padding: 8px 0;
  }

  /* Stack long values on mobile */
  .lofi-price-value {
    word-break: break-all;
  }
}

/* ===============================================================================================
 * SMALL MOBILE DEVICES (iPhone SE, etc.)
 * ===============================================================================================
 */

@media (max-width: 375px) {
  /* Even more compact spacing */
  .lofi-swap-content {
    padding: 12px;
  }

  .lofi-swap-token-section {
    padding: 14px;
  }

  /* Smaller input text */
  .lofi-swap-input {
    font-size: 20px;
  }

  /* Compact header */
  .lofi-modal-header h2 {
    font-size: 16px;
  }

  /* Smaller swap details */
  .lofi-swap-details {
    font-size: 12px;
  }

  /* Adjust recent transactions */
  .lofi-recent-section {
    margin-top: 20px;
  }
}

/* ===============================================================================================
 * LANDSCAPE ORIENTATION
 * ===============================================================================================
 */

@media (max-height: 500px) and (orientation: landscape) {
  .lofi-swap-container,
  .simple-swap-container {
    max-height: calc(100vh - 20px);
    border-radius: 0;
  }

  /* Horizontal layout for token sections */
  @media (min-width: 568px) {
    .lofi-swap-content {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      align-items: start;
    }

    .lofi-swap-reverse-container {
      grid-column: 2;
      align-self: center;
    }

    .lofi-swap-details,
    .lofi-swap-button {
      grid-column: 1 / -1;
    }
  }

  /* Hide recent transactions in landscape */
  .lofi-recent-section {
    display: none;
  }
}

/* ===============================================================================================
 * TOUCH INTERACTIONS
 * ===============================================================================================
 */

/* Touch feedback for all interactive elements */
@media (hover: none) and (pointer: coarse) {
  .lofi-swap-button,
  .lofi-max-button,
  .lofi-slippage-preset,
  .lofi-token-selector,
  .lofi-modal-close,
  .lofi-swap-reverse-button {
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  .lofi-swap-button:active,
  .lofi-max-button:active,
  .lofi-slippage-preset:active,
  .lofi-token-selector:active,
  .lofi-modal-close:active,
  .lofi-swap-reverse-button:active {
    transform: scale(0.95);
    opacity: 0.8;
  }

  /* Disable hover effects on touch devices */
  .lofi-swap-button:hover,
  .lofi-max-button:hover,
  .lofi-slippage-preset:hover,
  .lofi-token-selector:hover {
    transform: none;
  }
}

/* ===============================================================================================
 * MOBILE LOADING STATES
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Full screen loading overlay */
  .lofi-swap-container.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 62, 0.95);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Centered spinner */
  .lofi-swap-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(168, 184, 237, 0.2);
    border-top-color: #a8b8ed;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 101;
  }
}

/* ===============================================================================================
 * MOBILE MESSAGES
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-message {
    font-size: 13px;
    padding: 10px 14px;
    margin-top: 12px;
  }

  /* Toast-style messages on mobile */
  .lofi-swap-message.toast {
    position: fixed;
    bottom: calc(80px + var(--mobile-safe-area-bottom));
    left: 16px;
    right: 16px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* ===============================================================================================
 * MOBILE SCROLLBAR
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Hide scrollbar on mobile but keep functionality */
  .lofi-swap-content::-webkit-scrollbar {
    display: none;
  }

  .lofi-swap-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ===============================================================================================
 * MOBILE QUICK ACTIONS (if re-enabled)
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .lofi-quick-action {
    min-height: 44px;
    font-size: 13px;
    padding: 10px;
  }
}

/* ===============================================================================================
 * MOBILE REVERSE BUTTON
 * ===============================================================================================
 */

@media (max-width: 767px) {
  .lofi-swap-reverse-container {
    margin: -6px 0;
  }

  .lofi-swap-reverse-button {
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}

/* ===============================================================================================
 * TABLET ADJUSTMENTS (iPad, etc.)
 * ===============================================================================================
 */

@media (min-width: 768px) and (max-width: 1024px) {
  .lofi-swap-container {
    max-width: 520px;
  }

  /* Slightly larger touch targets on tablets */
  .lofi-swap-button {
    min-height: 52px;
  }

  .lofi-slippage-preset {
    min-height: 36px;
  }
}

/* ===============================================================================================
 * ACCESSIBILITY ON MOBILE
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Larger focus outlines on mobile */
  .lofi-swap-button:focus,
  .lofi-modal-close:focus,
  .lofi-slippage-preset:focus,
  .lofi-max-button:focus {
    outline: 3px solid rgba(138, 138, 237, 0.8);
    outline-offset: 2px;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .lofi-swap-container {
      border: 2px solid white;
    }

    .lofi-swap-button {
      border: 2px solid white;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .lofi-swap-container {
      animation: none;
      transition: none;
    }

    .lofi-swap-button,
    .lofi-max-button,
    .lofi-slippage-preset {
      transition: none;
    }
  }
}

/* ===============================================================================================
 * NOTCH AND SAFE AREAS
 * ===============================================================================================
 */

/* iPhone X and newer */
@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .lofi-modal-header {
      padding-top: max(16px, var(--mobile-safe-area-top));
    }

    .lofi-swap-content {
      padding-left: max(16px, var(--mobile-safe-area-left));
      padding-right: max(16px, var(--mobile-safe-area-right));
      padding-bottom: max(calc(80px + 16px), calc(80px + var(--mobile-safe-area-bottom)));
    }

    .lofi-swap-button {
      margin-bottom: max(0px, var(--mobile-safe-area-bottom));
    }
  }
}

/* ===============================================================================================
 * PERFORMANCE OPTIMIZATIONS
 * ===============================================================================================
 */

@media (max-width: 767px) {
  /* Use GPU acceleration for animations */
  .lofi-swap-container {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Optimize repaints */
  .lofi-swap-input,
  .lofi-slippage-input {
    will-change: auto;
  }

  /* Reduce shadows on mobile for performance */
  .lofi-swap-container {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }

  .lofi-swap-token-section {
    box-shadow: none;
    border: 1px solid rgba(138, 138, 237, 0.2);
  }
}