/* === KOJOH SHARED SIDEBAR ===
   Designed to read as part of the existing KOJOH UI: same cream
   background, same hairline borders, same type, no separate "dashboard"
   surface or accent color. Monochrome except the existing pale-blue
   avatar, which lives outside this component.

   The page body itself is a rounded "card" inset 10px from the viewport
   (see body{margin:10px 10px 0; border-radius:20px 20px 0 0} in
   styles.css) sitting on a near-black html background. The rail is
   inset/rounded to match that same card on its top-left corner instead
   of sitting flush at the true viewport edge. Otherwise it reads as a
   separate layer floating on top of the page rather than the page's own
   left edge. */

:root {
  --ksb-collapsed: 64px;
  --ksb-expanded: 240px;
  --ksb-duration: 380ms;        /* open/close the panel: unhurried */
  --ksb-tuck-duration: 560ms;   /* sliding away on scroll: slower still */
  --ksb-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --ksb-hover: rgba(28, 26, 30, 0.045);
  --ksb-active: rgba(28, 26, 30, 0.07);
}
[data-theme="dark"] {
  --ksb-hover: rgba(237, 235, 230, 0.06);
  --ksb-active: rgba(237, 235, 230, 0.1);
}

.ksb-rail {
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 0;
  width: var(--ksb-collapsed);
  background: var(--bg, #F4F1EA);
  border-right: 1px solid var(--line, #E4E0D6);
  border-top-left-radius: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width var(--ksb-duration) var(--ksb-ease),
              transform var(--ksb-tuck-duration) var(--ksb-ease),
              opacity var(--ksb-tuck-duration) var(--ksb-ease);
}

.ksb-rail.expanded {
  width: var(--ksb-expanded);
}

/* Tucked: the rail slides off the left edge while the reader scrolls, so
   nothing hovers over the page. It comes back on scroll up, at the top of
   the page, or when the pointer reaches the edge handle. */
.ksb-rail.tucked {
  transform: translateX(calc(-100% - 14px));
  opacity: 0;
  pointer-events: none; /* never swallow clicks while it's off-screen */
}

/* The sliver left behind when the rail is tucked: a quiet little grab
   handle at the left edge, with a generous invisible hit area.
   Mobile only. On desktop scrolling back up brings the rail in, so an
   edge handle there would just be clutter. */
.ksb-edge {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 72px;
  z-index: 895;
  display: none;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.ksb-edge::before {
  content: '';
  display: block;
  width: 4px;
  height: 44px;
  margin-left: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--line, #E4E0D6);
  transition: height var(--ksb-duration) var(--ksb-ease), background 0.15s ease;
}
.ksb-edge:hover::before {
  height: 72px;
  background: var(--muted, #7A7772);
}

/* ---------- Top bar ---------- */
.ksb-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.85rem 0.75rem;
  flex-shrink: 0;
  min-height: 24px;
}

.ksb-hamburger {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}

.ksb-hamburger:hover {
  background: var(--ksb-hover);
}

.ksb-hamburger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text, #1C1A1E);
  border-radius: 2px;
}

.ksb-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--text, #1C1A1E);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.ksb-rail.expanded .ksb-wordmark {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  transition-delay: 0.05s;
}

.ksb-collapse-btn {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-left: auto;
  border: none;
  background: transparent;
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--muted, #7A7772);
  cursor: pointer;
  padding: 0;
}
.ksb-collapse-btn:hover {
  background: var(--ksb-hover);
  color: var(--text, #1C1A1E);
}
.ksb-rail.expanded .ksb-collapse-btn {
  display: flex;
}

/* ---------- Nav list ---------- */
.ksb-nav {
  flex: 1;
  padding: 0.3rem 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ksb-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted, #7A7772);
  padding: 0.9rem 0.55rem 0.35rem;
  white-space: nowrap;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.ksb-rail.expanded .ksb-group-label {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.ksb-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.5rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text, #1C1A1E);
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease;
}

.ksb-item:hover {
  background: var(--ksb-hover);
}

.ksb-item.active {
  background: var(--ksb-active);
  font-weight: 600;
}

.ksb-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #1C1A1E);
}

.ksb-item-label {
  font-size: 0.8125rem;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.15s ease;
}

.ksb-rail.expanded .ksb-item-label {
  opacity: 1;
  max-width: 170px;
  transition-delay: 0.04s;
}

/* Divider between BROWSE and MORE groups. */
.ksb-nav > .ksb-group-label ~ .ksb-group-label {
  margin-top: 0.35rem;
  border-top: 1px solid var(--line, #E4E0D6);
}

.ksb-overlay {
  display: none;
}

/* Mobile off-canvas trigger: an independent fixed button so it's always
   reachable even when the rail itself is collapsed to width 0. Hidden on
   larger screens where the rail's own hamburger is already visible. */
.ksb-mobile-trigger {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  z-index: 950;
  background: var(--bg, #F4F1EA);
  border: 1px solid var(--line, #E4E0D6);
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.ksb-mobile-trigger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text, #1C1A1E);
  border-radius: 2px;
}
.ksb-mobile-trigger {
  transition: transform var(--ksb-duration) var(--ksb-ease),
              opacity var(--ksb-duration) var(--ksb-ease);
}
/* The floating mobile button rides away with the rail while scrolling. */
body.ksb-tucked .ksb-mobile-trigger {
  transform: translateX(calc(-100% - 16px));
  opacity: 0;
  pointer-events: none;
}

/* Content offset so the fixed rail never overlaps page content. It grows
   with the rail so expanding it "pushes" the layout instead of covering it. */
body.ksb-has-rail {
  padding-left: var(--ksb-collapsed);
  box-sizing: border-box;
  transition: padding-left var(--ksb-duration) var(--ksb-ease);
}
body.ksb-has-rail.ksb-expanded {
  padding-left: var(--ksb-expanded);
}

/* Mobile: the rail becomes a true off-canvas drawer, flush with the real
   viewport edge (the body's own rounded-card margin is already dropped
   at this width, so nothing to align with). Collapsed = hidden entirely
   (no persistent strip); the small trigger button opens it as an overlay. */
@media (max-width: 720px) {
  body.ksb-has-rail,
  body.ksb-has-rail.ksb-expanded {
    padding-left: 0;
  }
  .ksb-rail {
    top: 0;
    left: 0;
    width: 0;
    border-right: none;
    border-top-left-radius: 0;
  }
  .ksb-rail.expanded {
    width: min(240px, 80vw);
    border-right: 1px solid var(--line, #E4E0D6);
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.14);
  }
  .ksb-mobile-trigger {
    display: flex;
  }
  /* On a phone there's no "scroll up a little" muscle memory, so the
     edge handle is how you pull the drawer back. */
  body.ksb-tucked .ksb-edge {
    display: flex;
  }
  .ksb-rail.expanded ~ .ksb-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(20, 19, 17, 0.32);
  }
}

/* Profile chip pinned to the bottom of the rail */
.ksb-me {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.25rem 0.5rem 0.9rem; padding: 0.4rem; border-radius: 12px;
  text-decoration: none; color: var(--text, #1C1A1E); white-space: nowrap; overflow: hidden;
  transition: background 0.15s ease;
}
.ksb-me:hover, .ksb-me.active { background: var(--ksb-hover); }
.ksb-me-face {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--folder-product, #E3DDF5); color: var(--folder-product-text, #1C1A1E);
  font-size: 0.75rem; font-weight: 700;
}
.ksb-me-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksb-me-text { display: flex; flex-direction: column; line-height: 1.2; }
.ksb-me-text b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ksb-me-text small { font-size: 0.7rem; color: var(--muted, #7A7772); }