/* ───────────────────────────────────────────────────────────────
   Axolotl Help Panel — compact, deduped, theme-aware
   - Panel lives at #ax-help-panel (JS toggles .is-collapsed)
   - Collapse button: icon-only (inline SVG)
   - Expand puck: inline SVG book; JS sets its top to the card’s top
   - Admin-only DnD with visual grip and drag states
   ─────────────────────────────────────────────────────────────── */

/* ================================
   THEME TOKENS (light default)
   ================================ */
:root {
  /* Collapse icon (header button) */
  --axhp-toggle-icon: #0f172a;          /* dark on light */
  --axhp-toggle-icon-hover: #020617;

  /* Expand puck (book icon + glass pill) */
  --axhp-puck-icon: #0f172a;            /* dark on light */
  --axhp-puck-ring: rgba(2,132,199,.24);
  --axhp-puck-bg: linear-gradient(145deg, rgba(245,247,250,.96), rgba(230,236,245,.96));
  --axhp-shadow-outer: 0 14px 26px rgba(0,0,0,.30);
  --axhp-shadow-inner-top: inset 0 1px 0 rgba(255,255,255,.65);
  --axhp-shadow-inner-btm: inset 0 -1px 0 rgba(0,0,0,.15);
}

/* Dark via system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --axhp-toggle-icon: #e5eefc;        /* light on dark */
    --axhp-toggle-icon-hover: #ffffff;

    --axhp-puck-icon: #eaf6ff;          /* light on dark */
    --axhp-puck-ring: rgba(0,200,255,.30);
    --axhp-puck-bg: linear-gradient(145deg, rgba(20,30,48,.98), rgba(12,22,36,.96));
    --axhp-shadow-outer: 0 14px 26px rgba(0,0,0,.55);
    --axhp-shadow-inner-top: inset 0 1px 0 rgba(255,255,255,.10);
    --axhp-shadow-inner-btm: inset 0 -1px 0 rgba(0,0,0,.45);
  }
}

/* Dark via class/attr (common HumHub skins) */
body.dark, body.dark-mode, html.theme-dark, body[data-theme="dark"], [data-theme="dark"] {
  --axhp-toggle-icon: #e5eefc;
  --axhp-toggle-icon-hover: #ffffff;
  --axhp-puck-icon: #eaf6ff;
  --axhp-puck-ring: rgba(0,200,255,.30);
  --axhp-puck-bg: linear-gradient(145deg, rgba(20,30,48,.98), rgba(12,22,36,.96));
  --axhp-shadow-outer: 0 14px 26px rgba(0,0,0,.55);
  --axhp-shadow-inner-top: inset 0 1px 0 rgba(255,255,255,.10);
  --axhp-shadow-inner-btm: inset 0 -1px 0 rgba(0,0,0,.45);
}

/* ================================
   PANEL POSITION & CARD
   ================================ */

/* Container (fixed left); JS updates .is-collapsed and sets expand puck top */
#ax-help-panel {
  position: fixed;
  /* Fallback only; JS repositions the expand puck to the card’s top */
  top: 110px;
  left: 16px;
  z-index: 1035; /* above navbar/search (~1000–1020), below modal/backdrop (~1040–1050) */
  width: 320px;
  max-width: calc(100vw - 32px);
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;

  /* NEW: default var so we still work if JS hasn’t run yet */
  --axhp-top: 110px;
}

/* Collapsed: send container to the back and remove its hitbox.
   The expand puck remains clickable (we lift it above again below). */
#ax-help-panel.is-collapsed {
  /* Drop behind normal content */
  z-index: auto;           /* removes the panel’s stacking context */
  /* Kill the invisible 320px overlay */
  width: 0;
  height: 0;
  /* (no pointer-events: none here; we don’t need it if the box is 0x0) */
}

