/* ---- responsive: rail mode (tablet / small desktop) ---- */
@media (max-width: 1024px) {
  :root { --sidebar-w: 64px; --rpanel-w: 380px; }
  #sidebar { width: var(--rail-w); min-width: var(--rail-w); }
  #sidebar .sb-full { display: none; }
  #sidebar .sb-rail { display: flex; }
}

/* ---- phone: single pane navigation ---- */
@media (max-width: 640px) {
  :root { --rpanel-w: 100vw; }
  #app { position: relative; }
  #sidebar, #main, #rpanel {
    position: absolute; inset: 0; width: 100% !important; min-width: 0 !important;
    border-left: none;
    background: var(--bg-app);
  }
  #sidebar { z-index: 1; }
  #main { z-index: 2; display: none; }
  #rpanel { z-index: 3; display: none; }

  /* full sidebar (not rail) on phones */
  #sidebar .sb-full { display: flex; }
  #sidebar .sb-rail { display: none; }

  body[data-mobile-view="list"] #sidebar { display: flex; }
  body[data-mobile-view="list"] #main, body[data-mobile-view="list"] #rpanel { display: none; }

  body[data-mobile-view="chat"] #main { display: flex; }
  body[data-mobile-view="chat"] #rpanel { display: none; }

  body[data-mobile-view="panel"] #rpanel { display: block; width: 100vw !important; }
  body[data-mobile-view="panel"].rpanel-open #rpanel { width: 100vw !important; min-width: 100vw !important; }

  .chat-back { display: inline-flex !important; }

  .dialog { width: calc(100vw - 48px); }

  /* chat header stays put and opaque while messages scroll under it */
  .chat-header {
    position: sticky; top: 0;
    background: var(--bg-app);
    z-index: 20;
  }

  /* long agent names ellipsize instead of pushing the header wide */
  .chat-ident { flex: 0 1 auto; min-width: 0; }
  .chat-name-btn { min-width: 0; }

  /* agent quick-switcher becomes a full-width sheet under the header */
  .popover.agent-switcher {
    position: fixed;
    left: 12px !important; right: 12px; top: 64px !important;
    width: auto; max-width: none;
  }
  .popover.agent-switcher .asw-list { max-height: min(380px, 55vh); }
}