:root {
  --void:        #000000;
  --bg:          #030006;
  --surface:     rgba(10, 10, 15, 0.9);
  --elevated:    rgba(15, 15, 25, 0.8);
  --overlay:     rgba(0,0,0,0.85);

  --neon:        #7928CA;
  --neon-bright: #FF0080;
  --neon2:       #0070F3;
  --neon-mid:    rgba(183, 33, 255, 0.40);
  --neon-low:    rgba(183, 33, 255, 0.15);
  --neon-glow:   0 0 50px rgba(183, 33, 255, 0.6), 0 0 100px rgba(183, 33, 255, 0.3);

  --glass-border: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);

  --t1:  #ffffff;
  --t2:  #f0eaff;
  --t3:  #b5a5c5;
  --t4:  #786b8a;
  --sub: #5c4f70;

  --border:   rgba(183, 33, 255, 0.20);
  --border2:  rgba(183, 33, 255, 0.45);

  --bub-out: linear-gradient(135deg, #b721ff, #7400d3);
  --bub-in:  rgba(20, 10, 40, 0.8);

  --sidebar-w: 360px;

  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  32px;
  --r-xl:  48px;
  --r-pill:100px;

  --ez:  cubic-bezier(0.19,1,0.22,1);
  --ez2: cubic-bezier(0.4,0,0.2,1);
  --cinematic: cubic-bezier(0.8,0,0.2,1);

  --font-brand:  'Orbitron', monospace;
  --font-ui:     'Space Grotesk','Cairo',system-ui,sans-serif;
  --font-arabic: 'Cairo','Space Grotesk',system-ui,sans-serif;
}

body.light-mode {
  --void:        #ffffff;
  --bg:          #f0ebff;
  --surface:     rgba(255, 255, 255, 0.92);
  --elevated:    rgba(255, 255, 255, 0.98);
  --overlay:     rgba(255, 255, 255, 0.92);

  --t1:  #0a0a0a;
  --t2:  #1a1a1a;
  --t3:  #333333;
  --t4:  #555555;
  --sub: #2d2040;

  --border:   rgba(150, 50, 255, 0.18);
  --border2:  rgba(150, 50, 255, 0.35);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);

  --bub-out: linear-gradient(135deg, #b721ff, #9900ff);
  --bub-in:  #ffffff;
}

/* Light mode — force all text dark globally */
body.light-mode,
body.light-mode * {
  --text-override: #0a0a0a;
}
body.light-mode .sett-lbl,
body.light-mode .sett-val,
body.light-mode .sett-head,
body.light-mode .modal-card h2,
body.light-mode .vault-title,
body.light-mode .vault-subtitle,
body.light-mode .field-label,
body.light-mode label,
body.light-mode .empty-title,
body.light-mode .empty-sub,
body.light-mode .sidebar-user-name,
body.light-mode .sidebar-user-tag,
body.light-mode .ci-name,
body.light-mode .ci-last,
body.light-mode .chat-peer-name,
body.light-mode .pin-text,
body.light-mode .reply-label,
body.light-mode .reply-name,
body.light-mode .reply-text,
body.light-mode .typing-text,
body.light-mode .vault-credit,
body.light-mode .modal-link,
body.light-mode .tab-btn,
body.light-mode .m-name,
body.light-mode .m-tag,
body.light-mode .lp-title,
body.light-mode .lp-url,
body.light-mode .ctx-item,
body.light-mode .brand-tagline {
  color: #111 !important;
}
body.light-mode .sett-head { color: var(--neon) !important; }
body.light-mode .tab-btn.active { color: var(--neon) !important; }
body.light-mode .sidebar-user-tag { color: var(--neon) !important; }
body.light-mode .vault-credit { color: #888 !important; }
body.light-mode .modal-link { color: #444 !important; }
body.light-mode .modal-link b { color: var(--neon) !important; }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;}
html{scroll-behavior:smooth;}
body{background:var(--void);color:var(--t1);font-family:var(--font-arabic);min-height:100dvh;width:100vw;overflow:hidden;-webkit-font-smoothing:antialiased;cursor:auto;user-select:none;}
body.custom-cursor-on{cursor:none;}
body.custom-cursor-on *{cursor:none!important;}
body.custom-cursor-on input,
body.custom-cursor-on textarea,
body.custom-cursor-on select{cursor:text!important;}
body.custom-cursor-on a,
body.custom-cursor-on button,
body.custom-cursor-on [role="button"],
body.custom-cursor-on .icon-btn,
body.custom-cursor-on .ci,
body.custom-cursor-on .tab-btn,
body.custom-cursor-on .ctx-item,
body.custom-cursor-on .mac,
body.custom-cursor-on .emj,
body.custom-cursor-on .react-chip,
body.custom-cursor-on .btn-primary,
body.custom-cursor-on .sett-btn,
body.custom-cursor-on .play-btn,
body.custom-cursor-on .search-result-item{
  cursor:none!important;
}
body.font-en { font-family: var(--font-ui); }
input,textarea,button{font-family:inherit;}
button{border:none;background:none;cursor:pointer;}
a{text-decoration:none;color:inherit;}
svg{fill:currentColor;display:block;}
img{max-width:100%;display:block;}
.hidden{display:none!important;}
/* Cursor elements use a separate visibility mechanism — see bottom of file */
#c-dot.hidden,#c-ring.hidden{display:block!important;opacity:0!important;pointer-events:none!important;}

.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); }
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

