/* ===== پایه ===== */
body { font-family: Vazirmatn, Tahoma, system-ui, sans-serif; }

/* ===== حالت دارک ===== */
.dark body { background: #020617; }
.dark .card { background: #0f172a; border-color: #1e293b; }
.dark .stat { background: #0f172a; border-color: #1e293b; }
.dark .stat-value { color: #f1f5f9; }
.dark .stat-label { color: #94a3b8; }
.dark th { background: #0f172a; color: #94a3b8; }
.dark td { border-color: #1e293b; }
.dark tr:hover td { background: #0f172a; }
.dark .input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2); }
.dark .btn-ghost { background: #1e293b; color: #cbd5e1; }
.dark .btn-ghost:hover { background: #334155; }
.dark .chat-box { background: #0f172a; }
.dark .bubble-admin { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .bubble-admin .bubble-meta { color: #94a3b8; }
.dark .bubble-user .bubble-meta { color: #dbeafe; }
.dark .emoji-panel { background: #0f172a; border-color: #334155; }
.dark .emoji-btn:hover { background: #1e293b; }
.dark .skeleton { background: linear-gradient(90deg, #0f172a 25%, #1e293b 50%, #0f172a 75%); background-size: 200% 100%; }
.dark .bg-white { background-color: #0f172a !important; }
.dark .bg-slate-50 { background-color: #0f172a; }
.dark .bg-slate-100 { background-color: #020617; }
.dark .text-slate-400, .dark .text-slate-500, .dark .text-slate-600 { color: #64748b; }
.dark .shadow, .dark .shadow-2xl { box-shadow: 0 4px 16px rgb(0 0 0 / 0.4); }
.dark #error-body { background: #0f172a; }

/* ===== ناوبری ===== */
.nav-link {
  display: block;
  padding: 0.75rem 1.25rem;
  color: #cbd5e1;
  transition: background 0.15s, color 0.15s;
  border-right: 3px solid transparent;
}
.nav-link:hover { background: #1e293b; color: #fff; }
.nav-link.active { background: #1e293b; color: #fff; border-right-color: #3b82f6; }

/* ===== جدول ===== */
table { width: 100%; border-collapse: collapse; }
th { text-align: right; padding: 0.6rem 0.75rem; background: #f8fafc; font-weight: 600; font-size: 0.85rem; color: #475569; }
td { padding: 0.6rem 0.75rem; border-top: 1px solid #e2e8f0; font-size: 0.9rem; }
tr:hover td { background: #f8fafc; }

/* ===== دکمه و ورودی ===== */
.btn { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.85rem; cursor: pointer; transition: 0.15s; border: none; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: #e2e8f0; color: #334155; }
.btn-ghost:hover { background: #cbd5e1; }

.input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.9rem; background: #fff; color: #0f172a; }
.input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgb(59 130 246 / 0.15); }
textarea.input { min-height: 5rem; resize: vertical; }

/* ===== کارت و آمار ===== */
.card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem; }
.stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem 1.25rem; }
.stat-value { font-size: 1.75rem; font-weight: 700; color: #0f172a; }
.stat-label { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }

/* ===== چت ===== */
.chat-box { height: 26rem; overflow-y: auto; background: #f1f5f9; border-radius: 0.75rem; padding: 1rem; }
.bubble { max-width: 75%; padding: 0.6rem 0.9rem; border-radius: 1rem; margin-bottom: 0.6rem; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.bubble-user { background: #3b82f6; color: #fff; margin-right: auto; margin-left: 0; border-bottom-right-radius: 0.25rem; }
.bubble-admin { background: #fff; border: 1px solid #e2e8f0; margin-left: auto; border-bottom-left-radius: 0.25rem; }
.bubble-meta { font-size: 0.7rem; opacity: 0.7; margin-top: 0.25rem; }

/* ===== ایموجی ===== */
.emoji-panel {
  position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 0.5rem;
  max-height: 16rem; overflow-y: auto;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 0.75rem; padding: 0.5rem;
  display: flex; flex-wrap: wrap; gap: 0.15rem; align-content: flex-start; z-index: 10;
  box-shadow: 0 -4px 12px rgb(0 0 0 / 0.08);
}
.emoji-btn { width: 2rem; height: 2rem; border-radius: 0.25rem; font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.emoji-btn:hover { background: #e2e8f0; }

/* ===== ضبط صدا ===== */
.recording { color: #dc2626; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ===== اسکلتون بارگذاری ===== */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }