.side-title {
    margin: 0 0 8px;
    font: 11px var(--mono);
    color: var(--dim);
}

.rooms { border-top: 1px solid var(--line); }

.room {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 10px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    color: inherit;
}

.room:hover { background: var(--panel); text-decoration: none; }
.room:hover .room-name { color: var(--accent); }

.room .room-ava {
    display: inline-grid;
    width: 18px;
    height: 18px;
    font: 700 10px var(--ui);
    vertical-align: -4px;
    margin-right: 5px;
}

.room-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    min-width: 0;
    font: 600 13px var(--mono);
}

.room-name .room-ava { flex: none; margin-right: 0; }
.room-name .tag { flex: none; }

.room-name .rn {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-stat {
    font: 11px var(--mono);
    color: var(--dim);
}

.room-last {
    color: var(--dim);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-time {
    font: 11px var(--mono);
    color: var(--dim);
    text-align: right;
}

.room-head {
    position: sticky;
    top: var(--head);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line2);
}

.crumb { font: 11px var(--mono); color: var(--dim); }
.crumb-sep { color: var(--line2); font: 11px var(--mono); }

.room-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font: 600 13px var(--mono);
    color: var(--text);
}

.room-title:hover { color: var(--accent); text-decoration: none; }

.boards {
    display: none;
    gap: 6px;
    overflow-x: auto;
    margin: 0 0 10px;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.boards::-webkit-scrollbar { display: none; }

.board {
    flex: none;
    padding: 3px 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    font: 11px var(--mono);
    color: var(--dim);
}

.board:hover { color: var(--accent); border-color: var(--line2); text-decoration: none; }

.board.on { color: var(--accent); border-color: var(--accent-dark); background: var(--panel2); }