.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background-color: #1c1c1c;
    color: #ebdbb2;
    font-family: "Iosevka", "Fira Code", monospace;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    z-index: 100;
    border-right: 1px solid #3c3836;
}
.sidebar-header {
    padding: 8px 12px;
    background-color: #3c3836;
    color: #fbf1c7;
    border-bottom: 1px solid #504945;
    font-weight: bold;
}
.sidebar-item {
    cursor: pointer;
    padding: 6px 12px;
    white-space: nowrap;
    line-height: 1.6;
}
.sidebar-item:hover {
    background-color: #3c3836;
}
.sidebar-item.selected {
    background-color: #458588;
    color: #fbf1c7;
}
.sidebar-item::before {
    content: "  ";
    display: inline-block;
    width: 20px;
}
.sidebar-item.dir::before {
    content: "▸ ";
    color: #fabd2f;
}
.sidebar-item.dir.expanded::before {
    content: "▾ ";
}
.sidebar-status {
    margin-top: auto;
    padding: 6px 12px;
    font-size: 13px;
    background-color: #3c3836;
    color: #a89984;
    border-top: 1px solid #504945;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
}