/* ============================================================
 * 01-base-theme.css
 * Font chữ, reset html/body, biến CSS theme sáng/tối (--canvas, --ink, --hairline...), scrollbar mỏng, focus-visible, animation dùng chung (typing-dot, fade-in). LOAD ĐẦU TIÊN — mọi file khác đều dùng biến theme khai báo ở đây.
 * ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

#messageFeed .rounded-bubble,
#messageFeed .msg-reply-quote,
#messageFeed .msg-reply-preview,
#messageFeed .msg-bubble-pressable {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.verified-name,
#activeChat header .verified-name,
#activeChat header h1,
#activeChat header h2,
#chatList .font-semibold,
#chatList .font-medium,
#chatHeaderName,
#infoName {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/*index.html*/
html, body { height: 100%; }
body { -webkit-font-smoothing: antialiased; }

:root, [data-theme="dark"] {
    --canvas: #000000;
    --surface: #0A0A0A;
    --elevated: #161616;
    --elevated2: #1F1F1F;
    --hairline: #242424;
    --ink: #FFFFFF;
    --muted: #A3A3A3;
    --faint: #666666;
    --online: #31D07C;
    --scrollbar-thumb: #242424;
    --avatar-text: #FFFFFF;
    --transparent-border: rgba(255, 255, 255, 0.12);
}
[data-theme="light"] {
    --canvas: #FFFFFF;
    --surface: #F4F4F5;
    --elevated: #E4E4E7;
    --elevated2: #D4D4D8;
    --hairline: #E4E4E7;
    --ink: #09090B;
    --muted: #52525B;
    --faint: #71717A;
    --online: #16A34A;
    --scrollbar-thumb: #D4D4D8;
    --avatar-text: #FFFFFF;
    --transparent-border: rgba(0, 0, 0, 0.12);
}

body { background-color: var(--canvas); color: var(--ink); transition: background-color .15s ease, color .15s ease; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; }
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

textarea { field-sizing: content; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
#messageInput:focus,
#messageInput:focus-visible,
#composerShell:focus-within {
    outline: none !important;
}

.typing-dot { animation: typing-dot 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.fade-in { animation: fade-in .18s ease-out; }
@keyframes fade-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Mobile: mở chat = fade mờ (không lướt ngang)
 * Class JS: sidebar-away, nav-hidden-mobile, app-shell-chat-open
 * ============================================================ */
@media (max-width: 767.98px) {
    #sidebarWrap {
        transition: opacity 0.22s ease, visibility 0.22s ease;
        will-change: opacity;
        z-index: 40;
    }

    /* Bỏ lướt — ẩn list bằng fade */
    #sidebarWrap.sidebar-away,
    #sidebarWrap.-translate-x-full {
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #appShell.app-shell-chat-open #sidebarWrap {
        top: 0 !important;
        bottom: 0 !important;
    }

    #mainPanel {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    /* Chat hiện mờ mờ lên */
    #appShell.app-shell-chat-open #mainPanel {
        animation: chat-fade-in 0.28s ease-out;
    }

    @keyframes chat-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    #appShell.app-shell-chat-open {
        padding-bottom: 0 !important;
    }

    #bottomNav.nav-hidden-mobile,
    #bottomNav.hidden {
        display: none !important;
    }

    #activeChat {
        height: 100%;
        min-height: 100%;
    }

    #messageFeed {
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 768px) {
    #sidebarWrap.sidebar-away,
    #sidebarWrap.-translate-x-full {
        transform: none !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
#chatList .text-\[15px\],
#chatHeaderName,
#infoName {
    font-weight: 600 !important;
}