/* ============================================================
   Command Pane — Editor, toolbar, textarea, macros
   ============================================================ */

/* ── Command Pane ──────────────────────────────────────────── */

.command-pane {
    display: flex;
    flex-direction: column;
    height: 300px;
    min-height: 120px;
    max-height: 60vh;
    min-width: 0;
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow: visible;
    container-type: inline-size;
    container-name: command-pane;
}

.command-pane-toolbar {
    order: -1; /* drawn above the text box; it follows the box in the DOM so Tab reaches the box first */
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
    overflow: visible;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
}

.toolbar-spacer {
    flex: 1;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.command-pane-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 8px 20px 12px;
    overflow: visible;
}

.command-editor {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.command-pane textarea {
    flex: 1;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;   /* 13px; rem so it follows the text size */
    font-family: var(--font-sans); /* the same on a phone as in the desktop card (#3218) */
    outline: none;
    transition: border-color 0.15s;
    resize: none;
    min-height: 0;
    line-height: 1.5;
}

.command-pane textarea:focus {
    border-color: var(--accent);
}

/* ── Collapse mode buttons to icons when pane is narrow ────── */

@container command-pane (max-width: 850px) {
    .btn-mode .btn-label {
        display: none;
    }
}

/* ── Macro Buttons ─────────────────────────────────────────── */

.macro-btn-wrap {
    position: relative;
    display: inline-flex;
}

.macro-delete-btn {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--control-border);
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.macro-btn-wrap:hover .macro-delete-btn {
    display: inline-flex;
}

.macro-delete-btn:hover {
    background: rgba(var(--fx-red-rgb), 0.2);
    border-color: var(--error);
    color: var(--error);
}

.btn-add-macro {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
    border-style: dashed;
    min-width: 28px;
}

.btn-add-macro:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--fx-blue-rgb), 0.1);
}

/* ── Command Hint ──────────────────────────────────────────── */

/* ── Split Send Button ─────────────────────────────────────── */

.toolbar-send-split {
    display: flex;
    position: relative;
    flex-shrink: 0;
}

.btn-send-dropdown {
    padding: 4px 5px !important;
    border-radius: 0 6px 6px 0 !important;
    border-left: 1px solid rgba(var(--white-rgb), 0.15);
}

.send-btn-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(var(--black-rgb), 0.3));
    min-width: 200px;
    z-index: 100;
    padding: 4px;
}

.send-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.send-menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.send-menu-hint {
    margin-left: auto;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.send-menu-hint kbd {
    display: inline-block;
    padding: 1px 4px;
    font-size: var(--fs-sm);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}

/* ── Command /mention Dropdown ────────────────────────────── */

.command-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
    z-index: 100;
    margin-bottom: 4px;
}

.command-mention-item {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-mention-item:hover,
.command-mention-item.selected {
    background: var(--accent);
    color: var(--text-on-accent);
}

.command-mention-item strong {
    color: inherit;
    font-weight: 700;
}

/* ── File @mention Dropdown ───────────────────────────────── */

.file-mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
    z-index: 100;
    margin-bottom: 4px;
}

