/* ══════════════════════════════════════════════════════════════
   TiME 2026 — CINEMATIC UPGRADE v9.0
   Full visual overhaul: Intro animation + Landing + Chat UI
   ══════════════════════════════════════════════════════════════ */

/* ─── DARK MODE LOCK ─── */
html:not(.force-light) body:not(.light-mode) {
  background: #000 !important;
}

/* ─── SCROLLBAR ─── */
* { scrollbar-width: thin; scrollbar-color: rgba(183,33,255,.3) transparent; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(183,33,255,.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(183,33,255,.6); }

/* ══════════════════════════════════════════
   🎬 CINEMATIC INTRO — 5-SECOND FILM
   ══════════════════════════════════════════ */

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

/* Pure black intro — no background effects */
#intro-screen::before,
#intro-screen::after { display: none !important; content: none !important; }

/* Glow halo hidden */
#intro-glow-halo { display: none !important; }

/* Scanlines */
#intro-scanline { display: none !important; }

/* ── THE MAIN INTRO WORD ── */
#intro-word {
  font-family: var(--font-brand);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 900;
  letter-spacing: clamp(16px, 6vw, 40px);
  color: #ffffff;
  position: relative;
  z-index: 10;
  opacity: 0;
  user-select: none;
  will-change: opacity, text-shadow, color;
  animation: introLamp 4.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes introLamp {
  0% {
    opacity: 0;
    color: #111;
    text-shadow: none;
  }
  30% {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(220, 200, 255, 0.8), 0 0 40px rgba(183, 33, 255, 0.5), 0 0 80px rgba(183, 33, 255, 0.3);
  }
  55% {
    opacity: 0.1;
    color: #222;
    text-shadow: none;
  }
  65% {
    opacity: 0.9;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(220, 200, 255, 0.8), 0 0 40px rgba(183, 33, 255, 0.5);
  }
  70% {
    opacity: 0.2;
    color: #333;
    text-shadow: none;
  }
  85%, 100% {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(220, 200, 255, 0.9), 0 0 60px rgba(183, 33, 255, 0.6), 0 0 100px rgba(183, 33, 255, 0.4);
  }
}

/* Floating particles inside intro */
#intro-particles { display: none !important; }

/* ══════════════════════════════════════════
   🌌 LANDING PAGE — Dark Cinematic
   ══════════════════════════════════════════ */

#pg-land {
  background: transparent !important;
}
body.light-mode #pg-land {
  background: transparent !important;
}

