/* ══════════════════════════════════════════════════════
   TiME 2026 — DESIGN OVERHAUL v12.0
   Cinematic Stars · 3D Everywhere · Zero Lag Mobile
   ══════════════════════════════════════════════════════ */



/* ── INTRO — TiME AS LIGHT SOURCE ── */
#intro-screen {
  position: fixed; inset: 0;
  z-index: 900000;
  background: #000 !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 1.4s cubic-bezier(0.8,0,0.2,1), visibility 1.4s;
}
#intro-screen.intro-exit { opacity: 0; visibility: hidden; pointer-events: none; }

#intro-word {
  font-family: var(--font-brand);
  font-size: clamp(5rem, 18vw, 13rem);
  font-weight: 900;
  letter-spacing: clamp(18px, 6vw, 48px);
  color: #fff;
  position: relative;
  z-index: 10;
  opacity: 0;
  user-select: none;
  animation: timeLamp 5s cubic-bezier(0.2,0.8,0.2,1) forwards;
}

/* TiME text as light source */
#intro-word::before {
  content: '';
  position: absolute;
  inset: -100px;
  background: radial-gradient(ellipse 60% 40% at 50% 50%,
    rgba(200,100,255,0.6) 0%,
    rgba(183,33,255,0.3) 35%,
    rgba(100,0,200,0.1) 60%,
    transparent 80%
  );
  z-index: -1;
  opacity: 0;
  animation: lampGlow 5s ease forwards;
}

@keyframes timeLamp {
  0%   { opacity:0; color:#000; text-shadow:none; }
  15%  { opacity:0.8; color:#3a0060; text-shadow:0 0 40px rgba(183,33,255,0.3); }
  25%  { opacity:0.1; color:#000; text-shadow:none; }
  35%  { opacity:1; color:#fff; text-shadow:0 0 30px rgba(220,200,255,0.9),0 0 60px rgba(183,33,255,0.7),0 0 120px rgba(183,33,255,0.4); }
  48%  { opacity:0.05; color:#000; text-shadow:none; }
  55%  { opacity:1; color:#fff; text-shadow:0 0 20px rgba(220,200,255,0.8),0 0 40px rgba(183,33,255,0.5); }
  62%  { opacity:0.2; color:#111; text-shadow:none; }
  75%,100% {
    opacity:1; color:#fff;
    text-shadow:
      0 0 40px rgba(220,200,255,1),
      0 0 80px rgba(183,33,255,0.8),
      0 0 160px rgba(183,33,255,0.5),
      0 0 300px rgba(100,0,200,0.3);
  }
}
@keyframes lampGlow {
  0%,30%  { opacity:0; }
  60%,100%{ opacity:1; }
}

/* ── LANDING PAGE ── */
#pg-land { z-index: 5 !important; }
.fog, .cosmic-glow { z-index: 2 !important; }
#dynamic-light { z-index: 2 !important; }
#dev-sig, #dev-sig-left { z-index: 3 !important; }
.btn-login-fixed, .btn-settings-fixed { z-index: 60000 !important; }
.brand-container { z-index: 10 !important; }
.ui-root { z-index: 10 !important; }

/* ── 3D BRAND FRAME ── */
.brand-frame-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.dynamic-frame {
  border-radius: 24px !important;
  animation: framePulse 3s ease-in-out infinite !important;
}
@keyframes framePulse {
  0%,100% { box-shadow: 0 0 20px rgba(183,33,255,0.4), inset 0 0 20px rgba(183,33,255,0.1); }
  50%     { box-shadow: 0 0 50px rgba(183,33,255,0.8), inset 0 0 40px rgba(183,33,255,0.2); }
}

/* ── SOCIAL CARDS — 3D Lift ── */
.social-card {
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: transform !important;
}
.social-card:hover {
  transform: translateY(-8px) scale(1.04) rotateX(3deg) !important;
}

/* ── CREATE ACCOUNT BUTTON ── */
.btn-create-account {
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
  letter-spacing: 2px !important;
}
.btn-create-account:hover {
  transform: translateY(-4px) scale(1.06) !important;
  letter-spacing: 3px !important;
  box-shadow: 0 0 50px rgba(183,33,255,0.6), 0 0 100px rgba(183,33,255,0.3), 0 20px 40px rgba(0,0,0,0.5) !important;
}
.btn-create-account:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ── BUTTONS — Ripple & Magnetic ── */
.icon-btn, .tab-btn, .btn-submit, .btn-send, .btn-create-account {
  position: relative;
  overflow: hidden;
}
.icon-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(183,33,255,0.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  border-radius: inherit;
}
.icon-btn:hover::after { opacity: 1; }

/* ── SEND BUTTON — 3D ── */
.btn-send {
  background: linear-gradient(135deg, #c040ff, #7400d3, #3d0080) !important;
  box-shadow: 0 4px 15px rgba(183,33,255,0.5), 0 1px 0 rgba(255,255,255,0.2) inset !important;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  transform-style: preserve-3d;
}
.btn-send:hover {
  transform: scale(1.2) rotate(15deg) translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(183,33,255,0.9), 0 0 60px rgba(183,33,255,0.4) !important;
}
.btn-send:active { transform: scale(0.88) !important; transition-duration: 0.1s !important; }

/* ── MODAL GLASS — Premium 3D ── */
.glass-vault, .modal-card {
  background: rgba(5,2,16,0.95) !important;
  border: 1px solid rgba(183,33,255,0.25) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  box-shadow:
    0 50px 150px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 100px rgba(183,33,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
@keyframes vaultIn {
  from { opacity:0; transform:translateY(30px) scale(0.92) rotateX(-6deg); filter:blur(4px); }
  to   { opacity:1; transform:translateY(0) scale(1) rotateX(0); filter:blur(0); }
}

/* ── FIELD INPUT — Focus Glow ── */
.field-input {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.field-input:focus {
  background: rgba(183,33,255,0.06) !important;
  border-color: rgba(183,33,255,0.7) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.15), 0 0 30px rgba(183,33,255,0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── SUBMIT BUTTON ── */
.btn-submit {
  background: linear-gradient(135deg, #c040ff 0%, #7400d3 50%, #3d0080 100%) !important;
  box-shadow: 0 4px 20px rgba(183,33,255,0.45), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1) !important;
  letter-spacing: 1.5px !important;
}
.btn-submit:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(183,33,255,0.7), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  letter-spacing: 2px !important;
}
.btn-submit:active { transform: translateY(0) scale(0.98) !important; }

/* ── MESSAGE BUBBLES — Premium 3D ── */
.msg.out 
.msg.in 
.msg.out:hover 
.msg.in:hover 

/* ── CHAT HEADER — Cinematic ── */
.chat-header {
  background: rgba(4,2,14,0.96) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(183,33,255,0.15) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(183,33,255,0.2) !important;
}

/* ── SIDEBAR — Depth ── */
#sidebar {
  background: rgba(4,2,12,0.97) !important;
  border-inline-end: 1px solid rgba(183,33,255,0.12) !important;
  box-shadow: 4px 0 30px rgba(0,0,0,0.4) !important;
}

/* ── CONVERSATION ITEMS ── */
.ci {
  border-radius: 12px !important;
  margin: 2px 6px !important;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  border: 1px solid transparent !important;
}
.ci:hover {
  background: rgba(183,33,255,0.07) !important;
  border-color: rgba(183,33,255,0.15) !important;
  transform: translateX(-3px) !important;
}
.ci.active {
  background: linear-gradient(135deg, rgba(183,33,255,0.18), rgba(100,0,200,0.1)) !important;
  border-color: rgba(183,33,255,0.25) !important;
  box-shadow: 0 0 20px rgba(183,33,255,0.1), inset 0 0 20px rgba(183,33,255,0.05) !important;
}

/* ── INPUT BAR ── */
.input-bar {
  background: rgba(3,1,10,0.95) !important;
  border-top: 1px solid rgba(183,33,255,0.12) !important;
  backdrop-filter: blur(20px) !important;
  padding: 10px 12px !important;
}
.message-composer {
  background: rgba(12,6,28,0.8) !important;
  border: 1px solid rgba(183,33,255,0.15) !important;
  border-radius: 28px !important;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.message-composer:focus-within {
  border-color: rgba(183,33,255,0.6) !important;
  background: rgba(18,10,40,0.9) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.1), 0 0 30px rgba(183,33,255,0.08) !important;
}

/* ── TOAST — Premium ── */
.toast {
  background: rgba(6,3,18,0.97) !important;
  border: 1px solid rgba(183,33,255,0.3) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(183,33,255,0.1) !important;
  border-radius: 16px !important;
  animation: toastEntry 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.toast.ok { border-color: rgba(77,255,145,0.4) !important; }
.toast.er { border-color: rgba(255,77,100,0.4) !important; }
@keyframes toastEntry {
  from { opacity:0; transform:translateY(24px) scale(0.85); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ── CONTEXT MENU ── */
.ctx-menu {
  background: rgba(5,2,16,0.98) !important;
  border: 1px solid rgba(183,33,255,0.25) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,255,255,0.03) !important;
  border-radius: 18px !important;
}
.ctx-item {
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
}
.ctx-item:hover {
  background: rgba(183,33,255,0.12) !important;
  padding-inline-end: 24px !important;
  color: #fff !important;
}

/* ── AVATAR — Glow ── */
.av {
  box-shadow: 0 0 0 0 rgba(183,33,255,0) !important;
  transition: box-shadow 0.3s !important;
}
.av:hover {
  box-shadow: 0 0 0 2.5px rgba(183,33,255,0.7), 0 0 20px rgba(183,33,255,0.4) !important;
}
.av.online::after {
  box-shadow: 0 0 8px rgba(77,255,145,0.9), 0 0 16px rgba(77,255,145,0.4) !important;
  animation: onlineGlow 2s ease-in-out infinite !important;
}
@keyframes onlineGlow {
  0%,100% { box-shadow: 0 0 6px rgba(77,255,145,0.6); }
  50%     { box-shadow: 0 0 16px rgba(77,255,145,1), 0 0 30px rgba(77,255,145,0.4); }
}

/* ── SEARCH BAR ── */
.sidebar-search {
  margin: 6px 8px 4px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(183,33,255,0.1) !important;
  border-radius: 14px !important;
  transition: all 0.3s !important;
}
.sidebar-search:focus-within {
  border-color: rgba(183,33,255,0.45) !important;
  background: rgba(183,33,255,0.04) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.08) !important;
}

/* ── TAB BAR ── */
.tab-bar {
  padding: 4px 6px !important;
  gap: 2px !important;
  border-bottom: 1px solid rgba(183,33,255,0.08) !important;
}
.tab-btn {
  border-radius: 8px !important;
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
  padding: 8px 4px !important;
}
.tab-btn.active {
  background: rgba(183,33,255,0.18) !important;
  box-shadow: 0 0 12px rgba(183,33,255,0.2) !important;
  color: #e080ff !important;
  border-color: rgba(183,33,255,0.5) !important;
}
.tab-btn:hover:not(.active) {
  background: rgba(183,33,255,0.08) !important;
}

/* ── MESSAGE ANIMATION ── */
@keyframes msgIn {
  from { opacity:0; transform:translateY(10px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}


/* ── WELCOME SCREEN ── */
.empty-brand {
  background: linear-gradient(135deg, #c040ff, #fff 50%, #b721ff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 20px rgba(183,33,255,0.6)) !important;
  animation: brandFloat 4s ease-in-out infinite !important;
}
@keyframes brandFloat {
  0%,100% { filter: drop-shadow(0 0 20px rgba(183,33,255,0.6)); transform: translateY(0); }
  50%     { filter: drop-shadow(0 0 40px rgba(183,33,255,0.9)); transform: translateY(-4px); }
}
.empty-badge {
  background: rgba(183,33,255,0.06) !important;
  border: 1px solid rgba(183,33,255,0.3) !important;
  animation: badgePulse 3s ease-in-out infinite !important;
}

/* ── ICON BUTTONS — Alive ── */
.icon-btn {
  border-radius: 10px !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.icon-btn:hover {
  background: rgba(183,33,255,0.15) !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 4px 15px rgba(183,33,255,0.3) !important;
  color: #d080ff !important;
}
.icon-btn:active { transform: scale(0.9) !important; }
.icon-btn--danger:hover {
  background: rgba(255,60,80,0.2) !important;
  box-shadow: 0 4px 15px rgba(255,60,80,0.3) !important;
  color: #ff6b84 !important;
}

/* ── 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.12) !important;
  transform: scale(1.1) translateX(-2px) !important;
  color: #d080ff !important;
  box-shadow: 0 0 15px rgba(183,33,255,0.3) !important;
}

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

/* ── SEARCH RESULTS ── */
.search-result-item {
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
  animation: slideIn 0.25s cubic-bezier(0.16,1,0.3,1) both;
}
.search-result-item:hover {
  background: rgba(183,33,255,0.1) !important;
  border-color: rgba(183,33,255,0.2) !important;
  transform: translateX(-4px) !important;
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(10px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── LOGIN BUTTON ── */
.btn-login-fixed {
  background: rgba(6,3,16,0.88) !important;
  border: 1px solid rgba(183,33,255,0.35) !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-login-fixed:hover {
  background: rgba(183,33,255,0.15) !important;
  border-color: rgba(183,33,255,0.8) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.35), 0 0 60px rgba(183,33,255,0.1) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ══ MOBILE PERFORMANCE — NO LAG ══ */
@media (max-width: 640px) {
  /* Disable heavy effects */
  #grain-canvas { display: none !important; }
  .sea-ripple, .sea-splash, .water-drop, .water-drop-ring { display: none !important; }
  #dynamic-light { display: none !important; }
  .fog-a, .fog-b { display: none !important; }
  /* Faster animations */
  
  .glass-vault { backdrop-filter: blur(12px) !important; }
  .social-card:hover { transform: translateY(-3px) !important; }
  /* Reduce CSS containment */
  .ci { animation: none !important; }
  .search-result-item { animation: none !important; }
  /* Better touch targets */
  .icon-btn { width: 40px !important; height: 40px !important; }
  .btn-send { width: 42px !important; height: 42px !important; }
}

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