/* Mobile widths are constrained by layout rather than hidden overflow. */
@media (max-width: 768px) {
  html, body { width: 100%; min-width: 0; }
  body { min-height: 100svh; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  #walletAppShell, .app-wrapper, .main-content, .wallet-dashboard-grid,
  .sidebar-portfolio-col, .main-portal-tabs-col, .tab-pane,
  .nfts-gallery-grid, .dapp-cards-grid {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .main-content { padding-top: 16px; padding-bottom: 16px; }
  .main-portal-tabs-col { padding: 0 !important; }
  .nfts-gallery-grid, .dapp-cards-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .nft-card-item, .security-card, .swap-widget-container { min-width: 0; max-width: 100%; }
  .nft-preview-box { height: clamp(180px, 52vw, 260px); }
  .nft-img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
  .nft-info-box { padding: 14px; gap: 8px; }
  .nft-title-name, .nft-collection-name { overflow-wrap: anywhere; }
  .nft-rarity-pill { max-width: calc(100% - 24px); white-space: normal; }
  .pane-action-bar { flex-wrap: wrap; gap: 10px; align-items: center; }
  .pane-action-bar > span { flex: 1 1 180px; min-width: 0; white-space: normal; }
  .nft-price-row { flex-wrap: wrap; gap: 10px; }
  .mobile-bottom-nav { padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)) !important; }
  .mobile-nav-container { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .mobile-nav-btn { width: 100%; min-width: 0 !important; padding-inline: 2px !important; }
  .modal-backdrop { padding: 12px; }
  .modal-dialog { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 24px); margin-inline: auto; }
  .modal-body, .form-group { min-width: 0; }
  .form-input { min-width: 0; max-width: 100%; }
  .tx-row-item { min-width: 0; }
  .tx-main-desc { min-width: 0; }
}
@media (max-width: 768px) {
  .security-vault-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .security-card { padding: 16px !important; overflow-wrap: anywhere; }
  .security-card .section-subheading { flex-wrap: wrap; min-width: 0; }
  .security-card .section-subheading svg { flex-shrink: 0; }
  .security-card button { max-width: 100%; white-space: normal; }
  .seed-phrase-box { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-filter-bar { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .seed-phrase-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-card { padding: 12px !important; }
}
/* Swap layout: labels and controls keep their own space at narrow widths. */
.swap-header-bar { gap: 12px; align-items: flex-start; }
.swap-header-bar > div { min-width: 0; flex-wrap: wrap; }
.swap-title { line-height: 1.35; }
#swapLivePoolIndicator { line-height: 1.5; max-width: 100%; overflow-wrap: anywhere; }
.swap-settings-btn { flex: 0 0 40px; min-height: 40px; border-radius: 10px; }
.swap-box-input-row { min-width: 0; }
.swap-amount-input { min-width: 0; flex: 1 1 0; font-variant-numeric: tabular-nums; }
.swap-token-picker { flex: 0 0 auto; max-width: 48%; min-height: 40px; }
.swap-token-picker > span { overflow: hidden; text-overflow: ellipsis; }
.swap-detail-row { gap: 12px; align-items: baseline; }
.swap-detail-row > span:first-child { min-width: 0; }
.swap-detail-val { min-width: 0; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .swap-widget-container { padding: 16px !important; margin-bottom: 16px; }
  .swap-header-bar { margin-bottom: 16px; }
  .swap-header-bar > div { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .swap-title { font-size: 1.125rem; white-space: normal; }
  #swapLivePoolIndicator { font-size: .75rem !important; padding: 3px 8px !important; }
  .swap-card-box { padding: 14px; }
  .swap-box-header { flex-wrap: wrap; gap: 4px 8px; line-height: 1.5; }
  .swap-box-header > span:last-child { margin-left: auto; }
  .swap-amount-input { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .swap-meta-details { padding: 12px; gap: 10px; }
  .swap-detail-row { font-size: .8125rem; line-height: 1.5; }
  .swap-detail-val { flex: 0 1 58%; }
  .btn-submit-swap { min-height: 48px; white-space: normal; }
}

/* Site previews must never cover wallet approval dialogs. */
#txAuthModal, #universalAuthModal { z-index: 5000; }

/* Reclaim preview space after the wallet connection has been authorized. */
#inAppBrowserModal.wallet-authorized .browser-session-bar,
#inAppBrowserModal.wallet-authorized .dapp-browser-help { display: none; }