/* ── MOBILE.CSS — Responsive overrides ── */

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  .nav-tabs { display: none; }
  .network-badge { display: none; }

  .file-panel { width: 180px; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  .desktop-only { display: none !important; }

  /* Show mobile-specific elements */
  .mobile-menu-btn { display: flex; }
  .mobile-bottom-nav {
    display: flex;
    align-items: center;
  }

  /* Nav adjustments */
  .nav { padding: 0 12px; gap: 8px; }
  .wallet-btn { padding: 6px 10px; font-size: 11px; }
  .wallet-btn #walletBtnText { display: none; } /* icon only on small screens */

  /* Hide desktop sidebar */
  .sidebar { display: none; }

  /* File panel becomes an overlay */
  .file-panel {
    position: fixed;
    top: var(--mobile-nav-h);
    left: 0;
    bottom: var(--bottom-nav-h);
    width: 260px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: 1px solid var(--border-bright);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }

  .file-panel.mobile-open {
    transform: translateX(0);
  }

  /* Editor area fills screen */
  .editor-area {
    position: fixed;
    top: var(--mobile-nav-h);
    left: 0; right: 0;
    bottom: var(--bottom-nav-h);
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s;
  }

  .editor-area.mobile-hidden { display: none; }

  /* Hide desktop bottom panel; show fullscreen terminal instead */
  .bottom-panel { display: none; }

  .mobile-terminal-panel {
    position: fixed;
    top: var(--mobile-nav-h);
    left: 0; right: 0;
    bottom: var(--bottom-nav-h);
    background: var(--bg-panel);
    display: none;
    flex-direction: column;
    z-index: 80;
  }

  .mobile-terminal-panel.mobile-active {
    display: flex;
  }

  /* Action bar smaller */
  .action-bar { padding: 0 10px; height: 44px; }
  .btn-run, .btn-deploy { padding: 7px 12px; font-size: 11px; gap: 5px; }
  .btn-label { display: none; } /* icon only for run/deploy on tiny screens */

  /* Actually show labels on buttons ≥360px */
  @media (min-width: 360px) {
    .btn-label { display: inline; }
  }

  /* Editor font size slightly smaller for density */
  .code-editor { font-size: 12px; padding: 12px 14px; }
  .line-numbers { width: 36px; }
  .line-num { padding-right: 6px; font-size: 11px; }

  /* Compiler select */
  .compiler-select { font-size: 11px; max-width: 130px; padding: 5px 6px; }

  /* Status bar */
  .status-bar { padding: 0 10px; gap: 12px; }

  /* Modals full-width */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal, .new-file-modal, .delete-modal, .confirm-modal {
    max-width: 100%;
    border-radius: 16px 16px 12px 12px;
  }

  /* Wallet button text back */
  @media (min-width: 400px) {
    .wallet-btn #walletBtnText { display: inline; }
  }
}

/* ── Very small (≤360px) ── */
@media (max-width: 360px) {
  .logo-text { display: none; }
  .wallet-btn { padding: 6px 8px; }
}

/* ── Touch targets ── */
@media (hover: none) and (pointer: coarse) {
  .sidebar-icon,
  .mob-nav-btn,
  .file-item,
  .file-folder,
  .wallet-option {
    min-height: 44px;
  }

  .file-item { padding-top: 8px; padding-bottom: 8px; }
  .file-folder { padding-top: 8px; padding-bottom: 8px; }

  /* Always show delete button on touch */
  .file-delete-btn { opacity: 1; }
}

/* Safe area support (iPhone notch/home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }

  @media (max-width: 640px) {
    .editor-area,
    .mobile-terminal-panel,
    .file-panel {
      bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    }
  }
}