/* ============================================================
   AVA007 Cybernetic Console — Bento UI8 token system
   Tokens match the Bento UI8 Master Skills Set (GSAP) doc
   exactly. Scoped to /console so the ESA Gruvbox/cream theme
   elsewhere in the app is untouched.
   ============================================================ */

.ava-shell {
  /* Backgrounds */
  --bento-bg-deep: #0a0a0f;
  --bento-bg-dark: #111118;
  --bento-bg-elevated: #1a1a24;
  --bento-bg-light: #f5f0e8;
  --bento-bg-cream: #faf6f0;

  /* Surfaces */
  --bento-surface-dark: rgba(255, 255, 255, 0.03);
  --bento-surface-light: rgba(255, 255, 255, 0.08);
  --bento-surface-glass: rgba(255, 255, 255, 0.06);

  /* Text */
  --bento-text-primary: #ffffff;
  --bento-text-secondary: rgba(255, 255, 255, 0.6);
  --bento-text-muted: rgba(255, 255, 255, 0.4);
  --bento-text-dark: #1a1a24;
  --bento-text-dark-secondary: #5a5a6e;

  /* Accents */
  --bento-accent-blue: #3b82f6;
  --bento-accent-purple: #8b5cf6;
  --bento-accent-pink: #ec4899;
  --bento-accent-orange: #f97316;
  --bento-accent-green: #22c55e;
  --bento-accent-coral: #ff7a6b;
  --bento-accent-mint: #7dd4a8;
  --bento-accent-gold: #f7d97a;

  /* Gradient presets */
  --bento-gradient-ring: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #f97316, #3b82f6);
  --bento-gradient-warm: linear-gradient(135deg, #ff7a6b 0%, #ffb347 100%);
  --bento-gradient-cool: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

  /* Shadows — Dark Theme (inset glow) */
  --bento-shadow-dark: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --bento-shadow-dark-elevated: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bento-shadow-dark-inset: inset 2px 2px 8px rgba(255, 255, 255, 0.04), inset -2px -2px 8px rgba(0, 0, 0, 0.4);

  /* Shadows — Light Theme (claymorphism) */
  --bento-shadow-light: 8px 8px 24px rgba(128, 92, 70, 0.15), -8px -8px 20px rgba(255, 255, 255, 0.8),
    inset 2px 2px 6px rgba(255, 255, 255, 0.6), inset -4px -4px 10px rgba(128, 92, 70, 0.1);
  --bento-shadow-light-pressed: inset 3px 3px 8px rgba(128, 92, 70, 0.15), inset -3px -3px 8px rgba(255, 255, 255, 0.9);

  /* Radius */
  --bento-radius-sm: 12px;
  --bento-radius-md: 20px;
  --bento-radius-lg: 28px;
  --bento-radius-xl: 32px;
  --bento-radius-pill: 9999px;

  /* Spacing */
  --bento-gap: 16px;
  --bento-pad: 24px;

  background: var(--bento-bg-deep);
  color: var(--bento-text-primary);
  font-family: -apple-system, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ava-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 900px 500px at 12% -10%, rgba(139, 92, 246, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(59, 130, 246, 0.1), transparent 55%),
    radial-gradient(ellipse 900px 700px at 50% 120%, rgba(236, 72, 153, 0.06), transparent 60%);
}

/* ---------- theme variants (per master doc §5) ---------- */
.theme-dark {
  --bento-bg: var(--bento-bg-deep);
  --bento-card-bg: var(--bento-surface-dark);
  --bento-text: var(--bento-text-primary);
  --bento-shadow: var(--bento-shadow-dark);
  --bento-border: rgba(255, 255, 255, 0.06);
}

.theme-light {
  --bento-bg: var(--bento-bg-light);
  --bento-card-bg: var(--bento-bg-cream);
  --bento-text: var(--bento-text-dark);
  --bento-shadow: var(--bento-shadow-light);
  --bento-border: rgba(128, 92, 70, 0.08);
}

/* ---------- layout grid ---------- */
.ava-grid {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100vh;
}

.ava-grid.ava-grid--dual {
  grid-template-columns: 248px 1fr 336px;
}

/* ---------- generic bento card (§1.3 UI8 standard) ---------- */
.bento-card {
  background: var(--bento-surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--bento-radius-lg);
  box-shadow: var(--bento-shadow-dark);
  padding: var(--bento-pad);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bento-card--elevated {
  box-shadow: var(--bento-shadow-dark-elevated);
}

.bento-card--inset {
  background: rgba(0, 0, 0, 0.25);
  box-shadow: var(--bento-shadow-dark-inset);
  border-color: rgba(255, 255, 255, 0.04);
  padding: var(--bento-pad);
}

.bento-card-light {
  background: var(--bento-bg-cream);
  border-radius: var(--bento-radius-lg);
  box-shadow: var(--bento-shadow-light);
  padding: var(--bento-pad);
  position: relative;
  color: var(--bento-text-dark);
}

.bento-card-light:active {
  box-shadow: var(--bento-shadow-light-pressed);
  transform: scale(0.98);
}

.bento-pill {
  border-radius: var(--bento-radius-pill);
}

/* card tilt needs 3D context (§3.3) */
.bento-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- left nav ---------- */
.ava-nav {
  grid-row: 1 / span 2;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
}

.ava-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 18px;
}

.ava-nav-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--bento-gradient-cool);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
  flex-shrink: 0;
}

