/* PartyFM Chat – modern IRC-ish layout (ChatGPT-ish gray theme) */

/* ========= Theme variables ========= */
:root{
  /* Light (default) */
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel2: #ffffff;
  --panel3: #f3f4f6;

  --text: #111827;
  --muted: #6b7280;

  --border: #e5e7eb;
  --border2: #d1d5db;

  --accent: #10a37f;      /* subtle ChatGPT-ish green */
  --danger: #ef4444;

  --shadow: 0 10px 30px rgba(0,0,0,.08);

  --msgHover: rgba(0,0,0,.03);
  /* Mention highlight should be a soft gray (not green) */
  --mentionBg: rgba(0,0,0,.05);

  /* Name colors */
  --nameMale: #60a5fa;   /* light blue */
  --nameFemale: #f472b6; /* pink */
  --nameUnknown: var(--text);

  /* Announcements */
  --announceBg: rgba(0,0,0,.03);

  --chipBg: rgba(0,0,0,.04);
  --chipBorder: rgba(0,0,0,.08);

  --avatarBorder: rgba(0,0,0,.10);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f0f10;
    --panel: #141415;
    --panel2: #121213;
    --panel3: #1a1a1b;

    --text: #e5e7eb;
    --muted: #9ca3af;

    --border: #2a2a2b;
    --border2: #3a3a3b;

    --shadow: 0 12px 30px rgba(0,0,0,.35);

    --msgHover: rgba(255,255,255,.04);
    --mentionBg: rgba(255,255,255,.07);

    --announceBg: rgba(255,255,255,.06);

    --chipBg: rgba(255,255,255,.06);
    --chipBorder: rgba(255,255,255,.10);

    --avatarBorder: rgba(255,255,255,.10);

    --announceBg: rgba(255,255,255,.06);
  }
}

/* Optional: later we can allow user-selected themes via body[data-theme="dark|light"] */
body[data-theme="light"]{
  color-scheme: light;
  --bg: #f7f7f8;
--panel: #ffffff;
--panel2: #ffffff;
--panel3: #f3f4f6;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--border2: #d1d5db;
--accent: #10a37f;      /* subtle ChatGPT-ish green */
--danger: #ef4444;
--shadow: 0 10px 30px rgba(0,0,0,.08);
--msgHover: rgba(0,0,0,.03);
--mentionBg: rgba(0,0,0,.05);
--nameMale: #60a5fa;   /* light blue */
--nameFemale: #f472b6; /* pink */
--nameUnknown: var(--text);
--announceBg: rgba(0,0,0,.03);
--chipBg: rgba(0,0,0,.04);
--chipBorder: rgba(0,0,0,.08);
--avatarBorder: rgba(0,0,0,.10);
}
body[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0f0f10;
--panel: #141415;
--panel2: #121213;
--panel3: #1a1a1b;
--text: #e5e7eb;
--muted: #9ca3af;
--border: #2a2a2b;
--border2: #3a3a3b;
--shadow: 0 12px 30px rgba(0,0,0,.35);
--msgHover: rgba(255,255,255,.04);
--mentionBg: rgba(255,255,255,.07);
--announceBg: rgba(255,255,255,.06);
--chipBg: rgba(255,255,255,.06);
--chipBorder: rgba(255,255,255,.10);
--avatarBorder: rgba(255,255,255,.10);
--announceBg: rgba(255,255,255,.06);
}

/* ========= Base ========= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Use padding instead of margins on top-level children so the layout
     always fits the viewport (no clipped bottom). */
  padding: 10px;
}

.hidden{ display:none !important; }

/* ========= Layout ========= */
.app{
  flex: 1;
  height: auto;
  display: flex;
  background: var(--bg);
  padding: 0;
  gap: 10px;
  min-height: 0;
}

/* ========= Docked webcam grid (feature-flagged) ========= */
.camDock{
  --camDockTileW: 156px;
  width: 340px;
  min-width: 220px;
  max-width: 60vw;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display:flex;
  flex-direction: column;
}

.camDockInner{
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #000; /* behind videos */
  min-width: 0;
}

/* Responsive grid of webcam tiles */
.camDockGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--camDockTileW), var(--camDockTileW)));
  gap: 8px;
  padding: 8px;
  align-content: start;
  justify-content: start;
  min-width: 0;
  min-height: 0;
}

.camDockTile{
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  min-height: 0;
}

.camDockTile video{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  background: #000;
}

.camDockTileHeader{
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding: 6px 6px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,0));
  color: #fff;
  font-weight: 950;
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.camDockTileTitle{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.camDockClose{
  pointer-events: auto;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.38);
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.camDockClose:hover{ filter: brightness(1.06); }
.camDockClose:active{ filter: brightness(.98); transform: translateY(1px); }

/* Subtle flash when focusing an already-open tile */
@keyframes camDockFlash{
  0%{ outline: 0 solid rgba(16,163,127,.0); }
  20%{ outline: 4px solid rgba(16,163,127,.55); }
  100%{ outline: 0 solid rgba(16,163,127,.0); }
}
.camDockTile.flash{
  animation: camDockFlash 900ms ease-out;
}

/* Resize handle */
.camDockResize{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  background: transparent;
}
.camDockResize::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 2px;
  height: 58px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
  opacity: .65;
}
@media (prefers-color-scheme: light){
  .camDockResize::after{ background: rgba(0,0,0,.18); }
}

body.pfmColResizing{
  cursor: col-resize;
  user-select: none;
}

/* On mobile, the dock is forced off (webcams open as floating windows). */
@media (max-width: 720px){
  .camDock{ display:none !important; }
}


/* ========= Top header ========= */
.topHeader{
  margin: 0 0 10px 0;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.topHeaderLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.topLogo{
  height: 26px;
  width: auto;
  display:block;
}

/* Live SOUND/BALL activity chip */
.topbarNow{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 26%, var(--chipBg)),
    color-mix(in srgb, var(--accent) 10%, var(--chipBg))
  );
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--chipBorder));
  color: var(--text);
  font-weight: 900;
  max-width: 740px;
  min-width: 0;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);
}

.topbarNowAvatar{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--chipBorder));
  flex: 0 0 auto;
}

.topbarNowBody{
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.0;
  white-space: nowrap;
}

