/* 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: #D2D2D7; border-radius: 10px; }
* { scrollbar-width: thin; scrollbar-color: #D2D2D7 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, #007AFF 0%, #0066D6 100%);
}
.kinetic-bg {
  background: radial-gradient(circle at 0% 0%, #007AFF 0%, transparent 40%),
              radial-gradient(circle at 100% 100%, #0066D6 0%, transparent 40%);
}
.accent-bar { height: 3px; background: linear-gradient(90deg, #007AFF, #0066D6); }

/* ─── 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 #E5E5EA;
  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 #34C759; }
.toast-error { border-left: 3px solid #FF3B30; }

/* ─── SIDEBAR + MESSAGE ACTIVE ───────────────────────────── */
.sidebar-active { background: #007AFF; color: white; border-radius: 12px; }
.msg-active { border-left: 4px solid #007AFF; background: #F5F5F7; }

/* ─── 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: #E0EDFF; color: #00397A; }

/* ─── 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; }
}


/* MORVO iOS reinforce */
body.ios-theme { -webkit-font-smoothing: antialiased; }

/* ─── PERFORMANCE OPTIMIZATIONS ───────────────────────────── */
.contain-layout { contain: layout style paint; }
.contain-strict { contain: strict; }

/* GPU-accelerated transforms only */
.msg-card { 
  will-change: auto; 
  transform: translateZ(0);
  backface-visibility: hidden;
}
.msg-card:hover { will-change: transform, box-shadow; }

/* Reduce paint on scroll */
[data-virtual-scroll] { 
  overflow-y: auto; 
  -webkit-overflow-scrolling: touch;
  contain: strict;
  will-change: scroll-position;
}

/* Sidebar mailbox items - lightweight rendering */
.sb-mb-item { contain: layout style; }

/* Smooth but performant transitions */
.msg-card, .sb-mb-item {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Skeleton animation - use transform instead of width */
.skel-line { 
  will-change: auto;
  animation: skelPulse 1.5s ease-in-out infinite;
}
@keyframes skelPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Reduce reflow on scroll */
#msgListArea { contain: content; }

/* Sidebar virtual scroll container */
#sidebarMailboxes { 
  overflow-y: auto; 
  max-height: calc(100vh - 280px);
  contain: content;
  -webkit-overflow-scrolling: touch;
}

/* Load more button */
.load-more-btn {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #007AFF);
  background: transparent;
  border: 1px dashed var(--color-border-subtle, #E5E5EA);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin: 8px 12px;
}
.load-more-btn:hover { background: rgba(53, 37, 205, 0.05); }

/* Page transition - use transform, not opacity for perf */
.page-enter { animation: pageIn 0.2s ease-out; }
@keyframes pageIn {
  from { transform: translateY(8px); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}