/* Anonym 2.0 — "Moon". Tokens mirror the Figma collection "anonym 2.0"; change them there first. */

@font-face { font-family: "Golos Text"; src: url("fonts/GolosText.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/Unbounded.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Jersey 15"; src: url("fonts/Jersey15-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
    --bg-base: #5A2428;
    --bg-raised: #74373A;
    --bg-sunken: #48191D;
    --bg-input: #4C1B1F;
    --line-default: #7A3D40;
    --line-input: #9A5B5E;
    --line-strong: #FBEEE8;
    --text-primary: #FBEEE8;
    --text-secondary: #E8C4BE;
    --text-disabled: #A87A78;
    --text-on-accent: #4A1A1C;
    --fill-solid: #FBEEE8;
    --accent-brand: #FF7A66;
    --accent-rose: #E89C8F;
    --bubble-out: #8A4347;
    --danger-text: #FF9484;
    --danger-fill: #E5484D;
    --danger-on-fill: #FFFFFF;
    --warn-text: #FFCF70;

    --radius-sm: 8px;
    --radius-field: 12px;
    --radius-md: 16px;
    --radius-card: 20px;
    --radius-sheet: 24px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* one spacing scale on a 4-pixel grid; the gutter is the side margin of every screen, the wider one of the hero screens */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --gutter: 16px;
    --gutter-hero: 24px;

    --font-text: "Golos Text", -apple-system, system-ui, sans-serif;
    --font-display: "Unbounded", var(--font-text);
    --font-pixel: "Jersey 15", "Golos Text", system-ui, sans-serif;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* lists and dialogues scroll without a bar: an app, not a page */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg-base);
    color: var(--text-primary);
    font: 400 16px/23px var(--font-text);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

#app { height: 100%; }

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; padding: 0; }

:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 2px; }

/* ---- type ---- */

.t-logo { font: 500 40px/48px var(--font-display); letter-spacing: -0.03em; }
.t-display { font: 500 26px/34px var(--font-display); letter-spacing: -0.02em; }
.t-title { font: 600 20px/26px var(--font-text); }
.t-body { font: 400 16px/23px var(--font-text); }
.t-strong { font: 500 16px/23px var(--font-text); }
.t-label { font: 500 14px/20px var(--font-text); }
.t-meta { font: 400 14px/20px var(--font-text); }
.t-caption { font: 400 13px/18px var(--font-text); }
.t-display, .t-title { text-wrap: balance; }
.t-body, .t-meta, .t-caption, .bubble .text { text-wrap: pretty; }
.t-pixel { font: 400 19px/22px var(--font-pixel); letter-spacing: 0.02em; }
.t-pixel-md { font: 400 26px/30px var(--font-pixel); letter-spacing: 0.02em; }
.t-pixel-lg { font: 400 34px/38px var(--font-pixel); letter-spacing: 0.02em; }
.link-code { font-size: 40px; line-height: 44px; letter-spacing: 0.06em; }
.link-card { display: flex; gap: 48px; align-items: center; padding: 40px 48px; border-radius: var(--radius-xl); background: var(--bg-raised); max-width: 960px; }
.link-card .qr-wrap { padding: 16px; border-radius: var(--radius-card); background: var(--fill-solid); flex: 0 0 auto; }
.steps { display: flex; flex-direction: column; gap: var(--space-8); margin: 0 0 var(--space-8); padding-left: 20px; }
.link-steps { display: flex; flex-direction: column; gap: 12px; max-width: 440px; text-align: left; }
@media (max-width: 699.98px) { .link-card { flex-direction: column; gap: 24px; padding: 24px; } }

.c-secondary { color: var(--text-secondary); }
.c-disabled { color: var(--text-disabled); }
.c-danger { color: var(--danger-text); }
.c-warn { color: var(--warn-text); }
.c-brand { color: var(--accent-brand); }

.one-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.center { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* ---- screen ---- */

.screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding-top: var(--safe-top);
    background: var(--bg-base);
}

.screen-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.screen-pad { padding: var(--space-16) var(--gutter); }
.screen-pad-wide { padding: var(--space-24) var(--gutter-hero) var(--space-16); }
.screen-footer { padding: 0 var(--gutter) calc(var(--space-16) + var(--safe-bottom)); display: flex; flex-direction: column; gap: var(--space-12); }
.screen-footer.hero { padding-inline: var(--gutter-hero); }
.screen-center { align-items: center; text-align: center; }

