/* V30.1 panel layer - slide-over panels and modals sit ABOVE the top bar and sidebar.
 *
 * Root cause: the bundle CSS gives .main { position:relative; z-index:1 }, which makes
 * .main its own stacking context. Every overlay rendered inside a page (.cl-scrim for the
 * Clients / Leads detail panel, .overlay for the ~20 modals, .ch-lightbox for chat images)
 * is therefore trapped at layer 1, under the sticky .topbar (z 30) and .sidebar (z 40),
 * whatever its own z-index says. The top bar was drawing over the panel's header.
 *
 * Fix: while one of those overlays is open, lift .main above the shell chrome.
 * Nothing changes when no overlay is open.
 * Roll back: delete the panel-layer.css line in index.html.
 */

.main:has(.cl-scrim, .overlay, .ch-lightbox) {
  z-index: 80 !important;
}

/* desktop: float the panel like the sidebar and top bar (12px gap, rounded slab) */
@media (min-width: 901px) {
  .cl-scrim { padding: 12px; }
  .cl-panel { height: 100% !important; border-radius: 24px !important; }
}

/* the Veeha bubble (fixed, z 9990) sat on the panel's bottom corner - step it aside while a panel is open */
body:has(.cl-scrim) #dl-vh-fab {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease;
}