/* App Shell and Navigation Sidebar Styles */

/* ===== Sidebar Transitions ===== */
/* Smooth slide and fade animation */
.ant-layout-sider,
#nav-sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                flex 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fade effect for menu items and chat history when sidebar collapses/expands */
#nav-menu,
#chat-history-section {
    transition: opacity 0.25s ease !important;
}

/* Disable all other transitions/animations on children to prevent flip/reflow issues */
/* IMPORTANT: Exclude #chat-sider from this rule - we want animations in the chat sidebar! */
.ant-layout-sider:not(#chat-sider) *:not(#nav-menu):not(#nav-menu *):not(#chat-history-section):not(#chat-history-section *),
#nav-sidebar *:not(#nav-menu):not(#nav-menu *):not(#chat-history-section):not(#chat-history-section *) {
    transition: none !important;
    animation: none !important;
}

/* ===== Toggle Button Container (Logo + Close Button) ===== */
#toggle-button-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 8px !important;
    margin-top: 8px !important;
    height: 52px !important;
}

/* Center logo when sidebar is collapsed */
#nav-sidebar.ant-layout-sider-collapsed #toggle-button-container {
    justify-content: center !important;
}

/* ===== Logo Button ===== */
#logo-button {
    width: 52px !important;
    height: 52px !important;
    padding: 12px !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

#logo-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#logo-button .anticon {
    font-size: 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== Close Sidebar Button ===== */
#close-sidebar-button {
    width: 52px !important;
    height: 52px !important;
    padding: 12px !important;
    border: none !important;
    background-color: transparent !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

#close-sidebar-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#close-sidebar-button .anticon {
    font-size: 16px !important;
}

/* Close button visibility classes */
.close-button-hidden {
    display: none !important;
}

.close-button-visible {
    display: flex !important;
}

/* ===== Navigation Menu ===== */
#nav-menu {
    border-right: none !important;
    padding: 0 8px !important;
}

#nav-menu .ant-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

#nav-menu .ant-menu-item-selected {
    background-color: rgba(75, 156, 211, 0.15) !important;
    border-radius: 10px !important;
}

#nav-menu.ant-menu-dark,
#nav-menu.ant-menu {
    background-color: transparent !important;
}

#nav-menu .ant-menu-item {
    background-color: transparent !important;
    border-radius: 10px !important;
    height: 52px !important;
    line-height: 52px !important;
    margin-bottom: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

#nav-menu .anticon {
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
}

/* Center menu items when sidebar is collapsed */
#nav-sidebar.ant-layout-sider-collapsed #nav-menu .ant-menu-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove icon margin when collapsed to keep icons centered */
#nav-sidebar.ant-layout-sider-collapsed #nav-menu .anticon {
    margin-right: 0 !important;
}

/* Hide text labels when collapsed, show only icons */
#nav-sidebar.ant-layout-sider-collapsed #nav-menu .ant-menu-item .ant-menu-title-content {
    display: none !important;
}

/* Hide tooltip arrows for menu items */
.ant-tooltip-arrow {
    display: none !important;
}

/* Disable Ant Design's automatic tooltips ONLY for dropdown menu items when Sider is collapsed */
/* We KEEP nav menu tooltips (they're useful for users to see icon labels when collapsed) */
/* We HIDE dropdown menu tooltips (they're redundant since dropdown already shows full text) */
.ant-dropdown-menu-inline-collapsed-tooltip {
    display: none !important;
}

/* ===== Chat History ===== */
#chat-history-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#chat-history-header {
    letter-spacing: 0.5px;
}

#nav-sidebar.ant-layout-sider-collapsed #chat-history-header {
    display: none;
}

/* ===== User Profile Section ===== */
/* Force dropdown trigger to be full width (overrides Ant Design's inline-block default) */
.user-profile-wrapper .ant-dropdown-trigger {
    display: block !important;
    width: 100% !important;
}

/* Hover state for user profile */
.user-profile-section:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dropdown menu styles */
.user-profile-dropdown-menu {
    left: 8px !important;
}

.ant-dropdown-menu {
    background-color: #262626 !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

.ant-dropdown-menu-item {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

.ant-dropdown-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.ant-dropdown-menu-item .anticon {
    font-size: 16px !important;
    margin-right: 12px !important;
}

.ant-dropdown-menu-item-disabled {
    color: rgba(255, 255, 255, 0.65) !important;
    font-weight: 600 !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

.ant-dropdown-menu-item-divider {
    background-color: rgba(255, 255, 255, 0.12) !important;
    margin: 4px 0 !important;
}

/* ===== Main Content ===== */
.ant-layout-content {
    background-color: #1a1a1a;
}