.file-mention-item {
    padding: 6px 12px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-mention-item:hover,
.file-mention-item.selected {
    background: var(--accent);
    color: var(--text-on-accent);
}

.file-mention-item strong {
    color: inherit;
    font-weight: 700;
}

.file-mention-breadcrumb {
    padding: 4px 12px;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.file-mention-dir-icon {
    margin-right: 4px;
    font-size: 0.6875rem;
}

/* ── Composer card (desktop) ──────────────────────────────── */
/* The command pane is a rounded card under the terminal / transcript: the
   text on top, the buttons in a row beneath it (modes and macros on the
   left, keys and Send on the right). The box grows with its text
   (live_chat.js autosizes it, capped at 40vh). Mobile keeps its compact
   input bar (mobile.css). */

@media (min-width: 768px) {
    #command-pane {
        height: auto !important;
        min-height: 0;
        max-height: none;
        width: calc(100% - 24px);
        margin: 4px auto 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(var(--black-rgb), 0.18);
        transition: border-color 0.15s;
    }
    #command-pane:focus-within {
        border-color: var(--accent);   /* a 55% mix was 2.7:1 on the light card, under the 3:1 a focus indicator needs (#4023) */
    }
    #command-pane .command-pane-body {
        order: 0;
        flex-direction: column;
        gap: 6px;
        padding: 12px 16px 0;
    }
    #command-pane .image-attachments {
        border: none;
        background: none;
        padding: 0;
    }
    #command-pane textarea {
        flex: none;
        min-height: 2.75rem;   /* 44px; rem, so the box grows with the text size */
        max-height: 40vh;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        font-family: var(--font-sans);
        font-size: 0.875rem;
        overflow-y: auto;
    }
    #command-pane .command-pane-toolbar {
        order: 1;
        gap: 4px;
        border-bottom: none;
        padding: 6px 10px 10px;
    }
    #command-pane .toolbar-divider {
        height: 16px;
        margin: 0 4px;
    }

    /* Toolbar buttons read as quiet icons inside the card */
    #command-pane .command-pane-toolbar .btn-nav:not(.btn-send) {
        height: var(--control-compact-height);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 15px;
        color: var(--text-secondary);
        font-weight: 500;
    }
    #command-pane .command-pane-toolbar .btn-nav:not(.btn-send):hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
    /* Macros keep an outline so they read as chips */
    #command-pane .command-pane-toolbar .macro-btn-wrap .btn-nav,
    #command-pane .command-pane-toolbar .btn-nav.btn-add-macro {
        border-color: var(--control-border);
        padding: 0 12px;
    }
    #command-pane .command-pane-toolbar .btn-nav.btn-add-macro {
        border-style: dashed;
        padding: 0;
        min-width: 30px;
    }

    #command-pane .toolbar-send-split {
        align-items: center;
        gap: 2px;
        margin-left: 4px;
    }
    #command-pane .command-pane-toolbar .btn-send-dropdown {
        order: -1;
        min-width: 24px;
        border-radius: 15px !important;
    }
    #command-pane .btn-send {
        width: 32px;
        min-width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        box-shadow: none;
    }
    #command-pane .btn-send:hover {
        transform: none;
    }
    #command-pane .drop-overlay {
        border-radius: 16px;
    }
}

/* Size composer glyphs independently of the established control boxes. */
#command-pane .btn-nav svg { width: var(--icon-inline-size); height: var(--icon-inline-size); }
#command-pane .btn-esc .material-icons { font-size: var(--icon-size); }

/* ── Sleeping agent: Wake / Restart… in place of the send controls ── */

.sleeping-composer {
    order: -2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.sleeping-composer[hidden] {
    display: none;
}
.sleeping-composer-label {
    flex: 1;
    min-width: 0;
}
.sleeping-composer-actions {
    display: flex;
    gap: 8px;
}
.sleeping-composer-actions .btn {
    margin: 0;
}
/* Mobile and the popout force the toolbar and send buttons visible. */
#command-pane.agent-sleeping .command-pane-toolbar,
#command-pane.agent-sleeping .mobile-send-btn,
#command-pane.agent-sleeping .image-attachments {
    display: none !important;
}
#command-pane.agent-sleeping textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A failed send, under the text where the user typed (#3218): not a toast over the composer. */
.composer-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 12px 0;
    padding: 6px 8px 6px 12px;
    border: 1px solid rgba(var(--error-rgb), 0.5);
    border-radius: var(--radius-lg);
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error);
    font-size: 0.8125rem;
    line-height: 1.35;
}
.composer-error[hidden] { display: none; }
.composer-error-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.composer-error-restart { flex-shrink: 0; }
.composer-error-dismiss {
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    border: none;
    background: none;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
}
@media (max-width: 767px) {
    .composer-error { margin: 0 8px 6px; }
    .composer-error-restart, .composer-error-dismiss { min-height: 44px; min-width: 44px; }
}

