
/* ==========================================================
   SESSION CONTROLS EXACT 2-ROW FIX
   Desired layout:
   Row 1: UNDO | SOFT RESET
   Row 2: CLEAR | EXPORT | IMPORT
   ========================================================== */

.session-controls,
.session-controls-panel,
.session-controls-box,
.session-control-box,
.session-card,
#sessionControls {
    overflow: visible !important;
}

/* Force the button area to be wide enough for 3 small buttons on row 2 */
.session-controls .button-group,
.session-controls .controls-right,
.session-controls .session-buttons,
.session-controls-actions,
.session-actions,
#sessionControlButtons {
    display: grid !important;
    grid-template-columns: repeat(3, 68px) !important;
    grid-auto-rows: 26px !important;
    gap: 6px 6px !important;
    justify-content: end !important;
    align-content: center !important;
    width: 216px !important;
    max-width: 216px !important;
    min-width: 216px !important;
}

/* All session buttons compact */
.session-controls button,
.session-controls .control-btn,
.session-controls .action-btn,
.session-controls .pill,
.session-controls-actions button,
.session-actions button,
#sessionControlButtons button {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

/* SOFT RESET needs a touch more room, but still fits cleanly */
.session-controls button:nth-child(2),
.session-controls-actions button:nth-child(2),
.session-actions button:nth-child(2),
#sessionControlButtons button:nth-child(2) {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
}

/* Place buttons as requested where DOM order is:
   1 Undo, 2 Soft Reset, 3 Clear, 4 Export, 5 Import */
.session-controls .button-group button:nth-child(1),
.session-controls .controls-right button:nth-child(1),
.session-controls .session-buttons button:nth-child(1),
.session-controls-actions button:nth-child(1),
.session-actions button:nth-child(1),
#sessionControlButtons button:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.session-controls .button-group button:nth-child(2),
.session-controls .controls-right button:nth-child(2),
.session-controls .session-buttons button:nth-child(2),
.session-controls-actions button:nth-child(2),
.session-actions button:nth-child(2),
#sessionControlButtons button:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1;
    justify-self: end;
}

.session-controls .button-group button:nth-child(3),
.session-controls .controls-right button:nth-child(3),
.session-controls .session-buttons button:nth-child(3),
.session-controls-actions button:nth-child(3),
.session-actions button:nth-child(3),
#sessionControlButtons button:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.session-controls .button-group button:nth-child(4),
.session-controls .controls-right button:nth-child(4),
.session-controls .session-buttons button:nth-child(4),
.session-controls-actions button:nth-child(4),
.session-actions button:nth-child(4),
#sessionControlButtons button:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.session-controls .button-group button:nth-child(5),
.session-controls .controls-right button:nth-child(5),
.session-controls .session-buttons button:nth-child(5),
.session-controls-actions button:nth-child(5),
.session-actions button:nth-child(5),
#sessionControlButtons button:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

/* Remove previous conflicting max-width rules */
.session-controls .button-group,
.session-controls .controls-right,
.session-controls .session-buttons {
    flex-wrap: unset !important;
}

/* Keep text area from pushing the buttons */
.session-controls p,
.session-controls .desc,
.session-controls .description,
.session-controls .session-desc {
    max-width: 300px !important;
}

<style>

/* LEGACY AI GLOBAL SCROLLBAR */
::-webkit-scrollbar{
    width:10px;
    height:10px;
}
::-webkit-scrollbar-track{
    background:#120000;
    border-radius:10px;
}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ff2a2a,#b30000);
    border-radius:10px;
    border:1px solid rgba(255,80,80,.35);
    box-shadow:0 0 10px rgba(255,0,0,.45);
}
::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#ff4d4d,#d10000);
}

</style>
