/* ═══════════════════════════════════════════════════════════════════════════
   MUMS — PREMIUM PROFILE CARD  (sidebar identity widget)
   ───────────────────────────────────────────────────────────────────────────
   Faithful recreation of the gold-frame glassmorphic reference template.
   • Pure CSS + masks  →  resolution-independent (crisp at any DPI / "8K ultra HD")
   • Transparent backdrop  →  floats on the sidebar, no opaque plate
   • Layout: circular gold-ring avatar (left) + identity stack (right)
   • Content: Profile logo · Name · Team · Role · Online status · Star contribution
   • Shining glass premium look: animated metallic frame sheen, spinning gold
     ring shimmer, blue corner glows, glossy diagonal reflection, live status pulse
   Namespaced under `.pcard` so theme `.sp-*`/`.usercard` overrides never clash.
   Rendered by renderUserCard() in app.js. The `.mcs-star-chip` (contribution
   system) auto-injects into `.sp-info` and is restyled below to sit in-frame.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container must let the glow/ring spill past the rounded frame */
.usercard{ overflow:visible !important; }

:root{
  --pc-gold-0:#7a560e;
  --pc-gold-1:#c8951f;
  --pc-gold-2:#f6c453;
  --pc-gold-3:#ffe9a8;   /* specular highlight */
  --pc-gold-4:#9a6f12;
  --pc-cyan:#46d5ff;
  --pc-cyan-soft:rgba(70,213,255,.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   CARD SHELL — dark glass interior
   ───────────────────────────────────────────────────────────────────────── */
.pcard{
  position:relative;
  display:block;
  margin:4px 2px 8px;
  padding:9px 11px;
  border-radius:14px;
  isolation:isolate;
  overflow:visible;
  /* Frameless premium plate — soft translucent glass, NO rectangular outline.
     (Gold hairline frame + corner ticks removed per request 2026-06-02.) */
  background:
    radial-gradient(120% 140% at 82% 6%, rgba(70,120,200,.10) 0%, rgba(10,16,32,0) 52%),
    linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.016) 60%, rgba(255,255,255,.008) 100%);
  box-shadow:
    0 6px 18px -12px rgba(0,0,0,.55),
    0 1px 0 0 rgba(255,255,255,.04) inset;
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
          backdrop-filter:blur(6px) saturate(1.05);
}

/* Gold hairline frame removed — kept disabled so the rule history stays clear. */
.pcard::before{ content:none !important; display:none !important; }

/* Subtle glass sheen + faint cool corner light (kept minimal for enterprise look) */
.pcard::after{
  content:"";
  position:absolute; inset:1px;
  border-radius:13px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(55% 70% at 100% 4%, rgba(80,170,255,.12) 0%, rgba(80,170,255,0) 48%),
    linear-gradient(118deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 58%);
}

/* Corner ticks removed with the frame — no rectangular accents on the card. */
.pcard-corner{ display:none !important; }

/* Dashes removed for a cleaner, more compact card */
.pcard-dashes{ display:none; }

/* ─────────────────────────────────────────────────────────────────────────
   BODY LAYOUT — avatar + identity
   ───────────────────────────────────────────────────────────────────────── */
.pcard-body{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:10px; min-width:0;
}

