/* =====================================================================
 * The terminal key bar: one row of the keys a phone's own keyboard
 * cannot send, under the pane. Pairs with client/js/terminal-key-bar.js,
 * the only thing that builds this markup.
 *
 * MOBILE ONLY, AND THE LINE IS THE HOUSE LINE. 769px is reused rather
 * than invented - it is already the number that makes the terminal tools
 * button and the slash command modal touch-only
 * (client/css/terminal-tools.css, client/css/slash-commands-fab.css),
 * and it answers the same question here: is there room for a control in
 * the terminal's bottom row. The app's OTHER "mobile" number,
 * MOBILE_MAX_PX = 700, answers "is there room to dock a panel" and is
 * deliberately not reused.
 *
 * PURE CSS, NO JS BRANCH, for the reason the slash-commands-fab.css
 * docblock gives at length: a JS width check paints the control on the
 * first frame and removes it once the script runs, which is a flash of a
 * control the desktop user was told they do not have.
 *
 * ONE ELEMENT IS GATED BECAUSE THERE IS ONLY ONE. The "hide the trigger
 * AND the panel it opens" rule next door exists because those controls
 * open something; this row opens nothing of its own. Its slash key opens
 * the slash command modal, which that file already gates at this same
 * width.
 *
 * NOTHING HERE FLOATS. Every control this row replaced was
 * `position: fixed` and painted over live terminal output. This is the
 * last in-flow child of `#terminal-screen`'s flex column, so the height
 * it takes is height the pane was never given. It changes height only
 * on a deliberate swipe (issue #1197, one row to two and back, 250 ms);
 * the terminal's debounced layout turns that into one fit at the end.
 * See the docblock at the top of client/css/terminal-grid.css for what a
 * late resize costs.
 *
 * COLOUR COMES FROM THE --oc-* PALETTE, not from the session theme's
 * --color-* names: this is chrome around the pane, on the same tier as
 * the header and the sidebar, and it should not move when the session's
 * terminal theme does. Same call the copy sheet and the paste fallback
 * already made.
 * ===================================================================== */

:root {
    /* THE ROW'S THREE MEASUREMENTS, DECLARED ONCE. --key-bar-h is what
     * the one remaining floating button offsets itself by, so it is
     * DERIVED from the same two values the row is built out of rather
     * than measured off a screenshot and typed in: change the padding or
     * the key height and the button moves with it. The 1px is the
     * border-top below. */
    --key-bar-pad: 4px;
    --key-bar-key-h: 30px;
    --key-bar-h: calc(var(--key-bar-key-h) + (2 * var(--key-bar-pad)) + 1px);
}

#terminal-key-bar {
    display: flex;
    /* TWO ROWS STACKED, ONLY ONE SHOWING UNTIL THE BAR IS DRAGGED UP
     * (issue #1197). The bar clips; its HEIGHT is what changes, so row 2
     * is simply the part of the column the closed height cuts off. */
    flex-direction: column;
    /* The gap is the chrome a second bar would add (two paddings and a
     * hairline), which makes the open height exactly twice the closed one. */
    gap: calc((2 * var(--key-bar-pad)) + 1px);
    box-sizing: border-box;
    overflow: hidden;
    /* The swipe is ours: the browser must not claim a vertical drag. */
    touch-action: none;
    height: calc(var(--key-bar-h) + env(safe-area-inset-bottom, 0px));
    transition: height 250ms ease;
    /* Never a flex GROW and never a shrink: the row is a fixed slice of
     * the column and every pixel it gains is a terminal row lost. */
    flex: 0 0 auto;
    padding: var(--key-bar-pad) 8px;
    background: var(--oc-ground-chrome);
    border-top: var(--oc-border) solid var(--oc-line-panel);

    /* THE HOME INDICATOR, PAID FOR EXACTLY ONCE.
     * `client/css/ios-chrome.css` puts `padding-bottom:
     * env(safe-area-inset-bottom)` on every `.screen`, so as the last
     * in-flow child of one this row already clears the indicator - but
     * it clears it by floating above a strip of page background, which
     * on a notched phone reads as the bar not reaching the bottom. The
     * negative margin gives that inset back to the column so the bar's
     * own ground paints into the strip, and the padding immediately
     * re-applies it to the KEYS so they still sit above the indicator.
     * Both values are the same env(), so on a device with no inset both
     * are 0px and this pair moves nothing. */
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(var(--key-bar-pad) + env(safe-area-inset-bottom, 0px));
}

