.left-panel {

    border-right: 1px solid #dee2e6;
    overflow: hidden;
}

.middle-panel {
    display: flex;
    justify-content: center;
    background: #f8f9fa;
    overflow: auto;
}

.right-panel {
    border-left: 1px solid #dee2e6;
    overflow: auto;
}

.bot-box {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    min-height: 200px;
    background: #fff;
}

.speaker-block {
    border: 1px solid #dee2e6;
    height: 200px;
    background: #ffffff;
    white-space: pre-wrap;
    overflow-y: auto;
}

#attachStatus {
    min-width: 90px;
}
/* Background */
.app-bg{
    background: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(34,211,238,.14), transparent 55%),
    #070a12;
}

/* Header theme */
.app-hero{
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.app-kicker{ letter-spacing:.14em; color: rgba(233,238,252,.70); }
.app-sub{ color: rgba(233,238,252,.75); }
.app-track{ height: 6px; background: rgba(255,255,255,.12); }
.app-fill{ height: 6px; background: linear-gradient(90deg,#7c3aed,#22d3ee); }
.app-badge{ background: rgba(255,255,255,.10); color: #e9eefc; border: 1px solid rgba(255,255,255,.10); }

/* Buttons (match accent gradient + dark UI) */
.btn-primary{
    --bs-btn-bg: #7c3aed;
    --bs-btn-border-color: rgba(255,255,255,.12);
    --bs-btn-hover-bg: #6d28d9;
    --bs-btn-hover-border-color: rgba(255,255,255,.18);
    --bs-btn-active-bg: #5b21b6;
    --bs-btn-active-border-color: rgba(255,255,255,.22);
    --bs-btn-focus-shadow-rgb: 124,58,237;
}
.btn{
    border-radius: 999px;
    padding: .65rem 1.05rem;
}

/* Inputs to fit dark theme */
.form-control, .form-select{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: #e9eefc;
}
.form-control:focus, .form-select:focus{
    background: rgba(255,255,255,.06);
    border-color: rgba(124,58,237,.55);
    box-shadow: 0 0 0 .25rem rgba(124,58,237,.18);
    color: #e9eefc;
}

/* Scrollbar (Chromium/Edge/Safari) */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: #070a12; }
::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(124,58,237,.75), rgba(34,211,238,.65));
    border-radius: 999px;
    border: 3px solid #070a12;
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, rgba(124,58,237,.95), rgba(34,211,238,.85));
}

/* Scrollbar (Firefox) */
*{
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,.75) #070a12;
}


.app-video{
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.35);

    /* makes the edge read clearly on dark backgrounds */
    box-shadow:
            inset 0 0 0 1px rgba(0,0,0,.35),
            0 10px 30px rgba(0,0,0,.35);
}


.app-box{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1rem;
    background: rgba(0,0,0,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}


#final.app-speech{
    height: 220px;          /* pick your old value here */
    overflow-y: auto;
}

.app-3col{ min-height: calc(100vh - 2rem); }