/* Window chrome for the desktop app: red / yellow / green window buttons like
   macOS, and the strip along the top that drags the window. Plus small
   additions to styles.css (the Lyricify background's dimming). */

/* The old full-width drag strip is replaced by .fp-top (doesn't block clicks). */
.desktop body::before { display: none; }

.win-controls {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  gap: 8px;
  -webkit-app-region: no-drag;
}
.wc {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  cursor: default;
}
.wc.close { background: #ff5f57; }
.wc.min { background: #febc2e; }
.wc.zoom { background: #28c840; }
.wc svg { width: 12px; height: 12px; opacity: 0; fill: none; stroke: rgba(0, 0, 0, 0.62); stroke-width: 1.15; stroke-linecap: round; }
.wc svg .fill { fill: rgba(0, 0, 0, 0.62); stroke: none; }
.win-controls:hover .wc svg { opacity: 1; }
.wc:active { filter: brightness(0.82); }
.wc:focus-visible { outline: none; }
html.win-blurred .win-controls:not(:hover) .wc { background: rgba(255, 255, 255, 0.22); box-shadow: none; }
/* Full screen hides them, like macOS. */
:fullscreen .win-controls, html.idle .win-controls { display: none; }

/* Drag the window by its top edge. */
.fp-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 7;
  -webkit-app-region: drag;
  pointer-events: none;
}

/* The Lyricify background darkens itself (a 40% scrim), so Dim adds to that
   only above its 25% default. */
.bg.lyricify-mode::after { opacity: max(0, calc(var(--dim, 0.25) - 0.25)); }

/* Dropping files anywhere */
body.dragover .drop-overlay { opacity: 1; }
body.dragover.over-art .drop-overlay { opacity: 0; }

/* The library slides in from the left: keep it clear of the window buttons. */
.desktop .lib-sheet { top: 48px; }

/* What's new (after an update; ••• → What's new) */
.wn-panel { width: min(560px, 100%); max-height: min(640px, 88vh); padding: 6px 0 0; }
.wn-panel .card-head { padding: 14px 20px 6px; }
.wn-body { overflow-y: auto; padding: 0 22px 8px; scrollbar-width: thin; }
.wn-body section + section { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.wn-body h3 { margin: 6px 0 6px; font-size: 15px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
.wn-body h3 span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.wn-body ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.wn-body li { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.wn-foot { justify-content: flex-end; padding: 10px 20px 16px; }
.about-update[hidden] { display: none; }

/* Mac, Liquid Glass window (macOS 26): the real glass behind the page shows
   through; the cover background steps aside. */
html.glass-window, html.glass-window body { background: transparent; }
html.glass-window .bg, html.glass-window .now-bg { display: none; }
html.glass-window .lyrics { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }