@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}

/* Theme tokens live in /public/styles/themes/<theme>.css and are loaded

   on top of this file. The :root block here is just a safety fallback in

   case no theme stylesheet was loaded yet. */

::selection { background: var(--selection-bg, rgba(185,28,74,0.35)); color: var(--selection-fg, white); }

:root{

  --bg:#020103;

  --glass:var(--tint-1);

  --gb:var(--tint-2);

  --t1:rgba(248,240,240,0.95);

  --t2:rgba(220,210,210,0.55);

  --t3:rgba(195,185,185,0.22);

  --accent:#b91c4a;

  --accent-2:#7f1d1d;

  --ag:var(--brand-glow);

  --success:#22c55e;

  --warn:#f59e0b;

  --danger:#ef4444;

  --pink:#be123c;

  --legendary:#f59e0b;

  --epic:#9f1239;

  --rare:#b91c4a;

  --common:#a8a29e;

  --panel:rgba(8,5,7,0.97);

}

@property --shimmer{syntax:'<angle>';inherits:false;initial-value:0deg}

@property --aura{syntax:'<angle>';inherits:false;initial-value:0deg}

html,body{height:100%;width:100%;overflow:hidden}

body{font-family:'Inter','Vazirmatn',-apple-system,sans-serif;background:var(--bg);color:var(--t1);display:flex;align-items:center;justify-content:center}

:lang(fa),:lang(ar),[dir="rtl"]{font-family:'Vazirmatn','Inter',sans-serif}

#root{display:none}

::-webkit-scrollbar{width:6px;height:6px}

::-webkit-scrollbar-track{background:var(--tint-1);border-radius:3px}

::-webkit-scrollbar-thumb{background:var(--accent);opacity:0.6;border-radius:3px}

::-webkit-scrollbar-thumb:hover{background:var(--accent-2)}

*{scrollbar-width:thin;scrollbar-color:var(--accent) var(--tint-1)}

*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cosmos{position:fixed;inset:0;pointer-events:none;z-index:0}

.stars{position:absolute;inset:0}

.star{position:absolute;background:white;border-radius:50%;animation:twinkle 3s ease-in-out infinite}

.nebula{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.06}

.n1{width:800px;height:800px;top:-400px;right:-200px;background:radial-gradient(circle,#7f1d1d,transparent 70%)}

.n2{width:600px;height:600px;bottom:-300px;left:-150px;background:radial-gradient(circle,#9f1239,transparent 70%)}

.grain{position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:1}

.device-frame{width:min(100vw, calc(100vh * 14 / 9));height:100vh;max-width:100vw;max-height:100vh;display:flex;flex-direction:column;position:relative;z-index:2;overflow:hidden}

.glass-panel{background:var(--glass);backdrop-filter:blur(40px) saturate(150%);-webkit-backdrop-filter:blur(40px) saturate(150%);border-radius:18px;border:1px solid var(--gb);box-shadow:inset 0 1px 0 var(--tint-4),0 20px 40px rgba(0,0,0,0.4);position:relative;overflow:hidden}

.app{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;position:relative}

.app-row{display:flex;flex:1;gap:6px;padding:6px 6px 0;overflow:hidden;min-height:0;position:relative}

/* ============== VOICE USERS SIDEBAR ============== */

.voice-users-sidebar{width:0;opacity:0;display:flex;flex-direction:column;flex-shrink:0;height:100%;min-height:0;overflow:hidden;pointer-events:none;transition:width 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.2s}

.voice-users-sidebar.open{width:74px;opacity:1;pointer-events:auto}

.vu-head{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 8px;border-bottom:1px solid var(--tint-3);flex-shrink:0}

.vu-head-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t2)}

.vu-close{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--t3);transition:all 0.15s}

.vu-close:hover{background:var(--tint-3);color:var(--t1)}

.voice-users-inner{padding:10px 8px;display:flex;flex-direction:column;gap:10px;height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}

.voice-users-inner::-webkit-scrollbar{width:0}

.vu-group{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px dashed var(--tint-3)}

.vu-group:last-child{border-bottom:none}

.vu-group-label{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.42rem;letter-spacing:1.5px;color:var(--t3);text-align:center;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.vu-group.connected .vu-group-label{color:var(--success)}

.vu-group.marked .vu-group-label{color:var(--warn)}

.vu-item{display:flex;align-items:center;justify-content:center;padding:3px;border-radius:10px;transition:background 0.2s;cursor:pointer;position:relative}

.vu-item:hover{background:var(--tint-3)}

.vu-av{width:38px;height:38px;border-radius:50%;background:var(--tint-3);display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:600;position:relative;border:1.5px solid var(--tint-5);transition:all 0.2s;background-size:cover;background-position:center;overflow:hidden}

.vu-av .vu-s{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg)}

.vu-s.on{background:var(--success)}

.vu-s.off{background:var(--danger)}

.vu-s.idle{background:var(--warn)}

.vu-item.speaking .vu-av{border-color:var(--success);box-shadow:0 0 12px rgba(34,197,94,0.5)}

/* Mirror the carousel avatar's connecting-state indicator on the
 * Voice Users sidebar avatars too. Same colour rules: warn ring +
 * dimmed surface for connecting/reconnecting, danger ring for
 * failed. The .orb-av-dots overlay above slots straight into the
 * existing avatar wrapper. */
.vu-av[data-peer-state="connecting"],
.vu-av[data-peer-state="reconnecting"]{
  opacity:0.55;
  border-color:var(--warn)!important;
  box-shadow:0 0 12px rgba(245,158,11,0.5)!important;
}
.vu-av[data-peer-state="failed"]{
  opacity:0.55;
  border-color:var(--danger)!important;
  box-shadow:0 0 12px rgba(239,68,68,0.55)!important;
}

.vu-item.dim{opacity:0.55}

.vu-item.muted-by-me .vu-av{filter:grayscale(0.6) brightness(0.7)}

.vu-item.muted-by-me .vu-av::after{content:'';position:absolute;left:8%;right:8%;top:50%;height:3px;background:var(--danger);box-shadow:0 0 4px rgba(239,68,68,0.7);transform:translateY(-50%) rotate(-22deg);border-radius:2px;z-index:3;pointer-events:none}

.vu-item::after{content:attr(data-name);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);background:var(--panel);border:1px solid var(--tint-4);padding:5px 9px;border-radius:8px;white-space:nowrap;font-size:0.65rem;color:var(--t1);box-shadow:0 12px 36px rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity 0.15s,transform 0.15s;z-index:50}

.vu-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

.vu-empty{font-size:0.55rem;color:var(--t3);text-align:center;padding:8px 4px;font-style:italic;line-height:1.4}

/* Members sidebar (server members) - right-side, toggleable, mirrors voice-users-sidebar */

.members-sidebar{width:0;opacity:0;display:flex;flex-direction:column;flex-shrink:0;height:100%;min-height:0;overflow:hidden;pointer-events:none;transition:width 0.3s cubic-bezier(0.4,0,0.2,1),opacity 0.2s;border-left:1px solid var(--tint-3);background:rgba(0,0,0,0.18)}

.members-sidebar.open{width:230px;opacity:1;pointer-events:auto}

.ms-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--tint-3);flex-shrink:0}

.ms-head-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.8px;color:var(--t1);display:flex;align-items:center;gap:6px}

.ms-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--t3);transition:all 0.15s}

.ms-close:hover{background:var(--tint-3);color:var(--t1)}

.ms-inner{flex:1;overflow-y:auto;padding:8px 6px;display:flex;flex-direction:column;gap:14px}

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

.ms-group-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t3);padding:4px 10px 6px;display:flex;align-items:center;justify-content:space-between}

.ms-group-h .ms-count{color:var(--t2)}

.ms-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;cursor:pointer;transition:background 0.15s}

.ms-row:hover{background:var(--tint-2)}

.ms-av{width:30px;height:30px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;color:white;border:1.5px solid var(--tint-4);flex-shrink:0;position:relative}

.ms-av.online::after{content:'';position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--bg)}

.ms-av.admin{border-color:var(--warn);box-shadow:0 0 8px rgba(245,158,11,0.4)}

.ms-name{flex:1;min-width:0;font-size:0.74rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============== ORB COLUMN ============== */

.orb-col{width:240px;min-width:220px;display:flex;flex-direction:column;padding:14px 10px;flex-shrink:0;position:relative}

.orb-slide.empty-state .planet{filter:saturate(0) brightness(0.55)!important;background:radial-gradient(circle at 35% 30%,var(--tint-5),#2a2a32 55%,#0a0a0f)!important;box-shadow:none!important}

.orb-slide.empty-state .atmo,.orb-slide.empty-state .lring,.orb-slide.empty-state .otrack,.orb-slide.empty-state .orbiter{opacity:0.18}

.orb-slide.empty-state .vlabel{color:var(--t3);background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;background-clip:initial}

.orb-slide.empty-state .vstatus{color:var(--t3)}

.orb-slide.empty-state .vstatus::before{background:var(--t3);animation:none}

.orb-col.is-empty .orb-actions,.orb-col.is-empty .otimer,.orb-col.is-empty .orb-hud,.orb-col.is-empty .orb-edit-btn,.orb-col.is-empty .orb-nav-arrow,.orb-col.is-empty .marked-channels{display:none!important}

/* Loading state: same chrome reduction as is-empty so we don't show
 * action buttons that won't apply yet. CREATE/JOIN stay hidden until
 * the first hydrate completes and the real "no orbits" state kicks in. */
.orb-col.is-loading .orb-actions,
.orb-col.is-loading .otimer,
.orb-col.is-loading .orb-hud,
.orb-col.is-loading .orb-edit-btn,
.orb-col.is-loading .orb-nav-arrow,
.orb-col.is-loading .marked-channels,
.orb-col.is-loading #orbEmptyActions{display:none!important}

.orb-col.is-empty .orb-conn-banner{cursor:default}

.orb-col.is-empty #orbEmptyActions{display:flex!important}

.orb-empty-actions{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:12px}

.orb-empty-actions .ob-empty-btn{width:100%;padding:9px 10px;border-radius:10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid;cursor:pointer;transition:all 0.18s}

.orb-empty-actions .ob-empty-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(185,28,74,0.35)}

.orb-empty-actions .ob-empty-btn.primary:hover{box-shadow:0 6px 18px rgba(185,28,74,0.5)}

.orb-empty-actions .ob-empty-btn.cancel{background:var(--tint-2);color:var(--t2);border-color:var(--gb)}

.orb-empty-actions .ob-empty-btn.cancel:hover{background:var(--tint-4);color:var(--t1)}

.orb-col.disconnected .planet,.orb-col.disconnected .atmo{filter:saturate(0.4) brightness(0.7)}

.orb-conn-banner{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;margin-bottom:8px;align-self:center;border:1px solid;transition:all 0.3s;cursor:pointer}

.orb-conn-banner.connected{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:var(--success)}

.orb-conn-banner.disconnected{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.2);color:var(--danger)}

.orb-conn-banner .banner-pulse{width:6px;height:6px;border-radius:50%;background:currentColor}

.orb-conn-banner.connected .banner-pulse{animation:blink 1.5s infinite;box-shadow:0 0 6px currentColor}

.orb-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:10px}

.orb-top-title{display:flex;align-items:center;gap:5px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t2)}

.orb-edit-btn{display:flex;align-items:center;gap:4px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;color:var(--t3);padding:4px 8px;border-radius:6px;transition:all 0.2s}

.orb-edit-btn:hover{background:var(--tint-3);color:var(--t1)}

.orb-edit-btn.active{color:var(--accent);background:rgba(185,28,74,0.12)}

.orb-nav{display:flex;align-items:center;width:100%;margin-bottom:8px;gap:4px}

.orb-nav-arrow{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all 0.2s;flex-shrink:0;background:var(--tint-2);border:1px solid var(--tint-3)}

.orb-nav-arrow:hover{background:var(--tint-4);color:var(--t1);border-color:var(--tint-5)}

.orb-nav-arrow:active{transform:scale(0.92)}

.orb-nav-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 6px}

.orb-dot{width:6px;height:6px;border-radius:50%;background:var(--tint-6);cursor:pointer;transition:all 0.3s}

.orb-dot.active{width:18px;border-radius:3px;background:var(--accent);box-shadow:0 0 8px var(--ag)}

.orb-dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}

.orb-dot.marked{background:var(--warn);box-shadow:0 0 6px rgba(245,158,11,0.5)}

.orb-dot.legendary{background:var(--legendary);box-shadow:0 0 6px var(--legendary)}

.orb-dot:hover{background:var(--tint-9)}

.orb-carousel{width:100%;overflow:hidden;position:relative;cursor:grab;-webkit-user-select:none;user-select:none}

.orb-carousel.dragging{cursor:grabbing}

.orb-slides{display:flex;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);width:100%}

.orb-carousel.dragging .orb-slides{transition:none}

.orb-slide{width:100%;flex-shrink:0;display:flex;flex-direction:column;align-items:center;position:relative;padding:4px 0}

.orb-wrap{width:200px;height:200px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}

.orb-wrap:active .planet{transform:scale(0.95)}

.planet{width:80px;height:80px;border-radius:50%;position:relative;z-index:10;overflow:hidden;transition:transform 0.15s,filter 0.5s}

.atmo{position:absolute;width:120px;height:120px;border-radius:50%;transition:opacity 0.5s,filter 0.5s;animation:apulse 4s ease-in-out infinite}

.lring{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid;animation:rex 3s ease-out infinite;transition:border-color 0.5s,opacity 0.5s}

.lring:nth-child(2){animation-delay:1s}

.lring:nth-child(3){animation-delay:2s}

.otrack{position:absolute;width:160px;height:160px;border-radius:50%;border:1px dashed;transition:border-color 0.5s,opacity 0.5s}

.orbiter{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;animation:orbi 15s linear infinite;transition:opacity 0.5s}

.orb-av{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border:2px solid;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:600;animation:corbi 15s linear infinite;transition:border-color 0.5s,box-shadow 0.3s;overflow:hidden;background-size:cover;background-position:center}

.orb-av.speaking{border-color:var(--success)!important;box-shadow:0 0 16px rgba(34,197,94,0.6)!important}

/* While the WebRTC peer connection to this user is still negotiating,
 * paint a three-dot loader on top of the avatar (and dim the avatar a
 * touch so the dots read clearly). The CSS-only animation cycles
 * three dots staggered 0/150/300 ms. */
.orb-av[data-peer-state="connecting"],
.orb-av[data-peer-state="reconnecting"]{
  opacity:0.55;
  border-color:var(--warn)!important;
  box-shadow:0 0 12px rgba(245,158,11,0.5)!important;
}
.orb-av[data-peer-state="failed"]{
  opacity:0.55;
  border-color:var(--danger)!important;
  box-shadow:0 0 12px rgba(239,68,68,0.55)!important;
}
.orb-av-dots{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:3px;
  pointer-events:none;
}
.orb-av-dots span{
  width:5px;height:5px;border-radius:50%;
  background:#fff;
  opacity:0.35;
  animation:orb-av-dots-bounce 1s ease-in-out infinite;
}
.orb-av-dots span:nth-child(2){animation-delay:0.15s}
.orb-av-dots span:nth-child(3){animation-delay:0.3s}
@keyframes orb-av-dots-bounce{
  0%,80%,100%{transform:translateY(0);opacity:0.35}
  40%{transform:translateY(-3px);opacity:1}
}

.orb-slide.connected .planet{box-shadow:0 0 60px rgba(34,197,94,0.5),0 0 120px rgba(34,197,94,0.2),inset 0 0 40px var(--tint-7)}

.orb-slide.marked .planet{box-shadow:0 0 70px rgba(245,158,11,0.4),0 0 130px rgba(245,158,11,0.18),inset 0 0 40px rgba(255,255,255,0.22)}

.orb-slide.marked .vstatus{color:var(--warn)}

.orb-slide.inactive .planet{filter:saturate(0.3) brightness(0.7)}

.orb-slide.inactive .atmo{filter:saturate(0.3);opacity:0.4}

.orb-slide.inactive .lring{opacity:0.3;filter:saturate(0.3)}

.orb-slide.empty .orbiter{opacity:0;pointer-events:none}

.orb-slide.empty .lring{opacity:0.15}

.orb-slide.empty .otrack{opacity:0.15}

.orb-slide.empty .planet{filter:saturate(0.2) brightness(0.5)}

.orb-slide.empty .atmo{opacity:0.2;filter:saturate(0.2)}

.orb-slide.legendary .planet{box-shadow:0 0 80px rgba(245,158,11,0.55),0 0 160px rgba(245,158,11,0.25),inset 0 0 40px rgba(255,236,179,0.4)!important;animation:legPulse 4s ease-in-out infinite}

.orb-slide.legendary .atmo{background:radial-gradient(circle,rgba(245,158,11,0.55),rgba(190,18,60,0.2),transparent 70%)!important}

.legendary-aura{position:absolute;width:170px;height:170px;border-radius:50%;background:conic-gradient(from var(--aura),#f59e0b,#fb7185,#f59e0b);filter:blur(18px);opacity:0.55;animation:auraSpin 8s linear infinite}

.legendary-sweep{position:absolute;width:100%;height:1px;background:linear-gradient(90deg,transparent,#fef3c7,transparent);top:50%;transform-origin:50% 50%;animation:legSweep 5s linear infinite;opacity:0.7}

.legendary-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#fef3c7;box-shadow:0 0 6px #f59e0b;top:50%;left:50%}

.lp1{animation:lpf1 6s linear infinite}

.lp2{animation:lpf2 7s linear infinite}

.lp3{animation:lpf3 8s linear infinite}

.lp4{animation:lpf4 9s linear infinite}

.lp5{animation:lpf5 10s linear infinite}

.lp6{animation:lpf6 11s linear infinite}

@keyframes legPulse{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(15deg)}}

@keyframes auraSpin{to{--aura:360deg}}

@keyframes legSweep{to{transform:rotate(360deg)}}

@keyframes lpf1{from{transform:rotate(0deg) translateX(75px) rotate(0deg)}to{transform:rotate(360deg) translateX(75px) rotate(-360deg)}}

@keyframes lpf2{from{transform:rotate(60deg) translateX(85px) rotate(-60deg)}to{transform:rotate(420deg) translateX(85px) rotate(-420deg)}}

@keyframes lpf3{from{transform:rotate(120deg) translateX(70px) rotate(-120deg)}to{transform:rotate(-240deg) translateX(70px) rotate(240deg)}}

@keyframes lpf4{from{transform:rotate(180deg) translateX(90px) rotate(-180deg)}to{transform:rotate(540deg) translateX(90px) rotate(-540deg)}}

@keyframes lpf5{from{transform:rotate(240deg) translateX(78px) rotate(-240deg)}to{transform:rotate(-120deg) translateX(78px) rotate(120deg)}}

@keyframes lpf6{from{transform:rotate(300deg) translateX(82px) rotate(-300deg)}to{transform:rotate(660deg) translateX(82px) rotate(-660deg)}}

.orb-slide .badge-row{display:flex;gap:4px;justify-content:center;margin-bottom:4px;min-height:14px;flex-wrap:wrap}

.orb-slide .obadge{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;padding:2px 7px;border-radius:4px;letter-spacing:1px;display:inline-flex;align-items:center;gap:3px}

.orb-slide .obadge.live{color:var(--success);background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3)}

.orb-slide .obadge.live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);animation:blink 1.5s infinite;box-shadow:0 0 4px var(--success)}

.orb-slide .obadge.marked{color:var(--warn);background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3)}

.orb-slide .obadge.fav{color:var(--accent);background:rgba(185,28,74,0.12);border:1px solid rgba(185,28,74,0.3)}

.orb-slide .obadge.legendary{color:var(--legendary);background:linear-gradient(90deg,rgba(245,158,11,0.18),rgba(190,18,60,0.18));border:1px solid rgba(245,158,11,0.4);font-weight:700}

.orb-col.edit-mode .orb-slide:not(.default-channel) .orb-wrap::before{content:'';position:absolute;inset:-8px;border:2px dashed var(--accent);border-radius:50%;opacity:0.6;animation:editPulse 2s ease-in-out infinite}

@keyframes editPulse{0%,100%{transform:scale(1);opacity:0.4}50%{transform:scale(1.05);opacity:0.7}}

.vlabel{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;letter-spacing:2px;color:var(--t1);text-align:center;margin-top:10px;font-weight:700}

/* Flowing gradient that drifts colour across the text. Used by the
 * legendary tier label AND by every server/category/channel name in
 * the world view, so the whole hierarchy reads as one branded family. */
