@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
        body {
            height: 100%;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }

        main {
            -webkit-overflow-scrolling: touch;
        }

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

        .menu-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .menu-scroll::-webkit-scrollbar-thumb {
            background: #1d4ed8;
            border-radius: 10px;
        }

        .sidebar-text {
            white-space: nowrap !important;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .menu-item .flex.items-center.gap-3,
        .submenu-item {
            min-width: 0;
        }

        .submenu {
            display: none;
        }

        .submenu.show {
            display: block;
        }

        /* Sidebar Collapse Styles */
        #sidebar {
            transition: width 0.3s ease, transform 0.3s ease;
        }

        #sidebar.collapsed {
            width: 5.5rem !important; /* Tailwind w-22 ~ 88px */
        }

        #sidebar.collapsed .sidebar-text,
        #sidebar.collapsed .submenu-arrow {
            display: none;
        }

        #sidebar.collapsed .logo-container {
            padding-left: 0;
            padding-right: 0;
            justify-content: center;
            flex-direction: column;
            gap: 0.5rem;
        }

        #sidebar.collapsed .logo-container > div:first-child {
            justify-content: center;
            width: 100%;
        }

        #sidebar.collapsed #collapseSidebarBtn {
            margin: 0 auto;
        }

        #sidebar.collapsed .menu-item,
        #sidebar.collapsed .submenu-item {
            padding-left: 0;
            padding-right: 0;
            justify-content: center;
        }

        #sidebar.collapsed .menu-item > .flex.items-center.gap-3 {
            justify-content: center;
            width: 100%;
        }

        #sidebar.collapsed .submenu-item > div {
            margin: 0 auto;
        }

        /* Light Mode Trick */
        html.light-mode {
            -webkit-filter: invert(0.93) hue-rotate(180deg) sepia(0.2) contrast(0.95);
            filter: invert(0.93) hue-rotate(180deg) sepia(0.2) contrast(0.95);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        html.light-mode img,
        html.light-mode video,
        html.light-mode iframe,
        html.light-mode .ignore-light-mode {
            -webkit-filter: invert(1.1) hue-rotate(180deg);
            filter: invert(1.1) hue-rotate(180deg);
        }

        #sidebar.sidebar-hidden {
            display: none !important;
        }
/* Giữ vùng an toàn ở cạnh phải để launcher Chat AI không che bảng/dữ liệu. */
.ai-content-safe-area {
    padding-right: clamp(5rem, 8vw, 7rem);
    padding-bottom: 5.5rem;
}

.ai-chat-launcher {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@media (max-width: 640px) {
    .ai-content-safe-area {
        padding-right: 1rem;
        padding-bottom: 6rem;
    }

    .ai-chat-launcher {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .ai-chat-launcher > div {
        display: none;
    }

    .ai-chat-box {
        right: 0.75rem;
        bottom: 5.75rem;
        width: calc(100vw - 1.5rem);
    }
}