/* ---- navbar ---- */

.navbar { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 0 6px; }
.navbar-title { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.navbar-big { padding-left: var(--gutter); }

/* ---- buttons ---- */

.icon-button {
    width: 44px; height: 44px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--text-primary);
}
.icon-button.raised { background: var(--bg-raised); }
.icon-button.accent { background: var(--accent-brand); color: var(--text-on-accent); }
.icon-button:active { opacity: 0.7; }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; width: 100%; padding: 0 var(--space-24);
    border-radius: var(--radius-pill);
    font: 500 16px/23px var(--font-text);
}
.button.compact { min-height: 48px; flex: 1 1 0; min-width: 0; padding: 0 var(--space-12); white-space: nowrap; }
.button.accent { background: var(--accent-brand); color: var(--text-on-accent); }
.button.soft { background: var(--bg-raised); color: var(--text-primary); }
.button.ghost { background: transparent; color: var(--text-secondary); min-height: 44px; }
.button.danger { background: var(--danger-fill); color: var(--danger-on-fill); }
.button.danger-soft { background: var(--bg-raised); color: var(--danger-text); }
.button:disabled { opacity: 0.5; cursor: default; }
.button:active:not(:disabled) { transform: scale(0.99); }

/* ---- fields ---- */

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font: 400 13px/18px var(--font-text); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }
.field-box {
    display: flex; align-items: center; gap: 8px;
    min-height: 56px; padding: 0 var(--space-16);
    background: var(--bg-input); border: 1px solid var(--line-input); border-radius: var(--radius-field);
}
.field-box:focus-within { border: 1.5px solid var(--line-strong); }
.field-box.error { border: 1.5px solid var(--danger-fill); }
.field-box input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0; }
.field-box input::placeholder { color: var(--text-secondary); }
.field-box input.pixel { font: 400 22px/26px var(--font-pixel); letter-spacing: 0.02em; }
.field-hint { font: 400 13px/18px var(--font-text); color: var(--text-secondary); }
.field-hint.error { color: var(--danger-text); }

/* ---- moon ---- */

.moon {
    position: relative; display: inline-block; flex: 0 0 auto;
    width: var(--size); height: var(--size);
    border-radius: 50%; overflow: hidden;
    background: var(--accent-rose);
}
.moon > i { position: absolute; inset: 0; border-radius: 50%; background: var(--bg-sunken); }
.moon-plain { background: var(--accent-brand); }

/* ---- cards, rows ---- */

.card { background: var(--bg-raised); border-radius: var(--radius-card); padding: var(--space-4) 0; display: flex; flex-direction: column; }
.card-pad { padding: var(--space-16); }
.card.row { flex-direction: row; }
.device-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-sunken); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.setting-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: var(--space-12) var(--space-16); text-align: left; width: 100%; }
.setting-row .value { flex: 0 0 auto; color: var(--text-secondary); font: 400 14px/20px var(--font-text); }
.setting-row > .icon { flex: 0 0 auto; }

.toggle { width: 48px; height: 28px; flex: 0 0 auto; border-radius: 14px; padding: 3px; background: var(--bg-sunken); display: flex; justify-content: flex-start; transition: background-color 180ms ease; }
.toggle::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--text-secondary); transition: transform 200ms cubic-bezier(.2, .8, .2, 1), background-color 180ms ease; }
.toggle.on { background: var(--accent-brand); }
.toggle.on::after { transform: translateX(20px); }
.toggle.on::after { background: var(--text-on-accent); }

.section-label { font: 400 13px/18px var(--font-text); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; padding: 0 var(--space-16) var(--space-8); }

.banner { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); background: var(--bg-raised); color: var(--warn-text); font: 400 14px/20px var(--font-text); }
.banner.info { color: var(--text-secondary); }

.fact { display: flex; gap: var(--space-16); align-items: center; color: var(--text-secondary); font: 400 14px/20px var(--font-text); }
.fact .icon-button { width: 36px; height: 36px; }

/* ---- chat list ---- */