@keyframes vlabelFlow{
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

.orb-slide.legendary .vlabel{
  background:linear-gradient(90deg,#fef3c7,#f59e0b,#ec4899,#a78bfa,#fef3c7);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vlabelFlow 7s linear infinite;
}



.orb-slide.skin-ice .planet{box-shadow:0 0 80px rgba(125,211,252,0.55),0 0 160px rgba(125,211,252,0.3),inset 0 0 40px rgba(224,242,254,0.5)!important;animation:legPulse 4s ease-in-out infinite}

.orb-slide.skin-ice .atmo{background:radial-gradient(circle,rgba(125,211,252,0.6),rgba(186,230,253,0.2),transparent 70%)!important}

.orb-slide.skin-ice .legendary-aura{background:conic-gradient(from var(--aura),#7dd3fc,#bae6fd,#0ea5e9,#7dd3fc)}

.orb-slide.skin-ice .legendary-particle{background:#e0f2fe;box-shadow:0 0 6px #7dd3fc}

.orb-slide.skin-ice .legendary-sweep{background:linear-gradient(90deg,transparent,#e0f2fe,transparent)}

.orb-slide.skin-ice .vlabel{background:linear-gradient(90deg,#e0f2fe,#7dd3fc,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.orb-slide.skin-tree .planet{box-shadow:0 0 80px rgba(74,222,128,0.55),0 0 160px rgba(74,222,128,0.25),inset 0 0 40px rgba(187,247,208,0.45)!important;animation:legPulse 4s ease-in-out infinite}

.orb-slide.skin-tree .atmo{background:radial-gradient(circle,rgba(74,222,128,0.55),rgba(132,204,22,0.2),transparent 70%)!important}

.orb-slide.skin-tree .legendary-aura{background:conic-gradient(from var(--aura),#4ade80,#86efac,#22c55e,#4ade80)}

.orb-slide.skin-tree .legendary-particle{background:#bbf7d0;box-shadow:0 0 6px #4ade80}

.orb-slide.skin-tree .legendary-sweep{background:linear-gradient(90deg,transparent,#bbf7d0,transparent)}

.orb-slide.skin-tree .vlabel{background:linear-gradient(90deg,#bbf7d0,#4ade80,#15803d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.orb-slide.skin-flame .planet{box-shadow:0 0 90px rgba(249,115,22,0.65),0 0 180px rgba(239,68,68,0.3),inset 0 0 42px rgba(254,215,170,0.55)!important;animation:legPulse 3s ease-in-out infinite}

.orb-slide.skin-flame .atmo{background:radial-gradient(circle,rgba(249,115,22,0.65),rgba(239,68,68,0.25),transparent 70%)!important}

.orb-slide.skin-flame .legendary-aura{background:conic-gradient(from var(--aura),#f97316,#ef4444,#fbbf24,#f97316)}

.orb-slide.skin-flame .legendary-particle{background:#fed7aa;box-shadow:0 0 8px #f97316}

.orb-slide.skin-flame .legendary-sweep{background:linear-gradient(90deg,transparent,#fed7aa,transparent)}

.orb-slide.skin-flame .vlabel{background:linear-gradient(90deg,#fed7aa,#f97316,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.orb-slide.skin-fire .vlabel{background:linear-gradient(90deg,#fef3c7,#fbbf24,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Rainbow voice skin — white core, animated rainbow halo + outer wave,
 * label gets the same flowing gradient as the rest of the rainbow pack.
 * Same recipe everywhere the orb appears (orb-slide planet, server cat
 * voice orb, marked orbits) so RAINBOW reads as a built-in tier. */
@keyframes cz-aurora-flow-core {
  0%   { background-position:   0% 50%; }
  100% { background-position: 400% 50%; }
}
@keyframes cz-aurora-spin-core {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orb-slide.skin-aurora .vlabel{
  background:linear-gradient(90deg,#ff7eb6,#ffb88c,#fff0a8,#ffffff,#ffb6e6,#ff7eb6);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:cz-aurora-flow-core 4.5s ease-in-out infinite;
}
.orb-slide.skin-aurora .planet{
  background:radial-gradient(circle at 35% 30%,#ffffff,#f8f0ff 50%,#ece6ff 100%) !important;
  box-shadow:
    0 0 60px rgba(255,160,210,0.6),
    0 0 140px rgba(255,196,140,0.45),
    inset 0 -3px 18px rgba(180,80,255,0.18),
    inset 0 1px 6px rgba(255,255,255,0.95) !important;
  animation:none !important;
  position:relative;
}
.orb-slide.skin-aurora .planet::before,
.orb-slide.skin-aurora .planet::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.orb-slide.skin-aurora .planet::before{
  inset:-12px;
  background:conic-gradient(#ff7eb6,#ffb88c,#fff0a8,#ffffff,#ffb6e6,#ff7eb6);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 64%);
          mask:radial-gradient(circle,transparent 60%,#000 64%);
  animation:cz-aurora-spin-core 4s linear infinite;
}
.orb-slide.skin-aurora .planet::after{
  inset:-30px;
  background:conic-gradient(rgba(255,126,182,0.5),rgba(255,184,140,0.5),rgba(255,240,168,0.5),rgba(255,255,255,0.5),rgba(255,182,230,0.5),rgba(255,126,182,0.5));
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 60%,transparent 75%);
          mask:radial-gradient(circle,transparent 56%,#000 60%,transparent 75%);
  animation:cz-aurora-spin-core 6s linear infinite reverse;
  filter:blur(2px);
}
.orb-slide.skin-aurora .atmo{
  background:radial-gradient(circle,rgba(255,160,210,0.55),rgba(122,59,255,0.25),transparent 70%) !important;
}

/* Voice-list orb (server category row) for the AURORA style. Per
 * design feedback the dramatic conic-ring effect is reserved for the
 * orbits column; here we keep just a soft pink/amber halo so the row
 * stays compact and consistent with the other small orb tiers. */
.ws-cat-vc.style-aurora .ws-cat-vc-orb,
.ws-vc-orb.skin-aurora,
.style-aurora .ws-cat-vc-orb{
  background:radial-gradient(circle at 35% 30%,#ffffff,#fff0f8 50%,#ffe1d6 100%) !important;
  box-shadow:
    0 0 22px rgba(255,160,210,0.55),
    0 0 46px rgba(255,196,140,0.35),
    inset 0 -3px 10px rgba(255,170,200,0.18),
    inset 0 1px 4px rgba(255,255,255,0.9) !important;
}
/* Voice channel name picks up the rainbow when the orb is rainbow. */
.ws-cat-vc.style-aurora .ws-cat-vc-n{
  background:linear-gradient(90deg,#ff7eb6,#ffb88c,#fff0a8,#ffffff,#ffb6e6,#ff7eb6);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:cz-aurora-flow-core 4.5s ease-in-out infinite;
}

/* Marked orbit card: the small mo-orb mirrors the same look. */
.mark-orb-card.skin-aurora .mo-orb,
.mark-orb-card .mo-orb.skin-aurora{
  background:radial-gradient(circle at 35% 30%,#ffffff,#f8f0ff 50%,#ece6ff 100%) !important;
  box-shadow:
    0 0 18px rgba(255,160,210,0.45),
    inset 0 -3px 8px rgba(180,80,255,0.15),
    inset 0 1px 3px rgba(255,255,255,0.85) !important;
  position:relative;
}
.mark-orb-card.skin-aurora .mo-orb::before{
  content:"";
  position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(#ff7eb6,#ffb88c,#fff0a8,#ffffff,#ffb6e6,#ff7eb6);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 64%);
          mask:radial-gradient(circle,transparent 60%,#000 64%);
  animation:cz-aurora-spin-core 4s linear infinite;
  pointer-events:none;
}

/* Create-channel orb-style card preview. */
.cc-orb-card.skin-aurora .cc-orb-bead{
  background:radial-gradient(circle at 35% 30%,#ffffff,#f8f0ff 50%,#ece6ff 100%) !important;
  position:relative;
}
.cc-orb-card.skin-aurora .cc-orb-bead::before{
  content:"";
  position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(#ff7eb6,#ffb88c,#fff0a8,#ffffff,#ffb6e6,#ff7eb6);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 62%);
          mask:radial-gradient(circle,transparent 58%,#000 62%);
  animation:cz-aurora-spin-core 4s linear infinite;
  pointer-events:none;
}

.vstatus{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:5px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px}

.vstatus.connected{color:var(--success)}

.vstatus::before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%}

.vstatus.connected::before{animation:blink 1.5s infinite}

.orb-actions{display:flex;gap:8px;margin-top:14px;justify-content:center}

.ob{width:38px;height:38px;border-radius:50%;background:var(--tint-3);border:1px solid var(--tint-5);display:flex;align-items:center;justify-content:center;transition:all 0.25s;color:var(--t2)}

.ob:hover{background:var(--tint-5);transform:scale(1.08);color:var(--t1)}

.ob.primary{background:linear-gradient(135deg,var(--success),#16a34a);color:white;border-color:transparent;box-shadow:0 4px 14px rgba(34,197,94,0.35)}

.ob.primary:hover{box-shadow:0 6px 20px rgba(34,197,94,0.5)}

.ob.danger{background:rgba(239,68,68,0.15);color:var(--danger);border-color:rgba(239,68,68,0.3)}

.ob.danger:hover{background:rgba(239,68,68,0.28);color:var(--danger)}

.ob.muted-state{background:rgba(239,68,68,0.2);color:var(--danger);border-color:rgba(239,68,68,0.4)}

.orb-meta{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px}

.otimer{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t2);letter-spacing:1px}

.otimer.active{color:var(--success)}

/* Compact pill below the call timer that mirrors the live WebRTC
 * connection state (connecting / connected / reconnecting / failed).
 * Replaces the old red-spin-on-disconnect button as the place to
 * read the real status. */
.ovstatus{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:999px;
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.5rem;letter-spacing:1.4px;font-weight:700;
  text-transform:uppercase;
  background:var(--tint-2);border:1px solid var(--tint-3);
  color:var(--t2);
  transition:background 0.2s,border-color 0.2s,color 0.2s;
}
.ovstatus-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.ovstatus.is-connecting,.ovstatus.is-reconnecting{
  color:var(--warn);
  border-color:rgba(245,158,11,0.45);
  background:rgba(245,158,11,0.08);
}
.ovstatus.is-connecting .ovstatus-dot,
.ovstatus.is-reconnecting .ovstatus-dot{
  animation:ovstatus-pulse 1.2s ease-in-out infinite;
  box-shadow:0 0 6px currentColor;
}
.ovstatus.is-connected{
  color:var(--success);
  border-color:rgba(34,197,94,0.45);
  background:rgba(34,197,94,0.08);
}
.ovstatus.is-connected .ovstatus-dot{box-shadow:0 0 6px currentColor}
.ovstatus.is-failed{
  color:var(--danger);
  border-color:rgba(239,68,68,0.45);
  background:rgba(239,68,68,0.10);
}
.ovstatus.is-failed .ovstatus-dot{box-shadow:0 0 6px currentColor}
@keyframes ovstatus-pulse{0%,100%{opacity:1}50%{opacity:0.35}}

.orb-hud{display:flex;gap:12px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3)}

.orb-hud span{display:flex;align-items:center;gap:3px}

/* Ping colouring on the orb HUD. Green when <80ms, amber 80-200,
 * red over 200. The icon inside inherits via currentColor so we
 * don't have to override it separately. */
.orb-hud .ping-good{color:var(--success)}
.orb-hud .ping-okay{color:var(--warn)}
.orb-hud .ping-bad {color:var(--danger)}

.marked-channels{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--tint-3);width:100%}

.mc-label{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;letter-spacing:1.5px;color:var(--t3);padding:0 4px;display:flex;align-items:center;justify-content:space-between}

.mc-label .mc-count{color:var(--warn)}

.mc-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto}

.mc-list::-webkit-scrollbar{width:0}

.mc-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.15);cursor:pointer;transition:all 0.2s;position:relative}

.mc-item:hover{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.25)}

.mc-item.active{background:rgba(34,197,94,0.10);border-color:rgba(34,197,94,0.3)}

.mc-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0}

.mc-item.active .mc-dot{background:var(--success);box-shadow:0 0 6px var(--success)}

.mc-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t1);letter-spacing:1px;flex:1;text-align:left}

.mc-count-badge{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);background:var(--tint-3);padding:1px 5px;border-radius:6px}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;container-type:inline-size}

.page{display:none;flex-direction:column;height:100%;overflow:hidden}

.page.active{display:flex}

/* Fixed-height page header so opening / closing the server rail (which
 * inserts a row of 36px orbs) doesn't push the header taller. The rail
 * sits inside .ph-left at min-height 0 so its 36px orbs fit cleanly
 * within the 60px header without shifting siblings. */
.page-header{padding:14px 18px;border-bottom:1px solid var(--tint-2);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;min-height:60px;height:60px;box-sizing:border-box}

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

.ph-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.85rem;letter-spacing:2px;display:flex;align-items:center;gap:8px;color:var(--t1)}

.ph-sep{width:1px;height:14px;background:var(--tint-5)}

.ph-sub{font-size:0.7rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ph-right{display:flex;align-items:center;gap:4px;flex-shrink:0}

.ph-icon-btn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all 0.2s;position:relative}

.ph-icon-btn:hover{background:var(--tint-3);color:var(--t1)}

.ph-icon-btn.active{background:rgba(185,28,74,0.15);color:var(--accent)}

.ph-icon-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--danger)}

/* PURPLE ORB + SERVER RAIL (in page header / left of title) */

/* Header orb (click-target that opens the server rail). Faded-red ball
 * with a soft warm hot-spot at top-left, a faded-red core, and a
 * brand-red base. The same shading recipe is mirrored on the default
 * avatar, voice orbs, marked orbits, etc. via class .orb-shaded. */
.ph-purple-orb{
  width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,200,200,0.45), transparent 38%),
    radial-gradient(circle at 50% 50%, #c2384a 0%, var(--accent) 50%, var(--accent-2) 100%);
  box-shadow:
    0 0 20px var(--brand-glow),
    inset 0 -2px 6px rgba(0,0,0,0.45),
    inset 0 1px 2px rgba(255,200,200,0.3);
  position:relative;cursor:pointer;flex-shrink:0;transition:transform 0.2s;
}

.ph-purple-orb::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(190,18,60,0.4);animation:hospin 8s linear infinite;pointer-events:none}

/* Shared depth pseudo-overlay: each shaded orb gets a `::after` ring
 * with inset shadows that simulate sphere depth (dark rim at the
 * bottom, tiny warm highlight at the top). Using ::after means we
 * don't have to rewrite each class's existing box-shadow chain. The
 * orbs we tag with .orb-shaded show a uniform sphere look across the
 * app: header orb, default avatars, voice orbs, marked orbits, the
 * profile modal core, world hero, etc. */
.modal-orb-core::before,
.profile-orb-core::before,
.ws-emblem::before,
.ws-vc-orb::before,
.world-hero-emblem::before,
.world-empty-core::before,
.dm-empty-orb-core::before,
.dm-head-av::before,
.mark-orb-card .mo-orb::before{
  content:"";
  position:absolute;inset:0;border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 -3px 8px rgba(0,0,0,0.4),
    inset 0 1px 2px rgba(255,200,200,0.25);
}
/* When JS paints a real avatar/image into the orb (background-image is
 * set inline), drop the depth pseudo-overlay so the picture reaches
 * edge-to-edge instead of being framed by a dark rim. Same trick as
 * the profile modal — applied across every orb class so any avatar
 * upload looks the same everywhere. */
.modal-orb-core[style*="url("]::before,
.profile-orb-core[style*="url("]::before,
.ws-emblem[style*="url("]::before,
.ws-vc-orb[style*="url("]::before,
.world-hero-emblem[style*="url("]::before,
.world-empty-core[style*="url("]::before,
.dm-empty-orb-core[style*="url("]::before,
.dm-head-av[style*="url("]::before,
.mark-orb-card .mo-orb[style*="url("]::before{
  display:none;
}
/* Same idea for the orb classes' own inset shadows: when an image is
 * the background, the inner highlight + tint-7 ring frames the picture
 * inside the circle. Strip the inset portions but keep the outer glow
 * so the orb still "lights up" without cropping the photo. */
.modal-orb-core[style*="url("],
.profile-orb-core[style*="url("],
.ws-emblem[style*="url("],
.ws-vc-orb[style*="url("],
.world-hero-emblem[style*="url("],
.world-empty-core[style*="url("],
.dm-empty-orb-core[style*="url("],
.dm-head-av[style*="url("],
.mark-orb-card .mo-orb[style*="url("]{
  border:none;
}
/* The orb classes that bake an inset glow into their box-shadow chain
 * need that inset stripped explicitly when the user supplied a photo.
 * We keep the outer glow by re-stating only the outer drop shadow. */
.ws-emblem[style*="url("]      { box-shadow: 0 0 36px var(--srv-glow,rgba(185,28,74,0.5)); }
.ws-vc-orb[style*="url("]      { box-shadow: 0 0 20px var(--vc-glow,var(--brand-glow)); }
.world-hero-emblem[style*="url("] { box-shadow: 0 0 30px rgba(185,28,74,0.5); }
.dm-empty-orb-core[style*="url("] { box-shadow: 0 0 28px rgba(185,28,74,0.5); }
.modal-orb-core[style*="url("] { box-shadow: 0 0 50px var(--profile-orb-glow,var(--brand-glow-strong)); }
.mark-orb-card .mo-orb[style*="url("] { box-shadow: 0 0 22px var(--card-orb-glow,rgba(190,18,60,0.4)); }
.dm-head-av[style*="url("]     { box-shadow: 0 0 18px rgba(185,28,74,0.3); }

.ph-purple-orb:hover{transform:scale(1.06)}

.ph-purple-orb.active{box-shadow:0 0 28px rgba(190,18,60,0.85),inset 0 0 12px var(--tint-9)}

/* Server rail expands horizontally with a quick, subtle fade. The
 * vertical size of the header is fixed by .page-header (height:60px)
 * so the rail itself never makes the header grow — only the orb row
 * fades and slides in from the left. We use display:flex always with
 * a max-width / opacity / translate transition so the row can be
 * animated; max-width also clips overflow so the row doesn't push
 * the right-side controls when collapsed. */
/* The rail collapses BACK toward the orb on close, not outward to the
 * right. We anchor with transform-origin:left and animate max-width +
 * opacity only. justify-content:flex-start keeps the orbs hugging the
 * left edge while max-width shrinks, so the row appears to retract
 * straight into the purple orb instead of sliding rightward. */
.ph-server-rail{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  overflow:hidden;scrollbar-width:none;
  flex:0 1 0;padding:4px 0;
  max-width:0;opacity:0;
  transform-origin:left center;
  pointer-events:none;
  transition:max-width 0.24s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease;
}

.ph-server-rail::-webkit-scrollbar{display:none}

.ph-server-rail.open{
  max-width:600px;
  opacity:1;
  pointer-events:auto;
  flex:1 1 auto;
  overflow-x:auto;overflow-y:hidden;
}

.srv-orb{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:0.75rem;color:white;cursor:pointer;flex-shrink:0;border:2px solid transparent;transition:all 0.2s;position:relative;background:var(--srv-grad,linear-gradient(135deg,#6366f1,#1e1b4b));overflow:hidden}

.srv-orb.has-image{font-size:0;background:var(--panel)}

.srv-orb-img{position:absolute;inset:0;background-size:cover;background-position:center}

.srv-orb:hover{transform:translateY(-2px) scale(1.18);border-color:var(--tint-9);z-index:5;box-shadow:0 6px 20px rgba(0,0,0,0.5)}

.srv-orb.active{border-color:rgba(255,255,255,0.8)}

.srv-orb.is-pinned{box-shadow:0 0 14px var(--srv-glow,rgba(185,28,74,0.6))}

.srv-orb.is-pinned.active{box-shadow:0 0 18px var(--srv-glow,rgba(185,28,74,0.8))}

.srv-orb.gray{background:var(--tint-2);border:2px dashed var(--tint-7);color:var(--t2)}

.srv-orb.gray:hover{border-color:rgba(185,28,74,0.5);color:var(--accent)}

.srv-orb-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--panel);border:1px solid var(--tint-5);padding:5px 9px;border-radius:7px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1px;white-space:nowrap;color:var(--t1);opacity:0;pointer-events:none;transition:opacity 0.15s,transform 0.15s;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,0.5);font-weight:600}

.srv-orb:hover .srv-orb-tip{opacity:1;transform:translateX(-50%) translateY(0)}



.ph-default-text{display:flex;align-items:center;gap:10px;min-width:0;flex:1;transition:opacity 0.25s}

.ph-default-text.hidden{display:none}

/* ============== HOME PAGE ============== */

.home-pane{flex:1;overflow-y:auto;padding:0}

.home-hero{position:relative;padding:24px 22px 22px;overflow:hidden;border-bottom:1px solid var(--tint-2);background:var(--hero-bg,radial-gradient(ellipse at 80% 20%,var(--ag),transparent 55%),radial-gradient(ellipse at 10% 100%,var(--ag),transparent 55%))}

.home-hero-cover{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 0.25s;pointer-events:none;z-index:0}

.home-hero-cover::after{content:'';position:absolute;inset:0;background:var(--cover-scrim)}

.home-hero.has-identity .home-hero-cover{opacity:1}

.home-hero-toggle{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,0.45);border:1px solid var(--gb);color:var(--t2);display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;transition:all 0.15s}

.home-hero-toggle:hover{background:rgba(0,0,0,0.7);color:var(--t1);border-color:var(--brand-glow)}

.home-hero.has-identity .home-hero-toggle{color:var(--accent);border-color:rgba(185,28,74,0.5)}

.home-hero-orb-letter{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-weight:700;color:#fff;font-size:1.6rem;text-shadow:0 0 8px rgba(0,0,0,0.5);position:relative;z-index:2;display:none}

.home-hero.has-identity .home-hero-orb-letter{display:block}

.home-hero-orb{display:flex;align-items:center;justify-content:center}

.home-hero::before{content:'';position:absolute;top:0;right:0;width:280px;height:280px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='100' cy='100' r='95' fill='none' stroke='%236366f1' stroke-width='0.4' opacity='0.3'/><circle cx='100' cy='100' r='75' fill='none' stroke='%238b5cf6' stroke-width='0.4' opacity='0.3' stroke-dasharray='3 4'/><circle cx='100' cy='100' r='55' fill='none' stroke='%23ec4899' stroke-width='0.4' opacity='0.3'/></svg>") center/contain no-repeat;animation:hospin 60s linear infinite;opacity:0.6;pointer-events:none}

.home-hero-row{display:flex;align-items:center;gap:18px;position:relative;z-index:2}

.home-hero-orb{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(60,20,25,0.55),#0a0405 60%,#000);box-shadow:0 0 36px var(--brand-glow-strong),0 0 16px var(--brand-glow),inset 0 0 14px var(--brand-glow-soft);position:relative;flex-shrink:0;animation:oglowDark 4s ease-in-out infinite}

@keyframes oglowDark{0%,100%{box-shadow:0 0 28px rgba(185,28,74,0.45),0 0 12px rgba(185,28,74,0.3),inset 0 0 12px var(--brand-glow-soft)}50%{box-shadow:0 0 44px rgba(185,28,74,0.75),0 0 22px rgba(185,28,74,0.5),inset 0 0 18px rgba(185,28,74,0.28)}}

.home-hero-orb::before,.home-hero-orb::after{content:'';position:absolute;border-radius:50%;border:1px dashed var(--brand-glow)}

.home-hero-orb::before{inset:-10px;animation:hospin 14s linear infinite}

.home-hero-orb::after{inset:-20px;border-style:solid;border-color:rgba(190,18,60,0.18);animation:hospin 22s linear infinite reverse}

.home-hero-text{flex:1;min-width:0}

.greet-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:2.5px;display:flex;align-items:center;gap:6px;margin-bottom:6px}

.greet-eyebrow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:blink 1.5s infinite}

.greet-h{font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace;font-size:1.7rem;font-weight:700;letter-spacing:1px;background:var(--greet-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.05}

.greet-sub{font-size:0.78rem;color:var(--t2);margin-top:6px;line-height:1.5}

.greet-sub b{color:var(--t1);font-weight:600}

.home-hero-stats{display:flex;gap:8px;margin-top:14px;position:relative;z-index:2}

.hero-stat{flex:1;padding:10px 12px;background:var(--tint-2);border:1px solid var(--gb);border-radius:12px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;transition:all 0.2s;cursor:pointer}

.hero-stat:hover{background:var(--tint-4);transform:translateY(-1px);border-color:rgba(185,28,74,0.25)}

.hero-stat-i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--stat-color,var(--accent));background:rgba(185,28,74,0.12);border:1px solid rgba(185,28,74,0.2);flex-shrink:0}

.hero-stat.green .hero-stat-i{color:var(--success);background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.2)}

.hero-stat.pink .hero-stat-i{color:var(--pink);background:rgba(190,18,60,0.12);border-color:rgba(190,18,60,0.2)}

.hero-stat.warn .hero-stat-i{color:var(--warn);background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.2)}

.hero-stat-text{flex:1;min-width:0}

.hero-stat-n{font-family:'Space Mono','Vazirmatn',monospace;font-size:1.05rem;font-weight:700;color:var(--t1);line-height:1}

.hero-stat-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1.5px;margin-top:3px}

.home-section{padding:18px 22px 0}

.section-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.65rem;color:var(--t2);letter-spacing:2px;margin:0 0 12px;display:flex;align-items:center;gap:8px}

.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--tint-4),transparent)}

.section-title .st-link{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--accent);letter-spacing:1.5px;cursor:pointer}

.section-title .st-link:hover{text-decoration:underline}

/* MARKED ORBITS (replaces live orbits) */

.marked-orb-scroller{display:flex;gap:10px;overflow-x:auto;padding:4px 22px 10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(245,158,11,0.4) var(--tint-2)}

.marked-orb-scroller::-webkit-scrollbar{height:5px}

.marked-orb-scroller::-webkit-scrollbar-track{background:var(--tint-1);border-radius:3px}

.marked-orb-scroller::-webkit-scrollbar-thumb{background:linear-gradient(90deg,rgba(245,158,11,0.4),rgba(190,18,60,0.4));border-radius:3px}

.marked-orb-scroller .mark-orb-card{scroll-snap-align:start}

.mark-orb-card{flex-shrink:0;width:170px;display:flex;flex-direction:column;align-items:center;padding:16px 10px 14px;cursor:grab;background:radial-gradient(ellipse at 50% 0%,var(--card-glow,rgba(190,18,60,0.16)),transparent 65%),var(--tint-1);border:1px solid var(--tint-3);border-radius:14px;transition:transform 0.2s,background 0.2s,border-color 0.2s;position:relative;overflow:hidden}

.mark-orb-card:active{cursor:grabbing}

.drag-source{opacity:0.45}

.drag-over-before{box-shadow:-3px 0 0 var(--accent),inset 2px 0 0 var(--accent)}

.drag-over-after{box-shadow:3px 0 0 var(--accent),inset -2px 0 0 var(--accent)}

.mp-row.drag-over-before{box-shadow:0 -2px 0 var(--accent)}

.mp-row.drag-over-after{box-shadow:0 2px 0 var(--accent)}

.mark-orb-card:hover{transform:translateY(-2px);background:radial-gradient(ellipse at 50% 0%,var(--card-glow-hover,rgba(190,18,60,0.24)),transparent 65%),var(--tint-2);border-color:var(--card-color,rgba(190,18,60,0.4))}

.mark-orb-card .mo-orb{width:54px;height:54px;border-radius:50%;background:var(--card-grad,radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),#a855f7 55%,#3b0764));box-shadow:0 0 22px var(--card-orb-glow,rgba(190,18,60,0.4)),inset 0 0 12px var(--tint-7);position:relative;margin-bottom:10px}

.mark-orb-card .mo-orb::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--card-color,rgba(190,18,60,0.5));animation:hospin 14s linear infinite}

.mark-orb-card .mo-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.65rem;color:var(--t1);font-weight:700;letter-spacing:1.5px;margin-bottom:6px}

.mark-orb-card .mo-avs{display:flex;align-items:center;justify-content:center;margin-bottom:5px;min-height:24px;gap:4px}

.mark-orb-card .mo-srv-av{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;font-weight:700;color:#fff;border:1.5px solid var(--tint-6);background-size:cover;background-position:center;flex-shrink:0;margin-right:3px}

.mark-orb-card .mo-srv-av.has-image{font-size:0}

.mark-orb-card .mo-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.5rem;font-weight:600;color:#fff;border:1.5px solid var(--bg);margin-left:-5px}

.mark-orb-card .mo-av:first-of-type{margin-left:0}

.mark-orb-card .mo-av.more{background:var(--tint-4);color:var(--t2);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem}

.mark-orb-card .mo-count{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px}

.mark-orb-card .mo-count.live{color:var(--success)}

.mark-orb-card .mo-count.live::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--success);margin-right:5px;vertical-align:middle;animation:blink 1.5s infinite}

.mark-orb-empty{padding:24px 22px;text-align:center;color:var(--t3);font-size:0.74rem;font-style:italic}

/* Online friends row */

.friends-row{display:flex;gap:10px;overflow-x:auto;padding:4px 22px;scrollbar-width:none}

.friends-row::-webkit-scrollbar{display:none}

.friend-bubble{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;width:54px;text-align:center}

.friend-bubble-av{width:46px;height:46px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.9rem;font-weight:600;color:white;border:2px solid var(--tint-4);position:relative;transition:transform 0.2s}

.friend-bubble:hover .friend-bubble-av{transform:scale(1.08);border-color:var(--accent)}

.friend-bubble-av .fb-status{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--success);border:2.5px solid var(--bg)}

.friend-bubble-av.offline .fb-status{background:var(--t3)}

.friend-bubble-av.in-voice{border-color:var(--success);box-shadow:0 0 10px rgba(34,197,94,0.4)}

.friend-bubble-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t2);letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54px}

.friend-bubble.add .friend-bubble-av{background:var(--brand-glow-faint);border:2px dashed rgba(185,28,74,0.35);color:var(--accent)}

.friend-bubble.add .friend-bubble-name{color:var(--accent)}

/* FRIEND REQUESTS section */

.fr-tabs{display:flex;gap:4px;padding:0 0 8px}

.fr-tab{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t3);padding:5px 11px;border-radius:7px;cursor:pointer;transition:all 0.15s;background:var(--tint-1);border:1px solid var(--gb)}

.fr-tab.active{color:var(--t1);background:rgba(185,28,74,0.15);border-color:rgba(185,28,74,0.3)}

.fr-tab:hover:not(.active){color:var(--t2);background:var(--tint-3)}

.fr-tab .fr-count{margin-left:5px;color:var(--accent)}

.fr-list{padding:0;display:flex;flex-direction:column;gap:0}

.fr-row{display:flex;align-items:center;gap:10px;padding:9px 0;transition:background 0.15s;background:transparent;min-width:0;position:relative;cursor:pointer;border-bottom:1px solid var(--tint-2)}

.fr-row:last-child{border-bottom:none}

.fr-row:hover{background:transparent}

.fr-row:hover .fr-name{color:var(--t1)}

.fr-row.has-glow .fr-name{color:#ddd6fe}

@keyframes neonSweep{0%,100%{opacity:0.35}50%{opacity:0.85}}

.fr-av{width:38px;height:38px;border-radius:50%;background:var(--av-color,var(--av-default-grad-warm));display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:600;color:white;flex-shrink:0;border:1.5px solid var(--tint-5)}

.fr-info{flex:1;min-width:0;overflow:hidden}

.fr-name{font-size:0.78rem;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fr-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fr-actions{display:flex;gap:4px;flex-shrink:0}

.fr-btn{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.fr-btn.accept{background:rgba(34,197,94,0.15);color:var(--success)}

.fr-btn.accept:hover{background:rgba(34,197,94,0.3)}

.fr-btn.reject{background:rgba(239,68,68,0.12);color:var(--danger)}

.fr-btn.reject:hover{background:rgba(239,68,68,0.25)}

.fr-btn.cancel{background:var(--tint-3);color:var(--t2)}

.fr-btn.cancel:hover{background:rgba(239,68,68,0.18);color:var(--danger)}

.fr-pending{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;letter-spacing:1px;color:var(--warn);background:rgba(245,158,11,0.12);padding:2px 6px;border-radius:4px;border:1px solid rgba(245,158,11,0.25)}

.fr-empty{padding:18px 4px;text-align:center;color:var(--t3);font-size:0.7rem;font-style:italic}

/* Two-column row: requests + quick transmit */

.home-twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:18px;padding:14px 22px 0;align-items:start}

.home-twocol .friends-row,.home-twocol .marked-orb-scroller,.home-twocol .my-servers-row{padding:4px 0 10px;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}

.home-twocol .marked-orb-scroller::-webkit-scrollbar,.home-twocol .my-servers-row::-webkit-scrollbar{height:6px}

.home-twocol .marked-orb-scroller::-webkit-scrollbar-track,.home-twocol .my-servers-row::-webkit-scrollbar-track{background:var(--tint-1);border-radius:3px}

.home-twocol .marked-orb-scroller::-webkit-scrollbar-thumb{background:linear-gradient(90deg,rgba(245,158,11,0.4),rgba(236,72,153,0.4));border-radius:3px}

.home-twocol .my-servers-row::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--brand-glow),rgba(190,18,60,0.4));border-radius:3px}

.home-twocol .home-section{padding:12px 0 0}

.home-twocol-col .home-section:first-child{padding-top:0}

.fr-panel{padding:6px 4px;display:flex;flex-direction:column;gap:0;max-height:280px;overflow-y:auto}

.fr-panel .fr-list{padding:0}

.fr-panel .fr-row{padding:8px 10px;border-bottom:1px solid var(--tint-2)}

.fr-panel .fr-row:last-child{border-bottom:none}

.home-twocol-col{min-width:0}

.home-twocol-col .home-section{padding:18px 0 0}

@media (max-width:840px){

  .home-twocol{grid-template-columns:1fr}

}

/* Quick-send box (Home) — vertical compact (uses nx-box) */

.qs-box.nx-box{padding:12px;display:flex;flex-direction:column;gap:8px;overflow:visible}

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

.qs-head i{color:var(--accent);width:13px;height:13px;flex-shrink:0}

.qs-head-hint{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px}

.qs-input{width:100%;background:rgba(0,0,0,0.25);border:1px solid var(--gb);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:0.78rem;font-family:inherit;outline:none;resize:none;min-height:64px;max-height:140px;transition:border-color 0.18s;line-height:1.45}

.qs-input:focus{border-color:rgba(185,28,74,0.45);background:rgba(0,0,0,0.35)}

.qs-input::placeholder{color:var(--t3)}

.qs-send{width:100%;padding:9px 14px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;font-weight:700;transition:all 0.18s;border:1px solid var(--tint-5)}

.qs-send.disabled{opacity:0.4;pointer-events:none;background:var(--tint-3)}

.qs-send:hover:not(.disabled){transform:translateY(-1px);box-shadow:0 6px 20px var(--brand-glow)}

.qs-tags{display:flex;flex-wrap:wrap;gap:5px;min-height:16px}

.qs-tag{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;padding:3px 7px;border-radius:5px;display:flex;align-items:center;gap:4px;background:var(--brand-glow-soft);color:var(--accent);border:1px solid rgba(185,28,74,0.3)}

.qs-tag.unknown{background:rgba(239,68,68,0.12);color:var(--danger);border-color:rgba(239,68,68,0.3)}

/* Quick-send autocomplete */

.qs-input-wrap{flex:1;position:relative}

.qs-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--tint-5);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,0.6);z-index:50;max-height:230px;overflow-y:auto;backdrop-filter:blur(20px)}