.ava-nav-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ava-nav-sub {
  font-size: 10.5px;
  color: var(--bento-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ava-nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bento-text-muted);
  padding: 16px 12px 6px;
}

.ava-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--bento-radius-sm);
  font-size: 13px;
  color: var(--bento-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  width: 100%;
}

.ava-nav-item:hover {
  background: var(--bento-surface-dark);
  color: var(--bento-text-primary);
}

.ava-nav-item.active {
  background: var(--bento-surface-light);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--bento-text-primary);
  box-shadow: var(--bento-shadow-dark-inset);
}

.ava-nav-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ---------- top bar / workspace ---------- */
.ava-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 10px;
}

.ava-topbar h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ava-topbar p {
  font-size: 12px;
  color: var(--bento-text-muted);
  margin-top: 2px;
}

.ava-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--bento-radius-pill);
  font-size: 11px;
  background: var(--bento-surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--bento-text-secondary);
}

.ava-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bento-accent-green);
  box-shadow: 0 0 8px var(--bento-accent-green);
}

.ava-dot.warn {
  background: var(--bento-accent-orange);
  box-shadow: 0 0 8px var(--bento-accent-orange);
}

.ava-dot.off {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

/* ---------- workspace content ---------- */
.ava-workspace {
  overflow-y: auto;
  padding: 0 24px 110px;
}

/* ---------- bottom AI bar ---------- */
.ava-bottombar-wrap {
  padding: 12px 24px 20px;
  z-index: 20;
}

@media (max-width: 900px) {
  .ava-bottombar-wrap {
    left: 0 !important;
  }
}

.ava-bottombar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--bento-radius-pill);
  background: var(--bento-surface-glass);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--bento-shadow-dark-elevated);
  backdrop-filter: blur(24px);
}

.ava-bottombar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--bento-text-primary);
  font-size: 13.5px;
}

.ava-bottombar input::placeholder {
  color: var(--bento-text-muted);
}

.ava-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bento-surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--bento-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.ava-icon-btn:hover {
  background: var(--bento-surface-light);
  color: var(--bento-text-primary);
}

.ava-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.ava-icon-btn.primary {
  background: var(--bento-gradient-cool);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}

.ava-icon-btn.listening {
  background: var(--bento-gradient-warm);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(255, 122, 107, 0.45);
}

