/* Phonophile · pp-glass-ui v2 — ONE glass material for every field, pill, tab, sheet and panel.
   Reference = the "Search artist or album" field + scan pill (pp-glass4.css/.js). Values below are copied 1:1 from it.
   Materials only: colour, background, backdrop, shadow, radius, ink. No size/padding/margin/position/z-index changes.
   Never targets artwork, deck, tonearm, vinyl, crates, shelf, dotted floors. Load AFTER pp-glass4.css.
   Theme = html[data-theme=dark|light], else prefers-color-scheme. */
:root{
  --pgu-tint: rgba(255,255,255,.06);
  --pgu-key: rgba(255,255,255,.95); --pgu-fill: rgba(255,255,255,.55); --pgu-hair: rgba(0,0,0,.10);
  --pgu-red: rgba(255,120,40,.34); --pgu-blue: rgba(0,175,255,.34); --pgu-mag: rgba(235,60,190,.30); --pgu-cyan: rgba(60,230,255,.32);
  --pgu-glow: rgba(255,255,255,.30);
  --pgu-shadow: 0 10px 26px -14px rgba(20,20,30,.30), 0 2px 6px -3px rgba(20,20,30,.14);
  --pgu-ink: #1d1d1f; --pgu-ink2: #6e6e73; --pgu-ph: #8e8e93;
  --pgu-sheet: rgba(250,250,252,.55);            /* frosted body for sheets over arbitrary content (readability) */
  --pgu-ring: 0 0 0 4px rgba(120,160,255,.18);
  --pgu-hover: rgba(255,255,255,.10); --pgu-press: rgba(0,0,0,.04);
  --pgu-danger: #b3261e; --pgu-gold: #a07a1c;
  --pgu-rim: inset 1.5px 1.5px 0 -.5px var(--pgu-key), inset -1px -1px 0 -.25px var(--pgu-fill),
    inset 2px 0 2px -1px var(--pgu-red), inset -2px 0 2px -1px var(--pgu-blue),
    inset 0 2px 2px -1px var(--pgu-red), inset 0 -2px 2px -1px var(--pgu-blue),
    inset 3.5px 3.5px 4px -2.5px var(--pgu-cyan), inset -3.5px -3.5px 4px -2.5px var(--pgu-mag),
    inset 0 0 8px var(--pgu-glow), 0 0 0 .5px var(--pgu-hair);
}
html[data-theme=dark]{
  --pgu-tint: rgba(255,255,255,.035);
  --pgu-key: rgba(255,255,255,.70); --pgu-fill: rgba(255,255,255,.28); --pgu-hair: rgba(255,255,255,.10);
  --pgu-red: rgba(255,140,60,.38); --pgu-blue: rgba(40,170,255,.40); --pgu-mag: rgba(240,80,210,.36); --pgu-cyan: rgba(80,235,255,.36);
  --pgu-glow: rgba(255,255,255,.10);
  --pgu-shadow: 0 12px 28px -14px rgba(0,0,0,.65), 0 2px 6px -3px rgba(0,0,0,.4);
  --pgu-ink: #f2f0ea; --pgu-ink2: #a1a1a6; --pgu-sheet: rgba(30,30,34,.55);
  --pgu-hover: rgba(255,255,255,.06); --pgu-press: rgba(255,255,255,.04); --pgu-danger: #ff8a80; --pgu-gold: #e0bd5c;
}
@media (prefers-color-scheme: dark){ html:not([data-theme=light]){
  --pgu-tint: rgba(255,255,255,.035);
  --pgu-key: rgba(255,255,255,.70); --pgu-fill: rgba(255,255,255,.28); --pgu-hair: rgba(255,255,255,.10);
  --pgu-red: rgba(255,140,60,.38); --pgu-blue: rgba(40,170,255,.40); --pgu-mag: rgba(240,80,210,.36); --pgu-cyan: rgba(80,235,255,.36);
  --pgu-glow: rgba(255,255,255,.10);
  --pgu-shadow: 0 12px 28px -14px rgba(0,0,0,.65), 0 2px 6px -3px rgba(0,0,0,.4);
  --pgu-ink: #f2f0ea; --pgu-ink2: #a1a1a6; --pgu-sheet: rgba(30,30,34,.55);
  --pgu-hover: rgba(255,255,255,.06); --pgu-press: rgba(255,255,255,.04); --pgu-danger: #ff8a80; --pgu-gold: #e0bd5c;
} }

