/* DJ Hub-style Chat Room — dark/light mode, responsive layout */
:root{
  --bg-main:#050608;
  --bg-elevated:#15151b;
  --bg-elevated-2:#191922;
  --border:rgba(255,255,255,0.10);
  --border-2:rgba(255,255,255,0.06);
  --text:#f5f5f5;
  --muted:#b0b3c0;

  /* system line color (enter/leave) — visible in dark + light */
  --system-line:#a8adb9;

  --accent:#e53935;
  --accent-soft:rgba(229,57,53,0.14);
  --good:#22c55e;
  --warn:#f59e0b;
  --info:#60a5fa;

  /* ✅ “me” highlight (RED instead of green) */
  --me-border: rgba(229,57,53,0.60);
  --me-border-soft: rgba(229,57,53,0.22);

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow:0 18px 40px rgba(0,0,0,0.6);

  /* Keep existing content colours */
  --chat-bg:#07080c;
  --bubble:#11121c;
  --bubble-me:#101826;
  --bubble-border:rgba(255,255,255,0.06);
  --input:#0b0c12;
  --pill:rgba(255,255,255,0.06);
  --pill-border:rgba(255,255,255,0.10);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --actions-toggle-w: 38px;
  --actions-gap: 10px;

  --tray-pad: 6px;
  --tray-gap: 8px;

  /* Reply / mention UI */
  --reply-bg: rgba(255,255,255,0.035);
  --reply-border: rgba(255,255,255,0.10);
  --reply-fade: 0.78;
  --mention-shadow: 0 18px 40px rgba(0,0,0,0.45);

  /* JS sets --vh to avoid “needs resize” on mobile address-bar / keyboard changes */
  --vh: 1vh;

  /* =========================================================
     Background gradients (UPDATED)
     Goal:
     - Match the DJ Desktop “red tinge / deep” feel on ALL views
     - Ensure it’s visible even when panels fill the screen
     ========================================================= */

  /* Stronger VDR red tint in the top-left, with the original deep DJ Hub base */
  --bg-grad:
    radial-gradient(1200px 820px at 12% 6%, rgba(229,57,53,0.22) 0%, rgba(229,57,53,0.00) 58%),
    radial-gradient(1100px 780px at 30% 0%, rgba(26,28,42,0.88) 0%, rgba(26,28,42,0.00) 62%),
    radial-gradient(900px 700px at 92% 10%, rgba(96,165,250,0.12) 0%, rgba(96,165,250,0.00) 58%),
    linear-gradient(180deg, #0a0b11 0%, #050608 50%, #000000 100%);

  /* Glass panel background that still lets the gradient “read” */
  --panel-bg: rgba(21,21,27,0.92);
  --panel-bg-2: rgba(25,25,34,0.92);

  /* A softer overlay used for panel backgrounds (optional helper) */
  --bg-veil: rgba(255,255,255,0.02);
}

:root[data-theme="light"]{
  --bg-main:#f6f7fb;
  --bg-elevated:#ffffff;
  --bg-elevated-2:#f3f4f6;
  --border:rgba(0,0,0,0.10);
  --border-2:rgba(0,0,0,0.06);
  --text:#101217;
  --muted:#4b5563;
  --shadow:0 18px 40px rgba(0,0,0,0.12);
  --chat-bg:#ffffff;
  --bubble:#f3f4f6;
  --bubble-me:#eaf2ff;
  --bubble-border:rgba(0,0,0,0.06);
  --input:#ffffff;
  --pill:rgba(0,0,0,0.04);
  --pill-border:rgba(0,0,0,0.10);

  --system-line:#6b7280;

  --reply-bg: rgba(0,0,0,0.035);
  --reply-border: rgba(0,0,0,0.12);
  --mention-shadow: 0 18px 40px rgba(0,0,0,0.14);

  /* ✅ “me” highlight (light) — RED instead of green */
  --me-border: rgba(229,57,53,0.58);
  --me-border-soft: rgba(229,57,53,0.18);

  /* Light theme gradient (keep subtle red tint) */
  --bg-grad:
    radial-gradient(1200px 820px at 12% 6%, rgba(229,57,53,0.14) 0%, rgba(229,57,53,0.00) 60%),
    radial-gradient(1100px 780px at 30% 0%, rgba(219,234,254,0.95) 0%, rgba(219,234,254,0.00) 62%),
    radial-gradient(900px 700px at 92% 10%, rgba(96,165,250,0.10) 0%, rgba(96,165,250,0.00) 58%),
    linear-gradient(180deg, #eef2ff 0%, #f6f7fb 55%, #ffffff 100%);

  --panel-bg: rgba(255,255,255,0.92);
  --panel-bg-2: rgba(243,244,246,0.92);

  --bg-veil: rgba(0,0,0,0.015);
}

*{box-sizing:border-box}
html,body{height:100%; width:100%}
html{overflow-x:hidden; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ✅ Force the same background everywhere */
  background: var(--bg-grad);

  /* iOS Safari often ignores fixed; keep it harmless */
  background-attachment: fixed;

  color:var(--text);
  overflow:hidden;
  overflow-x:hidden;
  font-size:18px;
}
/* keep selector for compatibility, but we now use --bg-grad */
:root[data-theme="light"] body{
  background: var(--bg-grad);
  background-attachment: fixed;
}

/* ✅ ALSO paint the app root (some embeds / iframes don’t show body background reliably) */
#app{
  min-height:100%;
  background: var(--bg-grad);
}
:root[data-theme="light"] #app{
  background: var(--bg-grad);
}

/* app shell */
.app-shell{
  height: calc(var(--vh, 1vh) * 100);
  width:100%;
  max-width:100%;
  display:flex;
  flex-direction:column;
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(10px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(10px + env(safe-area-inset-left));
  gap:10px;

  /* keep gradient visible around panels */
  background: transparent;

  /* ✅ Needed so our “welcome-lock dim overlay” can be safely layered */
  position: relative;
}
@supports (height: 100dvh){
  .app-shell{ height: 100dvh; }
}

/* header / banner (keep sizes as-is) */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:var(--radius-lg);

  /* Slightly more glassy but still your original look */
  background:
    linear-gradient(135deg,
      rgba(21,21,31,0.92) 0%,
      rgba(16,16,23,0.92) 40%,
      rgba(25,24,40,0.92) 100%
    );
  border:1px solid var(--border-2);
  box-shadow:var(--shadow);
  font-size:16px;
}
:root[data-theme="light"] .header{
  background:linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(243,244,246,0.92) 100%);
}

.header-left{display:flex; align-items:center; gap:12px; min-width:0}
.logo{
  height:40px; width:40px; flex:0 0 auto;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-elevated);
  object-fit:cover;
}
.title-wrap{min-width:0; display:flex; flex-direction:column; gap:2px}
.title{
  margin:0;
  font-size:18px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{margin:0; font-size:11px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase}

.header-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* Keep JS count elements in DOM but never show them in the banner ONLY */
.header #activeCount,
.header #activeCountMini{
  display:none !important;
}

/* Users button: hidden on desktop header, shown on mobile (and in mobile menu drawer too) */
#usersBtn{ display:none; }
@media (max-width: 520px){
  #usersBtn{ display:inline-flex; }
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:var(--pill);
  border:1px solid var(--pill-border);
  color:var(--muted);
  font-size:12px;
}
.pill strong{color:var(--text); font-weight:700}

.btn{
  border:none;
  background:var(--accent);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(229,57,53,0.25);
  font-size:16px;
}
.header .btn{font-size:16px}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.secondary{
  background:transparent;
  border:1px solid var(--pill-border);
  color:var(--text);
  box-shadow:none;
}
.btn.secondary:hover{background:var(--pill)}

/* -------------------------------------------------------
   ICON BUTTONS
-------------------------------------------------------- */
.icon-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill);
  color:var(--text);
  cursor:pointer;
  font-size:16px;
  padding:0;
}
.icon-btn:hover{filter:brightness(1.05)}
.icon-btn:active{transform:translateY(1px)}

