/* ==========================================================================
   css/components/profile-popup.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4488-4695.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* -- USER PROFILE POPUP ----------------------------------------- */
.profile-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.55); z-index:850;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:16px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.profile-overlay.open { opacity:1; pointer-events:all }
/* When the members sidebar is visible, slide the popup in beside it instead
   of on top of it (240px sidebar + 16px gutter). */
body:has(#trayArea:not(.collapsed):not([style*="display: none"]):not([style*="display:none"])) .profile-overlay { padding-right: 256px; }
@media (max-width: 768px) { .profile-overlay { padding-right: 8px !important; } }
.profile-popup { width:340px;background:var(--bg-deep);border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.85);animation:popIn .34s var(--ease-spring, cubic-bezier(0.34,1.4,0.5,1));transform-origin:left center;max-height:92vh;display:flex;flex-direction:column }
/* Profile popup is anchored to the right edge - slide it in from that side */
@keyframes popIn { from { transform:translateY(16px) scale(.955);opacity:0 } to { transform:none;opacity:1 } }
.profile-popup-banner { height:100px;flex-shrink:0;background:var(--bg-surface);overflow:hidden }
.profile-popup-head { padding:0 18px 14px;position:relative;flex-shrink:0 }
.profile-popup-avatar { width:80px;height:80px;border-radius:50%;border:5px solid var(--bg-deep);position:absolute;top:-40px;left:18px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff;flex-shrink:0 }
.profile-popup-avatar-inner { width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;color:#fff }
.profile-popup-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50% }
.profile-popup-close { position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:4px }
.profile-popup-close:hover { background:var(--bg-hover);color:var(--text-primary) }
/* Custom status "speech bubble" floating beside the avatar (over the banner). */
.profile-status-bubble { position:absolute;left:112px;top:-18px;max-width:206px;display:flex;align-items:center;gap:5px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:14px;padding:6px 11px;font-size:12.5px;font-weight:500;color:var(--text-primary);line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:4 }
.profile-status-bubble .pst-tail { position:absolute;left:-6px;bottom:11px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:7px solid var(--border-strong) }
.profile-status-bubble .pst-tail::after { content:'';position:absolute;left:1px;top:-5px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:6px solid var(--bg-elevated) }
.profile-status-bubble .pst-text { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px }
.profile-status-bubble.empty .pst-text { color:var(--text-muted);font-style:italic }
.profile-status-bubble.self:not(.editing) { cursor:pointer }
.profile-status-bubble.self:not(.editing):hover { border-color:var(--accent) }
.profile-status-bubble .pst-edit { display:none;align-items:center;gap:3px;margin-left:1px }
.profile-status-bubble.self:hover .pst-edit { display:inline-flex }
.profile-status-bubble .pst-btn { background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;display:flex;border-radius:5px;line-height:0 }
.profile-status-bubble .pst-btn:hover { color:var(--text-primary);background:var(--bg-hover) }
.profile-status-bubble .pst-input { background:transparent;border:none;outline:none;color:var(--text-primary);font-size:12.5px;font-weight:500;width:148px;font-family:inherit;padding:0 }
.profile-popup-username { padding-top:46px;font-size:19px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:7px;flex-wrap:wrap }
.profile-popup-username-sub { font-size:12px;color:var(--text-muted);margin-top:2px }
.profile-popup-pronouns { font-size:12px;color:var(--text-muted);margin-top:2px;font-style:italic }
.profile-popup-disc { font-size:13px;color:var(--text-muted);margin-top:1px }
.profile-popup-body { padding:0 18px 18px;overflow-y:auto;flex:1;min-height:0 }
.profile-popup-divider { height:1px;background:var(--border-strong);margin:10px 0 }
.profile-section-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin:12px 0 6px }
.profile-bio { font-size:13px;color:var(--text-secondary);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word }
/* THEMED POPOUT COMPOSITING.
   The popout used to render its content straight onto the theme gradient at full
   strength ("body transparent so card gradient bleeds through"), then fight the
   resulting low contrast with white text + shadows. That is backwards, and it is why a
   Rift popout looked washed out next to another app's with the SAME gradient colours:
   there, the gradient is a WALLPAPER sitting behind content, and every panel darkens it
   with a BLACK scrim (never a coloured wash) on an opacity ladder. Content panels then
   sit slightly LIGHTER than the scrimmed backdrop, which is what makes them read as
   surfaces instead of tinted text.
   So: scrim the body, then float the sections back up with a white veil. The gradient
   stays fully visible in the banner/header, where it is decoration rather than a
   reading surface. See the reference notes on the opacity ladder (dark: 0.65 - 0.9). */
