/* ─────────────────────────────────────────────────────────────────────
 * V2/styles/sidebar.css
 * Floating sidebar — verbatim port of sidebar-standalone_updated.html
 * Token substitution (reference → V2):
 *   --glass-frosted / --glass-ground → --g-frosted / --g-ground
 *   --glass-border / --glass-border-strong → --g-border / --g-border-strong
 *   --shadow-glass  → --sh-2
 *   --glass-inset-top / -bottom → --g-inset-top / --g-inset-bottom
 *   --glass-focus   → --g-focus
 *   --glass-solid   → --g-solid
 *   --shadow-glow-teal → --sh-glow-teal
 *   --mono          → var(--font-mono)
 *   --sans          → var(--font-body)
 * data-module values adapted: assess→compete, find→opp
 * ───────────────────────────────────────────────────────────────────── */

/* ── Icon system tokens (per-theme, scoped to .sidebar-nav) ── */
[data-theme="dark"] .sidebar-nav {
  --icon-muted:        rgba(255,255,255,0.35);
  --icon-muted-strong: rgba(255,255,255,0.6);
  --icon-active:       #ffffff;
  --icon-active-glow:  rgba(255,255,255,0.4);
  --icon-bg-solid:     #0B1221;
  --sb-bg:            linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  --sb-border:        var(--g-border-strong);
  --sb-shadow:
    var(--sh-2),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  --sb-divider:       var(--g-border);
  --sb-section:       rgba(255,255,255,0.35);
  --sb-label:         rgba(255,255,255,0.88);
  --sb-sub:           rgba(255,255,255,0.45);
  --sb-tooltip-bg:    var(--g-solid);
  --sb-tooltip-color: #fff;
  --sb-pin-hover:     var(--g-ground);
}
[data-theme="light"] .sidebar-nav, .sidebar-nav {
  --icon-muted:        rgba(15,23,42,0.35);
  --icon-muted-strong: rgba(15,23,42,0.65);
  --icon-active:       #0f172a;
  --icon-active-glow:  rgba(15,23,42,0.2);
  --icon-bg-solid:     #ffffff;
  --sb-bg:            linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  --sb-border:        var(--g-border-strong);
  --sb-shadow:
    var(--sh-2),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  --sb-divider:       var(--g-border);
  --sb-section:       rgba(15,23,42,0.4);
  --sb-label:         rgba(15,23,42,0.88);
  --sb-sub:           rgba(15,23,42,0.45);
  --sb-tooltip-bg:    var(--g-solid);
  --sb-tooltip-color: #0f172a;
  --sb-pin-hover:     var(--g-ground);
}

/* Light-mode icon strength boost */
[data-theme="light"] .sidebar-item:not(.active) .ciq-ring,
[data-theme="light"] .sidebar-item:not(.active) .ciq-axis {
  opacity: 0.85;
  stroke: rgba(15,23,42,0.78);
}
[data-theme="light"] .sidebar-item:not(.active) .eiq-bridge,
[data-theme="light"] .sidebar-item:not(.active) .eiq-edge {
  opacity: 0.9;
  stroke: rgba(15,23,42,0.75);
}
[data-theme="light"] .sidebar-item:not(.active) .eiq-node,
[data-theme="light"] .sidebar-item:not(.active) .eiq-node-r {
  fill: rgba(15,23,42,0.7);
}
[data-theme="light"] .sidebar-item:not(.active) .ws-bracket {
  stroke: rgba(15,23,42,0.85);
  stroke-width: 6;
}

/* ── Hide on mobile (bottom-bar takes over) ── */
@media (max-width: 768px) {
  .sidebar-nav { display: none !important; }
}

/* ── Sidebar shell — compact floating vertical capsule ── */
.sidebar-nav {
  position: fixed;
  top: 50%;
  left: 8px;
  right: auto;
  transform: translate(0, -50%);
  width: 54px;
  max-height: min(320px, 50vh);
  z-index: 55;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
  padding: 3px 2px;
  gap: 0;
  background: var(--sb-bg);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--sb-border);
  border-radius: 22px;
  box-shadow: var(--sb-shadow);
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              border-radius 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  animation: sidebar-entrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
             sb-glow-pulse 0.8s ease 1.0s both;
  font-family: var(--font-body);
}
.sidebar-nav.sb-revealed { animation: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 35%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  transition: background 1.2s ease;
}
.sidebar-nav:hover::before {
  background: linear-gradient(190deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 30%, transparent 55%);
}
.sidebar-nav > *:not(.sidebar-active-pill) { position: relative; z-index: 1; }
.sidebar-active-pill { z-index: 0 !important; }