.icon-btn .btn-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-btn .btn-ic svg{display:block}
.icon-btn .btn-txt{
  display:none; /* default: compact icon-only */
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* Header buttons: modern pill style (icon + label) */
.header-right .icon-btn{
  width:auto;
  height:auto;
  min-height:40px;
  padding:9px 14px;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pill) 92%, #fff 8%), var(--pill));
  box-shadow:0 10px 24px rgba(0,0,0,0.18);
}
:root[data-theme="light"] .header-right .icon-btn{
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.header-right .icon-btn .btn-txt{
  display:inline; /* show labels in banner */
}

/* Avatar profile button (meBtn) */
.avatar-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.avatar-btn .avatar,
#meAvatar{
  width:28px;
  height:28px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:var(--bg-elevated-2);
  flex:0 0 auto;
}
.avatar-btn .click-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(229,57,53,.12);
  margin-left:-6px;
  flex:0 0 auto;
}
.avatar-btn .chev{
  opacity:.75;
  font-size:12px;
  transform: translateY(-1px);
}

/* keep tiny close buttons compact even if they are inside header-like containers */
.icon-btn.close,
.modal .close{
  width:36px;
  height:36px;
  padding:0;
  box-shadow:none;
}

/* ✅ Desktop: remove pill style for Theme/Admin/Profile buttons only */
@media (min-width: 521px){
  .header-right #themeBtn,
  .header-right #adminBtn,
  .header-right #meBtn{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    min-height:auto !important;
  }
  .header-right #themeBtn .btn-txt,
  .header-right #adminBtn .btn-txt{
    margin-left:8px;
  }
}

/* focus */
.icon-btn:focus-visible, .btn:focus-visible, .tool:focus-visible, .textarea:focus-visible, .input:focus-visible{
  outline:2px solid rgba(96,165,250,0.65);
  outline-offset:2px;
}

/* Mobile 1-line bar */
#mobileBar{display:none}
.mobile-bar{
  min-height:44px;
  padding:8px 10px;
  gap:10px;
  font-size:16px;
}
.mobile-bar .icon-btn{width:34px; height:34px; padding:0}
.mobile-bar .pill{padding:6px 10px; font-size:11px}
.mobile-bar .icon-btn .btn-txt{display:none} /* keep burger icon-only in bar */

/* main grid */
.main{
  flex:1;
  width:100%;
  max-width:100%;
  display:grid;
  grid-template-columns: 3fr 1fr;
  gap:10px;
  min-height:0;
  min-width:0;
}

/* =======================================================================
   DJ DESKTOP (embed=1&host=djdesktop)
   FIXES:
   1) Divider drawn on USERS panel edge (not main::after), so it never cuts avatars
   2) Slight seam gutter so content doesn’t sit under divider
   ======================================================================= */

/* Always keep split view for DJ Desktop */
#app[data-embed="1"][data-host="djdesktop"] .main{
  gap:0 !important;
  position:relative;
  grid-template-columns: 3fr 1fr !important;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel{
  display:flex !important; /* override global responsive hide */
}

/* panel seam rounding for DJ Desktop */
#app[data-embed="1"][data-host="djdesktop"] .chat-feed{
  border-top-right-radius:0;
  border-bottom-right-radius:0;

  /* ✅ nudge chat content a touch left from seam */
  margin-right:2px;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:none;

  /* ✅ nudge users content a touch right from seam */
  margin-left:2px;

  position:relative;
}

/* ✅ IMPORTANT: disable the old main::after divider in DJ Desktop */
#app[data-embed="1"][data-host="djdesktop"] .main::after{
  content:none !important;
  display:none !important;
}

/* ✅ New divider: anchored to the left edge of users panel (always in the seam) */
#app[data-embed="1"][data-host="djdesktop"] .users-panel::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:-2px;               /* sits exactly between panels considering the margins above */
  width:1px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--border) 80%, #fff 20%) 18%,
    color-mix(in srgb, var(--border) 92%, #fff 8%) 50%,
    color-mix(in srgb, var(--border) 80%, #fff 20%) 82%,
    transparent 100%
  );
  pointer-events:none;
  opacity:1;
  z-index:60;
}

/* ======================================================================= */

.panel{
  /* ✅ Let the global background show through a touch (so desktop/mobile “feel” matches DJ Desktop) */
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  min-height:0;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* Slight variety for the chat panel so it reads “deeper” */
.chat-feed.panel{
  background:var(--panel-bg-2);
}

/* =========================================================
   NORMAL DESKTOP + MOBILE:
   Remove chat-feed panel card background
   (bubbles float over background like DJ Desktop)
   ========================================================= */

.chat-feed.panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* DJ Desktop keeps panel glass */
#app[data-embed="1"][data-host="djdesktop"] .chat-feed.panel{
  background: var(--panel-bg-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.panel-head{
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.panel-head h2{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* REMOVE tip under message box (chat panel head right text) */
.chat-feed .panel-head .small{display:none !important}

.panel-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px;
  -webkit-overflow-scrolling: touch;
}

/* ✅ Don’t paint over the panel’s new glass background */
.chat-feed{background:transparent}
.users-panel .panel-body{padding:8px}

/* -------------------------------------------------------
   USERS PANEL HEAD LAYOUT (desktop)
-------------------------------------------------------- */
.users-panel .panel-head{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.users-panel .panel-head h2{
  width:100%;
  text-align:center;
}

/* ✅ If #activeCount exists in the users panel header/title area, show it as (N).
   NOTE: This cannot work unless index.php places #activeCount somewhere inside .users-panel */
.users-panel #activeCount{
  display:inline-block;
  font-family:var(--mono);
  font-weight:900;
  letter-spacing:0;
  color:var(--muted);
  opacity:.95;
}
.users-panel #activeCount::before{content:"("}
.users-panel #activeCount::after{content:")"}

/* Center the right header info */
.users-panel .panel-head .small.users-head-right{
  display:flex !important;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}
.users-panel .users-head-right > span:first-child{
  display:none !important; /* remove "Click a user for options" */
}

/* Users header right area (default) */
.users-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Presence legend + count pills */
.presence-legend{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.presence-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill);
  font-size:15px;
  color:var(--muted);
  letter-spacing:.04em;
}
.presence-pill strong{
  color:var(--text);
  font-weight:900;
  font-family:var(--mono);
  letter-spacing:0;
}
.presence-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--muted);
  display:inline-block;
  opacity:.85;
}
.presence-pill.active{
  border-color:rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.10);
  color:var(--text);
}
.presence-pill.active::before{background:var(--good)}
.presence-pill.inactive{
  border-color:rgba(245,158,11,0.35);
  background:rgba(245,158,11,0.10);
  color:var(--text);
}
.presence-pill.inactive::before{background:var(--warn)}

/* Hide role badges next to usernames on smaller desktop widths */
@media (max-width: 1180px){
  .users-panel .user-row .u-badge,
  .users-panel .user-row .badge{
    display:none !important;
  }
}

