/* Sangama Studio - calm, uncluttered, nothing technical on screen. */

:root {
    --ink: #1c2230;
    --muted: #5f6878;
    --line: #e4e7ed;
    --bg: #f5f6f8;
    --panel: #ffffff;
    /* Brand greens from the logo: --accent = the standard green for OK/primary actions, --brand-light = logo light green */
    --accent: #657c05; /* white text on it: 4.7:1 */
    --accent-ink: #ffffff;
    --accent-text: #56700a;
    --link: #2a7aa3; /* darker logo blue (#3a9bcc), 4.9:1 on white */
    --brand-light: #a4cd39;
    --brand-blue: #3a9bcc; /* logo colors, used only in the wordmark - too light for running text */
    --accent-soft: color-mix(in oklab, var(--brand-light) 18%, white);
    --danger-soft: #fdecea;
    --danger-ink: #8a1c1c;
    --radius: 14px;
    --shadow: 0 1px 2px rgb(16 24 40 / .05), 0 8px 24px -8px rgb(16 24 40 / .12);
    --topbar: 3.5rem;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; block-size: 100%; }
body {
    display: flex;
    flex-direction: column;
    font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
}
button, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 55%, transparent); outline-offset: 2px; }

/* --- Top bar --- */

.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    block-size: var(--topbar);
    padding-inline: 1rem;
    border-block-end: 1px solid var(--line);
    background: var(--panel);
}
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
/* The logo is wide and flat inside a square 400x400 file: the top bar shows only the band with the rings
   (#svgView in index.html - the artwork spans y 59-301), so it is as big as the bar allows. The file itself stays
   square for the browser tab icon. A browser without svgView shows the whole square, never distorted. */
.brand__mark { inline-size: 2.284rem; block-size: 1.4535rem; object-fit: contain; } /* 36.5 x 23.3 px */
.brand__name { color: var(--brand-light); }
.brand__tag { font-weight: 500; color: var(--brand-blue); }
.badge { padding: .15rem .6rem; border-radius: 999px; background: #fff4d6; color: #7a5300; font-size: .8rem; font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; min-inline-size: 0; }

.select {
    max-inline-size: 16rem;
    padding: .4rem 2rem .4rem .75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6878' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 1rem;
    appearance: none;
    text-overflow: ellipsis;
}
.select--small { max-inline-size: none; }

/* --- Buttons --- */

.button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
}
.button:disabled { opacity: .45; cursor: default; }
.button--ghost { border-color: var(--line); background: var(--panel); }
.button--ghost:hover:not(:disabled) { background: var(--bg); }
.button--primary { background: var(--accent); color: var(--accent-ink); }
.button--primary:hover:not(:disabled) { background: color-mix(in oklab, var(--accent), black 12%); }
.button--danger { background: #b42318; color: #fff; }
.button--danger:hover:not(:disabled) { background: #912018; }

/* --- Layout --- */

.studio {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(20rem, 27rem) 1fr;
    min-block-size: 0;
}

/* --- Chat --- */

.chat {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    border-inline-end: 1px solid var(--line);
    background: var(--panel);
}
.chat__log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem 1rem;
    overflow-y: auto;
}

.message {
    max-inline-size: 92%;
    padding: .7rem .95rem;
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}
.message p { margin: 0; }
.message p + p, .message ul + p, .message p + ul { margin-block-start: .6em; }
.message ul { margin: 0; padding-inline-start: 1.2em; }
.message--assistant { align-self: flex-start; background: var(--bg); border-end-start-radius: 4px; }
.message--user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-end-end-radius: 4px; }
.message--error { align-self: stretch; background: var(--danger-soft); color: var(--danger-ink); }
.message--streaming::after { content: "▍"; margin-inline-start: .1em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.event {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: color-mix(in oklab, var(--accent), black 30%);
    font-size: .85rem;
    text-align: center;
}
.event::before { content: "✓"; font-weight: 700; }

.suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.suggestion {
    padding: .4rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: .9rem;
    text-align: start;
    cursor: pointer;
}
.suggestion:hover { border-color: var(--accent); color: var(--ink); }

.chat__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 1rem .5rem;
    padding: .6rem .85rem;
    border-radius: 12px;
    background: var(--accent-soft);
    font-size: .9rem;
}
.spinner {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
    border-block-start-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.progress { flex-basis: 100%; block-size: 4px; border-radius: 2px; background: color-mix(in oklab, var(--accent) 18%, transparent); overflow: hidden; }
.progress__bar { display: block; inline-size: 35%; block-size: 100%; border-radius: 2px; background: var(--accent); animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { translate: -100% 0; } to { translate: 300% 0; } }

.chat__composer {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin: 0 1rem;
    padding: .4rem .4rem .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}
.chat__composer:focus-within { border-color: var(--accent); }
.chat__composer textarea {
    flex: 1;
    max-block-size: 10rem;
    padding: .45rem 0;
    border: 0;
    outline: none;
    resize: none;
    background: none;
}
.button--send { padding: .55rem; border-radius: 10px; }
.button--icon { padding: .5rem; border-radius: 10px; color: var(--muted); }
.button--icon:hover { background: var(--bg); color: var(--accent-text); }
.chat__composer .button--icon { margin-inline-start: -.5rem; }

/* --- Photos: pending attachments, thumbnails in messages, drop zone --- */

.attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 1rem .5rem; }

