/* At high interface scale a narrow window needs two header rows, while every
   account/invite/room action remains accessible. Panels scroll independently. */
@media(max-width:680px) {
  .call-shell { grid-template-columns:minmax(0,1fr); }
  .call-controls { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:calc(100% - 24px);max-width:calc(100% - 24px);min-width:0;gap:3px;padding:8px; }
  .call-controls>.call-control-stack { min-width:0;width:auto; }
  .call-controls .control-label { font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis; }
  .call-controls .icon-control { width:38px;min-width:0;height:38px; }
  .call-header { display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;gap:6px 10px;padding:8px 12px;min-height:112px; }
  .call-header>.brand { grid-column:1;grid-row:1;font-size:20px; }
  .call-header>.room-code { grid-column:2/4;grid-row:1;min-width:0; }
  .call-header>.call-connection-state,.call-header>#latency-control-host,.call-header>.call-header-drag { display:none; }
  .call-header>.call-header-utility { grid-column:1;grid-row:2;min-width:38px;justify-self:end; }
  .call-header>.copy-link { grid-column:2;grid-row:2; }
  .call-header>.call-account { grid-column:3;grid-row:2;min-width:0; }
  .call-shell,.call-shell:has(.settings-popover) { grid-template-rows:112px minmax(0,1fr) auto; }
  .call-workspace.panel-open>.settings-popover,body:has(#desktop-window-chrome[hidden]) .call-workspace.panel-open>.settings-popover { top:120px;bottom:96px;height:calc(100dvh - 216px);max-height:calc(100dvh - 216px); }
  .call-workspace.panel-open>.context-panel { top:120px;bottom:96px;max-height:calc(100dvh - 216px); }
  .call-workspace.panel-open>.settings-popover:is([data-settings-section=account],[data-settings-section=advanced]),body:has(#desktop-window-chrome[hidden]) .call-workspace.panel-open>.settings-popover:is([data-settings-section=account],[data-settings-section=advanced]) { height:auto;bottom:auto;max-height:calc(100dvh - 216px); }
  .settings-popover .panel-header>small { display:none; }
  .settings-popover .voice-processing-row { grid-template-columns:minmax(0,1fr);gap:8px; }
  .settings-popover .voice-profiles { grid-template-columns:minmax(0,1fr); }
  .account-settings-group .account-settings-section {display:grid;grid-template-columns:21px minmax(0,1fr);gap:8px 10px;}
  .account-settings-group .account-settings-section>.button {grid-column:2;justify-self:start;max-width:100%;white-space:normal;}
  .account-settings-group :is(h3,p,.account-display-value) {overflow-wrap:anywhere;}
  .settings-popover .settings-tabs button {padding-inline:4px;white-space:normal;overflow-wrap:anywhere;}
}
@media(max-width:360px) {
  .call-header>.call-account strong,.call-header>.call-account>.account-menu-chevron { display:none; }
  .call-header>.call-account { padding:3px; }
  .settings-popover .settings-fields,.settings-popover .video-fields { padding:10px; }
  .settings-popover .voice-card,.settings-popover .video-camera-card { padding:12px; }
  .settings-popover .voice-device-row { grid-template-columns:28px minmax(0,1fr) 24px;gap:5px; }
  .settings-popover .voice-output-device { grid-template-columns:28px minmax(0,1fr);gap:5px; }
  .settings-popover .settings-symbol { width:28px;height:32px; }
  .settings-popover .voice-test-card { flex-wrap:wrap; }
  .settings-popover .voice-bars { gap:2px; }
  .settings-popover .voice-meter-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px; }
  .settings-popover .panel-header { padding:12px 10px; }
  .settings-popover .panel-header> :is(h2,span:first-child) { font-size:17px; }
  .settings-popover .settings-tabs { padding:0; }
  .settings-popover .settings-tabs button { font-size:11px; }
  .video-camera-controls .video-mirror { flex-wrap:wrap; }
}