.chat-list { display: flex; flex-direction: column; padding: 4px 0; }
.chat-row { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--gutter); width: 100%; text-align: left; border-radius: 0; }
.chat-row.selected { background: var(--bg-raised); }
.chat-row .name { font: 500 16px/23px var(--font-text); }
.chat-row .name.address { font: 400 19px/22px var(--font-pixel); }
.chat-row .preview { font: 400 14px/20px var(--font-text); color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.chat-row .preview.unseen { color: var(--text-primary); }
.chat-row .preview.missed { color: var(--danger-text); }
.chat-row .preview.alarm { color: var(--warn-text); }
.chat-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.chat-row .time { font: 400 13px/18px var(--font-text); color: var(--text-secondary); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.dot.on { background: var(--accent-brand); }

.me-bar { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-8) calc(var(--space-8) + var(--safe-bottom)) var(--gutter); background: var(--bg-raised); }

/* ---- messages ---- */

.messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px; }
.messages-spacer { flex: 1 1 auto; }
.group { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 100%; }
.group.out { align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 20px; background: var(--bg-raised); max-width: min(82%, 440px); overflow-wrap: anywhere; }
.bubble .text { white-space: pre-wrap; }
.group.out .bubble { background: var(--bubble-out); }
.group .bubble:last-of-type { border-bottom-left-radius: 8px; }
.group.out .bubble:last-of-type { border-bottom-left-radius: 20px; border-bottom-right-radius: 8px; }
.stamp { display: flex; align-items: center; gap: 4px; padding: 2px 14px; font: 400 13px/18px var(--font-text); color: var(--text-secondary); }
.stamp .retry { color: var(--text-primary); text-decoration: underline; }
.system-line { display: flex; justify-content: center; align-items: center; gap: var(--space-8); padding: var(--space-4) 0; font: 400 13px/18px var(--font-text); color: var(--text-secondary); text-align: center; }
.system-line.missed { color: var(--danger-text); }
.system-line.alarm { color: var(--warn-text); }
.attachment { display: flex; align-items: center; gap: 10px; }
.bubble.photo { padding: 4px; overflow: hidden; }
.bubble.photo img { display: block; width: auto; height: auto; max-width: 280px; max-height: 360px; border-radius: var(--radius-md); object-fit: cover; cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: calc(64px + var(--safe-top)) 0 calc(24px + var(--safe-bottom)); background: rgb(12 4 5 / 0.94); animation: fade-in 160ms ease-out; }
.viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; animation: zoom-in 200ms cubic-bezier(.2, .8, .2, 1); }
.viewer-bar { position: absolute; top: calc(8px + var(--safe-top)); left: 8px; right: 8px; display: flex; align-items: center; color: var(--text-primary); }
.round-outline { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave i { display: block; width: 3px; border-radius: 1.5px; background: currentColor; }
.typing { display: inline-flex; gap: 5px; padding: 12px 16px; border-radius: 20px; background: var(--bg-raised); align-self: flex-start; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---- composer ---- */

.composer { padding: 8px 16px calc(8px + var(--safe-bottom)); }
.capsule { display: flex; align-items: flex-end; gap: var(--space-8); min-height: 56px; padding: 6px 6px 6px 6px; border-radius: var(--radius-xl); background: var(--bg-input); border: 1px solid var(--line-input); }
.capsule:focus-within { border-color: var(--line-strong); }
.capsule textarea { flex: 1 1 auto; min-width: 0; resize: none; background: transparent; border: 0; outline: 0; padding: 10px 0; max-height: 140px; line-height: 23px; }
.capsule textarea::placeholder { color: var(--text-secondary); }
.capsule .icon-button { width: 44px; height: 44px; }
.capsule > .icon { margin-bottom: 12px; color: var(--text-secondary); }

/* ---- calls ---- */

.call { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; padding: calc(var(--space-24) + var(--safe-top)) var(--gutter-hero) calc(var(--space-32) + var(--safe-bottom)); background: var(--bg-base); text-align: center; }
.call.video { background: var(--bg-sunken); padding-left: 0; padding-right: 0; }
.call-controls { display: flex; gap: 20px; justify-content: center; align-items: flex-start; }
.call-button { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); font: 400 13px/18px var(--font-text); color: var(--text-secondary); }
.call-button > span { width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-raised); color: var(--text-primary); }
.call-button.danger > span { background: var(--danger-fill); color: var(--danger-on-fill); }
.call-button.solid > span { background: var(--fill-solid); color: var(--text-on-accent); }
.call-button.active > span { background: var(--fill-solid); color: var(--text-on-accent); }
.orb-rings { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
.orb-rings::before, .orb-rings::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--accent-brand); }
.orb-rings::before { inset: 0; opacity: 0.18; }
.orb-rings::after { inset: 20px; opacity: 0.32; }
.orb-rings .moon { transition: transform 0.12s ease-out; }
.remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg-sunken); }
.local-video { position: absolute; top: calc(68px + var(--safe-top)); right: 20px; width: 104px; height: 150px; border-radius: var(--radius-md); object-fit: cover; background: var(--bg-raised); border: 1px solid var(--line-default); }
.call-top { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; width: 100%; padding: 0 20px; text-align: left; }
.call-bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--space-32) + var(--safe-bottom)); z-index: 1; }

