/* One layer order for the whole app, so a menu that drops down is never
   under a glass panel, a bar or a sheet. Glass (backdrop-filter) makes a
   stacking context, so the bar that OWNS a menu must itself sit above the
   page — a menu cannot climb out of a bar that is underneath. */
:root {
  --z-page: 1;
  --z-player: 20;
  --z-bar: 200;          /* top bar, phone tab bar, sidebar */
  --z-drawer: 900;       /* sidebar drawer + scrim */
  --z-menu: 1000;        /* dropdowns, popovers, the model and user menus */
  --z-sheet: 1100;       /* bottom sheets + scrims */
  --z-dialog: 1200;
  --z-toast: 1300;
}
.topbar, .tab-bar, .phone-tabbar, .bottom-nav { position: relative; z-index: var(--z-bar) !important; }
.sidebar { z-index: var(--z-bar) !important; }
.drawer-scrim, .audit-drawer-scrim { z-index: var(--z-drawer) !important; }
.sidebar.is-open, .sidebar[data-open="true"], .audit-drawer { z-index: calc(var(--z-drawer) + 1) !important; }
.model-menu, .user-menu, .info-popover, .models-menu, .models-submenu, .ra-pill, .ra-selection-pill,
[role="menu"], [role="listbox"], .dropdown, .menu-pop, .popover {
  z-index: var(--z-menu) !important;
}
/* the wrapper that positions a menu must not be clipped or buried */
.model-select-wrap, .user-row, .deep-safety-wrap, .toggle-group, .topbar-controls, .topbar-right { position: relative; z-index: auto; overflow: visible !important; }
.model-select-wrap:has(.model-menu:not([hidden])), .user-row:has(.user-menu:not([hidden])),
.deep-safety-wrap:has(.info-popover:not([hidden])), .toggle-group:has(.info-popover:not([hidden])) { z-index: var(--z-menu) !important; }
.key-sheet-scrim, .nda-copy-sheet-scrim, .more-sheet-scrim, .shield-sheet-scrim, .models-sheet-scrim { z-index: var(--z-sheet) !important; }
.key-sheet, .nda-copy-sheet, .more-sheet, .shield-sheet, .models-sheet { z-index: calc(var(--z-sheet) + 1) !important; }
dialog, .dialog, .modal { z-index: var(--z-dialog) !important; }
.toast, .toasts { z-index: var(--z-toast) !important; }