:root {
    --bg: #ffffff;
    --panel: #f5f6fa;
    --surface: #ffffff;
    --input: #f2f3f7;
    --border: #e5e7ee;
    --border-strong: #cfd3dd;
    --text: #1d1d22;
    --text-muted: #6b6f7b;
    --text-faint: #a4a8b3;
    --accent: #2b3f7e;
    --accent-hover: #213166;
    --on-accent: #ffffff;
    --accent-soft: rgba(43, 63, 126, 0.1);
    --danger: #c0392b;
    --ink: #23211f;
    --ink-muted: rgba(35, 33, 31, 0.62);
    --shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 24px rgba(20, 24, 40, 0.07);
    --shadow-lg: 0 4px 8px rgba(20, 24, 40, 0.06), 0 24px 56px rgba(20, 24, 40, 0.16);
    --radius: 16px;
    --font: 'Mulish', system-ui, -apple-system, sans-serif;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #17181d;
    --panel: #0f1014;
    --surface: #1e2026;
    --input: #25272e;
    --border: #2b2e36;
    --border-strong: #3d414b;
    --text: #eceef3;
    --text-muted: #a2a6b1;
    --text-faint: #6d717c;
    --accent: #9fb0ff;
    --accent-hover: #b8c5ff;
    --on-accent: #111320;
    --accent-soft: rgba(159, 176, 255, 0.14);
    --danger: #ef6b5b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #17181d;
        --panel: #0f1014;
        --surface: #1e2026;
        --input: #25272e;
        --border: #2b2e36;
        --border-strong: #3d414b;
        --text: #eceef3;
        --text-muted: #a2a6b1;
        --text-faint: #6d717c;
        --accent: #9fb0ff;
        --accent-hover: #b8c5ff;
        --on-accent: #111320;
        --accent-soft: rgba(159, 176, 255, 0.14);
        --danger: #ef6b5b;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

/* Note palette: --card is the bold note color, --soft the folder tint, --deep the icon color */
.c-yellow { --card: #e8e07e; --soft: #fdfbe6; --deep: #d6cb4a; }
.c-pink   { --card: #f0a9a9; --soft: #fddad8; --deep: #d9776b; }
.c-blue   { --card: #71b5e0; --soft: #ddedfd; --deep: #8f93f5; }
.c-green  { --card: #95d4aa; --soft: #dff5e6; --deep: #4fae72; }
.c-purple { --card: #b8acf2; --soft: #ebe8fe; --deep: #8a7cea; }

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

[hidden] { display: none !important; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

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

.i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ---------- Layout ---------- */
.app {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 24px 28px;
    background: var(--bg);
    overflow-y: auto;
}

.main-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content {
    flex: 1;
    background: var(--panel);
    border-top-left-radius: 28px;
    padding: 36px 40px 96px;
    transition: background-color 0.3s ease;
}

/* ---------- Sidebar ---------- */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 92px;
    flex-shrink: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
}

.brand-mark .i { width: 16px; height: 16px; }

.brand-name {
    font-weight: 700;
    letter-spacing: 0.22em;
    font-size: 0.9rem;
    color: var(--accent);
}

.add-new {
    margin-top: 36px;
}

.add-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 0;
}

.add-btn .i { width: 20px; height: 20px; }

.color-dots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 0 22px;
}

.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card);
    transition: transform 0.15s, box-shadow 0.15s;
}

.color-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 3px var(--panel);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 32px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-faint);
    text-align: left;
    transition: color 0.2s, background 0.2s;
}

.nav-item:hover {
    color: var(--text);
    background: var(--panel);
}

.nav-item.active {
    color: var(--text);
    font-weight: 700;
}

.nav-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}

.side-card {
    margin-top: auto;
    padding-top: 32px;
    text-align: center;
}

.illustration {
    width: 120px;
    height: 90px;
    margin-bottom: 8px;
}

.streak {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.streak strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.side-card-meta {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 92px;
    padding: 0 40px 0 0;
}

h1 {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 0 14px;
    height: 42px;
    width: min(320px, 100%);
    border-radius: 10px;
    background: var(--input);
    border: 1px solid transparent;
    color: var(--text-faint);
    transition: border-color 0.2s;
}

.search:focus-within {
    border-color: var(--accent);
}

.search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    outline: none;
}

.search input::placeholder { color: var(--text-faint); }

.profile {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 4px 4px 10px;
    border-radius: 999px;
    transition: background 0.2s;
}

.profile:hover { background: var(--panel); }

.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.75rem;
    font-weight: 800;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--text);
    transition: background 0.2s;
}

.icon-btn:hover { background: var(--panel); }

/* ---------- Sections ---------- */
.welcome {
    margin-bottom: 28px;
}

.welcome-date {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.welcome-greeting {
    font-size: 1rem;
    color: var(--text-muted);
}

.section + .section {
    margin-top: 40px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.back-link:hover { color: var(--text); }

.tabs {
    display: flex;
    gap: 28px;
    margin: 14px 0 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab {
    position: relative;
    padding: 4px 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    transition: color 0.2s;
}

.tab:hover { color: var(--text-muted); }

.tab[aria-selected="true"] {
    color: var(--text);
}

.tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70%;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transform: translateX(-50%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.grid-empty {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: -8px 0 16px;
}

/* ---------- Folder cards ---------- */
.folder-card {
    display: flex;
    flex-direction: column;
    min-height: 116px;
    padding: 16px 16px 16px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.folder-card:hover,
.note-card[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.tinted { background: var(--soft); }

:root[data-theme="dark"] .tinted {
    background: color-mix(in srgb, var(--deep) 22%, var(--surface));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tinted {
        background: color-mix(in srgb, var(--deep) 22%, var(--surface));
    }
}

.folder-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.folder-icon {
    width: 32px;
    height: 32px;
    color: var(--deep);
}

.more-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -4px -6px 0 0;
    border-radius: 8px;
    color: var(--text);
    transition: background 0.2s;
}

.more-btn:hover { background: rgba(127, 127, 127, 0.15); }

.folder-card h3 {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- New tiles ---------- */
.new-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 116px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    transition: border-color 0.2s, background 0.2s;
}

.new-tile:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.new-tile .i { width: 20px; height: 20px; }

.notes-grid .new-tile { min-height: 220px; }

/* ---------- Note cards ---------- */
.note-card {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 20px 18px 16px;
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.note-card[role="button"] { cursor: pointer; }

:root[data-theme="dark"] .note-card { background: color-mix(in srgb, var(--card) 88%, #000); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .note-card { background: color-mix(in srgb, var(--card) 88%, #000); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.note-date {
    font-size: 0.68rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(35, 33, 31, 0.14);
}

.note-head h3 {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-edit {
    width: 18px;
    height: 18px;
    color: var(--ink);
    flex-shrink: 0;
}

.note-body {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--ink-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink);
}

.note-foot .i { width: 16px; height: 16px; }

.note-mood {
    margin-left: auto;
    font-size: 1rem;
    line-height: 1;
}

.note-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.note-card .chip {
    background: rgba(255, 255, 255, 0.45);
    color: var(--ink);
}

.note-card .chip:hover { background: rgba(255, 255, 255, 0.7); }
.note-card .chip.danger { color: #9e2a1e; }

mark {
    background: rgba(255, 255, 255, 0.65);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* ---------- Calendar ---------- */
.month-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.month-nav button {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.month-nav button:hover {
    background: var(--surface);
    color: var(--text);
}

.month-nav .i { width: 14px; height: 14px; }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 18px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.cal-weekday {
    padding-bottom: 6px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 58px;
    padding: 8px 2px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s;
}

.cal-day:hover { background: var(--panel); }

.cal-day.is-today .cal-num {
    color: var(--accent);
    font-weight: 800;
}

.cal-day[aria-pressed="true"] {
    background: var(--accent);
    color: var(--on-accent);
}

.cal-day[aria-pressed="true"] .cal-num { color: inherit; }

.cal-dots {
    display: flex;
    gap: 3px;
}

.cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card);
}

/* ---------- Buttons ---------- */
.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--accent);
    color: var(--on-accent);
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.2s, transform 0.15s;
}

.primary-btn:hover { background: var(--accent-hover); }
.primary-btn:active { transform: scale(0.97); }
.primary-btn.block { width: 100%; }
.primary-btn.danger { background: var(--danger); color: #fff; }

.ghost-btn {
    padding: 9px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.ghost-btn:hover {
    background: var(--panel);
    color: var(--text);
}

.ghost-btn.danger { color: var(--danger); }
.ghost-btn.danger:hover { background: rgba(192, 57, 43, 0.1); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(127, 127, 127, 0.12);
    transition: background 0.2s, color 0.2s;
}

.chip:hover {
    background: rgba(127, 127, 127, 0.2);
    color: var(--text);
}

.chip.danger:hover { color: var(--danger); }
.chip .i { width: 14px; height: 14px; }

kbd {
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
}

.fab {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-lg);
    z-index: 5;
}

.fab .i { width: 24px; height: 24px; }

/* ---------- Dialogs ---------- */
dialog {
    margin: auto;
    border: none;
    padding: 0;
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

dialog::backdrop {
    background: rgba(12, 14, 22, 0.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

dialog[open] { animation: pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes pop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.editor {
    width: min(660px, calc(100% - 32px));
    border-radius: 22px;
}

.editor-form {
    display: flex;
    flex-direction: column;
    padding: 18px 24px 18px;
}

.editor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.icon-btn.ghost:hover { background: rgba(127, 127, 127, 0.15); }

.swatches {
    display: flex;
    gap: 8px;
}

.swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s, box-shadow 0.15s;
}

.swatch:hover { transform: scale(1.12); }

.swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}

.editor-title {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    font-weight: 800;
    outline: none;
    padding: 6px 0;
}

.editor-title::placeholder,
.editor textarea::placeholder { color: var(--text-faint); }

.editor-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.editor-meta select {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    background: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

:root[data-theme="dark"] .editor-meta select { background: rgba(0, 0, 0, 0.2); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .editor-meta select { background: rgba(0, 0, 0, 0.2); }
}

.moods {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.mood {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1rem;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.2s, opacity 0.2s, background 0.2s, transform 0.15s;
}

.mood:hover {
    filter: none;
    opacity: 1;
    background: rgba(127, 127, 127, 0.12);
}

.mood[aria-checked="true"] {
    filter: none;
    opacity: 1;
    background: rgba(127, 127, 127, 0.18);
    transform: scale(1.08);
}

.editor-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
}

.word-count {
    margin-left: auto;
    margin-right: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ask {
    width: min(380px, calc(100% - 32px));
    border-radius: 18px;
    background: var(--surface);
}

.ask form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
}

.ask h3 {
    font-size: 1.1rem;
    font-weight: 800;
}

.ask-text {
    margin-top: -6px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.ask input {
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--input);
    outline: none;
}

.ask input:focus { border-color: var(--accent); }

.ask-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ---------- Popover ---------- */
.popover {
    position: fixed;
    z-index: 20;
    min-width: 190px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: pop 0.15s ease;
}

.pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
}

.pop-item:hover,
.pop-item:focus-visible {
    background: var(--panel);
    outline: none;
}

.pop-item .i { width: 16px; height: 16px; color: var(--text-muted); }
.pop-item.danger, .pop-item.danger .i { color: var(--danger); }

.pop-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

.mobile-only { display: none; }

/* ---------- Empty state ---------- */
.empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 24px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 12px 12px 18px;
    border-radius: 12px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    max-width: calc(100% - 32px);
    z-index: 30;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.toast-undo {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    color: var(--accent);
}

:root:not([data-theme="dark"]) .toast-undo { color: #b8c5ff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toast-undo { color: var(--on-accent); }
}
:root[data-theme="dark"] .toast-undo { color: var(--on-accent); }

.toast-undo:hover { background: rgba(127, 127, 127, 0.2); }
.toast-undo[hidden] { display: none; }

/* ---------- Shared bits for social + AI ---------- */
.small { font-size: 0.78rem; }

.avatar.sm {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    font-size: 0.72rem;
}

.badge:not(:empty) {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 800;
}

.companion-link { color: var(--accent); }
.companion-link .i { color: var(--accent); }

.companion-btn { color: var(--accent); }
body.companion-open .companion-btn { background: var(--accent-soft); }

.send-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 12px;
}

/* ---------- Editor: sharing + AI ---------- */
.share-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.share-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.35);
    transition: background 0.2s;
}

.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.share-toggle input:checked + .switch { background: var(--accent); }
.share-toggle input:checked + .switch::after { transform: translateX(14px); }
.share-toggle input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.ai-chip {
    color: var(--accent);
    background: var(--accent-soft);
}

.ai-chip:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }

.ai-panel {
    margin: 4px 0 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.ai-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.ai-panel-head .i { width: 14px; height: 14px; }

.ai-output {
    margin: 10px 0 12px;
    max-height: 30vh;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.streaming::after,
.bubble.streaming p::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--accent);
    animation: blink 1s steps(2) infinite;
}

@keyframes blink { to { opacity: 0; } }

.ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-actions .primary-btn { padding: 7px 14px; font-size: 0.8rem; }

/* ---------- Auth dialog ---------- */
.auth { width: min(400px, calc(100% - 32px)); }

.auth-tabs { margin: 0; }

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.field input {
    font-weight: 500;
    color: var(--text);
}

.auth-message {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    background: var(--accent-soft);
    color: var(--text);
}

.auth-message.error {
    background: rgba(192, 57, 43, 0.1);
    color: var(--danger);
}

/* ---------- Feed ---------- */
.feed { max-width: 680px; }

.head-actions { display: flex; gap: 8px; }

.feed-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
}

.post {
    padding: 16px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.post-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.post-who {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.post-who strong { font-size: 0.92rem; }
.post-who .muted { font-size: 0.75rem; }

.post-body {
    padding: 16px 18px;
    border-radius: 14px;
}

.post-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.post-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.post-text {
    font-size: 0.92rem;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-text.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

.post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s, transform 0.15s;
}

.like-btn:hover { background: var(--panel); color: var(--text); }
.like-btn[aria-pressed="true"] { color: #e0566b; }
.like-btn:active { transform: scale(0.92); }

/* ---------- Inbox (chat) ---------- */
:root {
    --chat-in: #e3f7e6;
    --chat-in-border: #c9edd0;
    --chat-out: #f1f2f5;
    --online: #2fbf5b;
    --dark-btn: #17181c;
    --on-dark-btn: #ffffff;
}

:root[data-theme="dark"] {
    --chat-in: #1d3325;
    --chat-in-border: #28452f;
    --chat-out: #25272e;
    --dark-btn: #eceef3;
    --on-dark-btn: #111217;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chat-in: #1d3325;
        --chat-in-border: #28452f;
        --chat-out: #25272e;
        --dark-btn: #eceef3;
        --on-dark-btn: #111217;
    }
}

body[data-view="messages"] .content { padding: 20px; }

.inbox {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    height: calc(100vh - 92px - 40px);
    min-height: 520px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.inbox.show-info { grid-template-columns: 300px minmax(0, 1fr) 290px; }

/* List pane */
.inbox-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--border);
}

.inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 10px;
}

.inbox-head h2 { font-size: 1.15rem; }

.icon-btn.solid {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--dark-btn);
    color: var(--on-dark-btn);
}

.icon-btn.solid:hover { background: var(--dark-btn); opacity: 0.85; }
.icon-btn.solid .i { width: 16px; height: 16px; }

.add-friend {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
}

.add-friend input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--input);
    font-size: 0.85rem;
    outline: none;
}

.add-friend input:focus { border-color: var(--accent); }

.inbox-search {
    width: auto;
    height: 38px;
    margin: 0 16px 8px;
}

.inbox-tabs {
    display: flex;
    gap: 4px;
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--border);
}

.inbox-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.inbox-tab:hover { background: var(--panel); }
.inbox-tab[aria-selected="true"] { background: var(--panel); color: var(--text); }
.inbox-tab .badge:not(:empty) { min-width: 18px; height: 18px; font-size: 0.65rem; }

.convo-list {
    flex: 1;
    overflow-y: auto;
}

.convo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    transition: background 0.15s;
}

button.convo:hover { background: var(--panel); }

.convo.active {
    background: color-mix(in srgb, var(--chat-in) 70%, transparent);
    box-shadow: inset 3px 0 0 var(--online);
}

.convo.static { align-items: flex-start; }

.convo-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.convo-top,
.convo-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.convo-top strong {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convo-top time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.convo-preview {
    font-size: 0.8rem;
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convo.unread .convo-preview { color: var(--text); font-weight: 600; }
.convo .badge:not(:empty) { background: var(--dark-btn); color: var(--on-dark-btn); min-width: 18px; height: 18px; font-size: 0.65rem; }

.convo .row-actions { display: flex; gap: 6px; margin-top: 8px; }
.chip.accent { background: var(--accent); color: var(--on-accent); }
.chip.accent:hover { background: var(--accent-hover); color: var(--on-accent); }

.inbox-empty {
    padding: 28px 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.inbox-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); }

/* Avatars with presence */
.avatar { position: relative; }
.avatar.xs { width: 26px; height: 26px; font-size: 0.6rem; flex-shrink: 0; }
.avatar.md { width: 42px; height: 42px; font-size: 0.8rem; flex-shrink: 0; }
.avatar.lg { width: 52px; height: 52px; font-size: 0.95rem; flex-shrink: 0; }

.presence-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--online);
    display: none;
}

.avatar.online .presence-dot { display: block; }
.avatar.xs .presence-dot { width: 8px; height: 8px; }

/* Chat pane */
.chat-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.chat-placeholder .i { width: 36px; height: 36px; color: var(--text-faint); }

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.friend-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
}

.friend-name small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.chat-head .icon-btn[aria-pressed="true"] { background: var(--panel); }
.back-chat { display: none; }

.chat-thread,
.companion-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    overflow-y: auto;
    background: var(--surface);
}

.chat-empty {
    margin: auto;
    max-width: 280px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.day-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.day-sep::before,
.day-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 78%;
    animation: rise 0.25s ease both;
}

.msg.out { align-self: flex-end; }

.msg-card {
    position: relative;
    min-width: 120px;
    padding: 10px 14px 10px;
    border-radius: 14px;
}

.msg.in .msg-card {
    background: var(--chat-in);
    border: 1px solid var(--chat-in-border);
    border-bottom-left-radius: 4px;
}

.msg.out .msg-card {
    background: var(--chat-out);
    border: 1px solid var(--border);
    border-bottom-right-radius: 4px;
}

.msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.msg-head strong { font-size: 0.8rem; }
.msg-head time { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.msg-body { font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }

.msg-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.msg-img {
    display: block;
    width: 180px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--panel);
}

.msg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-audio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.msg-audio audio { height: 36px; max-width: 230px; }

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.file-chip span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.file-chip small { font-weight: 500; color: var(--text-muted); }
.file-chip:hover { border-color: var(--accent); }
.file-chip .i { width: 16px; height: 16px; flex-shrink: 0; }

.ticks {
    position: absolute;
    right: 10px;
    bottom: -18px;
    color: var(--text-faint);
}

.ticks .i { width: 15px; height: 15px; }
.ticks.read { color: var(--online); }
.msg.out { margin-bottom: 12px; }

.media-missing { opacity: 0.4; }

/* Composer */
.composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
}

.composer.busy { opacity: 0.6; pointer-events: none; }

.pending-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pending {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 6px 6px 6px 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.pending img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.pending-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-name small { font-weight: 500; color: var(--text-muted); }

.composer-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.composer-box {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 8px 6px 14px;
    border-radius: 14px;
    background: var(--input);
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.composer-box:focus-within { border-color: var(--accent); }

.chat-input {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    max-height: 160px;
    padding: 7px 0;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.45;
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.tool-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.tool-btn:hover,
.tool-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.tool-btn .i { width: 18px; height: 18px; }
.tool-btn .aa { font-size: 0.82rem; font-weight: 800; }

.emoji-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 2px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.emoji-panel button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 1.15rem;
}

.emoji-panel button:hover { background: var(--panel); }

.send-btn.dark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--dark-btn);
    color: var(--on-dark-btn);
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.2s;
}

.send-btn.dark:hover { opacity: 0.88; }
.send-btn.dark:active { transform: scale(0.95); }

/* Contact details */
.chat-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px;
    border-left: 1px solid var(--border);
    overflow-y: auto;
}

.close-info { position: absolute; top: 10px; right: 10px; }

.info-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 30px;
}

.info-head div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.info-head strong { font-size: 1rem; }
.info-head small { font-size: 0.78rem; color: var(--text-muted); }

.info-actions {
    display: flex;
    gap: 8px;
    margin: 4px 0 6px;
}

.icon-btn.outline { border: 1px solid var(--border-strong); }
.icon-btn.outline[aria-pressed="true"] { color: var(--text-faint); }

.primary-btn.dark {
    flex: 1;
    background: var(--dark-btn);
    color: var(--on-dark-btn);
}

.primary-btn.dark:hover { background: var(--dark-btn); opacity: 0.88; }

.info-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--panel);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
}

.info-row b {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.info-row.toggle { cursor: pointer; }
.info-row.toggle .share-toggle { margin-left: auto; }
.info-row.danger { color: var(--danger); background: none; }
.info-row.danger:hover { background: rgba(192, 57, 43, 0.08); }

.info-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.info-ic .i { width: 15px; height: 15px; }
.info-ic.green { background: #dff5e6; color: #2e9e5b; }
.info-ic.blue { background: #ddedfd; color: #3a7bc8; }
.info-ic.pink { background: #fddad8; color: #c4574b; }
.info-ic.yellow { background: #fdf6d6; color: #a88a10; }
.info-ic.purple { background: #ebe8fe; color: #6b5fd6; }
.info-ic.red { background: #fde2df; color: #c0392b; }

.info-label {
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.info-media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.info-media .msg-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.chat-info .file-chip { max-width: 100%; border-radius: 10px; }

/* Shared bubble style — used by the AI companion */
.bubble {
    max-width: 82%;
    align-self: flex-start;
    padding: 9px 14px;
    border-radius: 18px 18px 18px 6px;
    background: var(--chat-out);
    animation: rise 0.25s ease both;
}

.bubble.mine {
    align-self: flex-end;
    border-radius: 18px 18px 6px 18px;
    background: var(--accent);
    color: var(--on-accent);
}

.bubble p {
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.compose-row textarea {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    max-height: 160px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--input);
    font-size: 0.9rem;
    line-height: 1.4;
    resize: none;
    outline: none;
}

.compose-row textarea:focus { border-color: var(--accent); }


/* ---------- Companion panel ---------- */
.companion {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 15;
    width: min(400px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slide-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes slide-in {
    from { opacity: 0; transform: translateX(24px); }
}

.companion-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid var(--border);
}

.companion-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--on-accent);
}

.companion-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.companion-title small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.companion-intro {
    margin: auto 0;
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.companion-hello {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.suggestions .chip {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    text-align: left;
}

.suggestions .chip:hover { border-color: var(--accent); }

.companion-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
}

.context-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
}

.context-toggle input { accent-color: var(--accent); }

/* ---------- Rich text ---------- */
.rich { outline: none; overflow-wrap: anywhere; }

.rich:empty::before {
    content: attr(data-placeholder);
    color: var(--text-faint);
    pointer-events: none;
}

.rich blockquote,
.rich-content blockquote {
    margin: 6px 0;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
    font-style: italic;
}

.rich pre,
.rich-content pre {
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(20, 24, 40, 0.07);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85em;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-x: auto;
}

.rich code,
.rich-content code {
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(20, 24, 40, 0.08);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.86em;
}

.rich pre code,
.rich-content pre code { padding: 0; background: none; }

.rich a,
.rich-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich ul,
.rich ol,
.rich-content ul,
.rich-content ol { padding-left: 22px; margin: 4px 0; }

:root[data-theme="dark"] .rich pre, :root[data-theme="dark"] .rich-content pre,
:root[data-theme="dark"] .rich code, :root[data-theme="dark"] .rich-content code { background: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rich pre, :root:not([data-theme="light"]) .rich-content pre,
    :root:not([data-theme="light"]) .rich code, :root:not([data-theme="light"]) .rich-content code { background: rgba(255, 255, 255, 0.08); }
}

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.1);
}

.rich-toolbar.compact { background: none; padding: 0; }

.tb-btn {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.tb-btn:hover { background: rgba(127, 127, 127, 0.16); color: var(--text); }
.tb-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.tb-btn .i { width: 17px; height: 17px; }

.tb-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(127, 127, 127, 0.3);
}

/* ---------- Journal editor ---------- */
.editor { width: min(760px, calc(100% - 32px)); }

.editor-form {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    gap: 10px;
}

.editor-top { gap: 12px; flex-wrap: wrap; }
.editor-top #editor-close { margin-left: auto; }

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.12);
}

.segmented button {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.segmented button[aria-checked="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.editor-meta { gap: 10px; padding-bottom: 10px; }

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(127, 127, 127, 0.45);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.meta-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-chip .i { width: 14px; height: 14px; flex-shrink: 0; }
.meta-chip.set { border-style: solid; color: var(--text); background: rgba(255, 255, 255, 0.35); }

.share-toggle .i { width: 14px; height: 14px; }
.share-toggle.disabled { opacity: 0.45; cursor: not-allowed; }

.feel-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.feel-row .moods { margin-left: 0; }

.emotions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.emotion-chip,
.emotion-add {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(127, 127, 127, 0.3);
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.emotion-chip:hover,
.emotion-add:hover { border-color: var(--text-muted); color: var(--text); }

.emotion-chip[aria-pressed="true"],
.emotion-chip.on {
    background: var(--text);
    border-color: var(--text);
    color: var(--surface);
}

.emotion-add { border-style: dashed; }

.emotion-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.08);
}

.editor-body {
    min-height: 200px;
    padding: 6px 2px;
    font-size: 1rem;
    line-height: 1.75;
}

.attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.att-thumb {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.12);
}

.att-thumb.drawing { background: #fffdf7; }
.att-view { display: block; width: 100%; height: 100%; }
.att-view img { width: 100%; height: 100%; object-fit: cover; }

.att-audio,
.att-file {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 34px 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(127, 127, 127, 0.2);
}

.att-audio audio { height: 34px; max-width: 240px; }

.att-file a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.att-file span { display: flex; flex-direction: column; line-height: 1.25; }
.att-file small { font-weight: 500; color: var(--text-muted); }

.att-remove {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-muted);
    flex-shrink: 0;
}

.att-remove:hover { background: rgba(127, 127, 127, 0.2); color: var(--text); }
.att-remove .i { width: 13px; height: 13px; }

.att-thumb .att-remove,
.att-audio .att-remove,
.att-file .att-remove {
    position: absolute;
    top: 6px;
    right: 6px;
}

.att-thumb .att-remove { background: rgba(0, 0, 0, 0.55); color: #fff; }

.reflection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reflection:empty { display: none; }

.reflect-block {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(127, 127, 127, 0.18);
}

:root[data-theme="dark"] .reflect-block,
:root[data-theme="dark"] .att-audio,
:root[data-theme="dark"] .att-file { background: rgba(0, 0, 0, 0.18); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .reflect-block,
    :root:not([data-theme="light"]) .att-audio,
    :root:not([data-theme="light"]) .att-file { background: rgba(0, 0, 0, 0.18); }
}

.reflect-block label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.reflect-block textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
    outline: none;
}

.goal-edit {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-edit li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-edit input[type="checkbox"],
.goal-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}

.goal-text,
.goal-new {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    outline: none;
}

.goal-text.done { text-decoration: line-through; color: var(--text-muted); }
.goal-new { width: 100%; margin-top: 4px; border-bottom: 1px dashed rgba(127, 127, 127, 0.35); }

.reflect-adders {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.save-state {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.save-state + .word-count { margin-left: 0; }

/* ---------- Today ---------- */
.today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.today-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 104px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

button.today-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.today-card.morning { background: linear-gradient(135deg, #fff6d9, #fde9c8); color: var(--ink); }
.today-card.evening { background: linear-gradient(135deg, #e6e3fd, #d7e4fb); color: var(--ink); }
.today-card.done { outline: 2px solid color-mix(in srgb, var(--online, #2fbf5b) 60%, transparent); }

:root[data-theme="dark"] .today-card.morning { background: linear-gradient(135deg, #3a3222, #3b2c1f); color: var(--text); }
:root[data-theme="dark"] .today-card.evening { background: linear-gradient(135deg, #27244a, #1f2c45); color: var(--text); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .today-card.morning { background: linear-gradient(135deg, #3a3222, #3b2c1f); color: var(--text); }
    :root:not([data-theme="light"]) .today-card.evening { background: linear-gradient(135deg, #27244a, #1f2c45); color: var(--text); }
}

.today-icon { font-size: 1.6rem; line-height: 1; }

.today-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.today-text strong { font-size: 0.98rem; }
.today-text span { font-size: 0.8rem; opacity: 0.75; }

.today-card.goals {
    flex-direction: column;
    gap: 8px;
}

.today-goals-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.92rem;
}

.goal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.goal-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.goal-list input:checked + span { text-decoration: line-through; color: var(--text-muted); }

.today-card.memory { padding: 0; min-height: 120px; }

.today-card.memory img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.memory-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ---------- Note cards: journal extras ---------- */
.note-thumb {
    width: 100%;
    height: 84px;
    margin-bottom: 10px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.35);
}

.has-thumb .note-body { -webkit-line-clamp: 2; }
.is-private .note-body { font-style: italic; }

.note-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.note-badges .i { width: 14px; height: 14px; }
.note-badges .note-mood { margin-left: 0; }

.cal-mood { font-size: 1rem; line-height: 1; }

/* ---------- Insights ---------- */
.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stat-tile-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.stat-tile-label { font-size: 0.8rem; color: var(--text-muted); }

.insight-card {
    padding: 18px 20px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.insight-card h3 {
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 700;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.mood-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 6px;
}

.mood-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--panel);
}

.mood-day.no-mood { opacity: 0.55; }
.mood-day-emoji { height: 22px; font-size: 1.05rem; line-height: 22px; }
.mood-day-num { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bar-track {
    height: 10px;
    border-radius: 4px;
    background: var(--panel);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
}

.bar-row:hover .bar-fill { background: var(--accent-hover); }
.bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* ---------- Photo memories ---------- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.photo-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.photo-tile:hover { transform: scale(1.02); }

.photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-date {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ---------- Voice, drawing and photo dialogs ---------- */
.voice-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 24px 22px;
}

.rec-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5484d;
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    50% { transform: scale(1.35); opacity: 0.6; }
}

.voice-label { font-weight: 700; }

.voice-timer {
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.voice .ask-actions { width: 100%; justify-content: center; margin-top: 6px; }

.draw {
    width: min(820px, calc(100% - 24px));
    padding: 16px;
    border-radius: 20px;
    background: var(--surface);
}

.draw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.draw-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.draw-tools .ink {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.draw-tools .ink.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }

.draw-tools .size {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.draw-tools .size span { border-radius: 50%; background: var(--text); }
.draw-tools .size.on { background: var(--panel); }

.draw-canvas {
    display: block;
    width: 100%;
    height: min(60vh, 480px);
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fffdf7;
    cursor: crosshair;
    touch-action: none;
}

.draw .ask-actions { margin-top: 12px; }

.lightbox {
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 0;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    cursor: zoom-out;
}

.lightbox img {
    display: block;
    max-width: 100%;
    max-height: 86vh;
    border-radius: 16px;
    object-fit: contain;
}

.lightbox-caption {
    margin-top: 8px;
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.lightbox::backdrop { background: rgba(8, 9, 14, 0.82); }

/* ---------- Shared: link buttons, avatar stacks, counts ---------- */
:root {
    --board-blue: #3b6fd8;
    --dot-red: #e5484d;
    --dot-amber: #f5a524;
    --dot-green: #30a46c;
    --story-ring: linear-gradient(45deg, #f59e0b, #ec4899 55%, #8b5cf6);
}

.link-btn {
    padding: 2px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
}

.link-btn:hover { text-decoration: underline; }
.link-btn.center { display: block; margin: 8px auto 0; }
.link-btn.accent { color: var(--board-blue); }

.count-dot {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--dot-red);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    vertical-align: 2px;
}

.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--surface); box-sizing: content-box; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar.more { background: var(--panel); color: var(--text); font-size: 0.68rem; }
.avatar.xl { width: 76px; height: 76px; font-size: 1.3rem; }

.icon-btn.accent { color: var(--board-blue); }

/* ---------- Feed (social) ---------- */
body[data-view="feed"] .content { padding: 24px; }

.social {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.social-left,
.social-right {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 18px;
    border-bottom: 1.5px dashed var(--border);
    text-align: center;
}

.profile-card .avatar.xl {
    margin-bottom: 8px;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--board-blue);
}

.verified {
    position: absolute;
    right: 0;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--board-blue);
    color: var(--on-accent);
    border: 2px solid var(--surface);
}

.verified .i { width: 10px; height: 10px; }
.profile-card strong { font-size: 1.05rem; }
.profile-card small { font-size: 0.78rem; color: var(--text-muted); }

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 14px;
}

.profile-stats div { display: flex; flex-direction: column; }
.profile-stats b { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.profile-stats span { font-size: 0.72rem; color: var(--text-muted); }

.social-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 16px;
    border-bottom: 1.5px dashed var(--border);
}

.social-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
}

.social-nav-item:hover { background: var(--panel); color: var(--text); }
.social-nav-item.active { color: var(--board-blue); background: color-mix(in srgb, var(--board-blue) 10%, transparent); }

.contacts h4,
.side-box h4 {
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 800;
}

.contact-row,
.suggest-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.contact-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.contact-name strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-name small { font-size: 0.72rem; color: var(--text-muted); }

.social-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.feed-search {
    flex: 1;
    width: auto;
    height: 48px;
    margin: 0;
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: 14px;
}

.create-post {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
    transition: transform 0.15s, box-shadow 0.2s;
}

.create-post:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(168, 85, 247, 0.38); }

.block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0 16px;
}

.block-head h2 { font-size: 1.35rem; }

.stories {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
}

.story {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
}

.story-ring {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    padding: 3px;
    border-radius: 50%;
    background: var(--story-ring);
    transition: transform 0.2s;
}

.story:hover .story-ring { transform: scale(1.05); }
.story-ring .avatar { width: 58px; height: 58px; font-size: 1rem; border: 3px solid var(--panel); box-sizing: content-box; }
.story-ring.seen { background: var(--border-strong); }

.story-ring.add {
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    color: var(--text);
}

.story-ring.add .i { width: 22px; height: 22px; }

.feed-sort {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.feed-sort button {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.feed-sort button[aria-pressed="true"] { background: var(--board-blue); color: var(--on-accent); }
.filter-chip { margin: -4px 0 14px; }

.social .feed-list { margin-top: 0; gap: 22px; }

.social .post {
    padding: 18px 20px;
    border-radius: 20px;
}

.social .post-head { margin-bottom: 14px; }
.social .post-who { flex: 1; }
.social .post-who strong { font-size: 0.95rem; }

.post-photos {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    border-radius: 14px;
    overflow: hidden;
}

.post-photos.n1 { grid-template-columns: 1fr; grid-auto-rows: 320px; }
.post-photos.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
.post-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 150px 150px; }
.post-photos.n4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 100px); }
.post-photos.n5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 130px 130px; }
.post-photos.n3 .post-photo:first-child { grid-row: span 2; }
.post-photos.n4 .post-photo:first-child { grid-row: span 3; }
.post-photos.n5 .post-photo:first-child { grid-row: span 2; }

.post-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--panel);
    overflow: hidden;
}

.post-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.post-photo:hover img { transform: scale(1.03); }

.photo-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}

.post-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.social .post-text { font-size: 0.9rem; line-height: 1.65; color: var(--text-muted); }
.social .post-text.clamped { -webkit-line-clamp: 3; }
.social .read-more { color: var(--text); font-weight: 800; }

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
}

.tag-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--board-blue);
}

.tag-link:hover { text-decoration: underline; }

.social .post-foot {
    justify-content: flex-start;
    gap: 14px;
    margin-top: 14px;
}

.save-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 10px;
    color: var(--text-muted);
}

.save-btn:hover { background: var(--panel); }
.save-btn[aria-pressed="true"] { color: var(--board-blue); }

.side-box { padding-bottom: 18px; border-bottom: 1.5px dashed var(--border); }
.side-box:last-of-type { border-bottom: none; }

.request-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.84rem;
    line-height: 1.4;
}

.request-actions { display: flex; gap: 16px; margin-top: 4px; }
.request-actions .link-btn:not(.accent) { color: var(--text-muted); }

.active-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--board-blue) 10%, var(--surface)), color-mix(in srgb, #ec4899 8%, var(--surface)));
}

.active-card p { font-size: 0.9rem; }
.active-card b { font-size: 1.4rem; font-weight: 800; }
.active-card small { font-size: 0.78rem; color: var(--text-muted); }

/* ---------- Story viewer ---------- */
.story-viewer {
    width: min(420px, calc(100% - 24px));
    height: min(86vh, 740px);
    padding: 14px;
    border-radius: 24px;
    background: #0d0f14;
    color: #fff;
    overflow: hidden;
}

.story-viewer[open] { display: flex; flex-direction: column; }
.story-viewer::backdrop { background: rgba(5, 6, 10, 0.88); }

.story-bars {
    display: flex;
    gap: 4px;
}

.story-bars span {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}

.story-bars i { display: block; width: 0; height: 100%; background: #fff; }
.story-bars .done i { width: 100%; }
.story-bars .active i { animation: story-fill 7s linear forwards; }

@keyframes story-fill { to { width: 100%; } }

.story-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    position: relative;
    z-index: 2;
}

.story-head div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.story-head small { font-size: 0.75rem; opacity: 0.7; }
.story-head .icon-btn { color: #fff; }
.story-head .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }

.story-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 18px;
    color: var(--text);
    overflow-y: auto;
}

.story-card h3 { font-size: 1.3rem; font-weight: 800; }
.story-card .rich-content { font-size: 1rem; line-height: 1.7; }
.story-photo { width: 100%; max-height: 50%; object-fit: cover; border-radius: 12px; }
.story-mood { font-size: 2rem; }

.story-nav {
    position: absolute;
    top: 90px;
    bottom: 0;
    width: 30%;
    z-index: 1;
}

.story-nav.prev { left: 0; }
.story-nav.next { right: 0; }

/* ---------- Voice notes (WhatsApp style) ---------- */
.vn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(290px, 64vw);
    padding: 2px 0;
}

.vn-play {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--online);
    color: #fff;
    transition: transform 0.15s;
}

.vn-play:active { transform: scale(0.92); }
.vn-play .i { width: 18px; height: 18px; }
.msg.out .vn-play { background: var(--dark-btn); color: var(--on-dark-btn); }

.vn-main { flex: 1; min-width: 0; }

.vn-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    cursor: pointer;
}

.vn-wave span {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text) 28%, transparent);
    transition: background 0.1s;
}

.vn-wave span.played { background: var(--online); }
.msg.out .vn-wave span.played { background: var(--board-blue); }

.vn-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.vn-speed {
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 10%, transparent);
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--text-muted);
}

.vn-mic {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--online);
    flex-shrink: 0;
}

.vn-mic .i { width: 16px; height: 16px; }
.vn.playing .vn-mic { animation: pulse 1.2s ease-in-out infinite; }

/* Recording bar replaces the composer while recording */
.rec-bar {
    display: none;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 14px 6px 6px;
    border-radius: 14px;
    background: var(--input);
}

.composer.recording .composer-box,
.composer.recording .pending-atts,
.composer.recording .rich-toolbar { display: none !important; }
.composer.recording .rec-bar { display: flex; }

.rec-bar .rec-dot { width: 10px; height: 10px; flex-shrink: 0; }
.rec-trash { color: var(--danger); }
.rec-time { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; }

.rec-wave {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 28px;
    overflow: hidden;
}

.rec-wave span {
    width: 3px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--dot-red);
}

.rec-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

#chat-action { touch-action: none; user-select: none; -webkit-user-select: none; }
#chat-action[data-mode="recording"] { background: var(--dot-red); color: #fff; transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--dot-red) 22%, transparent); }
#chat-action[data-mode="rec-send"] { background: var(--online); color: #fff; }

/* ---------- Round 3 responsive ---------- */
@media (max-width: 1320px) {
    .social { grid-template-columns: minmax(0, 1fr) 270px; }
    .social-left { display: none; }
}

@media (max-width: 900px) {
    .social { grid-template-columns: minmax(0, 1fr); }
    .social-right { position: static; max-height: none; }
    .social-right .active-card { display: none; }
}

@media (max-width: 760px) {
    body[data-view="feed"] .content { padding: 16px 12px 96px; }
    .social-top { gap: 10px; }
    .create-post { padding: 0 14px; }
    .create-post span, .create-post { font-size: 0; gap: 0; }
    .create-post .i { width: 22px; height: 22px; }
    .post-photos.n1 { grid-auto-rows: 220px; }
    .post-photos.n2 { grid-auto-rows: 180px; }
    .post-photos.n5 { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 100px 100px; }
    .post-photos.n5 .post-photo:first-child { grid-row: auto; grid-column: span 2; }
    .rec-hint { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-height: 960px) {
    .illustration { display: none; }
    .add-new { margin-top: 20px; }
    .color-dots { flex-direction: row; padding-left: 30px; gap: 6px; }
    .side-nav { margin-top: 22px; gap: 2px; }
    .nav-item { padding-top: 7px; padding-bottom: 7px; }
}

@media (max-width: 1280px) {
    .inbox { position: relative; }
    .inbox.show-info { grid-template-columns: 300px minmax(0, 1fr); }
    .chat-info {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 4;
        width: 300px;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }
    .inbox:not(.show-info) .chat-info { display: none; }
}

@media (min-width: 1281px) {
    .close-info { display: none; }
    .inbox:not(.show-info) .chat-info { display: none; }
}

@media (max-width: 1000px) {
    .inbox, .inbox.show-info { grid-template-columns: 250px minmax(0, 1fr); }
    .app { grid-template-columns: 190px minmax(0, 1fr); }
    .sidebar { padding: 0 18px 24px; }
    .content { padding: 28px 24px 96px; }
    .topbar { padding-right: 24px; gap: 16px; }
    .profile #user-name { display: none; }
}

@media (max-width: 760px) {
    .app { display: block; }
    .sidebar { display: none; }
    .mobile-only { display: flex; }
    .fab { display: grid; }

    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 16px 16px 14px;
        gap: 12px;
    }

    h1 { font-size: 1.5rem; flex: 1; }
    .search { order: 3; width: 100%; margin: 0; }
    .profile { padding: 2px; }

    .content {
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
        padding: 24px 16px 104px;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .note-card { min-height: 190px; padding: 16px 14px 14px; }
    .notes-grid .new-tile { min-height: 190px; }
    .tabs { gap: 20px; }
    .cal-day { min-height: 46px; }
    .calendar { padding: 10px; gap: 2px; }

    .editor-form { padding: 16px; }
    .moods { margin-left: 0; }
    kbd { display: none; }

    .inbox,
    .inbox.show-info {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100dvh - 176px);
        min-height: 420px;
        border-radius: 18px;
    }
    .inbox.has-active .inbox-list { display: none; }
    .inbox:not(.has-active) .chat-pane { display: none; }
    .inbox-list { border-right: none; }
    .back-chat { display: grid; }
    .chat-info { width: 100%; }
    .msg { max-width: 90%; }
    .msg-img { width: 150px; height: 110px; }
    .chat-thread { padding: 14px 12px; }
    .composer { padding: 10px; }
    .composer-tools [data-action="chat-file"] { display: none; }
    body[data-view="messages"] .content { padding: 12px 12px 16px; }
    .bubble { max-width: 88%; }
    .today-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .today-card { min-height: 90px; padding: 12px; }
    .today-card.goals, .today-card.memory { grid-column: 1 / -1; }
    .bar-row { grid-template-columns: 96px minmax(0, 1fr) 24px; }
    .editor-top .segmented { order: 3; width: 100%; justify-content: space-between; }
    .editor-top .segmented button { flex: 1; padding: 6px 4px; }

    .companion {
        inset: 0;
        width: 100%;
        border-radius: 0;
        border: none;
    }
    body.companion-open .fab,
    body[data-view="messages"] .fab { display: none; }
}

@media (max-width: 380px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
}

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

/* =========================================================
   Notes page (notes-app style), feed composer, phone layout
   ========================================================= */

/* ---------- Notes header ---------- */
.notes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.notes-title {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.notes-meta {
    display: flex;
    gap: 36px;
    flex-shrink: 0;
}

.meta-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meta-label { font-size: 0.8rem; color: var(--text-muted); }

.meta-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
}

.meta-value .i { width: 18px; height: 18px; color: var(--text-muted); }

/* ---------- Templates ---------- */
.templates {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.template-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
    scroll-snap-align: start;
    transition: transform 0.2s, box-shadow 0.2s;
}

.template-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.template-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.2rem;
}

.tone-yellow { background: #fff3cc; }
.tone-pink { background: #fde0ea; }
.tone-green { background: #dcf5e5; }
.tone-blue { background: #e0ebff; }
.tone-purple { background: #ebe4ff; }

:root[data-theme="dark"] .template-icon { background: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .template-icon { background: rgba(255, 255, 255, 0.08); }
}

.template-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.template-text strong { font-size: 0.9rem; white-space: nowrap; }
.template-text small { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }

/* ---------- Drafts toolbar + folder chips ---------- */
.notes-bar .tabs { margin: 0; }

.folder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 20px;
}

.folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.82rem;
    font-weight: 700;
    transition: border-color 0.15s, transform 0.15s;
}

.folder-chip:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--deep); }
.folder-chip.add { border-style: dashed; color: var(--text-muted); background: transparent; }
.folder-chip.add .i { width: 14px; height: 14px; }

/* ---------- Masonry note cards ---------- */
.masonry {
    columns: 4 230px;
    column-gap: 18px;
}

.mcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 0 0 18px;
    padding: 16px 16px 12px;
    break-inside: avoid;
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 52%, #ffffff);
    color: var(--ink);
    text-align: left;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
    animation: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.mcard[role="button"] { cursor: pointer; }

.mcard[role="button"]:hover {
    transform: translateY(-4px) rotate(-1.2deg);
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

.mcard.has-photo { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

:root[data-theme="dark"] .mcard:not(.has-photo):not(.new-note) { background: color-mix(in srgb, var(--card) 78%, #000); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mcard:not(.has-photo):not(.new-note) { background: color-mix(in srgb, var(--card) 78%, #000); }
}

.mcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mcard-tags span {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.mcard.has-photo .mcard-tags span { background: var(--soft); }

.mcard h3 {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mcard-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    object-fit: cover;
    background: var(--panel);
}

.mcard-body {
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 0.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcard.is-private .mcard-body { font-style: italic; }

.mcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.mcard-date { font-size: 0.72rem; opacity: 0.7; font-variant-numeric: tabular-nums; }

.mcard-edit {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mcard-edit .i { width: 15px; height: 15px; }
.mcard-actions { display: flex; gap: 6px; }
.mcard .chip { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.mcard .chip.danger { color: #9e2a1e; }

.mcard.new-note {
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 150px;
    border: 1.5px dashed var(--border-strong);
    background: transparent;
    color: var(--text);
}

.mcard.new-note:hover { border-color: var(--accent); background: var(--accent-soft); }
.mcard.new-note .i { width: 22px; height: 22px; margin-bottom: 6px; }
.mcard.new-note small { color: var(--text-muted); font-size: 0.78rem; }

/* ---------- Feed composer ---------- */
.post-composer {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.pc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pc-row textarea {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--input);
    font-size: 0.95rem;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.pc-row textarea:focus { border-color: var(--accent); }

.pc-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pc-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--panel);
}

.pc-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pc-thumb .att-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.pc-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.pc-tool {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pc-tool:hover { background: var(--panel); color: var(--text); }
.pc-tool .i { width: 18px; height: 18px; color: #2e9e5b; }
.pc-tool.camera .i { color: #d9534f; }

@media (hover: hover) and (pointer: fine) {
    .pc-tool.camera { display: none; }
}

.pc-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-size: 0.74rem;
    color: var(--text-faint);
}

.pc-note .i { width: 13px; height: 13px; }

.pc-post {
    padding: 9px 22px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.86rem;
    font-weight: 800;
}

.pc-post:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Phone tab bar (hidden on larger screens) ---------- */
.tabbar { display: none; }

@media (max-width: 760px) {
    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 12;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
    }

    .tab-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 0 4px;
        border-radius: 12px;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-faint);
    }

    .tab-item .i { width: 22px; height: 22px; }
    .tab-item.active { color: var(--accent); }
    .tab-item.active .i { transform: translateY(-1px); }

    .tab-badge:not(:empty) {
        position: absolute;
        top: 2px;
        left: calc(50% + 6px);
        min-width: 18px;
        height: 18px;
        font-size: 0.62rem;
    }

    #menu-btn { display: none; }

    .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
    .fab { bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; }
    .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
    body[data-view="feed"] .fab,
    body[data-view="messages"] .fab,
    body[data-view="communities"] .fab,
    body[data-view="community"] .fab { display: none; }

    .inbox,
    .inbox.show-info { height: calc(100dvh - 176px - 70px - env(safe-area-inset-bottom)); }
    body[data-view="messages"] .content { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

    /* Notes page */
    .notes-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
    .notes-title { font-size: 1.5rem; }
    .notes-meta { gap: 24px; }
    .notes-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
    .template-card { min-width: 170px; padding: 12px; }
    .template-icon { width: 36px; height: 36px; font-size: 1.05rem; }
    .masonry { columns: 2 140px; column-gap: 12px; }
    .mcard { margin-bottom: 12px; padding: 13px 13px 10px; gap: 8px; border-radius: 14px; }
    .mcard[role="button"]:hover { transform: none; box-shadow: none; }
    .mcard[role="button"]:active { transform: scale(0.98); }
    .mcard h3 { font-size: 0.95rem; }
    .mcard-body { -webkit-line-clamp: 3; }
    .mcard-date { font-size: 0.68rem; }

    /* Editor becomes a full-screen page */
    .editor {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .editor[open] { animation: slide-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }

    .editor-form {
        height: 100dvh;
        max-height: 100dvh;
        padding: calc(12px + env(safe-area-inset-top)) 14px 0;
    }

    .editor-title { font-size: 1.3rem; }
    .editor-body { min-height: 160px; }
    .editor-meta { gap: 8px; }
    .editor-meta select { max-width: 150px; }

    .rich-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tb-btn { min-width: 36px; height: 36px; flex-shrink: 0; }

    .editor-foot {
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin: auto -14px 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: inherit;
        border-top: 1px solid rgba(127, 127, 127, 0.18);
    }

    .editor-foot .save-state { display: none; }

    /* Feed */
    .pc-note { display: none; }
    .pc-post { margin-left: auto; }
    .story-viewer {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        padding-top: calc(14px + env(safe-area-inset-top));
    }

    /* Dialogs sit comfortably above the keyboard */
    .ask { margin: auto 12px; width: auto; max-width: calc(100% - 24px); }
}

@keyframes slide-up {
    from { transform: translateY(24px); opacity: 0; }
}

@media (max-width: 340px) {
    .masonry { columns: 1; }
    .tab-item span:not(.tab-badge) { font-size: 0.6rem; }
}

/* =========================================================
   Instagram / Facebook style posts, comments, communities
   ========================================================= */

/* ---------- Post card ---------- */
.post.ig { padding: 0; overflow: hidden; }
.post.ig .post-head { padding: 14px 16px 12px; margin: 0; }
.post.ig .post-who { flex: 1; min-width: 0; }

.post-media {
    position: relative;
    background: #000;
    user-select: none;
}

.carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    max-height: 640px;
    width: 100%;
    background: #0d0f14;
    cursor: zoom-in;
}

.carousel[data-count="1"] .slide { aspect-ratio: auto; min-height: 240px; }

.slide img {
    width: 100%;
    height: 100%;
    max-height: 640px;
    object-fit: cover;
}

.carousel[data-count="1"] .slide img { object-fit: contain; height: auto; }

.slide-count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
}

.dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s, transform 0.2s;
}

.dots span.on { background: #fff; transform: scale(1.2); }

.burst {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
}

.burst .i { width: 96px; height: 96px; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35)); }
.burst.pop { animation: burst 0.8s ease-out; }

@keyframes burst {
    0% { opacity: 0; transform: scale(0.4); }
    20% { opacity: 1; transform: scale(1.1); }
    40% { transform: scale(0.95); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: scale(1); }
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 2px;
}

.post-actions .act {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    color: var(--text);
    transition: transform 0.15s, background 0.15s;
}

.post-actions .act:hover { background: var(--panel); }
.post-actions .act:active { transform: scale(0.88); }
.post-actions .act .i { width: 24px; height: 24px; }
.post-actions .like-btn[aria-pressed="true"] { color: #ed4956; }
.post-actions .save-btn { margin-left: auto; }
.post-actions .save-btn[aria-pressed="true"] { color: var(--text); }

.post-likes {
    padding: 0 16px;
    font-size: 0.88rem;
    font-weight: 800;
}

.post-caption {
    padding: 4px 16px 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.post-caption.text-only {
    padding: 0 16px 6px;
    font-size: 1.02rem;
}

.post-caption.text-only .post-text { color: var(--text); font-size: 1rem; }
.cap-name { margin-right: 4px; }
.cap-title { display: block; margin: 2px 0; }
.post.ig .post-text { display: inline; color: var(--text); }
.post.ig .post-text.clamped { display: -webkit-box; -webkit-line-clamp: 3; }
.post.ig .read-more { font-weight: 700; color: var(--text-muted); }
.post.ig .post-tags { padding: 4px 16px 0; margin: 0; }

.post-badge {
    margin-left: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------- Comments ---------- */
.comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 16px 14px;
}

.muted-link { align-self: flex-start; color: var(--text-muted); font-weight: 600; }

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.comment {
    display: flex;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.comment p { overflow-wrap: anywhere; }

.comment-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-faint);
}

.comment-meta .link-btn { font-size: 0.72rem; color: var(--text-faint); }

.comment-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.comment-form input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    outline: none;
}

.comment-form .link-btn { font-size: 0.86rem; }

/* ---------- Communities list ---------- */
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.cm-card {
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.cm-cover {
    display: grid;
    place-items: center;
    height: 92px;
}

.cm-emoji {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: -58px;
    border-radius: 18px;
    border: 4px solid var(--surface);
    background: var(--surface);
    font-size: 1.8rem;
    box-shadow: var(--shadow);
}

.cm-info { padding: 36px 18px 8px; }
.cm-info h3 { font-size: 1.05rem; font-weight: 800; }
.cm-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.cm-desc {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cm-card-foot { padding: 8px 18px 16px; margin-top: auto; }

.cm-role {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
}

.cm-new {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    border: 1.5px dashed var(--border-strong);
    background: transparent;
    box-shadow: none;
}

.cm-new small { color: var(--text-muted); font-size: 0.8rem; }

.cm-new-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: var(--accent);
    color: var(--on-accent);
}

/* ---------- Community page ---------- */
.cm-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 22px;
    margin-bottom: 8px;
}

.cm-hero-emoji {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 22px;
    background: var(--surface);
    font-size: 2.2rem;
    box-shadow: var(--shadow);
}

.cm-hero-text { flex: 1; min-width: 0; }
.cm-hero-text h2 { font-size: 1.6rem; font-weight: 800; }
.cm-hero-text p { margin-top: 4px; font-size: 0.9rem; color: var(--text-muted); }

.cm-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cm-posts {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cm-posts .post-composer { margin-top: 0; }
.cm-posts .feed-list { margin-top: 0; }
.pc-tool.note .i { color: #6b5fd6; }

.cm-join-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--accent-soft);
}

.cm-members {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 18px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.cm-about {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-about .info-row b { font-weight: 600; text-align: right; }
.invite-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; }

/* ---------- Create dialog ---------- */
.cm-dialog { width: min(460px, calc(100% - 24px)); }

.cm-emoji-pick {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.cm-emoji-opt {
    aspect-ratio: 1;
    border-radius: 10px;
    font-size: 1.3rem;
    background: var(--panel);
    transition: transform 0.15s, box-shadow 0.15s;
}

.cm-emoji-opt:hover { transform: scale(1.08); }
.cm-emoji-opt[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }

.cm-dialog textarea {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--input);
    font-weight: 500;
    color: var(--text);
    resize: vertical;
    outline: none;
}

.cm-dialog textarea:focus { border-color: var(--accent); }

.vis-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vis-choice label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    cursor: pointer;
}

.vis-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.vis-choice input { margin-top: 3px; accent-color: var(--accent); }
.vis-choice span { display: flex; flex-direction: column; font-size: 0.85rem; }
.vis-choice small { color: var(--text-muted); font-size: 0.74rem; }

@media (max-width: 760px) {
    .post.ig { border-radius: 16px; }
    .slide, .slide img { max-height: 70vh; }
    .cm-hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
    .cm-hero-emoji { width: 60px; height: 60px; font-size: 1.8rem; border-radius: 18px; }
    .cm-hero-text h2 { font-size: 1.3rem; }
    .cm-hero-actions { width: 100%; }
    .cm-hero-actions .primary-btn { flex: 1; }
    .cm-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cm-card { flex-direction: row; align-items: center; }
    .cm-cover { width: 76px; height: auto; align-self: stretch; }
    .cm-emoji { margin: 0; width: 48px; height: 48px; font-size: 1.4rem; border-radius: 14px; }
    .cm-info { flex: 1; min-width: 0; padding: 12px; }
    .cm-card-foot { padding: 0 12px 0 0; margin: 0; }
    .cm-new { flex-direction: column; min-height: 120px; }
    .cm-emoji-pick { grid-template-columns: repeat(8, 1fr); gap: 4px; }
    .vis-choice { grid-template-columns: 1fr; }
    .head-actions .create-post,
    .head-actions .create-post span { font-size: 0.82rem; gap: 8px; }
}

/* =========================================================
   Profile photos, voice calls, iPhone-Notes editor on phones
   ========================================================= */

/* ---------- Profile photos ---------- */
.avatar.has-photo { background: var(--panel); overflow: visible; }

.avatar.has-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar.xs.has-photo, .avatar.sm.has-photo { overflow: hidden; }

.profile-photo {
    position: relative;
    display: inline-grid;
    margin-bottom: 8px;
    border-radius: 50%;
}

.profile-photo .avatar.xl { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--board-blue); }

.photo-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--board-blue);
    color: var(--on-accent);
    transition: transform 0.15s;
}

.photo-badge .i { width: 13px; height: 13px; }
.profile-photo:hover .photo-badge { transform: scale(1.1); }
.story-ring .avatar.has-photo { border: 3px solid var(--panel); }

/* ---------- Calls: buttons on pages ---------- */
.cm-call-slot { display: inline-flex; }

.call-chip { color: #1f9d55; }
.call-chip .i { color: #1f9d55; }

.call-join {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #1f9d55;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

.call-join .i { width: 14px; height: 14px; }
.call-join .avatar-stack .avatar { border-color: #1f9d55; }
.call-join.live { animation: call-pulse 2s ease-in-out infinite; }

@keyframes call-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(31, 157, 85, 0); }
}

.icon-btn.accent[data-action^="call"] .i,
.icon-btn.accent[data-action="cm-call-member"] .i { color: #1f9d55; }
.social-left, .social-right { scrollbar-width: thin; }

/* ---------- Calls: in-call panel ---------- */
.call-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    width: min(380px, calc(100% - 24px));
    border-radius: 24px;
    background: #111318;
    color: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.call-mini { display: none; }
.call-body { padding: 16px 18px 20px; }

.call-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.call-head div { display: flex; flex-direction: column; min-width: 0; }
.call-head strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-head small { font-size: 0.8rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.call-head .icon-btn { color: #fff; }
.call-head .icon-btn:hover { background: rgba(255, 255, 255, 0.1); }

.call-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 16px 10px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 4px 0 18px;
}

.call-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.call-ring {
    border-radius: 50%;
    padding: 3px;
    transition: box-shadow 0.15s;
}

.call-person.speaking .call-ring { box-shadow: 0 0 0 3px #34d399, 0 0 18px rgba(52, 211, 153, 0.6); }
.call-ring .avatar { border: none; }
.call-ring .avatar.xl { width: 72px; height: 72px; }

.call-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 0.82rem;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.call-name .i { width: 14px; height: 14px; color: #f87171; }

.call-controls {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.call-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.call-btn .i {
    width: 56px;
    height: 56px;
    padding: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: background 0.15s, transform 0.15s;
}

.call-btn:active .i { transform: scale(0.92); }
.call-btn[aria-pressed="true"] .i { background: #fff; color: #111318; }
.call-btn.end .i { background: #ef4444; }

/* Minimised: a pill that keeps the call going while you browse */
.call-panel.min {
    width: auto;
    border-radius: 999px;
    background: #1f9d55;
}

.call-panel.min .call-body { display: none; }

.call-panel.min .call-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.call-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.4s ease-in-out infinite;
}

/* ---------- Calls: incoming ---------- */
.call-incoming {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 9, 14, 0.7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.incoming-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(340px, 100%);
    padding: 32px 24px 26px;
    border-radius: 28px;
    background: #111318;
    color: #fff;
    text-align: center;
    animation: pop 0.25s ease;
}

.incoming-avatar .avatar.xl { width: 96px; height: 96px; font-size: 1.8rem; animation: call-pulse 1.6s ease-in-out infinite; }
.incoming-card strong { margin-top: 10px; font-size: 1.3rem; }
.incoming-card small { opacity: 0.7; }

.incoming-actions {
    display: flex;
    gap: 56px;
    margin-top: 26px;
}

.round-btn {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
}

.round-btn .i { width: 28px; height: 28px; }
.round-btn.accept { background: #22c55e; }
.round-btn.decline { background: #ef4444; }

/* ---------- iPhone Notes style editor (phones) ---------- */
.ed-bar, .ed-date-m { display: none; }

:root { --ios-accent: #d69e00; --note-page: #ffffff; }
:root[data-theme="dark"] { --ios-accent: #ffd60a; --note-page: #1c1c1e; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --ios-accent: #ffd60a; --note-page: #1c1c1e; }
}

@media (max-width: 760px) {
    .editor {
        background: var(--note-page) !important;
        height: var(--vvh, 100dvh);
        max-height: var(--vvh, 100dvh);
        top: var(--vvtop, 0);
    }

    .editor-form {
        height: var(--vvh, 100dvh);
        max-height: var(--vvh, 100dvh);
        padding: 0;
        gap: 0;
    }

    .ed-bar {
        order: 0;
        position: sticky;
        top: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: calc(6px + env(safe-area-inset-top)) 8px 6px 4px;
        background: var(--note-page);
    }

    .ed-spacer { flex: 1; }

    .ed-back {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 8px 6px;
        color: var(--ios-accent);
        font-size: 1.06rem;
        font-weight: 500;
    }

    .ed-back .i { width: 24px; height: 24px; }

    .ed-icon {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--ios-accent);
    }

    .ed-icon .i { width: 24px; height: 24px; }
    .ed-icon[aria-expanded="true"] { opacity: 0.6; }

    .ed-done {
        padding: 8px 8px;
        color: var(--ios-accent);
        font-size: 1.06rem;
        font-weight: 700;
    }

    .ed-date-m {
        order: 6;
        display: block;
        margin: 4px 0 8px;
        text-align: center;
        font-size: 0.78rem;
        color: var(--text-faint);
    }

    /* Everything that isn't writing lives behind "⋯" */
    .editor:not(.show-details) .editor-top,
    .editor:not(.show-details) .editor-meta,
    .editor:not(.show-details) .feel-row,
    .editor:not(.show-details) .emotion-picker,
    .editor:not(.show-details) .editor-foot { display: none !important; }

    .editor .editor-top { order: 1; padding: 8px 18px 4px; }
    .editor #editor-close { display: none; }
    .editor .editor-meta { order: 2; padding: 6px 18px 10px; border-bottom: none; }
    .editor .feel-row { order: 3; padding: 0 18px 8px; }
    .editor .emotion-picker { order: 4; margin: 0 18px 8px; }

    .editor .editor-foot {
        order: 5;
        position: static;
        margin: 0;
        padding: 4px 18px 14px;
        background: transparent;
        border-top: none;
        border-bottom: 1px solid var(--border);
    }

    .editor .editor-foot #editor-done { display: none; }

    .editor-title {
        order: 7;
        padding: 0 18px;
        font-size: 1.8rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        background: transparent;
    }

    .editor-body {
        order: 8;
        flex: 1 0 auto;
        min-height: 35vh;
        padding: 8px 18px 28px;
        font-size: 1.06rem;
        line-height: 1.55;
    }

    .attachments { order: 9; padding: 0 18px 12px; }
    .reflection { order: 10; padding: 0 18px 16px; }
    .ai-panel { order: 11; margin: 0 18px 16px; }

    .reflect-block,
    .att-audio,
    .att-file { background: rgba(127, 127, 127, 0.08) !important; border-color: transparent; }

    /* Formatting bar sits above the keyboard like the Notes toolbar */
    .editor .rich-toolbar {
        order: 20;
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: auto;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-radius: 0;
        border-top: 1px solid var(--border);
        background: var(--note-page);
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
    }

    .editor .tb-btn { color: var(--ios-accent); min-width: 40px; height: 40px; }
    .editor .tb-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--ios-accent) 18%, transparent); color: var(--ios-accent); box-shadow: none; }
    .editor .tb-sep { background: var(--border); }

    /* Calls on phones */
    .call-panel {
        left: 12px;
        right: 12px;
        bottom: calc(80px + env(safe-area-inset-bottom));
        width: auto;
    }

    .call-panel.min { left: auto; right: 12px; }
    body.in-call .fab { display: none; }
}

/* =========================================================
   Pinning, note colours on the phone editor, share sheet
   ========================================================= */

/* ---------- Cards ---------- */
.mcard-pin {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #d97706;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mcard-pin .i { width: 14px; height: 14px; }
.mcard.is-pinned .mcard-tags { padding-right: 30px; }
.mcard.is-pinned h3 { padding-right: 26px; }
.mcard.is-pinned .mcard-tags + h3 { padding-right: 0; }

button.mcard-share { cursor: pointer; transition: transform 0.15s, background 0.15s; }
button.mcard-share:hover { transform: scale(1.08); }
button.mcard-share .i { color: var(--board-blue); }

/* ---------- Editor: pin & share (desktop header) ---------- */
.top-pin, .top-share { flex-shrink: 0; }
.top-pin[aria-pressed="true"] { background: #fff4d6; color: #b45309; }
.top-pin[aria-pressed="true"] .i { color: #d97706; }
.editor-top #editor-close { margin-left: 0; }
.editor-top .segmented { margin-right: auto; }

.ed-swatch {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12);
}

/* ---------- Share sheet ---------- */
.share-sheet {
    width: min(440px, calc(100% - 24px));
    max-height: min(82vh, 720px);
    padding: 0;
    border-radius: 22px;
    background: var(--surface);
    overflow: hidden;
}

.share-sheet[open] { display: flex; flex-direction: column; }
.sheet-grab { display: none; }

.share-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 10px;
}

.share-head h3 { font-size: 1.15rem; font-weight: 800; }
.share-head p { margin-top: 2px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.share-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 14px 20px;
    overflow-y: auto;
}

.share-label {
    margin: 12px 8px 2px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.share-hint { margin: 0 8px; }

.share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border-radius: 14px;
    text-align: left;
    transition: background 0.15s;
}

button.share-row:hover:not(:disabled) { background: var(--panel); }
.share-row:disabled { opacity: 0.45; cursor: not-allowed; }

.share-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--panel);
    font-size: 1.25rem;
}

.share-ic .i { width: 20px; height: 20px; color: var(--text-muted); }
.share-ic.feed { background: var(--accent); }
.share-ic.feed .i { color: #fff; }

.share-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.share-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-text small { font-size: 0.76rem; color: var(--text-muted); }

.share-switch {
    position: relative;
    width: 46px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.3);
    transition: background 0.2s;
}

.share-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.share-switch.on { background: #34c759; }
.share-switch.on::after { transform: translateX(18px); }

.share-warn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: #fff7e6;
    color: #7c4a03;
}

:root[data-theme="dark"] .share-warn { background: rgba(245, 165, 36, 0.14); color: #fcd34d; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .share-warn { background: rgba(245, 165, 36, 0.14); color: #fcd34d; }
}

.share-warn > .i { width: 20px; height: 20px; flex-shrink: 0; }
.share-warn span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; font-size: 0.86rem; }
.share-warn small { opacity: 0.8; font-size: 0.76rem; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    /* The page takes a soft tint of the note's colour, like coloured paper */
    .editor { --note-page: color-mix(in srgb, var(--card) 14%, #ffffff); }
    :root[data-theme="dark"] .editor { --note-page: color-mix(in srgb, var(--card) 10%, #1c1c1e); }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .editor { --note-page: color-mix(in srgb, var(--card) 10%, #1c1c1e); }
    }

    .ed-bar { gap: 0; }
    .ed-icon { width: 38px; }
    .ed-pin[aria-pressed="true"] { color: #d97706; }
    .ed-pin[aria-pressed="true"] .i { fill: currentColor; fill-opacity: 0.25; }
    #ed-color[aria-expanded="true"] .ed-swatch { box-shadow: 0 0 0 2px var(--note-page), 0 0 0 4px var(--ios-accent); }

    .top-pin, .top-share { display: none !important; }

    /* Tapping the colour dot opens just the colour row */
    .editor.show-colors .editor-top { display: flex !important; order: 1; padding: 4px 18px 12px; }
    .editor.show-colors:not(.show-details) .editor-top > :not(.swatches) { display: none; }
    .editor .swatches { gap: 12px; }
    .editor .swatch { width: 30px; height: 30px; }

    .share-sheet {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        border-radius: 22px 22px 0 0;
        max-height: 88vh;
        padding-bottom: env(safe-area-inset-bottom);
        animation: slide-up 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .sheet-grab {
        display: block;
        width: 38px;
        height: 5px;
        margin: 8px auto 0;
        border-radius: 3px;
        background: var(--border-strong);
    }

    .share-head { padding-top: 12px; }
    .mcard-actions { gap: 4px; }
}

/* =========================================================
   Notifications, richer group calls, tap-to-collapse posts
   ========================================================= */

.popover { z-index: 70; }
.toast { z-index: 80; }

/* Tap a long post's text to expand/collapse it */
.post-text.toggleable { cursor: pointer; }
.post-text.toggleable:not(.clamped) { cursor: n-resize; }

.post.flash { animation: flash 1.6s ease; }

@keyframes flash {
    0%, 100% { box-shadow: var(--shadow); }
    25%, 60% { box-shadow: 0 0 0 3px var(--board-blue), var(--shadow-lg); }
}

/* ---------- Bell ---------- */
.bell-btn { position: relative; }

.bell-count:not(:empty) {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid var(--bg);
    background: var(--dot-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    box-sizing: content-box;
}

/* ---------- Notification centre ---------- */
.notif-panel {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100% - 24px));
    max-height: min(640px, calc(100vh - 100px));
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: pop 0.2s ease;
}

.notif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 12px 8px 18px;
}

.notif-head h3 { flex: 1; font-size: 1.1rem; font-weight: 800; }

.notif-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 12px;
}

.notif-group {
    margin: 10px 10px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.notif {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 34px 10px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.notif:hover { background: var(--panel); }
.notif.unread { background: color-mix(in srgb, var(--board-blue) 8%, transparent); }
.notif.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--board-blue);
}

.notif-avatar { position: relative; flex-shrink: 0; }

.notif-type {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    color: #fff;
}

.notif-type .i { width: 11px; height: 11px; }
.t-friend { background: var(--board-blue); }
.t-like { background: #ed4956; }
.t-comment { background: #22a06b; }
.t-group { background: #8b5cf6; }
.t-call { background: #1f9d55; }
.t-missed { background: #ef4444; }

.notif-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-text { font-size: 0.86rem; line-height: 1.4; overflow-wrap: anywhere; }
.notif-quote { color: var(--text-muted); }
.notif-main time { font-size: 0.72rem; color: var(--text-faint); }
.notif-actions { display: flex; gap: 6px; margin-top: 6px; }

.notif-dismiss {
    position: absolute;
    top: 8px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-faint);
    opacity: 0;
    transition: opacity 0.15s;
}

.notif:hover .notif-dismiss, .notif-dismiss:focus-visible { opacity: 1; }
.notif-dismiss .i { width: 12px; height: 12px; }
.notif.unread:hover::before { display: none; }

.notif-optin {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 14px 8px;
    padding: 12px;
    border-radius: 14px;
    background: var(--accent-soft);
}

.notif-optin > .i { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.notif-optin span { flex: 1; display: flex; flex-direction: column; font-size: 0.84rem; line-height: 1.35; }
.notif-optin small { color: var(--text-muted); font-size: 0.74rem; }
.notif-optin.quiet { background: none; padding: 0 4px; margin: 0 14px 4px; }

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 36px 24px;
    text-align: center;
}

.notif-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--text-muted);
}

/* ---------- Group call banner ---------- */
.call-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 65;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(520px, calc(100% - 24px));
    padding: 10px 10px 10px 14px;
    border-radius: 18px;
    background: #111318;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
    animation: drop-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes drop-in { from { transform: translate(-50%, -20px); opacity: 0; } }

.banner-text { flex: 1; min-width: 0; font-size: 0.86rem; line-height: 1.35; }
.call-banner .icon-btn { color: #fff; }
.call-banner .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Richer group call ---------- */
.call-panel { z-index: 60; }
.call-head .call-add { margin-left: auto; background: rgba(255, 255, 255, 0.12); color: #fff; }
.call-head .call-add .i { color: #fff; }

.call-speaking {
    min-height: 1.2em;
    margin: -8px 0 8px;
    font-size: 0.78rem;
    color: #34d399;
    text-align: center;
}

.call-person {
    background: none;
    color: inherit;
    border-radius: 16px;
    padding: 6px 2px;
}

.call-person:not(:disabled):hover { background: rgba(255, 255, 255, 0.06); }
.call-person:disabled { cursor: default; opacity: 1; }
.call-ring { position: relative; }

.call-hand {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 1.3rem;
    animation: wave 1.2s ease-in-out infinite;
    transform-origin: 70% 90%;
}

@keyframes wave { 50% { transform: rotate(18deg); } }

.call-quality {
    position: absolute;
    left: -4px;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 3px 4px;
    border-radius: 6px;
    background: #111318;
}

.call-quality i { display: block; width: 3px; border-radius: 1px; background: rgba(255, 255, 255, 0.25); }
.call-quality i:nth-child(1) { height: 5px; }
.call-quality i:nth-child(2) { height: 8px; }
.call-quality i:nth-child(3) { height: 11px; }
.call-quality.q-fair i:nth-child(-n+2) { background: #fbbf24; }
.call-quality.q-poor i:nth-child(1) { background: #f87171; }
.call-quality.q-lost { animation: pulse 1s ease-in-out infinite; }

.float-emoji {
    position: absolute;
    left: 50%;
    bottom: 60%;
    font-size: 2rem;
    pointer-events: none;
    animation: float-up 2.2s ease-out forwards;
}

@keyframes float-up {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

.call-reactions {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: -6px 0 14px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.call-reactions button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.4rem;
    transition: transform 0.15s, background 0.15s;
}

.call-reactions button:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.15); }

.call-controls { gap: 12px; }

.call-emoji {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.35rem;
}

.call-btn .i { width: 52px; height: 52px; padding: 15px; }
.call-btn[aria-pressed="true"] .call-emoji { background: #fbbf24; }

@media (max-width: 760px) {
    .notif-panel {
        inset: 0;
        top: 0;
        width: 100%;
        max-height: none;
        border-radius: 0;
        border: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .notif-dismiss { opacity: 0.6; }
    .notif-head { padding-top: 14px; }
    .call-controls { gap: 8px; }
    .call-emoji, .call-btn .i { width: 48px; height: 48px; }
    .call-btn .i { padding: 13px; }
    .call-btn { font-size: 0.66rem; }
    .call-banner { top: calc(10px + env(safe-area-inset-top)); }
}

/* =========================================================
   In-note pictures, cover photos, bigger phone text styles,
   template cards that fit their text
   ========================================================= */

/* ---------- Pictures inside a note ---------- */
.inline-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 10px 0;
    border-radius: 14px;
    object-fit: contain;
    background: rgba(127, 127, 127, 0.1);
    cursor: zoom-in;
}

.inline-img.media-missing { min-height: 80px; width: 100%; }
.editor-body .inline-img:focus, .editor-body .inline-img::selection { outline: 3px solid var(--board-blue); }

/* ---------- Cover picker in the share sheet ---------- */
.cover-picker {
    display: flex;
    gap: 10px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.cover-opt {
    position: relative;
    flex: 0 0 72px;
    height: 72px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 14px;
    border: 2px solid transparent;
    background: var(--panel);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
}

.cover-opt img { width: 100%; height: 100%; object-fit: cover; }
.cover-opt:hover { transform: translateY(-1px); }
.cover-opt.on { border-color: var(--board-blue); }
.cover-opt.on:not(.none)::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--board-blue);
    color: var(--on-accent);
    font-size: 0.7rem;
}

.cover-opt.add { gap: 2px; align-content: center; border: 2px dashed var(--border); background: none; }
.cover-opt.add .i { width: 20px; height: 20px; }

/* ---------- Template cards: size to their text ---------- */
.template-card {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 260px;
}

.template-text strong,
.template-text small { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Text styles ("Aa") only exists on phones ---------- */
.tb-btn[data-cmd="styles"] { display: none; }

@media (max-width: 760px) {
    .templates { gap: 10px; }

    .template-card {
        flex: 0 0 172px;
        min-width: 0;
        gap: 10px;
        padding: 12px;
    }

    .template-icon { width: 38px; height: 38px; font-size: 1.1rem; }
    .template-text strong { font-size: 0.86rem; }
    .template-text small { font-size: 0.72rem; line-height: 1.25; }

    /* Tools row: big, evenly spread targets */
    .editor .rich-toolbar {
        flex-wrap: wrap;
        overflow-x: visible;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    }

    .editor .tb-btn {
        flex: 1 1 0;
        min-width: 44px;
        height: 48px;
        border-radius: 12px;
    }

    .editor .tb-btn .i { width: 23px; height: 23px; }
    .editor .tb-btn[data-cmd="styles"] { display: grid; }
    .editor .tb-btn .aa { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }

    /* Formatting buttons hide behind "Aa"… */
    .editor .rich-toolbar:not(.fmt-open) .tb-btn:is([data-cmd="bold"], [data-cmd="italic"], [data-cmd="underline"], [data-cmd="strikeThrough"], [data-cmd="code"], [data-cmd="codeblock"], [data-cmd="quote"], [data-cmd="link"], [data-cmd="list"]),
    .editor .rich-toolbar:not(.fmt-open) .tb-sep:nth-of-type(-n+2) { display: none; }

    /* …and open as a large labelled panel above the tools */
    .editor .rich-toolbar.fmt-open { row-gap: 6px; padding-top: 10px; }

    .editor .rich-toolbar.fmt-open .tb-btn:is([data-cmd="bold"], [data-cmd="italic"], [data-cmd="underline"], [data-cmd="strikeThrough"], [data-cmd="code"], [data-cmd="codeblock"], [data-cmd="quote"], [data-cmd="link"], [data-cmd="list"]) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        height: 60px;
        margin: 0 3px;
        background: rgba(127, 127, 127, 0.1);
        color: var(--text);
        font-size: 1.25rem;
    }

    .editor .rich-toolbar.fmt-open .tb-btn:is([data-cmd="bold"], [data-cmd="italic"], [data-cmd="underline"], [data-cmd="strikeThrough"], [data-cmd="code"], [data-cmd="codeblock"], [data-cmd="quote"], [data-cmd="link"], [data-cmd="list"]) .i { width: 21px; height: 21px; }

    .editor .rich-toolbar.fmt-open .tb-btn::after {
        font-size: 0.66rem;
        font-weight: 600;
        color: var(--text-muted);
        font-style: normal;
        text-decoration: none;
    }

    .editor .rich-toolbar.fmt-open [data-cmd="bold"]::after { content: 'Bold'; }
    .editor .rich-toolbar.fmt-open [data-cmd="italic"]::after { content: 'Italic'; }
    .editor .rich-toolbar.fmt-open [data-cmd="underline"]::after { content: 'Underline'; }
    .editor .rich-toolbar.fmt-open [data-cmd="strikeThrough"]::after { content: 'Strike'; }
    .editor .rich-toolbar.fmt-open [data-cmd="code"]::after { content: 'Code'; }
    .editor .rich-toolbar.fmt-open [data-cmd="codeblock"]::after { content: 'Block'; }
    .editor .rich-toolbar.fmt-open [data-cmd="quote"]::after { content: 'Quote'; }
    .editor .rich-toolbar.fmt-open [data-cmd="link"]::after { content: 'Link'; }
    .editor .rich-toolbar.fmt-open [data-cmd="list"]::after { content: 'List'; }

    .editor .rich-toolbar.fmt-open .tb-btn[aria-pressed="true"] {
        background: color-mix(in srgb, var(--ios-accent) 20%, transparent);
        color: var(--ios-accent);
    }

    /* The first two separators become line breaks: B I U S / code… / tools */
    .editor .rich-toolbar.fmt-open .tb-sep:nth-of-type(-n+2) {
        flex-basis: 100%;
        height: 0;
        margin: 0;
        background: none;
    }

    .editor .rich-toolbar .tb-sep:nth-of-type(n+3) { align-self: center; flex: 0 0 1px; }

    /* Chat composer formatting: finger-sized too */
    .rich-toolbar.compact { gap: 4px; }
    .rich-toolbar.compact .tb-btn { min-width: 42px; height: 42px; font-size: 1.05rem; border-radius: 10px; }
    .rich-toolbar.compact .tb-btn .i { width: 20px; height: 20px; }
}

/* =========================================================
   Stories bar, story media, reels, reposts, saved,
   Dilute, Pairing and Highlights
   ========================================================= */

/* ---------- Stories bar (top of the feed) ---------- */
.stories-bar {
    margin: -4px 0 16px;
    padding: 12px 14px 6px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stories-bar .stories { gap: 14px; padding-bottom: 6px; }
.stories-bar .story > span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.story-ring.add-own { position: relative; background: none; padding: 0; }
.story-ring.add-own .avatar { width: 64px; height: 64px; border: none; }

.story-plus {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    background: var(--board-blue);
    color: var(--on-accent);
}

.story-plus .i { width: 12px; height: 12px; }
.stories-empty { align-self: center; max-width: 220px; line-height: 1.4; }

/* ---------- Story viewer: photos and videos ---------- */
.story-card.media {
    position: relative;
    padding: 0;
    background: #000;
    justify-content: center;
    overflow: hidden;
}

.story-media { width: 100%; height: 100%; object-fit: contain; background: #000; }

.story-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 16px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
}

.story-card.buffering::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.story-viewer.paused .story-bars .active i { animation-play-state: paused; }
.story-viewer .story-nav { -webkit-tap-highlight-color: transparent; }
.story-viewer { user-select: none; -webkit-user-select: none; }

/* ---------- New story / reel sheet ---------- */
.media-compose {
    width: min(440px, calc(100% - 24px));
    padding: 0;
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
}

.mc-form { display: flex; flex-direction: column; }

.mc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.mc-head h3 { flex: 1; font-size: 1.05rem; font-weight: 800; text-align: center; }

.mc-preview {
    position: relative;
    flex-shrink: 0;
    height: min(50vh, 480px);
    background: #000;
}

.mc-preview img, .mc-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media-compose[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.mc-form { min-height: 0; overflow-y: auto; }

#mc-caption {
    margin: 12px 14px 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    resize: none;
}

.mc-note { display: flex; align-items: center; gap: 6px; padding: 4px 16px 14px; }
.mc-note .i { width: 13px; height: 13px; }

/* ---------- Reposts & saved ---------- */
.repost-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.repost-line .i { width: 15px; height: 15px; }
.post-actions .repost-btn[aria-pressed="true"] { color: #16a34a; }
.reels-chip { margin-left: auto; margin-right: 8px; }
.reels-chip .i { width: 16px; height: 16px; }

/* ---------- Reels ---------- */
.reels-page { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.reels-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(440px, 100%);
}

.reels-head .feed-sort { margin-right: auto; }

.reels {
    width: min(440px, 100%);
    height: calc(100vh - 220px);
    min-height: 480px;
    border-radius: 24px;
    background: #000;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.reels::-webkit-scrollbar { display: none; }

.reel {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    color: #fff;
    background: #000;
}

.reel-video, .reel-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel.started .reel-poster { display: none; }
.reel-tap { position: absolute; inset: 0; z-index: 1; -webkit-tap-highlight-color: transparent; }

.reel-state {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: -36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.reel-state .i { width: 32px; height: 32px; margin-left: 4px; }
.reel.paused .reel-state { opacity: 1; }

.reel .burst { z-index: 3; }

.reel-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 60px 84px 22px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.reel-who { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.reel-who span { opacity: 0.75; font-size: 0.8rem; }

.reel-caption {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    pointer-events: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.reel-caption.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }

.reel-side {
    position: absolute;
    right: 8px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reel-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 56px;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.reel-act .i { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.reel-act[data-action="reel-like"][aria-pressed="true"] .i { color: #ff3b5c; }
.reel-act:active { transform: scale(0.92); }

.reel-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.reel-progress i { display: block; width: 0; height: 100%; background: #fff; }

.empty-reel { display: grid; place-items: center; padding: 24px; }
.empty-reel .empty { color: #fff; background: none; }
.empty-reel .empty p { color: rgba(255, 255, 255, 0.75); }
.empty-reel .empty .empty-title { color: #fff; }

.reel-sheet .reel-sheet-body { padding: 0 20px 20px; overflow-y: auto; }
.reel-sheet .comments { border: none; padding: 0; }

/* ---------- Highlighter ---------- */
mark { border-radius: 3px; padding: 0 1px; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl-yellow, mark:not([class]) { background: #fde68a; }
mark.hl-green { background: #bbf7d0; }
mark.hl-pink { background: #fbcfe8; }
mark.hl-blue { background: #bfdbfe; }

:root[data-theme="dark"] mark.hl-yellow, :root[data-theme="dark"] mark:not([class]) { background: rgba(250, 204, 21, 0.38); }
:root[data-theme="dark"] mark.hl-green { background: rgba(74, 222, 128, 0.32); }
:root[data-theme="dark"] mark.hl-pink { background: rgba(244, 114, 182, 0.34); }
:root[data-theme="dark"] mark.hl-blue { background: rgba(96, 165, 250, 0.36); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) mark.hl-yellow, :root:not([data-theme="light"]) mark:not([class]) { background: rgba(250, 204, 21, 0.38); }
    :root:not([data-theme="light"]) mark.hl-green { background: rgba(74, 222, 128, 0.32); }
    :root:not([data-theme="light"]) mark.hl-pink { background: rgba(244, 114, 182, 0.34); }
    :root:not([data-theme="light"]) mark.hl-blue { background: rgba(96, 165, 250, 0.36); }
}

mark.flash-mark { animation: flash-mark 1.6s ease; }
@keyframes flash-mark { 30%, 60% { box-shadow: 0 0 0 4px var(--board-blue); } }

/* ---------- Highlights page ---------- */
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }

.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.85rem;
    font-weight: 700;
}

.hl-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.hl-chip[aria-pressed="true"] .muted { color: inherit; opacity: 0.7; }
.hl-dot { width: 10px; height: 10px; border-radius: 50%; }
.hl-chip.hl-yellow .hl-dot { background: #facc15; }
.hl-chip.hl-green .hl-dot { background: #4ade80; }
.hl-chip.hl-pink .hl-dot { background: #f472b6; }
.hl-chip.hl-blue .hl-dot { background: #60a5fa; }

.hl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.hl-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 14px 20px;
    border-radius: 16px;
    border-left: 5px solid #facc15;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
}

.hl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hl-card blockquote { font-size: 0.98rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.hl-card blockquote::before { content: "\201C"; }
.hl-card blockquote::after { content: "\201D"; }
.hl-card.hl-green { border-left-color: #4ade80; }
.hl-card.hl-pink { border-left-color: #f472b6; }
.hl-card.hl-blue { border-left-color: #60a5fa; }
.hl-card.hl-day { border-left-color: #a78bfa; }
.hl-source { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }

/* ---------- Dilute ---------- */
.dilute {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.08);
}

.dilute[hidden] { display: none; }
.dilute > .i { width: 18px; height: 18px; color: var(--board-blue); flex-shrink: 0; }
.dilute label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; }
.dilute output { min-width: 56px; font-size: 0.8rem; font-weight: 800; text-align: right; color: var(--text-muted); }

#dilute-range {
    flex: 1;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    --fill: 100%;
}

#dilute-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--board-blue) var(--fill), rgba(127, 127, 127, 0.25) var(--fill));
}

#dilute-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(127, 127, 127, 0.25); }
#dilute-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--board-blue); }

#dilute-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--board-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

#dilute-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--board-blue);
}

.editor.diluted #editor-text,
.editor.diluted #editor-toolbar,
.editor.diluted #editor-attachments,
.editor.diluted #editor-reflection { display: none !important; }

.dilute-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(127, 127, 127, 0.06);
    font-size: 1.02rem;
    line-height: 1.6;
    cursor: pointer;
    animation: pour 0.25s ease;
}

.dilute-view[hidden] { display: none; }
@keyframes pour { from { opacity: 0.4; transform: translateY(4px); } }
.dilute-view:focus-visible { outline: 3px solid var(--board-blue); outline-offset: 2px; }
.dilute-gap { color: var(--text-faint); letter-spacing: 0.3em; line-height: 1; }
.dilute-essence { font-size: 1.25rem; font-weight: 700; line-height: 1.45; }
.dilute-meta { margin-top: 4px; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }

/* Notes page: Full / Half / Essence */
.pour {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 10px;
    padding: 3px 3px 3px 10px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.pour > .i { width: 15px; height: 15px; color: var(--board-blue); margin-right: 4px; }

.pour button {
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pour button[aria-pressed="true"] { background: var(--board-blue); color: var(--on-accent); }
.mcard.poured-10 .mcard-body { font-weight: 600; font-style: italic; }

/* ---------- Pairing ---------- */
.pairing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-left: 3px solid var(--board-blue);
    border-radius: 4px 14px 14px 4px;
    background: color-mix(in srgb, var(--board-blue) 7%, transparent);
}

.pairing[hidden] { display: none; }

.pair-label {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--board-blue);
}

.pair-label .i { width: 14px; height: 14px; }

.pair-open {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}

.pair-open strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-open small { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pair-open:hover strong { text-decoration: underline; }
.pair-skip .i { width: 14px; height: 14px; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .stories-bar { margin: -4px -4px 14px; padding: 10px 10px 4px; border-radius: 18px; }
    .stories-bar .stories { gap: 12px; }

    /* Reels fill the screen above the tab bar */
    body[data-view="reels"] .content { padding: 0 !important; background: #000; }
    .reels-page { gap: 0; }

    .reels-head {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 21;
        width: auto;
        padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
        background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
    }

    .reels-head .icon-btn { color: #fff; }
    .reels-head .feed-sort { background: rgba(255, 255, 255, 0.15); }
    .reels-head .feed-sort button { color: rgba(255, 255, 255, 0.8); }
    .reels-head .feed-sort button[aria-pressed="true"] { background: #fff; color: #000; }
    .reels-head .create-post { padding: 8px 12px; }

    .reels {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom));
        z-index: 20;
        width: auto;
        height: auto;
        min-height: 0;
        border-radius: 0;
    }

    .reel-info { padding-bottom: 18px; }
    body[data-view="reels"] .fab { display: none; }
    body[data-view="reels"] .tabbar { background: #000; border-top-color: #222; }
    body[data-view="reels"] .tabbar .tab-item { color: rgba(255, 255, 255, 0.6); }

    .notes-bar { flex-wrap: wrap; row-gap: 10px; }
    .pour { order: 3; margin: 0; }
    .pour button { padding: 6px 10px; }

    .dilute { order: 7; margin: 0 18px 8px; }
    .dilute-view { order: 8; margin: 0 18px 16px; }
    .pairing { order: 10; margin: 0 18px 16px; flex-wrap: wrap; row-gap: 4px; }
    .pair-label { flex-basis: 100%; }
    .pair-skip { margin-top: -26px; }

    /* The highlighter joins the big "Aa" text-style panel */
    .editor .rich-toolbar:not(.fmt-open) .tb-btn[data-cmd="highlight"] { display: none; }
    .editor .rich-toolbar.fmt-open .tb-btn[data-cmd="highlight"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        height: 60px;
        margin: 0 3px;
        background: rgba(127, 127, 127, 0.1);
        color: var(--text);
    }

    .editor .rich-toolbar.fmt-open .tb-btn[data-cmd="highlight"] .i { width: 21px; height: 21px; }
    .editor .rich-toolbar.fmt-open [data-cmd="highlight"]::after { content: "Mark"; }

    .hl-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Bigger top-bar icons, livelier chat, story viewers,
   voice to note, app-style scrolling on phones
   ========================================================= */

/* ---------- Top bar icons fill their buttons ---------- */
.topbar .icon-btn { width: 44px; height: 44px; border-radius: 14px; }
.topbar .icon-btn .i { width: 24px; height: 24px; }
.topbar .bell-btn { background: var(--panel); }
.topbar .bell-btn:hover { background: var(--border); }
.bell-count:not(:empty) { top: 3px; right: 3px; }

/* ---------- Chat ---------- */
.chat-pane { position: relative; }
.chat-thread { gap: 4px; scroll-behavior: auto; }
.chat-thread .msg { margin-top: 8px; }
.chat-thread .msg.grouped { margin-top: 0; }
.msg.out { margin-bottom: 0; }
.msg.grouped .avatar { visibility: hidden; }
.msg.in.grouped .msg-card { border-top-left-radius: 6px; }
.msg.out.grouped .msg-card { border-top-right-radius: 6px; }
.msg-card { transition: transform 0.18s ease, box-shadow 0.18s ease; touch-action: pan-y; -webkit-user-select: text; }

.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 0;
    margin-top: 2px;
    font-size: 0.64rem;
    color: var(--text-faint);
}

.msg-meta:empty { display: none; }
.msg-meta .ticks { position: static; }
.msg-meta .ticks .i { width: 14px; height: 14px; }

.msg.pop-in .msg-card { animation: msg-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes msg-pop { from { transform: scale(0.85); opacity: 0; } }
.msg.flash .msg-card { animation: msg-flash 1.4s ease; }
@keyframes msg-flash { 25%, 60% { box-shadow: 0 0 0 3px var(--board-blue); } }

/* Emoji-only messages show big, without a bubble */
.msg.jumbo .msg-card { background: none !important; border: none !important; padding: 0 4px; min-width: 0; }
.msg.jumbo .msg-head { display: none; }
.msg.jumbo .msg-body { font-size: 2.6rem; line-height: 1.15; }

.msg.unsent .msg-card { background: none !important; border: 1px dashed var(--border-strong) !important; min-width: 0; }
.msg.unsent .msg-body { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-style: italic; color: var(--text-muted); }
.msg.unsent .msg-body .i { width: 13px; height: 13px; }

/* Reply quote inside a bubble */
.msg-quote {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 2px 0 6px;
    padding: 6px 10px;
    border-left: 3px solid var(--board-blue);
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.1);
    text-align: left;
    font-size: 0.76rem;
    line-height: 1.35;
}

.msg-quote strong { color: var(--board-blue); font-size: 0.74rem; }
.msg-quote span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* Reactions under a bubble */
.msg.has-reacts { margin-bottom: 14px; }
.msg-reacts {
    position: absolute;
    bottom: -14px;
    display: flex;
    gap: 3px;
}

.msg.in .msg-reacts { left: 10px; }
.msg.out .msg-reacts { right: 10px; }

.react-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 0.82rem;
    line-height: 1.4;
}

.react-chip span { font-size: 0.66rem; font-weight: 800; color: var(--text-muted); }
.react-chip.mine { border-color: var(--board-blue); background: color-mix(in srgb, var(--board-blue) 12%, var(--surface)); }
.react-chip.pop { animation: react-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
@keyframes react-pop { from { transform: scale(0.3); } }

/* Hover tools (desktop) */
.msg { position: relative; }
.msg-tools {
    display: flex;
    align-self: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.msg.out .msg-tools { order: -1; }
.msg:hover .msg-tools, .msg.menu-open .msg-tools { opacity: 1; }
.msg.unsent .msg-tools { display: none; }

.msg-tools button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text-muted);
}

.msg-tools button:hover { background: var(--panel); color: var(--text); }
.msg-tools .i { width: 16px; height: 16px; }

/* The reaction bar (long-press on phones, smiley on desktop) */
.react-bar {
    position: absolute;
    bottom: calc(100% + 8px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: pop 0.18s ease;
    -webkit-user-select: none;
    user-select: none;
}

.msg.in .react-bar { left: 0; }
.msg.out .react-bar { right: 0; }
.react-emojis { display: flex; gap: 2px; }

.react-emojis button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.35rem;
    transition: transform 0.12s;
}

.react-emojis button:hover { transform: scale(1.25); background: var(--panel); }
.react-actions { display: flex; gap: 4px; border-top: 1px solid var(--border); padding-top: 6px; }

.react-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}

.react-actions button:hover { background: var(--panel); }
.react-actions button.danger { color: var(--dot-red); }
.react-actions .i { width: 15px; height: 15px; }

/* Swipe right to reply */
.msg-card.will-reply { box-shadow: -4px 0 0 var(--board-blue); }

/* Typing indicator */
.typing-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; animation: rise 0.2s ease both; }

.typing-bubble {
    display: inline-flex;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--chat-in);
    border: 1px solid var(--chat-in-border);
}

.typing-bubble i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-faint);
    animation: typing 1.2s ease-in-out infinite;
}

.typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
.friend-name small.typing { color: var(--online); font-weight: 700; }

/* Jump to latest */
.chat-jump {
    position: absolute;
    right: 18px;
    bottom: 150px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    font-size: 0.78rem;
    font-weight: 800;
    animation: pop 0.2s ease;
}

.chat-jump span:empty { display: none; }
.chat-jump.fresh { background: var(--board-blue); color: var(--on-accent); border-color: transparent; }

/* Reply bar and quick replies above the composer */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border-left: 3px solid var(--board-blue);
    border-radius: 10px;
    background: var(--panel);
    animation: rise 0.18s ease both;
}

.reply-bar > .i { width: 18px; height: 18px; color: var(--board-blue); }
.reply-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 0.78rem; line-height: 1.3; }
.reply-text small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.quick-replies {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.quick-replies::-webkit-scrollbar { display: none; }
.composer:focus-within .quick-replies, .composer.recording .quick-replies { display: none; }

.quick-reply {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.78rem;
    font-weight: 600;
    transition: background 0.15s, transform 0.15s;
}

.quick-reply:hover { background: var(--panel); transform: translateY(-1px); }

/* ---------- Feed composer: video + story ---------- */
.pc-tool.video .i { color: #e1306c; }
.pc-tool.story-toggle { gap: 7px; }

.pc-story-ring {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    transition: background 0.15s, border-color 0.15s;
}

.pc-tool.story-toggle[aria-pressed="true"] { color: var(--text); }
.pc-tool.story-toggle[aria-pressed="true"] .pc-story-ring {
    border-color: transparent;
    background: var(--story-ring);
    box-shadow: inset 0 0 0 3px var(--surface);
}

/* ---------- New reel sheet: "also add to my story" ---------- */
.mc-also {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 14px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--panel);
    cursor: pointer;
}

.mc-also > span:last-child { display: flex; flex-direction: column; font-size: 0.86rem; line-height: 1.3; }
.mc-also small { color: var(--text-muted); font-size: 0.74rem; }

/* ---------- Story: seen by ---------- */
.story-seen {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.story-seen .i { width: 16px; height: 16px; }
.story-card.media .story-seen ~ .story-caption, .story-card.media .story-caption:has(~ .story-seen) { bottom: 70px; }

.story-viewer { position: relative; }

.story-viewers {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    max-height: 62%;
    display: flex;
    flex-direction: column;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: var(--surface);
    color: var(--text);
    animation: slide-up 0.22s ease;
}

.story-viewers header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.story-viewers header .icon-btn { color: var(--text); }
.sv-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sv-row { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
.sv-row > span { display: flex; flex-direction: column; line-height: 1.3; }
.sv-row small { font-size: 0.74rem; color: var(--text-muted); }
.sv-empty { padding: 18px 4px; font-size: 0.88rem; color: var(--text-muted); }

/* ---------- Voice to note ---------- */
.transcribe {
    width: min(520px, calc(100% - 24px));
    max-height: min(86dvh, 720px);
    padding: 0;
    border-radius: 24px;
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
}

.transcribe[open] { display: flex; flex-direction: column; }

.tr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}

.tr-head h3 { flex: 1; font-size: 1.05rem; font-weight: 800; }

.tr-head select {
    max-width: 150px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 0.8rem;
}

.tr-live {
    flex: 1;
    min-height: 220px;
    margin: 4px 16px;
    padding: 16px;
    border-radius: 18px;
    background: var(--panel);
    overflow-y: auto;
    font-size: 1.02rem;
    line-height: 1.6;
}

.tr-live p + p { margin-top: 12px; }
.tr-live p[contenteditable="true"] { border-radius: 6px; outline: none; }
.tr-live p[contenteditable="true"]:focus { background: var(--surface); box-shadow: 0 0 0 2px var(--board-blue); }
.tr-interim { color: var(--text-faint); }
.tr-hint { color: var(--text-muted); text-align: center; margin-top: 70px; }

.tr-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 6px;
}

.tr-meta { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; }
.tr-count { color: var(--text-muted); font-weight: 600; }
.tr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.transcribe.listening .tr-dot { background: #ef4444; animation: pulse 1s ease-in-out infinite; }
#tr-save { justify-self: end; }

.tr-mic {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

.tr-mic .i { width: 28px; height: 28px; position: relative; z-index: 1; }
.transcribe.listening .tr-mic { background: #111318; box-shadow: none; }
.transcribe.listening .tr-mic .i { display: none; }
.transcribe.listening .tr-mic::after {
    content: "";
    width: 18px;
    height: 22px;
    box-sizing: border-box;
    border-left: 6px solid #fff;
    border-right: 6px solid #fff;
    position: relative;
    z-index: 1;
}

.tr-rings { position: absolute; inset: 0; border-radius: 50%; }
.transcribe.listening .tr-rings { animation: rings 1.6s ease-out infinite; }
@keyframes rings { from { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); } to { box-shadow: 0 0 0 22px rgba(239, 68, 68, 0); } }

.tr-keep { display: flex; align-items: center; gap: 10px; margin: 6px 16px 0; font-size: 0.84rem; cursor: pointer; }
.tr-note { padding: 8px 16px 16px; font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    /* App-style scrolling: only the content column scrolls, so the tab bar never moves */
    html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
    .app { height: 100dvh; min-height: 0; }

    .main-col {
        height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .topbar .icon-btn { width: 42px; height: 42px; }
    .topbar .icon-btn .i { width: 24px; height: 24px; }

    .msg { max-width: 86%; }
    .msg-tools { display: none; }
    .chat-jump { bottom: 130px; right: 14px; }
    .react-bar { max-width: calc(100vw - 48px); }
    .react-emojis { gap: 0; }
    .react-emojis button { width: 32px; height: 34px; font-size: 1.2rem; }

    .transcribe {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
    }

    .tr-foot { padding-bottom: 4px; }
    .tr-note { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   Reel playback states and reels in the feed
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Loading spinner and "can't play" note (full-screen reels and feed reels) */
.reel-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    margin: -20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    opacity: 0;
    pointer-events: none;
    animation: spin 0.8s linear infinite;
    transition: opacity 0.2s;
}

.reel.buffering .reel-spinner,
.reel-post.buffering .reel-spinner { opacity: 1; }
.reel.buffering .reel-state { opacity: 0; }

.reel-failed {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: none;
    width: min(280px, 80%);
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
    transform: translate(-50%, -50%);
}

.reel.failed .reel-failed,
.reel-post.failed .reel-failed { display: block; }
.reel.failed .reel-state { display: none; }

/* ---------- A reel in the feed ---------- */
.reel-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.64rem;
    font-weight: 800;
}

.reel-badge .i { width: 11px; height: 11px; }

.reel-post-media {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    background: #000;
    overflow: hidden;
}

.reel-post-media .reel-poster,
.feed-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-post.started .reel-poster { display: none; }
.reel-post-open { position: absolute; inset: 0; z-index: 1; }

.reel-post-mute {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.reel-post-mute .i { width: 18px; height: 18px; }

.post-actions .act-count {
    margin-left: 4px;
    font-size: 0.85rem;
    font-weight: 700;
}

.post-actions .act-count:empty { display: none; }
.reel-post .post-actions .act { display: inline-flex; align-items: center; }
.reel-post .post-actions .save-btn { margin-left: auto; }
.reel-post .post-actions { gap: 12px; }

/* =========================================================
   UI/UX quality pass (ui-ux-pro-max checklist):
   contrast, tap targets, readable sizes, press feedback,
   icons, reduced motion
   ========================================================= */

/* ---------- Contrast: meta text meets 4.5:1 in both themes ---------- */
:root { --text-faint: #71757f; }
:root[data-theme="dark"] { --text-faint: #8d919c; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --text-faint: #8d919c; }
}

/* ---------- Template icons: SVG in a tinted tile, one stroke style ---------- */
.template-icon .i { width: 22px; height: 22px; }
.tone-yellow .i { color: #b45309; }
.tone-pink .i { color: #be185d; }
.tone-green .i { color: #15803d; }
.tone-blue .i { color: #1d4ed8; }
.tone-purple .i { color: #6d28d9; }
:root[data-theme="dark"] .template-icon .i { color: var(--text); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .template-icon .i { color: var(--text); }
}

/* ---------- Keyboard focus stays visible on custom controls ---------- */
.chip:focus-visible, .tab:focus-visible, .mcard:focus-visible, .cm-card:focus-visible,
.story:focus-visible, .reel-act:focus-visible, .act:focus-visible, .quick-reply:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Press feedback on touch screens (no layout shift) ---------- */
@media (hover: none) {
    button, [role="button"], .mcard, .cm-card, .convo, .template-card, .story {
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.12s ease, background-color 0.12s ease;
    }
    button:active:not(:disabled), [role="button"]:active, .mcard:active, .cm-card:active,
    .convo:active, .template-card:active, .story:active { opacity: 0.7; }
}

/* ---------- Disabled means disabled ---------- */
button:disabled, button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Phones: 44px targets and 12px+ text ---------- */
@media (max-width: 760px) {
    /* Invisible hit areas extend small icon controls to 44px without moving anything */
    .mcard-share, .more-btn, .vn-speed, .read-more, .tag-link, .cm-role,
    .post-actions .act, .msg-tools button, .comment-meta .link-btn {
        position: relative;
    }

    .mcard-share::after, .more-btn::after, .vn-speed::after, .read-more::after, .tag-link::after,
    .post-actions .act::after, .comment-meta .link-btn::after {
        content: "";
        position: absolute;
        inset: -8px;
    }

    .mcard-edit { width: 36px; height: 36px; }
    .more-btn { width: 40px; height: 40px; }
    .icon-btn, .topbar .icon-btn { width: 44px; height: 44px; }
    .profile { min-width: 44px; min-height: 44px; }
    .chip { min-height: 36px; padding: 8px 12px; }
    .tab { min-height: 44px; }
    .tool-btn { min-width: 40px; min-height: 40px; }
    .quick-reply { min-height: 38px; padding: 8px 14px; }
    .month-nav button { min-width: 44px; min-height: 44px; }
    .toast-undo { min-height: 40px; }
    .vn-speed { padding: 4px 8px; }
    .reel-act { min-height: 48px; }

    /* Nothing that carries information smaller than 12px */
    .mcard-date, .comment-meta, .link-btn, .post-badge, .count-dot, .slide-count,
    .msg-head time, .msg-meta, .vn-time, .vn-speed, .cm-role, .cal-weekday, .photo-date,
    .mood-day-num, .reel-who span, .notif-main time, .tab-item, .hl-source, .dilute-meta,
    .pair-open small, .act-count, .tr-count, .mc-note {
        font-size: 0.75rem;
    }

    .avatar.xs { font-size: 0.62rem; }
    .reel-badge { font-size: 0.7rem; }
}

/* ---------- Reduced motion: stop loops and big movement too ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .reel-spinner, .story-card.buffering::after { animation: none !important; border-top-color: rgba(255, 255, 255, 0.3); }
    .typing-bubble i, .tr-rings, .tr-dot, .call-hand { animation: none !important; }
}

/* Quality pass, part 2: remaining small targets and low-contrast labels */
.post-actions .act-count { color: var(--text); }
.count-dot { background: #c81e3a; }
.msg .msg-head time, .msg .vn-time, .msg .vn-speed { color: #555a64; }
:root[data-theme="dark"] .msg .msg-head time, :root[data-theme="dark"] .msg .vn-time, :root[data-theme="dark"] .msg .vn-speed { color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .msg .msg-head time, :root:not([data-theme="light"]) .msg .vn-time, :root:not([data-theme="light"]) .msg .vn-speed { color: var(--text-muted); }
}

@media (max-width: 760px) {
    .mcard-tags span { font-size: 0.75rem; }
    .pour button { min-height: 36px; }
    .chip, .folder-chip, .hl-chip, .pc-tool, .pour button, .feed-sort button, .quick-reply { position: relative; }
    .chip::after, .folder-chip::after, .hl-chip::after, .pc-tool::after, .pour button::after, .feed-sort button::after, .quick-reply::after {
        content: "";
        position: absolute;
        inset: -5px 0;
    }
}

/* =========================================================
   Inbox redesign — from Figma "Cordial — Inbox redesign"
   ========================================================= */

:root {
    --bubble-out: #2b3f7e;
    --bubble-out-text: #ffffff;
    --bubble-out-meta: #c9d3ff;
    --bubble-in: #ffffff;
    --chat-canvas: #f5f6fa;
    --soft-accent: #eef1fa;
}
:root[data-theme="dark"] {
    --bubble-out: #3b52a3;
    --bubble-in: #25272e;
    --chat-canvas: #16171c;
    --soft-accent: rgba(159, 176, 255, 0.14);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bubble-out: #3b52a3;
        --bubble-in: #25272e;
        --chat-canvas: #16171c;
        --soft-accent: rgba(159, 176, 255, 0.14);
    }
}

.inbox { grid-template-columns: 340px minmax(0, 1fr); }
.inbox.show-info { grid-template-columns: 340px minmax(0, 1fr) 300px; }

/* ---------- List pane ---------- */
.inbox-head { align-items: flex-start; padding: 20px 18px 12px; }
.inbox-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inbox-head h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.inbox-sub { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }

.compose-btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 16px rgba(43, 63, 126, 0.28);
    transition: transform 0.15s, box-shadow 0.15s;
}

:root[data-theme="dark"] .compose-btn { color: #0f1014; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compose-btn { color: #0f1014; } }
.compose-btn .i { width: 20px; height: 20px; }
.compose-btn:hover { transform: translateY(-1px); }
.compose-btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--soft-accent); }

.inbox-search { margin: 0 16px 6px; border-radius: 14px; }

.active-now { padding: 8px 16px 4px; }
.active-label {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.active-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.active-row::-webkit-scrollbar { display: none; }

.active-friend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 60px;
    font-size: 0.75rem;
    font-weight: 700;
}

.active-friend span:last-child { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-friend .avatar.lg { width: 56px; height: 56px; }

/* Filter pills */
.inbox-tabs { gap: 8px; padding: 8px 16px 10px; border: none; }

.inbox-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
}

.inbox-tab:hover { background: var(--panel); }
.inbox-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-theme="dark"] .inbox-tab[aria-selected="true"] { color: #0f1014; }
.inbox-tab .badge:not(:empty) { background: #c81e3a; color: #fff; }

/* Conversation rows */
.convo-list { padding: 4px 10px 10px; }

.convo {
    gap: 12px;
    margin-bottom: 2px;
    padding: 12px 10px;
    border-radius: 16px;
    border: none;
}

.convo .avatar.md { width: 52px; height: 52px; font-size: 1rem; }
.convo.active { background: var(--soft-accent); box-shadow: none; }
.convo-top strong { font-size: 0.98rem; font-weight: 700; }
.convo.unread .convo-top strong { font-weight: 800; }
.convo-top time { font-size: 0.75rem; font-weight: 600; color: var(--text-faint); }
.convo.unread .convo-top time { color: var(--accent); font-weight: 800; }
.convo-preview { font-size: 0.86rem; }
.convo .badge:not(:empty) { background: var(--accent); color: var(--on-accent); min-width: 20px; height: 20px; font-size: 0.72rem; }
:root[data-theme="dark"] .convo .badge:not(:empty) { color: #0f1014; }
.convo-ticks { display: inline-grid; flex-shrink: 0; color: var(--text-faint); }
.convo-ticks .i { width: 15px; height: 15px; }
.convo-ticks.read { color: var(--online); }
.convo-bottom { justify-content: flex-start; gap: 4px; }
.convo-bottom .convo-preview { flex: 1; }

/* ---------- Chat pane ---------- */
.chat-head { gap: 12px; padding: 12px 16px; background: var(--surface); }
.chat-head .avatar.sm { width: 42px; height: 42px; }
.friend-name { font-size: 1rem; font-weight: 800; }
.friend-name small { font-size: 0.8rem; font-weight: 700; }
.friend-name small:not(.typing)[data-status] { color: var(--text-muted); }
.chat-head .icon-btn:not(.back-chat) {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--soft-accent);
    color: var(--accent);
}

.chat-head .icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chat-thread { background: var(--chat-canvas); padding: 16px 16px 12px; }

.day-sep { justify-content: center; margin: 10px 0 4px; }
.day-sep::before, .day-sep::after { display: none; }
.day-sep span {
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Bubbles */
.msg { max-width: 72%; }
.msg-card { min-width: 64px; padding: 9px 14px 7px; border-radius: 20px; }
.msg.in .msg-card { background: var(--bubble-in); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg.out .msg-card { background: var(--bubble-out); border: none; border-bottom-right-radius: 6px; color: var(--bubble-out-text); }
.msg.in.grouped .msg-card { border-top-left-radius: 8px; }
.msg.out.grouped .msg-card { border-top-right-radius: 8px; }
.msg-body { font-size: 0.95rem; line-height: 1.45; }
.msg.out .msg-body, .msg.out .msg-body a { color: var(--bubble-out-text); }
.msg.out .msg-body a { text-decoration: underline; }

.msg-meta { margin-top: 3px; font-size: 0.7rem; font-weight: 600; }
.msg.in .msg-meta time { color: var(--text-faint); }
.msg.out .msg-meta time { color: var(--bubble-out-meta); }
.msg.out .msg-meta .ticks { color: var(--bubble-out-meta); }
.msg.out .msg-meta .ticks.read { color: #7ee0a1; }

/* Replies inside a sent bubble read on navy */
.msg.out .msg-quote { background: rgba(255, 255, 255, 0.14); border-left-color: #9fb0ff; }
.msg.out .msg-quote strong { color: #dfe4ff; }
.msg.out .msg-quote span { color: #e4e8ff; }

/* Voice notes and files inside a sent bubble */
.msg.out .vn-play { background: #fff; color: var(--bubble-out); }
.msg.out .vn-wave span { background: rgba(255, 255, 255, 0.35); }
.msg.out .vn-wave span.played { background: #fff; }
.msg.out .vn-time, .msg.out .vn-speed { color: var(--bubble-out-meta) !important; }
.msg.out .file-chip { background: rgba(255, 255, 255, 0.12); color: #fff; }

.msg.jumbo .msg-meta time { color: var(--text-faint) !important; }
.typing-bubble { background: var(--bubble-in); border-color: var(--border); }

/* ---------- Composer ---------- */
.composer { gap: 8px; padding: 10px 14px 14px; background: var(--surface); }
.composer-row { align-items: flex-end; gap: 10px; }

.composer-plus {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--soft-accent);
    color: var(--accent);
    transition: background 0.15s;
}

.composer-plus .i { width: 20px; height: 20px; }
.composer-plus:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.composer-box {
    align-items: center;
    min-height: 44px;
    padding: 3px 6px 3px 16px;
    border-radius: 22px;
    background: var(--chat-canvas);
}

.chat-input { font-size: 0.95rem; }
.composer-tools .tool-btn { border-radius: 50%; }

.send-btn.dark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
}

:root[data-theme="dark"] .send-btn.dark { color: #0f1014; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .send-btn.dark { color: #0f1014; } }

/* ---------- Details pane ---------- */
.chat-info .info-head { flex-direction: column; text-align: center; gap: 10px; }
.chat-info .info-head .avatar.lg { width: 88px; height: 88px; font-size: 1.6rem; }
.chat-info .info-head strong { font-size: 1.1rem; font-weight: 800; }

.info-quick { display: flex; justify-content: center; gap: 14px; margin: 4px 0 8px; }

.info-q {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 56px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.info-q-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--soft-accent);
    color: var(--accent);
    transition: background 0.15s;
}

.info-q-ic .i { width: 19px; height: 19px; }
.info-q:hover .info-q-ic { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.info-q[aria-pressed="true"] .info-q-ic { background: var(--accent); color: var(--on-accent); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .inbox, .inbox.show-info { border-radius: 22px; }
    .inbox-head h2 { font-size: 1.75rem; }
    .msg { max-width: 82%; }
    .chat-head { padding: 10px 10px 10px 6px; }
    .chat-head .icon-btn:not(.back-chat) { width: 42px; height: 42px; }
    .composer { padding: 8px 10px 10px; }
}

/* Inbox redesign, phone fixes */
@media (max-width: 760px) {
    .inbox-search { order: 0; width: auto; margin: 0 16px 6px; }
    .inbox-head { padding-top: 16px; }
    .inbox-head h2 { display: none; }
    .inbox-sub { font-size: 0.92rem; font-weight: 700; color: var(--text); padding-top: 12px; }
    .friend-name { white-space: nowrap; }
    .friend-name, .friend-name small { overflow: hidden; text-overflow: ellipsis; }
}
.msg.in .vn-play { background: var(--accent); color: var(--on-accent); }
.msg.out .vn-speed { background: rgba(255, 255, 255, 0.16); }
.msg.out .vn .i { color: var(--bubble-out-meta); }
.msg.out .vn-play .i { color: var(--bubble-out); }

/* =========================================================
   MODERN SOCIAL — design direction (Figma: "Modern social — direction")
   Crisp zinc neutrals · one indigo accent · tight Inter headings · glass navigation.
   These tokens override everything above; components read them.
   ========================================================= */

:root {
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bg: #ffffff;
    --panel: #f4f4f5;
    --surface: #ffffff;
    --input: #f4f4f5;
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --text: #09090b;
    --text-muted: #52525b;
    --text-faint: #71717a;
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --on-accent: #ffffff;
    --accent-soft: rgba(79, 70, 229, 0.1);
    --soft-accent: #eef2ff;
    --board-blue: #4f46e5;
    --danger: #dc2626;
    --dot-red: #dc2626;
    --online: #16a34a;
    --dark-btn: #09090b;
    --on-dark-btn: #ffffff;
    --story-ring: linear-gradient(45deg, #6366f1, #a855f7 55%, #ec4899);
    --bubble-out: #4f46e5;
    --bubble-in: #ffffff;
    --chat-canvas: #fafafa;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 1px 3px rgba(9, 9, 11, 0.06);
    --shadow-lg: 0 12px 32px -8px rgba(9, 9, 11, 0.18), 0 4px 8px -4px rgba(9, 9, 11, 0.06);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
    --bg: #09090b;
    --panel: #111113;
    --surface: #18181b;
    --input: #1f1f23;
    --border: #27272a;
    --border-strong: #3f3f46;
    --text: #fafafa;
    --text-muted: #a1a1aa;
    --text-faint: #8b8b94;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --on-accent: #0b0b12;
    --accent-soft: rgba(129, 140, 248, 0.14);
    --soft-accent: rgba(129, 140, 248, 0.14);
    --board-blue: #818cf8;
    --danger: #f87171;
    --dot-red: #ef4444;
    --dark-btn: #fafafa;
    --on-dark-btn: #09090b;
    --bubble-out: #4f46e5;
    --bubble-in: #1f1f23;
    --chat-canvas: #0c0c0e;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #09090b;
        --panel: #111113;
        --surface: #18181b;
        --input: #1f1f23;
        --border: #27272a;
        --border-strong: #3f3f46;
        --text: #fafafa;
        --text-muted: #a1a1aa;
        --text-faint: #8b8b94;
        --accent: #818cf8;
        --accent-hover: #a5b4fc;
        --on-accent: #0b0b12;
        --accent-soft: rgba(129, 140, 248, 0.14);
        --soft-accent: rgba(129, 140, 248, 0.14);
        --board-blue: #818cf8;
        --danger: #f87171;
        --dot-red: #ef4444;
        --dark-btn: #fafafa;
        --on-dark-btn: #09090b;
        --bubble-out: #4f46e5;
        --bubble-in: #1f1f23;
        --chat-canvas: #0c0c0e;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
    }
}

/* Note colours: a fresher pastel set (text stays dark on all of them) */
.c-yellow { --card: #fde68a; --soft: #fffbeb; --deep: #d97706; }
.c-pink   { --card: #fbcfe8; --soft: #fdf2f8; --deep: #db2777; }
.c-blue   { --card: #c7d2fe; --soft: #eef2ff; --deep: #4f46e5; }
.c-green  { --card: #bbf7d0; --soft: #f0fdf4; --deep: #16a34a; }
.c-purple { --card: #ddd6fe; --soft: #f5f3ff; --deep: #7c3aed; }

/* ---------- Type ---------- */
body {
    font-feature-settings: "cv11", "ss01", "ss03";
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .notes-title, .inbox-head h2 { letter-spacing: -0.025em; }

h1 {
    font-size: 1.9rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.035em;
}

/* ---------- Top bar: glass, sticks while you scroll ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 11;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.search {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--input);
    transition: border-color 0.15s, background-color 0.15s;
}

.search:focus-within { border-color: var(--accent); background: var(--surface); }

/* ---------- Sidebar ---------- */
.nav-item { color: var(--text-muted); font-weight: 500; }
.nav-item:hover { background: var(--panel); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .i { color: var(--accent); }

/* ---------- Content canvas ---------- */
.content { border-top-left-radius: 24px; }

/* ---------- Buttons: one system ---------- */
.primary-btn, .create-post, .pc-post, .mc-share, #tr-save {
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background-color 0.15s, transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.primary-btn:hover, .create-post:hover, .pc-post:hover { background: var(--accent-hover); }
.primary-btn:active, .create-post:active, .pc-post:active { transform: scale(0.98); }
.pc-post { border-radius: 999px; }
.create-post { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }

.chip { border-radius: 999px; font-weight: 600; }

.fab {
    border-radius: 50%;
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.96); }

/* ---------- Cards and surfaces ---------- */
.mcard, .post, .cm-card, .side-box, .profile-card, .stories-bar, .template-card, .hl-card, .social-left, .social-right {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.mcard { border-color: color-mix(in srgb, var(--card) 70%, var(--border)); }
.template-card { border-radius: var(--radius); }
.template-card:hover, .mcard:hover, .cm-card:hover { box-shadow: var(--shadow-lg); }

/* Range tabs become a segmented control */
.tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--panel);
}

.tab {
    padding: 6px 14px;
    border-radius: 9px;
    font-weight: 600;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.tab[aria-selected="true"]::after { display: none; }

/* ---------- Feed: posts read edge to edge ---------- */
.post.ig { border-radius: 20px; overflow: hidden; }
.post-head strong { font-weight: 600; }
.like-btn[aria-pressed="true"] { color: #e11d48; }
.post-actions .act:active .i { transform: scale(0.88); }
.post-actions .act .i { transition: transform 0.15s var(--ease-out); }

/* ---------- Tab bar: glass ---------- */
@media (max-width: 760px) {
    .tabbar {
        background: color-mix(in srgb, var(--bg) 78%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .tab-item { font-weight: 600; }
    .tab-item.active { color: var(--accent); }

    .topbar { padding-top: max(16px, env(safe-area-inset-top)); }
    h1 { font-size: 1.85rem; }

    /* Feed posts go edge to edge on phones, like Instagram and Threads */
    body[data-view="feed"] .post.ig {
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
}

/* Keep motion calm for people who ask for less */
@media (prefers-reduced-motion: reduce) {
    .fab:hover, .template-card:hover { transform: none; }
}

/* Direction fixes: no boxes inside boxes; quiet top-bar icons */
.social-right .side-box, .social-left .profile-card { border: none; box-shadow: none; }
.topbar .bell-btn { background: none; }
.topbar .icon-btn:hover { background: var(--panel); }

/* Initials avatars keep white-on-deep-indigo in both themes (6.3:1) */
:root { --accent-solid: #4f46e5; }
.avatar:not(.has-photo) { background: var(--accent-solid); color: #fff; }
/* Meta text inside sent (indigo) bubbles: #e0e7ff on #4f46e5 = 5.4:1 */
:root { --bubble-out-meta: #e0e7ff; }
.tabs { background: color-mix(in srgb, var(--text) 6%, transparent); }

/* =========================================================
   Bigger message boxes: inbox chat and AI companion
   ========================================================= */

/* Inbox composer */
.composer-box { min-height: 56px; padding: 6px 8px 6px 18px; border-radius: 28px; }
.chat-input { min-height: 40px; max-height: 240px; padding: 9px 0; font-size: 1rem; line-height: 1.5; }
.composer-plus, .send-btn.dark { width: 52px; height: 52px; }
.composer-plus .i, .send-btn.dark .i { width: 22px; height: 22px; }
.composer-tools .tool-btn { width: 40px; height: 40px; }
.composer-tools .tool-btn .i { width: 21px; height: 21px; }

/* Companion: a wider panel with a roomy box */
.companion { width: min(480px, calc(100% - 24px)); }
.companion-compose { gap: 10px; padding: 14px 16px 16px; }
.compose-row { align-items: flex-end; gap: 10px; }
.compose-row textarea {
    min-height: 64px;
    max-height: 260px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.5;
}
.companion .compose-row .send-btn { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }
.companion .bubble p { font-size: 0.95rem; }

@media (max-width: 760px) {
    .composer-box { min-height: 52px; }
    .composer-plus, .send-btn.dark { width: 48px; height: 48px; }
    .companion { width: auto; }
}
.compose-row { display: flex; width: 100%; }
.compose-row textarea { flex: 1 1 auto; width: 100%; }
.chat-input:empty::before { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   Mobile pass (Figma: "Phone / Chat — full screen", "Phone / Companion — full screen")
   ========================================================= */

.search-toggle { display: none; }

@media (max-width: 760px) {
    /* ---------- Top bar: search sits behind an icon ---------- */
    .search-toggle { display: grid; }
    .topbar .search { display: none; }
    body.search-open .topbar .search { display: flex; }
    body.search-open .search-toggle { background: var(--accent-soft); color: var(--accent); }
    .topbar { gap: 4px; padding-bottom: 8px; }
    .topbar h1 { margin-right: auto; }

    /* ---------- A clean white page instead of a grey inset card ---------- */
    .content {
        background: var(--bg);
        border-radius: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* The top bar already names these pages */
    body[data-view="communities"] .notes-head .notes-title,
    body[data-view="highlights"] .notes-head .notes-title { display: none; }

    /* ---------- An open chat fills the screen, like Messages or WhatsApp ---------- */
    body.chat-open .inbox .chat-pane {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        height: var(--vvh, 100dvh);
        display: flex;
        background: var(--bg);
    }

    body.chat-open .chat-head { padding-top: max(10px, env(safe-area-inset-top)); }
    body.chat-open .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    body.chat-open .tabbar,
    body.chat-open .fab { display: none; }

    body.chat-open .inbox.show-info .chat-info {
        position: fixed;
        inset: 0;
        z-index: 31;
        overflow-y: auto;
        padding-top: max(16px, env(safe-area-inset-top));
        background: var(--surface);
    }

    /* Big, thumb-friendly message box */
    .composer { gap: 10px; }
    .composer-box { min-height: 58px; padding: 7px 8px 7px 18px; border-radius: 29px; }
    .chat-input { font-size: 1rem; min-height: 42px; max-height: 40vh; }
    .composer-plus { width: 50px; height: 50px; }
    .send-btn.dark { width: 54px; height: 54px; }
    .composer-tools .tool-btn { width: 42px; height: 42px; }

    /* ---------- Companion: full screen above the keyboard, roomy box ---------- */
    .companion {
        top: 0;
        bottom: auto;
        height: var(--vvh, 100dvh);
        z-index: 32;
        animation: sheet-up 0.28s var(--ease-out);
    }

    .companion-head { padding-top: max(12px, env(safe-area-inset-top)); }
    .companion-compose { padding: 12px 14px max(14px, env(safe-area-inset-bottom)); }
    .compose-row textarea { min-height: 72px; max-height: 45vh; padding: 16px 18px; border-radius: 24px; font-size: 1rem; }
    .companion .compose-row .send-btn { width: 54px; height: 54px; }
    .companion .suggestion, .companion-intro button { min-height: 44px; }
    body.companion-open .tabbar { display: none; }
}

@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .companion { animation: none; }
}
@media (max-width: 760px) {
    .social-main .block-head { flex-wrap: wrap; row-gap: 10px; }
    .social-main .block-head h2 { flex-basis: 100%; font-size: 1.3rem; }
    .social-main .block-head .reels-chip { margin-left: 0; }
    .social-main .block-head .feed-sort { margin-left: auto; }
}

/* =========================================================
   NATIVE FEEL — mobile-native + apple-design skills
   ========================================================= */

:root {
    /* Sheet/drawer curve (critically damped feel, no overshoot) and press timing */
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --press: 100ms;
}

/* ---------- Platform baseline ---------- */
html {
    -webkit-tap-highlight-color: transparent;   /* no grey flash on tap */
    -webkit-text-size-adjust: 100%;              /* no font inflation in landscape */
}

/* Taps fire immediately (no double-tap-zoom wait) */
button, a, [role="button"], [data-action], label, summary {
    touch-action: manipulation;
}

/* Controls aren't text: a long-press shouldn't select their label */
button, [role="button"], .tab, .tab-item, .chip, .pill, .nav-item, .story, .reel-act, .act, .quick-reply, .template-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* iPhone zooms into any field under 16px — keep every field at 16px on touch screens */
@media (pointer: coarse) {
    input, textarea, select, .chat-input, [contenteditable="true"] { font-size: max(16px, 1em); }
    .search input { font-size: 16px; }
}

/* ---------- Touch: no sticky hover, feedback on press ---------- */
@media (hover: none) {
    /* Hover lifts and fills would stick after a tap */
    .template-card:hover, .mcard:hover, .cm-card:hover, .hl-card:hover, .fab:hover,
    .compose-btn:hover, .quick-reply:hover, .cover-opt:hover {
        transform: none;
        box-shadow: var(--shadow);
    }

    .topbar .icon-btn:hover, .nav-item:hover:not(.active), .tab:hover, .convo:hover:not(.active),
    .quick-reply:hover, .inbox-tab:hover:not([aria-selected="true"]) { background: transparent; }
    .convo:hover:not(.active) { background: none; }

    /* Press = a quick, small scale, felt the instant the finger lands */
    .chip, .primary-btn, .pc-post, .create-post, .fab, .quick-reply, .composer-plus, .send-btn,
    .compose-btn, .template-card, .mcard, .cm-card, .convo, .inbox-tab, .tab-item, .story,
    .active-friend, .reel-act, .pc-tool, .hl-chip, .pour button, .feed-sort button, .info-q {
        transition: transform var(--press) ease-out, opacity var(--press) ease-out, background-color var(--press) ease-out;
    }

    .chip:active, .primary-btn:active, .pc-post:active, .create-post:active, .quick-reply:active,
    .composer-plus:active, .send-btn:active, .compose-btn:active, .inbox-tab:active, .pc-tool:active,
    .hl-chip:active, .pour button:active, .feed-sort button:active, .info-q:active, .active-friend:active {
        transform: scale(0.96);
        opacity: 1;
    }

    .template-card:active, .mcard:active, .cm-card:active { transform: scale(0.98); opacity: 1; }
    .convo:active { transform: scale(0.99); background: var(--panel); opacity: 1; }
    .fab:active { transform: scale(0.92); opacity: 1; }
    .tab-item:active .i, .reel-act:active .i, .story:active .story-ring { transform: scale(0.9); }
    .tab-item .i, .reel-act .i, .story .story-ring { transition: transform var(--press) ease-out; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    /* Inner scrollers keep their own bounce but never drag the page behind them */
    .chat-thread, .convo-list, .companion-thread, .reels, .notif-list, .sv-list, .tr-live, .reel-sheet-body {
        overscroll-behavior: contain;
    }

    /* Materials: frosted bars with a bright top edge instead of a hard divider */
    .tabbar {
        border-top: none;
        box-shadow: 0 -0.5px 0 color-mix(in srgb, var(--text) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    :root[data-theme="dark"] .tabbar { box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.08); }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar { box-shadow: 0 -0.5px 0 rgba(255, 255, 255, 0.08); } }

    /* Active tab: a soft pill behind the icon, like iOS 26 / Material 3 */
    .tab-item { gap: 2px; padding-top: 4px; }
    .tab-item .i { box-sizing: content-box; padding: 4px 16px; border-radius: 999px; transition: background-color 0.2s var(--ease-out), transform var(--press) ease-out; }
    .tab-item.active .i { background: var(--accent-soft); }

    /* Large title that settles into a compact bar as you scroll (iOS large titles) */
    @supports (animation-timeline: scroll()) {
        .topbar h1 {
            transform-origin: left center;
            animation: title-collapse linear both;
            animation-timeline: scroll(nearest block);
            animation-range: 0 90px;
        }

        .topbar {
            animation: bar-edge linear both;
            animation-timeline: scroll(nearest block);
            animation-range: 0 60px;
        }
    }

    /* Opening a chat pushes in from the right; leaving slides it back out the same way */
    body.chat-open .inbox .chat-pane { animation: push-in 0.34s var(--ease-sheet) both; }
    body.chat-open .inbox .chat-pane.leaving { animation: push-out 0.22s var(--ease-sheet) both; }

    /* Sheets rise on the sheet curve and carry a grab handle */
    .share-sheet[open], .reel-sheet[open], .media-compose[open] { animation: sheet-rise 0.36s var(--ease-sheet) both; }
    .companion { animation: sheet-rise 0.36s var(--ease-sheet) both; }

    /* Type: large titles tighten, tiny caps labels open up */
    .active-label, .share-label, .notif-group, .info-label, .pair-label { letter-spacing: 0.06em; }
}

@keyframes title-collapse { to { transform: scale(0.72); } }
@keyframes bar-edge { to { box-shadow: 0 0.5px 0 color-mix(in srgb, var(--text) 12%, transparent); } }
@keyframes push-in { from { transform: translateX(100%); } }
@keyframes push-out { to { transform: translateX(100%); } }
@keyframes sheet-rise { from { transform: translateY(100%); } }

/* ---------- Accessibility settings ---------- */
@media (prefers-reduced-motion: reduce) {
    .topbar h1, .topbar { animation: none !important; }
    body.chat-open .inbox .chat-pane, .share-sheet[open], .reel-sheet[open], .media-compose[open], .companion {
        animation: fade-in 0.2s ease both !important;
    }

    .chip:active, .primary-btn:active, .fab:active, .mcard:active, .convo:active, .template-card:active { transform: none; }
}

@keyframes fade-in { from { opacity: 0; } }

/* Frosted surfaces go solid for people who reduce transparency */
@media (prefers-reduced-transparency: reduce) {
    .topbar, .tabbar, .chat-head, .reels-head {
        background: var(--bg) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Stronger edges for people who ask for more contrast */
@media (prefers-contrast: more) {
    .tabbar, .topbar { background: var(--bg); border-color: var(--text); }
    .mcard, .post, .cm-card, .template-card { border-color: var(--text-muted); }
}

/* =========================================================
   COMMUNITIES — interactive & fun
   ========================================================= */

/* ---------- Discovery ---------- */
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; }
.cm-search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.cm-filters { display: inline-flex; gap: 6px; }

.cm-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 600;
}

.cm-filter span { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.cm-filter[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.cm-filter[aria-pressed="true"] span { color: inherit; opacity: 0.7; }

.cm-trending {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding: 4px 2px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cm-trending::-webkit-scrollbar { display: none; }

.cm-trend {
    position: relative;
    flex: 0 0 176px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 196px;
    padding: 16px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--card), color-mix(in srgb, var(--deep) 40%, var(--card)));
    color: #111;
    scroll-snap-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.cm-trend::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.cm-trend-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: auto; animation: bob 3.2s ease-in-out infinite; }
.cm-trend:nth-child(2n) .cm-trend-emoji { animation-delay: -1.1s; }
.cm-trend strong { position: relative; z-index: 1; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.cm-trend small { font-size: 0.78rem; font-weight: 600; color: rgba(17, 17, 17, 0.7); }

.cm-trend-join, .cm-trend-tag {
    align-self: flex-start;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cm-trend-tag { background: rgba(255, 255, 255, 0.55); box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
    .cm-trend:hover { transform: translateY(-3px) rotate(-0.6deg); box-shadow: var(--shadow-lg); }
}

@keyframes bob { 50% { transform: translateY(-5px) rotate(4deg); } }

/* Cards get a colour banner */
.cm-cover {
    background: linear-gradient(150deg, var(--card), color-mix(in srgb, var(--deep) 35%, var(--card)));
}

/* ---------- Community header ---------- */
.cm-hero {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--deep) 45%, var(--card)));
    color: #111;
}

.cm-hero::before {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}

.cm-hero .cm-meta, .cm-hero p { color: rgba(17, 17, 17, 0.78); }
.cm-hero h2 { color: #111; }
.cm-hero-emoji { animation: bob 3.6s ease-in-out infinite; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35); }

.cm-stats {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(17, 17, 17, 0.8);
}

.cm-stats b { font-weight: 800; color: #111; }
.cm-here { display: inline-flex; align-items: center; gap: 6px; }
.cm-here:empty { display: none; }
.cm-here .avatar-stack .avatar { border: 2px solid rgba(255, 255, 255, 0.9); }

.cm-here-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
    animation: here-pulse 1.8s ease-out infinite;
}

@keyframes here-pulse { 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

/* ---------- Layout: posts + rail ---------- */
.cm-layout { display: flex; flex-direction: column; gap: 16px; }
.cm-rail { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 1100px) {
    .cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
    .cm-layout .cm-rail { order: 2; position: sticky; top: 104px; }
}

.cm-prompt {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(140deg, #4f46e5, #7c3aed 60%, #db2777);
    color: #fff;
}

.cm-prompt::after { content: "💬"; position: absolute; right: 12px; bottom: -6px; font-size: 3.4rem; opacity: 0.25; transform: rotate(-12deg); }
.cm-prompt-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.cm-prompt p { position: relative; z-index: 1; margin: 6px 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }

.cm-prompt-btn {
    position: relative;
    z-index: 1;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: #312e81;
    font-size: 0.86rem;
    font-weight: 700;
}

.cm-top { padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
.cm-top h3 { margin-bottom: 10px; font-size: 0.95rem; font-weight: 800; }
.cm-top-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; font-weight: 600; }
.cm-medal { font-size: 1.2rem; width: 24px; text-align: center; }

@media (max-width: 1099px) {
    .cm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 14px; }
    .cm-top h3 { width: 100%; margin: 0 0 2px; }
    .cm-top-row { padding: 2px 0; }
}

/* ---------- Polls ---------- */
.cm-poll { display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 12px; }
.cm-poll-q { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }

.cm-poll-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s ease-out;
}

.cm-poll-fill {
    position: absolute;
    inset: 0;
    width: var(--pct, 0%);
    background: var(--accent-soft);
    transition: width 0.7s var(--ease-out);
}

.cm-poll-label, .cm-poll-pct { position: relative; }
.cm-poll-pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-poll-opt.chosen { border-color: var(--accent); }
.cm-poll-opt.chosen .cm-poll-fill { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cm-poll-opt:active:not(:disabled) { transform: scale(0.98); }
.cm-poll-opt:disabled { opacity: 1; cursor: default; }
.cm-poll-foot { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }

@media (hover: hover) and (pointer: fine) {
    .cm-poll:not(.results) .cm-poll-opt:hover:not(:disabled) { border-color: var(--accent); }
}

/* Poll builder in the composer */
.cm-poll-build { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; padding: 12px; border-radius: 16px; background: var(--panel); }

.cm-poll-in {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font: inherit;
    font-size: 0.95rem;
}

.cm-poll-in:not(.opt) { font-weight: 700; }
.cm-poll-in:focus { outline: none; border-color: var(--accent); }
.cm-poll-build-foot { display: flex; gap: 8px; }
.pc-tool.poll .i { color: #7c3aed; }
.pc-tool.poll[aria-pressed="true"] { color: var(--accent); }

/* ---------- Reactions ---------- */
.cm-reacts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 10px; }

.cm-react, .cm-react-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.95rem;
}

.cm-react span { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cm-react.mine { border-color: var(--accent); background: var(--accent-soft); }
.cm-react.mine span { color: var(--accent); }
.cm-react.pop { animation: react-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.cm-react-add { color: var(--text-muted); }
.cm-react-add .i { width: 17px; height: 17px; }
.cm-react-add span { font-weight: 800; }

.cm-react-picker {
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    animation: pop 0.18s var(--ease-out);
}

.cm-react-picker button { width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; transition: transform 0.12s ease-out; }
.cm-react-picker button:active { transform: scale(1.3); }
@media (hover: hover) and (pointer: fine) { .cm-react-picker button:hover { transform: scale(1.25); background: var(--panel); } }

.pinned-line { color: var(--accent); }

/* ---------- Confetti ---------- */
.confetti-bit {
    position: fixed;
    z-index: 200;
    width: 8px;
    height: 11px;
    border-radius: 2px;
    pointer-events: none;
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .cm-toolbar { gap: 8px; }
    .cm-search { flex-basis: 100%; max-width: none; }
    .cm-trend { flex-basis: 158px; min-height: 180px; }
    .cm-hero { border-radius: 22px; }
    .cm-prompt p { font-size: 1.05rem; }
    .cm-poll, .cm-reacts { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-trend-emoji, .cm-hero-emoji, .cm-here-dot { animation: none; }
    .cm-poll-fill { transition: none; }
}
.cm-hero .chip, .cm-hero .call-chip { background: rgba(255, 255, 255, 0.78); color: #111; }
.cm-hero .call-chip { color: #15803d; }
.cm-hero .icon-btn { background: rgba(255, 255, 255, 0.78); color: #111; }
.cm-search { background: var(--surface); border: 1px solid var(--border); }

/* Inbox fills the screen: one full-width column on phones, flexible panes on larger screens */
@media (max-width: 760px) {
    .inbox, .inbox.show-info { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .inbox-list, .chat-pane { width: 100%; min-width: 0; }
}

@media (min-width: 761px) {
    .inbox { grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); }
    .inbox.show-info { grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) minmax(260px, 26%); }
}

@media (min-width: 1400px) {
    .inbox { grid-template-columns: 380px minmax(0, 1fr); }
    .inbox.show-info { grid-template-columns: 380px minmax(0, 1fr) 320px; }
}
@media (max-width: 760px) {
    body[data-view="messages"] .content { padding-bottom: 0 !important; }
    body[data-view="messages"] .inbox:not(.has-active) {
        height: calc(var(--vvh, 100dvh) - 86px - 72px - env(safe-area-inset-bottom, 0px));
        min-height: 0;
    }
}

/* Phone top bar: one even row — search · companion · notifications · you */
@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; align-items: center; column-gap: 2px; row-gap: 8px; }
    .topbar h1 { order: 0; flex: 1 1 0; min-width: 0; margin-right: 6px; }
    .topbar .search-toggle { order: 1; }
    .topbar .companion-btn { order: 2; }
    .topbar .bell-btn { order: 3; }
    .topbar .profile { order: 4; }
    .topbar .search { order: 5; flex: 1 1 100%; }

    .topbar .icon-btn,
    .topbar .profile {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        display: grid;
        place-items: center;
        border-radius: 50%;
    }

    .topbar .icon-btn .i { width: 23px; height: 23px; }
    .topbar .companion-btn .i { width: 22px; height: 22px; }
    .topbar .profile { gap: 0; margin-left: 4px; }
    .topbar .profile .avatar { width: 34px; height: 34px; font-size: 0.8rem; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border); }
    .topbar .bell-count:not(:empty) { top: 2px; right: 2px; }
}

/* =========================================================
   Library · Feed v2
   ========================================================= */


/* ---------- Library ---------- */
.lib-head { align-items: flex-end; }
.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 6px; }
.lib-search { flex: 1 1 260px; max-width: 460px; margin: 0; background: var(--surface); border: 1px solid var(--border); }
.lib-kinds { flex-wrap: wrap; }

.book-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 6px 12px 12px 6px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 22px -10px rgba(0, 0, 0, 0.45), inset 3px 0 0 rgba(0, 0, 0, 0.12);
}

.book-cover img { width: 100%; height: 100%; object-fit: cover; }

.book-cover.gen {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 12px 14px;
    background: linear-gradient(155deg, var(--c1), var(--c2));
    color: #fff;
    text-align: left;
}

.book-cover.gen::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: rgba(255, 255, 255, 0.18); }
.gen-kind { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.gen-title { margin-top: auto; font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size: 1.05rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gen-author { margin-top: 6px; font-size: 0.7rem; font-weight: 600; opacity: 0.85; }
.book-cover.lg .gen-title { font-size: 1.3rem; }

.book { display: flex; flex-direction: column; gap: 6px; width: 132px; flex-shrink: 0; text-align: left; transition: transform 0.2s var(--ease-out); }
.book-title { font-size: 0.86rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-meta { font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .book:hover { transform: translateY(-3px); } }

.lib-row { display: flex; gap: 16px; margin-top: 12px; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.lib-row::-webkit-scrollbar { display: none; }
.lib-row .book { scroll-snap-align: start; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 16px; margin-top: 12px; }
.lib-grid .book { width: auto; }
.lib-shelf { margin-top: 22px; }

.lib-feature {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-top: 18px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1e1b4b, #4c1d95 55%, #7c3aed);
    color: #fff;
    text-align: left;
    overflow: hidden;
}

.lib-feature .book-cover { width: 120px; flex-shrink: 0; }
.lib-feature-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lib-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c4b5fd; }
.lib-feature strong { font-family: ui-serif, Georgia, serif; font-size: 1.6rem; line-height: 1.15; }
.lib-feature-meta { font-size: 0.84rem; color: #ddd6fe; }
.lib-feature-desc { font-size: 0.9rem; line-height: 1.45; color: #ede9fe; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-feature-cta { align-self: flex-start; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #312e81; font-size: 0.86rem; font-weight: 700; }

.lib-empty .primary-btn { margin-top: 16px; }
.lib-skel { display: flex; gap: 16px; margin-top: 24px; overflow: hidden; }
.sk-book { flex: 0 0 132px; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--panel); animation: shimmer 1.4s ease-in-out infinite; }

/* ---------- Reader ---------- */
.reader {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--bg);
    color: var(--text);
}

.reader[open] { display: flex; flex-direction: column; animation: sheet-rise 0.36s var(--ease-sheet) both; }

.reader-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
}

.reader-bar-title { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.reader-aa { font-size: 0.9rem; font-weight: 700; }
#reader-like[aria-pressed="true"] { color: #e11d48; }
#reader-save[aria-pressed="true"] { color: var(--accent); }
.reader-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.reader-progress i { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.1s linear; }

.reader-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 28px 20px calc(60px + env(safe-area-inset-bottom)); --reader-size: 19px; }
.reader-head, .reader-text, .reader-file, .reader-end { max-width: 660px; margin-left: auto; margin-right: auto; }
.reader-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 30px; }
.reader-head .book-cover { width: 150px; margin-bottom: 8px; }
.reader-h { font-family: ui-serif, Georgia, serif; font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-transform: none; white-space: normal; }
.reader-author { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.reader-desc { max-width: 520px; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.reader-stats { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }

.reader-text { font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size: var(--reader-size); line-height: 1.75; overflow-wrap: anywhere; }
.reader-text p, .reader-text div { margin-bottom: 1em; }
.reader-text blockquote { margin: 1.2em 0; padding-left: 1em; border-left: 3px solid var(--accent); font-style: italic; color: var(--text-muted); }
.reader-file { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.reader-pdf { width: 100%; height: 75vh; margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; }
.reader-end { margin-top: 40px; text-align: center; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--text-faint); }

/* ---------- Publish sheet ---------- */
.lib-compose {
    width: min(720px, calc(100% - 24px));
    max-height: min(92dvh, 860px);
    padding: 0;
    border: none;
    border-radius: 24px;
    background: var(--surface);
    color: var(--text);
}

.lib-compose[open] { display: flex; }
.lc-form { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.lc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.lc-head h3 { flex: 1; font-size: 1.05rem; font-weight: 800; text-align: center; }
.lc-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; }
.lc-chips, .lc-source, .lc-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lc-top { display: flex; gap: 14px; }

.lc-cover {
    flex: 0 0 110px;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px 12px 12px 8px;
    border: 2px dashed var(--border-strong);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.lc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-cover img + span { position: absolute; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.lc-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.lc-fields input, .lc-fields textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    font: inherit;
    font-size: 16px;
    resize: none;
}

.lc-fields input:focus, .lc-fields textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.lc-title { font-family: ui-serif, Georgia, serif !important; font-size: 1.25rem !important; font-weight: 700; }
.lc-write { display: flex; flex-direction: column; gap: 8px; }

.lc-editor {
    min-height: 240px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-family: ui-serif, Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

.lc-editor:focus { border-color: var(--accent); background: var(--surface); }
.lc-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 14px; background: var(--panel); }

/* ---------- Feed v2 ---------- */
.feed-bar {
    position: sticky;
    top: 92px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -2px 12px;
    padding: 8px 2px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}

.feed-tabs {
    flex: 1;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.feed-tab {
    flex: 1;
    min-height: 38px;
    border-radius: 9px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: background-color 0.15s, color 0.15s;
}

.feed-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.feed-search-btn { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); }
.feed-search-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.feed-bar .reels-chip { margin: 0; min-height: 40px; background: var(--accent-soft); color: var(--accent); }
.feed-search { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); }

/* Composer: one line until you start */
.post-composer .pc-row { align-items: center; }
.post-composer #feed-text { min-height: 44px; padding: 11px 16px; border-radius: 22px; resize: none; }
.post-composer:not(.open):not(:focus-within) .pc-foot { display: none; }
.post-composer.open .pc-quick, .post-composer:focus-within .pc-quick { display: none; }

.pc-quick {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #16a34a;
    background: color-mix(in srgb, #16a34a 10%, transparent);
}

/* New posts */
.new-posts {
    position: sticky;
    top: 150px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto -38px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: drop-in 0.3s var(--ease-out);
}

.new-posts[hidden] { display: none; }
.new-posts .i { width: 15px; height: 15px; }

/* Post card polish */
.post.ig { border-radius: 22px; }
.post-head { padding: 14px 14px 10px 16px; }
.post-actions { gap: 4px; padding: 6px 10px 2px; }
.post-actions .act { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 8px; border-radius: 12px; }
.post-actions .act-count { margin-left: 0; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.post-actions .like-btn[aria-pressed="true"] .act-count { color: #e11d48; }
.post-likes { display: flex; align-items: center; gap: 8px; padding: 0 16px 6px; font-size: 0.86rem; font-weight: 500; }
.post-likes strong { font-weight: 700; }
.post-likes .avatar-stack .avatar { width: 20px; height: 20px; font-size: 0.5rem; border: 2px solid var(--surface); }

@media (min-width: 761px) {
    .post.ig .post-media { margin: 0 12px; border-radius: 16px; overflow: hidden; }
}

/* Loading placeholders */
.post-skel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-av { width: 38px; height: 38px; border-radius: 50%; background: var(--panel); }
.sk-line { height: 12px; width: 100%; border-radius: 6px; background: var(--panel); }
.sk-line.w40 { width: 40%; }
.sk-line.w70 { width: 70%; }
.sk-media { height: 220px; border-radius: 16px; background: var(--panel); }
.post-skel i, .sk-book { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: 0.55; } }

/* Right rail additions */
.trend-tags { display: flex; flex-direction: column; gap: 2px; }
.trend-tag { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 40px; padding: 6px 8px; border-radius: 10px; text-align: left; }
.trend-tag span { font-weight: 700; color: var(--accent); }
.trend-tag small { font-size: 0.75rem; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .trend-tag:hover, .lib-mini:hover { background: var(--panel); } }
.lib-mini { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border-radius: 12px; text-align: left; }
.lib-mini .book-cover { width: 44px; flex-shrink: 0; border-radius: 3px 6px 6px 3px; }
.lib-mini .book-cover.gen { padding: 4px 4px 4px 6px; }
.lib-mini .gen-kind, .lib-mini .gen-author { display: none; }
.lib-mini .gen-title { font-size: 0.5rem; }
.lib-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lib-mini strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-mini small { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .feed-bar { top: 62px; margin: 0 -16px 12px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
    .feed-bar .reels-chip span { display: none; }
    .feed-bar .reels-chip { width: 44px; justify-content: center; padding: 0; }
    .new-posts { top: 118px; }
    body[data-view="feed"] .fab { display: none; }
    .post-composer { border-radius: 20px; }

    .lib-feature { flex-direction: row; gap: 14px; padding: 16px; border-radius: 22px; }
    .lib-feature .book-cover { width: 92px; }
    .lib-feature strong { font-size: 1.25rem; }
    .lib-feature-desc { display: none; }
    .book { width: 118px; }
    .lib-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 12px; }
    .lib-search { flex-basis: 100%; max-width: none; }
    .lib-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

    .lib-compose { width: 100%; max-width: 100%; height: var(--vvh, 100dvh); max-height: none; margin: 0; border-radius: 0; animation: sheet-rise 0.36s var(--ease-sheet) both; }
    .lc-head { padding-top: max(12px, env(safe-area-inset-top)); }
    .lc-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .lc-top { flex-direction: column; }
    .lc-cover { flex-basis: auto; width: 110px; }
    .reader-body { padding-left: 22px; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .post-skel i, .sk-book { animation: none; }
    .reader[open], .lib-compose { animation: none; }
}

.post-composer:not(.open):not(:focus-within) #feed-text { height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gen-title { overflow-wrap: break-word; hyphens: auto; }
.lib-feature .gen-title { font-size: 0.95rem; }
@media (max-width: 760px) {
    body[data-view="library"] .notes-head .notes-title { display: none; }
    body[data-view="library"] .fab { display: none; }
    .lib-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
    .lib-head .create-post { flex-shrink: 0; width: auto; height: 44px; padding: 0 16px; border-radius: 999px; }
    .lib-head .create-post span { display: inline; }
    .lib-feature .gen-title { font-size: 0.78rem; }
    .lib-feature .gen-author { font-size: 0.6rem; }
    .lib-row .gen-title, .lib-grid .gen-title { font-size: 0.95rem; }
}
.lib-feature .book-cover .gen-title { font-size: 0.95rem; }
@media (max-width: 760px) {
    .lib-feature .book-cover .gen-title { font-size: 0.78rem; }
    body[data-view="library"] .lib-head .create-post span { display: inline; }
}
@media (max-width: 760px) {
    .lib-head .create-post, .lib-head .create-post span { font-size: 0.9rem; gap: 6px; }
}
.reader-head .lib-eyebrow { color: var(--accent); }

/* ---------- Settings ---------- */
.settings { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; padding-bottom: 32px; }
.st-head .muted { margin: 2px 0 0; }
.st-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 16px;
    box-shadow: var(--shadow);
}
.st-card h3 {
    margin: 12px 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.st-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.st-card h3 + .st-row { border-top: 0; }
.st-row[hidden] { display: none; }
.st-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}
.st-ic .i { width: 18px; height: 18px; }
.st-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-text strong { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.st-text small { font-size: 0.8rem; color: var(--text-muted); line-height: 1.35; }

.st-btn {
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background 120ms;
}
.st-btn:active { transform: scale(0.97); }
.st-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
@media (hover: hover) and (pointer: fine) {
    .st-btn:hover { background: var(--input); }
    .st-btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
}

.st-seg {
    flex: none;
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background: var(--input);
    border: 1px solid var(--border);
}
.st-seg button {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.st-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.st-swatches { flex: none; display: flex; gap: 8px; }
.st-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--sw);
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent;
    transition: box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out);
}
.st-swatch:active { transform: scale(0.92); }
.st-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }
.st-swatch:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

.st-switch { flex: none; }
.st-switch .switch { width: 44px; height: 26px; }
.st-switch .switch::after { width: 22px; height: 22px; }
.st-switch input:checked + .switch::after { transform: translateX(18px); }

.st-profile { display: flex; align-items: center; gap: 16px; padding: 16px; flex-wrap: wrap; }
.st-avatar { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.st-avatar .photo-badge {
    position: absolute; right: -2px; bottom: -2px;
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-solid); color: #fff;
    border: 2px solid var(--surface);
}
.st-avatar .photo-badge .i { width: 14px; height: 14px; }
.st-who { flex: 1; min-width: 140px; display: grid; gap: 2px; }
.st-who strong { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.st-who small { color: var(--text-muted); font-size: 0.85rem; }
.st-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-danger { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.st-danger .st-ic { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.st-foot { text-align: center; }

@media (max-width: 560px) {
    .settings { gap: 12px; }
    .st-row { flex-wrap: wrap; row-gap: 10px; }
    .st-row:has(> .st-seg, > .st-swatches) > .st-text { flex: 1 1 calc(100% - 48px); }
    .st-row > .st-seg, .st-row > .st-swatches { margin-left: 48px; }
    .st-row > .st-seg { flex: 1; }
    .st-seg button { flex: 1; min-height: 36px; }
    .st-profile { text-align: left; }
    .st-profile-actions { width: 100%; }
    .st-profile-actions .st-btn { flex: 1; min-height: 44px; }
    .st-btn { min-height: 40px; }
}

/* Accent colours (Settings → Appearance). Each light shade passes 4.5:1 on white; dark shades on #09090b */
:root[data-accent="violet"] { --accent: #7c3aed; --accent-hover: #6d28d9; --accent-soft: rgba(124, 58, 237, 0.1); --soft-accent: #f5f3ff; --accent-solid: #7c3aed; --bubble-out: #7c3aed; --board-blue: #7c3aed; }
:root[data-accent="rose"] { --accent: #e11d48; --accent-hover: #be123c; --accent-soft: rgba(225, 29, 72, 0.1); --soft-accent: #fff1f2; --accent-solid: #e11d48; --bubble-out: #e11d48; --board-blue: #e11d48; --bubble-out-meta: #ffe4e6; }
:root[data-accent="emerald"] { --accent: #047857; --accent-hover: #065f46; --accent-soft: rgba(4, 120, 87, 0.1); --soft-accent: #ecfdf5; --accent-solid: #047857; --bubble-out: #047857; --board-blue: #047857; --bubble-out-meta: #d1fae5; }
:root[data-accent="violet"][data-theme="dark"] { --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-soft: rgba(167, 139, 250, 0.14); --soft-accent: rgba(167, 139, 250, 0.14); --board-blue: #a78bfa; }
:root[data-accent="rose"][data-theme="dark"] { --accent: #fb7185; --accent-hover: #fda4af; --accent-soft: rgba(251, 113, 133, 0.14); --soft-accent: rgba(251, 113, 133, 0.14); --board-blue: #fb7185; }
:root[data-accent="emerald"][data-theme="dark"] { --accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: rgba(52, 211, 153, 0.14); --soft-accent: rgba(52, 211, 153, 0.14); --board-blue: #34d399; }
@media (prefers-color-scheme: dark) {
    :root[data-accent="violet"]:not([data-theme="light"]) { --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-soft: rgba(167, 139, 250, 0.14); --soft-accent: rgba(167, 139, 250, 0.14); --board-blue: #a78bfa; }
    :root[data-accent="rose"]:not([data-theme="light"]) { --accent: #fb7185; --accent-hover: #fda4af; --accent-soft: rgba(251, 113, 133, 0.14); --soft-accent: rgba(251, 113, 133, 0.14); --board-blue: #fb7185; }
    :root[data-accent="emerald"]:not([data-theme="light"]) { --accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: rgba(52, 211, 153, 0.14); --soft-accent: rgba(52, 211, 153, 0.14); --board-blue: #34d399; }
}

/* Text size (Settings → Appearance); the app is sized in rem */
:root[data-text="small"] { font-size: 93.75%; }
:root[data-text="large"] { font-size: 112.5%; }

/* Reduce motion (Settings), same as the OS preference */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Forgot password link under the password field */
.auth-forgot {
    justify-self: end;
    align-self: flex-end;
    margin: -4px 0 4px auto;
    display: block;
    min-height: 32px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.auth-forgot[hidden] { display: none; }
.auth-forgot:disabled { opacity: 0.5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .auth-forgot:hover { text-decoration: underline; } }

/* =========================================================
   Feed v3 · post view, comment previews, caught-up marker
   ========================================================= */

/* ---------- Cards invite a tap ---------- */
.post.ig { cursor: pointer; transition: box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.post.ig :is(button, a, input, form, .comments, .cm-poll) { cursor: auto; }
.post.ig :is(button, a) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
    .post.ig:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
}
.post-time {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) { .post-time:hover { color: var(--text); text-decoration: underline; } }
.post-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post.ig:has(.post-time:focus-visible) { border-color: var(--accent); }

/* Latest two comments under a card */
.comments[data-mode="card"] { display: grid; gap: 4px; padding: 0 16px 12px; }
.comments[data-mode="card"] .muted-link { justify-self: start; min-height: 32px; font-size: 0.86rem; color: var(--text-muted); }
.comment-preview { display: grid; gap: 2px; }
.cp-line {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.cp-line strong { font-weight: 600; margin-right: 2px; }
.comments[data-mode="card"] .comment-form { margin-top: 4px; }

/* ---------- Caught up ---------- */
.feed-end {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin: 8px 0 28px;
    padding: 28px 16px;
    text-align: center;
    border-top: 1px solid var(--border);
}
.fe-check {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--story-ring);
    color: #fff;
}
.fe-check .i { width: 24px; height: 24px; stroke-width: 3; }
.feed-end strong { font-size: 1rem; letter-spacing: -0.01em; }
.feed-end small { color: var(--text-muted); font-size: 0.85rem; }
.feed-end .link-btn { margin-top: 6px; min-height: 36px; }

/* ---------- Post view ---------- */
html.pv-lock, html.pv-lock body { overflow: hidden; }

.post-view {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: hidden;
}
.post-view[open] { display: block; }
.post-view::backdrop { background: rgba(9, 9, 11, 0.62); }

/* Phones: a full page that slides in from the right, and back out the same way */
.pv-shell {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    animation: pv-in-page 380ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.post-view.closing .pv-shell { animation: pv-out-page 220ms cubic-bezier(0.4, 0, 1, 1) both; }
.post-view.closing::backdrop { opacity: 0; transition: opacity 220ms; }
@keyframes pv-in-page { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pv-out-page { from { transform: none; } to { transform: translateX(100%); } }

.pv-top {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--border);
}
.pv-top .icon-btn, .pv-top .more-btn { width: 44px; height: 44px; flex: none; }
.pv-ic-close { display: none; }
.pv-top-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pv-top-who > span { display: grid; min-width: 0; line-height: 1.25; }
.pv-top-who strong { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-top-who small { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-media { flex: none; background: #000; }
.pv-media .post-media { border-radius: 0; }
.pv-media .slide { max-height: 70vh; overflow: hidden; }
.pv-media .slide img { max-height: 70vh; object-fit: contain; }
.pv-shell, .pv-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.pv-scroll { flex: 1 0 auto; padding: 14px 16px 8px; }
.pv-post .post-caption { padding: 0; }
.pv-post .post-text { display: block; font-size: 1rem; line-height: 1.6; color: var(--text); }
.pv-post .cap-title { display: block; margin-bottom: 6px; font-size: 1.1rem; letter-spacing: -0.01em; }
.pv-post .post-tags { padding: 8px 0 0; }
.pv-post .repost-line { padding: 0 0 8px; }
.pv-date { margin: 12px 0 0; font-size: 0.78rem; color: var(--text-faint); }

.comments[data-mode="full"] { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); }
.post-view .toast { top: calc(68px + env(safe-area-inset-top, 0px)); bottom: auto; }
.pv-c-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.pv-c-head span {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--input);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}
.comments.full .comment-list { max-height: none; overflow: visible; gap: 14px; }
.comment.full { display: flex; gap: 10px; align-items: flex-start; animation: pv-comment-in 260ms var(--ease-out) both; }
@keyframes pv-comment-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c-main { min-width: 0; flex: 1; }
.c-bubble {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    border-radius: 4px 16px 16px 16px;
    background: var(--input);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.c-bubble strong { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 1px; }
.comment.full .comment-meta { display: flex; align-items: center; gap: 4px; padding: 3px 0 0 12px; }
.comment.full .comment-meta .link-btn { min-height: 28px; font-weight: 600; }
.pv-c-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 12px; text-align: center; color: var(--text-muted); }
.pv-c-empty .i { width: 28px; height: 28px; margin-bottom: 4px; color: var(--text-faint); }
.pv-c-empty strong { color: var(--text); font-size: 0.95rem; }
.pv-c-empty span { font-size: 0.85rem; }
.pv-c-skel { display: grid; gap: 14px; }
.pv-c-skel i {
    display: block;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--input) 0%, var(--border) 50%, var(--input) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.2s linear infinite;
}
.pv-c-skel i:nth-child(2) { width: 78%; }
.pv-c-skel i:nth-child(3) { width: 58%; }
@keyframes sk-shimmer { to { background-position: -200% 0; } }

.pv-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 2px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-top: 1px solid var(--border);
}
.pv-foot .post-actions { padding: 2px 2px 0; }
.pv-stats .post-likes { padding: 0 8px 4px; }
.pv-emojis { display: flex; justify-content: space-between; gap: 2px; padding: 2px 4px; }
.pv-emojis button {
    flex: 1;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms var(--ease-out), background 140ms;
}
.pv-emojis button:active { transform: scale(1.25); }
@media (hover: hover) and (pointer: fine) { .pv-emojis button:hover { background: var(--input); transform: scale(1.12); } }
.pv-compose { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; }
.pv-compose input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--input);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}
.pv-compose input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pv-send {
    flex: none;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 20px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms, transform 100ms var(--ease-out);
}
.pv-send:disabled { opacity: 0.4; cursor: default; }
.pv-send:not(:disabled):active { transform: scale(0.96); }
.pv-locked { margin: 6px 8px 2px; font-size: 0.85rem; color: var(--text-muted); text-align: center; }

.pv-nav { display: none; }

/* Wider screens: a centred card that rises into place */
@media (min-width: 720px) {
    .pv-shell {
        inset: 4vh auto auto 50%;
        width: min(640px, calc(100vw - 160px));
        height: 92vh;
        max-height: 920px;
        border: 1px solid var(--border);
        border-radius: 22px;
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
        animation: pv-in-card 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
        transform: translateX(-50%);
    }
    .post-view.closing .pv-shell { animation: pv-out-card 200ms ease-in both; }
    @keyframes pv-in-card { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.97); } to { opacity: 1; transform: translateX(-50%); } }
    @keyframes pv-out-card { from { opacity: 1; transform: translateX(-50%); } to { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.98); } }
    .pv-top { padding-top: 6px; border-radius: 22px 22px 0 0; }
    .pv-foot { padding-bottom: 10px; border-radius: 0 0 22px 22px; }
    .pv-ic-back { display: none; }
    .pv-ic-close { display: block; }
    .pv-emojis { justify-content: flex-start; }
    .pv-emojis button { flex: 0 0 44px; }

    .pv-nav {
        position: fixed;
        top: 50%;
        z-index: 4;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        background: rgba(24, 24, 27, 0.72);
        color: #fff;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        cursor: pointer;
        transition: transform 120ms var(--ease-out), opacity 150ms;
    }
    .pv-nav.prev { left: 24px; }
    .pv-nav.next { right: 24px; }
    .pv-nav:disabled { opacity: 0; pointer-events: none; }
    .pv-nav:active { transform: scale(0.94); }
    .pv-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}

/* Large screens with photos: Instagram-style, the photo on the left and the conversation beside it */
@media (min-width: 1000px) {
    .pv-shell.has-media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas: "media top" "media scroll" "media foot";
        width: min(1120px, calc(100vw - 180px));
        overflow: hidden;
    }
    .pv-shell.has-media .pv-top { grid-area: top; border-radius: 0 22px 0 0; }
    .pv-shell.has-media .pv-media { grid-area: media; position: relative; min-height: 0; }
    .pv-shell.has-media .pv-media .post-media, .pv-shell.has-media .pv-media .carousel { position: absolute; inset: 0; }
    .pv-shell.has-media .pv-media .slide { position: relative; height: 100%; max-height: none; aspect-ratio: auto; overflow: hidden; }
    .pv-shell.has-media .pv-media .slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
    .pv-shell.has-media .pv-scroll { grid-area: scroll; overflow-y: auto; overscroll-behavior: contain; }
    .pv-shell.has-media .pv-foot { grid-area: foot; position: static; border-radius: 0 0 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-shell, .post-view.closing .pv-shell, .comment.full { animation-name: pv-fade; animation-duration: 180ms; }
    @keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }
}
:root[data-motion="reduce"] .pv-shell { animation-name: pv-fade; }

/* =========================================================
   Splash · a 1.5s intro: the mark springs in, the book draws itself,
   a heart lands inside, the name rises letter by letter, then it all lifts away
   ========================================================= */
.splash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px);
    cursor: default;
}
.splash.out {
    pointer-events: none;
    animation: sp-lift 560ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.splash.out .sp-center { animation: sp-center-out 560ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes sp-lift { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes sp-center-out {
    0% { transform: none; filter: none; }
    30% { transform: scale(0.96); }
    100% { transform: scale(1.12); opacity: 0; filter: blur(8px); }
}

.sp-orb {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0;
    animation: sp-orb-in 900ms ease-out 60ms forwards, sp-drift 7s ease-in-out infinite alternate;
}
.sp-orb.one { top: -40vmax; left: -30vmax; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.sp-orb.two { bottom: -45vmax; right: -30vmax; background: color-mix(in srgb, #ec4899 22%, transparent); animation-delay: 160ms, 0s; }
@keyframes sp-orb-in { to { opacity: 1; } }
@keyframes sp-drift { from { translate: 0 0; } to { translate: 4vmax 3vmax; } }

.sp-center { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }

.sp-mark-wrap { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; }
.sp-mark {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 28px;
    background: linear-gradient(140deg, var(--accent-solid, #4f46e5) 0%, #8b5cf6 55%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent-solid, #4f46e5) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    opacity: 0;
    transform: scale(0.5) rotate(-14deg);
    animation: sp-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms forwards;
}
.sp-mark svg { width: 44px; height: 44px; }
.sp-draw { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sp-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) 260ms forwards; }
.sp-draw.late { animation-delay: 620ms; animation-duration: 380ms; }
.sp-heart { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: sp-heart 480ms cubic-bezier(0.34, 1.8, 0.64, 1) 820ms forwards; }
@keyframes sp-pop { to { opacity: 1; transform: none; } }
@keyframes sp-draw { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes sp-heart { to { transform: scale(1); } }

.sp-ring {
    position: absolute;
    inset: 4px;
    border-radius: 30px;
    border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    opacity: 0;
    animation: sp-ring 1000ms cubic-bezier(0.22, 1, 0.36, 1) 820ms forwards;
}
@keyframes sp-ring { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

.sp-word { display: flex; gap: 0.32em; margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text); }
.sp-word span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: sp-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.sp-word span:nth-child(1) { animation-delay: 420ms; }
.sp-word span:nth-child(2) { animation-delay: 465ms; }
.sp-word span:nth-child(3) { animation-delay: 510ms; }
.sp-word span:nth-child(4) { animation-delay: 555ms; }
.sp-word span:nth-child(5) { animation-delay: 600ms; }
.sp-word span:nth-child(6) { animation-delay: 645ms; }
.sp-word span:nth-child(7) { animation-delay: 690ms; }
@keyframes sp-rise { to { opacity: 1; transform: none; filter: none; } }

.sp-tag { margin: -4px 0 0; font-size: 0.95rem; color: var(--text-muted); opacity: 0; transform: translateY(6px); animation: sp-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards; }

.sp-progress {
    position: absolute;
    left: 50%;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    width: 120px;
    height: 3px;
    margin-left: -60px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
    opacity: 0;
    animation: sp-orb-in 300ms ease-out 700ms forwards;
}
.sp-progress i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #ec4899);
    animation: sp-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes sp-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

@media (min-width: 720px) {
    .sp-mark-wrap { width: 112px; height: 112px; }
    .sp-mark { width: 104px; height: 104px; border-radius: 32px; }
    .sp-mark svg { width: 52px; height: 52px; }
    .sp-word { font-size: 1.6rem; }
}

/* Reduced motion: no springs, drawing or drift — the finished mark simply fades in and out */
@media (prefers-reduced-motion: reduce) {
    .splash *, .splash.out, .splash.out .sp-center { animation: none !important; }
    .sp-mark, .sp-word span, .sp-tag, .sp-progress, .sp-orb { opacity: 1; transform: none; filter: none; }
    .sp-draw { opacity: 1; stroke-dashoffset: 0; }
    .sp-heart { transform: none; }
    .sp-ring, .sp-progress { display: none; }
    .splash.out { opacity: 0; transition: opacity 200ms; }
}
:root[data-motion="reduce"] .splash *, :root[data-motion="reduce"] .splash.out, :root[data-motion="reduce"] .splash.out .sp-center { animation: none !important; }
:root[data-motion="reduce"] :is(.sp-mark, .sp-word span, .sp-tag, .sp-orb) { opacity: 1; transform: none; filter: none; }
:root[data-motion="reduce"] .sp-draw { opacity: 1; stroke-dashoffset: 0; }
:root[data-motion="reduce"] .sp-heart { transform: none; }
:root[data-motion="reduce"] :is(.sp-ring, .sp-progress) { display: none; }
:root[data-motion="reduce"] .splash.out { opacity: 0; transition: opacity 200ms; }
@media (prefers-reduced-transparency: reduce) {
    .pv-top, .pv-foot { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================
   Round 21 · navigation, smart voice notes, voice comments, live video, Explore
   ========================================================= */

/* ---------- Back arrow in the top bar (pages you reach from somewhere else) ---------- */
.top-back { flex: none; width: 40px; height: 40px; margin-right: -2px; }
.top-back[hidden] { display: none; }
.top-back .i { width: 22px; height: 22px; }
@media (max-width: 760px) {
    .tabbar { grid-template-columns: repeat(6, 1fr); }
    .tab-item .i { padding-left: 12px; padding-right: 12px; }
    .tab-item span { white-space: nowrap; }
}

/* ---------- Editor assistant: sections for summaries and ideas ---------- */
.ai-output .ai-sec { margin: 10px 0 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ai-output .ai-sec:first-child { margin-top: 0; }
.ai-output ul { margin: 0 0 6px; padding-left: 18px; }
.ai-output li { margin: 3px 0; }
.ai-output .ai-tips li::marker { content: '💡 '; }

/* ---------- Voice to note: Smart note ---------- */
.tr-save-group { display: flex; align-items: center; gap: 8px; }
.tr-smart { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--accent-solid, #4f46e5), #8b5cf6 60%, #ec4899); color: #fff; border: 0; }
.tr-smart .i { width: 16px; height: 16px; }
.tr-smart:disabled { opacity: 0.45; }
.tr-smart[hidden] { display: none; }
.tr-review-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.tr-review-foot[hidden] { display: none; }
.tr-review-foot .ghost-btn { display: inline-flex; align-items: center; gap: 2px; }
.tr-review-foot .primary-btn { margin-left: auto; }
.tr-keep-ideas { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); }
.transcribe.reviewing .tr-live { background: var(--panel); }

.trr { display: grid; gap: 12px; padding: 4px 0 8px; }
.trr-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.trr-spark { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), #ec4899, #f59e0b, var(--accent)); animation: trr-spin 1s linear infinite; -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
@keyframes trr-spin { to { transform: rotate(1turn); } }
.trr-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-size: 0.88rem; }
.trr-title { width: 100%; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.trr-title:focus { outline: none; border-color: var(--accent); }
.trr-card { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); animation: trr-in 320ms var(--ease-out) both; }
@keyframes trr-in { from { opacity: 0; transform: translateY(8px); } }
.trr-card h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.trr-card h4 .i { width: 14px; height: 14px; color: var(--accent); }
.trr-card p { margin: 0 0 6px; line-height: 1.55; }
.trr-card p:last-child { margin-bottom: 0; }
.trr-card ul { margin: 0; padding-left: 18px; line-height: 1.5; }
.trr-card li { margin: 3px 0; }
.trr-summary { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.trr-checks { list-style: none; padding-left: 0 !important; }
.trr-checks li::before { content: '☐ '; color: var(--accent); }
.trr-tips { border-style: dashed; }
.trr-tips li::marker { content: '💡 '; }
.trr-skel { display: grid; gap: 8px; }
.trr-skel i { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--input), var(--border), var(--input)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.trr-skel i:nth-child(2) { width: 85%; }
.trr-skel i:nth-child(3) { width: 60%; }

/* ---------- Voice comments ---------- */
.vc-mic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 120ms, color 120ms, transform 100ms var(--ease-out);
}
.vc-mic .i { width: 19px; height: 19px; }
.vc-mic:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .vc-mic:hover { background: var(--input); color: var(--accent); } }
form.recording > :not(.vc-bar) { display: none !important; }
form.sending { opacity: 0.6; pointer-events: none; }
.vc-bar { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 2px; }
.vc-cancel, .vc-send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; }
.vc-cancel { background: var(--input); color: var(--text-muted); }
.vc-send { background: var(--accent); color: var(--on-accent); }
.vc-cancel .i, .vc-send .i { width: 18px; height: 18px; }
.vc-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: vc-blink 1s ease-in-out infinite; }
@keyframes vc-blink { 50% { opacity: 0.25; } }
.vc-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.9rem; min-width: 38px; }
.vc-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 26px; overflow: hidden; }
.vc-wave i { flex: 1; max-width: 4px; height: 30%; border-radius: 2px; background: var(--accent); animation: vc-wave 900ms ease-in-out infinite; }
.vc-wave i:nth-child(3n) { animation-delay: -300ms; }
.vc-wave i:nth-child(3n+1) { animation-delay: -600ms; }
.vc-wave i:nth-child(4n) { animation-duration: 700ms; }
@keyframes vc-wave { 50% { height: 100%; } }
.c-bubble.has-voice { display: block; min-width: 220px; }
.c-bubble .vn { margin-top: 6px; }
.cp-voice { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; }
.cp-voice .i { width: 14px; height: 14px; }
.pv-compose .vc-mic { width: 40px; height: 40px; }

/* ---------- Live: who's live strip (Feed) ---------- */
.live-strip { display: flex; gap: 10px; margin: 0 0 12px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; }
.live-strip[hidden] { display: none; }
.live-card {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    padding: 8px 14px 8px 8px;
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, #ef4444 10%, var(--surface)), var(--surface));
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.live-card:active { transform: scale(0.98); }
.lc-av { position: relative; flex: none; }
.lc-av .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #ef4444; }
.live-badge {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 0 0 2px var(--surface);
}
.lc-text { display: grid; min-width: 0; line-height: 1.25; }
.lc-text strong { font-size: 0.88rem; }
.lc-text small { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tool.live, .pc-quick.live { color: #ef4444; }

/* ---------- Live video dialog ---------- */
dialog.live {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
    color: #fff;
    overflow: hidden;
}
dialog.live::backdrop { background: #000; }
.lv-stage { position: relative; width: 100%; height: 100%; }
#lv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0b0f; }
#lv-video.mirror { transform: scaleX(-1); }
@media (min-width: 900px) { #lv-video { object-fit: contain; } }
.lv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 22%, transparent 55%, rgba(0, 0, 0, 0.7) 100%); }
.lv-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
}
.lv-host { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lv-host > span { display: grid; min-width: 0; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.lv-host strong { font-size: 0.95rem; }
.lv-host small { font-size: 0.78rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-badge { padding: 4px 8px; border-radius: 6px; background: #ef4444; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.lv-badge[hidden], .lv-viewers[hidden] { display: none; }
.lv-viewers { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); font-size: 0.78rem; font-weight: 700; }
.lv-viewers .i { width: 14px; height: 14px; }
.lv-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; }
.lv-status {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(320px, calc(100% - 48px));
    padding: 16px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    text-align: center;
    font-size: 0.9rem;
}
.lv-status[hidden] { display: none; }
.lv-status strong { font-size: 1.05rem; }
.lv-status span { opacity: 0.85; }
.lv-unmute, .lv-retry { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: #fff; color: #000; font: inherit; font-weight: 700; cursor: pointer; }
.lv-unmute .i { width: 18px; height: 18px; }
.lv-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: trr-spin 800ms linear infinite; }
.lv-chat {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: min(340px, calc(100% - 90px));
    max-height: 38vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-mask: linear-gradient(transparent, #000 30%);
    mask: linear-gradient(transparent, #000 30%);
    scrollbar-width: none;
}
.lv-msg { margin: 0; padding: 6px 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.4); font-size: 0.86rem; line-height: 1.35; align-self: flex-start; overflow-wrap: anywhere; animation: trr-in 240ms var(--ease-out) both; }
.lv-msg strong { margin-right: 4px; }
.lv-msg.lv-join { background: rgba(255, 255, 255, 0.14); font-size: 0.8rem; }
.lv-msg.mine { background: color-mix(in srgb, var(--accent-solid, #4f46e5) 70%, transparent); }
.lv-hearts { position: absolute; z-index: 2; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 50vh; pointer-events: none; }
.lv-heart { position: absolute; bottom: 0; left: 50%; font-size: 1.7rem; animation: lv-float 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes lv-float {
    0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    12% { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x)), -45vh) scale(0.9); opacity: 0; }
}
.lv-bar {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.lv-bar[hidden] { display: none; }
.lv-say { flex: 1; min-width: 0; }
.lv-say input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 22px; background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 16px; }
.lv-say input::placeholder { color: rgba(255, 255, 255, 0.7); }
.lv-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 1.2rem; cursor: pointer; transition: transform 100ms var(--ease-out); }
.lv-btn:active { transform: scale(0.9); }
.lv-btn .i { width: 20px; height: 20px; }
.lv-btn[aria-pressed="true"] { background: #fff; color: #000; }
.lv-end { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: #ef4444; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
dialog.live:not(.hosting) .host-only { display: none; }
.lv-setup {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 12px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75) 30%);
}
.lv-setup[hidden] { display: none; }
.lv-kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.lv-kicker .i { width: 18px; height: 18px; color: #ef4444; }
#lv-title { width: 100%; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 14px; background: rgba(0, 0, 0, 0.35); color: #fff; font: inherit; font-size: 16px; }
.lv-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0; border-radius: 16px; background: #ef4444; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 10px 30px -10px #ef4444; }
.lv-go:disabled { opacity: 0.6; }
.lv-go-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: vc-blink 1s ease-in-out infinite; }
.lv-note { margin: 0; font-size: 0.8rem; opacity: 0.8; text-align: center; }
@media (min-width: 720px) {
    .lv-setup { left: 50%; right: auto; bottom: 32px; width: 440px; transform: translateX(-50%); border-radius: 22px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@media (prefers-reduced-motion: reduce) { .lv-heart, .vc-wave i, .vc-dot, .lv-go-dot { animation: none; } }

/* ---------- Explore ---------- */
.explore { max-width: 1040px; margin: 0 auto; display: grid; gap: 20px; padding-bottom: 40px; }
.ex-hero {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-solid, #4f46e5) 95%, transparent), transparent 60%),
        radial-gradient(100% 120% at 100% 100%, #ec4899, transparent 55%),
        linear-gradient(135deg, #312e81, #7c3aed);
}
.ex-kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
.ex-kicker .i { width: 16px; height: 16px; }
.ex-hero h2 { margin: 2px 0 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.ex-search { margin: 0; background: rgba(255, 255, 255, 0.95); color: #18181b; border: 0; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4); }
.ex-search input { color: #18181b; font-size: 16px; }
.ex-search .i { color: #52525b; }
.ex-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -6px 0 0; }
.ex-tabs .cm-filter { flex: none; }
.ex-sec { display: grid; gap: 12px; }
.ex-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ex-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.ex-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.ex-ic .i { width: 16px; height: 16px; }
.ex-head p { margin: 0; flex-basis: 100%; padding-left: 36px; font-size: 0.85rem; color: var(--text-muted); order: 3; }
.ex-more { margin-left: auto; }

.ex-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), border-color 150ms;
}
.ex-tag:active { transform: scale(0.97); }
.ex-tag small { color: var(--text-muted); font-weight: 500; }
.ex-tag-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--input); font-size: 0.8rem; font-weight: 800; color: var(--text-muted); }
.ex-tag.top .ex-tag-rank { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
@media (hover: hover) and (pointer: fine) { .ex-tag:hover { border-color: var(--accent); } }

.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ex-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    padding: 0;
    background: linear-gradient(145deg, var(--t1, #4f46e5), var(--t2, #a855f7));
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.ex-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ex-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.ex-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-tile.photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.65)); }
.ex-tile-text { position: absolute; inset: 14px 14px 44px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.ex-rank { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.72rem; font-weight: 800; }
.ex-tile-foot { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.75rem; font-weight: 600; }
.ex-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ex-stats { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.ex-stats .i { width: 13px; height: 13px; margin-left: 4px; }
.ex-tile.skel { background: linear-gradient(90deg, var(--input), var(--border), var(--input)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }

.ex-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ex-row > * { scroll-snap-align: start; }
.ex-reel { position: relative; flex: none; width: 150px; aspect-ratio: 9 / 16; overflow: hidden; border: 0; border-radius: 18px; padding: 0; background: linear-gradient(160deg, #18181b, #3f3f46); color: #fff; cursor: pointer; }
.ex-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.7)); }
.ex-reel-play { position: absolute; z-index: 1; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.ex-reel-play .i { width: 14px; height: 14px; }
.ex-reel-foot { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: grid; text-align: left; font-size: 0.78rem; }
.ex-reel-foot small { display: inline-flex; align-items: center; gap: 3px; opacity: 0.9; }
.ex-reel-foot .i { width: 12px; height: 12px; }

.ex-lives { gap: 10px; }
.ex-live { flex: none; display: grid; justify-items: center; align-content: start; gap: 4px; width: 140px; padding: 16px 10px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); cursor: pointer; text-align: center; }
.ex-live strong { font-size: 0.9rem; }
.ex-live small { font-size: 0.76rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-live-av { position: relative; margin-bottom: 8px; }
.ex-live-av .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #ef4444; }
.ex-live-av.go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }
.ex-live-av.go .i { width: 24px; height: 24px; }
.ex-live.go { border-style: dashed; }

.ex-book { flex: none; display: grid; gap: 6px; width: 132px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; }
.ex-book .book-cover { width: 132px; height: 190px; border-radius: 12px; box-shadow: var(--shadow); }
.ex-book strong { font-size: 0.86rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-book small { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--text-muted); }
.ex-book small .i { width: 11px; height: 11px; color: #e11d48; }

.ex-groups, .ex-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ex-group, .ex-person { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.ex-group-emoji { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--g) 18%, var(--surface)); font-size: 1.5rem; }
.ex-group-text, .ex-person-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ex-group-text small, .ex-person-text small { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore .primary-btn.small { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; font-size: 0.85rem; }
.explore .primary-btn.small .i { width: 15px; height: 15px; }

.ex-empty { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1px dashed var(--border-strong); border-radius: 18px; text-align: center; color: var(--text-muted); }
.ex-empty .i { width: 26px; height: 26px; }
.ex-empty strong { color: var(--text); }
.ex-empty.small { padding: 20px 16px; }

@media (max-width: 760px) {
    .explore { gap: 16px; }
    .ex-hero { padding: 18px 16px; border-radius: 20px; }
    .ex-hero h2 { font-size: 1.6rem; }
    .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ex-tile { border-radius: 14px; }
    .ex-reel { width: 128px; }
    .ex-groups, .ex-people { grid-template-columns: minmax(0, 1fr); }
}
.ex-search { width: 100%; max-width: 560px; }
.ex-hero h2 { max-width: 16ch; line-height: 1.1; }
.ex-tile.hot .ex-tile-text { top: 44px; }
.ex-tile-text strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }
@media (max-width: 760px) { .ex-search { max-width: none; } }
.pc-quick.live { background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; }

/* Sheets that are closed never take up the page, even in browsers with patchy <dialog> support */
dialog:not([open]) { display: none !important; }

/* ---------- Following ---------- */
.follow-btn { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700; }
.follow-btn[aria-pressed="false"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.follow-btn[aria-pressed="true"] { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.lv-follow.follow-btn { margin-left: 4px; min-height: 30px; padding: 0 12px; border: 0; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.lv-follow.follow-btn[aria-pressed="false"] { background: #fff; color: #000; }
.lv-follow.follow-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); color: #fff; border: 0; }
.st-pad { margin: 0 0 8px; }
.st-fold { border-top: 1px solid var(--border); }
.st-fold > summary { display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer; list-style: none; font-size: 0.92rem; }
.st-fold > summary::-webkit-details-marker { display: none; }
.st-fold > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform 150ms var(--ease-out); }
.st-fold[open] > summary::after { transform: rotate(-135deg); }
.st-people { display: grid; gap: 4px; padding-bottom: 10px; }
.st-person { display: flex; align-items: center; gap: 12px; min-height: 52px; }

/* ---------- Refresh: pull-to-refresh bubble and spinning refresh buttons ---------- */
.ptr {
    position: fixed;
    z-index: 30;
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    opacity: 0;
    transform: translate(-50%, -48px);
    pointer-events: none;
    transition: transform 280ms var(--ease-out), opacity 200ms, color 150ms;
}
.ptr .i { width: 20px; height: 20px; }
.ptr.pulling { transition: none; }
.ptr.ready { color: var(--accent); }
.ptr.spinning .i { animation: ptr-spin 700ms linear infinite; color: var(--accent); }
@keyframes ptr-spin { to { transform: rotate(1turn); } }
@media (hover: hover) and (pointer: fine) { .ptr { display: none; } }

.refresh-btn.spinning .i { animation: ptr-spin 700ms linear infinite; }
.refresh-btn.spinning { pointer-events: none; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ptr.spinning .i, .refresh-btn.spinning .i { animation-duration: 2s; } }

/* ---------- Post view: steady while you scroll ---------- */
/* The feed behind stays put (it is the app's scroller, so locking <html> alone isn't enough) */
html.pv-lock .main-col { overflow: hidden; touch-action: none; }
/* No rubber-band bounce dragging the header and comment bar around, and no scroll leaking to the page */
.post-view, .pv-shell, .pv-scroll { overscroll-behavior: none; }
/* The scrollbar appearing when comments load mustn't nudge the layout sideways */
.pv-shell, .pv-scroll { scrollbar-gutter: stable; }
/* Keep the sheet on its own layer so scrolling doesn't repaint what's under it */
.pv-shell { contain: layout paint; backface-visibility: hidden; }
@media (max-width: 719px) {
    /* Solid bars on phones: blurred sticky bars over moving content flicker on many Android phones */
    .pv-top, .pv-foot { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
    /* svh doesn't change as the browser's address bar slides away, so the photo doesn't resize mid-scroll */
    .pv-media .slide, .pv-media .slide img { max-height: 70svh; }
    .post-view, .pv-shell { height: 100%; }
}
@media (min-width: 1000px) { .pv-shell.has-media { scrollbar-gutter: auto; } }

/* ---------- Post view: a clear way back ---------- */
.pv-back {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 14px 0 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--input);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background 150ms, border-color 150ms;
}
.pv-back .i { width: 20px; height: 20px; transition: transform 150ms var(--ease-out); }
.pv-back:active { transform: scale(0.96); }
.pv-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .pv-back:hover { border-color: var(--accent); }
    .pv-back:hover .i { transform: translateX(-3px); }
}
.pv-top .pv-back { width: auto; height: auto; }
.post-view.swiped.closing .pv-shell { animation: none; }
@media (max-width: 719px) {
    .pv-top { gap: 8px; }
}

/* ---------- Splash: a 6-second show ---------- */
/* Taglines take turns; the last one stays */
.sp-tag { position: relative; display: grid; min-height: 1.5em; width: min(320px, 86vw); }
.sp-tag span { grid-area: 1 / 1; opacity: 0; animation: sp-line 6s linear 0.9s both; }
.sp-tag span:nth-child(2) { animation-delay: 2.6s; }
.sp-tag span:nth-child(3) { animation: sp-line-last 6s linear 4.3s both; }
.sp-tag span:nth-child(n+4) { display: none; }
@keyframes sp-line {
    0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    5%, 24% { opacity: 1; transform: none; filter: none; }
    29%, 100% { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
}
/* The mark breathes and its ring pulses once the intro has played */
.sp-mark { animation: sp-pop 760ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms forwards, sp-breathe 3s ease-in-out 1.6s infinite; }
@keyframes sp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.sp-ring { animation: sp-ring 1000ms cubic-bezier(0.22, 1, 0.36, 1) 820ms forwards, sp-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) 3s infinite; }
/* The bar fills over the 6 seconds, so you can see how long is left */
.sp-progress { width: 160px; margin-left: -80px; }
.sp-progress i { width: 100%; transform-origin: left center; transform: scaleX(0); animation: sp-fill 5.4s linear 0.6s forwards; }
@keyframes sp-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .sp-tag span:not(:first-child) { display: none; }
    .sp-tag span:first-child { opacity: 1; }
    .sp-progress { display: block; }
    .sp-progress i { transform: scaleX(1); }
}
:root[data-motion="reduce"] .sp-tag span:not(:first-child) { display: none; }
:root[data-motion="reduce"] .sp-tag span:first-child { opacity: 1; }

/* =========================================================
   Round 27 · Notes home, hashtags, audio on posts & stories, show password, motion
   ========================================================= */

/* ---------- Notes home ---------- */
.notes-home { display: grid; gap: 34px; max-width: 1180px; }

.nh-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "intro week" "actions actions";
    gap: 22px 32px;
    align-items: end;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border);
}
.nh-intro { grid-area: intro; min-width: 0; }
.nh-title {
    display: grid;
    margin: 0;
    font-size: clamp(2.1rem, 4.2vw, 3.1rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--text);
    text-wrap: balance;
}
.nh-title span { font-weight: 500; color: var(--text-muted); letter-spacing: -0.03em; }
.nh-greet { margin: 14px 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.55; color: var(--text-muted); }
.nh-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 0.88rem; color: var(--text-muted); }
.nh-stats b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.nh-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.nh-streak .i { width: 15px; height: 15px; color: var(--text-faint); }
.nh-streak.on .i { color: #f97316; }

.nh-week { grid-area: week; display: flex; gap: 6px; }
.nh-day { display: grid; justify-items: center; gap: 6px; }
.nh-day i {
    display: block;
    width: 30px;
    height: 42px;
    border-radius: 10px;
    background: var(--input);
    border: 1px solid var(--border);
    transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.nh-day.on i { background: var(--accent); border-color: transparent; }
.nh-day.today i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
.nh-day small { font-size: 0.7rem; font-weight: 600; color: var(--text-faint); }
.nh-day.today small { color: var(--accent); }

.nh-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nh-write { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 14px; font-weight: 700; }
.nh-write .i { width: 18px; height: 18px; }
.nh-voice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 100ms var(--ease-out), border-color 150ms;
}
.nh-voice .i { width: 18px; height: 18px; color: var(--accent); }
.nh-voice:active, .nh-write:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nh-voice:hover { border-color: var(--accent); } }
.nh-private { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.82rem; color: var(--text-faint); }
.nh-private .i { width: 14px; height: 14px; }
.nh-friends { display: inline-flex; }

.nh-sec { display: grid; gap: 14px; min-width: 0; }
.nh-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.nh-h .i { width: 17px; height: 17px; color: var(--accent); }
.nh-count { padding: 1px 9px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Templates: one tray you scroll through, softly faded at the edge */
.nh-templates {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.nh-templates .nh-template {
    flex: 0 0 216px;
    scroll-snap-align: start;
    min-height: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: none;
}
.nh-templates .nh-template:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
    .nh-templates .nh-template:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 8px 20px -12px rgba(9, 9, 11, 0.35); }
}

/* Your #tags */
.nh-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms, background 150ms, transform 100ms var(--ease-out);
}
.nh-tag small { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.nh-tag:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nh-tag:hover { border-color: var(--accent); background: var(--accent-soft); } }

/* Pinned: a shelf you scroll sideways */
.nh-pinned { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.nh-pinned .mcard { flex: 0 0 260px; margin: 0; scroll-snap-align: start; }

.nh-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.nh-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nh-controls .tabs, .nh-controls .pour { margin: 0; }
.nh-layout { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--input); border: 1px solid var(--border); }
.nh-layout button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); cursor: pointer; }
.nh-layout button .i { width: 16px; height: 16px; }
.nh-layout button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.notes-home .folder-chips { margin: 0; }

/* Cards: calmer rest state, a clear lift on hover (no tilt) */
.mcard { animation: none; border-radius: 16px; }
.mcard[role="button"] { transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .mcard[role="button"]:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(9, 9, 11, 0.45); }
}
.mcard[role="button"]:active { transform: scale(0.985); }
.mcard[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mcard h3 { letter-spacing: -0.015em; }
.hashtag-inline { color: var(--accent-solid, var(--accent)); font-weight: 650; }
.mcard-hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.mcard-hashtag {
    min-height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-solid, #4f46e5) 12%, rgba(255, 255, 255, 0.7));
    color: var(--accent-solid, #4f46e5);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}
:root[data-theme="dark"] .mcard-hashtag { background: rgba(0, 0, 0, 0.22); color: #c7d2fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mcard-hashtag { background: rgba(0, 0, 0, 0.22); color: #c7d2fe; } }
:root[data-theme="dark"] .hashtag-inline { color: #c7d2fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hashtag-inline { color: #c7d2fe; } }

/* List layout: a denser, scannable column */
.masonry.as-list { columns: auto; display: grid; gap: 10px; }
.masonry.as-list .mcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tags photo" "title photo" "body photo" "hash photo" "foot foot";
    column-gap: 16px;
    row-gap: 6px;
    margin: 0;
    padding: 14px 16px 10px;
}
.masonry.as-list .mcard-tags { grid-area: tags; }
.masonry.as-list .mcard h3 { grid-area: title; }
.masonry.as-list .mcard-body { grid-area: body; -webkit-line-clamp: 2; }
.masonry.as-list .mcard-hashtags { grid-area: hash; }
.masonry.as-list .mcard-photo { grid-area: photo; width: 84px; height: 84px; aspect-ratio: 1; align-self: start; }
.masonry.as-list .mcard-foot { grid-area: foot; }
.masonry.as-list .mcard.new-note { display: flex; flex-direction: row; min-height: 56px; justify-content: flex-start; gap: 10px; }
.masonry.as-list .mcard.new-note .i { margin: 0; }

@media (max-width: 760px) {
    .notes-home { gap: 26px; }
    .nh-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "week" "actions"; gap: 18px; padding-bottom: 20px; }
    .nh-week { justify-content: space-between; }
    .nh-day i { width: 34px; height: 38px; }
    .nh-actions { gap: 8px; }
    .nh-write, .nh-voice { flex: 1; justify-content: center; }
    .nh-private { flex-basis: 100%; margin-left: 0; }
    .nh-templates .nh-template { flex-basis: 190px; }
    .nh-pinned .mcard { flex-basis: 240px; }
    .nh-bar { align-items: flex-start; }
    .nh-controls { width: 100%; }
}

/* ---------- Motion: page transitions and one arrival per page ---------- */
@media (prefers-reduced-motion: no-preference) {
    #content { view-transition-name: page; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-old(page) { animation: vt-out 170ms cubic-bezier(0.4, 0, 1, 1) both; }
    ::view-transition-new(page) { animation: vt-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
    :root[data-nav-dir="back"]::view-transition-old(page) { animation-name: vt-out-back; }
    :root[data-nav-dir="back"]::view-transition-new(page) { animation-name: vt-in-back; }
}
:root[data-motion="reduce"] #content { view-transition-name: none; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-18px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(18px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-28px); } }

.arriving :is(.nh-hero, .nh-sec, .mcard, .post.ig, .ex-sec, .st-card, .cm-card, .convo, .book-card) {
    animation: arrive 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 36ms);
}
@keyframes arrive { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .arriving * { animation: none !important; } }

/* Tab bar: the chosen tab's icon gives a small hop */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .tab-item.active .i { animation: tab-hop 360ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes tab-hop { 40% { transform: translateY(-3px) scale(1.08); } }

/* ---------- Show password ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 48px; }
.pw-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.pw-eye[hidden] { display: none; }
.pw-eye .i { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .pw-eye:hover { color: var(--text); background: var(--input); } }

/* ---------- Hashtags in posts, comments and composers ---------- */
.hashtag {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .hashtag:hover { text-decoration: underline; } }
.hashtag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 2px; }
.tag-suggest[hidden] { display: none; }
.tag-suggest button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    cursor: pointer;
    animation: arrive 220ms var(--ease-out) both;
}

/* ---------- Photo edit button on composer thumbnails ---------- */
.pc-thumb { position: relative; }
.pc-edit {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 0 9px 0 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(9, 9, 11, 0.72);
    color: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}
.pc-edit .i { width: 13px; height: 13px; }

/* ---------- Audio on posts ---------- */
.pc-audio { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); }
.pc-audio[hidden] { display: none; }
.pc-audio-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.pc-audio-text strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-audio-text small { font-size: 0.76rem; color: var(--text-muted); }
.pc-audio audio { width: 170px; height: 36px; }
.pc-audio .att-remove { position: static; flex: none; }
.pc-tool.audio .i { color: #0ea5e9; }
.pa-art {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--accent-solid, #4f46e5), #0ea5e9);
    color: #fff;
}
.pa-art .i { width: 22px; height: 22px; }
.pa-art.small { width: 38px; height: 38px; border-radius: 10px; }
.pa-art.small .i { width: 18px; height: 18px; }
.post-audio { display: flex; align-items: center; gap: 12px; margin: 4px 16px 10px; padding: 10px 12px; border-radius: 16px; background: var(--input); border: 1px solid var(--border); }
.pv-post .post-audio { margin: 12px 0 0; }
.pa-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pa-name { font-size: 0.88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-audio .vn { background: none; padding: 0; }
@media (max-width: 760px) { .pc-audio audio { width: 120px; } }

/* ---------- Music on stories ---------- */
.mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 0; }
.mc-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.mc-tool[hidden], .mc-audio-chip[hidden] { display: none; }
.mc-tool .i { width: 16px; height: 16px; }
.mc-audio-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; font-weight: 650; max-width: 100%; }
.mc-audio-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-audio-chip .i { width: 15px; height: 15px; flex: none; }
.mc-audio-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.story-music {
    position: absolute;
    z-index: 3;
    left: 12px;
    top: calc(64px + env(safe-area-inset-top, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
}
.sm-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sm-bars i { width: 3px; height: 40%; border-radius: 2px; background: #fff; animation: vc-wave 800ms ease-in-out infinite; }
.sm-bars i:nth-child(2) { animation-delay: -200ms; }
.sm-bars i:nth-child(3) { animation-delay: -500ms; }
.sm-bars i:nth-child(4) { animation-delay: -650ms; }
#story.paused .sm-bars i, .story-music.blocked .sm-bars i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sm-bars i { animation: none; } }
.nh-write, .nh-voice { font-size: 0.92rem; }
.pc-audio-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform 100ms var(--ease-out); }
.pc-audio-play:active { transform: scale(0.94); }
.pc-audio-play .i { width: 18px; height: 18px; }
@keyframes sp-line-last { 0% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 5%, 100% { opacity: 1; transform: none; filter: none; } }

/* ---------- Offline ---------- */
.offline-bar { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 16%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border)); color: var(--text); font-size: 0.86rem; line-height: 1.4; animation: arrive 320ms var(--ease-out) both; }
.offline-bar[hidden] { display: none; }
.offline-bar .i { flex: none; width: 20px; height: 20px; color: #d97706; }
.offline-empty .i { width: 40px; height: 40px; margin-bottom: 8px; color: var(--text-faint); }

/* More accent colours (Settings → Appearance). Light shades pass 4.5:1 on white; dark shades on #09090b */
:root[data-accent="blue"] { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.1); --soft-accent: #eff6ff; --accent-solid: #2563eb; --bubble-out: #2563eb; --board-blue: #2563eb; }
:root[data-accent="sky"] { --accent: #0e7490; --accent-hover: #155e75; --accent-soft: rgba(14, 116, 144, 0.1); --soft-accent: #ecfeff; --accent-solid: #0e7490; --bubble-out: #0e7490; --board-blue: #0e7490; }
:root[data-accent="teal"] { --accent: #0f766e; --accent-hover: #115e59; --accent-soft: rgba(15, 118, 110, 0.1); --soft-accent: #f0fdfa; --accent-solid: #0f766e; --bubble-out: #0f766e; --board-blue: #0f766e; }
:root[data-accent="orange"] { --accent: #c2410c; --accent-hover: #9a3412; --accent-soft: rgba(194, 65, 12, 0.1); --soft-accent: #fff7ed; --accent-solid: #c2410c; --bubble-out: #c2410c; --board-blue: #c2410c; }
:root[data-accent="pink"] { --accent: #db2777; --accent-hover: #be185d; --accent-soft: rgba(219, 39, 119, 0.1); --soft-accent: #fdf2f8; --accent-solid: #db2777; --bubble-out: #db2777; --board-blue: #db2777; }
:root[data-accent="graphite"] { --accent: #475569; --accent-hover: #334155; --accent-soft: rgba(71, 85, 105, 0.1); --soft-accent: #f1f5f9; --accent-solid: #475569; --bubble-out: #475569; --board-blue: #475569; }
:root[data-accent="blue"][data-theme="dark"] { --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.14); --soft-accent: rgba(96, 165, 250, 0.14); --board-blue: #60a5fa; }
:root[data-accent="sky"][data-theme="dark"] { --accent: #22d3ee; --accent-hover: #67e8f9; --accent-soft: rgba(34, 211, 238, 0.14); --soft-accent: rgba(34, 211, 238, 0.14); --board-blue: #22d3ee; }
:root[data-accent="teal"][data-theme="dark"] { --accent: #2dd4bf; --accent-hover: #5eead4; --accent-soft: rgba(45, 212, 191, 0.14); --soft-accent: rgba(45, 212, 191, 0.14); --board-blue: #2dd4bf; }
:root[data-accent="orange"][data-theme="dark"] { --accent: #fb923c; --accent-hover: #fdba74; --accent-soft: rgba(251, 146, 60, 0.14); --soft-accent: rgba(251, 146, 60, 0.14); --board-blue: #fb923c; }
:root[data-accent="pink"][data-theme="dark"] { --accent: #f472b6; --accent-hover: #f9a8d4; --accent-soft: rgba(244, 114, 182, 0.14); --soft-accent: rgba(244, 114, 182, 0.14); --board-blue: #f472b6; }
:root[data-accent="graphite"][data-theme="dark"] { --accent: #94a3b8; --accent-hover: #cbd5e1; --accent-soft: rgba(148, 163, 184, 0.14); --soft-accent: rgba(148, 163, 184, 0.14); --board-blue: #94a3b8; }
@media (prefers-color-scheme: dark) {
    :root[data-accent="blue"]:not([data-theme="light"]) { --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: rgba(96, 165, 250, 0.14); --soft-accent: rgba(96, 165, 250, 0.14); --board-blue: #60a5fa; }
    :root[data-accent="sky"]:not([data-theme="light"]) { --accent: #22d3ee; --accent-hover: #67e8f9; --accent-soft: rgba(34, 211, 238, 0.14); --soft-accent: rgba(34, 211, 238, 0.14); --board-blue: #22d3ee; }
    :root[data-accent="teal"]:not([data-theme="light"]) { --accent: #2dd4bf; --accent-hover: #5eead4; --accent-soft: rgba(45, 212, 191, 0.14); --soft-accent: rgba(45, 212, 191, 0.14); --board-blue: #2dd4bf; }
    :root[data-accent="orange"]:not([data-theme="light"]) { --accent: #fb923c; --accent-hover: #fdba74; --accent-soft: rgba(251, 146, 60, 0.14); --soft-accent: rgba(251, 146, 60, 0.14); --board-blue: #fb923c; }
    :root[data-accent="pink"]:not([data-theme="light"]) { --accent: #f472b6; --accent-hover: #f9a8d4; --accent-soft: rgba(244, 114, 182, 0.14); --soft-accent: rgba(244, 114, 182, 0.14); --board-blue: #f472b6; }
    :root[data-accent="graphite"]:not([data-theme="light"]) { --accent: #94a3b8; --accent-hover: #cbd5e1; --accent-soft: rgba(148, 163, 184, 0.14); --soft-accent: rgba(148, 163, 184, 0.14); --board-blue: #94a3b8; }
}
.st-swatches { flex-wrap: wrap; justify-content: flex-end; max-width: 240px; }
@media (max-width: 560px) { .st-swatches { max-width: none; justify-content: flex-start; } }

/* ---------- Highlighter: six colours, a pen mode, and a palette ---------- */
mark.hl-orange { background: #fed7aa; }
mark.hl-purple { background: #e9d5ff; }
:root[data-theme="dark"] mark.hl-orange { background: rgba(251, 146, 60, 0.36); }
:root[data-theme="dark"] mark.hl-purple { background: rgba(192, 132, 252, 0.36); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) mark.hl-orange { background: rgba(251, 146, 60, 0.36); }
    :root:not([data-theme="light"]) mark.hl-purple { background: rgba(192, 132, 252, 0.36); }
}
mark[class^="hl-"] { color: inherit; border-radius: 3px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-chip.hl-orange .hl-dot { background: #fb923c; }
.hl-chip.hl-purple .hl-dot { background: #c084fc; }
.hl-card.hl-orange { border-left-color: #fb923c; }
.hl-card.hl-purple { border-left-color: #c084fc; }

/* The highlighter button carries a dot in the current colour; lit up while the pen is on */
.tb-btn[data-cmd="highlight"] { position: relative; }
.hl-pen-dot { position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 2px var(--surface); }
.tb-btn[data-colour="green"] .hl-pen-dot { background: #4ade80; }
.tb-btn[data-colour="pink"] .hl-pen-dot { background: #f472b6; }
.tb-btn[data-colour="blue"] .hl-pen-dot { background: #60a5fa; }
.tb-btn[data-colour="orange"] .hl-pen-dot { background: #fb923c; }
.tb-btn[data-colour="purple"] .hl-pen-dot { background: #c084fc; }
.tb-btn[data-cmd="highlight"].pen-on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Phones: the highlighter stays on the toolbar (it used to hide inside "Aa") */
@media (max-width: 760px) {
    .editor .rich-toolbar:not(.fmt-open) .tb-btn[data-cmd="highlight"] { display: inline-grid; place-items: center; }
}

.hl-palette {
    position: fixed;
    z-index: 60;
    display: grid;
    gap: 6px;
    width: 272px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    animation: arrive 200ms var(--ease-out) both;
}
.hl-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.hl-swatch { aspect-ratio: 1; width: 100%; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; transition: box-shadow 150ms var(--ease-out), transform 100ms var(--ease-out); }
.hl-swatch.hl-yellow { background: #facc15; }
.hl-swatch.hl-green { background: #4ade80; }
.hl-swatch.hl-pink { background: #f472b6; }
.hl-swatch.hl-blue { background: #60a5fa; }
.hl-swatch.hl-orange { background: #fb923c; }
.hl-swatch.hl-purple { background: #c084fc; }
.hl-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.hl-swatch:active { transform: scale(0.9); }
.hl-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hl-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hl-opt:disabled { opacity: 0.45; cursor: default; }
.hl-opt > .i { width: 20px; height: 20px; flex: none; color: var(--text-muted); }
.hl-opt > span:not(.hl-switch) { display: grid; flex: 1; line-height: 1.3; }
.hl-opt strong { font-size: 0.9rem; font-weight: 650; }
.hl-opt small { font-size: 0.76rem; color: var(--text-muted); }
.hl-switch { flex: none; position: relative; width: 36px; height: 22px; border-radius: 999px; background: rgba(127, 127, 127, 0.35); transition: background 150ms; }
.hl-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms var(--ease-out); }
.hl-opt[aria-pressed="true"] .hl-switch { background: var(--accent); }
.hl-opt[aria-pressed="true"] .hl-switch::after { transform: translateX(14px); }
@media (hover: hover) and (pointer: fine) { .hl-opt:not(:disabled):hover { background: var(--input); } }

/* Feed photos: two-finger pinch opens the zoom viewer instead of zooming the page */
.post-media .slide { touch-action: pan-x pan-y; }
.post-media { position: relative; }

/* ---------- Inbox: call straight from the chat list ---------- */
.convo-wrap { position: relative; }
.convo-wrap[hidden] { display: none; }
.convo-wrap > .convo { width: 100%; padding-right: 56px; }
.convo-call {
    position: absolute;
    top: 50%;
    right: 10px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    border: 0;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    cursor: pointer;
    transition: transform 100ms var(--ease-out), background 150ms;
}
.convo-call .i { width: 18px; height: 18px; }
.convo-call:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
    .convo-call { opacity: 0; }
    .convo-wrap:hover .convo-call, .convo-call:focus-visible { opacity: 1; }
    .convo-call:hover { background: var(--accent); color: var(--on-accent); }
}

/* ---------- Community roles ---------- */
.cm-role.role-owner { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #b45309; }
.cm-role.role-admin { background: var(--accent-soft); color: var(--accent); }
.cm-role.role-moderator { background: color-mix(in srgb, #10b981 16%, var(--surface)); color: #047857; }
:root[data-theme="dark"] .cm-role.role-owner { color: #fbbf24; }
:root[data-theme="dark"] .cm-role.role-moderator { color: #34d399; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cm-role.role-owner { color: #fbbf24; }
    :root:not([data-theme="light"]) .cm-role.role-moderator { color: #34d399; }
}
.cm-members-note { margin: 4px 0 10px; }

/* ---------- Community group chat ---------- */
.gc {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    height: min(72vh, 760px);
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden;
    position: relative;
}
.gc-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.gc-emoji { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--input); font-size: 1.3rem; flex: none; }
.gc-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.gc-title strong { font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-title small { font-size: 0.78rem; color: var(--text-muted); }
.gc-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 100ms var(--ease-out);
}
.gc-call .i { width: 17px; height: 17px; }
.gc-call:active { transform: scale(0.96); }

.gc-pinned { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.gc-pinned[hidden] { display: none; }
.gc-pin-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gc-pin-open .i { width: 18px; height: 18px; color: var(--accent); flex: none; }
.gc-pin-open span { display: grid; min-width: 0; line-height: 1.25; }
.gc-pin-open strong { font-size: 0.74rem; color: var(--accent); }
.gc-pin-open small { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gc-thread { overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 2px; background: var(--chat-canvas, var(--panel)); scrollbar-width: thin; }
.gc-day { display: flex; justify-content: center; margin: 12px 0 8px; }
.gc-day span { padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.gc-msg { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: 86%; margin-top: 8px; }
.gc-msg.grouped { margin-top: 2px; }
.gc-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.gc-av { width: 32px; flex: none; }
.gc-col { display: grid; gap: 3px; min-width: 0; }
.gc-name { display: flex; align-items: center; gap: 6px; padding-left: 12px; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }
.gc-role { padding: 1px 6px; border-radius: 6px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent); }
.gc-role.role-owner { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #b45309; }
.gc-role.role-moderator { background: color-mix(in srgb, #10b981 18%, transparent); color: #047857; }
.gc-bubble {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 8px 12px 6px;
    border-radius: 18px 18px 18px 6px;
    background: var(--bubble-in, var(--surface));
    border: 1px solid var(--border);
    color: var(--text);
    overflow-wrap: anywhere;
}
.gc-msg.grouped:not(.mine) .gc-bubble { border-top-left-radius: 8px; }
.gc-msg.mine .gc-bubble { border-radius: 18px 18px 6px 18px; background: var(--bubble-out, var(--accent)); border-color: transparent; color: #fff; }
.gc-msg.mine.grouped .gc-bubble { border-top-right-radius: 8px; }
.gc-msg.is-pinned .gc-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.gc-text { margin: 0; font-size: 0.94rem; line-height: 1.45; white-space: pre-wrap; }
.gc-msg.mine .gc-text .hashtag { color: #fff; text-decoration: underline; }
.gc-meta { display: inline-flex; align-items: center; gap: 4px; justify-self: end; font-size: 0.68rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.gc-meta .i { width: 11px; height: 11px; }
.gc-quote { display: grid; gap: 1px; padding: 6px 10px; border: 0; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(127, 127, 127, 0.14); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gc-msg.mine .gc-quote { border-left-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.16); }
.gc-quote strong { font-size: 0.76rem; }
.gc-quote span { font-size: 0.82rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-photos { display: grid; gap: 4px; margin: -2px -6px 0; border-radius: 12px; overflow: hidden; }
.gc-photos.n2, .gc-photos.n4 { grid-template-columns: 1fr 1fr; }
.gc-photos.n3 { grid-template-columns: 1fr 1fr; }
.gc-photos.n3 .gc-photo:first-child { grid-column: span 2; }
.gc-photo { padding: 0; border: 0; background: var(--input); cursor: zoom-in; }
.gc-photo img { display: block; width: 100%; max-height: 280px; min-height: 90px; object-fit: cover; }
.gc-msg.removed .gc-bubble { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-style: italic; opacity: 0.7; background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); }
.gc-msg.removed .gc-bubble .i { width: 14px; height: 14px; }
.gc-more { align-self: center; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity 150ms; }
.gc-more .i { width: 16px; height: 16px; }
.gc-msg:hover .gc-more, .gc-more:focus-visible, .gc-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .gc-more { display: none; } }
.gc-msg.flash .gc-bubble { animation: gc-flash 1.4s ease-out; }
@keyframes gc-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } }

.gc-empty { margin: auto; display: grid; justify-items: center; gap: 6px; max-width: 320px; padding: 24px; text-align: center; color: var(--text-muted); }
.gc-empty strong { color: var(--text); font-size: 1.05rem; }
.gc-empty p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.gc-empty-emoji { font-size: 2.4rem; }
.gc-jump { position: absolute; left: 50%; bottom: 96px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; transform: translateX(-50%); border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 0.82rem; font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; }
.gc-jump[hidden] { display: none; }
.gc-jump .i { width: 15px; height: 15px; }
.gc-typing { min-height: 0; margin: 0; padding: 0 16px; font-size: 0.78rem; font-style: italic; color: var(--text-muted); }
.gc-typing:not(:empty) { padding: 4px 16px; }
.gc-status { margin: 0; padding: 8px 16px; font-size: 0.82rem; color: var(--text-muted); background: var(--input); border-top: 1px solid var(--border); }
.gc-status[hidden] { display: none; }

.gc-compose { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.gc-compose.locked { opacity: 0.55; }
.gc-row { display: flex; align-items: flex-end; gap: 6px; }
.gc-tool { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.gc-tool .i { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) { .gc-tool:hover { background: var(--input); color: var(--accent); } }
#gc-input { flex: 1; min-width: 0; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 21px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; line-height: 1.35; resize: none; }
#gc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gc-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform 100ms var(--ease-out); }
.gc-send:active { transform: scale(0.92); }
.gc-send .i { width: 19px; height: 19px; }
.gc-reply { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 6px 6px 6px 12px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--input); }
.gc-reply[hidden] { display: none; }
.gc-reply span { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.gc-reply strong { font-size: 0.78rem; color: var(--accent); }
.gc-reply small { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
    .gc { height: calc(var(--vvh, 100dvh) - 250px); min-height: 420px; margin: 10px -12px 0; border-radius: 0; border-left: 0; border-right: 0; }
    .gc-msg { max-width: 92%; }
    .gc-call span { display: none; }
    .gc-call { width: 40px; padding: 0; justify-content: center; }
}

/* =========================================================
   Steady pages: nothing sways, slides sideways or shifts while you use the tab-bar pages
   ========================================================= */
/* Nothing can be pushed wider than the screen, so a page can't be nudged sideways */
html, body { overflow-x: hidden; }
.main-col { overflow-x: hidden; scrollbar-gutter: stable; }
#content { overflow-x: clip; max-width: 100%; }
/* Switching pages: a quick cross-fade in place (no sideways slide) */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(page) { animation: vt-fade-out 120ms ease-out both; }
    ::view-transition-new(page) { animation: vt-fade-in 200ms ease-out both; }
    :root[data-nav-dir="back"]::view-transition-old(page) { animation-name: vt-fade-out; }
    :root[data-nav-dir="back"]::view-transition-new(page) { animation-name: vt-fade-in; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Arriving on a page: a short, gentle settle — no blur, barely any movement */
.arriving :is(.nh-hero, .nh-sec, .mcard, .post.ig, .ex-sec, .st-card, .cm-card, .convo, .book-card) {
    animation: arrive-soft 320ms ease-out both;
    animation-delay: calc(min(var(--i, 0), 6) * 24ms);
}
@keyframes arrive-soft { from { opacity: 0; transform: translateY(6px); } }
/* The tab bar and top bar stay put: no hop on the active tab */
.tab-item.active .i { animation: none !important; }
.tabbar, .topbar { transform: none; will-change: auto; }

/* =========================================================
   Chat wallpapers (DMs and group chats)
   ========================================================= */
.has-wallpaper {
    background: linear-gradient(rgba(0, 0, 0, var(--wp-dim, 0)), rgba(0, 0, 0, var(--wp-dim, 0))), var(--wp) !important;
    background-attachment: scroll !important;
}
/* Text that sits straight on the wallpaper stays readable */
.has-wallpaper.wp-dark :is(.gc-name, .day-sep span, .gc-day span, .gc-empty, .gc-empty strong, .chat-empty) { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.has-wallpaper :is(.gc-day span, .day-sep span) { background: rgba(0, 0, 0, 0.35); border-color: transparent; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.has-wallpaper.wp-light :is(.gc-day span, .day-sep span) { background: rgba(255, 255, 255, 0.7); color: #3f3f46; }
.has-wallpaper .gc-more { color: rgba(255, 255, 255, 0.85); }
.has-wallpaper.wp-light .gc-more { color: #52525b; }

.wp-picker { width: min(460px, calc(100vw - 24px)); max-height: min(88vh, 820px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; }
.wp-picker:not([open]) { display: none; }
.wp-picker::backdrop { background: rgba(9, 9, 11, 0.55); }
.wp-sheet { display: grid; gap: 12px; max-height: min(88vh, 820px); overflow-y: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.wp-head { display: flex; align-items: center; justify-content: space-between; }
.wp-head h3 { margin: 0; font-size: 1.05rem; }
.wp-preview { display: flex; flex-direction: column; gap: 6px; height: 150px; padding: 14px; border-radius: 16px; background: var(--chat-canvas, var(--panel)); border: 1px solid var(--border); justify-content: flex-end; }
.wp-b { max-width: 75%; padding: 7px 12px; border-radius: 16px; font-size: 0.86rem; }
.wp-b.in { align-self: flex-start; background: var(--bubble-in, var(--surface)); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.wp-b.out { align-self: flex-end; background: var(--bubble-out, var(--accent)); color: #fff; border-bottom-right-radius: 6px; }
.wp-photo { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wp-photo.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wp-photo .i { width: 22px; height: 22px; color: var(--accent); flex: none; }
.wp-photo span { display: grid; line-height: 1.3; }
.wp-photo small { font-size: 0.78rem; color: var(--text-muted); }
.wp-label { margin: 2px 0 -4px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.wp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wp-tile { position: relative; aspect-ratio: 3 / 4; border: 0; border-radius: 12px; background: var(--wp); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform 100ms var(--ease-out); }
.wp-tile span { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.68rem; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-tile.none { background: var(--chat-canvas, var(--panel)); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.wp-tile.none span { background: none; color: var(--text-muted); top: 50%; bottom: auto; transform: translateY(-50%); }
.wp-tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wp-tile:active { transform: scale(0.96); }
.wp-dim-row { display: flex; align-items: center; gap: 12px; font-size: 0.86rem; font-weight: 600; }
.wp-dim-row[hidden] { display: none; }
.wp-dim-row input { flex: 1; accent-color: var(--accent); }
.wp-all { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.wp-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
@media (max-width: 560px) {
    .wp-picker { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    .wp-grid { grid-template-columns: repeat(3, 1fr); }
}

/* App background (Settings → Appearance): each has a light and a dark version */
:root[data-bg="paper"] { --bg: #f7f3ec; --panel: #efe9df; --surface: #fffdf8; --input: #f3eee5; --chat-canvas: #f5f0e7; }
:root[data-bg="paper"][data-theme="dark"] { --bg: #12100d; --panel: #1a1713; --surface: #1f1b16; --input: #26211b; --chat-canvas: #0f0d0a; }
:root[data-bg="mist"] { --bg: #eef2f7; --panel: #e4eaf2; --surface: #fbfcfe; --input: #eaeff5; --chat-canvas: #edf1f6; }
:root[data-bg="mist"][data-theme="dark"] { --bg: #0a0f16; --panel: #101722; --surface: #141c28; --input: #1a2432; --chat-canvas: #080c12; }
:root[data-bg="sage"] { --bg: #eef4ef; --panel: #e3ece5; --surface: #fbfdfb; --input: #e9f0ea; --chat-canvas: #ecf3ed; }
:root[data-bg="sage"][data-theme="dark"] { --bg: #0a100c; --panel: #101812; --surface: #141e17; --input: #1a261d; --chat-canvas: #080d0a; }
:root[data-bg="blush"] { --bg: #fbf0f2; --panel: #f5e4e8; --surface: #fffbfc; --input: #f7eaed; --chat-canvas: #faeef1; }
:root[data-bg="blush"][data-theme="dark"] { --bg: #120b0d; --panel: #1a1013; --surface: #211418; --input: #2a1a1f; --chat-canvas: #0e080a; }
:root[data-bg="midnight"][data-theme="dark"] { --bg: #000000; --panel: #0a0a0a; --surface: #111111; --input: #161616; --chat-canvas: #000000; }
@media (prefers-color-scheme: dark) {
    :root[data-bg="paper"]:not([data-theme="light"]) { --bg: #12100d; --panel: #1a1713; --surface: #1f1b16; --input: #26211b; --chat-canvas: #0f0d0a; }
    :root[data-bg="mist"]:not([data-theme="light"]) { --bg: #0a0f16; --panel: #101722; --surface: #141c28; --input: #1a2432; --chat-canvas: #080c12; }
    :root[data-bg="sage"]:not([data-theme="light"]) { --bg: #0a100c; --panel: #101812; --surface: #141e17; --input: #1a261d; --chat-canvas: #080d0a; }
    :root[data-bg="blush"]:not([data-theme="light"]) { --bg: #120b0d; --panel: #1a1013; --surface: #211418; --input: #2a1a1f; --chat-canvas: #0e080a; }
    :root[data-bg="midnight"]:not([data-theme="light"]) { --bg: #000000; --panel: #0a0a0a; --surface: #111111; --input: #161616; --chat-canvas: #000000; }
}
body { background: var(--bg); }
.st-bgswatch { background: linear-gradient(135deg, var(--l) 0 50%, var(--d) 50% 100%) !important; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong); }
.st-bgswatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

/* More note colours */
.c-orange { --card: #fed7aa; --soft: #fff7ed; --deep: #ea580c; }
.c-coral  { --card: #fecaca; --soft: #fef2f2; --deep: #dc2626; }
.c-teal   { --card: #99f6e4; --soft: #f0fdfa; --deep: #0d9488; }
.c-sky    { --card: #bae6fd; --soft: #f0f9ff; --deep: #0284c7; }
.c-lime   { --card: #d9f99d; --soft: #f7fee7; --deep: #65a30d; }
.c-gray   { --card: #e4e4e7; --soft: #fafafa; --deep: #52525b; }
/* The quick "new note in colour" dots wrap neatly now there are eleven */
.color-dots { flex-wrap: wrap; row-gap: 8px; max-width: 170px; }
.swatches { flex-wrap: wrap; }

/* Explore · News — publisher headlines; each card opens the story on the publisher's site */
.ex-news-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ex-news-kinds .cm-filter { flex: none; }
.ex-news-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; }
.ex-news-listen { display: inline-flex; align-items: center; gap: 6px; }
.ex-news-listen .i { width: 15px; height: 15px; }
.ex-place { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.ex-place label { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.ex-place select, .ex-place input { min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.ex-place .chip { min-height: 42px; }

.ex-news {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: transform 100ms var(--ease-out), border-color 150ms, box-shadow 160ms var(--ease-out);
}
.ex-news:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .ex-news:hover { border-color: var(--accent); box-shadow: var(--shadow); } }
.ex-news:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exn-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--input); }
.exn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exn-mark { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #000)); color: #fff; font-size: 1.6rem; font-weight: 800; }
.exn-text { display: grid; gap: 4px; min-width: 0; }
.exn-src { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exn-text strong { font-size: 0.95rem; line-height: 1.35; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.exn-text small { font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lead story: picture on top */
.ex-news.big { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
.ex-news.big .exn-img { aspect-ratio: 16 / 9; border-radius: 0; }
.ex-news.big.noimg .exn-img { aspect-ratio: 16 / 5; }
.ex-news.big .exn-text { padding: 4px 16px 16px; gap: 6px; }
.ex-news.big .exn-text strong { font-size: 1.2rem; letter-spacing: -0.01em; }
.ex-news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ex-news-list .ex-news.big { grid-column: 1 / -1; }
@media (min-width: 900px) {
    .ex-news-list .ex-news.big { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
    .ex-news-list .ex-news.big .exn-img { aspect-ratio: 16 / 10; }
    .ex-news-list .ex-news.big .exn-text { padding: 20px; }
    .ex-news-list .ex-news.big .exn-text strong { font-size: 1.45rem; -webkit-line-clamp: 4; }
}

/* On "For you": a sideways row of compact cards */
.ex-news-row .ex-news { flex: none; width: min(300px, 80vw); }
.ex-news-row .ex-news.skel, .ex-news-list .ex-news.skel { height: 112px; border: 0; background: linear-gradient(90deg, var(--input), var(--border), var(--input)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.ex-empty .chip { margin-top: 8px; }
@media (max-width: 520px) {
    .ex-news-list { grid-template-columns: 1fr; }
    .ex-news { grid-template-columns: 80px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ex-news.skel { animation: none; } }
.cm-filter[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.ex-place select, .ex-place input { width: 100%; min-width: 0; box-sizing: border-box; }

/* ---------- Incognito chat ----------
   The whole pane switches to a night palette (whatever the app theme), so it's unmistakable at a glance.
   Vanishing bubbles get a dashed edge and a timer; the thread blurs while the app is in the background. */
.chat-pane.incognito {
    --surface: #15121f;
    --chat-canvas: #0c0a13;
    --text: #efeaff;
    --text-muted: #a9a2c4;
    --text-faint: #8a83a6;
    --border: #2a2540;
    --bubble-in: #1c1829;
    --bubble-out: #4b3a8f;
    --bubble-out-text: #f7f4ff;
    --bubble-out-meta: #cfc6f5;
    --soft-accent: #262040;
    --accent: #b9a8ff;
    --on-accent: #120e22;
    color: var(--text);
    background: var(--chat-canvas);
    color-scheme: dark;
}
.chat-pane.incognito .chat-head { background: var(--surface); border-color: var(--border); }
.chat-pane.incognito .chat-thread {
    background-color: var(--chat-canvas) !important;
    background-image: radial-gradient(color-mix(in srgb, #b9a8ff 9%, transparent) 1px, transparent 1.4px) !important;
    background-size: 22px 22px !important;
    transition: filter 180ms ease-out;
}
.chat-pane.incognito .composer { background: var(--surface); border-color: var(--border); }
.chat-pane.incognito .composer-box { background: #1e1a2d; border-color: var(--border); }
.chat-pane.incognito .chat-input { color: var(--text); }
.chat-pane.incognito .quick-reply { background: #1e1a2d; color: var(--text); border-color: var(--border); }
.chat-pane.incognito.shielded .chat-thread { filter: blur(16px) saturate(0.6); }

.incognito-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 12px 0;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, #b9a8ff 45%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, #b9a8ff 8%, #15121f);
    color: #efeaff;
    animation: incog-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.incognito-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #b9a8ff; color: #120e22; }
.incognito-ic .i { width: 20px; height: 20px; }
.incognito-text { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.incognito-text strong { font-size: 0.9rem; }
.incognito-text small { font-size: 0.78rem; color: #a9a2c4; }
.incognito-banner .chip { flex: none; background: #262040; color: #efeaff; border-color: #3a3358; }
@keyframes incog-in { from { opacity: 0; transform: translateY(-6px); } }

.msg.vanish .msg-card { outline: 1px dashed color-mix(in srgb, #b9a8ff 55%, transparent); outline-offset: 2px; }
.vanish-mark { display: inline-grid; place-items: center; margin-right: 4px; opacity: 0.85; }
.vanish-mark .i { width: 12px; height: 12px; }
.msg.vanishing { animation: msg-vanish 420ms ease-in forwards; }
@keyframes msg-vanish { to { opacity: 0; filter: blur(6px); transform: scale(0.96); } }
.convo-incognito { width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; color: #8b7bdc; }
.chat-head .incognito-btn[aria-pressed="true"] { background: #b9a8ff; color: #120e22; }
@media (prefers-reduced-motion: reduce) {
    .incognito-banner { animation: none; }
    .msg.vanishing { animation-duration: 1ms; }
}

/* ---------- Reactions on feed posts ---------- */
.post-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 16px 6px; }
.post-react {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 100ms var(--ease-out), background 150ms, border-color 150ms;
}
.post-react span { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.post-react.mine { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, transparent)); }
.post-react.mine span { color: var(--accent); }
.post-react:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .post-react:hover { border-color: var(--accent); } }
.post-react-who { margin-left: 2px; font-size: 0.78rem; color: var(--text-muted); }
.pv-stats .post-reacts { padding-left: 0; padding-right: 0; }

/* The emoji row that grows out of the React button / a long-pressed Like */
.emoji-pop {
    position: fixed;
    z-index: 1000;
    display: flex;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.08);
    animation: emoji-pop-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.emoji-pop.closing { animation: emoji-pop-out 140ms ease-in forwards; }
.emoji-pop button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    animation: emoji-rise 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
    animation-delay: calc(var(--i) * 22ms);
    transition: transform 120ms var(--ease-out), background 120ms;
}
.emoji-pop button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.emoji-pop button:active { transform: scale(0.9); }
.emoji-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .emoji-pop button:hover { transform: translateY(-4px) scale(1.25); } }
@keyframes emoji-pop-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes emoji-pop-out { to { opacity: 0; transform: scale(0.85); } }
@keyframes emoji-rise { from { opacity: 0; transform: translateY(8px) scale(0.6); } }
@media (max-width: 420px) { .emoji-pop button { width: 40px; height: 40px; font-size: 1.45rem; } }

/* ---------- Story reactions ---------- */
.story-react {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    max-width: calc(100% - 24px);
    padding: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.story-react button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.45rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1.4), background 140ms;
}
.story-react button.on { background: rgba(255, 255, 255, 0.24); }
.story-react button:active { transform: scale(0.85); }
.story-react button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .story-react button:hover { transform: scale(1.2); } }
@media (max-width: 380px) { .story-react button { width: 36px; height: 36px; font-size: 1.3rem; } }
.story-viewer .story-caption { margin-bottom: 64px; }
.story-float {
    position: fixed;
    z-index: 10;
    pointer-events: none;
    font-size: calc(2rem * var(--s, 1));
    transform: translate(-50%, 0);
    animation: story-float 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay, 0ms) forwards;
    opacity: 0;
}
@keyframes story-float {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    15% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.2), -30px) scale(1.1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -260px) scale(1); }
}
.sv-reacts { margin-left: auto; font-size: 1.2rem; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) {
    .emoji-pop, .emoji-pop button { animation: none; }
}

/* ---------- Book marketplace ----------
   A bookshop feel: warm paper-and-ink hero, book-shaped cards (3:4 covers), price first. */
.mk { display: grid; gap: 18px; padding-bottom: 32px; }
.mk-hero {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff8ec;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(245, 158, 11, 0.55), transparent 55%),
        radial-gradient(90% 120% at 100% 100%, rgba(190, 18, 60, 0.55), transparent 60%),
        linear-gradient(135deg, #3b2412, #7c2d12);
}
.mk-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 180px;
    height: 180px;
    border-radius: 36px;
    background: repeating-linear-gradient(90deg, rgba(255, 248, 236, 0.12) 0 10px, transparent 10px 22px);
    transform: rotate(18deg);
    pointer-events: none;
}
.mk-hero-text { position: relative; z-index: 1; display: grid; gap: 6px; max-width: 520px; }
.mk-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.mk-kicker .i { width: 16px; height: 16px; }
.mk-hero h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.mk-hero p:not(.mk-kicker) { margin: 0; font-size: 0.95rem; line-height: 1.45; color: rgba(255, 248, 236, 0.86); }
.mk-list-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; background: #fff8ec; color: #3b2412; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.mk-list-btn .i { width: 18px; height: 18px; }
.mk-tabs .badge { margin-left: 6px; }

.mk-tools { display: flex; gap: 10px; align-items: center; }
.mk-search { flex: 1; margin: 0; }
.mk-search input { font-size: 16px; }
.mk-sort select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; }
.mk-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-top: -6px; }
.mk-kinds .cm-filter { flex: none; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 14px; }
@media (max-width: 520px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }
.mk-card {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.mk-card-cover { position: relative; display: block; }
.mk-cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px 14px 14px 6px;
    background: var(--input);
    box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.12), 0 10px 22px -14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.mk-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-cover-made {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 12px 12px 16px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 6px, transparent 6px),
        linear-gradient(160deg, var(--c1), var(--c2));
}
.mk-cover-made strong { font-size: 1rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.mk-cover-made small { font-size: 0.75rem; opacity: 0.85; }
.mk-cover.sm { width: 52px; flex: none; border-radius: 4px 8px 8px 4px; }
.mk-cover.sm.mk-cover-made { padding: 6px 5px 6px 9px; }
.mk-cover.sm.mk-cover-made strong { font-size: 0.55rem; -webkit-line-clamp: 4; }
.mk-cover.sm.mk-cover-made small { display: none; }
.mk-cover.lg { width: min(220px, 60%); margin: 8px auto; }
.mk-card:active .mk-cover { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .mk-card:hover .mk-cover { transform: translateY(-3px) rotate(-0.4deg); box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.12), 0 18px 32px -16px rgba(0, 0, 0, 0.55); } }
.mk-card:focus-visible { outline: none; }
.mk-card:focus-visible .mk-cover { outline: 3px solid var(--accent); outline-offset: 3px; }
.mk-card.unavailable .mk-cover { filter: grayscale(0.6) opacity(0.75); }

.mk-kind {
    position: absolute;
    top: 8px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(24, 24, 27, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mk-kind .i { width: 12px; height: 12px; }
.mk-kind.k-gift { background: #15803d; }
.mk-kind.k-rent { background: #1d4ed8; }
.mk-sheet-head .mk-kind { position: static; }
.mk-status { position: absolute; left: 12px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(24, 24, 27, 0.8); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }

.mk-card-body { display: grid; gap: 1px; padding: 0 2px; min-width: 0; }
.mk-price { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mk-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-author, .mk-meta { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-seller { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.76rem; color: var(--text-muted); min-width: 0; }
.mk-seller span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card.skel { aspect-ratio: 3 / 5; border-radius: 12px; background: linear-gradient(90deg, var(--input), var(--border), var(--input)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.mk-row .mk-card { flex: none; width: 148px; }
.mk-empty .primary-btn { margin-top: 10px; }
.mk-sub { display: grid; gap: 2px; margin: 8px 0 10px; font-size: 1.05rem; font-weight: 800; }
.mk-sub small { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.mk-none { margin: 0; }
.mk-req-sec + .mk-req-sec { margin-top: 8px; }

/* Requests */
.mk-reqs { display: grid; gap: 8px; }
.mk-req {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms, transform 100ms var(--ease-out);
}
.mk-req:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .mk-req:hover { border-color: var(--accent); } }
.mk-req.needs { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: inset 3px 0 0 var(--accent); }
.mk-req-text { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.mk-req-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-req-text span { font-size: 0.84rem; color: var(--text-muted); }
.mk-req-text small { font-size: 0.74rem; color: var(--text-faint, var(--text-muted)); }
.mk-pill { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: var(--input); color: var(--text-muted); white-space: nowrap; }
.mk-pill.s-pending { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.mk-pill.s-accepted, .mk-pill.s-reserved { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #1d4ed8; }
.mk-pill.s-completed, .mk-pill.s-rented { background: color-mix(in srgb, #22c55e 16%, transparent); color: #15803d; }
:root[data-theme="dark"] .mk-pill.s-pending { color: #fbbf24; }
:root[data-theme="dark"] .mk-pill.s-accepted, :root[data-theme="dark"] .mk-pill.s-reserved { color: #93c5fd; }
:root[data-theme="dark"] .mk-pill.s-completed, :root[data-theme="dark"] .mk-pill.s-rented { color: #86efac; }

.mk-safety { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 10%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border)); }
.mk-safety .i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #b45309; }
.mk-safety p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--text); }

/* Dialogs: a bottom sheet on phones, a centred card on desktop */
.mk-dialog {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: min(92dvh, 900px);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mk-dialog[open] { display: flex; flex-direction: column; animation: mk-sheet-in 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.mk-dialog::backdrop { background: rgba(9, 9, 11, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes mk-sheet-in { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 720px) {
    .mk-dialog { margin: auto; border-radius: 24px; }
}
.mk-sheet { display: flex; flex-direction: column; min-height: 0; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
.mk-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.mk-sheet-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.mk-gallery { position: relative; background: var(--input); }
.mk-gallery.none { display: grid; place-items: center; padding: 12px 0; background: linear-gradient(180deg, var(--input), transparent); }
.mk-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-slide { flex: none; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #111; scroll-snap-align: start; cursor: zoom-in; }
.mk-slide img { width: 100%; height: 100%; object-fit: contain; }
.mk-count { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.72rem; font-weight: 700; }
.mk-info { display: grid; gap: 10px; padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
.mk-price.big { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.6rem; }
.mk-dtitle { margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
.mk-dauthor { margin: -6px 0 0; color: var(--text-muted); }
.mk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 4px 0; }
.mk-facts div { padding: 8px 10px; border-radius: 12px; background: var(--input); }
.mk-facts dt { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mk-facts dd { margin: 2px 0 0; font-size: 0.9rem; font-weight: 600; }
.mk-desc { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.mk-seller-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mk-seller-row span:last-child { display: grid; line-height: 1.3; }
.mk-seller-row small { color: var(--text-muted); font-size: 0.8rem; }
.mk-owner { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-owner .chip { display: inline-flex; align-items: center; gap: 6px; }
.mk-owner .chip .i { width: 14px; height: 14px; }
.mk-owner .chip.danger { color: var(--danger, #dc2626); }
.mk-reqs.compact .mk-req { padding: 8px 10px; }
.mk-unavailable { margin: 0; padding: 12px; border-radius: 12px; background: var(--input); text-align: center; font-weight: 600; color: var(--text-muted); }
.mk-ask { display: grid; gap: 10px; }
.center { text-align: center; }

/* Form */
.mk-form-body { display: grid; gap: 14px; padding: 16px 18px; }
.mk-form-foot { position: sticky; bottom: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
.mk-field { display: grid; gap: 6px; min-width: 0; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.mk-field input, .mk-field select, .mk-field textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--input);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
}
.mk-field textarea { resize: vertical; line-height: 1.45; }
.mk-field input:focus-visible, .mk-field select:focus-visible, .mk-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.mk-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.mk-money { display: flex; min-width: 0; }
.mk-money > span, .mk-money select { flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-right: 0; border-radius: 12px 0 0 12px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 16px; font-weight: 700; }
.mk-field .mk-money select { width: auto; border-radius: 12px 0 0 12px; background: var(--surface); }
.mk-field .mk-money input { flex: 1; border-radius: 0 12px 12px 0; }
.mk-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--input); }
.mk-seg-opt { position: relative; }
.mk-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mk-seg-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; transition: background 150ms, color 150ms; }
.mk-seg-opt span .i { width: 16px; height: 16px; }
.mk-seg-opt input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.mk-seg-opt input:focus-visible + span { outline: 2px solid var(--accent); }
.mk-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.mk-checks legend { width: 100%; margin-bottom: 6px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.mk-checks label { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 600; }
.mk-checks input { width: 20px; height: 20px; accent-color: var(--accent); }
.mk-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #dc2626 12%, transparent); color: var(--danger, #dc2626); font-weight: 600; font-size: 0.88rem; }
.mk-photos { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.mk-thumb, .mk-add-photo { position: relative; flex: none; width: 84px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-thumb button { position: absolute; top: 4px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.mk-thumb button .i { width: 14px; height: 14px; }
.mk-thumb-x { right: 4px; }
.mk-thumb-edit { left: 4px; }
.mk-add-photo { display: grid; place-content: center; justify-items: center; gap: 2px; border: 1.5px dashed var(--border-strong, var(--border)); background: var(--input); color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.mk-add-photo .i { width: 22px; height: 22px; }
.mk-add-photo small { font-weight: 500; }

/* Conversation */
.mk-deal-sheet { height: min(88dvh, 760px); overflow: hidden; }
.mk-deal-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mk-deal-head .mk-cover.sm { width: 38px; }
.mk-deal-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mk-deal-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-deal-title small { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-deal-actions { display: grid; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mk-deal-actions p { margin: 0; }
.mk-deal-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-deal-btns .primary-btn.small { min-height: 38px; padding: 0 16px; }
.mk-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--chat-canvas, var(--bg)); }
.mk-msg { max-width: 78%; padding: 8px 12px 6px; border-radius: 18px; }
.mk-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.mk-msg time { display: block; margin-top: 2px; font-size: 0.68rem; opacity: 0.7; }
.mk-msg.in { align-self: flex-start; background: var(--bubble-in, var(--input)); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.mk-msg.out { align-self: flex-end; background: var(--bubble-out, var(--accent)); color: var(--bubble-out-text, #fff); border-bottom-right-radius: 6px; }
.mk-compose { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.mk-compose[hidden] { display: none; }
.mk-compose input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.mk-compose .send-btn { flex: none; width: 44px; height: 44px; }

.lib-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.lib-market { display: inline-flex; align-items: center; gap: 6px; }
.lib-market .i { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
    .mk-dialog[open] { animation: none; }
    .mk-card.skel { animation: none; }
}

/* Marketplace fixes: keep the page inside the screen on phones; badge clears the made-up cover title */
.mk { grid-template-columns: minmax(0, 1fr); }
.mk > * { min-width: 0; }
.mk-tools .mk-search { order: 0; width: auto; min-width: 0; }
.mk-tools .mk-sort { order: 1; flex: none; }
.mk-cover-made { padding-top: 38px; }
.mk-cover.sm.mk-cover-made, .mk-cover.lg.mk-cover-made { padding-top: 6px; }
.mk-cover.lg.mk-cover-made { padding-top: 16px; }
@media (max-width: 520px) { .mk-hero { padding: 18px; } .mk-list-btn { width: 100%; justify-content: center; } }
.mk-price-fields { display: grid; gap: 14px; }
.mk-price-fields[hidden], .mk-field[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mk-pill.s-pending { color: #fbbf24; }
    :root:not([data-theme="light"]) .mk-pill.s-accepted, :root:not([data-theme="light"]) .mk-pill.s-reserved { color: #93c5fd; }
    :root:not([data-theme="light"]) .mk-pill.s-completed, :root:not([data-theme="light"]) .mk-pill.s-rented { color: #86efac; }
    :root:not([data-theme="light"]) .mk-safety .i { color: #fbbf24; }
}
:root[data-theme="dark"] .mk-safety .i { color: #fbbf24; }

/* More menu on phones: a compact grid of tiles, grouped, with Refresh / Settings as rows underneath */
.pop-head { padding: 8px 8px 4px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 760px) {
    .popover.pop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: min(360px, calc(100vw - 16px)); padding: 8px; border-radius: 20px; }
    .popover.pop-grid > :not(.pop-tile) { grid-column: 1 / -1; }
    .popover.pop-grid .pop-sep { margin: 4px; }
    .pop-item.pop-tile { flex-direction: column; justify-content: center; gap: 6px; min-height: 68px; padding: 8px 2px; border-radius: 14px; font-size: 0.72rem; text-align: center; line-height: 1.15; touch-action: manipulation; }
    .pop-item.pop-tile .i { width: 22px; height: 22px; color: var(--accent); }
    .pop-item.pop-tile:active { background: var(--panel); transform: scale(0.96); }
}

/* Redraws of the page you are already on stay still: entrance animations play only when you arrive */
#content.repaint :is(.post, .msg, .mcard, .folder-card, .note-card, .typing-row, .comment.full, .incognito-banner, .ex-news, .mk-card, .gc-msg, .convo) { animation: none !important; }
#content.repaint .msg.vanishing { animation: msg-vanish 420ms ease-in forwards !important; }
body.chat-open #content.repaint .inbox .chat-pane:not(.leaving) { animation: none !important; }

/* Explore search: stays a bright pill while you type (the general search focus style made it dark-on-dark) */
.search.ex-search, .search.ex-search:focus-within { background: #ffffff; color: #18181b; }
.search.ex-search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 30px -12px rgba(0, 0, 0, 0.4); }
.search.ex-search input { color: #18181b; -webkit-text-fill-color: #18181b; caret-color: var(--accent); background: transparent; }
.search.ex-search input::placeholder { color: #71717a; -webkit-text-fill-color: #71717a; opacity: 1; }

/* Global people search (top search bar and Explore) */
.people-results { display: grid; gap: 10px; margin: 14px 0 4px; }
.people-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 800; }
.people-head .i { width: 18px; height: 18px; color: var(--accent); }
.people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .people-list { grid-template-columns: minmax(0, 1fr); } }
.person-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.person-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.person-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-text small { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-actions { flex: none; display: flex; gap: 6px; }
.person-actions .chip { min-height: 36px; }
.person-actions .chip[disabled] { opacity: 0.6; cursor: default; }
.people-note { margin: 0; }
@media (max-width: 420px) {
    .person-row { flex-wrap: wrap; row-gap: 8px; }
    .person-text { flex-basis: calc(100% - 64px); }
    .person-actions { flex-basis: 100%; padding-left: 62px; }
}

/* ==========================================================================
   Calls v2: voice, video, screen share, floating window
   Calm by design: no bounces; the panel fades in, tiles simply appear.
   ========================================================================== */
.call-panel {
    right: 20px;
    bottom: 20px;
    width: min(420px, calc(100% - 24px));
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    animation: call-in 180ms ease-out;
    z-index: 65;
}
@keyframes call-in { from { opacity: 0; } }
.call-panel .call-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 14px 16px 18px; }
.call-panel.video { width: min(760px, calc(100% - 24px)); }
.call-panel.min { display: none; }
.call-head { margin-bottom: 12px; }
.call-head-text { flex: 1; min-width: 0; }
.call-panel[data-state="ringing"] #call-status, .call-panel[data-state="connecting"] #call-status { color: #fbbf24; opacity: 1; }
.call-panel[data-state="connected"] #call-status { color: #86efac; opacity: 1; }
.call-panel.ended #call-status { color: #fca5a5; opacity: 1; }
.call-panel.ended .call-controls, .call-panel.ended .call-add, .call-panel.ended #call-minimize { visibility: hidden; }

.call-share-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.22);
    color: #dbeafe;
    font-size: 0.82rem;
    font-weight: 700;
}
.call-share-banner .i { width: 16px; height: 16px; flex: none; }
.call-share-controls { display: flex; justify-content: center; gap: 8px; margin: 0 0 10px; }
.call-share-controls:has(> :not([hidden])) { min-height: 36px; }
.call-share-controls .chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.call-share-controls .chip.danger { background: #b91c1c; }

/* The stage: tiles in a grid; a featured tile (a screen share, or someone you pinned) spans the top */
.call-stage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 2px 12px;
    align-content: start;
}
.call-panel.video .call-stage { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.call-stage[data-count="1"], .call-stage[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.call-tile {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 118px;
    border-radius: 18px;
    background: #1b1e26;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}
.call-tile:focus-visible { box-shadow: 0 0 0 3px #60a5fa; }
.call-tile.has-video { aspect-ratio: 4 / 3; min-height: 0; background: #000; }
.call-tile.big { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.call-tile.screen .call-video-slot video { object-fit: contain; background: #000; }
.call-video-slot { position: absolute; inset: 0; }
.call-video-slot:empty { display: none; }
.call-video-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-tile.self:not(.screen) .call-video-slot video { transform: scaleX(-1); } /* your own camera, like a mirror */
.call-tile .call-ring { border-radius: 50%; padding: 3px; transition: box-shadow 0.15s; }
.call-tile .call-ring .avatar.xl { width: 68px; height: 68px; }
.call-tile.speaking { box-shadow: inset 0 0 0 3px #34d399; }
.call-tile.speaking .call-ring { box-shadow: 0 0 0 3px #34d399; }
.call-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: #fff;
    pointer-events: none;
}
.call-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); }
.call-tag .i { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #dc2626; color: #fff; }
.call-tile .call-quality { position: static; }
.call-tile .float-emoji { position: absolute; left: 50%; bottom: 30%; }
.call-ended-card { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 30px 0 16px; }
.call-ended-card small { opacity: 0.7; font-variant-numeric: tabular-nums; }
.call-ended-emoji { font-size: 3rem; }

.call-controls { flex-wrap: wrap; gap: 10px; }
.call-btn[hidden] { display: none; }
.call-btn[aria-pressed="true"] .i { background: #fff; color: #111318; }
#call-mute[aria-pressed="true"] .i, #call-speaker[aria-pressed="true"] .i { background: #fca5a5; color: #450a0a; }
#call-cam[aria-pressed="true"] .i, #call-share[aria-pressed="true"] .i { background: #60a5fa; color: #0b1a33; }
.call-btn:focus-visible .i { box-shadow: 0 0 0 3px #60a5fa; }

/* Phones: an open call fills the screen; the controls sit at the bottom, clear of the home bar */
@media (max-width: 760px) {
    .call-panel, .call-panel.video {
        inset: 0;
        width: 100%;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        right: 0;
        bottom: 0;
    }
    .call-panel .call-body { padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .call-stage { flex: 1; }
    .call-panel.video .call-stage { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .call-stage[data-count="2"] { grid-template-columns: 1fr; }
    .call-panel.video .call-stage[data-count="2"] .call-tile.has-video { aspect-ratio: auto; min-height: 36dvh; }
    .call-controls { gap: 6px; }
}

/* ---------- Floating mini window ---------- */
.call-float {
    position: fixed;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 66;
    width: 176px;
    border-radius: 18px;
    background: #111318;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    animation: call-in 160ms ease-out;
    transition: left 200ms ease-out;
}
.call-float[hidden] { display: none; }
.call-float-view { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: grab; }
.call-float-video { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #1b1e26; overflow: hidden; }
.call-float-video video { width: 100%; height: 100%; object-fit: cover; }
.call-float-text { display: grid; padding: 6px 10px 2px; line-height: 1.25; }
.call-float-text strong { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-float-text small { font-size: 0.72rem; color: #86efac; font-variant-numeric: tabular-nums; }
.call-float-controls { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px 8px; }
.call-float-controls button { flex: 1; display: grid; place-items: center; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.call-float-controls button .i { width: 18px; height: 18px; }
.call-float-controls button[aria-pressed="true"] { background: #fca5a5; color: #450a0a; }
.call-float-controls button.end { background: #dc2626; }
@media (min-width: 761px) { .call-float { bottom: 20px; width: 220px; } }

.round-btn.accept.video { background: #2563eb; }
.incoming-actions { gap: 28px; }
@media (prefers-reduced-motion: reduce) { .call-panel, .call-float { animation: none; transition: none; } }

/* ---------- Profile sheet ---------- */
.profile-sheet {
    width: min(400px, 100%);
    max-width: 100%;
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.profile-sheet[open] { animation: ps-in 200ms ease-out; }
.profile-sheet::backdrop { background: rgba(9, 9, 11, 0.5); }
@keyframes ps-in { from { opacity: 0; transform: translateY(16px); } }
@media (min-width: 720px) { .profile-sheet { margin: auto; border-radius: 24px; } }
.ps-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 26px 20px calc(22px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.ps-close { position: absolute; top: 10px; right: 10px; }
.ps-photo { position: relative; margin-bottom: 8px; }
.ps-photo .avatar.xl { width: 96px; height: 96px; font-size: 2rem; }
.ps-photo.online::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--online, #22c55e); box-shadow: 0 0 0 3px var(--surface); }
.ps-card h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.01em; }
.ps-handle { margin: 0; color: var(--text-muted); }
.ps-status { margin: 2px 0 0; min-height: 1.2em; font-size: 0.85rem; color: var(--text-muted); }
.ps-status.on { color: var(--online, #16a34a); font-weight: 700; }
.ps-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.ps-fact { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--input); font-size: 0.78rem; color: var(--text-muted); }
.ps-fact .i { width: 13px; height: 13px; }
.ps-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; width: 100%; }
.ps-action { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--input); color: var(--text); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; touch-action: manipulation; }
.ps-action .i { width: 17px; height: 17px; }
.ps-action.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.ps-action.on { border-color: var(--accent); color: var(--accent); }
.ps-action[disabled] { opacity: 0.6; cursor: default; }
.ps-action:active { transform: scale(0.97); }

/* Names and pictures that open a profile */
.chat-who, .gc-who, .person-open { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.chat-who-name, .gc-who-name { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; text-align: left; }
@media (hover: hover) and (pointer: fine) { .chat-who-name:hover, .gc-who-name:hover { text-decoration: underline; } }
.person-text[data-profile] { cursor: pointer; }
.friend-name small.is-online { color: var(--online, #16a34a); }

/* ---------- Chats open calmly: no slide, bounce or rising bubbles ---------- */
body.chat-open .inbox .chat-pane,
body.chat-open #content.repaint .inbox .chat-pane { animation: chat-fade 140ms ease-out both !important; }
body.chat-open .inbox .chat-pane.leaving { animation: chat-fade-out 120ms ease-in both !important; }
@keyframes chat-fade { from { opacity: 0; } }
@keyframes chat-fade-out { to { opacity: 0; } }
.chat-pane .msg, .gc-msg { animation: none !important; }
.msg.pop-in .msg-card { animation: msg-fade 160ms ease-out !important; }
.msg.vanishing { animation: msg-vanish 420ms ease-in forwards !important; }
@keyframes msg-fade { from { opacity: 0; } }
.react-bar { animation: none !important; }

/* "edited" / "restored" beside a message's time */
.msg-flag {
    display: inline;
    margin-right: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.68rem;
    font-style: italic;
    font-weight: 600;
    opacity: 0.8;
    cursor: pointer;
}
span.msg-flag { cursor: default; }
button.msg-flag:hover { text-decoration: underline; }
.gc-meta .msg-flag { margin-right: 4px; }

/* Edit history & recently deleted */
.hist-sheet {
    width: min(460px, 100%);
    max-width: 100%;
    max-height: min(80dvh, 700px);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.hist-sheet::backdrop { background: rgba(9, 9, 11, 0.45); }
@media (min-width: 720px) { .hist-sheet { margin: auto; border-radius: 22px; } }
.hist-card { display: grid; gap: 10px; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
.hist-card header { display: flex; align-items: center; justify-content: space-between; }
.hist-card header strong { font-size: 1.05rem; }
.hist-note { margin: -4px 0 0; }
.hist-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-height: 60dvh; overflow-y: auto; }
.hist-list li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); }
.hist-list li.now { border-color: var(--accent); background: var(--surface); }
.hist-list li.empty { border-style: dashed; background: none; color: var(--text-muted); text-align: center; }
.hist-list small { font-size: 0.74rem; color: var(--text-muted); }
.hist-list p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.hist-list .chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.hist-list .chip .i { width: 14px; height: 14px; }

/* Group chat voice notes */
.gc-rec { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 42px; }
.gc-rec[hidden] { display: none; }
.gc-rec-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; }
.gc-rec-wave { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.gc-rec-wave span { flex: none; width: 3px; border-radius: 2px; background: var(--accent); }
.gc-mic.recording { background: #dc2626; color: #fff; }
.gc-bubble .vn { margin: 2px 0; }

/* ---------- "Went live" pop-up ---------- */
.live-pop {
    position: fixed;
    left: 50%;
    top: calc(14px + env(safe-area-inset-top, 0px));
    z-index: 70;
    width: min(440px, calc(100% - 20px));
    transform: translateX(-50%);
    animation: live-pop-in 220ms ease-out;
}
.live-pop[hidden] { display: none; }
@keyframes live-pop-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.live-pop-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: 20px;
    background: #111318;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(239, 68, 68, 0.5);
}
.live-pop-av { position: relative; display: inline-grid; place-items: center; padding: 3px; border-radius: 50%; box-shadow: 0 0 0 2px #ef4444; }
.live-pop-badge { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em; }
.live-pop-text { display: grid; min-width: 0; line-height: 1.3; }
.live-pop-text strong { font-size: 0.95rem; }
.live-pop-text small { font-size: 0.8rem; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-pop-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.live-pop-actions .chip { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: transparent; }
.live-watch { display: inline-flex; align-items: center; gap: 6px; background: #ef4444; border-color: #ef4444; }
.live-watch .i { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .live-pop { animation: none; } }

/* ==========================================================================
   Chat phase 2: ticks, unread divider, inbox organisation, tools, group reactions & mentions
   ========================================================================== */
/* Ticks: sending (clock) · sent (one) · delivered (two, grey) · read (two, blue) · failed (red, tap to retry) */
.ticks { display: inline-grid; place-items: center; margin-left: 3px; vertical-align: -2px; }
.ticks .i { width: 15px; height: 15px; }
.msg.out .msg-meta .ticks.sent, .msg.out .msg-meta .ticks.delivered, .msg.out .msg-meta .ticks.pending { color: var(--bubble-out-meta); }
.msg.out .msg-meta .ticks.read { color: #7ee0a1; }
.ticks.pending .i { width: 13px; height: 13px; }
button.ticks.failed { padding: 0; border: 0; background: #fee2e2; color: #dc2626; border-radius: 50%; cursor: pointer; }
.convo-ticks.ticks { margin: 0 2px 0 0; color: var(--text-faint, var(--text-muted)); }
.convo-ticks.ticks.read { color: var(--online, #16a34a); }
.msg-forwarded { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 0.72rem; font-style: italic; opacity: 0.75; }
.msg-forwarded .i { width: 13px; height: 13px; }

/* "3 unread messages" */
.unread-sep { display: flex; justify-content: center; margin: 12px 0 6px; }
.unread-sep span { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); font-size: 0.74rem; font-weight: 800; }

/* Inbox: pinned / muted marks and the ⋯ menu */
.convo-flag { width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; color: var(--text-muted); }
.convo-wrap .badge.muted { background: var(--text-muted); }
.convo-more {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.convo-more .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
    .convo-wrap .convo-more { opacity: 0; transition: opacity 120ms; }
    .convo-wrap:hover .convo-more, .convo-wrap:focus-within .convo-more { opacity: 1; }
}

/* ---------- Tool sheets (search, gallery, forward, who reacted) ---------- */
.ct-sheet {
    width: min(560px, 100%);
    max-width: 100%;
    max-height: min(88dvh, 820px);
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.ct-sheet[open] { display: flex; flex-direction: column; }
.ct-sheet::backdrop { background: rgba(9, 9, 11, 0.45); }
@media (min-width: 720px) { .ct-sheet { margin: auto; border-radius: 22px; } }
.ct-card { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: inherit; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ct-head { display: flex; align-items: center; gap: 8px; }
.ct-head strong { flex: 1; font-size: 1.05rem; }
.ct-q { margin: 0; }
.ct-q input { font-size: 16px; }
.ct-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ct-chips .cm-filter { flex: none; }
.ct-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ct-row label { display: grid; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); min-width: 0; }
.ct-row select, .ct-row input { min-height: 40px; width: 100%; min-width: 0; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
@media (max-width: 420px) { .ct-row { grid-template-columns: 1fr 1fr; } .ct-row label:first-child { grid-column: 1 / -1; } }
.ct-results, .ct-gal, .ct-targets, .ct-reacts { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; }
.ct-hit { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ct-hit-top { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; }
.ct-hit-top time { color: var(--text-muted); white-space: nowrap; }
.ct-hit-text { font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.ct-hit mark { background: color-mix(in srgb, #fbbf24 55%, transparent); color: inherit; border-radius: 3px; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ct-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--input); }
.ct-img { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-tile figcaption { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.ct-mini { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.ct-line .ct-mini, .ct-file .ct-mini, .ct-link .ct-mini { background: var(--input); color: var(--text); }
.ct-mini .i { width: 15px; height: 15px; }
.ct-line { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.ct-line-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); }
.ct-file, .ct-link { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
.ct-file > .i { width: 22px; height: 22px; color: var(--accent); }
.ct-file-text, .ct-link a { display: grid; min-width: 0; line-height: 1.3; color: inherit; text-decoration: none; }
.ct-file-text strong, .ct-link strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-file-text small, .ct-link small { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-link { grid-template-columns: auto minmax(0, 1fr) auto; }
.ct-link-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.ct-target { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; cursor: pointer; }
.ct-target[hidden] { display: none; }
.ct-target:has(input:checked) { background: var(--accent-soft); }
.ct-target input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ct-target span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.ct-target small { font-size: 0.76rem; color: var(--text-muted); }
.ct-group-emoji { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--input); font-size: 1.3rem; flex: none; }
.ct-foot { padding-top: 4px; }
.ct-react-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.ct-react-row span { flex: 1; font-weight: 600; }
.ct-react-row b { font-size: 1.2rem; }

/* ---------- Group chat: reactions, mentions ---------- */
.gc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gc-msg.mine .gc-reacts { justify-content: flex-end; }
.gc-reacts .react-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 0.85rem; cursor: pointer; }
.gc-reacts .react-chip.mine { border-color: var(--accent); background: var(--accent-soft); }
.gc-reacts .react-chip span { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.react-who { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.react-who .i { width: 14px; height: 14px; }
.mention { display: inline; padding: 0 3px; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.mention.me, .mention.everyone { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #b45309; }
.gc-msg.mine .mention { background: rgba(255, 255, 255, 0.2); color: inherit; }
.gc-msg.mentions-me:not(.mine) .gc-bubble { box-shadow: inset 3px 0 0 #f59e0b; }
.gc-mentions { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; margin: 0 0 6px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.gc-mentions[hidden] { display: none; }
.gc-mentions button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gc-mentions button:hover, .gc-mentions button:focus-visible { background: var(--input); }
.gc-mentions span:last-child { display: grid; line-height: 1.2; }
.gc-mentions small { font-size: 0.74rem; color: var(--text-muted); }
.mention-all { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 800; }
.ct-card .search.ct-q { order: 0; width: auto; }

/* ==========================================================================
   Phase 3: safety, moderation, calls history/hold/recording, status, security, group info
   ========================================================================== */
.suspended-bar { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #dc2626 12%, var(--surface)); border: 1px solid color-mix(in srgb, #dc2626 40%, var(--border)); font-size: 0.86rem; line-height: 1.4; }
.suspended-bar .i { flex: none; width: 18px; height: 18px; color: #dc2626; margin-top: 1px; }

/* Blocked chat */
.chat-blocked { display: flex; align-items: center; gap: 10px; margin: 8px 12px; padding: 10px 14px; border-radius: 14px; background: var(--input); font-size: 0.86rem; }
.chat-blocked .i { width: 18px; height: 18px; color: #dc2626; flex: none; }
.chat-blocked span { flex: 1; }
.composer.is-blocked { display: none; }

/* Report sheet */
.report-reasons { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.report-reason { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; }
.report-reason:has(input:checked) { background: var(--accent-soft); }
.report-reason input, .report-block input { width: 18px; height: 18px; accent-color: var(--accent); }
.report-block { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* Profile sheet: safety links, custom status */
.ps-safety { display: flex; gap: 16px; margin-top: 12px; }
.ps-safety .link-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 0.82rem; }
.ps-safety .i { width: 14px; height: 14px; }
.ps-custom { margin: 2px 0 0; font-size: 0.85rem; font-weight: 600; }
.ps-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--input); font-size: 0.8rem; color: var(--text-muted); }

/* Contact cards */
.contact-card { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); color: var(--text); }
.contact-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.contact-text small { font-size: 0.76rem; color: var(--text-muted); }
.msg.out .contact-card { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.msg.out .contact-text small { color: rgba(255, 255, 255, 0.8); }

/* AI sheet */
.ai-badge { padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-size: 0.72rem; font-weight: 800; }
.ct-ai-out { min-height: 60px; }
.ct-ai-text { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.ct-ai-chips { display: grid; gap: 8px; }
.ct-ai-chips .chip { justify-content: flex-start; min-height: 42px; padding: 8px 14px; text-align: left; white-space: normal; line-height: 1.35; }

/* Calls: held call, recording, history */
.call-held, .call-rec-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: 0.82rem; font-weight: 700; }
.call-held { background: rgba(251, 191, 36, 0.18); color: #fde68a; }
.call-held span { flex: 1; }
.call-held .chip { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: transparent; }
.call-held .chip.danger { background: #b91c1c; }
.call-rec-banner { background: rgba(239, 68, 68, 0.2); color: #fecaca; }
.call-rec-banner .i, .call-held .i { width: 16px; height: 16px; flex: none; }
.call-rec-banner .i { color: #ef4444; animation: rec-blink 1.4s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.35; } }
.incoming-waiting { margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(251, 191, 36, 0.2); color: #fde68a; opacity: 1 !important; }
.round-btn.hold { background: #f59e0b; }
.call-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.call-row.missed .call-row-text strong, .call-row.missed .call-row-text small { color: #dc2626; }
.call-row-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.call-row-text small { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.call-row-text small .dir { width: 12px; height: 12px; }
.call-row-text time { font-size: 0.72rem; color: var(--text-faint, var(--text-muted)); }
.call-row-group { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--input); color: var(--text-muted); }
.call-row-group.rec { color: #ef4444; }
.call-row .convo-call.danger { color: #dc2626; }
.call-rec-label { padding: 0 12px; }
.rec-player { display: block; width: calc(100% - 24px); margin: 6px 12px 10px; border-radius: 12px; }
video.rec-player { max-height: 240px; background: #000; }

/* Settings: status, lists, devices */
.st-status { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.st-status .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.st-row.st-col { flex-wrap: wrap; }
.st-list { flex-basis: 100%; display: grid; gap: 6px; margin: 8px 0 4px 44px; }
.st-person { display: flex; align-items: center; gap: 10px; }
.st-person > span:not(.st-dev-ic) { flex: 1; min-width: 0; display: grid; line-height: 1.3; font-weight: 600; }
.st-person small { font-size: 0.76rem; font-weight: 500; color: var(--text-muted); }
.st-dev-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--input); color: var(--text-muted); }
.st-dev-ic .i { width: 16px; height: 16px; }
.st-this { margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; }
.st-row.st-col > .st-btn.danger { margin: 4px 0 0 44px; }
.st-two { display: inline-flex; gap: 6px; }
.mfa-qr { display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #fff; }
.mfa-qr img { width: 190px; height: 190px; }
.mfa-key { padding: 2px 6px; border-radius: 6px; background: var(--input); font-size: 0.82rem; word-break: break-all; }
.bk-msg { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.bk-msg small { font-size: 0.72rem; color: var(--text-muted); }
.bk-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Group info */
.gc-title[role="button"] { cursor: pointer; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .gc-title[role="button"]:hover strong { text-decoration: underline; } }
.gi { gap: 8px; }
.gi-top { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 4px 0 6px; }
.gi-emoji { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--input); font-size: 2rem; }
.gi-top h3 { margin: 4px 0 0; font-size: 1.2rem; }
.gi-desc { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.gi-quick { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gi-list { display: grid; gap: 2px; }
.gi-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gi-person:hover { background: var(--input); }
.gi-person > span:not(.gc-role) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.gi-person small { font-size: 0.76rem; color: var(--text-muted); }
.gi-pinned { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gi-pinned .i { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent); }
.gi-report { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.gi-report p { margin: 0; font-size: 0.86rem; }
.gi-report small { font-size: 0.74rem; color: var(--text-muted); text-transform: capitalize; }
.gi-report-actions { display: flex; gap: 6px; }

/* Moderation dashboard */
.adm { display: grid; gap: 16px; padding-bottom: 30px; }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.adm-head h2 { margin: 0; }
.adm-head p { margin: 2px 0 0; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.adm-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.adm-stat strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.adm-stat span { font-size: 0.78rem; color: var(--text-muted); }
.adm-body { display: grid; gap: 10px; }
.adm-report { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.adm-report header { display: flex; align-items: center; gap: 8px; }
.adm-report header strong { flex: 1; }
.adm-report time { font-size: 0.76rem; color: var(--text-muted); }
.adm-kind { padding: 2px 8px; border-radius: 999px; background: var(--input); font-size: 0.72rem; font-weight: 700; }
.adm-meta { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.adm-report blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong, var(--border)); background: var(--input); border-radius: 0 10px 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; }
.adm-details { margin: 0; font-size: 0.86rem; font-style: italic; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-actions .chip.danger { color: #dc2626; }
.adm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.adm-row > span { flex: 1; display: grid; }
.adm-row small { font-size: 0.76rem; color: var(--text-muted); }
.adm-audit { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.adm-audit li { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.adm-audit time { color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 520px) { .adm-audit li { grid-template-columns: 1fr; gap: 2px; } }

/* Inbox rows: the ⋯ menu sits beside the call button; call history buttons are plain inline buttons */
.convo-wrap > .convo { padding-right: 96px; }
.convo-wrap > .convo-more { position: absolute; top: 50%; right: 52px; margin-top: -18px; }
.call-row .convo-call { position: static; margin: 0; flex: none; opacity: 1; }

/* ==========================================================================
   Social core (phase A): reactions, profile pages, feed tabs, people you may know
   ========================================================================== */

/* Buttons that are really just a name or a face */
.name-link, .post-av, .row-av, .c-av, .rx-who, .rx-name, .pymk-open, .pf-stat, .react-sum {
    padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer;
}
.name-link { font-weight: 700; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .name-link:hover, [data-profile][role="button"]:hover strong { text-decoration: underline; text-underline-offset: 2px; } }
.post-av, .row-av, .c-av { display: inline-grid; flex: none; border-radius: 50%; }
[data-profile][role="button"] { cursor: pointer; }
.post-head .i.aud { width: 12px; height: 12px; vertical-align: -1px; opacity: 0.75; }

/* ---------- Like / reactions ---------- */
.post-actions .like-btn { width: auto; gap: 6px; padding: 0 10px 0 8px; }
.post-actions .like-btn .act-label { font-size: 0.86rem; font-weight: 700; }
.post-actions .like-btn.reacted { color: var(--accent); }
.post-actions .like-btn.reacted[aria-pressed="true"] { color: var(--accent); }
.like-emoji { font-size: 1.2rem; line-height: 1; }
.like-btn.pop .like-emoji, .like-btn.pop .i { animation: like-pop 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes like-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.like-btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }

.react-sum-row:empty { display: none; }
.react-sum-row { padding: 0 14px 6px; }
.pv-stats .react-sum-row, .pv-stats { padding-left: 0; }
.react-sum { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; border-radius: 999px; padding-right: 6px; font-size: 0.86rem; color: var(--text-muted); }
.react-sum-emojis { display: inline-flex; }
.react-sum-emojis i {
    display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%;
    background: var(--surface); box-shadow: 0 0 0 2px var(--surface); font-style: normal; font-size: 0.8rem;
}
.react-sum-emojis i:first-child { margin-left: 0; }
@media (hover: hover) and (pointer: fine) { .react-sum:hover .react-sum-text { color: var(--text); text-decoration: underline; } }

.emoji-pop.labelled { border-radius: 22px; gap: 0; padding: 6px 4px; }
.emoji-pop.labelled button { width: 52px; height: 58px; font-size: 1.55rem; gap: 0; align-content: center; }
.emoji-pop.labelled button small { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); line-height: 1; margin-top: 2px; }
.emoji-pop.labelled button.on { background: var(--accent-soft); }
.emoji-pop.labelled button.on small { color: var(--accent); }

/* ---------- Sheets: who reacted, followers, following, edit profile ---------- */
.sheet-dialog {
    width: min(460px, 100%); max-width: 100%; max-height: min(86dvh, 720px);
    margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sheet-dialog[open] { animation: ps-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.sheet-dialog::backdrop { background: rgba(9, 9, 11, 0.5); }
@media (min-width: 720px) { .sheet-dialog { margin: auto; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .sheet-dialog[open] { animation: none; } }
.rx-card { display: flex; flex-direction: column; max-height: inherit; padding-bottom: env(safe-area-inset-bottom, 0px); }
.rx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 8px 20px; }
.rx-head h2 { margin: 0; font-size: 1.1rem; }
.rx-body { display: flex; flex-direction: column; min-height: 120px; overflow: hidden; }
.rx-tabs { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.rx-tabs button {
    flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.86rem; cursor: pointer;
}
.rx-tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.rx-search { margin: 0 16px 8px; }
.rx-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px; min-height: 80px; }
.rx-list .lv-spinner { margin: 24px auto; display: block; }
.rx-list > .muted { padding: 12px; }
.rx-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.rx-who { position: relative; border-radius: 50%; }
.rx-emoji { position: absolute; right: -4px; bottom: -4px; font-size: 0.95rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.rx-name { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.rx-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-name small { color: var(--text-muted); font-size: 0.8rem; }
@media (hover: hover) and (pointer: fine) { .rx-row:hover { background: var(--input); } }

/* ---------- Feed ---------- */
.feed-tabs { overflow-x: auto; scrollbar-width: none; }
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tab { flex: 1 0 auto; padding: 0 10px; white-space: nowrap; }
.pc-audience {
    display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; margin-left: auto;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
    font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.pc-audience .i { width: 15px; height: 15px; }
.pc-audience .caret { width: 12px; height: 12px; opacity: 0.7; }
.profile-card .link-btn { margin-top: 8px; }
.suggest-row .chip.small, .suggest-row .follow-btn { min-height: 32px; padding: 0 10px; font-size: 0.8rem; }

.pymk-strip { margin: 4px 0 16px; padding: 14px 0 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pymk-strip header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 10px; }
.pymk-strip h3 { margin: 0; font-size: 1rem; }
.pymk-row { display: flex; gap: 10px; padding: 0 16px 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pymk-row::-webkit-scrollbar { display: none; }
.pymk-card {
    flex: none; width: 148px; display: grid; justify-items: center; gap: 10px; padding: 14px 10px 12px;
    border: 1px solid var(--border); border-radius: 18px; scroll-snap-align: start; text-align: center;
}
.pymk-open { display: grid; justify-items: center; gap: 4px; width: 100%; }
.pymk-open strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; margin-top: 4px; }
.pymk-open small { color: var(--text-muted); font-size: 0.76rem; line-height: 1.3; min-height: 2.6em; }
.pymk-card .chip { width: 100%; justify-content: center; }
@media (min-width: 1100px) { .social-main .pymk-strip { display: none; } }

.person-why { display: block; color: var(--accent); font-size: 0.78rem; font-weight: 600; }

/* ---------- Profile page ---------- */
.pf { max-width: 720px; margin: 0 auto; padding-bottom: 32px; }
.pf-head { position: relative; margin-bottom: 8px; padding: 0 20px 18px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); overflow: hidden; }
.pf-cover { height: 118px; margin: 0 -20px; background: linear-gradient(135deg, var(--card, var(--accent-soft)), color-mix(in srgb, var(--deep, var(--accent)) 55%, var(--card, var(--accent-soft)))); }
.pf-id { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: -46px; }
.pf-photo { position: relative; flex: none; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface); background: var(--surface); }
.pf-photo .avatar.xl { width: 104px; height: 104px; font-size: 2.2rem; }
.pf-photo.online::after { content: ''; position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px var(--surface); }
.pf-photo-edit {
    position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 34px; height: 34px;
    border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.pf-photo-edit .i { width: 16px; height: 16px; }
.pf-names { flex: 1 1 200px; min-width: 0; padding-bottom: 4px; }
.pf-names h1 { margin: 0; font-size: clamp(1.35rem, 3.5vw, 1.7rem); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pf-handle { margin: 2px 0 0; color: var(--text-muted); font-size: 0.9rem; }
.pf-status.on { color: #16a34a; font-weight: 700; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
    font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform 100ms ease-out, background-color 150ms;
}
.pf-btn .i { width: 17px; height: 17px; }
.pf-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pf-btn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.pf-btn.icon { width: 42px; padding: 0; }
.pf-btn:active { transform: scale(0.97); }
.pf-btn:disabled { opacity: 0.6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .pf-btn:not(.primary):not(:disabled):hover { background: var(--input); } }
.pf-custom { margin: 12px 0 0; font-weight: 700; font-size: 0.9rem; }
.pf-bio { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; }
.pf-add-bio { margin-top: 10px; }
.pf-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.86rem; }
.pf-facts li { display: inline-flex; align-items: center; gap: 6px; }
.pf-facts .i { width: 15px; height: 15px; flex: none; }
.pf-interests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-interest {
    min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
    font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.pf-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-stat { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; text-align: center; }
.pf-stat b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: 0.74rem; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { button.pf-stat:hover { background: var(--input); } }
.pf-private { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; }
.pf-private .i { width: 14px; height: 14px; }
.pf .ps-note { margin-top: 12px; }
.pf-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 0 0 12px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pf-tab {
    flex: 1; min-height: 40px; border: 0; border-radius: 11px; background: none; color: var(--text-muted);
    font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.pf-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pf-body .empty.small { padding: 36px 16px; }
.pf-about { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.pf-about-row { display: flex; gap: 12px; padding: 10px; }
.pf-about-row .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--text-muted); }
.pf-about-row span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pf-about-row small { color: var(--text-muted); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pf-about > .muted { padding: 4px 10px 8px; margin: 0; }
.pf-activity { display: grid; gap: 12px; }
.pf-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-totals div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.pf-totals b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pf-totals span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.3; }
.pf-feed { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.pf-act { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.pf-act-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--input); color: var(--text-muted); }
.pf-act-ic .i { width: 17px; height: 17px; }
.pf-act-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 0.9rem; line-height: 1.4; overflow-wrap: anywhere; }
.pf-act-text q { color: var(--text-muted); }
.pf-act-text time { font-size: 0.76rem; color: var(--text-faint); }
.pf-skel .pf-id { align-items: center; }
.pf-skel .pf-id { display: grid; gap: 10px; padding-bottom: 20px; }
.sk-av.xl { width: 104px; height: 104px; }
@media (max-width: 560px) {
    .pf-head { border-radius: 0 0 24px 24px; border-width: 0 0 1px; margin: 0 -16px 8px; padding: 0 16px 16px; }
    .pf-cover { height: 96px; margin: 0 -16px; }
    .pf-photo .avatar.xl { width: 88px; height: 88px; font-size: 1.9rem; }
    .pf-id { margin-top: -40px; }
    .pf-actions { width: 100%; }
    .pf-actions .pf-btn:not(.icon) { flex: 1; }
    .pf-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pf-stat b { font-size: 1rem; }
    .pf-stat span { font-size: 0.68rem; }
    .pf-totals { grid-template-columns: repeat(2, 1fr); }
}

/* Edit profile */
.pf-edit-form { gap: 12px; padding: 0 20px 20px; overflow-y: auto; }
.pf-edit-form .rx-head { padding: 14px 0 0; }
.pf-edit-photo { display: flex; align-items: center; gap: 14px; }
.pf-edit-photo .avatar.xl { width: 72px; height: 72px; }
.pf-edit-form .field { display: grid; gap: 6px; }
.pf-edit-form .field > span { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.88rem; }
.pf-edit-form input, .pf-edit-form textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--input); color: var(--text); font: inherit; font-size: 16px;
}
.pf-edit-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.pf-edit-form input:focus, .pf-edit-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pf-edit-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ==========================================================================
   Phase B: scheduled posts, drafts, notification centre
   ========================================================================== */

/* Schedule button in the feed composer */
.pc-schedule {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: auto;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.pc-schedule .i { width: 18px; height: 18px; }
.pc-schedule + .pc-post { margin-left: 6px; }
@media (hover: hover) and (pointer: fine) { .pc-schedule:hover { color: var(--accent); border-color: var(--accent); } }
.social-nav-item .count-dot[hidden] { display: none; }

/* The scheduler */
.sched-dialog { width: min(540px, 100%); }
.sched-form { gap: 0; }
.sched-scroll { display: grid; gap: 14px; padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
.sched-form .field { display: grid; gap: 6px; }
.sched-form .field > span { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.88rem; }
.sched-form input:not([type="checkbox"]), .sched-form textarea, .sched-form select {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--input); color: var(--text); font: inherit; font-size: 16px;
}
.sched-form textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.sched-form input:focus, .sched-form textarea:focus, .sched-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sched-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--input); }
.sched-seg.small { grid-template-columns: repeat(2, 1fr); }
.sched-seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border: 0; border-radius: 10px;
    background: none; color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.sched-seg button .i { width: 16px; height: 16px; }
.sched-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sched-seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.sched-photos { display: grid; gap: 8px; justify-items: start; }
.sched-photos .pc-photos:empty { display: none; }
.sched-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.sched-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.sched-check span { display: grid; gap: 2px; }
.sched-check small { color: var(--text-muted); font-size: 0.8rem; }
.sched-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-quick .chip { min-height: 34px; }
.sched-when-text { font-size: 0.8rem; }
.sched-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }

/* The Scheduled page */
.sched-page { max-width: 720px; margin: 0 auto; padding-bottom: 32px; display: grid; gap: 12px; }
.sched-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sched-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -0.01em; }
.sched-head p { margin: 2px 0 0; }
.sched-head .primary-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sched-head .primary-btn .i { width: 16px; height: 16px; }
.sched-tabs { margin: 0; }
.sched-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; }
.sched-list { display: grid; gap: 10px; }
.sched-row { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.sched-row.s-failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.sched-row.s-cancelled { opacity: 0.75; }
.sched-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sched-where { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }
.sched-where .i { width: 14px; height: 14px; flex: none; }
.sched-main h3 { margin: 2px 0 0; font-size: 1rem; }
.sched-body { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sched-when { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 0.84rem; font-weight: 700; color: var(--accent); }
.s-published .sched-when { color: #16a34a; }
.s-failed .sched-when { color: var(--danger); }
.s-draft .sched-when, .s-cancelled .sched-when { color: var(--text-muted); }
.sched-when .i { width: 15px; height: 15px; }
.sched-error { margin: 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: 0.84rem; }
.sched-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sched-actions .chip { min-height: 34px; }
.chip.danger { color: var(--danger); }
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sched-thumb { flex: none; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--input); }
@media (max-width: 480px) { .sched-thumb { width: 56px; height: 56px; } .sched-row { padding: 12px; } }

/* Notification centre */
.notif-filters { display: flex; gap: 6px; padding: 4px 14px 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.notif-filters::-webkit-scrollbar { display: none; }
.notif-filters:empty { display: none; }
.notif-filter {
    flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted);
    font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.notif-filter[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.nf-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 0.68rem; }
.notif-avatar.stacked { position: relative; }
.notif-avatar.stacked > .avatar.sm { position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; font-size: 0.55rem; box-shadow: 0 0 0 2px var(--surface); }
.st-sub { margin: 14px 0 2px; padding: 0 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.sched-tabs { overflow-x: auto; scrollbar-width: none; }
.sched-tabs .pf-tab { flex: 1 0 auto; padding: 0 10px; white-space: nowrap; }

/* ==========================================================================
   Phone keyboard: everything stays inside the part of the screen you can see.
   script.js keeps --vvh (visible height), --vvtop (how far iOS scrolled the page) and --kb (keyboard height)
   up to date and sets html.kb-open while the keyboard is up.
   ========================================================================== */
@media (max-width: 760px) {
    /* Normally the app simply fills the screen; only while the keyboard is up does it follow the visible area
       (following it all the time made the page nudge as Safari's bars moved during scrolling) */
    .app { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; }
    html.kb-open .app { top: var(--vvtop, 0px); height: var(--vvh, 100dvh); }
    .main-col { height: 100%; }
    body.chat-open .inbox .chat-pane { top: 0; height: 100dvh; }
    html.kb-open body.chat-open .inbox .chat-pane { top: var(--vvtop, 0px); height: var(--vvh, 100dvh); }
    .companion { top: var(--vvtop, 0px); }
    html.kb-open .tabbar, html.kb-open .fab { display: none !important; }
    html.kb-open .main-col { padding-bottom: 0; }
}
/* Open sheets and dialogs sit above the keyboard: bottom sheets rest on it, centred ones centre in what's left */
html.kb-open dialog:modal {
    top: var(--vvtop, 0px);
    bottom: var(--kb, 0px);
    max-height: calc(var(--vvh, 100dvh) - 8px);
}
html.kb-open :is(.story-viewer, .transcribe, .reader, .post-view, .lib-compose, .editor):modal {
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
}

/* ==========================================================================
   Phase C: Play & learn — trivia, daily word / thought / poll, leaderboards
   ========================================================================== */
/* Feed "today" card */
.pl-feed-card { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border: 1px solid var(--border); border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); }
.pl-feed-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.pl-feed-ic .i { width: 22px; height: 22px; }
.pl-feed-text { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.pl-feed-text small { color: var(--text-muted); font-size: 0.8rem; }
.pf-sub { margin: 10px 10px 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* The quiz */
.quiz { width: min(560px, 100%); max-width: 100%; max-height: min(92dvh, 820px); margin: auto; padding: 0; border: 0; border-radius: 26px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; }
.quiz[open] { animation: ps-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.quiz::backdrop { background: rgba(9, 9, 11, 0.6); }
@media (max-width: 600px) { .quiz { width: 100%; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .quiz[open] { animation: none; } }
.quiz-card { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.quiz-head { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; }
.quiz-title { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.quiz-title small { color: var(--text-muted); font-size: 0.78rem; }
.quiz-score { padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.quiz-progress { height: 4px; margin: 0 16px; border-radius: 999px; background: var(--input); overflow: hidden; }
.quiz-progress i { display: block; height: 100%; background: var(--accent); transition: width 300ms ease-out; }
.quiz-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.quiz-timer { justify-self: center; }
.quiz-ring {
    --left: 1;
    display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
    background: conic-gradient(var(--accent) calc(var(--left) * 360deg), var(--input) 0);
}
.quiz-ring b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.quiz-ring.low { background: conic-gradient(#ef4444 calc(var(--left) * 360deg), var(--input) 0); }
.quiz-cat { margin: 0; text-align: center; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; }
.quiz-q { margin: 0; text-align: center; font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.35; letter-spacing: -0.01em; }
.quiz-choices { display: grid; gap: 8px; }
.quiz-choice {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border: 2px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
    transition: border-color 150ms, background-color 150ms, transform 100ms ease-out;
}
.quiz-choice:active:not(:disabled) { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .quiz-choice:not(:disabled):not(.static):hover { border-color: var(--accent); } }
.quiz-letter { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--input); font-weight: 800; font-size: 0.85rem; }
.quiz-choice.picked { border-color: var(--accent); }
.quiz-choice.right { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--surface)); }
.quiz-choice.right .quiz-letter { background: #16a34a; color: #fff; }
.quiz-choice.wrong { border-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--surface)); }
.quiz-choice.wrong .quiz-letter { background: #dc2626; color: #fff; }
.quiz-choice:disabled { cursor: default; }
.quiz-choice.static[style*="--pct"]::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: color-mix(in srgb, var(--text) 7%, transparent); z-index: -1; }
.quiz-pct { margin-left: auto; font-variant-numeric: tabular-nums; }
.quiz-feedback { display: grid; gap: 10px; }
.quiz-feedback:empty { display: none; }
.quiz-verdict { margin: 0; text-align: center; font-weight: 800; font-size: 1.05rem; }
.quiz-verdict.ok { color: #16a34a; }
.quiz-verdict.no { color: #dc2626; }
.quiz-expl { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--input); font-size: 0.92rem; line-height: 1.5; }
.quiz-next { justify-self: stretch; min-height: 50px; }
.quiz-end { justify-items: center; text-align: center; }
.quiz-cheer { margin: 6px 0 0; font-size: 1.2rem; font-weight: 800; }
.quiz-big { position: relative; display: grid; justify-items: center; }
.quiz-big b { font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.quiz-big span { color: var(--text-muted); font-weight: 700; }
.quiz-points { margin: 0; font-weight: 700; }
.quiz-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.quiz-dot { width: 34px; height: 34px; border: 0; border-radius: 10px; background: var(--input); color: var(--text); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; }
.quiz-dot.ok { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.quiz-dot.no { background: color-mix(in srgb, #dc2626 14%, transparent); color: #dc2626; }
.quiz-actions { display: grid; gap: 8px; width: 100%; }
.quiz-actions .primary-btn, .quiz-actions .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.quiz-actions .i { width: 17px; height: 17px; }
.quiz-confetti { position: absolute; left: 50%; top: 40%; width: 8px; height: 12px; border-radius: 2px; pointer-events: none;
    animation: quiz-burst 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes quiz-burst { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* ==========================================================================
   Play & learn, v2: a daily games page. The date is the headline; each game has its own colour and a drawn
   glyph; the word and the thought are set like a dictionary entry and a pull quote (Fraunces).
   ========================================================================== */
:root {
    --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --gold: #b7791f; --gold-soft: #fbefd5; --silver: #6b7280; --silver-soft: #eceef2; --bronze: #a1552b; --bronze-soft: #f6e3d7;
}
.g-daily  { --g: #4338ca; --g-soft: #e7e8ff; }
.g-qotd   { --g: #7c3aed; --g-soft: #f0e8ff; }
.g-bible  { --g: #a4570b; --g-soft: #fbeedb; }
.g-brain  { --g: #0f766e; --g-soft: #dcf2ee; }
.g-weekly { --g: #be123c; --g-soft: #fde4ea; }
:root[data-theme="dark"] .g-tile, :root[data-theme="dark"] .pl-ex-row { --g-soft: color-mix(in srgb, var(--g) 26%, var(--surface)); }
:root[data-theme="dark"] .g-daily { --g: #a5b4fc; }
:root[data-theme="dark"] .g-qotd { --g: #c4b5fd; }
:root[data-theme="dark"] .g-bible { --g: #f2c27b; }
:root[data-theme="dark"] .g-brain { --g: #5eead4; }
:root[data-theme="dark"] .g-weekly { --g: #fda4af; }
:root[data-theme="dark"] { --gold: #e3b453; --gold-soft: #3a2f18; --silver: #b8bec9; --silver-soft: #2b2f37; --bronze: #df9468; --bronze-soft: #3a2519; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .g-tile { --g-soft: color-mix(in srgb, var(--g) 26%, var(--surface)); }
    :root:not([data-theme="light"]) .g-daily { --g: #a5b4fc; }
    :root:not([data-theme="light"]) .g-qotd { --g: #c4b5fd; }
    :root:not([data-theme="light"]) .g-bible { --g: #f2c27b; }
    :root:not([data-theme="light"]) .g-brain { --g: #5eead4; }
    :root:not([data-theme="light"]) .g-weekly { --g: #fda4af; }
    :root:not([data-theme="light"]) { --gold: #e3b453; --gold-soft: #3a2f18; --silver: #b8bec9; --silver-soft: #2b2f37; --bronze: #df9468; --bronze-soft: #3a2519; }
}

.pl { max-width: 960px; margin: 0 auto; padding-bottom: 48px; display: grid; gap: 28px; font-variant-numeric: tabular-nums; }
.pl ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* Masthead */
.pl-mast { display: grid; gap: 6px; padding: 8px 2px 0; }
.pl-date { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 5.4vw, 3.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; font-optical-sizing: auto; text-wrap: balance; }
.pl-lede { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--text); max-width: 60ch; }
.pl-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
.pl-streak { display: inline-flex; align-items: center; gap: 5px; color: #c2410c; }
.pl-streak .i { width: 17px; height: 17px; }
:root[data-theme="dark"] .pl-streak { color: #fb923c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pl-streak { color: #fb923c; } }

/* Game tiles */
.g-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 12px; }
.g-tile {
    position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    padding: 0; border: 1px solid color-mix(in srgb, var(--g) 18%, var(--border)); border-radius: 16px;
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
    transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease-out, border-color 180ms;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.g-tile:active { transform: scale(0.985); }
.g-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--g) 60%, transparent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .g-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--g) 60%, transparent); border-color: color-mix(in srgb, var(--g) 45%, var(--border)); }
}
.g-field { display: grid; place-items: center; min-height: 86px; background: var(--g-soft); color: var(--g); }
.g-glyph { width: 38px; height: 38px; }
.g-text { display: grid; align-content: start; gap: 4px; padding: 14px 16px 16px; }
.g-text strong { font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; }
.g-text small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.g-go { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 8px; color: var(--g); font-weight: 800; font-size: 0.86rem; }
.g-go .i { width: 15px; height: 15px; transition: transform 180ms ease-out; }
.g-tile:hover .g-go:not(.ok) .i { transform: translateX(3px); }
.g-go.ok { color: #15803d; }
:root[data-theme="dark"] .g-go.ok { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-go.ok { color: #4ade80; } }
.g-tile.done .g-field { filter: saturate(0.55); }

/* The lead tile: art on the left, words on the right */
.g-tile.lead { grid-column: span 2; grid-row: span 2; grid-template-rows: none; grid-template-columns: 1fr; }
.g-tile.lead .g-field { min-height: 190px; }
.g-tile.lead .g-text { padding: 18px 22px 22px; gap: 6px; }
.g-tile.lead .g-text strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.g-tile.lead .g-text small { font-size: 0.95rem; max-width: 34ch; }
.g-tile.lead .g-go { margin-top: 12px; padding: 10px 18px; border-radius: 999px; background: var(--g); color: #fff; font-size: 0.92rem; }
:root[data-theme="dark"] .g-tile.lead .g-go:not(.ok) { color: #14132b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-tile.lead .g-go:not(.ok) { color: #14132b; } }
.g-tile.lead .g-go.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.g-art { width: min(220px, 70%); height: auto; overflow: visible; }
.g-art rect { stroke: var(--g); stroke-width: 2.5; transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2); transform-box: fill-box; transform-origin: 50% 100%; }
.g-art-back { fill: color-mix(in srgb, var(--g) 18%, var(--g-soft)); }
.g-art-mid { fill: color-mix(in srgb, var(--g) 30%, var(--g-soft)); }
.g-art-front { fill: var(--surface); }
.g-art-mark { fill: none; stroke: var(--g); stroke-width: 7; stroke-linecap: round; }
.g-art-dot { fill: var(--g); }
@media (hover: hover) and (pointer: fine) {
    .g-tile.lead:hover .g-art-back { transform: rotate(-16deg) translateX(-8px); }
    .g-tile.lead:hover .g-art-mid { transform: rotate(10deg) translateX(8px); }
}
.g-tile.lead:active .g-art-back { transform: rotate(-14deg) translateX(-6px); }
@media (prefers-reduced-motion: reduce) { .g-art rect, .g-tile, .g-go .i { transition: none; } }

@media (max-width: 760px) {
    .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
    .g-tile.lead { grid-row: auto; grid-template-columns: 42% 1fr; }
    .g-tile.lead .g-field { min-height: 0; }
    .g-tile.lead .g-text { padding: 16px; }
    .g-tile.lead .g-text strong { font-size: 1.35rem; }
    .g-tile.lead .g-text small { font-size: 0.84rem; }
    .g-tile.lead .g-go { margin-top: 8px; padding: 8px 14px; }
    .g-art { width: 86%; }
    .g-field { min-height: 70px; }
    .g-glyph { width: 32px; height: 32px; }
    .g-text { padding: 12px 14px 14px; }
}

/* Today's reading: word, thought, poll */
.pl-reading { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; align-items: stretch; }
.pl-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); min-width: 0; }
.pl-panel-h { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0; }
.pl-panel-h .i { width: 16px; height: 16px; color: var(--accent); }
.pl-panel-foot { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.pl-panel-foot .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.pl-panel-foot .chip .i { width: 15px; height: 15px; }
.pl-word-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 0; }
.pl-word dfn { font-family: var(--serif); font-style: normal; font-size: 2.3rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pl-pos { font-family: var(--serif); font-style: italic; color: var(--text-muted); font-size: 1rem; }
.pl-def { margin: 0; font-size: 1rem; line-height: 1.5; }
.pl-example { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--text-muted); }
.pl-example::before { content: '“'; } .pl-example::after { content: '”'; }
.pl-thought blockquote { position: relative; margin: 0; padding-top: 26px; }
.pl-thought blockquote::before { content: '“'; position: absolute; top: -14px; left: -4px; font-family: var(--serif); font-size: 4.2rem; line-height: 1; color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pl-thought blockquote p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.45; letter-spacing: -0.005em; text-wrap: pretty; }
.pl-thought blockquote footer { margin-top: 10px; color: var(--text-muted); font-size: 0.86rem; font-weight: 600; }
.pl-thought blockquote footer::before { content: '— '; }
.pl-poll-q { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.pl-poll-opts { display: grid; gap: 6px; }
.pl-opt {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 0.92rem;
    text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; touch-action: manipulation;
}
.pl-opt span { display: inline-flex; align-items: center; gap: 6px; }
.pl-opt .i { width: 15px; height: 15px; color: var(--accent); }
.pl-opt.voted::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--input); z-index: -1; transition: width 500ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.pl-opt.top::before { background: color-mix(in srgb, var(--accent) 16%, var(--input)); }
.pl-opt.mine { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.pl-opt b { font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .pl-opt:hover { border-color: var(--accent); } }
.pl-note { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
@media (max-width: 900px) { .pl-reading { grid-template-columns: 1fr 1fr; } .pl-poll { grid-column: span 2; } }
@media (max-width: 560px) { .pl-reading { grid-template-columns: 1fr; } .pl-poll { grid-column: auto; } .pl-panel { padding: 18px; } }

/* Sections */
.pl-section { display: grid; gap: 12px; }
.pl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-sec-head h3 { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; }

/* Practice topics */
.pl-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.pl-topic {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color 150ms, transform 120ms ease-out; touch-action: manipulation;
}
.pl-topic:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .pl-topic:hover { border-color: var(--accent); } .pl-topic:hover .pl-topic-ic { background: var(--accent); color: var(--on-accent); } }
.pl-topic-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); transition: background-color 150ms, color 150ms; }
.pl-topic-ic .i { width: 21px; height: 21px; }
.pl-topic-text { display: grid; gap: 1px; min-width: 0; }
.pl-topic-text strong { font-size: 0.94rem; }
.pl-topic-text small { color: var(--text-muted); font-size: 0.76rem; }
.pl-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--input); }
.pl-meter::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--accent); }

/* Leaderboard */
.pl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--input); overflow-x: auto; scrollbar-width: none; max-width: 100%; justify-self: start; }
.pl-seg::-webkit-scrollbar { display: none; }
.pl-seg button { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer; white-space: nowrap; }
.pl-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.12); }
.pl-empty { margin: 0; padding: 18px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 16px; color: var(--text-muted); text-align: center; }
.pl-board-skel { display: grid; gap: 8px; }
.pl-board-skel i { display: block; height: 52px; border-radius: 14px; background: var(--input); animation: shimmer 1.4s ease-in-out infinite; }

/* Explore: the Play & learn band */
.pl-ex-row { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: none; }
.pl-ex-row::-webkit-scrollbar { display: none; }
.pl-ex-row > * { flex: none; width: 176px; scroll-snap-align: start; }
.pl-ex-row .g-tile.lead { grid-column: auto; grid-row: auto; width: 320px; grid-template-columns: 40% 1fr; }
.pl-ex-row .g-tile.lead .g-field { min-height: 0; }
.pl-ex-row .g-tile.lead .g-text { padding: 16px; }
.pl-ex-row .g-tile.lead .g-text strong { font-size: 1.3rem; }
.pl-ex-row .g-tile.lead .g-text small { font-size: 0.82rem; }
.pl-ex-row .g-tile.lead .g-go { padding: 8px 14px; margin-top: 8px; }
.pl-ex-row .g-art { width: 88%; }
.pl-ex-word {
    display: grid; align-content: start; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.pl-ex-word dfn { font-family: var(--serif); font-style: normal; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.pl-ex-word small { color: var(--text-muted); font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .pl-ex-word:hover { border-color: var(--accent); } }

/* Quiz touches that follow the new look */
.quiz-title strong { display: inline-flex; align-items: center; gap: 7px; }
.quiz-title strong .i { width: 18px; height: 18px; color: var(--accent); }
.quiz-cat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.quiz-cat .i { width: 15px; height: 15px; }
.quiz-q { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
.quiz-big b { font-family: var(--serif); font-weight: 600; }

body[data-view="play"] .fab { display: none !important; }
.pl-ex-row > .pl-ex-word { width: 220px; }

/* Sticky bars sit right under the top bar (script.js measures its real height into --topbar-h) */
.feed-bar { top: var(--topbar-h, 92px); }
.pf-tabs { top: var(--topbar-h, 0px); }
@media (max-width: 760px) {
    .feed-bar { top: var(--topbar-h, 62px); }
    .new-posts { top: calc(var(--topbar-h, 62px) + 58px); }
}
/* Sideways rows: a swipe scrolls the row and stops at its ends instead of moving the page */
:is(.nh-pinned, .pl-ex-row, .pymk-row, .ex-row, .feed-tabs, .rx-tabs, .notif-filters, .pl-seg, .sched-tabs, .ex-tabs, .cm-filters, .stories-bar, .live-strip, .nh-templates, .nh-tags, .folder-chips, .trend-tags, .mk-row) {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}
.nh-pinned { scroll-snap-type: x mandatory; scroll-padding-inline: 2px; }

/* Phones: iOS zooms the whole page into any text box under 16px (the "feed zooms in when I tap New post"
   bug). Every place you type is at least 16px on touch screens; pinch-zoom stays available. */
@media (pointer: coarse), (max-width: 760px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea, select, [contenteditable="true"] {
        font-size: max(16px, 1em) !important;
    }
}

/* iPhone: sticky bars with a blur inside a scrolling column jitter unless they get their own layer */
.feed-bar, .pf-tabs { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }

/* ==========================================================================
   Phase D: games, level, badges, more leaderboards
   ========================================================================== */
/* Level bar in the masthead */
.pl-level { display: flex; align-items: center; gap: 12px; margin-top: 6px; max-width: 520px; }
.pl-level-n { font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }
.pl-level-n b { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--text); }
.pl-level-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--input); overflow: hidden; }
.pl-level-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.pl-level-xp { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; font-weight: 600; }

/* Game tiles */
.gm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gm-tile {
    display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
    transition: transform 150ms cubic-bezier(0.2, 0.9, 0.3, 1), border-color 150ms;
}
.gm-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .gm-tile:hover { border-color: var(--accent); transform: translateY(-1px); } }
.gm-t-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.gm-t-ic .i { width: 24px; height: 24px; }
.gm-t-five .gm-t-ic { background: #dcf2e3; color: #15803d; }
.gm-t-wordsearch .gm-t-ic { background: #e7e8ff; color: #4338ca; }
.gm-t-sudoku .gm-t-ic { background: #fbeedb; color: #a4570b; }
.gm-t-memory .gm-t-ic { background: #fde4ea; color: #be123c; }
.gm-t-maths .gm-t-ic { background: #dcf2ee; color: #0f766e; }
.gm-t-slide .gm-t-ic { background: #f0e8ff; color: #7c3aed; }
:root[data-theme="dark"] .gm-t-ic { background: color-mix(in srgb, currentColor 18%, var(--surface)); filter: brightness(1.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-t-ic { background: color-mix(in srgb, currentColor 18%, var(--surface)); filter: brightness(1.35); } }
.gm-t-text { display: grid; gap: 2px; min-width: 0; }
.gm-t-text strong { font-size: 0.98rem; }
.gm-t-text small { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 0.78rem; }
.gm-t-text small .i { width: 13px; height: 13px; color: #16a34a; }
.gm-tile.done { background: color-mix(in srgb, var(--surface) 75%, var(--input)); }

/* Leaderboard picker and top posts */

/* Badges */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bdg { display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); text-align: center; }
.bdg strong { font-size: 0.88rem; }
.bdg small { color: var(--text-muted); font-size: 0.74rem; line-height: 1.35; }
.badge-medal { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 4px; border-radius: 50%; background: var(--input); color: var(--text-faint); }
.badge-medal .i { width: 26px; height: 26px; }
.bdg:not(.earned) { opacity: 0.72; }
.bdg:not(.earned) strong { color: var(--text-muted); }
.bdg.earned.bronze .badge-medal { background: var(--bronze-soft); color: var(--bronze); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bronze) 45%, transparent); }
.bdg.earned.silver .badge-medal { background: var(--silver-soft); color: var(--silver); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--silver) 45%, transparent); }
.bdg.earned.gold .badge-medal { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
.badge-grid.compact { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 0 10px 8px; }
.badge-grid.compact .bdg { padding: 12px 8px; }
.badge-grid.compact .badge-medal { width: 42px; height: 42px; }
.badge-grid.compact .badge-medal .i { width: 20px; height: 20px; }
.badge-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 800; font-size: 0.86rem; }
.badge-chip .i { width: 16px; height: 16px; }
.badge-chip.silver { background: var(--silver-soft); color: var(--silver); }
.badge-chip.bronze { background: var(--bronze-soft); color: var(--bronze); }

/* The game window (shares its frame with the quiz) */
.gm { width: min(520px, 100%); max-width: 100%; max-height: min(94dvh, 860px); margin: auto; padding: 0; border: 0; border-radius: 26px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; }
.gm[open] { animation: ps-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.gm::backdrop { background: rgba(9, 9, 11, 0.6); }
@media (max-width: 600px) { .gm { width: 100%; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); border-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .gm[open] { animation: none; } }
.gm-card { display: flex; flex-direction: column; height: 100%; max-height: inherit; }
.gm-head { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--border); }
.gm-title { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.gm-title strong { display: inline-flex; align-items: center; gap: 7px; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.gm-title strong .i { width: 18px; height: 18px; color: var(--accent); }
.gm-title small { color: var(--text-muted); font-size: 0.78rem; }
.gm-clock { padding: 6px 12px; border-radius: 999px; background: var(--input); font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.gm-clock.low { background: color-mix(in srgb, #dc2626 16%, transparent); color: #dc2626; }
.gm-body { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; justify-items: center; gap: 14px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.gm-hint { margin: 0; min-height: 1.3em; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; text-align: center; }
.gm-foot { display: flex; justify-content: center; }
.gm-saving { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 80%, transparent); font-weight: 700; }
.gm-end { display: grid; justify-items: center; gap: 12px; width: 100%; padding-top: 12px; text-align: center; }
.gm-cheer { margin: 0; font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; }
.gm-summary { margin: 0; color: var(--text-muted); }
.gm-points { position: relative; display: grid; justify-items: center; }
.gm-points b { font-family: var(--serif); font-size: 3rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.gm-points span { color: var(--text-muted); font-size: 0.86rem; font-weight: 600; }
.gm-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.gm-badges small { width: 100%; color: var(--text-muted); font-weight: 700; }
.gm button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* Five */
.five-board { display: grid; gap: 6px; }
.five-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.five-row.shake { animation: five-shake 320ms ease; }
@keyframes five-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.five-cell { display: grid; place-items: center; width: clamp(46px, 13vw, 58px); aspect-ratio: 1; border: 2px solid var(--border); border-radius: 10px; font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
.five-cell.filled { border-color: var(--text-muted); animation: five-pop 120ms ease-out; }
@keyframes five-pop { 50% { transform: scale(1.08); } }
.five-cell.right, .five-cell.near, .five-cell.absent { color: #fff; border-color: transparent; animation: five-flip 420ms ease both; animation-delay: calc(var(--i) * 90ms); }
.five-cell.right { background: #16a34a; }
.five-cell.near { background: #ca8a04; }
.five-cell.absent { background: #6b7280; }
@keyframes five-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@media (prefers-reduced-motion: reduce) { .five-cell { animation: none !important; } .five-row.shake { animation: none; } }
.five-keys { display: grid; gap: 6px; width: 100%; max-width: 480px; }
.five-krow { display: flex; justify-content: center; gap: 5px; }
.five-key { flex: 1; max-width: 42px; min-height: 52px; border: 0; border-radius: 8px; background: var(--input); color: var(--text); font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.five-key.wide { flex: 1.5; max-width: 66px; font-size: 0.78rem; }
.five-key.wide .i { width: 18px; height: 18px; }
.five-key.right { background: #16a34a; color: #fff; }
.five-key.near { background: #ca8a04; color: #fff; }
.five-key.absent { background: #787c86; color: #fff; opacity: 0.85; }
.five-key:active { transform: scale(0.95); }

/* Word search */
.ws-theme { margin: 0; color: var(--text-muted); }
.ws-theme strong { color: var(--text); }
.ws-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 440px); aspect-ratio: 1; border-radius: 14px; background: var(--input); padding: 6px; touch-action: none; -webkit-user-select: none; user-select: none; }
.ws-cell { display: grid; place-items: center; border-radius: 8px; font-weight: 800; font-size: clamp(0.95rem, 4.2vw, 1.2rem); cursor: pointer; transition: background-color 100ms; }
.ws-cell.sel { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.ws-cell.found { background: color-mix(in srgb, #16a34a 26%, transparent); color: #15803d; }
:root[data-theme="dark"] .ws-cell.found { color: #4ade80; }
.ws-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0; padding: 0; list-style: none; font-weight: 700; font-size: 0.9rem; }
.ws-words li.found { color: var(--text-faint); text-decoration: line-through; }

/* Sudoku */
.sd-grid { display: grid; grid-template-columns: repeat(9, 1fr); width: min(100%, 420px); aspect-ratio: 1; border: 2px solid var(--text); border-radius: 10px; overflow: hidden; }
.sd-cell { display: grid; place-items: center; min-width: 0; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); color: var(--accent); font: inherit; font-weight: 700; font-size: clamp(1rem, 4.6vw, 1.35rem); cursor: pointer; padding: 0; }
.sd-cell.given { color: var(--text); font-weight: 800; }
.sd-cell.br { border-right: 2px solid var(--text); }
.sd-cell.bb { border-bottom: 2px solid var(--text); }
.sd-cell.peer { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.sd-cell.same { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.sd-cell.sel { background: color-mix(in srgb, var(--accent) 32%, var(--surface)); }
.sd-cell.wrong { color: #dc2626; }
.sd-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(100%, 420px); }
.sd-num { min-height: 50px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-weight: 800; font-size: 1.2rem; cursor: pointer; }
.sd-num .i { width: 18px; height: 18px; }
.sd-num:active { transform: scale(0.95); }

/* Memory */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(100%, 400px); }
.mm-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.mm-back, .mm-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.mm-back { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.mm-back::after { content: ''; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.mm-face { background: var(--surface); border: 2px solid var(--border); color: var(--accent); transform: rotateY(180deg); }
.mm-face .i { width: 44%; height: 44%; }
.mm-card.open .mm-back { transform: rotateY(-180deg); }
.mm-card.open .mm-face { transform: rotateY(0); }
.mm-card.done .mm-face { border-color: #16a34a; color: #16a34a; background: color-mix(in srgb, #16a34a 10%, var(--surface)); }
@media (prefers-reduced-motion: reduce) { .mm-back, .mm-face { transition: none; } }

/* Maths sprint */
.mx-q { margin-top: 8px; font-family: var(--serif); font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mx-input { min-width: 160px; padding: 10px 18px; border-radius: 14px; background: var(--input); font-size: 2rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; transition: background-color 200ms; }
.mx-input.ok { background: color-mix(in srgb, #16a34a 22%, var(--input)); }
.mx-input.no { background: color-mix(in srgb, #dc2626 20%, var(--input)); }
.mx-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 340px); }
.mx-key { min-height: 58px; border: 0; border-radius: 14px; background: var(--input); color: var(--text); font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer; }
.mx-key .i { width: 22px; height: 22px; }
.mx-key.go { background: var(--accent); color: var(--on-accent); }
.mx-key:active { transform: scale(0.95); }

/* Sliding puzzle */
.sl-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, 380px); aspect-ratio: 1; padding: 6px; border-radius: 16px; background: var(--input); }
.sl-tile { border: 0; border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-family: var(--serif); font-size: clamp(1.3rem, 6vw, 1.8rem); font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 8px -4px rgba(0, 0, 0, 0.18); transition: background-color 150ms; }
.sl-tile.home { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.sl-tile:active { transform: scale(0.96); }
.sl-gap { border-radius: 12px; }

/* ==========================================================================
   Leaderboards v2: one row of boards, one row of filters, your standing in words, a light podium,
   and a thin bar under each name showing the score against the leader
   ========================================================================== */
.pl-leader { gap: 14px; }
.lb-head { display: grid; gap: 4px; }
.lb-head h3 { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.015em; }
.lb-head p { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; max-width: 60ch; }

.lb-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 1px solid var(--border); margin: 0 -2px; padding: 0 2px; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab {
    position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px;
    border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap;
    touch-action: manipulation;
}
.lb-tab .i { width: 17px; height: 17px; }
.lb-tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background-color 150ms; }
.lb-tab[aria-selected="true"] { color: var(--text); }
.lb-tab[aria-selected="true"] .i { color: var(--accent); }
.lb-tab[aria-selected="true"]::after { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .lb-tab:hover { color: var(--text); } }
.lb-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

.lb-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.lb-controls .pl-seg button { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }

/* Your standing */
.pl-standing { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); }
.pl-standing p { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; line-height: 1.4; }
.pl-standing p strong { font-size: 0.98rem; }
.pl-standing p span { color: var(--text-muted); font-size: 0.88rem; }
.pl-standing p span b { color: var(--text); }
.pl-standing-rank { display: grid; place-items: center; flex: none; min-width: 52px; height: 52px; padding: 0 6px; border-radius: 14px; background: var(--surface); color: var(--accent); }
.pl-standing-rank b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.pl-standing-rank .i { width: 24px; height: 24px; }
.pl-standing.r1 .pl-standing-rank { background: var(--gold-soft); color: var(--gold); }
.pl-standing.r2 .pl-standing-rank { background: var(--silver-soft); color: var(--silver); }
.pl-standing.r3 .pl-standing-rank { background: var(--bronze-soft); color: var(--bronze); }
.pl-standing-score { display: grid; justify-items: end; flex: none; line-height: 1.1; }
.pl-standing-score b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pl-standing-score small { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; }
.pl-standing.out { background: var(--input); }
.pl-standing.out .chip { flex: none; }
@media (max-width: 520px) { .pl-standing.out { flex-wrap: wrap; } .pl-standing.out .chip { margin-left: 66px; } }

/* Podium */
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; max-width: 480px; width: 100%; margin: 4px auto 0; padding: 0; list-style: none; }
.lb-step { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.lb-step-who { display: grid; justify-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.lb-step-who strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.lb-step.me .lb-step-who strong { color: var(--accent); }
.lb-step-score { font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lb-step-score small { color: var(--text-muted); font-weight: 700; font-size: 0.72rem; }
.lb-medal-ring { position: relative; display: inline-grid; padding: 3px; border-radius: 50%; background: var(--m, var(--border)); }
.lb-medal-ring .avatar { box-shadow: 0 0 0 2px var(--surface); }
.lb-medal { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--m); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 0.8rem; box-shadow: 0 0 0 2px var(--surface); }
.lb-step.m1 { --m: var(--gold); --m-soft: var(--gold-soft); }
.lb-step.m2 { --m: var(--silver); --m-soft: var(--silver-soft); }
.lb-step.m3 { --m: var(--bronze); --m-soft: var(--bronze-soft); }
:root[data-theme="dark"] .lb-medal { color: #17181d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-medal { color: #17181d; } }
.lb-plinth { width: 100%; border-radius: 12px 12px 4px 4px; background: linear-gradient(to bottom, var(--m-soft), transparent); }
.lb-step.m1 .lb-plinth { height: 56px; }
.lb-step.m2 .lb-plinth { height: 38px; }
.lb-step.m3 .lb-plinth { height: 26px; }

/* Everyone else */
.lb-list { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.lb-row.me { background: var(--accent-soft); }
.lb-rank { flex: none; width: 26px; text-align: center; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lb-rank.m1 { color: var(--gold); }
.lb-rank.m2 { color: var(--silver); }
.lb-rank.m3 { color: var(--bronze); }
.lb-who { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lb-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
.lb-who small { color: var(--text-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar { display: block; height: 4px; margin-top: 4px; border-radius: 999px; background: var(--input); overflow: hidden; }
.lb-bar::after { content: ''; display: block; width: var(--w); height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--accent) 70%, transparent); transform-origin: left; }
.lb-row.me .lb-bar { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.lb-row.me .lb-bar::after { background: var(--accent); }
.lb-body.ready .lb-bar::after { animation: lb-grow 700ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.lb-body.ready .lb-row:nth-child(2) .lb-bar::after { animation-delay: 40ms; }
.lb-body.ready .lb-row:nth-child(3) .lb-bar::after { animation-delay: 80ms; }
.lb-body.ready .lb-row:nth-child(n+4) .lb-bar::after { animation-delay: 120ms; }
@keyframes lb-grow { from { transform: scaleX(0); } }
.content.repaint .lb-bar::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .lb-bar::after { animation: none !important; } }
.lb-score { display: grid; justify-items: end; flex: none; line-height: 1.15; }
.lb-score b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-score small { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .lb-row:not(.me):hover { background: var(--input); } }

.lb-controls { flex-wrap: nowrap; align-items: center; }
.lb-friends { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer; touch-action: manipulation; }
.lb-friends .i { width: 16px; height: 16px; }
.lb-friends[aria-pressed="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ==========================================================================
   Phase E: verified tick, announcements, admin console
   ========================================================================== */
.vtick { display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.14em; color: #1d9bf0; flex: none; }
:root[data-theme="dark"] .vtick { color: #4cb4f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vtick { color: #4cb4f5; } }
.pf-names h1 .vtick { width: 0.8em; height: 0.8em; margin-left: 6px; vertical-align: -0.08em; }

.announce { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.announce-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.announce-ic .i { width: 20px; height: 20px; }
.announce-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.4; }
.announce-text small { color: var(--text-muted); font-size: 0.84rem; }
.announce .chip { flex: none; text-decoration: none; }

/* Admin console */
.adm-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs .tab { flex: none; white-space: nowrap; }
.adm-search { flex: 1; min-width: 200px; margin: 0; background: var(--surface); border: 1px solid var(--border); }
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-toolbar select { min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.adm-toolbar .primary-btn { display: inline-flex; align-items: center; gap: 6px; }
.adm-toolbar .primary-btn .i { width: 16px; height: 16px; }
.adm-user > span { gap: 2px; }
.adm-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.adm-flags:empty { display: none; }
.adm-flag { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; }
.adm-flag.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.adm-flag.ok { background: color-mix(in srgb, #1d9bf0 14%, transparent); color: #1d9bf0; }
.adm-warn { color: var(--danger); }
.adm-sub { margin: 14px 0 4px; font-size: 0.9rem; color: var(--text-muted); }
.adm-q { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.adm-q.off { opacity: 0.6; }
.adm-q header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adm-q-text { margin: 0; font-weight: 700; line-height: 1.4; }
.adm-q-choices { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: 0.9rem; }
.adm-q-choices li.right { color: #15803d; font-weight: 700; }
:root[data-theme="dark"] .adm-q-choices li.right { color: #4ade80; }
.adm-choices { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.adm-choices legend { margin-bottom: 6px; font-weight: 700; font-size: 0.88rem; }
.adm-choice { display: flex; align-items: center; gap: 8px; }
.adm-choice input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.adm-announce { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.adm-announce .field { display: grid; gap: 6px; }
.adm-announce .field > span { font-weight: 700; font-size: 0.88rem; }
.adm-announce input:not([type="checkbox"]), .adm-announce textarea, .adm-announce select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit;
}
.adm-announce-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: end; }
.adm-announce .primary-btn { justify-self: start; }
@media (max-width: 560px) { .adm-announce-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Final polish (audit round): overflow, tap targets, dark-mode cover, compact admin numbers
   ========================================================================== */
@media (max-width: 760px) {
    /* The feed bar's glass still reaches both edges, without making the page wider than the screen */
    .feed-bar { margin: 0 0 12px; padding: 8px 0; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 88%, transparent); clip-path: inset(0 -100vmax); }
    /* Settings: colour swatches wrap under their label instead of running off the edge */
    .st-row { flex-wrap: wrap; }
    .st-row > .st-swatches { flex: 1 1 100%; max-width: none; justify-content: flex-start; margin-left: 48px; }
    /* Moderation numbers: three to a row, smaller */
    .adm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .adm-stat { padding: 10px; border-radius: 12px; }
    .adm-stat strong { font-size: 1.1rem; }
    .adm-stat span { font-size: 0.7rem; }
}
/* Fingers need room: small text links get a bigger hit area without changing how they look */
@media (pointer: coarse) {
    .post-time, .ex-more, .link-btn, .name-link { position: relative; }
    .post-time::after, .ex-more::after, .link-btn::after { content: ''; position: absolute; inset: -12px -6px; }
}
/* Pages where "new note" makes no sense */
body:is([data-view="admin"], [data-view="settings"], [data-view="profile"], [data-view="scheduled"]) .fab { display: none !important; }
/* Profile cover: softer in dark mode */
:root[data-theme="dark"] .pf-cover { background: linear-gradient(135deg, color-mix(in srgb, var(--card, var(--accent)) 38%, var(--surface)), color-mix(in srgb, var(--deep, var(--accent)) 45%, var(--surface))); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-cover { background: linear-gradient(135deg, color-mix(in srgb, var(--card, var(--accent)) 38%, var(--surface)), color-mix(in srgb, var(--deep, var(--accent)) 45%, var(--surface))); } }
/* Browser surfaces: themed text selection and caret everywhere */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
input, textarea, [contenteditable="true"] { caret-color: var(--accent); }

/* Phones: the feed tabs are docked inside the top bar (script.js dockBar), so they scroll as one piece with it */
.topbar-dock[hidden] { display: none !important; }
@media (max-width: 760px) {
    .topbar-dock { order: 6; flex: 1 1 100%; min-width: 0; }
    .topbar-dock .feed-bar {
        position: static; top: auto; margin: 0; padding: 0;
        background: none; box-shadow: none; clip-path: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        -webkit-transform: none; transform: none; will-change: auto;
    }
    body.bar-docked .new-posts { top: calc(var(--topbar-h, 118px) + 8px); }
}

/* ==========================================================================
   Wordplay (Scrabble-style board)
   ========================================================================== */
.gm-t-wordplay .gm-t-ic { background: #fdf0d5; color: #b45309; }
.wp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: min(100%, 420px); font-size: 0.86rem; color: var(--text-muted); font-weight: 600; }
.wp-score b { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.wp-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: min(100%, 420px); aspect-ratio: 1; padding: 5px; border-radius: 16px; background: color-mix(in srgb, #b45309 16%, var(--input)); }
.wp-board.shake { animation: five-shake 320ms ease; }
.wp-cell { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: var(--surface); color: var(--text-muted);
    font: inherit; font-size: clamp(0.5rem, 2.1vw, 0.66rem); font-weight: 800; letter-spacing: 0.02em; cursor: pointer; touch-action: manipulation; }
.wp-cell.tw { background: #f7c6c0; color: #9f1239; }
.wp-cell.dw { background: #fbdcd6; color: #be123c; }
.wp-cell.tl { background: #bcd7f5; color: #1e40af; }
.wp-cell.dl { background: #dbe9f9; color: #1d4ed8; }
.wp-cell.tile, .wp-tile { background: linear-gradient(180deg, #fbe7bf, #f3d494); color: #3b2a12; box-shadow: inset 0 -2px 0 rgba(120, 72, 16, 0.25); font-family: var(--serif); font-weight: 600; }
.wp-cell.tile { font-size: clamp(0.95rem, 4.4vw, 1.3rem); cursor: default; }
.wp-cell.tile.new { cursor: pointer; box-shadow: inset 0 -2px 0 rgba(120, 72, 16, 0.25), 0 0 0 2px var(--accent); }
.wp-cell sub, .wp-tile sub { position: absolute; right: 3px; bottom: 1px; font-family: Inter, system-ui, sans-serif; font-size: 0.5em; font-weight: 700; line-height: 1; }
.wp-rack { display: flex; justify-content: center; gap: 6px; width: min(100%, 420px); }
.wp-tile { position: relative; display: grid; place-items: center; flex: 1; max-width: 50px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; font-size: 1.45rem; cursor: pointer; touch-action: manipulation;
    transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.wp-tile:active { transform: scale(0.94); }
.wp-tile.sel { transform: translateY(-6px); box-shadow: inset 0 -2px 0 rgba(120, 72, 16, 0.25), 0 0 0 3px var(--accent); }
.wp-tile.empty { background: var(--input); box-shadow: none; cursor: default; }
.wp-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(100%, 420px); }
.wp-actions button { min-height: 44px; padding: 0 8px; justify-content: center; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; }
.wp-actions .i { width: 16px; height: 16px; }
.wp-actions .primary-btn:disabled { opacity: 0.45; }
.wp-end { font-size: 0.85rem; }
:root[data-theme="dark"] .wp-board { background: color-mix(in srgb, #f59e0b 12%, var(--input)); }
:root[data-theme="dark"] .wp-cell.tw { background: #5b1f2a; color: #fecdd3; }
:root[data-theme="dark"] .wp-cell.dw { background: #4a2330; color: #fda4af; }
:root[data-theme="dark"] .wp-cell.tl { background: #1e3a66; color: #bfdbfe; }
:root[data-theme="dark"] .wp-cell.dl { background: #22324d; color: #93c5fd; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wp-board { background: color-mix(in srgb, #f59e0b 12%, var(--input)); }
    :root:not([data-theme="light"]) .wp-cell.tw { background: #5b1f2a; color: #fecdd3; }
    :root:not([data-theme="light"]) .wp-cell.dw { background: #4a2330; color: #fda4af; }
    :root:not([data-theme="light"]) .wp-cell.tl { background: #1e3a66; color: #bfdbfe; }
    :root:not([data-theme="light"]) .wp-cell.dl { background: #22324d; color: #93c5fd; }
}
@media (prefers-reduced-motion: reduce) { .wp-board.shake { animation: none; } .wp-tile { transition: none; } }

/* ---------- Wordplay with friends ---------- */
.wpm-list { display: grid; gap: 8px; }
.wpm-new, .wpm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1), border-color 140ms; }
.wpm-new:active, .wpm-row:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .wpm-new:hover, .wpm-row:hover { border-color: var(--accent); } }
.wpm-new { border-style: dashed; }
.wpm-new-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #fdf0d5; color: #b45309; }
.wpm-new-ic .i { width: 22px; height: 22px; }
.wpm-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.wpm-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpm-text small { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpm-avs { display: flex; flex: none; }
.wpm-avs > * + * { margin-left: -12px; box-shadow: 0 0 0 2px var(--surface); }
.wpm-status { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.wpm-row.mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.wpm-row.mine .wpm-status { background: var(--accent); color: var(--on-accent, #fff); }
.wpm-row.over { background: color-mix(in srgb, var(--surface) 70%, var(--input)); }
.wpm-sub { margin: 8px 2px 0; color: var(--text-muted); font-size: 0.82rem; font-weight: 700; }
.wpm-skel { height: 68px; border-radius: 16px; background: var(--input); animation: pulse 1.4s ease-in-out infinite; }
:root[data-theme="dark"] .wpm-new-ic { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wpm-new-ic { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #fbbf24; } }

/* Players strip above the board */
.wpm-players { display: flex; gap: 6px; width: min(100%, 420px); }
.wpm-p { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1.5px solid transparent; border-radius: 14px; background: var(--input); }
.wpm-p > span:not(.avatar) { display: grid; min-width: 0; line-height: 1.15; }
.wpm-p strong { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpm-p b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wpm-p.turn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.wpm-p.out { opacity: 0.5; }
.wpm-p.out strong { text-decoration: line-through; }
.wpm-p.won { border-color: #d97706; }
.wpm-crown { position: absolute; top: -8px; right: -4px; width: 18px; height: 18px; color: #d97706; }
.wpm-players .avatar { flex: none; }
.wp-board.locked .wp-cell:not(.tile) { cursor: default; }
.wp-cell.tile.last { box-shadow: inset 0 -2px 0 rgba(120, 72, 16, 0.25), 0 0 0 2px #d97706; }
.wpm-actions { grid-template-columns: repeat(4, 1fr); }
.wpm-actions[hidden], .wp-rack[hidden] { display: none; }
.wpm-foot { display: flex; justify-content: center; gap: 8px; min-height: 24px; }
.wpm-foot .primary-btn, .wpm-foot .ghost-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.wpm-foot .i { width: 16px; height: 16px; }

/* Picking friends */
.wpm-pick .gm-card { max-height: inherit; }
.wpm-pick-body { justify-items: stretch; }
.wpm-find { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit; }
.wpm-friends { display: grid; gap: 4px; }
.wpm-friend { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; cursor: pointer; }
.wpm-friend[hidden] { display: none; }
.wpm-friend > span:not(.wpm-check):not(.avatar) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.wpm-friend small { color: var(--text-muted); font-size: 0.8rem; }
.wpm-friend input { position: absolute; opacity: 0; pointer-events: none; }
.wpm-check { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--border); border-radius: 50%; color: transparent; flex: none; }
.wpm-check .i { width: 15px; height: 15px; }
.wpm-friend:has(input:checked) { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wpm-friend:has(input:checked) .wpm-check { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.wpm-friend:has(input:disabled:not(:checked)) { opacity: 0.45; cursor: not-allowed; }
.wpm-friend:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wpm-pick-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.wpm-pick-foot .primary-btn { width: 100%; min-height: 48px; }
.wpm-pick-foot .primary-btn:disabled { opacity: 0.5; }

/* ==========================================================================
   Guests and sign-up
   ========================================================================== */
body.is-guest .post-composer, body.is-guest .fab { display: none !important; }
.guest-card { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.guest-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.guest-ic .i { width: 22px; height: 22px; }
.guest-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.guest-text small { color: var(--text-muted); font-size: 0.84rem; }
.guest-card .primary-btn { flex: none; min-height: 40px; padding: 0 14px; }
@media (max-width: 480px) { .guest-card { flex-wrap: wrap; } .guest-card .primary-btn { width: 100%; } }
.guest-wall > .i { width: 44px; height: 44px; color: var(--accent); margin-bottom: 8px; }
.auth-note { margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--input); color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }
.auth .field small { font-weight: 500; color: var(--text-muted); }
#auth-code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.auth-resend { justify-self: start; margin-top: -4px; }
.auth .tabs[hidden], .auth [data-show][hidden] { display: none !important; }
.gate-guest { display: block; margin: 12px auto 0; }

/* ==========================================================================
   Chats, refined: one header (back · who · call · video · more), wallpaper edge to edge,
   frosted header and composer floating on it. Direct messages and group chats share the look.
   ========================================================================== */
/* Header */
.chat-head, .gc-head {
    gap: 6px; padding: 8px 10px; min-height: 64px;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
    position: relative; z-index: 2;
}
.chat-head .back-chat, .gc-back { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -2px; border-radius: 50%; background: none !important; color: var(--text) !important; flex: none; }
.chat-head .back-chat .i, .gc-back .i { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .chat-head .back-chat:hover, .gc-back:hover { background: var(--input) !important; } }
.chat-head .chat-who { flex: none; padding: 0; border: 0; background: none; border-radius: 50%; }
.chat-head .avatar.sm { width: 40px; height: 40px; }
.chat-head .friend-name { padding-left: 4px; line-height: 1.2; }
.chat-head .chat-who-name { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.chat-head .friend-name small { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Round actions: calls tinted, the rest quiet */
.chat-head .icon-btn:not(.back-chat), .gc-head .icon-btn:not(.gc-back) { width: 40px; height: 40px; flex: none; border-radius: 50%; background: none; color: var(--text); }
.chat-head .icon-btn[data-action="call-friend"], .gc-head .gc-hbtn { background: var(--accent-soft) !important; color: var(--accent) !important; }
.chat-head .icon-btn .i, .gc-head .icon-btn .i { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) { .chat-head .icon-btn:not(.back-chat):hover, .gc-head .icon-btn:not(.gc-back):hover { background: var(--input); } }
.chat-head .icon-btn:active, .gc-head .icon-btn:active { transform: scale(0.92); }
.chat-head .icon-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) { .head-wide { display: none !important; } }
.gc-head .gc-emoji { width: 40px; height: 40px; border-radius: 50%; font-size: 1.25rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); }
.gc-head .gc-title { padding-left: 4px; cursor: pointer; }
.gc-head .gc-title strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.gc-head .gc-title small { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-online-wrap:has(#gc-online:empty) { display: none; }
#gc-online { color: #16a34a; }

/* Wallpaper: the whole chat wears it; the thread itself is see-through */
.chat-pane.has-wallpaper .chat-thread, .gc.has-wallpaper .gc-thread { background: transparent !important; }
.chat-pane.has-wallpaper, .gc.has-wallpaper { background-size: cover !important; }
.has-wallpaper :is(.chat-head, .gc-head) { background: color-mix(in srgb, var(--surface) 62%, transparent); border-bottom-color: rgba(255, 255, 255, 0.08); }
.has-wallpaper :is(.composer, .gc-compose) { background: color-mix(in srgb, var(--surface) 62%, transparent) !important; border-top-color: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); }
.has-wallpaper .gc-pinned { background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.has-wallpaper .quick-reply { background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.has-wallpaper.wp-dark .gc-typing { color: rgba(255, 255, 255, 0.85); }
@media (prefers-reduced-transparency: reduce) {
    .chat-head, .gc-head, .has-wallpaper :is(.composer, .gc-compose, .chat-head, .gc-head) { background: var(--surface) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Group composer: + · message · mic (becomes send once you type) */
.gc-compose { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); }
.gc-row { align-items: flex-end; gap: 8px; }
.gc-plus { background: var(--input); color: var(--accent); }
.gc-plus .i { width: 22px; height: 22px; }
#gc-input { border-radius: 22px; background: var(--input); border-color: transparent; }
.gc-mic { background: var(--accent); color: var(--on-accent); }
.gc-compose:has(#gc-input:not(:placeholder-shown)) .gc-mic { display: none; }
.gc-compose:has(#gc-input:placeholder-shown) .gc-send { display: none; }
.gc-compose:has(.gc-rec:not([hidden])) .gc-plus { display: none; }

/* Group bubbles: a touch more air, names in the author's colour-free accent, softer incoming bubbles */
.gc-thread { padding: 12px 12px 8px; }
.gc-bubble { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); }
.has-wallpaper .gc-msg:not(.mine) .gc-bubble { border-color: transparent; }
.gc-name .gc-who-name { color: var(--accent); }
.has-wallpaper.wp-dark .gc-name .gc-who-name { color: #fff; }

/* Desktop: the back arrow on a DM closes the chat; the group chat card grows a little */
@media (min-width: 761px) {
    .gc { height: min(78vh, 820px); }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    /* An open chat owns the screen: the page's own top bar steps aside (it was painting over the chat header) */
    body.chat-open .topbar { visibility: hidden; }
    body.chat-open .chat-head { padding: max(8px, env(safe-area-inset-top)) 8px 8px 4px; }

    /* Group chat: full screen like a direct message */
    body[data-view="community"]:has(#content .gc) .topbar { visibility: hidden; }
    body[data-view="community"]:has(#content .gc) :is(.tabbar, .fab) { display: none !important; }
    body[data-view="community"] #content .gc {
        position: fixed; inset: 0; z-index: 30; height: var(--vvh, 100dvh); margin: 0; border: 0; border-radius: 0;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; background: var(--bg);
    }
    html.kb-open body[data-view="community"] #content .gc { top: var(--vvtop, 0px); }
    body[data-view="community"] #content .gc-head { padding: max(8px, env(safe-area-inset-top)) 8px 8px 4px; }
    body[data-view="community"] #content .gc-compose { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (min-width: 761px) { .gc-back { display: grid; } }
.chat-head .friend-name { min-width: 0; }
.chat-head .chat-who-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Sign in / create account — bold social: a vivid stage with moments from inside Cordial,
   and a solid card for the form (a sheet on phones, centred on bigger screens)
   ========================================================================== */
dialog.auth {
    --stage-ink: #0d0a24;
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
    overflow: hidden auto; overscroll-behavior: contain;
    color: var(--text);
    background:
        radial-gradient(60% 45% at 12% 10%, rgba(236, 72, 153, 0.85), transparent 70%),
        radial-gradient(55% 45% at 92% 18%, rgba(245, 158, 11, 0.75), transparent 70%),
        radial-gradient(70% 55% at 80% 95%, rgba(124, 58, 237, 0.9), transparent 70%),
        radial-gradient(60% 50% at 8% 88%, rgba(79, 70, 229, 0.95), transparent 70%),
        var(--stage-ink);
}
dialog.auth[open] { display: grid; grid-template-rows: 1fr auto; }
dialog.auth::backdrop { background: var(--stage-ink, #0d0a24); }
html.kb-open dialog.auth:modal { top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100dvh); max-height: var(--vvh, 100dvh); }

/* The stage and its drifting moments */
.auth-stage { position: relative; grid-row: 1; min-height: 220px; overflow: hidden; pointer-events: none; }
.auth-moment {
    position: absolute; display: flex; align-items: center; gap: 10px; max-width: 250px; padding: 8px 14px 8px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.94); color: #18181b; font-size: 0.84rem; line-height: 1.25;
    box-shadow: 0 12px 30px -10px rgba(13, 10, 36, 0.55);
    animation: auth-drift 9s ease-in-out infinite alternate;
}
.auth-moment b { font-weight: 800; }
.am-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 0.7rem; font-weight: 800; }
.am-ic { width: 18px; height: 18px; flex: none; }
.am-ic.heart { color: #e11d48; }
.am-tile { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: #fdf0d5; color: #b45309; }
.am-tile .i { width: 18px; height: 18px; }
.am-live { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
.auth-moment.bubble { padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: #4f46e5; color: #fff; }
.m1 { top: 16%; left: 6%; }
.m2 { top: 44%; right: 7%; animation-delay: -3s; animation-duration: 11s; }
.m3 { top: 64%; left: 10%; animation-delay: -6s; }
.m4 { top: 8%; right: 5%; animation-delay: -1.5s; animation-duration: 10s; }
@keyframes auth-drift { from { transform: translate3d(0, 0, 0) rotate(-1.5deg); } to { transform: translate3d(6px, -12px, 0) rotate(1.5deg); } }

.auth-close {
    position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.auth-close .i { width: 22px; height: 22px; }
.auth-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The card */
.auth-card {
    position: relative; z-index: 2; grid-row: 2; display: flex; flex-direction: column; gap: 14px;
    width: 100%; padding: 26px 22px max(22px, calc(14px + env(safe-area-inset-bottom)));
    border-radius: 24px 24px 0 0; background: var(--surface);
    box-shadow: 0 -18px 50px -20px rgba(13, 10, 36, 0.6);
    animation: auth-rise 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes auth-rise { from { transform: translateY(40px); opacity: 0; } }
.auth-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
.auth-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; }
.auth-mark .i { width: 18px; height: 18px; }
.auth-card h3 { margin: 6px 0 0; font-size: clamp(2rem, 7vw, 2.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.auth-sub { margin: -6px 0 4px; color: var(--text-muted); font-size: 0.98rem; line-height: 1.45; text-wrap: pretty; }
.auth-sub[hidden] { display: none; }
.auth-reason { margin: -4px 0 0; font-size: 0.92rem; line-height: 1.45; }
.auth .auth-tabs { display: none !important; }

.auth .field { gap: 7px; font-size: 0.82rem; font-weight: 700; color: var(--text); }
.auth .field input {
    width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 14px;
    background: var(--input); color: var(--text); font: inherit; font-size: 16px; font-weight: 500;
    transition: border-color 160ms, background-color 160ms, box-shadow 160ms;
}
.auth .field input::placeholder { color: var(--text-muted); opacity: 0.8; }
.auth .field input:focus { outline: none; border-color: #4f46e5; background: var(--surface); box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18); }
.auth .pw-wrap > input { padding-right: 52px; }
.auth .pw-eye { right: 6px; }
#auth-code { font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: 0.4em; text-align: center; }

.auth-forgot { align-self: flex-end; margin-top: -6px; }
.auth-submit {
    min-height: 54px; margin-top: 4px; border: 0; border-radius: 16px; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.005em;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 100%); color: #fff;
    box-shadow: 0 10px 24px -10px rgba(124, 58, 237, 0.75);
    transition: transform 120ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 160ms, filter 160ms;
}
.auth-submit:active { transform: scale(0.98); }
.auth-submit:disabled { filter: saturate(0.4) brightness(0.9); cursor: progress; }
@media (hover: hover) and (pointer: fine) { .auth-submit:hover { box-shadow: 0 14px 30px -10px rgba(124, 58, 237, 0.9); } }
.auth-submit:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.45); outline-offset: 3px; }
.auth-switch { margin: 2px 0 0; text-align: center; color: var(--text-muted); font-size: 0.92rem; }
.auth-switch .link-btn { font-weight: 800; color: #6d28d9; }
.auth-switch[hidden] { display: none; }
.auth-message { border-radius: 12px; font-size: 0.9rem; line-height: 1.45; }
.auth ::selection { background: rgba(124, 58, 237, 0.28); }
.auth input { caret-color: #7c3aed; }

:root[data-theme="dark"] .auth-switch .link-btn, :root[data-theme="dark"] .auth-forgot { color: #c4b5fd; }
:root[data-theme="dark"] .auth .field input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-switch .link-btn, :root:not([data-theme="light"]) .auth-forgot { color: #c4b5fd; }
    :root:not([data-theme="light"]) .auth .field input:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2); }
}

/* Phones: while typing, the stage steps back so the form has the screen */
@media (max-width: 760px) {
    html.kb-open .auth-stage { min-height: 64px; }
    html.kb-open .auth-moment { opacity: 0; }
}

/* Bigger screens: the card sits in the middle of the stage, the moments float around it */
@media (min-width: 761px) {
    dialog.auth[open] { display: grid; place-items: center; grid-template-rows: none; }
    .auth-stage { position: absolute; inset: 0; min-height: 0; }
    .auth-card { grid-row: auto; width: min(440px, calc(100% - 48px)); margin: 40px 0; padding: 32px 32px 28px; border-radius: 16px; box-shadow: 0 30px 80px -24px rgba(13, 10, 36, 0.7); }
    .auth-close { top: 20px; left: 20px; }
    .m1 { top: 18%; left: 10%; }
    .m2 { top: 30%; right: 9%; }
    .m3 { top: auto; bottom: 18%; left: 12%; }
    .m4 { top: auto; bottom: 26%; right: 11%; }
}
@media (min-width: 761px) and (max-width: 1100px) { .auth-moment { max-width: 200px; } .m1 { left: 3%; } .m3 { left: 3%; } .m2 { right: 3%; } .m4 { right: 3%; } }

@media (prefers-reduced-motion: reduce) { .auth-moment, .auth-card { animation: none; } }
/* Phones: the moments stack in a staggered column (left, right, left, right) above the sheet, never on top of each other */
@media (max-width: 760px) {
    .auth-stage { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 76px 16px 22px; container-type: size; }
    .auth-moment { position: static; flex: none; }
    .m1, .m3 { align-self: flex-start; }
    .m2, .m4 { align-self: flex-end; }
    dialog.auth[data-mode="signup"] .auth-stage { min-height: 150px; }
}
@container (max-height: 250px) { .m3, .m4 { display: none; } }
@container (max-height: 150px) { .m2 { display: none; } }

/* ==========================================================================
   Explore, bold social: the same vivid stage as sign-in, a big voice, hot #tags one tap away
   ========================================================================== */
.explore .ex-hero {
    gap: 16px; padding: 30px 28px 24px; border-radius: 16px; isolation: isolate;
    background:
        radial-gradient(55% 70% at 8% 0%, rgba(236, 72, 153, 0.9), transparent 70%),
        radial-gradient(45% 70% at 100% 10%, rgba(245, 158, 11, 0.8), transparent 70%),
        radial-gradient(60% 80% at 85% 100%, rgba(124, 58, 237, 0.95), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, rgba(79, 70, 229, 0.95), transparent 70%),
        #0d0a24;
    box-shadow: 0 24px 50px -28px rgba(13, 10, 36, 0.8);
}
.explore .ex-hero h2 { max-width: 14ch; margin: 0; font-size: clamp(2rem, 5.2vw, 3.2rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.ex-hero-sub { margin: 8px 0 0; max-width: 42ch; color: rgba(255, 255, 255, 0.86); font-size: 1rem; line-height: 1.45; }
.explore .ex-search { min-height: 52px; border-radius: 14px; box-shadow: 0 14px 30px -14px rgba(13, 10, 36, 0.7); }
.explore .ex-search:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 14px 30px -14px rgba(13, 10, 36, 0.7); }
.ex-hero-tags { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -28px; padding: 2px 28px; overscroll-behavior-x: contain; }
.ex-hero-tags::-webkit-scrollbar { display: none; }
.ex-hero-tag { flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: background-color 140ms, transform 120ms; }
.ex-hero-tag:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .ex-hero-tag:hover { background: rgba(255, 255, 255, 0.3); } }
.ex-hero-tag:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Tabs: bold pills */
.explore .ex-tabs { margin: -4px 0 0; }
.explore .ex-tabs .cm-filter { min-height: 40px; padding: 0 16px; font-weight: 800; }

/* Section heads: heavier, with a vivid badge */
.explore .ex-head h3 { gap: 10px; font-size: 1.28rem; font-weight: 900; letter-spacing: -0.025em; }
.explore .ex-ic { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #db2777); color: #fff; box-shadow: 0 6px 14px -8px rgba(124, 58, 237, 0.8); }
.explore .ex-ic .i { width: 18px; height: 18px; }
.explore .ex-head p { padding-left: 44px; }
.explore .ex-sec { gap: 14px; }

/* Trending rank: a flame badge */
.explore .ex-rank { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px 4px 7px; background: linear-gradient(135deg, #f59e0b, #e11d48); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 10px -4px rgba(225, 29, 72, 0.7); }
.explore .ex-rank .i { width: 13px; height: 13px; }
.explore .ex-tile { border-radius: 16px; }
.explore .ex-tag.top { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #f59e0b, #e11d48) border-box; }

@media (max-width: 760px) {
    .explore .ex-hero { padding: 24px 18px 18px; border-radius: 16px; }
    .explore .ex-hero h2 { font-size: 2.05rem; }
    .ex-hero-tags { margin: 0 -18px; padding: 2px 18px; }
    .explore .ex-head h3 { font-size: 1.15rem; }
}
.explore .ex-hero-tags { order: 10; }

/* ---------- Profile: cover photos and the photo grid ---------- */
.pf-cover { position: relative; height: 150px; }
.pf-cover.has-img { background: var(--input) !important; }
.pf-cover-view { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pf-cover-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-cover.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.25)); pointer-events: none; }
.pf-cover-edit {
    position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border: 0; border-radius: 999px; background: rgba(9, 9, 11, 0.55); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pf-cover-edit .i { width: 16px; height: 16px; }
.pf-cover-edit:active { transform: scale(0.96); }
.pf-cover-edit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pf-id { position: relative; z-index: 1; }
.pf-edit-photo { flex-wrap: wrap; }
.pf-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: 16px; overflow: hidden; }
.pf-ph { aspect-ratio: 1; padding: 0; border: 0; background: var(--input); cursor: pointer; overflow: hidden; }
.pf-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@media (hover: hover) and (pointer: fine) { .pf-ph:hover img { transform: scale(1.04); } }
.pf-ph:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.pf-ph.skel { animation: pulse 1.4s ease-in-out infinite; }
@media (max-width: 760px) {
    .pf-cover { height: 132px; }
    .pf-photos { margin: 0 -16px; border-radius: 0; gap: 2px; }
}
@media (min-width: 900px) { .pf-cover { height: 200px; } .pf-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pf-cover.has-img ~ .pf-id .pf-names { margin-bottom: -12px; } }

/* ==========================================================================
   Calls, refined: a one-to-one voice call is a calm full picture of the person; round controls with labels;
   the audio button shows where the sound goes; hold-to-ear goes dark
   ========================================================================== */
.call-panel.voice .call-stage { display: grid; place-items: center; flex: 1; min-height: 260px; padding: 12px 0 8px; overflow: visible; }
.call-voice { display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; }
.call-voice-ring { position: relative; display: grid; place-items: center; width: 148px; height: 148px; border-radius: 50%; }
.call-voice-ring .avatar.xl { width: 128px; height: 128px; font-size: 2.6rem; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7); }
.call-voice-ring::before, .call-voice-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); opacity: 0; }
.call-panel[data-state="ringing"] .call-voice-ring::before, .call-panel[data-state="waiting"] .call-voice-ring::before,
.call-panel[data-state="ringing"] .call-voice-ring::after, .call-panel[data-state="waiting"] .call-voice-ring::after { animation: call-pulse 2.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
.call-voice-ring::after { animation-delay: 1.1s !important; }
@keyframes call-pulse { from { transform: scale(0.86); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }
.call-voice.speaking .call-voice-ring .avatar { box-shadow: 0 0 0 4px #34d399, 0 18px 40px -16px rgba(0, 0, 0, 0.7); }
.call-voice-name { max-width: 16ch; margin-top: 8px; color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.call-voice-status { color: rgba(255, 255, 255, 0.72); font-size: 1rem; font-variant-numeric: tabular-nums; }
.call-panel[data-state="connected"] .call-voice-status { color: #86efac; }
.call-panel.voice .call-head-text { visibility: hidden; }
.call-panel.voice .call-speaking { display: none; }

/* Controls: round buttons, labels underneath, End on its own */
.call-controls { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; justify-items: center; padding-top: 6px; }
.call-btn { display: grid; justify-items: center; gap: 7px; min-width: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.78rem; font-weight: 600; }
.call-btn .i { width: 64px !important; height: 64px !important; padding: 20px !important; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background-color 160ms, transform 120ms; }
.call-btn[aria-pressed="true"] .i { background: #fff; color: #111318; }
.call-btn[hidden] { display: none !important; }
.call-btn span { max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-btn.end { grid-column: 1 / -1; order: 99; }
.call-btn.end .i { width: 72px !important; height: 72px !important; padding: 23px !important; background: #ef4444; box-shadow: 0 12px 26px -10px rgba(239, 68, 68, 0.8); }
.call-btn.end span { display: none; }
@media (hover: hover) and (pointer: fine) { .call-btn:hover .i { background: rgba(255, 255, 255, 0.24); } .call-btn[aria-pressed="true"]:hover .i { background: #e5e7eb; } .call-btn.end:hover .i { background: #dc2626; } }
.call-panel.video .call-controls { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.call-panel.video .call-btn.end { grid-column: auto; order: 0; }
.call-panel.video .call-btn.end span { display: block; }

/* Hold-to-ear */
.call-ear { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; background: #000; color: rgba(255, 255, 255, 0.75); text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.call-ear[hidden] { display: none; }
.call-ear-ic { width: 44px; height: 44px; color: rgba(255, 255, 255, 0.55); }
.call-ear strong { color: #fff; font-size: 1.2rem; font-weight: 700; }
.call-ear span { font-variant-numeric: tabular-nums; color: #86efac; }
.call-ear small { margin-top: 18px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); }
@media (prefers-reduced-motion: reduce) { .call-voice-ring::before, .call-voice-ring::after { animation: none !important; } }
.call-controls { display: flex !important; flex-wrap: wrap; justify-content: center; }
.call-btn { flex: 0 0 30%; }
.call-btn.end { flex-basis: 100%; }
#call-mute { order: 1; } #call-speaker { order: 2; } #call-cam { order: 3; } #call-flip { order: 4; } #call-share { order: 5; } #call-more { order: 6; }
.call-panel.voice { background: radial-gradient(90% 55% at 50% 18%, rgba(99, 102, 241, 0.32), transparent 70%), radial-gradient(70% 45% at 50% 100%, rgba(219, 39, 119, 0.16), transparent 70%), #0f1117; }
.call-panel.video .call-btn { flex: 0 0 auto; }

/* ==========================================================================
   Notes, bold: the day on a vivid stage, clean scrolling rows, heavier headings, crisper cards
   ========================================================================== */
.notes-home .nh-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 30px 28px 26px; border: 0; border-radius: 16px; color: #fff;
    background:
        radial-gradient(55% 70% at 6% 0%, rgba(236, 72, 153, 0.85), transparent 70%),
        radial-gradient(45% 75% at 100% 0%, rgba(245, 158, 11, 0.75), transparent 70%),
        radial-gradient(60% 80% at 88% 100%, rgba(124, 58, 237, 0.95), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, rgba(79, 70, 229, 0.95), transparent 70%),
        #0d0a24;
    box-shadow: 0 24px 50px -28px rgba(13, 10, 36, 0.8);
}
.notes-home .nh-title { color: #fff; font-weight: 900; }
.notes-home .nh-title span { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.notes-home .nh-greet { color: rgba(255, 255, 255, 0.86); }
.notes-home .nh-stats { gap: 8px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.86); }
.notes-home .nh-stats > span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.notes-home .nh-stats b { color: #fff; font-weight: 800; }
.notes-home .nh-streak .i { color: rgba(255, 255, 255, 0.7); }
.notes-home .nh-streak.on { background: rgba(251, 146, 60, 0.3) !important; }
.notes-home .nh-streak.on .i { color: #fdba74; }
.notes-home .nh-day i { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.16); }
.notes-home .nh-day.on i { background: #fff; }
.notes-home .nh-day.today i { box-shadow: 0 0 0 2px rgba(13, 10, 36, 0.4), 0 0 0 4px #fff; }
.notes-home .nh-day small { color: rgba(255, 255, 255, 0.7); }
.notes-home .nh-day.today small { color: #fff; font-weight: 800; }
.notes-home .nh-write { background: #fff !important; color: #1e1b4b !important; box-shadow: 0 12px 26px -12px rgba(13, 10, 36, 0.8); }
.notes-home .nh-write .i { color: #4f46e5; }
.notes-home .nh-voice { background: rgba(255, 255, 255, 0.16) !important; border-color: transparent !important; color: #fff !important; }
.notes-home .nh-voice .i { color: #fff !important; }
.notes-home .nh-private, .notes-home .nh-friends { color: rgba(255, 255, 255, 0.8); }
.notes-home .nh-private .i { color: rgba(255, 255, 255, 0.8); }
.notes-home .nh-write:focus-visible, .notes-home .nh-voice:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Headings with a badge, like Explore */
.notes-home .nh-h { gap: 10px; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.025em; }
.notes-home .nh-h > .i { box-sizing: content-box; width: 17px; height: 17px; padding: 8px; border-radius: 11px; background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #db2777); color: #fff; box-shadow: 0 6px 14px -8px rgba(124, 58, 237, 0.8); }

/* Sideways rows: no scrollbar, edges fade out */
.notes-home :is(.nh-templates, .nh-pinned) { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent); padding-inline: 12px; margin-inline: -12px; }
.notes-home :is(.nh-templates, .nh-pinned)::-webkit-scrollbar { display: none; }
.notes-home .nh-template { border-radius: 16px; transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 160ms; }
.notes-home .nh-template:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .notes-home .nh-template:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(13, 10, 36, 0.5); } }

/* Cards */
.notes-home .mcard { border-radius: 16px; }
.notes-home .mcard .mcard-title, .notes-home .mcard h3, .notes-home .mcard strong:first-child { letter-spacing: -0.015em; }
@media (hover: hover) and (pointer: fine) { .notes-home .mcard[role="button"]:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(13, 10, 36, 0.55); } }
.mcard .hashtag-inline { color: inherit !important; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* The filter row: one tidy line that scrolls sideways on phones */
@media (max-width: 760px) {
    .notes-home .nh-hero { padding: 24px 18px 20px; }
    .notes-home .nh-controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
    .notes-home .nh-controls::-webkit-scrollbar { display: none; }
    .notes-home .nh-controls > * { flex: none; }
}

/* ==========================================================================
   Effects ported from Aceternity UI (Aurora background, Card spotlight) to plain CSS:
   the vivid headers drift very slowly; on a mouse, a soft light follows the pointer across cards
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    :is(.notes-home .nh-hero, .explore .ex-hero) { background-size: 170% 170%; animation: aurora-drift 22s ease-in-out infinite alternate; }
}
@keyframes aurora-drift { 0% { background-position: 0% 0%; } 50% { background-position: 60% 40%; } 100% { background-position: 100% 100%; } }
@media (hover: hover) and (pointer: fine) {
    :is(.mcard, .nh-template, .ex-tile, .gm-tile) { position: relative; isolation: isolate; }
    :is(.mcard, .nh-template, .ex-tile, .gm-tile)::after {
        content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
        background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 62%);
        mix-blend-mode: soft-light; transition: opacity 220ms ease-out;
    }
    :is(.mcard, .nh-template, .ex-tile, .gm-tile):hover::after { opacity: 1; }
}
.notes-home :is(.nh-templates, .nh-pinned) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

/* Notes: a card can never be wider than the screen — the list column is capped, and anything long
   inside a card (a link, a long word, a voice note, a photo) wraps or shrinks to fit */
.masonry.as-list { grid-template-columns: minmax(0, 1fr); }
.masonry > .mcard { min-width: 0; max-width: 100%; }
.mcard :is(h3, .mcard-body, .mcard-hashtags, .mcard-tags) { min-width: 0; overflow-wrap: anywhere; }
.mcard :is(img, video, audio, svg, canvas, .vn, .mcard-audio) { max-width: 100%; }
/* …and the sections around them: a grid column there also grew to fit its widest content */
.notes-home, .nh-sec { grid-template-columns: minmax(0, 1fr); }
.nh-sec > *, .notes-home > * { min-width: 0; }

/* ---------- Calls: who's on the line, and recording ---------- */
.call-btn.rec.on .i { background: #ef4444 !important; color: #fff !important; animation: rec-pulse 1.6s ease-in-out infinite; }
.call-btn.rec.on span { color: #fca5a5; font-variant-numeric: tabular-nums; }
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.18); } }
#call-people { order: 7; } #call-rec { order: 8; } #call-more { order: 9; }
.call-people { margin: 0 0 12px; padding: 6px 6px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: #fff; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.call-people[hidden] { display: none; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 10px; }
.cp-head strong { font-size: 0.95rem; }
.cp-head .icon-btn { color: #fff; }
.cp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .cp-row:hover { background: rgba(255, 255, 255, 0.08); } }
.cp-row.waiting { opacity: 0.6; cursor: default; }
.cp-av { position: relative; flex: none; border-radius: 50%; transition: box-shadow 150ms; }
.cp-row.speaking .cp-av { box-shadow: 0 0 0 3px #34d399; }
.cp-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.cp-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.cp-name strong small { font-weight: 500; opacity: 0.7; }
.cp-name > small { color: rgba(255, 255, 255, 0.65); font-size: 0.8rem; }
.cp-flags { display: flex; gap: 4px; flex: none; }
.cp-flag { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.cp-flag .i { width: 15px; height: 15px; }
.cp-flag.muted { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.cp-flag.rec { background: #ef4444; color: #fff; }
.cp-flag.hand { background: rgba(251, 191, 36, 0.25); color: #fde68a; }
.cp-flag.weak { background: rgba(251, 191, 36, 0.2); color: #fcd34d; }
.cp-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 6px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cp-add .i { width: 18px; height: 18px; }
.call-join-text { display: grid; line-height: 1.2; text-align: left; }
.call-join-text small { font-size: 0.74rem; font-weight: 600; opacity: 0.85; }
.call-people:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px; flex: none; align-content: start; }
.call-panel:has(.call-people:not([hidden])) .call-stage { min-height: 150px !important; }
.call-panel:has(.call-people:not([hidden])) .call-voice-ring { width: 104px; height: 104px; }
.call-panel:has(.call-people:not([hidden])) .call-voice-ring .avatar.xl { width: 88px; height: 88px; font-size: 1.8rem; }
.call-panel:has(.call-people:not([hidden])) .call-voice-name { font-size: 1.3rem; margin-top: 2px; }
.call-panel:has(.call-people:not([hidden])) .call-stage { display: none !important; }
.call-people:not([hidden]) { max-height: 46vh; }
.call-panel:has(.call-people:not([hidden])) .call-head-text { visibility: visible !important; }

/* Unanswered call: Call again */
.call-again { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.call-again-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #22c55e; color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(34, 197, 94, 0.8); }
.call-again-btn .i { width: 18px; height: 18px; }
.call-again-btn:active { transform: scale(0.97); }
.call-again-close { min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.call-panel.ended .call-stage { visibility: visible; }

/* Wordplay matches: a +points bubble when a score changes; a calm offline state */
.wpm-p { overflow: visible; }
.wpm-gain { position: absolute; top: -10px; right: 6px; padding: 2px 8px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 0.74rem; font-style: normal; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.8); animation: wpm-gain 3.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; pointer-events: none; }
@keyframes wpm-gain { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.wpm-game.offline .wpm-bag { color: #f59e0b; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .wpm-gain { animation: none; } }

/* ---------- Profile: friends ---------- */
.pf-stats { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
@media (max-width: 480px) { .pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 10px; } }
.pf-friends { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-friends header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pf-friends h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; }
.pf-friends h2 span { margin-left: 4px; color: var(--text-muted); font-weight: 600; }
.pf-friends header small { color: var(--text-muted); font-size: 0.82rem; }
.pf-friends header .link-btn { margin-left: auto; font-weight: 700; }
.pf-friends-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; overscroll-behavior-x: contain; }
.pf-friends-row::-webkit-scrollbar { display: none; }
.pf-friend { position: relative; flex: none; display: grid; justify-items: center; gap: 6px; width: 64px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pf-friend span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 600; }
.pf-friend .avatar { transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.pf-friend:active .avatar { transform: scale(0.94); }
.pf-mutual { position: absolute; top: 40px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--surface); }

/* ==========================================================================
   Feed, upgraded: cleaner cards, clearer actions, comments that read like a conversation
   ========================================================================== */
body[data-view="feed"] .post.ig { border-radius: 16px; border-color: color-mix(in srgb, var(--text) 8%, transparent); box-shadow: 0 1px 2px rgba(13, 10, 36, 0.04), 0 10px 28px -22px rgba(13, 10, 36, 0.45); }
body[data-view="feed"] .post.ig .post-head { padding: 14px 16px 10px; }
body[data-view="feed"] .post.ig .post-who strong, body[data-view="feed"] .post.ig .post-who .name-link { font-weight: 800; letter-spacing: -0.01em; }
body[data-view="feed"] .post.ig .post-text { font-size: 1.02rem; line-height: 1.55; }
/* Actions: comfortable hit areas, counts beside icons, a gentle press */
.post-actions { gap: 2px; padding: 4px 10px; }
.post-actions .act { min-height: 44px; min-width: 44px; border-radius: 12px; }
.post-actions .act:active { transform: scale(0.92); }
.post-actions .like-btn[aria-pressed="true"] .i { animation: like-pop 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes like-pop { 40% { transform: scale(1.28); } }
@media (prefers-reduced-motion: reduce) { .post-actions .like-btn[aria-pressed="true"] .i { animation: none; } }

/* Comments on a card: faces, bubbles, a real input */
.post.ig .comments { display: grid; gap: 8px; padding: 4px 16px 14px; }
.comment-preview { display: grid; gap: 8px; margin: 0; }
.cp-item { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.cp-av { flex: none; margin-top: 2px; }
.cp-line { margin: 0 !important; padding: 7px 12px; border-radius: 4px 16px 16px 16px; background: var(--input); font-size: 0.92rem; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; display: block !important; -webkit-line-clamp: unset !important; }
.cp-line strong { margin-right: 4px; font-weight: 800; }
.cp-all { justify-self: start; padding: 0; font-size: 0.86rem; font-weight: 700; }
.comment-form { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 4px 4px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); transition: border-color 160ms, box-shadow 160ms; }
.comment-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-av { flex: none; display: grid; }
.comment-form input { flex: 1; min-width: 0; min-height: 36px; padding: 0 4px; border: 0 !important; background: none !important; box-shadow: none !important; outline: none; }
.c-send, .pv-send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform 120ms, opacity 160ms; }
.c-send .i, .pv-send .i { width: 17px; height: 17px; }
.c-send:active, .pv-send:active { transform: scale(0.9); }
.pv-send:disabled { opacity: 0.35; cursor: default; }
.comment-form:has(input:placeholder-shown) .c-send { opacity: 0.35; }

/* Full comments (post view and sheet): bubbles, clear names, tidy meta row */
.comment.full { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.comment.full .c-av { flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.comment.full .c-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.comment.full .c-bubble { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 4px 18px 18px 18px; background: var(--input); font-size: 0.95rem; line-height: 1.45; overflow-wrap: anywhere; }
.comment.full .c-bubble strong { display: block; margin-bottom: 1px; font-size: 0.84rem; font-weight: 800; }
.comment.full .comment-meta { display: flex; align-items: center; gap: 4px; padding-left: 12px; font-size: 0.78rem; color: var(--text-muted); }
.comment.full .comment-meta .link-btn { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .comment.full .comment-meta .link-btn:hover { color: var(--text); } }
.pv-c-head { display: flex; align-items: baseline; gap: 6px; font-size: 1.05rem; font-weight: 900; letter-spacing: -0.015em; }
.pv-c-head span { color: var(--text-muted); font-weight: 600; }
.pv-compose { gap: 8px; border-radius: 999px; }
.pv-c-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 12px; color: var(--text-muted); text-align: center; }
.pv-c-empty .i { width: 30px; height: 30px; color: var(--accent); opacity: 0.8; }
.pv-c-empty strong { color: var(--text); }

/* ==========================================================================
   Comments, Instagram-style: name and text inline, a quiet meta line, a heart on the right,
   replies tucked under their comment behind "—— View 3 replies"
   ========================================================================== */
.igc-thread { display: grid; gap: 2px; padding: 6px 0; }
.igc { display: flex; align-items: flex-start; gap: 12px; }
.igc .c-av { flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.igc-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.igc-text { margin: 0; font-size: 0.94rem; line-height: 1.42; overflow-wrap: anywhere; }
.igc-name { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.igc-at { color: var(--accent); font-weight: 600; }
.igc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.78rem; color: var(--text-muted); }
.igc-meta button { min-height: 24px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .igc-meta button:hover { color: var(--text); } }
.igc-meta span { font-weight: 700; }
.igc-heart { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.igc-heart .i { width: 15px; height: 15px; }
.igc-heart[aria-pressed="true"] { color: #ed4956; }
.igc-heart[aria-pressed="true"] .i { animation: like-pop 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.igc-replies { display: grid; gap: 10px; margin-left: 44px; padding-top: 4px; }
.igc.reply { gap: 10px; }
.igc.reply .igc-text { font-size: 0.9rem; }
.igc-toggle { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 28px; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.igc-toggle span { display: block; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.igc-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--input); font-size: 0.84rem; color: var(--text-muted); }
.igc-replying strong { color: var(--text); }
.igc-replying button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.igc-replying button .i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .igc-heart[aria-pressed="true"] .i { animation: none; } }

/* Reply box, right under the comment you're answering */
.igc-inline { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 4px 4px 4px 4px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); animation: igc-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes igc-in { from { opacity: 0; transform: translateY(-4px); } }
.igc-inline input { flex: 1; min-width: 0; min-height: 34px; padding: 0 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.igc-inline .c-send { width: 34px; height: 34px; }
.igc-inline .c-send:disabled { opacity: 0.35; cursor: default; }
.igc-inline-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.igc-inline-x .i { width: 16px; height: 16px; }
.igc-inline.sending { opacity: 0.6; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .igc-inline { animation: none; } }
.comments.full, .igc-thread, .igc-replies { min-width: 0; max-width: 100%; overflow-x: clip; }
#post-view .pv-scroll, #post-view .pv-shell { overflow-x: hidden; }
.igc-replies { grid-template-columns: minmax(0, 1fr); }
.igc-inline { width: 100%; min-width: 0; box-sizing: border-box; }
.igc-inline input { width: 0; }

/* ==========================================================================
   Invite friends
   ========================================================================== */
.inv { display: grid; gap: 18px; max-width: 720px; margin: 0 auto; padding-bottom: 40px; }
.inv-hero {
    display: grid; gap: 14px; padding: 30px 26px 24px; border-radius: 16px; color: #fff;
    background:
        radial-gradient(55% 70% at 6% 0%, rgba(236, 72, 153, 0.85), transparent 70%),
        radial-gradient(45% 75% at 100% 0%, rgba(245, 158, 11, 0.75), transparent 70%),
        radial-gradient(60% 80% at 88% 100%, rgba(124, 58, 237, 0.95), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, rgba(79, 70, 229, 0.95), transparent 70%),
        #0d0a24;
    box-shadow: 0 24px 50px -28px rgba(13, 10, 36, 0.8);
}
.inv-hero h2 { margin: 0; max-width: 14ch; font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.inv-hero p { margin: 0; max-width: 44ch; color: rgba(255, 255, 255, 0.86); line-height: 1.5; }
.inv-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 14px; background: #fff; color: #18181b; }
.inv-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.92rem; }
.inv-copy { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.inv-copy .i { width: 16px; height: 16px; }
.inv-share { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.inv-btn.primary { background: #fff; color: #1e1b4b; }
.inv-btn .i { width: 17px; height: 17px; }
.inv-btn:active, .inv-copy:active { transform: scale(0.97); }
.inv-btn:focus-visible, .inv-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.inv-sec { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.inv-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 1.1rem; font-weight: 900; letter-spacing: -0.02em; }
.inv-sec h3 span { color: var(--text-muted); font-weight: 600; }
.inv-email { display: flex; gap: 8px; }
.inv-email input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.inv-email input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inv-email .primary-btn { min-height: 46px; padding: 0 18px; }
.inv-people { display: flex; flex-wrap: wrap; gap: 14px; }
.inv-person { display: grid; justify-items: center; gap: 6px; width: 64px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.inv-person span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-empty { margin: 0; color: var(--text-muted); }
@media (max-width: 760px) { .inv-hero { padding: 24px 18px 18px; } }

/* Tagging people */
.mention-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mention-link:hover { text-decoration: underline; } }
.post.ig .mention-link, .cp-line .mention-link { color: var(--accent); }
.mention-pop { position: fixed; z-index: 200; display: grid; gap: 2px; max-height: 280px; overflow-y: auto; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 18px 40px -16px rgba(13, 10, 36, 0.45); }
.mention-pop[hidden] { display: none; }
.mention-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mention-opt span { display: grid; min-width: 0; line-height: 1.25; }
.mention-opt strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-opt small { color: var(--text-muted); font-size: 0.78rem; }
.mention-opt.on, .mention-opt:focus-visible { background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .mention-opt:hover { background: var(--input); } }
.inv { grid-template-columns: minmax(0, 1fr); }
.inv > *, .inv-hero > *, .inv-sec > * { min-width: 0; }
.pop-item.pop-invite { color: var(--accent); font-weight: 700; }
.pop-item.pop-invite span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-item.pop-invite .i { color: var(--accent); }

/* ---------- Profile: compact numbers, and a welcome for newcomers ---------- */
.pf-stats { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 14px; padding-top: 12px; }
.pf-stats .pf-stat { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 0.92rem; text-align: left; }
.pf-stats .pf-stat b { color: var(--text); font-size: 1rem; font-weight: 800; margin-right: 2px; font-variant-numeric: tabular-nums; }
.pf-stats button.pf-stat { cursor: pointer; }
.pf-stats button.pf-stat::after { content: ''; position: absolute; inset: -8px -4px; }
.pf-stats button.pf-stat { position: relative; }
@media (hover: hover) and (pointer: fine) { .pf-stats button.pf-stat:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } }
.pf-substats { margin: 6px 0 0; color: var(--text-muted); font-size: 0.84rem; }
.pf-new { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.pf-new-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; }
.pf-new-ic .i { width: 20px; height: 20px; }
.pf-new-text { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35; }
.pf-new-text span { color: var(--text-muted); font-size: 0.88rem; }
.pf-new .pf-btn { flex: none; }
@media (max-width: 480px) { .pf-new { flex-wrap: wrap; } .pf-new .pf-btn { width: 100%; justify-content: center; } }
.pf-welcome { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.pf-welcome header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pf-welcome header strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.pf-welcome header span { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.pf-welcome-bar { height: 6px; border-radius: 999px; background: var(--input); overflow: hidden; }
.pf-welcome-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #db2777); transition: width 400ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.pf-welcome ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-welcome li { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pf-step-dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); }
.pf-welcome li.done .pf-step-dot { border-color: #16a34a; background: #16a34a; color: #fff; }
.pf-step-dot .i { width: 13px; height: 13px; }
.pf-step-label { flex: 1; font-size: 0.92rem; }
.pf-welcome li.done .pf-step-label { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.pf-welcome .link-btn { font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.req-note { display: block; margin-top: 3px; color: var(--text); font-size: 0.86rem; font-style: italic; overflow-wrap: anywhere; }
/* "A new version is ready" */
/* Compact pill, centred without transforms so it never shrinks to half the screen on phones */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(148px + env(safe-area-inset-bottom, 0px)); z-index: 300; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 420px; margin: 0 auto; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1); background: #18181b; color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.2; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55); animation: update-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.update-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #4f46e5, #db2777); }
.update-ic .i { width: 15px; height: 15px; }
.update-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; overflow-wrap: break-word; padding-right: 2px; }
.update-bar button { display: grid; place-items: center; flex: none; min-height: 32px; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: #fff; color: #18181b; font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 100ms ease-out; }
.update-bar button:active { transform: scale(0.95); }
.update-bar .update-later { width: 32px; min-width: 32px; padding: 0; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); position: relative; }
.update-bar .update-later::after { content: ''; position: absolute; inset: -6px; }
.update-bar .update-later .i { width: 15px; height: 15px; }
@keyframes update-in { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 761px) { .update-bar { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .update-bar { animation: none; } }

/* ---------- Continue with Google ---------- */
.auth-oauth { display: grid; gap: 14px; }
.auth-oauth[hidden] { display: none; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 100ms ease-out, background 120ms, border-color 120ms; }
.auth-google:active { transform: scale(0.98); }
.auth-google:disabled { opacity: 0.6; cursor: progress; }
.auth-google:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.45); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .auth-google:hover { background: var(--input); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); } }
.auth-g { width: 20px; height: 20px; flex: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- Spaces: live audio rooms ---------- */
.theme-violet { --sp-a: #4f46e5; --sp-b: #9333ea; }
.theme-sunset { --sp-a: #db2777; --sp-b: #f97316; }
.theme-ocean { --sp-a: #0369a1; --sp-b: #0d9488; }
.theme-forest { --sp-a: #15803d; --sp-b: #65a30d; }
.theme-night { --sp-a: #1e1b4b; --sp-b: #334155; }
.spaces { display: grid; gap: 16px; }
.sp-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px; border-radius: 24px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18), transparent 45%), linear-gradient(135deg, #4f46e5, #9333ea 55%, #db2777); }
.sp-hero h2 { margin: 0 0 4px; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.sp-hero p { margin: 0; max-width: 42ch; opacity: 0.9; }
.sp-hero-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff !important; color: #312e81 !important; }
.sp-hero-btn .i { width: 18px; height: 18px; }
.sp-loading { padding: 20px 4px; }
.sp-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.sp-row .sp-card { flex: none; width: 250px; }
.sp-card { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 170px; padding: 16px; border-radius: 20px; color: #fff; text-align: left; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.2), transparent 50%), linear-gradient(145deg, var(--sp-a, #4f46e5), var(--sp-b, #9333ea)); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--sp-a, #4f46e5) 80%, transparent); }
.sp-card-hit { position: absolute; inset: 0; z-index: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.sp-card-hit:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.sp-card > :not(.sp-card-hit) { position: relative; z-index: 1; pointer-events: none; }
.sp-card > .sp-card-actions { pointer-events: auto; }
.sp-card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; }
.sp-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sp-pulse 1.4s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: 0.3; } }
.sp-when, .sp-topic { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); font-size: 0.74rem; font-weight: 700; }
.sp-when .i, .sp-topic .i { width: 12px; height: 12px; }
.sp-title { font-size: 1.12rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-about { margin: 0; font-size: 0.86rem; opacity: 0.88; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; min-width: 0; }
.sp-faces { display: flex; flex: none; }
.sp-faces .avatar { width: 30px; height: 30px; font-size: 0.7rem; border: 2px solid rgba(255, 255, 255, 0.85); }
.sp-faces .avatar + .avatar { margin-left: -10px; }
.sp-faces .presence-dot { display: none; }
.sp-meta { min-width: 0; font-size: 0.82rem; font-weight: 600; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.sp-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; border-radius: 12px; background: #fff; color: #111827; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; }
.sp-go .i, .sp-mini-btn .i { width: 16px; height: 16px; }
.sp-mini-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; }
.sp-new { place-content: center; justify-items: center; text-align: center; gap: 6px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface); color: var(--text); box-shadow: none; cursor: pointer; font: inherit; }
.sp-new small { color: var(--text-muted); font-size: 0.8rem; max-width: 24ch; }
.sp-new-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #4f46e5, #db2777); color: #fff; }
.sp-go:active, .sp-mini-btn:active, .sp-new:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .sp-card:has(.sp-card-hit:hover) { filter: brightness(1.06); }
    .sp-new:hover { border-color: var(--accent); }
    .sp-mini-btn.danger:hover { background: rgba(239, 68, 68, 0.6); }
}

/* Create / edit */
.sp-edit { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.sp-edit-form { display: grid; gap: 12px; }
.sp-edit-form h3 { margin: 0; }
.sp-edit-preview { display: grid; place-items: center; height: 64px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); }
.sp-edit-preview .i { width: 26px; height: 26px; }
.sp-themes { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-theme { position: relative; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.sp-theme input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-theme:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.sp-theme:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.sp-edit .ask-actions { flex-wrap: wrap; }

/* The room */
.sp-room { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.55); }
.sp-room[hidden], .sp-mini[hidden] { display: none; }
.sp-sheet { display: flex; flex-direction: column; width: 100%; max-width: 560px; height: 100dvh; background: var(--bg, #0b0b0f); color: var(--text); overflow: hidden; animation: sp-up 320ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes sp-up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 761px) { .sp-room { align-items: center; } .sp-sheet { height: min(820px, calc(100dvh - 48px)); border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); } }
.sp-room-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; color: #fff; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); }
.sp-head-count { flex: 1; font-size: 0.86rem; font-weight: 700; opacity: 0.92; }
.sp-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.sp-icon .i { width: 20px; height: 20px; }
.sp-room-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 20px; }
.sp-room-title { margin: 0 -16px 8px; padding: 6px 20px 22px; color: #fff; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); border-radius: 0 0 26px 26px; }
.sp-room-title h2 { margin: 8px 0 0; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sp-room-title p { margin: 6px 0 0; opacity: 0.9; font-size: 0.92rem; overflow-wrap: anywhere; }
.sp-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--input); font-size: 0.86rem; }
.sp-sec-h { margin: 18px 0 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.sp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 8px; }
.sp-people.stage { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.sp-person { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.sp-av { position: relative; display: grid; place-items: center; border-radius: 50%; }
.sp-av .avatar.lg { width: 58px; height: 58px; font-size: 1rem; }
.sp-people.stage .sp-av .avatar.lg { width: 70px; height: 70px; font-size: 1.15rem; }
.sp-av .presence-dot { display: none; }
.sp-av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; transition: border-color 120ms, transform 160ms; }
.sp-person.talking .sp-av::after { border-color: #22c55e; transform: scale(1.04); }
.sp-muted { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: 0 0 0 2px var(--bg, #0b0b0f); }
.sp-muted .i { width: 13px; height: 13px; }
.sp-hand { position: absolute; right: -4px; top: -4px; font-size: 1.1rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.sp-name { display: flex; align-items: center; gap: 3px; max-width: 100%; font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-badge.host { color: #22c55e; font-size: 0.8rem; }
.sp-empty-aud { font-size: 0.88rem; }
.sp-float { position: absolute; left: 50%; bottom: 60%; font-size: 1.6rem; pointer-events: none; animation: sp-float 1.8s ease-out forwards; }
@keyframes sp-float { from { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.sp-hands { margin-top: 14px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border)); }
.sp-hands h4 { margin: 0 0 8px; font-size: 0.9rem; }
.sp-hand-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sp-hand-row > span:not(.avatar) { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-invite { min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.sp-room-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.sp-leave { min-height: 44px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--input); color: #ef4444; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sp-react { flex: 1; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.sp-emoji { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--input); font-size: 1.15rem; cursor: pointer; }
.sp-round { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--input); color: var(--text); cursor: pointer; font-size: 1.2rem; }
.sp-round.big { width: 56px; height: 56px; }
.sp-round .i { width: 22px; height: 22px; }
.sp-round.on { background: #22c55e; color: #fff; }
.sp-round.leave { background: rgba(239, 68, 68, 0.9); color: #fff; }
.sp-leave:active, .sp-emoji:active, .sp-round:active, .sp-icon:active, .sp-invite:active { transform: scale(0.94); }
.sp-leave, .sp-emoji, .sp-round, .sp-icon, .sp-invite, .sp-person, .sp-go, .sp-mini-btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 100ms ease-out, background 120ms; }
body.sp-open { overflow: hidden; }
@media (max-width: 380px) { .sp-emoji { width: 34px; height: 34px; font-size: 1rem; } .sp-leave { padding: 0 12px; } }

/* Minimised: keep listening while you browse */
.sp-mini { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 240; display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 auto; padding: 8px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6); animation: update-in 280ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@media (min-width: 761px) { .sp-mini { bottom: 20px; left: auto; right: 20px; width: 380px; } }
.sp-mini-open { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sp-mini-text { display: grid; min-width: 0; }
.sp-mini-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mini-text small { font-size: 0.76rem; opacity: 0.88; }
.sp-mini .sp-round { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); color: #fff; }
.sp-mini .sp-round.on { background: #22c55e; }
.sp-mini .sp-round.leave { background: rgba(239, 68, 68, 0.9); }
@media (prefers-reduced-motion: reduce) { .sp-sheet, .sp-mini, .sp-live i, .sp-float { animation: none; } }
.sp-edit textarea { width: 100%; min-height: 64px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; font-weight: 500; resize: vertical; }
.sp-edit textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Note → video / audio ---------- */
dialog.nm { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); overflow: hidden; }
dialog.nm::backdrop { background: rgba(0, 0, 0, 0.6); }
.nm-card { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.nm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px 20px; }
.nm-head h3 { margin: 0; font-size: 1.15rem; }
.nm-tabs { display: flex; gap: 6px; margin: 0 20px 12px; padding: 4px; border-radius: 14px; background: var(--input); }
.nm-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); font: inherit; font-weight: 800; cursor: pointer; }
.nm-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3); }
.nm-tabs .i { width: 18px; height: 18px; }
.nm-video, .nm-audio { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; }
.nm-video { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.nm-stage { position: relative; }
.nm-canvas { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; background: #111; object-fit: cover; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); }
.nm-progress { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.nm-progress[hidden] { display: none; }
.nm-progress span { display: block; width: 0; height: 5px; border-radius: 3px; background: #fff; }
.nm-progress small { font-weight: 700; font-size: 0.8rem; }
.nm-controls { display: grid; gap: 14px; align-content: start; }
.nm-controls.busy { opacity: 0.45; pointer-events: none; }
.nm-looks { display: flex; flex-wrap: wrap; gap: 10px; }
.nm-look { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.nm-look[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.nm-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--input); }
.nm-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.nm-seg button[aria-checked="true"] { background: var(--surface); color: var(--text); }
.nm-seg .i { width: 15px; height: 15px; }
.nm-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); cursor: pointer; }
.nm-switch input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.nm-switch span { display: grid; gap: 2px; }
.nm-switch small { color: var(--text-muted); font-size: 0.82rem; }
.nm-meta { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.nm-done { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.nm-done .i { width: 18px; height: 18px; color: #16a34a; }
.nm-wide { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; }
.nm-wide .i { width: 18px; height: 18px; }
.nm-audio { display: grid; gap: 14px; }
.nm-prompter { max-height: min(46dvh, 380px); overflow-y: auto; padding: 18px 20px; border-radius: 18px; background: var(--input); font-size: 1.25rem; line-height: 1.6; scroll-behavior: auto; }
.nm-prompter h4 { margin: 0 0 8px; font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; }
.nm-prompter p { margin: 0; overflow-wrap: anywhere; }
.nm-rec-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.nm-timer { justify-self: end; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; }
.nm-timer-cap { color: var(--text-muted); font-size: 0.8rem; }
.nm-rec { display: grid; place-items: center; width: 72px; height: 72px; border: 0; border-radius: 50%; background: #ef4444; color: #fff; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(239, 68, 68, 0.9); touch-action: manipulation; transition: transform 100ms ease-out; }
.nm-rec .i { width: 30px; height: 30px; }
.nm-rec:active { transform: scale(0.94); }
.nm-rec.on { animation: nm-pulse 1.4s ease-in-out infinite; }
.nm-stop { width: 24px; height: 24px; border-radius: 5px; background: #fff; }
@keyframes nm-pulse { 50% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.18); } }
.nm-player { width: 100%; }
.pc-tool.note-media .i { color: #a855f7; }
@media (max-width: 640px) {
    .nm-video { grid-template-columns: minmax(0, 1fr); }
    .nm-stage { width: min(100%, 250px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .nm-rec.on { animation: none; } }

/* ---------- Spaces list, Clubhouse-style ---------- */
.spaces.cl { display: block; max-width: 680px; margin: 0 auto; padding-bottom: 8px; }
.cl { --cl-card: color-mix(in srgb, var(--text) 7%, var(--surface)); --cl-blue: #0b6fe0; }
.cl-chips { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.cl-chips::-webkit-scrollbar { display: none; }
.cl-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 20px; border: 1.5px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.cl-chip .i { width: 18px; height: 18px; }
.cl-chip[aria-pressed="true"] { border: 2px solid var(--text); background: var(--cl-card); font-weight: 800; }
.cl-list { display: grid; gap: 14px; }
.cl-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; min-height: 150px; padding: 18px 16px 18px 20px; border-radius: 28px; background: var(--cl-card); color: var(--text); }
.cl-card.off { min-height: 0; }
.cl-card.here { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cl-blue) 70%, transparent); }
.cl-hit { position: absolute; inset: 0; z-index: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.cl-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cl-card > :not(.cl-hit) { position: relative; z-index: 1; pointer-events: none; }
.cl-card > .cl-now, .cl-card > .cl-manage { pointer-events: auto; }
.cl-main { display: grid; gap: 10px; min-width: 0; }
.cl-club { display: flex; align-items: center; gap: 10px; min-width: 0; color: color-mix(in srgb, var(--text) 82%, transparent); font-size: 0.95rem; }
.cl-club-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: 0.95rem; overflow: hidden; }
.cl-club-ic .avatar { width: 26px; height: 26px; border-radius: 7px; font-size: 0.62rem; }
.cl-club-ic .avatar img { border-radius: 7px; }
.cl-club-ic .presence-dot { display: none; }
.cl-club-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-lock .i { width: 14px; height: 14px; opacity: 0.75; }
.cl-title { font-size: 1.22rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.005em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-when { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
.cl-when .i { width: 15px; height: 15px; }
.cl-speaking { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 0.95rem; color: color-mix(in srgb, var(--text) 85%, transparent); }
.cl-speaking .avatar { width: 38px; height: 38px; flex: none; }
.cl-speaking .presence-dot { display: none; }

/* The cluster of faces */
.cl-faces { position: relative; display: block; flex: none; width: 138px; height: 128px; }
.cl-face, .cl-more { position: absolute; display: grid; place-items: center; border-radius: 50%; }
.cl-face .avatar { width: 100% !important; height: 100% !important; font-size: 0.8rem; box-shadow: 0 0 0 3px var(--cl-card); }
.cl-face .presence-dot { display: none; }
.cl-face.f0 { left: 36px; top: 34px; width: 66px; height: 66px; z-index: 2; }
.cl-face.f0 .avatar { font-size: 1.05rem; }
.cl-face.f1 { left: 64px; top: 0; width: 44px; height: 44px; }
.cl-face.f2 { left: 98px; top: 30px; width: 40px; height: 40px; }
.cl-face.f3 { left: 0; top: 22px; width: 44px; height: 44px; }
.cl-face.f4 { left: 4px; top: 80px; width: 42px; height: 42px; }
.cl-more { left: 92px; top: 80px; width: 46px; height: 46px; background: color-mix(in srgb, var(--text) 12%, var(--surface)); color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 0.9rem; font-weight: 700; z-index: 1; }
.cl-faces.n1 .cl-face.f0 { left: 30px; top: 22px; width: 78px; height: 78px; }
.cl-faces.n1 .cl-more { left: 86px; top: 76px; }

/* Buttons */
.cl-now { display: grid; gap: 10px; justify-items: end; }
.cl-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, var(--surface)); color: var(--text); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; white-space: nowrap; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 100ms ease-out, filter 120ms; }
.cl-pill .i { width: 18px; height: 18px; }
.cl-pill.join { background: var(--cl-blue); color: #fff; }
.cl-pill.danger { color: #ef4444; padding: 0 14px; }
.cl-pill:active, .cl-chip:active, .cl-host:active { transform: scale(0.96); }
.cl-manage { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cl-manage .cl-pill { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) {
    .cl-card:has(.cl-hit:hover) { background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
    .cl-pill:hover, .cl-host:hover { filter: brightness(1.1); }
    .cl-chip:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
}

/* "host a room": floats above the list */
.cl-host { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 5; display: flex; align-items: center; gap: 12px; width: fit-content; margin: 22px auto 0; min-height: 60px; padding: 0 34px 0 28px; border: 0; border-radius: 999px; background: var(--cl-blue, #0b6fe0); color: #fff; font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; box-shadow: 0 16px 34px -12px rgba(11, 111, 224, 0.75); touch-action: manipulation; }
.cl-host .i { width: 24px; height: 24px; }
.cl-host.inline { position: static; margin: 4px auto 0; min-height: 50px; font-size: 1rem; padding: 0 26px 0 22px; box-shadow: none; }
body.sp-mini-on .cl-host:not(.inline) { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 761px) { .cl-host { bottom: 24px; } body.sp-mini-on .cl-host:not(.inline) { bottom: 110px; } }
.cl-sub { margin: 26px 4px 12px; font-size: 1rem; font-weight: 800; color: var(--text-muted); }
.cl-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; border-radius: 28px; background: var(--cl-card); text-align: center; }
.cl-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 16px; background: color-mix(in srgb, var(--cl-blue) 18%, transparent); color: var(--cl-blue); }
.cl-empty-ic .i { width: 26px; height: 26px; }
.cl-empty span:last-child { color: var(--text-muted); max-width: 34ch; }
.ex-sec .cl-list { --cl-card: color-mix(in srgb, var(--text) 7%, var(--surface)); --cl-blue: #0b6fe0; }
@media (max-width: 400px) {
    .cl-card { padding: 16px 12px 16px 16px; gap: 10px; }
    .cl-title { font-size: 1.1rem; }
    .cl-faces { width: 118px; height: 112px; transform-origin: right center; }
    .cl-face.f0 { left: 30px; top: 30px; width: 58px; height: 58px; }
    .cl-face.f1 { left: 56px; top: 0; width: 38px; height: 38px; }
    .cl-face.f2 { left: 84px; top: 26px; width: 34px; height: 34px; }
    .cl-face.f3 { left: 0; top: 20px; width: 38px; height: 38px; }
    .cl-face.f4 { left: 2px; top: 70px; width: 36px; height: 36px; }
    .cl-more { left: 78px; top: 70px; width: 40px; height: 40px; font-size: 0.82rem; }
    .cl-pill { padding: 0 16px; }
}

/* "host a room" stays on screen: fixed, centred over the content column (not the sidebar) */
.cl-host:not(.inline) { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin: 0; transform: translateX(-50%); }
.cl-host:not(.inline):active { transform: translateX(-50%) scale(0.96); }
@media (min-width: 761px) { .cl-host:not(.inline) { left: calc(50% + 95px); bottom: 28px; } }
@media (min-width: 1001px) { .cl-host:not(.inline) { left: calc(50% + 110px); } }
.spaces.cl { padding-bottom: 96px; }
body[data-view="spaces"] .fab { display: none; }
.cl-host { white-space: nowrap; }

/* Note → video: characters, music, preview with sound; audio: noise meter */
.nm-play { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nm-play[hidden] { display: none; }
.nm-play .i { width: 16px; height: 16px; }
.nm-play .nm-stop { width: 12px; height: 12px; border-radius: 3px; }
.nm-chars, .nm-tracks { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-char { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.nm-char span { font-size: 1.05rem; }
.nm-char[aria-checked="true"], .nm-track[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.nm-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.nm-track { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 48px; padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 14px; background: none; color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; }
.nm-track > span { grid-row: span 2; font-size: 1.15rem; }
.nm-track small { grid-column: 2; color: var(--accent); font-size: 0.7rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-track.mine small { color: var(--text-muted); }
.nm-volume { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 10px; font-size: 0.84rem; color: var(--text-muted); }
.nm-volume input { width: 100%; accent-color: var(--accent); }
.nm-char:active, .nm-track:active, .nm-play:active { transform: scale(0.97); }
.nm-play:active { transform: translateX(-50%) scale(0.97); }
.nm-meter { position: relative; display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--input); overflow: hidden; font-size: 0.8rem; font-weight: 700; }
.nm-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, #22c55e 35%, transparent); transition: width 60ms linear; }
.nm-meter.closed i { background: color-mix(in srgb, var(--text-muted) 25%, transparent); }
.nm-gate { position: relative; }
.nm-clean-note { display: flex; align-items: center; gap: 6px; margin: 0; color: #16a34a; font-size: 0.86rem; font-weight: 700; }
.nm-clean-note .i { width: 16px; height: 16px; }

/* Room: End button for hosts, and a notes pad while you listen */
.sp-sheet { position: relative; }
.sp-end { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #dc2626; color: #fff; font: inherit; font-size: 0.86rem; font-weight: 800; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(220, 38, 38, 0.9); touch-action: manipulation; transition: transform 100ms ease-out; }
.sp-end:active { transform: scale(0.95); }
.sp-icon.on { background: #fff; color: #111827; }
.sp-notes { position: absolute; left: 0; right: 0; bottom: calc(69px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; height: min(58%, 460px); padding: 14px 16px; border-radius: 24px 24px 0 0; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, 0.6); animation: sp-up 240ms cubic-bezier(0.2, 0.9, 0.3, 1); }
.sp-notes[hidden] { display: none; }
.sp-notes-head { display: flex; align-items: center; gap: 10px; }
.sp-notes-head strong { font-size: 1rem; }
.sp-notes-saved { flex: 1; color: var(--text-muted); font-size: 0.78rem; }
.sp-notes-head .sp-icon { background: var(--input); color: var(--text); width: 36px; height: 36px; }
.sp-notes-text { width: 100%; min-height: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; resize: none; }
.sp-notes-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sp-notes-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-notes-btn { flex: 1; min-height: 42px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.sp-notes-btn.primary { background: #4f46e5; color: #fff; }
.sp-notes-btn:active { transform: scale(0.97); }
@media (max-width: 380px) { .sp-end { padding: 0 10px; font-size: 0.8rem; } .sp-head-count { font-size: 0.78rem; } }
.sp-head-count { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-play { left: auto; right: 12px; bottom: auto; top: 22px; transform: none; min-height: 36px; padding: 0 12px; font-size: 0.8rem; }
.nm-play:active { transform: scale(0.97); }
.nm-upload { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-bottom: 10px; padding: 8px 14px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.nm-upload.on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.nm-upload-ic { font-size: 1.4rem; flex: none; }
.nm-upload-text { display: grid; gap: 2px; min-width: 0; }
.nm-upload-text strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-upload-text small { color: var(--text-muted); font-size: 0.78rem; }
.nm-upload:active { transform: scale(0.98); }
.nm-volume output { color: var(--text); font-weight: 800; margin-left: 4px; }
.nm-audio { grid-template-rows: auto; align-content: start; }
.nm-prompter { min-height: min(34dvh, 260px); }
.nm-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }

/* ---------- Notes sent to a friend's Inbox (note streaks) ---------- */
.share-ic.dm { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.share-ic.story { background: linear-gradient(135deg, #f59e0b, #db2777); color: #fff; }
.msg-note { display: grid; gap: 6px; width: min(280px, 72vw); padding: 12px 14px; border-radius: 16px; background: var(--card, #fde68a); color: #1f2937; text-align: left; }
.msg-note-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; opacity: 0.75; }
.msg-note-title { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.msg-note-text { margin: 0; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-note-more summary { cursor: pointer; font-size: 0.82rem; font-weight: 800; }
.msg-note-more[open] + .msg-note-save { margin-top: 4px; }
.msg-note-more[open] ~ .msg-note-text { display: none; }
.msg-note-save { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.1); color: inherit; font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.msg-note-save .i { width: 14px; height: 14px; }
.msg-note-save:disabled { opacity: 0.7; cursor: default; }
dialog.ns { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.ns-form { display: grid; gap: 12px; }
.ns-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ns-head h3 { margin: 0; }
.ns-preview .msg-note { width: 100%; }
.ns-rule { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; }
.ns-rule strong { color: var(--text); }
.ns-search { margin: 0; }
.ns-list { display: grid; gap: 4px; max-height: min(40dvh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.ns-friend { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.ns-friend:has(input:checked) { background: var(--accent-soft); }
.ns-friend input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.ns-friend .presence-dot { display: none; }
.ns-who { flex: 1; display: grid; min-width: 0; }
.ns-who strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-who small { color: var(--text-muted); font-size: 0.78rem; }
.ns-streak { flex: none; display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #f97316 16%, transparent); color: #ea580c; font-size: 0.82rem; font-weight: 800; }
.ns-streak small { font-size: 0.68rem; font-weight: 700; }
.ns-streak.due { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.ns-empty { padding: 12px; }
@media (hover: hover) and (pointer: fine) { .ns-friend:hover { background: var(--input); } }

/* Reels: "reshared by" line; on phones the page-level header row stays hidden (the top bar already says "Reels") */
.reel-via { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.reel-via .i { width: 14px; height: 14px; }
.reel-act[data-action="reel-reshare"][aria-pressed="true"] { color: #22c55e; }
@media (max-width: 760px) { .reels-head { display: none; } }

/* Share sheet: rows never shrink inside the scrolling body (the cover row was getting squashed) */
.share-body > * { flex-shrink: 0; }
.share-row { min-width: 0; }

/* ---------- View-once notes in chats ---------- */
.nsc { position: relative; display: flex; align-items: center; gap: 12px; width: min(270px, 70vw); min-height: 64px; padding: 10px 14px 10px 10px; border: 0; border-radius: 18px; text-align: left; font: inherit; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); }
.nsc-line { display: grid; gap: 2px; min-width: 0; }
.nsc-line strong { font-size: 0.95rem; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsc-line small { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.nsc-line small .i { width: 13px; height: 13px; color: #16a34a; }
.nsc-glyph { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--card, #c4b5fd), var(--deep, #7c3aed)); color: #fff; }
.nsc-glyph .i { width: 22px; height: 22px; }
.nsc-glyph.hollow { background: none; box-shadow: inset 0 0 0 2px var(--border); color: var(--text-muted); }

/* Sealed: the whole card is the button, in the note's colour */
.nsc.sealed { cursor: pointer; color: #1f2937; background: linear-gradient(135deg, var(--soft, #ede9fe), var(--card, #c4b5fd)); box-shadow: 0 10px 24px -14px var(--deep, #7c3aed); touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 120ms ease-out, box-shadow 120ms; }
.nsc.sealed .nsc-line small { color: rgba(31, 41, 55, 0.72); }
.nsc.sealed:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nsc.sealed:hover { box-shadow: 0 14px 30px -14px var(--deep, #7c3aed); } }
.nsc.sealed:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nsc-dot { position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: nsc-ping 1.8s ease-out infinite; }
@keyframes nsc-ping { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
.nsc.preview { width: 100%; cursor: default; }
.nsc.sent.was-opened .nsc-glyph { filter: saturate(0.4); opacity: 0.8; }
.nsc.gone { opacity: 0.8; }

/* Saved (or older shared notes): the note itself, readable in the chat */
.nsc.open { display: grid; gap: 6px; align-items: start; padding: 12px 14px; color: #1f2937; background: var(--card, #fde68a); box-shadow: none; }
.nsc-hit { position: absolute; inset: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.nsc.open > :not(.nsc-hit) { position: relative; pointer-events: none; }
.nsc.open > .nsc-actions { pointer-events: auto; }
.nsc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; opacity: 0.75; }
.nsc-tag .i { width: 13px; height: 13px; }
.nsc-title { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.nsc-text { margin: 0; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.nsc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nsc-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.1); color: inherit; font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.nsc-btn .i { width: 14px; height: 14px; }
.nsc-btn:active { transform: scale(0.96); }
.nsc-btn:disabled { opacity: 0.7; cursor: default; }

/* ---------- The full-screen viewer ---------- */
dialog.nsv { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: linear-gradient(160deg, var(--card, #c4b5fd), var(--deep, #7c3aed)); color: #111827; }
dialog.nsv::backdrop { background: rgba(0, 0, 0, 0.7); }
@media (min-width: 761px) { dialog.nsv { width: min(480px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 48px)); margin: auto; border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6); } }
.nsv[open] { animation: nsv-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes nsv-in { from { opacity: 0; transform: scale(0.96); } }
.nsv-card { display: flex; flex-direction: column; height: 100%; }
.nsv-head { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 10px 16px; }
.nsv-head .presence-dot { display: none; }
.nsv-who { flex: 1; display: grid; min-width: 0; }
.nsv-who strong { font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsv-who small { font-size: 0.78rem; font-weight: 700; opacity: 0.7; }
.nsv-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: #111827; cursor: pointer; }
.nsv-close .i { width: 20px; height: 20px; }
.nsv-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 4px 14px; padding: 22px 20px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); }
.nsv-body h2 { margin: 0 0 12px; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.nsv-body p { margin: 0; font-size: 1.08rem; line-height: 1.6; overflow-wrap: anywhere; }
.nsv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.nsv-save, .nsv-mine { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out, background 150ms; }
.nsv-save { flex: 1; background: #111827; color: #fff; }
.nsv-save.on { background: #fff; color: #111827; }
.nsv-mine { background: rgba(255, 255, 255, 0.6); color: #111827; }
.nsv-save .i, .nsv-mine .i { width: 18px; height: 18px; }
.nsv-save:active, .nsv-mine:active, .nsv-close:active { transform: scale(0.96); }
.nsv-hint { flex-basis: 100%; margin: 0; text-align: center; font-size: 0.8rem; font-weight: 600; opacity: 0.75; }

/* ---------- Streak chips ---------- */
.ns-chip { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, #f97316 16%, transparent); color: #ea580c; font: inherit; font-size: 0.78rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-chip.risk { background: color-mix(in srgb, #ef4444 14%, transparent); color: #dc2626; }
.ns-chip.row { margin-left: 6px; vertical-align: 1px; }
.ns-chip.head { margin: 0 0 2px; min-height: 26px; padding: 0 10px; cursor: pointer; touch-action: manipulation; }
.ns-chip.head:active { transform: scale(0.95); }
.ns-chip.start { color: var(--text-muted); background: var(--input); }
.ns-rules { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ns-rules li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; }
.ns-rules strong { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .nsc-dot, .nsv[open] { animation: none; } }

/* Streak chips: sized to their content (the chat header stacks its name column, which stretched the chip) */
.ns-chip.head { align-self: flex-start; width: fit-content; max-width: 100%; }
.convo-top .ns-chip.row { flex: none; margin: 0 6px 0 4px; }
.convo-top strong { min-width: 0; }
.convo-bottom .ns-chip.row { flex: none; margin: 0 0 0 6px; }

/* =====================================================================
   Chats on phones: purple header + rounded sheet (inbox, chat, voice note)
   Desktop keeps its layout; the extras below are hidden there.
   ===================================================================== */
.inbox-hero, .inbox-fab, .convo-sec { display: none; }
.inbox-sheet { display: contents; }
.convo-top b, .chat-who-name b { font-weight: 800; }
.name-rest { font-weight: 500; }

@media (max-width: 760px) {
    body[data-view="messages"] { --cp: #6c5ce7; --cp-deep: #5443d6; --cp-ink: #fff; --sheet: var(--surface); }

    /* ---------- Inbox ---------- */
    .inbox-list { position: relative; padding: 0; border: 0; background: linear-gradient(165deg, #7c6df0, var(--cp-deep)); border-radius: 26px; overflow: hidden; }
    .inbox-hero { display: block; padding: 18px 18px 26px; color: var(--cp-ink); }
    .hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .hero-text { min-width: 0; }
    .hero-hi { margin: 0; font-size: 0.82rem; opacity: 0.8; }
    .hero-got { margin: 6px 0 0; font-size: 1rem; font-weight: 500; }
    .hero-count { margin: 2px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
    .hero-count u { text-decoration-thickness: 2px; text-underline-offset: 5px; }
    .hero-btns { display: flex; gap: 8px; flex: none; }
    .hero-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; touch-action: manipulation; }
    .hero-btn[aria-pressed="true"] { background: #fff; color: var(--cp-deep); }
    .hero-btn .i { width: 20px; height: 20px; }
    .hero-btn:active { transform: scale(0.94); }
    .hero-label { margin: 18px 0 10px; font-size: 0.92rem; }
    .hero-label b { font-weight: 800; }
    .hero-contacts { display: flex; gap: 14px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .hero-contacts::-webkit-scrollbar { display: none; }
    .hero-contact { display: grid; justify-items: center; gap: 6px; flex: none; width: 60px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 0.8rem; cursor: pointer; touch-action: manipulation; }
    .hero-contact span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero-contact .avatar.lg { width: 54px; height: 54px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
    .hero-contact:active { transform: scale(0.95); }

    .inbox-list .inbox-head { display: none; }
    .inbox-list .active-now { display: none; }
    .inbox-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: -12px; padding: 16px 0 0; border-radius: 26px 26px 0 0; background: var(--sheet); }
    .inbox-sheet .add-friend { margin: 0 16px 10px; }
    .inbox-sheet .inbox-search { margin: 0 16px 10px; }
    .inbox-sheet .inbox-tabs { padding: 0 16px; gap: 8px; }
    .inbox-sheet .inbox-tab { min-height: 40px; padding: 0 16px; border-radius: 999px; }
    .inbox-sheet .inbox-tab[aria-selected="true"] { background: #fde047; color: #1f2937; }
    .inbox-sheet .inbox-tab[aria-selected="true"] .badge { background: #1f2937; color: #fff; }
    .convo-sec { display: block; margin: 14px 18px 4px; font-size: 0.95rem; font-weight: 800; color: var(--text); }
    .convo-sec span { margin-left: 2px; font-weight: 600; color: var(--text-muted); }
    .inbox-sheet .convo-list { flex: 1; min-height: 0; padding: 4px 8px 84px; }
    .inbox-sheet .convo { border-radius: 16px; }
    .inbox-sheet .convo .avatar.md { width: 52px; height: 52px; }
    .inbox-sheet .convo-top time { font-size: 0.74rem; }
    .inbox-sheet .badge { background: #f43f5e; color: #fff; }
    .inbox-sheet .inbox-foot { display: none; }
    .inbox-fab { display: grid; place-items: center; position: absolute; right: 18px; bottom: 18px; width: 58px; height: 58px; border: 0; border-radius: 50%; background: var(--cp); color: #fff; cursor: pointer; box-shadow: 0 14px 28px -10px rgba(84, 67, 214, 0.8); touch-action: manipulation; z-index: 2; }
    .inbox-fab .i { width: 26px; height: 26px; }
    .inbox-fab:active { transform: scale(0.94); }
    body.chat-open .inbox-fab { display: none; }

    /* ---------- A chat ---------- */
    body.chat-open .inbox .chat-pane { background: linear-gradient(165deg, #7c6df0, var(--cp-deep)); }
    .chat-pane .chat-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px; padding: max(12px, env(safe-area-inset-top)) 8px 26px; border: 0; background: none; color: #fff; }
    .chat-pane .chat-head .chat-who { display: none; }
    .chat-pane .chat-head .friend-name { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
    .chat-pane .chat-head .chat-who-name { max-width: 100%; color: #fff; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chat-pane .chat-head .friend-name small { color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; }
    .chat-pane .chat-head .ns-chip.head { align-self: center; background: rgba(255, 255, 255, 0.18); color: #fff; }
    .chat-pane .chat-head .icon-btn, .chat-pane .chat-head .icon-btn:not(.back-chat) { width: 40px; height: 40px; background: transparent; color: #fff; box-shadow: none; }
    .chat-pane .chat-head .icon-btn.accent { background: rgba(255, 255, 255, 0.16); color: #fff; }
    .chat-pane .chat-head .head-wide { display: none; }
    .chat-pane .chat-thread { margin-top: -18px; border-radius: 26px 26px 0 0; position: relative; z-index: 1; padding: 18px 14px 12px; }
    .chat-pane .chat-placeholder { border-radius: 26px 26px 0 0; }

    /* Bubbles: purple for you, white for them, times underneath */
    .chat-pane .msg.out .msg-card { background: var(--cp); color: #fff; border-radius: 20px 20px 6px 20px; box-shadow: 0 8px 18px -12px rgba(84, 67, 214, 0.9); }
    .chat-pane .msg.in .msg-card { background: var(--surface); color: var(--text); border-radius: 20px 20px 20px 6px; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 0.45); }
    .chat-pane .msg.out .msg-meta { color: rgba(255, 255, 255, 0.8); }
    .chat-pane .msg .avatar.xs { width: 34px; height: 34px; }

    /* Composer: + · pill with emoji · round purple mic/send */
    .chat-pane .composer { position: relative; z-index: 1; background: var(--chat-canvas, var(--surface)); border-top: 0; }
    .chat-pane .composer-plus { background: transparent; color: var(--text); box-shadow: none; }
    .chat-pane .composer-box { border-radius: 999px; background: var(--input); border-color: transparent; }
    .chat-pane .send-btn, .chat-pane .send-btn.dark { width: 50px; height: 50px; border-radius: 50%; background: var(--cp); color: #fff; box-shadow: 0 10px 22px -10px rgba(84, 67, 214, 0.9); }

}
@media (max-width: 760px) {
    .chat-pane .chat-head { position: relative; z-index: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-bottom: 32px; }
    .chat-pane .chat-head .icon-btn .i, .chat-pane .chat-head .icon-btn.accent .i { color: #fff; }
    .chat-pane .chat-thread { margin-top: -22px; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.35); }
}
@media (max-width: 760px) {
    .chat-pane .chat-head { height: auto; min-height: 0; padding-bottom: 46px; align-items: start; }
    .chat-pane .chat-head .friend-name { padding-top: 2px; }
    .chat-pane .chat-thread { margin-top: -26px; }
}
@media (max-width: 760px) {
    body.chat-open .inbox .chat-pane .chat-head, .inbox .chat-pane .chat-head { flex: none; padding: max(12px, env(safe-area-inset-top)) 8px 46px; }
}

/* Alignment: single-column page grids never grow past the screen (Playnote and Settings overflowed at 320px) */
.pl, .settings { grid-template-columns: minmax(0, 1fr); }
.pl > *, .settings > *, .pl-mast > *, .pl-level { min-width: 0; }
.pl-mast h2, .pl-lede { overflow-wrap: anywhere; }
.pl-section, .wpm-list { grid-template-columns: minmax(0, 1fr); }
.pl-section > * { min-width: 0; }
@media (max-width: 420px) { .lb-controls { flex-wrap: wrap; } .lb-controls .pl-seg { flex: 1 1 100%; } .lb-controls .pl-seg button { flex: 1; padding: 0 8px; } }

/* ---------- Voice note sheet (phones and desktop) ---------- */
.vn-sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 0 8px max(8px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.35)); }
.vn-sheet[hidden] { display: none; }
.chat-pane.vn-on .chat-thread { filter: blur(3px); opacity: 0.55; transition: filter 200ms, opacity 200ms; }
.chat-pane.vn-on .composer { opacity: 0; }
.vn-card { width: 100%; max-width: 520px; padding: 22px 20px 20px; border-radius: 30px; background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, 0.55); animation: vn-up 260ms cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes vn-up { from { transform: translateY(24px); opacity: 0; } }
.vn-title { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--text-muted); }
.vn-title b { color: var(--text); font-weight: 800; }
.vn-wave { display: block; width: calc(100% + 40px); height: 92px; margin: 10px -20px 4px; }
.vn-time { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.vn-hint { min-height: 1.2em; margin: 4px 0 12px; color: var(--text-muted); font-size: 0.8rem; }
.vn-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.vn-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; touch-action: manipulation; transition: transform 100ms ease-out, background 120ms; }
.vn-btn .i { width: 24px; height: 24px; }
.vn-btn.send .i { transform: rotate(-12deg); }
.vn-mic { display: grid; place-items: center; width: 74px; height: 74px; border: 0; border-radius: 50%; background: #6c5ce7; color: #fff; cursor: pointer; touch-action: manipulation; box-shadow: 0 0 0 10px color-mix(in srgb, #6c5ce7 16%, transparent), 0 12px 26px -10px rgba(84, 67, 214, 0.9); animation: vn-breathe 1.8s ease-in-out infinite; transition: transform 100ms ease-out; }
.vn-mic .i { width: 30px; height: 30px; }
.vn-mic.paused { animation: none; background: color-mix(in srgb, #6c5ce7 75%, #000); }
@keyframes vn-breathe { 50% { box-shadow: 0 0 0 16px color-mix(in srgb, #6c5ce7 10%, transparent), 0 12px 26px -10px rgba(84, 67, 214, 0.9); } }
.vn-btn:active, .vn-mic:active { transform: scale(0.93); }
.vn-btn:focus-visible, .vn-mic:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .vn-btn:hover { background: var(--input); } }
@media (prefers-reduced-motion: reduce) { .vn-card, .vn-mic { animation: none; } .chat-pane.vn-on .chat-thread { transition: none; } }

/* =====================================================================
   Feed + Explore upgrade: same Cordial, clearer hierarchy and controls
   ===================================================================== */

/* ---------- Content-type chips (Feed) and tab pills (Explore) share one look ---------- */
.feed-types { display: flex; gap: 8px; margin: -2px 0 14px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.feed-types::-webkit-scrollbar { display: none; }
.feed-type, .ex-tabs .cm-filter { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background 140ms, color 140ms, border-color 140ms, transform 100ms ease-out; }
.feed-type .i, .ex-tabs .cm-filter .i { width: 17px; height: 17px; }
.feed-type[aria-pressed="true"], .ex-tabs .cm-filter[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg, #0b0b0f); }
.feed-type:active, .ex-tabs .cm-filter:active { transform: scale(0.96); }
.feed-type:focus-visible, .ex-tabs .cm-filter:focus-visible, .feed-create:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .feed-type:not([aria-pressed="true"]):hover, .ex-tabs .cm-filter:not([aria-selected="true"]):hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
}

/* ---------- Create (+): one tap to every way of sharing ---------- */
.feed-create { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; touch-action: manipulation; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform 100ms ease-out; }
.feed-create .i { width: 22px; height: 22px; }
.feed-create:active { transform: scale(0.93); }

/* ---------- Composer: the tools are always in view (icons), the rest appears when you write ---------- */
.post-composer:not(.open):not(:focus-within) .pc-foot { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.post-composer:not(.open):not(:focus-within) .pc-foot::-webkit-scrollbar { display: none; }
.post-composer:not(.open):not(:focus-within) .pc-quick { display: none; }
.post-composer:not(.open):not(:focus-within) .pc-tool { font-size: 0; gap: 0; width: 40px; min-width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 12px; }
.post-composer:not(.open):not(:focus-within) .pc-tool .i { width: 20px; height: 20px; }
.post-composer:not(.open):not(:focus-within) .pc-tool.story-toggle,
.post-composer:not(.open):not(:focus-within) .pc-audience,
.post-composer:not(.open):not(:focus-within) .pc-schedule,
.post-composer:not(.open):not(:focus-within) .pc-post { display: none; }

/* ---------- Post cards: media sits inside the card, actions line up ---------- */
.feed-list .post .post-media { margin-left: 14px; margin-right: 14px; border-radius: 18px; overflow: hidden; }
.feed-list .post .post-head { align-items: center; }
.feed-list .post .post-actions { gap: 2px; }
.feed-list .post .post-actions .act { min-height: 40px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .feed-list .post .post-actions .act:hover { background: var(--input); } }

/* ---------- Live audio rooms in the Feed ---------- */
.sp-feed { margin: 0 0 14px; }
.sp-feed-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; color: var(--text-muted); font-size: 0.88rem; font-weight: 700; }
.sp-feed-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sp-feed-row::-webkit-scrollbar { display: none; }
.sp-bubble { display: grid; justify-items: center; gap: 6px; flex: none; width: 82px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; }
.sp-bubble-ring { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); padding: 3px; }
.sp-bubble.here .sp-bubble-ring { box-shadow: 0 0 0 3px #22c55e; }
.sp-bubble-ring .avatar.lg { width: 100%; height: 100%; box-shadow: 0 0 0 3px var(--bg, #0b0b0f); }
.sp-bubble-ring .presence-dot { display: none; }
.sp-bubble-n { position: absolute; top: -4px; right: -6px; min-width: 24px; padding: 2px 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800; box-shadow: 0 0 0 2px var(--bg, #0b0b0f); font-variant-numeric: tabular-nums; }
.sp-bubble-t { max-width: 100%; font-size: 0.76rem; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bubble:active { transform: scale(0.96); }

/* ---------- Explore ---------- */
body[data-view="explore"] .fab { display: none; } /* it covered "Open" / "See all" */
.ex-tabs { gap: 8px; }
@media (max-width: 760px) {
    .ex-hero { padding: 20px 18px; border-radius: 22px; }
    .ex-hero h2 { font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.12; }
    .ex-hero-sub { font-size: 0.9rem; margin-top: 6px; }
    .ex-hero .ex-search { margin-top: 14px; }
    .feed-bar { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .feed-type, .ex-tabs .cm-filter, .feed-create, .sp-bubble { transition: none; } }
@media (max-width: 760px) {
    .explore .ex-hero { padding: 18px 16px 16px; border-radius: 20px; }
    .explore .ex-hero h2 { font-size: clamp(1.45rem, 6.6vw, 1.75rem); max-width: 18ch; }
    .explore .ex-hero .ex-hero-sub { font-size: 0.86rem; margin-top: 4px; }
}
/* Desktop has room for the composer tool names */
@media (min-width: 761px) {
    .post-composer:not(.open):not(:focus-within) .pc-tool { font-size: 0.82rem; gap: 6px; width: auto; min-width: 0; padding: 0 12px; }
    .post-composer:not(.open):not(:focus-within) .pc-tool .i { width: 18px; height: 18px; }
}
.wpm-list > * { min-width: 0; }
.wpm-skel { width: 100%; max-width: 100%; box-sizing: border-box; }

/* Reels: the side buttons stay on screen on shorter phones */
.reel-side { max-height: calc(100% - 96px); }
@media (max-height: 780px) { .reel-side { gap: 6px; } .reel-act { min-height: 44px; } .reel-act .i { width: 26px; height: 26px; } }
@media (max-height: 640px) { .reel-act span { font-size: 0.68rem; } }
.post-actions .reshare-btn[aria-pressed="true"] { color: #22c55e; }

/* =====================================================================
   Live video, refined: host chip + LIVE timer + viewers, title, avatar chat,
   comment pill with share and heart, hop between lives
   ===================================================================== */
/* Desktop: a centred portrait stage instead of a stretched landscape */
@media (min-width: 900px) {
    dialog.live { background: radial-gradient(circle at 50% 30%, #1f1f2b, #000 70%); }
    .lv-stage { width: min(480px, 100%); height: min(860px, calc(100% - 40px)); margin: 20px auto; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
    #lv-video { object-fit: cover; }
}

/* Top: a translucent host chip, then the LIVE timer and viewer count */
.lv-top { gap: 6px; }
.lv-host { flex: 0 1 auto; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-right: auto; }
.lv-host .avatar.sm { width: 34px; height: 34px; }
.lv-host .presence-dot { display: none; }
.lv-host small:empty { display: none; }
.lv-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 10px; box-shadow: 0 6px 16px -6px rgba(239, 68, 68, 0.8); }
.lv-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: vc-blink 1s ease-in-out infinite; }
.lv-viewers { border-radius: 999px; padding: 5px 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lv-title-line { position: absolute; z-index: 2; top: calc(64px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lv-title-line[hidden] { display: none; }

/* Hop between lives */
.lv-hop { position: absolute; z-index: 3; right: 10px; top: 42%; display: grid; justify-items: center; gap: 6px; }
.lv-hop[hidden] { display: none; }
.lv-hop-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.42); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); touch-action: manipulation; }
.lv-hop-btn .i { width: 20px; height: 20px; }
.lv-hop-btn:active { transform: scale(0.92); }
.lv-hop-n { font-size: 0.72rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }

/* Chat: avatar + name + message in a soft bubble; joins and hearts as light events */
.lv-chat { gap: 8px; width: min(320px, calc(100% - 88px)); }
.lv-msg { display: flex; align-items: flex-end; gap: 8px; padding: 0; background: none; border-radius: 0; font-size: 0.88rem; }
.lv-msg .avatar.sm { width: 30px; height: 30px; flex: none; font-size: 0.66rem; }
.lv-msg .presence-dot { display: none; }
.lv-bubble { display: grid; gap: 1px; padding: 7px 12px; border-radius: 16px; background: rgba(28, 28, 32, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lv-bubble strong { margin: 0; font-size: 0.74rem; font-weight: 700; opacity: 0.75; }
.lv-msg.mine .lv-bubble { background: color-mix(in srgb, var(--accent-solid, #4f46e5) 75%, transparent); }
.lv-msg.mine { background: none; }
.lv-event { padding: 2px 0; font-size: 0.82rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.lv-event strong { margin-right: 3px; }
.lv-msg.lv-join, .lv-msg.lv-love { background: none; }
.lv-msg.lv-love .lv-event { color: #fecdd3; }

/* Bottom: comment pill (with send), share, heart */
.lv-bar { gap: 8px; }
.lv-say { position: relative; display: flex; align-items: center; }
.lv-say input { width: 100%; min-height: 46px; padding: 0 48px 0 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(28, 28, 32, 0.6); color: #fff; font: inherit; font-size: 16px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lv-say input::placeholder { color: rgba(255, 255, 255, 0.6); }
.lv-say input:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }
.lv-send { position: absolute; right: 4px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #a5b4fc; cursor: pointer; }
.lv-send .i { width: 18px; height: 18px; }
.lv-btn { background: rgba(28, 28, 32, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lv-btn .i { width: 20px; height: 20px; }
.lv-heart-btn { color: #ef4444; }
.lv-heart-btn .i { width: 22px; height: 22px; }
.lv-btn:active, .lv-end:active { transform: scale(0.93); }

/* Setup: who can watch */
.lv-aud { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); }
.lv-aud button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, 0.8); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.lv-aud button .i { width: 16px; height: 16px; }
.lv-aud button[aria-checked="true"] { background: #fff; color: #111827; }
@media (prefers-reduced-motion: reduce) { .lv-badge::before { animation: none; } }

/* Explore: live now as a grid of tall cards (many lives at once) */
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: 12px; }
.lv-tile { position: relative; display: grid; align-content: space-between; justify-items: start; gap: 12px; min-width: 0; aspect-ratio: 3 / 4; padding: 12px; border: 0; border-radius: 20px; color: #fff; text-align: left; font: inherit; cursor: pointer; overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(160deg, #be123c, #4c1d95 70%, #111827); touch-action: manipulation; transition: transform 120ms ease-out; }
.lv-tile:active { transform: scale(0.97); }
.lv-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lv-tile-top { display: flex; gap: 6px; align-items: center; }
.lv-tile-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: #ef4444; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; }
.lv-tile-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.lv-tile-aud { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
.lv-tile-aud .i { width: 13px; height: 13px; }
.lv-tile-av .avatar.lg { width: 64px; height: 64px; box-shadow: 0 0 0 3px #ef4444, 0 0 0 6px rgba(239, 68, 68, 0.3); }
.lv-tile-av .presence-dot { display: none; }
.lv-tile-text { display: grid; gap: 2px; min-width: 0; width: 100%; }
.lv-tile-text strong { font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tile-text small { font-size: 0.8rem; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tile-time { opacity: 0.7 !important; font-size: 0.72rem !important; }
.lv-tile.go { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--border); border: 2px dashed transparent; }
.lv-tile-av.go { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #ef4444; color: #fff; }
.lv-tile-av.go .i { width: 28px; height: 28px; }
.lv-tile.go small { color: var(--text-muted); opacity: 1; white-space: normal; }
@media (hover: hover) and (pointer: fine) { .lv-tile:hover { filter: brightness(1.08); } }
.lv-badge, .lv-viewers { white-space: nowrap; flex: none; }
dialog.live[data-mode="watch"] .lv-host small, dialog.live[data-mode="live"] .lv-host small { display: none; }
.lv-host strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-host > span { min-width: 0; }
.post-actions .act .act-count:empty { display: none; }

/* Live adapts to the device: the framed stage is for real desktops (mouse, big window); phones held
   sideways use the whole screen; a wide stream on a desktop gets a wide stage */
@media (min-width: 900px) and (hover: none), (min-width: 900px) and (max-height: 599px) {
    dialog.live { background: #000; }
    .lv-stage { width: 100%; height: 100%; margin: 0; border-radius: 0; box-shadow: none; }
}
@media (min-width: 900px) and (min-height: 600px) and (hover: hover) {
    dialog.live[data-video="wide"] .lv-stage { width: min(1180px, calc(100vw - 80px)); height: min(calc((100vw - 80px) * 9 / 16), calc(100vh - 40px)); }
    dialog.live[data-video="wide"] #lv-video { object-fit: contain; background: #000; }
}
#lv-fit[hidden] { display: none; }
#lv-fit[aria-pressed="true"] { background: #fff; color: #111827; }

/* Composer tools on phones: spread evenly across the row, icon over a small label */
@media (max-width: 760px) {
    .post-composer:not(.open):not(:focus-within) .pc-foot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: visible; }
    .post-composer:not(.open):not(:focus-within) .pc-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 0; height: auto; min-height: 54px; padding: 6px 2px; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); border-radius: 12px; }
    .post-composer:not(.open):not(:focus-within) .pc-tool .i { width: 22px; height: 22px; }
    .post-composer:not(.open):not(:focus-within) .pc-tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .post-composer:not(.open):not(:focus-within) .pc-tool:active { background: var(--input); transform: scale(0.96); }
}
@media (max-width: 760px) { .post-composer:not(.open):not(:focus-within) .pc-tl-more { display: none; } }
@media (max-width: 360px) { .post-composer:not(.open):not(:focus-within) .pc-tool { font-size: 0.6rem; padding: 6px 0; } }
@media (min-width: 900px) and (min-height: 600px) and (hover: hover) { dialog.live[open] { display: grid; place-items: center; } dialog.live[open] .lv-stage { margin: 0; } }

/* Live on phones: a wider comment box — the occasional controls (fit, flip, mute) float in a column on the right */
@media (max-width: 760px) {
    .lv-bar { gap: 6px; padding-left: 10px; padding-right: 10px; }
    .lv-bar .lv-btn { width: 40px; height: 40px; }
    .lv-say input { min-height: 44px; padding: 0 42px 0 14px; }
    .lv-send { width: 34px; height: 34px; right: 5px; }
    .lv-bar #lv-fit, .lv-bar #lv-flip, .lv-bar #lv-mute { position: absolute; right: 10px; width: 42px; height: 42px; }
    .lv-bar #lv-fit { bottom: calc(100% + 6px); }
    .lv-bar #lv-flip { bottom: calc(100% + 6px); }
    .lv-bar #lv-mute { bottom: calc(100% + 54px); }
    .lv-end { padding: 0 14px; min-height: 40px; }
    .lv-hearts { right: 60px; }
}

/* ---------- Note → Slides ---------- */
.share-ic.slides { background: color-mix(in srgb, #6366f1 18%, transparent); color: #6366f1; }
.nslide { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 10px;
    background: linear-gradient(135deg, var(--sl-bg1), var(--sl-bg2)); color: var(--sl-ink);
    font-family: Inter, system-ui, sans-serif; display: flex; flex-direction: column; justify-content: center;
    padding: 6% 8.5%; box-sizing: border-box; text-align: left; }
.nslide.serif .sl-h, .nslide.serif .sl-t, .nslide.serif .sl-quote, .nslide.serif .sl-quote-mark { font-family: "Fraunces", Georgia, serif; }
.nslide.lined { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(6.667% - 1px), var(--sl-lines) calc(6.667% - 1px) 6.667%), linear-gradient(var(--sl-bg1), var(--sl-bg2)); padding-left: 10%; }
.nslide.lined::before { content: ""; position: absolute; left: 7.5cqw; top: 0; bottom: 0; width: 1px; background: #fca5a5; }
.nslide.barred::before, .nslide.barred::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.8cqw; background: var(--sl-bars); }
.nslide.barred::before { left: 0; }
.nslide.barred::after { right: 0; }
.nslide .sl-kicker { font-size: 1.7cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sl-accent); margin-bottom: 1.6cqw; }
.nslide .sl-h { margin: 0; font-size: 5.8cqw; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; color: var(--sl-ink); overflow-wrap: anywhere; }
.nslide.sl-end .sl-h::before { content: ""; display: block; width: 7cqw; height: .6cqw; border-radius: 1cqw; background: var(--sl-accent); margin-bottom: 2.4cqw; }
.nslide .sl-sub { margin: 2cqw 0 0; font-size: 2.3cqw; font-weight: 600; color: var(--sl-muted); }
.nslide.sl-bullets { justify-content: flex-start; }
.nslide .sl-t { margin: 0 0 1cqw; font-size: 4.1cqw; line-height: 1.12; letter-spacing: -0.015em; font-weight: 800; color: var(--sl-ink); }
.nslide .sl-t::after { content: ""; display: block; width: 5.5cqw; height: .45cqw; border-radius: 1cqw; background: var(--sl-accent); margin-top: 1.6cqw; }
.nslide .sl-points { list-style: none; margin: 2cqw 0 0; padding: 0; display: grid; gap: 1.5cqw; }
.nslide .sl-points li { position: relative; padding-left: 3.2cqw; font-size: 2.6cqw; line-height: 1.38; color: var(--sl-ink); overflow-wrap: anywhere; }
.nslide .sl-points li::before { content: ""; position: absolute; left: .4cqw; top: calc(.69em - .6cqw); width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--sl-accent); }
.nslide .sl-quote-mark { font-size: 14cqw; line-height: .7; font-weight: 800; color: var(--sl-accent); height: 7cqw; }
.nslide .sl-quote { margin: 0; font-size: 4cqw; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--sl-ink); overflow-wrap: anywhere; }
.nslide .sl-num { position: absolute; right: 3.8cqw; bottom: 3cqw; font-size: 1.6cqw; font-weight: 600; color: var(--sl-muted); }
.nslide [contenteditable] { outline: none; border-radius: .6cqw; cursor: text; transition: box-shadow .15s; }
.nslide [contenteditable]:focus { box-shadow: 0 0 0 .3cqw color-mix(in srgb, var(--sl-accent) 55%, transparent); }
@media (hover: hover) and (pointer: fine) { .nslide [contenteditable]:hover { box-shadow: 0 0 0 .3cqw color-mix(in srgb, var(--sl-accent) 35%, transparent); } }
.nslide [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--sl-muted); opacity: .7; }

dialog.nsd { width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border, rgba(127,127,127,.2)); border-radius: 20px; background: var(--surface); color: var(--text); overflow: hidden; }
dialog.nsd::backdrop { background: rgba(8, 10, 20, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nsd-card { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.nsd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; }
.nsd-head h3 { margin: 0; font-size: 1.1rem; }
.nsd-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; padding: 0 20px 20px; overflow: auto; overscroll-behavior: contain; }
.nsd-stage { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nsd-frame .nslide { border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.nsd-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--muted, #888); text-align: center; }
.nsd-arrow { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border, rgba(127,127,127,.25)); background: var(--input, transparent); color: var(--text); cursor: pointer; touch-action: manipulation; }
.nsd-arrow.next .i, .nsd-show-bar .next .i { transform: scaleX(-1); }
.nsd-arrow:disabled { opacity: .35; cursor: default; }
.nsd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.nsd-thumb { flex: none; width: 120px; padding: 0; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; scroll-snap-align: center; touch-action: manipulation; }
.nsd-thumb[aria-selected="true"] { border-color: var(--accent); }
.nsd-thumb-in { display: block; pointer-events: none; }
.nsd-thumb .nslide { border-radius: 6px; }
.nsd-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.nsd-label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #888); }
.nsd-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nsd-tpl { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: var(--input, transparent); color: var(--text); cursor: pointer; text-align: left; touch-action: manipulation; }
.nsd-tpl[aria-checked="true"] { border-color: var(--accent); }
.nsd-tpl-swatch { position: relative; display: flex; align-items: center; aspect-ratio: 16 / 9; border-radius: 8px; padding: 0 10px; border: 1px solid rgba(127,127,127,.25); font-size: 1.05rem; }
.nsd-tpl-swatch.serif b { font-family: "Fraunces", Georgia, serif; }
.nsd-tpl-swatch i { position: absolute; left: 10px; bottom: 9px; width: 22px; height: 3px; border-radius: 2px; }
.nsd-tpl-name { display: flex; flex-direction: column; font-size: .82rem; font-weight: 600; line-height: 1.2; padding: 0 2px 2px; }
.nsd-tpl-name small { margin-top: 2px; font-size: .68rem; font-weight: 700; color: var(--accent); }
.nsd-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.nsd-wide { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; }
.nsd-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nsd-row .link-btn { display: inline-flex; align-items: center; gap: 6px; }
.nsd-row .link-btn:disabled { opacity: .4; }

.nsd-show { position: fixed; inset: 0; z-index: 2000; background: #000; display: grid; place-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.nsd-show[hidden] { display: none; }
.nsd-show-frame { width: min(100vw, calc(100dvh * 16 / 9)); }
.nsd-show-frame .nslide { border-radius: 0; }
.nsd-show-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(20, 20, 28, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: .85rem; opacity: .4; transition: opacity .2s; }
.nsd-show-bar:hover, .nsd-show-bar:focus-within { opacity: 1; }
@media (hover: none) { .nsd-show-bar { opacity: .85; } }
.nsd-show-bar span { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
.nsd-show-bar button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; touch-action: manipulation; }
.nsd-show-bar button:disabled { opacity: .35; }

@media (max-width: 760px) {
    dialog.nsd { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; margin: 0; }
    .nsd-card { max-height: 100dvh; height: 100%; }
    .nsd-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    .nsd-main { grid-template-columns: minmax(0, 1fr); padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .nsd-templates { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; padding-bottom: 4px; }
    .nsd-thumb { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .nsd-show-bar, .nslide [contenteditable] { transition: none; } }

/* ==========================================================================
   Explore & Playnote, calmer: search first, one featured item, rails instead of walls,
   plain section titles, secondary things one tap away. Same tokens, same identity.
   ========================================================================== */

/* ---------- Explore ---------- */
.explore { gap: 28px; }
.explore .ex-sec { gap: 12px; }
.explore .ex-top { display: grid; gap: 12px; }
.explore .ex-top .ex-search {
    display: flex; align-items: center; gap: 10px; min-height: 50px; margin: 0; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--input); box-shadow: none; color: var(--text-muted);
}
.explore .ex-top .ex-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.explore .ex-top .ex-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ex-topics { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 1px; }
.ex-topics::-webkit-scrollbar { display: none; }
.ex-topic {
    flex: none; min-height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
    color: var(--text-muted); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
    transition: color 140ms, border-color 140ms, background-color 140ms;
}
.ex-topic:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ex-topic:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, var(--border)); } }

/* Tabs: a quiet segmented row */
.explore .ex-tabs { margin: -12px 0 0; gap: 6px; }
.explore .ex-tabs .cm-filter { min-height: 36px; padding: 0 14px; font-weight: 600; font-size: 0.88rem; }
.explore .ex-tabs .cm-filter .i { width: 15px; height: 15px; opacity: 0.75; }

/* Section titles: just the words (and a "See all") — no badge, no subtitle on For you */
.explore .ex-ic { display: none; }
.explore .ex-head { flex-wrap: nowrap; align-items: baseline; }
.explore .ex-head h3 { gap: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.explore .ex-head p { padding-left: 0; }
.explore .ex-head .ex-more { margin-left: auto; flex: none; }
.explore[data-tab="all"] .ex-head p { display: none; }
.explore[data-tab="all"] .lv-tile.go, .explore[data-tab="all"] .cl-host { display: none; }

/* Most loved today: one post, given room */
.ex-feature {
    display: grid; width: 100%; overflow: hidden; padding: 0; border: 1px solid var(--border); border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--text); font: inherit; text-align: left; cursor: pointer;
    transition: border-color 160ms, transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1); touch-action: manipulation;
}
.ex-feature.has-photo { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.ex-feature:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .ex-feature:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } }
.ex-feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ex-feature-img { position: relative; min-height: 200px; background: var(--input); }
.ex-feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-feature-body { display: grid; align-content: start; gap: 8px; padding: 20px 22px; min-width: 0; }
.ex-feature-who { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.ex-feature-who > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-feature-title { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.ex-feature-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 62ch; }
.ex-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.ex-feature-foot .ex-stats { display: inline-flex; align-items: center; gap: 4px; }
.ex-feature-foot .ex-stats .i { width: 14px; height: 14px; }
.ex-feature-foot .ex-stats .i + .i, .ex-feature-foot .ex-stats .i:nth-of-type(2) { margin-left: 8px; }
.ex-feature-go { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; }
.ex-feature-go .i { width: 15px; height: 15px; transition: transform 180ms ease-out; }
@media (hover: hover) and (pointer: fine) { .ex-feature:hover .ex-feature-go .i { transform: translateX(3px); } }
.ex-feature.skel { min-height: 170px; border: 0; background: linear-gradient(90deg, var(--input), var(--border), var(--input)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }

/* Trending: a rail of quieter tiles (and the same tiles in the Posts tab grid) */
.explore .ex-rail { gap: 10px; margin: 0 -2px; }
.explore .ex-rail .ex-tile { flex: none; width: 196px; }
.explore .ex-tile.text { background: color-mix(in srgb, var(--t1) 13%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 20%, var(--border)); }
.explore .ex-tile.text .ex-tile-text { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.explore .ex-tile.text .ex-tile-foot { color: var(--text-muted); }
.explore .ex-rank { padding: 3px 8px 3px 6px; background: color-mix(in srgb, var(--t1) 22%, var(--surface)); color: var(--text); box-shadow: none; font-size: 0.74rem; }
.explore .ex-tile.photo .ex-rank { background: rgba(9, 9, 11, 0.55); color: #fff; }

/* Happening now: one quiet row to start your own */
.ex-start {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    padding: 14px 16px; border-radius: 14px; background: var(--input);
}
.ex-start-text { display: grid; gap: 2px; min-width: 0; }
.ex-start-text strong { font-size: 0.95rem; }
.ex-start-text small { color: var(--text-muted); font-size: 0.82rem; }
.ex-start-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-start-btns .chip { min-height: 38px; }

/* People you may know: a rail of small cards */
.ex-pcard {
    flex: none; width: 150px; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 16px 12px 14px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: center;
}
.ex-pcard-who { padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; margin-bottom: 6px; }
.ex-pcard strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.ex-pcard small { color: var(--text-muted); font-size: 0.78rem; }
.ex-pcard .chip { margin-top: 8px; min-height: 34px; }

/* More to explore: everything else, one tap away */
.ex-elsewhere { display: grid; gap: 12px; padding-top: 4px; }
.ex-elsewhere h3 { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.ex-else-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ex-else-links button {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 12px;
    background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation;
    transition: border-color 140ms, background-color 140ms;
}
.ex-else-links button .i { width: 18px; height: 18px; color: var(--text-muted); }
.ex-else-links button:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ex-else-links button:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--input); } }

@media (max-width: 760px) {
    .explore { gap: 24px; }
    .ex-feature.has-photo { grid-template-columns: minmax(0, 1fr); }
    .ex-feature-img { min-height: 0; aspect-ratio: 16 / 9; }
    .ex-feature-body { padding: 16px 16px 18px; }
    .ex-feature-title { font-size: 1.15rem; }
    .explore .ex-rail .ex-tile { width: 168px; }
    .explore .ex-rail, .explore .ex-people-rail, .explore .ex-row { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
    .ex-topics { margin: 0 -16px; padding: 1px 16px; }
    .explore .ex-tabs { margin: -10px -16px 0; padding: 2px 16px; }
    .ex-else-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-start-btns { width: 100%; }
    .ex-start-btns .chip { flex: 1; justify-content: center; }
}

/* ---------- Playnote ---------- */
.pl { gap: 32px; }
.pl-date { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
.pl-today { display: grid; gap: 12px; }
.pl-today .g-tile.lead { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); grid-template-rows: none; }
.pl-today .g-tile.lead .g-field { min-height: 210px; }
.pl-today-h { margin: 10px 0 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.pl-today-rest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pl-today-rest .g-tile { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-color: var(--border); }
.pl-today-rest .g-field { width: 40px; height: 40px; min-height: 0; border-radius: 12px; flex: none; }
.pl-today-rest .g-field .i { width: 20px; height: 20px; }
.pl-today-rest .g-text { padding: 0; gap: 3px; align-content: start; }
.pl-today-rest .g-text strong { font-size: 0.95rem; }
.pl-today-rest .g-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-today-rest .g-go { margin-top: 6px; font-size: 0.84rem; }
.pl-more {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 40px; margin-top: 2px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.pl-more .i { width: 16px; height: 16px; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .pl-more:hover { background: var(--input); } }
.pl-section { gap: 12px; }

@media (max-width: 760px) {
    .pl { gap: 28px; }
    .pl-today .g-tile.lead { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
    .pl-today .g-tile.lead .g-field { min-height: 0; }
    .pl-today-rest { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; }
    .pl-today-rest::-webkit-scrollbar { display: none; }
    .pl-today-rest .g-tile { flex: none; width: 164px; scroll-snap-align: start; }
    .gm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gm-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .gm-t-ic { width: 40px; height: 40px; border-radius: 12px; }
    .gm-t-ic .i { width: 21px; height: 21px; }
    .gm-t-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .pl-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-topic { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .pl-topic-ic { width: 36px; height: 36px; }
}
/* Calm pass, fixes from the rendered check */
.explore .ex-top .ex-search { order: 0; max-width: none; }
.explore .ex-top .ex-topics { order: 1; }
.explore #ex-body { display: grid; gap: 32px; min-width: 0; }
.explore #ex-body > * { min-width: 0; }
.explore .ex-row { scrollbar-width: none; }
.explore .ex-row::-webkit-scrollbar { display: none; }
.ex-start .chip { background: var(--surface); color: var(--text); }
.pl-today .g-tile.lead { grid-column: auto; grid-row: auto; }
.pl-standing.out p { flex: 1 1 220px; }
@media (max-width: 760px) { .explore #ex-body { gap: 28px; } }

/* ==========================================================================
   Feed, refined: content first. One control row, a compact composer, posts with four actions,
   notes and Playnote results that look like themselves, and a two-column desktop layout.
   ========================================================================== */
.feed-v2 { grid-template-columns: minmax(0, 640px) 300px; justify-content: center; gap: 32px; }
.feed-v2 .social-left { display: none; }
@media (max-width: 1100px) { .feed-v2 { grid-template-columns: minmax(0, 620px) 270px; gap: 24px; } }
@media (max-width: 900px) { .feed-v2 { grid-template-columns: minmax(0, 1fr); } }

/* One control row: tabs with an underline, then search and filter */
.feed-v2 .feed-bar { gap: 2px; margin: 0 0 14px; padding: 4px 0 0; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 92%, transparent); }
.feed-v2 .feed-tabs { padding: 0; gap: 0; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.feed-v2 .feed-tabs::-webkit-scrollbar { display: none; }
.feed-v2 .feed-tab { position: relative; flex: none; min-height: 44px; padding: 0 12px; border-radius: 0; background: none; box-shadow: none; color: var(--text-muted); font-weight: 600; }
.feed-v2 .feed-tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--text); }
.feed-v2 .feed-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .feed-v2 .feed-tab:hover { color: var(--text); } }
.feed-v2 .feed-search-btn, .feed-v2 .feed-filter-btn { flex: none; width: 40px; height: 40px; margin-bottom: 2px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); }
.feed-v2 .feed-search-btn[aria-expanded="true"], .feed-v2 .feed-filter-btn.on { background: var(--accent-soft); color: var(--accent); }
.feed-v2 .filter-chip { justify-self: start; margin: -4px 0 12px; }

/* Stories: a light row of avatars, not a card */
.feed-v2 .stories-bar { margin: 0 0 6px; padding: 2px 0 6px; border-radius: 0; background: none; box-shadow: none; }
.feed-v2 .stories-bar .stories { gap: 12px; }
.feed-v2 .story { gap: 6px; font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
.feed-v2 .story-ring { width: 62px; height: 62px; }
.feed-v2 .stories-empty { align-self: center; max-width: 220px; margin: 0; }

/* Composer: one line until you start writing */
.feed-v2 .post-composer { padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: none; }
.feed-v2 .post-composer:not(.open):not(:focus-within):not(:has(textarea:not(:placeholder-shown))):not(:has(.pc-photos:not([hidden]))):not(:has(.pc-audio:not([hidden]))) .pc-foot { display: none; }
.feed-v2 .pc-more { color: var(--accent); }

/* Posts: content leads; quiet chrome */
.feed-v2 .feed-list { display: grid; gap: 14px; }
body[data-view="feed"] .feed-v2 .post.ig { border: 1px solid var(--border); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { body[data-view="feed"] .feed-v2 .post.ig:hover { box-shadow: none; border-color: color-mix(in srgb, var(--text) 18%, var(--border)); } }
.feed-v2 .post-actions { gap: 2px; padding: 4px 8px 0; }
.feed-v2 .post-actions .act .i { width: 22px; height: 22px; }
.feed-v2 .react-sum-row { padding: 0 16px; }
.feed-v2 .feed-list .comments[data-mode="card"] .comment-form { display: none; }
.feed-v2 .feed-list .post.ig .comments { padding-top: 2px; }

/* A shared note */
.post-note {
    position: relative; display: grid; gap: 6px; margin: 2px 16px 8px; padding: 16px 18px 12px; overflow: hidden;
    border-radius: 14px; background: color-mix(in srgb, var(--nc) 9%, var(--surface));
}
.post-note::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--nc); }
.pn-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: color-mix(in srgb, var(--nc, var(--accent)) 65%, var(--text)); }
.pn-kind .i { width: 15px; height: 15px; }
.pn-meta { color: var(--text-muted); font-weight: 500; }
.pn-meta::before { content: '·'; margin: 0 6px 0 2px; }
.pn-title { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.pn-preview { color: color-mix(in srgb, var(--text) 82%, transparent); font-size: 0.98rem; line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pn-open { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.pn-open .i { width: 15px; height: 15px; transition: transform 180ms ease-out; }
@media (hover: hover) and (pointer: fine) { .pn-open:hover .i { transform: translateX(3px); } }

/* A Playnote result: a short preview and one way in */
.post-playnote {
    display: grid; gap: 8px; margin: 2px 16px 8px; padding: 16px 18px; border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.post-playnote .pn-kind { color: var(--accent); }
.pp-text { font-size: 1.02rem; font-weight: 600; line-height: 1.5; }
.pp-play { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.pp-play .i { width: 15px; height: 15px; }
.pp-play:active { transform: scale(0.97); }

/* Right column: you first, then only what has something in it */
.feed-v2 .social-right { gap: 14px; }
.you-box { display: grid; gap: 12px; }
.you-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.you-head .contact-name { min-width: 0; }
.you-head .contact-name small { font-size: 0.76rem; }
.you-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.you-links .social-nav-item { min-height: 38px; padding: 0 10px; border-radius: 10px; font-size: 0.85rem; }

/* Empty states with a way forward */
.feed-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

@media (max-width: 760px) {
    /* On a phone, posts run edge to edge, separated by a hairline */
    .feed-v2 .feed-list { gap: 0; margin: 0 -12px; }
    body[data-view="feed"] .feed-v2 .feed-list .post.ig { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
    .feed-v2 .feed-bar { margin: 0 -12px 12px; padding: 2px 4px 0; }
    .feed-v2 .feed-tab { padding: 0 10px; font-size: 0.86rem; }
    .feed-v2 .feed-tab[aria-selected="true"]::after { left: 10px; right: 10px; }
    .feed-v2 .stories-bar { margin: 0 -12px 4px; padding: 2px 12px 6px; }
    .feed-v2 .post-note, .feed-v2 .post-playnote { margin: 2px 12px 8px; }
    .feed-v2 .social-right { margin-top: 12px; }
}
/* Feed, phone fixes: the control row is docked in the top bar there; posts already run edge to edge */
@media (max-width: 760px) {
    .feed-v2 .feed-list { margin: 0; }
    .topbar-dock .feed-bar { gap: 2px; border-bottom: 0; }
    .topbar-dock .feed-tabs { padding: 0; gap: 0; border-radius: 0; background: none; }
    .topbar-dock .feed-tab { position: relative; flex: none; min-height: 40px; padding: 0 10px; border-radius: 0; background: none; box-shadow: none; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
    .topbar-dock .feed-tab[aria-selected="true"] { background: none; box-shadow: none; color: var(--text); }
    .topbar-dock .feed-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); }
    .topbar-dock :is(.feed-search-btn, .feed-filter-btn) { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); }
    .topbar-dock :is(.feed-search-btn[aria-expanded="true"], .feed-filter-btn.on) { background: var(--accent-soft); color: var(--accent); }
}
.feed-v2 .stories-bar { border: 0; }
.feed-v2 .feed-list { grid-template-columns: minmax(0, 1fr); }
.feed-v2 .feed-list > * { min-width: 0; }
@media (max-width: 760px) { .topbar-dock .feed-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* ---------- Feed, aligned with PRD.md / Design.md ---------- */
:root { --feed-content-max: 620px; --feed-touch-target: 44px; }
.feed-v2 { grid-template-columns: minmax(0, var(--feed-content-max)) 300px; }

/* Touch targets: 44px for the action bar, tabs and header controls */
.feed-v2 .post-actions .act { min-height: var(--feed-touch-target); min-width: var(--feed-touch-target); justify-content: center; }
.feed-v2 .feed-tab, .topbar-dock .feed-tab { min-height: var(--feed-touch-target); }
.feed-v2 :is(.feed-search-btn, .feed-filter-btn), .topbar-dock :is(.feed-search-btn, .feed-filter-btn) { width: var(--feed-touch-target); height: var(--feed-touch-target); }
.feed-v2 .post.ig :is(.post-head .name-link, .post-av):focus-visible,
.feed-v2 .post-actions .act:focus-visible,
.feed-v2 :is(.pn-open, .pp-play, .cp-reply, .feed-more):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

/* With only three modes, the tabs fit on any phone: no fade needed */
@media (max-width: 760px) { .topbar-dock .feed-tabs { -webkit-mask-image: none; mask-image: none; } }

/* Playnote: a title and the score */
.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pp-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.pp-score { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.post-playnote .pp-text { font-size: 0.95rem; font-weight: 500; color: color-mix(in srgb, var(--text) 85%, transparent); }

/* Comments: a quiet way into the conversation (only on the Feed; groups keep their inline box) */
.cp-reply { display: none; }
.feed-v2 .cp-reply {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px;
    background: var(--input); color: var(--text-muted); font: inherit; font-size: 0.88rem; text-align: left; cursor: text; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .feed-v2 .cp-reply:hover { color: var(--text); } }

/* Progressive loading */
.feed-more-row { display: flex; justify-content: center; padding: 18px 0 6px; }
.feed-more { min-height: 44px; padding: 0 20px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .feed-more:hover { background: var(--input); } }

/* Skeletons mirror a post, action row included */
.feed-v2 .post-skel { border-radius: 16px; }
.sk-acts { gap: 18px; margin-top: 4px; }
.sk-acts i { width: 28px; height: 22px; border-radius: 8px; background: var(--panel); }
.sk-acts .sk-save { margin-left: auto; }
@media (max-width: 760px) { .feed-v2 .post-skel { border-radius: 0; border-width: 0 0 1px; margin: 0 -12px; } }

@media (prefers-reduced-motion: reduce) { .feed-v2 .post-skel i { animation: none; } }
@media (max-width: 1100px) { .feed-v2 { grid-template-columns: minmax(0, var(--feed-content-max)) 270px; } }
@media (max-width: 900px) { .feed-v2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .topbar-dock .feed-tab { padding: 0 8px; font-size: 0.85rem; } .topbar-dock .feed-tab[aria-selected="true"]::after { left: 8px; right: 8px; } }

/* ---------- Feed: Instagram-like post rhythm ----------
   Posts sit on the page (no card), with generous space between them and a tight rhythm inside:
   header → content → actions right under it → likes → comments. */
body[data-view="feed"] .feed-v2 .feed-list { gap: 0; }
body[data-view="feed"] .feed-v2 .feed-list .post.ig {
    margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    background: transparent; box-shadow: none;
}
body[data-view="feed"] .feed-v2 .feed-list .post.ig + .post.ig,
body[data-view="feed"] .feed-v2 .feed-list > * + .post.ig { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) { body[data-view="feed"] .feed-v2 .feed-list .post.ig:hover { box-shadow: none; border-color: var(--border); } }
body[data-view="feed"] .feed-v2 .post.ig .post-head { padding: 0 4px 12px; }
body[data-view="feed"] .feed-v2 .post.ig .post-media { margin: 0; border-radius: 12px; }
body[data-view="feed"] .feed-v2 .post.ig .post-caption.text-only { padding: 0 4px 4px; }
body[data-view="feed"] .feed-v2 .post.ig :is(.post-note, .post-playnote) { margin: 0 0 4px; }
body[data-view="feed"] .feed-v2 .post-actions { padding: 6px 0 0; margin-left: -10px; margin-right: -10px; }
body[data-view="feed"] .feed-v2 .react-sum-row { padding: 0 4px; margin-top: -2px; }
body[data-view="feed"] .feed-v2 .post.ig .comments { gap: 6px; padding: 6px 4px 0; }
body[data-view="feed"] .feed-v2 .post.ig .post-caption:not(.text-only) { padding: 4px 4px 0; }
body[data-view="feed"] .feed-v2 .post.ig .repost-line { padding: 0 4px 8px; margin: 0; }
/* Things that live between posts (suggestions, reels) get the same breathing room */
body[data-view="feed"] .feed-v2 .feed-list > :not(.post) { margin: 20px 0 0; }
body[data-view="feed"] .feed-v2 .feed-list > :first-child { margin-top: 0; }
.feed-v2 .post-composer + * { margin-top: 0; }

@media (max-width: 760px) {
    /* Phone: posts run edge to edge; space, not lines, separates them */
    body[data-view="feed"] .feed-v2 .feed-list .post.ig { padding: 0 0 16px; border-bottom: 0; }
    body[data-view="feed"] .feed-v2 .feed-list .post.ig + .post.ig,
    body[data-view="feed"] .feed-v2 .feed-list > * + .post.ig { margin-top: 24px; }
    body[data-view="feed"] .feed-v2 .post.ig .post-head { padding: 0 2px 10px; }
    body[data-view="feed"] .feed-v2 .post.ig .post-media { margin: 0 -12px; border-radius: 0; }
    body[data-view="feed"] .feed-v2 .post-actions { margin-left: -8px; margin-right: -8px; }
}
.feed-v2 .post-composer { margin-bottom: 12px; }
body[data-view="feed"] .feed-v2 .feed-list { margin-top: 20px; }
@media (max-width: 760px) { body[data-view="feed"] .feed-v2 .feed-list { margin-top: 16px; } }
@media (max-width: 760px) { body[data-view="feed"] .feed-v2 .feed-list { margin-top: 24px; } }

/* ==========================================================================
   Explore search mode + Chat steadiness (Explore = discover, Chat = communicate)
   ========================================================================== */

/* ---------- Explore: focused search ---------- */
.ex-search-row { display: flex; align-items: center; gap: 10px; }
.ex-search-row .ex-search { flex: 1; min-width: 0; }
.ex-clear { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.ex-clear .i { width: 16px; height: 16px; }
.ex-clear[hidden] { display: none; }
.ex-search input::-webkit-search-cancel-button { display: none; }
.ex-cancel { display: none; flex: none; min-height: 44px; padding: 0 4px; font-weight: 600; color: var(--accent); }
.explore.searching .ex-cancel { display: inline-flex; align-items: center; }
.explore.searching .ex-tabs, .explore.searching .ex-top .ex-topics { display: none; }
.explore.searching { gap: 20px; }

.ex-topics.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.ex-recent-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ex-recent-list li { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.ex-recent-list li:last-child { border-bottom: 0; }
.ex-recent-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.95rem; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-recent-go .i { flex: none; width: 17px; height: 17px; color: var(--text-muted); }
.ex-recent-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.ex-recent-x .i { width: 15px; height: 15px; }

/* Results: one vertical list per kind, each kind recognisable */
.ex-r-h { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.ex-r-h span { margin-left: 4px; font-weight: 600; letter-spacing: 0; }
.ex-r-list { display: grid; }
.ex-r {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--border);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
.ex-r-list > .ex-r:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .ex-r:hover { background: var(--input); } }
.ex-r:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.ex-r-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.ex-r-ic .i { width: 20px; height: 20px; }
.ex-r-ic.note { background: color-mix(in srgb, #22c55e 16%, var(--surface)); color: color-mix(in srgb, #16a34a 80%, var(--text)); }
.ex-r-thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--input); }
.ex-r-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ex-r-av { flex: none; }
.ex-r-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ex-r-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.ex-r-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.82rem; }
.ex-r-go { flex: none; color: var(--accent); font-size: 0.85rem; font-weight: 700; }
.ex-r-meta { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.ex-r-meta .i { width: 13px; height: 13px; }

/* Notes worth reading: a rail of small note cards */
.ex-ncard {
    flex: none; display: grid; align-content: start; gap: 6px; width: 240px; min-height: 172px; padding: 16px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .ex-ncard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } }
.ex-ncard-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: color-mix(in srgb, #16a34a 70%, var(--text)); }
.ex-ncard-kind .i { width: 14px; height: 14px; }
.ex-ncard strong { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-ncard-text { color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex-ncard-who { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }

/* ---------- Chat: anchored, quieter, grouped ---------- */
/* A re-render while a chat is open must never fade the whole conversation out and back in */
body.chat-open #content.repaint .inbox .chat-pane { animation: none !important; }
/* Opening: a short, calm slide (no long push) */
@media (max-width: 760px) {
    body.chat-open .inbox .chat-pane:not(.leaving) { animation: chat-open-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes chat-open-in { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { body.chat-open .inbox .chat-pane { animation: none !important; } }

/* Runs of messages from one person: tight spacing, the avatar only on the last one */
.chat-thread .msg.in + .msg.in, .chat-thread .msg.out + .msg.out { margin-top: 2px; }
.chat-thread .msg.in:has(+ .msg.in) .avatar { visibility: hidden; }

/* Header: call buttons match the other icons */
.chat-head .head-call { background: none; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .chat-head .head-call:hover { background: var(--input); } }

/* Loading a conversation */
.chat-skel { display: grid; gap: 10px; padding: 16px 4px; }
.chat-skel i { display: block; height: 38px; border-radius: 18px; background: var(--input); animation: shimmer 1.4s ease-in-out infinite; }
.chat-skel i.in { justify-self: start; }
.chat-skel i.out { justify-self: end; background: color-mix(in srgb, var(--accent) 22%, var(--input)); }
.chat-skel .w35 { width: 35%; } .chat-skel .w40 { width: 40%; } .chat-skel .w55 { width: 55%; } .chat-skel .w60 { width: 60%; } .chat-skel .w70 { width: 70%; }
@media (prefers-reduced-motion: reduce) { .chat-skel i { animation: none; } }

/* Inbox: the read ticks sit inline in the row, not floating below it */
.convo-ticks.ticks { position: static; display: inline-grid; align-self: center; }

/* A Playnote challenge in a chat */
.msg-playnote { display: grid; gap: 6px; }
.mp-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; opacity: 0.85; }
.mp-kind .i { width: 14px; height: 14px; }
.mp-play { justify-self: start; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; margin-top: 2px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; }
.mp-play .i { width: 14px; height: 14px; }

/* Inbox overview: compact, so conversations come first */
@media (max-width: 760px) {
    .inbox-hero { padding: 14px 18px 16px; }
    .inbox-hero .hero-count { margin-top: 2px; font-size: 1.2rem; font-weight: 700; }
    .inbox-hero .hero-contacts { margin-top: 12px; }
    .inbox-hero .hero-contact .avatar.lg { width: 48px; height: 48px; }
}
@media (min-width: 761px) { .inbox .chat-pane .chat-head .icon-btn.head-call { background: transparent; color: var(--text); } }
.explore .ex-search-row .ex-search { width: auto; max-width: none; }
.explore .ex-r-list, .explore #ex-body .ex-sec { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.explore { grid-template-columns: minmax(0, 1fr); }
.explore > * { min-width: 0; }
.explore .search.ex-search input { color: var(--text); -webkit-text-fill-color: var(--text); width: 100%; }
.explore .search.ex-search input::placeholder { color: var(--text-faint); -webkit-text-fill-color: var(--text-faint); }
.explore .ex-search-row .ex-search { flex: 1 1 0; width: 0; min-width: 0; }
/* Composer tools: instant press feedback, and no tap lost to the text box losing focus */
.post-composer .pc-tool, .post-composer .pc-audience, .post-composer .pc-schedule, .post-composer .pc-quick { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out, background-color 120ms; }
.post-composer :is(.pc-tool, .pc-audience, .pc-schedule, .pc-quick):active { transform: scale(0.95); background: var(--input); }
.post-composer .pc-post:active { transform: scale(0.97); }

/* ---------- Live: pinned comment, filters ---------- */
.lv-pin {
    position: absolute; z-index: 3; top: calc(118px + env(safe-area-inset-top, 0px)); left: 12px; right: 64px; max-width: 380px;
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 12px; border-radius: 14px;
    background: rgba(9, 9, 11, 0.62); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    font-size: 0.86rem; line-height: 1.35; animation: lv-pin-in 180ms ease-out;
}
.lv-pin[hidden] { display: none; }
.lv-pin-ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #fbbf24; }
.lv-pin-text { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.lv-pin-text small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.75; }
.lv-pin-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.lv-pin-x .i { width: 15px; height: 15px; }
@keyframes lv-pin-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lv-pin { animation: none; } }
.lv-msg.pinnable { cursor: pointer; border-radius: 12px; }
.lv-msg.pinnable:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lv-fx-strip {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    display: flex; gap: 10px; overflow-x: auto; padding: 12px 14px; scrollbar-width: none; overscroll-behavior-x: contain;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 30%);
}
.lv-fx-strip::-webkit-scrollbar { display: none; }
.lv-fx-strip[hidden] { display: none; }
.lv-fx-opt { flex: none; display: grid; justify-items: center; gap: 6px; width: 62px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.lv-fx-sw { display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, #f59e0b, #ef4444 35%, #8b5cf6 65%, #22c55e); }
.lv-fx-opt[aria-pressed="true"] .lv-fx-sw { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.lv-fx-opt:active .lv-fx-sw { transform: scale(0.94); }
.lv-fx-src { position: fixed; left: -2px; top: -2px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#lv-fx[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) {
    .lv-bar #lv-fx { position: absolute; right: 10px; width: 42px; height: 42px; bottom: calc(100% + 102px); }
}
@media (max-width: 760px) { .lv-fx-strip { right: 58px; padding-right: 8px; border-radius: 0 16px 16px 0; } }
@media (max-width: 760px) { dialog.live.hosting .lv-bar #lv-fit { bottom: calc(100% + 150px); } }

/* ---------- Live: filters on the setup screen, live swatches, screen sharing ---------- */
.lv-setup-fx { display: flex; gap: 10px; overflow-x: auto; margin: 4px -4px 2px; padding: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.lv-setup-fx::-webkit-scrollbar { display: none; }
.lv-setup-fx:empty { display: none; }
.lv-setup-fx .lv-fx-opt { width: 58px; font-size: 0.72rem; }
.lv-fx-opt canvas.lv-fx-sw { display: block; width: 52px; height: 52px; border-radius: 50%; background: #222; object-fit: cover; }
.lv-setup-fx .lv-fx-opt canvas.lv-fx-sw { width: 48px; height: 48px; }
    position: absolute; z-index: 3; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); margin: 0;
    padding: 6px 12px; border-radius: 999px; background: rgba(239, 68, 68, 0.9); color: #fff; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
dialog.live[data-screen="1"] .lv-title-line { display: none; }

/* ---------- Feed: Go live, right where you'd look for it ---------- */
.story-ring.go-live { display: grid; place-items: center; background: linear-gradient(135deg, #ef4444, #f97316); }
.go-live-ic { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg, #000); background: #ef4444; color: #fff; }
.go-live-ic .i { width: 26px; height: 26px; }
.story-live:active .story-ring { transform: scale(0.94); }
.post-composer .pc-quick.pc-live { color: #ef4444; }
@media (hover: hover) and (pointer: fine) { .post-composer .pc-quick.pc-live:hover { background: color-mix(in srgb, #ef4444 12%, transparent); } }
/* Collapsed composer: Live, Photo and "+" are one tap away; once it opens, the full tools row takes over */
.feed-v2 .post-composer:not(.open):not(:focus-within) .pc-quick { display: grid; }
.feed-v2 .post-composer .pc-quick.pc-live { background: color-mix(in srgb, #ef4444 12%, transparent); }
.feed-v2 .post-composer .pc-quick.pc-more { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 380px) { .feed-v2 .post-composer .pc-quick { width: 40px; height: 40px; } }
@media (max-width: 360px) { .feed-v2 .post-composer:not(.open):not(:focus-within) .pc-quick[data-action="feed-add-photos"] { display: none; } }

/* ---------- Live: invite people ---------- */
.lv-invite {
    position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; max-height: min(70%, 560px);
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; background: rgba(16, 16, 20, 0.94); color: #fff;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: lv-sheet-in 200ms ease-out;
}
.lv-invite[hidden] { display: none; }
@keyframes lv-sheet-in { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-invite { animation: none; } }
.lv-invite-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-invite-head h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.lv-invite-q { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 16px; }
.lv-invite-q::placeholder { color: rgba(255, 255, 255, 0.55); }
.lv-invite-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; min-height: 0; flex: 1; }
.lv-inv-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.lv-inv-name { flex: 1; min-width: 0; display: grid; }
.lv-inv-name strong, .lv-inv-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-inv-name small { opacity: 0.65; font-size: 0.78rem; }
.lv-inv-btn { flex: none; min-height: 36px; min-width: 76px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.lv-inv-btn:disabled { background: rgba(255, 255, 255, 0.14); color: #fff; cursor: default; }
.lv-inv-empty { padding: 12px 0; opacity: 0.7; font-size: 0.88rem; }
.lv-invite-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: none; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.lv-invite-link .i { width: 18px; height: 18px; }
#lv-invite-btn[aria-expanded="true"] { background: var(--accent); color: var(--on-accent); }

/* Phones: the host's controls stack on the right */
@media (max-width: 760px) {
    .lv-bar #lv-invite-btn { position: absolute; right: 10px; width: 42px; height: 42px; }
    .lv-bar #lv-invite-btn { bottom: calc(100% + 150px); }
    dialog.live.hosting .lv-bar #lv-fit { bottom: calc(100% + 198px); }
}
/* Your own camera in a call: natural orientation, as everyone else sees it */
.call-tile.self:not(.screen) .call-video-slot video { transform: none; }

/* ---------- Live: minimized to a floating player ---------- */
.lv-mini-bar { display: none; }
.lv-top .lv-min { margin-left: 0; }
dialog.live.mini {
    position: fixed; inset: auto 16px calc(84px + env(safe-area-inset-bottom, 0px)) auto; z-index: 900;
    width: 168px; height: 300px; max-width: none; max-height: none; margin: 0; padding: 0;
    border: 0; border-radius: 16px; overflow: hidden; background: #000;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: lv-mini-in 200ms ease-out;
}
dialog.live.mini[data-video="wide"] { width: 280px; height: 158px; }
@media (min-width: 900px) { dialog.live.mini { bottom: 24px; right: 24px; width: 220px; height: 390px; } dialog.live.mini[data-video="wide"] { width: 360px; height: 203px; } }
@keyframes lv-mini-in { from { opacity: 0; transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) { dialog.live.mini { animation: none; } }
dialog.live.mini #lv-video { object-fit: cover !important; transform: none !important; }
dialog.live.mini :is(.lv-top, .lv-title-line, .lv-hop, .lv-status, .lv-hearts, .lv-pin, .lv-chat, .lv-fx-strip, .lv-invite, .lv-setup, .lv-bar) { display: none !important; }
dialog.live.mini .lv-mini-bar { position: absolute; z-index: 5; top: 6px; right: 6px; left: 6px; display: flex; justify-content: space-between; }
.lv-mini-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; touch-action: manipulation; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lv-mini-btn .i { width: 17px; height: 17px; }
dialog.live.mini::after { content: 'LIVE'; position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.lv-wait { transition: opacity 400ms ease, transform 400ms ease; }
.lv-wait.leaving { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .lv-wait { transition: none; } }
#lv-status { transition: opacity 400ms ease; }
#lv-status.leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #lv-status { transition: none; } }

/* ==========================================================================
   Posting progress, the audio library and music on posts
   ========================================================================== */

/* ---------- Posting strip (top of the Feed) ---------- */
#post-progress-slot:empty { display: none; }
.post-progress {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    animation: pp-in 200ms ease-out;
}
@keyframes pp-in { from { opacity: 0; transform: translateY(-6px); } }
.pp-thumb { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 10px; background: var(--input); display: grid; place-items: center; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-ic .i { width: 20px; height: 20px; color: var(--text-muted); }
.pp-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.pp-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-label .i { flex: none; width: 16px; height: 16px; color: var(--online, #16a34a); }
.pp-bar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--input); }
.pp-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width 240ms ease-out; }
.post-progress.active .pp-bar i { background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); background-size: 200% 100%; animation: pp-shine 1.4s linear infinite; }
@keyframes pp-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
.post-progress.done .pp-bar i { background: var(--online, #16a34a); }
.post-progress.failed { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border)); }
.post-progress.failed .pp-label { color: var(--danger, #ef4444); white-space: normal; }
.post-progress .chip { flex: none; }
@media (prefers-reduced-motion: reduce) { .post-progress, .post-progress.active .pp-bar i { animation: none; } .pp-bar i { transition: none; } }
@media (max-width: 760px) { .post-progress { margin: 0 0 12px; } }

/* ---------- Covers (artwork, or generated for Cordial Sounds) ---------- */
.al-cover { flex: none; position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: var(--input); }
.al-cover img { width: 100%; height: 100%; object-fit: cover; }
.al-cover.big { width: 64px; height: 64px; border-radius: 12px; }
.al-cover.gen { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 0 8px 10px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.al-cover.gen i { width: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.85); }
.al-cover.gen i:nth-child(1) { height: 30%; } .al-cover.gen i:nth-child(2) { height: 62%; } .al-cover.gen i:nth-child(3) { height: 45%; } .al-cover.gen i:nth-child(4) { height: 75%; } .al-cover.gen i:nth-child(5) { height: 38%; }

/* ---------- The library ---------- */
dialog.al-dlg { width: min(520px, calc(100vw - 32px)); max-width: none; max-height: min(720px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); overflow: hidden; }
dialog.al-dlg::backdrop { background: rgba(8, 10, 20, 0.55); }
.al-card { display: flex; flex-direction: column; gap: 12px; max-height: min(720px, calc(100dvh - 34px)); padding: 14px 16px 16px; }
.al-head { display: flex; align-items: center; gap: 6px; }
.al-head h3 { flex: 1; margin: 0; font-size: 1.05rem; }
.al-search { width: 100%; max-width: none; margin: 0; }
.al-search input { font-size: 16px; }
.al-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.al-cats::-webkit-scrollbar { display: none; }
.al-cat { flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.al-cat[aria-selected="true"] { border-color: transparent; background: var(--text); color: var(--bg); }
.al-list { list-style: none; margin: 0 -8px; padding: 0; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; }
.al-row { display: flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .al-row:hover { background: var(--input); } }
.al-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.al-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.al-text strong, .al-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-text small { color: var(--text-muted); font-size: 0.8rem; }
.al-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--input); color: var(--text); cursor: pointer; touch-action: manipulation; }
.al-play[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.al-play.big { width: 48px; height: 48px; }
.al-empty { padding: 20px 8px; color: var(--text-muted); text-align: center; }
.al-note { margin: 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.45; }
.al-now { display: flex; align-items: center; gap: 12px; }
.al-field { display: grid; gap: 8px; font-size: 0.86rem; color: var(--text-muted); }
.al-field b { color: var(--text); font-variant-numeric: tabular-nums; }
.al-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.al-window { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--input); }
.al-window i { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.al-seg { display: flex; gap: 6px; }
.al-seg button { min-height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.al-seg button[aria-checked="true"] { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.al-use { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin-top: 4px; }
@media (max-width: 760px) {
    dialog.al-dlg { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .al-card { height: 100%; max-height: 100dvh; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Music on a post, and in the composer ---------- */
.post-music { display: flex; align-items: center; gap: 10px; margin: 8px 16px 2px; padding: 8px 8px 8px 8px; border-radius: 12px; background: var(--input); }
.post-music .al-cover { width: 36px; height: 36px; border-radius: 8px; padding-bottom: 7px; }
.post-music .al-cover.gen i { width: 3px; }
.pm-text { flex: 1; min-width: 0; display: grid; }
.pm-text strong, .pm-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-text strong { font-size: 0.86rem; }
.pm-text small { color: var(--text-muted); font-size: 0.76rem; }
.pm-play { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; touch-action: manipulation; }
.pm-play .i { width: 16px; height: 16px; }
.pm-play .pm-i-pause, .pm-play.playing .pm-i-play { display: none; }
.pm-play.playing .pm-i-pause { display: block; }
.pm-play.playing { background: var(--accent); color: var(--on-accent); }
body[data-view="feed"] .feed-v2 .post.ig .post-music { margin: 8px 0 2px; }
.pc-audio .al-cover { width: 40px; height: 40px; border-radius: 9px; padding-bottom: 8px; }

/* Licensed music: licence tags, loading row, credit link on posts */
.al-lic { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--input); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.al-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px; color: var(--text-muted); font-size: 0.86rem; }
.al-spin { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: al-spin 0.8s linear infinite; }
@keyframes al-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .al-spin { animation: none; } }
.pm-lic { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.al-card .search.al-search { order: 0; }

/* ---------- Sounds on posts: "♪ Artist · Title" under the creator, the speaker on the photo ---------- */
.post-sub { display: flex; align-items: center; gap: 4px; min-width: 0; }
.post-sound {
    display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
    padding: 2px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 600;
    cursor: pointer; touch-action: manipulation;
}
.post-sound .i { flex: none; width: 13px; height: 13px; }
.post-sound .ps-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) { button.post-sound:hover .ps-text { text-decoration: underline; } }
.post-sound:focus-visible, .pm-title:focus-visible, .media-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.post-head .post-sound { position: relative; }
.post-head button.post-sound::after { content: ''; position: absolute; inset: -10px -4px; }

.media-sound {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(18, 18, 22, 0.72); color: #fff; cursor: pointer; touch-action: manipulation;
    transition: transform 120ms ease-out, background 120ms;
}
.media-sound::after { content: ''; position: absolute; inset: -8px; }
.media-sound .i { width: 16px; height: 16px; }
.media-sound .pm-i-pause, .media-sound.playing .pm-i-play { display: none; }
.media-sound.playing .pm-i-pause { display: block; }
.media-sound:active { transform: scale(0.92); }
.post-media:has(.dots) .media-sound { bottom: 28px; }

.pm-title { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pm-title:hover { text-decoration: underline; } }

/* The post ends with its time (and the licence when the sound needs crediting) */
.post-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 6px 16px 2px; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.01em; }
.post-when .post-time { font-size: inherit; }
.post-when .aud { width: 12px; height: 12px; }
.post-when .pm-lic { color: inherit; }
body[data-view="feed"] .feed-v2 .post.ig .post-when { padding: 6px 4px 2px; }

/* Counts sit beside the icons; the like's word gives way to its number */
.post.ig .post-actions .like-btn .act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.post.ig .post-actions .like-btn.reacted .act-count { color: var(--text); }
.react-sum-text b { font-weight: 750; color: var(--text); }
.react-sum-text { color: var(--text-muted); }

/* ---------- Composer: the chosen sound ---------- */
.pc-audio { flex-wrap: wrap; }
.pc-audio .pc-audio-btns { display: inline-flex; gap: 6px; }
.pc-audio .pc-audio-btns .chip { min-height: 32px; padding: 0 12px; font-size: 0.8rem; }
@media (max-width: 480px) { .pc-audio .pc-audio-btns { order: 5; flex-basis: 100%; padding-left: 46px; } }

/* ---------- Preview before posting ---------- */
.draft-preview { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden; }
.draft-preview::backdrop { background: rgba(8, 8, 12, 0.6); }
.dp-card { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--border); }
.dp-head h3 { margin: 0; font-size: 1rem; }
.dp-post { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; }
.dp-post .post-head { padding: 12px 14px; }
.dp-post .post-media { border-radius: 0; }
.dp-carousel .slide { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.dp-carousel img { display: block; width: 100%; max-height: 60dvh; object-fit: cover; }
.dp-actions { padding: 6px 8px 0; pointer-events: none; }
.dp-actions .act { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--text); }
.dp-post .post-caption { padding: 4px 16px 0; }
.dp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }

/* ---------- Reel sheet: the chosen sound ---------- */
.mc-audio-chip { gap: 8px; padding: 4px; border-radius: 14px; }
.mc-audio-chip .al-cover { width: 36px; height: 36px; border-radius: 8px; padding-bottom: 7px; }
.mc-audio-chip .al-cover.gen i { width: 3px; }
.mc-audio-chip .mc-audio-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mc-audio-chip .mc-audio-text strong, .mc-audio-chip .mc-audio-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-audio-chip .mc-audio-text small { font-weight: 500; opacity: 0.8; }
.mc-audio-chip .mc-hear { flex: none; min-height: 30px; padding: 0 10px; font-size: 0.78rem; gap: 4px; }
.reel-sound { margin: 6px 0 0; }
.reel-sound .post-sound { color: #fff; font-size: 0.82rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* ---------- Sound page ---------- */
.snd-page { max-width: 760px; margin: 0 auto; padding: 0 0 32px; }
.snd-top { display: flex; align-items: center; padding: 4px 0 8px; }
.snd-hero { display: flex; gap: 20px; align-items: flex-end; padding: 8px 0 24px; border-bottom: 1px solid var(--border); }
.snd-cover .al-cover.big { width: 148px; height: 148px; border-radius: 18px; padding: 0 22px 26px; gap: 6px; box-shadow: var(--shadow); }
.snd-cover .al-cover.big.gen i { width: 9px; }
.snd-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.snd-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.snd-kicker .i { width: 14px; height: 14px; }
.snd-info h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.snd-artist { margin: 0; font-size: 1rem; font-weight: 650; }
.snd-meta, .snd-lic { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.snd-lic a { color: inherit; }
.snd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.snd-play { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.snd-play .i, .snd-use .i { width: 16px; height: 16px; }
.snd-play[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.snd-use { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 999px; }
.snd-sub { margin: 20px 0 12px; font-size: 1rem; }
.snd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.snd-tile { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--input); color: var(--text); cursor: pointer; }
.snd-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snd-tile.skel { animation: snd-pulse 1.2s ease-in-out infinite alternate; }
@keyframes snd-pulse { to { opacity: 0.55; } }
.snd-tile.text { display: flex; align-items: center; padding: 12px; text-align: left; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.snd-tile-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; line-height: 1.35; }
.snd-tile-n { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.snd-tile.text .snd-tile-n { color: var(--text-muted); text-shadow: none; }
.snd-tile-n .i { width: 13px; height: 13px; }
.snd-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.snd-hero .sk-line { display: block; height: 14px; border-radius: 6px; background: var(--input); }
@media (max-width: 560px) {
    .snd-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
    .snd-cover .al-cover.big { width: 112px; height: 112px; padding: 0 16px 20px; }
    .snd-actions { width: 100%; }
    .snd-actions > * { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .snd-tile.skel { animation: none; } .media-sound { transition: none; } }
.snd-use { white-space: nowrap; }
.snd-page { padding-top: 8px; }
.dp-post .post-caption { padding: 6px 16px 0 !important; }

/* ==========================================================================
   Media editor — full screen, media first, always dark
   ========================================================================== */
dialog.me {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; inset: 0;
    padding: 0; border: 0; background: #050507; color: #fff; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
dialog.me::backdrop { background: rgba(0, 0, 0, 0.88); }
@media (min-width: 700px) {
    dialog.me { width: 430px; height: min(920px, calc(100dvh - 32px)); margin: auto; border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
}
.me-frame { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: var(--font); }
.me-stage { position: absolute; inset: 0; background: linear-gradient(180deg, #14161d, #050507); }
.me-backdrop { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(42px) saturate(1.3) brightness(0.62); transform: scale(1.1); pointer-events: none; }
.me-slides {
    position: absolute; left: 0; right: 0; top: calc(66px + env(safe-area-inset-top, 0px)); bottom: 158px;
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain;
}
.me-slides::-webkit-scrollbar { display: none; }
.me-slide { position: relative; flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: start; }
.me-box { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.me-media { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.me-ov-layer { position: absolute; inset: 0; }
.me-ov {
    position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0rad)) scale(var(--s, 1));
    white-space: nowrap; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
    transition: opacity 120ms, filter 120ms;
}
.me-ov.grab { cursor: grabbing; }
.me-ov:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.9); outline-offset: 4px; }
.me-ov.binning { opacity: 0.45; filter: grayscale(1); }
.me-ov.text { font: 800 calc(var(--w) * 0.068) / 1.2 var(--font); text-shadow: 0 0 calc(var(--w) * 0.01) rgba(0, 0, 0, 0.45); }
.me-ov.text.boxed { padding: 0.22em 0.45em; border-radius: 0.3em; background: var(--bg); text-shadow: none; }
.me-ov.emoji { font-size: calc(var(--w) * 0.2); line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.me-ov.label { padding: 0.4em 0.6em; border-radius: 0.6em; background: #fff; color: #111; font: 800 calc(var(--w) * 0.055) / 1 var(--font); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.me-dots { position: absolute; left: 0; right: 0; bottom: 140px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.me-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.me-dots i.on { background: #fff; }

/* Top: close, the sound chip */
.me-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: start; gap: 8px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 0; transition: opacity 150ms; }
.me-round {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(18, 20, 28, 0.55); color: #fff; cursor: pointer; touch-action: manipulation;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 120ms ease-out, background 150ms;
}
.me-round .i { width: 22px; height: 22px; }
.me-round:active { transform: scale(0.92); }
.me-round.on { background: #fff; color: #111; }
.me-round.small { height: 30px; border-radius: 999px; }
.me-round.small .i { width: 18px; height: 18px; }
.me-aa { font: 700 1.15rem/1 var(--font); letter-spacing: -0.02em; }
.me-round:focus-visible, .me-chip:focus-visible, .me-chip-x:focus-visible, .me-pill:focus-visible, .me-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.me-chip-slot { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.me-chip-wrap { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 5px; border-radius: 14px; background: rgba(18, 20, 28, 0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.me-chip { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: #fff; font: 700 0.9rem var(--font); cursor: pointer; }
.me-chip .al-cover { width: 34px; height: 34px; border-radius: 8px; padding-bottom: 7px; }
.me-chip .al-cover.gen i { width: 3px; }
.me-chip .al-cover.own { padding: 0; background: rgba(255, 255, 255, 0.15); color: #fff; }
.me-chip-text { display: block; max-width: min(190px, 46vw); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent); }
.me-marquee { display: inline-flex; gap: 36px; padding-left: 6px; }
.me-marquee.run { animation: me-marquee 10s linear infinite; }
@keyframes me-marquee { to { transform: translateX(calc(-50% - 18px)); } }
.me-chip-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #111; cursor: pointer; }
.me-chip-x .i { width: 14px; height: 14px; }
.me-chip.add { min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(18, 20, 28, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.me-chip.add .i { width: 17px; height: 17px; }
.me-chip-sub { color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

/* Right: the tools */
.me-tools { position: absolute; z-index: 3; right: 12px; top: calc(68px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity 150ms; }
.me-more { position: absolute; top: 100%; right: 0; margin-top: 10px; display: grid; min-width: 210px; padding: 6px; border-radius: 16px; background: rgba(24, 26, 32, 0.95); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.me-more button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: #fff; font: 600 0.92rem var(--font); text-align: left; cursor: pointer; }
.me-more button .i { width: 19px; height: 19px; }
.me-more button:disabled { color: rgba(255, 255, 255, 0.5); cursor: default; }
@media (hover: hover) and (pointer: fine) { .me-more button:not(:disabled):hover { background: rgba(255, 255, 255, 0.08); } }

/* Panels over the bottom of the picture */
.me-panel { position: absolute; z-index: 4; left: 0; right: 0; bottom: 150px; padding: 0 12px 10px; }
.me-panel[hidden] { display: none; }
.me-fx { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px 4px; }
.me-fx::-webkit-scrollbar { display: none; }
.me-fx-item { flex: none; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font: 700 0.72rem var(--font); cursor: pointer; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.me-fx-thumb { display: block; width: 62px; height: 78px; overflow: hidden; border-radius: 12px; border: 2px solid transparent; background: #222; transition: transform 120ms; }
.me-fx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.me-fx-item[aria-checked="true"] .me-fx-thumb { border-color: #fff; transform: scale(1.05); }
.me-vol { display: grid; gap: 14px; padding: 16px; border-radius: 20px; background: rgba(22, 24, 30, 0.95); }
.me-vol label { display: grid; gap: 8px; font-size: 0.86rem; font-weight: 600; }
.me-vol label > span { display: flex; align-items: center; gap: 8px; }
.me-vol label b { margin-left: auto; font-variant-numeric: tabular-nums; }
.me-vol .i { width: 17px; height: 17px; }
.me-vol input[type="range"] { width: 100%; accent-color: #fff; height: 28px; }
.me-panel-done { justify-self: end; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #111; font: 800 0.88rem var(--font); cursor: pointer; }
.me-stickers { display: grid; gap: 12px; max-height: 46dvh; overflow-y: auto; padding: 14px; border-radius: 20px; background: rgba(22, 24, 30, 0.96); overscroll-behavior: contain; }
.me-st-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.me-st-label { min-height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: #111; font: 800 0.86rem var(--font); cursor: pointer; }
.me-st-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.me-st-grid button { aspect-ratio: 1; border: 0; border-radius: 12px; background: none; font-size: 1.9rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .me-st-grid button:hover { background: rgba(255, 255, 255, 0.08); } }

/* Bottom: caption, who sees it, share */
.me-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 26px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(5, 5, 7, 0.95) 62%, rgba(5, 5, 7, 0)); transition: opacity 150ms; }
.me-cap textarea { display: block; width: 100%; min-height: 40px; padding: 8px 4px; border: 0; background: none; color: #fff; font: 500 16px/1.4 var(--font); resize: none; outline: none; }
.me-cap textarea::placeholder { color: rgba(255, 255, 255, 0.72); }
.me-actions { display: flex; align-items: center; gap: 10px; }
.me-pill { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.13); color: #fff; font: 700 0.9rem var(--font); cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.me-pill span { overflow: hidden; text-overflow: ellipsis; }
.me-pill .i { width: 18px; height: 18px; flex: none; }
.me-pill.static { cursor: default; }
.me-ring { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; }
.me-pill[aria-pressed="true"] .me-ring { border-color: #22c55e; background: #22c55e; }
.me-pill[aria-pressed="true"] .me-ring::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.me-go { flex: none; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: #6b74f5; color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(107, 116, 245, 0.45); transition: transform 120ms ease-out; }
.me-go .i { width: 24px; height: 24px; }
.me-go:active { transform: scale(0.93); }
.me-go.busy .i { visibility: hidden; }
.me-go.busy::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: al-spin 0.8s linear infinite; }
.me-go { position: relative; }

/* Dragging a sticker: the chrome steps aside and the bin appears */
.me-trash { position: absolute; z-index: 4; left: 50%; bottom: 60px; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; transform: translateX(-50%) scale(0.8); transition: opacity 150ms, transform 150ms, background 150ms; pointer-events: none; }
.me-trash .i { width: 24px; height: 24px; }
.me-trash.show { opacity: 1; transform: translateX(-50%) scale(1); }
.me-trash.hot { background: #ef4444; border-color: #ef4444; transform: translateX(-50%) scale(1.18); }
dialog.me.dragging :is(.me-top, .me-tools, .me-foot, .me-panel) { opacity: 0; pointer-events: none; }

/* Typing text */
.me-sheet-back { position: absolute; z-index: 5; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.me-sheet-back[hidden] { display: none; }
.me-te { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
.me-te-top { display: flex; align-items: center; justify-content: space-between; }
.me-te-style { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 12px; background: none; color: #fff; font: 800 1.1rem var(--font); cursor: pointer; }
.me-te-style[aria-pressed="true"] { background: #fff; color: #111; }
.me-te-done { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #111; font: 800 0.95rem var(--font); cursor: pointer; }
.me-te-field { display: grid; place-items: center; }
#me-te-input { width: 88%; padding: 0.22em 0.45em; border: 0; border-radius: 0.3em; background: transparent; font: 800 28px/1.2 var(--font); text-align: center; resize: none; outline: none; caret-color: currentColor; text-shadow: 0 0 3px rgba(0, 0, 0, 0.45); }
#me-te-input.boxed { background: var(--bg); text-shadow: none; }
#me-te-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.me-te-colors { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.me-te-colors button { width: 30px; height: 30px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c); cursor: pointer; transition: transform 120ms; }
.me-te-colors button[aria-checked="true"] { transform: scale(1.25); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }

/* Discard? */
.me-confirm { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); }
.me-confirm[hidden] { display: none; }
.me-cf-card { width: min(320px, 86%); overflow: hidden; border-radius: 20px; background: #1d1f26; text-align: center; }
.me-cf-card h3 { margin: 22px 20px 6px; font-size: 1.05rem; }
.me-cf-card p { margin: 0 20px 18px; color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; }
.me-cf-btn { display: block; width: 100%; min-height: 50px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); background: none; color: #fff; font: 600 0.95rem var(--font); cursor: pointer; }
.me-cf-btn.danger { color: #f87171; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
    .me-marquee.run { animation: none; }
    .me-round, .me-go, .me-trash, .me-fx-thumb { transition: none; }
}

/* ==========================================================================
   Sound library — a dark bottom sheet
   ========================================================================== */
dialog.al-dlg {
    --al-bg: #16171c; --al-raise: #25272e; --al-text: #f5f5f7; --al-muted: #9a9ca7;
    width: 100%; max-width: 560px; height: min(90dvh, 840px); max-height: none; margin: auto auto 0; padding: 0;
    border: 0; border-radius: 22px 22px 0 0; background: var(--al-bg); color: var(--al-text); overflow: hidden;
    animation: al-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
dialog.al-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
@media (min-width: 700px) { dialog.al-dlg { margin: auto; height: min(780px, calc(100dvh - 48px)); border-radius: 22px; } }
@keyframes al-up { from { transform: translateY(60px); opacity: 0; } }
.al-sheet { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 0 16px; }
.al-grab { flex: none; display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; }
.al-grab i { width: 42px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.al-dlg .search.al-search { flex: none; width: 100%; height: 46px; margin: 0; border: 0; border-radius: 12px; background: var(--al-raise); color: var(--al-muted); }
.al-dlg .search.al-search input { color: var(--al-text); font-size: 16px; }
.al-dlg .search.al-search input::placeholder { color: var(--al-muted); }
.al-dlg .al-cats { flex: none; gap: 8px; margin: 0 -16px; padding: 0 16px 2px; }
.al-dlg .al-cat { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--al-raise); color: var(--al-text); font-size: 0.84rem; font-weight: 700; touch-action: manipulation; }
.al-dlg .al-cat[aria-selected="true"] { background: #fff; color: #111; }
.al-list-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 2px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.al-dlg .al-list { overflow: visible; flex: none; margin: 0 -8px; }
.al-dlg .al-row { padding: 0 4px 0 8px; }
@media (hover: hover) and (pointer: fine) { .al-dlg .al-row:hover { background: rgba(255, 255, 255, 0.04); } }
.al-dlg .al-pick { color: var(--al-text); min-height: 68px; gap: 14px; }
.al-dlg .al-cover { width: 54px; height: 54px; border-radius: 6px; background: var(--al-raise); }
.al-dlg .al-cover.own { color: #fff; }
.al-dlg .al-cover.own .i { width: 22px; height: 22px; }
.al-dlg .al-text strong { font-size: 0.98rem; font-weight: 700; }
.al-dlg .al-text small { color: var(--al-muted); font-size: 0.84rem; }
.al-up { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.al-save { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--al-text); cursor: pointer; touch-action: manipulation; }
.al-save .i { width: 22px; height: 22px; }
.al-label { padding: 16px 8px 4px; color: var(--al-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.al-dlg .al-note { margin-top: 14px; color: var(--al-muted); }
.al-dlg .al-lic { background: var(--al-raise); color: var(--al-muted); }
.al-dlg .al-empty, .al-dlg .al-loading { color: var(--al-muted); }
.al-dlg .al-spin { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; }
.al-feat { margin: 2px 0 10px; }
.al-feat-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.al-feat-track::-webkit-scrollbar { display: none; }
.al-feat-item { position: relative; flex: 0 0 100%; display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 14px 0 0; overflow: hidden; border: 0; border-radius: 14px; background: #2a2c33; color: #fff; text-align: left; font: inherit; cursor: pointer; scroll-snap-align: start; }
.al-feat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(0.55) saturate(1.3); transform: scale(1.4); }
.al-feat-bg.gen { background: linear-gradient(120deg, var(--c1), var(--c2)); filter: brightness(0.7); transform: none; }
.al-feat-item .al-cover { position: relative; width: 78px; height: 78px; border-radius: 0; }
.al-feat-item .al-text { position: relative; }
.al-feat-item .al-text strong { font-size: 1.08rem; font-weight: 800; }
.al-feat-item .al-text small { color: rgba(255, 255, 255, 0.8); }
.al-dots { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.al-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background 150ms; }
.al-dots i.on { background: #8b93ff; }

/* Choosing the part */
.al-sheet.edit { gap: 14px; }
.al-dlg .al-head { flex: none; }
.al-dlg .al-head h3 { text-align: center; font-size: 1rem; }
.al-dlg .al-head .icon-btn { color: var(--al-text); }
.al-head-sp { width: 40px; }
.al-dlg .al-now { gap: 14px; }
.al-dlg .al-now .al-cover.big { width: 68px; height: 68px; border-radius: 10px; }
.al-times { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 0; font: 800 1.15rem var(--font); font-variant-numeric: tabular-nums; }
.al-times span { width: 44px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); }
.al-track { position: relative; flex: none; height: 76px; border-radius: 14px; background: var(--al-raise); touch-action: none; cursor: pointer; overflow: hidden; }
.al-bars { position: absolute; inset: 12px 8px; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.al-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: rgba(255, 255, 255, 0.25); transition: background 120ms; }
.al-bars i.in { background: #fff; }
.al-win { position: absolute; top: 5px; bottom: 5px; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.22); cursor: grab; }
.al-track.dragging .al-win { cursor: grabbing; }
.al-win:focus-visible { outline: 2px solid #8b93ff; outline-offset: 3px; }
.al-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #8b93ff; }
.al-hint { margin: 0; color: var(--al-muted); font-size: 0.82rem; text-align: center; }
.al-dlg .al-seg { flex: none; justify-content: center; }
.al-dlg .al-seg button { border: 0; background: var(--al-raise); color: var(--al-text); }
.al-dlg .al-seg button[aria-checked="true"] { background: #fff; color: #111; }
.al-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; margin-top: auto; padding: 12px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; border: 0; border-radius: 14px; background: var(--al-raise); color: var(--al-text); font: 700 0.92rem var(--font); cursor: pointer; touch-action: manipulation; }
.al-btn .i { width: 17px; height: 17px; }
.al-btn.primary { background: #fff; color: #111; }
.al-btn:disabled { opacity: 0.7; }
.al-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { dialog.al-dlg { animation: none; } .al-bars i, .al-dots i { transition: none; } }
.al-sheet .search.al-search { order: 0; }

/* ==========================================================================
   Playnote v3 — a launchpad: progress, one next step, rails you swipe, previews that open sheets
   ========================================================================== */
:root[data-theme="dark"] :is(.pn-hero, .pn-card) { --g-soft: color-mix(in srgb, var(--g) 24%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.pn-hero, .pn-card) { --g-soft: color-mix(in srgb, var(--g) 24%, var(--surface)); } }

.pn { max-width: 1080px; margin: 0 auto; padding: 4px 0 40px; font-variant-numeric: tabular-nums; }
.pn-main, .pn-side { display: contents; }
.pn { display: flex; flex-direction: column; gap: 24px; }
/* Phone order: greeting, progress, the next challenge, then everything else; standings last */
.pn-head { order: 0; }
.pn-progress { order: 1; }
.pn-hero { order: 2; }
.pn-main > .pn-sec { order: 3; }
.pn-lb { order: 4; }
.pn-badges { order: 5; }

.pn-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.pn-head { display: grid; gap: 2px; padding: 4px 2px 0; }
.pn-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 5.5vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }

/* Progress: level ring + XP, then three numbers — one compact card */
.pn-progress { display: grid; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.pn-level { display: flex; align-items: center; gap: 14px; }
.pn-ring {
    --p: 0; flex: none; display: grid; place-items: center; align-content: center; width: 58px; height: 58px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--surface) 76%, transparent 78% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--input) 0);
}
.pn-ring b { font-size: 1.2rem; line-height: 1; }
.pn-ring small { color: var(--text-muted); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pn-level-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pn-level-text strong { font-size: 1.02rem; }
.pn-level-text small { color: var(--text-muted); font-size: 0.8rem; }
.pn-bar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--input); overflow: hidden; }
.pn-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); list-style: none; }
.pn-stats li { display: grid; gap: 1px; padding: 0 8px; text-align: center; }
.pn-stats li + li { border-left: 1px solid var(--border); }
.pn-stats b { display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 1.05rem; }
.pn-stats .streak b { color: #ea580c; }
.pn-stats .i { width: 16px; height: 16px; }
.pn-stats small { color: var(--text-muted); font-size: 0.72rem; }

/* The one thing to do next */
.pn-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 20px 18px 20px 20px; overflow: hidden; border-radius: 22px; background: var(--g-soft, var(--accent-soft));
}
.pn-hero.all-done { --g: var(--accent); background: color-mix(in srgb, #16a34a 12%, var(--surface)); }
.pn-hero-text { display: grid; gap: 6px; min-width: 0; }
.pn-hero .pn-kicker { color: var(--g); }
.pn-hero .pn-kicker span { color: var(--text-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.pn-dots { display: inline-flex; gap: 4px; }
.pn-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--g) 25%, transparent); }
.pn-dots i.on { background: var(--g); }
.pn-hero h3 { margin: 2px 0 0; font-family: var(--serif); font-size: clamp(1.45rem, 6vw, 1.9rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; }
.pn-hero p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
.pn-hero .pn-est { color: var(--text); font-size: 0.82rem; font-weight: 600; }
.pn-cta {
    justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 0 22px;
    border: 0; border-radius: 999px; background: var(--g, var(--accent)); color: #fff; font: 800 0.98rem var(--font); cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--g, var(--accent)) 35%, transparent); transition: transform 120ms ease-out, box-shadow 160ms;
    touch-action: manipulation;
}
:root[data-theme="dark"] .pn-cta { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pn-cta { color: #111; } }
.pn-cta .i { width: 18px; height: 18px; }
.pn-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pn-cta:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--g, var(--accent)) 45%, transparent); } }
.pn-hero-art { display: grid; place-items: center; width: 118px; color: var(--g); }
.pn-hero-art .g-art { width: 118px; }
.pn-hero-art .g-glyph { width: 64px; height: 64px; }
.pn-hero-art.done .i { width: 64px; height: 64px; color: #16a34a; }
@media (max-width: 380px) { .pn-hero { grid-template-columns: minmax(0, 1fr); } .pn-hero-art { position: absolute; right: -14px; top: 10px; width: 96px; opacity: 0.5; } }

/* Section headers and rails */
.pn-sec { display: grid; gap: 12px; min-width: 0; }
.pn-sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.pn-sec-head h3 { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
.pn-sec-head p { flex: 1; min-width: 0; margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.pn-see { margin-left: auto; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: 700 0.86rem var(--font); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pn-see:hover { text-decoration: underline; } }
.pn-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%); gap: 10px;
    margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
}
.pn-rail::-webkit-scrollbar { display: none; }
.pn-rail > * { scroll-snap-align: start; }
.pn-rail.reads { grid-auto-columns: minmax(250px, 84%); }
.pn-rail.games { grid-auto-columns: minmax(118px, 31%); }
.pn-rail.topics { grid-auto-columns: max-content; }
.pn-rail.matches { grid-auto-columns: minmax(170px, 46%); }

/* Shared card language: one radius, one border, one press */
:is(.pn-card, .pn-read, .pn-game, .pn-game-feat, .pn-match, .pn-topic, .pn-box) { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
:is(.pn-card, .pn-game, .pn-game-feat, .pn-match, .pn-topic) { font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 120ms ease-out, border-color 150ms, box-shadow 150ms; }
:is(.pn-card, .pn-game, .pn-game-feat, .pn-match, .pn-topic):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { :is(.pn-card, .pn-game, .pn-game-feat, .pn-match, .pn-topic):hover { border-color: var(--border-strong); box-shadow: var(--shadow); } }
:is(.pn-card, .pn-game, .pn-game-feat, .pn-match, .pn-topic, .pn-read-body, .pn-cta, .pn-see, .pn-mini):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pn-card { display: grid; align-content: start; gap: 4px; min-height: 148px; padding: 14px; }
.pn-card-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; background: var(--g-soft); color: var(--g); }
.pn-card-ic .i { width: 20px; height: 20px; }
.pn-card strong { font-size: 0.92rem; line-height: 1.25; }
.pn-card small { color: var(--text-muted); font-size: 0.76rem; }
.pn-go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; color: var(--g, var(--accent)); font-size: 0.82rem; font-weight: 800; }
.pn-go .i { width: 14px; height: 14px; }
.pn-go.ok { color: #16a34a; }
.pn-card.done { background: color-mix(in srgb, var(--surface) 70%, var(--input)); }

/* Today's reads */
.pn-read { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 196px; padding: 16px; }
.pn-read-k { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pn-read-k .i { width: 15px; height: 15px; }
.pn-read-k span { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pn-read-body { display: grid; align-content: start; gap: 6px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pn-word-w { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pn-word-w dfn { font-family: var(--serif); font-size: 1.7rem; font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
.pn-word-w i { color: var(--text-muted); font-family: var(--serif); font-size: 0.9rem; }
.pn-read-text, .pn-quote { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.pn-read-text { -webkit-line-clamp: 3; color: var(--text); font-size: 0.92rem; }
.pn-quote { -webkit-line-clamp: 4; font-family: var(--serif); font-size: 1.05rem; }
.pn-src { color: var(--text-muted); font-size: 0.8rem; }
.pn-read-foot { display: flex; gap: 6px; }
.pn-mini { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--input); color: var(--text); font: 700 0.8rem var(--font); cursor: pointer; }
.pn-mini .i { width: 15px; height: 15px; }
.pn-poll-q { margin: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.pn-poll .pl-poll-opts { gap: 6px; }
.pn-poll .pl-opt { min-height: 40px; font-size: 0.86rem; }

/* Play: a featured puzzle and a row of the others */
.pn-game-feat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; }
.pn-game-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--input); }
.pn-game-art .i { width: 32px; height: 32px; }
.pn-game-text { display: grid; gap: 2px; min-width: 0; }
.pn-game-text small { color: var(--text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pn-game-text strong { font-size: 1.1rem; }
.pn-game-text span { color: var(--text-muted); font-size: 0.84rem; }
.pn-game-feat .pn-go { margin: 0; padding: 0; color: var(--accent); }
.pn-game { display: grid; justify-items: start; align-content: start; gap: 4px; min-height: 124px; padding: 12px; }
.pn-game-ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: var(--input); }
.pn-game-ic .i { width: 20px; height: 20px; }
.pn-tick { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.pn-tick .i { width: 11px; height: 11px; }
.pn-game strong { font-size: 0.88rem; }
.pn-game small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: 0.74rem; line-height: 1.3; }
/* Each game keeps its own colour */
.gm-t-five :is(.pn-game-ic, .pn-game-art) { background: #dcf2e3; color: #15803d; }
.gm-t-wordsearch :is(.pn-game-ic, .pn-game-art) { background: #e7e8ff; color: #4338ca; }
.gm-t-sudoku :is(.pn-game-ic, .pn-game-art) { background: #fbeedb; color: #a4570b; }
.gm-t-memory :is(.pn-game-ic, .pn-game-art) { background: #fde4ea; color: #be123c; }
.gm-t-maths :is(.pn-game-ic, .pn-game-art) { background: #dcf2ee; color: #0f766e; }
.gm-t-slide :is(.pn-game-ic, .pn-game-art) { background: #f0e8ff; color: #7c3aed; }
.gm-t-wordplay :is(.pn-game-ic, .pn-game-art) { background: #fdf0d5; color: #b45309; }
:root[data-theme="dark"] :is(.pn-game-ic, .pn-game-art) { filter: saturate(1.1) brightness(0.85); }

/* Friends' matches */
.pn-match { display: grid; justify-items: start; align-content: start; gap: 4px; min-height: 132px; padding: 12px; }
.pn-match strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.pn-match small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 0.74rem; }
.pn-avs { display: flex; margin-bottom: 4px; }
.pn-avs > * + * { margin-left: -10px; }
.pn-avs .avatar { box-shadow: 0 0 0 2px var(--surface); }
.pn-match-status { margin-top: auto; padding: 3px 8px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.72rem; font-weight: 800; }
.pn-match.mine { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pn-match.mine .pn-match-status { background: var(--accent); color: var(--on-accent); }
.pn-match.new { border-style: dashed; }
.pn-new-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.pn-match.skel { min-height: 132px; background: var(--input); border: 0; animation: snd-pulse 1.2s ease-in-out infinite alternate; }

/* Practice topics as pills */
.pn-topic { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 999px; }
.pn-topic-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--input); color: var(--text); }
.pn-topic-ic .i { width: 18px; height: 18px; }
.pn-topic > span:last-child { display: grid; }
.pn-topic strong { font-size: 0.86rem; white-space: nowrap; }
.pn-topic small { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }

/* Previews: leaderboard and badges */
.pn-box { display: grid; gap: 12px; padding: 16px; }
.pn-lb .pl-standing { margin: 0; }
.pn-lb-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pn-lb-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 12px; }
.pn-lb-list li.me { background: var(--accent-soft); }
.pn-lb-rank { width: 20px; color: var(--text-muted); font-weight: 800; text-align: center; }
.pn-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 0.9rem; }
.pn-lb-list b { font-size: 0.92rem; }
.pn-lb-list small { color: var(--text-muted); font-size: 0.72rem; }
.pn-lb-skel, .pn-skel-row { display: grid; gap: 8px; }
.pn-lb-skel i { height: 40px; border-radius: 12px; background: var(--input); animation: snd-pulse 1.2s ease-in-out infinite alternate; }
.pn-medals { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pn-medals .bdg { padding: 0; border: 0; background: none; }
.pn-medals .badge-medal { width: 48px; height: 48px; margin: 0; }
.pn-medals .badge-medal .i { width: 22px; height: 22px; }
.pn-empty { margin: 0; color: var(--text-muted); font-size: 0.88rem; }

/* Loading */
.pn-skel { height: 120px; border-radius: 18px; background: var(--input); animation: snd-pulse 1.2s ease-in-out infinite alternate; }
.pn-skel.hero { height: 200px; border-radius: 22px; }
.pn-skel-row { grid-auto-flow: column; grid-auto-columns: minmax(140px, 42%); overflow: hidden; }
.pn-skel-row i { height: 140px; border-radius: 16px; background: var(--input); animation: snd-pulse 1.2s ease-in-out infinite alternate; }

/* Sheets */
dialog.pn-sheet {
    width: 100%; max-width: 680px; height: min(90dvh, 900px); max-height: none; margin: auto auto 0; padding: 0;
    border: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--text); overflow: hidden;
    animation: al-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
dialog.pn-sheet::backdrop { background: rgba(8, 10, 20, 0.5); }
@media (min-width: 760px) { dialog.pn-sheet { margin: auto; height: min(820px, calc(100dvh - 48px)); border-radius: 22px; } }
.pn-sheet-card { display: flex; flex-direction: column; height: 100%; }
.pn-grab { display: grid; place-items: center; height: 18px; }
.pn-grab i { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); }
@media (min-width: 760px) { .pn-grab { display: none; } }
.pn-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px 20px; border-bottom: 1px solid var(--border); }
.pn-sheet-head h3 { flex: 1; margin: 0; font-size: 1.08rem; }
.pn-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.pn-sheet-body .pl-section, .pn-sheet-body .pl-reading { margin: 0; }
.pn-sheet-body .lb-head { display: none; }
.pn-sheet-lede { margin: 0 0 4px; color: var(--text-muted); font-size: 0.88rem; }
.pn-sheet-sub { margin: 18px 0 10px; font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pn-sheet-body .wpm .pl-sec-head { display: none; }

/* Wider screens: the rails become grids, standings move to a side column */
@media (min-width: 720px) {
    .pn-rail { grid-auto-columns: minmax(170px, 1fr); margin: 0; padding: 2px 0 6px; }
    .pn-rail.reads { grid-auto-columns: minmax(260px, 1fr); }
    .pn-rail.games { grid-auto-columns: minmax(130px, 1fr); }
    .pn-rail.matches { grid-auto-columns: minmax(180px, 220px); }
}
@media (min-width: 1000px) {
    .pn { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "head head" "main side"; column-gap: 28px; row-gap: 20px; align-items: start; }
    .pn-head { grid-area: head; }
    .pn-main { grid-area: main; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
    .pn-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    dialog.pn-sheet { animation: none; }
    :is(.pn-card, .pn-game, .pn-game-feat, .pn-match, .pn-topic, .pn-cta) { transition: none; }
    .pn-skel, .pn-skel-row i, .pn-lb-skel i, .pn-match.skel { animation: none; }
}
.pn-hero .pn-kicker { flex-wrap: wrap; row-gap: 2px; }
.pn-hero .pn-kicker span:not(.pn-dots) { white-space: nowrap; }
@media (min-width: 1000px) {
    .pn-rail:not(.topics):not(.matches) { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; }
    .pn-rail.reads { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .pn-rail.games { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
.pn-mini { white-space: nowrap; }
.pn-box .pn-sec-head p { white-space: nowrap; }

/* Back is an arrow on its own (the label stays for screen readers) */
.pv-back { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.pv-top .pv-back { width: 44px; height: 44px; }
.back-link { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--input); color: var(--text); cursor: pointer; }
.back-link .i { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .back-link:hover { border-color: var(--accent); } }
.back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Post view on iPhone: crisp text and a clear gap under the status bar. iOS rasterises layers marked
   backface-visibility: hidden, which left the header soft; Safari's frosted status-bar edge also blurred
   anything sitting right under it, so the header gets a solid top and more room. */
.pv-shell { backface-visibility: visible; }
@media (max-width: 719px) {
    .post-view[open] { background: var(--surface); }
    .pv-top { padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: var(--surface); }
}

/* Splash: a 2-second show — one tagline, a quicker bar */
.sp-tag { animation-delay: 500ms; }
.sp-tag span:first-child { animation: sp-line-last 6s linear 0.55s both; }
.sp-tag span:nth-child(n+2) { display: none; }
.sp-progress i { animation: sp-fill 1.7s linear 0.25s forwards; }
/* The header and footer keep their full height in the post view's column (they were shrinking, so the
   name and time spilled over the photo) */
.pv-top, .pv-foot { flex: none; }
.pv-shell:focus { outline: none; }
.pv-top-who > span { align-content: center; }

/* ---------- Help & support (members) ---------- */
dialog.hs-sheet { width: min(560px, 100%); height: min(88dvh, 760px); max-height: none; margin: auto auto 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--surface); color: var(--text); overflow: hidden; }
@media (min-width: 700px) { dialog.hs-sheet { margin: auto; border-radius: 22px; } }
dialog.hs-sheet::backdrop { background: rgba(9, 9, 11, 0.5); }
.hs-card { display: flex; flex-direction: column; height: 100%; }
.hs-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); }
.hs-head h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.hs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; align-content: start; gap: 12px; }
.hs-new { justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.hs-sub { margin: 8px 0 0; color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hs-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hs-list button > span:first-child { flex: 1; min-width: 0; display: grid; }
.hs-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-list small { color: var(--text-muted); font-size: 0.78rem; }
.hs-list .i { width: 16px; height: 16px; color: var(--text-muted); }
.hs-new-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.hs-form label { display: grid; gap: 6px; font-size: 0.86rem; font-weight: 600; }
.hs-form select, .hs-form input, .hs-form textarea, .hs-reply textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.hs-form textarea { resize: vertical; }
.hs-thread { align-content: start; background: var(--panel); }
.hs-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.hs-msg.staff { justify-self: end; background: var(--accent-soft); border-color: transparent; }
.hs-msg small { color: var(--text-muted); font-size: 0.74rem; font-weight: 600; }
.hs-msg p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hs-reply { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.hs-reply textarea { flex: 1; resize: none; }
.hs-reply .primary-btn { min-width: 48px; min-height: 44px; padding: 0 12px; }
.hs-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.hs-status.deactivated { background: color-mix(in srgb, var(--text-muted) 16%, var(--surface)); }
.hs-status.blocked { background: color-mix(in srgb, #ea580c 14%, var(--surface)); }
.hs-status p { margin: 4px 0 0; font-size: 0.88rem; }
.hs-status .st-btn { margin-top: 8px; }
.suspended-bar .chip { margin-left: auto; flex: none; }
.suspended-bar.deactivated { background: color-mix(in srgb, var(--text-muted) 16%, var(--surface)); }

/* ---------- Helpline: AI-labelled replies and typing ---------- */
.hs-msg small .i { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }
.hs-msg.ai { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.hs-typing p { display: flex; gap: 4px; padding: 4px 0; }
.hs-typing p span:not(.sr-only) { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: hs-dot 1.2s ease-in-out infinite; }
.hs-typing p span:nth-child(2) { animation-delay: 0.15s; }
.hs-typing p span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hs-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .hs-typing p span { animation: none; } }
.hs-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--input); color: var(--text-muted); font-size: 0.84rem; }
.hs-note .i { width: 15px; height: 15px; }

/* ---------- Moderation → Helpline ---------- */
.hl-settings { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.hl-settings summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; cursor: pointer; font-weight: 600; }
.hl-settings summary .i { width: 16px; height: 16px; color: var(--accent); }
.hl-set-form { display: grid; gap: 12px; padding: 4px 14px 14px; }
.hl-set-form label { display: grid; gap: 6px; font-size: 0.86rem; font-weight: 600; }
.hl-set-form label.hl-switch { display: flex; align-items: center; gap: 8px; }
.hl-set-form input:not([type="checkbox"]), .hl-set-form textarea, .hl-reply textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.hl-set-form .primary-btn { justify-self: start; }
.hl-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hl-views .chip[aria-checked="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.hl { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; align-items: start; }
.hl-list { display: grid; gap: 6px; max-height: 70vh; overflow-y: auto; }
.hl-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.hl-item.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.hl-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.hl-item strong, .hl-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-item small { color: var(--text-muted); font-size: 0.76rem; }
.hl-tags { grid-column: 2; display: flex; gap: 4px; }
.hl-tag { padding: 1px 7px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.7rem; font-weight: 800; text-transform: capitalize; }
.hl-tag.person, .hl-tag.urgent { background: #dc2626; color: #fff; }
.hl-tag.high { background: color-mix(in srgb, #ea580c 18%, var(--surface)); color: #c2410c; }
.hl-tag.ai { background: var(--accent-soft); color: var(--accent); }
.hl-thread { display: flex; flex-direction: column; min-height: 420px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.hl-th-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.hl-th-head h3 { margin: 0; font-size: 1rem; }
.hl-th-head p { margin: 2px 0 0; }
.hl-th-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.hl-handoff { display: flex; gap: 8px; margin: 0; padding: 10px 14px; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); font-size: 0.86rem; }
.hl-handoff .i { flex: none; width: 16px; height: 16px; color: #b45309; margin-top: 2px; }
.hl-msgs { flex: 1; display: grid; align-content: start; gap: 10px; max-height: 55vh; overflow-y: auto; padding: 14px; background: var(--panel); }
.hl-msg { max-width: 82%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hl-msg.staff { justify-self: end; background: var(--accent-soft); border-color: transparent; }
.hl-msg.ai { border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.hl-msg.note { justify-self: stretch; max-width: none; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border-style: dashed; }
.hl-msg small { color: var(--text-muted); font-size: 0.74rem; font-weight: 600; }
.hl-msg p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-reply { display: grid; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.hl-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hl-reply .primary-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .hl { grid-template-columns: minmax(0, 1fr); } .hl-list { max-height: 260px; } }

/* ---------- Settings → Notifications ---------- */
.nt-master { display: flex; align-items: center; gap: 14px; padding: 14px 0 12px; }
.nt-master .st-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.nt-master .st-text strong { font-size: 1rem; }
.nt-master .st-text small { color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.nt-master.on .st-ic { background: var(--accent); color: var(--on-accent); }
.nt-off { color: var(--text-muted); font-size: 0.86rem; font-weight: 700; }
.nt-help { display: grid; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); font-size: 0.86rem; line-height: 1.45; }
.nt-help .st-btn { justify-self: start; }
.nt-cats { border-top: 1px solid var(--border); padding-top: 6px; transition: opacity 150ms; }
.nt-cats.dim { opacity: 0.6; }
.nt-h { margin: 10px 0 2px; color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.nt-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; }
.nt-row + .nt-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.nt-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--input); color: var(--text-muted); }
.nt-ic .i { width: 17px; height: 17px; }
.nt-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nt-text strong { font-size: 0.94rem; font-weight: 650; }
.nt-text small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; }
.nt-more { margin-top: 4px; border-top: 1px solid var(--border); }
.nt-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; color: var(--accent); font-weight: 700; font-size: 0.9rem; cursor: pointer; list-style: none; }
.nt-more summary::-webkit-details-marker { display: none; }
.nt-more summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 150ms; }
.nt-more[open] summary::after { transform: rotate(-135deg); }
.nt-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.nt-foot { margin: 8px 0 4px; }
@media (prefers-reduced-motion: reduce) { .nt-more summary::after, .nt-cats { transition: none; } }

/* Settings: a short menu; each group opens on its own page */
.st-menu { padding: 2px 16px; }
button.st-link { width: 100%; background: none; border: 0; border-top: 1px solid var(--border); font: inherit; color: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.st-menu > .st-link:first-child { border-top: 0; }
.st-link .st-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-chev { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.st-link:active { background: var(--surface-2, rgba(127, 127, 127, 0.08)); }
@media (hover: hover) and (pointer: fine) { .st-link:hover .st-chev { color: var(--accent); } }
.st-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.st-up { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); place-items: center; cursor: pointer; }
.st-up .i { width: 20px; height: 20px; }
body:not(.has-back) .st-up { display: grid; }
.st-page .st-row.st-col .st-swatches { flex-basis: 100%; padding-left: 48px; }
.st-blocked { border-top: 1px solid var(--border); }
.st-blocked > summary { gap: 12px; padding: 10px 0; }
.st-blocked > summary .st-text { flex: 1; }

/* Settings, refined: icon tiles, values on the right, search, notes under groups */
:root {
    --tile-red: #e5484d; --tile-orange: #e5631a; --tile-amber: #c98a00; --tile-green: #2f9e57;
    --tile-teal: #0f8f86; --tile-blue: #2f74e0; --tile-gray: #6b7280; --tile-accent: var(--accent);
}
.st-home { gap: 14px; }
.st-me { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.st-me .st-who { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.st-me .st-who strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-me .st-who small { color: var(--text-muted); font-size: 0.85rem; }
.st-me .st-avatar { position: relative; flex: none; }
.st-me.st-guest { flex-wrap: wrap; }
.st-textbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.st-search { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--input); color: var(--text-muted); }
.st-search .i { width: 18px; height: 18px; flex: none; }
.st-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; outline: none; padding: 10px 0; }
.st-search:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.st-groups { display: grid; gap: 14px; }
.st-groups[hidden], #st-results[hidden] { display: none; }
.st-link { gap: 14px; min-height: 52px; padding: 8px 0; }
.st-tile { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--tile); color: #fff; }
.st-tile .i { width: 17px; height: 17px; }
.st-label { flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-val { flex: none; max-width: 40%; font-size: 0.9rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-link .st-chev { margin-left: -6px; }
.st-none { margin: 0; padding: 18px 0; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.st-note { margin: -6px 16px 4px; font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }
.st-row.st-end { justify-content: flex-end; }
.st-flash { animation: st-flash 1.6s var(--ease-out, ease-out); border-radius: 10px; }
@keyframes st-flash { 0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .st-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 4px; } }
.st-link:active .st-tile { transform: scale(0.94); }
.st-tile { transition: transform 100ms ease-out; }
/* Longer page names step down so they fit beside the header icons */
.topbar h1#page-title.long-title { font-size: min(1.85rem, 5.6vw); }
.st-card > .st-row:first-child, .st-card > .nt-master:first-child { border-top: 0; }

/* "Never miss a call": the one-time ask to turn on alerts */
.alert-ask {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start;
    padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); animation: alert-ask-in 260ms var(--ease-out, ease-out);
}
.alert-ask.leaving { opacity: 0; transform: translateY(8px); transition: opacity 180ms, transform 180ms; }
.alert-ask-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tile-green, #2f9e57); color: #fff; }
.alert-ask-ic .i { width: 20px; height: 20px; }
.alert-ask-text { display: grid; gap: 3px; min-width: 0; }
.alert-ask-text strong { font-size: 0.98rem; color: var(--text); }
.alert-ask-text small { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); }
.alert-ask-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.alert-ask-actions .primary-btn { min-height: 40px; padding: 0 18px; }
@media (min-width: 900px) { .alert-ask { left: auto; right: 24px; bottom: 24px; } }
@keyframes alert-ask-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .alert-ask { animation: none; } .alert-ask.leaving { transition: none; } }

/* Answered from an alert and the phone held the sound back: one tap brings it in */
.call-sound-tap {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
    border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff);
    font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; touch-action: manipulation;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); animation: sound-tap-pulse 1.6s ease-in-out infinite;
}
.call-sound-tap .i { width: 20px; height: 20px; }
@keyframes sound-tap-pulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); } }
@media (prefers-reduced-motion: reduce) { .call-sound-tap { animation: none; } }

/* ---------- Notes page: recent notes first, the rest on request ---------- */
.nh-headline { display: grid; gap: 2px; min-width: 0; }
.nh-sub { margin: 0 0 0 25px; font-size: 0.82rem; color: var(--text-muted); }
.nh-notes .nh-bar { flex-wrap: nowrap; align-items: flex-start; }
.nh-notes .folder-chips { margin: 0; }
.nh-opts { position: relative; flex: none; }
.nh-opts > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; }
.nh-opts > summary::-webkit-details-marker { display: none; }
.nh-opts[open] > summary { background: var(--accent-soft); color: var(--accent); }
.nh-opts > .nh-controls {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: min(92vw, 520px);
    padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
}
.nh-rest[hidden] { display: none; }
.nh-recent + .nh-rest { margin-top: 0; }
/* The quiet section control under the cards: part of the list, not another card */
.nh-more {
    justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: 0.92rem; font-weight: 600;
    cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.nh-more b { font-weight: 500; color: var(--text-muted); }
.nh-more .i { width: 16px; height: 16px; transition: transform 200ms var(--ease-out, ease-out); }
.nh-more:active { background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) { .nh-more:hover { background: var(--accent-soft); } }
.nh-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nh-sentinel { height: 1px; }
.mcard.nh-in { animation: nh-in 240ms var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) both; }
@keyframes nh-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .mcard.nh-in { animation: none; } .nh-more .i { transition: none; } }

/* Loading, empty and error: calm, inline, never the whole page */
.nh-skel { min-height: 120px; gap: 10px; background: var(--input) !important; border-color: transparent !important; }
.nh-skel i { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 10%, transparent); animation: nh-shimmer 1.4s ease-in-out infinite; }
.nh-skel i:first-child { width: 60%; height: 15px; }
.nh-skel i:nth-child(2) { width: 90%; }
.nh-skel i:nth-child(3) { width: 40%; margin-top: auto; }
@keyframes nh-shimmer { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .nh-skel i { animation: none; } }
.nh-state { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; border-radius: 16px; background: var(--input); color: var(--text-muted); font-size: 0.9rem; }
.nh-state strong { color: var(--text); font-size: 1.02rem; }
.nh-state .primary-btn { margin-top: 6px; }
.nh-empty-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.nh-empty-ic .i { width: 22px; height: 22px; }

/* Calmer note cards: one quick read (title, two lines, context, date); colour as a gentle tint, not a shout */
.mcard:not(.new-note):not(.has-photo) { background: color-mix(in srgb, var(--card) 34%, #ffffff); gap: 8px; padding: 14px 14px 10px; }
:root[data-theme="dark"] .mcard:not(.has-photo):not(.new-note) {
    background: color-mix(in srgb, var(--card) 15%, var(--surface)); color: var(--text);
    border-color: color-mix(in srgb, var(--card) 45%, transparent);
}
:root[data-theme="dark"] .mcard:not(.has-photo):not(.new-note) .mcard-tags span { background: color-mix(in srgb, var(--card) 22%, transparent); color: var(--text); }
.mcard h3 { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard-body { -webkit-line-clamp: 2; font-size: 0.84rem; }
.mcard-foot { margin-top: 2px; }
.mcard-date { font-size: 0.74rem; white-space: nowrap; }
.mcard-tags span { font-size: 0.68rem; padding: 2px 8px; }
.mcard-edit { width: 30px; height: 30px; background: color-mix(in srgb, #ffffff 55%, transparent); box-shadow: none; position: relative; }
.mcard-edit::after { content: ''; position: absolute; inset: -7px; } /* 44px to tap, 30px to see */
:root[data-theme="dark"] .mcard:not(.has-photo):not(.new-note) .mcard-edit { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.notes-home .mcard .mcard-hashtags { display: none; } /* the "Your tags" tray lists them; cards stay a one-second read */
.notes-home { padding-bottom: 88px; } /* clears the + button */
@media (min-width: 900px) { .notes-home { padding-bottom: 32px; } }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mcard:not(.has-photo):not(.new-note) {
        background: color-mix(in srgb, var(--card) 15%, var(--surface)); color: var(--text);
        border-color: color-mix(in srgb, var(--card) 45%, transparent);
    }
    :root:not([data-theme="light"]) .mcard:not(.has-photo):not(.new-note) .mcard-tags span { background: color-mix(in srgb, var(--card) 22%, transparent); color: var(--text); }
    :root:not([data-theme="light"]) .mcard:not(.has-photo):not(.new-note) .mcard-edit { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
}

/* ---------- Incoming call: a calling screen, not a Cordial page ---------- */
.call-incoming { z-index: 9000; background: rgba(6, 7, 12, 0.82); }
.incoming-card { gap: 4px; width: min(380px, 100%); padding: 28px 24px 30px; background: linear-gradient(180deg, #171a24 0%, #0d0f15 100%); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
.incoming-kicker { margin: 0 0 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.incoming-avatar .avatar.xl { width: 112px; height: 112px; font-size: 2.2rem; }
.incoming-card strong#incoming-name { margin-top: 18px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.incoming-card #incoming-sub { font-size: 1rem; opacity: 0.75; }
.incoming-card .incoming-actions { display: flex; justify-content: space-around; align-items: flex-start; gap: 20px; width: 100%; margin-top: 36px; }
.inc-act { display: grid; justify-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.inc-act:has(> button[hidden]) { display: none; }
.call-incoming .round-btn { width: 72px; height: 72px; touch-action: manipulation; }
.call-incoming .round-btn .i { width: 30px; height: 30px; }
.call-incoming .round-btn:disabled { opacity: 0.55; }
.call-incoming .round-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.call-incoming .round-btn.accept:not(.video) { animation: inc-nudge 1.6s ease-in-out infinite; }
@keyframes inc-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px); } 90% { transform: translateY(1px); } }
/* Phones: the whole screen is the call — big targets in the thumb zone */
@media (max-width: 600px) {
    .call-incoming { padding: 0; place-items: stretch; background: #0b0d13; }
    .incoming-card {
        width: 100%; min-height: 100%; border-radius: 0; justify-content: flex-start; background: radial-gradient(120% 70% at 50% 0%, #252a3a 0%, #0b0d13 70%);
        padding: calc(env(safe-area-inset-top, 0px) + 56px) 28px calc(env(safe-area-inset-bottom, 0px) + 48px);
    }
    .incoming-card .incoming-actions { margin-top: auto; }
    .call-incoming .round-btn { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .call-incoming .round-btn.accept, .incoming-avatar .avatar.xl, .incoming-card { animation: none !important; }
}
body.is-ringing { overflow: hidden; }

/* ---------- Splash: logo, name, gone in about a second ---------- */
.splash .sp-orb, .splash .sp-tag, .splash .sp-ring { display: none !important; }
.splash .sp-mark, .splash .sp-word span, .splash .sp-draw, .splash .sp-heart { opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
.splash .sp-center { animation: sp-quick-in 240ms ease-out both; }
@keyframes sp-quick-in { from { opacity: 0; transform: scale(0.96); } }
.splash .sp-progress i { animation-duration: 900ms !important; }
.splash.out { animation: none !important; opacity: 0; transition: opacity 200ms ease-out; }
.splash.out .sp-center { animation: none !important; transform: scale(1.03); transition: transform 200ms ease-out; }
/* The caller's face stays fully visible; a soft ring ripples out from it instead of a fade */
.call-incoming .incoming-avatar .avatar.xl { opacity: 1; animation: inc-ripple 1.8s ease-out infinite; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
@keyframes inc-ripple { 70%, 100% { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }
.inc-act[hidden] { display: none; }

/* ---------- Notes home header: calm date + greeting, one "Take a note…" way in, numbers folded into Today ---------- */
.notes-home .nh-head { display: grid; gap: 14px; padding: 4px 2px 0; }
.notes-home .nh-head .nh-title { margin: 0; color: var(--text); font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.notes-home .nh-head .nh-title span { display: block; margin-top: 2px; color: var(--text-muted); font-weight: 600; font-size: 0.62em; letter-spacing: -0.02em; }
.notes-home .nh-head .nh-greet { margin: -4px 0 0; max-width: 52ch; color: var(--text-muted); font-size: 0.98rem; line-height: 1.5; }
.nh-take { display: flex; gap: 10px; align-items: stretch; }
.nh-take-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text-muted);
    font: inherit; font-size: 1rem; text-align: left; cursor: text; touch-action: manipulation;
    transition: border-color 160ms var(--ease-out, ease-out), background 160ms var(--ease-out, ease-out);
}
.nh-take-field > .i { width: 20px; height: 20px; color: var(--accent); flex: none; }
.nh-take-field > span { flex: 1; min-width: 0; }
.nh-take-field small { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--text-faint, var(--text-muted)); }
.nh-take-field small .i { width: 12px; height: 12px; }
.nh-take-mic {
    flex: none; width: 54px; border: 0; border-radius: 16px; display: grid; place-items: center;
    background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; touch-action: manipulation;
    transition: transform 120ms var(--ease-out, ease-out);
}
.nh-take-mic .i { width: 22px; height: 22px; }
.nh-take-field:active { background: var(--input); }
.nh-take-mic:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
    .nh-take-field:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
}
.nh-take-field:focus-visible, .nh-take-mic:focus-visible, .nh-today > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nh-today { border-radius: 14px; background: var(--input); }
.nh-today > summary {
    list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer;
    font-size: 0.86rem; color: var(--text-muted); -webkit-user-select: none; user-select: none;
}
.nh-today > summary::-webkit-details-marker { display: none; }
.nh-today > summary::after { content: ''; margin-left: auto; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 160ms var(--ease-out, ease-out); }
.nh-today[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.nh-today-label { flex: none; font-weight: 700; color: var(--text); }
.notes-home .nh-today .nh-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: inherit; color: inherit; min-width: 0; }
.notes-home .nh-today .nh-stats > span { padding: 0; background: none; display: inline-flex; align-items: center; gap: 4px; }
.notes-home .nh-today .nh-stats b { color: var(--text); font-weight: 700; }
.notes-home .nh-today .nh-streak .i { width: 14px; height: 14px; color: var(--text-faint, var(--text-muted)); }
.notes-home .nh-today .nh-streak.on .i { color: #f97316; }
.notes-home .nh-today .nh-week { display: flex; justify-content: space-between; gap: 6px; padding: 4px 14px 14px; }
.notes-home .nh-today .nh-day i { width: 30px; height: 30px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--text) 10%, transparent); box-shadow: none; }
.notes-home .nh-today .nh-day.on i { background: var(--accent); }
.notes-home .nh-today .nh-day.today i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.notes-home .nh-today .nh-day small { color: var(--text-muted); }
.notes-home .nh-today .nh-day.today small { color: var(--accent); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .nh-today > summary::after, .nh-take-field, .nh-take-mic { transition: none; } }
@media (min-width: 900px) {
    .notes-home .nh-head { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); grid-template-areas: "title take" "greet today"; column-gap: 32px; align-items: end; }
    .notes-home .nh-head .nh-title { grid-area: title; }
    .notes-home .nh-head .nh-greet { grid-area: greet; align-self: start; margin: 0; }
    .nh-take { grid-area: take; }
    .nh-today { grid-area: today; align-self: start; }
}

/* ---------- Chats on phones: the app's own surface, conversations first, filters as tabs ---------- */
@media (max-width: 760px) {
    body[data-view="messages"] .inbox-list { background: transparent; border-radius: 0; overflow: visible; }
    body[data-view="messages"] .inbox-hero { padding: 2px 16px 4px; color: var(--text); }
    body[data-view="messages"] .hero-top { align-items: center; }
    body[data-view="messages"] .hero-hi { display: none; }
    body[data-view="messages"] .inbox-hero .hero-count { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--text-muted); }
    body[data-view="messages"] .hero-btn { width: 40px; height: 40px; background: var(--input); color: var(--text); }
    body[data-view="messages"] .hero-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
    body[data-view="messages"] .hero-btn-add { width: auto; display: inline-flex; gap: 6px; padding: 0 14px 0 12px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 600; }
    body[data-view="messages"] .hero-btn-add .i { width: 18px; height: 18px; }
    body[data-view="messages"] .inbox-hero .hero-contacts { margin-top: 12px; }
    body[data-view="messages"] .hero-contact { color: var(--text-muted); font-size: 0.76rem; }
    body[data-view="messages"] .inbox-hero .hero-contact .avatar.lg { width: 52px; height: 52px; box-shadow: none; }
    body[data-view="messages"] .inbox-sheet { margin-top: 6px; padding-top: 0; border-radius: 0; background: transparent; }
    body[data-view="messages"] .inbox-sheet .inbox-search { margin: 4px 16px 6px; }
    body[data-view="messages"] .inbox-sheet .inbox-tabs { gap: 20px; padding: 0 16px; margin: 0 0 4px; border-bottom: 1px solid var(--border); }
    body[data-view="messages"] .inbox-sheet .inbox-tab { min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; color: var(--text-muted); font-weight: 600; box-shadow: inset 0 -2px 0 transparent; }
    body[data-view="messages"] .inbox-sheet .inbox-tab[aria-selected="true"] { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
    body[data-view="messages"] .inbox-sheet .inbox-tab[aria-selected="true"] .badge { background: var(--accent); color: var(--on-accent, #fff); }
    body[data-view="messages"] .inbox-fab { background: var(--accent); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
}

/* ---------- Feed empty state: a focal card with one clear first step ---------- */
.feed-empty { border: 0; border-radius: 18px; background: var(--surface); padding: 28px 22px; }
.feed-empty .empty-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text); }
.feed-empty p:not(.empty-title) { max-width: 34ch; margin-inline: auto; }
.feed-empty-actions { flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.feed-empty .feed-empty-main { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; }
.feed-empty .feed-empty-main .i { width: 18px; height: 18px; }
.feed-empty .link-btn { min-height: 40px; padding: 0 10px; color: var(--text-muted); font-weight: 600; }
/* Inside "Today" the streak is plain text like the other two numbers (no pill) */
.notes-home .nh-today .nh-stats .nh-streak, .notes-home .nh-today .nh-stats .nh-streak.on { padding: 0; border-radius: 0; background: none !important; color: inherit; box-shadow: none; }
.notes-home .nh-today > summary { gap: 10px; }
@media (max-width: 480px) {
    .notes-home .nh-today .nh-stats { flex-wrap: nowrap; gap: 10px; overflow: hidden; white-space: nowrap; font-size: 0.82rem; }
}

/* ---------- Elevation: three layered, neutral shadow strengths (beautiful-shadows) ----------
   sm: controls, pills, quiet surfaces · md (--shadow): cards, panels, popovers · lg: dialogs and sheets.
   Each carries its own hairline ring, so a surface declares elevation once — no extra border. */
:root {
    --shadow-sm: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(25, 28, 33, 0.02), 0 0 0 1px rgba(25, 28, 33, 0.08);
    --shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.06), 0 24px 24px -12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    --shadow-lift: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(25, 28, 33, 0.02);
}
/* Dark: the same layers, deeper, with the hairline in light so edges still read on near-black */
:root[data-theme="dark"] {
    --shadow-sm: 0 2px 3px -1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 1px -0.5px rgba(0, 0, 0, 0.3), 0 3px 3px -1.5px rgba(0, 0, 0, 0.3), 0 6px 6px -3px rgba(0, 0, 0, 0.3), 0 12px 12px -6px rgba(0, 0, 0, 0.3), 0 24px 24px -12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2.8px 2.2px rgba(0, 0, 0, 0.17), 0 6.7px 5.3px rgba(0, 0, 0, 0.24), 0 12.5px 10px rgba(0, 0, 0, 0.3), 0 22.3px 17.9px rgba(0, 0, 0, 0.36), 0 41.8px 33.4px rgba(0, 0, 0, 0.43), 0 100px 80px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 3px -1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --shadow-sm: 0 2px 3px -1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.07);
        --shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 1px -0.5px rgba(0, 0, 0, 0.3), 0 3px 3px -1.5px rgba(0, 0, 0, 0.3), 0 6px 6px -3px rgba(0, 0, 0, 0.3), 0 12px 12px -6px rgba(0, 0, 0, 0.3), 0 24px 24px -12px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2.8px 2.2px rgba(0, 0, 0, 0.17), 0 6.7px 5.3px rgba(0, 0, 0, 0.24), 0 12.5px 10px rgba(0, 0, 0, 0.3), 0 22.3px 17.9px rgba(0, 0, 0, 0.36), 0 41.8px 33.4px rgba(0, 0, 0, 0.43), 0 100px 80px rgba(0, 0, 0, 0.6);
        --shadow-lift: 0 2px 3px -1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(0, 0, 0, 0.3);
    }
}
/* Cards and panels: md, and the ring replaces the border */
.st-card, .cm-card, .side-box, .profile-card, .template-card, .hl-card, .feed-empty, .nh-today { border-color: transparent; box-shadow: var(--shadow); }
.template-card:hover, .cm-card:hover { box-shadow: var(--shadow-lg); }
/* Popovers and menus: md over content */
.popover { border-color: transparent; box-shadow: var(--shadow); }
/* Dialogs and sheets: the strongest lift */
.sheet-dialog, .incoming-card { box-shadow: var(--shadow-lg); }
/* Controls and quiet surfaces: sm */
.nh-take-field, .inbox-search, .st-search { border-color: transparent; box-shadow: var(--shadow-sm); }
.fab, .inbox-fab, .nh-take-mic { box-shadow: var(--shadow-sm), 0 8px 16px -8px rgba(0, 0, 0, 0.35); }
/* Note cards keep their coloured edge (their identity) with a soft lift; hover raises to md */
.mcard:not(.new-note) { box-shadow: var(--shadow-lift); }
@media (hover: hover) and (pointer: fine) { .mcard[role="button"]:not(.new-note):hover { box-shadow: var(--shadow); } }
/* Feed posts on wider screens: md; on phones they stay flat and edge to edge */
@media (min-width: 761px) {
    body[data-view="feed"] .post.ig { border-color: transparent; box-shadow: var(--shadow); }
}


/* ---------- Interaction polish (emil-design-eng) ---------- */
/* Touch screens: a tap fires :hover and leaves it stuck (cards stay lifted, swatches stay big) — hover motion
   only where there's a real pointer; press feedback still applies */
@media (hover: none), (pointer: coarse) {
    .swatch:hover:not(:active),
    button.today-card:hover:not(:active),
    .photo-tile:hover:not(:active),
    .create-post:hover:not(:active),
    .story:hover:not(:active) .story-ring,
    .post-photo:hover:not(:active) img,
    .template-card:hover:not(:active),
    .folder-chip:hover:not(:active),
    .cm-card:hover:not(:active),
    .cm-emoji-opt:hover:not(:active),
    .profile-photo:hover:not(:active) .photo-badge,
    button.mcard-share:hover:not(:active),
    .call-reactions button:hover:not(:active),
    .cover-opt:hover:not(:active),
    .hl-card:hover:not(:active),
    .react-emojis button:hover:not(:active),
    .quick-reply:hover:not(:active),
    .compose-btn:hover:not(:active),
    .fab:hover:not(:active),
    .g-tile:hover:not(:active) .g-go:not(.ok) .i { transform: none; }
}
/* Menus grow out of the button that opened them: fast, strong ease-out, from a near-full scale */
.popover { animation: pop-from-anchor 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both; }
.popover[data-side="top"] { --pop-dy: 4px; }
@keyframes pop-from-anchor { from { opacity: 0; transform: translateY(var(--pop-dy, -4px)) scale(0.96); } }
/* Exits are quick and start fast (ease-out), never a slow ease-in */
.post-view.closing .pv-shell { animation-timing-function: var(--ease-out, ease-out); }
.msg.vanishing, #content.repaint .msg.vanishing { animation-duration: 240ms !important; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important; }
.emoji-pop.closing { animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
body.chat-open .inbox .chat-pane.leaving { animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important; }
/* Every pressable thing answers the press */
button.chip, .icon-btn, .round-btn, .link-btn, .nh-more, .inbox-tab, .feed-tabs button, .pour button, .nh-layout button, .tab-item {
    transition-property: transform, background-color, color, border-color, box-shadow, opacity;
    transition-duration: 140ms;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
button.chip:active, .icon-btn:active, .round-btn:active, .link-btn:active, .tab-item:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
    .popover { animation: pop-fade 120ms ease both; }
    button.chip:active, .icon-btn:active, .round-btn:active, .link-btn:active, .tab-item:active { transform: none; }
}
@keyframes pop-fade { from { opacity: 0; } }

/* ---------- Profile: aligned actions, numbers as a grid, friends without clipping ---------- */
/* Labelled actions share the row equally and never wrap; icon actions stay square */
.pf-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.pf-actions .pf-btn:not(.icon) { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.pf-actions .pf-btn:not(.icon) span { overflow: hidden; text-overflow: ellipsis; }
.pf-actions .pf-btn.icon { flex: none; width: 44px; justify-content: center; }
/* Numbers: one column each, figure over label, centred and evenly spaced */
.pf-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; align-items: start; }
.pf-stats .pf-stat { display: grid !important; justify-items: center; gap: 2px; padding: 4px 2px; text-align: center; font-size: 0.8rem; line-height: 1.2; }
.pf-stats .pf-stat b { display: block; margin: 0; font-size: 1.2rem; line-height: 1.1; letter-spacing: -0.01em; }
.pf-substats { text-align: center; }
@media (hover: hover) and (pointer: fine) { .pf-stats button.pf-stat:hover { text-decoration: none; color: var(--text); } }
/* Friends: a tidy grid of four, nothing cut off at the edge; names get the whole column */
.pf-friends-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; overflow: visible; padding: 2px 0 0; }
.pf-friend { width: auto; min-width: 0; }
.pf-friend span { max-width: 100%; text-align: center; font-size: 0.8rem; }
@media (min-width: 761px) { .pf-friends-row { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ---------- Chat header on phones: photo + name left-aligned beside Back, one weight, never crowded ---------- */
@media (max-width: 760px) {
    .chat-pane .chat-head { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; gap: 2px; }
    .chat-pane .chat-head .chat-who { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: 6px; border: 0; background: none; cursor: pointer; }
    .chat-pane .chat-head .chat-who .avatar.sm { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
    .chat-pane .chat-head .friend-name { align-items: flex-start; text-align: left; gap: 1px; }
    .chat-pane .chat-head .chat-who-name { text-align: left; font-size: 1.02rem; }
    .chat-pane .chat-head .chat-who-name b, .chat-pane .chat-head .chat-who-name .name-rest { font-weight: 700; }
    .chat-pane .chat-head .friend-name small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* In an open chat the "Never miss a call" card sits above the message box, not on it */
body.chat-open .alert-ask { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Verified by Cordial: profile badge, premium photo ring, perks sheet ---------- */
:root { --verified: #1d9bf0; }
:root[data-theme="dark"] { --verified: #4cb4f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --verified: #4cb4f5; } }
.pf-verified {
    display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; margin: 2px 0 2px; padding: 0 12px 0 8px;
    border: 0; border-radius: 999px; background: color-mix(in srgb, var(--verified) 14%, transparent); color: var(--verified);
    font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; touch-action: manipulation; grid-column: 1 / -1;
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease;
}
.pf-verified .i { width: 16px; height: 16px; }
.pf-verified:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .pf-verified:hover { background: color-mix(in srgb, var(--verified) 22%, transparent); } }
.pf-verified:focus-visible { outline: 2px solid var(--verified); outline-offset: 2px; }
/* Premium ring around a verified person's photo */
.pf-photo.is-verified .avatar.xl { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--verified), 0 0 0 7px color-mix(in srgb, var(--verified) 30%, transparent); }
/* The sheet */
.pf-vsheet .rx-card { max-width: 440px; margin-inline: auto; padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.pf-vsheet .rx-head { margin-inline: -20px; }
.pf-v-hero { display: grid; justify-items: center; gap: 10px; padding: 6px 4px 14px; text-align: center; }
.pf-v-hero p { margin: 0; max-width: 32ch; color: var(--text-muted); line-height: 1.5; }
.pf-v-hero b { color: var(--text); }
.pf-v-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--verified) 14%, transparent); color: var(--verified); }
.pf-v-badge .i { width: 36px; height: 36px; }
.pf-v-h { margin: 6px 0 8px; font-size: 0.95rem; font-weight: 800; }
.pf-v-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-v-perks li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.pf-v-perks li:first-child { border-top: 0; }
.pf-v-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--verified) 12%, transparent); color: var(--verified); }
.pf-v-ic .i { width: 18px; height: 18px; }
.pf-v-perks strong { display: block; font-size: 0.92rem; color: var(--text); }
.pf-v-perks small { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
.pf-v-foot { margin: 12px 0 0; }
.vtick { color: var(--verified); }

/* ---------- Profile header: name always starts below the cover; buttons keep their full labels ---------- */
/* Only the photo overlaps the cover. Name, handle and badge sit under the cover edge, so a taller
   block (verified badge, long names) grows downward instead of climbing onto the cover. */
.pf-head .pf-id { --pf-overlap: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0 16px; }
.pf-head .pf-photo { grid-row: 1 / span 2; }
.pf-head .pf-names { padding: calc(var(--pf-overlap) + 10px) 0 0; margin: 0 !important; }
.pf-head .pf-actions { margin-top: calc(var(--pf-overlap) + 10px); padding: 0; width: auto; }
.pf-head .pf-actions .pf-btn:not(.icon) { flex: none; min-width: 0; }
.pf-head .pf-verified { margin-top: 8px; }
/* Mid widths: actions take their own full row under the name so labels never truncate */
@media (max-width: 760px) {
    .pf-head .pf-actions { grid-column: 1 / -1; margin-top: 14px; }
    .pf-head .pf-actions .pf-btn:not(.icon) { flex: 1 1 0; }
}
/* Phones: photo, then name block, then actions, all left-aligned on one edge */
@media (max-width: 560px) {
    .pf-head .pf-id { --pf-overlap: 40px; grid-template-columns: minmax(0, 1fr); }
    .pf-head .pf-photo { grid-row: auto; justify-self: start; }
    .pf-head .pf-names { padding-top: 10px; }
}

/* ---------- Multi-photo posts: frame follows the first photo; nothing is ever cropped ---------- */
.post-media .carousel:not([data-count="1"]) .slide { aspect-ratio: var(--ar, 4 / 5); height: auto; }
.post-media .carousel:not([data-count="1"]) .slide img { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* ---------- Note editor: writing first. Dilute on demand, one compact toolbar row, roomier keyboard state ---------- */
/* Dilute is a tool now (the drop in the toolbar); the slider shows only when asked for, or while a note is diluted */
.editor:not(.show-dilute):not(.diluted) #editor-dilute { display: none !important; }
.tb-btn[data-cmd="more"] { display: none; }
@media (max-width: 760px) {
    .editor #editor-dilute { order: 8; margin: 6px 18px 4px; }
    .editor-body { order: 8; }

    /* One row, always: Aa · marker · photo · file · voice · draw · undo · redo · More */
    .editor .rich-toolbar { flex: none; flex-wrap: nowrap !important; overflow: hidden; gap: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
    .editor .rich-toolbar.fmt-open { flex-wrap: wrap !important; }
    .editor .rich-toolbar .tb-btn { flex: 1 1 0; min-width: 36px; height: 44px; border-radius: 12px; }
    .editor .rich-toolbar:not(.fmt-open) .tb-sep { display: none; }
    .editor .rich-toolbar .tb-btn[data-cmd="more"] { display: grid; place-items: center; order: 99; }
    /* Secondary tools wait behind More… */
    .editor .rich-toolbar:not(.more-open) .tb-btn:is([data-cmd="dictate"], [data-cmd="listen"], [data-cmd="remix"], [data-cmd="slides"], [data-cmd="dilute"]) { display: none !important; }
    /* …and, when opened, take the same row (labelled) in place of the writing tools */
    .editor .rich-toolbar.more-open .tb-btn:not(:is([data-cmd="dictate"], [data-cmd="listen"], [data-cmd="remix"], [data-cmd="slides"], [data-cmd="dilute"], [data-cmd="more"])),
    .editor .rich-toolbar.more-open .tb-sep { display: none !important; }
    .editor .rich-toolbar.more-open .tb-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; animation: ed-tray 160ms cubic-bezier(0.23, 1, 0.32, 1); }
    .editor .rich-toolbar.more-open .tb-btn .i { width: 21px; height: 21px; }
    .editor .rich-toolbar.more-open .tb-btn::after { font-size: 0.66rem; font-weight: 600; color: var(--text-muted); }
    .editor .rich-toolbar.more-open [data-cmd="dictate"]::after { content: 'Dictate'; }
    .editor .rich-toolbar.more-open [data-cmd="listen"]::after { content: 'Listen'; }
    .editor .rich-toolbar.more-open [data-cmd="remix"]::after { content: 'Video'; }
    .editor .rich-toolbar.more-open [data-cmd="slides"]::after { content: 'Slides'; }
    .editor .rich-toolbar.more-open [data-cmd="dilute"]::after { content: 'Dilute'; }
    .editor .rich-toolbar.more-open [data-cmd="more"]::after { content: 'Back'; }
    .editor.show-dilute .rich-toolbar [data-cmd="dilute"] { color: var(--ios-accent); }

    /* Keyboard up: the toolbar rests right on it (no home-indicator gap) and the date line steps aside */
    html.kb-open .editor .rich-toolbar { padding-bottom: 4px; }
    html.kb-open .editor .ed-date-m { display: none; }
    html.kb-open .editor .editor-title { padding-top: 4px; font-size: 1.45rem; }
    html.kb-open .editor .editor-body { min-height: 0; padding-bottom: 16px; }
    .editor .editor-title, .editor .ed-date-m { transition: font-size 200ms cubic-bezier(0.23, 1, 0.32, 1), padding 200ms cubic-bezier(0.23, 1, 0.32, 1); }
}
@keyframes ed-tray { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .editor .rich-toolbar.more-open .tb-btn { animation: none; } .editor .editor-title { transition: none; } }

/* ==========================================================================
   Live room v2: the room is the context, the panel is where you act.
   Header · title + stage · draggable panel (collapsed / half / full) · person sheet · room chat
   ========================================================================== */
.sp-sheet {
    position: relative; isolation: isolate;
    background:
        radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--sp-a) 55%, transparent), transparent 70%),
        radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--sp-b) 35%, transparent), transparent 70%),
        #0c0b12;
    color: #f5f5f7;
    --sp-surface: #17161f; --sp-raise: #22212c; --sp-line: rgba(255, 255, 255, 0.08); --sp-muted: rgba(245, 245, 247, 0.62);
}
html.kb-open .sp-room { top: var(--vvtop, 0px); bottom: auto; height: var(--vvh, 100dvh); }
html.kb-open .sp-room .sp-sheet { height: 100%; }

/* Header: compact and quiet; Leave is a plain pill, End room lives in the menu */
.sp-room-head { position: relative; z-index: 2; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 6px; background: none; }
.sp-room-head .sp-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.sp-head-count { flex: 1; font-size: 0.84rem; font-weight: 600; color: var(--sp-muted); opacity: 1; }
.sp-leave-pill { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fca5a5; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.sp-leave-pill:active, .sp-room-head .sp-icon:active { transform: scale(0.95); }
.sp-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; }
.sp-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sp-pulse 1.6s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: 0.35; } }

/* Title + stage: the room itself; it scrolls clear of the panel's resting height */
.sp-stage { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(var(--sp-peek, 150px) + 20px); scrollbar-width: none; }
.sp-stage::-webkit-scrollbar { display: none; }
.sp-stage .sp-room-title { margin: 0 0 6px; padding: 6px 0 4px; background: none; border-radius: 0; color: inherit; }
.sp-stage .sp-room-title h2 { margin: 6px 0 0; font-size: clamp(1.5rem, 6vw, 1.9rem); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.sp-meta { margin: 6px 0 0; color: var(--sp-muted); font-size: 0.86rem; }
.sp-topic { display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.sp-sheet .sp-sec-h { margin: 22px 0 12px; color: var(--sp-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; }
.sp-sheet .sp-note { background: rgba(255, 255, 255, 0.08); color: inherit; }

/* The stage sizes itself to the number of speakers: no big empty grid, no giant lone tile */
.sp-people.stage { display: grid; gap: 18px 10px; justify-items: center; }
.sp-people.stage[data-n="1"] { grid-template-columns: 1fr; }
.sp-people.stage[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-people.stage[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-people.stage[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-people.stage[data-n="5"] { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.sp-people.stage[data-n="1"] .sp-av .avatar.lg { width: 112px; height: 112px; font-size: 2rem; }
.sp-people.stage[data-n="2"] .sp-av .avatar.lg { width: 92px; height: 92px; font-size: 1.6rem; }
.sp-people.stage[data-n="3"] .sp-av .avatar.lg, .sp-people.stage[data-n="4"] .sp-av .avatar.lg { width: 72px; height: 72px; font-size: 1.2rem; }
.sp-people.stage[data-n="5"] .sp-av .avatar.lg { width: 60px; height: 60px; font-size: 1rem; }
.sp-people.stage[data-n="1"] .sp-name { font-size: 1rem; }
.sp-sheet .sp-person { color: inherit; border-radius: 16px; padding: 6px 2px; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-sheet .sp-person:active { transform: scale(0.96); }
.sp-sheet .sp-person:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-sheet .sp-name { gap: 4px; font-weight: 600; }
.sp-sheet .sp-name .vtick { width: 14px; height: 14px; flex: none; }
.sp-sheet .sp-person.me .sp-name > span { font-weight: 800; }
.sp-sheet .sp-badge.host { color: #fbbf24; }
.sp-sheet .sp-muted { background: #2a2933; color: #fff; box-shadow: 0 0 0 2px #0c0b12; }
/* Speaking: a soft ring that breathes (the label also says "mic on", so it's never colour alone) */
.sp-sheet .sp-av::after { inset: -6px; border-width: 2.5px; }
.sp-sheet .sp-person.talking .sp-av::after { border-color: #4ade80; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.16); animation: sp-talk 1.2s ease-in-out infinite; }
@keyframes sp-talk { 50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0.06); } }
.sp-emptycard { display: grid; justify-items: start; gap: 4px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.sp-emptycard strong { font-size: 0.96rem; }
.sp-emptycard span { color: var(--sp-muted); font-size: 0.86rem; line-height: 1.4; }
.sp-emptycard .sp-pill { margin-top: 8px; }

/* Invitation to the stage */
.sp-invite-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 14px 0 0; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--sp-a) 45%, #1b1a24), color-mix(in srgb, var(--sp-b) 35%, #1b1a24)); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7); animation: sp-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-invite-ic { font-size: 1.6rem; }
.sp-invite-card strong { display: block; font-size: 0.96rem; }
.sp-invite-card small { color: var(--sp-muted); font-size: 0.8rem; }
.sp-invite-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes sp-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* Pills */
.sp-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: inherit; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.sp-pill .i { width: 16px; height: 16px; }
.sp-pill.primary { background: #fff; color: #111; }
.sp-pill.ghost { background: rgba(255, 255, 255, 0.12); }
.sp-pill:active { transform: scale(0.96); }

/* Passing notes */
.sp-activity { position: absolute; z-index: 4; top: calc(56px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.sp-act { max-width: calc(100% - 48px); padding: 7px 14px; border-radius: 999px; background: rgba(23, 22, 31, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: sp-act-in 220ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 200ms ease, transform 200ms ease; }
.sp-act.hand { background: rgba(120, 72, 6, 0.92); }
.sp-act.quiet { color: var(--sp-muted); }
.sp-act.out { opacity: 0; transform: translateY(-6px); }
@keyframes sp-act-in { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }

/* Reactions float up the side when the sender isn't on stage */
.sp-fx { position: absolute; z-index: 3; right: 18px; bottom: calc(var(--sp-peek, 150px) + 8px); width: 56px; height: 260px; pointer-events: none; }
.sp-bubble { position: absolute; bottom: 0; left: 50%; font-size: 1.7rem; animation: sp-bubble 2.2s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes sp-bubble { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 12% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px) * 0.3), -16px) scale(1.08); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), -240px) scale(0.95); } }

/* ---------- The panel ---------- */
.sp-panel {
    position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; height: calc(100% - 64px - env(safe-area-inset-top, 0px));
    border-radius: 26px 26px 0 0; background: var(--sp-surface);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -18px 40px -18px rgba(0, 0, 0, 0.7);
    transform: translateY(100%); will-change: transform;
    transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1);
}
.sp-panel-top { flex: none; padding: 0 16px 12px; touch-action: none; cursor: grab; }
.sp-panel[data-dragging] .sp-panel-top { cursor: grabbing; }
.sp-handle { display: grid; place-items: center; width: 100%; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
.sp-handle i { width: 38px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); }
.sp-handle:focus-visible i { background: #fff; }
.sp-summary { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sp-stack { display: flex; flex: none; }
.sp-stack .avatar { width: 30px; height: 30px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--sp-surface); }
.sp-stack .avatar + .avatar { margin-left: -9px; }
.sp-sum-text { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.sp-sum-text strong { font-size: 0.95rem; }
.sp-sum-text small { color: var(--sp-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-controls { display: flex; gap: 8px; margin-top: 10px; }
.sp-ctl { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--sp-raise); color: inherit; font: inherit; font-size: 0.88rem; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 160ms ease, color 160ms ease; }
.sp-ctl > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sp-ctl .i { width: 20px; height: 20px; flex: none; }
.sp-ctl.icon { flex: 0 0 48px; padding: 0; font-size: 1.2rem; }
.sp-ctl.icon.ghost { flex-basis: 40px; min-height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.sp-ctl.icon.ghost .i { width: 18px; height: 18px; }
.sp-ctl.on { background: rgba(255, 255, 255, 0.18); }
.sp-ctl:active { transform: scale(0.96); }
.sp-ctl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-ctl.ask { flex: 2 1 0; background: #fff; color: #111; }
.sp-ctl.ask.sent { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sp-ctl.mic { flex: 1.3 1 0; }
.sp-ctl.mic.live { background: #22c55e; color: #fff; }
.sp-ctl.alert { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }
.sp-dot { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.66rem; font-weight: 800; line-height: 18px; text-align: center; }
.sp-reacts { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; padding: 6px; border-radius: 18px; background: var(--sp-raise); animation: sp-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-reacts[hidden] { display: none; }
.sp-sheet .sp-emoji { flex: 1; width: auto; height: 44px; border-radius: 14px; background: none; font-size: 1.4rem; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-sheet .sp-emoji:active { transform: scale(0.88); }
.sp-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sp-line); }
.sp-panel-body[hidden] { display: none; }
.sp-block + .sp-block { margin-top: 6px; }
.sp-people.aud { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 6px; }
.sp-people.aud .sp-av .avatar.lg { width: 52px; height: 52px; font-size: 0.95rem; }
.sp-people.aud .sp-name { font-size: 0.78rem; }
.sp-req-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.sp-req-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-req-btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-req-btn.ghost { padding: 0; width: 36px; background: rgba(255, 255, 255, 0.1); color: inherit; }
.sp-req-btn .i { width: 16px; height: 16px; }
.sp-req-btn:active { transform: scale(0.95); }
.sp-empty { margin: 0; color: var(--sp-muted); font-size: 0.86rem; }
.sp-about { display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--sp-raise); }
.sp-about > strong { font-size: 1rem; }
.sp-about > span, .sp-about > p { margin: 0; color: var(--sp-muted); font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }
.sp-about dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 10px 0 0; }
.sp-about dl div { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.sp-about dt { color: var(--sp-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sp-about dd { margin: 2px 0 0; font-size: 0.92rem; font-weight: 700; }
.sp-about-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Room chat lives inside the panel; the room stays visible above it */
.sp-panel.chat-open .sp-summary { display: none; }
.sp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--sp-line); }
.sp-chat[hidden] { display: none; }
.sp-chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; }
.sp-chat-head > span { display: grid; line-height: 1.2; }
.sp-chat-head small { color: var(--sp-muted); font-size: 0.74rem; }
.sp-icon.flat { width: 40px; height: 40px; border-radius: 50%; background: none; }
.sp-chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 10px; }
.sp-msg { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 14px; cursor: pointer; animation: sp-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-msg:focus-visible { outline: 2px solid #fff; }
@media (hover: hover) and (pointer: fine) {
    .sp-msg:hover { background: rgba(255, 255, 255, 0.04); }
    .sp-pill:not(.primary):hover, .sp-ctl:not(.ask):not(.live):hover { background: rgba(255, 255, 255, 0.16); }
}
.sp-msg .avatar { width: 30px; height: 30px; font-size: 0.7rem; flex: none; }
.sp-msg-body { min-width: 0; }
.sp-msg-who { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; }
.sp-msg-who time { color: var(--sp-muted); font-size: 0.72rem; }
.sp-msg.mine .sp-msg-who b { color: #c4b5fd; }
.sp-msg p { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.4; overflow-wrap: anywhere; }
.sp-msg-reply { display: block; margin-top: 3px; padding-left: 8px; border-left: 2px solid rgba(255, 255, 255, 0.2); color: var(--sp-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-at { color: #c4b5fd; font-weight: 700; }
.sp-chat-form { flex: none; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sp-line); }
html.kb-open .sp-chat-form { padding-bottom: 8px; }
.sp-reply { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-left: 10px; border-left: 2px solid #c4b5fd; color: var(--sp-muted); font-size: 0.8rem; }
.sp-reply[hidden] { display: none; }
.sp-reply span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-reply .sp-icon.flat { width: 32px; height: 32px; }
.sp-chat-row { display: flex; gap: 8px; }
.sp-chat-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sp-raise); color: inherit; font: inherit; font-size: 16px; }
.sp-chat-input:focus { outline: 2px solid rgba(255, 255, 255, 0.3); }
.sp-send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #111; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-send .i { width: 18px; height: 18px; }
.sp-send:active { transform: scale(0.92); }
.sp-sab { flex: none; height: env(safe-area-inset-bottom, 0px); }
.sp-panel.chat-open .sp-sab, html.kb-open .sp-sab { height: 0; }

/* The notes pad rests on the panel instead of the old footer */
.sp-sheet .sp-notes { bottom: var(--sp-peek, 150px); z-index: 6; background: var(--sp-surface); color: inherit; }

/* ---------- Person sheet ---------- */
.sp-psheet-wrap { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; }
.sp-psheet-wrap[hidden] { display: none; }
.sp-pback { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); animation: sp-fade 200ms ease; }
.sp-psheet { position: relative; width: 100%; max-height: 82%; overflow-y: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: var(--sp-surface); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.8); touch-action: pan-y; animation: sp-sheet-in 360ms cubic-bezier(0.32, 0.72, 0, 1); transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1); }
.sp-psheet-wrap.closing .sp-pback { opacity: 0; transition: opacity 200ms ease; }
.sp-psheet-wrap.closing .sp-psheet { transform: translateY(100%); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes sp-sheet-in { from { transform: translateY(100%); } }
@keyframes sp-fade { from { opacity: 0; } }
.sp-grab { display: grid; place-items: center; height: 22px; }
.sp-grab i { width: 38px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); }
.sp-phead { display: flex; align-items: center; gap: 14px; padding: 6px 4px 12px; }
.sp-phead .avatar.xl { width: 68px; height: 68px; font-size: 1.4rem; flex: none; }
.sp-pwho { display: grid; gap: 2px; min-width: 0; }
.sp-pwho strong { display: flex; align-items: center; gap: 5px; font-size: 1.12rem; overflow-wrap: anywhere; }
.sp-pwho strong small { color: var(--sp-muted); font-weight: 500; font-size: 0.82rem; }
.sp-pwho .vtick { width: 16px; height: 16px; }
.sp-pwho > small { color: var(--sp-muted); font-size: 0.86rem; }
.sp-role { justify-self: start; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.74rem; font-weight: 700; }
.sp-role.host, .sp-role.cohost { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.sp-pbio { margin: 0 4px 12px; color: var(--sp-muted); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.sp-pacts { display: grid; border-radius: 18px; background: var(--sp-raise); overflow: hidden; }
.sp-pact { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; transition: background 120ms ease; }
.sp-pact + .sp-pact { box-shadow: inset 0 1px 0 var(--sp-line); }
.sp-pact .i { width: 20px; height: 20px; color: var(--sp-muted); }
.sp-pact.danger, .sp-pact.danger .i { color: #f87171; }
.sp-pact:active { background: rgba(255, 255, 255, 0.06); }
.sp-pact:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Desktop: a centred tall card with the same anatomy */
@media (min-width: 761px) {
    .sp-sheet { max-width: 480px; }
    .sp-panel { border-radius: 26px 26px 28px 28px; }
}
@media (max-width: 370px) {
    .sp-ctl { padding: 0 8px; font-size: 0.82rem; }
    .sp-ctl.icon { flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-panel, .sp-psheet { transition-duration: 1ms; }
    .sp-live i, .sp-sheet .sp-person.talking .sp-av::after, .sp-bubble, .sp-invite-card, .sp-act, .sp-psheet, .sp-pback, .sp-msg, .sp-reacts { animation: none; }
    .sp-bubble { opacity: 0; }
}
@media (prefers-contrast: more) { .sp-act { background: #000; border: 1px solid #fff; } }

/* Live room v2, matched to the reference: the room is a card sheet over a faint stacked card;
   stage and listeners live in the room; the bar at the bottom carries the latest chat line and your actions */
@media (max-width: 760px) {
    .sp-room { background: #050507; }
    .sp-room::before { content: ""; position: absolute; left: 22px; right: 22px; top: calc(4px + env(safe-area-inset-top, 0px)); height: 40px; border-radius: 22px 22px 0 0; background: rgba(255, 255, 255, 0.07); }
    .sp-sheet { height: calc(100% - 12px - env(safe-area-inset-top, 0px)); margin-top: calc(12px + env(safe-area-inset-top, 0px)); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px -12px rgba(0, 0, 0, 0.8); }
    .sp-room-head { padding-top: 14px; }
    .sp-activity { top: 64px; }
    .sp-panel { height: calc(100% - 64px); }
    html.kb-open .sp-sheet { margin-top: 0; height: 100%; border-radius: 0; }
}
.sp-sheet::after { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); pointer-events: none; }
@media (min-width: 761px) { .sp-sheet::after { display: none; } }

/* Header actions: share + a friendly "✌️ Leave" */
.sp-room-head .sp-leave-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #fb923c; font-weight: 700; }
.sp-head-count { margin-right: auto; }

/* Who's talking, under the title */
.sp-talkline { min-height: 1.2em; margin: 4px 0 0; color: #86efac; font-size: 0.82rem; font-weight: 600; }
.sp-talkline:empty { display: none; }

/* Stage: three across from three speakers, large photos; listeners four across */
.sp-people.stage[data-n="3"], .sp-people.stage[data-n="4"], .sp-people.stage[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-people.stage[data-n="3"] .sp-av .avatar.lg, .sp-people.stage[data-n="4"] .sp-av .avatar.lg, .sp-people.stage[data-n="5"] .sp-av .avatar.lg { width: 84px; height: 84px; font-size: 1.4rem; }
.sp-people.stage[data-n="2"] .sp-av .avatar.lg { width: 100px; height: 100px; }
.sp-people.stage .sp-muted { width: 28px; height: 28px; right: -2px; bottom: -2px; }
.sp-people.stage .sp-muted .i { width: 15px; height: 15px; }
.sp-people.stage .sp-name { font-size: 0.92rem; }
.sp-stage .sp-people.aud { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.sp-stage .sp-people.aud .sp-av .avatar.lg { width: 60px; height: 60px; font-size: 1.05rem; }
.sp-stage .sp-people.aud .sp-name { max-width: 100%; font-size: 0.8rem; font-weight: 600; color: rgba(245, 245, 247, 0.85); }
.sp-stage .sp-sec-h { text-transform: none; letter-spacing: 0; font-size: 0.9rem; font-weight: 700; }

/* Host: a quiet banner when people ask to speak */
.sp-req-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 18px 0 0; padding: 12px 14px; border: 0; border-radius: 18px; background: rgba(245, 158, 11, 0.14); color: inherit; font: inherit; text-align: left; cursor: pointer; animation: sp-in 240ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-req-banner:active { transform: scale(0.98); }
.sp-req-banner > span:nth-child(2) { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.sp-req-banner strong { font-size: 0.92rem; color: #fcd34d; }
.sp-req-banner small { color: var(--sp-muted); font-size: 0.8rem; }
.sp-req-banner .sp-stack .avatar { box-shadow: 0 0 0 2px #2a2214; }
.sp-chev { font-size: 1.4rem; line-height: 1; color: var(--sp-muted); }

/* The ticker: latest chat line, tap to open chat */
.sp-summary { min-height: 0; }
.sp-ticker { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; background: none; color: inherit; font: inherit; font-size: 0.92rem; line-height: 1.35; text-align: left; cursor: pointer; }
.sp-ticker .avatar { width: 28px; height: 28px; font-size: 0.66rem; flex: none; margin-top: 1px; }
.sp-ticker > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; animation: sp-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.sp-ticker b { font-weight: 800; }
.sp-ticker.empty { align-items: center; color: var(--sp-muted); }
.sp-ticker-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); flex: none; }
.sp-ticker-ic .i { width: 15px; height: 15px; }
.sp-panel { background: #1b1a23; }
.sp-controls { margin-top: 6px; }

/* Menus: an On/Off value on the right of a switch row; a checked row reads as selected (icon + state, not colour alone) */
.pop-item .pop-val { margin-left: auto; padding-left: 16px; color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.pop-item[aria-checked="true"] .pop-val { color: var(--accent); }
.pop-item.is-checked[role="menuitemradio"] { font-weight: 700; }
.pop-item.is-checked[role="menuitemradio"] .i { color: var(--accent); }

/* Editor: its parts never shrink to fit; the form scrolls instead (a long note used to spill over the reflection row and footer) */
.editor-form > * { flex-shrink: 0; }

/* ==========================================================================
   Note video studio: preview first, one row per choice (each opens a sheet), a fixed Create button
   ========================================================================== */
.nm-card { position: relative; }
.nm-studio { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 12px; }
.nm-side { display: grid; gap: 12px; align-content: start; transition: opacity 160ms ease; }
.nm-side.busy { opacity: 0.45; pointer-events: none; }

/* Rows: label left, current choice right, chevron — the whole row is the target */
.nm-rows { display: grid; border-radius: 18px; background: var(--input); overflow: hidden; }
.nm-row-wrap { position: relative; display: flex; align-items: center; }
.nm-row-wrap + .nm-row-wrap { box-shadow: inset 0 1px 0 var(--border); }
.nm-row { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 0 14px 0 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: background 140ms ease; }
.nm-rows > .nm-row + .nm-row { box-shadow: inset 0 1px 0 var(--border); }
.nm-row:active { background: color-mix(in srgb, var(--text) 6%, transparent); }
@media (hover: hover) and (pointer: fine) { .nm-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } }
.nm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nm-row-k { flex: none; font-weight: 700; font-size: 0.95rem; }
.nm-row-v { flex: 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm-row-v .i { width: 16px; height: 16px; flex: none; }
.nm-row-em { font-size: 1.05rem; line-height: 1; }
.nm-chev { flex: none; color: var(--text-faint, var(--text-muted)); font-size: 1.35rem; line-height: 1; }
.nm-swatch { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); flex: none; }
.nm-sample { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-right: 8px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.nm-sample .i { width: 14px; height: 14px; }
.nm-sample:active { transform: scale(0.92); }
.nm-row-wrap:has(.nm-sample) .nm-row { padding-right: 8px; }

/* Quiet notes above the rows */
.nm-restored { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: 0.84rem; }
.nm-restored .i { width: 15px; height: 15px; color: #22c55e; flex: none; }
.nm-restored span { flex: 1; }
.nm-recommend { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--input)); }
.nm-recommend > span:nth-child(2) { flex: 1; display: grid; line-height: 1.25; }
.nm-recommend small { color: var(--text-muted); font-size: 0.76rem; }
.nm-recommend strong { font-size: 0.92rem; }
.nm-chip { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.nm-chip:active { transform: scale(0.95); }

/* Ready */
.nm-ready { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, #22c55e 12%, var(--input)); animation: nm-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.nm-ready-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #22c55e; color: #fff; flex: none; }
.nm-ready-ic .i { width: 18px; height: 18px; }
.nm-ready > span:last-child { display: grid; line-height: 1.3; }
.nm-ready small { color: var(--text-muted); font-size: 0.82rem; }

/* The fixed action: always reachable, never over the content */
.nm-action { flex: none; display: grid; gap: 6px; padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.nm-action .nm-meta { margin: 0; text-align: center; font-size: 0.8rem; }
.nm-action .primary-btn { min-height: 50px; font-size: 1rem; }
.nm-action .primary-btn[disabled] { opacity: 0.85; }

/* ---------- Sheets (inside the creator, over it) ---------- */
.nm-sheet-wrap { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; border-radius: inherit; overflow: hidden; }
.nm-sheet-wrap[hidden] { display: none; }
.nm-sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); animation: nm-fade 200ms ease; }
.nm-sheet { position: relative; width: 100%; max-height: 78%; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.7); animation: nm-sheet-in 380ms cubic-bezier(0.32, 0.72, 0, 1); transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1); }
.nm-sheet-wrap.closing .nm-sheet-back { opacity: 0; transition: opacity 200ms ease; }
.nm-sheet-wrap.closing .nm-sheet { transform: translateY(100%); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes nm-sheet-in { from { transform: translateY(100%); } }
@keyframes nm-fade { from { opacity: 0; } }
@keyframes nm-in { from { opacity: 0; transform: translateY(6px); } }
.nm-grab { position: sticky; top: 0; z-index: 1; display: grid; place-items: center; height: 22px; margin: 0 -16px; background: var(--surface); cursor: grab; touch-action: none; }
.nm-grab i { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.nm-sheet-head { position: sticky; top: 22px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 6px; padding: 2px 16px 10px; background: var(--surface); touch-action: none; }
.nm-sheet-head h4 { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
.nm-done-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; }
.nm-group { margin: 14px 2px 8px; color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.nm-tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); }
.nm-tick .i { width: 13px; height: 13px; }

/* Characters: a visual grid */
.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.nm-tile { position: relative; display: grid; justify-items: start; gap: 2px; min-height: 108px; padding: 12px; border: 0; border-radius: 18px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; }
.nm-tile:active { transform: scale(0.97); }
.nm-tile[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--input)); }
.nm-tile-av { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; background: var(--surface); font-size: 1.5rem; }
.nm-tile strong { font-size: 0.92rem; }
.nm-tile small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.3; }

/* Voices and music: lists with a play button */
.nm-list { display: grid; gap: 6px; }
.nm-item { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 16px; background: var(--input); }
.nm-item.on { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--input)); }
.nm-item-main { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; min-height: 58px; padding: 8px 40px 8px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nm-item-main.static { cursor: default; }
.nm-item-main > span:first-child { display: grid; gap: 1px; min-width: 0; }
.nm-item-main strong { font-size: 0.94rem; }
.nm-item-main small { color: var(--text-muted); font-size: 0.8rem; }
.nm-item-main .nm-tick { top: 50%; right: 12px; margin-top: -11px; }
.nm-pick { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.68rem; font-style: normal; font-weight: 800; vertical-align: 1px; }
.nm-item-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: 8px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.nm-item .nm-item-play:last-child { margin: 0 10px 0 0; }
.nm-item-play .i { width: 15px; height: 15px; }
.nm-item-play.playing { background: var(--accent); color: var(--on-accent, #fff); }
.nm-item-play.ghost { background: none; color: var(--text-muted); cursor: default; }
.nm-item-play:active:not(.ghost) { transform: scale(0.92); }
.nm-item-play .nm-stop { width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.nm-add { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 16px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nm-add .i { width: 20px; height: 20px; color: var(--accent); flex: none; margin: 0 10px 0 8px; }
.nm-add span { display: grid; }
.nm-add strong { font-size: 0.92rem; }
.nm-add small { color: var(--text-muted); font-size: 0.78rem; }
.nm-mine { margin-top: 10px; }
.nm-mine-acts { display: flex; gap: 8px; margin-top: 8px; }
.nm-sheet .nm-volume { margin-top: 14px; }
.nm-sheet .field { margin-top: 4px; }
.nm-sheet .nm-switch { margin-top: 12px; }
.nm-hint { margin: 12px 2px 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.nm-reset { display: block; margin: 16px auto 0; min-height: 44px; padding: 0 16px; border: 0; background: none; color: #ef4444; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }

/* Looks: real thumbnails with names */
.nm-looks2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.nm-look-tile { position: relative; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 600; text-align: center; cursor: pointer; }
.nm-look-thumb { display: grid; align-content: center; justify-items: center; gap: 5px; aspect-ratio: 9 / 13; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; }
.nm-look-thumb b { font-size: 1.2rem; }
.nm-look-thumb i { width: 46%; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.5; }
.nm-look-thumb i + i { width: 30%; }
.nm-look-tile[aria-checked="true"] .nm-look-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.nm-look-tile:active .nm-look-thumb { transform: scale(0.96); }
.nm-look-tile .nm-tick { top: 6px; right: 6px; }

/* Phones: the preview is the hero, rows under it, the button pinned */
@media (max-width: 760px) {
    dialog.nm { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .nm-card { height: 100dvh; max-height: 100dvh; }
    .nm-head { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
    .nm-studio { grid-template-columns: 1fr; gap: 14px; }
    .nm-studio .nm-stage { justify-self: center; width: min(100%, calc(46dvh * 9 / 16)); }
    .nm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nm-looks2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .nm-sheet, .nm-sheet-back, .nm-ready { animation: none; }
    .nm-sheet { transition-duration: 1ms; }
}

/* Notification rows say where a tap goes ("View post ›"); the whole row is the target */
.notif-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notif-go { color: var(--accent); font-size: 0.76rem; font-weight: 700; }
.notif .notif-text strong { font-weight: 700; }

/* ---------- Live in the Stories row: the same size as a story, a thin ring instead of a big red disc ---------- */
.story-live .story-ring { position: relative; }
.story-ring.go-live, .story-ring.live-ring { padding: 2.5px; background: linear-gradient(135deg, #f43f5e, #ec4899 55%, #a855f7); }
.story-ring.go-live .go-live-ic { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg, #000); background: var(--input, #1c1c22); color: #f43f5e; box-sizing: border-box; }
.story-ring.go-live .go-live-ic .i { width: 24px; height: 24px; }
.story-ring.live-ring .avatar { border-color: var(--bg, #000); }
/* LIVE tag: text, not just colour */
.live-tag { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); padding: 1px 5px; border: 2px solid var(--bg, #000); border-radius: 5px; background: #e11d48; color: #fff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.35; pointer-events: none; }
.story-ring.go-live .live-tag { background: var(--input, #1c1c22); color: #fb7185; border-color: var(--bg, #000); }
/* Someone live: a slow, quiet breath on the ring (no glow, no spin) */
.story-live.is-on .story-ring::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(244, 63, 94, 0.55); animation: live-breathe 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes live-breathe { 0%, 100% { opacity: 0; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.story-live .story-ring { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.story-live:active .story-ring { transform: scale(0.94); }
.feed-v2 .story-live > span:last-child { color: var(--text-muted); }
.feed-v2 .story-live.is-on > span:last-child { color: var(--text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .story-live.is-on .story-ring::before { animation: none; opacity: 0.8; } }

/* ---------- In-app notification cards: arrive in real time, click straight through ---------- */
.nt-cards { position: fixed; z-index: 400; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
@media (max-width: 760px) { .nt-cards { left: 12px; right: 12px; width: auto; margin: 0 auto; max-width: 460px; } }
.nt-card { position: relative; display: flex; align-items: stretch; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-lg, 0 18px 40px -16px rgba(0, 0, 0, 0.55)), 0 0 0 1px var(--border); pointer-events: auto; animation: nt-in 260ms cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 200ms ease, transform 200ms ease; }
.nt-card.out { opacity: 0; transform: translateY(-8px) scale(0.98); }
@keyframes nt-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.nt-card-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 10px 6px 10px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 18px 0 0 18px; }
.nt-card-main .avatar { width: 38px; height: 38px; flex: none; }
.nt-card-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft, var(--input)); color: var(--accent); flex: none; }
.nt-card-ic .i { width: 18px; height: 18px; }
.nt-card-text { display: grid; gap: 2px; min-width: 0; }
.nt-card-text > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nt-card-text small { color: var(--text-muted); font-size: 0.76rem; }
.nt-card-text small b { color: var(--accent); font-weight: 700; }
.nt-card-x { display: grid; place-items: center; flex: none; width: 40px; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 0 18px 18px 0; }
.nt-card-x .i { width: 16px; height: 16px; }
.nt-card-main:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
@media (hover: hover) and (pointer: fine) { .nt-card-main:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .nt-card-x:hover { color: var(--text); } }
.nt-card-main:focus-visible, .nt-card-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .nt-card { animation: none; } }

/* ---------- Wordplay: comments and reactions while you play ---------- */
.wpm-game { position: relative; }
.wpc-btn { position: relative; margin-left: auto; }
.wpc-dot { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.64rem; font-weight: 800; line-height: 17px; text-align: center; }
.wpc-dot[hidden] { display: none; }
.wpc-ticker { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 2px 0 6px; padding: 6px 12px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 0.84rem; text-align: left; cursor: pointer; }
.wpc-ticker[hidden] { display: none; }
.wpc-ticker .i { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.wpc-ticker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-react { display: flex; justify-content: space-between; gap: 4px; margin: 8px 0 2px; overflow-x: auto; scrollbar-width: none; }
.wpc-react[hidden] { display: none; }
.wpc-react button { flex: 1 0 36px; height: 38px; border: 0; border-radius: 12px; background: var(--input); font-size: 1.15rem; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.wpc-react button:active { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) { .wpc-react button:hover { background: color-mix(in srgb, var(--text) 9%, var(--input)); } }
/* Reactions rise over the board with the sender's name, then fade */
.wpc-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.wpc-bubble { position: absolute; left: var(--x, 50%); bottom: 90px; display: grid; justify-items: center; gap: 2px; animation: wpc-rise 2.4s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.wpc-bubble b { font-size: 2rem; line-height: 1; }
.wpc-bubble small { padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.68rem; font-weight: 700; }
@keyframes wpc-rise { 0% { opacity: 0; transform: translateY(16px) scale(0.7); } 12% { opacity: 1; transform: translateY(0) scale(1.08); } 100% { opacity: 0; transform: translateY(-220px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .wpc-bubble { animation: wpc-fade 1.4s ease forwards; } @keyframes wpc-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
/* The chat sheet sits over the board, inside the match */
.wpc-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; height: min(72%, 560px); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.6), 0 -1px 0 var(--border); animation: wpc-up 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.wpc-sheet[hidden] { display: none; }
@keyframes wpc-up { from { transform: translateY(100%); } }
.wpc-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 16px; border-bottom: 1px solid var(--border); }
.wpc-head strong { font-size: 1rem; }
.wpc-head small { flex: 1; color: var(--text-muted); font-size: 0.76rem; }
.wpc-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.wpc-msg { display: flex; align-items: flex-start; gap: 8px; }
.wpc-msg.mine { cursor: pointer; }
.wpc-msg .avatar { width: 28px; height: 28px; flex: none; font-size: 0.66rem; }
.wpc-msg > div { min-width: 0; padding: 7px 11px; border-radius: 14px; background: var(--input); }
.wpc-msg.mine > div { background: color-mix(in srgb, var(--accent) 16%, var(--input)); }
.wpc-who { display: block; color: var(--text-muted); font-size: 0.72rem; font-weight: 700; }
.wpc-who time, .wpc-rx time { font-weight: 500; opacity: 0.8; }
.wpc-msg p { margin: 1px 0 0; font-size: 0.92rem; line-height: 1.4; overflow-wrap: anywhere; }
.wpc-rx { margin: 0; text-align: center; color: var(--text-muted); font-size: 0.78rem; }
.wpc-empty { margin: auto; padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.wpc-form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.wpc-form[hidden] { display: none; }
.wpc-input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.wpc-send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; }
.wpc-send .i { width: 18px; height: 18px; }

/* Live room: hosts get a clear End button in the header (Leave quietly stays in the ⋯ menu) */
.sp-end-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: #dc2626; color: #fff; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.sp-end-pill .i { width: 15px; height: 15px; }
.sp-end-pill:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .sp-end-pill:hover { background: #b91c1c; } }
.sp-end-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Wordplay: the winner's pop-up ---------- */
.wpw { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.55); animation: wpw-fade 220ms ease; }
.wpw.out { opacity: 0; transition: opacity 200ms ease; }
@keyframes wpw-fade { from { opacity: 0; } }
.wpw-card { width: min(360px, 100%); padding: 24px 20px 18px; border-radius: 26px; background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border); text-align: center; animation: wpw-pop 420ms cubic-bezier(0.34, 1.4, 0.64, 1); }
@keyframes wpw-pop { from { opacity: 0; transform: translateY(12px) scale(0.9); } }
.wpw-trophy { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.35)); animation: wpw-bob 1.6s ease-in-out 420ms 2; }
@keyframes wpw-bob { 50% { transform: translateY(-6px) rotate(-6deg); } }
.wpw-card h3 { margin: 12px 0 4px; font-size: 1.5rem; letter-spacing: -0.02em; text-wrap: balance; }
.wpw-sub { margin: 0 0 16px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
.wpw-standings { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; text-align: left; }
.wpw-standings li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--input); }
.wpw-standings li.win { background: color-mix(in srgb, #f59e0b 16%, var(--input)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f59e0b 55%, transparent); }
.wpw-standings li.out { opacity: 0.6; }
.wpw-place { width: 22px; text-align: center; font-weight: 800; color: var(--text-muted); }
.wpw-standings .avatar { width: 30px; height: 30px; font-size: 0.7rem; flex: none; }
.wpw-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpw-name small { color: var(--text-muted); font-weight: 500; }
.wpw-standings b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.wpw-acts { display: grid; gap: 8px; }
.wpw-acts .primary-btn, .wpw-acts .ghost-btn { width: 100%; min-height: 46px; justify-content: center; }
.wpw-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wpw, .wpw-card, .wpw-trophy { animation: none; } }

/* Wordplay chat: react to a message (chips under it), and an emoji button in the box */
.wpc-msg { cursor: pointer; }
.wpc-msg > .wpc-bub { display: grid; justify-items: start; gap: 4px; padding: 0; background: none; min-width: 0; }
.wpc-msg.mine > .wpc-bub { background: none; }
.wpc-bub > div { min-width: 0; padding: 7px 11px; border-radius: 14px; background: var(--input); transition: background 140ms ease; }
.wpc-msg.mine .wpc-bub > div { background: color-mix(in srgb, var(--accent) 16%, var(--input)); }
@media (hover: hover) and (pointer: fine) { .wpc-msg:hover .wpc-bub > div { background: color-mix(in srgb, var(--text) 7%, var(--input)); } }
.wpc-msg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.wpc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wpc-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.86rem; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.wpc-chip b { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wpc-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.wpc-chip.on b { color: var(--accent); }
.wpc-chip:active { transform: scale(0.92); }
.wpc-emo { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--input); font-size: 1.25rem; cursor: pointer; touch-action: manipulation; }
.wpc-emo:active { transform: scale(0.92); }

/* ---------- People you may know: dismiss, few-connections header, people in the empty Feed ---------- */
.pymk-card { position: relative; }
.pymk-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; touch-action: manipulation; transition: background 140ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.pymk-x .i { width: 14px; height: 14px; }
.pymk-x::before { content: ""; position: absolute; inset: -8px; } /* a finger-sized target */
.pymk-x:active { transform: scale(0.9); }
@media (hover: hover) and (pointer: fine) { .pymk-x:hover, .pymk-x-row:hover { background: var(--input); color: var(--text); } }
.pymk-x-row { flex: none; width: 34px; height: 34px; color: var(--text-muted); }
.pymk-x-row .i { width: 15px; height: 15px; }
.pymk-strip.few header { align-items: flex-start; }
.pymk-strip.few header h3 { margin: 0; }
.pymk-strip.few header p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.4; }
.feed-empty-people { display: grid; gap: 4px; width: min(440px, 100%); margin: 14px auto 6px; padding: 6px; border-radius: 16px; background: var(--input); text-align: left; }
.feed-empty-people .suggest-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.feed-empty-people .contact-name { flex: 1; min-width: 0; display: grid; cursor: pointer; }
.feed-empty-people .contact-name strong, .feed-empty-people .contact-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-empty-people .contact-name small { color: var(--text-muted); font-size: 0.78rem; }

/* ---------- Videos in chats ---------- */
.msg-video { position: relative; width: min(280px, 72vw); max-height: 420px; border-radius: 16px; overflow: hidden; background: #000; }
.msg-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.msg-video-cover { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: #111; cursor: pointer; }
.msg-video-cover[hidden] { display: none; }
.msg-video-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.msg-video-play { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.msg-video-play .i { width: 24px; height: 24px; margin-left: 3px; }
.msg-video-cover:active .msg-video-play { transform: scale(0.92); }
.msg-video-cover.loading .msg-video-play { animation: vid-pulse 1s ease-in-out infinite; }
@keyframes vid-pulse { 50% { opacity: 0.55; } }
.msg-video-cover small { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.msg-video-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gc-bubble .msg-video { margin: 2px 0 6px; }
/* The tray before sending */
.pending-video { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: #000; flex: none; }
.pending-video video { width: 100%; height: 100%; object-fit: cover; }
.pending-video .i { position: absolute; width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
/* Upload progress */
.up-bar { position: relative; display: flex; align-items: center; min-height: 28px; margin: 0 0 6px; padding: 0 12px; border-radius: 10px; background: var(--input); overflow: hidden; font-size: 0.8rem; font-weight: 700; }
.up-bar i, .up-pill i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--accent) 28%, transparent); transition: width 160ms linear; }
.up-bar span, .up-pill span { position: relative; }
.up-pill { position: fixed; z-index: 450; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-lg, 0 14px 30px -12px rgba(0, 0, 0, 0.6)), 0 0 0 1px var(--border); overflow: hidden; font-size: 0.86rem; font-weight: 700; }
.up-pill.failed { color: #f87171; }
.up-pill button { position: relative; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--input); color: var(--text); font: inherit; font-size: 0.8rem; cursor: pointer; }
/* Preview before sending (group chats) */
dialog.vid-confirm { width: min(440px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); }
dialog.vid-confirm::backdrop { background: rgba(0, 0, 0, 0.6); }
.vid-card { display: grid; gap: 10px; padding: 12px; }
.vid-card video { width: 100%; max-height: 56vh; border-radius: 14px; background: #000; }
.vid-caption { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 16px; }
.vid-meta { margin: 0; color: var(--text-muted); font-size: 0.8rem; }
.vid-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.vid-acts button { min-height: 46px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .msg-video-cover.loading .msg-video-play { animation: none; } }

/* ---------- Text styles in notes: Title, Heading, Subheading, Body, Monostyle ---------- */
.rich h1, .rich-content h1 { margin: 14px 0 6px; font-size: 1.65em; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.rich h2, .rich-content h2 { margin: 12px 0 4px; font-size: 1.3em; font-weight: 750; line-height: 1.25; letter-spacing: -0.01em; }
.rich h3, .rich-content h3 { margin: 10px 0 2px; font-size: 1.08em; font-weight: 700; line-height: 1.3; color: color-mix(in srgb, var(--text) 82%, transparent); }
.rich > :is(h1, h2, h3):first-child, .rich-content > :is(h1, h2, h3):first-child { margin-top: 2px; }

/* Style choices, each shown in its own look */
.tb-style { border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.tb-style.s-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.tb-style.s-heading { font-size: 1rem; font-weight: 750; }
.tb-style.s-subheading { font-size: 0.92rem; font-weight: 700; color: color-mix(in srgb, var(--text) 80%, transparent); }
.tb-style.s-body { font-size: 0.9rem; font-weight: 500; }
.tb-style.s-mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.84rem; }

/* Desktop: one style button in the toolbar ("Body ▾") and its menu */
.tb-btn[data-cmd="pstyle"] { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 104px; padding: 0 10px; justify-content: space-between; font-weight: 700; font-size: 0.86rem; }
.tb-btn[data-cmd="pstyle"] .i { width: 14px; height: 14px; opacity: 0.7; }
.tb-styles { display: none; }
.tb-style-menu { position: fixed; z-index: 500; display: grid; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg, 0 18px 40px -16px rgba(0, 0, 0, 0.55)), 0 0 0 1px var(--border); animation: tb-menu-in 140ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes tb-menu-in { from { opacity: 0; transform: scale(0.97); } }
.tb-style-menu .tb-style { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; text-align: left; }
.tb-style-menu .tb-style[aria-checked="true"]::after { content: "✓"; color: var(--accent); font-family: inherit; font-size: 0.9rem; font-weight: 800; }
.tb-style-menu .tb-style:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .tb-style-menu .tb-style:hover { background: var(--input); } }

/* Phones: the styles live in the Aa panel, as a row of chips above Bold / Italic… */
@media (max-width: 760px) {
    .editor .rich-toolbar .tb-btn[data-cmd="pstyle"] { display: none !important; }
    .editor .rich-toolbar.fmt-open .tb-styles { display: flex; flex-basis: 100%; gap: 6px; margin: 0 3px 4px; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: none; }
    .editor .rich-toolbar.fmt-open .tb-styles::-webkit-scrollbar { display: none; }
    .editor .rich-toolbar.fmt-open .tb-style { flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(127, 127, 127, 0.1); }
    .editor .rich-toolbar.fmt-open .tb-style[aria-checked="true"] { background: color-mix(in srgb, var(--ios-accent, var(--accent)) 20%, transparent); color: var(--ios-accent, var(--accent)); box-shadow: inset 0 0 0 1.5px currentColor; }
}
@media (prefers-reduced-motion: reduce) { .tb-style-menu { animation: none; } }

/* ---------- Note editor on phones: a notepad, not a form — date, then a calm title, then the body ---------- */
@media (max-width: 760px) {
    .editor .ed-date-m { margin: 2px 0 14px; }
    .editor #editor-title,
    html.kb-open .editor #editor-title {
        min-height: 36px;
        padding: 0 20px;
        font-size: 1.42rem !important; /* above the 16px no-zoom floor, so iPhone still never zooms */
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.012em;
    }
    /* "Title" is only a hint: light and quiet until you type */
    .editor .editor-title::placeholder { color: var(--text-faint); opacity: 0.55; font-weight: 700; }
    .editor .editor-body {
        padding: 8px 20px 28px;
        font-size: 1.0625rem !important;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0;
    }
    .editor .editor-body:empty::before { color: var(--text-faint); opacity: 0.55; }
    .editor .editor-body > :first-child { margin-top: 0; }
}

/* ---------- Holding a message: the bubble is the thing you hold, not its words ---------- */
/* Touch screens: no word selection, no handles, no Copy / Look Up / Translate bar on chat bubbles (Copy is in our menu) */
@media (pointer: coarse) {
    .msg-card, .msg-card *, .gc-bubble, .gc-bubble * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* The held message lifts a little — the text itself is never highlighted */
.msg .msg-card, .gc-msg .gc-bubble { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; }
.msg.menu-open .msg-card, .gc-msg.held .gc-bubble { transform: scale(1.02); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.55), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .msg.menu-open .msg-card, .gc-msg.held .gc-bubble { transform: none; } }

/* Phones: the menu is a sheet — reactions on top, then one clear row per action */
.msg-menu-scrim { position: fixed; inset: 0; z-index: 390; background: rgba(0, 0, 0, 0.32); animation: lp-fade 160ms ease; }
@keyframes lp-fade { from { opacity: 0; } }
.react-bar.as-sheet { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 400; max-width: 520px; max-height: 76vh; margin: 0 auto; overflow-y: auto; gap: 8px; padding: 10px; border-radius: 22px; animation: lp-up 260ms cubic-bezier(0.32, 0.72, 0, 1) !important; }
@keyframes lp-up { from { transform: translateY(24px); opacity: 0; } }
.react-bar.as-sheet .react-emojis { justify-content: space-between; padding: 2px 4px 8px; }
.react-bar.as-sheet .react-emojis button { width: 42px; height: 42px; font-size: 1.5rem; }
.react-bar.as-sheet .react-actions { flex-direction: column; gap: 0; padding-top: 4px; }
.react-bar.as-sheet .react-actions button { justify-content: flex-start; gap: 14px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 0.98rem; font-weight: 600; color: var(--text); text-align: left; }
.react-bar.as-sheet .react-actions button + button { box-shadow: inset 0 1px 0 var(--border); }
.react-bar.as-sheet .react-actions button.danger { color: var(--dot-red, #ef4444); }
.react-bar.as-sheet .react-actions .i { width: 20px; height: 20px; color: var(--text-muted); }
.react-bar.as-sheet .react-actions button.danger .i { color: inherit; }
.react-bar.as-sheet .react-actions button:active { background: var(--panel, var(--input)); }
@media (prefers-reduced-motion: reduce) { .react-bar.as-sheet, .msg-menu-scrim { animation: none !important; } }

/* =====================================================================
   Chat inbox v2: a big quiet title, light category pills, search, one list (chats + groups), swipe and hold
   ===================================================================== */
.inbox-list { position: relative; --row-bg: var(--surface); }
.chat-top { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 16px 8px; }
.chat-title { grid-column: 1; margin: 0; font-size: clamp(1.7rem, 6vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.chat-sub { grid-column: 1; grid-row: 2; margin-top: 2px; color: var(--text-muted); font-size: 0.8rem; }
.chat-pill { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--input); }
.chat-pill-btn, .chat-pill-me { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.chat-pill-btn .i { width: 21px; height: 21px; }
.chat-pill-me .avatar.sm { width: 34px; height: 34px; }
.chat-pill-btn:active, .chat-pill-me:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .chat-pill-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } }

.chat-cats { display: flex; gap: 6px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.chat-cats::-webkit-scrollbar { display: none; }
.chat-cat { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: background 160ms ease, color 160ms ease; }
.chat-cat[aria-selected="true"] { background: var(--input); color: var(--text); font-weight: 700; }
.chat-cat .badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; }
.chat-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.inbox-list .inbox-search { margin: 0 16px 12px; min-height: 46px; border-radius: 999px; }
.inbox-list .add-friend { margin: 0 16px 12px; }

/* Search results: People · Groups · Messages */
.chat-results { padding: 0 8px 12px; }
.chat-results[hidden] { display: none; }
.inbox-list.searching .convo-list, .inbox-list.searching .chat-cats, .inbox-list.searching .inbox-foot { display: none; }
.cr-sec h4 { margin: 12px 12px 4px; color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cr-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cr-row > span:last-child { display: grid; min-width: 0; }
.cr-row strong { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.95rem; }
.cr-row strong time { color: var(--text-muted); font-size: 0.74rem; font-weight: 500; flex: none; }
.cr-row small { color: var(--text-muted); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-row mark { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; }
@media (hover: hover) and (pointer: fine) { .cr-row:hover { background: var(--input); } }
.cr-note { margin: 16px 12px; color: var(--text-muted); font-size: 0.88rem; }

/* Group rows */
.gc-av { display: grid; place-items: center; color: #fff; font-size: 1.25rem; font-weight: 700; }
.avatar.sm.gc-av { font-size: 0.95rem; }

/* Empty: a real start, not a blank screen */
.chat-onboard { display: grid; justify-items: center; gap: 6px; margin: 28px 16px; padding: 26px 20px; border-radius: 22px; background: var(--input); text-align: center; }
.chat-onboard-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.chat-onboard-ic .i { width: 26px; height: 26px; }
.chat-onboard strong { font-size: 1.08rem; }
.chat-onboard > span:not(.chat-onboard-ic) { color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; max-width: 300px; }
.chat-onboard > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* New chat button (above the bottom bar on phones, in the list's corner on desktop) */
.inbox-list .inbox-fab { display: grid; place-items: center; position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 80%, transparent); cursor: pointer; touch-action: manipulation; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.inbox-list .inbox-fab .i { width: 23px; height: 23px; }
.inbox-list .inbox-fab:active { transform: scale(0.93); }

/* Swipe actions: hidden behind the row until a sideways swipe reveals them */
.convo-list .convo-wrap { position: relative; overflow: hidden; }
.convo-list .convo-wrap > :not(.sw-acts) { transform: translateX(var(--sx, 0px)); transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1); }
.convo-list .convo-wrap.swiping > :not(.sw-acts) { transition: none; }
.convo-list .convo-wrap.swiping > .convo, .convo-list .convo-wrap.swiped > .convo { background: var(--row-bg); }
.sw-acts { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; width: 152px; }
.sw-acts.left { left: 0; }
.sw-acts.right { right: 0; }
.sw-act { flex: 1; display: grid; place-content: center; justify-items: center; gap: 4px; border: 0; color: #fff; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.sw-act .i { width: 20px; height: 20px; }
.sw-act.blue { background: #3b82f6; } .sw-act.amber { background: #d97706; } .sw-act.grey { background: #52525b; } .sw-act.violet { background: #7c3aed; }
.convo-list .convo-wrap.held > .convo { background: var(--input); }
@media (pointer: coarse) { .convo-list .convo-wrap, .convo-list .convo-wrap * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
@media (prefers-reduced-motion: reduce) { .convo-list .convo-wrap > :not(.sw-acts) { transition: none; } }

/* New message sheet */
dialog.nm-people { width: min(480px, 100vw); max-height: min(720px, 92dvh); padding: 0; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); color: var(--text); }
dialog.nm-people::backdrop { background: rgba(0, 0, 0, 0.5); }
.nmp-card { display: flex; flex-direction: column; max-height: inherit; }
.nmp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 6px 18px; }
.nmp-head h3 { margin: 0; font-size: 1.15rem; }
.nmp-search { margin: 4px 16px 8px; min-height: 44px; border-radius: 999px; }
.nmp-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 16px; }
.nmp-body h4 { margin: 12px 10px 6px; color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.nmp-online { display: flex; gap: 12px; overflow-x: auto; padding: 2px 10px 6px; scrollbar-width: none; }
.nmp-face { display: grid; justify-items: center; gap: 4px; flex: none; width: 62px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.78rem; cursor: pointer; }
.nmp-face span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmp-face .avatar.lg { width: 54px; height: 54px; }
.nmp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 6px 10px; border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nmp-row > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.nmp-row small { color: var(--text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmp-row.static { cursor: default; }
@media (hover: hover) and (pointer: fine) { .nmp-row:not(.static):hover { background: var(--input); } }

@media (max-width: 760px) {
    /* The clean layout replaces the purple header */
    body[data-view="messages"] .inbox-list { background: var(--bg); border-radius: 0; --row-bg: var(--bg); }
    body[data-view="messages"] .inbox-sheet { margin-top: 0; padding-top: 0; border-radius: 0; background: transparent; }
    .chat-top { padding-top: 8px; }
    .inbox-list .inbox-fab { position: fixed; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; }
    dialog.nm-people { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; border-width: 1px 0 0; animation: nmp-up 320ms cubic-bezier(0.32, 0.72, 0, 1); }
    @keyframes nmp-up { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { dialog.nm-people { animation: none; } }

/* Inbox: the app bar already says Chat on phones; only the side a swipe reveals shows */
@media (max-width: 760px) { .inbox-list .chat-top { display: none; } body[data-view="messages"] .inbox-list { border: 0; box-shadow: none; } body[data-view="messages"] .inbox-sheet { padding-top: 4px; } }
.convo-wrap:not(.sw-r) .sw-acts.left, .convo-wrap.sw-r .sw-acts.right { visibility: hidden; }
.chat-top .chat-title { display: none; }
.chat-top .chat-sub { grid-row: 1; margin: 0; font-size: 0.86rem; }
@media (min-width: 761px) { .inbox-list .inbox-fab { bottom: 52px; } }
@media (max-width: 760px) { body[data-view="messages"] .inbox { border: 0; box-shadow: none; background: none; } }

/* =====================================================================
   Explore discovery: topic pills, Create Community, community cards, creators, interests
   ===================================================================== */
.ex-cats { display: flex; gap: 8px; margin: 2px 0 14px; padding: 2px 2px 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.ex-cats::-webkit-scrollbar { display: none; }
.ex-cat { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--input); color: var(--text-muted); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; scroll-snap-align: start; touch-action: manipulation; transition: background 160ms ease, color 160ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.ex-cat[aria-selected="true"] { background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; }
.ex-cat:active { transform: scale(0.96); }
.ex-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ex-create { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0 0 20px; border: 0; border-radius: 16px; background: var(--text); color: var(--bg); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.ex-create .i { width: 20px; height: 20px; }
.ex-create:active { transform: scale(0.98); }

/* Community cards: a cover from the community's colour and emoji, member count, two lines about it, Join */
.ex-cc-rail { gap: 14px; scroll-snap-type: x mandatory; }
.ex-cc { position: relative; flex: none; display: grid; align-content: start; gap: 0; width: min(260px, 72vw); scroll-snap-align: start; }
.ex-cc.skel { height: 250px; border-radius: 20px; background: var(--input); animation: pulse 1.4s ease-in-out infinite; }
.ex-cc-open { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ex-cc-cover { position: relative; display: grid; place-items: center; height: 156px; border-radius: 20px; overflow: hidden;
    background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--g) 70%, #fff 30%), transparent 60%), linear-gradient(140deg, var(--g), color-mix(in srgb, var(--g) 55%, #000 45%));
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.ex-cc-cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px); background-size: 16px 16px; opacity: 0.6; }
.ex-cc-emoji { position: relative; z-index: 1; font-size: 3.6rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
.ex-cc-count { position: absolute; z-index: 1; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 0.82rem; font-weight: 700; }
.ex-cc-count .i { width: 14px; height: 14px; }
.ex-cc-open strong { margin-top: 8px; font-size: 1rem; line-height: 1.25; }
.ex-cc-open small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; }
.ex-cc-btn { position: absolute; top: 112px; right: 10px; z-index: 2; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5); }
.ex-cc-open:active .ex-cc-cover { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ex-cc-open:hover .ex-cc-cover { transform: translateY(-2px); } }

/* Creators: big photos, name, a line of numbers, Follow */
.ex-cr-rail { gap: 14px; }
.ex-cr { flex: none; display: grid; justify-items: center; gap: 4px; width: 104px; text-align: center; }
.ex-cr-photo { padding: 0; border: 0; border-radius: 22px; background: none; cursor: pointer; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.ex-cr-photo .avatar.xl { width: 92px; height: 92px; border-radius: 22px; font-size: 1.6rem; }
.ex-cr-photo .avatar.xl img { border-radius: 22px; }
.ex-cr-photo:active { transform: scale(0.96); }
.ex-cr strong { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-cr strong .vtick { width: 14px; height: 14px; }
.ex-cr small { color: var(--text-muted); font-size: 0.74rem; }
.ex-cr .chip { margin-top: 4px; min-height: 32px; }

/* What are you interested in? */
.ex-interests { margin: 0 0 18px; padding: 18px; border-radius: 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); box-shadow: 0 0 0 1px var(--border); }
.ex-interests h3 { margin: 0; font-size: 1.12rem; }
.ex-interests p { margin: 4px 0 12px; color: var(--text-muted); font-size: 0.88rem; }
.ex-int-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-int { min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
.ex-int.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.ex-int.on::before { content: "✓ "; }
.ex-int-acts { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .ex-cc-cover, .ex-cr-photo, .ex-cat { transition: none; } }
.ex-cc-btn[data-action="ex-join"] { background: #fff; color: #111; border: 0; font-weight: 700; }
.ex-cc-btn[data-action="cm-open"] { background: rgba(0, 0, 0, 0.35); color: #fff; border: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* =====================================================================
   Groups: find, join and start groups (search, topics, your groups, trending, recommended, new)
   ===================================================================== */
.gx { max-width: 1100px; margin: 0 auto; }
.gx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gx-head .notes-title { margin: 0; }
.gx-head p { margin: 4px 0 0; }
.gx-search { margin: 0 0 12px; min-height: 48px; border-radius: 16px; }
.gx-cats { margin-bottom: 14px; }
.gx-create { margin-bottom: 8px; }
.gx-sec { margin-top: 26px; }
.gx-sec .ex-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.gx-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--input); color: var(--text-muted); font-size: 0.76rem; font-weight: 700; line-height: 22px; text-align: center; }
.gx-empty { margin: 22px 0; }
/* Your groups: compact tiles you scroll through */
.gx-mine-rail { gap: 12px; }
.gx-mine { flex: none; display: grid; justify-items: start; gap: 4px; width: 132px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gx-mine-tile { display: grid; place-items: center; width: 132px; height: 96px; border-radius: 18px; background: linear-gradient(140deg, var(--card, #c7d2fe), var(--deep, #6366f1)); font-size: 2.4rem; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.gx-mine strong { max-width: 100%; margin-top: 4px; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-mine small { color: var(--text-muted); font-size: 0.76rem; }
.gx-mine:active .gx-mine-tile { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .gx-mine:hover .gx-mine-tile { transform: translateY(-2px); } }
.gx-mine:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 18px; }
/* Group covers use the group's own colours */
.ex-cc[class*=" c-"] .ex-cc-cover { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--card, #c7d2fe) 85%, #fff 15%), transparent 60%), linear-gradient(140deg, var(--card, #c7d2fe), var(--deep, #6366f1)); }
.gx-lock { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 3px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.32); font-size: 0.8rem; }
.ex-cc-btn[data-action="cm-join"] { background: #fff; color: #111; border: 0; font-weight: 700; }
@media (max-width: 760px) {
    .gx-head .chip { flex: none; }
    .gx-mine, .gx-mine-tile { width: 116px; }
    .gx-mine-tile { height: 84px; }
}

/* =====================================================================
   Feed v3: each post a clean rounded card — header, photos (collage), caption, #tags, actions
   ===================================================================== */
body[data-view="feed"] .feed-v2 .feed-list .post.ig {
    margin: 0; padding: 14px 14px 10px; border: 0; border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-sm, 0 2px 3px -1px rgba(0, 0, 0, 0.1)), 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
}
body[data-view="feed"] .feed-v2 .feed-list .post.ig + .post.ig,
body[data-view="feed"] .feed-v2 .feed-list > * + .post.ig { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) {
    body[data-view="feed"] .feed-v2 .feed-list .post.ig:hover { box-shadow: var(--shadow, 0 6px 16px -10px rgba(0, 0, 0, 0.35)), 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent); }
}
body[data-view="feed"] .feed-v2 .post.ig .post-head { padding: 0 0 12px; }
body[data-view="feed"] .feed-v2 .post.ig .post-head .avatar.md { width: 44px; height: 44px; }
body[data-view="feed"] .feed-v2 .post.ig .post-who strong { font-size: 0.98rem; }
body[data-view="feed"] .feed-v2 .post.ig .post-media { margin: 0; border-radius: 16px; overflow: hidden; }
body[data-view="feed"] .feed-v2 .post.ig .post-caption.under-media { padding: 12px 2px 0; }
body[data-view="feed"] .feed-v2 .post.ig .post-caption.text-only { padding: 0 2px 4px; }
body[data-view="feed"] .feed-v2 .post.ig .post-text { font-size: 1rem; line-height: 1.55; }
body[data-view="feed"] .feed-v2 .post.ig .cap-title { display: block; margin-bottom: 4px; font-size: 1.04rem; }
.post-caption .read-more { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.post-tags { margin: 8px 0 0; font-size: 0.92rem; font-weight: 600; line-height: 1.6; }
.post-tags a, .post-tags .tag-link { color: var(--accent); text-decoration: none; margin-right: 6px; }
body[data-view="feed"] .feed-v2 .post-actions { padding: 10px 0 0; margin: 0 -6px; }
body[data-view="feed"] .feed-v2 .post.ig .comments { padding: 6px 2px 0; }
body[data-view="feed"] .feed-v2 .post.ig .post-when { padding: 0 2px; }
body[data-view="feed"] .feed-v2 .post.ig .repost-line { padding: 0 0 10px; }
@media (max-width: 760px) {
    body[data-view="feed"] .feed-v2 .feed-list .post.ig { padding: 12px 12px 8px; border-radius: 20px; }
    body[data-view="feed"] .feed-v2 .feed-list .post.ig + .post.ig,
    body[data-view="feed"] .feed-v2 .feed-list > * + .post.ig { margin-top: 12px; }
    body[data-view="feed"] .feed-v2 .post.ig .post-head { padding: 0 0 10px; }
    body[data-view="feed"] .feed-v2 .post.ig .post-media { margin: 0; border-radius: 14px; }
    body[data-view="feed"] .feed-v2 .post-actions { margin: 0 -4px; }
}

/* Collage: one large photo, the rest beside it; "+N" on the last tile */
.post-media.collage { display: grid; gap: 3px; aspect-ratio: 4 / 3; background: transparent; }
.post-media.collage .c-tile { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--input); cursor: zoom-in; overflow: hidden; aspect-ratio: auto; max-height: none; }
.post-media.collage .c-tile img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .post-media.collage .c-tile:hover img { transform: scale(1.03); } }
.post-media.collage .c-hide { display: none; }
.post-media.collage.n2 { grid-template-columns: 1fr 1fr; }
.post-media.collage.n3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; }
.post-media.collage.n3 .t0 { grid-row: span 2; }
.post-media.collage.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.post-media.collage.n5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media.collage.n5 .t0 { grid-row: span 2; }
.c-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.post-media.collage .c-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .post-media.collage .c-tile img { transition: none; } }
.post-caption .post-tags { padding: 0; border: 0; background: none; }
.post-caption .post-tags .hashtag { margin-right: 4px; }

/* =====================================================================
   Edit post sheet (bold / italic) and the composer's B / I buttons
   ===================================================================== */
dialog.edit-post { width: min(560px, 100vw); max-height: min(760px, 92dvh); padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent), 0 24px 48px -12px rgba(0, 0, 0, 0.35); }
dialog.edit-post::backdrop { background: rgba(0, 0, 0, 0.5); }
.ep-form { display: flex; flex-direction: column; max-height: inherit; }
.ep-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ep-head h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.ep-head .ep-cancel { justify-self: start; }
.ep-head .ep-save { justify-self: end; min-width: 76px; }
.ep-title { flex: none; margin: 14px 16px 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 1.08rem; font-weight: 700; outline: none; }
.ep-body { flex: 1 1 auto; min-height: 160px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; font-size: 1rem; line-height: 1.55; outline: none; word-break: break-word; }
.ep-body:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.ep-tools { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.ep-fmt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background 140ms ease, color 140ms ease, transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.ep-fmt b, .ep-fmt i { font-size: 1.05rem; font-family: Georgia, 'Times New Roman', serif; }
.ep-fmt[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.ep-fmt:active { transform: scale(0.96); }
.ep-fmt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ep-hint { margin-left: auto; font-size: 0.78rem; text-align: right; }
@media (max-width: 760px) {
    dialog.edit-post { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 24px 24px 0 0; animation: ep-up 320ms cubic-bezier(0.32, 0.72, 0, 1); }
    .ep-hint { display: none; }
    .edit-post .ep-body, .edit-post .ep-title { font-size: max(16px, 1em) !important; }
}
@keyframes ep-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.edit-post { animation: none; } }

.post-edited { color: var(--text-muted); }
/* Composer: B and I next to the tools */
.pc-fmt { display: inline-flex; gap: 2px; }
.pc-fmt .pc-tool { min-width: 36px; justify-content: center; padding-inline: 8px; }
.pc-fmt .pc-tool b, .pc-fmt .pc-tool i { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1; }

/* =====================================================================
   Lighter lines: on the Feed and profiles, borders recede (content first, structure second, borders last)
   ===================================================================== */
body[data-view="feed"], body[data-view="profile"] {
    --line-soft: color-mix(in srgb, var(--text) 6%, transparent);
    --line-faint: color-mix(in srgb, var(--text) 4%, transparent);
    --border: var(--line-soft);
    --border-strong: color-mix(in srgb, var(--text) 10%, transparent);
}
/* Post cards: one hairline, a whisper of lift, nothing else */
body[data-view="feed"] .feed-v2 .feed-list .post.ig,
body[data-view="profile"] .post.ig {
    box-shadow: 0 0 0 1px var(--line-soft), 0 1px 2px rgba(20, 24, 40, 0.03);
}
@media (hover: hover) and (pointer: fine) {
    body[data-view="feed"] .feed-v2 .feed-list .post.ig:hover { box-shadow: 0 0 0 1px var(--line-soft), 0 4px 14px -8px rgba(20, 24, 40, 0.12); }
}
:root[data-theme="dark"] body[data-view="feed"] .feed-v2 .feed-list .post.ig,
:root[data-theme="dark"] body[data-view="profile"] .post.ig { box-shadow: 0 0 0 1px var(--line-soft); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body[data-view="feed"] .feed-v2 .feed-list .post.ig,
    :root:not([data-theme="light"]) body[data-view="profile"] .post.ig { box-shadow: 0 0 0 1px var(--line-soft); }
}
/* Photos: no frame of their own — the image is the edge */
body[data-view="feed"] .post-media, body[data-view="profile"] .post-media { border: 0; box-shadow: none; outline: 0; }
/* Comment box, search and composer: filled, not outlined */
body[data-view="feed"] .comment-form, body[data-view="profile"] .comment-form { border-color: transparent; background: var(--input); box-shadow: none; }
body[data-view="feed"] .comment-form:focus-within, body[data-view="profile"] .comment-form:focus-within { border-color: var(--line-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
body[data-view="feed"] .feed-search, body[data-view="feed"] .search { border-color: transparent; box-shadow: none; }
body[data-view="feed"] .post-composer { box-shadow: 0 0 0 1px var(--line-soft); border-color: transparent; }
body[data-view="feed"] .post-composer textarea { border-color: transparent; }
/* Buttons and chips: hairlines only */
body[data-view="feed"] .chip, body[data-view="profile"] .chip,
body[data-view="feed"] .ghost-btn, body[data-view="profile"] .ghost-btn,
body[data-view="feed"] .icon-btn.outline, body[data-view="profile"] .icon-btn.outline { border-color: var(--line-soft); }
/* Comment threads: quiet separators */
body[data-view="feed"] .comments, body[data-view="feed"] .comment, body[data-view="profile"] .comment { border-color: var(--line-faint); }
/* Sheets and modals opened from the Feed or a profile: soft edge, softer shadow */
body[data-view="feed"] dialog, body[data-view="profile"] dialog,
body[data-view="feed"] .popover, body[data-view="profile"] .popover { border-color: var(--line-soft); }
body[data-view="feed"] .sheet-dialog, body[data-view="profile"] .sheet-dialog, dialog.edit-post {
    box-shadow: 0 0 0 1px var(--line-soft), 0 -8px 32px -12px rgba(0, 0, 0, 0.18);
}
dialog.edit-post .ep-head, dialog.edit-post .ep-tools { border-color: var(--line-faint); }
/* Hashtag line sits flush with the caption */
.post.ig .post-caption .post-tags { padding: 0; }

/* =====================================================================
   Profile tabs: flush, fixed under the top bar, no gap, no bounce
   ===================================================================== */
.pf-tabs {
    /* Solid pill (no see-through blur), and a band of page colour around it so nothing shows through the
       little gap above or beside it while it's stuck. The band is a shadow, so it never widens the page. */
    background: color-mix(in srgb, var(--text) 5%, var(--bg));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 100vmax var(--bg);
    clip-path: inset(-12px -16px -6px -16px);
    gap: 2px;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}
.pf-tab {
    flex: 1 1 0; min-width: 0; padding: 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: clamp(0.78rem, 3.5vw, 0.92rem);
    touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.pf-tab[aria-selected="true"] { box-shadow: 0 1px 2px rgba(20, 24, 40, 0.08), 0 2px 6px -2px rgba(20, 24, 40, 0.1); }
.pf-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Switching to a short tab never pulls the page up under the bar, so the bar stays put */
.pf-body { min-height: calc(100dvh - var(--topbar-h, 0px) - 72px); }
/* Comment box always fits its card (it was sizing to its contents and poking out on narrow phones) */
.comments .comment-form { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.comments .comment-form input { width: 0; }
/* Desktop: the page itself scrolls, so the main column must not become a scroll box of its own
   (overflow-x: hidden did that, and the top bar, feed tabs and profile tabs then scrolled away instead of sticking) */
@media (min-width: 761px) {
    body, .main-col { overflow-x: clip; }
    .pf-tabs { box-shadow: 0 0 0 100vmax var(--panel); background: color-mix(in srgb, var(--text) 5%, var(--panel)); }
}
/* =====================================================================
   No fog at the top (or bottom): bars are solid, not frosted glass that smears the content behind them
   ===================================================================== */
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.feed-bar { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 760px) {
    .tabbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .feed-bar { background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); }
    .topbar-dock .feed-bar { background: none; box-shadow: none; }
}
/* =====================================================================
   One action bar: Like · Comment · Reshare · Share. Cards show icons + counts; the post page adds the words.
   ===================================================================== */
.post.ig .post-actions .act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.post-actions .reshare-btn[aria-pressed="true"] { color: #16a34a; }
.post-actions .act { touch-action: manipulation; }
/* Post page: the bar sits right under the post, before the comments */
.pv-actbar { margin: 12px -6px 4px; padding: 4px 0 2px; border-top: 1px solid var(--line-soft, var(--border)); border-bottom: 1px solid var(--line-soft, var(--border)); }
.pv-actbar .post-actions { display: flex; align-items: center; gap: 2px; padding: 0; flex-wrap: nowrap; }
.pv-actbar .post-actions .act { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; gap: 6px; padding: 0 4px; white-space: nowrap; }
.pv-actbar .post-actions .save-btn { flex: none; width: 44px; margin-left: 0; }
.pv-actbar .act-label { font-size: 0.86rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pv-actbar .act-count:empty { display: none; }
.pv-actbar .pv-stats { padding: 0 6px 6px; }
.pv-actbar .pv-stats:empty { display: none; }
@media (max-width: 360px) { .pv-actbar .act-label { font-size: 0.78rem; } .pv-actbar .post-actions .act { gap: 4px; } }
/* The docked composer is solid (no frosted haze) */
.pv-foot { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top-color: var(--line-soft, var(--border)); }
.pv-actbar { border-bottom: 0; }
.pv-actbar .post-actions { justify-content: space-between; }
.pv-actbar .post-actions .act { flex: 0 1 auto; padding: 0 8px; }
.pv-actbar .post-actions .save-btn { width: 40px; padding: 0; }
@media (max-width: 360px) { .pv-actbar .post-actions .act { padding: 0 5px; } }
.pv-actbar .post-actions .act { min-width: 44px; }
.pv-actbar .act-label { overflow: visible; }
@media (max-width: 460px) {
    .pv-actbar .post-actions .act:not(.like-btn) .act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* =====================================================================
   Note titles wrap onto as many lines as they need — never cut off, never scrolling sideways
   ===================================================================== */
textarea.editor-title {
    display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
    resize: none; overflow: hidden; overflow-wrap: anywhere; word-break: normal; white-space: pre-wrap;
    font-family: inherit; color: var(--text); line-height: 1.25;
    border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent;
    -webkit-appearance: none; appearance: none;
}
.mcard h3, .masonry .mcard h3 { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
.cap-title, .nsc-title, .pn-title, .pp-title { overflow-wrap: anywhere; white-space: normal; }

/* =====================================================================
   Chess & Ludo (boardgames.js): the game window, both boards, the chat card
   ===================================================================== */
.gm.bg { width: min(560px, 100%); }
.bg-card { position: relative; }
.bg-players { flex: none; display: flex; gap: 8px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
.bg-players::-webkit-scrollbar { display: none; }
.bg-p { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--input); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 160ms ease, background 160ms ease; }
.bg-p.turn { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.bg-p-av { position: relative; flex: none; }
.bg-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 2px var(--input); }
.bg-dot.on { background: #22c55e; }
.bg-p-text { display: grid; min-width: 0; line-height: 1.2; }
.bg-p-text strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-p-text small { font-size: 0.72rem; color: var(--text-muted); }
.bg-p.side-w .bg-p-text small::before { content: "○ "; }
.bg-p.side-b .bg-p-text small::before { content: "● "; }
.bg-cpu { display: inline-grid; place-items: center; background: linear-gradient(140deg, #818cf8, #6366f1); color: #fff; }
.bg-cpu .i { width: 16px; height: 16px; }
.bg-status { flex: none; margin: 8px 14px 0; min-height: 1.4em; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-align: center; }
.bg-status.mine { color: var(--accent); }
.bg-stage { flex: none; align-self: center; width: min(calc(100% - 24px), calc(var(--vvh, 100dvh) - 300px), 520px); min-width: 240px; margin: 10px 12px 0; aspect-ratio: 1; }
.bg-under { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 601px) { .bg-stage { width: min(calc(100% - 24px), calc(min(94dvh, 860px) - 300px), 520px); } }

/* Chess */
.cb { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 8px 24px -12px rgba(0, 0, 0, 0.35); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cb-sq { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; background: #eeeed2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cb-sq.dk { background: #769656; }
.cb-sq.last { background: #f6f68b; }
.cb-sq.dk.last { background: #bbca44; }
.cb-sq.sel { background: #f7ec74; }
.cb-sq.dk.sel { background: #dac34b; }
.cb-sq.chk { background: radial-gradient(circle, #ff4d4d 0%, #e53935 45%, transparent 75%), #eeeed2; }
.cb-sq.dk.chk { background: radial-gradient(circle, #ff4d4d 0%, #e53935 45%, transparent 75%), #769656; }
.cb-sq.to::after { content: ""; width: 30%; height: 30%; border-radius: 50%; background: rgba(0, 0, 0, 0.18); }
.cb-sq.hit::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.2); }
.cb-sq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; z-index: 1; }
.cb-pc { position: relative; z-index: 1; font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols 2', 'Apple Symbols', serif; font-size: min(9vw, 46px); line-height: 1; pointer-events: none; }
.cb-pc.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 0 2px 3px rgba(0, 0, 0, 0.35); }
.cb-pc.b { color: #1f1f1f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 3px rgba(0, 0, 0, 0.3); }
.cb-f, .cb-r { position: absolute; font-style: normal; font-size: 0.6rem; font-weight: 700; color: rgba(0, 0, 0, 0.45); pointer-events: none; }
.cb-f { right: 3px; bottom: 1px; }
.cb-r { left: 3px; top: 1px; }
.cb-moves { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.cb-moves b { color: var(--text-faint); font-weight: 600; }
.cb-promo { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.cb-promo button { width: 56px; height: 56px; border: 0; border-radius: 14px; background: #769656; cursor: pointer; }
.cb-promo .cb-pc { font-size: 36px; }

/* Ludo */
.lb { position: relative; display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr); width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 8px 24px -12px rgba(0, 0, 0, 0.35); user-select: none; -webkit-user-select: none; }
.lc-red { --lc: #e53935; --lc-soft: #fde2e1; }
.lc-green { --lc: #2e9e4f; --lc-soft: #ddf3e3; }
.lc-yellow { --lc: #f2b705; --lc-soft: #fdf2c9; }
.lc-blue { --lc: #1e6fd9; --lc-soft: #dce9fb; }
.lb-c { display: grid; place-items: center; font-style: normal; font-size: min(2.6vw, 13px); color: color-mix(in srgb, var(--text) 35%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--text) 16%, transparent); }
.lb-c.hm, .lb-c.st { background: var(--lc); }
.lb-yard { position: relative; background: var(--lc); display: grid; place-items: center; }
.lb-yard b { width: 72%; height: 72%; border-radius: 18%; background: #fff; }
.lb-yard.off { filter: saturate(0.25) opacity(0.55); }
.lb-center { background: conic-gradient(from 45deg, #2e9e4f 0 25%, #f2b705 0 50%, #1e6fd9 0 75%, #e53935 0 100%); }
.lb-toks { position: absolute; inset: 0; pointer-events: none; }
.lb-tok { position: absolute; width: calc(100% / 15 * 0.78); aspect-ratio: 1; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc) 55%, #fff), var(--lc) 60%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); transform: translate(calc(-50% + var(--n) * 4px), calc(-50% - var(--n) * 4px)); transition: top 260ms cubic-bezier(0.23, 1, 0.32, 1), left 260ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.lb-tok.can { pointer-events: auto; cursor: pointer; z-index: 2; animation: lb-glow 1s ease-in-out infinite alternate; }
.lb-tok.can::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; } /* a bigger target for fingers */
.lb-tok.moved { z-index: 1; }
.lb-tok:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes lb-glow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 60%, transparent), 0 2px 4px rgba(0, 0, 0, 0.35); } to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lc) 25%, transparent), 0 2px 4px rgba(0, 0, 0, 0.35); } }
.lu-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lu-roll { padding: 6px; border: 0; border-radius: 18px; background: var(--lc-soft); cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.lu-roll:not(:disabled):active { transform: scale(0.94); }
.lu-roll:disabled { cursor: default; opacity: 0.85; }
.lu-roll:not(:disabled) { box-shadow: 0 0 0 3px var(--lc); }
.die { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 54px; height: 54px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.die i { border-radius: 50%; }
.die i.on { background: #1f2937; }
.die.rolling { animation: die-roll 520ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes die-roll { 0% { transform: rotate(0) scale(0.9); } 50% { transform: rotate(200deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
.lu-hint { margin: 0; min-width: 9em; color: var(--text-muted); font-size: 0.88rem; font-weight: 600; }
:root[data-theme="dark"] .lb-c.tr { background: #f5f5f4; color: #9ca3af; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-c.tr { background: #f5f5f4; color: #9ca3af; } }
:root[data-theme="dark"] .lb { background: #f5f5f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb { background: #f5f5f4; } }

/* Win */
.bg-win { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(9, 9, 11, 0.45); overflow: hidden; animation: fade-in 180ms ease-out; }
.bg-win-card { display: grid; justify-items: center; gap: 10px; width: min(320px, 100%); padding: 22px 18px 18px; border-radius: 22px; background: var(--surface); text-align: center; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.45); }
.bg-win-art { font-size: 2.8rem; line-height: 1; }
.bg-win-card strong { font-size: 1.1rem; }
.bg-win-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.bg-confetti { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: bg-fall 2.4s cubic-bezier(0.23, 1, 0.32, 1) forwards; pointer-events: none; }
@keyframes bg-fall { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .lb-tok { transition: none; } .lb-tok.can { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc) 40%, transparent); } .die.rolling { animation: none; } }

/* Picking who to play */
.bg-cpu-row { display: grid; gap: 8px; width: 100%; }
.bg-cpu-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.bg-cpu-btn:active { transform: scale(0.98); }
.bg-cpu-btn > .i, .bg-cpu-n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: linear-gradient(140deg, #818cf8, #6366f1); color: #fff; font-weight: 800; }
.bg-cpu-n { padding: 0; }
.bg-cpu-btn span { display: grid; }
.bg-cpu-btn small { color: var(--text-muted); font-size: 0.8rem; }

/* The card in chat */
.bgc { display: flex; align-items: center; gap: 12px; min-width: 230px; max-width: 300px; padding: 12px; border-radius: 18px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.bgc-ludo { background: linear-gradient(140deg, #fde2e1, #fdf2c9 45%, #ddf3e3 75%, #dce9fb); color: #1f2937; }
.bgc-art { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); font-size: 1.7rem; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
.bgc-ludo .bgc-art { background: #fff; }
.bgc-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.bgc-text small { font-size: 0.72rem; font-weight: 700; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.bgc-text strong { font-size: 1rem; }
.bgc-text span { font-size: 0.8rem; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgc-play { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.bgc-play:active { transform: scale(0.96); }

/* Playnote */
.bg-new .bg-art { font-size: 1.5rem; }
/* Board fixes: equal rows, visible track lines, coloured start squares, centre colours facing each home lane */
.cb { grid-template-rows: repeat(8, 1fr); }
.cb-sq { min-height: 0; }
.lb-c { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.16); color: rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .lb-c.tr.st { background: var(--lc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lb-c.tr.st { background: var(--lc); } }
.lb-center { background: conic-gradient(from -45deg, #2e9e4f 0 25%, #f2b705 0 50%, #1e6fd9 0 75%, #e53935 0 100%); }
/* Four players: avatar over name so everyone fits */
.bg-ludo .bg-players { gap: 6px; }
.bg-ludo .bg-p { flex-direction: column; gap: 4px; padding: 6px 4px; text-align: center; }
.bg-ludo .bg-p-text { justify-items: center; }
.bg-ludo .bg-p-text strong { max-width: 100%; font-size: 0.78rem; }
.bg-ludo .bg-p-text small { font-size: 0.68rem; color: var(--lc); font-weight: 700; }
.bg-ludo .bg-p.turn { box-shadow: inset 0 0 0 2px var(--lc); background: color-mix(in srgb, var(--lc) 12%, var(--surface)); }

/* =====================================================================
   Ludo: the Cordial mark in the centre, the game chat, the how-to-play video
   ===================================================================== */
.lb-center { position: relative; display: grid; place-items: center; }
.lb-brand { display: grid; justify-items: center; align-content: center; gap: 2px; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.lb-brand-mark { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 28%; background: #4f46e5; color: #fff; }
.lb-brand-mark .i { width: 62%; height: 62%; }
.lb-brand b { font-size: clamp(7px, 2.1vw, 11px); font-weight: 800; letter-spacing: 0.04em; color: #4f46e5; line-height: 1; }

/* Chat inside a game */
.bg-chat-btn { position: relative; }
.bg-unread { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.bg-chat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; height: min(62%, 460px); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -12px 32px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); animation: bgc-up 260ms cubic-bezier(0.32, 0.72, 0, 1); }
.bg-chat[hidden] { display: none; }
@keyframes bgc-up { from { transform: translateY(100%); } to { transform: none; } }
.bg-chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 4px 16px; }
.bg-chat-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 0.98rem; }
.bg-chat-head strong .i { width: 18px; height: 18px; color: var(--accent); }
.bg-chat-list { flex: 1; min-height: 0; margin: 0; padding: 6px 14px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 3px; }
.bg-msg { display: grid; justify-items: start; max-width: 82%; }
.bg-msg.mine { align-self: flex-end; justify-items: end; }
.bg-msg:not(.cont) { margin-top: 6px; }
.bg-msg-who { margin: 0 0 2px 10px; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); }
.bg-msg-text { padding: 7px 12px; border-radius: 18px; background: var(--input); font-size: 0.92rem; line-height: 1.35; overflow-wrap: anywhere; }
.bg-msg.mine .bg-msg-text { background: var(--accent); color: var(--on-accent, #fff); }
.bg-msg-text.big { padding: 0 2px; background: none !important; font-size: 2rem; line-height: 1.1; }
.bg-chat-empty { margin: auto; max-width: 260px; color: var(--text-muted); font-size: 0.86rem; text-align: center; }
.bg-chat-emo { flex: none; display: flex; justify-content: space-between; gap: 2px; padding: 4px 10px; }
.bg-chat-emo button { flex: 1; min-height: 40px; border: 0; border-radius: 12px; background: none; font-size: 1.3rem; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.bg-chat-emo button:active { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) { .bg-chat-emo button:hover { background: var(--input); } }
.bg-chat-form { flex: none; display: flex; gap: 8px; padding: 6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
.bg-chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--input); color: var(--text); font: inherit; outline: none; }
.bg-chat-form input:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.bg-chat-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; }
.bg-chat-send .i { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .bg-chat { animation: none; } }

/* "How to play" link under the Ludo board */
.lu-ctl { flex-wrap: wrap; }
.lu-howto { order: 3; flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; margin-top: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.lu-howto .i { width: 16px; height: 16px; }

/* The how-to-play video */
.ht-bar { flex: none; display: flex; gap: 4px; padding: 10px 14px 0; }
.ht-seg { flex: 1; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer; }
.ht-seg::before { content: ""; display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.ht-seg { position: relative; }
.ht-seg i { position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.ht-stage { position: relative; }
.ht-dice { position: absolute; right: -4px; bottom: -4px; z-index: 3; transform: scale(0.82); transform-origin: bottom right; pointer-events: none; }
.ht-ring { position: absolute; z-index: 2; width: calc(100% / 15 * 1.5); aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.85), 0 0 18px rgba(79, 70, 229, 0.6); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.ht-ring.big { width: calc(100% / 15 * 5.4); }
.ht-ring.go { animation: ht-ring 1.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes ht-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.ht-pop { position: absolute; left: 50%; top: 9%; z-index: 3; max-width: 86%; padding: 8px 14px; border-radius: 999px; background: rgba(17, 17, 27, 0.86); color: #fff; font-size: 0.88rem; font-weight: 700; text-align: center; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.ht-pop.go { animation: ht-pop 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ht-pop { from { opacity: 0; transform: translate(-50%, 6px) scale(0.96); } }
.ht-cap { flex: none; display: grid; gap: 2px; padding: 12px 18px 0; min-height: 96px; }
.ht-n { color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ht-title { font-size: 1.12rem; }
.ht-say { margin: 2px 0 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
.ht-ctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ht-play { display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.ht-play:active { transform: scale(0.94); }
.ht-play .i { width: 26px; height: 26px; }
.ht-end { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 14px; background: rgba(17, 17, 27, 0.72); color: #fff; text-align: center; animation: fade-in 200ms ease-out; }
.ht-end strong { font-size: 1.4rem; }
.ht-end div { display: flex; gap: 8px; margin-top: 8px; }
.ht-end .ghost-btn { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.ht-open > .i { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: linear-gradient(140deg, #f43f5e, #f59e0b); color: #fff; }
.howto.calm .lb-tok { transition: none; }
.howto.calm .ht-ring.go, .howto.calm .ht-pop.go { animation: none; opacity: 1; }
/* Video: the dice sits beside the caption, the label on the board's top edge (never over a token) */
.ht-cap { grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.ht-cap-text { display: grid; gap: 2px; min-width: 0; }
.ht-dice { position: static; transform: none; margin-top: 4px; }
.ht-dice .die { width: 48px; height: 48px; padding: 7px; }
.ht-pop { top: 0; transform: translate(-50%, -55%); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45); }
@keyframes ht-pop { from { opacity: 0; transform: translate(-50%, -40%) scale(0.96); } }
.ht-cap-text .ht-pop { position: static; justify-self: start; max-width: 100%; margin: 4px 0 2px; padding: 5px 12px; transform: none; white-space: normal; font-size: 0.84rem; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); box-shadow: none; }
.ht-cap-text .ht-pop.go { animation: ht-chip 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ht-chip { from { opacity: 0; transform: translateY(4px) scale(0.97); } }
.ht-cap { min-height: 124px; }

/* =====================================================================
   Penalty Shootout (boardgames.js): a 3D pitch in CSS perspective
   ===================================================================== */
.bg-penalty .bg-stage { aspect-ratio: auto; display: grid; gap: 8px; }
.pk-board { display: grid; gap: 4px; padding: 8px 10px; border-radius: 14px; background: #0b1220; color: #e5e7eb; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.pk-row { display: grid; grid-template-columns: 74px 1fr 26px; align-items: center; gap: 8px; font-size: 0.8rem; }
.pk-row.up .pk-name::after { content: " ⚽"; }
.pk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pk-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-dots i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-style: normal; font-size: 0.66rem; font-weight: 900; }
.pk-dots i.goal { background: #22c55e; color: #052e16; }
.pk-dots i.save, .pk-dots i.miss { background: #ef4444; color: #fff; }
.pk-row b { font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }

.pk { position: relative; width: 100%; aspect-ratio: 4 / 3.3; border-radius: 18px; overflow: hidden; perspective: 640px; perspective-origin: 50% 22%;
    background: linear-gradient(#0f172a 0%, #1e293b 30%, #14532d 30.2%); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.6); user-select: none; -webkit-user-select: none; }
/* The crowd in the stands */
.pk-stands { position: absolute; left: 0; right: 0; top: 0; height: 31%; background:
    radial-gradient(circle at 10% 60%, #f43f5e 0 1.5px, transparent 2px) 0 0 / 11px 9px,
    radial-gradient(circle at 60% 30%, #fbbf24 0 1.5px, transparent 2px) 0 0 / 13px 8px,
    radial-gradient(circle at 40% 70%, #60a5fa 0 1.5px, transparent 2px) 0 0 / 9px 10px,
    linear-gradient(#111827, #1f2937); opacity: 0.9; }
.pk-stands i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #4f46e5, #a855f7, #ec4899, #4f46e5); box-shadow: 0 0 12px rgba(168, 85, 247, 0.6); }
/* The pitch: a plane tipped away from you */
.pk-world { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.pk-grass { position: absolute; left: -40%; right: -40%; top: 30%; height: 150%; transform-origin: 50% 0; transform: rotateX(62deg);
    background: repeating-linear-gradient(180deg, #15803d 0 40px, #16a34a 40px 80px); box-shadow: inset 0 40px 60px -20px rgba(0, 0, 0, 0.45); }
.pk-grass i { position: absolute; border: 3px solid rgba(255, 255, 255, 0.85); }
.pk-box6 { left: 38%; right: 38%; top: 0; height: 9%; border-top: 0 !important; }
.pk-box18 { left: 24%; right: 24%; top: 0; height: 26%; border-top: 0 !important; }
.pk-arc { left: 44%; right: 44%; top: 24%; height: 8%; border-radius: 0 0 50% 50% / 0 0 100% 100%; border-top: 0 !important; }
.pk-dot { left: 50%; top: 18%; width: 8px; height: 8px; margin-left: -4px; border: 0 !important; border-radius: 50%; background: #fff; }
/* The goal: frame in front, nets going back */
.pk-goal { position: absolute; left: 15%; right: 15%; top: 8%; height: 25%; transform-style: preserve-3d; }
.pk-net { position: absolute; pointer-events: none; background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 7px), rgba(255, 255, 255, 0.04); }
.pk-net.back { inset: 6% 4% 0 4%; transform: translateZ(-40px); }
.pk-net.side { top: 0; bottom: 0; width: 40px; transform-origin: 0 50%; }
.pk-net.side.l { left: 0; transform: rotateY(90deg); }
.pk-net.side.r { right: -40px; transform-origin: 0 50%; transform: translateX(-40px) rotateY(90deg); left: auto; }
.pk-net.roof { left: 0; right: 0; top: 0; height: 40px; transform-origin: 50% 0; transform: rotateX(-90deg); }
.pk.scored .pk-net.back { animation: pk-ripple 600ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes pk-ripple { 40% { transform: translateZ(-58px) scale(1.03); } }
.pk-post, .pk-bar { position: absolute; background: linear-gradient(90deg, #d1d5db, #fff 40%, #cbd5e1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); z-index: 2; pointer-events: none; }
.pk-post { top: 0; bottom: 0; width: 2.2%; }
.pk-post.l { left: -1.1%; }
.pk-post.r { right: -1.1%; }
.pk-bar { left: -1.1%; right: -1.1%; top: -2%; height: 7%; background: linear-gradient(#fff, #d1d5db); }
/* The keeper */
.pk-keeper { position: absolute; left: 50%; bottom: 0; z-index: 3; width: 17%; height: 92%; transform: translateX(-50%); transform-origin: 50% 85%; pointer-events: none; }
.pk-keeper i { position: absolute; display: block; }
.pk-head { left: 33%; top: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a16207, #713f12 70%); }
.pk-body { left: 18%; top: 24%; width: 64%; height: 42%; border-radius: 30% 30% 18% 18%; background: linear-gradient(90deg, #f59e0b, #fbbf24 45%, #d97706); box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.18); }
.pk-legs { left: 26%; top: 64%; width: 48%; height: 36%; border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #111827 0 44%, transparent 44% 56%, #111827 56%); }
.pk-arm { top: 26%; width: 22%; height: 40%; border-radius: 8px; background: linear-gradient(#fbbf24, #d97706); transform-origin: 50% 8%; transition: transform 300ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.pk-arm.l { left: 0; transform: rotate(18deg); }
.pk-arm.r { right: 0; transform: rotate(-18deg); }
.pk-arm b { position: absolute; left: -10%; bottom: -14%; width: 120%; aspect-ratio: 1; border-radius: 40%; background: radial-gradient(circle at 35% 30%, #fff, #22d3ee 45%, #0891b2); }
.pk-keeper.dive .pk-arm.l { transform: rotate(150deg); }
.pk-keeper.dive .pk-arm.r { transform: rotate(-150deg); }
.pk-keeper::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 10%; border-radius: 50%; background: rgba(0, 0, 0, 0.35); filter: blur(2px); }
/* Where to shoot / dive */
.pk-zones { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.pk-z { min-width: 0; margin: 0; padding: 0; border: 0; background: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.pk.picking .pk-z { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.pk.picking.shoot .pk-z:hover, .pk.picking.shoot .pk-z:focus-visible { background: rgba(250, 204, 21, 0.28); }
.pk.picking.save .pk-z:hover, .pk.picking.save .pk-z:focus-visible { background: rgba(34, 211, 238, 0.28); }
.pk.picking .pk-z:active { background: rgba(255, 255, 255, 0.3); }
.pk-z:focus-visible { outline: 2px solid #fde047; outline-offset: -2px; }
.pk-target { position: absolute; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 3px solid #fde047; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 14px #fde047; pointer-events: none; animation: pk-pulse 900ms ease-in-out infinite alternate; }
@keyframes pk-pulse { to { transform: scale(1.25); } }
/* The ball and its shadow */
.pk-ball { position: absolute; left: 50%; top: 84%; z-index: 6; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 34% 30%, #fff 0 18%, #e5e7eb 45%, #9ca3af 80%, #6b7280); box-shadow: inset -4px -6px 10px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.3); overflow: hidden; }
.pk-ball i { position: absolute; inset: 0; border-radius: 50%; background:
    radial-gradient(circle at 50% 50%, #1f2937 0 16%, transparent 17%),
    radial-gradient(circle at 18% 22%, #1f2937 0 11%, transparent 12%),
    radial-gradient(circle at 82% 26%, #1f2937 0 11%, transparent 12%),
    radial-gradient(circle at 26% 84%, #1f2937 0 11%, transparent 12%),
    radial-gradient(circle at 78% 82%, #1f2937 0 11%, transparent 12%); opacity: 0.85; }
.pk-shadow { position: absolute; left: 50%; top: 89%; z-index: 5; width: 12%; height: 3%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.5); filter: blur(2px); pointer-events: none; }
/* GOAL! */
.pk-flash { position: absolute; left: 50%; top: 52%; z-index: 8; transform: translate(-50%, -50%) scale(0.6); padding: 6px 18px; border-radius: 14px; font-size: 2rem; font-weight: 900; letter-spacing: 0.04em; color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.pk-flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease; }
.pk-flash.goal { background: linear-gradient(135deg, #16a34a, #22c55e); }
.pk-flash.save { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.pk-flash.miss { background: linear-gradient(135deg, #b91c1c, #ef4444); }
/* The power meter */
.pk-ctl { display: grid; justify-items: center; gap: 10px; }
.pk-meter { position: relative; width: min(320px, 100%); height: 16px; border-radius: 8px; background: linear-gradient(90deg, #ef4444 0 25%, #facc15 25% 43%, #22c55e 43% 57%, #facc15 57% 75%, #ef4444 75%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.pk-needle { position: absolute; top: -5px; left: 0; width: 4px; height: 26px; margin-left: -2px; border-radius: 2px; background: #111827; box-shadow: 0 0 0 2px #fff; animation: pk-swing 1400ms linear infinite; }
@keyframes pk-swing { 0% { left: 0; } 50% { left: 100%; } 100% { left: 0; } }
.pk-go { min-width: 160px; min-height: 48px; font-size: 1.05rem; }
.pk-tile .bg-art { background: linear-gradient(140deg, #15803d, #22c55e) !important; }
@media (prefers-reduced-motion: reduce) { .pk-target, .pk.scored .pk-net.back { animation: none; } .pk-flash.show { transition: none; } }
/* Bigger goal mouth: easier to aim and dive on a phone */
.pk-goal { left: 11%; right: 11%; top: 6%; height: 30%; }
.pk-stands { height: 31%; }

/* =====================================================================
   Calls: someone's shared screen, expanded — the screen fills the display, people in a strip, controls float
   ===================================================================== */
.call-expand { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px;
    background: rgba(17, 19, 24, 0.72); color: #fff; font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.call-expand .i { width: 18px; height: 18px; }
.call-expand:active { transform: scale(0.95); }
.call-expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .call-expand:hover { background: rgba(17, 19, 24, 0.9); } }

.call-panel.share-full { position: fixed; inset: 0; z-index: 2000; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border-radius: 0; background: #000; animation: none; display: flex; }
.call-panel.share-full .call-body { position: relative; flex: 1; min-height: 0; padding: 0; }
/* The screen itself: the whole display, never stretched or cropped */
.call-panel.share-full .call-stage { position: absolute; inset: 0; display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 8px; max-height: none; height: auto; margin: 0; padding: 0 12px calc(108px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: #000; }
.call-panel.share-full .call-stage::-webkit-scrollbar { display: none; }
.call-panel.share-full .call-tile.big { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 0; background: #000; }
.call-panel.share-full .call-tile.big .call-video-slot video { width: 100%; height: 100%; object-fit: contain; }
.call-panel.share-full .call-tile.big .call-tag { left: 12px; bottom: auto; top: calc(64px + env(safe-area-inset-top, 0px)); }
.call-panel.share-full .call-expand { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
/* Everyone else: a small strip in the corner */
.call-panel.share-full .call-tile:not(.big) { position: relative; z-index: 1; flex: none; width: 92px; height: 122px; aspect-ratio: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16); transition: opacity 240ms ease, transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.call-panel.share-full .call-tile:not(.big) .call-ring .avatar.xl { width: 52px; height: 52px; font-size: 1.1rem; }
.call-panel.share-full .call-tile:not(.big) .call-tag { font-size: 0.68rem; }
/* Header and controls float over the screen */
.call-panel.share-full .call-head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; margin: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 120px 18px 12px; background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); }
.call-panel.share-full .call-controls { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 4; width: max-content; max-width: calc(100% - 24px); margin: 0; padding: 8px 10px; transform: translateX(-50%); border-radius: 22px; background: rgba(17, 19, 24, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); overflow-x: auto; scrollbar-width: none; }
.call-panel.share-full .call-people { position: absolute; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 5; width: min(320px, calc(100% - 24px)); max-height: 60%; overflow: auto; border-radius: 18px; background: #111318; }
.call-panel.share-full :is(.call-share-banner, .call-speaking, .call-held, .call-rec-banner, .call-share-controls, .call-reactions) { display: none; }
.call-panel.share-full :is(.call-head, .call-controls, .call-expand, .call-tile:not(.big)) { transition: opacity 260ms ease, transform 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.call-panel.share-full.ui-hide :is(.call-head, .call-controls, .call-expand) { opacity: 0; pointer-events: none; }
.call-panel.share-full.ui-hide .call-controls { transform: translate(-50%, 12px); }
.call-panel.share-full.ui-hide .call-tile:not(.big) { opacity: 0.85; transform: translateY(80px); }
.call-panel.share-full.ui-hide .call-stage { cursor: none; }
/* Landscape phones: the strip goes up the side so the screen keeps its height */
@media (orientation: landscape) and (max-height: 520px) {
    .call-panel.share-full .call-stage { flex-direction: column; align-items: flex-end; justify-content: flex-start; padding: calc(60px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 80px 0; overflow-x: hidden; overflow-y: auto; }
    .call-panel.share-full .call-tile:not(.big) { width: 84px; height: 64px; }
    .call-panel.share-full.ui-hide .call-tile:not(.big) { transform: translateX(110px); }
}
@media (prefers-reduced-motion: reduce) { .call-panel.share-full :is(.call-head, .call-controls, .call-expand, .call-tile:not(.big)) { transition: none; } }
/* Profile photos you can open */
.pf-photo-view, .photo-view-btn { display: inline-grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: zoom-in; touch-action: manipulation; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.pf-photo-view:active, .photo-view-btn:active { transform: scale(0.97); }
.pf-photo-view:focus-visible, .photo-view-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.avatar.has-photo img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
/* Expanded share: one compact row of controls (icons only), the strip just above it, nothing over Minimise */
.call-panel.share-full .call-add { display: none; }
.call-panel.share-full .call-head { padding-right: 140px; }
.call-panel.share-full .call-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; grid-template-columns: none; }
.call-panel.share-full .call-controls .call-btn { flex: none; display: grid; place-items: center; width: 48px; height: 48px; min-width: 0; min-height: 0; margin: 0; padding: 0; border-radius: 50%; }
.call-panel.share-full .call-controls .call-btn .i { width: 22px; height: 22px; margin: 0; }
.call-panel.share-full .call-controls .call-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.call-panel.share-full .call-controls .call-btn[hidden] { display: none; }
.call-panel.share-full .call-stage { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.call-panel.share-full .call-controls .call-btn { width: 44px; height: 44px; }
.call-panel.share-full .call-controls :is(#call-rec, #call-flip) { display: none; }
.call-panel.share-full .call-controls .call-btn.end { order: 99; width: 56px; margin: 0 0 0 4px; border-radius: 22px; transform: none; }
.call-panel.share-full .call-controls { gap: 4px; padding: 6px 8px; }
.call-panel.share-full .call-controls .call-btn { width: auto; height: auto; border-radius: 0; background: none; }
.call-panel.share-full .call-controls .call-btn .i { width: 44px !important; height: 44px !important; padding: 12px !important; }
.call-panel.share-full .call-controls .call-btn.end { width: auto; margin-left: 6px; }
.call-panel.share-full .call-controls .call-btn.end .i { width: 52px !important; height: 44px !important; padding: 12px 16px !important; border-radius: 22px; box-shadow: none; }
.call-panel.share-full .call-stage { scrollbar-width: none; }

.gm.st .st-body > * { justify-self: stretch; width: 100%; box-sizing: border-box; }
.gm.st .st-tile { width: 100%; }


/* Scan → Note: the scan sheet */
.gm.st .gm-card { display: flex; flex-direction: column; }
.st-body { justify-items: stretch; gap: 12px; }
.st-label { margin: 6px 0 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.st-tip { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); font-size: 0.82rem; line-height: 1.45; }
.st-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.st-row > button { flex: 1 1 140px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.st-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.st-cats button { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.st-cats button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.st-pages { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px; }
.st-pages:empty { display: none; }
.st-pages figure { position: relative; flex: none; width: 110px; margin: 0; }
.st-pages img { width: 110px; height: 150px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); background: #fff; }
.st-pages figcaption { font-size: 0.72rem; color: var(--text-muted); text-align: center; }
.st-pages .icon-btn { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.55); color: #fff; }
.st-go { min-height: 50px; }

/* =====================================================================
   Scan → Note: the scanner camera (live rear camera, page frame, shutter)
   ===================================================================== */
dialog.scam { position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
dialog.scam::backdrop { background: #000; }
.scam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.scam-shade { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 60px; pointer-events: none; }
.scam-frame { position: relative; border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); transition: width 200ms ease, height 200ms ease; }
.scam-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.scam-frame i:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.scam-frame i:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.scam-frame i:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.scam-frame i:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.scam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.scam-flash.go { animation: scam-flash 260ms ease-out; }
@keyframes scam-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.scam-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.scam-hint { flex: 1; margin: 0; font-size: 0.92rem; font-weight: 700; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.scam-btn, .scam-btn-spacer { flex: none; width: 44px; height: 44px; }
.scam-btn { display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; }
.scam-btn .i { width: 22px; height: 22px; }
.scam-btn[aria-pressed="true"] { background: #facc15; color: #111; }
.scam-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.scam-thumbs { position: relative; display: flex; align-items: center; min-height: 56px; }
.scam-thumbs img { width: 42px; height: 56px; margin-right: -26px; object-fit: cover; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.scam-thumbs img.new { animation: scam-in 300ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes scam-in { from { transform: translateY(-40px) scale(1.4); opacity: 0; } }
.scam-thumbs b { position: relative; margin-left: 30px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #4f46e5; font-size: 0.78rem; line-height: 22px; text-align: center; }
.scam-shutter { display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; }
.scam-shutter span { width: 60px; height: 60px; border-radius: 50%; background: #fff; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.scam-shutter:active span { transform: scale(0.88); }
.scam-shutter:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.scam-done { justify-self: end; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #4f46e5; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.scam-done:disabled { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-motion: reduce) { .scam-flash.go, .scam-thumbs img.new { animation: none; } }
.nh-take-scan { background: var(--input); color: var(--text); }

/* =====================================================================
   Explore: compact Trending, and "Live now" right under it (live videos + audio rooms, Go live / Host a room)
   ===================================================================== */
/* Trending takes less height so Live now is on the first screen */
.ex-rail .ex-tile { width: 168px; aspect-ratio: auto; height: 196px; flex: none; }
.ex-rail .ex-tile-text { -webkit-line-clamp: 5; font-size: 0.9rem; inset: 12px 12px 40px; }
.ex-rail .ex-tile.hot .ex-tile-text { top: 40px; -webkit-line-clamp: 4; }
@media (min-width: 761px) { .ex-rail .ex-tile { width: 200px; height: 220px; } }

.ln .ex-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.ln-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); }
.ln-dot.on { background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); animation: ln-pulse 1.8s ease-out infinite; }
@keyframes ln-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }
.ln-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.74rem; font-weight: 800; line-height: 22px; text-align: center; }
/* Live sessions: a swipeable row of cards */
.ln-rail { display: flex; gap: 10px; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.ln-rail::-webkit-scrollbar { display: none; }
.ln-card { position: relative; flex: none; display: grid; justify-items: start; align-content: start; gap: 4px; width: 172px; min-height: 176px; padding: 12px; border: 0; border-radius: 18px; color: #fff; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; touch-action: manipulation;
    background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(150deg, #4f46e5, #1e1b4b); box-shadow: 0 8px 20px -12px rgba(30, 27, 75, 0.7); transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.ln-card.audio { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(150deg, #7c3aed, #3b0764); }
.ln-card:active { transform: scale(0.97); }
.ln-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ln-card.skel { background: var(--input); box-shadow: none; animation: pulse 1.4s ease-in-out infinite; cursor: default; }
.ln-badges { display: flex; gap: 6px; }
.ln-live { padding: 2px 7px; border-radius: 6px; background: #ef4444; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; }
.ln-kind { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); font-size: 0.68rem; font-weight: 700; }
.ln-kind .i { width: 12px; height: 12px; }
.ln-av { margin: 6px 0 2px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
.ln-av .avatar.lg { width: 46px; height: 46px; }
.ln-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.92rem; line-height: 1.3; }
.ln-who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; opacity: 0.85; }
.ln-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: auto; padding-top: 4px; font-size: 0.72rem; opacity: 0.9; }
.ln-join { padding: 4px 10px; border-radius: 999px; background: #fff; color: #1e1b4b; font-weight: 800; }
/* Nobody live: one compact line, not a big empty box */
.ln-empty { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
.ln-empty-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.ln-empty-ic .i { width: 20px; height: 20px; }
.ln-empty > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ln-empty strong { font-size: 0.95rem; }
.ln-empty small { color: var(--text-muted); font-size: 0.82rem; line-height: 1.35; }
/* The two ways to start: always visible, side by side, never wrapping awkwardly */
.ln-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ln-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.ln-btn .i { flex: none; width: 22px; height: 22px; }
.ln-btn span { display: grid; line-height: 1.15; min-width: 0; }
.ln-btn strong { font-size: 0.95rem; white-space: nowrap; }
.ln-btn small { font-size: 0.72rem; opacity: 0.75; }
.ln-btn.primary { background: var(--accent); color: var(--on-accent, #fff); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.ln-btn:active { transform: scale(0.97); }
.ln-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ln-btn:not(.primary):hover { background: color-mix(in srgb, var(--accent) 10%, var(--input)); } .ln-card:hover { transform: translateY(-2px); } }
@media (max-width: 340px) { .ln-btn { gap: 6px; padding: 0 8px; } .ln-btn strong { font-size: 0.86rem; } .ln-btn small { display: none; } }
@media (min-width: 761px) { .ln-acts { max-width: 520px; } .ln-rail { margin: 0; padding: 2px 0 4px; } }
@media (prefers-reduced-motion: reduce) { .ln-dot.on { animation: none; } .ln-card, .ln-btn { transition: none; } }
.ln-rail { scroll-padding-inline: 16px; }
.ln.on .ln-acts { margin: 0 0 12px; }
@media (max-width: 760px) { .explore .ex-rail .ex-tile { height: 180px; } }
.ln-btn:not(.primary) { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(20, 24, 40, 0.05); }

/* =====================================================================
   Note cards: "Note actions" (⋯) — Pin, Edit, Move to folder, Share, Delete
   ===================================================================== */
.mcard-more { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text); box-shadow: 0 1px 3px rgba(20, 24, 40, 0.12), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
    cursor: pointer; touch-action: manipulation; transition: opacity 170ms ease, transform 170ms cubic-bezier(0.23, 1, 0.32, 1), background 140ms ease; }
.mcard-more .i { width: 18px; height: 18px; }
.mcard-more:active { transform: scale(0.92); }
.mcard-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mcard-more[aria-expanded="true"] { background: var(--accent); color: var(--on-accent, #fff); }
/* Touch: always there (a bigger target than it looks). Mouse: appears on the card you're over, or when tabbing to it */
@media (pointer: coarse) { .mcard-more::before { content: ""; position: absolute; inset: -5px; } }
@media (hover: hover) and (pointer: fine) {
    .mcard-more { opacity: 0; transform: scale(0.85); pointer-events: none; }
    .mcard:hover .mcard-more, .mcard:focus-within .mcard-more, .mcard.menu-open .mcard-more { opacity: 1; transform: none; pointer-events: auto; }
    .mcard { transition: box-shadow 180ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
    .mcard:hover { box-shadow: 0 10px 24px -14px rgba(20, 24, 40, 0.35), 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
}
/* Titles make room for the button */
.mcard:has(.mcard-more) > h3 { padding-right: 34px; }
/* Pinned: a small pin by the title */
.mcard-pinned { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #fef3c7; color: #d97706; vertical-align: 2px; animation: pin-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.mcard-pinned .i { width: 12px; height: 12px; }
@keyframes pin-in { from { transform: scale(0.4) rotate(-30deg); opacity: 0; } }
/* Deleting: the card folds away */
.mcard.leaving { animation: mcard-out 240ms cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes mcard-out { to { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .mcard-more, .mcard { transition: none; } .mcard-pinned, .mcard.leaving { animation: none; } }

/* Move to folder: a sheet from the bottom on phones, a small window on bigger screens */
dialog.move-sheet { width: min(420px, calc(100% - 32px)); max-height: min(560px, 85dvh); margin: auto; padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35); overflow: hidden; }
dialog.move-sheet::backdrop { background: rgba(9, 9, 11, 0.45); }
dialog.move-sheet[open] { animation: ps-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.mv-card { display: flex; flex-direction: column; max-height: inherit; }
.mv-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 6px 18px; }
.mv-head h3 { margin: 0; font-size: 1.05rem; }
.mv-search { margin: 4px 14px 8px; }
.mv-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px; display: grid; gap: 2px; }
.mv-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mv-row:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .mv-row:hover { background: var(--input); } }
.mv-row.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mv-row:focus-visible, .mv-new:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mv-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--card, var(--input)); }
.mv-ic .i { width: 18px; height: 18px; }
.mv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mv-check { width: 18px; height: 18px; color: var(--accent); }
.mv-none { margin: 12px; color: var(--text-muted); text-align: center; }
.mv-new { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 0 14px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.mv-new .i { width: 18px; height: 18px; }
@media (max-width: 600px) {
    dialog.move-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
    dialog.move-sheet[open] { animation: mv-up 260ms cubic-bezier(0.32, 0.72, 0, 1); }
}
@keyframes mv-up { from { transform: translateY(100%); } }

/* =====================================================================
   Note → Podcast (podcast.js): the studio, the equipment rack, the recording booth, the episode
   ===================================================================== */
.gm.pod { width: min(600px, 100%); }
.pod-card { position: relative; display: flex; flex-direction: column; }
.pod-body { justify-items: stretch; gap: 10px; }
.pod-body > * { width: 100%; box-sizing: border-box; }
.pod-episode { display: flex; gap: 14px; align-items: center; }
.pod-cover { flex: none; width: 96px; height: 96px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.pod-episode > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pod-episode.done strong { font-size: 1.1rem; }
.pod-field { display: grid; gap: 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.pod-field input { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.pod-show { margin: 0; color: var(--text-muted); font-size: 0.84rem; }
.pod-ai { padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 700; }
.pod-label { margin: 8px 0 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pod-tip { margin: 0; color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; }
.pod-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.pod-segs.three { display: grid; grid-template-columns: repeat(3, 1fr); }
.pod-seg, .pod-chip { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 700; text-align: center; cursor: pointer; touch-action: manipulation; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.pod-seg small, .pod-chip small { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.pod-seg[aria-pressed="true"], .pod-chip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.pod-seg:disabled { opacity: 0.45; cursor: not-allowed; }
.pod-seg:active:not(:disabled), .pod-chip:active { transform: scale(0.97); }
.pod-voices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pod-voices.duo span { min-width: 56px; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
/* The rack: like real gear */
.pod-rack { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #1f2430, #12151c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
.pod-unit { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #2a303d, #222733); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.4); color: #e5e7eb; }
.pod-unit-name { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #a5b4fc; }
.pod-unit-name .i { width: 16px; height: 16px; }
.pod-unit .pod-seg { background: #171b24; border-color: #3a4152; color: #e5e7eb; }
.pod-unit .pod-seg small { color: #9ca3af; }
.pod-unit .pod-seg[aria-pressed="true"] { background: #312e81; border-color: #818cf8; box-shadow: inset 0 0 0 1px #818cf8, 0 0 12px rgba(129, 140, 248, 0.35); }
.pod-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.pod-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: #171b24; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.pod-toggle input { width: 18px; height: 18px; accent-color: #22c55e; }
.pod-script { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.92rem; line-height: 1.55; resize: vertical; }
.pod-write { min-height: 48px; }
.pod-foot { flex: none; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.pod-go { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; }
.pod-busy { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); text-align: center; }
.pod-busy p { margin: 0; max-width: 300px; font-weight: 700; }
.pod-spin { width: 34px; height: 34px; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: pod-spin 0.8s linear infinite; }
@keyframes pod-spin { to { transform: rotate(360deg); } }
/* The booth */
.pod-booth { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #0b0d12; color: #f3f4f6; }
.pod-booth-top { display: flex; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 10px; }
.pod-rec { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #7f1d1d; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; }
.pod-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: pod-blink 1s steps(2) infinite; }
.pod-booth.paused .pod-rec { background: #374151; }
.pod-booth.paused .pod-rec i { animation: none; background: #9ca3af; }
@keyframes pod-blink { 50% { opacity: 0.2; } }
.pod-time { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pod-meter { flex: 1; height: 10px; border-radius: 5px; background: #1f2937; overflow: hidden; }
.pod-meter i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e 0 70%, #facc15 70% 88%, #ef4444 88%); transform: scaleX(0); transform-origin: left; transition: transform 60ms linear; }
.pod-meter.hot { box-shadow: 0 0 0 2px #ef4444; }
.pod-prompter { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 30vh 22px 40vh; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 18%, #000 75%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 75%, transparent); }
.pod-prompter::-webkit-scrollbar { display: none; }
.pod-prompter-text p { margin: 0 0 1.1em; font-size: clamp(1.25rem, 5vw, 1.7rem); font-weight: 700; line-height: 1.5; }
.pod-speed { display: flex; align-items: center; gap: 10px; padding: 6px 18px; font-size: 0.78rem; color: #9ca3af; }
.pod-speed input { flex: 1; accent-color: #818cf8; }
.pod-booth-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.pod-booth-ctl .ghost-btn { color: #f3f4f6; border-color: #374151; display: inline-flex; align-items: center; gap: 6px; }
.pod-stop { display: grid; place-items: center; width: 64px; height: 64px; border: 4px solid #fff; border-radius: 50%; background: #ef4444; color: #fff; cursor: pointer; }
.pod-stop .i { width: 24px; height: 24px; }
/* The episode */
.pod-player { width: 100%; }
.pod-chapters { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pod-chapters button { display: flex; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--input); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pod-chapters span { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent); }
.pod-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pod-actions > * { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.pod-actions .primary-btn, .pod-actions .link-btn { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .pod-rec i { animation: none; } .pod-meter i { transition: none; } }

/* =====================================================================
   What's new (whatsnew.js): the animated tour
   ===================================================================== */
.gm.wn { width: min(560px, 100%); }
.wn-card { display: flex; flex-direction: column; }
.wn-stage { position: relative; flex: none; display: grid; align-content: center; justify-items: center; gap: 14px; min-height: min(300px, 42dvh); margin: 10px 12px 0; padding: 18px 12px; border-radius: 20px; overflow: hidden; color: #fff;
    background: radial-gradient(120% 90% at 15% 10%, #4338ca, transparent 60%), radial-gradient(90% 80% at 100% 100%, #a21caf55, transparent 60%), linear-gradient(150deg, #0f172a, #1e1b4b); }
.wn-stage.paused, .wn-stage.paused * { animation-play-state: paused !important; }
.wn-stage [style*="--d"] { animation: wn-in 520ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: var(--d); }
@keyframes wn-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
.wn-try-row { display: flex; justify-content: center; padding: 4px 16px 0; }
.wn-try { min-height: 44px; }
/* Podcast */
.wn-pod { display: grid; justify-items: center; gap: 12px; }
.wn-mic { position: relative; font-size: 3rem; line-height: 1; }
.wn-wave { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 2px solid rgba(165, 180, 252, 0.6); border-radius: 50%; animation: wn-wave 1.6s ease-out infinite; }
.wn-wave.b { animation-delay: 0.8s; }
@keyframes wn-wave { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.wn-rack { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #2a303d, #171b24); }
.wn-rack span { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: #312e81; font-size: 0.74rem; font-weight: 700; box-shadow: inset 0 0 0 1px #818cf8; }
.wn-rack b { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.wn-episode { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; color: #111827; }
.wn-cover { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #f59e0b, #7c2d12); font-size: 1.2rem; }
.wn-episode > span:last-child { position: relative; display: grid; padding-right: 30px; }
.wn-episode small { color: #6b7280; font-size: 0.72rem; }
.wn-play { position: absolute; right: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #4f46e5; }
.wn-play::after { content: ""; position: absolute; left: 9px; top: 7px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
/* Note actions */
.wn-cards { display: flex; gap: 10px; }
.wn-mcard { position: relative; display: grid; gap: 4px; width: 130px; min-height: 110px; padding: 12px; border-radius: 16px; background: #fdf2f8; color: #111827; font-size: 0.82rem; align-content: start; }
.wn-mcard.on { background: #fef9c3; }
.wn-mcard small { color: #6b7280; }
.wn-dots { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #4f46e5; color: #fff; font-weight: 900; }
.wn-menu { position: absolute; top: 38px; right: -20px; display: grid; gap: 2px; width: 150px; padding: 6px; border-radius: 12px; background: #fff; color: #111827; font-size: 0.74rem; font-weight: 600; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.wn-menu span { padding: 5px 6px; border-radius: 6px; }
.wn-menu span:first-child { background: #eef2ff; }
.wn-menu .red { color: #dc2626; border-top: 1px solid #e5e7eb; }
/* Scan */
.wn-scan { display: flex; align-items: center; gap: 14px; }
.wn-phone { position: relative; padding: 10px; border-radius: 18px; background: #000; box-shadow: 0 0 0 3px #374151; }
.wn-paper { position: relative; display: grid; gap: 8px; width: 96px; height: 126px; padding: 16px 12px; border-radius: 6px; background: #fef9c3; transform: rotate(-3deg); overflow: hidden; }
.wn-paper i { height: 6px; border-radius: 3px; background: #1e3a8a; opacity: 0.6; }
.wn-beam { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #22d3ee; box-shadow: 0 0 18px 6px rgba(34, 211, 238, 0.6); animation: wn-beam 1.6s ease-in-out infinite alternate; }
@keyframes wn-beam { to { top: calc(100% - 4px); } }
.wn-corners { position: absolute; inset: 4px; border-radius: 12px; background: linear-gradient(#fff, #fff) top left / 16px 3px no-repeat, linear-gradient(#fff, #fff) top left / 3px 16px no-repeat, linear-gradient(#fff, #fff) top right / 16px 3px no-repeat, linear-gradient(#fff, #fff) top right / 3px 16px no-repeat, linear-gradient(#fff, #fff) bottom left / 16px 3px no-repeat, linear-gradient(#fff, #fff) bottom left / 3px 16px no-repeat, linear-gradient(#fff, #fff) bottom right / 16px 3px no-repeat, linear-gradient(#fff, #fff) bottom right / 3px 16px no-repeat; }
.wn-arrow { font-size: 1.8rem; }
.wn-note { width: 130px; padding: 12px; border-radius: 12px; background: #fff; color: #111827; font-size: 0.72rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.wn-note p { margin: 4px 0 0; }
/* Live now */
.wn-live { display: grid; gap: 10px; width: min(100%, 360px); }
.wn-live-h { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; }
.wn-live-h i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: ln-pulse 1.8s ease-out infinite; }
.wn-live-h b { padding: 1px 7px; border-radius: 999px; background: #ef4444; font-size: 0.74rem; }
@keyframes ln-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }
.wn-live-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wn-live-btns span { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); font-size: 0.82rem; font-weight: 800; text-align: center; }
.wn-live-btns .p { background: #6366f1; }
.wn-live-row { display: flex; gap: 8px; }
.wn-live-card { flex: 1; display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: linear-gradient(150deg, #4f46e5, #1e1b4b); font-size: 0.74rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.wn-live-card em { justify-self: start; padding: 1px 5px; border-radius: 4px; background: #ef4444; font-style: normal; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; }
.wn-live-card small { opacity: 0.75; }
/* Games */
.wn-games { display: grid; justify-items: center; gap: 12px; }
.wn-games > span { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-weight: 800; font-size: 0.86rem; }
.wn-games > span b { font-size: 1.2rem; }
.wn-goal { position: relative; width: 190px; height: 90px; border: 4px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 9px); }
.wn-ball { position: absolute; left: 50%; bottom: -40px; font-size: 1.6rem; animation: wn-shot 1.4s cubic-bezier(0.25, 0.6, 0.35, 1) 2.4s both; }
@keyframes wn-shot { from { transform: translate(-50%, 0) scale(1.3); } to { transform: translate(40px, -90px) scale(0.7); } }
.wn-goal-txt { position: absolute; left: 50%; top: 50%; padding: 4px 12px; border-radius: 10px; background: #16a34a; font-weight: 900; transform: translate(-50%, -50%); animation: wn-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 3.7s both; }
/* Touches */
.wn-touches { display: grid; gap: 8px; width: min(100%, 340px); }
.wn-touches span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); font-size: 0.86rem; font-weight: 700; }
.wn-touches b { font-size: 1.3rem; }
.gm.wn.calm .wn-stage *, .gm.wn.calm .wn-stage [style*="--d"] { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wn-stage *, .wn-stage [style*="--d"] { animation: none !important; } }
.pod-tip.pod-warn { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 14%, transparent); color: var(--text); }

/* =====================================================================
   Scan → Note: reading progress, the result, and the review screen
   ===================================================================== */
.st-scan .sc-foot { flex: none; display: grid; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.st-scan .sc-foot[hidden] { display: none; }
@media (min-width: 601px) { .st-scan.sc-wide { width: min(1100px, 100%); height: min(94dvh, 860px); } }
.st-scan.sc-wide .gm-body { padding-top: 12px; }
/* Reading */
.sc-busy { display: grid; justify-items: center; gap: 10px; padding: 18px 0 8px; text-align: center; }
.sc-busy strong { font-size: 1.05rem; }
.sc-busy p { margin: 0; min-height: 2.6em; color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; }
.sc-thumb { position: relative; width: 132px; height: 176px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sc-beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); box-shadow: 0 0 16px 5px color-mix(in srgb, var(--accent) 55%, transparent); animation: sc-beam 1.5s ease-in-out infinite alternate; }
@keyframes sc-beam { to { top: calc(100% - 3px); } }
.sc-bar { width: min(320px, 100%); height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1); }
/* The result */
.sc-done { display: grid; justify-items: center; gap: 6px; padding: 10px 0 2px; text-align: center; }
.sc-done strong { font-size: 1.1rem; }
.sc-done p { margin: 0; max-width: 40ch; color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; }
.sc-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #b45309; font-size: 1.4rem; font-weight: 900; }
.sc-badge.ok { background: color-mix(in srgb, #16a34a 16%, var(--surface)); color: #15803d; }
.sc-peek { max-height: 34dvh; overflow: hidden; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; font-size: 0.9rem; line-height: 1.55; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.sc-peek p { margin: 0 0 0.6em; }
.st-scan .sc-foot .st-row > button { flex: 1 1 120px; }
.st-scan .sc-foot .st-row:has(> :nth-child(3)) > .primary-btn { flex-basis: 100%; order: 3; }
/* Flagged words */
mark.sc-q { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, #f59e0b 26%, transparent); box-shadow: inset 0 -2px 0 #f59e0b; color: inherit; cursor: pointer; }
mark.sc-q.bad { background: color-mix(in srgb, #ef4444 20%, transparent); box-shadow: inset 0 -2px 0 #ef4444; }
mark.sc-q.on { outline: 2px solid var(--accent); outline-offset: 1px; }
mark.sc-q.done { padding: 0; background: none; box-shadow: none; outline: 0; cursor: text; }
/* Review: photo and text */
.sc-review { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.st-scan.sc-wide .gm-body { align-content: stretch; }
.sc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.sc-tabs button { min-height: 36px; border: 0; border-radius: 9px; background: none; color: var(--text-muted); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.sc-tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.sc-panes { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; min-height: 0; }
.sc-panes::-webkit-scrollbar { display: none; }
.sc-pane { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; align-content: start; gap: 8px; }
.sc-stage { position: relative; height: min(56dvh, 560px); border-radius: 14px; background: #111; overflow: hidden; cursor: zoom-out; touch-action: manipulation; }
.sc-zoom { position: absolute; transform-origin: 0 0; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
.sc-zoom img { display: block; width: 100%; height: 100%; }
.sc-boxes { position: absolute; inset: 0; pointer-events: none; }
.sc-box { position: absolute; border-radius: calc(3px / var(--z, 1)); box-shadow: 0 0 0 calc(2px / var(--z, 1)) rgba(245, 158, 11, 0.85); }
.sc-box.bad { box-shadow: 0 0 0 calc(2px / var(--z, 1)) rgba(239, 68, 68, 0.9); }
.sc-box.on { box-shadow: 0 0 0 calc(3px / var(--z, 1)) var(--accent), 0 0 0 9999px rgba(0, 0, 0, 0.3); }
.sc-pagesw { display: flex; gap: 6px; justify-content: center; }
.sc-pagesw button { min-width: 36px; min-height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.sc-pagesw button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.sc-hint { margin: 0; color: var(--text-muted); font-size: 0.78rem; text-align: center; }
.sc-lens { width: 100%; height: 96px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.sc-edit { min-height: 40dvh; max-height: 56dvh; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1.6; outline: none; -webkit-user-select: text; user-select: text; }
.sc-edit:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-edit p { margin: 0 0 0.8em; }
.sc-check { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.sc-check .sc-count { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 700; }
.sc-check .icon-btn { width: 40px; height: 40px; font-size: 1.3rem; font-weight: 800; }
.sc-check .ghost-btn { min-height: 40px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; color: var(--accent); font-weight: 700; }
.sc-check .ghost-btn:disabled { opacity: 0.45; }
.sc-allgood { margin: 0; color: #15803d; font-size: 0.86rem; font-weight: 700; }
@media (min-width: 760px) {
    .sc-tabs { display: none; }
    .sc-review { grid-template-rows: 1fr; }
    .sc-panes { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
    .sc-stage { height: min(62dvh, 600px); }
    .sc-edit { max-height: calc(min(62dvh, 600px) - 104px); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-beam { animation: none; top: 50%; }
    .sc-zoom, .sc-bar i { transition: none; }
}

/* Inbox: earlier messages, a chat that couldn't load, and attachments that didn't send */
.chat-older { display: flex; justify-content: center; padding: 6px 0 10px; }
.chat-older-btn { min-height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.chat-older-btn:disabled { cursor: default; opacity: 0.8; }
.chat-load-err { display: grid; justify-items: center; gap: 10px; margin: auto; padding: 24px 16px; text-align: center; color: var(--text-muted); }
.chat-load-err p { margin: 0; }
.pending-fail { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface)); color: var(--text); font-size: 0.84rem; }
.pending-fail .i { flex: none; width: 18px; height: 18px; color: var(--danger, #dc2626); }
.pending-fail span { flex: 1; min-width: 0; }
.pending-retry { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--danger, #dc2626); color: #fff; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.pending-retry:active { transform: scale(0.97); }

/* =====================================================================
   Chat: swipe to reply, and stickers
   ===================================================================== */
/* Up/down drags scroll the chat; sideways drags belong to the swipe-to-reply gesture */
#chat-thread .msg-card, #gc-thread .gc-bubble { touch-action: pan-y; }
.swipe-ic { position: absolute; z-index: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, var(--surface)); color: var(--text-muted); opacity: 0; pointer-events: none; transition: background-color 120ms ease, color 120ms ease; }
.swipe-ic .i { width: 16px; height: 16px; }
.swipe-ic.ready { background: var(--accent); color: var(--on-accent, #fff); }
.swipe-ic.gone { opacity: 0 !important; transition: opacity 160ms ease; }
.msg-card.will-reply { box-shadow: none; }
/* Sticker messages: no bubble, just the sticker */
.sticker { display: block; width: 148px; height: 148px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.18)); }
.sticker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.msg.sticker-msg .msg-card { min-width: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.msg.sticker-msg .msg-atts { margin: 0; }
.msg.sticker-msg .msg-meta { align-self: flex-end; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.gc-msg.sticker-msg .gc-bubble { padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
.gc-msg.sticker-msg .gc-meta { align-self: flex-end; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.sticker-missing { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    .msg.sticker-msg:last-child .sticker, .gc-msg.sticker-msg:last-child .sticker { animation: stk-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}
@keyframes stk-pop { from { transform: scale(0.6); opacity: 0; } }
/* The picker */
.composer, .gc-compose { position: relative; }
.stk-panel { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; max-height: min(46dvh, 360px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; transform-origin: bottom right; animation: stk-in 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.stk-panel.closing { opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 140ms ease, transform 140ms ease; }
@keyframes stk-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.stk-tabs { flex: none; display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.stk-tabs button { width: 40px; height: 36px; border: 0; border-radius: 10px; background: none; font-size: 1.2rem; cursor: pointer; }
.stk-tabs button[aria-selected="true"] { background: var(--accent-soft, color-mix(in srgb, var(--accent) 14%, transparent)); }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.stk-item { aspect-ratio: 1; padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; touch-action: manipulation; transition: transform 120ms ease-out, background-color 120ms ease; }
.stk-item svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stk-item:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .stk-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } }
.stk-empty { grid-column: 1 / -1; margin: 18px 0; color: var(--text-muted); font-size: 0.86rem; text-align: center; }
.gc-stk { flex: none; }
@media (min-width: 760px) { .stk-panel { left: auto; width: 380px; } }
.msg.sticker-msg .msg-meta, .gc-msg.sticker-msg .gc-meta { width: max-content; margin-left: auto; }

/* Inbox while your chats are loading (just after signing in) */
.inbox-skel { display: grid; gap: 4px; padding: 6px 4px; }
.inbox-skel span { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.inbox-skel i { flex: none; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); }
.inbox-skel b { flex: 1; height: 30px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 0 55%, transparent 55%), linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 0 80%, transparent 80%); background-size: 100% 12px, 100% 10px; background-position: 0 0, 0 100%; background-repeat: no-repeat; }
@media (prefers-reduced-motion: no-preference) { .inbox-skel span { animation: inbox-skel 1.4s ease-in-out infinite; } }
@keyframes inbox-skel { 50% { opacity: 0.55; } }

/* Chat videos: never a black box; buffering, error and upload states */
.msg-video-cover.no-poster { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--accent) 70%, #fff 0%), transparent 60%), linear-gradient(150deg, #312e81, #1e1b4b); }
.msg-video-cover.no-poster::before { content: "🎬"; position: absolute; top: 12px; left: 14px; font-size: 1.1rem; opacity: 0.85; }
.msg-video.buffering::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: vid-spin 0.8s linear infinite; pointer-events: none; }
@keyframes vid-spin { to { transform: rotate(360deg); } }
.msg-video-err { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(17, 17, 27, 0.82); color: #fff; font-size: 0.78rem; font-weight: 600; }
.msg-video-err a { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; text-decoration: none; }
.msg-video.failed .msg-video-cover small { display: none; }
.pending-video img { width: 100%; height: 100%; object-fit: cover; }
.pending-video.preparing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); background-size: 200% 100%; animation: vid-shimmer 1.2s linear infinite; }
@keyframes vid-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.composer.busy .up-bar { pointer-events: auto; }
.up-cancel, .up-pill button { position: relative; margin-left: auto; padding: 3px 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .msg-video.buffering::after, .pending-video.preparing::after { animation: none; } }

/* Sign-in: "try again later" problems are a calm notice with a retry, not a red block */
.auth-message.notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); }
.auth-retry { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.auth-retry:active { transform: scale(0.97); }
/* Signed in while the server is unavailable */
.service-note { position: fixed; z-index: 900; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: min(560px, calc(100% - 24px)); padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); font-size: 0.84rem; line-height: 1.4; }
.service-note span { flex: 1; }
.service-note button { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); font: inherit; font-weight: 700; cursor: pointer; }
.service-note .sn-x { width: 32px; padding: 0; background: none; color: var(--text-muted); }
/* Feed reels: a cover and a play mark (tap opens Reels) */
.reel-post-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-post-play .i { width: 26px; height: 26px; margin-left: 3px; }

/* Sign-in paused: no sign-in buttons anywhere */
body.signin-paused [data-action="sign-in"], body.signin-paused [data-share="signin"], body.signin-paused .guest-card { display: none !important; }