/* Send with nothing to send: the box takes focus and flashes once, so the click is not silent (#3770). */
@keyframes empty-send-nudge {
    0%, 100% { box-shadow: none; }
    35% { box-shadow: 0 0 0 2px var(--accent-primary); }
}
#command-input.empty-send-nudge { animation: empty-send-nudge 0.5s ease-out; }

/* The chat's send-state live region (#4680): heard, not seen */
.chat-send-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The model and thinking-level chip by the composer (#4969, model_chip.js). */
/* The chip is the first item of the buttons' row, left of Stop and Send and centred with them (#5116): not between the text and the buttons, where it
   read as part of the typing area. Its note is a small line under that row. The menu opens upward from the chip's left edge. */
.model-chip-bar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; flex: 0 1 auto; min-width: 0; margin-left: 6px; }
.model-chip-wrap { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.model-chip-wrap[hidden] { display: none; }
.model-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 28px; padding: 2px 8px 2px 10px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-tertiary); color: var(--text-secondary); font: inherit; font-size: 0.75rem; cursor: pointer; }
.model-chip:hover { color: var(--text-primary); border-color: var(--text-muted); }
.model-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chip[data-state="requested"] .model-chip-text { font-style: italic; }
.model-chip[data-state="pending"] { color: var(--text-primary); border-color: var(--accent); } /* the accent is the border: as text it is 4.1:1 on the chip in the light theme (#5042) */
.model-chip[data-state="failed"] { color: var(--error-text, var(--fx-red-hot)); border-color: var(--danger, var(--fx-red-hot)); }
.model-chip-caret { font-size: 1rem; }
.model-chip-note { order: 2; font-size: 0.75rem; color: var(--text-muted); }
.model-chip-note:not(:empty) { padding: 0 16px 10px; margin-top: -4px; }
/* Empty, the note takes no room but stays in the accessibility tree: a live region that is display:none when its text arrives is not announced (#5042). */
.model-chip-note:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.model-chip-note[data-state="failed"] { color: var(--error-text, var(--fx-red-hot)); }
.model-chip-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; min-width: 260px; max-width: min(92vw, 360px); max-height: 50vh; overflow-y: auto; padding: 6px;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-ml); box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.35); }
.model-chip-menu[hidden] { display: none; }
.model-chip-head { padding: 6px 8px 2px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.model-chip-how { text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--accent); }
.model-chip-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.model-chip-item:hover, .model-chip-item:focus-visible { background: var(--bg-tertiary); }
.model-chip-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* a tint alone is not a focus indicator (#5042) */
.model-chip-item.checked { font-weight: 600; }
.model-chip-item .material-icons { font-size: 1rem; }
.model-chip-empty { padding: 10px; font-size: 0.8125rem; color: var(--text-muted); }
@media (max-width: 767px) {
    /* A phone: the menu is a sheet over the bottom of the screen, with room for 44 px targets. */
    .model-chip-menu { position: fixed; left: 8px; right: 8px; bottom: 8px; max-width: none; max-height: 60vh; }
    .model-chip-item { min-height: 44px; }
    .model-chip { min-height: 44px; min-width: 44px; } /* a touch target (#4276) */
    /* The toolbar is hidden on a phone except for the chip: it is the row under the input and the send buttons, the last row of the composer (it sat on the bottom edge of the screen, #5036; the command pane already adds the safe area). */
    .model-chip-bar { margin-left: 0; }
    .model-chip-note:not(:empty) { padding: 0 8px 8px; margin-top: -4px; }
}
@media (max-width: 767px) and (max-height: 520px) {
    /* A phone with the keyboard up, or on its side: the conversation needs the room more than the chip (#4969). */
    .model-chip-bar, .model-chip-note:not(:empty) { display: none; }
    .command-pane-toolbar { display: none !important; }
}