/* ✅ DJ DESKTOP ONLY: smaller user list font so more users fit */
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row .u-name{
  font-size:16px;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row .u-sub{
  font-size:14px;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row{
  padding:7px 8px;
}

/* =========================================================
   ✅ DJ DESKTOP ONLY: MINIMISE VERTICAL GAPS BETWEEN USERS
   - Keep avatars at normal size (no shrinking)
   - Make the list feel “tight” without breaking click targets
   ========================================================= */
#app[data-embed="1"][data-host="djdesktop"] .users-panel .panel-body{
  padding:4px !important;               /* tighter edge padding */
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row{
  padding:3px 6px !important;           /* almost minimum spacing */
  gap:6px !important;                   /* reduce inner gap */
  border-radius:12px !important;
  margin:0 !important;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row .u-meta{
  gap:1px !important;                   /* reduce name/subtitle vertical gap */
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row .u-name{
  line-height:1.12 !important;
}
#app[data-embed="1"][data-host="djdesktop"] .users-panel .user-row .u-sub{
  line-height:1.10 !important;
}

/* ------------------------------------------------------- */

.chat-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px;
}

/* plain system lines (enter/leave) */
.chat-system{
  display:flex;
  justify-content:center;
  padding:2px 6px;
}
.chat-system-text{
  max-width:min(860px, 94%);
  font-size:16px;
  line-height:1.35;
  font-style:italic;
  color:var(--system-line);
  text-align:center;
  opacity:.95;
  user-select:none;
}
.chat-system-text .mono{font-family:var(--mono)}
.chat-system-text a{color:inherit; text-decoration:underline; text-underline-offset:2px}

.chat-msg{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.chat-msg.me{flex-direction:row-reverse}

/* chat message avatars (bigger desktop + mobile) */
.avatar{
  width:52px; height:52px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--bg-elevated-2);
  object-fit:cover;
  flex:0 0 auto;
}

.bubble{
  max-width:min(760px, 82%);
  background:var(--bubble);
  border:1px solid var(--bubble-border);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
}
.chat-msg.me .bubble{background:var(--bubble-me)}

/* ✅ My messages: subtle red border (LOCAL ONLY, because it depends on .me) */
.chat-msg.me .bubble{
  border-color: var(--me-border);
  /* keep original shadow, add a soft red inset ring */
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    0 0 0 1px var(--me-border-soft) inset;
}

.meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-bottom:4px;
}
.name{
  font-weight:800;
  font-size:16px;
}
.badge{
  font-size:14px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.badge.admin{border-color:rgba(229,57,53,0.5); color:#fff; background:rgba(229,57,53,0.18)}
.badge.mod{border-color:rgba(96,165,250,0.5); color:#fff; background:rgba(96,165,250,0.16)}
.badge.user{border-color:rgba(34,197,94,0.5); color:#fff; background:rgba(34,197,94,0.14)}
.badge.guest{border-color:rgba(245,158,11,0.5); color:#fff; background:rgba(245,158,11,0.14)}
.time{
  margin-left:auto;
  font-family:var(--mono);
  font-size:15px;
  color:var(--muted);
}
.text{
  font-size:18px;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:break-word;
}

/* -------------------------------------------------------
   Reply UI (bubble + composer)
-------------------------------------------------------- */
.reply-quote{
  border-left:3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background:var(--reply-bg);
  border:1px solid var(--reply-border);
  border-left-width:3px;
  border-radius:14px;
  padding:8px 10px;
  margin:2px 0 8px 0;
  opacity:var(--reply-fade);

  /* ✅ FIX: keep reply quote constrained inside the bubble */
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.chat-msg.me .reply-quote{
  border-left-color: color-mix(in srgb, var(--info) 55%, transparent);
}

.reply-quote .rq-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:3px;

  /* ✅ FIX: allow flex children to shrink/wrap inside bubble */
  min-width:0;
}
.reply-quote .rq-name{
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--text);
}
.reply-quote .rq-meta{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}
.reply-quote .rq-snippet{
  font-size:15px;
  line-height:1.28;
  color:var(--text);
  opacity:.95;
  white-space:pre-wrap;
  word-break:break-word;

  /* ✅ FIX: bulletproof wrapping for long links / unbroken text */
  max-width:100%;
  overflow-wrap:anywhere;
}
.reply-quote .rq-attach{
  margin-top:6px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  font-family:var(--mono);
  color:var(--muted);
}
.reply-quote .rq-attach .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill);
}

/* ✅ FIX: links inside reply quote must wrap too */
.reply-quote a,
.reply-quote .rq-snippet a{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Composer reply preview block (above textarea) */
.composer .reply-preview{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid var(--reply-border);
  background:var(--reply-bg);
}
.composer .reply-preview.hidden{display:none !important}

.reply-preview .rp-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.reply-preview .rp-title{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.reply-preview .rp-snippet{
  font-size:15px;
  line-height:1.28;
  color:var(--text);
  opacity:.94;
  white-space:pre-wrap;
  word-break:break-word;

  /* ✅ FIX: keep preview text inside the preview block */
  max-width:100%;
  overflow-wrap:anywhere;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.reply-preview .rp-close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--pill-border);
  background:var(--pill);
  color:var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.reply-preview .rp-close:hover{filter:brightness(1.06)}
.reply-preview .rp-close:active{transform:translateY(1px)}

/* Mention autocomplete dropdown */
.mention-menu{
  position:absolute;
  left:0;
  bottom: calc(100% + 10px);
  width: min(520px, 100%);
  max-height: min(320px, 50vh);
  overflow:auto;

  border-radius:16px;
  border:1px solid var(--border);
  background:var(--bg-elevated);
  box-shadow:var(--mention-shadow);
  padding:6px;
  z-index:20;

  display:none;
}
.mention-menu.open{display:block}

.mention-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.mention-item:hover{background:rgba(255,255,255,0.05); border-color:var(--border-2)}
.mention-item:active{transform:translateY(1px)}
.mention-item .mi-avatar{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-elevated-2);
  object-fit:cover;
  flex:0 0 auto;
}
.mention-item .mi-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mention-item .mi-name{
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mention-item .mi-sub{
  font-size:13px;
  color:var(--muted);
  font-family:var(--mono);
}
.mention-item .mi-hint{
  margin-left:auto;
  font-size:13px;
  color:var(--muted);
  font-family:var(--mono);
}

.mention{
  color: color-mix(in srgb, var(--info) 85%, var(--text));
  font-weight:800;
}

/* base attachment (all views) */
.attachment{
  margin-top:8px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border-2);
  background:rgba(0,0,0,0.2);
}
.attachment img{
  display:block;
  max-width:100%;
  height:auto;
}

/* =========================================================
   ✅ DJ DESKTOP ONLY: MEDIA FRAME MUST HUG MEDIA SIZE
   ========================================================= */
#app[data-embed="1"][data-host="djdesktop"] .attachment{
  display:inline-flex !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:100% !important;
  align-self:flex-start !important;
}

#app[data-embed="1"][data-host="djdesktop"] .attachment img{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
}

#app[data-embed="1"][data-host="djdesktop"] .attachment video,
#app[data-embed="1"][data-host="djdesktop"] .bubble .text video{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  border-radius:14px;
}

#app[data-embed="1"][data-host="djdesktop"] .bubble .text img{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
}

#app[data-embed="1"][data-host="djdesktop"] .bubble .text{
  align-items:flex-start;
}

/* ========================================================= */

.system-note{
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:17px;
}

/* composer */
.composer{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid var(--border-2);
  background:linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
}

/* ✅ Put the expandable icons INSIDE the textarea area (both desktop + mobile) */
.composer-row{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
  min-width:0;
}

/* give the textarea room on the right for (icons + ⋯ button) */
.textarea, .input{ font-size:18px; }

.textarea{
  flex:1;
  min-width:0;
  min-height:44px;
  max-height:160px;
  resize:none;
  padding:10px 12px;

  /* reserve room for tray + toggle */
  padding-right: calc(12px + var(--actions-toggle-w) + 88px);

  border-radius:14px;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  outline:none;
}
.textarea:disabled{
  opacity:.72;
  cursor:not-allowed;
}

/* small "⋯" toggle (now inside input area) */
#actionsToggle{
  position:absolute;
  right:10px;
  bottom:10px;

  width:var(--actions-toggle-w);
  height:var(--actions-toggle-w);
  flex:0 0 auto;
  font-size:18px;
  line-height:1;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  z-index:7;
}