.qs-suggest-item{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;transition:background 0.15s}

.qs-suggest-item:hover,.qs-suggest-item.highlight{background:rgba(185,28,74,0.15)}

.qs-suggest-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.7rem;font-weight:600;flex-shrink:0}

.qs-suggest-info{flex:1;min-width:0}

.qs-suggest-n{font-size:0.78rem;color:var(--t1);font-weight:500;line-height:1.1}

.qs-suggest-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;margin-top:2px}

.qs-suggest-empty{padding:10px 12px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;color:var(--t3);letter-spacing:1px;text-align:center}

/* My Servers row (Home) */

.my-servers-row{display:flex;gap:10px;overflow-x:auto;padding:4px 22px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--brand-glow) var(--tint-2)}

.my-servers-row::-webkit-scrollbar{height:5px}

.my-servers-row::-webkit-scrollbar-track{background:var(--tint-1);border-radius:3px}

.my-servers-row::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--brand-glow),rgba(190,18,60,0.4));border-radius:3px}

.my-servers-row .my-server-card{scroll-snap-align:start}

.my-server-card{flex-shrink:0;width:140px;background:var(--tint-1);border:1px solid var(--gb);border-radius:13px;padding:12px;cursor:pointer;transition:all 0.22s;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}

.my-server-card:hover{transform:translateY(-2px);background:var(--tint-2);border-color:var(--card-bd,var(--brand-glow))}

.my-server-card .ms-cover{position:absolute;inset:0;opacity:0.18;pointer-events:none;background-size:cover;background-position:center}

.my-server-card .ms-emblem{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:1.2rem;color:#fff;background:var(--card-grad);box-shadow:0 0 24px var(--card-glow);margin-bottom:8px;position:relative;z-index:1}

.my-server-card .ms-emblem.has-image{font-size:0;background:var(--panel)}

.my-server-card .ms-emblem-img{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center;opacity:0.55;mix-blend-mode:overlay;pointer-events:none}

.my-server-card .ms-emblem.has-image .ms-emblem-img{opacity:1;mix-blend-mode:normal}

.my-server-card .ms-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.65rem;font-weight:700;letter-spacing:1.5px;color:var(--t1);margin-bottom:3px;position:relative;z-index:1}

.my-server-card .ms-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;position:relative;z-index:1}

/* ============== MESSAGES PAGE ============== */

.dm-pane{flex:1;display:grid;grid-template-columns:280px 1fr;overflow:hidden;min-height:0}

.dm-list{border-right:1px solid var(--tint-2);display:flex;flex-direction:column;min-height:0}

.dm-search{padding:12px 14px;border-bottom:1px solid var(--tint-2);flex-shrink:0}

.dm-search-box{position:relative}

.dm-search input{width:100%;background:var(--tint-2);border:1px solid var(--gb);border-radius:10px;padding:8px 12px 8px 32px;color:var(--t1);font-size:0.8rem;font-family:inherit;outline:none;transition:all 0.2s}

.dm-search input:focus{border-color:var(--brand-glow);background:var(--tint-3)}

.dm-search input::placeholder{color:var(--t3)}

.dm-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3)}

.dm-tabs{display:flex;gap:2px;padding:8px 10px;border-bottom:1px solid var(--tint-2);flex-shrink:0}

.dm-tab{flex:1;padding:6px 4px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1px;color:var(--t3);border-radius:6px;text-align:center;transition:all 0.2s}

.dm-tab.active{color:var(--t1);background:rgba(185,28,74,0.12)}

.dm-tab:hover:not(.active){color:var(--t2);background:var(--tint-2)}

.dm-tab .dt-count{display:inline-block;margin-left:4px;background:var(--danger);color:white;font-size:0.45rem;padding:1px 5px;border-radius:6px;letter-spacing:0}

.dm-items{flex:1;overflow-y:auto;padding:6px 6px}

.dm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;border-radius:10px;transition:all 0.2s;position:relative;margin-bottom:2px}

.dm-list-check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--t3);background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;opacity:0;transition:opacity 0.15s,background 0.15s;margin-right:-2px}

.dm-item:hover .dm-list-check{opacity:0.85}

.dm-items.has-selection .dm-list-check{opacity:0.9}

.dm-item.is-selected .dm-list-check{opacity:1;background:var(--accent);border-color:var(--accent);color:#fff}

.dm-item.is-selected{background:rgba(185,28,74,0.16)}

.dm-item.active{background:linear-gradient(90deg,rgba(185,28,74,0.15),rgba(185,28,74,0.04));border:1px solid rgba(185,28,74,0.2)}

.dm-item.active::before{content:'';position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--accent);border-radius:0 3px 3px 0;box-shadow:0 0 8px var(--ag)}

.dm-item:hover:not(.active){background:var(--tint-2)}

.dm-av-wrap{position:relative;flex-shrink:0}

.dm-av{width:38px;height:38px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;color:white;letter-spacing:0.5px;border:1.5px solid var(--tint-5)}

.dm-av.online::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid var(--bg)}

.dm-mid{flex:1;min-width:0}

.dm-row1{display:flex;align-items:center;justify-content:space-between;gap:6px}

.dm-name{font-size:0.8rem;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dm-time{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;flex-shrink:0}

.dm-row2{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}

.dm-preview{font-size:0.7rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}

.dm-item.unread .dm-preview{color:var(--t1)}

.dm-item.unread .dm-name{color:var(--t1);font-weight:600}

.dm-item.unread{position:relative}

.dm-item.unread::after{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:0 3px 3px 0;box-shadow:0 0 8px var(--brand-glow-strong);animation:neonSweep 3s ease-in-out infinite}

.dm-item.unread .dm-name{text-shadow:0 0 6px rgba(185,28,74,0.45)}

.dm-unread-pill{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-size:0.5rem;padding:2px 7px;border-radius:8px;font-weight:700;font-family:'Space Mono','Vazirmatn',monospace;flex-shrink:0;box-shadow:0 0 8px var(--brand-glow)}

.dm-typing{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--accent);letter-spacing:1px;display:flex;align-items:center;gap:4px}

.dm-typing-dots{display:inline-flex;gap:2px}

.dm-typing-dots span{width:3px;height:3px;border-radius:50%;background:var(--accent);animation:typing 1.2s infinite}

.dm-typing-dots span:nth-child(2){animation-delay:0.15s}

.dm-typing-dots span:nth-child(3){animation-delay:0.3s}

@keyframes typing{0%,60%,100%{opacity:0.3}30%{opacity:1}}

.dm-conv{display:flex;flex-direction:column;height:100%;min-height:0;background:radial-gradient(ellipse at 50% 0%,rgba(185,28,74,0.06),transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(190,18,60,0.04),transparent 60%);position:relative}

.dm-pinned-banner{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:8px 14px 10px;background:linear-gradient(135deg,var(--tint-6),var(--brand-glow-soft));border:1px solid var(--tint-7);border-radius:10px;cursor:pointer;color:var(--t1);box-shadow:0 0 10px var(--tint-4)}

.dm-pinned-banner:hover{background:linear-gradient(135deg,var(--tint-7),var(--brand-glow));border-color:var(--tint-9)}

.dm-pinned-banner i{flex-shrink:0;color:var(--accent)}

.dm-pinned-info{flex:1;min-width:0}

.dm-pinned-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t2);letter-spacing:1.5px;margin-bottom:2px;font-weight:700}

.dm-pinned-text{font-size:0.78rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}

.dm-pinned-x{width:22px;height:22px;border-radius:6px;color:var(--t3);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s}

.dm-pinned-x:hover{background:rgba(239,68,68,0.18);color:var(--danger)}

.dm-selection-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(185,28,74,0.12);border-bottom:1px solid rgba(185,28,74,0.25);flex-shrink:0}

.dm-sel-cancel{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--t1);background:var(--tint-3);transition:background 0.15s}

.dm-sel-cancel:hover{background:var(--tint-5)}

.dm-sel-count{flex:1;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t1);letter-spacing:1px}

.dm-sel-delete{padding:6px 12px;border-radius:8px;background:rgba(239,68,68,0.18);color:var(--danger);border:1px solid rgba(239,68,68,0.35);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;display:flex;align-items:center;gap:6px;transition:background 0.15s}

.dm-sel-delete:hover{background:rgba(239,68,68,0.3)}

.dm-conv.select-mode .dm-msgs{padding-left:42px}

.dm-conv.select-mode .dm-msg{cursor:pointer;position:relative}

.dm-conv.select-mode .dm-msg::before{content:'';position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--t3);background:rgba(0,0,0,0.4);z-index:5;transition:all 0.15s}

.dm-conv.select-mode .dm-msg.is-selected::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px var(--tint-9) inset}

.dm-conv.select-mode .dm-msg .dm-bubble-hover-actions{display:none!important}

.ws-channel-view.select-mode .ws-msg{cursor:pointer;padding-left:36px;position:relative}

.ws-channel-view.select-mode .ws-msg::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:2px solid var(--t3);background:rgba(0,0,0,0.4);z-index:5}

.ws-channel-view.select-mode .ws-msg.is-selected::before{background:var(--accent);border-color:var(--accent)}

.ws-channel-view.select-mode .ws-msg-actions{display:none!important}

.dm-head{height:64px;display:flex;align-items:center;padding:0 18px;gap:12px;flex-shrink:0;background:linear-gradient(180deg,rgba(185,28,74,0.05),transparent);position:relative}

.dm-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(185,28,74,0.3),transparent)}

.dm-head-av{position:relative;width:42px;height:42px;border-radius:50%;background:var(--av-color,radial-gradient(circle at 35% 30%,var(--tint-9),var(--accent) 60%,#1e1b4b));display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:600;color:white;box-shadow:0 0 18px rgba(185,28,74,0.3);cursor:pointer;transition:transform 0.2s}

.dm-head-av:hover{transform:scale(1.05)}

.dm-head-av .head-pulse{position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--success);animation:spulse 2s ease-in-out infinite;pointer-events:none}

.dm-head-info{flex:1;min-width:0}

.dm-head-name{font-size:0.92rem;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:6px}

.dm-head-name .verified{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;color:var(--accent)}

.dm-head-sub{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t2);letter-spacing:1.5px;margin-top:2px;display:flex;align-items:center;gap:6px}

.dm-head-sub .ds-dot{width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 4px var(--success)}

.dm-head-sub.offline .ds-dot{background:var(--t3);box-shadow:none}

.dm-head-sub.is-saved .ds-dot{display:none}

.dm-compose-locked{display:flex;align-items:center;gap:10px;padding:11px 14px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:10px;color:var(--t1);margin:0 14px 12px}

.dm-compose-locked i{color:var(--warn);flex-shrink:0}

.dm-compose-locked-text{flex:1;min-width:0;font-size:0.72rem;line-height:1.4}

.dm-compose-locked-text b{display:block;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--warn);margin-bottom:2px}

.dm-compose-locked-text span{color:var(--t2)}

.dm-head-actions{display:flex;align-items:center;gap:4px}

.dm-head-actions .ph-icon-btn{width:30px;height:30px}

.dm-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:18px}

.dm-empty-orb{width:120px;height:120px;position:relative;display:flex;align-items:center;justify-content:center}

.dm-empty-orb-core{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--tint-9),var(--accent) 60%,#1e1b4b);box-shadow:0 0 28px rgba(185,28,74,0.5),inset 0 0 18px var(--tint-7);animation:oglow 3.5s ease-in-out infinite;position:relative;z-index:2}

.dm-empty-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(185,28,74,0.25);animation:hospin 18s linear infinite}

.dm-empty-ring.r1{width:80px;height:80px}

.dm-empty-ring.r2{width:110px;height:110px;animation-direction:reverse;animation-duration:24s}

.dm-empty-ring.r3{width:140px;height:140px;border-style:solid;border-color:rgba(185,28,74,0.1)}

@keyframes oglow{0%,100%{box-shadow:0 0 28px rgba(185,28,74,0.5),inset 0 0 18px var(--tint-7)}50%{box-shadow:0 0 40px rgba(185,28,74,0.75),inset 0 0 24px var(--tint-9)}}

.dm-empty-text{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.85rem;letter-spacing:3px;color:var(--accent);margin-bottom:4px}

.dm-empty-sub{font-size:0.75rem;color:var(--t2);max-width:280px;line-height:1.5}

.dm-msgs{flex:1;overflow-y:auto;padding:14px 16px 8px;display:flex;flex-direction:column;gap:2px;min-height:0}

.dm-day-divider{display:flex;align-items:center;gap:10px;margin:10px 0 6px;color:var(--t3)}

.dm-day-divider::before,.dm-day-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--tint-3),transparent)}

.dm-day-divider span{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:2px;padding:2px 10px;background:rgba(185,28,74,0.06);border-radius:10px;border:1px solid rgba(185,28,74,0.1)}

.dm-msg{display:flex;align-items:flex-end;gap:8px;animation:dmIn 0.25s ease-out;position:relative;padding:3px 6px;border-radius:10px;transition:background 0.15s}

.dm-msg:hover{background:var(--tint-1)}

.dm-conv.select-mode .dm-msg{cursor:pointer}

.dm-conv.select-mode .dm-msg:hover{background:rgba(185,28,74,0.1)}

.dm-conv.select-mode .dm-msg.is-selected{background:var(--brand-glow-soft)}

.dm-msg.you{flex-direction:row-reverse}

.dm-msg.grouped{padding-top:0}

.dm-msg.grouped .dm-msg-av{visibility:hidden}

.dm-msg-av{width:30px;height:30px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;color:white;flex-shrink:0;border:1.5px solid var(--tint-4);background-size:cover;background-position:center;overflow:hidden;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s}

.dm-msg-av:hover{transform:scale(1.06);box-shadow:0 0 10px rgba(185,28,74,0.25)}

.dm-msg.you .dm-msg-av{background:linear-gradient(135deg,var(--success),#15803d)}

.dm-bubble-wrap{display:flex;flex-direction:column;max-width:65%;gap:2px;min-width:0}

.dm-msg.you .dm-bubble-wrap{align-items:flex-end}

.dm-bubble{padding:8px 13px;border-radius:14px 14px 14px 4px;background:var(--tint-2);border:1px solid var(--gb);font-size:0.82rem;line-height:1.45;color:var(--t1);position:relative;word-wrap:break-word;cursor:pointer;transition:background 0.15s}

.dm-bubble:hover{background:var(--tint-3)}

.dm-msg.you .dm-bubble{border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,var(--brand-glow-soft),rgba(190,18,60,0.13));border-color:rgba(185,28,74,0.25);color:#fff}

.dm-bubble.image-bubble{padding:4px;background:var(--tint-2);max-width:100%;display:inline-block}

.dm-bubble-img{display:block;max-width:280px;width:100%;height:auto;border-radius:10px;cursor:zoom-in;object-fit:cover;background:var(--tint-1)}

.dm-bubble-cap{font-size:0.78rem;color:var(--t1);padding:6px 9px 3px;line-height:1.4}

.dm-msg.you .dm-bubble-cap{color:#fff}

.dm-bubble.forwarded{padding-top:5px}

.dm-fwd-tag{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-bottom:4px;display:flex;align-items:center;gap:4px}

.dm-fwd-tag svg{width:9px;height:9px}

.dm-bubble.edited::after{content:' (edited)';font-size:0.6rem;color:var(--t3);opacity:0.7;margin-left:4px}

.long-press-grow{transition:transform 0.35s cubic-bezier(.2,.8,.2,1),box-shadow 0.35s;transform:scale(0.96);box-shadow:0 0 0 2px rgba(185,28,74,0.45),0 0 18px var(--brand-glow)!important;border-radius:12px}

.settings-tabs{display:flex;gap:4px;padding:12px 14px 0}

.settings-tab{flex:1;padding:8px 6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.4px;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all 0.15s}

.settings-tab.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}

.settings-pane{padding:14px 16px;display:flex;flex-direction:column;gap:12px}

/* Two-column layout for the user settings modal — mirrors the roles modal. */

#profileModal{max-width:380px}

#profileModal.is-editing{max-width:780px;width:96vw;max-height:88vh}

#profileModal.is-editing .profile-edit{flex:1;flex-direction:row;gap:0;overflow:hidden;min-height:0}

.settings-side{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--gb);padding:12px 8px;overflow-y:auto}

.settings-side-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t3);padding:4px 8px 8px}

.settings-side-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:all 0.15s;border:1px solid transparent;color:var(--t2);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.2px}

.settings-side-item i{width:13px;height:13px;flex-shrink:0}

.settings-side-item:hover{background:var(--tint-2);color:var(--t1)}

.settings-side-item.active{background:rgba(185,28,74,0.16);border-color:rgba(185,28,74,0.3);color:#fff}

.settings-side-item .badge{margin-left:auto;font-size:0.5rem;padding:1px 6px;border-radius:6px;background:var(--accent);color:#fff;font-weight:700}

.settings-content{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto}

.settings-content > .settings-pane{display:none}

.settings-content > .settings-pane.active{display:flex}

@media (max-width:760px){

  #profileModal.is-editing .profile-edit{flex-direction:column}

  .settings-side{width:100%;border-right:none;border-bottom:1px solid var(--gb);flex-direction:row;overflow-x:auto;padding:8px}

  .settings-side-h{display:none}

  .settings-side-item{flex-shrink:0}

}

/* Friends panel inside settings */

.fp-list{display:flex;flex-direction:column;gap:0;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px;overflow:hidden}

.fp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--tint-2);transition:background 0.15s}

