/* <liquid-sidebar> styles — requires tokens.css.
   Light DOM on purpose so host apps can override anything. */

liquid-sidebar {
  display: block;
  position: sticky;
  top: 12px;
  height: calc(100vh - 24px);
  width: var(--lsb-rail, 76px);
  flex-shrink: 0;
  z-index: 30;
}

.lsb-float {
  position: absolute;
  inset: 0 auto 0 0;
  /* width driven by JS spring */
  transform-origin: 0 50%; /* hop stretch anchors at the pinned left edge */
}

.lsb-shadow {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-panel);
}

/* True-glass layer: carries clip-path + backdrop-filter together (works in
   Chromium/Firefox; removed by JS on WebKit, where .lsb-panel's blur works
   through the clipped wrapper instead). clip-path set per frame by JS. */
.lsb-blur {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* clip-path and backdrop-filter cannot share an element in WebKit (the
   clip is silently dropped) — clip this wrapper, blur the panel inside. */
.lsb-clip {
  position: relative;
  height: 100%;
  /* clip-path driven by JS */
}

.lsb-panel {
  height: 100%;
  border-radius: var(--radius-panel);
  background: var(--ink);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--canvas);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  overflow: hidden;
}

/* Wordmark masthead — only lives in the expanded panel; collapses to
   zero height in rail mode so the icon column stays unchanged */
.lsb-wordmark {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 8px; /* same inset as .lsb-header — left-aligns with the avatar */
  transition: height 200ms ease, opacity 140ms ease;
}
.lsb-wordmark img {
  width: 184px;
  display: block;
  margin: 6px auto 0; /* centered in the expanded panel */
}
liquid-sidebar[data-expanded] .lsb-wordmark {
  height: 56px; /* 6 above + ~29 mark + ~21 below the wordmark */
  opacity: 1;
  transition: height 220ms ease, opacity 240ms ease 100ms;
}

.lsb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 24px;
}

.lsb-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.lsb-logo svg { width: 16px; height: 16px; }

.lsb-brand { line-height: 1.25; }
.lsb-brand-name { display: block; font-size: 14px; font-weight: 600; }
.lsb-brand-sub { display: block; font-size: 11px; opacity: 0.5; }

.lsb-nav { display: flex; flex-direction: column; gap: 4px; }
.lsb-footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 24px; }

.lsb-link {
  position: relative;
  display: flex;
  align-items: center;
  /* 18px puts label starts on the same column as the header's brand text
     (avatar is 32px wide vs 16px icons; centers align, so text needs the
     wider gap to line up) */
  gap: 18px;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: color-mix(in srgb, var(--canvas) 60%, transparent);
  transition: color 150ms ease, background-color 150ms ease;
}
.lsb-link:hover {
  color: var(--canvas);
  background: rgb(255 255 255 / 0.08);
}
.lsb-link.lsb-active {
  color: #fff;
  font-weight: 600;
}

/* Placeholder nav items (e.g. "Marketing Orders", "Settings"): dimmed and
   inert — no navigation, no hover state, no active notch. */
.lsb-link[data-placeholder] {
  opacity: 0.45;
  pointer-events: none;
}

.lsb-icon { flex-shrink: 0; display: grid; place-items: center; width: 16px; height: 16px; transition: color 150ms ease; }
.lsb-icon svg { width: 16px; height: 16px; }
.lsb-link.lsb-active .lsb-icon { color: var(--accent); }

/* Labels cascade in/out with the width spring. --lsb-i set by JS. */
.lsb-label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 100ms ease-in, transform 100ms ease-in;
}
liquid-sidebar[data-expanded] .lsb-label {
  opacity: 1;
  transform: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
  transition-delay: calc(40ms + var(--lsb-i, 0) * 22ms);
}

/* Once-per-session hint (data-hint): the parked-open rail builds its
   labels in at a deliberate, showpiece pace before collapsing. */
liquid-sidebar[data-hint][data-expanded] .lsb-label {
  transition: opacity 420ms ease-out, transform 420ms ease-out;
  transition-delay: calc(350ms + var(--lsb-i, 0) * 120ms);
}

@media (prefers-reduced-motion: reduce) {
  .lsb-label { transition-duration: 1ms; transition-delay: 0ms !important; }
}

/* Header logo slot doubles as the agent avatar (matches Inside SG): the
   headshot (or an initial) fills the accent-bordered squircle. brand = greeting,
   subtitle = date are the existing .lsb-brand lines. */
.lsb-logo--avatar {
  border: 2px solid var(--accent);
  overflow: hidden;
  box-sizing: border-box;
  background: rgb(255 255 255 / 0.08);
}
.lsb-logo .lsb-avatar { width: 100%; height: 100%; object-fit: cover; }
.lsb-logo .lsb-avatar-initial { font-size: 14px; font-weight: 700; color: #fff; line-height: 1; }

/* Sign-out: a nav-link-styled submit button (in a bare POST form) pinned at
   the very bottom of the footer (.lsb-footer is margin-top:auto). */
.lsb-signout-form { margin: 0; }
.lsb-signout {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.lsb-signout:hover .lsb-icon { color: var(--accent); }

/* ── Masquerade ("viewing as") row — amber, sits between header and nav ────── */
.lsb-masq {
  position: relative;
  display: none; /* collapsed rail: the pulsing avatar ring is the cue */
  align-items: center;
  gap: 18px; /* match .lsb-link so the collapsed icon sits on the icon column */
  padding: 8px 10px;
  margin: 2px 0 6px;
  border-radius: 12px;
  background: rgb(245 158 11 / 0.14);
  color: #fbbf24;
}
.lsb-masq .lsb-icon { color: #f59e0b; }
.lsb-masq-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lsb-masq-text { font-size: 12px; line-height: 1.25; white-space: normal; }
.lsb-masq-text b { color: #fff; font-weight: 600; }
.lsb-masq-exit {
  flex-shrink: 0;
  border: 1px solid rgb(245 158 11 / 0.5);
  background: rgb(245 158 11 / 0.18);
  color: #fde68a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.lsb-masq-exit:hover { background: rgb(245 158 11 / 0.32); color: #fff; }
.lsb-masq-exit:disabled { opacity: 0.6; cursor: default; }

/* Masquerade cues: the row only exists in the expanded panel; while collapsed
   the header avatar carries the signal as a pulsing amber ring. */
liquid-sidebar[data-expanded] .lsb-masq { display: flex; }

@keyframes masq-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(245 158 11 / 0.65); }
  70%  { box-shadow: 0 0 0 8px rgb(245 158 11 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(245 158 11 / 0); }
}
liquid-sidebar[masq-name] .lsb-logo {
  border-color: #f59e0b;
  animation: masq-pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  liquid-sidebar[masq-name] .lsb-logo {
    animation: none;
    box-shadow: 0 0 0 3px rgb(245 158 11 / 0.55);
  }
}