/* Expanding actions tray (now inside input area) */
.actions-tray{
  position:absolute;
  right: calc(10px + var(--actions-toggle-w) + 8px);
  bottom:10px;

  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:8px;

  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;

  opacity:0;
  transform:translateY(0) scale(0.98);
  pointer-events:none;

  z-index:7;

  min-width:0;

  filter:none;
  backdrop-filter:none;
  mix-blend-mode:normal;
}
.actions-tray.open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Icon-only buttons inside tray */
.actions-tray .tool{
  width:36px;
  height:36px;

  border:1px solid var(--pill-border);
  background:var(--pill);
  color:var(--text);

  border-radius:999px;
  padding:0;
  cursor:pointer;

  font-size:14px;
  white-space:nowrap;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.actions-tray .tool:hover{filter:brightness(1.05)}
.actions-tray .tool:active{transform:translateY(1px)}

/* Remove “Upload photo” text in tray (desktop + mobile) */
.actions-tray #uploadBtn .btn-txt{ display:none !important; }
.actions-tray #uploadBtn .btn-ic{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
.actions-tray #uploadBtn .btn-ic svg{display:block}

/* Slightly tighten the reserved space on mobile */
@media (max-width: 520px){
  .textarea{
    padding-right: calc(12px + var(--actions-toggle-w) + 78px);
  }
  #actionsToggle{
    right:8px;
    bottom:8px;
  }
  .actions-tray{
    right: calc(8px + var(--actions-toggle-w) + 8px);
    bottom:8px;
    gap:8px;
  }
  .actions-tray .tool{
    width:34px;
    height:34px;
  }
}

/* (legacy) tool/toolbar styles kept for compatibility */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tool{
  border:1px solid var(--pill-border);
  background:var(--pill);
  color:var(--text);
  border-radius:999px;
  padding:7px 12px;
  cursor:pointer;
  font-size:16px;
}
.tool[aria-pressed="true"]{background:rgba(229,57,53,0.18); border-color:rgba(229,57,53,0.55)}
.tool.danger{border-color:rgba(239,68,68,0.45); background:rgba(239,68,68,0.10)}
.color{width:36px; height:36px; padding:0; border-radius:999px}
.send{min-width:90px}

/* users list */
.user-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
}
.user-row:hover{background:rgba(255,255,255,0.04); border-color:var(--border-2)}
.user-row .u-meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.user-row .u-name{font-weight:800; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.user-row .u-sub{font-size:15px; color:var(--muted); font-family:var(--mono)}
.user-row .u-badge{margin-left:auto}

/* ✅ Highlight *my* username in the users list (LOCAL ONLY) */
.user-row.me:not([data-presence="inactive"]) .u-name,
.user-row[data-me="1"]:not([data-presence="inactive"]) .u-name,
.user-row[data-self="1"]:not([data-presence="inactive"]) .u-name{
  color: var(--accent);
}

/* avatar wrap + bigger avatar (users cards only) */
.user-row .avatar-wrap{position:relative; flex:0 0 auto; line-height:0}
.user-row .avatar{
  width:56px;
  height:56px;
  border-radius:18px;
}

/* bigger presence dot */
.user-row .presence-dot{
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:14px;
  height:14px;
  border-radius:999px;
  background:var(--good);
  border:2px solid var(--bg-elevated);
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
  opacity:.95;
}
.user-row[data-presence="inactive"] .presence-dot{background:var(--warn)}

/* inactive styling */
.user-row[data-presence="inactive"]{opacity:.72}
.user-row[data-presence="inactive"] .u-name, .user-row[data-presence="inactive"] .u-sub{color:var(--muted)}
.user-row[data-presence="inactive"] .avatar{filter:grayscale(1); opacity:.88}
.user-row[data-presence="inactive"] .badge{opacity:.82}

/* drawers */
.drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:9990;
}
.drawer.open{display:block}
.drawer .backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.55)}
.drawer .sheet{
  position:absolute;
  right:0; top:0; bottom:0;
  width:min(420px, 92vw);

  /* ✅ Match panels */
  background:var(--panel-bg);

  border-left:1px solid var(--border);
  padding:12px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.sheet h3{margin:0; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.sheet .sheet-body{flex:1; min-height:0; overflow:auto}

#menuDrawer .sheet{border-left:none; border-radius:16px}
@keyframes menuDrop{
  from{transform:translateY(-8px); opacity:0.0}
  to{transform:translateY(0); opacity:1}
}
#menuDrawer.open .sheet{animation:menuDrop .16s ease-out}

/* ✅ Mobile menu drawer: hide the “Actions & info” line */
#menuDrawer .sheet-body > .small{
  display:none !important;
}

/* ===========================
   GIF DRAWER (global)
=========================== */
#gifDrawer .sheet{
  width:min(520px, 94vw);
}
#gifDrawer .sheet-body{
  overflow:auto;
}

/* Grid of GIF results */
.gif-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.gif-item{
  border:1px solid var(--border-2);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,0.02);
}
.gif-item img{
  display:block;
  width:100%;
  height:auto;
}

/* Preview inside drawer (if used) */
.gif-preview{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border-2);
}
.gif-preview img{
  display:block;
  width:100%;
  height:auto;
}

/* ✅ DJ DESKTOP ONLY: make GIF drawer panel + previews smaller to fit embed window */
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .sheet{
  width:min(340px, 86vw) !important;
  padding:10px !important;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer h3{
  font-size:14px !important;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .sheet-body{
  max-height: calc((var(--vh, 1vh) * 100) - 110px);
  padding-right:2px;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .gif-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .gif-item{
  border-radius:12px;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .gif-item img{
  max-height:120px;
  object-fit:cover;
}
#app[data-embed="1"][data-host="djdesktop"] #gifDrawer .gif-preview img{
  max-height:170px;
  object-fit:contain;
}

/* modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9995;
  padding:16px;
}
.modal.open{display:flex}
.modal .backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.65)}
.modal .card{
  position:relative;
  width:min(760px, 98vw);
  border-radius:18px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:14px;
}
.modal .card .row{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.modal h3{margin:0; font-size:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.modal .close{width:36px; height:36px}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:12px;
}
.label{font-size:16px; color:var(--muted)}
.input{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  outline:none;
}
.help{font-size:16px; color:var(--muted)}
.row-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px}
.notice{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(245,158,11,0.35);
  background:rgba(245,158,11,0.12);
  color:var(--text);
  font-size:17px;
  margin-top:10px;
}
.error{border-color:rgba(239,68,68,0.45); background:rgba(239,68,68,0.12)}

/* config modal helpers */
.config-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.panel-lite{
  border:1px solid var(--border-2);
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:12px;
}
.mini-title{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--border-2);
  background:rgba(255,255,255,0.03);
}

/* context menu */
.ctx{
  position:fixed;
  z-index:9999;
  min-width:220px;
  padding:6px;
  border-radius:14px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:none;
}
.ctx.open{display:block}
.ctx button{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  color:var(--text);
  font-size:17px;
}
.ctx button:hover{background:rgba(255,255,255,0.05)}
.ctx .danger{color:#ff6b6b}
.ctx .muted{color:var(--muted)}

/* responsive */
@media (max-width: 980px){
  .main{grid-template-columns:1fr}
  .users-panel{display:none}
  .header-right{gap:8px}
}
@media (max-width: 720px){
  .config-grid{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .app-shell{
    padding:
      calc(8px + env(safe-area-inset-top))
      calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      calc(8px + env(safe-area-inset-left));
    gap:8px;
  }

  #desktopHeader{display:none !important}
  #mobileBar{display:flex !important}
  #mobileBar{padding:8px 10px !important; min-height:44px}

  .bubble{max-width:90%}

  .chat-msg .avatar{
    width:60px;
    height:60px;
    border-radius:18px;
  }

  .chat-system-text{font-size:15px}

  /* make reply quote + preview slightly tighter on mobile */
  .reply-quote{
    padding:8px 9px;
    border-radius:14px;
  }
  .reply-quote .rq-snippet{font-size:14px}
  .reply-preview .rp-snippet{font-size:14px}

  /* mention dropdown: full width, anchored nicely */
  .mention-menu{
    width:100%;
    max-height:min(280px, 44vh);
    border-radius:16px;
  }
  .mention-item{padding:10px 10px}
  .mention-item .mi-avatar{width:32px;height:32px;border-radius:12px}

  /* Mobile hamburger menu: stacked modern buttons (icon + label) */
  #menuDrawer #menuControls{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
  }

  #menuDrawer #menuControls .icon-btn,
  #menuDrawer #menuControls .btn,
  #menuDrawer #menuControls .pill{
    width:100% !important;
    height:auto !important;
    min-height:44px !important;

    justify-content:flex-start !important;

    border:none !important;
    background:transparent !important;
    box-shadow:none !important;

    padding:12px 12px !important;
    border-radius:12px !important;
  }

  /* show labels in drawer */
  #menuDrawer #menuControls .icon-btn{
    gap:10px !important;
  }
  #menuDrawer #menuControls .icon-btn .btn-txt{
    display:inline !important;
  }

  /* avatar inside menu controls */
  #menuDrawer #menuControls .avatar-btn .avatar,
  #menuDrawer #menuControls #meAvatar{
    width:30px !important;
    height:30px !important;
    border-radius:12px !important;
  }
  #menuDrawer #menuControls .avatar-btn .click-dot{
    box-shadow:0 0 0 3px rgba(229,57,53,.10) !important;
  }

  /* pills also align nicely */
  #menuDrawer #menuControls .pill{
    justify-content:space-between !important;
  }

  #menuDrawer #menuControls .icon-btn:hover,
  #menuDrawer #menuControls .btn:hover,
  #menuDrawer #menuControls .pill:hover{
    background:rgba(255,255,255,0.05) !important;
  }

  .btn{padding:8px 11px}
  .presence-pill{padding:4px 8px; font-size:14px}

  /* ✅ Mobile: make ALL modals usable */
  .modal{
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
    align-items:flex-start;
    justify-content:center;
  }
  .modal .card{
    width: min(760px, 96vw);
    max-height: calc((var(--vh, 1vh) * 100) - 24px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal .card .row{
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    padding-bottom: 8px;
    margin-bottom: 6px;
    z-index: 2;
  }

  /* ✅ Mobile ONLY: show Users icon on the right side of the top banner */
  #usersBtn{
    display:inline-flex !important;
  }
  #menuDrawer #usersBtn{
    display:inline-flex !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .actions-tray,
  .actions-tray.open{
    animation:none !important;
    transition:none !important;
  }
}