.fp-row:last-child{border-bottom:none}

.fp-row:hover{background:var(--tint-2)}

.fp-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:600;color:#fff;border:1.5px solid var(--tint-5);flex-shrink:0;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;position:relative}

/* Universal avatar-image fix: any element whose JS sets a raster image
 * via background should clip to its rounded box and use cover sizing.
 * This catches every avatar class in one place so non-square uploads
 * stay round across the app — DM head, friend bubble, voice rosters,
 * member lists, profile cards, etc. */
.dm-head-av,
.friend-bubble-av,
.ms-av,
.mo-av,
.mo-srv-av,
.ws-cat-vc-av,
.fwd-item-av,
.user-av,
.fwd-item-srv,
.profile-shared-orb,
.srv-orb,
.cs-friend-av,
.qs-result-av{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.fp-av .fp-status{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--bg)}

.fp-av.offline .fp-status{background:var(--t3)}

.fp-mid{flex:1;min-width:0}

.fp-name{font-size:0.78rem;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fp-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fp-actions{display:flex;gap:4px;flex-shrink:0}

.fp-btn{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all 0.15s;background:var(--tint-2);color:var(--t2);border:1px solid var(--gb)}

.fp-btn:hover{background:var(--tint-4);color:var(--t1)}

.fp-btn.danger:hover{background:rgba(239,68,68,0.18);color:var(--danger);border-color:rgba(239,68,68,0.3)}

.fp-btn.success:hover{background:rgba(34,197,94,0.18);color:var(--success);border-color:rgba(34,197,94,0.3)}

.fp-empty{padding:20px;text-align:center;color:var(--t3);font-size:0.72rem;font-style:italic}

.dm-block-banner{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 22px;text-align:center;color:var(--t2)}

.dm-block-banner i{color:var(--danger)}

.dm-block-title{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:0.95rem;font-weight:600;color:var(--t1);margin-top:4px}

.dm-block-sub{font-size:0.78rem;color:var(--t2);max-width:280px;line-height:1.5;margin-bottom:6px}

.dm-bubble.deleted{font-style:italic;color:var(--t3);background:var(--tint-1)!important;border-style:dashed!important}

.dm-bubble.server-card-bubble{padding:0;background:transparent;border:none}

.sc-card{width:280px;max-width:100%;background:radial-gradient(ellipse at 50% 0%,rgba(185,28,74,0.16),transparent 65%),var(--tint-1);border:1px solid var(--tint-4);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}

.sc-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.sc-private-tag{display:inline-flex;align-items:center;gap:3px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;letter-spacing:1.4px;color:var(--warn);background:rgba(245,158,11,0.14);border:1px solid rgba(245,158,11,0.3);padding:2px 5px;border-radius:4px;font-weight:700}

.sc-row{display:flex;align-items:center;gap:10px}

.sc-emblem{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:1rem;flex-shrink:0;border:1px solid var(--tint-5);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}

.sc-info{flex:1;min-width:0}

.sc-name{font-size:0.85rem;color:var(--t1);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sc-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;margin-top:2px}

.sc-desc{font-size:0.74rem;color:var(--t2);line-height:1.45}

.sc-actions{display:flex;justify-content:flex-end;margin-top:2px}

.sc-btn{padding:7px 12px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;display:flex;align-items:center;gap:5px;cursor:pointer}

.sc-btn:hover{box-shadow:0 4px 14px rgba(185,28,74,0.45)}

.sc-channel-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--t1);flex-shrink:0;border:1px solid var(--tint-5)}

.sc-channel-icon.is-text{background:rgba(82,156,255,0.18);color:#bfdbfe}

.sc-channel-icon.is-voice{background:rgba(168,85,247,0.18);color:#d8b4fe}

.ws-attach-preview{padding:8px 10px}

.ws-attach-row{position:relative;display:inline-block;border-radius:10px;overflow:hidden;border:1px solid var(--gb)}

.ws-attach-row img{display:block;max-height:120px;max-width:200px;object-fit:cover}

.ws-attach-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,0.65);color:#fff;display:flex;align-items:center;justify-content:center}

.ws-attach-x:hover{background:rgba(239,68,68,0.6)}

.sj-banner{position:relative;height:140px;background:linear-gradient(135deg,var(--brand-glow),rgba(159,18,57,0.3));overflow:hidden}

.sj-banner-cover{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.55}

.sj-emblem{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:1.7rem;border:3px solid var(--bg);background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(0,0,0,0.5)}

.sj-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:2px;color:var(--accent);margin-top:0}

.sj-name{font-size:1.15rem;color:var(--t1);font-weight:700;margin-top:4px}

.sj-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.4px;color:var(--t3);margin-top:2px}

.sj-private-tag{display:inline-flex;align-items:center;gap:4px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--warn);background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);padding:4px 9px;border-radius:6px;margin-top:8px;font-weight:700}

.sj-desc{font-size:0.82rem;color:var(--t2);line-height:1.55;margin-top:10px;padding:10px 12px;background:var(--tint-1);border:1px solid var(--gb);border-radius:9px}

.sj-key-row{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;background:rgba(0,0,0,0.35);border:1px solid var(--gb);border-radius:9px}

.sj-key-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t3)}

.sj-key-v{flex:1;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t1);letter-spacing:1.4px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cs-vis-row{display:flex;gap:6px}

.cs-vis-btn{flex:1;padding:9px 10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.4px;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all 0.15s}

.cs-vis-btn.active{color:var(--t1);background:rgba(185,28,74,0.2);border-color:var(--brand-glow)}

/* Voice bitrate picker — six options laid out as equal-width pills. */
.cs-bitrate-row{display:flex;gap:6px;margin-top:4px}
.cs-bitrate-btn{
  flex:1;padding:8px 6px;
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.65rem;letter-spacing:1px;font-weight:700;
  color:var(--t2);background:var(--tint-2);
  border:1px solid var(--gb);border-radius:8px;
  cursor:pointer;transition:all 0.15s;
}
.cs-bitrate-btn:hover{color:var(--t1);background:var(--tint-3)}
.cs-bitrate-btn.active{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
}

.cs-role-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding:10px;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px}

.cs-role-chip{padding:5px 10px;border-radius:8px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.4px;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:5px}

.cs-role-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--role-c,var(--t2))}

.cs-role-chip.on{color:#fff;background:var(--brand-glow-soft);border-color:var(--role-c,var(--accent))}
/* Tiny spinner shown inside #dmMsgs while we wait for /api/dms/<peer> on
 * a fresh open. Without it the chat would briefly flash whatever stale
 * subset survived in messages[] and then redraw the merged history. */
.dm-loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:120px}
.dm-loading-spin{width:22px;height:22px;border:2px solid var(--tint-3);border-top-color:var(--accent);border-radius:50%;animation:dmSpin 0.7s linear infinite}
@keyframes dmSpin{to{transform:rotate(360deg)}}
/* Empty conversation placeholder. Shown both before history loads and
 * after history confirms the thread is empty. */
.dm-empty-thread{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:160px;padding:24px;text-align:center}
.dm-empty-thread-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.8px;color:var(--accent);opacity:0.7}
.dm-empty-thread-text{font-size:0.78rem;color:var(--t2);max-width:260px;line-height:1.6}
.cs-overrides{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding:10px;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px;max-height:280px;overflow-y:auto}
.cs-ovr-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 8px;background:var(--tint-2);border-radius:8px}
.cs-ovr-label{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1px;color:var(--t1);display:flex;align-items:center;gap:6px}
.cs-ovr-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--role-c,var(--t2))}
.cs-ovr-pill{padding:4px 10px;border-radius:6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.4px;cursor:pointer;background:var(--tint-2);border:1px solid var(--gb);color:var(--t3);transition:all 0.15s}
.cs-ovr-pill:hover{color:var(--t1);border-color:var(--accent)}
.cs-ovr-pill.allow{background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.45);color:#86efac}
.cs-ovr-pill.deny{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.45);color:#fca5a5}
/* Tiny lock chip drawn inline next to private channel/category names so the
   admin sees at a glance which entities are role-restricted. */
.priv-lock{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-left:4px;color:var(--warn);opacity:0.85;vertical-align:-1px}

.dm-bubble-meta{display:flex;align-items:center;gap:6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);padding:0 6px;letter-spacing:0.5px}

.dm-msg.you .dm-bubble-meta{color:var(--tint-strong)}

.dm-status-icon{width:11px;height:11px;color:var(--accent)}

.dm-status-pending{color:var(--t2);animation:dmStatusPulse 1.4s ease-in-out infinite}

@keyframes dmStatusPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* === BUBBLE ACTIONS POPUP — fixed positioning via JS === */

.dm-bubble-actions{position:fixed;display:none;background:var(--panel);border:1px solid var(--tint-4);border-radius:18px;padding:3px;gap:1px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:250;backdrop-filter:blur(20px)}

.dm-bubble-actions.show{display:flex}

.dm-bubble-action{width:26px;height:26px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all 0.15s}

.dm-bubble-action:hover{background:var(--tint-4);color:var(--t1)}

.dm-bubble-action.danger:hover{background:rgba(239,68,68,0.15);color:var(--danger)}

.dm-reply-preview{padding:5px 8px;background:rgba(0,0,0,0.18);border-left:2px solid var(--accent);border-radius:5px;margin-bottom:5px;font-size:0.7rem;cursor:pointer}

.dm-reply-preview .drp-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;color:var(--accent);margin-bottom:1px}

.dm-reply-preview .drp-text{color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

.dm-typing-row{display:flex;align-items:center;gap:8px;padding:6px 16px;color:var(--t3);font-size:0.7rem;font-style:italic}

.dm-typing-row .dm-typing-dots span{background:var(--t3)}

/* Compose wrap floats over the conversation — no background, no
 * border line. Only the inner .dm-ibox pill is visible. */
.dm-input-wrap{padding:10px 14px 12px;background:transparent;border-top:none;flex-shrink:0}

.dm-reply-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--brand-glow-faint);border:1px solid rgba(185,28,74,0.2);border-radius:10px 10px 0 0;border-bottom:none;font-size:0.7rem;color:var(--t1);margin-bottom:-1px}

.dm-reply-bar .rb-bar{width:2px;height:24px;background:var(--accent);border-radius:1px;flex-shrink:0}

.dm-reply-bar .rb-info{flex:1;min-width:0}

.dm-reply-bar .rb-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1px;color:var(--accent);margin-bottom:1px}

.dm-reply-bar .rb-text{color:var(--t2);font-size:0.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dm-reply-bar .rb-close{padding:2px;color:var(--t3);transition:color 0.2s}

.dm-reply-bar .rb-close:hover{color:var(--t1)}

.dm-edit-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);border-radius:10px 10px 0 0;border-bottom:none;font-size:0.7rem;color:var(--t1);margin-bottom:-1px}

.dm-edit-bar .rb-bar{background:var(--warn)}

.dm-edit-bar .rb-name{color:var(--warn)}

.dm-attach-preview{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--brand-glow-faint);border:1px solid rgba(185,28,74,0.2);border-radius:10px 10px 0 0;border-bottom:none;margin-bottom:-1px}

.dm-attach-preview img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex-shrink:0;background:rgba(0,0,0,0.3)}

.dm-attach-preview .ap-info{flex:1;min-width:0}

.dm-attach-preview .ap-n{font-size:0.72rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dm-attach-preview .ap-s{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;margin-top:2px}

.dm-attach-preview .ap-x{padding:4px;color:var(--t3);transition:color 0.2s}

.dm-attach-preview .ap-x:hover{color:var(--danger)}

.dm-ibox{display:flex;align-items:flex-end;gap:8px;background:var(--tint-2);border:1px solid var(--gb);border-radius:14px;padding:7px 8px 7px 12px;transition:all 0.2s}

.dm-ibox.has-attach,.dm-ibox.has-reply,.dm-ibox.has-edit{border-radius:0 0 14px 14px}

.dm-ibox:focus-within{border-color:var(--brand-glow);background:var(--tint-3);box-shadow:0 0 0 3px rgba(185,28,74,0.06)}

.dm-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:0.84rem;font-family:inherit;resize:none;line-height:1.5;padding:6px 0;max-height:120px;min-height:24px}

.dm-input::placeholder{color:var(--t3)}

.dm-i-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}

.dm-i-btn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all 0.15s}

.dm-i-btn:hover{background:var(--tint-3);color:var(--t1)}

.dm-i-btn.send{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;width:34px;height:34px;border-radius:11px;box-shadow:0 4px 14px rgba(185,28,74,0.35)}

.dm-i-btn.send:hover{box-shadow:0 6px 18px var(--brand-glow-strong);transform:scale(1.04)}

.dm-i-btn.send.disabled{opacity:0.4;pointer-events:none;box-shadow:none}

/* ============== WORLD PAGE ============== */

.world-pane{flex:1;display:flex;overflow:hidden;min-height:0}

.world-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;min-width:0}

.world-hero{padding:18px 22px 14px;background:radial-gradient(ellipse at 80% 0%,rgba(185,28,74,0.16),transparent 60%),radial-gradient(ellipse at 10% 100%,rgba(190,18,60,0.1),transparent 60%);border-bottom:1px solid var(--tint-2);display:flex;align-items:center;gap:16px;flex-shrink:0;position:relative;overflow:hidden}

.world-hero-emblem{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),#6366f1 50%,#1e1b4b);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;box-shadow:0 0 30px rgba(185,28,74,0.5),inset 0 0 18px var(--tint-7)}

.world-hero-emblem::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--brand-glow);animation:hospin 18s linear infinite}

.world-hero-emblem::before{content:'';position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(190,18,60,0.18);animation:hospin 28s linear infinite reverse}

.world-hero-emblem i{width:22px;height:22px;color:white;position:relative;z-index:2}

.world-hero-info{flex:1;min-width:0}

.world-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:2.5px;color:var(--t3);margin-bottom:4px;display:flex;align-items:center;gap:6px}

.world-eyebrow .we-pulse{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:blink 1.5s infinite}

.world-title{font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace;font-size:1.65rem;letter-spacing:3px;font-weight:700;line-height:1;background:linear-gradient(90deg,#fff,#c4b5fd 50%,var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.world-stats{display:flex;gap:8px;flex-shrink:0}

.world-stat{display:flex;flex-direction:column;align-items:center;padding:7px 11px;background:var(--tint-2);border:1px solid var(--gb);border-radius:10px;min-width:58px}

.world-stat-n{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.95rem;font-weight:700;color:var(--t1)}

.world-stat-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.48rem;color:var(--t3);letter-spacing:1.5px;margin-top:2px}

.world-stat.live .world-stat-n{color:var(--success)}

.world-pinned{padding:10px 22px;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(240,244,255,0.04),rgba(159,18,57,0.06),rgba(240,244,255,0.04));border-bottom:1px solid rgba(240,244,255,0.12);cursor:pointer;flex-shrink:0;transition:background 0.2s}

.world-pinned:hover{background:linear-gradient(90deg,rgba(240,244,255,0.07),rgba(159,18,57,0.1),rgba(240,244,255,0.07))}

.world-pinned i{color:#f0f4ff;flex-shrink:0;text-shadow:0 0 6px rgba(240,244,255,0.4)}

.world-pinned-text{font-size:0.72rem;color:var(--t1);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.world-pinned-text b{color:#f0f4ff;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;margin-right:6px;text-shadow:0 0 6px rgba(240,244,255,0.4)}

.world-pinned-by{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;flex-shrink:0}

.world-filters{padding:10px 22px;display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--tint-2);flex-shrink:0;scrollbar-width:none}

.world-filters::-webkit-scrollbar{display:none}

.wf-pill{flex-shrink:0;padding:5px 11px;border-radius:14px;background:var(--tint-2);border:1px solid var(--gb);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1px;color:var(--t2);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:5px}

.wf-pill:hover{background:var(--tint-3);color:var(--t1)}

.wf-pill.active{background:linear-gradient(135deg,rgba(185,28,74,0.2),rgba(190,18,60,0.18));color:#fff;border-color:var(--brand-glow)}

.wf-pill .wf-dot{width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 4px var(--success)}

.world-chat{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

.world-msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:8px}

.world-empty-orb{width:140px;height:140px;position:relative;display:flex;align-items:center;justify-content:center}

.world-empty-core{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),var(--accent) 60%,#1e1b4b);box-shadow:0 0 30px var(--brand-glow-strong),inset 0 0 18px var(--tint-7);display:flex;align-items:center;justify-content:center;color:#fff;animation:oglow 3.5s ease-in-out infinite;position:relative;z-index:2}

.world-empty-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(185,28,74,0.3);animation:hospin 18s linear infinite}

.world-empty-r1{width:90px;height:90px}

.world-empty-r2{width:120px;height:120px;animation-direction:reverse;animation-duration:24s}

.world-empty-r3{width:150px;height:150px;border-style:solid;border-color:rgba(185,28,74,0.1)}

.world-empty-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:2.5px;color:var(--accent);margin-bottom:8px}

.world-empty-title{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:1.05rem;font-weight:600;color:var(--t1);margin-bottom:6px;line-height:1.4}

.world-empty-sub{font-size:0.78rem;color:var(--t2);max-width:340px;line-height:1.55;margin:0 auto}

.world-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

.wmsg{display:flex;gap:10px;animation:dmIn 0.25s ease-out;position:relative;padding:6px 4px;border-radius:10px;transition:background 0.15s}

.wmsg:hover{background:var(--tint-1)}

.wmsg.pinned{background:linear-gradient(90deg,var(--tint-3),var(--brand-glow-soft));border-left:2px solid var(--accent);padding-left:8px;box-shadow:inset 0 0 12px var(--brand-glow-soft)}

.wmsg-av{width:34px;height:34px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.74rem;font-weight:600;color:white;flex-shrink:0;border:1.5px solid var(--tint-4);cursor:pointer;transition:transform 0.2s}

.wmsg-av:hover{transform:scale(1.08)}

.wmsg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}

.wmsg-row1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

.wmsg-name{font-size:0.78rem;color:var(--t1);font-weight:600;cursor:pointer}

.wmsg-name:hover{text-decoration:underline}

.wmsg-name.special{background:linear-gradient(90deg,#fbbf24,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.wmsg-role{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.48rem;letter-spacing:1px;padding:1px 5px;border-radius:5px;background:rgba(185,28,74,0.15);color:var(--accent);border:1px solid rgba(185,28,74,0.25)}

.wmsg-role.bot{background:rgba(245,158,11,0.15);color:var(--warn);border-color:rgba(245,158,11,0.3)}

.wmsg-role.legend{background:linear-gradient(90deg,rgba(245,158,11,0.18),rgba(190,18,60,0.18));color:#fef3c7;border-color:rgba(245,158,11,0.3)}

.wmsg-time{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px}

.wmsg-text{font-size:0.82rem;color:var(--t1);line-height:1.5}

.wmsg-text.image-msg{padding:0;margin-top:4px}

.wmsg-text img{max-width:300px;width:100%;height:auto;border-radius:10px;cursor:zoom-in;display:block;background:var(--tint-1)}

.wmsg-reactions{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}

.reaction{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;background:var(--tint-2);border:1px solid var(--gb);border-radius:12px;font-size:0.7rem;cursor:pointer;transition:all 0.15s}

.reaction:hover{background:rgba(185,28,74,0.12);border-color:rgba(185,28,74,0.3)}

.reaction.mine{background:var(--brand-glow-soft);border-color:var(--brand-glow);color:var(--accent)}

.reaction-count{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;color:var(--t2)}

.reaction.mine .reaction-count{color:var(--accent)}

.reaction-add{background:transparent;border:1px dashed var(--gb);color:var(--t3);padding:2px 6px;font-size:0.7rem;border-radius:12px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center}

.reaction-add:hover{border-color:var(--accent);color:var(--accent)}

.wmsg-actions{position:absolute;top:0;right:6px;display:none;background:var(--panel);border:1px solid var(--tint-4);border-radius:18px;padding:3px;gap:1px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:5}

.wmsg:hover .wmsg-actions{display:flex}

.wmsg-action{width:24px;height:24px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all 0.15s}

.wmsg-action:hover{background:var(--tint-4);color:var(--t1)}

/* WORLD STORE-LIKE OVERVIEW (server selected) */

.world-store{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;display:flex;flex-direction:column}

.ws-banner{padding:32px 26px 26px;display:flex;align-items:center;gap:22px;background:radial-gradient(ellipse at 80% 0%,var(--srv-banner-c1,var(--brand-glow-soft)),transparent 55%),radial-gradient(ellipse at 10% 100%,var(--srv-banner-c2,rgba(190,18,60,0.12)),transparent 55%);border-bottom:1px solid var(--tint-2);position:relative;overflow:visible;min-height:180px;isolation:isolate}

.ws-banner > .ws-banner-cover,.ws-banner::before{border-radius:0}

.ws-banner::before{content:'';position:absolute;top:-30px;right:-30px;width:200px;height:200px;border-radius:50%;border:1px dashed var(--tint-4);animation:hospin 60s linear infinite;pointer-events:none}

/* Neon wave overlay (used on banner cover, pinned boxes, channel pin) */

.neon-wave{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}

.neon-wave::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(185,28,74,0.45);box-shadow:inset 0 0 30px var(--brand-glow-soft),0 0 24px rgba(185,28,74,0.12);animation:neonBreathe 4.2s ease-in-out infinite}

.neon-wave::after{content:'';position:absolute;left:-30%;right:-30%;top:0;bottom:0;background:linear-gradient(120deg,transparent 30%,rgba(190,18,60,0.18) 48%,rgba(185,28,74,0.22) 52%,transparent 70%);transform:translateX(-100%);animation:neonSlide 5.5s ease-in-out infinite;pointer-events:none}

@keyframes neonBreathe{0%,100%{box-shadow:inset 0 0 30px rgba(185,28,74,0.16),0 0 18px rgba(185,28,74,0.1)}50%{box-shadow:inset 0 0 50px rgba(190,18,60,0.32),0 0 36px rgba(185,28,74,0.22)}}

@keyframes neonSlide{0%{transform:translateX(-100%)}55%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* warm variant for pinned messages */

.neon-wave.warm::before{border-color:rgba(245,158,11,0.45);box-shadow:inset 0 0 30px rgba(245,158,11,0.16),0 0 24px rgba(245,158,11,0.1);animation:neonBreatheWarm 4.2s ease-in-out infinite}

.neon-wave.warm::after{background:linear-gradient(120deg,transparent 30%,rgba(245,158,11,0.18) 48%,rgba(190,18,60,0.22) 52%,transparent 70%)}

@keyframes neonBreatheWarm{0%,100%{box-shadow:inset 0 0 30px rgba(245,158,11,0.16),0 0 18px rgba(245,158,11,0.1)}50%{box-shadow:inset 0 0 50px rgba(245,158,11,0.32),0 0 36px rgba(190,18,60,0.22)}}

.ws-banner-cover{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.55;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,0.4) 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,0.4) 75%,transparent 100%)}

.ws-banner-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,15,0) 0%,rgba(10,7,15,0.45) 65%,rgba(10,7,15,0.85) 100%)}

.ws-emblem-wrap{position:relative;flex-shrink:0;width:96px;height:96px}

.ws-emblem{width:96px;height:96px;border-radius:50%;background:var(--srv-grad,radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),#6366f1 50%,#1e1b4b));display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:2rem;color:white;flex-shrink:0;position:relative;box-shadow:0 0 36px var(--srv-glow,rgba(185,28,74,0.5)),inset 0 0 22px var(--tint-7);overflow:hidden}

.ws-emblem.has-image{font-size:0;background:var(--panel)}

.ws-emblem::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px dashed var(--tint-6);animation:hospin 18s linear infinite;pointer-events:none}

.ws-emblem-img{position:absolute;inset:0;border-radius:50%;background-size:cover;background-position:center;pointer-events:none}

.ws-emblem.has-image .ws-emblem-img{opacity:1;mix-blend-mode:normal}

.ws-banner-info{flex:1;min-width:0}

.ws-banner-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:2px;color:var(--t3);margin-bottom:5px}

