/* app.css — Estilos custom complementarios a Tailwind */

html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* scrollbar sutil */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.scroll-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* burbujas de chat estilo WhatsApp */
.bubble { max-width: 75%; padding: 8px 12px; border-radius: 10px; position: relative; word-wrap: break-word; }
.bubble.in  { background: #ffffff; border: 1px solid #e2e8f0; border-bottom-left-radius: 2px; }
.bubble.out { background: #dcf8c6; border-bottom-right-radius: 2px; }
.bubble.sys { background: #f1f5f9; color: #475569; font-size: 0.8rem; text-align: center; margin: 0 auto; border-radius: 8px; padding: 6px 10px; }
.bubble.note { background: #fef9c3; border: 1px solid #fde68a; }
.bubble .ts { font-size: 0.65rem; color: #94a3b8; margin-top: 2px; text-align: right; }
.bubble.out .ts { color: #558b2f; }

/* panel chat slide-in */
.chat-panel { transform: translateX(100%); transition: transform .25s ease-out; }
.chat-panel.open { transform: translateX(0); }

/* loading skeletons */
.skel { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: skel 1.2s infinite; border-radius: 6px; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* pulse dot unread */
.unread-dot { width: 8px; height: 8px; background: #4F46E5; border-radius: 50%; display: inline-block; }

/* modal */
.modal-backdrop { background: rgba(15, 23, 42, 0.5); }

/* avatar color default */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: white; font-weight: 600; }

/* Responsive: en móvil el placeholder central del inbox nunca se ve */
@media (max-width: 767px) {
    #emptyState { display: none !important; }
}