/* Side panel and its pages — history, settings, legal, manufacturer's plate — sized for every device (24 Sep 2026).
   The authored px values (master-shell.css) are the 1440 desktop / 390 phone reference. Each surface's contents are zoomed by --pz,
   the shell unit as a number (scale.js), so a 4K panel is the 1440 panel, larger, and a 1024 laptop never drops below 0.9.
   Panel width is set per device class in real px (not zoomed). No label wraps inside a pill or button. Load after answers.css. */

/* ---- Side panel ---- */
#aiosShell .side-panel{width:calc(320px * var(--pz,1));max-width:calc(100cqw - 48px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px)}
#aiosShell .side-panel > *{zoom:var(--pz,1)}
@container (orientation:portrait) and (min-width:520px){
  #aiosShell .side-panel{width:min(calc(360px * var(--pz,1)),calc(100cqw - 96px))}
}
@container (orientation:portrait) and (max-width:519px){
  #aiosShell .side-panel{width:min(calc(340px * var(--pz,1)),calc(100cqw - 48px))}
}
#aiosShell .side-panel-header{flex-shrink:0}
#aiosShell .side-panel-nav-item{min-height:44px;height:auto;white-space:nowrap}
#aiosShell .side-panel-nav-item span{min-width:0;overflow-wrap:anywhere;white-space:normal}
#aiosShell .side-panel-user{flex-shrink:0}
#aiosShell .side-panel-user-meta{min-width:0}
#aiosShell .side-panel-footer{flex-shrink:0}
#aiosShell .side-panel-legal{flex-wrap:wrap;row-gap:2px}
#aiosShell .side-panel-legal button,#aiosShell .side-panel-legal a{min-height:32px}
/* Short landscape (phones on their side, small laptops): the panel keeps everything on screen by tightening its rhythm. */
@container (orientation:landscape) and (max-height:559px){
  #aiosShell .side-panel{width:min(calc(300px * var(--pz,1)),calc(100cqw - 96px))}
  #aiosShell .side-panel-header{height:52px;padding-top:6px;padding-bottom:6px}
  #aiosShell .side-panel-header img{height:26px}
  #aiosShell .side-panel-nav{padding:4px;gap:0}
  #aiosShell .side-panel-nav-item{height:auto;min-height:40px;padding:8px 14px;font-size:15px}
  #aiosShell .side-panel-user{padding:10px 18px}
  #aiosShell .side-panel-user .input-avatar{width:32px;height:32px}
  #aiosShell .side-panel-footer{gap:6px;padding:8px 18px 10px}
  #aiosShell .side-panel-legal button,#aiosShell .side-panel-legal a{min-height:28px}
}

/* ---- Content overlays (history, settings) ---- */
#aiosShell .content-overlay-inner{zoom:var(--pz,1);padding-top:22px}
#aiosShell .content-overlay-close{width:calc(44px * var(--pz,1));height:calc(44px * var(--pz,1));top:calc(16px * var(--pz,1));right:max(var(--edge,16px),calc((100% - 786px * var(--pz,1)) / 2 + 16px * var(--pz,1)))}
#aiosShell .content-overlay-close svg{width:calc(18px * var(--pz,1));height:calc(18px * var(--pz,1))}
#aiosShell .content-overlay .overlay-h2,#aiosShell .history-head{padding-right:56px;min-height:44px;display:flex;align-items:center}
@container (orientation:portrait) and (min-width:520px){
  #aiosShell .content-overlay-inner{max-width:none;padding-left:32px;padding-right:32px}
  #aiosShell .content-overlay-close{right:calc(24px * var(--pz,1))}
}
@container (orientation:portrait) and (max-width:519px){
  #aiosShell .content-overlay-inner{padding:16px 16px calc(32px + env(safe-area-inset-bottom,0px))}
  #aiosShell .content-overlay-close{top:12px;right:12px}
  #aiosShell .history-pills{gap:6px}
  #aiosShell .history-pill{padding:6px 11px}
}
@container (orientation:landscape) and (max-height:559px){
  #aiosShell .content-overlay-inner{max-width:720px;padding:12px 24px 24px}
  #aiosShell .content-overlay-close{top:8px;right:max(12px,env(safe-area-inset-right,0px))}
  #aiosShell .settings-section-head{margin-top:16px}
}
/* History */
#aiosShell .history-search,#aiosShell #historySearch{height:auto;min-height:48px;font-size:16px}
#aiosShell .history-pill{height:auto;min-height:36px;padding:7px 14px;white-space:nowrap;line-height:1.3}
#aiosShell .history-item{padding-left:12px;padding-right:12px}
#aiosShell .history-item-title,#aiosShell .history-item-preview{overflow-wrap:anywhere}
/* Settings */
#aiosShell .access-toggle{max-width:none;height:auto;min-height:54px;gap:16px;text-align:left}
#aiosShell .access-toggle-label{min-width:0}
#aiosShell .settings-clear-btn,#aiosShell .settings-lang-pill{height:auto;min-height:44px;padding:10px 18px;white-space:nowrap;line-height:1.3}
#aiosShell .settings-language-row{margin-top:8px}
#aiosShell .settings-clear-note{max-width:70ch}

/* ---- Chrome overlays (legal, manufacturer's plate) ---- */
#aiosShell .chrome-overlay-head{zoom:var(--pz,1);padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
#aiosShell .chrome-overlay-body{zoom:var(--pz,1)}
#aiosShell .legal-doc{padding-left:24px;padding-right:24px}
#aiosShell .legal-doc,#aiosShell .vplate-set{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
@container (orientation:portrait) and (max-width:519px){
  #aiosShell .chrome-overlay-head{min-height:56px;padding-top:6px;padding-bottom:6px}
  #aiosShell .legal-doc{padding-left:16px;padding-right:16px}
}
@container (orientation:landscape) and (max-height:559px){
  #aiosShell .chrome-overlay-head{min-height:54px;padding-top:4px;padding-bottom:4px}
}
/* Plate label boxes keep their serials and versions on one line. */
#aiosShell .vplate__strip-box,#aiosShell .vplate__header-box{white-space:nowrap;height:auto;flex-shrink:0;max-width:100%}