/* CSS VARIABLES (tweak these) */
  :root{
    --debugbar-height: 44px;      /* height of debugbar bar itself */
    --debugbar-z: 900;
  }
/* Debugbar      
   ============================== */
.debugbar {
    position: fixed;
    height: var(--debugbar-height);
    left: 0;
    right: 0;
    display:flex;
    align-items:center;
    padding:0 12px;
    box-sizing:border-box;
    background: rgba(20,20,20,0.28);
    color:#eee;
    z-index: var(--debugbar-z);
    transition: left 240ms ease, bottom 240ms ease, top 240ms ease, transform 240ms ease;

  }
.debugbar-top { 
    top: var(--topbar-height);
    bottom: auto;
}
.debugbar-bottom { 
    bottom: 0;
    top: auto;
}
.debugbar .left { display:flex; align-items:center; gap:8px; }
.debugbar .right { margin-left:auto; display:flex; gap:8px; align-items:center; }

.debugbar.collapsed  {
    border-radius: 6px 6px 0 0;
}

.debug-panels {
    position: fixed;
    left: calc(var(--sidebar-current, var(--sidebar-width)));
    right: 0;
    max-height: 45vh;
    overflow:auto;
    background: #0b0c0d;
    color:#fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.5);
    z-index: calc(var(--debugbar-z) + 1);
    transition: left 240ms ease, top 240ms ease, bottom 240ms ease, transform 240ms ease, opacity 200ms ease;
    opacity: 0;
    pointer-events: none;
}
.debug-panels.show{ opacity:1; pointer-events:auto; }

/* when debugbar is top: panels placed BELOW it */
.debugbar.top + .debug-panels {
    top: calc(var(--topbar-height) + var(--debugbar-height) );
    bottom: auto;
}

 /* when debugbar is bottom: panels placed ABOVE it */
  .debugbar.bottom + .debug-panels {
    bottom: calc(var(--debugbar-height) );
    top: auto;
  }


 /* panel inner styles */
  .debug-panels .tabs { display:flex; gap:6px; padding:8px; background:#0f1112; border-bottom:1px solid rgba(255,255,255,0.03); }
  .debug-panels .tab-content { padding:12px; font-family: monospace; font-size:13px; white-space:pre-wrap; }


/* ===== MINIMIZED ICON ===== */
  .debug-icon {
    position: fixed;
    right: 12px;
    z-index: calc(var(--debugbar-z) + 2);
    width:26px; height:26px; 
      border-radius:22px;
    background: var(--brand);
     display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    cursor:pointer;
  }  
 .debug-icon i{
      color: var(--topbar-bg); 
      margin-left: 2px;
      margin-top: -8px;
      font-size: 0.9em;
  }
  .debug-icon.hidden{ display:none; }

/* position icon relative to topbar when debugbar top */
  .debug-icon.top { top: calc(var(--topbar-height) + 12px); bottom:auto; }
  .debug-icon.bottom { bottom: 12px; top:auto; }

.debugbar.collapsed .debugbar-inner {
    display: none;
}