/* PromptAffordances — the "Add elements / Highlight a place" control row under a prompt
   textarea. Colour-coded to match what each pill produces: purple = [asset] tags,
   teal = @{place} highlights. See prompt-affordances.js. */

/* The row is the last thing in the prompt body, and every layout draws a rule right under it
   to start the toolbar. Without the bottom margin the pills sit on that line and read as part
   of the toolbar rather than as the end of the prompt. */
.pa-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.pa-hidden {
    display: none !important;
}

.pa-bar-label {
    font-size: 0.75rem;
    color: var(--gray-400, #9ca3af);
    margin-right: 0.125rem;
}

.pa-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pa-pill i {
    font-size: 0.875rem;
}

/* Holds the token shape ("[…]", "@{…}"), so it has to be monospaced — braces and brackets
   are exactly the glyphs a proportional UI font renders ambiguously at 10px. */
.pa-pill kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    opacity: 0.8;
}

.pa-pill:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* [asset] tags — purple, matching .ati-* */
.pa-pill-assets {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.07);
    border-color: rgba(124, 58, 237, 0.16);
}

.pa-pill-assets:hover {
    background: rgba(124, 58, 237, 0.13);
    border-color: rgba(124, 58, 237, 0.3);
}

/* @{place} highlights — teal, matching .gpi-chip-fill */
.pa-pill-places {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.18);
}

.pa-pill-places:hover {
    background: rgba(13, 148, 136, 0.15);
    border-color: rgba(13, 148, 136, 0.32);
}

/* The landing/Video prompt card pads its own children; the row lives inside .ati-container
   so it needs the same inset as the asset tag strip. */
.prompt-card .pa-bar {
    padding: 0 12px;
}

/* The Projects floating prompt already reserves 0.5rem under the input section, so the row
   takes less of its own here — both layouts land on the same gap above the rule. */
.prompt-input-section .pa-bar {
    margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
    /* The label is the first thing to go — the pills read fine on their own, and tap targets
       matter more than the preamble on a phone (where "[" and "@" are hardest to type). */
    .pa-bar-label,
    .pa-pill kbd {
        display: none;
    }

    .pa-pill {
        padding: 0.3rem 0.6rem;
    }
}