/* Theme */
:root {
    color-scheme: light dark;
    --page-background: #f7f4f1;
    --card-background: #fffdfb;
    --text: #28242b;
    --muted-text: #6e6872;
    --accent: #5c4b8a;
    --accent-hover: #493a70;
    --button-background: #503d7c;
    --button-hover: #403062;
    --button-text: #fff;
    --border: #ddd6e0;
    --focus: #806bb6;
    --error-background: #f4e9eb;
    --error-text: #752e3c;
    --success-background: #eaf1eb;
    --success-text: #315d3a;
    --warning-background: #f5eee2;
    --warning-text: #735525;
    --danger-background: #8e3045;
    --danger-background-hover: #742639;
    --danger-background-active: #5d1d2c;
    --danger-text: #fff;
    --danger-focus: #b35b70;
    --shadow: 0 16px 42px rgb(45 34 55 / 10%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #1c1a20;
        --card-background: #28242d;
        --text: #f2eef3;
        --muted-text: #c2b9c5;
        --accent: #b9a3ed;
        --accent-hover: #cebfff;
        --button-background: #ad96df;
        --button-hover: #c0aded;
        --button-text: #211c29;
        --border: #48414d;
        --focus: #d2c4ff;
        --error-background: #482f37;
        --error-text: #ffd8dd;
        --success-background: #2d4333;
        --success-text: #d7f3dc;
        --warning-background: #4b3d29;
        --warning-text: #ffe4af;
        --danger-background: #cf7889;
        --danger-background-hover: #e28b9b;
        --danger-background-active: #b85e70;
        --danger-text: #211c29;
        --danger-focus: #f0aabb;
        --shadow: 0 16px 42px rgb(0 0 0 / 28%);
    }
}

/* Layout */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--page-background);
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

img,
svg {
    max-width: 100%;
}

/* Authentication cards */
.auth-page {
    display: grid;
    min-height: 100vh;
    padding: 24px 16px;
    place-items: center;
}

.auth-card {
    width: min(100%, 420px);
    padding: 26px 24px 22px;
    background: var(--card-background);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.auth-header { margin-bottom: 20px; }
.auth-header p { margin: 0; color: var(--muted-text); }
.brand-mark {
    position: relative;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent);
}
.brand-mark::before {
    position: absolute;
    inset: 11px 9px 12px;
    border: 2px solid var(--card-background);
    border-radius: 50%;
    content: "";
}
.brand-mark::after {
    position: absolute;
    bottom: 9px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid var(--card-background);
    border-left: 2px solid var(--card-background);
    content: "";
    transform: skewY(-35deg);
}
.brand { margin: 0; color: var(--accent); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; }
.tagline { margin-top: 1px !important; font-size: 0.78rem; opacity: 0.78; }
.welcome-message { margin-top: 15px !important; }

/* Forms */
.field { margin-top: 15px; }
label { display: block; margin-bottom: 6px; font-size: 0.95rem; font-weight: 550; }

input,
textarea,
button {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    font: inherit;
}

input {
    padding: 0 13px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 84%, var(--text));
    color: var(--text);
}

textarea {
    padding: 12px 13px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 84%, var(--text));
    color: var(--text);
    resize: vertical;
}

input:focus,
textarea:focus,
button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent);
    outline-offset: 2px;
}

input:focus { border-color: var(--focus); }
textarea:focus { border-color: var(--focus); }

/* Buttons */
button {
    margin-top: 20px;
    border: 0;
    background: var(--button-background);
    color: var(--button-text);
    cursor: pointer;
    font-weight: 700;
    transition: background-color 150ms ease, outline-color 150ms ease;
}

button:hover { background: var(--button-hover); }
.help-link { display: block; width: fit-content; margin: 14px auto 0; color: var(--muted-text); font-size: 0.85rem; text-decoration: none; }
.help-link:hover { color: var(--accent); text-decoration: underline; }
.help-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 2px; }

/* Feedback */
.flash-message {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--error-background);
    border: 1px solid color-mix(in srgb, var(--error-text) 30%, transparent);
    border-radius: 10px;
    color: var(--error-text);
}

