/* =========================================================
   ASTROLOOP MISSION CONTROL COMPACT LAYOUT
   Version: 20260907-mission-control-compact-layout-1

   Objectives:
   - larger conversation area;
   - compact/collapsible upload section;
   - opaque chat surface;
   - above the Open MCT pane-resizer line.
   ========================================================= */


/* ---------------------------------------------------------
   Highest interface layer

   The root remains a compact lower-left launcher. The chat
   itself is fixed independently above it.
   --------------------------------------------------------- */

html body #al-mc4-root {
    position:
        fixed !important;

    left:
        14px !important;

    right:
        auto !important;

    top:
        auto !important;

    bottom:
        78px !important;

    width:
        154px !important;

    height:
        70px !important;

    min-width:
        154px !important;

    min-height:
        70px !important;

    max-width:
        154px !important;

    max-height:
        70px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    isolation:
        isolate !important;

    contain:
        none !important;

    background:
        transparent !important;

    border:
        0 !important;

    z-index:
        2147483646 !important;

    pointer-events:
        none !important;
}


/* ---------------------------------------------------------
   Mission Control launcher
   --------------------------------------------------------- */

html body #al-mc4-toggle {
    position:
        absolute !important;

    left:
        0 !important;

    top:
        0 !important;

    width:
        154px !important;

    height:
        70px !important;

    min-width:
        154px !important;

    min-height:
        70px !important;

    max-width:
        154px !important;

    max-height:
        70px !important;

    pointer-events:
        auto !important;

    z-index:
        2 !important;
}


/* ---------------------------------------------------------
   Expanded Mission Control window

   600 px provides more space for messages and upload fields
   while remaining safely below the front-cover protection
   threshold.
   --------------------------------------------------------- */

html body #al-mc4-window {
    position:
        fixed !important;

    left:
        14px !important;

    right:
        auto !important;

    top:
        auto !important;

    bottom:
        156px !important;

    width:
        min(
            600px,
            calc(100vw - 32px)
        ) !important;

    height:
        min(
            760px,
            calc(100vh - 174px)
        ) !important;

    min-width:
        min(
            470px,
            calc(100vw - 32px)
        ) !important;

    min-height:
        min(
            470px,
            calc(100vh - 174px)
        ) !important;

    max-width:
        calc(100vw - 32px) !important;

    max-height:
        calc(100vh - 174px) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    isolation:
        isolate !important;

    contain:
        layout paint style !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    pointer-events:
        auto !important;

    transform:
        none !important;

    inset:
        auto auto 156px 14px !important;

    background:
        #202324 !important;

    background-color:
        #202324 !important;

    background-image:
        none !important;

    border:
        1px solid #686e71 !important;

    box-shadow:
        0 0 0 2px #303537,
        18px 22px 46px
        rgba(
            0,
            0,
            0,
            .74
        ) !important;

    z-index:
        2147483647 !important;
}


/*
 * The opaque inner surface prevents the Browse/main pane
 * divider from being visible through the window.
 */
html body #al-mc4-window::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:
        #202324;

    background-color:
        #202324;

    opacity:
        1;
}


html body #al-mc4-window[hidden] {
    display:
        none !important;

    visibility:
        hidden !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


html body #al-mc4-window:not([hidden]) {
    display:
        flex !important;

    flex-direction:
        column !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-head {
    flex:
        0 0 auto !important;

    min-height:
        48px !important;

    padding:
        8px 10px !important;

    background:
        #292d2f !important;

    background-color:
        #292d2f !important;

    border-bottom:
        1px solid #505659 !important;

    z-index:
        3 !important;
}


html body #al-mc4-window
.al-mc4-title {
    font-size:
        14px !important;
}


html body #al-mc4-window
.al-mc4-subtitle {
    margin-top:
        1px !important;

    font-size:
        9px !important;
}


