/* =====================================================================================================================
 * MAGIC PTT SL DESKTOP · GLASS (2026-11-07, his word: "its not as glassy as i was thinking"). Static light only:
 * a domed glass over the scope, frosted panels, a hairline of light on every top edge. Nothing moves, nothing blinks.
 * ===================================================================================================================== */

/* the dome over the live scope: a highlight where the light hits the glass, a dark edge where the dome curves away,
   a thin bright rim. The engine draws its own glass under this; this is the room's light on top. */
body.sld .sld-scope::before {
  content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; height: 92%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 48% 34% at 32% 20%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 55%, transparent 72%),
    radial-gradient(ellipse 60% 30% at 70% 88%, rgba(255, 255, 255, 0.035), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 1px rgba(255, 255, 255, 0.07), inset 0 -22px 50px rgba(0, 0, 0, 0.45), inset 0 0 90px rgba(var(--sl-rgb), 0.07);
}
body.sld .sld-scope {
  background: radial-gradient(60% 70% at 50% 50%, #08181a 0%, #040308 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* the frosted panels: left, right, and the header */
body.sld .sld-left, body.sld .sld-right {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 40%, rgba(0, 0, 0, 0.18));
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.sld .sl-mast {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.25));
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* every row, tile, chip and net plate: a glass slab with a lit top edge */
body.sld .sld-row, body.sld .sld-drop, body.sld .sld-chip, body.sld .slv-chips .slv-chip,
body.sld #roomRail .room-plate, body.sld .sld-traffic .sl-traffic-tools button, body.sld .slv-gd-tile, body.sld .sld-meter .sl-meter {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.12)) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.sld #roomRail .room-plate { border: 1px solid rgba(255, 255, 255, 0.06) !important; }
body.sld #roomRail .room-plate.is-on, body.sld .sld-chip.on, body.sld .slv-chips .slv-chip.on {
  background: linear-gradient(180deg, rgba(var(--sl-rgb), 0.22), rgba(var(--sl-rgb), 0.06)) !important;
  border-color: rgba(var(--sl-rgb), 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 18px rgba(var(--sl-rgb), 0.18) !important;
}
body.sld .sld-drop {
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.12), rgba(245, 197, 66, 0.03) 50%, rgba(0, 0, 0, 0.12)) !important;
  border-color: rgba(245, 197, 66, 0.4) !important;
}
body.sld .sld-row.carry { border-color: rgba(255, 122, 24, 0.5) !important; }

/* the talk key: a lit glass slab */
body.sld .slv-talk #pttBtn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(var(--sl-rgb), 0.14) 30%, rgba(var(--sl-rgb), 0.04)) !important;
  border: 1px solid rgba(var(--sl-rgb), 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -30px 50px rgba(0, 0, 0, 0.35), 0 0 40px rgba(var(--sl-rgb), 0.16), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
body.sld.sl-tx .slv-talk #pttBtn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(var(--sl-rgb), 0.5) 30%, rgba(var(--sl-rgb), 0.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 70px rgba(var(--sl-rgb), 0.45), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* the traffic box and the send row */
body.sld .sld-traffic #log, body.sld .sld-traffic #logSearch, body.sld .sld-traffic #sendForm input {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.14)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.sld .sld-traffic #log { padding: 8px 10px; }

/* the legend and HUD sit on their own small glass */
body.sld .sld-scope__hud { padding: 10px 12px; border-radius: 10px; background: rgba(4, 3, 8, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }