/* =====================================================
   CYBERPUNK COMMAND CENTER
   CLI CONSOLE
===================================================== */

.cli-console{

    --cli-width:min(520px, calc(100vw - 2rem));
    --cli-height:340px;

    width:var(--cli-width);
    height:var(--cli-height);
    padding:0;
    margin:0;

    display:flex;
    flex-direction:column;

    border:1px solid rgba(0, 247, 255, 0.35);
    background:
        linear-gradient(
            180deg,
            rgba(8, 18, 28, 0.97),
            rgba(3, 10, 17, 0.97)
        );

    box-shadow:
        0 0 24px rgba(0, 247, 255, 0.12),
        inset 0 0 24px rgba(0, 247, 255, 0.03);

    backdrop-filter:var(--glass-blur);
    overflow:hidden;
    z-index:900;

}


/*
    Docked mode
*/

.cli-console.is-docked{

    position:fixed;
    right:1.5rem;
    bottom:calc(1.5rem + var(--status-bar-height));

}


/*
    Floating mode
*/

.cli-console.is-floating{

    position:fixed;
    left:50%;
    top:20%;
    right:auto;
    bottom:auto;

    transform:translateX(-50%);

}


/*
    Header
*/

.cli-header{

    /*
        #cliHeader is a <header> element, which also matches
        layout.css's generic site-nav `header{position:fixed;
        top:0; left:0; width:100%; ...}` rule. That's harmless
        by coincidence in docked mode (.cli-console's own
        backdrop-filter traps the fixed positioning inside its
        own box), but breaks minimized mode: with .cli-body
        hidden and the header out of flow, .cli-console has no
        in-flow content left, so height:auto collapses it to
        ~0 and its overflow:hidden then clips the header along
        with it. Reasserting position:static here (higher
        specificity than the bare type selector) makes the
        header a normal flex item again in every state, so it
        keeps its own natural height instead of depending on
        that coincidence.
    */
    position:static;

    min-height:48px;
    padding:0.65rem 0.8rem;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid rgba(0, 247, 255, 0.18);
    background:rgba(0, 247, 255, 0.045);

    user-select:none;

}

.cli-console.is-floating .cli-header{

    cursor:move;

}

.cli-identity{

    display:flex;
    align-items:center;
    gap:0.65rem;

}

.cli-identity strong{

    display:block;
    font-family:var(--font-title);
    font-size:0.78rem;
    letter-spacing:0.14em;
    color:var(--text-color);

}

.cli-identity small{

    display:block;
    margin-top:0.15rem;
    color:var(--text-muted);
    font-size:0.62rem;
    letter-spacing:0.12em;

}

.cli-status-indicator{

    width:8px;
    height:8px;

    border-radius:50%;
    background:var(--cyan);

    box-shadow:0 0 9px currentColor;
    color:var(--cyan);

}


/*
    Controls
*/

.cli-controls{

    display:flex;
    gap:0.35rem;

}

.cli-control{

    width:30px;
    height:28px;

    border:1px solid rgba(0, 247, 255, 0.2);
    background:transparent;
    color:var(--text-muted);

    cursor:pointer;

}

.cli-control:hover{

    border-color:var(--cyan);
    color:var(--cyan);

}


/*
    Body and output
*/

.cli-body{

    min-height:0;
    flex:1;

    display:flex;
    flex-direction:column;

}

.cli-output{

    min-height:0;
    flex:1;

    padding:1rem;
    overflow-y:auto;

    font-family:var(--font-body);
    font-size:0.76rem;
    line-height:1.65;

}

.cli-output p{

    margin:0 0 0.4rem;

}

.cli-system-message{

    color:var(--text-muted);

}

.cli-command-entry{

    color:var(--cyan);

}

.cli-error-message{

    color:var(--danger);

}


/*
    Input
*/

.cli-input-row{

    padding:0.75rem 1rem;

    display:flex;
    align-items:center;
    gap:0.65rem;

    border-top:1px solid rgba(0, 247, 255, 0.18);

}

.cli-prompt{

    color:var(--cyan);
    font-family:var(--font-body);

}

.cli-input{

    min-width:0;
    flex:1;

    border:0;
    outline:0;
    background:transparent;

    color:var(--text-color);
    caret-color:var(--cyan);

    font-family:var(--font-body);
    font-size:0.8rem;

}


/*
    Minimized state
*/

.cli-console.is-minimized{

    height:auto;

}

.cli-console.is-minimized .cli-body{

    display:none;

}


/*
    Mobile behavior
*/

@media (max-width: 700px){

    .cli-console.is-docked{

        right:0.75rem;
        bottom:calc(0.75rem + var(--status-bar-height));
        left:0.75rem;
        width:auto;

    }

    .cli-console.is-floating{

        max-width:calc(100vw - 1.5rem);

    }

}