/* =========================================================
   ASTROLOOP MISSION CONTROL INLINE ATTACHMENTS AND FILES
   Version: 20260907-inline-attachments-files-1

   - Upload sign beside typing area
   - Uploaded references displayed in the chat
   - Generated files displayed under the requesting message
   - Grey-only interface
   ========================================================= */


/* ---------------------------------------------------------
   Typing row: upload sign + textarea + speech + send
   --------------------------------------------------------- */

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

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

    gap:
        5px !important;

    align-items:
        stretch !important;
}


/* ---------------------------------------------------------
   Upload sign
   --------------------------------------------------------- */

html body #al-mc4-window
#al-mc5-attach {
    width:
        38px !important;

    min-width:
        38px !important;

    max-width:
        38px !important;

    height:
        68px !important;

    min-height:
        68px !important;

    max-height:
        68px !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid #62686b !important;

    border-radius:
        3px !important;

    background:
        #34383a !important;

    background-color:
        #34383a !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

    font-size:
        24px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


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

    background-color:
        #454a4c !important;

    border-color:
        #777e81 !important;
}


html body #al-mc4-window
#al-mc5-attach:focus-visible {
    outline:
        1px solid #8b9194 !important;

    outline-offset:
        1px !important;
}


html body #al-mc5-attach-input {
    display:
        none !important;
}


/* ---------------------------------------------------------
   Drag/drop state for the typing area
   --------------------------------------------------------- */

html body #al-mc4-window
#al-mc4-input.al-mc5-drag-active {
    border:
        1px solid #969c9f !important;

    background:
        #242829 !important;

    background-color:
        #242829 !important;

    box-shadow:
        inset 0 0 0 1px #6d7376 !important;
}


/* ---------------------------------------------------------
   Attachment strip below typing row
   --------------------------------------------------------- */

html body #al-mc4-window
#al-mc5-attachment-strip {
    display:
        flex !important;

    flex-wrap:
        wrap !important;

    gap:
        5px !important;

    width:
        100% !important;

    max-height:
        76px !important;

    margin:
        6px 0 0 !important;

    padding:
        5px !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    border:
        1px solid #424749 !important;

    background:
        #181b1c !important;

    background-color:
        #181b1c !important;

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


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


html body #al-mc4-window
.al-mc5-attachment-chip {
    min-width:
        0 !important;

    max-width:
        100% !important;

    display:
        grid !important;

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

    gap:
        5px !important;

    align-items:
        center !important;

    padding:
        5px 6px !important;

    border:
        1px solid #505659 !important;

    background:
        #292d2f !important;

    background-color:
        #292d2f !important;

    color:
        #eef0f1 !important;

    font-size:
        9px !important;
}


html body #al-mc4-window
.al-mc5-attachment-main {
    min-width:
        0 !important;

    overflow:
        hidden !important;
}


html body #al-mc4-window
.al-mc5-attachment-name {
    display:
        block !important;

    overflow:
        hidden !important;

    color:
        #f1f2f2 !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


html body #al-mc4-window
.al-mc5-attachment-state {
    display:
        block !important;

    margin-top:
        2px !important;

    color:
        #a8afb2 !important;

    font-size:
        8px !important;

    white-space:
        nowrap !important;
}


html body #al-mc4-window
.al-mc5-remove-attachment {
    min-width:
        48px !important;

    height:
        23px !important;

    min-height:
        23px !important;

    padding:
        2px 5px !important;

    border:
        1px solid #62686b !important;

    background:
        #34383a !important;

    color:
        #f1f2f2 !important;

    font-size:
        7px !important;

    cursor:
        pointer !important;
}


html body #al-mc4-window
.al-mc5-remove-attachment:disabled {
    opacity:
        .45 !important;

    cursor:
        default !important;
}


/* ---------------------------------------------------------
   Hide the old separate generated-file location.

   New files are rendered inside the conversation under the
   user message that requested them.
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc4-files
>
.al-mc4-links {
    display:
        none !important;
}


/* ---------------------------------------------------------
   Conversation turns
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc5-turn {
    width:
        100% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    margin:
        0 0 12px !important;

    padding:
        0 !important;
}


html body #al-mc4-window
.al-mc5-turn-user {
    align-self:
        flex-end !important;

    width:
        auto !important;

    max-width:
        92% !important;

    margin:
        0 0 4px auto !important;
}


html body #al-mc4-window
.al-mc5-turn-assistant {
    align-self:
        flex-start !important;

    width:
        auto !important;

    max-width:
        92% !important;

    margin:
        6px auto 0 0 !important;
}


/* ---------------------------------------------------------
   Uploaded references displayed below the user request
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc5-turn-references {
    align-self:
        flex-end !important;

    width:
        min(
            92%,
            500px
        ) !important;

    margin:
        0 0 5px auto !important;

    padding:
        6px 7px !important;

    border:
        1px solid #4b5052 !important;

    background:
        #202425 !important;

    background-color:
        #202425 !important;

    color:
        #b9bec0 !important;

    font-size:
        8px !important;

    line-height:
        1.35 !important;
}


html body #al-mc4-window
.al-mc5-reference-title {
    margin-bottom:
        4px !important;

    color:
        #e7e9ea !important;

    font-weight:
        700 !important;

    text-transform:
        uppercase !important;
}


html body #al-mc4-window
.al-mc5-reference-row {
    overflow:
        hidden !important;

    margin:
        2px 0 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


/* ---------------------------------------------------------
   Generated files directly below requesting message
   --------------------------------------------------------- */

html body #al-mc4-window
.al-mc5-inline-files {
    align-self:
        flex-end !important;

    width:
        min(
            92%,
            500px
        ) !important;

    margin:
        0 0 5px auto !important;

    padding:
        7px !important;

    border:
        1px solid #5b6164 !important;

    background:
        #222627 !important;

    background-color:
        #222627 !important;

    color:
        #f1f2f2 !important;
}


html body #al-mc4-window
.al-mc5-inline-files[hidden] {
    display:
        none !important;
}


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

    color:
        #ffffff !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    text-transform:
        uppercase !important;
}


