/* app.css — bổ sung cho Tailwind: bottom sheet, toast, scrollbar */

* { -webkit-tap-highlight-color: transparent; }

html, body { overscroll-behavior-y: contain; }

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

/* Scrollbar gọn */
#view::-webkit-scrollbar, #menu nav::-webkit-scrollbar { width: 6px; }
#view::-webkit-scrollbar-thumb, #menu nav::-webkit-scrollbar-thumb {
    background: rgba(120,120,120,.35); border-radius: 999px;
}

/* Bottom sheet */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sheet-backdrop.show { opacity: 1; }
.sheet-panel {
    position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
    width: 100%; max-width: 430px; z-index: 71;
    background: #fff; border-radius: 20px 20px 0 0;
    max-height: 88vh; overflow-y: auto;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 -8px 30px rgba(0,0,0,.15);
}
html.dark .sheet-panel { background: #171717; }
.sheet-panel.show { transform: translate(-50%, 0); }
.sheet-handle {
    width: 40px; height: 4px; border-radius: 999px; background: #d1d5db;
    margin: 10px auto 4px;
}
html.dark .sheet-handle { background: #404040; }

/* Toast */
.toast {
    pointer-events: auto;
    background: #111827; color: #fff; padding: 10px 16px;
    border-radius: 12px; font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    animation: toastIn .25s ease, toastOut .3s ease 2.2s forwards;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* Chip filter active */
.chip-active { background:#4f46e5 !important; color:#fff !important; border-color:#4f46e5 !important; }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; transition: opacity .2s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-backdrop.show { opacity: 1; }
.modal-box {
    background: #fff; border-radius: 18px; width: 100%; max-width: 380px;
    max-height: 90vh; overflow-y: auto; transform: scale(.95); transition: transform .2s;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
html.dark .modal-box { background: #171717; }
.modal-backdrop.show .modal-box { transform: scale(1); }

/* Input base dark */
html.dark input, html.dark select, html.dark textarea {
    color-scheme: dark;
}

/* FAB overlay (đóng expand khi chạm ra ngoài) */
#fabOverlay { position: fixed; inset: 0; z-index: 25; background: transparent; }

/* Nút menu thao tác (long-press) */
.am-btn { width: 100%; text-align: left; padding: 11px 12px; border-radius: 12px; font-size: 14px; }
.am-btn:hover { background: rgba(99,102,241,.08); }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg,#eee 25%,#f4f4f5 37%,#eee 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; border-radius: 8px; }
html.dark .skeleton { background: linear-gradient(90deg,#1f1f1f 25%,#2a2a2a 37%,#1f1f1f 63%); background-size: 400% 100%; }
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* Empty state */
.empty-state { text-align: center; padding: 56px 24px; color: #9ca3af; }
.empty-state .emoji { font-size: 40px; margin-bottom: 8px; }