.topbarNowUser{
  font-size: 14px;
  letter-spacing: .4px;
  font-weight: 950;
  text-shadow:
    0 0 8px color-mix(in srgb, var(--accent) 65%, transparent),
    0 2px 8px rgba(0,0,0,.16);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-line text wrapper rendered by JS */
.topbarNowLineText{
  display:inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FX icons for SOUND events */
.topbarNowFX{
  height: 18px;
  width: auto;
  vertical-align: -3px;
  margin-left: 3px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

.topbarNowMsg{
  font-size: 14px;
  font-weight: 950;
  color: var(--text);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 55%, transparent),
    0 2px 10px rgba(0,0,0,.16);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.topbarNowMsg::before{
  content: "— ";
  opacity: .9;
}

.topbarNowAnimate{
  animation:
    topbarPop .22s ease-out both,
    topbarJolt .60s ease-in-out,
    topbarGlow 1.2s ease-out,
    topbarFlash .35s ease-out;
}

@keyframes topbarPop{
  0%{ opacity: 0; transform: translateY(-3px) scale(.96); filter: blur(.2px); }
  60%{ opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes topbarGlow{
  0%{ box-shadow: 0 12px 26px rgba(0,0,0,.12), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  40%{ box-shadow: 0 12px 26px rgba(0,0,0,.12), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
  100%{ box-shadow: 0 12px 26px rgba(0,0,0,.12), 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

@keyframes topbarJolt{
  0%,100%{ transform: translateX(0) scale(1); }
  10%{ transform: translateX(-6px) scale(1.01); }
  20%{ transform: translateX(6px) scale(1.01); }
  30%{ transform: translateX(-4px) scale(1.008); }
  40%{ transform: translateX(4px) scale(1.008); }
  55%{ transform: translateX(-2px) scale(1.004); }
  70%{ transform: translateX(2px) scale(1.004); }
}

@keyframes topbarFlash{
  0%{ filter: brightness(1) saturate(1); }
  35%{ filter: brightness(1.35) saturate(1.35); }
  100%{ filter: brightness(1) saturate(1); }
}



.supportBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(135deg, rgba(236,72,153,.95), rgba(99,102,241,.95));
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  text-decoration:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.supportBtn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.supportBtn:active{ transform: translateY(0px); filter: brightness(.98); }

.topHeaderRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.topMeta{
  display:flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--chipBg);
  border: 1px solid var(--chipBorder);
}

.topMetaLink{
  text-decoration: none;
  color: inherit;
}

.topMetaLink:hover{
  filter: brightness(1.05);
}

.topMetaLabel{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 12px;
}

.ppIcon{
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 6px;
}

.topMetaValue{
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
}

.chatPane{
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

/* Header is hidden by request */
.chatHeader{ display:none !important; }

/* ========= Report problem (Discord) ========= */
.reportProblemBtn{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 9000;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--danger) 65%, var(--border));
  background: color-mix(in srgb, var(--danger) 88%, #0000);
  color: white;
  font-weight: 1000;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  user-select:none;
}
.reportProblemBtn:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.reportProblemBtn:active{ transform: translateY(0); filter: brightness(.98); }
.reportProblemBtn:focus{ outline:none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent), 0 14px 30px rgba(0,0,0,.16); }

@media (max-width: 560px){
  .reportProblemBtn{
    padding: 10px 12px;
    font-size: 13px;
  }
}

.messages{
  flex:1;
  overflow:auto;
  padding: 10px 12px;
}

/* Floating "new messages" button (only shows when you're scrolled up) */
.newMsgsBtn{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px; /* above composer */
  z-index: 6500;
  border: 1px solid var(--border2);
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.newMsgsBtn:hover{ background: var(--panel3); }
.newMsgsBtn:active{ transform: translateX(-50%) translateY(1px); }


/* ========= Messages ========= */
.msg{
  display:flex;
  align-items:center;          /* avatar vertically centered vs text */
  gap: 10px;
  padding: 6px 8px;
  margin: 0 0 4px 0;           /* tighter spacing */
  border-radius: 12px;
}

.msg:hover{ background: var(--msgHover); }


/* Shadow-banned messages (visible for crew/admin) */
.msg.shadowBannedMsg{
  background: rgba(239, 68, 68, .18);
  border: 1px solid rgba(239, 68, 68, .45);
  box-shadow: inset 4px 0 0 rgba(239, 68, 68, .65);
}
.msg.shadowBannedMsg:hover{ background: rgba(239, 68, 68, .24); }
.msg.shadowBannedMsg .sbTag{
  background: rgba(239, 68, 68, .22);
  border-color: rgba(239, 68, 68, .55);
}
.msg.mentionMe{
  background: var(--mentionBg);
  border: 1px solid var(--border);
}

.msg.announce{
  display:block;
  padding: 0;
  margin: 12px 0;
}

.msg.announce .announceCenter{
  max-width: 720px;
  margin: 0 auto;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--announceBg);
  border: 1px solid var(--border);
}

.msg.announce .announceText{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  line-height: 1.35;
}

.msg.announce .announceTime{
  margin-top: 6px;
  font-size: 11px;
  opacity: .65;
}

.msg.announce .soundAnnIcon{ display:inline-block; margin-right: 6px; }

.msg.announce.announceNoTime .announceTime{
  display:none !important;
}



/* ========= Donation announces ========= */
.msg.announce.ann-donation{
  margin: 14px 0;
}

.msg.announce.ann-donation .announceCenter{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.msg.announce.ann-donation .announceText{
  font-weight: 900;
}

.donAnn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}

.donLine{
  line-height: 1.15;
}

.donUser{
  font-weight: 950;
}

.donVerb{
  opacity: .9;
}

.donAmt{
  font-weight: 950;
}

.donAmtNum{
  font-size: 1.12em;
  letter-spacing: .3px;
}

.donAmtKr{
  opacity: .85;
  font-weight: 900;
  margin-left: 2px;
}

.donTier1 .donLineMain{ font-size: 14px; }

.donTier2 .donLineTop,
.donTier2 .donLineBot{
  font-size: 16px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.18));
}
.donTier2 .donLineMain{ font-size: 18px; }

.donTier3 .donLineTop,
.donTier3 .donLineBot{
  font-size: 18px;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.25));
}
.donTier3 .donLineMain{ font-size: 22px; }

.donTier4 .donLineTop,
.donTier4 .donLineBot{
  font-size: 22px;
  letter-spacing: 1.2px;
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.32));
}
.donTier4 .donLineMain{ font-size: 28px; }

.msg.announce.ann-donation.donPop .announceCenter{
  animation: donPop 420ms ease-out;
}
@keyframes donPop{
  0%{ transform: scale(.94); }
  60%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}

.msg.announce.ann-donation.donMega .announceCenter{
  animation: donGlow 1.1s ease-in-out infinite alternate;
}
@keyframes donGlow{
  from{ box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
  to{ box-shadow: 0 0 26px rgba(255,255,255,0.12); }
}

.msg.announce.ann-donation.donUltra .announceCenter{
  animation: donUltra 1.4s ease-in-out infinite;
}
@keyframes donUltra{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

#donationFxCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
}

.avatarCell{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
}

.avatar,
.avatarImg{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow: hidden;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: hsl(var(--h, 210) 60% 44%);
  border: 1px solid var(--avatarBorder);
  user-select:none;
}

.avatarImg{
  display:block;
  object-fit:cover;
  border: 1px solid var(--avatarBorder);
}

.msgBody{
  flex: 1;
  min-width: 0;
}

.ircLine{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width:0;
}

.ircPrefix{
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

/* Crew/staff delete button shown inline in the prefix */
.msgDelBtn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0 6px 0 0;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transform: translateY(1px);
}

.msgDelBtn:hover{ opacity: .9; }
.msgDelBtn:active{ opacity: 1; transform: translateY(1px) scale(.95); }

.ts{ opacity:.95; }
.sep{ opacity:.75; }

.nameTag{
  font-weight: 700;
  color: var(--nameUnknown);
}

.nameTag.name-male{ color: var(--nameMale); }
.nameTag.name-female{ color: var(--nameFemale); }
.nameTag.name-unknown{ color: var(--nameUnknown); }

/* ========= VIP name effects (visible to everyone) ========= */
.nameFx{
  display:inline-block;
  position: relative;
  line-height: 1.1;
}

.nameFx--glow{
  text-shadow: 0 0 6px var(--accent), 0 0 14px var(--accent);
}

.nameFx--rainbow{
  background: linear-gradient(90deg, #ff3b3b, #ff9f0a, #ffd60a, #32d74b, #64d2ff, #0a84ff, #bf5af2, #ff3b3b);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: nameFxRainbow 4.2s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;

}

.nameFx--shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,1) 18%, rgba(255,255,255,.55) 36%, rgba(255,255,255,.55) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 10px rgba(0,0,0,.18);
  animation: nameFxShimmer 2.4s ease-in-out infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;

}

.nameFx--pulse{
  animation: nameFxPulse 1.7s ease-in-out infinite;
}

.nameFx--pulse{
  text-shadow: 0 0 10px rgba(0,0,0,.12);
}

.nameFx--glitch{
  animation: nameFxGlitch 1.25s steps(2, end) infinite;
  text-shadow: 1px 0 rgba(255,0,90,.85), -1px 0 rgba(0,200,255,.85);
}

.nameFx--outline{
  /* Visible outline on dark UI */
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.55),
     1px -1px 0 rgba(255,255,255,.55),
    -1px  1px 0 rgba(255,255,255,.55),
     1px  1px 0 rgba(255,255,255,.55),
     0 0 12px rgba(0,0,0,.28);
}