/* Enhanced brand word */
#brand-word.on {
  animation: ignitionSequence 5s ease-in-out forwards, brandGlow 4s ease-in-out infinite 5s !important;
}
@keyframes ignitionSequence {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); filter: blur(10px); color: #000; }
  20%  { opacity: 0.5; filter: blur(4px); color: #333; }
  45%  { opacity: 1; filter: blur(0); transform: scale(1.04) translateY(-3px);
         color: var(--neon); text-shadow: 0 0 60px var(--neon), 0 0 120px rgba(183,33,255,0.5); }
  55%  { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
  70%  { color: var(--neon); text-shadow: 0 0 40px var(--neon), 0 0 80px rgba(183,33,255,0.4); }
  85%  { color: #fff; }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0);
         color: #fff; text-shadow: 0 0 40px rgba(183,33,255,0.6), 0 0 80px rgba(183,33,255,0.2); }
}
@keyframes brandGlow {
  0%,100% { text-shadow: 0 0 60px rgba(183,33,255,0.8), 0 0 120px rgba(183,33,255,0.4); }
  50%      { text-shadow: 0 0 30px rgba(183,33,255,0.4), 0 0 70px rgba(183,33,255,0.2); }
}

/* Dynamic frame glow on hover */
.brand-frame-wrapper:hover .dynamic-frame {
  box-shadow: 0 0 60px rgba(183,33,255,0.6), 0 0 120px rgba(183,33,255,0.2), inset 0 0 40px rgba(183,33,255,0.1) !important;
  border-color: rgba(183,33,255,0.9) !important;
}

/* 🚢 Ship Wake — موجات السفينة حول الماوس */
.sea-ripple {
  position: fixed;
  /* Small oval/ellipse for ship wake feel */
  width: 28px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  border: 1px solid rgba(130, 60, 220, 0.35);
  box-shadow:
    0 0 6px rgba(130, 60, 220, 0.2),
    inset 0 0 4px rgba(183, 33, 255, 0.1);
  pointer-events: none;
  z-index: 5;
  transform-origin: center;
  animation: shipWake 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.sea-splash {
  position: fixed;
  width: 2px; height: 2px;
  background: rgba(130, 60, 220, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: wakeDroplet 0.7s ease-out forwards;
}
body.light-mode .sea-ripple,
body.light-mode .sea-splash { display: none; }

@keyframes shipWake {
  0%   {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.3) rotate(var(--wake-angle, 0deg));
  }
  30%  {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1) rotate(var(--wake-angle, 0deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2) rotate(var(--wake-angle, 0deg));
  }
}
@keyframes wakeDroplet {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); }
}

/* 💧 Water Drop Click Effect */
.water-drop {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(183,33,255,0.8);
  animation: dropPlunge 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.water-drop-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: dropRingExpand 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes dropPlunge {
  0% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
@keyframes dropRingExpand {
  0% {
    width: 8px; height: 8px;
    border: 2px solid rgba(220, 200, 255, 0.9);
    box-shadow: 0 0 15px rgba(183,33,255,0.6), inset 0 0 15px rgba(183,33,255,0.6);
    opacity: 1;
  }
  100% {
    width: 90px; height: 90px;
    border: 1px solid rgba(220, 200, 255, 0);
    box-shadow: 0 0 0px rgba(183,33,255,0), inset 0 0 0px rgba(183,33,255,0);
    opacity: 0;
  }
}

/* Social cards — dark cinematic */
.social-card {
  position: relative;
  overflow: hidden;
  background: rgba(10,5,20,0.85) !important;
  border: 1px solid rgba(183,33,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(255,255,255,0.7) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1) !important;
}
.social-card > * { position: relative; z-index: 2; }
.bg-floating-icon {
  position: absolute !important;
  width: 24px !important; height: 24px !important;
  opacity: 0;
  pointer-events: none;
  z-index: 0 !important;
  transition: opacity 0.5s ease;
}
.social-card:hover .bg-floating-icon {
  opacity: 0.15;
}

.social-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  color: #fff !important;
  border-color: rgba(183,33,255,0.5) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(183,33,255,0.4), 0 0 40px rgba(183,33,255,0.15) !important;
}
body.light-mode .social-card {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(183,33,255,0.2) !important;
  color: #333 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
body.light-mode .social-card .bg-floating-icon {
  opacity: 0.08;
}
body.light-mode .social-card:hover .bg-floating-icon {
  opacity: 0.15;
}

/* Create account button */
.btn-create-account {
  background: rgba(183,33,255,0.06) !important;
  border: 1px solid rgba(183,33,255,0.6) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.15), inset 0 0 0 1px rgba(255,255,255,0.04) !important;
  transition: all 0.45s cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-create-account::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: submitShimmer 3s ease-in-out infinite !important;
  z-index: 1;
}
.btn-create-account:hover {
  box-shadow: 0 0 60px rgba(183,33,255,0.5), 0 0 120px rgba(183,33,255,0.2) !important;
  transform: scale(1.04) translateY(-3px) !important;
}

/* Login button */
.btn-login-fixed {
  background: rgba(8,4,18,0.85) !important;
  border: 1px solid rgba(183,33,255,0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.btn-login-fixed:hover {
  background: rgba(183,33,255,0.12) !important;
  border-color: rgba(183,33,255,0.7) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.3) !important;
  color: #fff !important;
}

/* Cosmic glow enhanced */
.cosmic-glow {
  background: radial-gradient(ellipse 80% 55% at 50% 0%,
    rgba(162,0,255,0.22) 0%,
    rgba(100,0,200,0.08) 50%,
    transparent 70%
  ) !important;
}
body.risen .cosmic-glow { opacity: 1; }

/* Dev signature */
#dev-sig, #dev-sig-left {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(183,33,255,0.25);
  position: fixed;
  z-index: 50;
  pointer-events: none;
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity 2s ease 2s;
}
body.risen #dev-sig, body.risen #dev-sig-left { opacity: 1; }
#dev-sig       { right: 20px; top: 50%; transform: translateY(-50%) rotate(180deg); }
#dev-sig-left  { left: 20px;  top: 50%; transform: translateY(-50%); }

/* ══════════════════════════════════════════
   💬 CHAT UI — Premium Finish
   ══════════════════════════════════════════ */

/* Message bubbles */

.msg.out 
.msg.in 
.msg:hover 
.msg.emoji-only 

/* Send button */
.btn-send {
  background: linear-gradient(135deg, #b721ff, #7400d3) !important;
  box-shadow: 0 0 12px rgba(183,33,255,0.4) !important;
}
.btn-send:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 28px rgba(183,33,255,0.7) !important;
}
.btn-send:active { transform: scale(0.9) !important; }

/* Input bar */
.input-bar {
  background: rgba(4,2,12,0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(183,33,255,0.12) !important;
}
.message-composer {
  background: rgba(14,8,30,0.75) !important;
  border: 1px solid rgba(183,33,255,0.14) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.2) !important;
}
.message-composer:focus-within {
  border-color: rgba(183,33,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.08) !important;
}

/* Conversation items */
.ci {
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 10px 12px !important;
  transition: background 0.18s, transform 0.18s !important;
}
.ci:hover { background: rgba(183,33,255,0.06) !important; }
[dir="rtl"] .ci:hover { transform: translateX(3px) !important; }
[dir="ltr"] .ci:hover { transform: translateX(-3px) !important; }
.ci.active {
  background: linear-gradient(90deg, rgba(183,33,255,0.2), rgba(100,0,200,0.1)) !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
}

/* Chat header */
.chat-header {
  background: rgba(6,3,16,0.94) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(183,33,255,0.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Sidebar */
#sidebar {
  background: rgba(5,3,14,0.96) !important;
  border-inline-end: 1px solid rgba(183,33,255,0.1) !important;
}

/* Toast */
.toast {
  backdrop-filter: blur(14px) !important;
  background: rgba(10,6,24,0.94) !important;
  border: 1px solid rgba(183,33,255,0.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  font-weight: 600 !important;
}
.toast.ok { border-color: rgba(77,255,145,.3) !important; background: rgba(0,18,8,0.94) !important; }
.toast.er { border-color: rgba(255,77,106,.35) !important; background: rgba(18,0,4,0.94) !important; }

/* Modal */
.modal-overlay { background: rgba(0,0,0,0.96) !important; }
.glass-vault {
  box-shadow: 0 40px 120px rgba(0,0,0,0.85), 0 0 100px rgba(183,33,255,0.1), inset 0 0 0 1px rgba(255,255,255,0.04) !important;
}

/* Context menu */
.ctx-menu {
  backdrop-filter: blur(20px) !important;
  background: rgba(8,4,20,0.97) !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9) !important;
}
.ctx-item:hover { background: rgba(183,33,255,0.1) !important; }
.ctx-item { transition: background 0.15s, padding-inline-end 0.15s !important; }
.ctx-item:hover { padding-inline-end: 22px !important; }

/* Typing indicator */
.typing-dots span {
  background: var(--neon) !important;
  box-shadow: 0 0 6px rgba(183,33,255,0.5) !important;
}

/* Avatar online */
.av.online::after {
  box-shadow: 0 0 8px rgba(77,255,145,0.8) !important;
  animation: avatarOnline 2s ease-in-out infinite !important;
}
@keyframes avatarOnline {
  0%,100% { box-shadow: 0 0 6px rgba(77,255,145,0.6); }
  50%      { box-shadow: 0 0 14px rgba(77,255,145,1); }
}

/* Tab active */
.tab-btn.active {
  color: var(--neon-bright) !important;
  border-color: var(--neon) !important;
  text-shadow: 0 0 10px rgba(183,33,255,0.5) !important;
}

/* Image messages */
.msg-img {
  max-width: 100% !important;
  max-height: 280px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: transform 0.25s var(--ez), box-shadow 0.25s !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}
.msg-img:hover { transform: scale(1.02) !important; }
@media (min-width: 641px) {
  .msg-img { max-width: 300px !important; max-height: 350px !important; }
}

/* Voice message */
.voice-msg {
  background: rgba(183,33,255,0.08) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(183,33,255,0.15) !important;
}

/* Reply bar */
.reply-bar.show {
  background: rgba(183,33,255,0.06) !important;
  border-top: 1px solid rgba(183,33,255,0.2) !important;
  animation: replySlideIn 0.2s var(--ez) !important;
}
@keyframes replySlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Send failure */
.msg[style*="opacity: 0.4"] .bubble,
.msg[style*="opacity:0.4"] 

/* Accessibility */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--neon) !important;
  outline-offset: 3px !important;
}
::selection { background: rgba(183,33,255,0.3); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.15s !important;
  }
}