/* Ensure the puck is still above everything and clickable */
#ax-help-panel.is-collapsed .axhp-expand {
  z-index: 2147483640;     /* higher than anything else on the page */
  pointer-events: auto;    /* explicit: puck stays interactive */
}
/* Glass card */
.axhp-card {
  border-radius: 16px;
  padding: 12px 12px 8px;
  background: rgba(20, 28, 40, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  color: #e8eef6;
  position: relative;               /* keep above content */
  z-index: 2147483100;

  /* NEW: make the card a column flexbox so the body can scroll */
  display: flex;
  flex-direction: column;

  /* NEW: cap the card to the viewport minus its top offset + a small gap */
  max-height: calc(100vh - var(--axhp-top, 110px) - 24px);
  min-height: 160px; /* keeps a “card” feel with few items */
}

/* Collapse state: slide only the card, keep container for the puck */
#ax-help-panel.is-collapsed .axhp-card {
  transform: translateX(-102%);
  opacity: .95;
  pointer-events: none;
}

/* ================================
   HEADER & COLLAPSE BUTTON (icon-only)
   ================================ */
.axhp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.axhp-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.axhp-toggle {
  appearance: none;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  cursor: pointer;
}
.axhp-toggle:hover { background: rgba(255,255,255,0.12); }

.axhp-ico { line-height: 0; }
.axhp-ico svg {
  width: 20px; height: 20px;
  color: var(--axhp-toggle-icon);
  fill: currentColor;
  transition: color .15s ease;
}
.axhp-toggle:hover .axhp-ico svg { color: var(--axhp-toggle-icon-hover); }

/* Swap chevrons by state */
.axhp-ico-collapsed { display: none; }
#ax-help-panel.is-collapsed .axhp-ico-expanded { display: none; }
#ax-help-panel.is-collapsed .axhp-ico-collapsed { display: inline-flex; }

/* ================================
   NAV LIST
   ================================ */
.axhp-nav {
  margin-top: 6px;

  /* NEW: occupy remaining space in the card and scroll */
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Optional nicety: leave room for the scrollbar so text doesn’t jitter */
  padding-right: 6px;
  scrollbar-gutter: stable both-edges; /* supported in modern browsers */
}

.axhp-list {
  list-style: none;
  padding: 0;
  margin: 0;

  /* keep your existing compact grid layout */
  display: grid;
  gap: 6px;
}

/* Subtle scrollbar cosmetics */
.axhp-nav::-webkit-scrollbar { width: 10px; }
.axhp-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
.axhp-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.axhp-nav::-webkit-scrollbar-track { background: transparent; }

.axhp-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: inherit;
  text-decoration: none;
  width: 100%;
  min-width: 0; /* allow children to wrap instead of overflowing */
}
.axhp-link:hover {
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.axhp-icon {
  opacity: .9;
  font-size: 14px;
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
}
.axhp-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

.axhp-empty {
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 13px;
  opacity: .9;
}

/* ================================
   ADMIN DnD (grip + states)
   ================================ */
.axhp-item[draggable="true"] .axhp-link { cursor: grab; }
.axhp-item.is-dragging .axhp-link,
.axhp-item.dragging .axhp-link { opacity: .7; } /* support both class names */
.axhp-item.drag-over { outline: 2px dashed rgba(255,255,255,.25); outline-offset: 2px; }

.axhp-grip {
  width: 12px;
  height: 18px;
  display: inline-block;
  flex: 0 0 12px;
  border-radius: 3px;
  position: relative;
  opacity: .85;
  margin-right: 6px;
}
.axhp-grip::before, .axhp-grip::after {
  content: "⋮";
  position: absolute;
  left: 3px;
  line-height: 8px;
  font-size: 14px;
}
.axhp-grip::before { top: -2px; }
.axhp-grip::after  { top: 6px; }

/* ================================
   EXPAND PUCK (top of left wall menu)
   ================================ */
/* Hidden by default; shown when collapsed */
.axhp-expand {
  position: fixed;
  left: 14px;
  /* top is set dynamically by JS to align with .axhp-card’s top */
  z-index: 2147483000;
  display: none;
  border: 0;
  padding: 0;
  width: 52px;
  height: 52px;
  cursor: pointer;
  background: none;
  border-radius: 999px;
}
#ax-help-panel.is-collapsed .axhp-expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.axhp-expand-inner {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--axhp-puck-bg);
  color: var(--axhp-puck-icon);      /* inline SVG uses currentColor */
  box-shadow:
    var(--axhp-shadow-outer),
    var(--axhp-shadow-inner-top),
    var(--axhp-shadow-inner-btm),
    0 0 0 2px var(--axhp-puck-ring);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1);
  display: grid;
  place-items: center;
}
.axhp-expand-inner svg { width: 20px; height: 20px; fill: currentColor; }
.axhp-expand:hover .axhp-expand-inner {
  transform: scale(1.08);
  box-shadow:
    0 18px 30px rgba(0,0,0,.35),
    var(--axhp-shadow-inner-top),
    var(--axhp-shadow-inner-btm),
    0 0 0 3px var(--axhp-puck-ring);
}
.axhp-expand:active .axhp-expand-inner { transform: scale(0.98); }