.profile-themed .profile-popup-body {
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.60) 100%);
}
/* Sections become real surfaces: a white veil over the scrim, so they sit ABOVE the
   backdrop rather than being text floating on colour. */
.profile-themed .profile-bio,
.profile-themed .profile-member-since {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px 12px;
}
.profile-themed .profile-popup-divider { background: rgba(255,255,255,.12) }
/* Role pills need their own veil or they vanish into the scrim. */
.profile-themed .profile-role-pill {
  background: rgba(0,0,0,.34) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Text tones. With a real scrim underneath these no longer need shadows to survive, but
   they are kept for the banner region where the gradient is still at full strength. */
.profile-themed .profile-bio { color:rgba(255,255,255,0.95) !important;  }
.profile-themed .profile-section-label { color:rgba(255,255,255,0.9) !important;  }
.profile-themed .profile-member-since,
.profile-themed .profile-activity-type { color:rgba(255,255,255,0.9) !important }
/* !important beats the inline color:var(--text-secondary) on the date spans. */
.profile-themed .profile-member-since span,
.profile-themed .profile-member-since div,
.profile-themed .profile-role-pill { color:rgba(255,255,255,0.95) !important;  }
.profile-activity-row { display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-surface);border-radius:8px;border:1px solid var(--border) }
.profile-activity-icon { width:36px;height:36px;border-radius:6px;background:var(--bg-hover);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px }
.profile-activity-name { font-size:13px;font-weight:600;color:var(--text-primary) }
.profile-activity-type { font-size:11px;color:var(--text-muted) }
/* Clickable activity row (opens the game detail in the full profile) */
.profile-activity-row.clickable { cursor:pointer;transition:background .12s,border-color .12s }
.profile-activity-row.clickable:hover { background:var(--bg-hover);border-color:var(--accent) }
/* -- Full Profile modal (opened by clicking the avatar in the popout) -- */
.fp-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:1200;opacity:0;transition:opacity .15s }
.fp-overlay.open { display:flex;opacity:1 }
.fp-modal { position:relative;width:min(620px,94vw);max-height:90vh;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:fpPop .16s ease }
@keyframes fpPop { from { transform:scale(.96);opacity:.4 } to { transform:scale(1);opacity:1 } }
.fp-banner { height:120px;background:var(--bg-elevated);flex-shrink:0 }
.fp-banner img { width:100%;height:100%;object-fit:cover }
.fp-close { position:absolute;top:12px;right:14px;z-index:3;background:rgba(0,0,0,.4);border:none;color:#fff;font-size:20px;line-height:1;width:30px;height:30px;border-radius:50%;cursor:pointer;backdrop-filter:blur(4px) }
.fp-avatar { position:absolute;top:78px;left:24px;width:96px;height:96px;border-radius:50%;border:6px solid var(--bg-surface);background:var(--bg-elevated);z-index:2;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:#fff }
.fp-avatar img { width:100%;height:100%;object-fit:cover }
/* The modal showed your status as a line of text and put nothing on the avatar - the one place
   you look for it. Centred at 84.4% of the avatar like every other dot, which on a 96px avatar
   is a 1px overhang for a 32px dot. The ring matches the 6px ring the avatar already carries,
   and --status-ring is redefined HERE so the silhouette's cut-out matches that ring rather than
   the global one (the surfaces differ). */
.fp-status {
  --status-ring: var(--bg-surface);
  /* -7, not -1: offsets resolve against the PADDING box, and this avatar has a 6px border,
     so -1 measured from 84px put the centre at 78% instead of the reference's 84.4%. */
  position: absolute; right: -7px; bottom: -7px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 6px solid var(--bg-surface); box-sizing: border-box;
  z-index: 3; pointer-events: none;
}
.fp-modal.profile-themed .fp-name { color:#fff !important }
.fp-modal.profile-themed .fp-sub, .fp-modal.profile-themed .fp-label, .fp-modal.profile-themed .fp-bio, .fp-modal.profile-themed .fp-gd-dk, .fp-modal.profile-themed .fp-gd-dv { color:rgba(255,255,255,.86) !important }
.fp-modal.profile-themed .fp-card { background:rgba(0,0,0,.28) !important;border-color:rgba(255,255,255,.14) !important }
.fp-body { padding:56px 24px 24px;overflow-y:auto;display:grid;grid-template-columns:1fr;gap:18px }
.fp-name { font-size:22px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.fp-sub { font-size:13px;color:var(--text-muted);margin-top:2px }
.fp-btns { display:flex;gap:8px;margin-top:14px }
.fp-card { background:var(--bg-deep);border:1px solid var(--border);border-radius:12px;padding:14px 16px }
.fp-label { font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px }
.fp-bio { font-size:13.5px;line-height:1.5;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word }
/* Activity card inside the full profile (bigger than the popout row) */
.fp-act { display:flex;gap:14px;align-items:center;cursor:pointer;border-radius:8px;transition:background .12s }
.fp-act:hover { background:var(--bg-hover) }
.fp-act-cover { width:56px;height:56px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg-elevated) }
.fp-act-name { font-size:15px;font-weight:700;color:var(--text-primary) }
.fp-act-meta { font-size:12px;color:var(--accent);font-weight:600;margin-top:2px }
.fp-act-chevron { margin-left:auto;color:var(--text-muted);flex-shrink:0 }
/* -- Full game detail page (store-style), replaces the profile body -- */
/* In game mode the profile banner + avatar are hidden so it reads as a game page. */
.fp-modal.fp-game-mode .fp-banner, .fp-modal.fp-game-mode .fp-avatar { display:none }
.fp-modal.fp-game-mode .fp-body { padding:18px 0 0;gap:0 }
.fp-gd { display:flex;flex-direction:column }
.fp-gd-back { background:none;border:none;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0;margin:0 20px 12px }
.fp-gd-back:hover { color:var(--text-primary) }
.fp-gd-header { position:relative;overflow:hidden;padding:18px 20px;background:linear-gradient(135deg,#20222e,#12131b) }
.fp-gd-artbg { position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) brightness(.45) saturate(1.2);transform:scale(1.2);opacity:.6;z-index:0 }
.fp-gd-header-row { position:relative;z-index:1;display:flex;gap:16px;align-items:flex-end }
.fp-gd-cover { width:78px;height:104px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--bg-elevated);box-shadow:0 6px 20px rgba(0,0,0,.5) }
.fp-gd-cover-generic { display:flex;align-items:center;justify-content:center;color:var(--text-muted) }
.fp-gd-headmain { min-width:0;padding-bottom:2px }
.fp-gd-title { font-size:24px;font-weight:800;color:#fff;line-height:1.15; }
.fp-gd-genres { font-size:12.5px;color:rgba(255,255,255,.8);font-weight:600;margin-top:4px; }
.fp-gd-playing { font-size:13px;color:var(--accent);font-weight:700;margin-top:8px;background:rgba(0,0,0,.35);display:inline-block;padding:3px 9px;border-radius:999px;backdrop-filter:blur(4px) }
.fp-gd-media { padding:16px 20px 0 }
.fp-gd-heroimg { width:100%;border-radius:10px;display:block;aspect-ratio:16/9;object-fit:cover;background:var(--bg-elevated) }
.fp-gd-thumbs { display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:2px }
.fp-gd-thumb { width:88px;height:50px;border-radius:6px;object-fit:cover;flex-shrink:0;cursor:pointer;opacity:.55;border:2px solid transparent;transition:opacity .12s,border-color .12s }
.fp-gd-thumb:hover { opacity:.85 }
.fp-gd-thumb.active { opacity:1;border-color:var(--accent) }
.fp-gd-btns { display:flex;flex-wrap:wrap;gap:8px;margin:16px 20px 0 }
.fp-gd-btn { display:inline-flex;align-items:center;gap:7px;padding:9px 15px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);font-size:13px;font-weight:700;border-radius:8px;text-decoration:none;transition:background .12s,border-color .12s }
.fp-gd-btn:hover { background:var(--bg-hover);border-color:var(--accent) }
.fp-gd-btn-steam { background:#1b2838;border-color:#2a475e;color:#fff }
.fp-gd-btn-steam:hover { background:#2a475e;border-color:#66c0f4 }
.fp-gd-btn-site { background:var(--accent,#8b5cf6);border-color:var(--accent,#8b5cf6);color:#fff }
.fp-gd-btn-site:hover { filter:brightness(1.1) }
.fp-gd-verified { display:inline-flex;align-items:center;gap:5px;padding:9px 13px;font-size:12.5px;font-weight:700;color:#3ba55d }
.fp-gd-verified svg { color:#3ba55d }
.fp-gd-verifier { color:#3ba55d;cursor:pointer;text-decoration:underline;text-underline-offset:2px;margin-left:3px }
.fp-gd-verifier:hover { color:#4ade80 }
.fp-gd-summary { font-size:13.5px;line-height:1.6;color:var(--text-secondary);margin:16px 20px 0;white-space:pre-wrap;word-break:break-word }
.fp-gd-reviews { margin:16px 20px 0 }
.fp-gd-review-row { display:flex;align-items:baseline;justify-content:space-between;gap:12px }
.fp-gd-review-label { font-size:15px;font-weight:800 }
.fp-gd-review-score { font-size:12.5px;color:var(--text-muted);font-weight:600 }
.fp-card.fp-gd-details { margin:16px 20px 20px }
.fp-gd-details .fp-gd-drow { display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:5px 0 }
.fp-gd-details .fp-gd-drow + .fp-gd-drow { border-top:1px solid var(--border) }
.fp-gd-dk { color:var(--text-muted);font-weight:600;flex-shrink:0 }
.fp-gd-dv { color:var(--text-primary);text-align:right }
.profile-member-since { font-size:12px;color:var(--text-muted);margin-top:2px }
.profile-roles-wrap { display:flex;flex-wrap:wrap;gap:5px }
.profile-role-pill { display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--bg-hover);color:var(--text-secondary) }
.profile-role-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0 }
.profile-role-row { display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border) }
.profile-role-row:last-child { border:none }
.role-toggle { width:36px;height:20px;border-radius:10px;border:none;cursor:pointer;position:relative;transition:background .15s;flex-shrink:0 }
.role-toggle.on { background:var(--accent) }
.role-toggle.off { background:var(--bg-hover) }
.role-toggle::after { content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s cubic-bezier(.4,0,.2,1) }
.role-toggle.on::after { left:19px }
.role-toggle.off::after { left:3px }
/* Privacy settings controls */
/* The privacy tab puts label/description/option rows straight into
   .settings-field-group, which is built for .settings-field children (its
   background only shows as 1px separator lines). Restyle the groups here as
   padded cards so the content isn't squished against the rounded edges. */
#settingsTab-privacy .settings-field-group {
  background: var(--bg-surface);
  padding: 14px 16px;
  gap: 0;
}
.priv-option { display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:16px;cursor:pointer }
.priv-option + .priv-option { border-top:1px solid var(--border) }
.priv-radio { width:18px;height:18px;border-radius:50%;border:2px solid var(--text-muted);flex-shrink:0;transition:.15s;background:transparent;display:flex;align-items:center;justify-content:center }
.priv-radio.checked { border-color:var(--accent);background:var(--accent) }
.priv-radio.checked::after { content:'';display:block;width:6px;height:6px;border-radius:50%;background:#fff }
.priv-toggle { position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;cursor:pointer }
.priv-toggle input { opacity:0;width:0;height:0;position:absolute }
.priv-toggle-track { position:absolute;inset:0;background:var(--bg-hover);border-radius:24px;transition:background .2s }
.priv-toggle-track::after { content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s }
.priv-toggle input:checked ~ .priv-toggle-track { background:var(--accent) }
.priv-toggle input:checked ~ .priv-toggle-track::after { transform:translateX(20px) }
/* Role chip editor */
.role-chips-wrap { display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:4px }
.role-chip { display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:12px;font-size:12px;font-weight:600;background:var(--bg-elevated);border:1px solid var(--border-strong);cursor:default }
.role-chip .dot { width:7px;height:7px;border-radius:50%;flex-shrink:0 }
.role-chip .rm { background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 2px }
.role-chip .rm:hover { color:var(--red,#ed4245) }
.role-add-btn { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bg-elevated);border:1px dashed var(--border-strong);color:var(--text-muted);font-size:16px;cursor:pointer;line-height:1;flex-shrink:0 }
.role-add-btn:hover { background:var(--bg-hover);color:var(--text-primary) }
.role-search-drop { position:relative;margin-top:6px }
.role-search-input { width:100%;box-sizing:border-box;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;color:var(--text-primary);font-size:13px;outline:none }
.role-search-list { margin-top:4px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;max-height:180px;overflow-y:auto }
.role-search-item { display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:13px }
.role-search-item:hover { background:var(--bg-hover) }