/* ---------------------------------------------------------
   Conversation content

   This receives all unused window height.
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-log {
    flex:
        1 1 auto !important;

    min-height:
        220px !important;

    max-height:
        none !important;

    padding:
        10px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    background:
        #1b1e1f !important;

    background-color:
        #1b1e1f !important;

    border-bottom:
        1px solid #4b5052 !important;

    scrollbar-color:
        #666c6f
        #202324 !important;
}


html body #al-mc4-window
.al-mc4-msg {
    width:
        auto !important;

    max-width:
        94% !important;

    padding:
        9px 10px !important;

    margin-bottom:
        8px !important;

    font-size:
        11px !important;

    line-height:
        1.42 !important;

    border:
        1px solid #505659 !important;

    background:
        #25292a !important;

    color:
        #e9ebec !important;
}


html body #al-mc4-window
.al-mc4-user {
    margin-left:
        auto !important;

    margin-right:
        0 !important;

    background:
        #3a3f41 !important;
}


html body #al-mc4-window
.al-mc4-assistant {
    margin-left:
        0 !important;

    margin-right:
        auto !important;

    background:
        #25292a !important;
}


/* ---------------------------------------------------------
   File upload and generation section

   Default state is compact. Upload fields remain available
   through SHOW UPLOADS.
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-files {
    flex:
        0 0 auto !important;

    min-height:
        0 !important;

    max-height:
        142px !important;

    padding:
        6px 8px !important;

    overflow:
        hidden !important;

    background:
        #202324 !important;

    background-color:
        #202324 !important;

    border-bottom:
        1px solid #4b5052 !important;
}


html body #al-mc4-window
.al-mc4-file-head-row {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        8px !important;

    min-height:
        26px !important;

    margin:
        0 0 4px !important;
}


html body #al-mc4-window
.al-mc4-file-title {
    margin:
        0 !important;

    color:
        #f1f2f2 !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;

    text-transform:
        uppercase !important;
}


html body #al-mc4-window
#al-mc4-files-toggle {
    min-width:
        104px !important;

    min-height:
        24px !important;

    height:
        24px !important;

    padding:
        2px 8px !important;

    border:
        1px solid #62686b !important;

    border-radius:
        2px !important;

    background:
        #363b3d !important;

    color:
        #f1f2f2 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    cursor:
        pointer !important;
}


html body #al-mc4-window
#al-mc4-files-toggle:hover {
    background:
        #464b4d !important;
}


/*
 * Compact state:
 * hide large explanatory/upload fields, but retain generation
 * actions, status and generated download links.
 */
html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-file-note,

html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-file-grid {
    display:
        none !important;
}


html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-actions {
    margin:
        3px 0 0 !important;

    gap:
        5px !important;
}