.ws-banner-title{font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace;font-size:1.55rem;font-weight:700;letter-spacing:1.5px;color:var(--t1);line-height:1;margin-bottom:6px}

.ws-banner-desc{font-size:0.74rem;color:var(--t2);line-height:1.45;max-width:520px}

.ws-banner-stats{display:flex;gap:16px;margin-top:10px}

.ws-bs{display:flex;align-items:center;gap:6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t2);letter-spacing:1px}

.ws-bs i{color:var(--accent);width:11px;height:11px}

.ws-bs.live i{color:var(--success)}

/* Pinned in server overview */

/* Server pin banner — same recipe as the DM pin banner so the look is
 * consistent across pinned places (server, category, dm, channel).
 * Uses theme tokens so marble light reads as ink-on-cream and the dark
 * themes keep their warm tinted glow. */
.ws-pinned-box{margin:14px 22px 0;padding:12px 14px;background:linear-gradient(135deg,var(--tint-6),var(--brand-glow-soft));border:1px solid var(--tint-7);border-radius:12px;display:flex;gap:12px;align-items:flex-start;position:relative;overflow:hidden;min-height:64px;width:auto;flex-shrink:0;color:var(--t1);box-shadow:0 0 10px var(--tint-4)}

.ws-pin-icon{width:32px;height:32px;border-radius:9px;background:rgba(240,244,255,0.12);color:#f0f4ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(240,244,255,0.25);text-shadow:0 0 6px rgba(240,244,255,0.4)}

.ws-pin-info{flex:1;min-width:0}

.ws-pin-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t2);letter-spacing:1.5px;margin-bottom:4px;display:flex;align-items:center;gap:5px;font-weight:700}

.ws-pin-text{font-size:0.78rem;color:var(--t1);line-height:1.45}

.ws-pin-by{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-top:5px}

.ws-pin-add{padding:4px 8px;border-radius:6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;color:#f0f4ff;background:rgba(240,244,255,0.08);border:1px dashed rgba(240,244,255,0.3);transition:all 0.2s;flex-shrink:0;align-self:center;display:flex;align-items:center;gap:4px}

.ws-pin-add:hover{background:rgba(240,244,255,0.16)}

.ws-section{padding:18px 22px 0}

.ws-sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

.ws-sec-h-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.62rem;color:var(--t2);letter-spacing:1.8px;display:flex;align-items:center;gap:8px}

.ws-sec-h-l i{color:var(--accent);width:13px;height:13px}

.ws-sec-h-r{display:flex;gap:6px}

.ws-add-btn{padding:5px 10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--accent);letter-spacing:1px;background:rgba(185,28,74,0.1);border:1px dashed rgba(185,28,74,0.3);border-radius:7px;display:flex;align-items:center;gap:4px;transition:all 0.15s}

.ws-add-btn:hover{background:rgba(185,28,74,0.2)}

/* Text channels — customizable */

.ws-tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}

.ws-tc{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:var(--tint-2);border:1px solid var(--gb);cursor:pointer;transition:all 0.18s;position:relative;overflow:hidden}

.ws-tc:hover{background:var(--tint-3);transform:translateY(-1px)}

.ws-tc i{flex-shrink:0;color:var(--tc-c,var(--t2));width:14px;height:14px}

.ws-tc-name{flex:1;min-width:0;font-size:0.78rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}

.ws-tc-badge{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;padding:2px 6px;border-radius:5px;background:var(--danger);color:#fff;letter-spacing:0.5px;flex-shrink:0}

.ws-tc.style-glow{background:linear-gradient(135deg,rgba(185,28,74,0.15),rgba(190,18,60,0.08));border-color:rgba(185,28,74,0.3);--tc-c:#c4b5fd}

.ws-tc.style-glow:hover{box-shadow:0 0 18px rgba(185,28,74,0.3)}

.ws-tc.style-fire{background:linear-gradient(135deg,rgba(239,68,68,0.15),rgba(245,158,11,0.08));border-color:rgba(239,68,68,0.3);--tc-c:#fca5a5}

.ws-tc.style-fire:hover{box-shadow:0 0 18px rgba(239,68,68,0.3)}

.ws-tc.style-ice{background:linear-gradient(135deg,rgba(34,211,238,0.15),rgba(56,189,248,0.08));border-color:rgba(34,211,238,0.3);--tc-c:#67e8f9}

.ws-tc.style-ice:hover{box-shadow:0 0 18px rgba(34,211,238,0.3)}

.ws-tc.style-nature{background:linear-gradient(135deg,rgba(34,197,94,0.15),rgba(132,204,22,0.08));border-color:rgba(34,197,94,0.3);--tc-c:#86efac}

.ws-tc.style-nature:hover{box-shadow:0 0 18px rgba(34,197,94,0.3)}

.ws-tc.style-gold{background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(190,18,60,0.08));border-color:rgba(245,158,11,0.3);--tc-c:#fef3c7}

.ws-tc.style-gold:hover{box-shadow:0 0 18px rgba(245,158,11,0.3)}

/* Voice channels (orbs) — customizable */

.ws-vc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

.ws-vc{display:flex;flex-direction:column;align-items:center;padding:14px 10px;background:var(--tint-1);border:1px solid var(--gb);border-radius:14px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}

.ws-vc:hover{transform:translateY(-2px);background:var(--tint-2);border-color:var(--vc-c,rgba(185,28,74,0.3))}

.ws-vc-orb{width:48px;height:48px;border-radius:50%;background:var(--vc-grad,radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),#6366f1 55%,#1e1b4b));box-shadow:0 0 20px var(--vc-glow,var(--brand-glow)),inset 0 0 10px var(--tint-7);position:relative;margin-bottom:10px}

.ws-vc-orb::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px dashed var(--vc-c,rgba(185,28,74,0.5));animation:hospin 14s linear infinite}

.ws-vc-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.62rem;color:var(--t1);font-weight:700;letter-spacing:1.5px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.ws-vc-count{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;display:flex;align-items:center;gap:4px}

.ws-vc-count.live{color:var(--success)}

.ws-vc-count.live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);animation:blink 1.5s infinite}

.ws-vc.connected{border-color:var(--success);background:rgba(34,197,94,0.08)}

.ws-vc.connected .ws-vc-orb{box-shadow:0 0 26px rgba(34,197,94,0.5),inset 0 0 12px var(--tint-9)}

/* Admins quick row */

.ws-admins{display:flex;gap:8px;flex-wrap:wrap}

.ws-admin-chip{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.22);border-radius:24px;cursor:pointer;transition:all 0.18s}

.ws-admin-chip:hover{background:rgba(245,158,11,0.16)}

.ws-admin-chip-av{width:26px;height:26px;border-radius:50%;background:var(--av-color);display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:600;color:white;border:1.5px solid rgba(245,158,11,0.4);flex-shrink:0}

.ws-admin-chip-name{font-size:0.72rem;color:var(--t1);font-weight:500;white-space:nowrap}

.ws-admin-chip-role{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;color:var(--warn);letter-spacing:1px;background:rgba(245,158,11,0.18);padding:1px 5px;border-radius:4px}

/* ===== Server categories (flat list, no boxes) ===== */

.ws-cat{margin:24px 22px 0;position:relative}

.ws-cat-h{position:relative;padding:6px 0 14px;display:flex;align-items:center;justify-content:center;text-align:center;gap:6px}
/* Chevron sits absolutely on the left so it doesn't get covered by the
 * decorative ::before line that the cat-h-name draws. The line is part of
 * the title; the chevron is the click target. z-index keeps it above the
 * flowing line. */
.ws-cat-toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:6px;background:var(--tint-2);border:1px solid var(--tint-3);color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s,color 0.15s;cursor:pointer;z-index:2}
.ws-cat-toggle:hover{background:var(--tint-4);color:var(--t1);border-color:var(--tint-5)}
.ws-cat.is-collapsed .ws-cat-h{padding-bottom:6px}
.ws-cat.is-collapsed{padding-bottom:8px}

.ws-cat-h-name{font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace;font-size:0.95rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(90deg,#fff,#c4b5fd 40%,#c4b5fd 60%,#fff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:catTitleFlow 4s ease-in-out infinite;text-shadow:0 0 22px rgba(185,28,74,0.35);position:relative}

.ws-cat-h-name::before,.ws-cat-h-name::after{content:'';position:absolute;top:50%;width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(185,28,74,0.6));transform:translateY(-50%)}

.ws-cat-h-name::before{right:calc(100% + 14px);background:linear-gradient(90deg,transparent,rgba(185,28,74,0.6))}

.ws-cat-h-name::after{left:calc(100% + 14px);background:linear-gradient(90deg,rgba(185,28,74,0.6),transparent)}

@keyframes catTitleFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.ws-cat-section{padding:0}

.ws-cat-sec-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:2px;display:flex;align-items:center;gap:6px;margin:10px 0 6px;padding:0 4px}

.ws-cat-sec-l i{width:11px;height:11px;color:var(--accent)}

.ws-cat-tc-list{display:flex;flex-direction:column;gap:0}

.ws-cat-tc{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--tint-2);cursor:pointer;transition:all 0.16s;text-align:left;width:100%;background:transparent;border-radius:0;position:relative}

.ws-cat-tc:hover{background:var(--tint-1)}

.ws-cat-tc i{flex-shrink:0;color:var(--tc-c,var(--t3));width:14px;height:14px}

.ws-cat-tc-n{flex:1;font-size:0.8rem;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ws-cat-tc-b{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;background:var(--danger);color:#fff;padding:2px 6px;border-radius:5px;letter-spacing:0.5px;flex-shrink:0}

.ws-cat-tc.has-unread{box-shadow:inset 3px 0 0 var(--accent)}

.ws-cat-tc.has-unread .ws-cat-tc-n{color:#ddd6fe;text-shadow:0 0 8px rgba(185,28,74,0.45);font-weight:600}

.ws-cat-tc.style-fire{--tc-c:#fca5a5}

.ws-cat-tc.style-ice{--tc-c:#67e8f9}

.ws-cat-tc.style-nature{--tc-c:#86efac}

.ws-cat-tc.style-gold{--tc-c:#fef3c7}

.ws-cat-tc.style-glow{--tc-c:#c4b5fd}

.ws-cat-vc-list{display:flex;flex-direction:column;gap:0}

.ws-cat-vc{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--tint-2);cursor:pointer;transition:all 0.16s;background:transparent;border-radius:0;position:relative}

.ws-cat-vc:hover{background:var(--tint-1)}

.ws-cat-vc.connected{box-shadow:inset 3px 0 0 var(--success)}

.ws-cat-vc.connected .ws-cat-vc-n{color:#86efac;text-shadow:0 0 8px rgba(34,197,94,0.45)}

.ws-cat-vc-orb{width:30px;height:30px;border-radius:50%;background:var(--vc-grad);box-shadow:0 0 14px var(--vc-glow);flex-shrink:0;position:relative}

.ws-cat-vc-orb::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px dashed var(--vc-c,var(--brand-glow));animation:hospin 14s linear infinite;opacity:0.5}

.ws-cat-vc-info{flex:1;min-width:0;overflow:hidden}

.ws-cat-vc-n{font-size:0.8rem;color:var(--t1);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Legendary voice channels (the named tier orbs like SOLARIS, GLACIUS,
 * VERDANT, INFERNO, SUNFIRE) get a gold-pink shimmer name so they
 * stand out from common voice channels. Same gradient family as the
 * orb-slide .vlabel so the look is consistent across surfaces. */
.ws-cat-vc.is-legendary .ws-cat-vc-n{
  background:linear-gradient(90deg,#fef3c7,#f59e0b 40%,#ec4899 80%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:700;letter-spacing:1px;
  text-shadow:0 0 14px rgba(245,158,11,0.35);
  filter:drop-shadow(0 0 6px rgba(245,158,11,0.25));
}
.ws-cat-vc.connected.is-legendary .ws-cat-vc-n{
  background:linear-gradient(90deg,#86efac,#22c55e 40%,#86efac);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ws-cat-vc-c{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ws-cat-vc-c.live{color:var(--success)}

.ws-cat-add-row{display:flex;gap:6px;padding:10px 4px 0;flex-wrap:wrap}

.ws-add-cat-btn{padding:7px 14px;font-size:0.55rem;letter-spacing:1.5px;background:linear-gradient(135deg,rgba(185,28,74,0.15),rgba(190,18,60,0.1));border-color:var(--brand-glow);color:var(--accent)}

/* Banner cover & customizable emblem (extras) */

/* 3-dot menu on banner */

.ws-banner-actions{position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:5}

.ws-banner-menu-btn{width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);border:1px solid var(--tint-5);color:var(--t1);display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.ws-banner-leave-btn{width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);border:1px solid var(--tint-5);color:var(--t1);display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.ws-banner-leave-btn:hover{background:rgba(239,68,68,0.25);border-color:rgba(239,68,68,0.4);color:#fff}

.ws-banner-share-btn{width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);border:1px solid var(--tint-5);color:var(--t1);display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.ws-banner-share-btn:hover{background:rgba(185,28,74,0.25);border-color:var(--brand-glow);color:#fff}

.ws-banner-menu-btn:hover{background:rgba(185,28,74,0.25);border-color:var(--brand-glow)}

.ws-banner-menu-pop{display:none}

.banner-portal-menu{position:fixed;z-index:99999;background:radial-gradient(ellipse at 50% 0%,rgba(185,28,74,0.16),transparent 65%),var(--panel);border:1px solid var(--tint-4);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,0.7);min-width:220px;padding:5px;display:flex;flex-direction:column;backdrop-filter:blur(20px)}

.bpm-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:0.78rem;color:var(--t1);transition:background 0.15s;text-align:left;width:100%;background:transparent;cursor:pointer;border:none}

.bpm-item:hover{background:rgba(185,28,74,0.16)}

.bpm-item i{width:14px;height:14px;color:var(--accent)}

.bpm-sep{height:1px;background:var(--tint-3);margin:4px 6px}

.ws-banner-menu-wrap.open .ws-banner-menu-pop{display:flex}

.ws-banner-menu-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;font-size:0.78rem;color:var(--t1);transition:background 0.15s;text-align:left;width:100%;background:transparent}

.ws-banner-menu-item:hover{background:rgba(185,28,74,0.16)}

.ws-banner-menu-item i{width:14px;height:14px;color:var(--accent)}

.ws-banner-menu-sep{height:1px;background:var(--tint-3);margin:4px 6px}

/* Server channel chat view */

.ws-channel-strip{display:flex;align-items:center;gap:6px;padding:8px 16px;border-bottom:1px solid var(--gb);overflow-x:auto;scrollbar-width:none;background:rgba(0,0,0,0.18);flex-shrink:0}

.ws-channel-strip::-webkit-scrollbar{display:none}

.ws-channel-strip-back{padding:4px 9px;border-radius:7px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1px;color:var(--accent);background:rgba(185,28,74,0.1);border:1px solid rgba(185,28,74,0.25);display:flex;align-items:center;gap:5px;flex-shrink:0;transition:all 0.15s}

.ws-channel-strip-back:hover{background:rgba(185,28,74,0.2)}

.ws-channel-strip-sep{width:1px;height:18px;background:var(--tint-4);flex-shrink:0;margin:0 4px}

.ws-channel-pill{padding:5px 10px;border-radius:8px;font-size:0.7rem;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);display:flex;align-items:center;gap:5px;flex-shrink:0;cursor:pointer;transition:all 0.15s;white-space:nowrap}

.ws-channel-pill:hover{background:var(--tint-3);color:var(--t1)}

.ws-channel-pill i{width:11px;height:11px;color:var(--t3)}

.ws-channel-pill.active{background:var(--brand-glow-soft);color:var(--t1);border-color:var(--brand-glow)}

.ws-channel-pill.active i{color:var(--accent)}

.ws-channel-pill .ws-channel-pill-badge{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;background:var(--danger);color:#fff;padding:1px 4px;border-radius:3px}

.ws-channel-view{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}

.ws-channel-msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px;min-height:0}

.ws-channel-empty{margin:auto;text-align:center;color:var(--t3);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;letter-spacing:1.5px}

.ws-channel-empty i{display:block;margin:0 auto 12px;width:36px;height:36px;color:var(--accent);opacity:0.7}

.ws-msg{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;position:relative;transition:background 0.15s}

.ws-msg:hover{background:var(--tint-1)}

.ws-msg-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:0.78rem;flex-shrink:0;background:var(--av,linear-gradient(135deg,#6366f1,#1e1b4b));cursor:pointer;transition:transform 0.15s,box-shadow 0.15s}

.ws-msg-av:hover{transform:scale(1.06);box-shadow:0 0 10px rgba(185,28,74,0.25)}

.ws-msg-body{flex:1;min-width:0}

.ws-msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}

.ws-msg-name{font-size:0.78rem;color:var(--t1);font-weight:600}

.ws-msg-time{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px}

.ws-msg-text{font-size:0.82rem;color:var(--t1);line-height:1.45;word-wrap:break-word}

.ws-msg-text.deleted{color:var(--t3);font-style:italic;opacity:0.6}

.ws-msg-text.image-msg{padding:0;background:transparent;border:none;margin-top:4px;max-width:340px}

.ws-msg-text img{max-width:320px;width:auto;height:auto;max-height:360px;border-radius:10px;cursor:zoom-in;display:block;background:var(--tint-1);object-fit:contain}

.ws-msg-reply{margin-bottom:5px;padding:6px 9px;border-left:2px solid var(--accent);background:var(--brand-glow-faint);border-radius:0 6px 6px 0;cursor:pointer}

.ws-msg-reply .wsr-name{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--accent);letter-spacing:1px;font-weight:600;margin-bottom:1px}

.ws-msg-reply .wsr-text{font-size:0.7rem;color:var(--t2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ws-msg-actions{position:absolute;top:-10px;right:10px;display:flex;gap:2px;background:var(--panel);border:1px solid var(--tint-5);border-radius:8px;padding:3px;box-shadow:0 6px 18px rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity 0.12s,transform 0.12s;transform:translateY(4px)}

.ws-msg:hover .ws-msg-actions{opacity:1;pointer-events:all;transform:translateY(0)}

.ws-msg-act{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t2);background:transparent;transition:all 0.12s}

.ws-msg-act:hover{background:var(--brand-glow-soft);color:var(--accent)}

.ws-msg-act.danger:hover{background:rgba(239,68,68,0.18);color:var(--danger)}

.ws-reply-preview{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:7px 10px;background:var(--brand-glow-faint);border:1px solid rgba(185,28,74,0.22);border-radius:9px}

.ws-reply-preview .ws-rp-bar{width:3px;align-self:stretch;background:var(--accent);border-radius:2px}

.ws-reply-preview .ws-rp-info{flex:1;min-width:0}

.ws-reply-preview .ws-rp-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--accent);letter-spacing:1px;display:flex;align-items:center;gap:4px;margin-bottom:2px}

.ws-reply-preview .ws-rp-l b{color:var(--t1);font-weight:600;text-transform:none;letter-spacing:0;font-family:inherit;font-size:0.65rem}

.ws-reply-preview .ws-rp-text{font-size:0.7rem;color:var(--t2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ws-reply-preview .ws-rp-x{width:24px;height:24px;border-radius:5px;color:var(--t3);background:transparent;display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.ws-reply-preview .ws-rp-x:hover{background:rgba(239,68,68,0.18);color:var(--danger)}

/* Header home button (server main) */

.ph-home-btn{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:rgba(185,28,74,0.12);border:1px solid rgba(185,28,74,0.25);transition:all 0.15s;flex-shrink:0}

.ph-home-btn:hover{background:rgba(185,28,74,0.22);transform:translateY(-1px)}

/* ============== TASK BAR / NAV ============== */

.taskbar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:radial-gradient(ellipse at 50% 0%,rgba(91,33,182,0.14),transparent 65%),rgba(0,0,0,0.32);border-top:1px solid var(--tint-3);flex-shrink:0;position:relative;overflow:hidden}

.taskbar-left{display:flex;align-items:center;gap:10px}

.tb-logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;color:white;font-size:0.7rem;cursor:pointer;box-shadow:0 4px 12px rgba(185,28,74,0.3)}

.tb-clock{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t2);letter-spacing:1px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background 0.2s}

.tb-clock:hover{background:var(--tint-3)}

.taskbar-mid{display:flex;gap:4px}

.tb{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:10px;font-size:0.7rem;color:var(--t3);transition:all 0.2s;position:relative}

.tb:hover{background:var(--tint-3);color:var(--t2)}

.tb.active{background:linear-gradient(135deg,var(--brand-glow-soft),rgba(190,18,60,0.18));color:var(--t1);border:1px solid rgba(185,28,74,0.25);box-shadow:0 0 12px var(--brand-glow-soft)}

.tb i{width:14px;height:14px}

.tb-badge{position:absolute;top:3px;right:5px;background:var(--danger);color:white;font-size:0.45rem;padding:1px 4px;border-radius:6px;min-width:14px;text-align:center;font-weight:700;font-family:'Space Mono','Vazirmatn',monospace}

.taskbar-right{display:flex;align-items:center;gap:6px}

.tb-right-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all 0.2s;position:relative}

.tb-right-btn:hover{background:var(--tint-3);color:var(--t1)}

.tb-right-btn.active{background:rgba(185,28,74,0.15);color:var(--accent)}

.tb-right-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--bg)}

.tb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#15803d);display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;cursor:pointer;color:white;border:1.5px solid var(--tint-5);transition:transform 0.2s;background-size:cover;background-position:center;overflow:hidden}

.tb-avatar:hover{transform:scale(1.08)}

/* ============== POPUPS / OVERLAYS ============== */

.popup-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:99}

.popup-backdrop.show{opacity:1;pointer-events:auto}

.popup{position:absolute;background:radial-gradient(ellipse at 50% 0%,var(--brand-glow-soft),transparent 65%),var(--panel);backdrop-filter:blur(40px);border:1px solid var(--tint-3);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.7),inset 0 1px 0 var(--tint-3);z-index:100;opacity:0;transform:translateY(8px) scale(0.96);pointer-events:none;transition:opacity 0.18s,transform 0.18s;display:none;overflow:hidden}

.popup.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;display:block}

.popup.center-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.96);z-index:350}

.popup.center-pop.show{transform:translate(-50%,-50%) scale(1)}

.popup-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--tint-3)}

.popup-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;letter-spacing:2px;color:var(--t1)}

.popup-close{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3)}

.popup-close:hover{background:var(--tint-3);color:var(--t1)}

.popup.notif{width:340px;max-height:420px;display:none;flex-direction:column}

.popup.notif.show{display:flex}

.notif-list{flex:1;overflow-y:auto;padding:6px}

.notif-item{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;transition:background 0.15s;position:relative}

.notif-item:hover{background:var(--tint-2)}

.notif-item.unread{background:rgba(185,28,74,0.06)}

.notif-item.unread::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}

.notif-item.unread{padding-left:14px}

.notif-i{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(185,28,74,0.12);color:var(--accent)}

.notif-i.green{background:rgba(34,197,94,0.12);color:var(--success)}

.notif-i.warn{background:rgba(245,158,11,0.12);color:var(--warn)}

.notif-i.pink{background:rgba(190,18,60,0.12);color:var(--pink)}

.notif-c{flex:1;min-width:0}

.notif-t{font-size:0.78rem;color:var(--t1);font-weight:500}

.notif-d{font-size:0.65rem;color:var(--t3);margin-top:2px;line-height:1.4}

.notif-time{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px;margin-top:4px}

.notif-foot{padding:8px;border-top:1px solid var(--tint-3);text-align:center}

.notif-foot button{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1px;color:var(--accent);padding:4px 10px;border-radius:6px;transition:background 0.2s}

.notif-foot button:hover{background:var(--brand-glow-faint)}

.notif-empty{padding:30px;text-align:center;color:var(--t3);font-size:0.75rem}

.popup.emoji-pop{width:280px;height:300px;display:none;flex-direction:column}

.popup.emoji-pop.show{display:flex}

.emoji-cats{display:flex;gap:1px;padding:6px;border-bottom:1px solid var(--tint-3);overflow-x:auto;scrollbar-width:none}

.emoji-cats::-webkit-scrollbar{display:none}

.vs-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--tint-4);outline:none}

.vs-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px var(--ag)}

.vs-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}

.vs-mode-row{display:flex;gap:6px}

.vs-mode-btn{flex:1;padding:9px 10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);border-radius:9px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:6px}

