/* =========================================================================
   The quiet note in an empty AI slot — core/templatetags/ai_consent.py

   ⭐ It sits on the inset surface (`card-surface--inset`, "the quiet note
   inside a page") so it reads as part of the page, never as an alert.
   ⛔ No status tone: it is not a warning (study §5.2: no pressure).

   Two layouts (Gabriel, 2026-10-12, after the iPhone walk):
   - a quiet note: the sentence, then *Turn on* small at the bottom left; the
     close sits in the top-right corner, where a dismissible card keeps it,
     so it never reads as a second action beside the button;
   - an ask (`--ask`: Explore, Scan, where the note IS the page): no close,
     and *Turn on* full width, like Quick's *Capture*.
   ========================================================================= */

.ai-note {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-block: var(--space-sm);
    /* Some hosts centre their empty state (Explore); a note reads left. */
    text-align: start;
}

.ai-note__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    /* Room for the corner close, so the sentence never runs under it. */
    padding-inline-end: 36px;
}

.ai-note__mark {
    flex: none;
    margin-block-start: 0.15em;
    color: var(--text-muted);
}

.ai-note__text {
    margin: 0;
    font-size: var(--text-base-sm);
    line-height: 1.45;
    color: var(--text-secondary);
}

.ai-note__close {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    margin: 0;
}

.ai-note__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 100px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.ai-note__x:hover {
    color: var(--text-color);
    background: var(--background-hover);
}

/* The ask is the page's whole content for now: more room, no corner to
   reserve, and the one action across the full width. */
.ai-note--ask {
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md);
}

.ai-note--ask .ai-note__body {
    padding-inline-end: 0;
}