@perxel/spotlight 0.0.0-stage → 0.1.1

package/dist/liquid/liquid.css

@@ -0,0 +1,1007 @@
+/* @perxel/spotlight: the liquid skin. Plain CSS, `sp-` classes, themed with the variables below
+   (set them on `:root` or on the skin's `className`). Neutral defaults: grey glass, system font. */
+
+:root {
+    /* The accent: marks in results, the highlighted row's tint, the tide, send button hover. */
+    --sp-accent: #1f6feb;
+    /* Text on the accent-tinted glass (the highlighted row). */
+    --sp-ink: #0b1f4d;
+    --sp-text: #111;
+    --sp-muted: #4e4e4e;
+    --sp-subtle: #777;
+    /* The panel's reading area, the user's bubble, a quiet fill (errors, kbd). */
+    --sp-surface: #fff;
+    --sp-bubble: #f2f2f2;
+    --sp-quiet: #f6f6f6;
+    /* The fill button (send, stop): background and hover. */
+    --sp-button: #111;
+    --sp-button-text: #fff;
+    --sp-button-hover: var(--sp-accent);
+    /* The glass: fill, rim, inner glow, lift (outer shadow). */
+    --sp-glass-fill: rgba(255, 255, 255, .5);
+    --sp-glass-edge: rgba(255, 255, 255, .8);
+    --sp-glow: rgba(255, 255, 255, .7);
+    --sp-lift: 0 0 0 .5px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
+    /* The glass over the page (gate) is denser: text sits on it over any background. */
+    --sp-gate-fill: rgba(255, 255, 255, .66);
+    /* The panel header pill, on the white reading area. */
+    --sp-pill-fill: rgba(242, 242, 242, .6);
+    --sp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --sp-font-display: var(--sp-font);
+    --sp-display-weight: 400;
+    /* The page behind the gate. */
+    --sp-dim: rgba(0, 0, 0, .2);
+    --sp-dim-blur: 12px;
+    /* Stacking: the gate at `--sp-z`, the panel one under, the phone backdrop two under. */
+    --sp-z: 59;
+}
+
+/* The skin sizes boxes border-box, whatever the page's own reset (or none). */
+.sp-overlay,
+.sp-gate,
+.sp-gate *,
+.sp-backdrop,
+.sp-panel,
+.sp-panel *,
+.sp-panel *::before,
+.sp-panel *::after {
+    box-sizing: border-box;
+}
+
+/* ------------------------------------------------------------------ */
+/* The glass. `.sp-liquid` is the white tone; `.sp-liquid-accent` the  */
+/* pale accent tone. A bright rim along the top, a lighter top half, a */
+/* faint dark rim at the bottom, a soft inner glow, a hairline + lift. */
+/* ------------------------------------------------------------------ */
+.sp-liquid {
+    --sp-fill: var(--sp-glass-fill);
+    --sp-edge: var(--sp-glass-edge);
+    --sp-inner: var(--sp-glow);
+    --sp-shadow: var(--sp-lift);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--sp-fill);
+    -webkit-backdrop-filter: blur(16px) saturate(2);
+    backdrop-filter: blur(16px) saturate(2);
+    box-shadow: inset 0 0 0 1px var(--sp-edge),
+    inset 0 1.5px 0 #fff,
+    inset 0 -1px 0 color-mix(in srgb, var(--sp-ink) 8%, transparent),
+    inset 0 0 14px var(--sp-inner),
+    var(--sp-shadow);
+    transition: box-shadow .15s;
+}
+
+.sp-liquid-accent {
+    --sp-fill: color-mix(in srgb, var(--sp-accent) 12%, rgba(255, 255, 255, .7));
+    --sp-edge: color-mix(in srgb, var(--sp-accent) 28%, transparent);
+    --sp-inner: color-mix(in srgb, var(--sp-accent) 22%, transparent);
+    color: var(--sp-ink);
+}
+
+/* Over the page: denser and blurrier. */
+.sp-glass {
+    --sp-fill: var(--sp-gate-fill);
+    -webkit-backdrop-filter: blur(24px) saturate(1.8);
+    backdrop-filter: blur(24px) saturate(1.8);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+    .sp-liquid {
+        background: #fff;
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+    }
+
+    .sp-liquid-accent {
+        background: color-mix(in srgb, var(--sp-accent) 12%, #fff);
+    }
+}
+
+/* The fill button (send, stop). */
+.sp-fill {
+    display: inline-grid;
+    place-items: center;
+    flex-shrink: 0;
+    border: 1px solid var(--sp-button);
+    border-radius: 9999px;
+    padding: 0;
+    background: var(--sp-button);
+    color: var(--sp-button-text);
+    cursor: pointer;
+    transition: background-color .15s, border-color .15s, transform .15s;
+}
+
+.sp-fill svg {
+    width: 16px;
+    height: 16px;
+}
+
+.sp-fill:disabled {
+    opacity: .4;
+    cursor: default;
+}
+
+@media (hover: hover) {
+    .sp-fill:not(:disabled):hover {
+        background: var(--sp-button-hover);
+        border-color: var(--sp-button-hover);
+    }
+}
+
+.sp-fill:not(:disabled):active {
+    transform: scale(.96);
+}
+
+.sp-truncate {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* A thin scrollbar inside the skin. */
+.sp-scroll {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, .2) transparent;
+}
+
+.sp-scroll::-webkit-scrollbar {
+    width: 6px;
+}
+
+.sp-scroll::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background: rgba(0, 0, 0, .2);
+}
+
+/* ------------------------------------------------------------------ */
+/* The gate                                                            */
+/* ------------------------------------------------------------------ */
+.sp-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--sp-z);
+    background: var(--sp-dim);
+    -webkit-backdrop-filter: blur(var(--sp-dim-blur));
+    backdrop-filter: blur(var(--sp-dim-blur));
+}
+
+.sp-gate {
+    position: fixed;
+    inset-inline: 0.75rem;
+    top: 4rem;
+    z-index: var(--sp-z);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: 640px;
+    margin-inline: auto;
+    color: var(--sp-text);
+    font-family: var(--sp-font);
+    outline: none;
+}
+
+@media (min-width: 64rem) {
+    .sp-gate {
+        top: 14vh;
+        max-height: calc(86vh - 3rem);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-overlay[data-state="open"] { animation: sp-fade-in .2s both; }
+    .sp-overlay[data-state="closed"] { animation: sp-fade-out .2s both; }
+    .sp-gate[data-state="open"] { animation: sp-gate-in .2s both; }
+    .sp-gate[data-state="closed"] { animation: sp-gate-out .2s both; }
+}
+
+@keyframes sp-fade-in { from { opacity: 0; } }
+@keyframes sp-fade-out { to { opacity: 0; } }
+@keyframes sp-gate-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
+@keyframes sp-gate-out { to { opacity: 0; transform: scale(.98); } }
+
+/* Close: phones only, a glass circle floating above the box's top right corner. */
+.sp-gate-close {
+    position: absolute;
+    right: 0;
+    bottom: 100%;
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 0;
+    border-radius: 9999px;
+    color: var(--sp-muted);
+    cursor: pointer;
+    transition: transform .15s, color .15s;
+}
+
+.sp-gate-close svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.sp-gate-close:hover { color: var(--sp-text); }
+.sp-gate-close:active { transform: scale(.9); }
+
+@media (min-width: 64rem) {
+    .sp-gate-close { display: none; }
+}
+
+/* The box: a glass pill. */
+.sp-gate-box {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.75rem;
+    border-radius: 9999px;
+    padding-left: 1.25rem;
+    padding-right: 0.625rem;
+}
+
+.sp-gate-box:focus-within {
+    --sp-fill: color-mix(in srgb, var(--sp-gate-fill), #fff 40%);
+}
+
+@media (min-width: 64rem) {
+    .sp-gate-box { padding-right: 1.25rem; }
+}
+
+.sp-gate-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    color: var(--sp-muted);
+}
+
+/* 1rem below 64rem: iOS Safari zooms the page into any smaller field. */
+.sp-gate-input {
+    flex: 1;
+    min-width: 0;
+    height: 3.5rem;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 1rem;
+    outline: none;
+}
+
+.sp-gate-input::placeholder {
+    color: var(--sp-muted);
+    opacity: 1;
+}
+
+@media (min-width: 64rem) {
+    .sp-gate-input {
+        height: 4rem;
+        font-size: 1.125rem;
+    }
+}
+
+.sp-gate-send {
+    width: 2.25rem;
+    height: 2.25rem;
+}
+
+.sp-gate-hints {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--sp-muted);
+    font-size: 13px;
+}
+
+.sp-kbd {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    border-radius: 6px;
+    padding-inline: 0.375rem;
+    background: rgba(0, 0, 0, .06);
+    font-family: inherit;
+}
+
+.sp-kbd svg {
+    width: 0.875rem;
+    height: 0.875rem;
+}
+
+.sp-kbd-arrows { margin-right: 0.75rem; }
+
+.sp-hint-enter {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    white-space: nowrap;
+}
+
+/* A hint: always mounted, it slides open (width through a one-column grid) and fades in. */
+.sp-hint {
+    display: grid;
+    grid-template-columns: 0fr;
+    opacity: 0;
+    transform: translateX(4px);
+    transition: grid-template-columns .25s cubic-bezier(.2, .8, .2, 1), opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
+}
+
+.sp-hint > * {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.sp-hint[data-on] {
+    grid-template-columns: 1fr;
+    opacity: 1;
+    transform: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-fade-in { animation: sp-fade-in .2s both; }
+}
+
+/* The results: one glass group. */
+.sp-gate-results {
+    flex-shrink: 0;
+    overflow: hidden;
+    border-radius: 22px;
+}
+
+.sp-gate-results > .sp-scroll {
+    position: relative;
+    max-height: 60svh;
+    padding: 0.375rem;
+}
+
+@media (min-width: 64rem) {
+    .sp-gate-results > .sp-scroll { max-height: min(60vh, 440px); }
+}
+
+.sp-gate-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.sp-row {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border: 0;
+    border-radius: 16px;
+    padding: 0.625rem 1rem;
+    background: transparent;
+    color: var(--sp-text);
+    font: inherit;
+    font-size: 15px;
+    text-align: left;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition: transform .15s, background-color .15s;
+}
+
+.sp-row:hover:not([aria-selected="true"]) {
+    background-color: rgba(255, 255, 255, .6);
+}
+
+.sp-row:active { transform: scale(.985); }
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-row { animation: sp-rise .3s both; }
+}
+
+@keyframes sp-rise { from { opacity: 0; transform: translateY(-4px); } }
+
+.sp-row-text {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+}
+
+.sp-row-title { line-height: 1.25; }
+
+.sp-row-sub {
+    margin-top: 0.125rem;
+    color: var(--sp-muted);
+    font-size: 13px;
+    line-height: 1.25;
+}
+
+.sp-row mark {
+    background: transparent;
+    color: var(--sp-accent);
+}
+
+.sp-row-kind {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--sp-muted);
+    font-size: 13px;
+}
+
+.sp-row-arrow {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--sp-subtle);
+    transition: color .15s;
+}
+
+.sp-row:hover .sp-row-arrow { color: var(--sp-text); }
+.sp-row[aria-selected="true"] .sp-row-arrow { color: var(--sp-ink); }
+
+/* The arrow-key highlight: one piece of the accent glass sliding under the rows. */
+.sp-hl {
+    --sp-shadow: 0 0 #0000;
+    position: absolute;
+    top: 0;
+    inset-inline: 6px;
+    z-index: 0;
+    border-radius: 16px;
+    pointer-events: none;
+    opacity: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    transition: transform .22s cubic-bezier(.2, .8, .2, 1), height .22s cubic-bezier(.2, .8, .2, 1), opacity .15s;
+}
+
+.sp-hl[data-on] { opacity: 1; }
+.sp-hl[data-jump] { transition: opacity .15s; }
+
+/* ------------------------------------------------------------------ */
+/* The panel                                                           */
+/* ------------------------------------------------------------------ */
+.sp-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--sp-z) - 2);
+    background: rgba(0, 0, 0, .3);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-backdrop[data-state="open"] { animation: sp-fade-in .3s both; }
+    .sp-backdrop[data-state="closed"] { animation: sp-fade-out .3s both; }
+}
+
+.sp-backdrop[data-state="closed"] { pointer-events: none; }
+
+/* Phones: a bottom sheet. Desktop: a floating card, bottom right. */
+.sp-panel {
+    --sp-top: 3.5rem;
+    --sp-bottom: 7rem;
+    --sp-pill: 52px;
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: calc(var(--sp-z) - 1);
+    display: flex;
+    flex-direction: column;
+    height: 92svh;
+    overflow: hidden;
+    border-top: 1px solid rgba(0, 0, 0, .1);
+    border-radius: 20px 20px 0 0;
+    background: var(--sp-surface);
+    box-shadow: 0 -8px 32px rgba(0, 0, 0, .12);
+    color: var(--sp-text);
+    font-family: var(--sp-font);
+    outline: none;
+}
+
+@media (min-width: 64rem) {
+    .sp-panel {
+        --sp-pill: 40px;
+        inset-inline: auto;
+        right: 1.5rem;
+        bottom: 1.5rem;
+        width: 420px;
+        height: min(640px, calc(100dvh - 48px));
+        border: 1px solid rgba(0, 0, 0, .15);
+        border-radius: 24px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08), 0 24px 64px rgba(0, 0, 0, .10);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-panel[data-state="open"] { animation: sp-sheet-in .3s both; }
+    .sp-panel[data-state="closed"] { animation: sp-sheet-out .3s both; }
+
+    @media (min-width: 64rem) {
+        .sp-panel[data-state="open"] { animation: sp-card-in .2s both; }
+        .sp-panel[data-state="closed"] { animation: sp-card-out .2s both; }
+    }
+}
+
+@keyframes sp-sheet-in { from { transform: translateY(100%); } }
+@keyframes sp-sheet-out { to { transform: translateY(100%); } }
+@keyframes sp-card-in { from { opacity: 0; transform: translateY(16px); } }
+@keyframes sp-card-out { to { opacity: 0; transform: translateY(16px); } }
+
+/* The header: a glass pill over the conversation; behind it white down to the pill's middle,
+   fading out by its bottom edge, so messages show blurred only through its lower half. */
+.sp-panel-head {
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    z-index: 10;
+    padding: 0.375rem 0.75rem 0.25rem;
+    touch-action: none;
+}
+
+.sp-panel-head::before,
+.sp-panel-foot::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+}
+
+.sp-panel-head::before {
+    background: linear-gradient(to bottom, var(--sp-surface) calc(100% - 0.25rem - var(--sp-pill) / 2), transparent calc(100% - 0.25rem));
+}
+
+@media (min-width: 64rem) {
+    .sp-panel-head {
+        padding-top: 0.5rem;
+        touch-action: auto;
+    }
+}
+
+.sp-grab {
+    width: 2.25rem;
+    height: 0.25rem;
+    margin: 0 auto 6px;
+    border-radius: 9999px;
+    background: rgba(0, 0, 0, .15);
+}
+
+@media (min-width: 64rem) {
+    .sp-grab { display: none; }
+}
+
+.sp-panel-pill {
+    --sp-fill: var(--sp-pill-fill);
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+    border-radius: 9999px;
+    padding: 0.25rem 0.25rem 0.25rem 1rem;
+}
+
+.sp-panel-title {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 0;
+    font-family: var(--sp-font-display);
+    font-size: 1.125rem;
+    font-weight: var(--sp-display-weight);
+    line-height: 1.3;
+}
+
+.sp-logo {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex-shrink: 0;
+}
+
+.sp-logo > * {
+    width: 100%;
+    height: 100%;
+}
+
+.sp-icon-button {
+    display: grid;
+    place-items: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border: 0;
+    border-radius: 9999px;
+    padding: 0;
+    background: transparent;
+    color: var(--sp-muted);
+    cursor: pointer;
+    transition: background-color .15s, color .15s;
+}
+
+.sp-icon-button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.sp-icon-button:hover {
+    background: rgba(0, 0, 0, .05);
+    color: var(--sp-text);
+}
+
+.sp-back { margin-left: -12px; }
+
+@media (min-width: 64rem) {
+    .sp-icon-button {
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
+/* The conversation. */
+.sp-messages {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: hidden;
+}
+
+.sp-messages-viewport {
+    height: 100%;
+}
+
+.sp-messages-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: calc(var(--sp-top) + 0.5rem) 1rem calc(var(--sp-bottom) + 1rem);
+}
+
+.sp-privacy {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.375;
+    color: var(--sp-ink);
+}
+
+.sp-privacy a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.125rem;
+}
+
+.sp-message {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.sp-message[data-role="user"] {
+    max-width: 85%;
+    margin-left: auto;
+    align-items: flex-end;
+}
+
+.sp-message-gap { margin-top: 0.75rem; }
+
+.sp-bubble,
+.sp-answer {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.625;
+    letter-spacing: .15px;
+}
+
+.sp-bubble {
+    border-radius: 18px;
+    padding: 0.5rem 0.875rem;
+    background: var(--sp-bubble);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.sp-answer { overflow-wrap: anywhere; }
+
+.sp-md > :first-child { margin-top: 0; }
+.sp-md > :last-child { margin-bottom: 0; }
+.sp-md p { margin: 0.5rem 0; }
+.sp-md ul { margin: 0.5rem 0; padding-left: 1.25rem; list-style: disc; }
+.sp-md ol { margin: 0.5rem 0; padding-left: 1.25rem; list-style: decimal; }
+.sp-md li { margin: 0.125rem 0; }
+.sp-md strong { font-weight: 600; }
+.sp-md a { color: inherit; text-decoration: underline; text-underline-offset: 0.125rem; }
+.sp-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
+
+.sp-sources {
+    color: var(--sp-subtle);
+    font-size: 13px;
+}
+
+.sp-sources summary {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 500;
+    list-style: none;
+    cursor: pointer;
+}
+
+.sp-sources summary::-webkit-details-marker { display: none; }
+
+.sp-chevron {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform .15s;
+}
+
+.sp-sources[open] .sp-chevron { transform: rotate(180deg); }
+
+.sp-sources-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    margin-top: 0.5rem;
+}
+
+.sp-sources-list a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--sp-muted);
+    text-decoration: none;
+    text-underline-offset: 0.125rem;
+}
+
+.sp-sources-list a:hover { text-decoration: underline; }
+
+.sp-sources-list svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex-shrink: 0;
+}
+
+/* The row under an answer that reopens the view it prepared. */
+.sp-action-row {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-top: 0.25rem;
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-radius: 12px;
+    padding: 0.625rem 0.875rem;
+    background: transparent;
+    color: var(--sp-muted);
+    font: inherit;
+    font-size: 14px;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color .15s, background-color .15s, color .15s;
+}
+
+.sp-action-row svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--sp-subtle);
+}
+
+.sp-action-row:hover {
+    border-color: rgba(0, 0, 0, .2);
+    background: var(--sp-bubble);
+    color: var(--sp-text);
+}
+
+.sp-waiting {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--sp-subtle);
+    font-size: 14px;
+}
+
+.sp-waiting .sp-logo {
+    width: 1rem;
+    height: 1rem;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-pulse { animation: sp-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+}
+
+@keyframes sp-pulse { 50% { opacity: .5; } }
+
+.sp-error {
+    margin: 0;
+    border-radius: 12px;
+    padding: 0.625rem 0.875rem;
+    background: var(--sp-quiet);
+    color: var(--sp-muted);
+    font-size: 14px;
+}
+
+.sp-scroll-button {
+    position: absolute;
+    left: 50%;
+    bottom: calc(var(--sp-bottom) + 0.75rem);
+    display: grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    transform: translateX(-50%);
+    border: 1px solid rgba(0, 0, 0, .15);
+    border-radius: 9999px;
+    padding: 0;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
+    color: var(--sp-text);
+    cursor: pointer;
+}
+
+.sp-scroll-button svg {
+    width: 1rem;
+    height: 1rem;
+}
+
+/* The composer: one glass box at the bottom, over a white gradient (and the tide). */
+.sp-panel-foot {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 10;
+    margin: 0;
+    padding: 0.25rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
+}
+
+.sp-panel-foot::before {
+    top: -24px;
+    background: linear-gradient(to top, var(--sp-surface) calc(100% - 2.5rem), transparent);
+}
+
+.sp-panel-foot > .sp-textarea,
+.sp-panel-foot > .sp-composer-row {
+    position: relative;
+}
+
+/* The textarea and the row under it share one glass box, drawn behind both. */
+.sp-panel-foot::after {
+    content: "";
+    position: absolute;
+    inset: 0.25rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
+    z-index: 0;
+    border-radius: 20px;
+    pointer-events: none;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--sp-glass-fill);
+    -webkit-backdrop-filter: blur(16px) saturate(2);
+    backdrop-filter: blur(16px) saturate(2);
+    box-shadow: inset 0 0 0 1px var(--sp-glass-edge),
+    inset 0 0.09375rem 0 #fff,
+    inset 0 -1px 0 color-mix(in srgb, var(--sp-ink) 8%, transparent),
+    inset 0 0 0.875rem var(--sp-glow),
+    var(--sp-lift);
+}
+
+.sp-panel-foot:focus-within::after {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), rgba(255, 255, 255, .7);
+}
+
+.sp-textarea {
+    z-index: 1;
+    display: block;
+    width: 100%;
+    min-height: 2.75rem;
+    max-height: 10rem;
+    field-sizing: content;
+    resize: none;
+    border: 0;
+    padding: 0.75rem 1rem 0.25rem;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 1rem;
+    outline: none;
+}
+
+.sp-textarea::placeholder {
+    color: var(--sp-subtle);
+    opacity: 1;
+}
+
+@media (min-width: 64rem) {
+    .sp-textarea { font-size: 0.9375rem; }
+}
+
+.sp-composer-row {
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+}
+
+.sp-submit {
+    width: 2rem;
+    height: 2rem;
+}
+
+.sp-stop-icon {
+    width: 0.75rem !important;
+    height: 0.75rem !important;
+    fill: currentColor;
+}
+
+/* The tide: soft pools of the accent rising from the panel's bottom edge behind the composer,
+   drifting sideways and flattening out of step (`transform` only, still under reduced motion). */
+.sp-tide {
+    position: absolute;
+    inset: -24px 0 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    background: linear-gradient(to top, color-mix(in srgb, var(--sp-accent) 14%, transparent), transparent 70%);
+}
+
+.sp-tide > span {
+    position: absolute;
+    left: -30%;
+    bottom: -80px;
+    width: 120%;
+    height: 180px;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-accent) 26%, transparent), transparent);
+    transform-origin: 50% 100%;
+    will-change: transform;
+}
+
+.sp-tide > span:nth-child(2) {
+    left: auto;
+    right: -30%;
+}
+
+.sp-tide > span:nth-child(3) {
+    left: 15%;
+    width: 70%;
+    height: 150px;
+    bottom: -55px;
+    background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-accent) 20%, transparent), transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .sp-tide > span { animation: sp-swell-a 7s ease-in-out infinite; }
+    .sp-tide > span:nth-child(2) { animation-name: sp-swell-b; animation-duration: 9s; }
+    .sp-tide > span:nth-child(3) { animation-name: sp-swell-c; animation-duration: 5.5s; }
+}
+
+@keyframes sp-swell-a {
+    0%, 100% { transform: translate3d(0, 0, 0) scale(1, .75); }
+    30% { transform: translate3d(18%, 0, 0) scale(1.15, 1); }
+    60% { transform: translate3d(32%, 0, 0) scale(1, .8); }
+    80% { transform: translate3d(12%, 0, 0) scale(1.1, .95); }
+}
+
+@keyframes sp-swell-b {
+    0%, 100% { transform: translate3d(0, 0, 0) scale(1.1, 1); }
+    25% { transform: translate3d(-14%, 0, 0) scale(.95, .75); }
+    55% { transform: translate3d(-34%, 0, 0) scale(1.15, 1); }
+    80% { transform: translate3d(-18%, 0, 0) scale(1, .8); }
+}
+
+@keyframes sp-swell-c {
+    0%, 100% { transform: translate3d(-30%, 0, 0) scale(.9, .75); }
+    50% { transform: translate3d(35%, 0, 0) scale(1.2, 1); }
+}
+
+/* An action's view (a form) fills the panel under the header. */
+.sp-view {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-top: var(--sp-top);
+}