html body #al-mc4-window
.al-mc5-inline-file-pending,

html body #al-mc4-window
.al-mc5-inline-file-empty {
    padding:
        5px 6px !important;

    border:
        1px solid #424749 !important;

    background:
        #191c1d !important;

    color:
        #adb3b6 !important;

    font-size:
        8px !important;

    font-style:
        italic !important;
}


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

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

    gap:
        7px !important;

    align-items:
        center !important;

    min-height:
        34px !important;

    margin:
        4px 0 0 !important;

    padding:
        6px 7px !important;

    border:
        1px solid #505659 !important;

    background:
        #2a2e30 !important;

    background-color:
        #2a2e30 !important;
}


html body #al-mc4-window
.al-mc5-file-details {
    min-width:
        0 !important;
}


html body #al-mc4-window
.al-mc5-file-name {
    display:
        block !important;

    overflow:
        hidden !important;

    color:
        #f1f2f2 !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


html body #al-mc4-window
.al-mc5-file-type {
    display:
        block !important;

    margin-top:
        2px !important;

    color:
        #92999c !important;

    font-size:
        7px !important;

    text-transform:
        uppercase !important;
}


html body #al-mc4-window
.al-mc5-file-download {
    min-width:
        72px !important;

    height:
        25px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        3px 7px !important;

    border:
        1px solid #686e71 !important;

    background:
        #383d3f !important;

    background-color:
        #383d3f !important;

    color:
        #ffffff !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    text-decoration:
        none !important;

    text-transform:
        uppercase !important;
}


html body #al-mc4-window
.al-mc5-file-download:hover {
    background:
        #494e50 !important;

    background-color:
        #494e50 !important;

    border-color:
        #80878a !important;
}


/* ---------------------------------------------------------
   Ensure conversation remains above the Open MCT separator
   --------------------------------------------------------- */

html body #al-mc4-root {
    z-index:
        2147483646 !important;

    isolation:
        isolate !important;
}


html body #al-mc4-window {
    z-index:
        2147483647 !important;

    isolation:
        isolate !important;

    background:
        #202324 !important;

    background-color:
        #202324 !important;

    opacity:
        1 !important;
}


/* ---------------------------------------------------------
   Narrow screen
   --------------------------------------------------------- */

@media (
    max-width: 620px
) {
    html body #al-mc4-window
    .al-mc4-input-row {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            52px
            52px !important;
    }


    html body #al-mc4-window
    #al-mc5-attach {
        width:
            34px !important;

        min-width:
            34px !important;

        max-width:
            34px !important;
    }


    html body #al-mc4-window
    .al-mc5-inline-files,

    html body #al-mc4-window
    .al-mc5-turn-references {
        width:
            96% !important;

        max-width:
            96% !important;
    }
}


/* No visual pulse. */
html body #al-mc4-window
#al-mc5-attach,

html body #al-mc4-window
#al-mc5-attachment-strip,

html body #al-mc4-window
.al-mc5-turn,

html body #al-mc4-window
.al-mc5-inline-files {
    animation:
        none !important;

    transition:
        none !important;
}