/* AI budget: quiet hint when almost used up, a clear notice with the next step when used up */
.limit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    margin: 0 1rem .6rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .88rem;
}
.limit p { flex: 1 1 14rem; margin: 0; }
.limit[data-state="almost"] { background: var(--bg); color: var(--muted); }
.limit[data-state="blocked"] { border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); background: var(--accent-soft); color: var(--ink); }
.chat__composer:has(textarea:disabled) { opacity: .55; }
.attachment {
    position: relative;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 0 0 1px var(--line);
}
.attachment img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.attachment[data-state="uploading"] img { opacity: .45; }
.attachment[data-state="uploading"]::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    margin: -.6rem 0 0 -.6rem;
    border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
    border-block-start-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.attachment__remove {
    position: absolute;
    inset: .2rem .2rem auto auto;
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(16 24 40 / .7);
    color: #fff;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}

.message__photos { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-end: .4rem; }
.message__photos img { inline-size: 5.5rem; block-size: 5.5rem; border-radius: 8px; object-fit: cover; }
.message__photos:last-child { margin-block-end: 0; }

.chat { position: relative; }
.chat__drop {
    position: absolute;
    z-index: 5;
    inset: .5rem;
    display: none;
    place-items: center;
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--accent-soft) 88%, transparent);
    color: color-mix(in oklab, var(--accent), black 25%);
    font-weight: 600;
    pointer-events: none;
}
.chat--dragging .chat__drop { display: grid; }
.chat__hint { margin: .35rem 1rem .75rem; color: var(--muted); font-size: .75rem; }

/* --- Preview --- */

.preview { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.preview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 1rem;
    border-block-end: 1px solid var(--line);
    background: var(--panel);
}
.preview__actions { display: flex; align-items: center; gap: .5rem; }

.segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); }
.segmented button { padding: .3rem .8rem; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(16 24 40 / .12); }