/* ── Circular gold-ring avatar (the "logo" holder) ────────────────────────── */
.pcard-ava{
  position:relative;
  flex:0 0 48px; width:48px; height:48px;
  border-radius:999px;
}
/* spinning metallic gold ring (refined glow) */
.pcard-ava::before{
  content:""; position:absolute; inset:-1.5px; border-radius:999px; z-index:0;
  background:conic-gradient(from 140deg,
    var(--pc-gold-4),var(--pc-gold-3),var(--pc-gold-2),var(--pc-gold-0),
    var(--pc-gold-3),var(--pc-gold-1),var(--pc-gold-4));
  filter:drop-shadow(0 0 3px rgba(246,196,83,.4));
  animation:pcardRingSpin 9s linear infinite;
}
/* dark gap that carves the gold into a ring band */
.pcard-ava::after{
  content:""; position:absolute; inset:2px; border-radius:999px; z-index:1;
  background:radial-gradient(circle at 50% 30%, rgba(22,32,56,.85), rgba(7,11,22,.98));
}
.pcard-ava-inner{
  position:absolute; inset:3.5px; border-radius:999px; overflow:hidden; z-index:2;
  display:grid; place-items:center;
  /* deeper, more even backdrop so light initials read clearly */
  background:radial-gradient(circle at 50% 38%, #243456 0%, #131d35 58%, #0a1124 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.08), inset 0 -2px 6px rgba(0,0,0,.55);
}
/* glass specular sweep — kept BEHIND the initials so it never washes the text */
.pcard-ava-inner::after{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none; z-index:1;
  background:linear-gradient(150deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 36%);
}
.pcard-ava-inner img{
  position:relative; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block; border-radius:999px;
}
.pcard-ava-inner .initials{
  position:relative; z-index:2;       /* above the gloss sweep */
  font-family:'Plus Jakarta Sans','Syne',sans-serif;
  font-weight:800; font-size:17px; line-height:1; letter-spacing:.04em;
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(120,160,255,.35);
}

/* online presence dot riding the ring (bottom-right) — green dot only, no label */
.pcard-ava .sp-presence-dot{
  position:absolute; right:1px; bottom:1px; z-index:3;
  width:11px; height:11px; border-radius:999px;
  border:2px solid #0a1020;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.pcard-ava .sp-presence-dot.is-active{
  background:#2bd96b; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 6px rgba(43,217,107,.75);
  animation:pcardPulse 2.4s ease-in-out infinite;
}
.pcard-ava .sp-presence-dot.is-idle{ background:#94a3b8; }

/* ── Identity stack ───────────────────────────────────────────────────────── */
.pcard-info{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }

.pcard-name{
  font-family:'Plus Jakarta Sans','Figtree',sans-serif;
  font-weight:700; font-size:14px; line-height:1.15; letter-spacing:-.005em;
  color:#eef3fb !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}

/* ── Team + Role — two readable rows (key + value), neither truncates harshly ── */
.pcard-meta{
  font-family:'Plus Jakarta Sans',sans-serif;
  display:flex; flex-direction:column; gap:3px;
  margin-top:3px; min-width:0;
}
.pcard-mrow{
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:10px; line-height:1.1; letter-spacing:.02em;
}
/* small fixed key tag (ROLE / TEAM) */
.pcard-mk{
  flex:0 0 auto;
  font-size:8px; font-weight:800; letter-spacing:.09em;
  padding:1.5px 5px; border-radius:4px;
  text-transform:uppercase;
}
.pcard-mrole .pcard-mk{
  color:#1a1205;
  background:linear-gradient(135deg, var(--pc-gold-3), var(--pc-gold-2));
  box-shadow:0 1px 3px rgba(200,149,31,.4);
}
.pcard-mteam .pcard-mk{
  color:#bcd0f3;
  background:rgba(120,150,210,.16);
  border:1px solid rgba(120,150,210,.28);
}
/* the value text — clamps with ellipsis but has the full row width to itself */
.pcard-mv{
  min-width:0; flex:1 1 auto;
  font-weight:700; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pcard-mrole .pcard-mv{ color:#f3e3b8 !important; }
.pcard-mteam .pcard-mv{ color:#a9bbdd !important; }

/* ── Star contribution chip (injected by contribution_system) — premium gold ─ */
.pcard .mcs-star-chip{
  align-self:flex-start; margin-top:4px !important;
  padding:2px 8px 2px 6px !important; gap:4px !important;
  font-size:11px !important; border-radius:999px !important;
  background:linear-gradient(135deg, rgba(246,196,83,.20), rgba(200,149,31,.08)) !important;
  border:1px solid rgba(246,196,83,.40) !important;
  box-shadow:0 1px 7px rgba(200,149,31,.18), inset 0 1px 0 rgba(255,233,168,.2) !important;
  color:#ffe6a3 !important; font-weight:700 !important;
}
.pcard .mcs-star-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(255,233,168,.7) !important;
  box-shadow:0 4px 13px rgba(200,149,31,.35), inset 0 1px 0 rgba(255,233,168,.3) !important;
}
.pcard .mcs-star-chip .mcs-star-ic{
  color:#ffd45e !important; filter:drop-shadow(0 0 4px rgba(246,196,83,.7)) !important;
}
.pcard .mcs-star-chip.is-zero{
  opacity:.8; color:#d9c79a !important; border-color:rgba(246,196,83,.24) !important;
  box-shadow:none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────────────── */
@keyframes pcardFrameSheen{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
@keyframes pcardRingSpin{
  to{ transform:rotate(360deg); }
}
@keyframes pcardPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(1.18); opacity:.78; }
}
@keyframes pcardDash{
  0%,100%{ opacity:.35; }
  50%    { opacity:1; }
}

/* Respect reduced-motion: kill the moving sheen/spin/pulse, keep the look */
@media (prefers-reduced-motion: reduce){
  .pcard::before,
  .pcard-ava::before,
  .pcard-ava .sp-presence-dot.is-active{ animation:none !important; }
}

/* Collapsed sidebar: hide the rich frame, show only the avatar centered */
body.sidebar-collapsed .pcard{
  padding:6px; margin:6px auto; background:transparent; box-shadow:none;
}
body.sidebar-collapsed .pcard::before,
body.sidebar-collapsed .pcard::after,
body.sidebar-collapsed .pcard-corner,
body.sidebar-collapsed .pcard-dashes,
body.sidebar-collapsed .pcard-info{ display:none !important; }
body.sidebar-collapsed .pcard-body{ justify-content:center; }