.flash-message--error { background: var(--error-background); border-color: color-mix(in srgb, var(--error-text) 30%, transparent); color: var(--error-text); }
.flash-message--success { background: var(--success-background); border-color: color-mix(in srgb, var(--success-text) 30%, transparent); color: var(--success-text); }
.flash-message--warning { background: var(--warning-background); border-color: color-mix(in srgb, var(--warning-text) 30%, transparent); color: var(--warning-text); }

.field-help, .field-error { margin: 5px 0 0; font-size: 0.8rem; }
.field-help { color: var(--muted-text); }
.field-error { color: var(--error-text); }

.auth-footer { margin-top: 18px; text-align: center; }
.privacy-note { margin: 0; color: var(--muted-text); font-size: 0.82rem; opacity: 0.8; }
.version { margin: 8px 0 0; color: var(--muted-text); font-size: 0.69rem; opacity: 0.64; }
.help-card { padding-bottom: 28px; }
.help-card .auth-header { margin-bottom: 18px; }
.help-card h1 { margin: 16px 0 0; font-size: 1.45rem; letter-spacing: -0.03em; }
.help-content { color: var(--muted-text); }
.help-content p { margin: 0 0 14px; }
.help-back-link { width: 100%; margin-top: 24px; }
.portal-card h2, .auth-header h2 { margin: 16px 0 0; font-size: 1.35rem; letter-spacing: -0.03em; }
.portal-option { padding: 16px 0; border-bottom: 1px solid var(--border); }
.portal-option h3 { margin: 0; font-size: 0.95rem; }
.portal-option .button-link { width: 100%; margin-top: 12px; }
.secondary-link { border: 1px solid var(--border); background: transparent; color: var(--accent); }
.secondary-link:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.portal-leave { margin-top: 18px; }
.portal-leave .secondary-button { width: 100%; min-height: 44px; }

/* Legacy home card */
.home-page {
    display: grid;
    min-height: 100vh;
    padding: 24px 16px;
    place-items: center;
}

.home-panel {
    width: min(100%, 420px);
    padding: 28px 24px;
    background: var(--card-background);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.home-brand { margin: 0 0 18px; color: var(--accent); font-size: 0.95rem; font-weight: 750; }
.home-panel h1 { margin: 0; font-size: 1.65rem; letter-spacing: -0.03em; }
.home-message { margin: 10px 0 24px; color: var(--muted-text); }
.home-panel button { margin-top: 0; }

.flash-message p { margin: 0; }

/* Application layout */
.app-page {
    min-height: 100vh;
    padding: 20px 0;
    background: var(--page-background);
}

.app-shell {
    width: min(calc(100% - 2rem), 900px);
    margin: 0 auto;
    background: var(--card-background);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.compact-shell { max-width: 560px; }
.app-header, .conversation-header { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.app-brand { margin: 0 0 3px; color: var(--accent); font-size: 0.95rem; font-weight: 750; }
.app-header h1, .conversation-header h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.03em; }
.authenticated-nav { margin-top: 12px; }
.family-members-link {
    display: inline-grid;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    place-items: center;
    text-decoration: none;
}
.family-members-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.family-members-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 2px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.section-heading h2 { margin: 0; font-size: 1.05rem; }
.text-link, .back-link { color: var(--accent); font-weight: 650; text-decoration: none; }
.text-link:hover, .back-link:hover { color: var(--accent-hover); text-decoration: underline; }
.conversation-create {
    display: inline-grid;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    place-items: center;
    text-decoration: none;
}
.conversation-create:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.conversation-create:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 2px; }

/* Conversation list */
.conversation-item, .user-choice {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 70px;
    padding: 12px 20px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    text-decoration: none;
}

.conversation-item:hover, .user-choice:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.user-choice { margin: 0; cursor: pointer; font-weight: 650; }
.avatar-placeholder, .avatar-initials {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 12px;
    border: 2px solid var(--accent);
    border-radius: 50%;
}
.avatar-initials { display: grid; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 0.78rem; font-weight: 800; place-items: center; }
.conversation-copy { display: grid; min-width: 0; gap: 3px; }
.conversation-copy strong { overflow-wrap: anywhere; }
.conversation-copy span { overflow: hidden; color: var(--muted-text); font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-activity { display: grid; justify-items: end; gap: 6px; margin-left: auto; align-self: flex-start; }
.conversation-activity time { color: var(--muted-text); font-size: 0.75rem; }
.conversation-item--unread .conversation-copy strong { font-weight: 800; }
.unread-badge { display: inline-grid; min-width: 1.45rem; min-height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--button-text); font-size: 0.7rem; font-weight: 800; line-height: 1; place-items: center; }

/* In-app unread alerts */
.unread-banner { position: sticky; z-index: 10; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(calc(100% - 2rem), 640px); margin: 0 auto 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 12px; background: var(--card-background); box-shadow: var(--shadow); color: var(--text); }
.unread-banner p { margin: 0; font-size: 0.9rem; font-weight: 700; }
.unread-banner-action { flex: 0 0 auto; color: var(--accent); font-size: 0.85rem; font-weight: 750; text-decoration: none; }
.unread-banner-action:hover { color: var(--accent-hover); text-decoration: underline; }
.unread-banner-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 3px; }

