/* World-Class responsive helpers (UI only) */

.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px){
  .container{ width: min(94vw, var(--container)); margin-inline: auto; }
  .card{ padding: 16px; border-radius: 20px; }
  .btn-row{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .btn-row > *{ width:100%; }
  .topbar-inner{
    min-height: var(--shell-topbar-h-mobile, var(--shell-topbar-h));
    height: var(--shell-topbar-h-mobile, var(--shell-topbar-h));
    padding: 0 var(--shell-topbar-pad-x-mobile, var(--shell-topbar-pad-x));
    gap: var(--shell-topbar-gap-mobile, var(--shell-topbar-gap));
  }
  .topbar-title{min-width:0;}
  .topbar-actions{gap:var(--shell-topbar-actions-gap-mobile, var(--shell-topbar-actions-gap));}
  .topbar-icon-btn,
  .topbar-btn{
    min-width:var(--shell-topbar-icon-size-mobile, var(--shell-topbar-icon-size));
    padding-left:var(--shell-topbar-btn-pad-x-mobile, var(--shell-topbar-btn-pad-x));
    padding-right:var(--shell-topbar-btn-pad-x-mobile, var(--shell-topbar-btn-pad-x));
  }
  .brand-name{max-width:calc(100vw - 180px);} 
  .header-spacer{ height: var(--shell-header-spacer-h-mobile, var(--shell-header-spacer-h)); }
  .bn-ic{ font-size: 18px; }
  .bn-tx{ font-size: 11px; }
}

@media (max-width: 420px){
  .bn-tx{ font-size: 10px; }
}

@media (max-width: 760px){ .notification-actions{ flex-direction:column; align-items:stretch !important; } }

@media (max-width:760px){ .btn-row > .pill, .btn-row > .btn, .btn-row > .btn-primary, .btn-row > .btn-danger, .btn-row > form{ width:100%; } .btn-row > form > button{ width:100%; } }

/* Mobile hardening: avoid horizontal overflow and improve safe-area ergonomics */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.table-scroll > table { min-width: 640px; }
.container, .card, .topbar-inner, .btn-row > *, .page-head, .flow-split, .wallet-history-row { min-width: 0; }
pre, code, .mono, .wallet-error-ellipsis, .support-message-body, .chat-msg-body, td, th { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 760px){
  .table-scroll{ margin-inline: -4px; padding-inline: 4px; }
}