:root {
  --bg-color: #f3f4f6;
  --container-bg: #ffffff;
  --card-bg: #f9fafb;
  --accent-color: #3b82f6;
  --accent-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.25);
  --text-main: #1f2937;
  --text-sub: #4b5563;
  --border-color: #e5e7eb;
  --shadow-plate: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.dark {
  --bg-color: #0f1115;
  --container-bg: #1d2128;
  --card-bg: #252a34;
  --accent-color: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-glow: rgba(59, 130, 246, 0.25);
  --text-main: #e2e8f0;
  --text-sub: #8b95a5;
  --border-color: #3b4150;
  --shadow-plate: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--container-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Transparent Checkerboard Pattern */
.bg-checkerboard {
  background-color: var(--container-bg);
  background-image: linear-gradient(45deg, var(--bg-color) 25%, transparent 25%),
                    linear-gradient(-45deg, var(--bg-color) 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, var(--bg-color) 75%),
                    linear-gradient(-45deg, transparent 75%, var(--bg-color) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Preview Dynamic Animations */
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chatFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes chatPopIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes chatSlideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.anim-slide-up { animation: chatSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-fade { animation: chatFadeIn 0.3s ease-out forwards; }
.anim-pop { animation: chatPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.anim-slide-left { animation: chatSlideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }