/* =====================================================
   SENAPI
   CLI CONSOLE
--------------------------------------------------------
   Ported from CyberCore.Blazor's cli.css, restyled
   against SENAPI's own tokens instead of a separate
   --panel-bg/--accent/--danger vocabulary — the console
   uses the same .blue-box treatment (background/border/
   radius) every other Software-theme surface uses, so
   only layout/behavior/typography live here.

   The one real structural change: docked/floating modes
   use position:absolute instead of position:fixed, since
   this console is anchored to `.window` (SENAPI's
   floating macOS-style frame, given position:relative in
   app.css) rather than the browser viewport — every
   sibling project uses position:fixed because none of
   them have a floating-window-over-a-wall shell to stay
   contained within.
===================================================== */

.cli-console {

    --cli-width: min(420px, calc(100% - 3rem));
    --cli-height: 300px;

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

    display: flex;
    flex-direction: column;

    overflow: hidden;

    box-shadow:
        0 12px 32px rgba(30, 45, 70, 0.2),
        0 2px 8px rgba(30, 45, 70, 0.12);

    z-index: 50;

}


/*
    Docked mode — relative to .window
*/

.cli-console.is-docked {

    position: absolute;
    right: 1.25rem;
    bottom: calc(1.25rem + var(--status-bar-height));

}


/*
    Floating mode — relative to .window
*/

.cli-console.is-floating {

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

    transform: translateX(-50%);

}


/*
    Header
*/

.cli-header {

    min-height: 44px;
    padding: 0.6rem 0.75rem;

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

    border-bottom: 1px solid var(--blue-box-border);
    background: var(--dropdown-hover);

    user-select: none;

}

.cli-console.is-floating .cli-header {
    cursor: move;
}

.cli-identity {

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

}

.cli-identity strong {

    display: block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--text-dark);

}

.cli-identity small {

    display: block;
    margin-top: 0.15rem;
    color: var(--text-faint);
    font-size: 0.6rem;
    letter-spacing: 0.1em;

}

.cli-status-indicator {

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--icon-blue);

    box-shadow: 0 0 8px currentColor;
    color: var(--icon-blue);

}


/*
    Controls
*/

.cli-controls {

    display: flex;
    gap: 0.35rem;

}

.cli-control {

    width: 28px;
    height: 26px;

    border: none;
    border-radius: 8px;
    background: var(--uk-card-2);
    color: var(--text-muted);

    cursor: pointer;
    transition: transform var(--uk-fast) var(--uk-ease-out), background var(--uk-base) var(--uk-ease-out), color var(--uk-base) var(--uk-ease-out);

}

.cli-control:hover {
    background: var(--icon-blue);
    color: #1C2E4A;
    transform: translateY(-2px);
}


/*
    Body and output
*/

.cli-body {

    min-height: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

}

.cli-output {

    min-height: 0;
    flex: 1;

    padding: 0.85rem 1rem;
    overflow-y: auto;

    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.6;

}

.cli-output p {
    margin: 0 0 0.35rem;
}

.cli-system-message {
    color: var(--text-muted);
}

.cli-command-entry {
    color: var(--icon-blue);
}

.cli-error-message {
    color: var(--dot-red);
}


/*
    Input
*/

.cli-input-row {

    padding: 0.65rem 0.9rem;

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

    border-top: 1px solid var(--blue-box-border);

}

.cli-prompt {
    color: var(--icon-blue);
    font-family: var(--font-mono);
}

.cli-input {

    min-width: 0;
    flex: 1;

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

    color: var(--text-dark);
    caret-color: var(--icon-blue);

    font-family: var(--font-mono);
    font-size: 0.78rem;

}


/*
    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(100% - 1.5rem);
    }

}