/* Shared playspace drawer + collaborative apps. Loaded by index.html (embedded
   drawer) and playspace.html (popped-out standalone window). */
/* Same width as the chat drawer so the two behave identically. */
:root{ --playw: var(--chatw, 340px); }

/* ---- Layout: mirror the chat drawer ---------------------------------- */
/* Windowed: opening the playspace WIDENS the stage (just like chat) — the video
   keeps its size, the drawer fills space beside it. The video only has to shrink
   when BOTH drawers are open at once, or the stage would overflow the window. */
.playcol{flex:0 0 auto;width:0;overflow:hidden;position:relative;align-self:stretch;
  transition:width .3s ease;background:#0f1216;z-index:2}   /* paints above the video box */
.stage.play-open .playcol{width:var(--playw)}
.playcol .ps{position:absolute;inset:0;width:100%}
/* No "shrink when both open" rule needed: the base .viewport now permanently
   reserves BOTH drawer widths (see index.html), so the video is a fixed size and
   opening either drawer just fills its reserved margin — never a resize. */

/* Fullscreen: the drawer OVERLAYS the video (video stays 100%, sides covered)
   but stays interactive. The .fs and :-webkit-full-screen selectors MUST be in
   SEPARATE rules — Firefox drops an entire selector list if it contains an
   unknown pseudo-class, which was silently killing this overlay (the video then
   fell back to sharing flex space and shrank). See the same split for .chatcol. */
.stage.fs .playcol{
  position:absolute;top:60px;bottom:96px;left:8px;right:auto;width:min(40%,440px);
  z-index:12;border-radius:14px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.55);
  opacity:1;pointer-events:auto;transition:opacity .25s ease}
.stage:-webkit-full-screen .playcol{
  position:absolute;top:60px;bottom:96px;left:8px;right:auto;width:min(40%,440px);
  z-index:12;border-radius:14px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.55);
  opacity:1;pointer-events:auto;transition:opacity .25s ease}
.stage.fs:not(.play-open) .playcol{opacity:0;pointer-events:none}
.stage:-webkit-full-screen:not(.play-open) .playcol{opacity:0;pointer-events:none}
/* Now-playing carousel banner is showing → drop the drawer top below it so the
   side cards (which span the full width) aren't covered. */
.stage.fs.np-card-on .playcol{top:100px}
.stage:-webkit-full-screen.np-card-on .playcol{top:100px}
/* Standard :fullscreen (Firefox + modern Chrome) fallback — separate rule. */
.stage:fullscreen .playcol{position:absolute;top:60px;bottom:96px;left:8px;right:auto;
  width:min(40%,440px);z-index:12;border-radius:14px;overflow:hidden;opacity:1;pointer-events:auto}
.stage:fullscreen.np-card-on .playcol{top:100px}
.stage:fullscreen:not(.play-open) .playcol{opacity:0;pointer-events:none}
/* Chat docked LEFT → playspace moves RIGHT so they never stack on the same side. */
.stage.fs.chat-left .playcol{left:auto;right:8px}
.stage:-webkit-full-screen.chat-left .playcol{left:auto;right:8px}
.stage.fs .playcol .ps{background:rgba(14,18,22,.86);backdrop-filter:blur(6px)}
.stage:-webkit-full-screen .playcol .ps{background:rgba(14,18,22,.86);backdrop-filter:blur(6px)}
.stage.mini .playcol{display:none!important}