.versions { position: relative; }
.versions > summary { list-style: none; }
.versions > summary::-webkit-details-marker { display: none; }
.versions__list {
    position: absolute;
    z-index: 5;
    inset-inline-end: 0;
    inset-block-start: calc(100% + .35rem);
    inline-size: min(22rem, 80vw);
    max-block-size: 60vh;
    margin: 0;
    padding: .35rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.versions__list button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .6rem;
    inline-size: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: start;
    cursor: pointer;
}
.versions__list button:hover { background: var(--bg); }
.versions__list .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.versions__list .time { color: var(--muted); font-size: .85rem; }
.versions__list [aria-current="true"] { background: var(--accent-soft); }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; padding: .5rem; }
.photos__empty { grid-column: 1 / -1; margin: .25rem; color: var(--muted); font-size: .9rem; }
.photo { position: relative; margin: 0; }
.photo img { display: block; inline-size: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.photo__used {
    position: absolute;
    inset: auto auto .3rem .3rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .7rem;
    font-weight: 600;
}
.photos .photo__delete {
    position: absolute;
    inset: .45rem .45rem auto auto;
    display: grid;
    grid-template-columns: none; /* not the version list's row layout (.versions__list button) - icon centered */
    gap: 0;
    place-items: center;
    inline-size: 1.7rem;
    block-size: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(16 24 40 / .7);
    color: #fff;
}
.photos .photo__delete:hover { background: #b42318; }

.preview__stage {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    min-block-size: 0;
    padding: 1rem;
    overflow: auto;
}
.preview__stage iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
    transition: inline-size .25s ease;
}
.preview__stage[data-device="phone"] iframe { inline-size: 390px; flex: none; }
.preview__stage[data-device="tablet"] iframe { inline-size: 820px; flex: none; }

.preview__empty { align-self: center; max-inline-size: 26rem; color: var(--muted); text-align: center; }
.preview__empty-title { margin: 1rem 0 .25rem; color: var(--ink); font-size: 1.2rem; font-weight: 600; }
.preview__empty p { margin: 0; }
.preview__empty-art {
    inline-size: 9rem;
    block-size: 6.5rem;
    margin-inline: auto;
    border: 2px dashed color-mix(in oklab, var(--accent) 35%, var(--line));
    border-radius: 12px;
    background:
        linear-gradient(var(--accent-soft) 0 0) 12% 16% / 45% 12% no-repeat,
        linear-gradient(var(--line) 0 0) 12% 42% / 76% 7% no-repeat,
        linear-gradient(var(--line) 0 0) 12% 58% / 60% 7% no-repeat,
        linear-gradient(color-mix(in oklab, var(--accent) 40%, white) 0 0) 12% 82% / 30% 12% no-repeat;
}

/* --- Account: "Speichern" button / avatar menu --- */

.account { display: flex; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.avatar {
    display: grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    text-transform: uppercase;
}
.menu {
    position: absolute;
    z-index: 10;
    inset-inline-end: 0;
    inset-block-start: calc(100% + .4rem);
    min-inline-size: 15rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.menu__label { margin: 0; color: var(--muted); font-size: .8rem; }
.menu__email { margin: 0 0 .75rem; font-weight: 600; overflow-wrap: anywhere; }
.menu .button { inline-size: 100%; justify-content: center; }

/* --- Dialogs + toast --- */

.dialog {
    inline-size: min(28rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 16px;
    color: var(--ink);
    box-shadow: 0 24px 64px -12px rgb(16 24 40 / .35);
}
.dialog::backdrop { background: rgb(16 24 40 / .35); backdrop-filter: blur(2px); }
.dialog__body { padding: 1.5rem; }
.dialog h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.dialog p { margin: 0 0 1rem; color: var(--muted); }
.field { display: grid; gap: .3rem; font-weight: 500; }
.field input {
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field select { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.field [aria-invalid="true"] { border-color: var(--danger-ink); background: var(--danger-soft); }
.dialog__error { margin: .6rem 0 0 !important; color: var(--danger-ink) !important; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-block-start: 1.25rem; }

.dialog__hint { font-size: .9rem; }
.button--left { margin-inline-end: auto; }

/* Own domain */
.dialog--wide { inline-size: min(40rem, calc(100vw - 2rem)); }
.domain-search { display: flex; gap: .5rem; }
.domain-search input {
    flex: 1;
    min-inline-size: 0;
    padding: .65rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 1.05rem;
}
.domain-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.domain-search + .dialog__hint { margin-block-start: .5rem; }
.domain-results { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.domain-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .6rem .55rem .9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.domain-result__name { font-weight: 600; overflow-wrap: anywhere; }
.domain-result--off { background: var(--bg); }
.domain-result--off .domain-result__name { color: var(--muted); font-weight: 500; }
.domain-result__why { color: var(--muted); font-size: .85rem; text-align: end; }
.domain-results__wait { color: var(--muted); }
.domain-chosen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; color: var(--ink) !important; }
.domain-chosen strong { font-size: 1.1rem; }
.button--link { padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; cursor: pointer; }

/* Contact form: 6-column grid - a field spans 3 (half), --third 2, --wide 4, --narrow 2; one column on phones */
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.fields .field { grid-column: span 3; }
.fields .field--third { grid-column: span 2; }
.fields .field--wide { grid-column: span 4; }
.fields .field--narrow { grid-column: span 2; }
.fields input, .fields select { min-inline-size: 0; }
@media (max-width: 560px) {
    .fields .field, .fields .field--third, .fields .field--wide { grid-column: 1 / -1; }
    .fields .field--narrow { grid-column: span 3; }
}

.domain-status__name strong { color: var(--ink); font-size: 1.2rem; }
.domain-steps { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.domain-steps li { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.domain-steps li::before {
    content: "";
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border: 2px solid var(--line);
    border-radius: 50%;
}
.domain-steps [data-state="done"] { color: var(--ink); }
.domain-steps [data-state="done"]::before { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 75% no-repeat; }
.domain-steps [data-state="current"] { color: var(--ink); font-weight: 600; }
.domain-steps [data-state="current"]::before { border-color: var(--accent); border-block-start-color: transparent; animation: spin 1s linear infinite; }
.domain-steps [data-state="failed"]::before { border-color: var(--danger-ink); background: var(--danger-soft); }
@media (prefers-reduced-motion: reduce) { .domain-steps [data-state="current"]::before { animation: none; } }

/* Publishing: the website's fixed address */
.address--readonly {
    padding: .65rem .8rem;
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink) !important;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Trial: small countdown in the toolbar, banner from day 20 */
.trial-chip { padding: .2rem .65rem; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .8rem; white-space: nowrap; }
.trial-banner { padding: .7rem 1rem; border-block-end: 1px solid #f0d9a0; background: #fff4d6; color: #5c3d00; font-size: .9rem; }
.trial-banner[data-state="expired"] { border-color: #f5c2bd; background: var(--danger-soft); color: var(--danger-ink); }
.trial-banner strong { font-weight: 700; }

.notice { margin-block-start: 1rem; padding: .75rem .9rem; border-radius: 10px; background: #fff4d6; color: #5c3d00; font-size: .9rem; }
.notice ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.notice--info { background: var(--accent-soft); color: color-mix(in oklab, var(--accent), black 35%) !important; }

/* Anfragen (paid websites): button with unread count + list of submissions */
#inbox { display: inline-flex; align-items: center; gap: .4rem; }
#inbox[hidden] { display: none; }
.count {
    min-inline-size: 1.35rem; padding: .05rem .4rem; border-radius: 999px;
    background: var(--link); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.3; text-align: center;
}
.inbox { display: grid; gap: .5rem; margin-block: 1rem .5rem; max-block-size: min(60dvh, 34rem); overflow-y: auto; }
.inbox__empty { margin-block: 1.5rem; color: var(--muted); text-align: center; }
.inbox__more { justify-self: center; }
.inbox-item { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.inbox-item summary {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    cursor: pointer; list-style: none;
}
.inbox-item summary::-webkit-details-marker { display: none; }
.inbox-item summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: 10px; }
.inbox-item__dot { flex: none; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--link); }
.inbox-item[data-read="true"] .inbox-item__dot { background: transparent; }
.inbox-item__who { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item[data-read="false"] .inbox-item__who { font-weight: 700; }
.inbox-item__when { flex: none; color: var(--muted); font-size: .85rem; }
.inbox-item__body { padding: 0 .9rem .9rem 2.05rem; }
.inbox-item__body .notice { margin-block: 0 .75rem; }
.inbox-item dl { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: .35rem 1rem; margin: 0; }
.inbox-item dt { color: var(--muted); font-size: .9rem; }
.inbox-item dd { margin: 0; overflow-wrap: anywhere; }
.inbox-item__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .75rem; }
@media (width < 30rem) {
    .inbox-item dl { grid-template-columns: 1fr; }
    .inbox-item dd { margin-block-end: .4rem; }
    .inbox-item__body { padding-inline-start: .9rem; }
}
.published-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.published-link a { color: var(--link); font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }

.button--online { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); background: var(--accent-soft); color: color-mix(in oklab, var(--accent), black 25%); }

/* A popover (index.html): it joins the top layer, so it shows above an open modal dialog - z-index can't do that */
.toast {
    position: fixed;
    z-index: 20;
    inset: auto auto 1.25rem 50%;
    translate: -50% 0;
    max-inline-size: calc(100vw - 2rem);
    margin: 0;
    border: 0;
    padding: .7rem 1.1rem;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    box-shadow: var(--shadow);
}

/* --- Small screens: chat on top, preview below --- */

@media (width < 56rem) {
    .studio { grid-template-columns: 1fr; grid-template-rows: minmax(22rem, 55dvh) minmax(28rem, 1fr); }
    .chat { border-inline-end: 0; border-block-end: 1px solid var(--line); }
    #new-project span, #open span, #save-account span { display: none; }
    .topbar { gap: .5rem; padding-inline: .75rem; }
    .topbar__right #project-select { flex: 1 1 6rem; min-inline-size: 4.5rem; max-inline-size: 12rem; }
    .select--small { max-inline-size: 6.5rem; }
    .preview__actions { flex-wrap: wrap; }
}

@media (width < 30rem) {
    .brand__tag, .badge { display: none; }
}