.tool.is-disabled, .icon-btn.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* utility */
.hidden{display:none !important}
.small{font-size:16px;color:var(--muted)}
.mono{font-family:var(--mono)}

/* Welcome modal: reset password box (scoped) */
.reset-box{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--border-2);
  background:rgba(255,255,255,0.02);
  border-radius:16px;
}

/* =========================================================
   Blur chat room behind mandatory Welcome modal
   + Fix “transparent welcome card” after logoff
   + ✅ FIX: allow infoModal to sit above welcomeModal
   ========================================================= */

/* Hard isolate the welcome modal layer so it never inherits weird blending */
#welcomeModal{
  isolation:isolate;
  opacity:1 !important;
  mix-blend-mode:normal;
}
#welcomeModal .card{
  opacity:1 !important;
  background:var(--bg-elevated) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 22px 60px rgba(0,0,0,0.72) !important;
}
:root[data-theme="light"] #welcomeModal .card{
  box-shadow:0 22px 60px rgba(0,0,0,0.20) !important;
}
#welcomeModal .backdrop{
  background:rgba(0,0,0,0.78) !important;
}

/* ✅ FIX: ensure Info modal can appear above the Welcome modal */
#infoModal{
  isolation:isolate;
  z-index:12000 !important; /* above welcome */
}
#welcomeModal{
  z-index:11000 !important;
}

/* =========================================================
   ✅ NEW: Welcome-lock dim overlay WITHOUT using opacity on siblings
   Reason: on some mobile browsers, fading siblings (opacity < 1) while a modal
   is open can cause the modal card to “look” transparent due to compositing.
   We dim via an overlay layer instead.
   ========================================================= */
body[data-welcome-lock="1"] .app-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.38);
  pointer-events:none;
  /* ✅ CHANGED: keep below normal modals, but still above base app content */
  z-index:9400;
  border-radius: inherit;
}

/* ✅ CHANGED: Blur/lock everything EXCEPT *any modal* (login/profile/etc) + welcome/info */
body[data-welcome-lock="1"] .app-shell > *:not(.modal):not(#welcomeModal):not(#infoModal){
  filter: blur(6px);
  opacity: 1;                 /* ✅ IMPORTANT: do NOT dim via opacity */
  transition: filter 180ms ease;
  pointer-events: none;       /* hard lock background */
  transform: translateZ(0);   /* helps iOS/Safari compositing */
}

/* ✅ Ensure modals remain crisp + clickable even if welcome-lock is accidentally left on */
body[data-welcome-lock="1"] .modal,
body[data-welcome-lock="1"] .modal *{
  filter:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* When unlocked, ensure all children reset cleanly (welcome modal included) */
body:not([data-welcome-lock="1"]) .app-shell > *{
  filter: none;
  opacity: 1;
  transition: filter 180ms ease;
}

/* =========================================================
   ✅ SAFETY NET (modern browsers):
   If welcome-lock is set BUT welcomeModal is NOT open,
   cancel the blur/dim so you don't get “blurred screen/no modal”.
   ========================================================= */
@supports selector(body:has(#welcomeModal.open)){
  body[data-welcome-lock="1"]:not(:has(#welcomeModal.open)) .app-shell::before{
    content:none !important;
  }
  body[data-welcome-lock="1"]:not(:has(#welcomeModal.open)) .app-shell > *{
    filter:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* =========================================================
   ✅ MOBILE SAFETY: Ensure Welcome modal is NEVER transparent
   + ✅ Keep infoModal above welcome on mobile too
   ========================================================= */
@media (max-width: 520px){
  #welcomeModal{
    isolation: isolate;
    opacity: 1 !important;
    transform: translateZ(0);
    will-change: opacity;
  }

  #welcomeModal .card{
    opacity: 1 !important;
    background: var(--bg-elevated) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: 0 26px 70px rgba(0,0,0,0.85) !important;
  }

  :root[data-theme="light"] #welcomeModal .card{
    box-shadow: 0 26px 70px rgba(0,0,0,0.25) !important;
  }

  #welcomeModal .backdrop{
    background: rgba(0,0,0,0.82) !important;
  }

  /* ✅ CHANGED: also exclude .modal on mobile welcome-lock */
  body[data-welcome-lock="1"] .app-shell > *:not(.modal):not(#welcomeModal):not(#infoModal){
    filter: blur(6px);
    opacity: 1;               /* ✅ IMPORTANT: no opacity dim on mobile either */
    pointer-events: none;
    transform: translateZ(0);
  }

  body[data-welcome-lock="1"] #welcomeModal,
  body[data-welcome-lock="1"] #welcomeModal *{
    opacity: 1 !important;
    filter: none !important;
  }

  #infoModal{
    z-index:12000 !important;
  }
  #welcomeModal{
    z-index:11000 !important;
  }
}

/* Bulletproof: exclude welcome/info modals even if wrapped (not a direct child) */
body[data-welcome-lock="1"] #welcomeModal,
body[data-welcome-lock="1"] #infoModal{
  filter:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

body[data-welcome-lock="1"] #welcomeModal .card,
body[data-welcome-lock="1"] #welcomeModal .backdrop,
body[data-welcome-lock="1"] #infoModal .card,
body[data-welcome-lock="1"] #infoModal .backdrop{
  filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   ✅ NEW (ALL YES): Make Welcome modal text/fields brighter
   + Brighter Guest/Login/Register “tabs/pills”
   + Extra contrast in DARK theme only (keeps light theme clean)
   + Match DJ Desktop “glassy / crisp” feel
   ========================================================= */