#c-dot{position:fixed;width:9px;height:9px;background:#fff;border-radius:50%;pointer-events:none;z-index:2147483647;transform:translate(-50%,-50%);transition:opacity .3s;will-change:left,top;}
#c-ring{position:fixed;width:38px;height:38px;border:1.5px solid rgba(183,33,255,.5);border-radius:50%;pointer-events:none;z-index:2147483647;transform:translate(-50%,-50%);transition:width .22s var(--ez),height .22s var(--ez),border-color .22s,opacity .3s;will-change:left,top;}
#c-ring.hover{width:54px;height:54px;border-color:var(--neon);box-shadow:0 0 16px var(--neon-mid);}
@media(hover:none),(max-width:640px){body{cursor:auto;}#c-dot,#c-ring{display:none!important;}}
@media (pointer: coarse) { #c-dot, #c-ring { display: none !important; } }

.page{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;}

#boot{position:fixed;inset:0;z-index:500000;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ez);}
#boot.exit{opacity:0;pointer-events:none;}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:22px;}
.boot-letters{display:flex;gap:6px;}
.bl{font-family:var(--font-brand);font-size:clamp(3.5rem,14vw,8rem);font-weight:900;letter-spacing:4px;color:#111;transition:color .35s var(--ez),text-shadow .35s var(--ez),transform .35s var(--ez),opacity .35s;}
.bl.si{font-style:italic;}
.bl.L0{color:#0a0a0a;text-shadow:none;transform:scale(.9);opacity:.3;}
.bl.L1{color:#2a0040;text-shadow:0 0 30px rgba(77,171,247,.3);opacity:.6;transform:scale(.95);}
.bl.L2{color:#339af0;text-shadow:0 0 50px rgba(77,171,247,.6);opacity:.8;transform:scale(.98);}
.bl.L3{color:var(--neon);text-shadow:0 0 40px var(--neon),0 0 80px var(--neon-mid),0 0 160px rgba(77,171,247,.15);transform:scale(1.04);opacity:1;}
.bl.L4{color:#fff;text-shadow:0 0 35px rgba(77,171,247,.6),0 0 70px rgba(77,171,247,.25);transform:scale(1);opacity:1;}
.boot-status{font-family:var(--font-ui);font-size:.7rem;letter-spacing:4px;color:transparent;text-transform:uppercase;transition:color .3s,opacity .3s;opacity:0;height:16px;}
.boot-status.on{color:var(--neon);opacity:1;}
.boot-lin{font-family:var(--font-ui);font-size:.65rem;letter-spacing:3px;color:transparent;transition:color .5s ease .2s,opacity .5s ease .2s;opacity:0;text-transform:uppercase;}
.boot-lin.on{color:var(--sub);opacity:1;}

#intro-screen{
  position:fixed;inset:0;
  z-index:900000;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  pointer-events:all;
  transition:opacity 0.8s var(--cinematic), visibility 0.8s;
  will-change:opacity;
}
#intro-screen.intro-exit{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#intro-glow-halo { display: none !important; }

#intro-scanline{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 4px,
    rgba(183, 33, 255, 0.03) 4px,
    rgba(183, 33, 255, 0.03) 5px
  );
  pointer-events:none;
  opacity:0.2;
  mix-blend-mode: overlay;
}

#intro-word{
  font-family:var(--font-brand);
  font-size:clamp(4rem, 15vw, 10rem);
  font-weight:900;
  letter-spacing:clamp(12px, 5vw, 30px);
  color:#fff;
  position:relative;
  z-index:2;
  opacity:0;
  user-select:none;
  will-change:opacity,text-shadow;
  /* animation overridden by upgrades.css introLamp */
}

/* @keyframes introFlicker — defined below in upgrade section */

#stars-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.8s ease;will-change:opacity;}
#stars-layer.on{opacity:1;}
/* Grid layer disabled — مزعج */
#grid-layer { display: none !important; }
.star{position:absolute;border-radius:50%;background:#fff;opacity:0;animation:starPulse var(--d,4s) var(--k,0s) ease-in-out infinite;will-change:opacity,transform;}
@keyframes starPulse{0%,100%{opacity:var(--a,.03);transform:scale(1);}50%{opacity:var(--b,.3);transform:scale(1.3);}}
@keyframes particleFloat{0%{transform:translateY(0) scale(1);opacity:0.6;}50%{transform:translateY(-25px) scale(1.1);opacity:1;}100%{transform:translateY(10px) scale(0.9);opacity:0.3;}}
.fog{position:fixed;pointer-events:none;z-index:2;border-radius:50%;opacity:0;transition:opacity 2s ease;will-change:transform,opacity;}
body.intro-done .fog { opacity: 0; transition: opacity 2.5s ease 1s; }
body.intro-done .fog.on { opacity: 1; }
.fog-a{width:700px;height:700px;background:radial-gradient(ellipse,rgba(183, 33, 255,.06) 0%,transparent 70%);top:-200px;left:-200px;animation:fogDrift 18s ease-in-out infinite alternate;}
.fog-b{width:600px;height:600px;background:radial-gradient(ellipse,rgba(100,0,255,.05) 0%,transparent 70%);bottom:-150px;right:-150px;animation:fogDrift 22s ease-in-out infinite alternate-reverse;}
.fog.on{opacity:1;}
@keyframes fogDrift{from{transform:translate(0,0) scale(1);}to{transform:translate(40px,30px) scale(1.08);}}
#l-beam{display:none !important;}
#l-line{display:none !important;}

#pg-land{
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;  
  background:var(--void);
  overflow-y:auto;
  padding-top:max(15vh, 100px); 
  padding-bottom:50px;
  padding-left:16px;
  padding-right:16px;
  gap:0;
}
.cosmic-glow{position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(162,0,255,.18) 0%,transparent 65%);z-index:1;pointer-events:none;opacity:0;transition:opacity 5s ease;}
body.risen .cosmic-glow{opacity:1;}

.brand-container{
  position:relative;
  top:auto; left:auto;
  transform:none;
  z-index:50;
  text-align:center;
  width:100%;
  max-width:760px;
  margin-bottom:52px;
  opacity:0;
  transform:translateY(-24px);
  transition:opacity 0.9s ease 0.6s, transform 0.9s var(--ez) 0.6s;
}
body.risen .brand-container{
  opacity:1;
  transform:translateY(0);
}
.brand-frame-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:15px 45px;}
.dynamic-frame{position:absolute;inset:0;border:1.5px solid var(--neon);border-radius:28px;opacity:0;transform:scale(1.18);box-shadow:0 0 30px var(--neon-mid),inset 0 0 20px var(--neon-low);transition:opacity 1s var(--ez) 1s,transform 1s var(--ez) 1s;pointer-events:none;}
body.risen .dynamic-frame{opacity:.75;transform:scale(1);}
#brand-word{font-family:var(--font-brand);font-size:clamp(3.5rem, 12vw, 8rem);font-weight:900;letter-spacing:clamp(10px, 4vw, 24px);color:#fff;position:relative;z-index:5;direction:ltr;text-align:center;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;will-change:color,text-shadow,transform;}
#brand-word.on{opacity:1;animation:ignitionSequence 6s ease-in-out forwards, bulb-glow 5s ease-in-out infinite 6s;}
@keyframes ignitionSequence {
  0% { opacity: 0; transform: scale(0.9); filter: brightness(0); color:var(--void); }
  30% { opacity: 1; color: var(--t1); filter: brightness(1); }
  40%, 60%, 80% { color: var(--neon); text-shadow: 0 0 40px var(--neon), 0 0 80px var(--neon-mid); }
  50%, 70% { color: var(--t2); text-shadow: none; }
  100% { color: var(--t1); transform: scale(1); text-shadow: 0 0 35px var(--neon), 0 0 70px var(--neon-low); }
}
@keyframes bulb-glow{0%,100%{text-shadow:0 0 60px rgba(162,0,255,.8),0 0 120px rgba(162,0,255,.4),0 0 250px var(--neon);} 50%{text-shadow:0 0 30px rgba(162,0,255,.4),0 0 80px rgba(162,0,255,.2),0 0 150px var(--neon);}}
#brand-sub{font-family:var(--font-ui);font-size:clamp(.65rem,2vw,.85rem);font-weight:300;letter-spacing:5px;color:var(--t4);text-transform:uppercase;margin-top:18px;opacity:0;transition:opacity 1.5s ease;}
#brand-sub.on{opacity:1;}
#brand-lin{font-family:var(--font-ui);font-size:.7rem;letter-spacing:3px;color:var(--t4);margin-top:8px;opacity:0;text-transform:uppercase;transition:opacity 1.5s ease .3s;}
#brand-lin.on{opacity:1;}
#brand-lin strong{color:var(--neon);}

.brand-dev-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-top:22px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1.4s ease 1.1s, transform 1.4s var(--ez) 1.1s;
  font-family:var(--font-ui);
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:clamp(.6rem,1.5vw,.75rem);
  padding:8px 22px;
  border:1px solid rgba(183,33,255,0.25);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(183,33,255,0.06),rgba(255,200,80,0.05),rgba(183,33,255,0.06));
  backdrop-filter:blur(8px);
  box-shadow:0 0 20px rgba(183,33,255,0.08);
}
.brand-dev-badge.on{opacity:1;transform:translateY(0);animation:badgeGlow 4s ease-in-out infinite;}
@keyframes badgeGlow {
  0%,100% { box-shadow:0 0 20px rgba(183,33,255,0.08); border-color:rgba(183,33,255,0.25); }
  50% { box-shadow:0 0 35px rgba(183,33,255,0.2), 0 0 60px rgba(183,33,255,0.08); border-color:rgba(183,33,255,0.5); }
}
.dev-label{color:var(--t4);font-weight:400;}
.dev-separator{color:rgba(183,33,255,0.6);font-size:.8rem;}
.dev-name{
  background:linear-gradient(90deg, var(--neon-bright), #e8b030, #fff, #ffe680, #e8b030, var(--neon-bright));
  background-size:300% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
  letter-spacing:4px;
  animation:shimmerName 3s linear infinite;
  filter: drop-shadow(0 0 8px rgba(183,33,255,0.5)) drop-shadow(0 0 20px rgba(240,160,48,0.25));
}
@keyframes shimmerName{0%{background-position:300% center;}100%{background-position:-300% center;}}

.btn-login-fixed{
  position:fixed;
  top:28px;
  inset-inline-end:28px;
  padding:11px 28px;
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7);
  font-family:var(--font-ui);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:2px;
  border-radius:var(--r-pill);
  background:var(--elevated);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .35s, color .35s, box-shadow .35s, background .35s;
  z-index:60000;
  opacity:0;
  pointer-events:none;
  text-transform:uppercase;
}
body.risen .btn-login-fixed{opacity:1;pointer-events:auto;}
.btn-login-fixed:hover{
  border-color:rgba(170,90,255,0.6);
  color:var(--t1);
  background:var(--surface);
  box-shadow:0 0 24px rgba(150,60,255,0.3);
}

.btn-settings-fixed{
  position:absolute;top:32px;inset-inline-start:32px;z-index:150;
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);color:var(--t1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;transition:transform 0.4s var(--cinematic),background 0.3s;

}
.btn-settings-fixed:hover{transform:scale(1.15) rotate(90deg);background:var(--elevated);border-color:var(--neon);}

.ui-root{
  position:relative;
  top:auto; left:auto;
  transform:translateY(20px);
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 16px 20px;
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.8s ease 1.2s, transform 0.8s var(--ez) 1.2s;
}
body.risen .ui-root{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;width:min(92%,580px);margin-bottom:36px;}
.wide-element{grid-column:1 / -1;width:68%;justify-self:center;}
.social-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 22px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--t3);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.3px;
  transition:all .5s var(--cinematic);
  overflow:hidden;
  position:relative;

  will-change:transform,box-shadow;
  direction:ltr;
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 4px 15px rgba(0,0,0,0.5);
}
.social-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(183, 33, 255, 0.08) 50%, transparent 100%);
  opacity:0;transition:opacity .5s var(--cinematic);
}
.social-card:hover{
  border-color:var(--border2);
  background:rgba(183, 33, 255, 0.05);
  color:var(--t1);
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px var(--neon-mid), 0 0 30px var(--neon-low);
}
.social-card:hover::before{opacity:1;}
.social-icon{width:24px;height:24px;flex-shrink:0;fill:currentColor;transition:transform 0.5s var(--cinematic);}
.social-card:hover .social-icon{transform:scale(1.15);}