/* ---- overlays ---- */

.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(72, 25, 29, 0.72); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; gap: var(--space-16); align-items: stretch; padding: var(--space-8) var(--gutter) calc(var(--space-32) + var(--safe-bottom)); background: var(--bg-raised); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; max-width: 520px; margin: 0 auto; }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line-input); align-self: center; }
.modal { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(326px, calc(100% - 64px)); display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--bg-raised); border-radius: var(--radius-card); }
.menu { background: var(--bg-raised); border-radius: var(--radius-card); padding: var(--space-4) 0; display: flex; flex-direction: column; min-width: 240px; }
.menu button { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); min-height: 48px; text-align: left; }
.option { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); min-height: 48px; width: 100%; text-align: left; }
.radio { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-input); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.radio.on { border: 0; background: var(--accent-brand); color: var(--text-on-accent); }
.tile { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-16) 0; border-radius: var(--radius-card); background: var(--bg-input); }

.qr { display: grid; grid-template-columns: repeat(21, 1fr); width: 200px; height: 200px; padding: 0; background: var(--fill-solid); border-radius: 12px; overflow: hidden; }
.qr i { display: block; }
.qr i.on { background: var(--text-on-accent); }

.safety-number { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-4) var(--space-16); justify-content: center; font: 400 28px/32px var(--font-pixel); letter-spacing: 0.02em; }

/* ---- shell: one column on a phone, the list beside the dialogue from a tablet up, the call beside both on a wide screen ---- */

.shell { height: 100%; display: flex; }
.shell > .pane-list { display: none; }
.shell > .pane-main { flex: 1 1 auto; min-width: 0; height: 100%; }
.shell > .pane-call { display: contents; }
.wide-only { display: none; }
.computer-only { display: none; }

/* iPad in portrait, an unfolded Fold, a Mac window or Split View at half a screen */
@media (min-width: 700px) {
    .shell > .pane-list { display: flex; width: 300px; flex: 0 0 300px; border-right: 1px solid var(--line-default); }
    .phone-only { display: none; }
    .wide-only { display: flex; }
}

/* before the vault opens there is one screen and no list beside it: a column in the middle, not a stretched phone */
@media (min-width: 700px) {
    .shell.solo > .pane-main > .screen:not(.screen-wide) { width: 100%; max-width: 480px; margin: 0 auto; }
}

/* a computer — a mouse rather than a finger — opens on linking to the phone; an iPad keeps the phone's welcome */
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
    .computer-only { display: flex; }
    .handheld-only { display: none; }
}

/* too narrow for a third column: a voice call comes up as a sheet over both, a video call takes the whole screen */
@media (min-width: 700px) and (max-width: 1023.98px) {
    .shell > .pane-call:not(.video):not(:empty) { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--bg-sunken) 72%, transparent); }
    .shell .pane-call:not(.video) .call { position: relative; inset: auto; width: min(520px, 100%); height: min(860px, 100%); border-radius: var(--radius-xl); clip-path: inset(0 round var(--radius-xl)); box-shadow: 0 24px 80px rgb(0 0 0 / 0.45); }
}

@media (min-width: 1024px) {
    .shell > .pane-list { width: 340px; flex-basis: 340px; }
    .shell > .pane-call:not(:empty) { display: flex; flex: 0 0 360px; border-left: 1px solid var(--line-default); }
    .shell > .pane-call.video:not(:empty) { flex-basis: 520px; background: var(--bg-sunken); }
    .shell .pane-call .call { position: relative; height: 100%; width: 100%; }
    .messages { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); }
    .composer { padding-left: max(16px, calc((100% - 792px) / 2)); padding-right: max(16px, calc((100% - 792px) / 2)); }
    .shell > .pane-call:empty { display: none; }
}