/* --- Base: keep welcome modal crisp and readable --- */
#welcomeModal{
  filter:none !important;
  opacity:1 !important;
}

/* Titles/labels/text: boost contrast */
:root:not([data-theme="light"]) #welcomeModal h3,
:root:not([data-theme="light"]) #welcomeModal .title,
:root:not([data-theme="light"]) #welcomeModal .label,
:root:not([data-theme="light"]) #welcomeModal label{
  color: var(--text) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

/* Body/help text: less “dull” muted */
:root:not([data-theme="light"]) #welcomeModal,
:root:not([data-theme="light"]) #welcomeModal p,
:root:not([data-theme="light"]) #welcomeModal .help,
:root:not([data-theme="light"]) #welcomeModal .small{
  color: color-mix(in srgb, var(--text) 92%, #fff 8%) !important;
}

/* Inputs in welcome: slightly brighter surface + clearer border */
:root:not([data-theme="light"]) #welcomeModal .input,
:root:not([data-theme="light"]) #welcomeModal input,
:root:not([data-theme="light"]) #welcomeModal select,
:root:not([data-theme="light"]) #welcomeModal textarea{
  background: color-mix(in srgb, var(--input) 86%, #ffffff 14%) !important;
  border-color: color-mix(in srgb, var(--border) 62%, #ffffff 38%) !important;
  color: var(--text) !important;
}

/* Placeholder: more readable */
:root:not([data-theme="light"]) #welcomeModal input::placeholder,
:root:not([data-theme="light"]) #welcomeModal textarea::placeholder{
  color: color-mix(in srgb, var(--muted) 78%, #ffffff 22%) !important;
  opacity: 1 !important;
}

/* Focus glow: match DJ Desktop accent */
:root:not([data-theme="light"]) #welcomeModal .input:focus,
:root:not([data-theme="light"]) #welcomeModal input:focus,
:root:not([data-theme="light"]) #welcomeModal select:focus,
:root:not([data-theme="light"]) #welcomeModal textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.35) !important;
  outline: none !important;
}

/* Welcome card “glassy pop”: slightly brighter top gradient */
:root:not([data-theme="light"]) #welcomeModal .card{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-elevated) 86%, #ffffff 14%) 0%,
      var(--bg-elevated) 55%,
      color-mix(in srgb, var(--bg-elevated) 92%, #000000 8%) 100%
    ) !important;
  border-color: color-mix(in srgb, var(--border) 66%, #ffffff 34%) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,0.82),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Reset-box inside welcome: bring it forward a touch */
:root:not([data-theme="light"]) #welcomeModal .reset-box{
  background: rgba(255,255,255,0.04) !important;
  border-color: color-mix(in srgb, var(--border-2) 70%, #ffffff 30%) !important;
}

/* Buttons inside welcome: a tad crisper */
:root:not([data-theme="light"]) #welcomeModal .btn.secondary,
:root:not([data-theme="light"]) #welcomeModal .icon-btn,
:root:not([data-theme="light"]) #welcomeModal .tool{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pill) 84%, #ffffff 16%),
    var(--pill)
  ) !important;
  border-color: color-mix(in srgb, var(--pill-border) 60%, #ffffff 40%) !important;
}

/* --- Guest/Login/Register “tabs/pills” (covers multiple markup styles) --- */
/* Common patterns: role="tab", .tab, .tabs button, .segmented button, .pill, etc. */
:root:not([data-theme="light"]) #welcomeModal [role="tab"],
:root:not([data-theme="light"]) #welcomeModal .tab,
:root:not([data-theme="light"]) #welcomeModal .tabs button,
:root:not([data-theme="light"]) #welcomeModal .tab-btn,
:root:not([data-theme="light"]) #welcomeModal .segmented button,
:root:not([data-theme="light"]) #welcomeModal .pill{
  color: var(--text) !important;
  opacity: 1 !important;
  border: 1px solid color-mix(in srgb, var(--pill-border) 55%, #ffffff 45%) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pill) 78%, #ffffff 22%),
    var(--pill)
  ) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

/* Active tab states (covers aria-selected/current/active classes) */
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-current="true"],
:root:not([data-theme="light"]) #welcomeModal .tab.active,
:root:not([data-theme="light"]) #welcomeModal .tabs button.active,
:root:not([data-theme="light"]) #welcomeModal .tab-btn.active,
:root:not([data-theme="light"]) #welcomeModal .segmented button.active,
:root:not([data-theme="light"]) #welcomeModal .pill.active{
  border-color: rgba(229,57,53,0.62) !important;
  background: linear-gradient(180deg, rgba(229,57,53,0.22), rgba(229,57,53,0.12)) !important;
  box-shadow:
    0 12px 28px rgba(229,57,53,0.18),
    inset 0 0 0 1px rgba(229,57,53,0.20);
}

/* Hover/press polish */
:root:not([data-theme="light"]) #welcomeModal [role="tab"]:hover,
:root:not([data-theme="light"]) #welcomeModal .tab:hover,
:root:not([data-theme="light"]) #welcomeModal .tabs button:hover,
:root:not([data-theme="light"]) #welcomeModal .tab-btn:hover,
:root:not([data-theme="light"]) #welcomeModal .segmented button:hover,
:root:not([data-theme="light"]) #welcomeModal .pill:hover{
  filter: brightness(1.05);
}
:root:not([data-theme="light"]) #welcomeModal [role="tab"]:active,
:root:not([data-theme="light"]) #welcomeModal .tab:active,
:root:not([data-theme="light"]) #welcomeModal .tabs button:active,
:root:not([data-theme="light"]) #welcomeModal .tab-btn:active,
:root:not([data-theme="light"]) #welcomeModal .segmented button:active,
:root:not([data-theme="light"]) #welcomeModal .pill:active{
  transform: translateY(1px);
}

/* Mobile OLED readability: slightly reduce any backdrop effects in welcome */
@media (max-width: 520px){
  :root:not([data-theme="light"]) #welcomeModal{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* =========================================================
   ✅ DJ DESKTOP ONLY: Reduce MEDIA image + frame + bubble by 40%
   Applies ONLY to embed=1&host=djdesktop and ONLY for media messages.
   ========================================================= */

#app[data-embed="1"][data-host="djdesktop"]{
  /* 60% of current size (i.e. 40% reduction) */
  --dj_media_scale: 0.60;

  /* current media caps used by your layout; scaled below */
  --dj_media_cap: 620px;      /* original “comfortable” cap */
  --dj_media_cap_scaled: calc(var(--dj_media_cap) * var(--dj_media_scale));
}

/* Reduce the overall spacing around messages (DJ Desktop only) */
#app[data-embed="1"][data-host="djdesktop"] .chat-list{
  gap:8px !important;
  padding:4px !important;
}
#app[data-embed="1"][data-host="djdesktop"] .chat-msg{
  gap:8px !important;
}

/* Target ONLY media messages (bubble that contains an attachment OR inline img/video) */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.attachment),
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text img),
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text video){
  /* Bubble visually + layout smaller */
  max-width: min(456px, 52%) !important;             /* ~60% of your prior 760/82% feel */
  padding: 6px 7px !important;                       /* ~60% of 10/12 */
  border-radius: 12px !important;                    /* ~60% of 16 (rounded nicely) */
}

/* Media bubble meta row must not stretch wide (keeps bubble sizing “tight”) */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.attachment) .bubble .meta,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.text img) .bubble .meta,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.text video) .bubble .meta{
  display:flex !important;
  width:auto !important;
}
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.attachment) .bubble .meta .time,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.text img) .bubble .meta .time,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg:has(.text video) .bubble .meta .time{
  margin-left: 8px !important; /* stop forcing full width; still sits “to the right” when room */
}