/* Entrance animations */
@keyframes sidebar-entrance {
  0%   { opacity: 0; transform: translate(-30px, -50%); }
  65%  { opacity: 1; transform: translate(4px, -50%); }
  100% { opacity: 1; transform: translate(0, -50%); }
}
@keyframes sb-icon-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.sidebar-nav:not(.sb-revealed) .sidebar-item,
.sidebar-nav:not(.sb-revealed) .sidebar-divider,
.sidebar-nav:not(.sb-revealed) .sidebar-section-title {
  animation: sb-icon-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(3)  { animation-delay: 0.35s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(4)  { animation-delay: 0.42s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(5)  { animation-delay: 0.50s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(6)  { animation-delay: 0.58s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(7)  { animation-delay: 0.66s; }
.sidebar-nav:not(.sb-revealed) .sidebar-item:nth-child(8)  { animation-delay: 0.74s; }
.sidebar-nav:not(.sb-revealed) .sidebar-divider            { animation-delay: 0.30s; }
.sidebar-nav:not(.sb-revealed) .sidebar-section-title      { animation-delay: 0.32s; }

@keyframes sb-glow-pulse {
  0%   { box-shadow: var(--sb-shadow); }
  50%  { box-shadow: var(--sb-shadow), 0 0 22px rgba(13,148,136,0.25), 0 0 6px rgba(13,148,136,0.15); }
  100% { box-shadow: var(--sb-shadow); }
}
[data-theme="dark"] .sidebar-nav:not(.sb-revealed) {
  animation: sidebar-entrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
             sb-glow-pulse-dark 0.8s ease 1.0s both;
}
@keyframes sb-glow-pulse-dark {
  0%   { box-shadow: var(--sb-shadow); }
  50%  { box-shadow: var(--sb-shadow), 0 0 24px rgba(94,234,212,0.20), 0 0 8px rgba(94,234,212,0.12); }
  100% { box-shadow: var(--sb-shadow); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-nav { animation: none !important; opacity: 1; transform: translate(0, -50%); }
  .sidebar-nav .sidebar-item,
  .sidebar-nav .sidebar-divider,
  .sidebar-nav .sidebar-section-title { animation: none !important; opacity: 1; transform: none; }
}

/* Expanded: hover + pinned */
.sidebar-nav:hover:not(.pinned),
.sidebar-nav.pinned {
  width: 172px;
  z-index: 56;
  border-radius: 12px 16px 16px 12px;
  max-height: min(440px, 70vh);
}

/* ── Morphing active pill ── */
.sidebar-active-pill {
  position: absolute;
  left: 1px; right: 1px;
  top: 0; height: 0;
  border-radius: 18px;
  pointer-events: none;
  background-color: rgba(13,148,136,0.08);
  border: 1.5px solid rgba(13,148,136,0.18);
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.3s cubic-bezier(0.22, 1.0, 0.36, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
/* CTK 2026-05-12: pill bg/border bumped so the active-module highlight
   reads cleanly against the navy sidebar in collapsed view. Previously
   used `var(--g-focus)` (~8-10% teal) + a 22-28% border — too faint;
   users saw the brighter 22x22 icon-square pseudo-glow and read THAT
   as the "active highlight," which only hugs the icon and not the text
   label below ("doesn't hug the module / looks messy"). Bumping to
   ~16% light / ~22% dark bg with a 0.42-0.55 teal border makes the
   pill the dominant active affordance, so the highlight cleanly hugs
   the FULL button (icon + label). */
[data-theme="light"] .sidebar-active-pill {
  background: rgba(13,143,134,0.16);
  border-color: rgba(13,143,134,0.55);
  box-shadow:
    0 0 22px rgba(13,143,134,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);
}
[data-theme="dark"] .sidebar-active-pill {
  background: rgba(61,187,176,0.22);
  border-color: rgba(61,187,176,0.55);
  box-shadow:
    0 0 22px rgba(61,187,176,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Active pill heartbeat */
.sidebar-active-pill { animation: sidebar-pill-heartbeat 2.6s ease-in-out infinite; }
@keyframes sidebar-pill-heartbeat {
  0%, 100% {
    box-shadow: 0 1px 4px rgba(var(--pill-rgb, 13,148,136), 0.08);
    border-color: rgba(var(--pill-rgb, 13,148,136), 0.22);
  }
  50% {
    box-shadow: 0 1px 14px rgba(var(--pill-rgb, 13,148,136), 0.22),
                0 0 0 1px rgba(var(--pill-rgb, 13,148,136), 0.05);
    border-color: rgba(var(--pill-rgb, 13,148,136), 0.34);
  }
}
[data-theme="dark"] .sidebar-active-pill { animation: sidebar-pill-heartbeat-dark 2.6s ease-in-out infinite; }
@keyframes sidebar-pill-heartbeat-dark {
  0%, 100% {
    box-shadow: 0 0 12px rgba(13,148,136,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
    border-color: rgba(61,187,176,0.28);
  }
  50% {
    box-shadow: 0 0 22px rgba(13,148,136,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
    border-color: rgba(61,187,176,0.44);
  }
}

/* ── Dividers & section titles ── */
.sidebar-divider {
  flex-shrink: 0;
  height: 1px;
  margin: 3px 4px;
  border: none;
  background: var(--sb-divider);
  opacity: 0.6;
}
.sidebar-section-title {
  font-size: 7.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sb-section);
  font-family: var(--font-mono);
  padding: 2px 1px;
  margin: 0;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.25;
  opacity: 0.6;
  max-width: 100%;
  box-sizing: border-box;
}
.sidebar-nav:hover .sidebar-section-title,
.sidebar-nav.pinned .sidebar-section-title {
  font-size: 7.5px;
  text-align: left;
  padding: 2px 6px;
  opacity: 1;
}

/* ── Sidebar items ── */
.sidebar-item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 3px 1px;
  border: none; background: none; cursor: pointer;
  border-radius: 6px;
  color: var(--sb-label);
  text-align: center; font-family: inherit;
  white-space: nowrap; overflow: visible;
  text-decoration: none;
  transition: background 0.2s ease, gap 0.25s ease, max-height 0.25s ease;
  min-width: 44px;
}
.sidebar-item-name {
  display: block;
  font-size: 7.5px; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: -0.015em;
  color: var(--sb-label); line-height: 1.2;
  white-space: normal;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: center;
  transition: color 0.2s ease;
}
.sidebar-item.active .sidebar-item-name { color: var(--sb-label); font-weight: 700; }
/* Active-state outer glow halo — NOT-DONE-6C iter2 (CTK directive 2026-05-11):
 * Prior iteration used a tight halo with spread radius (0 0 22px 3px) that
 * read as wrapping only the icon container. CTK reviewed and flagged the
 * geometry as too tight. Per V1 sidebar-standalone_updated.html lines
 * 537-573 (.sidebar-active-pill + --shadow-glow-teal), the glow is a soft
 * 30px blur with NO spread — extending well past the item bounds so the
 * halo visibly encompasses the full sidebar-item (icon + label). We apply
 * the V1 box-shadow/border values verbatim (CSS var resolutions from V1):
 *   --shadow-glow-teal light: 0 0 30px rgba(13,143,134,0.06)
 *   --shadow-glow-teal dark:  0 0 30px rgba(61,187,176,0.15)
 *   --glass-inset-top light:  rgba(255,255,255,0.85)
 *   --glass-inset-top dark:   rgba(255,255,255,0.10)
 *   --glass-focus light: rgba(13,143,134,0.06)
 *   --glass-focus dark:  rgba(88,239,224,0.08)
 * The pill (.sidebar-active-pill) still provides the JS-positioned active
 * background fill; the item's box-shadow provides the standalone halo so
 * the visual reads even when the pill is mid-transition. */
.sidebar-item.active {
  border-radius: 12px;
  box-shadow:
    0 0 30px rgba(13,143,134,0.06),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme="dark"] .sidebar-item.active {
  box-shadow:
    0 0 30px rgba(61,187,176,0.15),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.sidebar-nav:hover .sidebar-item,
.sidebar-nav.pinned .sidebar-item {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  text-align: left;
  padding: 3px 5px;
  max-height: 38px;
  overflow: visible;
}
.sidebar-nav:hover .sidebar-item-name,
.sidebar-nav.pinned .sidebar-item-name { display: none; }
.sidebar-item:hover:not(.active) { background: var(--sb-pin-hover); }

/* ── Icon container ──
 * NOT-DONE-6C V1 parity (CTK 2026-05-11): the prior NOT-DONE-3 fix sized
 * the container to 44×32 to fill "click-target dead air"; visual review
 * showed this drifted from V1 spec. V1 sidebar-standalone_updated.html
 * line 651 defines the icon container at 22×22 with border-radius 5px.
 * Reverting to that V1 baseline so the icon container matches the SVG.
 * Click target remains the parent .sidebar-item button (28+ effective
 * via its row padding); active glow now wraps the whole item via the
 * .sidebar-item.active outer glow halo below + the morphing pill.
 */
.sidebar-item-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(13,148,136,0.06);
  border: 1px solid rgba(13,148,136,0.12);
  border-radius: 5px;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(15,23,42,0.04);
  transition: background 0.25s cubic-bezier(0.32,0.72,0,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}
.sidebar-item-icon svg { width: 22px; height: 22px; display: block; overflow: visible; }
.sidebar-item:hover:not(.active) .sidebar-item-icon {
  background: rgba(13,148,136,0.11);
  border-color: rgba(13,148,136,0.22);
}
.sidebar-item.active .sidebar-item-icon {
  background: linear-gradient(180deg, rgba(13,148,136,0.20), rgba(13,148,136,0.12));
  border-color: rgba(13,148,136,0.32);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.55),
    inset 0 -0.5px 0 rgba(13,148,136,0.22),
    0 2px 8px rgba(13,148,136,0.20);
}
[data-theme="dark"] .sidebar-item-icon {
  background: rgba(13,148,136,0.20);
  border-color: rgba(13,148,136,0.32);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    0 1px 2px rgba(0,0,0,0.25);
}
[data-theme="dark"] .sidebar-item:hover:not(.active) .sidebar-item-icon {
  background: rgba(13,148,136,0.28);
  border-color: rgba(13,148,136,0.42);
}
[data-theme="dark"] .sidebar-item.active .sidebar-item-icon {
  background: linear-gradient(180deg, rgba(13,148,136,0.32), rgba(13,148,136,0.20));
  border-color: rgba(13,148,136,0.44);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.16),
    inset 0 -0.5px 0 rgba(13,148,136,0.32),
    0 2px 8px rgba(13,148,136,0.28);
}

/* ── Per-module accent overrides ─────────────────────────────────────────
 * NOT-DONE-6C V1 parity (CTK 2026-05-11): the per-module backplate
 * overrides (compete=amber, opp=blue) drifted from V1 spec. V1 uses a
 * single neutral teal backplate for ALL modules; module identity reads
 * via the glyph stroke/fill alone, not the container fill. Reverted to
 * teal-only backplate. The glyph-color overrides below (SVG class
 * targeting on .ws-*/.ciq-*/.eiq-*) remain — they paint the inside SVG,
 * not the container, and V1 has the same glyph-color treatment.
 */

/* WhitespaceIQ glyph color overrides — pull from blue accent on hover/active */
.sidebar-item[data-module="opp"] .ws-inner    { fill: #3b82f6; opacity: 0.18; }
.sidebar-item[data-module="opp"] .ws-scan-line{ stroke: #3b82f6; }
.sidebar-item[data-module="opp"] .ws-dot      { fill: #3b82f6; }
.sidebar-item[data-module="opp"].active .ws-inner { fill: #3b82f6; opacity: 0.32; }
.sidebar-item[data-module="opp"]:hover:not(.active) .ws-inner { opacity: 0.26; }
[data-theme="dark"] .sidebar-item[data-module="opp"] .ws-inner       { opacity: 0.28; }
[data-theme="dark"] .sidebar-item[data-module="opp"].active .ws-inner{ opacity: 0.46; }

/* ── Text content (only visible expanded) ── */
.sidebar-item-content {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; overflow: hidden;
  opacity: 0; max-width: 0; max-height: 0;
  transition: opacity 0.2s ease 0.08s, max-width 0.25s ease, max-height 0.25s ease;
}
.sidebar-nav:hover .sidebar-item-content,
.sidebar-nav.pinned .sidebar-item-content { opacity: 1; max-width: 158px; max-height: 28px; }

.sidebar-item-label {
  font-size: 9.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--sb-label);
}
.sidebar-item-label .iq { font-weight: 800; color: inherit; }
.sidebar-item-sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Context pills ── */
.sb-context {
  display: flex; justify-content: center; gap: 3px;
  padding: 0 2px;
  overflow: hidden;
  max-height: 14px;
}
.sb-context-tag {
  font-size: 6.5px; font-weight: 700; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--teal); opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 58px; line-height: 1;
}
.sb-context { display: none; }

/* ── External link arrow ── */
.sidebar-item-external {
  flex-shrink: 0; margin-left: auto;
  color: var(--sb-label);
  opacity: 0; width: 0; overflow: hidden;
  transition: opacity 0.2s ease 0.12s, width 0.25s ease;
}
.sidebar-nav:hover .sidebar-item-external,
.sidebar-nav.pinned .sidebar-item-external { opacity: 0.4; width: 12px; }

/* ── Tooltips ── */
.sidebar-item-tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 10px;
  background: var(--sb-tooltip-bg);
  color: var(--sb-tooltip-color);
  font-size: 10px; font-weight: 600; line-height: 1.35;
  border-radius: 7px;
  white-space: normal; max-width: min(260px, 70vw); text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none; z-index: 100;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-item-tooltip::before {
  content: '';
  position: absolute;
  left: -4px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--sb-tooltip-bg);
}
@media (hover: hover) and (pointer: fine) {
  .sidebar-item:hover .sidebar-item-tooltip {
    display: block; opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* ── Footer & pin ── */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 3px;
  flex-shrink: 0;
}
.sidebar-nav:hover .sidebar-footer,
.sidebar-nav.pinned .sidebar-footer { margin-top: auto; }
.sidebar-pin-btn {
  display: flex; align-items: center; gap: 4px;
  min-width: 22px; min-height: 22px;
  padding: 3px 5px;
  border: none; background: none; cursor: pointer;
  color: var(--sb-sub); font-family: inherit;
  font-size: 11px; font-weight: 500;
  border-radius: 7px;
  white-space: nowrap; overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-pin-btn:hover { background: var(--sb-pin-hover); color: var(--sb-label); }
.sidebar-pin-btn svg { flex-shrink: 0; }
.sidebar-pin-btn .pin-icon { fill: none; stroke: var(--icon-muted-strong); transition: transform 0.25s ease, stroke 0.25s ease; transform-origin: 12px 12px; }
.sidebar-pin-btn.is-pinned { background: var(--sb-pin-hover); color: var(--sb-label); }
.sidebar-pin-btn.is-pinned .pin-icon { transform: rotate(20deg); stroke: var(--sb-label); }
.sidebar-pin-label { opacity: 0; transition: opacity 0.2s ease 0.08s; }
.sidebar-nav:hover .sidebar-pin-label,
.sidebar-nav.pinned .sidebar-pin-label { opacity: 1; }

/* ════════════════════════════════════════════════════
   ANIMATED SVG GLYPHS — WhitespaceIQ / CompeteIQ / PartnerIQ / ExploreIQ
   ════════════════════════════════════════════════════ */

/* WhitespaceIQ */
.ws-bracket   { stroke: var(--icon-muted-strong); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.3s; }
.ws-inner     { fill: var(--teal); opacity: 0.14; transition: fill 0.3s, opacity 0.3s; }
.ws-scan-line { stroke: var(--teal); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.ws-dot       { fill: var(--teal); opacity: 0.55; transition: opacity 0.3s; }
.ws-frame-g   { transform-box: fill-box; transform-origin: 50% 50%; }
[data-theme="dark"] .ws-inner { opacity: 0.24; }
[data-theme="dark"] .sidebar-item.active .ws-inner { opacity: 0.42; }

.sidebar-item.active .ws-bracket   { stroke: var(--icon-active); }
.sidebar-item.active .ws-inner     { fill: var(--teal); opacity: 0.28; }
.sidebar-item.active .ws-scan-line { animation: ws-scan 2.8s ease-in-out infinite; }
.sidebar-item.active .ws-dot       { opacity: 1; }
.sidebar-item.active .ws-dot-1     { animation: ws-dot-pulse 2.8s ease infinite 0.2s; }
.sidebar-item.active .ws-dot-2     { animation: ws-dot-pulse 2.8s ease infinite 0.8s; }
.sidebar-item.active .ws-dot-3     { animation: ws-dot-pulse 2.8s ease infinite 1.4s; }
.sidebar-item.active .ws-frame-g   { animation: ws-frame-breathe 2.8s ease-in-out infinite; }

@keyframes ws-scan          { 0%,100% { opacity: 0; transform: translateY(-16px); } 15% { opacity: 0.8; } 50% { opacity: 0.9; transform: translateY(16px); } 85% { opacity: 0.8; } }
@keyframes ws-dot-pulse     { 0%,100% { opacity: 0.25; r: 2.5; } 40%,60% { opacity: 1; r: 3.5; } }
@keyframes ws-frame-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.sidebar-item[data-module="opp"]:hover:not(.active) .ws-scan-line { animation: ws-scan-hover 1s ease-out 1; }
.sidebar-item[data-module="opp"]:hover:not(.active) .ws-dot-1     { animation: ws-dot-hover 1s ease-out 1; }
@keyframes ws-scan-hover { 0% { opacity: 0; transform: translateY(-16px); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(16px); } }
@keyframes ws-dot-hover  { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* CompeteIQ */
/* CompeteIQ glyph — target + competitor blips. Uses --mod-accent
 * (amber #d97706) on the active item; muted neutral when inactive. */
.ciq-ring   { fill: none; stroke: var(--icon-muted-strong); opacity: 0.55; transition: stroke 0.3s, opacity 0.3s; }
.ciq-tick   { stroke: var(--icon-muted-strong); opacity: 0.45; transition: stroke 0.3s, opacity 0.3s; }
.ciq-axis   { stroke: var(--icon-muted-strong); opacity: 0.15; transition: stroke 0.3s; }
.ciq-center { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.ciq-blip   { fill: var(--icon-muted-strong); opacity: 0.55; transition: opacity 0.3s, fill 0.3s; }
.ciq-sweep  { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.ciq-beam   { stroke: var(--icon-muted-strong); stroke-linecap: round; }
.ciq-wedge  { fill: var(--icon-muted-strong); }

.sidebar-item.active .ciq-sweep  { opacity: 1; animation: ciq-spin 2.4s linear infinite; }
.sidebar-item.active .ciq-blip   { animation: ciq-blip-pulse 2.4s ease infinite; }
.sidebar-item.active .ciq-blip-1 { animation-delay: 0.3s; }
.sidebar-item.active .ciq-blip-2 { animation-delay: 1.0s; }
.sidebar-item.active .ciq-blip-3 { animation-delay: 1.7s; }
.sidebar-item[data-module="compete"].active .ciq-ring   { stroke: var(--ciq-accent, #d97706); opacity: 0.95; }
.sidebar-item[data-module="compete"].active .ciq-tick   { stroke: var(--ciq-accent, #d97706); opacity: 0.85; }
.sidebar-item[data-module="compete"].active .ciq-center { fill:   var(--ciq-accent, #d97706); filter: drop-shadow(0 0 4px rgba(217,119,6,0.5)); }
.sidebar-item[data-module="compete"].active .ciq-blip   { fill:   var(--ciq-accent, #d97706); opacity: 0.9; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-ring   { stroke: var(--ciq-accent, #d97706); opacity: 0.7; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-tick   { stroke: var(--ciq-accent, #d97706); opacity: 0.6; }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-center { fill:   var(--ciq-accent, #d97706); }
.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-blip   { fill:   var(--ciq-accent, #d97706); opacity: 0.7; }
@keyframes ciq-blip-pulse { 0%,100% { opacity: 0.45; transform: scale(1); } 35%,55% { opacity: 1; transform: scale(1.18); } }

@keyframes ciq-spin { to { transform: rotate(360deg); } }
@keyframes ciq-blip { 0%,100% { opacity: 0.2; } 35%,55% { opacity: 1; } }

.sidebar-item[data-module="compete"]:hover:not(.active) .ciq-sweep { opacity: 1; animation: ciq-sweep-hover 1s cubic-bezier(0.22,1,0.36,1) 1; }
@keyframes ciq-sweep-hover { 0% { transform: rotate(0deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(200deg); opacity: 0; } }

/* PartnerIQ */
.piq-shake      { fill: var(--teal, #0d9488); transition: fill 0.3s; transform-box: fill-box; transform-origin: 50% 65%; }
.piq-ring-track { fill: none; stroke: var(--icon-muted); stroke-width: 2; opacity: 0; }
.piq-ring-prog  { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 56.5; opacity: 0; }
.piq-fill       { fill: var(--teal); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.piq-check      { fill: none; stroke: rgba(11,15,26,0.9); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; }
.piq-pulse      { fill: none; stroke: var(--teal); stroke-width: 1; opacity: 0; }

.sidebar-item.active .piq-shake      { fill: var(--teal, #0d9488); animation: piq-spin 4s cubic-bezier(0.34,1.56,0.64,1) infinite; }
.sidebar-item.active .piq-ring-track { animation: piq-track 4s ease-in-out infinite; }
.sidebar-item.active .piq-ring-prog  { animation: piq-ring-draw 4s ease-in-out infinite; }
.sidebar-item.active .piq-fill       { animation: piq-fill-anim 4s ease-in-out infinite; }
.sidebar-item.active .piq-check      { animation: piq-check-anim 4s ease-in-out infinite; }
.sidebar-item.active .piq-pulse      { animation: piq-pulse-anim 4s ease-in-out infinite; }

@keyframes piq-spin       { 0%   { transform: rotate(-180deg) scale(0.6); opacity: 0; } 22%  { transform: rotate(15deg) scale(1.05); opacity: 1; } 30%  { transform: rotate(-5deg) scale(1); } 38%,88%  { transform: rotate(0deg) scale(1); opacity: 1; } 95%,100% { transform: rotate(0deg) scale(0.9); opacity: 0; } }
@keyframes piq-track      { 0%,25% { opacity: 0; } 32%,82% { opacity: 0.3; } 90%,100% { opacity: 0; } }
@keyframes piq-ring-draw  { 0%,28% { stroke-dashoffset: 56.5; opacity: 0; } 35% { stroke-dashoffset: 56.5; opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 68%,82% { stroke-dashoffset: 0; opacity: 1; } 90%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes piq-fill-anim  { 0%,62% { opacity: 0; transform: scale(0); } 68% { opacity: 1; transform: scale(1.1); } 74%,82% { opacity: 1; transform: scale(1); } 90%,100% { opacity: 0; transform: scale(0); } }
@keyframes piq-check-anim { 0%,66% { opacity: 0; stroke-dashoffset: 20; } 74%,82% { opacity: 1; stroke-dashoffset: 0; } 90%,100% { opacity: 0; stroke-dashoffset: 20; } }
@keyframes piq-pulse-anim { 0%,68% { r: 9; opacity: 0; } 74% { r: 9; opacity: 0.4; } 84% { r: 18; opacity: 0; } 86%,100% { r: 18; opacity: 0; } }

.sidebar-item[data-module="strategy"]:hover:not(.active) .piq-shake     { fill: var(--icon-active); animation: piq-spin-hover 1.2s cubic-bezier(0.34,1.56,0.64,1) 1; }
.sidebar-item[data-module="strategy"]:hover:not(.active) .piq-ring-prog { animation: piq-ring-hover 1.2s ease-out 1; }
@keyframes piq-spin-hover { 0% { transform: rotate(-90deg) scale(0.8); opacity: 0.5; } 40% { transform: rotate(8deg) scale(1.05); opacity: 1; } 60% { transform: rotate(-3deg) scale(1); } 100% { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes piq-ring-hover { 0% { stroke-dashoffset: 56.5; opacity: 0; } 30% { opacity: 0.8; } 100% { stroke-dashoffset: 20; opacity: 0; } }

/* ExploreIQ — knowledge graph clusters */
.eiq-node    { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.eiq-node-r  { fill: var(--icon-muted-strong); transition: fill 0.3s; }
.eiq-edge    { stroke: var(--icon-muted-strong); stroke-width: 1.2; opacity: 0.22; fill: none; transition: stroke 0.3s; }
.eiq-edge-r  { stroke: var(--icon-muted-strong); stroke-width: 1.2; opacity: 0.22; fill: none; transition: stroke 0.3s; }
.eiq-bridge  { stroke: var(--icon-muted-strong); stroke-linecap: round; opacity: 0.35; fill: none; transition: stroke 0.3s; }
.eiq-pulse   { fill: var(--teal); opacity: 0; }
.eiq-cluster-l, .eiq-cluster-r { transform-box: fill-box; }

.sidebar-item.active .eiq-node-r,
.sidebar-item:hover  .eiq-node-r  { fill: var(--teal); }
.sidebar-item.active .eiq-edge-r,
.sidebar-item:hover  .eiq-edge-r  { stroke: var(--teal); opacity: 0.35; }
.sidebar-item.active .eiq-bridge,
.sidebar-item:hover  .eiq-bridge  { stroke: var(--teal); }
.sidebar-item.active .eiq-cluster-l { animation: eiq-slide-l 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-cluster-r { animation: eiq-slide-r 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-1  { animation: eiq-flash-1 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-2  { animation: eiq-flash-2 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-bridge-3  { animation: eiq-flash-3 3.2s ease-in-out infinite; }
.sidebar-item.active .eiq-pulse     { animation: eiq-center-pulse 3.2s ease-in-out infinite; }

@keyframes eiq-slide-l      { 0%,100% { transform: translate(10px,0); } 30%,70% { transform: translate(0,0); } }
@keyframes eiq-slide-r      { 0%,100% { transform: translate(-10px,0); } 30%,70% { transform: translate(0,0); } }
@keyframes eiq-flash-1      { 0%,20% { opacity: 0; stroke-dashoffset: 20; } 35%,65% { opacity: 0.9; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-flash-2      { 0%,28% { opacity: 0; stroke-dashoffset: 20; } 42%,65% { opacity: 0.85; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-flash-3      { 0%,36% { opacity: 0; stroke-dashoffset: 20; } 48%,65% { opacity: 0.8; stroke-dashoffset: 0; } 80%,100% { opacity: 0; stroke-dashoffset: -20; } }
@keyframes eiq-center-pulse { 0%,25% { opacity: 0; r: 0; } 40% { opacity: 0.55; r: 12; } 65% { opacity: 0.35; r: 20; } 80%,100% { opacity: 0; r: 26; } }

/* Idle breathing */
.sidebar-item:not(.active) .sidebar-item-icon {
  animation: dashiq-breathe 4.2s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.sidebar-item[data-module="strategy"]:not(.active) .sidebar-item-icon { animation-delay: 0s; }
.sidebar-item[data-module="compete"]:not(.active)  .sidebar-item-icon { animation-delay: 1.4s; }
.sidebar-item[data-module="opp"]:not(.active)      .sidebar-item-icon { animation-delay: 0.7s; }
@keyframes dashiq-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.035); opacity: 1; }
}
.sidebar-item:hover:not(.active) .sidebar-item-icon { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sidebar-active-pill { transition: none !important; }
  .sidebar-nav { transition: width 0s, max-height 0s !important; }
  .sidebar-item.active .piq-shake,
  .sidebar-item.active .piq-ring-track,
  .sidebar-item.active .piq-ring-prog,
  .sidebar-item.active .piq-fill,
  .sidebar-item.active .piq-check,
  .sidebar-item.active .piq-pulse,
  .sidebar-item.active .ciq-sweep,
  .sidebar-item.active .ciq-blip,
  .sidebar-item.active .ws-scan-line,
  .sidebar-item.active .ws-dot,
  .sidebar-item.active .ws-frame-g,
  .sidebar-item.active .eiq-cluster-l,
  .sidebar-item.active .eiq-cluster-r,
  .sidebar-item.active .eiq-bridge,
  .sidebar-item.active .eiq-pulse { animation: none !important; }
  .sidebar-item:not(.active) .sidebar-item-icon,
  .sidebar-active-pill { animation: none !important; }
}

/* ── Tablet breakpoint ── */
@media (max-width: 1023px) and (min-width: 769px) {
  .sidebar-nav {
    left: 5px;
    width: 48px;
    padding: 3px 2px;
    border-radius: 14px;
  }
  .sidebar-item-icon { width: 20px; height: 20px; }
  .sidebar-item-icon svg { width: 20px; height: 20px; }
  .sidebar-item-name { font-size: 8.5px; letter-spacing: -0.02em; }
}