/* Storm phone layout (Oct 30). Same Storm look as the desktop app; on a phone the Inbox shows the list OR the open
   conversation, with a Back button, and everything fits the screen with no sideways scrolling. */
.m-back, .m-only { display: none; }
@media (max-width: 760px) {
  /* Inbox only: the list and the conversation fill the screen. Every other page (Stats, Team Stats, Ledger) scrolls normally. */
  html:has(.layout), body:has(.layout) { height: 100dvh !important; }
  body:has(.layout) { overflow: hidden; }
  input, select, textarea { font-size: 16px !important; }
  /* top bar: logo, delivery % and balance on the first row (always visible), the page links on a second row that scrolls */
  .topbar { flex-wrap: wrap !important; overflow: visible !important; gap: 8px 8px !important; padding: max(8px, env(safe-area-inset-top)) 12px 8px !important; }
  .topbar { height: auto !important; min-height: 0 !important; max-height: none !important; align-items: center !important; }
  .topbar > * { align-self: center !important; }
  .topbar .wallet, .topbar .usagelink { height: auto !important; line-height: 1.4 !important; white-space: nowrap; }
  .topbar .spacer { display: none !important; }
  .topbar nav { order: 3; flex: 1 1 100% !important; display: flex !important; flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar .m-agent { order: 4; margin-left: 0 !important; }
  .topbar .wallet, .topbar .usagelink { font-size: 12px !important; padding: 3px 8px !important; }
  /* Stats and other card pages: one column, edge to edge */
  .wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .periods { grid-template-columns: 1fr !important; }
  .wrap { grid-template-columns: minmax(0, 1fr) !important; max-width: 100vw !important; }
  .wrap > *, .periods > *, .card { min-width: 0 !important; max-width: 100%; }
  .wrap svg, .wrap canvas, .wrap img { max-width: 100% !important; height: auto; }
  .wrap table { display: block; max-width: 100%; overflow-x: auto; }
  /* Team Stats on a phone: agent, sent, delivered, failed, fail %, replies, balance and status fit without scrolling sideways */
  #tbl thead th:nth-child(n+7):nth-child(-n+9), #tbl tr.agent > td:nth-child(n+7):nth-child(-n+9), #tbl thead th:nth-child(11), #tbl tr.agent > td:nth-child(11) { display: none; }
  #tbl th, #tbl td { padding: 8px 5px !important; font-size: 13px; }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main.wrap > .head { flex-direction: column; align-items: stretch !important; }
  .topbar #acct, .topbar .m-phone-btn { display: none !important; }
  .layout { display: block !important; grid-template-columns: 1fr !important; }
  .layout > aside.list, .layout > section.thread { width: 100% !important; height: 100% !important; border-right: 0 !important; }
  .layout:not(:has(#sel.on)) > section.thread { display: none !important; }
  .layout:has(#sel.on) > aside.list { display: none !important; }
  .list .tools { padding: 10px 12px !important; }
  .list .tools .seg { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .list .tools .seg::-webkit-scrollbar { display: none; }
  .list .tools .seg button { flex: none; }
  #sel { height: 100%; }
  #sel .head { flex-wrap: wrap !important; gap: 6px 8px !important; padding: 8px 12px !important; }
  #sel .head .btn { padding: 6px 9px !important; font-size: 13px !important; }
  #sel .head #hTime { display: none; }
  .m-back { display: inline-flex !important; align-items: center; gap: 2px; font-weight: 600; }
  .m-only { display: block; }
  .compose { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; }
  .compose .chips { flex-wrap: wrap !important; }
  .msgs { -webkit-overflow-scrolling: touch; }
  html, body { max-width: 100vw; overflow-x: hidden; }
  .convs { overflow-x: hidden; }
  .convs .pill, .compose .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .convs .conv { min-width: 0; }
  .convs .conv .pill { max-width: 52vw; display: inline-block; }
  /* messages get the room; the tools under them scroll on their own */
  #sel.on { display: flex !important; flex-direction: column; }
  #sel .msgs { flex: 1 1 auto; min-height: 36dvh; }
  #sel .compose { flex: none; max-height: 54dvh; overflow-y: auto; }
  .kbd { display: none !important; }
  .toast { left: 12px !important; right: 12px !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; }
}
/* Phone app sign-in code box (desktop Inbox > Phone app) */
.m-modal-back { position: fixed; inset: 0; background: rgba(11, 18, 32, .55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.m-modal { background: var(--panel, #fff); color: var(--text, #0f172a); border-radius: var(--radius, 14px); box-shadow: var(--shadow); width: min(440px, 100%); padding: 22px 24px; display: grid; gap: 12px; }
.m-modal h3 { margin: 0; font-size: 17px; }
.m-code { font-size: 34px; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums; text-align: center; padding: 10px; border-radius: 10px; background: var(--accent-soft, #e8f0ff); color: var(--accent-dark, #2563eb); }
.m-modal ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted, #64748b); }
.m-modal .row { display: flex; gap: 10px; justify-content: flex-end; }