/* ---------- 1. CLEAR GLASS: fields + pills on the floor (identical to .wax-search) ---------- */
html body .wax-lobby-search, html body .wax-dm-form input, html body .wax-lobby-name-row input, html body .wax-live-form input,
html body .wax-user-card input,
html body .wax-lobby-btn, html body .wax-lobby-btn.is-quiet, html body .wax-dm-form button, html body .wax-lobby-name-row button,
html body .wax-user-card button, html body .wax-live-form button, html body .wax-lobby-hit, html body .wax-user-btn, html body .wax-person-btn,
html body .wax-grail-act, html body .wax-sync-btn, html body .wax-inspect-act, html body .wax-friend-pick-row{
  color: var(--pgu-ink) !important;
  background-color: var(--pgu-tint) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%) !important;
  -webkit-backdrop-filter: saturate(160%) contrast(1.03); backdrop-filter: saturate(160%) contrast(1.03);
  border-color: transparent !important; text-shadow: none !important;
  box-shadow: var(--pgu-rim), var(--pgu-shadow) !important;
  border-radius: 999px !important;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .2s, background-color .2s, opacity .2s;
}
/* refracted rim image from pp-glass-ui.js (same renderer as the reference) sits over the sheen */
html body .ppgu-lensed{ background-size: 100% 100% !important; }
/* user-card input sits inside a sheet, not on the floor: keep it a glass field too */
html body .wax-user-card input{ border-bottom: 0 !important; padding-left: 12px; }
/* inputs inside the glass label are see-through so the label is the one glass surface */
html body .wax-lobby-search input{ background: transparent !important; color: var(--pgu-ink) !important; }
html body .wax-lobby-search > svg{ color: var(--pgu-ph); }
html body .wax-lobby-search input::placeholder, html body .wax-dm-form input::placeholder,
html body .wax-lobby-name-row input::placeholder, html body .wax-user-card input::placeholder,
html body .wax-live-form input::placeholder{ color: var(--pgu-ph) !important; }
html body .wax-lobby-hit em{ color: var(--pgu-ink2) !important; }

/* ---------- 2. FROSTED GLASS: sheets / panels / menus over arbitrary content (same rim, + blur for legibility) ---------- */
html body .wax-user-card, html body .wax-person-menu, html body .wax-lobby-ask, html body .wax-lobby-confirm > div,
html body .wax-grail-confirm > div, html body .wax-mc-inspect-panel, html body .wax-lobby .wax-terms{
  color: var(--pgu-ink) !important;
  background-color: var(--pgu-sheet) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--pgu-rim), 0 18px 40px -16px rgba(0,0,0,.35) !important;
  border-color: transparent !important; border-radius: 22px !important;
}
html body .wax-user-card p:not(.is-bad), html body .wax-lobby-ask-kicker{ color: var(--pgu-ink2) !important; }
html body .wax-lobby-ask p{ color: var(--pgu-ink) !important; }
html body .wax-person-menu button{ color: var(--pgu-ink) !important; background: transparent !important; }

/* ---------- 3. VARIANTS (same glass, tinted ink only) ---------- */
html body .wax-grail-act.is-danger{ color: var(--pgu-danger) !important; }
html body .wax-inspect-act.is-on{ color: var(--pgu-gold) !important; background-color: rgba(201,162,39,.16) !important; }
html body .wax-inspect-act.is-dump{ color: var(--pgu-danger) !important; }
html body .wax-dm-log article p:last-child{                /* chat bubbles */
  color: var(--pgu-ink) !important; background: var(--pgu-tint) !important; border-radius: 16px;
  box-shadow: inset 1px 1px 0 -.25px var(--pgu-key), inset -1px -1px 0 -.25px var(--pgu-fill),
              inset 1.5px 0 2px -1px var(--pgu-red), inset -1.5px 0 2px -1px var(--pgu-blue), 0 0 0 .5px var(--pgu-hair) !important; }
html body .wax-dm-log article.is-mine p:last-child{ background: rgba(120,160,255,.16) !important; }

/* ---------- 4. STATES (shared) ---------- */
@media (hover: hover){
  html body .wax-lobby-btn:hover:not(:disabled), html body .wax-dm-form button:hover:not(:disabled), html body .wax-lobby-name-row button:hover:not(:disabled),
  html body .wax-user-card button:hover:not(:disabled), html body .wax-lobby-hit:hover:not(:disabled), html body .wax-user-btn:hover, html body .wax-person-btn:hover,
  html body .wax-grail-act:hover, html body .wax-sync-btn:hover, html body .wax-inspect-act:hover, html body .wax-friend-pick-row:hover,
  html body .wax-person-menu button:hover{ background-color: var(--pgu-hover) !important; }
}
html body .wax-lobby-btn:active:not(:disabled), html body .wax-dm-form button:active:not(:disabled), html body .wax-lobby-name-row button:active:not(:disabled),
html body .wax-user-card button:active:not(:disabled), html body .wax-lobby-hit:active:not(:disabled), html body .wax-user-btn:active, html body .wax-person-btn:active,
html body .wax-grail-act:active, html body .wax-sync-btn:active, html body .wax-inspect-act:active, html body .wax-lobby-search:active{
  transform: scale(.975); background-color: var(--pgu-press) !important; }