.nameFx--holo{
  background: linear-gradient(90deg, #64d2ff, #bf5af2, #ff9f0a, #32d74b, #64d2ff);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* Must beat .nameTag.name-male/.nameTag.name-female specificity */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nameFxHolo 3.2s linear infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;

  text-shadow: 0 0 10px rgba(100,210,255,.18);
}

.nameFx--neon{
  text-shadow:
    0 0 5px var(--accent),
    0 0 12px var(--accent),
    0 0 22px rgba(16,163,127,.55);
  animation: nameFxNeon 2.4s steps(8,end) infinite;
}

.nameFx--ice{
  background: linear-gradient(90deg, #e0f2fe, #93c5fd, #67e8f9, #e0f2fe);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* Must beat .nameTag.name-male/.nameTag.name-female specificity */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nameFxIce 3.6s ease-in-out infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;

  text-shadow: 0 0 10px rgba(147,197,253,.22);
}

.nameFx--ember{
  background: linear-gradient(90deg, #ffd60a, #ff9f0a, #ff453a, #ffd60a);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* Must beat .nameTag.name-male/.nameTag.name-female specificity */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nameFxEmber 2.8s ease-in-out infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;

  text-shadow: 0 0 12px rgba(255,159,10,.22);
}


@keyframes nameFxRainbow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

@keyframes nameFxShimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

@keyframes nameFxPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.055); }
}

@keyframes nameFxGlitch{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(0.5px,0); }
  50%{ transform: translate(-0.6px,0); }
  75%{ transform: translate(0.7px,0); }
  100%{ transform: translate(0,0); }
}


@keyframes nameFxHolo{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 260% 50%; }
}

@keyframes nameFxNeon{
  0%, 100%{ opacity: 1; }
  8%{ opacity: .75; }
  12%{ opacity: 1; }
  18%{ opacity: .6; }
  22%{ opacity: 1; }
  55%{ opacity: .85; }
  58%{ opacity: 1; }
  78%{ opacity: .7; }
}

@keyframes nameFxIce{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@keyframes nameFxEmber{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 120% 50%; }
  100%{ background-position: 240% 50%; }
}

/* Respect reduced motion */
.reduceMotion .nameFx--rainbow,
.reduceMotion .nameFx--shimmer,
.reduceMotion .nameFx--pulse,
.reduceMotion .nameFx--glitch,
.reduceMotion .nameFx--aurora,
.reduceMotion .nameFx--holo,
.reduceMotion .nameFx--neon,
.reduceMotion .nameFx--ice,
.reduceMotion .nameFx--ember{
  animation: none !important;
}

.meTag{
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.lockTag{
  margin-left: 6px;
  font-size: 12px;
  opacity: .9;
}

.sbTag{
  display:inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .14);
  border: 1px solid rgba(148, 163, 184, .28);
  color: var(--text);
  font-weight: 800;
  font-size: 11px;
  line-height: 18px;
  opacity: .95;
}


.msgText{
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.msg.action .msgText{
  color: var(--accent);
}

.actionLine .actionStar{
  color: var(--accent);
  font-weight: 900;
}

.mentionTag{
  display:inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--chipBg);
  border: 1px solid var(--chipBorder);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}

/* ========= Composer ========= */
.composer{
  position: relative;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.composerInputWrap{
  position:relative;
  flex:1;
  min-width:0;
}

.msgInput{
  width:100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--panel2);
  color: var(--text);
  outline: none;
}

.msgInput:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}


.quickLinkBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.quickLinkBtn:hover{ background: var(--panel3); }

@media (max-width: 720px){
  .quickLinkBtn{ display:none; } /* keep composer compact on mobile */
}

/* Composer small action pills (Reklamer / Send lyd) */
.composerLeftActions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.pillBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--panel2);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.pillBtn:hover{ background: var(--panel3); }
/* SMS "new" blink indicator (only when button is visible) */
#smsBtn.hasNew{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: smsBtnBlink 1.2s infinite;
}
@keyframes smsBtnBlink{
  0%, 100%{ filter: brightness(1); }
  50%{ filter: brightness(1.25); }
}


/* Crew-only by default; app.js will show it when relevant */
#adsBtn{ display:none; }

@media (max-width: 720px){
  .pillText{ display:none; }
  .pillBtn{ padding: 0 10px; }
  .composerLeftActions{ gap: 6px; }
}

.btn{
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--panel3);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
}

