/*
  Crakcode Modern Client UI Pack
  Discord-inspired, Crakcode-branded UI polish.
  CSS-only visual layer: does NOT replace voice, LiveKit, media, Firebase, or chat logic.
*/

:root {
  --cc-bg-0: #0b0d13;
  --cc-bg-1: #11131a;
  --cc-bg-2: #171a22;
  --cc-bg-3: #222632;
  --cc-panel: rgba(23, 26, 34, .88);
  --cc-panel-strong: rgba(30, 34, 45, .95);
  --cc-border: rgba(255,255,255,.075);
  --cc-text: #f5f7fb;
  --cc-muted: #9aa3b5;
  --cc-brand: #5865f2;
  --cc-brand-2: #7c3aed;
  --cc-green: #23a55a;
  --cc-red: #f23f42;
  --cc-yellow: #f0b232;
  --cc-radius: 18px;
  --cc-shadow: 0 20px 60px rgba(0,0,0,.34);
  --cc-ease: cubic-bezier(.2,.8,.2,1);
}

html, body {
  background:
    radial-gradient(circle at 18% 8%, rgba(88,101,242,.20), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(124,58,237,.16), transparent 30%),
    radial-gradient(circle at 52% 100%, rgba(35,165,90,.08), transparent 32%),
    var(--cc-bg-0) !important;
  color: var(--cc-text) !important;
  overflow: hidden !important;
  font-synthesis-weight: none;
}

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

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

button, a, input, textarea, select {
  transition: transform .18s var(--cc-ease), background .18s var(--cc-ease), border-color .18s var(--cc-ease), box-shadow .18s var(--cc-ease), opacity .18s var(--cc-ease) !important;
}

button:hover, a:hover { transform: translateY(-1px); }

input, textarea, select {
  background: rgba(255,255,255,.065) !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 16px !important;
  color: var(--cc-text) !important;
  outline: none !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(88,101,242,.65) !important;
  box-shadow: 0 0 0 4px rgba(88,101,242,.15) !important;
}

aside, nav, [class*="sidebar"], [class*="Side"], [class*="server"], [class*="Server"] {
  border-color: var(--cc-border) !important;
}

aside, [class*="sidebar"], [class*="panel"], [class*="Panel"] {
  background: linear-gradient(180deg, rgba(30,34,45,.92), rgba(17,19,26,.94)) !important;
  backdrop-filter: blur(16px);
}

[class*="rail"], [class*="guild"], [class*="server-list"], [class*="ServerList"] {
  background: rgba(10,12,18,.72) !important;
  border-right: 1px solid var(--cc-border) !important;
}

header, [class*="header"], [class*="Header"], [class*="topbar"], [class*="Topbar"] {
  background: rgba(25,28,37,.78) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  border-color: var(--cc-border) !important;
}

[class*="card"], [class*="Card"], [class*="modal"], [role="dialog"], [class*="popover"], [class*="Pop"] {
  background: rgba(28,31,41,.88) !important;
  border: 1px solid var(--cc-border) !important;
  box-shadow: var(--cc-shadow) !important;
  backdrop-filter: blur(16px);
}

[class*="channel"], [class*="Channel"], [class*="member"], [class*="Member"], [class*="friend"], [class*="Friend"], [class*="dm"], [class*="DM"] {
  border-radius: 16px !important;
}

[class*="channel"]:hover, [class*="Channel"]:hover,
[class*="member"]:hover, [class*="Member"]:hover,
[class*="friend"]:hover, [class*="Friend"]:hover,
[class*="dm"]:hover, [class*="DM"]:hover {
  background: rgba(255,255,255,.075) !important;
}

button, .btn, [class*="btn"], [class*="Button"] { border-radius: 16px !important; }

button[class*="primary"], .btn-primary, [class*="send"], [class*="Send"] {
  background: linear-gradient(135deg, var(--cc-brand), var(--cc-brand-2)) !important;
  box-shadow: 0 14px 34px rgba(88,101,242,.24) !important;
}

button:active, .btn:active, [class*="Button"]:active { transform: scale(.98) !important; }

[class*="message"], [class*="Message"] { animation: ccMsgIn .22s var(--cc-ease) both; }
@keyframes ccMsgIn {
  from { opacity: 0; transform: translateY(5px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

[class*="bubble"], [class*="Bubble"] {
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
}

[class*="avatar"], img[alt*="avatar"], img[class*="Avatar"] { box-shadow: 0 8px 26px rgba(0,0,0,.25); }

textarea, input[placeholder*="Message"], [class*="messageInput"], [class*="composer"], [class*="Composer"] {
  background: rgba(35,39,51,.86) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  backdrop-filter: blur(12px);
}

[class*="nitro"], [class*="Nitro"], [class*="badge"], [class*="Badge"] {
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(168,85,247,.18);
}

[id*="voice"], [class*="voice"], [class*="Voice"], [id*="media"], [class*="media"], [class*="Media"] { border-radius: 18px !important; }

#cc-media-open, #cc-media-watch { animation: ccFloatIn .38s var(--cc-ease) both; }
@keyframes ccFloatIn {
  from { opacity: 0; transform: translateY(16px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#standalone-admin-btn, #cc-admin-btn, #ceo-floating-admin-btn,
#cc-admin-modal, #standalone-admin-modal, #admin-panel-modal { display: none !important; }

@media (max-width: 900px) {
  body { overflow: auto !important; }
  [class*="right"], [class*="Right"], [class*="activity"], [class*="Activity"] { max-width: 100vw !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}