@layer legacy {
/* =====================================================================
 * Terminal-screen session controls: the terminal tools menu and the
 * per-session theme picker it used to open (see below). The copy-output
 * sheet the "copy output" row opens lives in copy-output.css.
 *
 * ONE MENU. `.terminal-tools-menu` moves content across the terminal's
 * boundary: attach file, paste from clipboard, copy output. It
 * opens from the phone key bar's clipboard key; there is no floating
 * button for it any more (see below). There used to be a second,
 * session-editor menu here; as of 2026-09-17 both its rows live in the
 * header kebab (client/css/header-menu.css, client/js/header-menu.js).
 *
 * THE COLOURS COME FROM --oc-*, NOT FROM THE SESSION THEME. These
 * controls are app chrome, not session content. Both menus below are
 * appended to <body> by client/js/fab-menu.js and
 * client/js/session-theme-menu.js, so they sit OUTSIDE the closed list of
 * chrome roots client/css/terminal-carnivore.css rebinds --color-* on,
 * and reading --color-* here meant a tools menu that changed colour with
 * the user's theme while the header and the sidebar behind it did not.
 * The --oc-* palette is on :root already, from client/dist/app.css, which
 * client/index.html loads on every screen; pointing straight at it needs
 * no import and no new token. The consequence is deliberate and matches
 * the header: a session theme no longer restyles these controls.
 *
 * Web-first and mobile-first at once: every row is already a thumb-sized
 * 44px at every width.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * NO FLOATING TRIGGER. The round clipboard button that hovered over the
 * pane's bottom edge (`#terminalToolsBtn`, `.fab-menu-btn`,
 * `.terminal-tools-fab`) is DELETED (owner, 2026-09-22), along with its
 * `--fab-*` tokens and the offsets other sheets added to it. The menu
 * below now opens from the phone key bar's clipboard key
 * (client/js/terminal-key-bar.js), which is in flow and covers nothing.
 *
 * MOBILE ONLY, AND THE LINE IS THE KEY BAR'S LINE. The owner's words:
 * "this icon and popup menu should only be visible on mobile view". The
 * key bar that opens this menu is hidden at this same 769px line
 * (client/css/terminal-key-bar.css), and a menu left painted with no
 * trigger is worse than either. PURE CSS ON PURPOSE: a JS width check
 * would paint first and remove after.
 *
 * WHAT DESKTOP KEEPS: xterm's own cmd+V and terminal.js's capture-phase
 * file-paste handler cover paste and attach; search has the header's
 * #terminalSearchBtn. "copy output" and the file picker have no desktop
 * entry point, recorded here rather than papered over.
 * ------------------------------------------------------------------- */
@media (min-width: 769px) {
    .terminal-tools-menu {
        display: none !important;
    }
}

/* NO `.session-editor-fab` RULE, AND NO TOP-RIGHT RAIL. The session
 * editor was the only control on that rail. It became a header button
 * for a while, then a header kebab row, and the rail, its
 * `--fab-top-edge` token in styles.css and its safe-area pair in
 * ios-chrome.css were all removed with it rather than left defined and
 * unread - an orphan token is how a retired layout gets revived by
 * accident. The terminal's top edge is uncovered again, which is what
 * removing the old three-icon strip bought in the first place. */

/* NO `.terminal-bar__*` RULES, AND NO `.info` BAR. The status light used
 * to live in `.info`, the terminal screen's real bottom bar, the same way
 * `.home-bar` carries it on the home screen. `.info` is gone (deleted
 * 2026-09-21, along with the session id/PID readout it also carried, the
 * mobile title mirror, and the background-control mount it hosted): every
 * control it held now has its own working home in the terminal cell's own
 * toolbar (`web/src/opscenter/cells/terminal-live/TerminalUtilities.svelte`)
 * at the widths that toolbar mounts, and `App._placeStatusLight('terminal')`
 * degrades to "no bar, no control" exactly as it already did on the auth
 * screen. */

/* ---------------------------------------------------------------------
 * The menus themselves. Placed by client/js/anchor-popover.js, so only
 * the box is described here. Both menus carry `.fab-menu` plus their own
 * class, so the shared look cannot drift between them.
 * ------------------------------------------------------------------- */
.fab-menu {
    position: fixed;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 16px));
    border-radius: var(--oc-radius-sm);
    /* Ground, edge, glow and sheen: the shared `.popup-focus` class
     * (client/css/popup-focus.css), added in client/js/fab-menu.js. */
    overflow: hidden;
}

/* WIDTH, HEIGHT AND JUSTIFY ARE DECLARED ON PURPOSE. styles.css carries a
 * bare `button { width: var(--control-size); height: var(--control-size);
 * justify-content: center; }`
 * base rule. A class selector outranks it, but ONLY for the properties
 * the class actually declares - so a menu row that did not mention width
 * came out 36px wide with its icon hanging outside its own box, measured
 * in Chrome 2026-08-16. Same failure mode as a `stroke-width` rule losing
 * to a presentation attribute: check the COMPUTED value, not the rule you
 * wrote. `.cloude-session-theme__item` below carries these for the same
 * reason. */
.fab-menu__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 44px;
    border-radius: 0;
    padding: 0 12px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--oc-text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.fab-menu__item svg {
    flex: 0 0 auto;
    color: var(--oc-text-secondary);
}