.vs-mode-btn.active{color:var(--t1);background:rgba(185,28,74,0.2);border-color:var(--brand-glow)}

/* Modern pill-style toggle: hidden checkbox + 38x22 track + sliding
 * thumb. The original native checkbox stays in the DOM so every
 * existing change-listener keeps working. */
.vs-toggle-row{display:flex;flex-direction:column;gap:8px}

/* Processing row — pairs the toggle with a strength slider. When the
 * toggle is off, the strength block fades + becomes non-interactive
 * so it visually reflects "no effect even if the slider is high". */
.vs-proc-row{
  display:flex;flex-direction:column;gap:6px;
  padding:8px 10px;border-radius:9px;
  background:var(--tint-2);
  border:1px solid var(--tint-3);
}
.vs-proc-row + .vs-proc-row{margin-top:8px}
.vs-proc-strength{display:flex;flex-direction:column;gap:4px;padding-left:50px}
.vs-proc-strength-l{
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.5rem;letter-spacing:1.4px;color:var(--t3);
}
.vs-proc-row:not(:has(input[type=checkbox]:checked)) .vs-proc-strength{
  opacity:0.42;pointer-events:none;
}

/* ============================================================
 * SKELETON LOADERS
 * Shimmer animation used by the Home (marked orbits, my servers),
 * orbit column, and DM list/panel while the first hydrate is in
 * flight. The base .sk class is a tinted block with a moving
 * gradient sweep; per-shape classes set width/height/radius.
 * ============================================================ */
@keyframes sk-shimmer{
  0%  {background-position: -200% 0}
  100%{background-position:  200% 0}
}
.sk{
  background:linear-gradient(90deg,
    var(--tint-2) 0%, var(--tint-4) 40%,
    var(--tint-2) 80%);
  background-size:200% 100%;
  animation:sk-shimmer 1.6s linear infinite;
  border-radius:6px;
  display:block;
}
.sk-line{height:9px;margin-top:6px}
.sk-l-w70{width:70%}
.sk-l-w60{width:60%}
.sk-l-w50{width:50%}
.sk-l-w40{width:40%}
.sk-l-w30{width:30%}

/* Marked Orbit skeleton card: matches .mark-orb-card geometry */
.sk-orb-card{
  flex-shrink:0;width:110px;
  background:var(--tint-1);
  border:1px solid var(--tint-3);
  border-radius:14px;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.sk-orb-card .sk-orb-circle{
  width:56px;height:56px;border-radius:50%;
}
.sk-orb-card .sk-line{align-self:stretch}

/* My Server skeleton card: matches .my-server-card */
.sk-server-card{
  flex-shrink:0;width:84px;
  background:var(--tint-1);
  border:1px solid var(--tint-3);
  border-radius:14px;padding:12px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.sk-server-card .sk-emblem{
  width:44px;height:44px;border-radius:12px;
}

/* DM list skeleton row: matches .dm-list-item */
.sk-dm-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
}
.sk-dm-item .sk-av{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.sk-dm-item .sk-text{flex:1;display:flex;flex-direction:column;gap:4px}

/* DM bubble skeletons (chat area) */
.sk-dm-bubble{
  max-width:62%;min-width:140px;
  padding:10px 14px;border-radius:14px;
  background:var(--tint-2);
  display:flex;flex-direction:column;gap:6px;
  margin:8px 12px;
}
.sk-dm-bubble.them{align-self:flex-start}
.sk-dm-bubble.me  {align-self:flex-end;background:var(--brand-glow-soft)}
.sk-dm-bubble .sk-line{height:11px}

/* Friend bubble skeleton — matches .friend-bubble geometry */
.sk-friend{
  flex-shrink:0;width:64px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:4px;
}
.sk-friend .sk-friend-av{ width:46px;height:46px;border-radius:50%; }

/* Marked Panel row skeleton — matches .mp-row */
.sk-mp-row{ display:flex;align-items:center;gap:10px;padding:8px 10px; }
.sk-mp-row .sk-mp-av{ width:34px;height:34px;border-radius:50%;flex-shrink:0; }
.sk-mp-row .sk-line{ flex:1 }

/* Orbit column loading: the orb itself pulses — slow brightness +
 * scale breath. No big external ring; the planet is what carries the
 * "still loading" signal so the affordance stays on the actual orb. */
.orb-col.is-loading .orb-slide .planet{
  animation:sk-orb-breathe 1.4s ease-in-out infinite;
}
@keyframes sk-orb-breathe{
  0%,100%{ filter:brightness(0.55) saturate(0.7); transform:scale(0.96); }
  50%    { filter:brightness(1) saturate(1);     transform:scale(1); }
}
.vs-toggle{
  position:relative;display:flex;align-items:center;gap:12px;
  font-size:0.78rem;color:var(--t1);cursor:pointer;
  padding:4px 2px;user-select:none;
}
.vs-toggle input[type=checkbox]{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.vs-toggle::before{
  content:"";flex-shrink:0;
  width:38px;height:22px;border-radius:11px;
  background:var(--tint-4);
  border:1px solid var(--tint-5);
  transition:background 0.18s,border-color 0.18s;
}
.vs-toggle::after{
  content:"";position:absolute;left:5px;top:50%;
  width:16px;height:16px;border-radius:50%;
  background:#f5f5f7;
  box-shadow:0 1px 3px rgba(0,0,0,0.45);
  transform:translateY(-50%);
  transition:left 0.18s ease, background 0.18s;
}
.vs-toggle:has(input:checked)::before{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
}
.vs-toggle:has(input:checked)::after{ left:19px; }
.vs-toggle:hover::before{ filter:brightness(1.08); }

/* Hotkey rows. Each row: a label on the left, the recording button
 * (full-width), and a small clear button on the right. */
.vs-shortcut-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
}
.vs-shortcut-label{
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.65rem;letter-spacing:1.2px;color:var(--t2);
  white-space:nowrap;
}
.vs-shortcut-key{
  text-align:center;cursor:pointer;font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.7rem;letter-spacing:1.4px;
}
.vs-shortcut-key.recording{
  color:var(--accent);border-color:var(--ag);
  background:var(--brand-glow-soft);
}
.vs-shortcut-clear{
  width:28px;height:28px;border-radius:6px;
  background:var(--tint-3);border:1px solid var(--tint-4);
  color:var(--t2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;
  transition:background 0.15s,color 0.15s;
}
.vs-shortcut-clear:hover{background:var(--tint-5);color:var(--t1)}

/* "Available in the desktop app" placeholder card. Used by panels
 * (game overlay, etc.) where the browser build can't deliver the
 * feature. Two-column layout: a stamped icon on the left + body. */
.settings-locked-card{
  display:flex;gap:14px;padding:16px;
  background:var(--tint-2);border:1px solid var(--tint-3);
  border-radius:12px;
}
.settings-locked-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px var(--brand-glow);
}
.settings-locked-body{flex:1;min-width:0}
.settings-locked-title{
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.78rem;letter-spacing:1.4px;font-weight:700;
  color:var(--t1);margin-bottom:4px;
}
.settings-locked-desc{
  font-size:0.78rem;line-height:1.55;color:var(--t2);
}
.settings-locked-list{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:5px;
}
.settings-locked-list li{
  display:flex;align-items:center;gap:6px;
  font-size:0.72rem;color:var(--t1);
}
.settings-locked-list li i{color:var(--accent);flex-shrink:0}

/* Voice settings — sectioned layout. Each section is a labelled card
 * grouping related controls (devices, volume, input mode, processing,
 * test, shortcuts), so the modal scans like a structured form
 * instead of a flat dump of controls. */
.vs-body{
  display:flex;flex-direction:column;gap:14px;
  max-height:70vh;overflow-y:auto;padding:14px;
}
.vs-section{
  background:var(--tint-1);
  border:1px solid var(--tint-3);
  border-radius:12px;
  padding:12px 14px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.vs-section-h{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.62rem;letter-spacing:1.6px;font-weight:700;
  color:var(--t1);text-transform:uppercase;
  padding-bottom:8px;
  border-bottom:1px solid var(--tint-3);
}
.vs-section-h i{color:var(--accent)}
.vs-section .sm-field{margin:0}
.vs-section .sm-field + .sm-field{margin-top:0}

/* ============================================================
 * NOTIFICATION SETTINGS — overrides table.
 * Lives inside Settings → Notifications. Two tabs (Channels /
 * DMs) each render a list of rows; every row has a Default /
 * Always / Mute toggle. Search filter at the top, Reset
 * action at the bottom. Surface mirrors the QUICK TRANSMIT box.
 * ============================================================ */
.nf-tabs{
  display:flex;gap:4px;
  background:var(--tint-2);
  border:1px solid var(--tint-3);
  border-radius:10px;
  padding:3px;
  width:fit-content;
}
.nf-tab{
  background:transparent;border:none;color:var(--t2);
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.6rem;letter-spacing:1.4px;font-weight:700;
  padding:6px 14px;border-radius:7px;cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.nf-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
}
.nf-search-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--tint-3);
  border-radius:8px;padding:7px 10px;
  margin-top:8px;
}
.nf-search-wrap i{color:var(--t3);flex-shrink:0}
.nf-search{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--t1);font:inherit;font-size:0.78rem;
}
.nf-search::placeholder{color:var(--t3)}

.nf-list{
  max-height:280px;overflow-y:auto;
  margin-top:8px;padding-right:4px;
  display:flex;flex-direction:column;gap:5px;
}
.nf-list::-webkit-scrollbar{width:6px}
.nf-list::-webkit-scrollbar-thumb{background:var(--tint-4);border-radius:3px}

.nf-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;
  background:var(--tint-1);
  border:1px solid var(--tint-3);
}
.nf-row-icon{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--av-default-grad);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:0.7rem;
  border:1px solid var(--tint-4);
  background-size:cover;background-position:center;
}
.nf-row-icon.hash{
  background:var(--tint-3);
  color:var(--t2);
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.95rem;line-height:1;font-weight:400;
}
.nf-row-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nf-row-name{
  font-size:0.78rem;font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nf-row-sub{
  font-size:0.6rem;color:var(--t3);
  font-family:'Space Mono','Vazirmatn',monospace;letter-spacing:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.nf-seg{
  display:flex;background:rgba(0,0,0,0.25);
  border:1px solid var(--tint-3);
  border-radius:7px;padding:2px;flex-shrink:0;
}
.nf-seg-btn{
  background:transparent;border:none;color:var(--t3);
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.55rem;letter-spacing:1.3px;font-weight:700;
  padding:5px 9px;border-radius:5px;cursor:pointer;
  transition:background 0.15s,color 0.15s;
  display:flex;align-items:center;gap:4px;
}
.nf-seg-btn:hover{color:var(--t1)}
.nf-seg-btn.active.def    {background:var(--tint-4);color:var(--t1)}
.nf-seg-btn.active.always {background:rgba(34,197,94,0.20);color:var(--success)}
.nf-seg-btn.active.mute   {background:rgba(239,68,68,0.18);color:#fda4af}

.nf-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:24px 12px;text-align:center;
  color:var(--t3);font-size:0.78rem;line-height:1.5;
  background:var(--tint-1);border:1px dashed var(--tint-3);
  border-radius:10px;margin-top:8px;
}
.nf-empty i{color:var(--t3)}

.nf-foot{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-top:12px;flex-wrap:wrap;
}
.nf-foot-hint{
  flex:1;min-width:200px;color:var(--t3);font-size:0.68rem;line-height:1.55;
}
.nf-foot-hint b{color:var(--t1);font-weight:600}
.nf-foot .sm-btn{flex-shrink:0;height:32px}

.nf-perm-pill{
  margin-left:8px;
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.5rem;letter-spacing:1.2px;font-weight:700;
  padding:2px 7px;border-radius:5px;
  border:1px solid var(--tint-4);background:var(--tint-3);color:var(--t2);
  vertical-align:middle;
}
.nf-perm-pill.nf-perm-granted{background:rgba(34,197,94,0.18);color:var(--success);border-color:rgba(34,197,94,0.45)}
.nf-perm-pill.nf-perm-denied {background:rgba(239,68,68,0.18);color:#fda4af;   border-color:rgba(239,68,68,0.45)}
.nf-perm-pill.nf-perm-unsupported{background:rgba(245,158,11,0.15);color:var(--warn);border-color:rgba(245,158,11,0.45)}

.ec-tab{padding:6px 9px;font-size:1rem;border-radius:8px;cursor:pointer;flex-shrink:0;transition:background 0.15s,opacity 0.15s;opacity:0.55;line-height:1}

.ec-tab[data-active="1"]{opacity:1;background:var(--brand-glow-soft)}

.ec-tab:hover{opacity:1;background:var(--tint-2)}

.emoji-grid{flex:1;overflow-y:auto;padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px}

.emoji-cell{display:flex;align-items:center;justify-content:center;font-size:1.1rem;padding:5px;border-radius:6px;cursor:pointer;transition:all 0.1s}

.emoji-cell:hover{background:rgba(185,28,74,0.15);transform:scale(1.2)}

.popup.calendar-pop{width:280px;display:none;flex-direction:column}

.popup.calendar-pop.show{display:flex}

.cal-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}

.cal-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;letter-spacing:1.5px;color:var(--t1);font-weight:600}

.cal-nav{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3)}

.cal-nav:hover{background:var(--tint-3);color:var(--t1)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:4px 8px 10px}

.cal-day-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);text-align:center;padding:6px 0;letter-spacing:1px}

.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--t1);cursor:pointer;border-radius:6px;transition:all 0.15s;position:relative}

.cal-day:hover{background:var(--tint-3)}

.cal-day.other{color:var(--t3);opacity:0.5}

.cal-day.today{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-weight:700;box-shadow:0 0 12px var(--brand-glow)}

.cal-day.has-event::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--pink)}

.popup.clock-pop{width:240px;display:none;flex-direction:column;text-align:center;padding:14px}

.popup.clock-pop.show{display:flex}

.clock-time{font-family:'Space Mono','Vazirmatn',monospace;font-size:1.8rem;font-weight:700;color:var(--t1);letter-spacing:2px}

.clock-date{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t3);letter-spacing:1.5px;margin-top:4px}

.clock-zone{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--accent);letter-spacing:1.5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--tint-3)}

.popup.requests-pop{width:340px;max-height:420px;display:none;flex-direction:column}

.popup.requests-pop.show{display:flex}

.req-list{flex:1;overflow-y:auto;padding:8px}

.req-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--tint-1);border:1px solid var(--gb);margin-bottom:6px}

.req-av{width:36px;height:36px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:600;color:white;flex-shrink:0}

.req-info{flex:1;min-width:0}

.req-n{font-size:0.78rem;color:var(--t1);font-weight:500}

.req-meta{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;margin-top:1px}

.req-actions{display:flex;gap:4px;flex-shrink:0}

.req-btn{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}

.req-btn.accept{background:rgba(34,197,94,0.15);color:var(--success)}

.req-btn.accept:hover{background:rgba(34,197,94,0.3)}

.req-btn.reject{background:rgba(239,68,68,0.12);color:var(--danger)}

.req-btn.reject:hover{background:rgba(239,68,68,0.25)}

/* CONTEXT MENU (right click on voice members) */

.ctx-menu{position:fixed;background:var(--panel);border:1px solid var(--tint-5);border-radius:10px;padding:5px;box-shadow:0 12px 40px rgba(0,0,0,0.7);z-index:400;min-width:160px;display:none;backdrop-filter:blur(20px)}

.ctx-menu.show{display:block}

.ctx-item{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:7px;font-size:0.74rem;color:var(--t1);cursor:pointer;transition:background 0.15s;width:100%}

.ctx-slider{padding:8px 11px;display:flex;flex-direction:column;gap:6px}

.ctx-slider-l{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:var(--t2)}

.ctx-slider-l i{width:12px;height:12px;color:var(--accent)}

.ctx-slider-l > span{margin-left:auto;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;color:var(--t1)}

.ctx-item:hover{background:rgba(185,28,74,0.15)}

.ctx-item i{width:13px;height:13px;color:var(--t2)}

.ctx-item.danger{color:var(--danger)}

.ctx-item.danger:hover{background:rgba(239,68,68,0.15)}

.ctx-item.danger i{color:var(--danger)}

.ctx-sep{height:1px;background:var(--tint-3);margin:4px 6px}

.ctx-head{padding:8px 11px 6px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1.5px;border-bottom:1px solid var(--tint-3);margin-bottom:4px}

/* Search overlay */

.search-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);z-index:200;display:none;flex-direction:column;align-items:center;padding:14vh 20px 20px;opacity:0;transition:opacity 0.2s}

.search-overlay.show{display:flex;opacity:1}

.search-box{width:100%;max-width:540px;background:var(--panel);border:1px solid var(--tint-5);border-radius:16px;display:flex;flex-direction:column;max-height:65vh}

.search-input-wrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--tint-3)}

.search-input-wrap i{color:var(--t3)}

.search-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:0.95rem;font-family:inherit}

.search-input::placeholder{color:var(--t3)}

.search-kbd{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;padding:3px 7px;border:1px solid var(--tint-4);border-radius:5px;background:var(--tint-2)}

.search-results{flex:1;min-height:0;overflow-y:auto;padding:6px}

.search-section-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1.5px;padding:8px 12px 4px}

.sr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.15s}

.sr-item:hover{background:rgba(185,28,74,0.1)}

.sr-i{width:28px;height:28px;border-radius:8px;background:rgba(185,28,74,0.12);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.sr-i.green{background:rgba(34,197,94,0.12);color:var(--success)}

.sr-i.warn{background:rgba(245,158,11,0.12);color:var(--warn)}

.sr-t{font-size:0.78rem;color:var(--t1)}

.sr-d{font-size:0.6rem;color:var(--t3);margin-top:1px}

.sr-empty{padding:30px;text-align:center;color:var(--t3);font-size:0.75rem}

/* ============== MODALS ============== */

.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);z-index:300;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity 0.25s}
/* Pre-auth lock: while the user hasn't signed in yet, the dashboard
 * underneath the auth modal becomes inert. The auth modal sits above
 * everything so nothing can render in front of it, and Escape no longer
 * dismisses it (handled in app.js). */
:root.is-pre-auth .page,
:root.is-pre-auth .ws-bottom-nav,
:root.is-pre-auth .ph-toolbar{pointer-events:none;user-select:none}
:root.is-pre-auth #authBackdrop{z-index:9999}

/* Modals that can open while another modal is already showing must sit on top.

   Bumping z-index ensures the transfer-ownership and roles dialogs render

   above the server-identity / settings modal that opened them. */

#rolesBackdrop{z-index:320}

#ownerTransferBackdrop{z-index:340}

#confirmBackdrop{z-index:360}

#authBackdrop{z-index:600}

.auth-tabs{display:flex;gap:6px;background:var(--tint-2);border:1px solid var(--gb);border-radius:10px;padding:4px;margin-bottom:6px}

.auth-tab{flex:1;padding:9px 0;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;color:var(--t2);border-radius:7px;cursor:pointer;transition:all 0.15s}

.auth-tab.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 4px 14px rgba(185,28,74,0.35)}

.auth-splash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--ag),var(--bg) 70%);z-index:700;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;transition:opacity 0.3s}

.auth-splash.show{display:flex;opacity:1}

.auth-splash-orb{position:relative;width:84px;height:84px}

.auth-splash-orb > span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--tint-6);animation:authPulse 2.4s ease-in-out infinite}

.auth-splash-orb > span:nth-child(2){animation-delay:0.4s}

.auth-splash-orb > span:nth-child(3){animation-delay:0.8s}

.auth-splash-orb::before{content:'';position:absolute;left:50%;top:50%;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,200,200,0.5),var(--accent) 55%,var(--accent-2));transform:translate(-50%,-50%);box-shadow:0 0 28px var(--ag)}

.auth-splash-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.62rem;letter-spacing:3px;color:var(--t1)}

@keyframes authPulse{0%{transform:scale(0.6);opacity:0.85;border-color:rgba(185,28,74,0.5)}100%{transform:scale(1.6);opacity:0;border-color:rgba(185,28,74,0)}}

.modal-backdrop.show{display:flex;opacity:1}

.modal{background:radial-gradient(ellipse at 50% 0%,var(--brand-glow-soft),transparent 65%),var(--panel);border:1px solid var(--tint-3);border-radius:14px;width:100%;max-width:440px;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 100px rgba(0,0,0,0.7),inset 0 1px 0 var(--tint-3);transform:translateY(20px) scale(0.96);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative}

.modal-backdrop.show .modal{transform:translateY(0) scale(1)}

.modal-cosmic{position:relative;height:200px;overflow:hidden;flex-shrink:0;background:radial-gradient(ellipse at 50% 100%,rgba(185,28,74,0.25),transparent 70%);display:flex;align-items:center;justify-content:center}

.modal-cosmic::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><circle cx='30' cy='40' r='0.6' fill='white' opacity='0.6'/><circle cx='80' cy='25' r='0.4' fill='white' opacity='0.5'/><circle cx='150' cy='60' r='0.5' fill='white' opacity='0.7'/><circle cx='180' cy='30' r='0.3' fill='white' opacity='0.4'/><circle cx='40' cy='90' r='0.5' fill='white' opacity='0.6'/><circle cx='120' cy='110' r='0.4' fill='white' opacity='0.5'/><circle cx='170' cy='150' r='0.6' fill='white' opacity='0.7'/><circle cx='60' cy='170' r='0.4' fill='white' opacity='0.4'/><circle cx='10' cy='130' r='0.5' fill='white' opacity='0.6'/><circle cx='190' cy='100' r='0.3' fill='white' opacity='0.5'/></svg>") repeat;opacity:0.7}

.modal-orb-wrap{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center;z-index:2}

.modal-orb-core{width:80px;height:80px;border-radius:50%;background:var(--profile-orb-grad,radial-gradient(circle at 35% 30%,var(--tint-strong),var(--accent) 55%,#1e1b4b));box-shadow:0 0 50px var(--profile-orb-glow,var(--brand-glow-strong)),inset 0 0 22px rgba(255,255,255,0.35);position:relative;z-index:5;animation:oglow 4s ease-in-out infinite;display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:700;color:white;font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace}

.modal-orb-ring{position:absolute;border-radius:50%;border:1.5px dashed var(--profile-orb-color,rgba(185,28,74,0.45))}

.modal-orb-ring.r1{width:115px;height:115px;animation:hospin 14s linear infinite}

.modal-orb-ring.r2{width:140px;height:140px;border-style:solid;border-color:var(--profile-orb-color,var(--brand-glow-soft));animation:hospin 22s linear infinite reverse}

.modal-orb-ring.r3{width:160px;height:160px;border:1px dashed var(--profile-orb-color,rgba(190,18,60,0.3));animation:hospin 30s linear infinite}

.modal-orb-satellite{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;animation:msat1 12s linear infinite}

.modal-orb-satellite.s2{animation:msat2 16s linear infinite}

.modal-orb-satellite.s3{animation:msat3 20s linear infinite reverse}

@keyframes msat1{from{transform:rotate(0deg) translateX(57px) rotate(0deg)}to{transform:rotate(360deg) translateX(57px) rotate(-360deg)}}

@keyframes msat2{from{transform:rotate(120deg) translateX(70px) rotate(-120deg)}to{transform:rotate(480deg) translateX(70px) rotate(-480deg)}}

@keyframes msat3{from{transform:rotate(240deg) translateX(80px) rotate(-240deg)}to{transform:rotate(-120deg) translateX(80px) rotate(120deg)}}

.modal-orb-sat-av{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);border:1.5px solid var(--profile-orb-color,rgba(185,28,74,0.5));display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:white;animation:corbi 12s linear infinite}

.modal-status-dot{position:absolute;bottom:8px;right:14px;width:18px;height:18px;border-radius:50%;background:var(--success);border:3px solid var(--panel);box-shadow:0 0 10px var(--success);z-index:6}

.modal-status-dot.offline{background:var(--t3);box-shadow:none}

.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.4);color:white;display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(10px);transition:background 0.2s;border:1px solid var(--tint-4)}

.modal-close:hover{background:rgba(0,0,0,0.7)}

.modal-fav{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,0.4);color:white;display:flex;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(10px);transition:all 0.2s;border:1px solid var(--tint-4)}

.modal-fav:hover{background:rgba(0,0,0,0.7)}

.modal-fav.active{color:var(--warn);background:rgba(245,158,11,0.15);border-color:rgba(245,158,11,0.3)}

.modal-body{padding:0 24px 22px;overflow-y:auto;flex:1;text-align:center}

