/* extra utilities on top of Tailwind CDN */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Body fills */
body { background: #f1f5f9; color: #0f172a; }
.dark body { background: #0f172a; color: #e2e8f0; }

/* Generic surface helpers used in pages */
.dark .bg-white { background: #1e293b !important; }
.dark .bg-slate-50 { background: #0f172a !important; }
.dark .bg-slate-100 { background: #0b1220 !important; }
.dark .border, .dark .border-l, .dark .border-r, .dark .border-t, .dark .border-b { border-color: #334155 !important; }
.dark .text-slate-500 { color: #94a3b8 !important; }
.dark .text-slate-600 { color: #cbd5e1 !important; }
.dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900 { color: #e2e8f0 !important; }
.dark input, .dark textarea, .dark select {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #334155;
}
.dark .hover\:bg-slate-50:hover { background: #1e293b !important; }
.dark .bg-yellow-50 { background: #422006 !important; }
.dark .bg-emerald-50 { background: #022c22 !important; }
.dark .bg-red-50 { background: #450a0a !important; }
.dark .bg-amber-50 { background: #451a03 !important; }

/* Drag-and-drop overlay */
.drop-active::after {
  content: 'Drop to send';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,185,129,0.15);
  border: 3px dashed #10b981;
  border-radius: 8px;
  color: #047857;
  font-weight: 600;
  font-size: 1.5rem;
  pointer-events: none;
  z-index: 5;
}

/* Within-thread search highlight */
.search-hit { background: #fef08a; color: #713f12; }
.dark .search-hit { background: #ca8a04; color: #fef9c3; }
.search-current { outline: 2px solid #f59e0b; }

/* Emoji picker */
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.emoji-grid button { font-size: 1.25rem; padding: 4px; border-radius: 4px; }
.emoji-grid button:hover { background: #e2e8f0; }
.dark .emoji-grid button:hover { background: #334155; }

/* Toast for undo */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: white; padding: 12px 16px; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex; gap: 12px; align-items: center;
  z-index: 100;
}