/* ══════════════════════════════════════════════════════════════
   TiME 2026 — PREMIUM OVERHAUL v13.0
   ► Complete Light Mode Fix (No Disappearing Text)
   ► Enhanced 3D + Animations + Glassmorphism
   ► Mobile Performance — Zero Lag
   ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   🌞 LIGHT MODE — COMPLETE TEXT VISIBILITY FIX
   Every single element guaranteed visible
   ═══════════════════════════════════════════ */

/* --- Core text reset for ALL light mode --- */
body.light-mode {
  background: linear-gradient(135deg, #f8f5ff 0%, #f0ecff 30%, #fbfaff 100%) !important;
  color: #0a0a0a !important;
}

/* --- Settings Modal: ALL labels, values, headers visible --- */
body.light-mode .sett-lbl,
body.light-mode .sett-val,
body.light-mode .sett-head,
body.light-mode .sett-btn {
  color: #111111 !important;
}
body.light-mode .sett-head {
  color: var(--neon) !important;
  opacity: 1 !important;
  filter: none !important;
}
body.light-mode .sett-btn {
  background: rgba(183,33,255,0.08) !important;
  border: 1px solid rgba(183,33,255,0.25) !important;
  color: var(--neon) !important;
}
body.light-mode .sett-btn:hover {
  background: rgba(183,33,255,0.15) !important;
  transform: translateY(-1px) !important;
}
body.light-mode .sett-btn.danger {
  background: rgba(255,50,80,0.08) !important;
  border-color: rgba(255,50,80,0.3) !important;
  color: #e53e3e !important;
}

/* --- Modal & Vault — Full visibility --- */
body.light-mode .modal-card,
body.light-mode .glass-vault {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(183,33,255,0.15) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,0.12), 0 0 0 1px rgba(183,33,255,0.08) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
body.light-mode .modal-card h2,
body.light-mode .modal-card h3,
body.light-mode .modal-card p,
body.light-mode .modal-card span,
body.light-mode .modal-card label,
body.light-mode .modal-card div {
  color: #111 !important;
}
body.light-mode .modal-card h2 em,
body.light-mode .modal-card h2 span {
  color: #111 !important;
}
body.light-mode .vault-title,
body.light-mode .vault-subtitle,
body.light-mode .vault-brand {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}
body.light-mode .vault-credit {
  color: #888 !important;
}

/* --- Form Fields in Light Mode --- */
body.light-mode .field-input,
body.light-mode select.field-input,
body.light-mode input.field-input,
body.light-mode textarea.field-input {
  background: #f8f5ff !important;
  color: #111 !important;
  border: 1.5px solid rgba(183,33,255,0.2) !important;
  box-shadow: inset 0 2px 6px rgba(183,33,255,0.04) !important;
  transition: all 0.3s ease !important;
}
body.light-mode .field-input:focus {
  background: #fff !important;
  border-color: rgba(183,33,255,0.55) !important;
  box-shadow: 0 0 0 4px rgba(183,33,255,0.1), 0 0 20px rgba(183,33,255,0.06) !important;
}
body.light-mode .field-input option {
  background: #ffffff !important;
  color: #111111 !important;
}
body.light-mode .field-label {
  color: #333 !important;
}

/* --- Toggle Switches Light Mode --- */
body.light-mode .toggle-track {
  background: rgba(0,0,0,0.12) !important;
  border: 1.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}
body.light-mode .toggle input:checked + .toggle-track {
  background: linear-gradient(135deg, #b721ff, #8f00ff) !important;
  border-color: var(--neon) !important;
  box-shadow: 0 2px 10px rgba(183,33,255,0.3) !important;
}

/* --- Sidebar Light Mode --- */
body.light-mode #sidebar {
  background: rgba(255,255,255,0.98) !important;
  border-inline-end: 1px solid rgba(183,33,255,0.1) !important;
  box-shadow: 4px 0 20px rgba(183,33,255,0.04) !important;
}
body.light-mode .sidebar-header {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid rgba(183,33,255,0.08) !important;
}
body.light-mode .sidebar-user-name,
body.light-mode .sidebar-user-tag {
  color: #111 !important;
}
body.light-mode .sidebar-user-tag {
  color: var(--neon) !important;
}
body.light-mode .ci-name { color: #111 !important; }
body.light-mode .ci-last { color: #666 !important; }
body.light-mode .ci-time { color: #999 !important; }
body.light-mode .ci:hover {
  background: rgba(183,33,255,0.05) !important;
}
body.light-mode .ci.active {
  background: linear-gradient(135deg, rgba(183,33,255,0.1), rgba(183,33,255,0.04)) !important;
  border-color: rgba(183,33,255,0.15) !important;
}
body.light-mode .sidebar-search {
  background: rgba(183,33,255,0.04) !important;
  border-color: rgba(183,33,255,0.1) !important;
}
body.light-mode .sidebar-search-input { color: #111 !important; }
body.light-mode .sidebar-search-input::placeholder { color: #aaa !important; }

/* --- Tab Bar Light Mode --- */
body.light-mode .tab-btn { color: #666 !important; }
body.light-mode .tab-btn.active {
  color: var(--neon) !important;
  background: rgba(183,33,255,0.08) !important;
  text-shadow: none !important;
}

/* --- Chat Area Light Mode --- */
body.light-mode .chat-header {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid rgba(183,33,255,0.08) !important;
  box-shadow: 0 2px 12px rgba(183,33,255,0.04) !important;
}
body.light-mode .chat-peer-name { color: #111 !important; }
body.light-mode .peer-status { color: #22aa55 !important; }
body.light-mode .peer-status.off { color: #999 !important; }
body.light-mode .typing-text { color: var(--neon) !important; }

/* --- Bubbles Light Mode --- */
body.light-mode .msg.in 
body.light-mode .msg.in .bubble 
body.light-mode .msg.out 
body.light-mode .msg.out .bubble 
body.light-mode .msg.in 
body.light-mode .msg.out 
body.light-mode .reply-label,
body.light-mode .reply-name,
body.light-mode .reply-text { color: #333 !important; }

/* --- Input Bar Light Mode --- */
body.light-mode .input-bar {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid rgba(183,33,255,0.08) !important;
}
body.light-mode .message-composer {
  background: #f8f5ff !important;
  border-color: rgba(183,33,255,0.15) !important;
}
body.light-mode .message-composer:focus-within {
  background: #fff !important;
  border-color: rgba(183,33,255,0.4) !important;
  box-shadow: 0 0 0 3px rgba(183,33,255,0.08) !important;
}
body.light-mode .msg-textarea { color: #111 !important; }
body.light-mode .msg-textarea::placeholder { color: #aaa !important; }

/* --- Context Menu Light Mode --- */
body.light-mode .ctx-menu {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(183,33,255,0.12) !important;
  box-shadow: 0 15px 50px 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.07) !important;
  color: var(--neon) !important;
}

/* --- Toast Light Mode --- */
body.light-mode .toast {
  background: rgba(255,255,255,0.97) !important;
  color: #111 !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}
body.light-mode .toast.ok { border-color: rgba(34,197,94,0.4) !important; }
body.light-mode .toast.er { border-color: rgba(239,68,68,0.4) !important; }

/* --- Landing Page Light Mode --- */
body.light-mode #pg-land {
  background: linear-gradient(135deg, #f8f5ff 0%, #f0ecff 30%, #fbfaff 100%) !important;
}
body.light-mode #brand-word {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: 0 4px 20px rgba(183,33,255,0.15) !important;
  animation: logoBreatheLight 3.5s ease-in-out infinite !important;
}
@keyframes logoBreatheLight {
  0%, 100% {
    text-shadow: 0 0 15px rgba(183,33,255,0.2), 0 4px 20px rgba(183,33,255,0.1);
  }
  50% {
    text-shadow: 0 0 25px rgba(183,33,255,0.35), 0 4px 30px rgba(183,33,255,0.2);
  }
}
body.light-mode .dynamic-frame {
  border-color: rgba(183,33,255,0.2) !important;
  box-shadow: 0 0 20px rgba(183,33,255,0.08), inset 0 0 10px rgba(183,33,255,0.03) !important;
}
body.light-mode .brand-dev-badge {
  background: rgba(183,33,255,0.06) !important;
  border-color: rgba(183,33,255,0.15) !important;
  color: #333 !important;
}
body.light-mode .dev-label { color: var(--neon) !important; }
body.light-mode .dev-separator { color: #ccc !important; }
body.light-mode .btn-login-fixed {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
  box-shadow: 0 4px 15px rgba(183,33,255,0.08) !important;
}
body.light-mode .btn-login-fixed:hover {
  border-color: var(--neon) !important;
  box-shadow: 0 8px 25px rgba(183,33,255,0.18) !important;
  background: #fdf5ff !important;
}
body.light-mode .btn-settings-fixed {
  background: rgba(0,0,0,0.04) !important;
  color: #333 !important;
}
body.light-mode .social-card {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(183,33,255,0.12) !important;
  color: #333 !important;
  box-shadow: 0 4px 16px rgba(183,33,255,0.06) !important;
}
body.light-mode .social-card span { color: #333 !important; }
body.light-mode .social-card .social-icon { fill: #444 !important; }
body.light-mode .social-card:hover {
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(183,33,255,0.12) !important;
  transform: translateY(-5px) scale(1.03) !important;
}
body.light-mode .btn-create-account {
  background: linear-gradient(135deg, #b721ff, #8f00ff) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(183,33,255,0.3) !important;
}
body.light-mode .btn-create-account span,
body.light-mode .btn-create-account {
  color: #fff !important;
}

/* --- Auth Overlays Light Mode --- */
body.light-mode .ov {
  background: rgba(248,245,255,0.97) !important;
}
body.light-mode .btn-google,
body.light-mode .btn-phone {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid rgba(183,33,255,0.15) !important;
}
body.light-mode .btn-google:hover,
body.light-mode .btn-phone:hover {
  border-color: rgba(183,33,255,0.4) !important;
  background: #fdf5ff !important;
}
body.light-mode .auth-divider { color: #888 !important; }
body.light-mode .auth-divider::before,
body.light-mode .auth-divider::after { border-color: #ddd !important; }
body.light-mode .modal-link { color: #555 !important; }
body.light-mode .modal-link b { color: var(--neon) !important; }
body.light-mode .pin-text { color: #333 !important; }

/* --- Modal Signature Light Mode --- */
body.light-mode .modal-sig { color: #999 !important; }
body.light-mode .modal-sig strong { color: var(--neon) !important; }

/* --- Scrollbar Light Mode --- */
body.light-mode * { scrollbar-color: rgba(183,33,255,0.2) transparent; }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(183,33,255,0.2); }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: rgba(183,33,255,0.4); }

/* --- SweetAlert2 Light Mode & Z-Index Fix --- */
.swal2-container {
  z-index: 999999 !important;
}
body.light-mode .swal2-popup {
  background: #fff !important;
  color: #111 !important;
}
body.light-mode .swal2-title { color: #0a0a0a !important; }
body.light-mode .swal2-html-container { color: #333 !important; }

/* --- Empty/Welcome Screen Light Mode --- */
body.light-mode .empty-title,
body.light-mode .empty-sub { color: #333 !important; }
body.light-mode .empty-brand {
  -webkit-text-fill-color: var(--neon) !important;
  filter: none !important;
}

/* --- Stars & Effects hidden in Light Mode --- */
body.light-mode #stars-layer { opacity: 0 !important; }
body.light-mode .cosmic-glow { opacity: 0 !important; }
body.light-mode #dynamic-light { opacity: 0 !important; }
body.light-mode .sea-ripple,
body.light-mode .sea-splash,
body.light-mode .cursor-trail { display: none !important; }
body.light-mode #dev-sig,
body.light-mode #dev-sig-left { color: rgba(183,33,255,0.15) !important; }
body.light-mode #c-dot { 
  background: radial-gradient(circle, var(--neon) 0%, rgba(183,33,255,0.6) 100%) !important;
}

/* --- Banned Overlay Light Mode --- */
body.light-mode .banned-overlay {
  background: rgba(255,255,255,0.97) !important;
}
body.light-mode .banned-overlay p { color: #666 !important; }


/* ═══════════════════════════════════════════
   ✨ ENHANCED DARK MODE ANIMATIONS & 3D
   Premium feel for desktop
   ═══════════════════════════════════════════ */

/* --- Glowing border line on page separators --- */
.chat-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,33,255,0.5), transparent);
  pointer-events: none;
  opacity: 0.6;
}
.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,33,255,0.4), transparent);
  pointer-events: none;
}

/* --- Enhanced Modal Entry Animation --- */
.modal-card {
  animation: modalEntry 0.45s cubic-bezier(0.16,1,0.3,1) !important;
  transform-style: preserve-3d;
}
@keyframes modalEntry {
  0% { opacity: 0; transform: translateY(30px) scale(0.94) rotateX(-4deg); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); }
}

/* --- Settings Row Hover Effect --- */
.sett-row {
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
.sett-row:hover {
  background: rgba(183,33,255,0.04) !important;
}
body.light-mode .sett-row:hover {
  background: rgba(183,33,255,0.05) !important;
}

/* --- Font Buttons Premium Style --- */
.font-btn {
  padding: 8px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(183,33,255,0.2) !important;
  background: rgba(183,33,255,0.05) !important;
  color: var(--t2) !important;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  cursor: pointer !important;
}
.font-btn:hover {
  background: rgba(183,33,255,0.12) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(183,33,255,0.15) !important;
}
.font-btn.active {
  background: linear-gradient(135deg, var(--neon), #7400d3) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(183,33,255,0.3) !important;
}
body.light-mode .font-btn {
  background: #f5f0ff !important;
  color: #333 !important;
  border-color: rgba(183,33,255,0.15) !important;
}
body.light-mode .font-btn.active {
  background: linear-gradient(135deg, var(--neon), #7400d3) !important;
  color: #fff !important;
}

/* --- Pulse animation for active elements --- */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183,33,255,0); }
  50% { box-shadow: 0 0 0 4px rgba(183,33,255,0.1); }
}

/* --- Active conversation subtle pulse --- */
.ci.active {
  animation: subtlePulse 3s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════
   💬 CHAT BUBBLES — PERFECT TEXT & TICK LAYOUT
   ═══════════════════════════════════════════ */

/* Text inside bubble */




/* Footer: time + ticks — always one line */






.msg-tick

/* --- Improved message hover with depth --- */
.msg 
.msg:hover 

/* --- Avatar enhanced with gradient ring --- */
.av {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.av:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 2.5px rgba(183,33,255,0.6), 0 0 15px rgba(183,33,255,0.3) !important;
}

/* --- Profile Avatar in Modal — Bigger, better --- */
.pav-el {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1) !important;
}
.pav-el:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 0 30px rgba(183,33,255,0.2) !important;
}

/* --- UID Display — Subtle style --- */
.uid-display {
  background: rgba(183,33,255,0.05) !important;
  border: 1px solid rgba(183,33,255,0.12) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  transition: all 0.25s !important;
}
.uid-display:hover {
  background: rgba(183,33,255,0.08) !important;
}
body.light-mode .uid-display {
  background: rgba(183,33,255,0.04) !important;
  border-color: rgba(183,33,255,0.1) !important;
  color: #333 !important;
}


/* ═══════════════════════════════════════════
   📱 MOBILE — Beautiful BUT Lightweight
   Smooth animations, no stutter
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Kill heavy GPU effects only */
  .sea-ripple, .sea-splash, .cursor-trail,
  .water-drop, .water-drop-ring,
  #grain-canvas, #dynamic-light,
  #c-dot, #c-ring,
  .bg-orb { display: none !important; }

  /* Smooth lightweight animations — no stutter */
  
  .ci { animation: none !important; }
  .search-result-item { animation: none !important; }
  .social-card { transition: transform 0.15s ease, background 0.15s ease !important; }

  /* Buttons — smooth fade, no stutter */
  .btn-submit, .btn-create-account, .sett-btn, .btn-send {
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease !important;
  }
  .btn-submit::after, .btn-create-account::after { animation: none !important; }
  .btn-submit:active, .btn-create-account:active, .sett-btn:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
  }

  /* Reduce blur for performance */
  .glass-vault,
  .modal-card {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  .chat-header { backdrop-filter: blur(10px) !important; }
  .input-bar { backdrop-filter: blur(10px) !important; }

  /* Better touch targets */
  .icon-btn { min-width: 42px !important; min-height: 42px !important; }
  .btn-send { min-width: 44px !important; min-height: 44px !important; }
  .tab-btn { min-height: 40px !important; }

  /* Reduce box-shadows for GPU */
  .social-card { box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
  .social-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; transform: translateY(-2px) !important; }

  /* Modal: smooth animation */
  .modal-card { animation-duration: 0.2s !important; }

  /* Disable intro/landing heavy effects */
  #brand-word { text-shadow: none !important; }
  .dynamic-frame { animation: none !important; box-shadow: none !important; }
  .fog, #l-beam, #l-line { display: none !important; }
  #pg-land { animation: none !important; }
  .star { animation-duration: 12s !important; }

  /* Disable heavy hover effects on touch */
  .msg:hover 
  .ci.active { animation: none !important; }

  /* Bubble text — proper sizing on mobile */
  
  
}

/* Even smaller phones */
@media (max-width: 480px) {
  
  .social-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}