/* Hide puck when panel is expanded */
#ax-help-panel:not(.is-collapsed) .axhp-expand { display: none; }

/* ================================
   A11y helper
   ================================ */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* ===== FORCE collapse icon to white in dark themes (wins the cascade) ===== */

/* System dark */
@media (prefers-color-scheme: dark) {
  #ax-help-panel .axhp-toggle .axhp-ico svg { color: #fff !important; }
  #ax-help-panel .axhp-toggle:hover .axhp-ico svg { color: #fff !important; }
}

#ax-help-panel.is-collapsed {
  z-index: auto; /* drop behind content */
  width: 0;
  height: 0;
}

#ax-help-panel.is-collapsed .axhp-card {
  transform: translateX(-102%);
  opacity: .95;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   Hide the header label ONLY when the panel is collapsed
   (top round puck remains the only visible affordance)
   ───────────────────────────────────────────────────────── */

/* Title off when collapsed */
#ax-help-panel.is-collapsed .axhp-title {
  display: none !important;
}

/* If any theme/pseudo tries to mirror the title → kill it only when collapsed */
#ax-help-panel.is-collapsed .axhp-title::before,
#ax-help-panel.is-collapsed .axhp-title::after,
#ax-help-panel.is-collapsed .axhp-card::before,
#ax-help-panel.is-collapsed .axhp-card::after {
  content: none !important;
  display: none !important;
}

/* Keep the puck logic explicit: visible only when collapsed */
#ax-help-panel .axhp-expand { display: none; }
#ax-help-panel.is-collapsed .axhp-expand {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===== HARD KILL: legacy vertical rail, labels, stray chevrons ===== */
#ax-help-panel .axhp-rail,
#ax-help-panel .axhp-rail *,
#ax-help-panel .axhp-rail-label,
#ax-help-panel .axhp-rail-chevron,
#ax-help-panel .axhp-left-rail,
#ax-help-panel [data-axhp-rail],
#ax-help-panel [data-axhp="rail"],
#ax-help-panel [style*="writing-mode:vertical-rl"],
#ax-help-panel .axhp-vertical-label,
#ax-help-panel .axhp-side-label {
  display: none !important;
}

/* Keep only the top round puck as the *only* expand affordance */
#ax-help-panel .axhp-expand { display: none; }              /* default */
#ax-help-panel.is-collapsed .axhp-expand { display: flex; } /* when collapsed */


/* Common explicit dark theme flags used by HumHub skins */
body.dark #ax-help-panel .axhp-toggle .axhp-ico svg,
body.dark-mode #ax-help-panel .axhp-toggle .axhp-ico svg,
html.theme-dark #ax-help-panel .axhp-toggle .axhp-ico svg,
body[data-theme="dark"] #ax-help-panel .axhp-toggle .axhp-ico svg,
[data-theme="dark"] #ax-help-panel .axhp-toggle .axhp-ico svg { color: #fff !important; }

body.dark #ax-help-panel .axhp-toggle:hover .axhp-ico svg,
body.dark-mode #ax-help-panel .axhp-toggle:hover .axhp-ico svg,
html.theme-dark #ax-help-panel .axhp-toggle:hover .axhp-ico svg,
body[data-theme="dark"] #ax-help-panel .axhp-toggle:hover .axhp-ico svg,
[data-theme="dark"] #ax-help-panel .axhp-toggle:hover .axhp-ico svg { color: #fff !important; }