#terminal-key-bar[data-open="1"] {
    height: calc((2 * var(--key-bar-h)) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
    #terminal-key-bar { transition: none; }
}

/* One row of keys. Both rows are the same shape; the closed bar shows
 * the first. */
.terminal-key-bar__row {
    display: flex;
    align-items: stretch;
    gap: var(--key-bar-pad);
    flex: 0 0 var(--key-bar-key-h);
}

/* A coffee key that is on reads as lit, in the violet the desktop cup uses. */
.terminal-key-bar__key[aria-pressed="true"] {
    color: var(--oc-violet);
}

/* One key. Equal widths by `flex: 1 1 0` rather than by a fixed size, so
 * the row fills the phone it is on instead of being tuned to one width;
 * `min-width: 0` is what lets a flex item actually shrink below its
 * content. */
.terminal-key-bar__key {
    flex: 1 1 0;
    min-width: 0;
    /* --key-bar-key-h IS DELIBERATELY UNDER THE 44px iOS TOUCH TARGET,
     * and this comment exists so nobody "fixes" it back. Owner,
     * 2026-09-22: "reduce the height of this bar by like 33%. i have
     * limited screen realestate so i want it to be minimum required but
     * still with a little padding for tapp area." 30px with 4px of
     * padding measures 39px for the row against the 57px it was, a 31.6%
     * cut, which is the closest whole pixels get to his number without
     * going under it.
     *
     * WHAT MAKES THAT AN ACCEPTABLE TRADE RATHER THAN A REGRESSION: the
     * target only shrinks on ONE axis. Each key stays about 37px wide
     * (`flex: 1 1 0`, so the 2px taken off the sides gives each key a
     * hair MORE width, not less), and the row sits at the very bottom of
     * the screen with nothing beneath it but browser chrome - so a thumb
     * that overshoots low or sideways hits the same key or nothing at
     * all, never a different control. 30px still clears the 20px glyph
     * with 5px of air either side.
     *
     * IT IS STILL A MINIMUM, NOT A HEIGHT. That argument did not weaken
     * when the floor moved down: the row still has to be able to grow for
     * a locale or an accessibility text size. Read from the token rather
     * than restated, because --key-bar-h above is computed from it and
     * the floating button offsets itself by that. */
    min-height: var(--key-bar-key-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    /* --oc-radius (6px), not --oc-radius-sm (4px): the reference the
     * owner supplied shows a distinctly rounded pill, and the palette's
     * normal radius is the closest token to it. A literal 8px would
     * match the screenshot a shade better and would be the one number in
     * this file that no token backs. */
    border-radius: var(--oc-radius);
    background: var(--oc-ground-raised);
    color: var(--oc-text-secondary);
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    /* A key the thumb rests on must not paint a selection or the grey
     * tap flash over its own pressed state. */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}

/* The pressed state is the ONE piece of feedback a key gives, because a
 * key that types into the pane has no other way to say it fired. Both
 * `:active` and `:focus-visible` are here: the first is the thumb, the
 * second is a keyboard or a switch control reaching the same button. */
.terminal-key-bar__key:active,
.terminal-key-bar__key:focus-visible {
    background: var(--oc-ground-hover);
    color: var(--oc-text-primary);
    outline: none;
}

@media (min-width: 769px) {
    #terminal-key-bar {
        display: none;
    }
}