/* ============================================================
   JUDGEMENT PROTOCOL — mobile.css
   Location: /public_html/assets/css/mobile.css
   Purpose : Mobile-specific overrides layered ON TOP of the
             base CSS. Handles:
               - iOS safe areas (notch, home bar)
               - Virtual keyboard pushing layout
               - Android Chrome address bar (dvh units)
               - Touch interaction polish
               - Low-end device performance fallbacks
               - Landscape mode adjustments

   IMPORTANT: This file is @imported at the END of main.css
              so all rules here override the base styles.
   ============================================================ */

/* ── iOS safe area (notch + home bar) ────────────────────────
   env() provides the safe area insets on iPhone X+.
   We pad nav top and chat input bottom to avoid overlap.  */
@supports (padding-top: env(safe-area-inset-top)) {

  #top-nav {
    padding-top:    max(0px, env(safe-area-inset-top));
    height:         calc(var(--nav-height) + env(safe-area-inset-top));
  }

  #chat-input-bar {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }

  #auth-screen {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }

  #sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  #alert-container {
    top: calc(var(--nav-height) + env(safe-area-inset-top) + var(--space-3));
  }
}

/* ── Virtual keyboard: keep input bar above keyboard ─────────
   When the virtual keyboard opens on mobile, 100dvh contracts
   to exclude the keyboard. 100vh does not. We always use dvh
   for height-critical containers.  */
#jp-app {
  height:     100dvh;
  max-height: 100dvh;
}

/* Message list must shrink when keyboard opens */
#message-list {
  flex:         1 1 0;
  min-height:   0;    /* critical: allows flex child to shrink below content size */
  overscroll-behavior: contain;
}

/* DM message list inside overlay */
.dm-message-list {
  overscroll-behavior: contain;
}

/* ── Touch scroll performance ────────────────────────────────
   momentum scrolling on iOS, prevent pull-to-refresh on body */
body {
  overscroll-behavior: none;
}

#message-list,
#sidebar-inner,
#overlay-body,
.tx-list,
.dm-message-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior:        contain;
}

/* Prevent double-tap zoom on buttons (Android Chrome) */
button, a, .sidebar-item, .msg-avatar, .msg-username {
  touch-action: manipulation;
}

/* ── Tap highlight: remove default blue flash ────────────────
   Applied globally; individual components re-add where needed */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Input zoom prevention ───────────────────────────────────
   iOS zooms in on inputs with font-size < 16px.
   All inputs must be 16px minimum when focused.  */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-size: 16px !important;
}

/* ── Viewport breakpoints ────────────────────────────────────
   Base styles target 360px (smallest common Android).
   These override for wider mobile and small tablets.  */

/* Small phones: 360px – 390px */
@media (max-width: 390px) {
  :root {
    --nav-height:     48px;
    --sidebar-width:  260px;
  }

  #nav-logo {
    font-size: 14px;
  }

  .currency-item {
    padding: 5px 5px;
  }

  .currency-amount {
    font-size: 10px;
  }

  .nav-icon-btn {
    width:  36px;
    height: 36px;
  }

  #auth-panel {
    border-radius: 0;
    min-height:    100dvh;
  }

  #auth-body {
    padding: var(--space-4);
  }
}

/* Mid-range phones: 390px – 480px */
@media (min-width: 391px) and (max-width: 480px) {
  :root {
    --sidebar-width: 300px;
  }
}

/* ── Landscape mode ──────────────────────────────────────────
   Sidebar overlaps full height; chat input stays accessible. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --nav-height: 44px;
  }

  /* Compact the message meta to show more messages */
  .msg-meta { margin-bottom: 1px; }

  .msg-bubble {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* Shrink overlay on landscape to leave room for content */
  .overlay-panel {
    max-height: 90dvh;
  }

  /* Auth panel: horizontal layout on landscape to avoid keyboard issues */
  #auth-screen {
    align-items: flex-start;
    padding-top: var(--space-4);
    overflow-y:  auto;
  }
}

/* ── Small tablet (481px – 768px) ───────────────────────────
   Sidebar can be persistent instead of an overlay.  */