/* ─── LIGHT MODE overrides ─── */
body.light-mode .input-bar { background: rgba(255,255,255,0.97) !important; }
body.light-mode .chat-header { background: rgba(255,255,255,0.98) !important; border-bottom: 1px solid #ede0ff !important; }
body.light-mode .ctx-menu { background: rgba(255,255,255,0.98) !important; }
body.light-mode .ci.active { background: linear-gradient(90deg, rgba(183,33,255,0.1), rgba(183,33,255,0.05)) !important; }
body.light-mode .msg.in 
body.light-mode #pg-land { background: var(--void) !important; }

/* ══════════════════════════════════════════════════════
   TiME 2026 — ULTRA PREMIUM ENHANCEMENTS v10.0
   ══════════════════════════════════════════════════════ */

/* ── AMBIENT BACKGROUND ORBS ── */
.bg-orb {
  display: none !important;
}
.bg-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(183,33,255,0.12) 0%, transparent 70%);
  top: -200px; left: -150px;
  animation: orbDrift1 20s ease-in-out infinite alternate;
}
.bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(100,0,200,0.1) 0%, transparent 70%);
  bottom: -150px; right: -100px;
  animation: orbDrift2 25s ease-in-out infinite alternate;
}
@keyframes orbDrift1 { from{transform:translate(0,0) scale(1);} to{transform:translate(60px,40px) scale(1.15);} }
@keyframes orbDrift2 { from{transform:translate(0,0) scale(1);} to{transform:translate(-50px,-30px) scale(1.1);} }