/* Home utilities */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.utility-toolbar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; padding: 12px 20px; border-top: 1px solid var(--border); }
.utility-toolbar [data-install-app] { display: contents; }
.utility-toolbar button { width: auto; min-height: 44px; margin: 0; padding: 0 14px; }
.install-ios-note { margin: 0; padding: 12px 20px 0; color: var(--muted-text); font-size: 0.82rem; text-align: right; }

.empty-state { display: grid; min-height: 310px; padding: 46px 20px; color: var(--muted-text); place-content: center; text-align: center; }
.empty-state p { margin: 8px 0 0; }
.empty-title { margin-top: 18px !important; color: var(--text); font-weight: 700; }
.empty-illustration { width: 60px; height: 51px; margin: 0 auto 20px; border: 2px solid var(--accent); border-radius: 50%; position: relative; }
.empty-illustration::after { position: absolute; right: 5px; bottom: -7px; width: 11px; height: 11px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); content: ""; transform: skewY(35deg); }
.button-link { display: inline-grid; min-height: 48px; margin-top: 20px; padding: 0 18px; border-radius: 10px; background: var(--button-background); color: var(--button-text); font-weight: 700; place-items: center; text-decoration: none; }
.button-link:hover { background: var(--button-hover); }
.button-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 2px; }

/* Conversation screen */
.app-footer { padding: 20px; border-top: 1px solid var(--border); }
.secondary-button { margin-top: 0; background: transparent; border: 1px solid var(--border); color: var(--muted-text); font-size: 0.9rem; font-weight: 650; }
.secondary-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 2px; }
.secondary-button:is(a) { display: grid; width: 100%; min-height: 48px; padding: 0 18px; border-radius: 10px; place-items: center; text-decoration: none; }
.secondary-button:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.secondary-button:active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.with-back-link .back-link { display: inline-block; margin-bottom: 12px; color: var(--muted-text); font-size: 0.88rem; font-weight: 600; opacity: 0.82; }
.with-back-link .app-brand { margin-bottom: 1px; }
.signed-in-user { display: flex; align-items: center; gap: 6px; margin: 9px 0 0; color: var(--muted-text); font-size: 0.82rem; }
.signed-in-avatar { display: grid; width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-size: 0.68rem; font-weight: 800; place-items: center; }
.compact-shell .app-footer { margin-top: 16px; padding-top: 24px; }

/* Family members */
.family-members { border-bottom: 1px solid var(--border); }
.family-member-row { display: flex; align-items: center; min-height: 76px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.family-member-row:last-child { border-bottom: 0; }
.family-member-copy { display: grid; min-width: 0; gap: 4px; }
.family-member-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.family-member-title strong { font-size: 0.97rem; }
.family-member-username { overflow: hidden; color: var(--muted-text); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.you-label { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 999px; color: var(--accent); font-size: 0.7rem; font-weight: 700; line-height: 1.2; }
.role-label { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-text); font-size: 0.7rem; font-weight: 700; line-height: 1.2; }
.role-label--admin { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); }
.remove-member-link { margin-left: auto; color: var(--error-text); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.remove-member-link:hover { text-decoration: underline; }
.remove-member-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 82%, transparent); outline-offset: 3px; }
.remove-member { padding: 20px; }
.remove-member h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.remove-member-copy { margin: 10px 0 0; color: var(--muted-text); line-height: 1.5; }
.remove-member-note { margin: 10px 0 0; color: var(--muted-text); font-size: 0.85rem; }
.remove-member-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 12px; margin-top: 24px; }
.remove-member-actions button { margin: 0; }
.danger-button { background: var(--danger-background); color: var(--danger-text); }
.danger-button:hover { background: var(--danger-background-hover); }
.danger-button:active { background: var(--danger-background-active); }
.danger-button:focus-visible { outline-color: var(--danger-focus); }
.danger-button:disabled { cursor: not-allowed; opacity: 0.65; }
.family-empty-state { padding: 22px 20px 4px; color: var(--muted-text); text-align: center; }
.family-empty-state p { margin: 7px 0 0; }
.family-empty-state .empty-title { margin-top: 0 !important; }
.family-action { padding: 20px; text-align: center; }
.member-form { padding: 20px; }
.member-form button { margin-bottom: 4px; }

