/* include the following global variables in main :root css
:root {
    --drawerBaseWidth: auto;
    --drawerShiftWidth: calc((100% - var(--drawerBaseWidth)) / 2); 
    --drawerBaseHeight: auto;
  }
*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(169, 169, 169, 0.7);
  z-index: 2000;
  /* 🧩 [SJ-DRW-CSS-LOCK-01] 2026-02-07 - Stop scroll/pan gestures from "falling through" the veil */
  touch-action: none;          /* blocks touch panning on the veil itself */
  overscroll-behavior: none;   /* blocks scroll chaining (where supported) */
  visibility: hidden; /* Hide initially */
  opacity: 0;
  transition: opacity 1s ease, visibility 0s 0.5s; /* Transition opacity and delay visibility change */
}

.overlay.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease; /* Transition opacity */
}

    .drawer {
      position: fixed;
      background-color: #cfe2ff;
      color: black;
      z-index: 2001;
      transition: transform 0.3s ease-in-out;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      width:  var(--drawerBaseWidth);
      height: var(--drawerBaseHeight);
      max-height: 100%;
    }

    .drawer-left,
    .drawer-right {
      width: var(--drawerBaseWidth);
      height: auto;
      top: 0;
    }

    .drawer-left {
      left: 0;
      transform: translateX(-100%);
    }

    .drawer-right {
      right: 0;
      transform: translateX(100%);
    }

    .drawer-top,
    .drawer-bottom {
      height: var(--drawerBaseHeight);
      width: var(--drawerBaseWidth);
      left:  var(--drawerShiftWidth); /* half of width */
    }

    .drawer-top {
      top: 0;
      transform: translateY(-100%);
    }

    .drawer-bottom {
      bottom: 0;
      transform: translateY(100%);

    }
    .drawer-header {
      background-color: #086dfc;
      color: white;
      height: 40px;
      padding: 10px;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawer-content {
      padding: 15px;
      overflow-y: auto;
      height: 100%;
      width: 100%;
      margin: auto;
      display: flex;
      justify-content: center;  /* ✅ Center horizontally */
      align-items: center;      /* ✅ Center vertically if needed */
    }

/* 2026-02-07 SJ-DRAWER-UX-02: Desktop bottom-drawer uses full height + breathing room at bottom */
/* - Keeps tablet/phone behavior unchanged (rules are desktop-only).
   - Prevents the content from looking "too short" on large screens.
   - Adds comfortable empty space at the bottom of the scroll area (last lines aren’t flush to the edge). */
.drawer-bottom .drawer-content {
  justify-content: flex-start;  /* top-align content (override the global centering) */
  align-items: flex-start;
  flex-direction: column;
}

/* =========================================================================================
   🧩 [SJ-DRW-CSS-URL-01] 14Feb26 - Full-height iframe drawer (Wikipedia, etc.)
   - Desktop-only drawer-height rules (utility "dead space") must NOT constrain iframe drawers.
   - Remove padding + scrollbars so the iframe feels truly "full screen".
   ========================================================================================= */
.drawer-bottom.drawer-type-url .drawer-content {
  padding: 0;           /* no inset around the iframe */
  overflow: hidden;     /* avoid nested scrollbars */
  flex: 1;              /* fill remaining space under the header */
  height: auto;         /* override global height:100% */
  width: 100%;
  justify-content: flex-start;
  align-items: stretch;
}

.drawer-bottom.drawer-type-url .drawer-content iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}


@media (min-width: 1024px) {
  .drawer-bottom:not(.drawer-type-url) {
    height: 75vh;               /* raise the drawer higher on large screens */
  }
  .drawer-bottom:not(.drawer-type-url) .drawer-content {
    padding-bottom: 20vh;       /* “dead space” ~ bottom 20% */
  }
}

/* ✅ 2026-03-13 🧩 [SJ-DRW-CSS-02] Consolidated duplicate transform/debug rules.
   Keeping a single active-state transform here avoids override noise and removes the temporary red debug border. */
.drawer.active {
  transform: translate(0, 0) !important;
}