/* a Fold opened like a book: the list on one panel, the dialogue on the other, nothing under the hinge */
@media (horizontal-viewport-segments: 2) {
    .shell > .pane-list { width: env(viewport-segment-width 0 0); flex-basis: env(viewport-segment-width 0 0); margin-right: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); }
}

/* a screen dragged back on a phone: the one it goes back to under it, the dragged one casting its edge over it */
@media (max-width: 699.98px) {
    .shell.swiping { overflow: hidden; }
    .shell.swiping > .pane-main { position: relative; z-index: 1; box-shadow: -12px 0 32px rgb(0 0 0 / 0.4); }
    .shell.swiping.solo > .pane-main, .swipe-under.solo { background: url("backgrounds/night.svg") center top / cover no-repeat, var(--bg-base); }
    .shell.swiping-list > .pane-list { display: flex; position: fixed; inset: 0; z-index: 0; }
    .swipe-under { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
    .swipe-under.solo .screen { background: transparent; }
}

.opening { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 56px; }
.opening::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-main { height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-16); color: var(--text-secondary); }

/* ---- backdrops: the night sky before the vault opens and around a call, quiet moons behind the conversation ---- */

.shell.solo, .call:not(.video) { background: url("backgrounds/night.svg") center top / cover no-repeat, var(--bg-base); }
.shell.solo .screen { background: transparent; }
.screen:has(.chat-list), .screen:has(.messages) { background: url("backgrounds/moons.svg") 0 0 / 480px repeat, var(--bg-base); }
@media (min-width: 700px) {
    .shell.solo { background-image: url("backgrounds/night-wide.svg"); }

    /* beside each other, the list and the dialogue share one field of moons rather than starting it twice */
    .shell:not(.solo) { background: url("backgrounds/moons.svg") 0 0 / 480px repeat, var(--bg-base); }
    .shell:not(.solo) .screen:has(.chat-list), .shell:not(.solo) .screen:has(.messages) { background: transparent; }
}

/* ---- groups ---- */

.group-moon { position: relative; display: inline-block; flex: 0 0 auto; width: var(--size); height: var(--size); }
.group-moon .member { position: absolute; display: flex; padding: max(2px, calc(var(--size) / 24)); border-radius: 50%; background: var(--bg-base); }
.group-moon .member:nth-child(1) { left: calc(var(--size) * -0.04); top: calc(var(--size) * -0.02); }
.group-moon .member:nth-child(2) { right: calc(var(--size) * -0.04); top: calc(var(--size) * 0.08); }
.group-moon .member:nth-child(3) { left: calc(var(--size) * 0.17); bottom: calc(var(--size) * -0.04); }
.chat-row.selected .group-moon .member, .card .group-moon .member { background: var(--bg-raised); }
.authored { display: flex; gap: 8px; align-items: flex-end; width: 100%; }
.authored > .author-moon { padding-bottom: var(--space-24); flex: 0 0 auto; }
.authored > .group { flex: 1 1 auto; min-width: 0; }
.author { font: 500 13px/18px var(--font-text); color: var(--accent-rose); padding: 0 6px; }
.author.address { font-family: var(--font-pixel); font-size: 15px; }
.member-row { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8) var(--space-16); width: 100%; text-align: left; }
.member-row .grow { min-width: 0; }
.check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-input); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.check.on { background: var(--accent-brand); border-color: var(--accent-brand); color: var(--text-on-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4); border-radius: var(--radius-pill); background: var(--bg-raised); }
.action-tiles { display: flex; gap: var(--space-12); width: 100%; }
.action-tiles > button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) 0; border-radius: var(--radius-card); background: var(--bg-raised); }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); width: 100%; max-width: 420px; }
.party { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); height: 230px; border-radius: var(--radius-card); background: var(--bg-raised); overflow: hidden; }
.party.speaking { box-shadow: inset 0 0 0 2px var(--accent-brand); }
.party > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg-sunken); }
.party > video.hidden { visibility: hidden; }
.party-name { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/18px var(--font-text); color: var(--text-primary); }
.party-name.over { position: absolute; left: var(--space-8); bottom: var(--space-8); padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-base) 70%, transparent); }
.pane-call .parties { max-width: 320px; }
.pane-call .party { height: 150px; }
.party-name.address { font-family: var(--font-pixel); font-size: 15px; }

