/* ========================================
   MESHCUE MOBILE UX FIXES
   Addresses issues from mobile screenshots
   ======================================== */

/* FIX: Onboarding overlay - ensure only active step shows */
.onboarding-overlay .onboarding-step {
  display: none !important;
}

.onboarding-overlay .onboarding-step.active {
  display: block !important;
}

/* Mobile-first improvements */
@media (max-width: 768px) {

  /* Fix search input width - full-width on mobile */
  .search-input-wrap,
  .chat-input-wrap {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    bottom: 70px !important;
  }

  /* Better touch targets */
  .search-input-field,
  .chat-input-field {
    min-height: 56px !important;
    padding: 16px 20px !important;
    border-radius: 28px !important;
  }

  /* Profile/Interests section - fix cluttered layout */
  .greeting-section {
    padding: 24px 16px !important;
  }

  .greeting-prompt {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .greeting-subtitle {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Interests tags - better spacing */
  #interests {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  #interests .interest-tag {
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
  }

  /* Contact/Add Contact buttons - better layout */
  .contact-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .contact-actions button {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* Sign-in form improvements */
  .login-container {
    padding: 24px 20px !important;
    margin: 0 16px !important;
    border-radius: 24px !important;
  }

  .login-title {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }

  .auth-form input {
    min-height: 52px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .auth-form button[type="submit"] {
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin-top: 8px !important;
  }

  /* Fix offline bar */
  #offlineBar {
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
  }

  /* Navigation/Footer - better touch targets */
  .nav-item, .footer-item {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
  }

  /* Modals - full screen on mobile */
  .modal-content {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    max-height: calc(100vh - 40px) !important;
    margin: 20px 16px !important;
    border-radius: 20px !important;
  }

  /* Cards - better mobile layout */
  .card {
    margin: 0 16px 16px 16px !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Text readability */
  body {
    font-size: 16px !important; /* Prevents iOS zoom */
    -webkit-text-size-adjust: 100% !important;
  }

  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }

  /* Remove horizontal scroll */
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Better spacing for scrollable content */
  .main-content {
    padding-bottom: 140px !important; /* Account for fixed footer + search */
  }

  /* Identity code input - better UX */
  input[placeholder*="identity code"],
  input[placeholder*="Paste identity"] {
    font-family: monospace !important;
    letter-spacing: 2px !important;
    font-size: 18px !important;
    text-align: center !important;
  }

  /* Search results - better mobile layout */
  .search-results {
    padding: 16px !important;
  }

  .search-result-item {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  /* Loading states */
  .loading-spinner {
    width: 32px !important;
    height: 32px !important;
  }

  /* Badges and pills */
  .badge, .pill {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
  }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
  .greeting-prompt {
    font-size: 24px !important;
  }

  .search-input-field {
    padding: 14px 16px !important;
  }

  .auth-form input,
  .auth-form button {
    font-size: 15px !important;
  }
}

/* Landscape mobile - prevent layout breaks */
@media (max-height: 500px) and (orientation: landscape) {
  .greeting-section {
    padding: 16px !important;
  }

  .search-input-wrap,
  .chat-input-wrap {
    position: relative !important;
    bottom: auto !important;
    margin: 16px !important;
  }

  .main-content {
    padding-bottom: 80px !important;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix iOS Safari bottom bar overlap */
  .search-input-wrap,
  .chat-input-wrap {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  /* Prevent iOS zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Fix iOS scroll bounce */
  body {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  .main-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Mesh Chat mobile fixes */
@media (max-width: 768px) {
  .mesh-tab-bar {
    border-radius: 12px;
  }

  .mesh-tab {
    padding: 10px 12px;
    font-size: 13px;
  }

  .mesh-post {
    border-radius: 14px;
    padding: 12px 14px;
  }

  .mesh-compose {
    border-radius: 14px 14px 0 0;
    padding: 8px 10px 6px;
  }

  .mesh-compose-field textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  .mesh-range-select {
    font-size: 12px;
  }

  .mesh-action-sheet {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .mesh-action-btn {
    padding: 16px 20px;
    min-height: 48px;
  }

  .mesh-enable-btn {
    width: 100%;
    max-width: 280px;
    padding: 14px 28px;
    font-size: 16px;
  }
}

/* Extra small: mesh chat */
@media (max-width: 375px) {
  .mesh-post-body {
    font-size: 13px;
  }

  .mesh-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

/* Landscape: mesh chat */
@media (max-height: 500px) and (orientation: landscape) {
  .mesh-compose {
    position: relative;
    margin-top: 8px;
  }

  .mesh-feed-list {
    padding-bottom: 16px;
  }
}

/* Dark mode mobile adjustments */
@media (max-width: 768px) {
  html.dark .search-input-field {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(20px) !important;
  }

  html.dark .card {
    background: rgba(30, 41, 59, 0.6) !important;
  }

  html.dark .auth-form input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
}

/* ==================== MESSAGING VIEW MOBILE ==================== */
@media (max-width: 768px) {
  .msg-sidebar {
    width: 100% !important;
    max-width: none !important;
  }

  .msg-sidebar-header {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
  }

  .msg-chat-header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  .msg-chat-input-wrap {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .msg-conv-item {
    min-height: 60px !important;
  }

  .msg-search-input,
  .msg-chat-input-wrap .dm-text-input {
    font-size: 16px !important;
  }
}

/* Extra small: messaging */
@media (max-width: 375px) {
  .msg-conv-name {
    font-size: 13px !important;
  }

  .msg-conv-preview {
    font-size: 12px !important;
  }
}

/* ========================================
   SIGNALS VIEW — Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
  .market-ticker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .market-ticker-card {
    padding: 10px 8px !important;
  }

  .ticker-price {
    font-size: 14px !important;
  }

  .signal-compose-btn {
    bottom: 72px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .signal-card {
    padding: 14px !important;
  }

  .event-ask-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .signal-compose-select,
  .signal-compose-textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }

  .signal-vote-btn,
  .signal-action-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .community-signal-actions {
    flex-wrap: wrap;
  }

  /* Advanced analysis cards */
  .advanced-signal-card {
    padding: 14px;
  }
  .te-flow-row {
    font-size: 11px;
    gap: 6px;
  }
  .hurst-gauge {
    height: 5px;
  }
  .hurst-marker {
    width: 12px;
    height: 12px;
    top: -3.5px;
  }
}