.modal-name{font-size:1.35rem;font-weight:700;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Space Grotesk','Vazirmatn',sans-serif}

.modal-name .verified-badge{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;color:var(--accent)}

.modal-handle{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t3);letter-spacing:1.5px;margin-top:3px}

.modal-handle .role-pill{display:inline-block;padding:2px 7px;border-radius:6px;background:rgba(185,28,74,0.15);color:var(--accent);border:1px solid rgba(185,28,74,0.25);margin-left:6px;font-size:0.55rem;letter-spacing:1.5px}

.modal-bio{font-size:0.78rem;color:var(--t2);line-height:1.55;margin-top:14px;padding:12px 14px;background:var(--tint-1);border:1px solid var(--gb);border-radius:12px;text-align:left}

.modal-stats{display:flex;gap:8px;margin-top:14px}

.modal-stat{flex:1;padding:11px 8px;background:var(--tint-2);border:1px solid var(--gb);border-radius:12px;text-align:center;cursor:pointer;transition:all 0.2s}

.modal-stat:hover{background:var(--brand-glow-faint);border-color:rgba(185,28,74,0.25);transform:translateY(-1px)}

.modal-stat-n{font-family:'Space Mono','Vazirmatn',monospace;font-size:1.05rem;font-weight:700;color:var(--t1);line-height:1}

.modal-stat-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1.5px;margin-top:4px}

.modal-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}

.modal-info-card{padding:10px;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px;text-align:left}

.modal-info-card .mic-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1.5px;display:flex;align-items:center;gap:5px;margin-bottom:4px}

.modal-info-card .mic-l i{width:11px;height:11px}

.modal-info-card .mic-v{font-size:0.74rem;color:var(--t1);font-weight:500}

.modal-info-card.status .mic-v{color:var(--success)}

.modal-info-card.status.offline .mic-v{color:var(--t3)}

.modal-actions{display:flex;gap:8px;margin-top:18px}

.modal-btn{flex:1;padding:11px;border-radius:12px;font-size:0.74rem;font-weight:600;font-family:'Space Mono','Vazirmatn',monospace;letter-spacing:1.5px;display:flex;align-items:center;justify-content:center;gap:7px;transition:all 0.2s;border:1px solid transparent;cursor:pointer}

.modal-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;box-shadow:0 4px 16px var(--brand-glow)}

.modal-btn.primary:hover{box-shadow:0 6px 22px rgba(185,28,74,0.6);transform:translateY(-1px)}

.modal-btn.secondary{background:var(--tint-3);color:var(--t1);border-color:var(--gb)}

.modal-btn.secondary:hover{background:var(--tint-4);border-color:var(--tint-6)}

.modal-btn.danger{background:rgba(239,68,68,0.12);color:var(--danger);border-color:rgba(239,68,68,0.25)}

.modal-btn.danger:hover{background:rgba(239,68,68,0.22)}

/* PROFILE — simplified */

/* Cover sits inside the modal with a small gap on three sides so the
 * modal's outer border still reads. Top corners are rounded to match
 * the modal's 14px curve (minus the 6px gap = 8px). Bottom fades to
 * transparency via mask-image so what sits below shows through naturally. */
.profile-banner{
  position:relative;
  height:78px;
  margin:6px 6px 0;
  border-radius:8px 8px 0 0;
  background:radial-gradient(ellipse at 50% 0%,rgba(185,28,74,0.32),transparent 70%),linear-gradient(180deg,var(--tint-3),transparent);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 35%,transparent 100%);
}

/* Avatar overlaps the cover by ~28px while the name+handle column sits
 * fully below the cover edge. We use align-items:flex-end so the column
 * baseline aligns with the bottom of the avatar, then push profile-head
 * down with a small positive margin so the name never crashes into the
 * cover image. */
.profile-head{display:flex;align-items:flex-end;gap:12px;padding:6px 18px 0;margin-top:-28px;position:relative;z-index:2}

.profile-head-info{flex:1;min-width:0;padding-bottom:4px}

.profile-handle-row{display:flex;align-items:center;gap:6px;margin-bottom:0}

.profile-handle-copy{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all 0.15s}

.profile-handle-copy:hover{background:var(--tint-3);color:var(--t1)}

.profile-tags{display:flex;flex-wrap:wrap;gap:6px;padding:10px 18px 0}

.profile-tag{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);padding:3px 8px;border-radius:5px}

.profile-tag.status{color:var(--success);background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.25)}

.profile-tag.offline{color:var(--t3);background:var(--tint-2);border-color:var(--gb)}

.profile-stat-row{display:flex;gap:8px;padding:10px 18px}

.profile-stat{flex:1;text-align:center;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px;padding:8px 4px}

.profile-stat-v{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:1.05rem;font-weight:600;color:var(--t1)}

.profile-stat-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.4px;color:var(--t3);margin-top:2px}

.profile-section{padding:6px 18px}

.profile-section-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.6px;color:var(--t3);margin-bottom:4px}

.profile-section-v{font-size:0.78rem;color:var(--t1)}

.profile-shared-list{display:flex;flex-wrap:wrap;gap:6px}

.profile-shared-orb{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:0.65rem;background-size:cover;background-position:center;border:1px solid var(--tint-5);cursor:pointer;transition:transform 0.15s}

.profile-shared-orb:hover{transform:scale(1.12)}

#profileModal .profile-actions{padding:12px 18px 16px}

.profile-orb{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Make the inner orb fill the wrapper so an avatar image touches the
 * outer ring of the modal orb. We also strip the orb-core border + the
 * inset highlight/shadow ::before overlay when an image avatar is in
 * place, so the user's photo reaches all the way to the edge with no
 * dark rim or warm halo cutting the picture into a smaller circle. */
#profileModal .profile-orb-core{width:88px;height:88px;border:none}
/* JS sets backgroundImage on the orb-core when there's an avatar
 * upload. Hide the depth-pseudo so the image sits flush against the
 * outer wrapper. The ::before is purely cosmetic; without an image we
 * still want the sphere shading. */
#profileModal .profile-orb-core[style*="background-image"]::before{display:none}

.profile-orb-core{width:78px;height:78px;border-radius:50%;background:var(--profile-orb-grad,linear-gradient(135deg,#3a3a45,#1a1a22));box-shadow:0 4px 16px rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;border:1px solid var(--tint-3);background-size:cover;background-position:center;overflow:hidden}

/* Status dot was a green pip clipped onto the profile orb. The product
 * decision is to drop it entirely — presence is shown elsewhere in the
 * modal. Hide via display:none rather than removing the element so any
 * code that toggles its class doesn't blow up. */
.profile-orb-status{display:none}

.profile-orb-status.offline{background:var(--t3);box-shadow:none}

.profile-name{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:1.2rem;font-weight:600;color:var(--t1);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.profile-handle{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.65rem;color:var(--t3);letter-spacing:1.5px;margin-bottom:10px}

.profile-bio{font-size:0.78rem;color:var(--t2);line-height:1.55;padding:10px 12px;background:var(--tint-1);border:1px solid var(--gb);border-radius:10px;margin:8px 18px 4px;text-align:left}

.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}

.profile-actions .sm-btn{justify-content:center;min-width:0}

/* View vs Edit mode toggle */

#profileModal .profile-edit,#profileModal .profile-edit-foot{display:none}

#profileModal.is-editing .profile-view{display:none}

#profileModal.is-editing .profile-edit{display:flex;flex-direction:row;gap:0;overflow:hidden;min-height:0}

#profileModal.is-editing .profile-edit-foot{display:flex}

/* Self vs Other action visibility */

#profileModal .profile-actions-self{display:none}

#profileModal.is-self .profile-actions-other{display:none}

#profileModal.is-self .profile-actions-self{display:flex}

/* Saved Messages: only the MESSAGE action is meaningful — hide call/friend/share/block. */

#profileModal.is-saved .profile-actions-other > *:not(#modalMessage){display:none}

#profileModal.is-saved #modalMessage{grid-column:span 2}

#profileModal.is-saved .profile-handle-copy,

#profileModal.is-saved #modalSharedRow{display:none}

/* Edit-form bits */

.profile-edit-avatar-row{display:flex;align-items:center;gap:12px;justify-content:center}

.profile-edit-cover-row{display:flex;align-items:center;gap:12px}

.profile-edit-cover-preview{width:120px;height:64px;border-radius:10px;background:radial-gradient(ellipse at 50% 0%,rgba(185,28,74,0.32),transparent 70%),linear-gradient(180deg,var(--tint-3),transparent);background-size:cover;background-position:center;border:1px solid var(--gb);flex-shrink:0}

.profile-edit-avatar-preview{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:1.4rem;font-weight:700;color:#fff;box-shadow:0 0 14px rgba(185,28,74,0.3),inset 0 0 10px var(--tint-6);flex-shrink:0}

.profile-handle-input{display:flex;align-items:center;background:var(--tint-2);border:1px solid var(--gb);border-radius:10px;overflow:hidden;transition:all 0.2s}

.profile-handle-input:focus-within{border-color:rgba(185,28,74,0.45);background:var(--tint-3)}

.profile-handle-prefix{padding:0 6px 0 12px;color:var(--t3);font-size:0.85rem}

.profile-handle-input .sm-input{border:none;background:transparent;border-radius:0;padding-left:0;flex:1}

.profile-handle-input .sm-input:focus{box-shadow:none}

/* SIMPLE MODAL (Add Friend, Create Server, Create Channel, Pin Add) */

.smodal{background:radial-gradient(ellipse at 50% 0%,var(--brand-glow-soft),transparent 65%),var(--panel);border:1px solid var(--tint-3);border-radius:14px;width:100%;max-width:420px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 100px rgba(0,0,0,0.7),inset 0 1px 0 var(--tint-3);transform:translateY(20px) scale(0.96);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative}



.modal-backdrop.show .smodal{transform:translateY(0) scale(1)}

/* cover preview inside modal */

.cv-prev-banner{position:relative;border-radius:11px;overflow:hidden;padding:14px;display:flex;align-items:center;gap:12px;background:radial-gradient(ellipse at 80% 0%,var(--srv-banner-c1,var(--brand-glow-soft)),transparent 55%),radial-gradient(ellipse at 10% 100%,var(--srv-banner-c2,rgba(190,18,60,0.12)),transparent 55%);border:1px solid var(--gb)}

.cv-prev-cover{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.18;mix-blend-mode:luminosity}

.cv-prev-emblem{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-family:'Space Mono','Vazirmatn',monospace;font-weight:700;font-size:1.3rem;flex-shrink:0;position:relative;z-index:1}

.cv-prev-info{position:relative;z-index:1}

.cv-prev-eyebrow{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t3)}

.cv-prev-title{font-family:'Space Grotesk','Vazirmatn','Space Mono','Vazirmatn',monospace;font-size:1rem;font-weight:700;letter-spacing:1px;color:var(--t1);margin-top:3px}

.smodal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--tint-3)}

.smodal-title{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.78rem;letter-spacing:2px;color:var(--t1)}

.smodal-close{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t3)}

.smodal-close:hover{background:var(--tint-3);color:var(--t1)}

.smodal-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}

.sm-field{display:flex;flex-direction:column;gap:6px}

.sm-label{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1.5px}

.sm-input{background:var(--tint-2);border:1px solid var(--gb);border-radius:10px;padding:10px 12px;color:var(--t1);font-size:0.85rem;font-family:inherit;outline:none;transition:all 0.2s}

select.sm-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgb(220,215,235)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:14px;padding-right:34px;color:#f4eef2;cursor:pointer}

select.sm-input option{background:var(--panel);color:var(--t1);padding:6px 10px}

.sm-input:focus{border-color:var(--brand-glow);background:var(--tint-3)}

.sm-input::placeholder{color:var(--t3)}

.sm-textarea{min-height:70px;resize:vertical;font-family:inherit}

.sm-tabs{display:flex;gap:4px;background:var(--tint-2);padding:3px;border-radius:9px;border:1px solid var(--gb)}

.sm-tab{flex:1;padding:7px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;color:var(--t3);border-radius:6px;text-align:center;transition:all 0.15s;cursor:pointer}

.sm-tab.active{color:var(--t1);background:linear-gradient(135deg,rgba(185,28,74,0.25),rgba(190,18,60,0.18))}

.sm-style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px}

/* ===== CUSTOMIZE MODAL ===== */
.cz-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--tint-3)}
.cz-section:first-child{border-top:none;padding-top:0;margin-top:0}
.cz-section-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.6px;color:var(--t3);margin-bottom:8px}
.cz-pack-row{display:flex;flex-wrap:wrap;gap:8px}
.cz-pack-chip{padding:6px 12px;border-radius:20px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.4px;font-weight:700;color:var(--t1);background:var(--tint-2);border:1px solid var(--tint-3);cursor:pointer;transition:background 0.15s}
.cz-pack-chip:hover{background:var(--tint-4)}
.cz-pack-chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.cz-pack-chip.locked{opacity:0.5;cursor:not-allowed}
.cz-hint{margin-top:14px;font-size:0.7rem;color:var(--t2);line-height:1.55}
.cz-shop-list{display:flex;flex-direction:column;gap:10px}
.cz-shop-item{padding:14px;border:1px solid var(--tint-3);border-radius:12px;background:var(--tint-1);display:flex;align-items:center;gap:14px}
.cz-shop-info{flex:1;min-width:0}
.cz-shop-name{font-size:0.95rem;font-weight:600;color:var(--t1);margin-bottom:4px}
.cz-shop-desc{font-size:0.75rem;color:var(--t2);line-height:1.5}
.cz-shop-price{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;color:var(--accent);margin-top:4px}

/* Pack preview modal. Magazine-feel layout: a header card with the
 * pack name + meta pills, then three numbered "frames" — one per
 * surface group — each demonstrating the pack on the same DOM the
 * world view uses, so the pack CSS just works. */
.pp-head{
  background:linear-gradient(135deg,var(--tint-2),var(--tint-1));
  border:1px solid var(--tint-3);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
}
.pp-head-name{
  font-size:1.05rem;font-weight:600;color:var(--t1);
  letter-spacing:0.5px;line-height:1.2;
}
.pp-head-desc{
  font-size:0.78rem;color:var(--t2);line-height:1.5;
  margin-top:4px;
}
.pp-head-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.pp-pill{
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.55rem;letter-spacing:1.4px;font-weight:700;
  padding:3px 8px;border-radius:6px;
  background:var(--tint-3);color:var(--t2);
  border:1px solid var(--tint-4);
}
.pp-pill-owned{
  background:var(--brand-glow-soft);color:var(--accent);
  border-color:var(--ag);
}

.pp-stack{display:flex;flex-direction:column;gap:12px}
.pp-frame{
  border:1px solid var(--tint-3);
  border-radius:12px;
  padding:14px;
  background:var(--tint-1);
}
.pp-frame-h{
  display:flex;align-items:baseline;gap:8px;
  font-family:'Space Mono','Vazirmatn',monospace;
  font-size:0.6rem;letter-spacing:1.6px;font-weight:700;
  color:var(--t1);
}
.pp-frame-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;
  background:var(--tint-3);color:var(--t2);
  font-size:0.55rem;font-weight:700;
}
.pp-frame-sub{
  font-size:0.68rem;color:var(--t3);margin:4px 0 12px;
  font-style:italic;
}

/* 01 — banner block */
.pp-banner{
  position:relative;height:96px;border-radius:10px;overflow:hidden;
  background:var(--tint-3);
}
.pp-banner .ws-banner-cover{position:absolute;inset:0;background-size:cover;background-position:center}
.pp-banner-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;position:relative;z-index:2;height:100%;
}
.pp-emblem{
  width:54px;height:54px;border-radius:50%;
  background:var(--srv-grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:1.2rem;flex-shrink:0;
  position:relative;
}
.pp-banner-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pp-banner-name{font-size:1.05rem;font-weight:600;line-height:1.2;color:var(--t1)}
.pp-banner-sub{font-size:0.7rem;color:var(--t3)}

/* 02 — pin */
.pp-pin{margin:0;padding:10px 12px}

/* 03 — channel rows */
.pp-rows{display:flex;flex-direction:column;gap:6px}
.pp-cat-h{margin-bottom:4px}
.pp-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:8px;
  background:var(--tint-2);
}
.pp-row-tc .ws-cat-tc-n{font-size:0.78rem}
.pp-row-vc .ws-cat-vc-orb,
.pp-row-vc .pp-vc-orb{width:36px;height:36px;flex-shrink:0}
.pp-row-vc .ws-cat-vc-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pp-row-vc .ws-cat-vc-n{font-size:0.75rem;font-weight:600}
.pp-row-vc .ws-cat-vc-c{font-size:0.55rem;letter-spacing:1.2px;color:var(--t3)}
.cz-uploader-row{display:flex;align-items:center;gap:14px}
.cz-uploader-preview{width:64px;height:64px;border-radius:50%;background:var(--tint-3);border:1px solid var(--tint-4);background-size:cover;background-position:center;flex-shrink:0;position:relative;overflow:hidden}
.cz-cover-preview{width:140px;height:64px;border-radius:10px;background:var(--tint-3);border:1px solid var(--tint-4);background-size:cover;background-position:center;flex-shrink:0;position:relative;overflow:hidden}
.cz-uploader-actions{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.cz-uploader-actions .sm-btn{width:fit-content;padding:6px 12px;font-size:0.6rem}
/* Toggle inside Server Identity that lets the user switch the active
 * customization pack on/off for the field above without leaving the
 * modal. Used by COVER PACK + EMBLEM-HALO PACK. */
.cz-pack-toggle{align-items:flex-start;gap:8px;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--brand-glow-soft);border:1px solid var(--ag);color:var(--t1);font-size:0.7rem;line-height:1.45;cursor:pointer}
.cz-pack-toggle input{margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.cz-pack-toggle span{flex:1}

/* Radio toggle row used in modal forms (e.g. server visibility public/private). */
.sm-toggle-row{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.sm-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--tint-3);background:var(--tint-1);border-radius:10px;cursor:pointer;transition:background 0.15s,border-color 0.15s}
.sm-radio:hover{background:var(--tint-2);border-color:var(--tint-4)}
.sm-radio input{position:absolute;opacity:0;pointer-events:none}
.sm-radio-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--tint-5);flex-shrink:0;margin-top:2px;position:relative;transition:border-color 0.15s,background 0.15s}
.sm-radio input:checked + .sm-radio-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 8px var(--brand-glow)}
.sm-radio input:checked + .sm-radio-dot::after{content:"";position:absolute;inset:3px;background:var(--bg);border-radius:50%}
.sm-radio-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sm-radio-l b{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1.5px;color:var(--t1);font-weight:700}
.sm-radio-l i{font-style:normal;font-size:0.7rem;color:var(--t3);line-height:1.45}

#ccVoiceStyleGrid{display:flex;align-items:center;gap:8px;padding:8px 4px;margin-top:6px}

.cc-orb-arrow{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t2);background:var(--tint-2);border:1px solid var(--gb);transition:all 0.15s;flex-shrink:0;cursor:pointer}

.cc-orb-arrow:hover{background:var(--brand-glow-soft);color:var(--t1);border-color:rgba(185,28,74,0.3)}

.cc-orb-track{flex:1;display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:8px 4px}

.cc-orb-track::-webkit-scrollbar{display:none}

/* Each card has a fixed footprint and the "selected" cue is purely
 * visual (border + background) — no transform:scale, which used to
 * jitter the carousel when a legendary card with a hue-rotate
 * animation became the selected one (the snap target moved every
 * tick, fighting the smooth scroll).
 *
 * `flex: 0 0 ...` width keeps three cards visible regardless of state
 * and `contain: layout paint` isolates the legendary glow so its
 * filter changes don't trigger a reflow on the parent track. */
.cc-orb-card{flex:0 0 calc((100% - 20px)/3);min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background 0.18s,border-color 0.18s,box-shadow 0.18s;position:relative;contain:layout paint}

.cc-orb-card:hover{background:var(--tint-2)}

.cc-orb-card.selected{border-color:var(--tint-6);background:var(--tint-2);box-shadow:0 0 0 1px var(--tint-7)}

.cc-orb-glow{position:absolute;width:78px;height:78px;border-radius:50%;top:6px;opacity:0.7;pointer-events:none;filter:blur(2px)}

.cc-orb-bead{width:46px;height:46px;border-radius:50%;position:relative;z-index:1}

.cc-orb-bead::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed var(--tint-6)}

.cc-orb-card.skin-fire .cc-orb-bead,.cc-orb-card.skin-flame .cc-orb-bead{animation:legPulse 4s ease-in-out infinite}

.cc-orb-card.skin-ice .cc-orb-bead,.cc-orb-card.skin-tree .cc-orb-bead{animation:legPulse 5s ease-in-out infinite}

.cc-orb-label{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t2);font-weight:700}

.cc-orb-card.selected .cc-orb-label{color:var(--t1)}

.cc-orb-tier{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.2px;color:var(--legendary);background:linear-gradient(90deg,rgba(245,158,11,0.18),rgba(236,72,153,0.18));padding:1px 6px;border-radius:4px;border:1px solid rgba(245,158,11,0.4);margin-top:3px}

.sm-style-btn{aspect-ratio:1;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;border:2px solid transparent;transition:all 0.18s;position:relative}

.sm-style-btn:hover{transform:scale(1.08)}

.sm-style-btn.selected{border-color:#fff;box-shadow:0 0 12px var(--tint-strong)}

.sm-style-tc{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:4px}

.smodal-foot{padding:12px 18px;border-top:1px solid var(--tint-3);display:flex;gap:8px;justify-content:flex-end}

.sm-btn{padding:9px 16px;border-radius:10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.62rem;letter-spacing:1.5px;font-weight:600;transition:all 0.18s;display:flex;align-items:center;gap:6px;cursor:pointer;border:1px solid transparent}

.sm-btn.cancel{background:var(--tint-2);color:var(--t2);border-color:var(--gb)}

.sm-btn.cancel:hover{background:var(--tint-4)}

.sm-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 4px 14px rgba(185,28,74,0.35)}

.sm-btn.primary.danger-btn{background:linear-gradient(135deg,#ef4444,#7f1d1d);box-shadow:0 4px 14px rgba(239,68,68,0.4)}

.sm-btn.primary:hover{box-shadow:0 6px 18px var(--brand-glow-strong)}

.sm-btn.primary.disabled{opacity:0.45;pointer-events:none;box-shadow:none}

/* ROLES MODAL */

.roles-modal{max-width:780px;width:96vw;max-height:88vh;height:88vh}

.roles-body{flex:1;flex-direction:row;gap:14px;padding:14px;display:flex;overflow:hidden;min-height:0}

.roles-col-list{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--gb);padding-right:12px;min-height:0}

.roles-col-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t3);padding:4px 6px}

.roles-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}

.role-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;transition:background 0.15s;border:1px solid transparent}

.role-item:hover{background:var(--tint-2)}

.role-item.active{background:rgba(185,28,74,0.16);border-color:rgba(185,28,74,0.3)}

.role-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--role-c,#a855f7);box-shadow:0 0 6px var(--role-c,#a855f7)}

.role-name{flex:1;font-size:0.74rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.role-count{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;color:var(--t3);letter-spacing:1px}

.roles-col-edit{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}

.roles-empty{padding:30px 14px;text-align:center;color:var(--t3);font-size:0.78rem;font-style:italic}

.role-edit-h{display:flex;align-items:center;gap:8px}

.role-edit-h .sm-input{flex:1}

.role-color-chip{position:relative;width:36px;height:36px;border-radius:10px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid var(--tint-5);box-shadow:inset 0 0 8px rgba(0,0,0,0.25);transition:transform 0.15s,box-shadow 0.15s}

.role-color-chip:hover{transform:scale(1.06);box-shadow:inset 0 0 8px rgba(0,0,0,0.25),0 0 10px var(--tint-4)}

.role-color-chip input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

.role-color-chip i{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));pointer-events:none}

.role-color-hex{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;letter-spacing:1px;color:var(--t2);flex-shrink:0;min-width:64px;text-align:right}

.role-perms{display:flex;flex-direction:column;gap:1px}

.role-perm-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.5px;color:var(--t3);padding:8px 4px 4px}

.role-perm-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background 0.15s}

.role-feature-row{display:flex;align-items:center;gap:10px;padding:9px 10px;margin:6px 0 4px;border-radius:9px;cursor:pointer;background:var(--tint-1);border:1px solid var(--gb)}