.ava-context-chip {
  font-size: 10.5px;
  color: var(--bento-text-muted);
  padding: 4px 10px;
  border-radius: var(--bento-radius-pill);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

/* ---------- bento grid for panels ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bento-gap);
  padding-top: 4px;
  padding-bottom: 8px;
}

.bento-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--bento-radius-pill);
  background: var(--bento-surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: fit-content;
}

.bento-tab {
  padding: 6px 14px;
  border-radius: var(--bento-radius-pill);
  font-size: 12px;
  color: var(--bento-text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.bento-tab.active {
  background: var(--bento-surface-light);
  color: var(--bento-text-primary);
}

.mono {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
}

.ava-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ava-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ava-shell * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- optional Gruvbox accent variant ----------
   ESA/Help Assembly already run a Gruvbox/cream palette elsewhere in the
   app. This is an opt-in accent overlay for the AVA007 shell — add class
   "theme-gruvbox" alongside "ava-shell" to swap the accent hues without
   touching the dark-glass structure (radius/shadow/layout unchanged). */
.ava-shell.theme-gruvbox {
  --bento-accent-blue: #458588;
  --bento-accent-purple: #b16286;
  --bento-accent-pink: #d3869b;
  --bento-accent-orange: #d65d0e;
  --bento-accent-green: #98971a;
  --bento-accent-coral: #cc241d;
  --bento-accent-mint: #689d6a;
  --bento-accent-gold: #d79921;
  --bento-gradient-cool: linear-gradient(135deg, #458588 0%, #b16286 100%);
  --bento-gradient-warm: linear-gradient(135deg, #d65d0e 0%, #d79921 100%);
  --bento-gradient-ring: conic-gradient(from 0deg, #458588, #b16286, #d3869b, #d65d0e, #458588);
}

/* ============================================================
   Bento-Exoskel-UI Master Skill tokens — verbatim from spec.
   Namespaced (--exoskel-*) so they sit alongside --bento-* without
   collision; used by TelemetryShareCard, ActuatorFurnitureCard4,
   and DevExoskelCard.
   ============================================================ */
.ava-shell {
  /* Layer 1: Dark Canvas Base */
  --exoskel-bg-base: #18181b;
  --exoskel-card-dark: #242427;
  --exoskel-viewport-dark: #1c1c1f;
  --exoskel-border-dark: rgba(255, 255, 255, 0.08);

  /* Layer 2: Light / Beige Layer Variant */
  --exoskel-bg-light: #e5e5e0;
  --exoskel-card-beige: #f4f4ee;
  --exoskel-beige-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.07);

  /* Layer 3: Glass Black Tinted Overlay */
  --exoskel-glass-tinted: rgba(20, 20, 25, 0.75);
  --exoskel-glass-border: rgba(255, 255, 255, 0.12);
  --exoskel-glass-glow: 0 12px 32px rgba(0, 0, 0, 0.4);

  /* Radii */
  --exoskel-radius-card: 28px;
  --exoskel-radius-inner: 16px;
  --exoskel-radius-pill: 9999px;
}

.ui8-glass-overlay {
  background: var(--exoskel-glass-tinted);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--exoskel-glass-border);
  box-shadow: var(--exoskel-glass-glow);
}

.exoskel-card {
  width: 360px;
  max-width: 100%;
  padding: 24px;
  border-radius: var(--exoskel-radius-card);
  background: var(--exoskel-card-dark);
  border: 1px solid var(--exoskel-border-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.exoskel-viewport {
  position: relative;
  width: 100%;
  height: 192px;
  border-radius: var(--exoskel-radius-inner);
  background: var(--exoskel-viewport-dark);
  border: 1px solid var(--exoskel-border-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exoskel-scroll-wheel {
  width: 48px;
  height: 100%;
  border-left: 1px solid var(--exoskel-border-dark);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow-y: scroll;
}

.exoskel-wheel-item {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--exoskel-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease;
}
.exoskel-wheel-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.exoskel-wheel-item.selected {
  background: rgba(126, 200, 160, 0.25);
  border-color: rgba(126, 200, 160, 0.5);
  color: #fff;
}

/* ============================================================
   Extension pack: Glass Tinted Surface, Furniture Card 4,
   Universal Feature Stack, Inverted Corner Lock
   ============================================================ */

.ava-shell {
  --bento-glass-tinted-bg: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.12) 0%,
    rgba(139, 92, 246, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --bento-glass-tinted-border: rgba(255, 255, 255, 0.15);
  --bento-glass-tinted-shadow: 0 8px 32px rgba(0, 0, 0, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.bento-card-glass-tinted {
  background: var(--bento-glass-tinted-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--bento-glass-tinted-border);
  border-radius: var(--bento-radius-lg);
  box-shadow: var(--bento-glass-tinted-shadow);
  position: relative;
  overflow: hidden;
  padding: var(--bento-pad);
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Furniture Card 4 — embedded right-viewport scroll wheel */
.furniture-viewport {
  position: relative;
  width: 100%;
  height: 192px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
}

.furniture-scroll-wheel {
  width: 48px;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: scroll;
}

.furniture-wheel-item {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--bento-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.furniture-wheel-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.furniture-wheel-item.selected {
  background: var(--bento-gradient-cool);
  color: #fff;
  border-color: transparent;
}

/* Inverted corner cutout + exploded lock trigger */
.bento-card-inverted-corner {
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
}

.exploded-lock-trigger {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: var(--bento-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--bento-text-secondary);
}

.exploded-lock-trigger:hover {
  transform: scale(1.1) rotate(5deg);
  color: var(--bento-text-primary);
}

.dev-slideout-panel {
  transform: translateX(100%);
  opacity: 0;
}

/* ============================================================
   Glass-gel & punch-out extension pack
   Adapted (not copied verbatim) from MIT-licensed CodePen demos —
   glass-gel-progress-meter, color-gradient-bottom-mask-button,
   border-punch-outs-w-mask-composite, curved-scrollbar-25 — all by
   Simey (codepen.io/simeydotme), MIT license, attribution kept here.
   Applied only as restyling of elements that already exist in the
   card layouts below — no card gains or loses height/width from this.
   ============================================================ */

/* gel-glass progress meter: contained bar, fixed track height,
   never affects parent flex box sizing */
.gel-progress-track {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  flex-shrink: 0;
}

.gel-progress-fill {
  position: absolute;
  inset: 0;
  width: var(--gel-progress, 50%);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(90deg, var(--gel-progress-color, #7ec8a0), var(--gel-progress-color-2, #5fb98a));
  box-shadow: 0 0 8px var(--gel-progress-color, #7ec8a0);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gel-progress-fill::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(0.5px);
}

/* gradient-mask button: bottom-fade sheen on an existing button,
   pure restyle — no padding/size change */
.gradient-mask-btn {
  position: relative;
  overflow: hidden;
}

.gradient-mask-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 55%);
  mask-image: linear-gradient(180deg, black, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 85%);
  pointer-events: none;
}

.gradient-mask-btn:hover::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 65%);
}

/* punch-out border dots: decorative ::after inset within the card's
   own padding box, contained by the card's existing overflow:hidden
   so it can never enlarge the card */
.punch-border {
  position: relative;
}

.punch-border::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  pointer-events: none;
  --punch-dot: radial-gradient(circle 1.5px, #000 1.4px, transparent 1.6px);
  mask: var(--punch-dot) 0 0 / 14px 14px, linear-gradient(#fff 0 100%);
  -webkit-mask: var(--punch-dot) 0 0 / 14px 14px, linear-gradient(#fff 0 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.5;
}

/* curved scroll indicator: restyles the existing wheel scrollbar
   track/thumb only, wheel column width (48px) is unchanged */
.exoskel-scroll-wheel::-webkit-scrollbar,
.furniture-scroll-wheel::-webkit-scrollbar {
  width: 3px;
}
.exoskel-scroll-wheel::-webkit-scrollbar-track,
.furniture-scroll-wheel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}
.exoskel-scroll-wheel::-webkit-scrollbar-thumb,
.furniture-scroll-wheel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ec8a0, #5fb98a);
  border-radius: 999px;
  box-shadow: 0 0 4px rgba(126, 200, 160, 0.6);
}