/* ── GRAIN CANVAS ── */
#grain-canvas {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.025; mix-blend-mode: overlay;
}

/* ── DYNAMIC LIGHT ── */
#dynamic-light {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle 300px at var(--mx,50%) var(--my,30%), rgba(183,33,255,0.06) 0%, transparent 70%);
  transition: background 0.1s;
}

/* ── GOOGLE BUTTON — Premium Dark ── */
.btn-google {
  background: rgba(15,10,30,0.9) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.9) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-google:hover {
  background: rgba(30,20,50,0.95) !important;
  border-color: rgba(66,133,244,0.6) !important;
  box-shadow: 0 0 20px rgba(66,133,244,0.2), 0 8px 25px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px) !important;
}
.btn-phone {
  background: rgba(15,10,30,0.9) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.9) !important;
}
.btn-phone:hover {
  background: rgba(30,20,50,0.95) !important;
  border-color: rgba(77,171,247,0.5) !important;
  box-shadow: 0 0 20px rgba(77,171,247,0.15), 0 8px 25px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px) !important;
}

/* ── GLASS VAULT — Enhanced ── */
.glass-vault {
  background: rgba(6,3,18,0.92) !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 80px rgba(183,33,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.vault-brand {
  background: linear-gradient(135deg, #ff80ff, #b721ff, #7400d3) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 20px rgba(183,33,255,0.5)) !important;
}

/* ── FIELD INPUT — Premium Focus ── */
.field-input {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.field-input:focus {
  background: rgba(183,33,255,0.05) !important;
  border-color: rgba(183,33,255,0.6) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.12), 0 0 25px rgba(183,33,255,0.1) !important;
}

/* ── SUBMIT BUTTON — Shimmer ── */
.btn-submit {
  background: linear-gradient(135deg, #b721ff, #7400d3) !important;
  box-shadow: 0 4px 20px rgba(183,33,255,0.4) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  overflow: hidden !important;
  position: relative !important;
}
.btn-submit::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: submitShimmer 3s ease-in-out infinite;
}
@keyframes submitShimmer { 0%,70%,100%{left:-100%} 40%{left:150%} }
.btn-submit:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 10px 35px rgba(183,33,255,0.6) !important;
}

/* ── BRAND DEV BADGE — Glow ── */
.brand-dev-badge {
  border: 1px solid rgba(183,33,255,0.3) !important;
  background: rgba(183,33,255,0.06) !important;
  box-shadow: 0 0 25px rgba(183,33,255,0.1), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  animation: badgePulse 4s ease-in-out infinite !important;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 20px rgba(183,33,255,0.1); }
  50%      { box-shadow: 0 0 35px rgba(183,33,255,0.2); }
}

/* ── MESSAGE BUBBLES — Premium ── */
.msg.out 
.msg.in 

/* ── SIDEBAR — Premium ── */
.sidebar-header { border-bottom: 1px solid rgba(183,33,255,0.1) !important; }
.tab-btn.active {
  background: linear-gradient(180deg, transparent, rgba(183,33,255,0.05)) !important;
}

/* ── CHAT LIST ITEMS ── */
.ci {
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 12px !important;
  margin: 1px 8px !important;
}
.ci:hover { background: rgba(183,33,255,0.07) !important; transform: translateX(-2px) !important; }
.ci.active { background: rgba(183,33,255,0.15) !important; border: 1px solid rgba(183,33,255,0.18) !important; }

/* ── TOASTS — Polish ── */
.toast {
  border-radius: 14px !important;
  backdrop-filter: blur(20px) !important;
  animation: toastSlide 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
@keyframes toastSlide { from{opacity:0;transform:translateY(20px) scale(0.9);} to{opacity:1;transform:translateY(0) scale(1);} }

/* ── WELCOME SCREEN ── */
.empty-brand {
  background: linear-gradient(135deg, #b721ff, rgba(255,255,255,0.6)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 15px rgba(183,33,255,0.4)) !important;
}

/* ── SEND BUTTON ── */
.btn-send {
  background: linear-gradient(135deg, #b721ff, #7400d3) !important;
  box-shadow: 0 0 15px rgba(183,33,255,0.4) !important;
}
.btn-send:hover {
  box-shadow: 0 0 30px rgba(183,33,255,0.7) !important;
  transform: scale(1.12) rotate(10deg) !important;
}

/* ── CONTEXT MENU ── */
.ctx-menu {
  border: 1px solid rgba(183,33,255,0.25) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.04) !important;
}
.ctx-item { transition: all 0.18s !important; }
.ctx-item:hover { background: rgba(183,33,255,0.1) !important; padding-inline-end: 24px !important; }

/* ── SCROLLBAR GLOBAL ── */
* { scrollbar-width: thin; scrollbar-color: rgba(183,33,255,0.25) transparent; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(183,33,255,0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(183,33,255,0.6); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .bg-orb { animation: none !important; }
  .btn-submit::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════
   TiME 2026 — ULTRA POLISH v11.0
   Stars, Icons, Buttons, 3D, Performance
   ══════════════════════════════════════════════════ */

/* ── STARS — Bigger & Brighter ── */
.star {
  border-radius: 50% !important;
  background: #fff !important;
  will-change: opacity !important;
}
/* Large stars get a purple glow */
.star[style*="width:4"], .star[style*="width:5"], .star[style*="width:6"] {
  background: radial-gradient(circle, #fff 40%, rgba(183,33,255,0.6) 100%) !important;
}

/* ── SIDEBAR NEW CHAT ICON — Compose bubble style ── */
button[onclick="openModal('newchat')"] {
  position: relative;
}
button[onclick="openModal('newchat')"] svg {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
button[onclick="openModal('newchat')']:hover svg {
  transform: scale(1.2) rotate(-8deg);
  filter: drop-shadow(0 0 6px rgba(183,33,255,0.8));
  fill: rgba(183,33,255,1);
}

/* ── SIDEBAR SEARCH — Better look ── */
.sidebar-search {
  background: rgba(255,255,255,0.02) !important;
  margin: 6px 8px !important;
  border: 1px solid rgba(183,33,255,0.1) !important;
  border-radius: 12px !important;
  transition: border-color 0.3s, background 0.3s !important;
}
.sidebar-search:focus-within {
  border-color: rgba(183,33,255,0.4) !important;
  background: rgba(183,33,255,0.04) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.08) !important;
}
.sidebar-search svg {
  opacity: 0.6;
  transition: opacity 0.3s;
}
.sidebar-search:focus-within svg {
  opacity: 1;
  fill: rgba(183,33,255,0.8);
}

/* ── TAB BAR — Pill style active ── */
.tab-btn {
  border-radius: 8px !important;
  margin: 4px 2px !important;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
.tab-btn.active {
  background: rgba(183,33,255,0.15) !important;
  box-shadow: 0 0 15px rgba(183,33,255,0.2) !important;
}

/* ── ICON BUTTONS — Hover glow ── */
.icon-btn {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 10px !important;
}
.icon-btn:hover {
  background: rgba(183,33,255,0.12) !important;
  color: var(--neon-bright) !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 0 12px rgba(183,33,255,0.25) !important;
}
.icon-btn--danger:hover {
  background: rgba(255,60,80,.2) !important;
  color: #ff6b84 !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 0 12px rgba(255,60,80,0.3) !important;
}

/* ── CONVERSATION LIST — Micro-animation ── */
.ci {
  animation: ciAppear 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes ciAppear {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── MESSAGE BUBBLES — Better entrance ── */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ── SEARCH RESULT ITEM — Animate in ── */
.search-result-item {
  animation: ciAppear 0.25s cubic-bezier(0.16,1,0.3,1) both;
  cursor: pointer !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s !important;
}
.search-result-item:hover {
  background: rgba(183,33,255,0.08) !important;
  border-color: rgba(183,33,255,0.2) !important;
  transform: translateX(-3px) !important;
}

/* ── MODAL CARD — Better animation ── */
.modal-card {
  background: rgba(6,3,18,0.98) !important;
  border: 1px solid rgba(183,33,255,0.25) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,0.95), 0 0 80px rgba(183,33,255,0.12) !important;
}

/* ── AVATAR — Gradient ring on hover ── */
.av:hover {
  box-shadow: 0 0 0 2px rgba(183,33,255,0.6), 0 0 15px rgba(183,33,255,0.3) !important;
  transition: box-shadow 0.3s !important;
}

/* ── SEND BUTTON — Pulse on hover ── */
.btn-send {
  background: linear-gradient(135deg, #b721ff, #7400d3) !important;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.btn-send:hover {
  transform: scale(1.18) rotate(15deg) !important;
  box-shadow: 0 0 25px rgba(183,33,255,0.8), 0 0 50px rgba(183,33,255,0.3) !important;
}

/* ── INPUT AREA — Glass effect ── */
.msg-textarea:focus {
  outline: none !important;
}
.message-composer {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── PEER STATUS — Pulse ── */
.peer-status:not(.off) {
  animation: statusPulse 2.5s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── TOAST — Better entrance ── */
.toast {
  animation: toastPop 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes toastPop {
  0% { opacity:0; transform:translateY(20px) scale(0.85); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* ── CHAT HEADER — Subtle top glow ── */
.chat-header::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,33,255,0.5), transparent);
  pointer-events: none;
}

/* ── PERFORMANCE: Reduce animation on weak devices ── */
@media (max-width: 640px) {
  .sea-ripple, .sea-splash,
  .cursor-trail, .water-drop, .water-drop-ring,
  #grain-canvas {
    display: none !important;
  }
  
  .ci { animation: none !important; }
  .social-card { transition: background 0.2s, border-color 0.2s !important; }
  .btn-submit::after { animation: none !important; }
  .btn-create-account::after { animation: none !important; }
}

/* ── UNREAD BADGE PULSE ── */
.ci-badge {
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ── SMOOTH PAGE TRANSITIONS ── */
#pg-app {
  transition: opacity 0.4s ease !important;
}

/* ── NEW CHAT MODAL SEARCH RESULT ── */
#nc-res .search-result-item:nth-child(1) { animation-delay: 0.05s; }
#nc-res .search-result-item:nth-child(2) { animation-delay: 0.10s; }
#nc-res .search-result-item:nth-child(3) { animation-delay: 0.15s; }
#nc-res .search-result-item:nth-child(4) { animation-delay: 0.20s; }
#nc-res .search-result-item:nth-child(5) { animation-delay: 0.25s; }

/* ── FIELD INPUT — Shake on error fix ── */
.field-input.error {
  border-color: #ff4d6a !important;
  box-shadow: 0 0 0 3px rgba(255,77,106,0.15) !important;
  animation: shake 0.4s ease !important;
}

/* ── WELCOME SCREEN — Animated badge ── */
.empty-badge {
  animation: badgePulse 3s ease-in-out infinite !important;
  border: 1px solid rgba(183,33,255,0.3) !important;
}

/* ── SIDEBAR PROFILE HOVER ── */
.sidebar-profile {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 12px !important;
}
.sidebar-profile:hover {
  background: rgba(183,33,255,0.08) !important;
  transform: translateX(-2px) !important;
}

/* ── CHAT BACK BUTTON ── */
.btn-back {
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.btn-back:hover {
  background: rgba(183,33,255,0.1) !important;
  transform: scale(1.1) translateX(-2px) !important;
  color: var(--neon-bright) !important;
}

/* ══════════════════════════════════════════════════
   TiME 2026 — FINAL POLISH v12.0
   Admin Panel + SweetAlert2 + Light Mode + Chat UX
   ══════════════════════════════════════════════════ */

/* ── SweetAlert2 — Dark theme integration ── */
.swal2-popup {
  font-family: var(--font-ui, 'Cairo', sans-serif) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(183,33,255,0.25) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,0.9), 0 0 60px rgba(183,33,255,0.1) !important;
  direction: rtl !important;
}
.swal2-title { font-family: var(--font-brand, 'Cairo', sans-serif) !important; }
.swal2-confirm {
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-ui) !important;
  box-shadow: 0 4px 15px rgba(183,33,255,0.3) !important;
}
.swal2-cancel {
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font-ui) !important;
}
.swal2-select, .swal2-input, .swal2-textarea {
  border-radius: 12px !important;
  direction: rtl !important;
  font-family: var(--font-ui) !important;
}
/* Light mode SweetAlert2 */
body.light-mode .swal2-popup {
  background: rgba(255,255,255,0.99) !important;
  color: #111 !important;
  border-color: rgba(183,33,255,0.2) !important;
}
body.light-mode .swal2-title { color: #0a0a0a !important; }
body.light-mode .swal2-content, body.light-mode .swal2-html-container { color: #333 !important; }
body.light-mode .swal2-select, body.light-mode .swal2-input {
  background: #f5f5ff !important;
  border-color: rgba(183,33,255,0.25) !important;
  color: #111 !important;
}
body.light-mode .swal2-cancel {
  background: #eee !important;
  color: #333 !important;
}

/* ── Admin Panel Button ── */
#admin-panel-btn {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}
#admin-panel-btn:hover {
  background: rgba(255,50,80,0.2) !important;
  border-color: rgba(255,50,80,0.5) !important;
  transform: translateY(-1px) scale(1.08) !important;
  box-shadow: 0 0 15px rgba(255,50,80,0.3) !important;
}

/* ── btn-red ── */
.btn-red {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255,50,80,0.1);
  border: 1px solid rgba(255,50,80,0.3);
  color: #ff4d6a;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-red:hover {
  background: rgba(255,50,80,0.2) !important;
  box-shadow: 0 0 15px rgba(255,50,80,0.3) !important;
}

/* ── Light mode: Incoming bubble text always dark ── */
body.light-mode .msg.in 
body.light-mode .msg.in .bubble 
body.light-mode .msg.out .bubble 
body.light-mode .msg.out 
body.light-mode .msg.in  

/* ── Light mode: sidebar items text ── */
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 .ci.active .ci-name { color: var(--neon) !important; }

/* ── Light mode: full sidebar ── */
body.light-mode #sidebar {
  background: rgba(255,255,255,0.98) !important;
  border-inline-end: 1px solid rgba(183,33,255,0.12) !important;
}
body.light-mode .sidebar-header {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid rgba(183,33,255,0.1) !important;
}
body.light-mode .chat-list { background: transparent !important; }
body.light-mode .ci:hover  { background: rgba(183,33,255,0.05) !important; }
body.light-mode .ci.active { background: rgba(183,33,255,0.08) !important; border-color: rgba(183,33,255,0.15) !important; }

/* ── Light mode: input bar ── */
body.light-mode .message-composer {
  background: #f5f0ff !important;
  border-color: rgba(183,33,255,0.2) !important;
}
body.light-mode .msg-textarea { color: #111 !important; }
body.light-mode .msg-textarea::placeholder { color: #aaa !important; }

/* ── Light mode: modal card ── */
body.light-mode .modal-card { background: rgba(255,255,255,0.99) !important; color: #111 !important; }
body.light-mode .glass-vault { background: rgba(255,255,255,0.98) !important; border-color: rgba(183,33,255,0.15) !important; }
body.light-mode .field-input { background: #f5f0ff !important; color: #111 !important; border-color: rgba(183,33,255,0.2) !important; }
body.light-mode .field-input:focus { background: #ede5ff !important; border-color: rgba(183,33,255,0.5) !important; }

/* ── Light mode: context menu text ── */
body.light-mode .ctx-menu { background: rgba(255,255,255,0.99) !important; }
body.light-mode .ctx-item  { color: #111 !important; }

/* ── Light mode: toast ── */
body.light-mode .toast     { background: rgba(255,255,255,0.98) !important; color: #111 !important; }

/* ── Light mode: online status ── */
body.light-mode .peer-status { color: #22aa55 !important; }
body.light-mode .peer-status.off { color: #999 !important; }

/* ── Message grouping — consecutive same-side bubbles ── */

.msg.group-start { margin-top: 10px; }

/* ── Chat list item — better spacing ── */
.ci { padding: 9px 12px !important; }
.ci-av { flex-shrink: 0; }
.ci-info { min-width: 0; flex: 1; }
.ci-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-last { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t4); }

/* ── Autosize textarea smooth ── */
.msg-textarea {
  transition: height 0.1s ease !important;
  min-height: 24px;
  max-height: 120px;
  overflow-y: auto !important;
}

/* ── Bubble max-width responsive ── */
@media (max-width: 480px) {
  
}
@media (min-width: 1200px) {
  
}

/* ── Banned overlay ── */
.banned-overlay {
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(0,0,0,0.97);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
  font-family: var(--font-ui);
  color: #ff4d6a;
  text-align: center;
}
.banned-overlay h2 { font-size: 2rem; }
.banned-overlay p  { color: #aaa; font-size: .95rem; max-width: 300px; }

/* ── Light mode: Option text visibility ── */
body.light-mode select.field-input option {
  background: #ffffff !important;
  color: #111111 !important;
}

/* ── Tick marks fix (Overlap and alignment) ── */


/* ── Word wrapping fix ── */