/* Resizable left columns: primary rail (#rail) and secondary conversation list (#side). Widths come from --w-rail / --w-side on <html>
   (set before first paint by resize-ui.js). Desktop only (>=900px): below that the existing responsive CSS wins untouched. */
@media(min-width:900px){
  html.rs-r #rail{width:var(--w-rail);min-width:0;flex:none}
  html.rs-s #side{width:var(--w-side);min-width:0;flex:none}
  html.rs-g #gsb{width:var(--w-gsb)}
  html.rs-t #tpanel{width:var(--w-tp)}
  html.rs-c #cside{width:var(--w-cs)}
  #rail,#side,#tpanel,#cside{position:relative}
  @media(min-width:1101px){#gsb{position:relative}}
  .rs-h.rs-hl{right:auto;left:-3px}
  .rs-h{position:absolute;top:0;bottom:0;right:-3px;width:7px;z-index:30;cursor:col-resize;touch-action:none;-webkit-app-region:no-drag!important;outline:none;background:transparent}
  .rs-h::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:3px;border-radius:2px;background:var(--blue,#3370FF);opacity:0;transition:opacity .15s ease}
  .rs-h:hover::after,.rs-h:focus-visible::after,.rs-h.on::after{opacity:.55}
  .rs-h.on::after{opacity:.9}
  html.rs-drag,html.rs-drag *{cursor:col-resize!important;user-select:none!important}
  html.rs-drag #rail,html.rs-drag #side,html.rs-drag #gsb,html.rs-drag #tpanel,html.rs-drag #cside{transition:none!important}
  html.rs-drag iframe{pointer-events:none}
  html.rs-fold .rs-h.rs-hr{display:none}
  .rs-h.rs-hl{z-index:45}
  /* icons-only rail when the user drags it below ~120px (same look as the settings-panel fold) */
  body.rs-compact #rail{padding-left:8px;padding-right:8px;align-items:stretch}
  body.rs-compact #rail .rt select,body.rs-compact #rail .rt>*:not(#acb),body.rs-compact #rail .qwrap,body.rs-compact #mxst,body.rs-compact .mechip .mcn,body.rs-compact .mechip i{display:none!important}
  body.rs-compact #rail .rt{justify-content:center;padding:0 0 12px}body.rs-compact #acb{margin:0}
  body.rs-compact .ni{font-size:0;gap:0;justify-content:center;padding:0;position:relative}
  body.rs-compact .ni em{position:absolute;top:2px;right:4px;font-size:10px;padding:0 5px;margin:0}
  body.rs-compact #pwa-row{justify-content:center;padding:0}body.rs-compact #pwa-row span,body.rs-compact #pwa-row em{display:none}
  body.rs-compact .mechip{justify-content:center;padding:6px 0}
  html.rs-m-c #rail{padding-left:8px;padding-right:8px;align-items:stretch}
  html.rs-m-c #rail .rt select,html.rs-m-c #rail .rt>*:not(#acb),html.rs-m-c #rail .qwrap,html.rs-m-c #mxst,html.rs-m-c .mechip .mcn,html.rs-m-c .mechip i{display:none!important}
  html.rs-m-c #rail .rt{justify-content:center;padding:0 0 12px}html.rs-m-c #acb{margin:0}
  html.rs-m-c .ni{font-size:0;gap:0;justify-content:center;padding:0;position:relative}
  html.rs-m-c .ni em{position:absolute;top:2px;right:4px;font-size:10px;padding:0 5px;margin:0}
  html.rs-m-c #pwa-row{justify-content:center;padding:0}html.rs-m-c #pwa-row span,html.rs-m-c #pwa-row em{display:none}
  html.rs-m-c .mechip{justify-content:center;padding:6px 0}
  html.rs-m-c #rail{width:60px;min-width:0;flex:none}
  html.rs-m-c .rs-h.rs-hr{display:none}
  /* unread badges become dots when collapsed */
  html.rs-m-c .ni em,html.rs-m-c .ni em.dot{top:6px;right:12px;width:9px;height:9px;min-width:0;padding:0;font-size:0;box-shadow:0 0 0 2px var(--wash)}
  /* collapse / expand toggle at the rail's top edge */
  #rmode{position:absolute;top:6px;right:8px;z-index:32;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-app-region:no-drag;opacity:.75;transition:opacity .15s,background .15s}
  #rmode svg{transition:transform .2s}#rmode.is-collapsed svg{transform:rotate(180deg)}
  #rail:hover #rmode,#rmode:focus-visible,#rmode[aria-expanded=false]{opacity:1}
  #rmode:hover{background:var(--hair,rgba(0,0,0,.06));color:var(--ink)}
  #rmode:focus-visible{outline:2px solid var(--blue,#3370FF);outline-offset:1px}
  html.rs-icons #rmode{right:auto;left:calc(50% - 12px)}
  /* last resort: the chat would drop below 420px, so the right panel floats over it instead of squeezing it (or folding the rail) */
  body.rs-ovl #gsb,body.rs-ovl #tpanel{position:fixed;top:0;right:0;bottom:0;z-index:40;box-shadow:-12px 0 32px -16px rgba(31,35,41,.28)}
  #rm-menu{position:fixed;z-index:520;min-width:230px;padding:5px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);font:500 13px var(--f-b)}
  #rm-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;padding:8px 10px;border-radius:6px;cursor:pointer}
  #rm-menu button::before{content:"";width:14px;flex:none}#rm-menu button[aria-checked=true]::before{content:"\2713";font-weight:700;color:var(--blue,#3370FF)}
  #rm-menu button:hover,#rm-menu button:focus-visible{background:var(--wash);outline:none}
}
@media(max-width:899px){.rs-h{display:none!important}}
@media(max-width:899px){#rmode,#rm-menu{display:none!important}}