/* =========================
   Sidebar Toggle Notice
   Consolidated + Placement
   (Updated for panel-wrap clamping)
   ========================= */

.ncm-sidebar-toggle-notice{
  /* placement vars */
  --stn-offset-main: 55%;
  --stn-offset-cross: 0px;
  --stn-gap: 14px;

  /* sizing + spacing vars */
  --stn-size: md;                /* sm | md | lg | custom */
  --stn-icon-size: 18px;         /* actual icon height */
  --stn-btn-padding: 4px;        /* button outer padding */
  --stn-btn-footprint: calc(var(--stn-icon-size) + (var(--stn-btn-padding) * 2) + 16px);
  /* the +16px is to account for label padding (8px-ish each side) */

  /* colors */
  --stn-btn-bg: rgba(188, 89, 227, 0.65);
  --stn-btn-bg-hover: rgba(188, 89, 227, 0.94);

  /* icon filter */
  --stn-icon-invert-enabled: 1;  /* 0 or 1 */
  --stn-icon-invert-amt: 100;    /* 0–100 */
}

/* Hide checkbox */
.ncm-sidebar-toggle-notice .ncm-stn__cb{ display:none; }

/* ---------- Button (base look) ---------- */
.ncm-sidebar-toggle-notice .ncm-stn__button{
  position: fixed;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--stn-btn-padding);
  border-radius: 24px; /* you can swap this to your border radius var later */
  background-color: var(--stn-btn-bg);

  box-shadow: 0 0 12px 8px rgb(255 255 255 / 0.05) inset, 0 0 8px 1px rgb(0 0 0 / 0.10);
  transition: box-shadow .35s ease, transform .25s ease, background-color .35s ease;
}

.ncm-sidebar-toggle-notice .ncm-stn__button:hover{
  background-color: var(--stn-btn-bg-hover);
}

.ncm-sidebar-toggle-notice .ncm-stn__label{
  cursor:pointer;
  padding: 8px 6px 8px 8px;
  display:block;
}

.ncm-sidebar-toggle-notice .ncm-stn__icon{
  max-height: var(--stn-icon-size);
  filter: invert(calc(var(--stn-icon-invert-enabled) * (var(--stn-icon-invert-amt) / 100)));
  display:block;
}

.ncm-sidebar-toggle-notice .ncm-stn__fallback{
  display:block;
  font-weight:700;
  padding: 0 6px;
}

/* size presets */
.ncm-sidebar-toggle-notice[data-size="sm"]{ --stn-icon-size: 14px; --stn-btn-padding: 3px; }
.ncm-sidebar-toggle-notice[data-size="md"]{ --stn-icon-size: 18px; --stn-btn-padding: 4px; }
.ncm-sidebar-toggle-notice[data-size="lg"]{ --stn-icon-size: 24px; --stn-btn-padding: 6px; }

/* optional: if you want the circle to scale a bit with size */
.ncm-sidebar-toggle-notice[data-size="lg"] .ncm-stn__button{ border-radius: 28px; }

/* =========================
   Panel Wrap (position + clamping nudges)
   ========================= */

.ncm-sidebar-toggle-notice .ncm-stn__panel-wrap{
  position: fixed;
  z-index: 9999998;

  /* nudges set by JS */
  --stn-pan-nudge-x: 0px;
  --stn-pan-nudge-y: 0px;

  transform: translate(var(--stn-pan-nudge-x), var(--stn-pan-nudge-y));

  /* wrapper hidden until open */
  opacity: 0;
  pointer-events: none;
}

.ncm-sidebar-toggle-notice .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   Panel (visual box + animation only)
   ========================= */

.ncm-sidebar-toggle-notice .ncm-stn__panel{
  background: #f4f4f4;
  border: 1px solid #d0d7da;
  overflow: hidden;

  /* always fit in viewport (JS will still clamp position) */
  width: min(560px, calc(100vw - 24px));
  height: min(700px, calc(100vh - 24px));

  padding: 10px 0 10px 30px;

  /* default (left placement shape; others override below) */
  border-radius: 1px 20px 20px 1px;

  box-shadow: 0 0 10px 8px rgb(255 255 255 / 0.01) inset, 0 0 12px 8px rgb(0 0 0 / 0.05);

  /* animation defaults (overridden per placement) */
  transform: translate(0, -50%) scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease, box-shadow .35s ease;
}

/* Inner scroll area */
.ncm-sidebar-toggle-notice .ncm-stn__content{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .15s ease, transform .35s ease;
  pointer-events: none;

  scrollbar-gutter: stable both-edges;
  padding-right: 10px;
}