.conversation-header { display: flex; align-items: flex-start; gap: 18px; }
.conversation-header .back-link { padding-top: 2px; white-space: nowrap; }
.conversation-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conversation-avatar { margin-right: 0; }
.message-list { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0.5rem; min-height: 280px; max-height: min(55vh, 520px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.no-messages { margin: auto; color: var(--muted-text); text-align: center; }
.no-messages p { margin: 0; color: var(--text); font-weight: 700; }
.no-messages span { display: block; margin-top: 7px; font-size: 0.9rem; }
.message-row { display: flex; width: 100%; }
.message-row--sent { justify-content: flex-end; }
.message-row--received { justify-content: flex-start; }
.message-bubble { display: inline-flex; flex: 0 0 auto; flex-direction: column; align-self: flex-start; align-items: flex-start; width: fit-content; min-width: 0; min-height: 0; max-width: min(72%, 34rem); height: auto; box-sizing: border-box; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--page-background); }
.message-row--sent .message-bubble { align-items: flex-end; border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--card-background)); }
.message-text { margin: 0; overflow-wrap: anywhere; line-height: 1.4; white-space: pre-wrap; }
.message-time { display: block; align-self: flex-end; margin-top: 0.25rem; color: var(--muted-text); font-size: 0.75rem; line-height: 1; opacity: 0.7; white-space: nowrap; }
.message-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 20px; border-top: 1px solid var(--border); }
.message-form label { grid-column: 1 / -1; }
.message-form textarea { min-height: 54px; height: 54px; }
.message-form button { align-self: end; width: auto; min-width: 76px; margin: 0; }
.conversation-shell .app-footer { padding-top: 12px; padding-bottom: 12px; }

@media (min-width: 480px) {
    .auth-card { padding: 30px 32px 26px; }
    .app-header, .conversation-header { padding: 21px 28px; }
    .section-heading, .conversation-item, .user-choice, .app-footer, .message-list, .message-form, .family-member-row, .family-action, .member-form, .remove-member, .utility-toolbar, .install-ios-note { padding-left: 28px; padding-right: 28px; }
    .message-list { min-height: 360px; }
}

@media (max-width: 699px) {
    .app-page {
        display: flex;
        min-height: 100vh;
        min-height: 100dvh;
        padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    }

    .home-shell,
    .conversation-shell {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: calc(100vh - 2rem);
        min-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
        margin: 0;
    }

    .home-shell .conversation-list {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .home-shell .empty-state { flex: 1 1 auto; }
    .home-shell .utility-toolbar { margin-top: auto; flex: 0 0 auto; }
    .home-shell .app-footer { flex: 0 0 auto; }

    .conversation-shell .message-list {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
    }

    .conversation-shell .message-form,
    .conversation-shell .app-footer { flex: 0 0 auto; }

    .section-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .conversation-create {
        width: 100%;
        min-height: 48px;
        border-color: transparent;
        background: var(--button-background);
        color: var(--button-text);
    }

    .conversation-create:hover { background: var(--button-hover); color: var(--button-text); text-decoration: none; }

    .utility-toolbar {
        align-items: stretch;
        justify-content: stretch;
        gap: 10px;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .utility-toolbar button { width: 100%; min-height: 48px; }
    .install-ios-note { padding-top: 18px; padding-bottom: 6px; }
    .app-footer { padding-top: 22px; padding-bottom: 22px; }
}

@media (max-width: 479px) {
    .remove-member-actions { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .unread-banner { align-items: flex-start; flex-direction: column; }
    .message-bubble { max-width: 82%; }
    .message-form { grid-template-columns: 1fr; }
    .message-form button { width: 100%; }
}