/* Sidebar collapsed state */
#sidebar[data-collapsed="true"] {
    width: 3.5rem !important;
}

#sidebar[data-collapsed="true"] #sidebarLogo,
#sidebar[data-collapsed="true"] .sidebar-text,
#sidebar[data-collapsed="true"] .flex-1.overflow-y-auto,
#sidebar[data-collapsed="true"] .p-4.flex-shrink-0 {
    display: none;
}

/* Header stays at the same height */
#sidebar .relative.flex.w-full.items-center {
    min-height: 48px;
}

#sidebar[data-collapsed="true"] .relative.flex.w-full.items-center {
    justify-content: center;
}

/* Navigation containers maintain their position */
#sidebar .flex.flex-col.gap-px.pt-2,
#sidebar .px-2.flex-shrink-0 {
    position: relative;
}

/* Show/hide buttons based on sidebar state */
.sidebar-btn-collapsed {
    display: none;
}

#sidebar[data-collapsed="true"] .sidebar-btn-full {
    display: none;
}

#sidebar[data-collapsed="true"] .sidebar-btn-collapsed {
    display: inline-flex;
}

#sidebarWrapper {
    transition: width 300ms ease;
}

#sidebar[data-collapsed="true"] ~ #sidebarWrapper {
    width: 3.5rem !important;
}

/* Subtle scrollbar styling for history */
#sidebar .flex-1.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: rgb(229, 231, 235) transparent;
}

#sidebar .flex-1.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

#sidebar .flex-1.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar .flex-1.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: rgb(229, 231, 235);
    border-radius: 3px;
}

#sidebar .flex-1.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: rgb(209, 213, 219);
}