/* Open state: content fades in (panel animation handled per placement below) */
.ncm-sidebar-toggle-notice .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap .ncm-stn__content{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   Placement Rules
   (Button stays fixed; Wrap positions; Panel animates)
   ========================= */

/* LEFT (opens right) */
.ncm-sidebar-toggle-notice[data-placement="left"] .ncm-stn__button{
  left: var(--stn-offset-cross);
  top: var(--stn-offset-main);
  transform: translateY(-50%);
}
.ncm-sidebar-toggle-notice[data-placement="left"] .ncm-stn__button:hover{
  transform: translateY(-50%) scale(1.05);
}

.ncm-sidebar-toggle-notice[data-placement="left"] .ncm-stn__panel-wrap{
  left: calc(var(--stn-offset-cross) + var(--stn-gap) + var(--stn-btn-footprint));
  top: var(--stn-offset-main);
}
.ncm-sidebar-toggle-notice[data-placement="left"] .ncm-stn__panel{
  border-left: 0;
  border-radius: 1px 20px 20px 1px;

  transform: translate(0, -50%) scaleX(0);
  transform-origin: left center;
}
.ncm-sidebar-toggle-notice[data-placement="left"] .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap .ncm-stn__panel{
  transform: translate(0, -50%) scaleX(1);
}

/* RIGHT (opens left) */
.ncm-sidebar-toggle-notice[data-placement="right"] .ncm-stn__button{
  right: var(--stn-offset-cross);
  top: var(--stn-offset-main);
  transform: translateY(-50%);
}
.ncm-sidebar-toggle-notice[data-placement="right"] .ncm-stn__button:hover{
  transform: translateY(-50%) scale(1.05);
}

.ncm-sidebar-toggle-notice[data-placement="right"] .ncm-stn__panel-wrap{
  right: calc(var(--stn-offset-cross) + var(--stn-gap) + var(--stn-btn-footprint));
  top: var(--stn-offset-main);
}
.ncm-sidebar-toggle-notice[data-placement="right"] .ncm-stn__panel{
  border-right: 0;
  border-radius: 20px 1px 1px 20px;

  transform: translate(0, -50%) scaleX(0);
  transform-origin: right center;
}
.ncm-sidebar-toggle-notice[data-placement="right"] .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap .ncm-stn__panel{
  transform: translate(0, -50%) scaleX(1);
}

/* BOTTOM (opens up) */
.ncm-sidebar-toggle-notice[data-placement="bottom"] .ncm-stn__button{
  left: var(--stn-offset-main);
  bottom: var(--stn-offset-cross);
  transform: translateX(-50%);
}
.ncm-sidebar-toggle-notice[data-placement="bottom"] .ncm-stn__button:hover{
  transform: translateX(-50%) scale(1.05);
}

.ncm-sidebar-toggle-notice[data-placement="bottom"] .ncm-stn__panel-wrap{
  left: var(--stn-offset-main);
  bottom: calc(var(--stn-offset-cross) + var(--stn-gap) + var(--stn-btn-footprint));
}
.ncm-sidebar-toggle-notice[data-placement="bottom"] .ncm-stn__panel{
  border-radius: 20px 20px 1px 1px;

  transform: translate(-50%, 0) scaleY(0);
  transform-origin: center bottom;
}
.ncm-sidebar-toggle-notice[data-placement="bottom"] .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap .ncm-stn__panel{
  transform: translate(-50%, 0) scaleY(1);
}

/* TOP (opens down) */
.ncm-sidebar-toggle-notice[data-placement="top"] .ncm-stn__button{
  left: var(--stn-offset-main);
  top: var(--stn-offset-cross);
  transform: translateX(-50%);
}
.ncm-sidebar-toggle-notice[data-placement="top"] .ncm-stn__button:hover{
  transform: translateX(-50%) scale(1.05);
}

.ncm-sidebar-toggle-notice[data-placement="top"] .ncm-stn__panel-wrap{
  left: var(--stn-offset-main);
  top: calc(var(--stn-offset-cross) + var(--stn-gap) + var(--stn-btn-footprint));
}
.ncm-sidebar-toggle-notice[data-placement="top"] .ncm-stn__panel{
  border-radius: 1px 1px 20px 20px;

  transform: translate(-50%, 0) scaleY(0);
  transform-origin: center top;
}
.ncm-sidebar-toggle-notice[data-placement="top"] .ncm-stn__cb:checked ~ .ncm-stn__panel-wrap .ncm-stn__panel{
  transform: translate(-50%, 0) scaleY(1);
}