.social-card[data-platform="fb"]:hover{color:#1877f2;border-color:rgba(24,119,242,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(24,119,242,.4), 0 0 30px rgba(24,119,242,.2);}
.social-card[data-platform="ig"]:hover{color:#e1306c;border-color:rgba(225,48,108,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(225,48,108,.4), 0 0 30px rgba(225,48,108,.2);}
.social-card[data-platform="tt"]:hover{color:#ff0050;border-color:rgba(255,0,80,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,0,80,.4), 0 0 30px rgba(255,0,80,.2);}
.social-card[data-platform="tg"]:hover{color:#2aabee;border-color:rgba(42,171,238,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(42,171,238,.4), 0 0 30px rgba(42,171,238,.2);}
.social-card[data-platform="sc"]:hover{color:#fffc00;border-color:rgba(255,252,0,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,252,0,.4), 0 0 30px rgba(255,252,0,.2);}
.social-card[data-platform="yt"]:hover{color:#ff0000;border-color:rgba(255,0,0,.4);box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,0,0,.4), 0 0 30px rgba(255,0,0,.2);}

.btn-create-account{
  padding:18px 70px;
  background:rgba(183, 33, 255, 0.05);
  border:1px solid var(--neon);
  color:#fff;
  font-family:var(--font-arabic);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:1px;
  border-radius:var(--r-pill);
  transition:all .5s var(--cinematic);

  position:relative;
  overflow:hidden;
  width:min(68%, 360px);
  text-align:center;
  z-index:1;
  box-shadow: 0 0 20px var(--neon-low), inset 0 0 0 1px var(--glass-border);
  backdrop-filter: blur(8px);
}
.btn-create-account span,
.btn-create-account > *{
  position:relative;
  z-index:2;
}
.btn-create-account::before{
  content:'';position:absolute;inset:0;
  background:var(--bub-out);
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--cinematic);z-index:0;
}
.btn-create-account:hover{
  box-shadow: var(--neon-glow);
  transform:scale(1.05) translateY(-2px);
  border-color: var(--neon-bright);
}.btn-create-account:hover::before{transform:scaleX(1);}

.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.96);
  z-index:200000;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:20px;
  overflow-y:auto;

}
.modal-overlay.open{display:flex;animation:fadeOv .4s var(--ez2);}
@keyframes fadeOv{from{opacity:0;}to{opacity:1;}}
.hp-trap{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none;}
.glass-vault{
  width:100%;
  max-width:460px;
  background: var(--surface);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 52px 42px 44px;
  position: relative;
  box-shadow: 0 40px 120px rgba(0,0,0,0.8), inset 0 0 0 1px var(--glass-border), 0 0 100px var(--neon-low);
  animation: vaultIn 0.8s var(--cinematic) forwards;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: auto;
  perspective: 1000px;
}
.glass-vault--wide{max-width:540px;}
@keyframes vaultIn{from{opacity:0;transform:translateY(40px) scale(.92) rotateX(-5deg);}to{opacity:1;transform:translateY(0) scale(1) rotateX(0);}}
.btn-vault-close{position:absolute;top:24px;inset-inline-start:24px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:1.1rem;border-radius:50%;transition:all .3s var(--cinematic);background:rgba(255,255,255,0.02);}
.btn-vault-close:hover{color:#fff;background:var(--neon);transform:rotate(90deg) scale(1.1);box-shadow:0 0 20px var(--neon-mid);}
.vault-brand{text-align:center;font-family:var(--font-brand);font-size:1.6rem;font-weight:900;color:var(--neon);letter-spacing:6px;text-shadow:var(--neon-glow);margin-bottom:10px;}
.vault-title{text-align:center;font-size:1.8rem;font-weight:800;color:var(--t1);margin-bottom:32px;}
.vault-subtitle{text-align:center;color:var(--t3);font-size:.88rem;line-height:1.7;margin-bottom:28px;margin-top:-16px;}
.field-group{margin-bottom:22px;flex:1;}
.field-row{display:flex;gap:16px;}
.field-row .field-group{margin-bottom:22px;}
.field-label{display:block;font-size:.85rem;font-weight:700;color:var(--t3);margin-bottom:10px;letter-spacing:.5px;}
.field-input{width:100%;padding:16px 18px;background:var(--elevated);border:1px solid var(--border);color:var(--t1);border-radius:var(--r-md);font-size:.95rem;transition:all .4s var(--cinematic);-webkit-appearance:none;appearance:none;}
.field-input:focus{border-color:var(--neon);background:var(--surface);box-shadow:0 0 0 4px var(--neon-low), 0 0 20px var(--neon-low);transform:translateY(-1px);}
.field-input::placeholder{color:var(--t4);}
.field-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--elevated) inset;-webkit-text-fill-color:var(--t1);}
.input-row{position:relative;display:flex;align-items:center;}
.input-row .field-input{padding-inline-end:48px;}
.btn-submit{width:100%;padding:18px;background:var(--bub-out);border:none;color:#fff;font-family:var(--font-arabic);font-size:1.1rem;font-weight:800;border-radius:var(--r-md);margin-top:8px;position:relative;overflow:hidden;transition:all .4s var(--cinematic);display:flex;align-items:center;justify-content:center;letter-spacing:1px;}
.btn-submit:hover{transform:translateY(-3px);box-shadow:0 12px 30px var(--neon-low), 0 0 20px var(--neon-mid);}

.auth-divider{display:flex;align-items:center;text-align:center;margin:28px 0;color:var(--t4);font-size:0.85rem;}
.auth-divider::before, .auth-divider::after{content:'';flex:1;border-bottom:1px solid var(--border);opacity:0.6;}
.auth-divider span{padding:0 14px;text-transform:uppercase;letter-spacing:1px;font-size:0.75rem;}

.social-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.btn-google, .btn-phone{
  width:100%;padding:16px;background:var(--elevated);border:1px solid var(--border);
  color:var(--t1);font-family:var(--font-arabic);font-size:.95rem;font-weight:700;
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  gap:10px;transition:all .4s var(--cinematic);
}
.btn-google:hover, .btn-phone:hover{background:var(--surface);border-color:var(--neon);transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.1), 0 0 15px var(--neon-low);}
.btn-phone:hover{border-color:rgba(77,171,247,0.8); box-shadow:0 10px 25px rgba(0,0,0,0.1), 0 0 15px rgba(77,171,247,0.3);}
.google-icon{width:22px;height:22px;flex-shrink:0;}

.auth-error{background:rgba(255,60,60,0.1);border:1px solid rgba(255,60,60,0.3);color:#ff5a5a;padding:12px 16px;border-radius:var(--r-md);font-size:0.85rem;font-weight:600;text-align:center;margin-bottom:16px;animation:vaultIn 0.3s var(--ez);}
.btn-submit:active{transform:translateY(0);box-shadow:none;}
.btn-submit:disabled{opacity:.5;pointer-events:none;}
.modal-link{text-align:center;color:var(--t4);font-size:.9rem;margin-top:20px;cursor:pointer;transition:color .3s;font-weight:600;}
.modal-link:hover{color:var(--t2);}
.modal-link b{color:var(--neon-bright);transition:color .3s, text-shadow .3s;}
.modal-link:hover b{color:var(--neon);text-shadow:0 0 10px var(--neon-low);}
.vault-credit{text-align:center;color:var(--t4);font-size:.8rem;margin-top:28px;}
.vault-credit b{color:var(--neon);font-weight:800;letter-spacing:0.5px;}

.social-auth-row{display:flex;gap:14px;margin-bottom:20px;}
.btn-social{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--r-md);color:var(--t1);font-family:var(--font-arabic);font-size:.95rem;font-weight:700;transition:all .4s var(--cinematic);}
.btn-social:hover{background:var(--surface);transform:translateY(-3px);border-color:var(--neon);box-shadow:0 10px 25px rgba(0,0,0,0.1), 0 0 15px var(--neon-low);}
.btn-social svg{flex-shrink:0;width:22px;height:22px;}

#pg-app{z-index:300;background:var(--void);flex-direction:row;}
#pg-app.fade-in{animation:fadeIn .58s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

#sidebar{width:var(--sidebar-w);flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);border-inline-end:1px solid var(--border);height:100dvh;overflow:hidden;position:relative;z-index:10;transition:transform .4s var(--ez);}
.sidebar-header{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;}
.sidebar-profile{display:flex;align-items:center;gap:10px;min-width:0;flex:1;padding:4px 6px;border-radius:var(--r-md);transition:background .2s;}
.sidebar-profile:hover{background:var(--elevated);}
.sidebar-user-info{min-width:0;flex:1;}
.sidebar-user-name{font-size:.95rem;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-tag{font-size:.75rem;color:var(--neon-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-status{display:flex;align-items:center;gap:5px;font-size:.75rem;color:#4dff91;margin-top:2px;}
.status-dot{width:6px;height:6px;background:#4dff91;border-radius:50%;box-shadow:0 0 6px rgba(77,255,145,0.4);animation:pulse-status 2s infinite;}
@keyframes pulse-status{0%,100%{opacity:1;}50%{opacity:.45;}}
.sidebar-controls{display:flex;gap:4px;flex-shrink:0;}

.icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--t3);border-radius:9px;transition:background .22s,color .22s;flex-shrink:0;}
.icon-btn:hover{background:var(--elevated);color:var(--t1);}
.icon-btn--danger{color:#ff4d6a;}
.icon-btn--danger:hover{background:rgba(255,60,80,.15);color:#ff6b84;}
.input-icon-btn{font-size:1.1rem;width:34px;height:34px;color:var(--t3);border-radius:9px;transition:color .2s,background .2s;flex-shrink:0;}
.input-icon-btn:hover{color:var(--t2);background:rgba(255,255,255,.04);}
#rec-btn.recording{color:#ff4d6a;animation:recBlink 1s infinite;}
@keyframes recBlink{50%{opacity:.4;}}

.tab-bar{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.tab-btn{flex:1;padding:11px 0;font-size:.75rem;font-weight:600;color:var(--t4);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;direction:rtl;}
.tab-btn.active{color:var(--neon-bright);border-color:var(--neon);}
.tab-btn:hover{color:var(--t2);}

.sidebar-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sidebar-search-input{flex:1;background:none;border:none;color:var(--t1);font-size:.83rem;padding:6px 0;direction:rtl;}
.sidebar-search-input::placeholder{color:var(--t4);}

.chat-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0;}
.chat-list::-webkit-scrollbar{width:3px;}
.chat-list::-webkit-scrollbar-track{background:transparent;}
.chat-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;}

.ci{display:flex;align-items:center;gap:12px;padding:12px 16px;transition:background .15s;position:relative;border-bottom:1px solid rgba(255,255,255,.01);}
.ci:hover{background:var(--elevated);}
.ci.active{background:#2b5278;}
.ci-info{flex:1;min-width:0;}
.ci-name{font-size:.95rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;}
.ci-last{font-size:.85rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px;direction:rtl;}
.ci.active .ci-last{color:rgba(255,255,255,0.7);}
.ci-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.ci-time{font-size:.75rem;color:var(--t4);font-family:var(--font-ui);}
.ci.active .ci-time{color:#fff;}
.ci-badge{background:var(--neon-bright);color:#000;font-size:.75rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;}

.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0;font-family:var(--font-ui);text-transform:uppercase;overflow:hidden;background:linear-gradient(135deg,#1864ab,#339af0);font-size:.85rem;position:relative;}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.av--lg{width:42px;height:42px;font-size:.9rem;}
.av--md{width:38px;height:38px;font-size:.82rem;}
.av::after{content:'';position:absolute;bottom:1px;inset-inline-end:1px;width:9px;height:9px;background:#555;border:1.5px solid #070710;border-radius:50%;transition:background 0.3s;}
.av.online::after{background:#4dff91;}

.search-result-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;transition:background .18s;}
.search-result-item:hover{background:var(--elevated);}

.empty-brand{font-family:var(--font-brand);font-size:2.8rem;font-weight:900;color:var(--t4);letter-spacing:10px;margin-bottom:8px;}
.empty-title{font-size:1.25rem;font-weight:700;color:var(--t3);}
.empty-sub{font-size:.85rem;color:var(--t4);max-width:270px;line-height:1.75;}
.empty-badge{margin-top:16px;padding:8px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--t4);font-size:.75rem;}

#ch-active{flex:1;display:flex;flex-direction:column;height:100dvh;background:var(--bg) radial-gradient(circle at 50% -20%, rgba(183,33,255,0.15), transparent 60%);position:relative;overflow:hidden;}
#ch-active::before {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url('data:image/svg+xml;utf8,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><path d="M74.627 0l5.373 5.373v74.627l-5.373-5.373h-74.627l5.373-5.373h69.254v-69.254z" fill="rgba(255,255,255,0.012)"/></svg>');
}

.chat-header{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10;}
.btn-back{color:var(--t3);display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;transition:background .2s,color .2s;}
.btn-back:hover{background:var(--elevated);color:var(--t1);}
.chat-peer-info{flex:1;min-width:0;}
.chat-peer-name{font-size:1.05rem;font-weight:600;color:var(--t1);}
.peer-status{font-size:.8rem;color:var(--neon-bright);margin-top:2px;}
.peer-status.off{color:var(--t4);}

.pinned-bar{display:none;align-items:center;gap:10px;padding:8px 16px;background:rgba(77,171,247,.07);border-bottom:1px solid var(--border2);flex-shrink:0;}
.pinned-bar.show{display:flex;}
.pin-icon{font-size:.85rem;flex-shrink:0;}
.pin-text{flex:1;font-size:.78rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pin-close{color:var(--t4);font-size:.9rem;transition:color .2s;padding:4px;flex-shrink:0;}
.pin-close:hover{color:var(--t1);}

.messages-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 18px;scroll-behavior:smooth;display:flex;flex-direction:column;gap:6px;z-index:1;}
.messages-scroll::-webkit-scrollbar{width:3px;}
.messages-scroll::-webkit-scrollbar-track{background:transparent;}
.messages-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;}

.typing-bar{display:none;align-items:center;gap:10px;padding:8px 16px;flex-shrink:0;}
.typing-bar.show{display:flex;}
.typing-dots{display:flex;gap:4px;}
.typing-dots span{width:7px;height:7px;background:var(--t4);border-radius:50%;animation:typingPulse 1.2s infinite;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes typingPulse{0%,80%,100%{transform:scale(.7);opacity:.4;}40%{transform:scale(1);opacity:1;}}
.typing-text{font-size:.75rem;color:var(--t4);direction:rtl;}

.reply-bar{display:none;align-items:center;gap:10px;padding:8px 14px;background:rgba(77,171,247,.06);border-top:1px solid var(--border2);flex-shrink:0;}
.reply-bar.show{display:flex;}
.reply-bar-inner{flex:1;display:flex;gap:6px;align-items:center;min-width:0;direction:rtl;}
.reply-label{font-size:.7rem;color:var(--neon-bright);font-weight:700;flex-shrink:0;}
.reply-name{font-size:.75rem;color:var(--t2);font-weight:600;flex-shrink:0;}
.reply-text{font-size:.73rem;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.mention-drop{display:none;flex-direction:column;position:absolute;bottom:70px;left:14px;right:14px;background:var(--elevated);border:1px solid var(--border2);border-radius:14px;overflow:hidden;z-index:50;max-height:200px;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.6);}
.mention-drop.show{display:flex;}
.mention-item{display:flex;align-items:center;gap:10px;padding:10px 14px;transition:background .15s;direction:rtl;}
.mention-item:hover{background:rgba(255,255,255,.04);}
.m-name{font-size:.82rem;font-weight:600;color:var(--t1);}
.m-tag{font-size:.7rem;color:var(--t4);margin-right:auto;}

.emoji-panel{display:none;padding:10px 12px;background:var(--elevated);border-top:1px solid var(--border);flex-shrink:0;max-height:180px;overflow-y:auto;}
.emoji-panel.open{display:block;}
.emoji-grid{display:flex;flex-wrap:wrap;gap:2px;}
.emj{font-size:1.45rem;padding:5px;border-radius:8px;transition:background .12s,transform .12s;user-select:none;}
.emj:hover{background:rgba(255,255,255,.06);transform:scale(1.2);}

.input-bar{padding:12px 14px;background:rgba(7,7,16,.85);border-top:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);flex-shrink:0;}
.message-composer{display:flex;align-items:flex-end;gap:8px;background:rgba(20,20,35,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:24px;padding:8px 8px 8px 14px;transition:border-color .3s, background .3s;box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);}
.message-composer:focus-within{border-color:var(--neon);background:rgba(30,25,45,0.8);}
.msg-textarea{flex:1;background:none;border:none;color:var(--t1);font-size:.9rem;line-height:1.5;resize:none;max-height:98px;overflow-y:auto;padding:4px 0;direction:auto;}
.msg-textarea::placeholder{color:var(--t4);}
.btn-send{width:36px;height:36px;background:var(--neon);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:transform .22s var(--ez),box-shadow .22s;}
.btn-send:hover{transform:scale(1.1);box-shadow:0 4px 20px rgba(77,171,247,.5);}
.btn-send:active{transform:scale(.92);}
.btn-send svg{fill:#fff;}

@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* First message in a group gets more top margin */

.msg.out 
.msg.out:hover 

.msg.in 
.msg.in:hover 
.msg.emoji-only 
.msg.msg-deleted 
.reply-quote{background:rgba(0,0,0,.15);border-inline-start:3px solid var(--neon-bright);border-radius:6px;padding:6px 10px;margin-bottom:8px;font-size:.8rem;}
.rq-name{color:var(--neon-bright);font-weight:600;font-size:.78rem;margin-bottom:2px;}

.msg-img{max-width:220px;border-radius:12px;cursor:pointer;transition:opacity .2s;}
.msg-img:hover{opacity:.88;}
.voice-msg{display:flex;align-items:center;gap:10px;padding:4px 0;min-width:160px;}
.play-btn{width:32px;height:32px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:background .2s;flex-shrink:0;}
.play-btn:hover{background:rgba(255,255,255,.25);}
.waveform{display:flex;align-items:center;gap:2px;height:28px;flex:1;}
.wbar{width:3px;background:rgba(255,255,255,.4);border-radius:2px;min-height:4px;}
.voice-dur{font-size:.66rem;color:rgba(255,255,255,.6);flex-shrink:0;font-family:var(--font-ui);}
.link-prev{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;background:rgba(0,0,0,.3);border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:background .18s;}
.link-prev:hover{background:rgba(77,171,247,.07);}
.lp-icon{font-size:1.2rem;flex-shrink:0;}
.lp-info{flex:1;min-width:0;}
.lp-title{font-size:.76rem;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lp-url{font-size:.66rem;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.edited-tag{font-size:.65rem;color:rgba(255,255,255,.45);font-style:italic;}

.msg.in 

.msg.in 
.react-chip{font-size:.78rem;padding:3px 8px;background:var(--elevated);border:1px solid var(--border);border-radius:10px;transition:background .15s,transform .15s;}
.react-chip:hover{background:rgba(77,171,247,.12);transform:scale(1.08);}

.msg.out 
.msg.in 
.msg:hover 
.mac{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--elevated);border:1px solid var(--border);border-radius:8px;font-size:.82rem;transition:background .15s,transform .12s;}
.mac:hover{background:rgba(77,171,247,.1);transform:scale(1.1);}
.date-sep{text-align:center;color:var(--t4);font-size:.68rem;margin:14px 0 8px;font-family:var(--font-ui);position:relative;}
.date-sep::before,.date-sep::after{content:'';position:absolute;top:50%;width:28%;height:1px;background:var(--border);}
.date-sep::before{inset-inline-end:calc(50% + 38px);}
.date-sep::after{inset-inline-start:calc(50% + 38px);}

.ctx-menu{position:fixed;z-index:800000;background:var(--elevated);border:1px solid var(--border2);border-radius:16px;box-shadow:0 16px 60px rgba(0,0,0,.9), inset 0 0 0 1px var(--glass-border);min-width:180px;overflow:hidden;display:none;animation:ctxIn .25s var(--cinematic);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.ctx-menu.show{display:block;}
@keyframes ctxIn{from{opacity:0;transform:scale(.9) translateY(-10px);filter:blur(4px);}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0);}}
.ctx-item{display:flex;align-items:center;gap:12px;padding:12px 18px;font-size:.9rem;color:var(--t1);font-weight:600;transition:background .2s, color .2s;direction:rtl;}
.ctx-item:hover{background:rgba(183, 33, 255, 0.1);color:#fff;}
.ctx-item.danger{color:#ff4d6a;}
.ctx-item.danger:hover{background:rgba(255,77,106,.15);}
.ctx-item.danger svg {fill: #ff4d6a;}

.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:900000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px;overflow-y:auto;}
.modal-wrap.open{display:flex;animation:fadeOv .3s var(--ez2);}
.modal-card{background:#080812;border:1px solid var(--border2);border-radius:var(--r-xl);padding:36px 32px 28px;width:100%;max-width:440px;max-height:88dvh;overflow-y:auto;position:relative;scrollbar-width:thin;animation:vaultIn .35s var(--ez);}
.modal-card::-webkit-scrollbar{width:3px;}
.modal-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:6px;}
.modal-card h2{font-size:1.4rem;font-weight:700;color:var(--t1);margin-bottom:22px;text-align:center;}
.modal-card h2 em{color:var(--neon-bright);font-style:normal;}
.vault-close{position:absolute;top:18px;inset-inline-end:18px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--t4);border-radius:50%;font-size:1rem;transition:color .2s,background .2s,transform .2s;}
.vault-close:hover{color:#fff;background:rgba(255,255,255,.06);transform:rotate(90deg);}
.vault-back{position:absolute;top:18px;inset-inline-start:18px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--t4);border-radius:50%;font-size:1rem;transition:color .2s,background .2s;}
.vault-back:hover{color:#fff;background:rgba(255,255,255,.06);}
.pav-wrap{display:flex;justify-content:center;margin-bottom:16px;}
.pav-el{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,#1864ab,#339af0);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff;position:relative;overflow:hidden;border:2px solid var(--border2);transition:border-color .25s;}
.pav-el:hover{border-color:var(--neon);}
.pav-el img{width:100%;height:100%;object-fit:cover;}
.cam-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:1.4rem;}
.pav-el:hover .cam-overlay{opacity:1;}
.uid-display{text-align:center;font-size:.68rem;color:var(--t4);font-family:var(--font-ui);letter-spacing:1px;margin-bottom:14px;padding:6px 12px;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid var(--border);}
.btn-primary{width:100%;padding:14px;background:var(--neon);color:#fff;font-weight:700;border-radius:12px;transition:opacity .2s,transform .2s;font-size:.88rem;text-align:center;}
.btn-primary:hover{opacity:.88;transform:translateY(-1px);}
.btn-red{width:100%;padding:14px;background:rgba(255,60,80,.12);color:#ff4d6a;border:1px solid rgba(255,60,80,.2);font-weight:700;border-radius:12px;font-size:.88rem;transition:background .2s,transform .2s;margin-top:8px;text-align:center;}
.btn-red:hover{background:rgba(255,60,80,.2);transform:translateY(-1px);}
.modal-sig{text-align:center;font-size:.68rem;color:var(--t4);margin-top:18px;letter-spacing:.5px;}
.modal-sig strong{color:var(--neon);}
.sett-head{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t4);margin:18px 0 10px;}
.sett-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);gap:12px;direction:rtl;}
.sett-lbl{font-size:.84rem;color:var(--t2);flex:1;}
.sett-val{font-size:.78rem;color:var(--t4);}
.sett-btn{padding:7px 14px;background:var(--elevated);border:1px solid var(--border);color:var(--t2);border-radius:9px;font-size:.75rem;font-weight:600;transition:background .2s,color .2s;white-space:nowrap;}
.sett-btn:hover{background:rgba(77,171,247,.1);color:var(--neon-bright);}
.sett-btn.danger{color:#ff4d6a;border-color:rgba(255,60,80,.2);}
.sett-btn.danger:hover{background:rgba(255,60,80,.08);}
.toggle{position:relative;display:inline-block;width:42px;height:24px;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:12px;transition:background .3s;}
.toggle-track::before{content:'';position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s var(--ez);}
.toggle input:checked ~ .toggle-track{background:var(--neon);}
.toggle input:checked ~ .toggle-track::before{transform:translateX(18px);}
.font-btns{display:flex;gap:8px;}
.font-btn{padding:7px 16px;background:var(--elevated);border:1px solid var(--border);color:var(--t3);border-radius:9px;font-size:.78rem;transition:all .2s;}
.font-btn.active{background:rgba(77,171,247,.12);border-color:var(--neon);color:var(--neon-bright);}

.toasts-box{position:fixed;bottom:28px;inset-inline-start:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:9999999;pointer-events:none;align-items:center;}
.toast{padding:11px 22px;background:#14142a;border:1px solid var(--border2);border-radius:var(--r-pill);color:var(--t1);font-size:.82rem;font-weight:500;white-space:nowrap;box-shadow:0 8px 28px rgba(0,0,0,.55);animation:toastIn .35s var(--ez) forwards;pointer-events:auto;}
.toast.ok{border-color:rgba(77,255,145,.35);color:#4dff91;}
.toast.er{border-color:rgba(255,77,106,.35);color:#ff4d6a;}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(8px) scale(.94);}}

.voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  padding: 2px 0;
}
.play-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
  border: 1px solid rgba(255,255,255,.12);
  user-select: none;
}
.play-btn:hover { background: rgba(183,33,255,.35); transform: scale(1.1); }
.waveform {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 28px;
  flex: 1;
}
.wbar {
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.45);
  min-height: 4px;
  transition: height .3s ease;
  flex-shrink: 0;
}
.msg.in .wbar { background: rgba(183,33,255,0.6); }
.voice-dur {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.field-input {
  width: 100%; padding: 12px 15px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(162,0,255,0.2);
  color: var(--t1); font-family: inherit; font-size: 0.9rem; transition: all 0.3s ease;
  outline: none;
}
.field-input option { background: #111; color: #fff; }
.light-mode .field-input option { background: #fff; color: #111; }

.toggle {
  position: relative; width: 44px; height: 24px; cursor: pointer; display: inline-block;
  vertical-align: middle; z-index: 10;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.1); border-radius: 20px; transition: 0.3s;
}
.toggle-track:before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: 0.3s;
}
input:checked + .toggle-track { background: var(--neon); }
input:checked + .toggle-track:before { transform: translateX(20px); }

#modal-wrap {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  z-index: 900000; display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: rgba(15,10,25,0.95); border: 1px solid rgba(162,0,255,0.3);
  border-radius: 24px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  animation: modalIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  z-index: 10000;
}
.light-mode .modal-card { background: rgba(255,255,255,0.98); border-color: #ddd; }

#rec-btn.recording {
  color: #ff4d6a !important;
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,106,0); }
  50%      { box-shadow: 0 0 0 8px rgba(255,77,106,0.25); }
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(183,33,255,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(183,33,255,.6); }

@media(max-width:900px){
  :root{--sidebar-w:280px;}
  .social-grid{grid-template-columns:1fr;width:min(90%, 400px);}
  .wide-element{grid-column:1 / -1; width:100%;}
  .btn-create-account{width:100%; padding:18px 24px;}
}

@media(min-width:641px){
  .social-grid{gap:16px;}
}

.lang-selector {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 50;
}
.lang-selector select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--t1);
  padding: 8px 12px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: 0.8rem;
  backdrop-filter: blur(8px);
  outline: none;
  cursor: pointer;
  transition: all 0.3s var(--ez);
}
.lang-selector select:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.lang-selector select option {
  background: #111;
  color: #fff;
}

@media(max-width:640px){
  :root{--sidebar-w:100%;}
  body{cursor:auto;}
  #c-dot,#c-ring{display:none!important;}
  #pg-app{flex-direction:column;}
  #sidebar{position:absolute;inset:0;width:100%;z-index:20;transform:translateX(100%);transition:transform .4s var(--ez);}
  #sidebar.open{transform:translateX(0);}
  #ch-active{position:absolute;inset:0;z-index:15;}
  #ch-welcome{position:absolute;inset:0;z-index:14;}
  .btn-back{display:flex!important;}
  #brand-word{letter-spacing:14px;margin-inline-end:-14px;}
  .btn-login-fixed{top:22px;inset-inline-end:22px;padding:10px 22px;font-size:.72rem;}

  .glass-vault{padding:36px 20px 24px;border-radius:24px;width:92%;max-width:400px;}
  .field-row{flex-direction:column;gap:0;}
  .modal-card{padding:28px 20px 22px;}

  #pg-land{padding:50px 12px 30px;gap:0;justify-content:center;}
  .brand-container{margin-bottom:28px;}
  .social-grid{gap:12px;width:100%; max-width: 320px;}
  .social-card{padding:14px 16px;font-size:.85rem;}
  .btn-create-account{padding:16px 20px;font-size:.92rem;width:100%;}
}

body.light-mode { background: #fdfdff !important; color: #111; }
body.light-mode #pg-land { background: #fdfdff !important; color: #111; }
body.light-mode .brand-word { color: #111 !important; text-shadow: 0 5px 20px rgba(0,0,0,0.05); }
body.light-mode .brand-tagline { color: #555; }
body.light-mode .social-card { background: rgba(255,255,255,0.9); border-color: #e5e5e5; color: #222; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
body.light-mode .social-card:hover { border-color: var(--neon); background: #f8f0ff; transform:translateY(-2px); box-shadow: 0 8px 30px rgba(183,33,255,0.15); }
body.light-mode .field-input { background: #fff; color: #111; border-color: #ddd; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); }
body.light-mode .field-input:focus { border-color: var(--neon); box-shadow: 0 0 0 4px rgba(183,33,255,0.1); }
body.light-mode .field-input option { background: #fff; color: #111; }
body.light-mode .modal-card, body.light-mode .glass-vault { background: rgba(255, 255, 255, 0.9); color: #111; box-shadow: 0 20px 60px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(0,0,0,0.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.light-mode .vault-title { color: #111; }
body.light-mode .vault-subtitle { color: #666; }
body.light-mode .field-label { color: #444; }
body.light-mode .sett-lbl, body.light-mode .sett-val, body.light-mode .sett-head { color: #222; }
body.light-mode .vault-close, body.light-mode .btn-vault-close, body.light-mode .icon-btn { background: rgba(0,0,0,0.04); color: #111; border: none; }
body.light-mode .vault-close:hover, body.light-mode .btn-vault-close:hover, body.light-mode .icon-btn:hover { background: rgba(0,0,0,0.08); color: #000; }
body.light-mode .brand-dev-badge { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #333; }
body.light-mode .dev-label { color: var(--neon); }
body.light-mode .dev-name {
  background:linear-gradient(90deg, var(--neon), #7400d3, var(--neon));
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
}
body.light-mode .dev-separator { color: #999; }
body.light-mode .social-card span { color: #111; font-weight: 500; }
body.light-mode .btn-primary, body.light-mode .btn-submit, body.light-mode .btn-create-account { background: linear-gradient(135deg, #b721ff, #7400d3); color: #fff !important; font-weight: 600; box-shadow: 0 10px 25px rgba(183,33,255,0.3); }
body.light-mode .btn-create-account:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 15px 35px rgba(183,33,255,0.4); }
body.light-mode .btn-google, body.light-mode .btn-phone, body.light-mode .btn-social { color: #111; background: #fff; border-color: #ddd; }
body.light-mode .btn-google:hover, body.light-mode .btn-phone:hover, body.light-mode .btn-social:hover { border-color: var(--neon); background: #fbf5ff; }
body.light-mode .auth-divider { color: #666; }
body.light-mode .auth-divider::before, body.light-mode .auth-divider::after { border-color: #ddd; }
body.light-mode .modal-link { color: #444; }
body.light-mode .modal-link:hover { color: #000; }
body.light-mode .modal-link b { color: var(--neon); }
body.light-mode .btn-login-fixed { background: #fff; color: #111; border: 1px solid #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
body.light-mode .btn-login-fixed:hover { border-color: var(--neon); background: #fbf5ff; }
body.light-mode .btn-settings-fixed { background: rgba(0,0,0,0.05); color: #111; }

body.light-mode .toggle-track { background: rgba(0,0,0,0.15) !important; border: 1px solid rgba(0,0,0,0.1) !important; }
body.light-mode .toggle input:checked + .toggle-track { background: var(--neon) !important; border-color: var(--neon) !important; }
body.light-mode .sett-lbl { color: #111 !important; font-weight: 600; }
body.light-mode .sett-val { color: #444 !important; }
body.light-mode .sett-head { color: var(--neon); filter: brightness(0.8); }
body.light-mode #ch-active { background: #f0f2f5 radial-gradient(circle at 50% -20%, rgba(183,33,255,0.05), transparent 60%); }
body.light-mode .chat-header { background: #fff; border-bottom-color: #eee; }
body.light-mode .chat-peer-name { color: #111; }
body.light-mode .msg.in 
body.light-mode .msg.out 
body.light-mode 
body.light-mode 
body.light-mode .msg.out 
body.light-mode 
body.light-mode 
body.light-mode 
body.light-mode .messages-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
body.light-mode .input-bar { background: rgba(255,255,255,0.9); border-top-color: #eee; }
body.light-mode .message-composer { background: #fff; border-color: #ddd; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }

body.light-mode #sidebar { background: #fff; border-inline-end-color: #eee; }
body.light-mode .sidebar-header { background: #fff; border-bottom-color: #eee; }
body.light-mode .ci:hover { background: #f5f7fb; }
body.light-mode .ci.active { background: #eff3ff; }
body.light-mode .ci-name { color: #111; }
body.light-mode .ci-last { color: #666; }
body.light-mode .ci-time { color: #999; }
body.light-mode .sidebar-search { background: #f0f2f5; border-color: transparent; }
body.light-mode .sidebar-search-input { color: #111; }
body.light-mode .sidebar-search-input::placeholder { color: #999; }
body.light-mode .search-bar { background: #f0f2f5; border-color: transparent; }
body.light-mode .search-bar:focus-within { background: #fff; border-color: var(--neon); }
body.light-mode .tab-btn { color: #666; }
body.light-mode .tab-btn.active { color: var(--neon); background: rgba(183,33,255,0.08); }

.vault-close { background: transparent !important; border: none !important; box-shadow: none !important; }
.modal-card .vault-close { background: rgba(0,0,0,0.05) !important; position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--t1); cursor: pointer; transition: 0.2s; }
.modal-card .vault-close:hover { background: rgba(0,0,0,0.1) !important; transform: scale(1.1); }

@keyframes backgroundFloat {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#pg-land { background-size: 200% 200%; }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

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

/* ══════════════════════════════════════════
   🎬 CINEMATIC GRAIN OVERLAY
   طبقة الضوضاء السينمائية المتحركة
   ══════════════════════════════════════════ */
#grain-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.042;
  mix-blend-mode: overlay;
  will-change: transform;
}

/* ══════════════════════════════════════════
   ✍️ VERTICAL DEVELOPER SIGNATURE
   توقيع المطور العمودي الخفي على الجانب
   ══════════════════════════════════════════ */
#dev-sig {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 9000;
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(183, 33, 255, 0.18);
  white-space: nowrap;
  transition: color 0.6s ease, text-shadow 0.6s ease;
  user-select: none;
}
#dev-sig:hover,
body:has(#c-ring) #dev-sig.lit {
  color: rgba(183, 33, 255, 0.7);
  text-shadow: 0 0 30px rgba(183, 33, 255, 0.5), 0 0 60px rgba(183, 33, 255, 0.2);
}
/* نسخة اليسار */
#dev-sig-left {
  position: fixed;
  top: 50%;
  left: 18px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  z-index: 9000;
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(183, 33, 255, 0.12);
  white-space: nowrap;
  transition: color 0.6s ease;
  user-select: none;
}
#dev-sig-left.lit { color: rgba(183, 33, 255, 0.5); text-shadow: 0 0 20px rgba(183, 33, 255, 0.3); }

/* ══════════════════════════════════════════
   💡 CENTRAL LIGHT SOURCE (TIME Bulb)
   الإضاءة المركزية من شعار TIME
   ══════════════════════════════════════════ */
#light-source {
  position: fixed;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}
/* شعاع الضوء الديناميكي */
#dynamic-light {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(
      ellipse 60% 50% at var(--lx, 50%) var(--ly, 25%),
      rgba(183, 33, 255, 0.06) 0%,
      rgba(116, 0, 211, 0.03) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 120% 60% at var(--lx, 50%) 110%,
      rgba(0, 0, 0, 0.98) 0%,
      rgba(10, 5, 20, 0.85) 45%,
      transparent 75%
    );
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease;
  will-change: background, opacity;
  opacity: 0; /* Hidden during intro */
}
/* Reveal after intro exits */
body.intro-done #dynamic-light {
  opacity: 1;
}

/* ══════════════════════════════════════════
   🔮 REFRACTIVE GLASSMORPHISM UPGRADE
   الزجاج الفيزيائي المحسّن
   ══════════════════════════════════════════ */
.glass-vault {
  background: rgba(8, 6, 20, 0.75) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.1) !important;
  border: 1px solid rgba(183, 33, 255, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 40px 120px rgba(0,0,0,0.9),
    0 0 80px rgba(183,33,255,0.08) !important;
}
/* تأثير الحافة المضيئة عند حركة الماوس */
.glass-vault::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 100% 60% at var(--mx, 50%) var(--my, 0%),
    rgba(183,33,255,0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: background 0.15s ease;
}

#sidebar {
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  background: rgba(8, 5, 18, 0.88) !important;
  border-inline-end: 1px solid rgba(183,33,255,0.15) !important;
}

/* ══════════════════════════════════════════
   💬 FLUID MESSAGE BUBBLES (قطرة ماء)
   الرسائل تتشكل كقطرة تتمدد
   ══════════════════════════════════════════ */
@keyframes bubbleDrop {
  0%   { opacity: 0; transform: scale(0.7) translateY(12px); }
  60%  { transform: scale(1.04) translateY(-2px); }
  80%  { transform: scale(0.98) translateY(0px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* تمدد الفقاعة عند الإرسال */

.msg:hover 

/* ══════════════════════════════════════════
   🧲 MAGNETIC CURSOR UPGRADE
   المؤشر المغناطيسي المحسّن
   ══════════════════════════════════════════ */
#c-dot {
  width: 8px !important;
  height: 8px !important;
  background: #fff !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.8) !important;
  transition: width 0.2s var(--ez), height 0.2s var(--ez), opacity 0.3s, transform 0.15s !important;
}
#c-ring {
  border: 1.5px solid rgba(183,33,255,0.6) !important;
  box-shadow: 0 0 12px rgba(183,33,255,0.2) !important;
  transition: width 0.25s var(--ez), height 0.25s var(--ez), border-color 0.25s, box-shadow 0.25s, opacity 0.3s !important;
}
#c-ring.hover {
  width: 50px !important;
  height: 50px !important;
  border-color: var(--neon) !important;
  box-shadow: 0 0 20px rgba(183,33,255,0.5), inset 0 0 10px rgba(183,33,255,0.1) !important;
  background: rgba(183,33,255,0.05) !important;
}
#c-ring.magnetic {
  width: 58px !important;
  height: 58px !important;
  border-color: rgba(255,255,255,0.8) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.6) !important;
  background: rgba(183,33,255,0.08) !important;
}

/* ══════════════════════════════════════════
   ✨ SOCIAL CARDS — Interactive Light Refraction
   البطاقات الاجتماعية مع انكسار الضوء
   ══════════════════════════════════════════ */
.social-card {
  overflow: hidden;
}
.social-card::after {
  content: '';
  position: absolute;
  top: var(--ry, -50%);
  left: var(--rx, -50%);
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.social-card:hover::after { opacity: 1; }

/* ══════════════════════════════════════════
   🎨 BRAND WORD — Enhanced Central Light
   تحسين شعار TIME كمصباح مركزي
   ══════════════════════════════════════════ */
#brand-word {
  color: #fff !important;
}
#brand-word.on {
  animation: bulbIgnite 2.5s cubic-bezier(0.19,1,0.22,1) forwards,
             bulb-breathe 4s ease-in-out infinite 2.5s !important;
}
@keyframes bulbIgnite {
  0%   { opacity:0; color:#000; text-shadow:none; filter:brightness(0); }
  30%  { opacity:0.3; color:#1a0040; filter:brightness(0.3); }
  60%  { opacity:0.9; color:#fff; text-shadow: 0 0 60px #b721ff, 0 0 120px rgba(183,33,255,0.6); filter:brightness(1.2); }
  75%  { opacity:0.6; text-shadow: 0 0 20px rgba(183,33,255,0.3); }
  100% {
    opacity:1; color:#fff;
    text-shadow:
      0 0 40px rgba(183,33,255,0.9),
      0 0 80px rgba(183,33,255,0.5),
      0 0 160px rgba(183,33,255,0.2),
      0 0 300px rgba(183,33,255,0.1);
    filter:brightness(1);
  }
}
@keyframes bulb-breathe {
  0%,100% {
    text-shadow:
      0 0 40px rgba(183,33,255,0.95),
      0 0 80px rgba(183,33,255,0.55),
      0 0 180px rgba(183,33,255,0.25),
      0 0 350px rgba(183,33,255,0.08);
  }
  50% {
    text-shadow:
      0 0 60px rgba(183,33,255,1),
      0 0 130px rgba(183,33,255,0.75),
      0 0 300px rgba(183,33,255,0.4),
      0 0 500px rgba(183,33,255,0.12);
  }
}

/* إطار الشعار المحسّن */
.dynamic-frame {
  box-shadow:
    0 0 30px rgba(183,33,255,0.3),
    0 0 80px rgba(183,33,255,0.15),
    inset 0 0 20px rgba(183,33,255,0.05) !important;
  border-color: rgba(183,33,255,0.6) !important;
}

/* ══════════════════════════════════════════
   📱 RESPONSIVE — All Devices
   جميع الأجهزة: موبايل، تابلت، شاشات كبيرة
   ══════════════════════════════════════════ */

/* Tablet 641–1024px */
@media (min-width: 641px) and (max-width: 1024px) {
  :root { --sidebar-w: 300px; }
  .social-grid { grid-template-columns: repeat(3, 1fr); width: min(95%, 540px); }
  .brand-frame-wrapper { padding: 12px 36px; }
  #brand-word { font-size: clamp(3rem, 10vw, 6rem); }
}

/* Large screens ≥1440px */
@media (min-width: 1440px) {
  :root { --sidebar-w: 400px; }
  .social-grid { width: min(90%, 640px); }
  #brand-word { font-size: 7rem; }
}

/* Mobile ≤640px — already handled above, enhance further */
@media (max-width: 640px) {
  #dev-sig, #dev-sig-left { display: none; }
  #grain-canvas { opacity: 0.03; }
  .glass-vault { 
    padding: 40px 22px 32px !important; 
    border-radius: 28px !important; 
    backdrop-filter: blur(8px) saturate(120%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) brightness(1.05) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(183,33,255,0.05) !important;
  }
  #modal-wrap { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
  .social-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; width: 100% !important; }
  .social-card { 
    padding: 14px 16px !important; 
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
  }

  #brand-word { font-size: clamp(3rem, 18vw, 5rem) !important; }
  .brand-frame-wrapper { padding: 10px 24px !important; }
  .brand-dev-badge { font-size: 0.55rem !important; letter-spacing: 2px !important; }
  .btn-create-account { width: 100% !important; padding: 16px 20px !important; }
  /* إخفاء Light source على الموبايل لتوفير الأداء */
  #dynamic-light { display: none; }
}

/* Ultra-small ≤380px */
@media (max-width: 380px) {
  .social-grid { grid-template-columns: 1fr 1fr !important; }
  #brand-word { font-size: 2.8rem !important; }
}

/* ══════════════════════════════════════════
   🌅 INTRO SCREEN UPGRADE
   شاشة الدخول المحسّنة
   ══════════════════════════════════════════ */
#intro-word {
  text-shadow:
    0 0 0px transparent;
  animation: introFlicker 2.8s cubic-bezier(0.25,1,0.5,1) forwards,
             introPulse 3s ease-in-out infinite 3s !important;
}
@keyframes introFlicker {
  0%   { opacity:0; transform:scale(0.8); text-shadow:none; color:#000; }
  15%  { opacity:0.05; color:#1a0040; }
  30%  { opacity:0.7; color:#fff; text-shadow: 0 0 100px rgba(183,33,255,0.8), 0 0 200px rgba(183,33,255,0.4); transform:scale(0.97); }
  40%  { opacity:0.2; color:#aaa; text-shadow:none; }
  55%  { opacity:0.95; color:#fff; text-shadow: 0 0 80px rgba(183,33,255,0.9); transform:scale(1.01); }
  100% {
    opacity:1; color:#fff; transform:scale(1);
    text-shadow:
      0 0 40px rgba(183,33,255,1),
      0 0 80px rgba(183,33,255,0.7),
      0 0 160px rgba(183,33,255,0.4),
      0 0 300px rgba(183,33,255,0.15);
  }
}
@keyframes introPulse {
  0%,100% {
    text-shadow:
      0 0 40px rgba(183,33,255,1),
      0 0 80px rgba(183,33,255,0.7),
      0 0 160px rgba(183,33,255,0.4);
  }
  50% {
    text-shadow:
      0 0 60px rgba(183,33,255,1),
      0 0 120px rgba(183,33,255,0.85),
      0 0 250px rgba(183,33,255,0.5),
      0 0 400px rgba(183,33,255,0.2);
  }
}

/* ══════════════════════════════════════════
   ⚡ SEND BUTTON — Pulse on send
   زر الإرسال نبضة عند الإرسال
   ══════════════════════════════════════════ */
.btn-send.sending {
  animation: sendPulse 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes sendPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); box-shadow: 0 0 30px rgba(183,33,255,0.8); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════
   🔲 APP CHAT AREA — Enhanced background
   ══════════════════════════════════════════ */
#ch-active {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(183,33,255,0.12), transparent 60%),
    var(--bg) !important;
}
#ch-welcome {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(183,33,255,0.06), transparent 70%),
    var(--bg) !important;
}

/* ══════════════════════════════════════════
   🌓 LIGHT MODE — complete palette
   ══════════════════════════════════════════ */
body.light-mode #grain-canvas { opacity: 0.02; mix-blend-mode: multiply; }
body.light-mode #dynamic-light {
  background: radial-gradient(
    ellipse 60% 50% at var(--lx,50%) var(--ly,25%),
    rgba(183,33,255,0.06) 0%,
    transparent 70%
  );
}
body.light-mode #dev-sig { color: rgba(183,33,255,0.15); }
body.light-mode #dev-sig.lit { color: rgba(183,33,255,0.5); }
body.light-mode .glass-vault {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(183,33,255,0.2) !important;
  box-shadow: 0 20px 80px rgba(0,0,0,0.1), 0 0 0 1px rgba(183,33,255,0.1) !important;
}

/* ══════════════════════════════════════════
   🌌 AURORA NEBULA BACKGROUND
   ══════════════════════════════════════════ */
#pg-land::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(120,0,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,0,128,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,112,243,0.04) 0%, transparent 60%);
  animation: auroraPulse 12s ease-in-out infinite alternate;
}
@keyframes auroraPulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 1;   }
  100% { opacity: 0.7; }
}

/* ══════════════════════════════════════════
   🎯 BRAND-WORD Perfect Centering
   ══════════════════════════════════════════ */
.brand-frame-wrapper {
  perspective: 800px;
}
.brand-frame-wrapper #brand-word {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════
   🎨 ENHANCED LOGIN BUTTON
   ══════════════════════════════════════════ */
.btn-login-fixed {
  background: linear-gradient(135deg, rgba(183,33,255,0.12), rgba(116,0,211,0.08)) !important;
  border: 1px solid rgba(183,33,255,0.35) !important;
  color: #e8d5ff !important;
  box-shadow: 0 0 20px rgba(183,33,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.btn-login-fixed:hover {
  background: linear-gradient(135deg, rgba(183,33,255,0.28), rgba(116,0,211,0.18)) !important;
  border-color: rgba(183,33,255,0.8) !important;
  color: #fff !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.3) !important;
}

/* ══════════════════════════════════════════
   🌕 COMPLETE LIGHT MODE FIX
   ══════════════════════════════════════════ */
body.light-mode #pg-land {
  background: linear-gradient(160deg, #f8f5ff 0%, #fff 40%, #f0f5ff 100%) !important;
}
body.light-mode #sidebar {
  background: rgba(255,255,255,0.97) !important;
  border-inline-end: 1px solid #ede0ff !important;
}
body.light-mode .sidebar-user-name { color: #111 !important; }
body.light-mode .sidebar-user-tag { color: var(--neon) !important; }
body.light-mode .ci { border-bottom-color: #f0eaff !important; }
body.light-mode .ci:hover { background: #f5f0ff !important; }
body.light-mode .ci.active { background: #ede5ff !important; }
body.light-mode .ci-name { color: #111 !important; }
body.light-mode .ci-last { color: #555 !important; }
body.light-mode .ci-time { color: #888 !important; }
body.light-mode #ch-active {
  background: linear-gradient(180deg, #f8f5ff 0%, #fff 100%) !important;
}
body.light-mode .chat-header {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid #ede0ff !important;
}
body.light-mode .chat-peer-name { color: #111 !important; }
body.light-mode .msg.in 
body.light-mode .msg.out 
body.light-mode 
body.light-mode 
body.light-mode .msg.out 
body.light-mode .input-bar {
  background: rgba(255,255,255,0.98) !important;
  border-top: 1px solid #ede0ff !important;
}
body.light-mode .message-composer {
  background: #f8f5ff !important;
  border: 1px solid #ddd5ff !important;
}
body.light-mode .message-composer:focus-within {
  border-color: var(--neon) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.1) !important;
}

body.light-mode .modal-wrap, body.light-mode .modal-overlay {
  background: rgba(235,225,255,0.88) !important;
}
body.light-mode #c-dot {
  background: var(--neon) !important;
  box-shadow: 0 0 8px rgba(183,33,255,0.8) !important;
}
body.light-mode #c-ring { border-color: rgba(183,33,255,0.5) !important; }
body.light-mode #brand-word {
  color: #1a0040 !important;
  text-shadow: 0 0 40px rgba(183,33,255,0.3), 0 0 80px rgba(183,33,255,0.15) !important;
}
body.light-mode .dynamic-frame {
  border-color: rgba(183,33,255,0.5) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.2), inset 0 0 20px rgba(183,33,255,0.06) !important;
}
body.light-mode #stars-layer { opacity: 0 !important; }
body.light-mode .btn-create-account {
  background: transparent !important;
  border: 2px solid var(--neon) !important;
  color: var(--neon) !important;
}
body.light-mode .btn-create-account:hover {
  background: var(--neon) !important;
  color: #fff !important;
}
body.light-mode .btn-login-fixed {
  background: #fff !important;
  color: var(--neon) !important;
  border: 1px solid rgba(183,33,255,0.3) !important;
}
body.light-mode .btn-login-fixed:hover {
  background: var(--neon) !important;
  color: #fff !important;
}
body.light-mode .ctx-menu {
  background: #fff !important;
  border-color: rgba(183,33,255,0.15) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
}
body.light-mode .ctx-item { color: #111 !important; }
body.light-mode .ctx-item:hover { background: rgba(183,33,255,0.06) !important; color: var(--neon) !important; }
body.light-mode .toast { background: #fff !important; color: #111 !important; border-color: rgba(183,33,255,0.2) !important; }
body.light-mode .toast.ok { color: #007a33 !important; border-color: rgba(0,160,60,0.3) !important; }
body.light-mode .toast.er { color: #cc0000 !important; border-color: rgba(200,0,0,0.3) !important; }
body.light-mode .modal-card { background: rgba(255,255,255,0.97) !important; color: #111 !important; }
body.light-mode .empty-brand { color: rgba(183,33,255,0.25) !important; }
body.light-mode .empty-title { color: #333 !important; }
body.light-mode .empty-sub { color: #666 !important; }
body.light-mode .empty-badge { background: #f8f5ff !important; border-color: rgba(183,33,255,0.15) !important; color: #666 !important; }

/* ══════════════════════════════════════════
   📐 GRID UNIFORM COLUMNS FIX
   ══════════════════════════════════════════ */
@media (min-width: 900px) {
  .social-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════
   🖱️ CUSTOM CURSOR ENGINE — FINAL FIX
   #c-dot.hidden and #c-ring.hidden use opacity:0
   so they don't flash; text cursor appears on inputs
   via CSS cursor:text!important rule above.
   We use block+opacity so the ring animation loop keeps running.
   ══════════════════════════════════════════ */
#c-dot.hidden, #c-ring.hidden {
  opacity: 0 !important;
  display: block !important;
  pointer-events: none !important;
}

/* Sidebar profile — pointer cursor always */
.sidebar-profile { cursor: pointer; }

/* Light mode sidebar search fix */
body.light-mode .sidebar-search { background: #f3eeff !important; border-bottom-color: #ede0ff !important; }
body.light-mode .tab-bar { background: #fff !important; border-bottom-color: #ede0ff !important; }
body.light-mode .chat-list { background: #fff !important; }
body.light-mode .sidebar-user-status { color: #22aa55 !important; }
body.light-mode .peer-status { color: var(--neon) !important; }

/* Ensure textarea direction:auto works in RTL layout */
.msg-textarea { direction: auto !important; }
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════
   🚀 2026 ARCHITECTURE & PERFORMANCE UPGRADES
   ══════════════════════════════════════════ */

/* Hide custom cursor completely on touch devices to save battery */
@media (pointer: coarse) {
  #c-dot, #c-ring { display: none !important; }
}

/* 2026 CSS Architecture: Content Visibility for DOM Virtualization and GPU Acceleration */

/* Dynamic Notch / Island Support */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}/* ========================================================
   MODERN CHAT BUBBLES UI (Responsive & Perfect Arabic Support)
   ======================================================== */

.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 3px;
  max-width: 100%;
  width: fit-content;
  animation: msgIn 0.2s ease;
  position: relative;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.msg.out {
  flex-direction: row-reverse;
  align-self: flex-end;
  margin-left: auto;
}
.msg.in {
  align-self: flex-start;
  margin-right: auto;
}
.msg.group-start {
  margin-top: 10px;
}

/* Avatars */
.msg-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1864ab, #339af0);
  overflow: hidden;
}
.msg-av img { width: 100%; height: 100%; object-fit: cover; }

/* The Bubble Container */


.msg.out 
.msg.in 

.msg.emoji-only 

.msg.msg-deleted 

/* Text Content - Robust Arabic Handling */


/* Footer (Time + Ticks) */



.msg.in 

/* Checkmarks */

 /* One tick (Sent) */
 /* Two ticks (Delivered, grey) */
 /* Two ticks (Read, blue) */

/* Actions (Hover) */
.msg-actions {
  display: none;
  position: absolute;
  top: -15px;
  gap: 4px;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  z-index: 10;
}
.msg.out .msg-actions { right: 100%; margin-right: 8px; }
.msg.in .msg-actions { left: 100%; margin-left: 8px; flex-direction: row-reverse; }
.msg:hover .msg-actions { display: flex; }

/* Light Mode Overrides */
body.light-mode .msg.in 
body.light-mode .msg.out 
body.light-mode 
body.light-mode .msg.out 
body.light-mode .tick-sent, body.light-mode 
body.light-mode 



.msg.out 
.msg.in 



/* ================================================================
   TiME 2026 — AUTHORITATIVE BUBBLE CSS (Master Source of Truth)
   Applied at END of style.css — overrides all previous rules.
   ================================================================ */

.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 3px;
  max-width: 100%;
  animation: msgIn 0.2s ease;
  position: relative;
}
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.msg.out { flex-direction:row-reverse; align-self:flex-end; margin-left:auto; }
.msg.in  { align-self:flex-start; margin-right:auto; }
.msg.group-start { margin-top: 10px; }

.msg-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, #1864ab, #339af0); overflow: hidden;
}
.msg-av img { width:100%; height:100%; object-fit:cover; }

.bubble {
  position: relative;
  max-width: min(85%, 500px);
  min-width: 64px;
  padding: 7px 12px 5px 12px;
  border-radius: 18px;
  word-break: normal;
  overflow-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
  flex: 0 1 auto;
}
.msg.out .bubble {
  background: linear-gradient(135deg, rgba(183,33,255,0.95), rgba(100,0,200,0.92));
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 8px rgba(183,33,255,0.2);
}
.msg.in .bubble {
  background: rgba(28,18,48,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f0eaff;
  border: 1px solid rgba(183,33,255,0.08);
  border-bottom-left-radius: 4px;
}
.msg.out:hover .bubble { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(183,33,255,0.32); }
.msg.in:hover  .bubble { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(0,0,0,0.45); }

.msg.emoji-only .bubble {
  background: none !important; border: none !important;
  box-shadow: none !important; font-size: 2.8rem !important;
  padding: 2px 4px !important; min-width: 0 !important;
}
.msg.msg-deleted .bubble {
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.4) !important;
  font-style: italic;
}

.msg-text {
  display: block;
  font-size: .97rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

.msg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  direction: ltr;
}
.msg-time {
  font-size: .67rem;
  opacity: .65;
  white-space: nowrap;
  font-family: var(--font-ui, sans-serif);
}
.msg.in .msg-time { opacity: .5; }

.msg-tick { font-size: .82rem; line-height: 1; display:inline-flex; align-items:center; }
.tick-sent      { color: rgba(255,255,255,0.55); }
.tick-delivered { color: rgba(255,255,255,0.55); }
.tick-read      { color: #34b7f1; text-shadow: 0 0 6px rgba(52,183,241,0.4); }

.msg-actions {
  display: none;
  position: absolute;
  top: -14px;
  gap: 3px;
  background: rgba(10,5,25,0.85);
  backdrop-filter: blur(6px);
  padding: 3px 7px;
  border-radius: 10px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.06);
}
.msg.out .msg-actions { right: calc(100% + 8px); }
.msg.in  .msg-actions { left: calc(100% + 8px); flex-direction:row-reverse; }
.msg:hover .msg-actions { display: flex; }

.msg-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.msg.out .msg-reactions { justify-content:flex-end; }
.msg.in  .msg-reactions { justify-content:flex-start; }

.msg-img { max-width: 220px; border-radius: 12px; cursor:pointer; transition:opacity .2s; display:block; }
.msg-img:hover { opacity:.88; }

body.light-mode .msg.out .bubble {
  background: linear-gradient(135deg,#b721ff,#8b13ff) !important;
  color:#fff !important; border:none !important;
  box-shadow: 0 3px 12px rgba(183,33,255,0.25) !important;
}
body.light-mode .msg.in .bubble {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
body.light-mode .msg.in .msg-time   { color:rgba(0,0,0,0.4) !important; opacity:1; }
body.light-mode .msg.out .msg-time  { color:rgba(255,255,255,0.75) !important; opacity:1; }
body.light-mode .tick-sent, body.light-mode .tick-delivered { color:rgba(255,255,255,0.7) !important; }
body.light-mode .tick-read { color:#21aad4 !important; text-shadow:none !important; }

@media (max-width: 600px) {
  .bubble { max-width: min(88%, 340px) !important; }
  .msg-text { font-size: .93rem !important; }
}
@media (min-width: 1200px) {
  .bubble { max-width: min(65%, 600px) !important; }
}

/* ========================================================
   MASTER CHAT BUBBLE CSS OVERRIDES (DO NOT DUPLICATE)
   ======================================================== */
.msg {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  animation: msgIn 0.2s ease;
  box-sizing: border-box !important;
}

.msg.out {
  justify-content: flex-end !important;
  flex-direction: row !important;
}

.msg.in {
  justify-content: flex-start !important;
  flex-direction: row !important;
}

.bubble {
  position: relative !important;
  width: fit-content !important;
  max-width: min(85%, 500px) !important;
  min-width: 64px !important;
  padding: 7px 12px 5px 12px !important;
  border-radius: 18px !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  flex: 0 1 auto !important;
  box-sizing: border-box !important;
}

.msg-text {
  display: block !important;
  font-size: .97rem !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  direction: auto !important;
  text-align: start !important;
  unicode-bidi: plaintext !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ??????????????????????????????????????????
   Report Modal (SweetAlert2 custom styling)
   ?????????????????????????????????????????? */
.swal-report-popup {
  border: 1px solid rgba(180,60,255,0.4) !important;
  border-radius: 20px !important;
  background: #0d0818 !important;
}

/* Reason select inside report modal */
#swal-reason-sel option {
  background: #1a0a2e;
  color: #e8c8ff;
  font-size: .95rem;
  padding: 8px;
}
#swal-reason-sel:focus {
  border-color: rgba(200,80,255,0.8) !important;
  box-shadow: 0 0 0 4px rgba(183,33,255,0.25) !important;
}

/* SweetAlert2 select (fallback for older rendering) */
.swal2-popup .swal2-select {
  background: #1a0a2e !important;
  color: #e8c8ff !important;
  border: 2px solid rgba(200,80,255,0.5) !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
  padding: 10px 14px !important;
}
.swal2-popup .swal2-select option {
  background: #1a0a2e !important;
  color: #e8c8ff !important;
}

/* ??????????????????????????????????????????
   Report / Ban Modal � unified custom styles
   ?????????????????????????????????????????? */

/* Reason buttons � shared across report & ban modals */
.rep-reason-btn {
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  direction: rtl !important;
  font-family: inherit !important;
  transition: background .18s, border-color .18s, transform .1s !important;
}
.rep-reason-btn:active { transform: scale(.97) !important; }
.rep-reason-btn.rep-selected {
  background:   rgba(183,33,255,0.30) !important;
  border-color: #c050ff !important;
  color:        #ffffff !important;
}

/* SweetAlert2 report popup container */
.swal-report-popup {
  background:    #0d0818 !important;
  border:        1px solid rgba(183,33,255,0.35) !important;
  border-radius: 20px !important;
  box-shadow:    0 8px 40px rgba(140,0,255,0.25) !important;
}
.swal-report-popup .swal2-title   { color: #e8c8ff !important; }
.swal-report-popup .swal2-content { color: #c4a8e8 !important; }
.swal-report-popup .swal2-confirm {
  background: linear-gradient(135deg,#b721ff,#ff4d6a) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
}
.swal-report-popup .swal2-cancel {
  background: rgba(255,255,255,0.08) !important;
  color: #aaa !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}