@media (min-width: 481px) {
  :root {
    --sidebar-width: 320px;
  }

  /* Slightly larger text is comfortable on tablets */
  .msg-bubble { font-size: 14px; }

  /* Slightly wider overlay on tablet */
  .overlay-panel { max-width: 520px; }
}

/* ── Reduced motion ──────────────────────────────────────────
   Respect OS-level accessibility setting.  */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}

/* ── High contrast ───────────────────────────────────────────
   Boost borders and text for accessibility.  */
@media (prefers-contrast: high) {
  :root {
    --border-default: #555;
    --border-strong:  #888;
    --text-secondary: #bbb;
    --text-muted:     #888;
  }

  .msg-bubble {
    border: 1px solid var(--border-default);
  }

  .btn-ghost {
    border-color: var(--border-strong);
  }
}

/* ── Low-end device fallbacks ────────────────────────────────
   Disable heavy effects on devices that likely can't handle them.
   Detected via absence of hover capability (touch-primary devices). */
@media (hover: none) and (pointer: coarse) {

  /* Remove backdrop-filter (very expensive on low-end Android) */
  #overlay-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Remove box-shadow animations (compositor-layer heavy) */
  .alert {
    box-shadow: var(--shadow-md);
  }

  /* Simplify transitions to just opacity (GPU-accelerated) */
  #sidebar {
    transition: transform 250ms ease;
  }

  /* Disable will-change on low-end to prevent layer promotion bloat */
  /* Only keep it where strictly needed */
  .overlay-panel {
    will-change: auto;
  }
}

/* ── Scrollbar: fully hidden on mobile ───────────────────────
   Touch devices don't need scrollbars — they scroll with fingers. */
@media (hover: none) {
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}

/* ── Toggle switch component ─────────────────────────────────
   Used in Settings panel (video calls toggle, notifications).
   Defined here as it's a mobile-native pattern.  */
.toggle-switch {
  position:    relative;
  display:     inline-block;
  width:       48px;
  height:      26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity:  0;
  width:    0;
  height:   0;
  position: absolute;
}

.toggle-slider {
  position:         absolute;
  inset:            0;
  background:       var(--bg-active);
  border-radius:    13px;
  border:           1px solid var(--border-default);
  cursor:           pointer;
  transition:       background var(--transition-normal), border-color var(--transition-normal);
}

.toggle-slider::before {
  content:          '';
  position:         absolute;
  left:             3px;
  top:              50%;
  transform:        translateY(-50%);
  width:            18px;
  height:           18px;
  background:       var(--text-muted);
  border-radius:    50%;
  transition:       transform var(--transition-normal), background var(--transition-normal);
}

.toggle-switch input:checked + .toggle-slider {
  background:    var(--brass-dim);
  border-color:  var(--brass);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform:  translateY(-50%) translateX(22px);
  background: var(--brass);
}

/* ── Settings overlay specific layout ────────────────────────
   These rules support the Settings panel built by settings.js */
.settings-section {
  border-bottom: 1px solid var(--border-subtle);
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px var(--space-4);
  min-height:      52px;
  gap:             var(--space-3);
}

.settings-row-label {
  font-size:  13px;
  color:      var(--text-primary);
  flex:       1;
}

.settings-row-sub {
  font-size:  11px;
  color:      var(--text-muted);
  margin-top: 2px;
}

.settings-danger-row {
  padding:    14px var(--space-4);
}

/* ── Subscription plan card (settings upgrade flow) ─────────*/
.plan-card {
  background:    var(--bg-raised);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding:       var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--space-3);
  cursor:        pointer;
  transition:    border-color var(--transition-fast), background var(--transition-fast);
  min-height:    56px;
}

.plan-card:active,
.plan-card.selected {
  border-color: var(--brass);
  background:   var(--brass-glow);
}

.plan-card-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-primary);
}

.plan-card-detail {
  font-size: 11px;
  color:     var(--text-muted);
  margin-top: 2px;
}

.plan-card-price {
  font-family: var(--font-mono);
  font-size:   14px;
  color:       var(--brass);
  font-weight: 600;
  flex-shrink: 0;
}