/* Make attachment frame smaller by 40% (layout sizing, not transform) */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.attachment) .attachment{
  margin-top: 5px !important;                         /* ~60% of 8 */
  border-radius: 10px !important;                     /* ~60% of 14 */
  width: fit-content !important;
  max-width: 100% !important;
}

/* Media itself: cap width to scaled cap, keep intrinsic sizing */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.attachment) .attachment img,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.attachment) .attachment video{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width: min(100%, var(--dj_media_cap_scaled)) !important;
}

/* If images/videos sometimes appear without .attachment wrapper */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text img) .text img,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text video) .text video{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width: min(100%, var(--dj_media_cap_scaled)) !important;
  border-radius: 10px !important;
}

/* Optional: slightly reduce text sizing only inside media bubbles (keeps captions tidy) */
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.attachment) .text,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text img) .text,
#app[data-embed="1"][data-host="djdesktop"] .chat-msg .bubble:has(.text video) .text{
  font-size: 16px !important; /* ~60% feel without being tiny */
  line-height: 1.28 !important;
}

/* IMPORTANT: ensure earlier DJ Desktop “hug size” rules never expand the frame */
#app[data-embed="1"][data-host="djdesktop"] .attachment{
  align-self:flex-start !important;
}

/* =========================================================
   ✅ FIX: DJ DESKTOP reply preview media (composer) showing 1/4 size
   Reason: DJ Desktop media scaling/caps can still affect the reply-preview thumbnail.
   Solution: HARD RESET media scaling variables + sizing inside .composer .reply-preview only.
   ========================================================= */

/* Reset DJ Desktop media scaling for the reply preview UI only */
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview{
  --dj_media_scale: 1 !important;
  --dj_media_cap_scaled: var(--dj_media_cap) !important;
}

/* If the reply preview uses an attachment wrapper, force sane sizing */
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview .attachment,
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview .gif-preview{
  display:block !important;
  width:auto !important;
  max-width: 220px !important;   /* thumbnail max (prevents huge) */
  flex:0 0 auto !important;
  align-self:flex-start !important;
}

/* Force preview media to render at natural size within a sensible thumb box */
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview img,
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview video{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width: 220px !important;
  max-height: 140px !important;  /* stops very tall GIFs taking over */
  object-fit: contain !important;
  transform: none !important;
}

/* Some implementations use a dedicated thumb element (future-proof selectors) */
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview .rp-thumb,
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview .rp-media,
#app[data-embed="1"][data-host="djdesktop"] .composer .reply-preview .rp-attach{
  flex:0 0 auto !important;
  align-self:flex-start !important;
  max-width: 220px !important;
}

/* =========================================================
   ALL VIEWS (INCLUDING DJ DESKTOP):
   Chat feed panel must be transparent so background shows
   ========================================================= */

.chat-feed.panel,
#app[data-embed="1"][data-host="djdesktop"] .chat-feed.panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ✅ WELCOME MODAL — FINAL OVERRIDES (OPAQUE + WHITE TEXT + RED TABS)
   Replaces the earlier “NEW (ALL YES)” block so specificity matches.
   ========================================================= */

/* --- CARD: fully opaque, no glass gradient --- */
:root:not([data-theme="light"]) #welcomeModal .card{
  background: rgba(21,21,27,1) !important;   /* solid, opaque */
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.82) !important;
}

/* --- TEXT: make welcome modal copy bright white --- */
:root:not([data-theme="light"]) #welcomeModal,
:root:not([data-theme="light"]) #welcomeModal h3,
:root:not([data-theme="light"]) #welcomeModal .title,
:root:not([data-theme="light"]) #welcomeModal .label,
:root:not([data-theme="light"]) #welcomeModal label,
:root:not([data-theme="light"]) #welcomeModal p,
:root:not([data-theme="light"]) #welcomeModal .small,
:root:not([data-theme="light"]) #welcomeModal .help,
:root:not([data-theme="light"]) #welcomeModal .mini-title{
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* help/small slightly softer (still white-ish) */
:root:not([data-theme="light"]) #welcomeModal .help,
:root:not([data-theme="light"]) #welcomeModal .small{
  color: rgba(255,255,255,0.86) !important;
}

/* --- INPUTS: brighter + crisp --- */
:root:not([data-theme="light"]) #welcomeModal .input,
:root:not([data-theme="light"]) #welcomeModal input,
:root:not([data-theme="light"]) #welcomeModal select,
:root:not([data-theme="light"]) #welcomeModal textarea{
  background: rgba(17,18,28,1) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
}

:root:not([data-theme="light"]) #welcomeModal input::placeholder,
:root:not([data-theme="light"]) #welcomeModal textarea::placeholder{
  color: rgba(255,255,255,0.55) !important;
  opacity: 1 !important;
}

:root:not([data-theme="light"]) #welcomeModal .input:focus,
:root:not([data-theme="light"]) #welcomeModal input:focus,
:root:not([data-theme="light"]) #welcomeModal select:focus,
:root:not([data-theme="light"]) #welcomeModal textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.35) !important;
  outline: none !important;
}

/* --- RESET BOX: slightly clearer --- */
:root:not([data-theme="light"]) #welcomeModal .reset-box{
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* --- TABS ONLY: subtle red tint (does NOT affect main red .btn) --- */
/* Covers common patterns: role="tab", .tab, .tabs button, .segmented button, etc. */
:root:not([data-theme="light"]) #welcomeModal [role="tab"],
:root:not([data-theme="light"]) #welcomeModal .tab,
:root:not([data-theme="light"]) #welcomeModal .tabs button,
:root:not([data-theme="light"]) #welcomeModal .tab-btn,
:root:not([data-theme="light"]) #welcomeModal .segmented button{
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(229,57,53,0.10), rgba(229,57,53,0.03)) !important;
  border: 1px solid rgba(229,57,53,0.40) !important;
  box-shadow: none !important;
}

/* active tab */
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-current="true"],
:root:not([data-theme="light"]) #welcomeModal .tab.active,
:root:not([data-theme="light"]) #welcomeModal .tabs button.active,
:root:not([data-theme="light"]) #welcomeModal .tab-btn.active,
:root:not([data-theme="light"]) #welcomeModal .segmented button.active{
  background: linear-gradient(180deg, rgba(229,57,53,0.26), rgba(229,57,53,0.12)) !important;
  border-color: rgba(229,57,53,0.78) !important;
  box-shadow: inset 0 0 0 1px rgba(229,57,53,0.22) !important;
}

/* --- IMPORTANT: leave your existing red buttons alone --- */
:root:not([data-theme="light"]) #welcomeModal .btn{
  background: var(--accent) !important;
  color: #ffffff !important;
}

/* =========================================================
   ✅ WELCOME MODAL — FORCE ALL TEXT BRIGHT WHITE (HARD OVERRIDE)
   Put this at the VERY END of style.css
   ========================================================= */

:root:not([data-theme="light"]) #welcomeModal{
  color: #ffffff !important;
}

/* Force every descendant’s text color (covers spans/divs/etc) */
:root:not([data-theme="light"]) #welcomeModal *,
:root:not([data-theme="light"]) #welcomeModal *::before,
:root:not([data-theme="light"]) #welcomeModal *::after{
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important; /* Safari/inputs edge cases */
}

/* Some components use “muted” classes — nuke them in welcome only */
:root:not([data-theme="light"]) #welcomeModal .muted,
:root:not([data-theme="light"]) #welcomeModal .small,
:root:not([data-theme="light"]) #welcomeModal .help,
:root:not([data-theme="light"]) #welcomeModal .mini-title,
:root:not([data-theme="light"]) #welcomeModal .label,
:root:not([data-theme="light"]) #welcomeModal .badge{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Keep placeholders slightly softer (still readable) */
:root:not([data-theme="light"]) #welcomeModal input::placeholder,
:root:not([data-theme="light"]) #welcomeModal textarea::placeholder{
  color: rgba(255,255,255,0.62) !important;
  opacity: 1 !important;
}