html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-status {
    min-height:
        24px !important;

    max-height:
        24px !important;

    margin-top:
        5px !important;

    padding:
        5px 7px !important;

    overflow:
        hidden !important;

    color:
        #cfd3d5 !important;

    font-size:
        9px !important;

    line-height:
        1.25 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-links {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        4px !important;

    max-height:
        40px !important;

    margin-top:
        5px !important;

    overflow-y:
        auto !important;
}


html body #al-mc4-window
.al-mc4-files:not(
    .al-mc4-files-expanded
)
.al-mc4-link {
    min-width:
        0 !important;

    padding:
        5px 6px !important;

    overflow:
        hidden !important;

    font-size:
        8px !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


/* ---------------------------------------------------------
   Expanded upload state
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded {
    max-height:
        min(
            365px,
            46vh
        ) !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-note {
    display:
        block !important;

    margin:
        2px 0 6px !important;

    font-size:
        8px !important;

    line-height:
        1.3 !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-grid {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        6px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-row {
    display:
        flex !important;

    flex-direction:
        column !important;

    min-width:
        0 !important;

    padding:
        0 !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-label {
    flex:
        1 1 auto !important;

    min-width:
        0 !important;

    min-height:
        78px !important;

    padding:
        5px !important;

    overflow:
        hidden !important;

    font-size:
        8px !important;

    line-height:
        1.25 !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-label small {
    margin-top:
        1px !important;

    font-size:
        7px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-label input {
    width:
        100% !important;

    min-width:
        0 !important;

    margin-top:
        5px !important;

    font-size:
        8px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-file-row
>
.al-mc4-btn {
    width:
        100% !important;

    min-height:
        25px !important;

    height:
        25px !important;

    margin-top:
        4px !important;

    padding:
        3px 5px !important;

    font-size:
        8px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-actions {
    margin-top:
        6px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-status {
    min-height:
        25px !important;

    margin-top:
        5px !important;

    padding:
        5px 7px !important;

    font-size:
        8px !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-links {
    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        4px !important;

    max-height:
        66px !important;

    margin-top:
        5px !important;

    overflow-y:
        auto !important;
}


html body #al-mc4-window
.al-mc4-files.al-mc4-files-expanded
.al-mc4-link {
    padding:
        5px 6px !important;

    overflow:
        hidden !important;

    font-size:
        8px !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


/* ---------------------------------------------------------
   Generation controls
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-actions {
    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap:
        5px !important;
}


html body #al-mc4-window
.al-mc4-actions
.al-mc4-btn {
    min-height:
        26px !important;

    height:
        26px !important;

    padding:
        3px 5px !important;

    font-size:
        8px !important;
}


/* ---------------------------------------------------------
   Chat input section
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-input-area {
    flex:
        0 0 auto !important;

    padding:
        7px 8px !important;

    background:
        #202324 !important;

    border-top:
        1px solid #4b5052 !important;
}


html body #al-mc4-window
.al-mc4-input-row {
    display:
        grid !important;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        62px
        62px !important;

    gap:
        5px !important;
}


html body #al-mc4-window
#al-mc4-input {
    height:
        68px !important;

    min-height:
        68px !important;

    max-height:
        100px !important;

    padding:
        7px !important;

    font-size:
        10px !important;

    line-height:
        1.35 !important;

    background:
        #17191a !important;

    border:
        1px solid #555b5e !important;

    color:
        #f1f2f2 !important;
}


html body #al-mc4-window
#al-mc4-speak,

html body #al-mc4-window
#al-mc4-send {
    height:
        68px !important;

    min-height:
        68px !important;
}


html body #al-mc4-window
#al-mc4-clear {
    height:
        25px !important;

    min-height:
        25px !important;
}


/* ---------------------------------------------------------
   Grey-only buttons and inputs
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-btn,

html body #al-mc4-window
button {
    border-color:
        #62686b !important;

    background:
        #34383a !important;

    background-color:
        #34383a !important;

    background-image:
        none !important;

    color:
        #f1f2f2 !important;

    box-shadow:
        none !important;
}


html body #al-mc4-window
.al-mc4-btn:hover,

html body #al-mc4-window
button:hover {
    background:
        #454a4c !important;

    background-color:
        #454a4c !important;
}


/* ---------------------------------------------------------
   Narrow screens
   --------------------------------------------------------- */

@media (
    max-width: 700px
) {
    html body #al-mc4-window {
        left:
            8px !important;

        bottom:
            150px !important;

        width:
            calc(100vw - 16px) !important;

        min-width:
            0 !important;

        max-width:
            calc(100vw - 16px) !important;

        inset:
            auto auto 150px 8px !important;
    }


    html body #al-mc4-window
    .al-mc4-files.al-mc4-files-expanded
    .al-mc4-file-grid {
        grid-template-columns:
            1fr !important;
    }


    html body #al-mc4-window
    .al-mc4-files.al-mc4-files-expanded {
        max-height:
            52vh !important;
    }
}


/* ---------------------------------------------------------
   No pulse
   --------------------------------------------------------- */

html body #al-mc4-root,
html body #al-mc4-root * {
    animation:
        none !important;

    transition:
        none !important;
}