.loading-status {
 display: flex;
 align-items: center;
 gap: 12px;
 color: var(--muted, inherit);
}

.loading-status--workspace {
 --loading-size: 52px;
 flex-direction: column;
 text-align: center;
}

.loading-page-status {
 position: fixed;
 z-index: 8;
 inset-inline-end: max(16px, env(safe-area-inset-right));
 inset-block-end: calc(20px + env(safe-area-inset-bottom));
 max-inline-size: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
 pointer-events: none;
}

.loading-page-status .loading-status {
 --loading-size: 24px;
 gap: 8px;
 padding: 9px 14px;
 border: 1px solid var(--line);
 border-radius: 12px;
 background: var(--surface);
 color: var(--ink);
 box-shadow: 0 4px 14px rgb(0 0 0 / .12);
 font-size: .875rem;
 font-weight: 600;
 overflow-wrap: anywhere;
 animation: loading-arrive var(--motion-in, 180ms) ease-out both;
}

@keyframes loading-arrive { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 700px) {
 .soak-app .loading-page-status { inset-block-end: calc(80px + env(safe-area-inset-bottom)); }
}

.loading-motion {
 position: relative;
 display: inline-block;
 flex: none;
 inline-size: var(--loading-size, 32px);
 block-size: var(--loading-size, 32px);
 color: var(--accent, currentColor);
}

.loading-motion > span {
 position: absolute;
 display: block;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
}

/* Three nested contours read as a ripple even when motion is disabled. */
.loading-motion--workspace > span {
 inset: 33% 5%;
 border: 1.5px solid currentColor;
 border-radius: 50%;
 opacity: .48;
 animation-name: loading-ripple;
 animation-duration: 2.1s;
}

.loading-motion--workspace > span:nth-child(2) {
 inset: 38% 17%;
 opacity: .7;
 animation-delay: -150ms;
}

.loading-motion--workspace > span:nth-child(3) {
 inset: 43% 30%;
 opacity: .95;
 animation-delay: -300ms;
}

.loading-motion--search > span {
 inset-block-start: 25%;
 inset-inline-start: 18%;
 inline-size: 48%;
 block-size: 2px;
 border-radius: 999px;
 background: currentColor;
 opacity: .65;
 animation-name: loading-drift;
 animation-duration: 1.65s;
}

.loading-motion--search > span:nth-child(2) {
 inset-block-start: 47%;
 inset-inline-start: 11%;
 inline-size: 65%;
 opacity: .94;
 animation-delay: -260ms;
}

.loading-motion--search > span:nth-child(3) {
 inset-block-start: 69%;
 inset-inline-start: 25%;
 inline-size: 38%;
 opacity: .5;
 animation-delay: -520ms;
}

.loading-motion--answer > span {
 inset-inline-start: 14%;
 inset-block-start: 48%;
 inline-size: 21%;
 aspect-ratio: 1;
 border: 1.5px solid currentColor;
 border-radius: 50%;
 opacity: .72;
 animation-name: loading-bubble;
 animation-duration: 1.8s;
}

.loading-motion--answer > span:nth-child(2) {
 inset-inline-start: 38%;
 inset-block-start: 25%;
 inline-size: 29%;
 opacity: .94;
 animation-delay: -200ms;
}

.loading-motion--answer > span:nth-child(3) {
 inset-inline-start: 71%;
 inset-block-start: 43%;
 inline-size: 16%;
 opacity: .56;
 animation-delay: -400ms;
}

@keyframes loading-ripple {
 0%, 100% { transform: scale(.94); }
 50% { transform: scale(1.08); opacity: 1; }
}

@keyframes loading-drift {
 0%, 100% { transform: translateX(-1px); }
 50% { transform: translateX(4px); opacity: 1; }
}

@keyframes loading-bubble {
 0%, 100% { transform: translateY(1px); }
 50% { transform: translateY(-4px); opacity: 1; }
}

:root[data-loading-paused] .loading-motion > span {
 animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
 .loading-motion > span, .loading-page-status .loading-status { animation: none; }
}

.launch-picker-trigger > svg { display: block; flex: 0 0 36px; color: var(--accent); }
.launch-picker { width: min(560px, calc(100vw - 32px)); }
.launch-picker .dialog-heading p { margin: 4px 0 0; color: var(--muted); font-size: .875rem; }
.launch-preview {
 display: grid;
 min-height: 168px;
 padding: 8px;
 place-items: center;
 border: 1px solid var(--line);
 border-radius: var(--card-radius);
 background: var(--bg);
}
.launch-preview .launch-art { width: min(100%, 236px); }
.launch-choices { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: var(--field-gap) 0 0; padding: 0; border: 0; }
.launch-choices legend { margin-bottom: 8px; font-size: .875rem; font-weight: 600; }
.launch-picker .launch-choices label {
 display: flex;
 flex: 1 1 96px;
 align-items: center;
 min-height: var(--control-height);
 padding: 8px 10px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 color: var(--ink);
 font: 600 .875rem/1.25 var(--font-body);
 text-transform: none;
 letter-spacing: normal;
 cursor: pointer;
}
.launch-choices label:has(:checked) { border-color: var(--accent); background: var(--selected); }
.launch-choices input { flex: none; margin: 0; accent-color: var(--accent); }