/* Ensure browser/autofill doesn't tint text */
:root:not([data-theme="light"]) #welcomeModal input:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  transition: background-color 99999s ease-in-out 0s;
}

/* =========================================================
   ✅ WELCOME MODAL — TAB HIGHLIGHT (bulletproof selectors)
   Put this at the VERY END of style.css
   ========================================================= */

:root:not([data-theme="light"]) #welcomeModal{
  /* slightly lighter than your accent */
  --welcome-tab-hot: color-mix(in srgb, var(--accent) 72%, #ffffff 28%);
  --welcome-tab-hot2: color-mix(in srgb, var(--accent) 58%, #ffffff 42%);
}

/* Base look for “tab-like” controls in welcome */
:root:not([data-theme="light"]) #welcomeModal button,
:root:not([data-theme="light"]) #welcomeModal .tool,
:root:not([data-theme="light"]) #welcomeModal .btn.secondary,
:root:not([data-theme="light"]) #welcomeModal .pill,
:root:not([data-theme="light"]) #welcomeModal [role="tab"]{
  /* don’t wreck main primary buttons */
}

:root:not([data-theme="light"]) #welcomeModal .tabs button,
:root:not([data-theme="light"]) #welcomeModal .segmented button,
:root:not([data-theme="light"]) #welcomeModal [role="tab"],
:root:not([data-theme="light"]) #welcomeModal .tab-btn,
:root:not([data-theme="light"]) #welcomeModal .tab,
:root:not([data-theme="light"]) #welcomeModal .welcome-tabs button{
  background: linear-gradient(180deg, rgba(229,57,53,0.10), rgba(229,57,53,0.03)) !important;
  border: 1px solid rgba(229,57,53,0.40) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ACTIVE/SELECTED tab states (covers most implementations) */
:root:not([data-theme="light"]) #welcomeModal .tabs button.active,
:root:not([data-theme="light"]) #welcomeModal .segmented button.active,
:root:not([data-theme="light"]) #welcomeModal .tab.active,
:root:not([data-theme="light"]) #welcomeModal .tab-btn.active,
:root:not([data-theme="light"]) #welcomeModal .is-active,
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-current="true"],
:root:not([data-theme="light"]) #welcomeModal button[aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal button[aria-current="true"],
:root:not([data-theme="light"]) #welcomeModal button[aria-pressed="true"],
:root:not([data-theme="light"]) #welcomeModal .tool[aria-pressed="true"]{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--welcome-tab-hot) 34%, transparent),
    color-mix(in srgb, var(--welcome-tab-hot2) 18%, transparent)
  ) !important;

  border-color: color-mix(in srgb, var(--welcome-tab-hot) 78%, rgba(255,255,255,0.10)) !important;

  box-shadow:
    0 12px 28px rgba(229,57,53,0.20),
    inset 0 0 0 1px color-mix(in srgb, var(--welcome-tab-hot) 42%, transparent) !important;

  filter: brightness(1.06) !important;
}

/* IMPORTANT: protect the main red action button(s) in welcome */
:root:not([data-theme="light"]) #welcomeModal .btn:not(.secondary){
  background: var(--accent) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(229,57,53,0.25) !important;
  filter: none !important;
}


/* =========================================================
   🔴 WELCOME MODAL — BRIGHTER ACTIVE TAB
   ========================================================= */

:root:not([data-theme="light"]) #welcomeModal{
  /* much closer to pure accent red */
  --welcome-tab-hot: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
}

/* ACTIVE / SELECTED TAB — BRIGHT RED */
:root:not([data-theme="light"]) #welcomeModal .tabs button.active,
:root:not([data-theme="light"]) #welcomeModal .segmented button.active,
:root:not([data-theme="light"]) #welcomeModal .tab.active,
:root:not([data-theme="light"]) #welcomeModal .tab-btn.active,
:root:not([data-theme="light"]) #welcomeModal .is-active,
:root:not([data-theme="light"]) #welcomeModal [role="tab"][aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal button[aria-selected="true"],
:root:not([data-theme="light"]) #welcomeModal button[aria-pressed="true"]{
  background: linear-gradient(
    180deg,
    rgba(229,57,53,0.72),
    rgba(229,57,53,0.42)
  ) !important;

  border-color: rgba(229,57,53,0.95) !important;

  box-shadow:
    0 0 0 1px rgba(229,57,53,0.55),
    0 14px 34px rgba(229,57,53,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08) !important;

  filter: brightness(1.08) !important;
}


/* =========================================================
   ✅ DESKTOP (NON-EMBED) ONLY:
   Keep posted photos & GIFs at a consistent medium size
   - Does NOT affect DJ Desktop embed
   - Does NOT affect mobile
   ========================================================= */

@media (min-width: 981px){

  /* Limit the attachment frame itself */
  #app:not([data-embed="1"]) .attachment{
    max-width: 520px;          /* medium, consistent width */
    width: fit-content;
    align-self: flex-start;
  }

  /* Images & GIFs */
  #app:not([data-embed="1"]) .attachment img,
  #app:not([data-embed="1"]) .attachment video{
    max-width: 520px;
    max-height: 360px;         /* prevents tall images taking over */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* Safety: inline media pasted directly into text */
  #app:not([data-embed="1"]) .bubble .text img,
  #app:not([data-embed="1"]) .bubble .text video{
    max-width: 520px;
    max-height: 360px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    display: block;
  }

  /* Prevent media bubbles from stretching too wide */
  #app:not([data-embed="1"]) .chat-msg .bubble:has(.attachment),
  #app:not([data-embed="1"]) .chat-msg .bubble:has(.text img),
  #app:not([data-embed="1"]) .chat-msg .bubble:has(.text video){
    max-width: min(560px, 70%);
  }
}

/* =========================================================
   ✅ Image Preview Lightbox (ALL views)
   - Click any posted image => full preview modal
   - Click image again/backdrop/close/ESC => return to chat
   ========================================================= */

html.img-preview-lock,
body.img-preview-lock{
  overflow: hidden !important;
}

.img-preview-modal{
  z-index: 20000 !important; /* above welcome/info etc */
}

.img-preview-modal .backdrop{
  background: rgba(0,0,0,0.82) !important;
}

.img-preview-card{
  width: min(980px, 96vw) !important;
  max-height: calc((var(--vh, 1vh) * 100) - 40px) !important;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.img-preview-close{
  align-self: flex-end;
}

.img-preview-wrap{
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-preview-img{
  max-width: 100%;
  max-height: calc((var(--vh, 1vh) * 100) - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid var(--border-2);
  background: rgba(0,0,0,0.20);
  cursor: zoom-out; /* hints “click to close” */
}

/* Mobile: keep it comfy */
@media (max-width: 520px){
  .img-preview-card{
    width: 96vw !important;
    max-height: calc((var(--vh, 1vh) * 100) - 24px) !important;
  }
  .img-preview-img{
    max-height: calc((var(--vh, 1vh) * 100) - 150px);
  }
}

.mention-inline {
  font-weight: 800;
}

.mention-inline-dn {
  font-weight: 700;
  opacity: 0.8;
}

/* Profile: avatar disabled state (still clickable so toast can show) */
#pfAvatarWrap.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: auto;
}

/* ===============================
   Embedded view modal brightness fix (bulletproof)
   =============================== */

/* Never allow embed wrappers to dim/filter the modal layer */
body.embedded .modal,
body.embedded .modal *{
  filter: none !important;
  opacity: 1 !important;
}

/* Backdrop: avoid backdrop-filter in embeds (causes dull/grey compositing) */
body.embedded .modal .backdrop{
  background: rgba(0,0,0,0.70) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Card: match normal modal look */
body.embedded .modal .card{
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.gdpr-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:8px;
}
.gdpr-line input{ margin-top:3px; }