/* MORVO Kinetic Trust - Unified Design System Styles */
/* ─── ICON DEFAULTS ──────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7c4d8; border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: #c7c4d8 transparent; }

/* ─── GLASS EFFECTS ──────────────────────────────────────── */
.glass, .glass-panel { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ─── UNIFIED LIVE/STATUS INDICATORS ─────────────────────── */
/* Single canonical pulse for all live-status dots */
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(57,255,20,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(57,255,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(57,255,20,0); }
}
.live-dot, .glow-pulse, .pulse-green, .pulsing-indicator, .pulse-indicator {
  box-shadow: 0 0 0 0 rgba(57,255,20,0.4);
  animation: pulse-green 2s infinite;
}
@keyframes pulse-cyan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.1); }
}
.animate-pulse-cyan { animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ─── GRADIENT UTILITIES ─────────────────────────────────── */
.btn-gradient, .primary-gradient-btn {
  background: linear-gradient(135deg, #3525cd 0%, #712ae2 100%);
}
.kinetic-bg {
  background: radial-gradient(circle at 0% 0%, #3525cd 0%, transparent 40%),
              radial-gradient(circle at 100% 100%, #712ae2 0%, transparent 40%);
}
.accent-bar { height: 3px; background: linear-gradient(90deg, #3525cd, #712ae2); }

/* ─── TOAST SYSTEM ───────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 500;
  transform: translateY(20px); opacity: 0; transition: all 0.3s ease;
  backdrop-filter: blur(12px); border: 1px solid #E2E8F0;
  background: rgba(255,255,255,0.95); box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-left: 3px solid #39FF14; }
.toast-error { border-left: 3px solid #ba1a1a; }

/* ─── SIDEBAR + MESSAGE ACTIVE ───────────────────────────── */
.sidebar-active { background: #8a4cfc; color: white; border-radius: 12px; }
.msg-active { border-left: 4px solid #3525cd; background: #f2f4f6; }

/* ─── ENTRANCE ANIMATIONS ────────────────────────────────── */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.slide-up { animation: slideUp 0.4s ease; }


/* ─── SELECTION ──────────────────────────────────────────── */
::selection { background: #e2dfff; color: #0f0069; }

/* ─── ACTIVE NAV ICON ────────────────────────────────────── */
.active-nav-item .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── LINE CLAMPS ────────────────────────────────────────── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── GLOBAL SMOOTH INTERACTION POLISH ───────────────────── */
/* All buttons get smooth press feedback */
button { transition: all 0.15s ease; }
button:active { transform: scale(0.98); }

/* All links get smooth color transition */
a { transition: color 0.15s ease; }

/* Focus ring consistency */
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(53,37,205,0.2);
}

/* ─── INBOX MESSAGE ROW POLISH ───────────────────────────── */
.msg-row { transition: all 0.15s ease; }
.msg-row:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  button, a, .msg-row { transition: none !important; }
  button:active { transform: none !important; }
  .live-dot, .glow-pulse, .pulse-green, .pulsing-indicator, .pulse-indicator,
  .animate-pulse-cyan, .fade-in, .slide-up { animation: none !important; }
}