/* === Users list & avatars === */
.userList{ padding-right:6px; margin-top:.4rem; min-height:0; flex:1 }

.userSectionHeader{
  font-size:.65rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:10px 8px 6px;
}
.userItemBtn{
  display:flex; align-items:center; gap:.6rem;
  width:100%; border:0; background:transparent; color:inherit; text-align:left;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  transition:background .15s ease, transform .02s ease;
  margin-bottom: 5px;
}
.userItemBtn:hover{ background:rgba(255,255,255,.06) }
.userItemBtn.active{ background:rgba(23,143,137,.18); }
.userItemBtn.disabled,
.userItemBtn:disabled {
  opacity: 0.5;
  /*cursor: not-allowed;
  pointer-events: none;*/
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  filter: grayscale(40%);
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.userItemBtn.disabled .userName,
.userItemBtn:disabled .userName {
  text-decoration: line-through;
  color: #ff4d4f;
}
.userItemBtn.disabled:hover,
.userItemBtn:disabled:hover { background: rgba(255, 255, 255, 0.03); }

.avatarWrap{ position:relative; width:32px; height:32px; flex:0 0 32px; }
.avatarCircle{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:700; font-size:.85rem;
  background:linear-gradient(180deg,var(--accent-2,#1aa39b),#178f89);
  color:#fff;
}
.statusDot{ position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; border:2px solid rgba(0,0,0,.3); background:#969696 }
.avatarWrap.online .statusDot {
  background: #2ecc71;
  box-shadow: 0 0 0 rgba(46, 204, 113, 0.7);
  animation: pulse-status 1.5s infinite;
}
@keyframes pulse-status {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}
.avatarWrap.offline .statusDot{ background:#969696 }
.userMeta{ display:flex; flex-direction:column; line-height:1.15 }
.userName{ font-weight:600 }
.userSub{ font-size:.78rem; color:var(--muted); margin-top:2px }
.youBadge{ margin-left:.35rem; font-size:.68rem; padding:.08rem .35rem; border-radius:999px; background:rgba(255,255,255,.12); color:var(--muted) }

/* Mini profile / footer */
.sidebarFooter { background: var(--panel); padding: 0.5rem 0.75rem; border-radius:10px; }
#miniProfileBtn { color: var(--text); }
#miniProfileBtn:hover { background: rgba(255,255,255,0.04); border-radius: var(--radius); }

/* Avatar + status */
.avatar-28 { width: 28px; height: 28px; }
.avatar-28 .statusDot{
  position: absolute;
  right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #adb5bd; /* default: offline */
}

/* Status colors (and pulse for online) */
.sidebarFooter.online .statusDot { background: #2ecc71; box-shadow: 0 0 0 rgba(46,204,113,.6); animation: pulse-status 1.6s infinite; }
.sidebarFooter.away   .statusDot { background: #f1c40f; }
.sidebarFooter.busy   .statusDot { background: #e74c3c; }
.unreadBadge{ margin-left:auto; margin-right:4px; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#d9534f; color:#fff; font-size:.72rem; font-weight:700; box-shadow: 0 0 0 2px rgba(0,0,0,.2) }

@keyframes pulse-status{
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}



/* ================= Light Theme Overrides ================= */
:root[data-theme="light"] .rxPop.userOptPop .opt {
  color: var(--text, #1a1f29);
}
:root[data-theme="light"] .rxPop.userOptPop .opt:hover {
  background: rgba(0,0,0,.06);
}
:root[data-theme="light"] .rxPop.userOptPop .opt:active {
  background: rgba(0,0,0,.09);
}

/* “Open DM” primary-ish state */
:root[data-theme="light"] .rxPop.userOptPop .opt.dm {
  color: var(--accent, #0d6efd);
}
:root[data-theme="light"] .rxPop.userOptPop .opt.dm:hover {
  /* subtle accent tint on light bg */
  background: color-mix(in oklab, var(--accent, #0d6efd) 15%, transparent);
}
@supports not (color: color-mix(in oklab, black, white)) {
  :root[data-theme="light"] .rxPop.userOptPop .opt.dm:hover { background: rgba(13,110,253,.14); }
}

/* ------- View Profile modal buttons ------- */
:root[data-theme="light"] .user-profile-modal .btn.dm {
  background: var(--accent, #0d6efd);
  color: #fff;
}
:root[data-theme="light"] .user-profile-modal .btn.report {
  background: transparent;
  border: 1px solid rgba(0,0,0,.14);
  color: var(--text, #1a1f29);
}
:root[data-theme="light"] .user-profile-modal .btn.report:hover {
  background: rgba(0,0,0,.06);
}

:root[data-theme="light"] .user-profile-modal .btn.close {
  background: #e7ebf1;            /* soft panel tone */
  color: #1a1f29;
  border: 1px solid rgba(0,0,0,.06);
}
:root[data-theme="light"] .user-profile-modal .btn.close:hover {
  filter: brightness(0.98);
}

/* keep the same press/disabled behaviors you already have */

/* ------- Bio block + scrollbars ------- */
:root[data-theme="light"] .bio {
  border-top: 1px solid rgba(0,0,0,.08);
  color: var(--text, #1a1f29);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.30) transparent;
}
:root[data-theme="light"] .bio::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:root[data-theme="light"] .bio:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.38);
}
:root[data-theme="light"] .bio::-webkit-scrollbar-thumb:active {
  background-color: rgba(0,0,0,.55);
}

/* === User Options Popover ============================================== */
.rxPop.userOptPop { min-width: 220px; }

.rxPop.userOptPop .rxPicker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

.rxPop.userOptPop .opt {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #e9ecf1);
  font: inherit;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease, opacity .15s ease;
}

.rxPop.userOptPop .opt i {
  font-size: 1rem;
  line-height: 1;
  opacity: .9;
}

/* hover/focus/active */
.rxPop.userOptPop .opt:hover {
  background: rgba(255,255,255,.06);
}

.rxPop.userOptPop .opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent, #0d6efd) 50%, transparent);
}
@supports not (color: color-mix(in oklab, black, white)) {
  .rxPop.userOptPop .opt:focus-visible { box-shadow: 0 0 0 2px rgba(13,110,253,.35); }
}

.rxPop.userOptPop .opt:active {
  transform: translateY(0.5px);
  background: rgba(255,255,255,.09);
}

/* disabled state */
.rxPop.userOptPop .opt[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* make "Open DM" feel a bit primary */
.rxPop.userOptPop .opt.dm {
  color: var(--accent, #0d6efd);
}
.rxPop.userOptPop .opt.dm:hover {
  background: rgba(13,110,253,.12);
}
/* === View Profile Modal buttons ======================================== */
.user-profile-modal .btn {
  appearance: none;
  border: 0;
  padding: 8px 12px;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease, filter .15s ease, opacity .15s ease;
}

.user-profile-modal .btn.dm {
  background: var(--accent, #0d6efd);
  color: #fff;
}
.user-profile-modal .btn.dm:hover { filter: brightness(1.05); }

.user-profile-modal .btn.report {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text, #e9ecf1);
}
.user-profile-modal .btn.report:hover { background: rgba(255,255,255,.06); }

.user-profile-modal .btn.close {
  background: #3a3f52;
  color: #fff;
}
.user-profile-modal .btn.close:hover { filter: brightness(1.05); }

.user-profile-modal .btn:active { transform: translateY(0.5px); }
.user-profile-modal .btn:disabled { opacity: .5; cursor: not-allowed; }

.bio {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
  white-space: pre-wrap;
  max-height: 500px;

  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable; 
}

.bio {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.bio::-webkit-scrollbar {
  width: 10px;
}

.bio::-webkit-scrollbar-track {
  background: transparent;
}

.bio::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.25);
  border-radius: 999px;
  border: 2px solid transparent;    
  background-clip: padding-box;
}

.bio:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.38);
}

.bio::-webkit-scrollbar-thumb:active {
  background-color: rgba(255,255,255,.55);
}

/* ============================================================ */
.user-profile-modal .extras {
  --ex-gap: .5rem;
  --ex-radius: 999px;
  --ex-pad-y: .35rem;
  --ex-pad-x: .6rem;

  padding-top: .5rem;
  margin-top: .5rem;
  border-top: 1px solid rgba(255,255,255,.10);
}

.user-profile-modal .extras .d-flex {
  gap: var(--ex-gap) var(--ex-gap);
}

.user-profile-modal .extras .ex-chip {
  --ex-bg: rgba(255,255,255,.04);
  --ex-border: rgba(255,255,255,.18);
  --ex-text: #e6edf3;
  --ex-bg-hover: rgba(255,255,255,.08);
  --ex-border-hover: rgba(255,255,255,.28);
  --ex-accent: currentColor;

  --bs-btn-color: var(--ex-text);
  --bs-btn-bg: var(--ex-bg);
  --bs-btn-border-color: var(--ex-border);
  --bs-btn-hover-color: var(--ex-text);
  --bs-btn-hover-bg: var(--ex-bg-hover);
  --bs-btn-hover-border-color: var(--ex-border-hover);
  --bs-btn-active-color: var(--ex-text);
  --bs-btn-active-bg: var(--ex-bg-hover);
  --bs-btn-active-border-color: var(--ex-border-hover);

  background: var(--ex-bg) !important;
  border-color: var(--ex-border) !important;
  color: var(--ex-text) !important;

  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-width: 1px;
  border-radius: var(--ex-radius);
  padding: var(--ex-pad-y) var(--ex-pad-x);
  line-height: 1.1;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease, color .15s ease;
}

.user-profile-modal .extras .ex-chip:hover {
  box-shadow:
    0 4px 14px rgba(0,0,0,.25),
    0 0 0 .5px var(--ex-accent);
}

.user-profile-modal .extras .ex-chip:active {
  transform: translateY(1px);
  box-shadow: none;
}

.user-profile-modal .extras .ex-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--ex-accent), transparent 70%);
}

.user-profile-modal .extras .ex-chip .bi {
  font-size: 1rem;
  vertical-align: -.15em;
  opacity: .95;
  color: var(--ex-accent);
}

.user-profile-modal .extras .ex-chip.btn-success {
  border-radius: var(--ex-radius);
  padding: var(--ex-pad-y) var(--ex-pad-x);
}

.user-profile-modal .extras.compact {
  --ex-gap: .35rem;
  --ex-pad-y: .28rem;
  --ex-pad-x: .5rem;
}
.user-profile-modal .extras.compact .ex-chip .bi { font-size: .95rem; }

.user-profile-modal .extras.loading .ex-chip {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}
.user-profile-modal .extras.loading .ex-chip::after {
  content: '';
  display: block;
  height: 1em;
  width: 6.5rem;
  border-radius: .5rem;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.22) 40%,
      rgba(255,255,255,.08) 80%);
  animation: ex-shimmer 1.1s infinite linear;
}

@keyframes ex-shimmer {
  from { background-position: -150% 0; }
  to   { background-position: 150% 0; }
}

:root[data-theme="light"] .user-profile-modal .extras {
  border-top-color: rgba(16, 24, 40, .08);
}
:root[data-theme="light"] .user-profile-modal .extras .ex-chip {
  --ex-bg: #f6f8fb;
  --ex-border: #e3e8ef;
  --ex-text: #1f2937;
  --ex-bg-hover: #eef3f9;
  --ex-border-hover: #d5dde8;
  box-shadow: none;
}
:root[data-theme="light"] .user-profile-modal .extras .ex-chip:focus-visible {
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--ex-accent), transparent 75%);
}

.user-profile-modal .extras .ex-chip[data-key="github"],
.user-profile-modal .extras a.ex-chip[href*="github.com"]         { --ex-accent: #c9d1d9; }

.user-profile-modal .extras .ex-chip[data-key="twitter"],
.user-profile-modal .extras .ex-chip[data-key="x"],
.user-profile-modal .extras a.ex-chip[href*="twitter.com"]        { --ex-accent: #1d9bf0; }

.user-profile-modal .extras .ex-chip[data-key="instagram"],
.user-profile-modal .extras a.ex-chip[href*="instagram.com"]      { --ex-accent: #e1306c; }
.user-profile-modal .extras .ex-chip[data-key="instagram"] .bi,
:root[data-theme="light"] .user-profile-modal .extras .ex-chip[data-key="instagram"] .bi {
  background: linear-gradient(135deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.user-profile-modal .extras .ex-chip[data-key="youtube"],
.user-profile-modal .extras a.ex-chip[href*="youtube.com"],
.user-profile-modal .extras a.ex-chip[href*="youtu.be"]           { --ex-accent: #ff0033; }

.user-profile-modal .extras .ex-chip[data-key="twitch"],
.user-profile-modal .extras a.ex-chip[href*="twitch.tv"]          { --ex-accent: #9146ff; }

.user-profile-modal .extras .ex-chip[data-key="steam"],
.user-profile-modal .extras a.ex-chip[href*="steamcommunity.com"] { --ex-accent: #08090a; }

.user-profile-modal .extras .ex-chip[data-key="discord"],
.user-profile-modal .extras a.ex-chip[href*="discord.gg"],
.user-profile-modal .extras a.ex-chip[href*="discord.com"]        { --ex-accent: #5865f2; }

.user-profile-modal .extras .ex-chip[data-key="website"]          { --ex-accent: #58a6ff; }

@media (prefers-reduced-motion: reduce) {
  .user-profile-modal .extras .ex-chip { transition: none; }
  .user-profile-modal .extras.loading .ex-chip::after { animation: none; }
}

@media (forced-colors: active) {
  .user-profile-modal .extras { border-top: 1px solid CanvasText; }
  .user-profile-modal .extras .ex-chip {
    border-color: ButtonBorder !important;
    background: ButtonFace !important;
    color: ButtonText !important;
  }
  .user-profile-modal .extras .ex-chip:focus-visible {
    box-shadow: 0 0 0 2px Highlight !important;
  }
}

.user-stats{
  --muted: var(--text-weak, rgba(0,0,0,.6));
  --surface: var(--surface-1, rgba(0,0,0,.04));
  --border: var(--border-weak, rgba(0,0,0,.12));

  padding-top:.5rem;
  margin-top:.5rem;
  border-top:1px solid var(--border);
}

:root[data-theme="dark"] .user-stats{
  --muted: rgba(255,255,255,.72);
  --surface: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
}

.user-stats{
  --tag-bg:     color-mix(in srgb, currentColor 8%,  transparent);
  --tag-border: color-mix(in srgb, currentColor 16%, transparent);

  padding-top:.5rem;
  margin-top:.5rem;
  border-top:1px solid var(--tag-border);
}

.user-stats .stat-pill{
  display:inline-flex; align-items:baseline; gap:.35rem;
  padding:.22rem .46rem;
  border-radius:.5rem;
  background:var(--tag-bg);
  border:1px solid var(--tag-border);
  font-size:.92rem; line-height:1.1;
  color:inherit;
}
.user-stats .stat-pill .label{ opacity:.75; }
.user-stats .stat-pill .value{ font-weight:600; font-variant-numeric: tabular-nums; }

.user-stats .stat-pill + .stat-pill{ margin-left:.35rem; }

.user-stats .rx-breakdown{ display:flex; flex-wrap:wrap; gap:.25rem .35rem; margin-top:.35rem; }
.user-stats .rx-chip{
  display:inline-block;
  padding:.22rem .46rem;
  border-radius:.5rem;
  background:var(--tag-bg);
  border:1px solid var(--tag-border);
  font-size:.92rem; line-height:1.1;
  color:inherit; user-select:none;
}



/* === Info chips (theme-aware) =========================================== */
.kv-chip {
  --kv-bg: rgba(255,255,255,.06);
  --kv-border: rgba(255,255,255,.16);
  --kv-text: var(--text, #eaecef);
  --kv-sep: rgba(255,255,255,.45);
  --kv-hover: rgba(255,255,255,.12);
  --kv-copied-bg: rgba(25,135,84,.15);
  --kv-copied-border: rgba(25,135,84,.35);
  --kv-copied-text: #b6f0cf;

  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background:var(--kv-bg); color:var(--kv-text);
  border:1px solid var(--kv-border);
  font-size:.875rem; line-height:1; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}
.kv-chip i { font-size:.9em; opacity:.9; }
.kv-chip .kv-label { font-weight:600; }
.kv-chip .kv-sep { opacity:.6; color:var(--kv-sep); }
.kv-chip .kv-value {
  max-width: 30ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kv-chip:hover { background:var(--kv-hover); border-color:var(--kv-border); box-shadow:0 2px 10px rgba(0,0,0,.12); }
.kv-chip:focus-visible { outline:2px solid rgba(99,102,241,.55); outline-offset:2px; }

/* success (after copy) */
.kv-chip[data-copied="1"] {
  background:var(--kv-copied-bg); border-color:var(--kv-copied-border); color:var(--kv-copied-text);
}

/* Light theme overrides */
:root[data-theme="light"] .kv-chip {
  --kv-bg: #f6f7f9;
  --kv-border: #e1e5ea;
  --kv-text: #0f172a;
  --kv-sep: #6b7280;
  --kv-hover: #eef1f5;
  --kv-copied-bg: #e9f8ef;
  --kv-copied-border: #c3edd5;
  --kv-copied-text: #155e36;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
:root[data-theme="light"] .kv-chip:hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
/* Flag scales with surrounding text */
.flag-emoji {
  font-size: 1em;      /* match parent text size */
  line-height: 1;      /* keep it tight */
  display: inline-block;
  vertical-align: -0.12em; /* tiny baseline nudge so it sits level with text */
  margin-right: .35em;
  opacity: .95;
}

/* optional: in very large headings you may want a smidge more nudge */
h1 .flag-emoji, h2 .flag-emoji { vertical-align: -0.14em; }

/* light theme tweak if you use it */
:root[data-theme="light"] .flag-emoji { opacity: .9; }