/* Common slash-command chips
 *
 * The favourites row at the top of the slash-commands modal. Each chip is
 * now two lines - command name, then a short description - instead of a
 * bare name whose meaning lived in a `title` tooltip that a phone can
 * never show.
 *
 * The descriptions are kept short server-side (see
 * src/core/slash_command_labels.py, MAX_DESCRIPTION_LENGTH) precisely so
 * this row does not grow: two lines per chip, three chips per row on
 * desktop, two on a phone. Anything longer would push the "all commands"
 * list below the fold, which is the failure this change exists to avoid.
 *
 * The chip body is the base Button (FavoriteChips.svelte); the name and description spans are styled here.
 */

/* THE CHIP ROW IS THE USER'S FAVORITES, not a hand-picked list.
 *
 * Each chip is a command button PLUS its own star, so unstarring happens
 * where the chip is rather than by hunting the command down in the list
 * below. The star is absolutely positioned so the chip's own two-line
 * layout is untouched; the button reserves room for it on the right
 * instead of flowing around it. */
.common-commands-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.common-commands-note {
    color: var(--oc-text-muted);
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 8px;
}

.command-chip {
    position: relative;
    display: flex;
    width: 31%;
    /* A flex child defaults to min-width: auto and refuses to shrink
     * below its content, which would let a long command name push the
     * grid past the modal. Same trap as .command-item in styles.css. */
    min-width: 0;
}

/* THE NAME IS NOT THE ACCENT. Every chip in this grid carries one, so an
 * orange name is orange wallpaper rather than emphasis; the hierarchy is
 * carried by the tier step down to the muted description below. */
.command-button-name {
    color: var(--oc-text-primary);
    font-weight: 600;
}

.command-button-desc {
    /* Muted and a size down so the command name stays the thing you scan
     * for; the description is support text, not a competing label. */
    color: var(--oc-text-muted);
    font-size: 0.68rem;
    font-family: var(--font-sans, inherit);
    /* One line, ellipsized. A wrapping description is exactly the "takes
     * up too much room" symptom; truncation keeps the grid rectangular
     * and the full text is still on the chip's title tooltip. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.common-commands-empty {
    color: var(--oc-text-muted);
    padding: 12px;
    text-align: center;
}

/* THE STAR.
 *
 * EVERY ONE of these declarations is load-bearing against the bare
 * element rule near the top of styles.css:
 *
 *     button { width: var(--control-size); height: var(--control-size);
 *              border-radius: var(--radius-full); padding: 0;
 *              background: ...; border: ...; }
 *
 * which exists for the round header icon buttons and reaches every button
 * that does not opt out property by property. A class only beats an
 * element rule for the properties it DECLARES. Nine user-visible bugs in
 * this repo have come from that rule, including a settings tab strip
 * rendered as a row of ellipses. So: width, height, border-radius,
 * padding, background, border and display are all stated here, and
 * border-radius is 0 because settings was just flattened and this has to
 * match.
 *
 * TOUCH: 44px square is the whole point of the affordance existing rather
 * than a hover-only control - this app is driven from a phone. The icon
 * inside is 18px; the other 26px is hit area, which is why the box is
 * sized here and not by the glyph.
 *
 * NOT the `more` control. `more` is a WORD in normal flow at the bottom
 * left of a row; the star is an ICON pinned to the top right. Different
 * shape, different place. */
.command-star {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--oc-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Above the chip/row it overlays, so the press lands on the star and
     * not on the command underneath it. */
    z-index: 1;
}

/* A STARRED COMMAND IS THE ONE THING THAT MATTERS IN ITS CHIP, so this
 * is where the chip spends its orange. */
.command-star--on {
    color: var(--oc-orange);
}

.command-star:hover,
.command-star:focus-visible {
    color: var(--oc-orange);
    background: var(--oc-orange-tint);
    outline: none;
}

.command-star:disabled {
    opacity: 0.5;
    cursor: default;
}

/* The star on a full-list row. Same control, same box; the row is not
 * position: relative by default, so it is made so here rather than in
 * styles.css, where .command-item's own rule is shared with the layout
 * fixes documented above it. */
.command-item {
    position: relative;
    /* Reserve the star's column so a long command name never runs
     * underneath it. */
    padding-right: 52px;
}

/* Phone: two chips per row. Three 31% columns plus a description turns
 * into three ellipsized stubs, which carries less information than the
 * tooltip it replaced. */
/* Phone: two chips per row, and give the description the horizontal room
 * it needs. Measured at 375px CSS width, which is the narrowest phone
 * this is expected to run on: at the base 0.68rem with the desktop 10px
 * side padding, a 20-character description ellipsized at about 14 and
 * "undo to a checkpoint" rendered as "undo to a chec...", which carries
 * less than the tooltip it replaced. */
@media (max-width: 600px) {
    /* The width moved to the chip: the button fills it, and the chip is
     * what the grid lays out now that a star shares the same box. */
    .command-chip {
        width: 47%;
    }

    .command-button-desc {
        font-size: 0.6rem;
        letter-spacing: -0.01em;
    }
}