html body .wax-person-menu button:active{ background-color: var(--pgu-press) !important; }
/* focus = exactly .wax-search:focus */
html body .wax-lobby-search:focus-within, html body .wax-dm-form input:focus, html body .wax-lobby-name-row input:focus,
html body .wax-user-card input:focus, html body .wax-live-form input:focus{
  outline: none !important;
  box-shadow: inset 1.5px 1.5px 0 -.5px var(--pgu-key), inset -1px -1px 0 -.25px var(--pgu-fill), 0 0 0 .5px var(--pgu-hair), var(--pgu-ring), var(--pgu-shadow) !important; }
html body .wax-lobby-btn:focus-visible, html body .wax-dm-form button:focus-visible, html body .wax-lobby-name-row button:focus-visible,
html body .wax-user-card button:focus-visible, html body .wax-lobby-hit:focus-visible, html body .wax-user-btn:focus-visible, html body .wax-person-btn:focus-visible,
html body .wax-grail-act:focus-visible, html body .wax-sync-btn:focus-visible, html body .wax-inspect-act:focus-visible, html body .wax-friend-pick-row:focus-visible,
html body .wax-search:focus-visible, html body .wax-scan-upc:focus-visible, html body .wax-tabs button:focus-visible{
  outline: none !important; box-shadow: var(--pgu-rim), var(--pgu-ring) !important; }
html body .wax-lobby-btn:disabled, html body .wax-dm-form button:disabled, html body .wax-lobby-name-row button:disabled,
html body .wax-user-card button:disabled, html body .wax-lobby-hit:disabled, html body .wax-sync-btn:disabled{
  opacity: .4 !important; transform: none !important; cursor: default; }

/* ---------- 5. legibility fix: terms card text was #d9d0c3 on the light floor ---------- */
html body .wax-lobby .wax-terms p, html body .wax-lobby .wax-terms a{ color: var(--pgu-ink2) !important; }
html body .wax-lobby .wax-terms h2{ color: var(--pgu-ink) !important; }

@media (prefers-reduced-motion: reduce){ html body [class*=wax-]{ transition-duration: .01ms !important; } }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  html body .wax-user-card, html body .wax-person-menu, html body .wax-lobby-confirm > div{ background-color: rgba(248,248,250,.94) !important; }
  html[data-theme=dark] body .wax-user-card, html[data-theme=dark] body .wax-person-menu, html[data-theme=dark] body .wax-lobby-confirm > div{ background-color: rgba(34,34,38,.94) !important; }
}

/* ================= v2: chat (DM) header =================
   [ Back ]   Friend name (centred, ellipsis)   [ spacer ]
   Symmetric 3-column grid so the title is centred on the screen, not between Back and the edge.
   Top padding keeps the app's safe-area rule: max(.7rem, env(safe-area-inset-top)). */
html body .wax-dm-head{
  display: grid !important; grid-template-columns: 96px minmax(0,1fr) 96px; align-items: center; column-gap: 8px;
  padding-left: 16px; padding-right: 16px; }
html body .wax-dm-head::after{ content: ""; grid-column: 3; }               /* empty right column = Back's width */
/* fallback: the person (user) button must not appear in chat; Build removes it from the component too */
html body .wax-dm-head > .wax-person{ display: none !important; }
html body .wax-dm-head > p{
  grid-column: 2; text-align: center; min-width: 0; margin: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: var(--pgu-ink) !important; }
/* Back = the same clear glass pill (rim image from pp-glass-ui.js) */
html body .wax-dm-head > button{
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; min-height: 44px !important; height: 44px; padding: 0 14px 0 10px !important;
  font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  color: var(--pgu-ink) !important;
  background-color: var(--pgu-tint) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%) !important;
  -webkit-backdrop-filter: saturate(160%) contrast(1.03); backdrop-filter: saturate(160%) contrast(1.03);
  border: 0 !important; border-radius: 999px !important;
  box-shadow: var(--pgu-rim), var(--pgu-shadow) !important;
  transition: transform .35s cubic-bezier(.3,1.6,.5,1), background-color .2s; }
html body .wax-dm-head > button::before{               /* chevron, pure CSS so no markup change is needed */
  content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid currentColor; border-width: 0 0 2px 2px;
  transform: rotate(45deg); border-radius: 1px; }
@media (hover: hover){ html body .wax-dm-head > button:hover{ background-color: var(--pgu-hover) !important; } }
html body .wax-dm-head > button:active{ transform: scale(.975); background-color: var(--pgu-press) !important; }
html body .wax-dm-head > button:focus-visible{ outline: none !important; box-shadow: var(--pgu-rim), var(--pgu-ring) !important; }