/* ======================================================================
   MindMesh Profile Widget Skin: NEON GLASS
   ----------------------------------------------------------------------
   Same structural contract as glass.css.
   - Glass blur + border lives on .mm-pw::before
   - Per-widget paint layer remains in profile.css (.mm-pw__body::before)
   ====================================================================== */


/* ======================================================================
   Theme Variables
   ====================================================================== */

.mm-pw--skin-neon_glass {
  /* Main glass sheet behind everything */
  --pw-bg-rgb: 12 10 26;

  /* IMPORTANT:
     This alpha is the CHROME sheet alpha, not the body wash.
     By default it's fixed, because the gear slider typically controls
     the body paint layer (profile.css). If you want the slider to fade
     the chrome too, set --mm-widget-chrome-alpha from JS. */
  --pw-bg-alpha: var(--mm-widget-chrome-alpha, 0.28);

  /* Back-compat: keep --pw-bg so existing template rules work */
  --pw-bg: rgb(var(--pw-bg-rgb) / var(--pw-bg-alpha));

  /* Border colour (inset shadow) */
  --pw-border: rgba(34, 211, 238, 0.35);      /* cyan edge */

  /* Single radius owner */
  --pw-radius: 18px;

  /* Titlebar surface */
  --pw-bar-bg: rgba(12, 10, 26, 0.40);
  --pw-bar-border: rgba(99, 102, 241, 0.30);  /* indigo seam */
  --pw-bar-text: rgba(255, 255, 255, 0.94);

  /* Titlebar button styling */
  --pw-btn-text: rgba(255, 255, 255, 0.88);
  --pw-btn-hover-bg: rgba(34, 211, 238, 0.14);

  /* Body default text (fallback if widget doesn't set fg) */
  --pw-body-text: #0f172a;

  /* Outer drop shadow + glow */
  --pw-shadow:
    0 18px 55px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(99, 102, 241, 0.22),
    0 0 26px rgba(34, 211, 238, 0.18);

  /* Blur strength */
  --pw-blur: 16px;

  /* Defaults for the widget BODY paint layer (this is what the slider controls) */
  --mm-widget-bg-rgb-default: 10 12 18;
  --mm-widget-bg-layer-opacity-default: 0.10;


  /* Default readable fg on dark */
  --mm-widget-fg: rgba(255, 255, 255, 0.88);
}


/* Optional: muted helpers readable on dark */
.mm-pw--skin-neon_glass .mm-muted,
.mm-pw--skin-neon_glass .muted {
  color: rgba(255, 255, 255, 0.62);
}


/* ======================================================================
   Structural Root (chrome owner)
   ====================================================================== */

.mm-pw--skin-neon_glass.mm-pw {
  position: relative;
  border-radius: var(--pw-radius);
  box-shadow: var(--pw-shadow);
  overflow: hidden;

  transform: translateZ(0);
  will-change: transform;

  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}


/* ======================================================================
   Glass Sheet Layer (background + border + blur)
   ====================================================================== */

.mm-pw--skin-neon_glass.mm-pw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;

  /* Glass tint */
  background: var(--pw-bg);

  /* Border via inset shadow */
  box-shadow: 0 0 0 1px var(--pw-border) inset;

  backdrop-filter: blur(var(--pw-blur));
  -webkit-backdrop-filter: blur(var(--pw-blur));

  pointer-events: none;
  z-index: 0;

  transform: translateZ(0);
}


/* ======================================================================
   Gear Overlay Layer
   ====================================================================== */

.mm-pw--skin-neon_glass .mm-widget-style-layer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}


/* ======================================================================
   Content Wrappers
   ====================================================================== */

.mm-pw--skin-neon_glass .mm-pw__bar,
.mm-pw--skin-neon_glass .mm-pw__body {
  position: relative;
  z-index: 2;
}


/* ======================================================================
   Titlebar
   ====================================================================== */

.mm-pw--skin-neon_glass .mm-pw__bar {
  background: var(--pw-bar-bg);
  box-shadow: 0 -1px 0 0 var(--pw-bar-border) inset;
  color: var(--pw-bar-text);

  backdrop-filter: blur(calc(var(--pw-blur) * 0.75));
  -webkit-backdrop-filter: blur(calc(var(--pw-blur) * 0.75));
}


/* ======================================================================
   Titlebar Buttons
   ====================================================================== */

.mm-pw--skin-neon_glass .mm-pw__btn {
  color: var(--pw-btn-text);
}

.mm-pw--skin-neon_glass .mm-pw__btn:hover {
  background: var(--pw-btn-hover-bg);
}


/* ======================================================================
   Body
   ====================================================================== */

.mm-pw--skin-neon_glass .mm-pw__body {
  background: transparent;
  color: var(--mm-widget-fg, var(--pw-body-text));
}


/* ======================================================================
   No Titlebar Mode
   ====================================================================== */

.mm-pw--no-titlebar .mm-pw__bar {
  display: none !important;
}