/* Agent WA: mobile, keyboard and accessibility refinements only.
   Shared visual components and desktop layout are owned by wallet.css. */

/* Public IDs stay left-to-right in every language. Values may wrap safely. */
.receive-reference .mono,
.mono,
[data-demo-id] {
  direction: ltr;
  unicode-bidi: isolate;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* A small display icon still has a full-size touch/focus target. */
.balance-label .icon-button {
  min-inline-size: 44px;
  inline-size: 44px;
}

.network-selector,
.filter-button {
  min-block-size: 44px;
}

@media (max-width: 1039px) {
  .wallet-main {
    /* These insets are physical because display cutouts are physical. */
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-block-end: calc(92px + env(safe-area-inset-bottom));
  }

  .wallet-topbar,
  .wallet-selector-row,
  .asset-toolbar,
  .asset-row,
  .activity-row,
  .settings-row {
    min-inline-size: 0;
  }

  .asset-search input,
  .form-input,
  .form-select,
  .form-textarea,
  .settings-select,
  .settings-row > .form-select {
    /* Comfortable Android typing; preserves browser zoom accessibility. */
    font-size: 16px;
  }

  .quick-action,
  .asset-tab,
  .nav-item,
  .setting-title {
    overflow-wrap: anywhere;
  }

  .asset-trailing {
    min-inline-size: 0;
    max-inline-size: 35%;
  }

  .mobile-bottom-nav {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .mobile-bottom-nav .nav-item {
    min-block-size: 55px;
  }

  #toast-root {
    inset-block-end: calc(88px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 359px) {
  .auth-shell { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .auth-topbar { gap: 6px; }
  .auth-card { padding-inline: 18px; }
  .auth-feature-grid { gap: 5px; }
  .auth-feature-grid > div { padding-inline: 8px; }
  .phrase-grid { gap: 5px; }
  .phrase-grid li { gap: 6px; padding-inline: 7px; }
  .phrase-grid code { font-size: 10px; }

  .wallet-main {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .wallet-topbar { gap: 6px; flex-wrap: wrap; }
  .brand-lockup { gap: 8px; }
  .topbar-actions { gap: 0; margin-inline-start: auto; }
  .wallet-selector-row { gap: 8px; }
  .wallet-selector { max-inline-size: 54%; }
  .network-selector { max-inline-size: 46%; padding-inline: 7px; }
  .wallet-balance { font-size: clamp(36px, 11vw, 40px); }
  .wallet-actions { gap: 4px; }
  .asset-row,
  .activity-row { gap: 9px; }
  .asset-tab { padding-inline: 4px; font-size: 13px; }
  .asset-trailing { max-inline-size: 33%; }
  .dialog-header { padding-inline: 16px; }
  .dialog-content { padding-inline: 16px; }
  .dialog-footer { padding-inline: 16px; }
  .detail-row { gap: 10px; }
}

@media (max-width: 767px) {
  .auth-shell { min-block-size: 100svh; }
  .auth-card { margin-block: 26px 0; padding: clamp(20px, 6vw, 28px); }
  .auth-actions > button { min-block-size: 50px; }

  .wallet-dialog,
  #modal-content {
    max-block-size: calc(100vh - env(safe-area-inset-top) - 12px);
    max-block-size: calc(100dvh - env(safe-area-inset-top) - 12px);
  }

  .dialog-content {
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 16px;
  }

  .dialog-content input,
  .dialog-content select,
  .dialog-content textarea {
    scroll-margin-block: 24px;
  }

  .dialog-footer {
    padding-block-end: max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .wallet-icon-grid, .wallet-color-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 5px; }
  .wallet-icon-option { min-block-size: 46px; padding: 8px; }
  .wallet-appearance-preview { gap: 10px; padding: 12px; }
  .wallet-avatar--preview { inline-size: 50px; block-size: 50px; }
}

/* A short visual viewport commonly means landscape or an open keyboard. */
@media (max-width: 767px) and (max-height: 560px) {
  .auth-card { margin-block-start: 12px; padding-block: 18px; }
  .auth-progress-wrap { margin-block-end: 15px; }
  .auth-feature-grid { margin-block: 15px 4px; }
  .phrase-grid { max-block-size: 34svh; }

  .wallet-dialog,
  #modal-content {
    max-block-size: calc(100vh - env(safe-area-inset-top) - 6px);
    max-block-size: calc(100dvh - env(safe-area-inset-top) - 6px);
  }

  .dialog-header {
    min-block-size: 60px;
    padding-block: 8px;
  }

  .dialog-content { padding-block: 14px; }
  .dialog-footer { padding-block-start: 10px; padding-block-end: max(10px, env(safe-area-inset-bottom)); }
  .dialog-content .detail-hero { padding-block-end: 16px; }
}

/* Respect long RTL labels without flipping identifiers or asset artwork. */
[dir="rtl"] .asset-trailing { align-items: flex-end; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .wallet-dialog[open],
  .toast,
  .quick-action,
  .icon-button {
    animation: none !important;
    transition: none !important;
  }
}