/* WebGL liquid glass (js/glass-gl.js): the canvas draws every glass surface, so
 * the DOM surfaces lose their own backgrounds, borders, shadows and filters and
 * only carry content. Menus and modals float over the page and keep the CSS glass. */

#glassGL {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body.glass-gl #glassBackdrop {
  display: none;
}

body.glass-gl .left-panel,
body.glass-gl .right-panel,
body.glass-gl .playlist-area,
body.glass-gl .chat-container:not(.mobile-chat-container),
body.glass-gl .screen,
body.glass-gl .player-btn,
body.glass-gl .genre-select-header,
body.glass-gl .genre-search,
body.glass-gl #addPlaylistBtn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.glass-gl .chat-send-btn img {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.glass-gl .player-btn {
  filter: none;
}

body.glass-gl .player-btn:hover {
  box-shadow: none;
}

body.glass-gl #shuffleBtn.active {
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.9);
}

body.glass-gl .chat-container:not(.mobile-chat-container) {
  outline: none;
}

/* the canvas draws the console button too (see SHAPES) */
body.glass-gl #chatToggleBtn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the canvas draws the field; only the magnifier stays in the DOM */
body.glass-gl .genre-search[placeholder^="Search"] {
  background: var(--lupe) no-repeat 11px center / 16px 16px;
}