/* Popped-out standalone window fills the whole page. */
body.ps-standalone{margin:0;background:#0c0f13;height:100vh;overflow:hidden}
body.ps-standalone #playcol{position:fixed;inset:0;width:100%!important;background:#0f1216}
body.ps-standalone .ps{position:absolute;inset:0}

/* ---- Drawer content -------------------------------------------------- */
.ps{display:flex;flex-direction:column;height:100%;color:#e8eaed;
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0f1216}
/* Look variants (per-viewer) — retint the whole drawer. Applied on Default bg. */
.ps.ps-theme-aurora{background:radial-gradient(130% 90% at 0% 0%,#16273f 0%,#0f1216 55%)}
.ps.ps-theme-aurora .ps-head{background:#101a29}
.ps.ps-theme-aurora .ps-tile{background:#121a27;border-color:#233349}
.ps.ps-theme-slate{background:#14171c}
.ps.ps-theme-slate .ps-head{background:#171b21}
.ps.ps-theme-slate .ps-tile{background:#1a1e25;border-color:#2b323d}
.ps.ps-theme-neon{background:radial-gradient(130% 95% at 100% 0%,#1b1032 0%,#0d0a14 60%)}
.ps.ps-theme-neon .ps-head{background:#140d21}
.ps.ps-theme-neon .ps-tile{background:#160f26;border-color:#3a2a5c}
.ps.ps-theme-neon .ps-title{text-shadow:0 0 10px rgba(157,120,255,.55)}
.ps.ps-theme-sunset{background:linear-gradient(165deg,#2b1519 0%,#120d10 55%)}
.ps.ps-theme-sunset .ps-head{background:#1d1013}
.ps.ps-theme-sunset .ps-tile{background:#221419;border-color:#4a2731}
.ps.ps-theme-mono{background:#0c0c0d}
.ps.ps-theme-mono .ps-head{background:#111112}
.ps.ps-theme-mono .ps-tile{background:#161617;border-color:#2b2b2d}
.ps-theme-sw.on{outline:2px solid #5cc4ff;outline-offset:1px}
.ps-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #222831;
  background:#12161c;flex:0 0 auto}
.ps-title{font-weight:600;letter-spacing:.02em}
.ps-sp{flex:1 1 auto}
/* App strip: one tab per app on the grid — click to jump to its tile.
   Scrolls horizontally (hidden scrollbar) when there are more than fit. */
.ps-tabs{display:flex;gap:4px;margin-left:6px;flex:1 1 auto;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}
.ps-tabs::-webkit-scrollbar{display:none;height:0}
.ps-tab{background:#1a1f27;border:1px solid #2a313c;color:#c7ccd4;border-radius:999px;
  padding:3px 10px;font-size:12px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.ps-tab:hover:not(:disabled){border-color:#5cc4ff;color:#cfe9ff}
/* Silent DM notification on the Messages chip: unread count pill + soft glow */
.ps-tabbadge{display:inline-block;margin-left:5px;min-width:16px;padding:0 4px;border-radius:999px;
  background:#ff5d7a;color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center}
.ps-tab-dmglow{border-color:#ff5d7a;color:#ffd7de;animation:psDmGlow 1.6s ease-in-out infinite}
@keyframes psDmGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,93,122,0)}50%{box-shadow:0 0 10px 2px rgba(255,93,122,.7)}}
.ps-tab.on{background:#1f6feb22;border-color:#5cc4ff;color:#cfe9ff}
.ps-tab:disabled{opacity:.4;cursor:default}
/* "+ send to grid" pills — available apps not currently on the grid */
.ps-tab-add{background:transparent;border-style:dashed;border-color:#3a6b4d;color:#8fdca8}
.ps-tab-add:hover:not(:disabled){border-color:#7de8a8;color:#bff5cf}
.ps-ic{background:transparent;border:0;color:#c7ccd4;font-size:17px;line-height:1;cursor:pointer;
  padding:4px 6px;border-radius:8px}
.ps-ic:hover{background:#1c222b;color:#fff}

.ps-body{position:relative;flex:1 1 auto;min-height:0}
.ps-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;
  background:#151a20;cursor:crosshair;display:block}

/* ---- App grid: tiles with cell spans, drag to rearrange --------------- */
.ps-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,1fr);
  grid-auto-rows:75px;grid-auto-flow:dense;gap:8px;padding:8px;overflow:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.ps-grid::-webkit-scrollbar{display:none;width:0;height:0}
.ps-tile{position:relative;display:flex;flex-direction:column;min-height:0;
  background:#12161c;border:1px solid #222831;border-radius:12px;overflow:hidden}
.ps-tile.dragging{opacity:.45}
.ps-tile.dropover{outline:2px dashed #5cc4ff;outline-offset:-2px}
/* Target-cell preview while dragging a tile over empty grid space */
.ps-dropghost{border:2px dashed #5cc4ff;border-radius:12px;background:#5cc4ff11;
  pointer-events:none;min-height:0}
.ps-tilehead{display:flex;align-items:center;gap:6px;padding:5px 9px;flex:0 0 auto;
  font-size:11px;font-weight:700;letter-spacing:.04em;color:#aeb6c0;background:#161b22;
  border-bottom:1px solid #222831;cursor:grab;user-select:none}
.ps-tilehead:active{cursor:grabbing}
.ps-grip{opacity:.6;font-size:12px}
.ps-tname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Universal close/hide button on every tile head */
.ps-tclose{flex:0 0 auto;margin-left:4px;width:20px;height:20px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;
  border-radius:6px;color:#8a929c;font-size:16px;font-weight:700;cursor:pointer}
.ps-tclose:hover{background:#3a1417;border-color:#7a2530;color:#ff6b6b}
.ps-tilebody{position:relative;flex:1 1 auto;min-height:0}
/* Whiteboard head controls: mode toggle + save-as */
.ps-wbctl{margin-left:auto;display:flex;gap:4px;align-items:center}
.ps-wbbtn{background:#1a1f27;border:1px solid #2a313c;color:#c7ccd4;border-radius:6px;
  padding:2px 7px;font-size:10px;font-weight:700;cursor:pointer;letter-spacing:.03em}
.ps-wbbtn:hover{border-color:#39424f;color:#fff}
.ps-wbbtn.mode{background:#12351f;border-color:#3fb950;color:#b7f5c6}
.ps-wbbtn.mode.priv{background:#3a2450;border-color:#9b7be0;color:#d9b8ff}

/* User List tile (moderators) */
.ps-users{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;padding:6px 0}
.ps-users::-webkit-scrollbar{display:none;width:0;height:0}
.ps-ucount{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7e8792;
  padding:2px 10px 6px}
.ps-urow{display:flex;align-items:center;gap:6px;padding:3px 10px;font-size:12.5px}
.ps-uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-rolechip{font-size:9px;font-weight:800;border-radius:999px;padding:1px 6px;letter-spacing:.06em}
.ps-rolechip.owner{background:#3a2450;color:#d9b8ff}
.ps-rolechip.mod{background:#173a2a;color:#7de8a8}
.ps-mutedflag{font-size:9px;color:#ff9c9c}
.ps-conns{font-size:9px;color:#7e8792}

/* CRITICAL: our display:flex/grid on these beats the browser's [hidden] rule —
   without this line the "hidden" lock overlay still renders and EATS EVERY
   CLICK on the whiteboard (the "can't draw" bug). */
.ps-lock[hidden],.ps-tools[hidden],.ps-dir[hidden],.ps-admin[hidden],.ps-grid[hidden]{display:none!important}
.ps-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:#aeb6c0;background:rgba(12,15,19,.72);z-index:3;
  font-size:13px}
.ps-lock.ps-lock-soft{background:rgba(12,15,19,.42);align-items:flex-end;padding-bottom:14px}

/* Floating tool dock — a single glassy pill that centers itself and wraps
   instead of overflowing, so it stays fully reachable on any width (incl.
   ultrawide, where the tile can be short). */
.ps-tools{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 8px;
  max-width:calc(100% - 20px);padding:7px 9px;border-radius:14px;
  background:rgba(15,19,26,.72);border:1px solid rgba(120,140,170,.22);
  box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.ps-toolgrp{display:flex;gap:4px}
.ps-toolsep{width:1px;align-self:stretch;margin:2px 1px;
  background:linear-gradient(transparent,rgba(140,160,190,.35),transparent)}
.ps-tool{width:30px;height:30px;border-radius:9px;border:1px solid rgba(120,140,170,.16);
  background:linear-gradient(#1b212b,#161b23);color:#e8eaed;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;
  transition:transform .08s ease,border-color .12s ease,box-shadow .12s ease}
.ps-tool:hover{transform:translateY(-1px);border-color:rgba(120,196,255,.5)}
.ps-tool:active{transform:translateY(0)}
.ps-tool.on{border-color:#5cc4ff;color:#fff;
  background:linear-gradient(135deg,#1f6feb55,#5cc4ff33);
  box-shadow:0 0 0 1px #5cc4ff88,0 2px 12px rgba(92,196,255,.35)}
.ps-tdel{color:#ff8a8a}
.ps-tdel:hover{border-color:#ff5c5c88;background:linear-gradient(#2a1a1e,#221518)}
.ps-zgrp .ps-tool{font-size:15px}
.ps-canvas:focus{outline:none}
.ps-textin{position:absolute;z-index:6;background:rgba(10,13,17,.9);border:1px solid #5cc4ff;
  border-radius:8px;padding:3px 8px;font-weight:600;min-width:150px;font-family:inherit;
  box-shadow:0 4px 18px rgba(0,0,0,.5)}
.ps-textin:focus{outline:none}
.ps-colors{display:flex;gap:5px}
.ps-sw{width:22px;height:22px;border-radius:50%;border:2px solid rgba(120,140,170,.3);cursor:pointer;
  padding:0;transition:transform .08s ease,box-shadow .12s ease}
.ps-sw:hover{transform:scale(1.12)}
.ps-sw.on{border-color:#fff;box-shadow:0 0 0 2px #5cc4ff,0 0 10px rgba(92,196,255,.5)}
.ps-sizes{display:flex;gap:5px}
.ps-size{width:30px;height:30px;border-radius:9px;border:1px solid rgba(120,140,170,.16);
  background:linear-gradient(#1b212b,#161b23);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .08s ease,border-color .12s ease}
.ps-size:hover{transform:translateY(-1px);border-color:rgba(120,196,255,.5)}
.ps-size.on{border-color:#5cc4ff;background:linear-gradient(135deg,#1f6feb55,#5cc4ff22);
  box-shadow:0 0 0 1px #5cc4ff88}
.ps-size i{display:block;background:#e8eaed;border-radius:50%}

/* ---- Admin / permissions -------------------------------------------- */
.ps-admin{flex:0 0 auto;max-height:46%;overflow:auto;padding:10px;border-bottom:1px solid #222831;
  background:#0d1116}
/* --- Viewer-chosen playspace background (settings ⚙ → Background) --------- */
/* The wrapper's own dark paint yields when a custom background is chosen */
.playcol.ps-col-clear{background:transparent}
/* Fullscreen glass shell (higher specificity + `background` shorthand) must
   yield to the viewer's choice — separate rules per fullscreen variant, since
   Firefox invalidates a whole list containing an unknown pseudo-class. */
.stage.fs .playcol .ps.ps-bg-trans{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage:-webkit-full-screen .playcol .ps.ps-bg-trans{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage:fullscreen .playcol .ps.ps-bg-trans{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage.fs .playcol .ps.ps-bg-clear{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage:-webkit-full-screen .playcol .ps.ps-bg-clear{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage:fullscreen .playcol .ps.ps-bg-clear{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.stage.fs .playcol .ps.ps-bg-img{background:var(--psbg) center/cover no-repeat}
.stage:-webkit-full-screen .playcol .ps.ps-bg-img{background:var(--psbg) center/cover no-repeat}
.stage:fullscreen .playcol .ps.ps-bg-img{background:var(--psbg) center/cover no-repeat}
.ps.ps-bg-trans{background:transparent}
.ps.ps-bg-trans .ps-head{background:rgba(18,22,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps.ps-bg-trans .ps-admin{background:rgba(13,17,22,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps.ps-bg-trans .ps-tile{background:rgba(18,22,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps.ps-bg-trans .ps-tilehead{background:rgba(22,27,34,.45)}
/* CLEAR: fully see-through, like the chat's fullscreen overlay — no frost,
   no panel; only faint tile outlines so apps still read as apps. */
.ps.ps-bg-clear{background:transparent}
.ps.ps-bg-clear .ps-head{background:transparent;border-bottom-color:rgba(34,40,49,.35)}
.ps.ps-bg-clear .ps-admin{background:rgba(13,17,22,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps.ps-bg-clear .ps-tile{background:rgba(10,13,17,.22);border-color:rgba(48,56,67,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
.ps.ps-bg-clear .ps-tilehead{background:rgba(18,22,28,.3);border-bottom-color:rgba(34,40,49,.4)}
.ps.ps-bg-img{background-image:var(--psbg);background-size:cover;background-position:center}
.ps.ps-bg-img .ps-head{background:rgba(18,22,28,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ps.ps-bg-img .ps-admin{background:rgba(13,17,22,.72)}
.ps.ps-bg-img .ps-tile{background:rgba(18,22,28,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.ps-bgrow .ps-btn{flex:1 1 0;text-align:center}
.ps-filebtn{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
/* Permissions live in a collapsed drop-down under the appearance settings */
.ps-permwrap{margin-top:10px;border-top:1px solid #222831;padding-top:8px}
.ps-permwrap summary{cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:#7e8792;font-weight:700;user-select:none;list-style-position:inside}
.ps-permwrap summary:hover{color:#cfd6dd}
.ps-permbody{margin-top:8px}
.ps-arow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ps-btn{background:#1a1f27;border:1px solid #2a313c;color:#dfe4ea;border-radius:8px;
  padding:6px 10px;font-size:12px;cursor:pointer}
.ps-btn.on{background:#12351f;border-color:#3fb950;color:#b7f5c6}
.ps-btn.ps-danger{color:#ffb4b4}
.ps-check{display:flex;align-items:center;gap:7px;font-size:12px;color:#c7ccd4;margin:2px 0 8px}
.ps-section{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7e8792;margin:8px 0 4px}
.ps-muted{color:#7e8792;font-size:12px;padding:2px 0}
.ps-list{display:flex;flex-direction:column;gap:4px}
.ps-uitem{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#141922;border:1px solid #222831;border-radius:8px;padding:5px 8px}
.ps-uname{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-uitem.off{opacity:.62}
.ps-offdot{color:#6b7480;font-size:11px}
.ps-mini{background:#1f6feb;border:0;color:#fff;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.ps-mini.ps-danger{background:#b0343a}

/* ---- Poll tile --------------------------------------------------------- */
/* Block (not flex) so each poll/trivia card sizes to its own content and the
   body scrolls — a flex COLUMN here collapsed cards to their first line and
   overflow:hidden then clipped the question + every option. */
.ps-pollbody{overflow:auto;padding:10px;display:block;
  scrollbar-width:none;-ms-overflow-style:none}
.ps-pollbody > * + *{margin-top:8px}
.ps-pollbody::-webkit-scrollbar{display:none;width:0;height:0}
.ps-pollform{display:flex;flex-direction:column;gap:8px}
/* Poll options as chips: Enter turns the typed entry into its own selection */
.ps-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#171c23;
  border:1px solid #2a313c;border-radius:8px;padding:6px 8px;cursor:text}
.ps-chips:focus-within{border-color:#5cc4ff}
.ps-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:#1d2634;
  border:1px solid #33415a;color:#dbe7ff;border-radius:999px;padding:3px 6px 3px 10px;
  font-size:12px;font-weight:600;overflow-wrap:anywhere}
.ps-chipx{background:transparent;border:0;color:#8fa3c4;font-size:14px;line-height:1;
  padding:0 3px;cursor:pointer;border-radius:50%}
.ps-chipx:hover{color:#ff8079}
.ps-chipin{flex:1 1 90px;min-width:70px;background:transparent;border:0;color:#e8eaed;
  font-size:13px;font-family:inherit;padding:3px 2px}
.ps-chipin:focus{outline:none}
.ps-chipin::placeholder{color:#5b6470}
.ps-in{background:#171c23;border:1px solid #2a313c;color:#e8eaed;border-radius:8px;
  padding:7px 9px;font-size:13px;font-family:inherit;min-width:0}
.ps-in:focus{outline:none;border-color:#5cc4ff}
.ps-pollq{font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:anywhere;
  padding-right:2px}
.ps-pollclosed{font-size:9px;font-weight:800;letter-spacing:.08em;color:#ff9c9c;
  border:1px solid #b0343a;border-radius:999px;padding:1px 7px;white-space:nowrap;
  vertical-align:middle;display:inline-block;margin-left:2px}
.ps-polllive{font-size:9px;font-weight:800;letter-spacing:.08em;color:#7de8a8;
  border:1px solid #2f7d4a;border-radius:999px;padding:1px 7px;white-space:nowrap;
  vertical-align:middle;display:inline-block;margin-left:2px}
.ps-pollclock{font-size:10px;font-weight:800;color:#9bd0ff;border:1px solid #2f5a7d;
  border-radius:999px;padding:1px 7px;white-space:nowrap;vertical-align:middle;
  display:inline-block;margin-left:4px}
.ps-pollclock.hot{color:#ffb4a8;border-color:#8a3a30;background:#331512;animation:srplay 1s ease infinite}
.ps-pollwrite .ps-in{font-size:12px}
/* Session poll history: scrollable stack, live polls first and highlighted */
.ps-polllist{display:flex;flex-direction:column;gap:10px}
/* min-height:fit-content is load-bearing: without it the flex-column card
   collapses to its first line (question) and overflow:hidden clips every
   option. Chrome resolves the auto height to ~one line here; fit-content
   forces the true content height so the card grows and the body scrolls. */
.ps-pollcard{display:flex;flex-direction:column;gap:7px;background:#141922;overflow:hidden;
  border:1px solid #222831;border-radius:11px;padding:12px 13px;min-height:fit-content}
.ps-pollcard.live{border-color:#2f7d4a;box-shadow:0 0 0 1px #2f7d4a33}
.ps-pollopt{position:relative;overflow:hidden;text-align:left;display:flex;align-items:center;
  gap:8px;background:#171c23;border:1px solid #2a313c;color:#e8eaed;border-radius:9px;
  padding:8px 11px;font-size:13px;cursor:pointer}
.ps-pollopt:hover{border-color:#39424f}
.ps-pollopt.mine{border-color:#5cc4ff}
.ps-pollopt:disabled{cursor:default;opacity:.85}
.ps-pollbar{position:absolute;left:0;top:0;bottom:0;background:#1f6feb33;transition:width .4s ease}
.ps-polltxt{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-pollpct{position:relative;flex:0 0 auto;font-size:11px;color:#aeb6c0}
.ps-pollfoot{display:flex;align-items:center;gap:8px;font-size:11px;color:#7e8792;margin-top:2px}

/* ---- Messages (DM) tile ------------------------------------------------ */
.ps-dm{display:flex;flex-direction:column;overflow:hidden}
.ps-dmhead{display:flex;align-items:center;gap:8px;padding:7px 10px;flex:0 0 auto;
  border-bottom:1px solid #222831}
.ps-dmnote{flex:0 0 auto;font-size:11px;color:#ffcf5c;padding:5px 10px;background:#2a230f}
.ps-dmnew{display:flex;gap:6px;padding:8px 10px;flex:0 0 auto}
.ps-dmnew .ps-in{flex:1 1 auto}
.ps-dmlist{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.ps-dmlist::-webkit-scrollbar{display:none;width:0;height:0}
.ps-dmitem{display:flex;flex-direction:column;gap:1px;padding:7px 12px;cursor:pointer;
  border-bottom:1px solid #1a1f27}
.ps-dmitem:hover{background:#161b22}
.ps-dmitem b{font-size:13px}
.ps-dmitem span{font-size:11px;color:#7e8792;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-dmlog{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;
  padding:8px 10px;scrollbar-width:none;-ms-overflow-style:none}
.ps-dmlog::-webkit-scrollbar{display:none;width:0;height:0}
.ps-dmmsg{align-self:flex-start;max-width:82%;background:#1a212b;border-radius:11px 11px 11px 4px;
  padding:6px 10px;font-size:13px;line-height:1.35;word-wrap:break-word;overflow-wrap:break-word}
.ps-dmmsg.self{align-self:flex-end;background:#1f4a7a;border-radius:11px 11px 4px 11px}
.ps-dmimg{display:block;max-width:100%;max-height:180px;border-radius:8px;margin:2px 0}
.ps-dmmsg a{color:#9ecbff;text-decoration:underline;word-break:break-all}
.ps-dmmsg.self a{color:#cfe5ff}
.ps-dmfriend{margin-left:auto;font-size:10px;font-weight:700;color:#7de8a8}
.ps-dmbar{display:flex;gap:6px;padding:8px 10px;flex:0 0 auto;border-top:1px solid #222831}
.ps-dmbar .ps-in{flex:1 1 auto}

/* ---- App directory ---------------------------------------------------- */
.ps-dir{position:absolute;inset:0;z-index:6;background:rgba(12,15,19,.97);overflow:auto;
  overscroll-behavior:contain}
/* Invisible scrollbars everywhere in the playspace — still scrolls (wheel,
   trackpad, touch), just no ugly bar. */
.ps-dir,.ps-admin,.ps-list{scrollbar-width:none;-ms-overflow-style:none}
.ps-dir::-webkit-scrollbar,.ps-admin::-webkit-scrollbar,.ps-list::-webkit-scrollbar{
  display:none;width:0;height:0}
.ps-dirhead{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:#12161c;border-bottom:1px solid #222831;z-index:2}
.ps-dirtitle{font-weight:700;flex:1 1 auto}
.ps-sort{background:#1a1f27;border:1px solid #2a313c;color:#dfe4ea;border-radius:8px;
  padding:5px 8px;font-size:12px;cursor:pointer}
.ps-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:12px}
.ps-card{background:#141922;border:1px solid #222831;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.ps-card:hover{border-color:#39424f;transform:translateY(-2px)}
.ps-card.active{border-color:#5cc4ff;box-shadow:0 0 0 1px #5cc4ff44}
.ps-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ps-cardbody{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;flex:1 1 auto}
.ps-cardtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ps-cardtop b{font-size:14px}
.ps-typechip{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ps-carddesc{margin:0;font-size:12px;line-height:1.45;color:#aeb6c0;flex:1 1 auto}
.ps-cardrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.ps-cardstat{font-size:11px;color:#7e8792}
.ps-card.active .ps-cardstat{color:#5cff8f}
.ps-mini:disabled{opacity:.45;cursor:default}

/* ---- In-module confirmation overlay (replaces browser confirm()) ------ */
.ps-confirm{position:absolute;inset:0;z-index:8;background:rgba(10,13,17,.72);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.ps-confirmbox{background:#161b22;border:1px solid #2a313c;border-radius:12px;
  padding:16px 18px;max-width:86%;box-shadow:0 12px 34px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:12px}
.ps-confirmmsg{font-size:13.5px;line-height:1.45;color:#e8eaed}
.ps-promptin{width:min(300px,100%);background:#0b0d10;border:1px solid #2a313c;border-radius:9px;
  color:#e8eaed;padding:8px 11px;font-size:13.5px;outline:none;font-family:inherit}
.ps-promptin:focus{border-color:#3b82f6}
.ps-confirmrow{display:flex;gap:8px;justify-content:flex-end}
.ps-confirmrow .ps-mini{padding:6px 14px}
.ps-confirmrow .ps-mini.ps-danger{background:#b0343a;color:#fff}

/* ---- App context menu (right-click inside the playspace) ------------- */
.ps-menu{position:fixed;z-index:100001;background:#12171d;border:1px solid #2a313c;
  border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.55);padding:6px;min-width:200px;
  display:flex;flex-direction:column}
.ps-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;
  color:#e8eaed;padding:8px 11px;border-radius:7px;font-size:13px;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.ps-menu button:hover{background:rgba(255,255,255,.08)}
.ps-menu button:disabled{opacity:.45;cursor:default}
.ps-menu-sep{height:1px;background:#232830;margin:4px 6px}

/* ---- Toggle button "new" pip on the control bar ---------------------- */
#playToggle{position:relative}
#playToggle.has-new::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;
  border-radius:50%;background:#5cff8f;box-shadow:0 0 0 2px #12161c}


/* Trivia tile: correct-answer picker + scoreboard (reuses .ps-poll* styles) */
.ps-trcorrect{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.ps-trlabel{color:#7e8792;font-size:11px}
.ps-trpick{background:#171c23;border:1px solid #2a313c;color:#c7ccd4;border-radius:7px;
  padding:4px 9px;font-size:11px;cursor:pointer;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-trpick.on{border-color:#3fb950;background:#12351f;color:#b7f5c6}
.ps-pollopt.tr-correct{border-color:#3fb950;background:#12351f}
.ps-pollopt.tr-correct .ps-pollbar{background:#3fb95033}
.ps-pollopt.tr-wrong{border-color:#b0343a;background:#2a1416}
.ps-pollopt.tr-wrong .ps-pollbar{background:#b0343a33}
.ps-trboard{display:flex;flex-direction:column;gap:3px}
.ps-trrow{display:flex;align-items:center;gap:8px;background:#141922;border:1px solid #222831;
  border-radius:8px;padding:5px 9px;font-size:13px}
.ps-trrank{flex:0 0 auto;width:18px;text-align:center;color:#7e8792;font-weight:700;font-size:11px}
.ps-trpts{margin-left:auto;font-weight:800;color:#ffcf5c}
.ps-trctl{display:flex;gap:3px;margin-left:8px}
.ps-trbtn{flex:0 0 auto;width:22px;height:22px;line-height:1;padding:0;border-radius:6px;
  border:1px solid #2c3542;background:#1b212b;color:#cdd6e0;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.ps-trbtn:hover{background:#242c38;border-color:#3a4553}
.ps-trbtn.ps-danger{color:#ff8b8b}
.ps-trbtn.ps-danger:hover{background:#3a1f1f;border-color:#5a2c2c}
.ps-trspeedrow{margin-bottom:8px;align-items:center;gap:6px}
.ps-trspeedhint{margin-left:auto;font-size:11px;font-weight:700;color:#ffd36b;white-space:nowrap}
.ps-trmyaward{margin-left:auto;font-size:12px;font-weight:700;color:#7fe0a0}
.ps-trmyaward b{color:#ffd36b;font-weight:800}
.ps-trtarget{font-size:11px;font-weight:700;color:#ffcf5c;background:#2a230f;
  border-radius:7px;padding:4px 8px;align-self:flex-start}

/* Directory card → jump to its tile */
.ps-cardgo{cursor:pointer}
.ps-cardgo:hover{border-color:#5cc4ff}
.ps-cardhidden{opacity:.68}
.ps-cardhidden .ps-cardstat{color:#c9a94a}
.ps-addbtn{background:#12351f;border-color:#3fb950;color:#b7f5c6}
.ps-addbtn:hover{border-color:#5fd97a;color:#daffe6}
.ps-tileflash{animation:pstileflash 1.4s ease}
@keyframes pstileflash{0%,55%{box-shadow:0 0 0 2px #5cc4ff, 0 0 22px #5cc4ff66}100%{box-shadow:none}}

/* AI trivia box in the Trivia tile (host only) */
.ps-traibox{background:#141922;border:1px solid #2a313c;border-radius:11px;padding:10px 11px;
  display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ps-traihead{font-size:13px;font-weight:800;color:#ffcf5c}
.ps-traihint{margin:0 0 4px;font-size:11px;color:#9aa0a6;line-height:1.4}
.ps-traistatus{font-size:11px;color:#7de8a8;min-height:14px}

/* CRITICAL: poll/trivia cards in the tile must NOT shrink under the flex-column
   body — combined with the card's overflow:hidden, shrinking CLIPPED the option
   buttons out of view (the "no options to click" bug). Keep natural height; the
   body scrolls instead. */
/* (superseded — .ps-pollbody is now block; kept as a no-op guard) */

/* ---- Trivia: busy sign, duration picker, live countdown -------------- */
.ps-busy{display:inline-flex;gap:4px;align-items:center;height:16px}
.ps-busy i{width:5px;height:5px;border-radius:50%;background:#5cc4ff;animation:psbusy 1s infinite ease-in-out}
.ps-busy i:nth-child(2){animation-delay:.15s}
.ps-busy i:nth-child(3){animation-delay:.3s}
@keyframes psbusy{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ps-traistatus{min-height:16px;margin-top:6px}
.ps-durlbl{font-size:11px;color:#aeb6c0;white-space:nowrap}
.ps-dur{max-width:96px;flex:0 0 auto;padding:5px 6px}
.ps-dice{padding:5px 9px;font-size:14px}
.ps-timer{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#9bf6ff;
  background:#0e2a33;border:1px solid #1c4b57;border-radius:6px;padding:1px 6px;vertical-align:middle}
.ps-timer-lo{color:#ffd6a5;background:#33240e;border-color:#5a4113;animation:pspulse 1s infinite}
@keyframes pspulse{50%{opacity:.5}}
.ps-qn{display:inline-block;margin-left:6px;font-size:10px;font-weight:800;color:#cfe9ff;
  background:#1f6feb33;border:1px solid #5cc4ff66;border-radius:6px;padding:1px 6px;vertical-align:middle;letter-spacing:.03em}

/* ---- Song Requests tile ------------------------------------------------ */
.ps-srcfg{display:flex;flex-direction:column;gap:7px;padding:2px 0 8px;border-bottom:1px solid #222831;margin-bottom:8px}
.ps-srtoggle{align-self:flex-start}
.ps-srtoggle.on{border-color:#3fb950;background:#12351f;color:#b7f5c6}
.ps-srrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ps-srrow label{font-size:11px;color:#aeb6c0;white-space:nowrap}
.ps-srnum{width:56px;padding:5px 6px;text-align:center}
.ps-srbal{font-size:13px;color:#cfe9ff;margin-bottom:6px}
.ps-srbal b{color:#fff;font-size:15px}
.ps-srnote{margin-top:6px;font-size:12px;color:#9bf6ff;background:#0e2a33;border:1px solid #1c4b57;
  border-radius:8px;padding:6px 9px}
/* Songs tile body is a flex column so the list fills the (resizable) tile height */
.ps-srbody{display:flex;flex-direction:column;overflow:hidden}
.ps-srbody>*{flex:0 0 auto}
.ps-srbody .ps-srlist{flex:1 1 auto;min-height:0;max-height:none}
.ps-srbody .ps-srcfg-page{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.ps-srbody .ps-srcfg-page::-webkit-scrollbar{display:none}
.ps-srlist{display:flex;flex-direction:column;gap:6px;max-height:330px;overflow-y:auto;padding-right:2px}
/* Height-resize handle: a grabbable bar along the tile's bottom edge */
.ps-rsz{position:absolute;left:0;right:0;bottom:0;height:13px;cursor:ns-resize;z-index:5;
  display:flex;align-items:flex-end;justify-content:center;touch-action:none}
.ps-rszbar{width:44px;height:4px;border-radius:999px;background:#2a323d;margin-bottom:3px;
  transition:background .15s,width .15s}
.ps-rsz:hover .ps-rszbar{background:#5cc4ff;width:64px}
/* Scrollable but no visible scrollbar (Captain's ask). */
.ps-noscroll{scrollbar-width:none;-ms-overflow-style:none}
.ps-noscroll::-webkit-scrollbar{width:0;height:0;display:none}
.ps-srrow2{display:flex;align-items:center;gap:8px;background:#141922;border:1px solid #222831;
  border-radius:10px;padding:8px 12px;min-height:96px;position:relative}   /* double-height cards — more art */
/* Requester credit chip, pinned bottom-right: [avatar] name */
.ps-srwhochip{position:absolute;right:8px;bottom:7px;display:inline-flex;align-items:center;gap:6px;
  max-width:55%;background:rgba(9,12,16,.62);border:1px solid rgba(70,80,94,.45);border-radius:999px;
  padding:2px 9px 2px 3px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ps-srwhoname{font-size:12px;font-weight:700;color:#dbe3ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-flex;align-items:center;max-width:100%}
.ps-srwhoname.ps-srwhoplate{padding:1px 7px;border-radius:6px}
.ps-srwhoink{background-clip:inherit;-webkit-background-clip:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-srav{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#1a2029}
.ps-srav-e{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;flex:0 0 auto}
.ps-srav-big{width:30px;height:30px;font-size:19px}
/* Album-art card background (inline gradient+url) */
.ps-srhasart{background-size:cover;background-position:center;border-color:#2b3442}
.ps-srhasart .ps-srsong>b{text-shadow:0 1px 3px rgba(0,0,0,.8)}
.ps-sridx{flex:0 0 auto;width:24px;text-align:center;font-size:15px;font-weight:800;color:#6b7683}
.ps-srwho .ps-srsong>b{color:#cfe9ff}
/* Paged queue header */
.ps-srpager{display:flex;align-items:center;gap:6px;margin:8px 0 2px}
.ps-srtabs{flex:1 1 auto;display:flex;gap:4px;justify-content:center;min-width:0}
.ps-srtab{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid #2a323d;background:#131922;
  color:#9aa4b0;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.ps-srtab:hover{border-color:#3a4553}
.ps-srtab.on{border-color:#3b82f6;background:#12233f;color:#dbeafe}
.ps-srarrow{width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid #2a323d;background:#131922;
  color:#cbd5e1;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
.ps-srarrow:disabled{opacity:.28;cursor:default}
/* Inline input+button rows lay out as a flex strip spanning the container —
   without this the form was display:block and the input sat at its ~200px
   browser default ("paste area cut off"). */
.ps-inline{display:flex;align-items:center;gap:6px;width:100%}
.ps-inline .ps-in{flex:1 1 auto;min-width:0}
.ps-srpaste{margin-bottom:2px}
.ps-srpaste .ps-in{flex:1 1 auto}
.ps-srclip{cursor:pointer}
/* Host controls on their own page — drop the divider it had as a header block. */
.ps-srcfg-page{border-bottom:none;margin-bottom:0;padding-top:8px}
.ps-srtabhost{color:#c9a94a}
.ps-srtabhost.on{border-color:#eab308;background:#2a2410;color:#fde68a}
/* Typography sized for the double-height cards: big title, clear artist,
   readable requester line. Title clamps to 2 lines instead of clipping. */
.ps-srsong{flex:1 1 auto;min-width:0;font-size:14px}
.ps-srsong>b{display:block;color:#fff;font-size:17px;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ps-srsong>.ps-muted{display:block;font-size:13px;color:#b9c2cc;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-srby{font-size:12px;color:#98a2ad;margin-top:5px}
.ps-srhasart .ps-srby{color:#c4cdd6;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.ps-srhasart .ps-srsong>.ps-muted{color:#d5dde5;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.ps-srb{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;border-radius:999px;
  padding:2px 8px;vertical-align:middle;border:1px solid #444c57;color:#aeb6c0}
.ps-srb.ok{color:#7de8a8;border-color:#2f7d4a;background:#12351f}
.ps-srb.pend{color:#ffd6a5;border-color:#5a4113;background:#33240e}
.ps-srctl{display:flex;gap:4px;flex:0 0 auto}
.ps-srctl .ps-mini{padding:4px 9px}
/* Host page token roster */
.ps-srtok{flex:0 0 auto;font-size:12px;font-weight:800;color:#9bf6ff;white-space:nowrap}
.ps-srtok.zero{color:#7e8792;font-weight:600}
.ps-rolebadge{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.03em;border-radius:999px;
  padding:2px 9px;white-space:nowrap}
.ps-rolebadge.mod{color:#ffd479;border:1px solid #7d5e2a;background:#3a2f14}
.ps-rolebadge.owner{color:#8fd0ff;border:1px solid #2a557d;background:#142a3a}
/* Currently playing — top of the queue stack, softly lit */
.ps-srrow2.ps-srnow{border-color:#3fb950;box-shadow:0 0 0 1px rgba(63,185,80,.35), 0 0 14px rgba(63,185,80,.12)}
.ps-srb.play{color:#7de8a8;border-color:#2f7d4a;background:#12351f;animation:srplay 1.8s ease infinite}
@keyframes srplay{0%,100%{opacity:1}50%{opacity:.55}}
/* Queue management (owner): selection + toolbar + drag reorder */
.ps-srsel{flex:0 0 auto;width:15px;height:15px;accent-color:#3b82f6;cursor:pointer}
.ps-srtools{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.ps-srrow2.dragging{opacity:.4}
.ps-srrow2.dropover{outline:2px dashed #5cc4ff;outline-offset:-2px}
.ps-storeitem[data-sid]{cursor:grab}
.ps-storeitem.dragging{opacity:.4}
.ps-storeitem.dropover{outline:2px dashed #5cc4ff;outline-offset:-2px}
.ps-srrow2[data-rowid]{cursor:grab}
.ps-srrow2.ps-srselon{outline:2px solid #3b82f6;outline-offset:-2px}
.ps-srwarn{margin:4px 0 8px;font-size:12px;line-height:1.45;color:#ffd6a5;background:#33240e;
  border:1px solid #5a4113;border-radius:8px;padding:7px 10px}
.ps-srb.fail{color:#ffb4a8;border-color:#8a3a30;background:#331512}
.ps-srb.hold{color:#c9d8ff;border-color:#3a4d7a;background:#131c33}

/* ---- Store app ------------------------------------------------------- */
.ps-strow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#141922;border:1px solid #222831;border-radius:8px;padding:7px 10px;font-size:12px;margin:4px 0}
.ps-strow.ok{border-color:#2f7d4a;background:#12351f;color:#b7f5c6}
.ps-storeadd{display:flex;flex-direction:column;gap:6px}
.ps-filebtn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.ps-storelist{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
.ps-storeitem{display:flex;gap:10px;background:#141922;border:1px solid #222831;border-radius:12px;padding:8px;align-items:stretch}
.ps-storeimg{width:64px;height:64px;flex:0 0 auto;border-radius:9px;background:#1a2029 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:26px}
.ps-storeimg.noimg{color:#3a4553}
.ps-storemeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ps-storetop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ps-storetop>b{color:#fff;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-storeprice{flex:0 0 auto;font-weight:800;color:#7de8a8;font-size:14px}
.ps-storeprice.pwyw{color:#ffd479;font-size:11.5px;white-space:nowrap}
/* Pay-what-you-want buyer row: amount field + Pay button */
.ps-pwyw{display:flex;align-items:center;gap:6px;width:100%;margin-left:auto}
.ps-pwywin{flex:1 1 auto;min-width:0;padding:5px 8px}
/* Kill the ugly native number-spinner arrows on the price field */
.ps-pwywin::-webkit-outer-spin-button,.ps-pwywin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ps-pwywin{-moz-appearance:textfield;appearance:textfield}
.ps-pwyw .ps-buy{margin-left:0;flex:0 0 auto}
.ps-storedesc{font-size:12px;color:#9aa4b0;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ps-storechips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0}
.ps-storefoot{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap}
.ps-notein{flex-basis:100%;width:100%;margin-top:2px;padding:5px 9px;box-sizing:border-box;font-size:12px}
.ps-buy{background:#1f6feb;border-color:#1f6feb;color:#fff;font-weight:800;margin-left:auto;padding:5px 16px}
.ps-buy:disabled{opacity:.4;cursor:default}
.ps-buy.soldout{background:#3a2126;border-color:#7a3a3a;color:#ffb4a8}
.ps-buyrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%;justify-content:flex-end}
.ps-animsel{background:#0e1217;border:1px solid #2a313c;color:#cdd6df;border-radius:8px;padding:4px 6px;
  font-size:11px;max-width:130px}
.ps-pwyw .ps-animsel{flex:0 0 auto}
.ps-paypal{background:#ffc439;border-color:#ffc439;color:#003087;font-weight:800;margin-left:6px;padding:5px 14px}
.ps-paypal:disabled{opacity:.4;cursor:default}
.ps-storeitem.out{opacity:.72}
.ps-storeitem.out .ps-storeimg{filter:grayscale(.6)}
.ps-storeitem.sthidden{opacity:.6;border-style:dashed}
/* Items-tab quick list: name + price + one-tap show/hide + edit/delete */
.ps-stqlist{display:flex;flex-direction:column;gap:4px;margin:2px 0 6px}
.ps-stqrow{display:flex;align-items:center;gap:8px;background:#141922;border:1px solid #222831;
  border-radius:9px;padding:4px 6px 4px 4px}
.ps-stqrow.hid{opacity:.62;border-style:dashed}
.ps-stqrow.editing{border-color:#5cc4ff;box-shadow:0 0 0 1px rgba(92,196,255,.4) inset}
.ps-stqvis{flex:0 0 auto;background:transparent;border:0;cursor:pointer;font-size:15px;
  width:28px;height:26px;border-radius:7px;line-height:1;opacity:.5}
.ps-stqvis.on{opacity:1}
.ps-stqvis:hover{background:rgba(255,255,255,.08)}
.ps-stqname{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600;color:#dbe3ea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.ps-stqtag{font-size:9px;font-weight:800;letter-spacing:.03em;color:#ff9a9a;
  border:1px solid #6b2f2f;background:#3a1a1a;border-radius:999px;padding:1px 6px;flex:0 0 auto}
.ps-stqtag.dig{color:#7de8a8;border-color:#2f7d4a;background:#12351f}
.ps-stqprice{flex:0 0 auto;font-size:12px;font-weight:800;color:#9fe6c0}
.ps-stqprice.pwyw{color:#ffd479;font-size:10px}
.ps-stqbtn{flex:0 0 auto;background:transparent;border:0;cursor:pointer;font-size:12px;
  width:26px;height:24px;border-radius:6px;color:#9fb0c0;opacity:.75}
.ps-stqbtn:hover{background:rgba(255,255,255,.08);opacity:1}
.ps-stqbtn.dgr:hover{background:rgba(255,90,90,.18);color:#ff8a8a}
.ps-storefoot .ps-danger{margin-left:auto}
.ps-emailcfg{display:flex;flex-direction:column;gap:6px;margin:6px 0 2px}
.ps-shiplist{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.ps-shiprow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#141922;border:1px solid #222831;border-radius:8px;padding:5px 10px;font-size:12px}
/* Store front banner (owner-selectable top/bottom) */
.ps-storebanner{width:100%;height:150px;border-radius:12px;background:#1a2029 center/cover no-repeat;
  margin:2px 0 10px;border:1px solid #222831}
.ps-storebanner.sm{height:72px;margin:4px 0 6px}

/* DM composer emoji picker — same emojis as chat (custom + recent + all) */
.ps-dmemoji{flex:0 0 auto;padding:4px 8px}
/* DM GIF picker (friends only) — small GIPHY grid above the composer */
.ps-dmgifpop{display:none;max-height:220px;overflow:auto;background:#0e1217;border:1px solid #2a313c;
  border-radius:10px;padding:6px;margin:6px 0 0;scrollbar-width:none}
.ps-dmgifpop::-webkit-scrollbar{display:none}
.ps-dmgifpop.show{display:block}
.ps-dmgifsearch{margin-bottom:6px}
.ps-dmgifgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ps-dmgifgrid img{width:100%;height:64px;object-fit:cover;border-radius:6px;cursor:pointer}
.ps-dmgifgrid img:hover{outline:2px solid #3b82f6}
.ps-dmgifbtn{font-weight:800;letter-spacing:.03em}
.ps-dmemojipop{display:none;max-height:200px;overflow:auto;background:#0e1217;border:1px solid #2a313c;
  border-radius:10px;padding:6px;margin:6px 0 0;scrollbar-width:none}
.ps-dmemojipop::-webkit-scrollbar{display:none}
.ps-dmemojipop.show{display:block}
.ps-dmemojipop .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.ps-dmemojipop .emoji-grid button{background:transparent;border:0;font-size:18px;cursor:pointer;border-radius:6px;padding:2px}
.ps-dmemojipop .emoji-grid button:hover{background:rgba(255,255,255,.12)}
.ps-dmemojipop .emoji-subhead{font-size:10px;font-weight:800;letter-spacing:.08em;color:#8a94a1;margin:4px 2px}
.ps-dmemojipop img.emoji{width:18px;height:18px;pointer-events:none}
.ps-dmemojipop img.cust-emoji{height:20px;max-width:26px;pointer-events:none}

/* DM reactions: chips under a bubble + the right-click react picker */
.ps-dmrxrow{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
/* DM reaction chips: no pill/border around the emoji — just the emoji + count,
   like the reactions elsewhere. 'me' (yours) gets a soft accent tint only. */
.ps-dmrx{background:transparent;border:0;border-radius:6px;
  font-size:11px;padding:1px 4px;cursor:pointer;color:#cdd6df;line-height:1.5}
/* no background at all, even for your own — your reactions just show the count
   in the accent colour instead of a filled chip */
.ps-dmrx.me{background:transparent;color:#7dc4ff;font-weight:700}
.ps-dmrx img.emoji{width:13px;height:13px;pointer-events:none}
.ps-dmrx img.cust-emoji{height:14px;max-width:18px;pointer-events:none}
.ps-dmreactpop{position:fixed;z-index:100000;width:min(300px,90vw);max-height:230px;overflow:auto;
  background:#0e1217;border:1px solid #2a313c;border-radius:10px;padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.5);scrollbar-width:none}
.ps-dmreactpop::-webkit-scrollbar{display:none}
.ps-dmreactpop .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.ps-dmreactpop .emoji-grid button{background:transparent;border:0;font-size:18px;cursor:pointer;border-radius:6px;padding:2px}
.ps-dmreactpop .emoji-grid button:hover{background:rgba(255,255,255,.12)}
.ps-dmreactpop .emoji-subhead{font-size:10px;font-weight:800;letter-spacing:.08em;color:#8a94a1;margin:4px 2px}
.ps-dmreactpop img.emoji{width:18px;height:18px;pointer-events:none}
.ps-dmreactpop img.cust-emoji{height:20px;max-width:26px;pointer-events:none}
.ps-dmrxq{background:transparent;border:0;font-size:20px;cursor:pointer;border-radius:6px;padding:3px}

/* App directory — APP LIBRARY grid (replaces the scrolling card list) */
.ps-appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;padding:12px}
.ps-app{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;
  border:1px solid transparent;border-radius:12px;padding:10px 4px;cursor:pointer;color:#e8eaed}
.ps-app:hover{background:rgba(255,255,255,.06);border-color:#2a313c}
.ps-app[disabled]{opacity:.4;cursor:default}
.ps-app .ps-appic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:26px;box-shadow:0 4px 12px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.ps-app .ps-appnm{font-size:12px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-app .ps-appsub{font-size:10px;color:#8a94a1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-app-active .ps-appsub,.ps-app-on .ps-appsub{color:#39d353}
.ps-app-active .ps-appic,.ps-app-on .ps-appic{outline:2px solid #39d35388}
.ps-dirhint{padding:0 14px 10px;font-size:11px}

/* Clock tile (settings for the on-video clock) */
.ps-clockset{display:flex;flex-direction:column;gap:6px;padding:10px;overflow:auto;height:100%;
  scrollbar-width:none}
.ps-clockset::-webkit-scrollbar{display:none}
.ps-clockset label{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#8a94a1;text-transform:uppercase;margin-top:2px}
.ps-ckgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.ps-ckrow{display:flex;gap:5px}
.ps-ckrow .ps-mini{flex:1}
.ps-clockset .ps-mini.on{background:#1f6feb;border-color:#5cc4ff;color:#fff}
.ps-ckpower{padding:8px}

/* Clock tile controls follow the drawer theme (they were solid .ps-mini blue —
   an opaque wall in the transparent/clear looks). Only the SELECTED option is blue. */
.ps-clockset .ps-mini{background:#1a1f27;border:1px solid #2a313c;color:#dfe4ea}
.ps-clockset .ps-mini:hover{border-color:#5cc4ff}
.ps-clockset .ps-mini.on{background:#1f6feb;border-color:#5cc4ff;color:#fff}
.ps.ps-bg-trans .ps-clockset .ps-mini:not(.on),
.ps.ps-bg-clear .ps-clockset .ps-mini:not(.on){background:rgba(20,25,32,.45);border-color:rgba(72,84,99,.55)}
.ps.ps-bg-trans .ps-clockset .ps-sort,
.ps.ps-bg-clear .ps-clockset .ps-sort{background:rgba(14,18,23,.55)}
/* directory drag-reorder drop target */
.ps-app-drop{outline:2px dashed #5cc4ff;outline-offset:-2px;border-radius:12px}


/* ALL-EMOJI DMs render as a collective — bigger, and fresh ones light up in
   sequence (emojiLight keyframes live in chat.css, global to the page). */
.ps-dmtx.emoji-collective img.emoji{width:1.8em;height:1.8em;vertical-align:-0.45em}
.ps-dmtx.emoji-collective img.cust-emoji{height:1.8em;max-width:2.3em;vertical-align:-0.45em}
.ps-dmtx.emoji-collective.fresh img.emoji,
.ps-dmtx.emoji-collective.fresh img.cust-emoji{animation:emojiLight 1.1s ease 2 both}

/* Stream Clipboard tile */
.ps-cliplist{display:flex;flex-direction:column;gap:4px;padding:2px 8px;overflow-y:auto;min-height:0;flex:1}
.ps-cliprow{display:flex;gap:5px;align-items:center;min-width:0}
.ps-clipbtn{flex:1;min-width:0;text-align:left;background:#1a212b;border:1px solid #2a3340;color:#dbe4ee;
  border-radius:8px;padding:5px 9px;cursor:pointer;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-clipbtn:hover{background:#233042;border-color:#3b82f6}
.ps-clipdel{flex:0 0 auto}
.ps-clipadd{display:flex;gap:5px;padding:6px 8px 8px;align-items:center}
.ps-clipadd #psClipL{flex:0 0 34%;min-width:0}
.ps-clipadd #psClipT{flex:1;min-width:0}
.ps-dmtx.emoji-collective.many img.emoji{width:1.3em;height:1.3em}
.ps-dmtx.emoji-collective.many img.cust-emoji{height:1.3em}
.ps-clipimg{width:18px;height:18px;border-radius:5px;object-fit:cover;vertical-align:-4px;margin-right:6px}

/* Transparent themes (bg-trans / bg-clear): the neutral GRAY fills — inputs,
   dropdowns, scoreboard rows/buttons, cheatsheet buttons, poll cards/options —
   were solid rectangles blocking the video. Make them translucent with a light
   blur so the stream shows through but text stays legible. Colored controls
   (add/delete buttons, correct/wrong results, role badges) keep their fills. */
.ps-bg-trans .ps-in,.ps-bg-clear .ps-in,
.ps-bg-trans .ps-sort,.ps-bg-clear .ps-sort{
  background:rgba(18,23,30,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps-bg-trans .ps-in:focus,.ps-bg-clear .ps-in:focus{background:rgba(18,23,30,.62)}
.ps-bg-trans .ps-trrow,.ps-bg-clear .ps-trrow,
.ps-bg-trans .ps-clipbtn,.ps-bg-clear .ps-clipbtn,
.ps-bg-trans .ps-pollcard,.ps-bg-clear .ps-pollcard{
  background:rgba(18,23,30,.4);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ps-bg-trans .ps-clipbtn:hover,.ps-bg-clear .ps-clipbtn:hover{background:rgba(35,48,66,.72)}
.ps-bg-trans .ps-trbtn,.ps-bg-clear .ps-trbtn{background:rgba(27,33,43,.4)}
.ps-bg-trans .ps-trbtn:hover,.ps-bg-clear .ps-trbtn:hover{background:rgba(36,44,56,.75)}
/* DM message bubbles — received and self — go translucent so the stream shows
   through instead of solid dark/blue slabs */
.ps-bg-trans .ps-dmmsg,.ps-bg-clear .ps-dmmsg{
  background:rgba(20,26,34,.26);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ps-bg-trans .ps-dmmsg.self,.ps-bg-clear .ps-dmmsg.self{background:rgba(31,74,122,.3)}
.ps-bg-trans .ps-dmrx.me,.ps-bg-clear .ps-dmrx.me{background:transparent}
/* keep the text crisp/legible over the now-transparent bubbles */
.ps-bg-trans .ps-dmmsg,.ps-bg-clear .ps-dmmsg{text-shadow:0 1px 3px rgba(0,0,0,.75)}
/* neutral (not-yet-revealed) poll options only — correct/wrong keep their color */
.ps-bg-trans .ps-pollopt:not(.tr-correct):not(.tr-wrong):not(.pk-mine),
.ps-bg-clear .ps-pollopt:not(.tr-correct):not(.tr-wrong):not(.pk-mine){
  background:rgba(20,26,34,.4);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* Cheatsheet inline row editor */
.ps-cliprow.ps-clipediting{gap:4px}
.ps-cliprow .ps-clipel{flex:0 0 32%;min-width:0}
.ps-cliprow .ps-clipet{flex:1;min-width:0}
.ps-clipedit{flex:0 0 auto}
/* Cheatsheet right-click menu (replaces the per-row edit/delete buttons) */
.ps-clipmenu{position:fixed;z-index:10001;background:#12171d;border:1px solid #2a3340;border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);padding:4px;display:flex;flex-direction:column;min-width:172px}
.ps-clipmi{background:transparent;border:0;color:#dbe4ee;text-align:left;padding:7px 10px;
  border-radius:7px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.ps-clipmi:hover{background:rgba(59,130,246,.22)}
.ps-clipmi.danger{color:#ff9b9b}
.ps-clipmi.danger:hover{background:rgba(176,52,58,.3)}

/* Names in the playspace (User List, song credits, DM heads, trivia/poll rows,
   scoreboards) need the SAME broad-coverage fallback the chat uses — otherwise
   unusual characters in a display name render as empty boxes here even though
   they show correctly in chat. 'NameFallback' is defined in chat.css and covers
   Noto Symbols 1/2 + Caucasian Albanian. */
.ps-uname,.ps-srnm,.ps-dmhead b,.ps-dmmsg,.ps-trname,.ps-pollopt,.ps-clipbtn,
.ps-urow,.ps-trrow,.ps-dmlist-name,.ps-dmrow,.ps-srav-e,.ps-tabbadge{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,'NameFallback',sans-serif}