.btn:hover{ filter: brightness(1.03); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.small{
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* icon buttons */
.iconBtn{
  width: 40px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Drawer buttons only on mobile */
.drawerBtn{ display:none; }
@media (max-width: 720px){
  .drawerBtn{ display:flex; }
}

/* ========= Emoji popup ========= */
.emojiPopup{
  position: fixed;
  width: 280px;
  max-height: 240px;
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 10px;
  z-index: 80;
}

.emojiPopup::-webkit-scrollbar{ width:0; height:0; }
.emojiPopup{ scrollbar-width: none; }

/* ========= Quick action popovers (Reklamer / Send lyd) ========= */
.actionPopup{
  position: fixed;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 85;
}

/* app.js uses .infoPopover (legacy name) – keep it aligned with .actionPopup */
.infoPopover{
  position: fixed;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 85;
}

.actionPopupLarge{
  width: 520px;
  max-width: calc(100vw - 24px);
  min-height: 280px;
}

/* Sizes for infoPopover variants */
.infoPopover--ads{
  width: 760px;
  max-width: calc(100vw - 24px);
  /* Fixed, comfortable size so it never slides behind the composer */
  height: min(660px, calc(100vh - 140px));
  max-height: calc(100vh - 140px);
  min-height: 520px;
  overflow: hidden; /* never let preview/content spill outside the popup */
  z-index: 95;      /* above other UI (e.g. composer/settings) */
  transform: translateY(-2px); /* nudge it ~1mm up */
}

.actionPopupSmall{
  width: 320px;
  max-width: calc(100vw - 24px);
  min-height: 160px;
}

.infoPopover--audio{
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 10px; /* match emoji/settings */
  height: auto; /* shrink-wrap content */
}

.infoPopover--sms{
  width: 560px;
  max-width: calc(100vw - 24px);
  /* Comfortable size so it never hides behind the composer */
  height: min(560px, calc(100vh - 160px));
  max-height: calc(100vh - 160px);
  min-height: 320px;
  overflow: hidden;
  z-index: 95;
  transform: translateY(-2px);
}

.actionPopupInner{
  width: 100%;
  height: 100%;
  min-height: inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.infoPopoverInner{
  width: 100%;
  height: 100%;
  min-height: inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Ads popup: override the generic centering layout */
.infoPopover--ads .infoPopoverInner{
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  text-align:left;
  gap: 10px;
}

/* SMS popup: same layout rules as ads, just smaller */
.infoPopover--sms .infoPopoverInner{
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  text-align:left;
  gap: 10px;
}

/* Audio popup: same layout rules as SMS */
.infoPopover--audio .infoPopoverInner{
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  text-align:left;
  gap: 10px;
}

/* ========= "Skriv til Studiet" modal ========= */
.studioModal{
  position: fixed;
  inset: 0;
  z-index: 20000;
}

.studioModal.hidden{ display:none; }

.studioModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.studioModalBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}

.studioModalClose{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.studioModalClose:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}


/* ========= "Rapportér problem" modal ========= */
.reportModal{
  position: fixed;
  inset: 0;
  z-index: 21000;
}

.reportModal.hidden{ display:none; }

.reportModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
}

.reportModalBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}

.reportModalClose{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.reportModalClose:hover{
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.reportModalTitle{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .2px;
  margin: 2px 0 8px 0;
}

.reportModalHint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 12px 0;
}

.reportProblemText{
  width: 100%;
  resize: vertical;
  min-height: 130px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--panel3);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.reportProblemText:focus{
  border-color: color-mix(in srgb, var(--danger) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.reportIncludeRow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 12px 0 10px 0;
  color: var(--muted);
  font-size: 13px;
  user-select:none;
}

.reportActions{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 10px;
}

.reportStatus{
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

.reportStatus.ok{ color: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.reportStatus.err{ color: color-mix(in srgb, var(--danger) 90%, var(--text)); }

.studioModalBody{
  padding-top: 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* ========= Report problem modal ========= */
.reportModal{
  position: fixed;
  inset: 0;
  z-index: 21000;
}

.reportModal.hidden{ display:none; }

.reportModalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
}

.reportModalBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}

.reportModalClose{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.reportModalClose:hover{
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.reportModalBody{ padding-top: 6px; }

.reportModalTitle{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.reportModalHint{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.reportProblemText{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  resize: vertical;
  min-height: 120px;
  font: inherit;
}

.reportProblemText:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.reportIncludeRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 8%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--border));
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select:none;
}

.reportIncludeRow input{ margin-top: 2px; }

.reportActions{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.reportStatus{
  min-height: 20px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

.reportStatus.ok{ color: var(--accent); }
.reportStatus.err{ color: var(--danger); }


.infoPopover--ads .infoPopoverTitle{
  text-align:left;
}

.infoPopover--sms .infoPopoverTitle{
  text-align:left;
}

/* SMS list */
.smsTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}


/* SMS tabs */
.smsTabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.smsTab{
  font-weight: 900;
}

.smsTab--active{
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.smsPanels{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.smsPanel{
  flex: 1;
  min-height: 0;
  display:flex;
  flex-direction:column;
}

/* IMPORTANT: allow JS/HTML to hide inactive SMS tabs.
   The author stylesheet sets display:flex on .smsPanel which would otherwise
   override the browser's default [hidden]{display:none}. */
.smsPanel[hidden]{
  display:none !important;
}

.smsPlaceholder{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 13px;
  opacity: 0.9;
}

.smsStatus{
  font-size: 12px;
  opacity: 0.85;
}

.smsList{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.smsEmpty{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 13px;
  opacity: 0.9;
}

.smsItem{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  margin-bottom: 8px;
}

.smsMeta{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
  font-size: 12px;
  opacity: 0.88;
}

.smsMetaChip{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel3));
}

.smsMsg{
  margin-top: 6px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Audio (Send lyd) popup */
.infoPopover--audio .infoPopoverInner{
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  text-align: left;
  gap: 10px;
}

/* Audio list */
.audioTopRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  padding: 0;
  border-radius: 12px;
  border: 0;
  background: transparent;
}

.audioStatus{
  font-size: 12px;
  opacity: 0.85;
  text-align: right;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel3);
}

/* Don't show the top row at all unless it contains status text */
.audioStatus:empty{ display:none; }

/* Opdater button: keep functionality in JS but hide it in the UI */
.infoPopover--audio .audioRefreshBtn{ display:none !important; }

.audioList{
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: min(340px, calc(100vh - 240px));
}

.audioEmpty{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 13px;
  opacity: 0.9;
}

.audioItem{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

/* Button layout: icon | label ..... price */
.audioSendBtn.btn{
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  text-align:left;
  line-height: 1.1;
}

/* Keep primary sound buttons using the standard .btn.primary white text */

.audioIcon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 6px;
  object-fit: cover;
  opacity: 0.95;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.audioLabel{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 900;
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audioPriceChip{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel3));
  white-space: nowrap;
}

.audioHint{
  font-size: 12px;
  opacity: 0.78;
  padding-left: 34px; /* align under label (icon + gap) */
  line-height: 1.2;
}

.audioFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding-top: 6px;
}

.audioBuyPoints{
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
}

.audioBuyPoints:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Ads tabs + list */
.adsTabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 18%, var(--panel3));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}

.adsMain{
  flex: 1;
  min-height: 0; /* allow internal scrolling */
  display: flex;
  gap: 12px;
}

.adsCommandsScroll{
  flex: 1 1 56%;
  min-height: 0;
  overflow: auto;
  padding: 2px 2px 0 2px;
}

.adsPreviewPane{
  flex: 0 0 44%;
  min-width: 260px;
  min-height: 0;
}

@media (max-width: 740px){
  .infoPopover--ads{
    width: 520px;
  }
  .adsMain{
    flex-direction: column;
  }
  .adsPreviewPane{
    flex: 0 0 auto;
    min-width: 0;
  }
}


.adsTab{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor:pointer;
  line-height: 1.05;
}

.adsTab:hover{
  filter: brightness(1.03);
}

.adsTab.active{
  background: var(--accent);
  color: #0b0f14;
  border-color: var(--accent);
}


.adsCommandsStatus,
.adsEmpty{
  padding: 10px;
  border-radius: 12px;
  background: var(--panel3);
  border: 1px solid var(--border);
}

.adsCmdList{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.adsCmdBtn{
  width: 100%;
  text-align:left;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor:pointer;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
}

.adsCmdBtn:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.adsPreview{
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.adsPreviewHead{
  font-weight: 900;
  margin-bottom: 6px;
}

.adsPreviewBody{
  opacity: .95;
  line-height: 1.35;
  overflow-wrap:anywhere;
  overflow: auto;
  min-height: 0;
  padding-right: 4px;
}

.adsPreviewBody a{
  color: var(--accent);
  font-weight: 900;
  text-decoration: underline;
}

/* Ads announcement burst (sent into chat) */
.msg.announce .adBlast{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}

.msg.announce .adBlast a{
  color: var(--accent);
  text-decoration: underline;
}

.actionPopupTitle{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}

.infoPopoverTitle{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}



.emojiGrid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.emojiCell{
  width: 100%;
  height: 30px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  font-size: 18px;
}

.emojiCell:hover{
  background: var(--panel3);
  border-color: var(--border);
}

/* ========= Mention dropdown ========= */
.mentionBox{
  position:absolute;
  left:0;
  right:0;
  bottom: 46px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow:hidden;
  max-height: 210px;
}

.mentionItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  cursor:pointer;
}

.mentionItem:hover,
.mentionItem.active{
  background: var(--panel3);
}

/* ========= Side panel / drawer ========= */
.sidePane{
  width: 340px;
  height: 100%;
  max-width: 90vw;
  background: var(--panel);
  display:flex;
  flex-direction:column;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
}

.sideTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
}

.sideTopTitle{
  font-weight: 800;
  color: var(--muted);
  letter-spacing:.2px;
}

.panel{
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.panelTitle{
  font-weight: 800;
  margin-bottom: 8px;
}

.camRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  flex-wrap:wrap;
}

.myPreview{
  margin-top: 10px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: #000;
  position: relative;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.myPreview video{
  width:100%;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Hover overlay for hiding local preview */
.previewToggle{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.myPreview:hover .previewToggle{ opacity: 1; }
.previewHiddenHint{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.camDetails summary{
  cursor:pointer;
  color: var(--muted);
  font-weight: 700;
}

.label{ display:block; font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.select{
  width:100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--panel2);
  color: var(--text);
  padding: 0 10px;
}

.toolbarRow{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

/* Users list should fill down to the radio player (no empty gap) */
#usersPanel{
  flex: 1;
  display:flex;
  flex-direction: column;
  min-height: 0;
}
.users{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding: 6px;
}


/* ========= Minimal radio player ========= */
.musicPanel{
  margin-top: 0; /* sits at the bottom as last flex item */
  border-top: 1px solid var(--border);
  border-bottom: none;
  padding: 8px 10px 10px;
}

.musicRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

.musicBtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  position: relative;
}

.musicInfo{
  flex: 1;
  min-width: 0;
  display:flex;
  flex-direction: column;
  line-height: 1.1;
}

.musicTitle{
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicSub{
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicMarquee{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.musicMarquee .marqueeInner{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
}

.musicMarquee .marqueeGap{ opacity: 0.55; }

.musicMarquee.marquee .marqueeInner{
  animation: musicMarquee 16s linear infinite;
}

@keyframes musicMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}


/* Song progress (no time text; subtle countdown bar) */
.musicProgress{
  margin-top: 6px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.09);
  position: relative;
}

.musicProgressFill{
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: var(--accent);
  transition: transform 250ms linear;
}

.musicProgress.ending{
  animation: musicProgressBreathe 0.9s ease-in-out infinite;
}

@keyframes musicProgressBreathe{
  0%{ opacity: .55; }
  50%{ opacity: 1; }
  100%{ opacity: .55; }
}

.musicPanel.playing .musicBtn::after{
  content:"";
  position:absolute;
  right: -2px;
  top: -2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
  animation: musicPulse 1.2s ease-in-out infinite;
}

@keyframes musicPulse{
  0%{ transform: scale(0.9); opacity: 0.6; }
  50%{ transform: scale(1.15); opacity: 1; }
  100%{ transform: scale(0.9); opacity: 0.6; }
}

.musicVol{
  width: 92px;
  accent-color: var(--accent);
}

/* ========= Live host emphasis ========= */
.musicLiveBanner{
  margin: 6px 2px 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
  box-shadow: var(--shadow);
  position: relative;
}

.musicLiveBanner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(120% 120% at 20% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%);
  opacity: .9;
  pointer-events:none;
  animation: liveGlow 2.2s ease-in-out infinite;
}

@keyframes liveGlow{
  0%{ opacity: .55; transform: translateY(0); }
  50%{ opacity: .95; transform: translateY(-1px); }
  100%{ opacity: .55; transform: translateY(0); }
}

.musicLiveImageWrap{
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.02));
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0;
  line-height: 0;
}

.musicLiveImage{
  display:block;
  width: 100%;
  height: auto;
  max-height: 105px;
  margin: 0;
  object-position: center;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
}

.musicLiveMeta{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
}

.musicLivePill{
  flex: 0 0 auto;
  font-weight: 1000;
  letter-spacing: .8px;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0f14;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: livePillPulse 1.1s ease-in-out infinite;
}

@keyframes livePillPulse{
  0%{ transform: scale(.96); opacity: .85; }
  50%{ transform: scale(1.02); opacity: 1; }
  100%{ transform: scale(.96); opacity: .85; }
}

.musicLiveNames{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.musicLiveDj{
  font-weight: 950;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicLiveProgram{
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicPanel.liveHost .musicRow{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}


.userGroup{ margin-bottom: 8px; }
.userGroupTitle{
  margin: 10px 8px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.userGroupList{ display:flex; flex-direction:column; gap: 6px; }

.userRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel2);
  margin-bottom: 8px;
}

.userRow:hover{ background: var(--panel3); }

.userLeft{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}

.userAvatar{ flex: 0 0 auto; }
.userAvatar .avatar,
.userAvatar .avatarImg{ width: 28px; height: 28px; border-radius: 10px; }

.userInfo{ min-width:0; }
.userNameLine{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width:0;
  font-size: 13px;
}

.userNameLine .userSbTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .22);
}

.roleIcon{ width:16px; height:16px; display:inline-block; }

.userRight{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

.watchEye{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  user-select:none;
}

.watchEye.inactive{ opacity: .65; }
.watchEye.active{ color: var(--success); border-color: rgba(0,255,150,.35); background: rgba(0,255,150,.10); opacity: 1; }
.watchEye.clickable{ cursor: pointer; }
.watchEye.disabled{ opacity: .35; cursor: not-allowed; }

@keyframes eyePulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}
.watchEye.active{ animation: eyePulse 1.4s ease-in-out infinite; }

.userRow.blocked{ opacity: .55; }
.userRow.blocked .userName{ text-decoration: line-through; }


/* ========= Drawer behavior on mobile ========= */
.drawerBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 9998;
}

@media (max-width: 720px){
  .sidePane{
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    z-index: 9999;
    width: min(420px, 92vw);
    transition: right .18s ease;
    box-shadow: var(--shadow);
  }
  .sidePane.drawerOpen{ right: 0; }

  /* When drawer is open we still need content to scroll */
  .users{ max-height: none; height: 100%; }
}

/* ========= Floating webcam windows ========= */
.windows{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 9000;
}

.win{
  position:absolute;
  width: 360px;
  height: 240px;
  background: #000;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  pointer-events:auto;
  /* resized via custom handle (fixed aspect ratio) */
}


.win.infoWin{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.win.infoWin .winHeader{
  background: rgba(0,0,0,.04);
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.win.infoWin .xbtn{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
  color: var(--text);
}

.win.infoWin .xbtn:hover{ background: rgba(0,0,0,.06); }

.infoWinBody{
  height: calc(100% - 34px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
}

.infoWinHeading{
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .2px;
  opacity: .95;
}

.winHeader{
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  user-select:none;
}

.winTitle{ font-weight: 800; font-size: 12px; opacity:.95; }
.winActions{ display:flex; gap: 6px; }

.xbtn{
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 10px;
  height: 26px;
  width: 34px;
  cursor:pointer;
}

.win video{
  width:100%;
  height: calc(100% - 34px);
  object-fit: cover;
  display:block;
  background:#000;
}

.winResizeHandle{
  position:absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  pointer-events:auto;
  user-select:none;
  opacity: .75;
  background: linear-gradient(135deg, transparent 0 55%, rgba(255,255,255,.35) 55% 58%, transparent 58% 70%, rgba(255,255,255,.35) 70% 73%, transparent 73%);
  border-radius: 4px;
}

.winResizeHandle:hover{ opacity: .95; }

/* Smooth resizing helpers */
.win.resizing{
  will-change: width, height;
}
body.pfmResizing{
  cursor: se-resize;
  user-select: none;
}



/* ========= Scrollbars (subtle) ========= */
.messages::-webkit-scrollbar,
.users::-webkit-scrollbar{
  width: 10px;
}
.messages::-webkit-scrollbar-thumb,
.users::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 999px;
}
@media (prefers-color-scheme: dark){
  .messages::-webkit-scrollbar-thumb,
  .users::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.12);
  }
}

/* ========= Settings popup ========= */
.settingsBtn{ margin-left: 2px; }

.settingsPopup{
  position: fixed;
  width: 760px;
  max-width: calc(100vw - 24px);
  max-height: min(80vh, 620px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  z-index: 90;
}


/* Technician popup: keep consistent size across tabs */
.techSettingsPopup{
  height: min(80vh, 620px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.techSettingsPopup .techTabs{ flex: 0 0 auto; }
.techSettingsPopup .techTabPanels{
  flex: 1 1 auto;
  overflow: auto;
  padding-bottom: 4px;
}

/* Tekniker indstillinger: Netværk */
.techSettingsPopup .techNetGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 760px){
  .techSettingsPopup .techNetGrid{ grid-template-columns: 1fr; }
}
.techSettingsPopup .techNetCard{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
}
.techSettingsPopup .techNetCardTitle{
  font-size:12px;
  opacity:0.85;
  margin-bottom:6px;
}
.techSettingsPopup .techNetCardValue{
  font-size:22px;
  font-weight:700;
  letter-spacing:0.2px;
  line-height:1.1;
}
.techSettingsPopup .techNetCardSub{
  margin-top:6px;
  font-size:12px;
  opacity:0.7;
}
.techSettingsPopup .techNetServerGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-top:10px;
}
.techSettingsPopup .techNetKv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  font-size:13px;
}
.techSettingsPopup .techNetKv span:first-child{
  opacity:0.75;
}


.settingsHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.settingsHeaderTitle{
  font-weight: 800;
  font-size: 14px;
}

.settingsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 720px){
  .settingsGrid{ grid-template-columns: 1fr; }
}

/* Tekniker settings tabs */
.techTabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 6px 6px 0 6px;
}
.techTab{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
  cursor: pointer;
}
.techTab:hover{
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.techTab.active{
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.techTabPanels{ margin-top: 10px; }
.techTabPanel{ display:none; }
.techTabPanel.active{ display:block; }
.techTabPanel .settingsSection{ margin: 0 0 12px 0; }

.techAuditList{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.techAuditRow{
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 12px;
  padding: 10px;
}

.techAuditTop{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.techAuditLeft{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}

.techAuditRight{
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.techAuditTs{ font-weight: 800; font-size: 12px; }
.techAuditAction{ font-weight: 700; font-size: 12px; opacity: .95; }
.techAuditRoom{ font-size: 11px; opacity: .8; }
.techAuditActor{ font-weight: 700; font-size: 12px; }
.techAuditTarget{ font-size: 11px; opacity: .8; }
.techAuditMeta{
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  opacity: .85;
  white-space: pre-wrap;
  word-break: break-word;
}



.settingsSection{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px;
}

.settingsSectionTitle{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  margin-bottom: 10px;
  opacity: .98;

  /* Accent-tinted header (follows VIP/custom accent) */
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);

  /* Modern browsers: tint using the accent color without overpowering contrast */
  background: color-mix(in srgb, var(--accent) 18%, var(--panel3));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.settingsSectionWide{
  grid-column: 1 / -1;
}

.settingsRow{
  margin: 10px 0;
}



/* Technician panel extras */
.settingsInline{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 8px;
  margin-top: 8px;
}

.settingsTextarea{
  width: 100%;
  margin-top: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  color: var(--text);
  font-size: 13px;
  resize: vertical;
}

/* Maintenance banner (server-controlled) */
.maintenanceBanner{
  position: sticky;
  top: 0;
  z-index: 95;
  background: rgba(234, 179, 8, 0.14);
  border-bottom: 1px solid var(--border);
}
.maintenanceBannerInner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.maintenanceBanner .maintenanceText{
  font-weight: 800;
  font-size: 13px;
}

/* Debug HUD (client-only) */
.debugHud{
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(55vh, 420px);
  overflow: auto;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 10px;
  z-index: 12050;
  backdrop-filter: blur(6px);
}
.debugHudTitle{
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 6px;
  opacity: 0.95;
}
.debugHudBody{
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.settingsLabel{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 13px;
}

.settingsLabel input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.settingsLabel input[type="range"]{
  width: 160px;
}

.settingsSelect{
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--text);
}

.settingsActions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.settingsHint{
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.settingsDivider{height:1px;background: var(--border);margin:12px 0;}
.settingsSelect:disabled{opacity:.55;cursor:not-allowed;}

/* VIP name effect chooser */
.vipFxGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

@media (max-width: 720px){
  .vipFxGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vipFxCard{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}

.vipFxCard:hover{ filter: brightness(1.03); }
.vipFxCard:active{ transform: scale(.985); }
.vipFxCard:disabled{ opacity: .55; cursor: not-allowed; }

.vipFxCard.active{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.vipFxPreview{
  margin-bottom: 6px;
}

.vipFxPreview .nameTag{
  font-size: 14px;
}

.vipFxLabel{ font-weight: 800; font-size: 12px; }
.vipFxHint{ color: var(--muted); font-size: 11px; margin-top: 1px; }
/* VIP custom colors */
.settingsColorGrid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel3);
  margin: 6px 0 8px 0;
}
.settingsColorGrid.disabled{
  opacity: .55;
}
.settingsColorLabel{
  font-size: 13px;
  color: var(--muted);
  align-self: center;
}
.settingsColorInput{
  width: 48px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.settingsColorInput:disabled{
  cursor: not-allowed;
  opacity: .65;
}

/* --- VIP custom colors (palette + hex, no OS popup picker) --- */
/* ========= VIP farver (løsning 3: én delt farvevælger) ========= */
.vipStudio{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  margin: 8px 0 2px 0;
}
@media (max-width: 720px){
  .vipStudio{ grid-template-columns: 1fr; }
}

.vipStudioList{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.vipStudioItem{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  cursor:pointer;
  user-select:none;
}
.vipStudioItem:hover{ filter: brightness(1.03); }
.vipStudioItem:disabled{ opacity:.45; cursor:not-allowed; }

.vipStudioItem.active{
  border-color: rgba(16,163,127,.55);
  box-shadow: 0 0 0 3px rgba(16,163,127,.10);
}

.vipStudioItemLabel{
  font-weight: 900;
  font-size: 12px;
  opacity: .95;
}

.vipStudioChip{
  width: 22px;
  height: 22px;
  border-radius: 9px;
  border: 1px solid var(--border2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.vipStudioPicker{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.vipPickerTop{
  display:grid;
  grid-template-columns: 1fr 28px 140px auto;
  align-items:center;
  gap: 10px;
}

.vipPickerTitle{
  font-weight: 900;
  font-size: 13px;
}

.vipPickerPreview{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.vipPickerHex{
  width: 140px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.vipPickerSwatches{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}

@media (max-width: 720px){
  .vipPickerSwatches{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

.vipPickerSwatch{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  border: 1px solid var(--border2);
  cursor:pointer;
  padding: 0;
}
.vipPickerSwatch.active{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.vipPickerSwatch:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.vipPickerHint{
  font-size: 12px;
  color: var(--muted);
}

.vipStudio .vipColorActions{
  display:flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.vipColorGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 2px 0;
}
@media (max-width: 720px){
  .vipColorGrid{ grid-template-columns: 1fr; }
}

.vipColorField{
  border: 1px solid var(--border);
  background: var(--panel3);
  border-radius: 14px;
  padding: 10px;
}

.vipColorTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.vipColorName{
  font-weight: 800;
  font-size: 12px;
  opacity: .95;
}

.vipColorPreview{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
}

.vipSwatchRow{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.vipSwatch{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  cursor: pointer;
  padding: 0;
}

.vipSwatch.active{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vipSwatch:disabled{
  opacity: .45;
  cursor: not-allowed;
}

.vipHexRow{
  display:flex;
  align-items:center;
  gap: 8px;
}

.vipHexInput{
  flex: 1;
  min-width: 92px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.vipHexInput:disabled{
  opacity: .6;
  cursor: not-allowed;
}

.vipColorActions{
  grid-column: 1 / -1;
  display:flex;
  justify-content: flex-end;
}

/* Hide system messages */
body.hideJoinLeaves .msg.announce.ann-joinleave{ display:none !important; }
body.hideWebcamMsgs .msg.announce.ann-webcam{ display:none !important; }
body.hideSoundMsgs .msg.announce.ann-sound{ display:none !important; }
body.hideSoundMsgs .msg.soundMsg{ display:none !important; }

/* Compact mode */
body.compact .msg{
  padding: 5px 8px;
  margin-bottom: 2px;
}
body.compact .messages{ padding-bottom: 8px; }

/* Reduce motion */
body.reduceMotion *, body.reduceMotion *::before, body.reduceMotion *::after{
  transition: none !important;
  animation: none !important;
}


/* ========= Private Messages ========= */
.pmBar{
  padding: 6px 10px 8px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
  display:flex;
  gap: 8px;
  overflow:auto;
  scrollbar-width: none;
}
.pmBar::-webkit-scrollbar{ display:none; }
.pmBar.hidden{ display:none; }

.pmTab{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor:pointer;
  white-space: nowrap;
}
.pmTab:hover{ background: var(--msgHover); }
.pmTab .pmBadge{
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 900;
  background: var(--border);
  color: var(--text);
}
.pmTab.unread{
  animation: pmBlink 1.1s infinite;
}
@keyframes pmBlink{
  0%, 50% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  51%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }
}

.pmDock{
  position: absolute;
  right: 12px;
  bottom: 68px; /* above composer */
  display:flex;
  gap: 10px;
  align-items:flex-end;
  justify-content:flex-end;
  z-index: 7000;
  pointer-events:none;
}

.pmWin{
  width: 320px;
  max-height: 420px;
  display:flex;
  flex-direction:column;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  pointer-events:auto;
}
.pmWin.minimized .pmBody{ display:none; }
.pmWin.minimized{ width: 260px; }

.pmHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.pmHeaderLeft{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}
.pmHeader .pmTitle{
  font-weight: 900;
  font-size: 13px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmHeaderActions{
  display:flex;
  gap: 6px;
}
.pmHeaderActions .btn{
  padding: 4px 8px;
}

.pmBody{
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.pmMsgs{
  flex:1;
  overflow:auto;
  padding: 8px 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.pmMsg{
  max-width: 90%;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
}
.pmMsg.mine{
  margin-left:auto;
  background: var(--msgHover);
}
.pmComposer{
  display:flex;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
}
.pmComposer input{
  flex:1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--text);
}
.pmComposer input:focus,
.pmComposer textarea:focus,
.pmComposer [contenteditable="true"]:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
}
.userRight .pmBtn{
  margin-left: 6px;
}

/* Mobile: PM windows become a drawer */
@media (max-width: 720px){
  .pmDock{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 78px;
    justify-content:center;
  }
  .pmWin{
    width: 100%;
    max-height: 60vh;
  }
}

.pmTab .avatar, .pmTab .avatarImg{ width: 20px; height: 20px; border-radius: 8px; }
.pmHeader .avatar, .pmHeader .avatarImg{ width: 26px; height: 26px; border-radius: 10px; }


/* ===== Toast (warnings/OK) ===== */
.pfmToast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 112px;
  /* Always on top (over chat, modals, popouts) */
  z-index: 2147483647;
  max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  font-weight: 900;
  font-size: 13px;
  user-select: none;
  text-align: center;
}
.pfmToast.warn{
  border-color: rgba(239,68,68,.85);
  /* Less transparent so it reads clearly */
  background: color-mix(in srgb, #ef4444 22%, var(--panel));
}
.pfmToast.ok{
  border-color: rgba(16,163,127,.85);
  /* Less transparent so it reads clearly */
  background: color-mix(in srgb, #10a37f 22%, var(--panel));
}


/* ===== VIP Themes (applied via body[data-vip-theme]) ===== */
body[data-vip-theme="emerald"]{ --accent: #10b981; }
body[data-vip-theme="purple"]{ --accent: #a855f7; }
body[data-vip-theme="rose"]{ --accent: #f43f5e; }
body[data-vip-theme="amber"]{ --accent: #f59e0b; }
body[data-vip-theme="ice"]{ --accent: #38bdf8; }
body[data-vip-theme="neon"]{ --accent: #22c55e; --mentionBg: rgba(34,197,94,.12); }


/* ===== Crew role switcher ===== */
.roleSwitchWrap{ display:flex; align-items:center; gap:8px; margin: 8px 0 10px; }
.roleSwitchLabel{ font-size:12px; opacity:.85; font-weight:900; }
.roleSwitchSelect{ height:32px; padding:6px 10px; border-radius: 12px; }

/* ===== LIVE tag (crew DJ) ===== */
.liveTag{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:11px; font-weight:900; padding:2px 8px; border-radius:999px; border:1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.10); }
.liveDot{ width:8px; height:8px; border-radius:50%; background: currentColor; animation: livePulse 1.2s infinite; }
@keyframes livePulse{ 0%{ transform: scale(0.8); opacity:.6;} 50%{ transform: scale(1.3); opacity:1;} 100%{ transform: scale(0.8); opacity:.6;} }


/* Camera preview toggle */
.previewToggle{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 800;
  cursor:pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
.myPreview:hover .previewToggle{ opacity: 1; }

.previewHiddenHint{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  letter-spacing: 0.2px;
  background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.70));
  pointer-events:none;
}

.myPreview.collapsed{
  background: var(--panel2);
  border-color: var(--border);
  min-height: 44px;
}
.myPreview.collapsed video{
  display:none;
}

/* Camera settings */
.hintText{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Userlist fills remaining height down to player */
#usersPanel{
  flex: 1;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
#users{
  flex: 1;
  overflow:auto;
  max-height: none;
}

/* Compact users list but keep style */
.users{
  padding: 4px;
}
.userRow{
  padding: 6px 9px;
  border-radius: 14px;
  margin-bottom: 6px;
  gap: 8px;
}


/* ===== Side stats (Online / Tilskuere) ===== */
.sideStats{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px 6px;
  border-bottom:1px solid var(--border);
}

.sideStat{
  flex:1;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
}

.sideStatLabel{
  font-size:12px;
  opacity:0.8;
}

.sideStatValue{
  font-size:13px;
  font-weight:700;
}

.sideStatHover{
  position:relative;
  cursor:default;
}

.viewerTooltip{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:220px;
  max-width:320px;
  padding:10px;
  border-radius:14px;
  background:rgba(20,20,24,0.96);
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
  z-index:9999;
}

.viewerTooltipTitle{
  font-size:12px;
  font-weight:700;
  opacity:0.9;
  margin-bottom:6px;
}

.viewerTooltipItem{
  font-size:13px;
  line-height:1.35;
  padding:4px 0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.viewerTooltipItem + .viewerTooltipItem{
  border-top:1px solid rgba(255,255,255,0.06);
}



/* Gender ring around avatar in the userlist (pink/blue) */
.userAvatar.avatarRing--male .avatar,
.userAvatar.avatarRing--male .avatarImg{
  box-shadow: 0 0 0 2px rgba(59,130,246,.95);
}
.userAvatar.avatarRing--female .avatar,
.userAvatar.avatarRing--female .avatarImg{
  box-shadow: 0 0 0 2px rgba(236,72,153,.95);
}

.userInfo{ min-width:0; }
.userNameLine{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width:0;
  font-size: 13px;
}

.roleIcon{ width:16px; height:16px; display:inline-block; }

.userRight{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
}

/* ========= Extra VIP name effect: Aurora ========= */
.nameFx--aurora{
  background: linear-gradient(90deg, #00ffd5, #7c4dff, #ff4fd8, #00ffd5);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* Must beat .nameTag.name-male/.nameTag.name-female specificity */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: nameFxAurora 2.6s linear infinite;
  text-shadow: 0 0 10px rgba(0,255,213,.25);
}
@keyframes nameFxAurora{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* =========================================================
   Accent fixes (do NOT remove other styles)
   - PM composer focus ring (pmWinComposer uses injected CSS)
   - PM unread blink + unread badge should use accent (not red/white)
   ========================================================= */

/* PM input focus ring (overrides injected pmStyles) */
.pmWinComposer input:focus,
.pmWinComposer input:focus-visible,
.pmWinComposer textarea:focus,
.pmWinComposer textarea:focus-visible,
.pmWinComposer [contenteditable="true"]:focus,
.pmWinComposer [contenteditable="true"]:focus-visible{
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(16,163,127,.28) !important; /* fallback */
}
@supports (background: color-mix(in srgb, white, black)){
  .pmWinComposer input:focus,
  .pmWinComposer input:focus-visible,
  .pmWinComposer textarea:focus,
  .pmWinComposer textarea:focus-visible,
  .pmWinComposer [contenteditable="true"]:focus,
  .pmWinComposer [contenteditable="true"]:focus-visible{
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }
}

/* PM unread badge (both variants) */
.pmTab .pmUnread,
.pmTab .pmBadge{
  background: rgba(16,163,127,.18) !important; /* fallback */
  border: 1px solid rgba(16,163,127,.35) !important;
  color: var(--text) !important;
}
@supports (background: color-mix(in srgb, white, black)){
  .pmTab .pmUnread,
  .pmTab .pmBadge{
    background: color-mix(in srgb, var(--accent) 18%, rgba(127,127,127,.08)) !important;
    border-color: color-mix(in srgb, var(--accent) 40%, rgba(127,127,127,.22)) !important;
  }
}

/* PM blink uses accent (covers both .pmTab.unread and .pmTab.blink) */
@keyframes pmBlinkAccent{
  0%, 50% { box-shadow: 0 0 0 0 rgba(0,0,0,0); outline-color: transparent; }
  51%, 100% { box-shadow: 0 0 0 2px rgba(16,163,127,.35); outline-color: rgba(16,163,127,.35); }
}

.pmTab.unread{
  animation: pmBlinkAccent 1.1s infinite !important;
}
.pmTab.blink{
  animation: pmBlinkAccent 1s step-end infinite !important;
}

/* =========================================================
   Accent fixes (do NOT remove other styles)
   ========================================================= */

/* --- PM composer focus ring (PM windows use .pmWinComposer from injected CSS) --- */
.pmWinComposer input:focus,
.pmWinComposer input:focus-visible,
.pmWinComposer textarea:focus,
.pmWinComposer textarea:focus-visible,
.pmWinComposer [contenteditable="true"]:focus,
.pmWinComposer [contenteditable="true"]:focus-visible{
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(16,163,127,.28) !important; /* fallback */
}
@supports (background: color-mix(in srgb, white, black)){
  .pmWinComposer input:focus,
  .pmWinComposer input:focus-visible,
  .pmWinComposer textarea:focus,
  .pmWinComposer textarea:focus-visible,
  .pmWinComposer [contenteditable="true"]:focus,
  .pmWinComposer [contenteditable="true"]:focus-visible{
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent) !important;
  }
}

/* --- PM unread badge uses accent (covers both .pmUnread (injected) and .pmBadge (legacy)) --- */
.pmTab .pmUnread,
.pmTab .pmBadge{
  background: rgba(16,163,127,.18) !important; /* fallback */
  border: 1px solid rgba(16,163,127,.35) !important;
  color: var(--text) !important;
}
@supports (background: color-mix(in srgb, white, black)){
  .pmTab .pmUnread,
  .pmTab .pmBadge{
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
  }
}

/* --- PM blink ring should use accent (not red/white) --- */
@keyframes pmBlinkAccent{
  0%, 50% { outline: 2px solid rgba(255,255,255,0); }
  51%, 100% { outline: 2px solid rgba(16,163,127,.35); }
}
@supports (background: color-mix(in srgb, white, black)){
  @keyframes pmBlinkAccent{
    0%, 50% { outline: 2px solid rgba(255,255,255,0); }
    51%, 100% { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
  }
}

/* .blink (injected) + .unread (legacy) */
.pmTab.blink{
  animation: pmBlinkAccent 1s step-end infinite !important;
}
.pmTab.unread{
  animation: pmBlinkAccent 1.1s infinite !important;
}



/* Live show announcement (nowplaying -> live) */
.announceLiveShow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

.announceLiveImg{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.announceLiveText{
  display:flex;
  flex-direction: column;
  gap: 2px;
}

.announceLiveTop{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .95;
}

.announceLiveNow{
  filter: drop-shadow(0 0 10px rgba(255,0,0,.35));
}

.announceLiveBrand{
  letter-spacing: .6px;
}

.announceLiveMain{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
}

.announceLiveDj{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announceLiveProg{
  opacity: .95;
}

/* Full-format live announcement (image above text) */
.msg.announce.announceLiveFull .announceLiveShow{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.announceLiveImgFullWrap{
  width: 100%;
}

.announceLiveImgFull{
  width: 100%;
  max-height: 280px;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  display:block;
}

.msg.announce.announceLiveFull .announceLiveText{
  align-items: center;
}



/* Studio modal (Skriv til Studiet) */
.studioModalTitle{
  margin-top: 2px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .2px;
}

.studioModalMeta{
  margin-bottom: 12px;
  font-size: 13px;
  opacity: 0.95;
}

.studioModalRow{
  display: flex;
  gap: 8px;
  margin: 4px 0;
  flex-wrap: wrap;
}

.studioModalLabel{
  min-width: 78px;
  opacity: 0.8;
}

.studioModalText{
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 110px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  outline: none;
}

.studioModalText:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.studioModalControls{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.studioModalCounter{
  margin-right: auto;
  font-size: 12px;
  opacity: 0.85;
}

.studioModalBuyPoints{
  font-size: 12px;
  opacity: 0.9;
  text-decoration: underline;
}

.studioModalStatus{
  margin-top: 10px;
  min-height: 18px;
  font-size: 13px;
  opacity: 0.92;
}


.watchEye.camBlocked{ color: rgba(255,80,80,.95); border-color: rgba(255,80,80,.45); background: rgba(255,80,80,.10); opacity: 1; }


/* ===== First-time setup modal (onboarding) ===== */
.firstSetupModal{
  position: fixed;
  inset: 0;
  z-index: 20850; /* below reportModal (21000) so "Rapportér problem" can appear above */
}
.firstSetupModal.hidden{ display:none; }

.firstSetupBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(2px);
}

.firstSetupBox{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  max-width: calc(100vw - 24px);
  max-height: min(85vh, 720px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
}

.firstSetupClose{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel3);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.firstSetupClose:hover{ filter: brightness(1.06); }

.firstSetupTitle{
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 6px;
}

.firstSetupHint{
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}

.firstSetupActionsTop{
  display:flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.firstSetupWarn{
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.firstSetupFooter{
  display:flex;
  justify-content: flex-end;
  margin-top: 12px;
}



/* One-time tip for the settings button (shown during first-time setup) */
.settingsTip{
  position: fixed;
  z-index: 120;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  max-width: min(320px, calc(100vw - 24px));
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.settingsTipText{
  font-size: 13px;
  line-height: 1.35;
}
.settingsTipClose{
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}
.settingsTip::before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--border);
  right: 14px;
  bottom: -10px;
}
.settingsTip::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--panel);
  right: 15px;
  bottom: -9px;
}
.settingsTip.below::before{
  top: -10px;
  bottom: auto;
  border-top: 0;
  border-bottom: 10px solid var(--border);
}
.settingsTip.below::after{
  top: -9px;
  bottom: auto;
  border-top: 0;
  border-bottom: 9px solid var(--panel);
}