/* ---- scan ---- */

.screen.scan { position: relative; background: var(--bg-sunken); }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.screen.scan > :not(.scan-video) { position: relative; z-index: 2; }
.screen.scan > .screen-body { z-index: 1; overflow: visible; }
.scan-frame { width: 260px; height: 260px; border-radius: var(--radius-xl); border: 2px solid var(--accent-brand); box-shadow: 0 0 0 2000px color-mix(in srgb, var(--bg-sunken) 55%, transparent); }

/* ---- motion: short, eased, never in the way; gone entirely for whoever asked the system for less of it ---- */

@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.94); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes from-left { from { opacity: 0; transform: translate(-16px, 8px) scale(0.96); } }
@keyframes from-right { from { opacity: 0; transform: translate(16px, 8px) scale(0.96); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -44%) scale(0.92); } }
@keyframes screen-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes pop { 0% { transform: scale(0); } 65% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ripple { from { transform: scale(0.8); opacity: 0.6; } to { transform: scale(1.22); opacity: 0; } }
@keyframes beckon { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fill-solid) 45%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } }

/* a screen slides in and its content follows it, one block after another */
.pane-main > .screen, .pane-list > .screen { animation: screen-in 320ms cubic-bezier(.2, .9, .25, 1); }
.screen-body > *, .screen-footer > * { animation: rise 360ms cubic-bezier(.2, .9, .25, 1) both; }
.screen-body > :nth-child(2), .screen-footer > :nth-child(2) { animation-delay: 40ms; }
.screen-body > :nth-child(3), .screen-footer > :nth-child(3) { animation-delay: 80ms; }
.screen-body > :nth-child(4) { animation-delay: 120ms; }
.screen-body > :nth-child(5) { animation-delay: 160ms; }
.screen-body > :nth-child(n+6) { animation-delay: 200ms; }

/* the list fills in from the top */
.chat-row { animation: rise 320ms cubic-bezier(.2, .9, .25, 1) both; }
.chat-row:nth-child(2) { animation-delay: 35ms; }
.chat-row:nth-child(3) { animation-delay: 70ms; }
.chat-row:nth-child(4) { animation-delay: 105ms; }
.chat-row:nth-child(5) { animation-delay: 140ms; }
.chat-row:nth-child(n+6) { animation-delay: 175ms; }
.dot.on { animation: pop 320ms cubic-bezier(.3, 1.4, .5, 1); }

/* letters come from the side they were written on */
.group.in .bubble { animation: from-left 280ms cubic-bezier(.2, .9, .25, 1) both; }
.group.out .bubble { animation: from-right 280ms cubic-bezier(.2, .9, .25, 1) both; }
.system-line, .typing, .banner { animation: rise 260ms ease-out both; }
.capsule > .icon-button { animation: zoom-in 180ms ease-out; }

.scrim { animation: fade-in 200ms ease-out; }
.sheet { animation: sheet-in 340ms cubic-bezier(.2, .9, .25, 1); }
.modal { animation: modal-in 280ms cubic-bezier(.3, 1.25, .5, 1); }
.call { animation: zoom-in 280ms cubic-bezier(.2, .9, .25, 1); }

/* a call that is not answered yet keeps reaching out; a call ringing here asks to be taken */
.orb-rings.waiting::before, .orb-rings.waiting::after { animation: ripple 2s ease-out infinite; }
.orb-rings.waiting::after { animation-delay: 1s; }
.call-button.solid > span { animation: beckon 1.6s ease-out infinite; }

.button, .icon-button, .chat-row, .setting-row, .menu button, .call-button > span, .tile { transition: transform 140ms ease, opacity 140ms ease, background-color 180ms ease; }
.chat-row:active, .setting-row:active, .menu button:active { background-color: var(--bg-raised); }
.icon-button:active, .call-button:active > span { transform: scale(0.9); }
.button:active:not(:disabled), .tile:active { transform: scale(0.96); }

@media (hover: hover) {
    .chat-row:hover:not(.selected), .setting-row:hover, .menu button:hover { background-color: color-mix(in srgb, var(--bg-raised) 60%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}