.role-feature-row:hover{background:var(--tint-2)}

.role-feature-row > i{color:var(--accent);flex-shrink:0}

.role-feature-info{flex:1;min-width:0}

.role-feature-toggle{flex-shrink:0;width:30px;height:18px;border-radius:10px;background:var(--tint-4);position:relative;transition:background 0.15s}

.role-feature-toggle::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left 0.18s}

.role-feature-toggle.on{background:var(--accent)}

.role-feature-toggle.on::after{left:14px}

.role-perm-row:hover{background:var(--tint-2)}

.role-perm-info{flex:1;min-width:0}

.role-perm-n{font-size:0.78rem;color:var(--t1);font-weight:500}

.role-perm-d{font-size:0.62rem;color:var(--t3);margin-top:1px;line-height:1.3}

.role-perm-toggle{width:34px;height:20px;border-radius:10px;background:var(--tint-4);position:relative;transition:background 0.18s;flex-shrink:0}

.role-perm-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#888;transition:all 0.18s}

.role-perm-row.on .role-perm-toggle{background:var(--brand-glow-strong)}

.role-perm-row.on .role-perm-toggle::after{left:16px;background:#fff}

.role-member-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:#fff;flex-shrink:0}

.role-assigned-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:160px;overflow-y:auto}

.role-assigned-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:var(--tint-1);border:1px solid var(--gb)}

.role-assigned-row:hover{background:var(--tint-2)}

.role-assigned-name{flex:1;font-size:0.78rem;color:var(--t1)}

.role-assigned-x{width:22px;height:22px;border-radius:6px;color:var(--t3);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s}

.role-assigned-x:hover{background:rgba(239,68,68,0.18);color:var(--danger)}

.role-assigned-empty{padding:10px 8px;font-size:0.72rem;color:var(--t3);font-style:italic;text-align:center}

.role-search-wrap{position:relative;margin-top:8px;display:flex;align-items:center;gap:8px;background:var(--tint-2);border:1px solid var(--gb);border-radius:9px;padding:7px 10px;transition:all 0.15s}

.role-search-wrap:focus-within{border-color:var(--brand-glow);background:var(--tint-3)}

.role-search-wrap > i{color:var(--t3);flex-shrink:0}

.role-search-input{flex:1;background:transparent;border:none;outline:none;color:var(--t1);font-size:0.78rem;font-family:inherit}

.role-search-input::placeholder{color:var(--t3)}

.role-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--tint-4);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,0.6);max-height:220px;overflow-y:auto;z-index:50;backdrop-filter:blur(20px)}

.role-search-result{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer;transition:background 0.15s}

.role-search-result:hover{background:rgba(185,28,74,0.15)}

.role-search-result-name{flex:1;font-size:0.78rem;color:var(--t1)}

.role-search-result-tag{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;padding:2px 6px;border-radius:4px;background:var(--tint-2);color:var(--t3)}

.role-search-empty{padding:12px;text-align:center;color:var(--t3);font-size:0.7rem;font-style:italic}

.role-delete{padding:7px 10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--danger);letter-spacing:1px;background:rgba(239,68,68,0.1);border:1px dashed rgba(239,68,68,0.3);border-radius:7px;align-self:flex-start;display:flex;align-items:center;gap:5px}

.role-delete:hover{background:rgba(239,68,68,0.2)}

/* IMAGE VIEWER */

.imgview{position:fixed;inset:0;background:rgba(0,0,0,0.94);z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity 0.2s}

.imgview.show{display:flex;opacity:1}

.imgview-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;cursor:zoom-in}

.imgview-stage.zoomed{cursor:zoom-out}

.imgview-img{max-width:90%;max-height:90%;object-fit:contain;transition:transform 0.3s;transform-origin:center;border-radius:6px;box-shadow:0 20px 80px rgba(0,0,0,0.6)}

.imgview-toolbar{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:5}

.imgview-info{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(0,0,0,0.55);backdrop-filter:blur(20px);border-radius:30px;border:1px solid var(--tint-4)}

.imgview-info-av{width:24px;height:24px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:600;color:white}

.imgview-info-text{font-size:0.72rem;color:var(--t1)}

.imgview-info-text small{display:block;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1px;margin-top:1px}

.imgview-actions{display:flex;gap:6px}

.imgview-btn{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.55);backdrop-filter:blur(20px);border:1px solid var(--tint-4);color:white;display:flex;align-items:center;justify-content:center;transition:background 0.2s}

.imgview-btn:hover{background:var(--tint-6)}

.imgview-btn.danger:hover{background:rgba(239,68,68,0.4)}

.imgview-zoom-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(0,0,0,0.55);backdrop-filter:blur(20px);border-radius:30px;border:1px solid var(--tint-4)}

.imgview-zoom-level{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;color:var(--t1);min-width:48px;text-align:center;letter-spacing:1px}

/* FORWARD MODAL — center */

.fwd-modal{background:radial-gradient(ellipse at 50% 0%,var(--brand-glow-soft),transparent 65%),var(--panel);border:1px solid var(--tint-3);border-radius:14px;width:100%;max-width:420px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 100px rgba(0,0,0,0.7),inset 0 1px 0 var(--tint-3);transform:translateY(20px) scale(0.96);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative}

.modal-backdrop.show .fwd-modal{transform:translateY(0) scale(1)}

.fwd-list{flex:1;min-height:0;overflow-y:auto;padding:6px;max-height:340px}

.fwd-section-h{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;color:var(--t3);letter-spacing:1.5px;padding:8px 10px 4px}

.fwd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:all 0.15s;position:relative}

.fwd-item:hover{background:var(--tint-2)}

.fwd-item.checked{background:rgba(185,28,74,0.12);border:1px solid rgba(185,28,74,0.25)}

.fwd-item-av{width:30px;height:30px;border-radius:50%;background:var(--av-color,var(--av-default-grad));display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;color:white;flex-shrink:0}

.fwd-item-srv{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;color:#fff;background-size:cover;background-position:center;flex-shrink:0;border:1px solid var(--tint-5)}

.fwd-item-name > div:first-child{font-size:0.85rem}

.fwd-item-sub{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.2px;color:var(--t3);margin-top:1px}

.fwd-item-av.channel{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:9px}

.fwd-item-name{flex:1;font-size:0.78rem;color:var(--t1)}

.fwd-item-check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--t3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s}

.fwd-item.checked .fwd-item-check{background:var(--accent);border-color:var(--accent)}

.fwd-item-check i{width:11px;height:11px;color:white;display:none}

.fwd-item.checked .fwd-item-check i{display:block}

/* Server invite panel inside the forward / share modal. Surfaces the
 * raw token so the user can copy it without picking a recipient. */
.fwd-invite-panel{padding:10px 14px;border-top:1px solid var(--tint-3);background:var(--tint-1);display:flex;flex-direction:column;gap:6px}
.fwd-invite-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1.6px;color:var(--t3)}
.fwd-invite-row{display:flex;align-items:center;gap:6px}
.fwd-invite-row input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--tint-3);background:var(--tint-2);color:var(--t1);border-radius:8px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.7rem;letter-spacing:1.2px;outline:none}
.fwd-invite-row input.is-disabled{color:var(--t3);font-style:italic;letter-spacing:0.5px}
.fwd-invite-copy{width:32px;height:32px;border-radius:8px;background:var(--tint-2);border:1px solid var(--tint-3);color:var(--t1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s,color 0.15s;flex-shrink:0}
.fwd-invite-copy:hover{background:var(--tint-4);color:var(--accent)}
.fwd-invite-hint{font-size:0.65rem;color:var(--t3);line-height:1.5}

.fwd-foot{padding:10px 14px;border-top:1px solid var(--tint-3);display:flex;align-items:center;justify-content:space-between;gap:10px}

.fwd-foot-info{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.6rem;color:var(--t2);letter-spacing:1px}

.fwd-send-btn{padding:8px 18px;border-radius:10px;font-size:0.75rem;font-weight:600;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;font-family:'Space Mono','Vazirmatn',monospace;letter-spacing:1px;display:flex;align-items:center;gap:6px;transition:all 0.2s;box-shadow:0 4px 12px rgba(185,28,74,0.3)}

.fwd-send-btn:hover{box-shadow:0 6px 16px rgba(185,28,74,0.5)}

.fwd-send-btn.disabled{opacity:0.4;pointer-events:none}

/* Toast */

.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);backdrop-filter:blur(40px);border:1px solid var(--tint-5);padding:10px 16px;border-radius:14px;display:flex;align-items:center;gap:10px;z-index:600;opacity:0;pointer-events:none;transition:all 0.3s;box-shadow:0 12px 40px rgba(0,0,0,0.6);max-width:90vw}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.toast-icon{width:24px;height:24px;border-radius:50%;background:rgba(185,28,74,0.15);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}

.toast.success .toast-icon{background:rgba(34,197,94,0.15);color:var(--success)}

.toast.warn .toast-icon{background:rgba(245,158,11,0.15);color:var(--warn)}

.toast.danger .toast-icon{background:rgba(239,68,68,0.15);color:var(--danger)}

.toast-text{font-size:0.78rem;color:var(--t1)}

/* ============== SHARED nx-box (rectangular voice-channel style, NO hover glow) ============== */

.nx-box{background:radial-gradient(ellipse at 50% 0%,var(--nx-glow,var(--brand-glow-soft)),transparent 65%),var(--tint-1);border:1px solid var(--tint-3);border-radius:14px;position:relative;overflow:hidden}

.nx-box.warm{--nx-glow:rgba(245,158,11,0.18)}

.nx-box.pink{--nx-glow:rgba(190,18,60,0.18)}

.nx-box.green{--nx-glow:rgba(34,197,94,0.18)}

.nx-box.purple{--nx-glow:rgba(190,18,60,0.18)}

/* Border-only neon (replaces the cover-wide neon for server banner) */

.neon-border{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid var(--brand-glow-strong);box-shadow:inset 0 0 0 0 rgba(185,28,74,0),0 0 14px rgba(185,28,74,0.35);animation:neonBorderBreathe 3.6s ease-in-out infinite}

.neon-border.warm{border-color:rgba(245,158,11,0.55);box-shadow:0 0 14px rgba(245,158,11,0.35);animation:neonBorderBreatheWarm 3.6s ease-in-out infinite}

@keyframes neonBorderBreathe{0%,100%{box-shadow:0 0 10px rgba(185,28,74,0.25),inset 0 0 0 0 rgba(185,28,74,0);border-color:var(--brand-glow)}50%{box-shadow:0 0 22px rgba(190,18,60,0.5),inset 0 0 6px var(--brand-glow-soft);border-color:rgba(190,18,60,0.75)}}

@keyframes neonBorderBreatheWarm{0%,100%{box-shadow:0 0 10px rgba(245,158,11,0.25);border-color:rgba(245,158,11,0.4)}50%{box-shadow:0 0 22px rgba(190,18,60,0.5),inset 0 0 6px rgba(245,158,11,0.18);border-color:rgba(190,18,60,0.7)}}

/* ============== HOME MARKED LIST PANEL ============== */

.marked-panel{padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-height:80px;max-height:260px}

.marked-panel-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 4px}

.marked-panel-head-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1.5px;color:var(--t2);display:flex;align-items:center;gap:6px}

.marked-panel-head-l i{color:var(--warn);width:11px;height:11px}

.marked-panel-tabs{display:flex;gap:3px}

.mp-tab{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;color:var(--t3);padding:3px 7px;border-radius:5px;background:var(--tint-2);border:1px solid var(--gb);cursor:pointer;transition:all 0.15s}

.mp-tab:hover{color:var(--t2)}

.mp-tab.active{color:var(--t1);background:rgba(245,158,11,0.14);border-color:rgba(245,158,11,0.3)}

.mp-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:2px;scrollbar-width:thin}

.mp-list::-webkit-scrollbar{width:4px}

.mp-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer;transition:background 0.15s}

.mp-row:hover{background:var(--tint-2)}

.mp-row:hover{background:var(--tint-2);border-color:var(--gb)}

.mp-row.unread{position:relative}

.mp-row.unread::before{content:'';position:absolute;left:-2px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 0 6px var(--brand-glow-strong)}

.mp-row .mp-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:600;color:white;flex-shrink:0;border:1.5px solid var(--tint-4)}

.mp-row .mp-av.tc{border-radius:8px;background:var(--tint-2);border:1px solid var(--gb);color:var(--t2);font-family:'Space Mono','Vazirmatn',monospace}

.mp-row .mp-info{flex:1;min-width:0}

.mp-row .mp-n{font-size:0.78rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;display:flex;align-items:center;gap:5px}

.mp-row .mp-n .mp-tag{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;letter-spacing:1px;color:var(--t3);padding:1px 4px;border-radius:3px;background:var(--tint-2);border:1px solid var(--gb)}

.mp-row .mp-meta{font-size:0.7rem;color:var(--t2);letter-spacing:0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}

.mp-row.unread .mp-meta{color:#fff}

.mp-row.unread .mp-n{color:#fff}

.mp-row .mp-pill{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:2px 6px;border-radius:7px;font-weight:700;flex-shrink:0;box-shadow:0 0 6px var(--brand-glow)}

.mp-row .mp-unstar{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--warn);background:transparent;flex-shrink:0;opacity:0;transition:opacity 0.15s}

.mp-row:hover .mp-unstar{opacity:0.8}

.mp-row .mp-unstar:hover{opacity:1;background:rgba(245,158,11,0.16)}

.mp-empty{padding:16px 12px;text-align:center;font-size:0.7rem;color:var(--t3);font-style:italic;line-height:1.5}

/* DM list star button */

.dm-item .dm-star{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3);background:transparent;opacity:0;transition:opacity 0.15s}

.dm-item:hover .dm-star{opacity:0.8}

.dm-item .dm-star:hover{opacity:1;background:rgba(245,158,11,0.18);color:var(--warn)}

.dm-item .dm-star.marked{color:var(--warn);opacity:1}

/* Marked panel scrollers */

.marked-orb-scroller,.my-servers-row{scroll-behavior:smooth}

/* World category column-span chooser (admin) */

/* category column-span control removed */

/* World categories grid */

.ws-cats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 22px;margin-top:24px}

.ws-cats-grid .ws-cat{margin:0}

.ws-cats-grid .ws-cat.span-2{grid-column:span 2}

.ws-cats-grid .ws-cat.span-3{grid-column:span 3}

@media (max-width:920px){.ws-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ws-cats-grid .ws-cat.span-3{grid-column:span 2}}

@media (max-width:620px){.ws-cats-grid{grid-template-columns:1fr}.ws-cats-grid .ws-cat.span-2,.ws-cats-grid .ws-cat.span-3{grid-column:span 1}}

.ws-cat-del{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3);background:transparent;opacity:0;transition:all 0.15s}

.ws-cat:hover .ws-cat-del{opacity:0.85}

.ws-cat-del:hover{opacity:1;background:rgba(239,68,68,0.18);color:var(--danger)}

.ws-cat-tc-del{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--t3);opacity:0;transition:all 0.15s}

.ws-cat-tc:hover .ws-cat-tc-del{opacity:0.7}

.ws-cat-tc-del:hover{opacity:1;background:rgba(239,68,68,0.18);color:var(--danger)}

.ws-cat-vc-del{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3);background:transparent;opacity:0;transition:all 0.15s}

.ws-cat-vc:hover .ws-cat-vc-del{opacity:0.8}

.ws-cat-vc-del:hover{opacity:1;background:rgba(239,68,68,0.18);color:var(--danger)}

/* Category-level pin */

.ws-cat-pin{margin:0 0 10px;padding:9px 11px;background:linear-gradient(135deg,var(--tint-6),var(--brand-glow-soft));border:1px solid var(--tint-7);border-radius:10px;display:flex;gap:9px;align-items:center;position:relative;overflow:hidden;color:var(--t1)}

.ws-pin-x{width:22px;height:22px;border-radius:6px;color:#fff;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s}

.ws-pin-x:hover{background:rgba(239,68,68,0.25);color:#fff}

.ws-cat-pin .ws-cat-pin-i{width:24px;height:24px;border-radius:7px;background:var(--tint-3);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--tint-4)}

.ws-cat-pin .ws-cat-pin-info{flex:1;min-width:0}

.ws-cat-pin .ws-cat-pin-l{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;color:var(--t2);letter-spacing:1.5px;margin-bottom:3px;font-weight:700}

.ws-cat-pin .ws-cat-pin-text{font-size:0.72rem;color:var(--t1);line-height:1.4}

.ws-cat-pin .ws-cat-pin-edit{padding:3px 7px;border-radius:5px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.45rem;letter-spacing:1px;color:var(--t2);background:var(--tint-2);border:1px dashed var(--tint-5);align-self:center;flex-shrink:0;display:flex;align-items:center;gap:3px}

.ws-cat-pin .ws-cat-pin-edit:hover{background:var(--tint-4);color:var(--t1)}

.ws-cat-add-pin{width:100%;padding:6px 10px;font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:1px;color:#f0f4ff;background:rgba(240,244,255,0.04);border:1px dashed rgba(240,244,255,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:8px;transition:all 0.15s}

.ws-cat-add-pin:hover{background:rgba(240,244,255,0.1);color:#fff}

/* Voice card avatars overlay */

.ws-cat-vc-avs{display:flex;align-items:center;gap:-4px;flex-shrink:0;margin-right:4px}

.ws-cat-vc-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.55rem;font-weight:600;color:#fff;border:1.5px solid var(--bg);margin-left:-6px;background:var(--av-c,var(--av-default-grad));position:relative}

.ws-cat-vc-av:first-child{margin-left:0}

.ws-cat-vc-av.more{background:var(--tint-4);color:var(--t2);font-family:'Space Mono','Vazirmatn',monospace;font-size:0.5rem;letter-spacing:0.5px}

.ws-cat-vc-av.speaking{box-shadow:0 0 0 2px var(--success),0 0 8px rgba(34,197,94,0.6)}

/* DM bubble actions — show on hover (desktop) or when explicitly opened by

   tap (touch). Toggling visibility via opacity (not display:none) avoids the

   iOS race where the hover-out fires before the action click is dispatched. */

.dm-msg .dm-bubble-hover-actions{position:absolute;top:-30px;display:flex;opacity:0;pointer-events:none;background:var(--panel);border:1px solid var(--tint-5);border-radius:18px;padding:3px;gap:1px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:60;backdrop-filter:blur(20px);transition:opacity .12s ease}

.dm-msg.them .dm-bubble-hover-actions{left:46px}

.dm-msg.you .dm-bubble-hover-actions{right:46px}

.dm-msg:hover .dm-bubble-hover-actions,

.dm-msg.actions-open .dm-bubble-hover-actions{opacity:1;pointer-events:auto}

.dm-bubble-hover-actions .dm-bubble-action{width:26px;height:26px}

/* Animations */

@keyframes twinkle{0%,100%{opacity:0.3}50%{opacity:0.85}}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

@keyframes orbi{from{transform:rotate(0deg) translateX(80px) rotate(0deg)}to{transform:rotate(360deg) translateX(80px) rotate(-360deg)}}

@keyframes corbi{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

@keyframes apulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.1);opacity:0.9}}

@keyframes rex{0%{transform:scale(0.6);opacity:0.6}100%{transform:scale(1.6);opacity:0}}

@keyframes hospin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@keyframes spulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.1);opacity:0.95}}

@keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:768px){

  .orb-col{width:200px;min-width:200px}

  .voice-users-sidebar.open{width:62px}

  .vu-av{width:34px;height:34px}

  .orb-wrap{width:170px;height:170px}

  .planet{width:65px;height:65px}

  .atmo{width:100px;height:100px}

  .otrack{width:130px;height:130px}

  @keyframes orbi{from{transform:rotate(0deg) translateX(65px) rotate(0deg)}to{transform:rotate(360deg) translateX(65px) rotate(-360deg)}}

  .orbiter{width:34px;height:34px;margin:-17px 0 0 -17px}

  .orb-av{width:34px;height:34px;font-size:0.75rem}

  .dm-pane{grid-template-columns:240px 1fr}

}

/* Mobile-only orbits drawer.
 *
 * On desktop the orb-col is a fixed sidebar; the FAB and scrim are
 * hidden. Below 560px we promote orb-col to a slide-in drawer over the
 * main content so chat / world have the full width. The user opens it
 * via the FAB (bottom-left) and dismisses by tapping the scrim,
 * tapping the FAB again, or hitting Esc. The marked-channels list
 * stays inside the drawer (we no longer hide it on mobile). */
.orb-col-fab,
.orb-col-scrim{display:none}

@media (max-width:560px){

  .device-frame{width:100vw;height:100vh}

  .app{padding:0;gap:0;flex-direction:column}

  .voice-users-sidebar{display:none}

  .voice-users-sidebar.open{width:100%;height:auto;flex-direction:row}

  /* orb-col becomes a left-edge drawer that slides in from the side.

   * It overlays content rather than taking flex space. The scrim sits

   * behind it and dims the page. */

  .orb-col{position:fixed;left:0;top:0;bottom:0;width:280px;min-width:0;padding:14px 12px;background:var(--panel);border-right:1px solid var(--tint-3);z-index:120;transform:translateX(-100%);transition:transform 0.24s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 40px rgba(0,0,0,0.4);overflow-y:auto}

  .orb-col.open{transform:translateX(0)}

  .orb-col-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:115;opacity:0;pointer-events:none;transition:opacity 0.18s}

  .orb-col-scrim.show{opacity:1;pointer-events:auto}

  /* Floating action button to open the drawer. Fixed bottom-left,

   * above the taskbar's left edge. brand-glow circular button. */

  .orb-col-fab{display:flex;position:fixed;left:14px;bottom:74px;z-index:110;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;align-items:center;justify-content:center;box-shadow:0 6px 18px var(--brand-glow-strong);cursor:pointer;border:none;transition:transform 0.15s}

  .orb-col-fab:active{transform:scale(0.94)}

  .orb-col.open ~ .orb-col-fab,

  .orb-col-fab.is-hidden{opacity:0;pointer-events:none}

  /* Re-enable marked-channels in the drawer (we used to hide it). */

  .marked-channels{display:flex}

  .dm-pane{grid-template-columns:1fr}

  .dm-list{display:none}

  .ph-title{font-size:0.7rem}

  .members-sidebar.open{width:200px}

}


/* ---- async-button loading dots ----
   Any button that triggers a fetch / async action gets a 3-dot pulse appended
   while the request is in flight. Wired up in app.js (init bottom). */
button.is-loading{position:relative;pointer-events:none;opacity:0.85}
button.is-loading > *{visibility:hidden}
button.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;
  width:24px;height:6px;transform:translate(-50%,-50%);
  background-image:
    radial-gradient(circle,currentColor 45%,transparent 46%),
    radial-gradient(circle,currentColor 45%,transparent 46%),
    radial-gradient(circle,currentColor 45%,transparent 46%);
  background-size:6px 6px;background-repeat:no-repeat;
  background-position:0 50%, 9px 50%, 18px 50%;
  animation:btnDots 1s linear infinite;
}
@keyframes btnDots{
  0%  {opacity:.25}
  20% {background-position:0 50%, 9px 50%, 18px 50%;opacity:.5}
  40% {opacity:.85}
  60% {opacity:.5}
  100%{opacity:.25}
}
button.is-loading::before{
  content:'';position:absolute;left:50%;top:50%;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid currentColor;border-top-color:transparent;
  transform:translate(-50%,-50%);
  animation:btnSpin .7s linear infinite;
  opacity:.55;
}
@keyframes btnSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* When both ::before spinner and ::after dots are defined, the spinner wins.
   Drop the dots so we don't double-render. */
button.is-loading::after{display:none}

/* Theme picker (Settings → Appearance) */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--gb);background:var(--glass);cursor:pointer;transition:border-color 0.15s,background 0.15s;text-align:left}
.theme-card:hover{border-color:var(--accent)}
.theme-card.active{border-color:var(--accent);background:var(--ag);background-blend-mode:multiply}
.theme-card-swatch{display:inline-block;width:46px;height:46px;border-radius:10px;border:1px solid var(--gb);flex-shrink:0}
.theme-card-meta{display:flex;flex-direction:column;gap:3px}
.theme-card-name{font-family:'Inter','Vazirmatn',sans-serif;font-size:0.78rem;font-weight:500;color:var(--t1)}
.theme-card-sub{font-family:'Space Mono','Vazirmatn',monospace;font-size:0.55rem;letter-spacing:1px;color:var(--t2)}