.fab-menu__item:hover,
.fab-menu__item:focus-visible {
    background: var(--oc-ground-hover);
    outline: none;
}

.fab-menu__item:hover svg,
.fab-menu__item:focus-visible svg {
    color: var(--oc-orange);
}

/* `.fab-menu__item--separated` and `.fab-menu__item--danger` used to mark
 * "detach session" here. Both are DELETED, not orphaned: that row moved
 * into the header kebab on 2026-09-17 (client/js/header-menu.js) and
 * nothing in this file's remaining menu (terminal tools) is destructive,
 * so nothing calls either class any more. Re-add them if a future row
 * here needs the same treatment; do not restore them speculatively. */

/* One line per row. A wrapped label turns a 44px row into a 90px one and
 * the menu stops looking like a list. */
.fab-menu__label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
 * Per-session theme picker, opened by the header kebab's session theme
 * row (client/js/header-menu.js).
 * ------------------------------------------------------------------- */
.cloude-session-theme {
    position: fixed;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: min(280px, calc(100vw - 16px));
    border-radius: var(--oc-radius-sm);
    /* Ground, edge, glow and sheen: the shared `.popup-focus` class
     * (client/css/popup-focus.css), added in client/js/session-theme-menu.js. */
    overflow: hidden;
}

.cloude-session-theme__head {
    padding: 8px 12px;
    border-bottom: var(--oc-border) solid var(--oc-line-faint);
    color: var(--oc-text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    /* A tmux session name can be long; keep the header one line. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 60dvh so a large theme library scrolls inside the menu rather than
 * running off the viewport. Dynamic, not raw `vh`: on iOS the large
 * viewport is 739px against 699px visible, so `60vh` quietly bought 24px
 * of height that was never on screen. */
.cloude-session-theme__list {
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
}

/* See the note on .fab-menu__item: without an explicit width, height and
 * justify-content these rows inherit 36x36 centred from the bare `button`
 * rule in styles.css. */
.cloude-session-theme__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    /* Flex-column children size to their MAX-CONTENT width during the
     * parent's shrink-to-fit pass (`.cloude-session-theme` has no fixed
     * width, only min/max-width), and a run of text with no break
     * opportunity - one long word, or an id-fallback name joined by
     * underscores like `black_market` - has a max-content width equal to
     * its full unbroken length. That inflated preferred width pushes
     * `.cloude-session-theme__list` past its own clamped box, and because
     * the list sets `overflow-y: auto` the UA is spec-required to resolve
     * the omitted `overflow-x` to `auto` too (not `visible`) - so the
     * overflow doesn't just clip, it becomes a genuine horizontal scroll
     * inside the picker. `overflow-wrap: anywhere` gives the browser a
     * break opportunity everywhere, which both lets the label actually
     * wrap onto a second line AND, just as importantly, caps the
     * intrinsic width calculation itself so the container never inflates
     * past its max-width in the first place. min-width: 0 is the flex-item
     * half of the same fix - without it a flex child's automatic minimum
     * size is its content's min-content width, which for unbreakable text
     * is that same full length, so the wrap alone isn't enough. */
    min-width: 0;
    height: auto;
    min-height: 44px;
    border-radius: 0;
    padding: 0 12px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--oc-text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* Ancestor-qualified on purpose, not `.cloude-session-theme__item:hover`
 * alone. styles.css's bare `button:hover:not(:disabled)` (specificity
 * 0,2,1 - element + :hover + the :disabled inside :not()) applies
 * `transform: scale(1.05)` plus a glow box-shadow to every button on the
 * page, this row included, and this class never opted out because it
 * never had to declare `transform` before. A plain `.cloude-session-
 * theme__item:hover` is only 0,2,0 - LOWER than the button rule - so
 * even adding `transform: none` there loses the cascade outright, not
 * just visually; verified by hovering a real row and reading its
 * computed `transform`, which stayed `matrix(1.05, 0, 0, 1.05, 0, 0)`
 * with that weaker selector in place. Qualifying with the list ancestor
 * raises this to 0,3,0, which beats the button rule on specificity alone
 * with no `!important` and no source-order dependence.
 *
 * The scale mattered because a row already sized to the picker's
 * clamped max-width grows 5% on hover, and CSS gives a transformed
 * element its own scrollable overflow region - that growth alone pushed
 * `.cloude-session-theme__list` past its own width and, because the
 * list is already `overflow-y: auto`, resolved the list's omitted
 * overflow-x to a genuine horizontal scrollbar. That scrollbar only
 * ever existed while a row was hovered or focused, which is why the
 * resting-state measurement in the original overflow investigation came
 * back clean. Cancelling the scale keeps the background swap - the
 * actual hover affordance - without growing the row past its box; the
 * glow box-shadow is left alone since it does not affect layout or
 * contribute to scrollWidth. */
.cloude-session-theme__list .cloude-session-theme__item:hover,
.cloude-session-theme__list .cloude-session-theme__item:focus-visible {
    background: var(--oc-ground-hover);
    outline: none;
    transform: none;
}

.cloude-session-theme__item.is-active {
    color: var(--oc-orange);
}

.cloude-session-theme__item.is-active::after {
    content: ' *';
}
}