/* Phone-sized windows (the phone remote, phone_remote.py). Loaded last; desktop sizes are untouched.
 * One page for both: the same controls, rearranged for a narrow touch screen.
 * - Top bar: workspace tabs and actions on one row, the Simulator / Real robot switch on its own row,
 *   the Network pill (the hub that reaches Tony) on one more. With the Compute switch, the tabs get
 *   the first row, and Compute, Network and the actions share the second, above Simulator / Real robot.
 * - Start, Pause and Stop stay pinned to the bottom of the screen while the setup scrolls.
 * - Touch targets are at least 40 px. */
@media(max-width:640px){
  :root{--toolbar:auto}
  body{font-size:14px;-webkit-tap-highlight-color:transparent}
  .app-shell{min-height:0}

  /* Top bar */
  .topbar,.topbar.has-destination-controls,body.performance-view .app-shell .topbar.has-destination-controls{
    height:auto;min-height:0;flex:0 0 auto;flex-wrap:wrap;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}
  .topbar .brand{flex:1 1 0;min-width:0}
  .brand-mark{display:none}
  .workspace-nav{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .workspace-nav::-webkit-scrollbar{display:none}
  .workspace-nav button{height:40px;padding:0 9px;font-size:13px}
  .top-actions,.topbar.has-destination-controls .top-actions{order:2;margin-left:auto;gap:4px}
  .toolbar-button{width:40px;height:40px;padding:0;justify-content:center}
  .toolbar-button span{display:none}
  .icon-button{width:40px;height:40px}
  #help-button{display:none}        /* same "i" as Activity & details; one is enough on a phone */
  #phone-toggle{display:none}       /* pairing a phone, from the phone: the tabs need its room (Controls was cut off) */
  .header-stop{height:40px;padding:0 14px}
  .destination-controls{order:3;flex:1 0 100%;position:static;transform:none;margin:0}
  .destination-choices{width:100%}
  .destination-choice{min-width:0;height:40px;justify-content:center;padding:0 10px}
  .destination-icon{display:grid}
  /* Network: its own full-width row at the bottom of the top bar, on every tab; its panel full width */
  .link-pill{order:4;flex:1 0 100%;height:40px}
  .link-pill-dot{margin-left:auto}
  .link-panel{left:8px;right:8px;width:auto;max-height:calc(100dvh - 160px)}
  .link-path>td{width:48px}
  .link-path>td.link-latency{width:56px}
  .link-segments button{height:38px}
  .link-tony-try{min-height:44px}
  #link-tony-scan{min-height:40px;padding:0 10px}
  .link-tony-more summary{min-height:40px}
  .link-tony-add{min-height:44px}
  .link-tony-stay .link-segments button,.tony-net-kinds button,.link-segments-four button,#link-carrier .link-segments button{height:42px}
  .link-tony-net-actions .text-button{min-height:40px;padding:0 10px}
  .tony-net-dialog{padding:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
  .tony-net-field input{min-height:44px;font-size:16px}
  .tony-net-check{min-height:40px}
  .tony-net-dialog .tony-net-buttons button{height:44px;flex:1}
  /* With the Compute switch the actions get a row of their own: Network joins it, between Compute and
     the icons, above Simulator / Real robot. display:contents lets the pill sit among the actions. */
  .topbar:has(#runtime-host-toggle:not([hidden])) .brand{flex-basis:100%}
  .topbar:has(#runtime-host-toggle:not([hidden])) .top-actions{display:contents}
  .topbar:has(#runtime-host-toggle:not([hidden])) .top-actions>*{order:4}
  .topbar:has(#runtime-host-toggle:not([hidden])) #runtime-host-toggle{order:2}
  .topbar:has(#runtime-host-toggle:not([hidden])) .link-pill{order:3;flex:1 1 0;min-width:0}
  .topbar:has(#runtime-host-toggle:not([hidden])) #link-pill-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar:has(#runtime-host-toggle:not([hidden])) .destination-controls{order:5}
  /* The menu ends the tabs row, so Stop session still fits beside Compute during a session (2 Nov 2026). */
  .topbar:has(#runtime-host-toggle:not([hidden])) .brand{flex-basis:calc(100% - 48px)}
  .topbar:has(#runtime-host-toggle:not([hidden])) .top-actions>.app-menu{order:1}

  /* Teleoperate: the robot card shrinks, the session card follows, its actions pin to the bottom */
  main{padding:10px 10px 0;gap:10px;scrollbar-gutter:auto}
  .workspace{gap:10px}
  .robot-card{height:auto}
  .robot-scene{flex:none;height:min(44vh,300px);min-height:200px}
  .scene-label{display:none}
  .status-card{min-height:52px}
  .tile-detail{display:none}
  .robot-footer{flex-wrap:wrap;row-gap:4px} /* "Robot illustration · not a camera feed" was cut off beside the battery */
  .setup-card{overflow:visible}
  .setup-scroll{--setup-pad-top:16px;--setup-pad-x:16px;padding-bottom:12px}
  #page-title{font-size:24px}
  .primary-area{position:sticky;bottom:0;z-index:5;padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);
    border-radius:0 0 var(--radius-card) var(--radius-card);background:rgba(255,255,255,.94);backdrop-filter:blur(12px)}
  .primary-button,.secondary-button,.stop-button,.restart-button{min-height:48px}
  /* Every on/off switch: the label around it is the tap target, 44 px tall (the switch was 26 px; 1 Nov). */
  .ds-switch{min-height:44px;margin-top:0}
  .app-footer{flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}

  /* Other workspaces */
  .interactive-page,.performance-page{padding:14px 12px 20px;scrollbar-gutter:auto}
  /* Chat's persona row on one line: the dropdown shrinks, Make default is just the star, and Switch personas
     automatically (spilled off the right edge) stays on the desktop */
  .chat-header{flex-wrap:wrap;gap:10px}
  .chat-header-main{flex:1 1 100%}
  .chat-header-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .chat-sandbox-banner{flex-direction:column;gap:6px}
  .chat-sandbox-banner strong{align-self:flex-start}
  .chat-persona-row{min-width:0}
  .chat-persona-row select{flex:1 1 auto;min-width:0;height:36px}
  .chat-persona-default{flex:none;justify-content:center;width:36px;height:36px;margin:0;padding:0;border-radius:18px}
  .chat-persona-default svg{width:18px;height:18px}
  #chat-persona-default-label,.chat-persona-row .chat-persona-auto{display:none}
  /* Chat's Mic and Speaker switches: a whole line each, big enough to tap during a conversation */
  .chat-route-row{gap:6px 10px}
  .chat-route-row .chat-route{flex:1 1 0;min-width:0;display:flex}
  .chat-route-row .chat-route button,.chat-mic-row .chat-route button{flex:1 1 0;min-width:0;height:40px;padding:0 6px;font-size:14px}
  .chat-route-label{min-width:0;font-size:13px}
  .chat-route-note{flex:1 1 100%}
  .chat-mic-tap{flex:1 1 100%;min-height:44px;font-size:14px;border-radius:12px}
  /* The Studio pop-up (an action's video and music): full width */
  .ds-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .ds-dialog-body{max-height:calc(100dvh - 16px)}
  .ds-detail{padding:16px}
  .ds-columns{grid-template-columns:minmax(0,1fr)}
  /* Actions and Vision: wide tables scroll inside their card */
  .ia-actions,.ia-groups{grid-template-columns:minmax(0,1fr)}
  .ia-card{padding:16px;min-width:0}
  /* Actions' sticky bar: the jump menu and Stop robot on one row, what Tony is doing on one line under them */
  .ia-live{flex-wrap:wrap;gap:6px 10px;min-height:0;padding:8px}
  .ia-jump{flex:1;min-width:0}.ia-jump select{width:100%;max-width:none}
  .ia-live-send{display:contents}
  .ia-live .ia-live-stop{order:1;height:34px;padding:0 12px}
  .ia-live-dot{display:none}
  .ia-live-send>span[role=status]{order:2;flex:1 0 100%;font-size:12px}
  .ia-live-more{order:3}
  /* Actions' tables scroll sideways inside their card (the title and the card's padding stay put, so nothing shows
     through on the left); the name and its buttons stay pinned on the left */
  .ia-table-scroll,.pv-table-wrap{overflow-x:auto}
  /* Every section has Difficulty (move_effort.py), in the desktop's place, and it takes its own 96 px, not the others'
     room: a larger score and labelled lines a phone can read (James, 1 Nov). */
  .ia-group table{min-width:656px}.ia-group.is-rated table{min-width:970px}
  .ia-group th.ia-effort{width:96px}
  .ia-score{font-size:12px}.ia-score b{font-size:18px}
  .ia-effort-detail{margin-top:3px;font-size:12px;line-height:1.4}
  .ia-group th.ia-label,.ia-group td.ia-label{position:sticky;left:0;z-index:1;width:104px!important;min-width:104px;max-width:104px;background:var(--surface)}
  .ia-group th.ia-send,.ia-group td.ia-send{position:sticky;left:104px;z-index:1;background:var(--surface)}
  /* Touch targets on a phone: every send button 40 px; Stop and Reset to normal walking (the way out of a stuck,
     stiff Tony, 2 Nov 2026) 44 px */
  .ia-send-btn{width:40px;height:40px}
  .ia-send-btn.is-stop,.ia-send-btn.is-reset{width:44px;height:44px}
  /* A name's pencil (rename, every Studio item and saved move, 2 Nov 2026): a 40 px target, its pencil shown (no hover) */
  .ia-name-btn{min-height:40px;align-items:center;margin:-8px -6px;padding:8px 6px}
  .ia-name-btn svg{margin-top:0;opacity:.7}
  .ia-name-input{min-height:40px}
  /* Controls › Shortcuts: every chip 40 px; Walking mode, the way out for a limp Tony held up by people (1 Nov 2026), 44 px */
  .ct-chip{height:40px;border-radius:20px;padding:0 14px}
  .ct-chip.ct-walk{height:44px;border-radius:22px}
  /* The seated lean under Sit on chair: a slider and 44 px buttons a thumb can hit */
  .ia-lean input[type=range]{height:40px}
  .ia-lean-buttons .ds-btn{height:44px;font-size:13px}
  /* Follow me: Start and Stop 44 px, the distance slider a 40 px strip to drag */
  .fa-follow .ds-btn{height:44px}
  .pr-actions .ds-btn{flex:1 1 100%;height:44px}
  .fa-follow .fa-distance input[type=range]{height:40px;margin:0}
  .hg-lead-row{flex-wrap:wrap}
  .hg-lead{width:100%}
  .hg-lead button{height:44px;font-size:15px}
  .hg-gain input[type=range]{height:40px;margin:0}
  .hg-actions .ds-btn{height:44px}
  .hg-sens summary,.hg-more summary{min-height:44px;font-size:14px}
  .hg-expand{width:44px;height:44px;border-radius:22px}
  .pv-table{display:block;overflow-x:auto}
  /* Vision's on/off chips (Comment on, padel): 28 px on the desktop, too small to tap on a phone */
  .pv-chips{gap:8px}
  .pv-chip span{height:40px;border-radius:20px;padding:0 14px;font-size:13px}
  dialog{padding:24px 18px;max-height:calc(100dvh - 24px);overflow-y:auto}
  /* The video pop-up: Send to Tony and Stop go under the name */
  .ds-detail-head{flex-wrap:wrap}
  .ds-run{align-items:flex-start;max-width:none}.ds-run .ds-fine{text-align:left}
  #details-content{left:8px;right:8px;width:auto}
  .toast{bottom:calc(env(safe-area-inset-bottom) + 84px)}
  /* 16 px stops Chrome zooming into a field on focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  /* Settings › People: each person's buttons and the clip players big enough to tap (2 Nov). */
  .pp-person .pp-actions{flex:1 1 100%;min-width:0;justify-content:flex-start;gap:4px 8px}.set-hub .pp-person .pp-actions button,.pp-person .pp-actions button{min-height:40px;padding:0 6px}.pp-media .pp-clips audio{height:40px;width:100%}
  #pp-card .pp-live .pp-live-toggle{min-height:40px}.pp-live-rows li{grid-template-columns:88px minmax(0,1fr) auto;gap:8px}
}

/* Chat's message box (James, 3 Nov: always usable): 40 px to tap, and 16 px text so a phone does not zoom in on focus. */
@media (max-width: 640px) {
  .chat-message-form textarea { font-size: 16px; min-height: 40px; padding: 9px 0; }
  .chat-message-form button { width: 40px; height: 40px; }
}

/* Chat's Previous chats (James, 4 Nov): every control big enough to tap; a long chat scrolls with the page. */
@media (max-width: 640px) {
  .chat-previous-rows, .chat-previous-list { max-height: none; overflow: visible; padding-right: 0; }
  .chat-previous-back, .chat-previous-retry { min-height: 40px; }
  .chat-previous-play { min-height: 40px; font-size: 12px; }
  .chat-previous-play svg { width: 13px; height: 13px; }
  .chat-previous-rows .chat-message { max-width: 92%; }
}

/* A reply's steps (James, 4 Nov): the tap target is the full 40 px, and the open list gets the whole width. */
@media (max-width: 640px) {
  .chat-steps summary { min-height: 40px; font-size: 12px; }
  .chat-steps-icon, .chat-steps-icon svg { width: 16px; height: 16px; }
  .chat-message:has(.chat-steps[open]) { max-width: 100%; width: 100%; box-sizing: border-box; }
  .chat-steps { font-size: 12px; }
}