/* ─────────────────────────────────────────────────────────────
   Ứng Dụng Từ Bi — app.css (Giai đoạn 1)
   Bổ sung nhỏ bên cạnh Tailwind CDN: scrollbar, transitions.
   ───────────────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Scrollbar tối giản */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 113, 108, 0.4);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 113, 108, 0.7);
}

/* HTMX: con trỏ khi đang swap */
.htmx-request {
    cursor: progress;
}

/* HTMX: làm mờ phần đang load */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: block;
}

/* Đổ bóng card nhẹ hơn mặc định Tailwind */
.shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
}
.shadow-lg {
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
}

/* Placeholder pulse cho các giai đoạn sau */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}