:root {
    --coral: #FF6F61;
    --blush: #DABEBE;
    --taupe: #A59B8D;
    --soft-white: #F5F5F5;
    --dusty-rose: #C1A192;

    --navy: #3D3734;
    --navy-soft: #5A504A;
    --cream: #F5F5F5;
    --cream-2: #DABEBE;
    --gold: #C1A192;
    --text: #302C2A;
    --muted: #756D67;

    --glass: rgba(245,245,245,.76);
    --glass-dark: rgba(72,62,58,.72);
    --border: rgba(255,255,255,.48);
    --shadow: 0 24px 70px rgba(71,58,53,.18);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 20% 10%, #fff8ee, transparent 35%),
        linear-gradient(135deg, #e8ded1, #f7f3ed 55%, #ddd2c3);
}

button, textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
}

.sidebar {
    padding: 30px 22px;
    background:
        linear-gradient(rgba(12,29,42,.91), rgba(12,29,42,.96)),
        radial-gradient(circle at top, #5f7180, #10202d);
    color: white;
}

.brand {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 30px;
    margin-bottom: 8px;
}

.tagline {
    color: rgba(255,255,255,.65);
    font-size: 13px;
    margin-bottom: 42px;
}

.nav {
    display: grid;
    gap: 8px;
}

.nav button {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    text-align: left;
    padding: 13px 15px;
    border-radius: 14px;
}

.nav button.active,
.nav button:hover {
    background: rgba(255,255,255,.12);
    color: white;
}

.main {
    padding: 28px;
    overflow: auto;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 11px;
    color: var(--muted);
}

.title {
    font-family: Georgia, serif;
    font-size: clamp(28px, 4vw, 44px);
    margin: 5px 0;
    font-weight: 500;
}

.status {
    padding: 9px 13px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 999px;
    font-size: 12px;
}

.hero {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: var(--shadow);
    background:
        linear-gradient(90deg, rgba(12,27,39,.72), rgba(12,27,39,.12)),
        radial-gradient(circle at 70% 35%, #9ba9ad, transparent 30%),
        linear-gradient(135deg, #314858, #b8afa2);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 52px;
    color: white;
}

.hero-label {
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 11px;
}

.hero h2 {
    font-family: Georgia, serif;
    font-size: clamp(35px, 5vw, 61px);
    line-height: 1.02;
    font-weight: 400;
    margin: 16px 0 22px;
}

.question-card {
    margin-top: 28px;
    padding: 22px;
    max-width: 590px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(18px);
    border-radius: 22px;
}

.question {
    font-family: Georgia, serif;
    font-size: 23px;
    line-height: 1.4;
    margin-bottom: 18px;
}

.answer {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    padding: 15px;
    outline: none;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.primary,
.secondary {
    border: 0;
    border-radius: 999px;
    padding: 12px 19px;
    font-weight: 600;
}

.primary {
    background: white;
    color: var(--navy);
}

.secondary {
    background: rgba(255,255,255,.14);
    color: white;
    border: 1px solid rgba(255,255,255,.25);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.card {
    background: var(--glass);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 40px rgba(20,32,44,.08);
}

.card h3 {
    font-family: Georgia, serif;
    font-weight: 500;
    margin: 0 0 8px;
}

.card p {
    color: var(--muted);
    line-height: 1.5;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.memory-list {
    display: grid;
    gap: 14px;
}

.memory {
    background: rgba(255,255,255,.78);
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.8);
}

.pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #efe7db;
    font-size: 11px;
    color: #685c4d;
}

.avatar-stage {
    min-height: 560px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
    background:
        radial-gradient(circle at 50% 28%, #a4a4a0, transparent 24%),
        linear-gradient(160deg, #6f716d, #202d37);
}

.avatar {
    width: 230px;
    height: 300px;
    border-radius: 46% 46% 30% 30%;
    background:
        radial-gradient(circle at 50% 25%, #d8c4ad 0 17%, transparent 18%),
        linear-gradient(#31383b 0 35%, #cbb8a2 36% 64%, #b8a58e 65%);
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
}

.avatar-overlay {
    position: absolute;
    bottom: 35px;
    width: min(90%, 580px);
    padding: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    backdrop-filter: blur(18px);
}

.wave {
    letter-spacing: 6px;
    opacity: .75;
    margin-bottom: 12px;
}

@media (max-width: 850px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 12px 16px;
    }

    .brand {
        font-size: 23px;
        display: inline-block;
        margin: 0 15px 0 0;
    }

    .tagline {
        display: none;
    }

    .nav {
        display: flex;
        overflow-x: auto;
        margin-top: 8px;
    }

    .nav button {
        white-space: nowrap;
    }

    .main {
        padding: 14px;
    }

    .hero {
        min-height: 610px;
    }

    .hero-content {
        padding: 28px 20px;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}

/* REMEMBER OFFICIAL PALETTE v0.4 */

html, body {
    background:
        radial-gradient(
            circle at 15% 5%,
            rgba(255,111,97,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(193,161,146,.28),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #F5F5F5,
            #DABEBE
        );
}

.sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(92,78,72,.97),
            rgba(58,51,48,.98)
        );
}

.nav button.active {
    background: rgba(255,111,97,.28);
}

.primary {
    background: #FF6F61;
    color: #FFFFFF;
}

.primary:hover {
    filter: brightness(.96);
}

.pill {
    background: #DABEBE;
    color: #514744;
}

.card {
    border-color: rgba(193,161,146,.32);
}

.hero {
    background:
        linear-gradient(
            90deg,
            rgba(59,50,47,.74),
            rgba(193,161,146,.22)
        ),
        radial-gradient(
            circle at 72% 35%,
            #DABEBE,
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #A59B8D,
            #C1A192
        );
}

.question-card {
    border-color: rgba(255,111,97,.28);
}

.answer:focus {
    border-color: #FF6F61;
    box-shadow: 0 0 0 3px rgba(255,111,97,.15);
}

::selection {
    background: #FF6F61;
    color: white;
}

/* =========================================================
   REMEMBER PALETTE V2
   ========================================================= */

:root {
    --remember-green: #7DAB85;
    --remember-pink: #EA9AB6;
    --remember-blue: #74C1E2;
    --remember-yellow: #FCED80;
    --remember-purple: #C4A0CE;
    --remember-orange: #F5A84A;

    --soft-white: #FAFAF8;
    --text: #343331;
    --muted: #77736F;

    --glass: rgba(255,255,255,.78);
    --border: rgba(255,255,255,.58);
}


/* MAIN CANVAS */

html,
body {
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(234,154,182,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(116,193,226,.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 90%,
            rgba(196,160,206,.16),
            transparent 30%
        ),
        #FAFAF8;
}


/* NAVIGATION */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #668E70,
            #46644E
        );
}

.nav button.active {
    background: rgba(252,237,128,.25);
    color: white;
}


/* HERO */

.hero {
    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(234,154,182,.85),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(116,193,226,.7),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #7DAB85,
            #C4A0CE
        );
}


/* INTERVIEW GLASS */

.question-card {
    background: rgba(255,255,255,.18);
    border:
        1px solid rgba(255,255,255,.42);
    backdrop-filter: blur(22px);
}


/* PRIMARY ACTION */

.primary {
    background: #F5A84A;
    color: #FFFFFF;
    box-shadow:
        0 8px 25px rgba(245,168,74,.25);
}

.primary:hover {
    filter: brightness(.96);
    transform: translateY(-1px);
}


/* INPUT */

.answer:focus {
    border-color: #74C1E2;
    box-shadow:
        0 0 0 4px rgba(116,193,226,.18);
}


/* GENERAL CARDS */

.card {
    background: rgba(255,255,255,.80);
    border:
        1px solid rgba(196,160,206,.20);
}


/* MEMORY CARDS */

.memory {
    border-left: 5px solid #7DAB85;
}


/* VERIFIED */

.pill {
    background: rgba(125,171,133,.18);
    color: #486B50;
}


/* CONVERSATION */

.avatar-stage {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(234,154,182,.75),
            transparent 25%
        ),
        linear-gradient(
            160deg,
            #74C1E2,
            #C4A0CE
        );
}


/* COLOR ACCENTS */

.accent-family {
    border-top: 4px solid #EA9AB6;
}

.accent-story {
    border-top: 4px solid #74C1E2;
}

.accent-memory {
    border-top: 4px solid #7DAB85;
}

.accent-highlight {
    border-top: 4px solid #FCED80;
}

.accent-ai {
    border-top: 4px solid #C4A0CE;
}


/* TEXT SELECTION */

::selection {
    background: #FCED80;
    color: #343331;
}

/* =========================================================
   REMEMBER — MORNING GARDEN THEME
   Cheerful • Pleasant • Calm
   ========================================================= */

:root {
    --sage:       #9FC5A8;
    --sky:        #A9D8E8;
    --blush:      #F2C6D3;
    --lavender:   #D5C5E3;
    --sunshine:   #F8E7A2;
    --peach:      #F4C3A1;

    --warm-white: #FFFDF9;
    --text:       #4A4745;
    --muted:      #77736F;

    --glass: rgba(255,253,249,.78);
    --border: rgba(255,255,255,.70);
    --shadow: 0 20px 55px rgba(82,76,72,.11);
}


/* PAGE */

html,
body {
    color: var(--text);

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(242,198,211,.24),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(169,216,232,.25),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(213,197,227,.20),
            transparent 30%
        ),
        #FFFDF9;
}


/* NAVIGATION */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #8FB69A,
            #789E83
        );

    box-shadow:
        8px 0 35px rgba(72,93,78,.10);
}

.nav button {
    color: rgba(255,255,255,.82);
}

.nav button.active {
    background: rgba(255,253,249,.24);
    color: white;
}


/* MAIN STORY AREA */

.hero {
    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(242,198,211,.80),
            transparent 27%
        ),

        radial-gradient(
            circle at 85% 78%,
            rgba(169,216,232,.72),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #9FC5A8,
            #D5C5E3
        );

    box-shadow:
        0 25px 70px rgba(95,92,100,.13);
}


/* GLASS QUESTION */

.question-card {
    background: rgba(255,253,249,.20);

    border:
        1px solid rgba(255,255,255,.50);

    backdrop-filter: blur(24px);

    box-shadow:
        0 18px 45px rgba(75,72,70,.08);
}


/* ANSWER AREA */

.answer {
    background: rgba(255,253,249,.94);
    color: #4A4745;
}

.answer:focus {
    border-color: #A9D8E8;

    box-shadow:
        0 0 0 4px rgba(169,216,232,.22);
}


/* MAIN ACTION */

.primary {
    background: #F4C3A1;
    color: #57483F;

    box-shadow:
        0 10px 26px rgba(244,195,161,.30);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(244,195,161,.36);
}


/* SECONDARY ACTION */

.secondary {
    background: rgba(255,255,255,.20);
}


/* CONTENT CARDS */

.card {
    background: rgba(255,253,249,.84);

    border:
        1px solid rgba(213,197,227,.22);

    box-shadow:
        0 12px 38px rgba(80,75,72,.07);
}


/* MEMORY */

.memory {
    background: rgba(255,253,249,.90);

    border-left:
        5px solid #9FC5A8;
}


/* VERIFIED */

.pill {
    background: rgba(159,197,168,.22);
    color: #55725D;
}


/* CONVERSATION / AVATAR */

.avatar-stage {
    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(242,198,211,.82),
            transparent 26%
        ),

        radial-gradient(
            circle at 20% 85%,
            rgba(248,231,162,.45),
            transparent 30%
        ),

        linear-gradient(
            155deg,
            #A9D8E8,
            #D5C5E3
        );
}

.avatar-overlay {
    background:
        rgba(255,253,249,.20);

    border:
        1px solid rgba(255,255,255,.55);

    backdrop-filter: blur(24px);
}


/* SEMANTIC ACCENTS */

.accent-memory {
    border-top: 4px solid #9FC5A8;
}

.accent-family {
    border-top: 4px solid #F2C6D3;
}

.accent-story {
    border-top: 4px solid #A9D8E8;
}

.accent-highlight {
    border-top: 4px solid #F8E7A2;
}

.accent-ai {
    border-top: 4px solid #D5C5E3;
}


/* SELECTION */

::selection {
    background: #F8E7A2;
    color: #4A4745;
}


/* =========================================================
   REMEMBER — CRISP GARDEN
   Bright • Cheerful • Calm • Sharp
   ========================================================= */

:root {
    --sage: #86B894;
    --sage-deep: #679C78;

    --sky: #75C9E6;
    --pink: #EDA5BE;
    --yellow: #FFE986;
    --lavender: #CBA9DA;
    --peach: #F6B36A;

    --white: #FFFFFF;
    --warm-white: #FFFCF7;

    --text: #353231;
    --muted: #6C6865;

    --shadow:
        0 14px 35px rgba(60,55,52,.10);
}


/* CLEAN BACKGROUND */

html,
body {
    background: #FFFCF7;
    color: var(--text);
}


/* CRISP SIDEBAR */

.sidebar {
    background: #86B894;
    box-shadow:
        6px 0 24px rgba(62,91,70,.10);
}

.brand {
    color: white;
    text-shadow: none;
}

.tagline {
    color: rgba(255,255,255,.88);
}

.nav button {
    color: rgba(255,255,255,.92);
}

.nav button:hover {
    background: rgba(255,255,255,.15);
}

.nav button.active {
    background: #FFFFFF;
    color: #527961;
}


/* TOP AREA */

.eyebrow {
    color: #866F78;
    font-weight: 700;
}

.title {
    color: #383433;
}

.status {
    background: white;
    border: 1px solid #EAE4DF;
    color: #4B4643;
    box-shadow:
        0 6px 18px rgba(50,45,42,.06);
}


/* HERO — BRIGHTER AND SHARPER */

.hero {
    background:
        radial-gradient(
            circle at 79% 30%,
            #EDA5BE 0%,
            #EDA5BE 12%,
            transparent 32%
        ),

        radial-gradient(
            circle at 88% 78%,
            #75C9E6 0%,
            #75C9E6 13%,
            transparent 34%
        ),

        linear-gradient(
            125deg,
            #86B894 0%,
            #9FC9AA 38%,
            #CBA9DA 100%
        );

    box-shadow:
        0 18px 45px rgba(65,60,57,.12);

    border:
        1px solid rgba(255,255,255,.75);
}


/* KEEP TEXT CRISP */

.hero-content {
    text-shadow: none;
}

.hero h2 {
    color: #FFFFFF;
    text-shadow:
        0 2px 8px rgba(54,62,57,.10);
}


/* QUESTION CARD — NO FOG */

.question-card {
    background: rgba(255,255,255,.92);

    border:
        1px solid rgba(255,255,255,.95);

    backdrop-filter: none;

    box-shadow:
        0 14px 32px rgba(58,54,51,.11);

    color: #353231;
}

.question-card .eyebrow {
    color: #7D6972 !important;
}

.question {
    color: #353231;
}


/* INPUT */

.answer {
    background: #FFFFFF;

    border:
        2px solid #E8E2DE;

    color: #353231;

    box-shadow: none;
}

.answer::placeholder {
    color: #99918B;
}

.answer:focus {
    border-color: #75C9E6;

    box-shadow:
        0 0 0 4px rgba(117,201,230,.20);
}


/* MAIN BUTTON */

.primary {
    background: #F6B36A;
    color: #463B33;

    box-shadow:
        0 8px 20px rgba(246,179,106,.25);

    border: none;
}

.primary:hover {
    background: #F8A94F;
    transform: translateY(-1px);
}


/* SECOND BUTTON */

.secondary {
    background: #FFFFFF;
    color: #5B5551;

    border:
        1px solid #E4DDDA;
}


/* CARDS */

.card {
    background: #FFFFFF;

    border:
        1px solid #EEE7E2;

    box-shadow:
        0 10px 28px rgba(63,58,54,.07);

    backdrop-filter: none;
}


/* DIFFERENT COLOR PERSONALITIES */

.grid .card:nth-child(1) {
    border-top: 6px solid #86B894;
}

.grid .card:nth-child(2) {
    border-top: 6px solid #75C9E6;
}

.grid .card:nth-child(3) {
    border-top: 6px solid #CBA9DA;
}


/* MEMORY CARDS */

.memory {
    background: #FFFFFF;

    border:
        1px solid #ECE5E0;

    border-left:
        6px solid #86B894;

    box-shadow:
        0 8px 24px rgba(60,55,52,.06);
}


/* LABELS */

.pill {
    background: #E2F1E6;
    color: #477257;
    font-weight: 700;
}


/* CONVERSATION SCREEN */

.avatar-stage {
    background:
        linear-gradient(
            135deg,
            #75C9E6 0%,
            #CBA9DA 55%,
            #EDA5BE 100%
        );

    box-shadow:
        0 18px 45px rgba(65,60,57,.12);
}

.avatar-overlay {
    background: #FFFFFF;
    color: #353231;

    border:
        1px solid #ECE6E2;

    backdrop-filter: none;

    box-shadow:
        0 12px 32px rgba(50,45,42,.12);
}


/* COLOR BLOSSOMS */

.hero::before {
    content: "";
    position: absolute;

    width: 230px;
    height: 230px;

    right: 7%;
    top: 9%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #FFE986 0 18%,
            #EDA5BE 19% 38%,
            #CBA9DA 39% 58%,
            transparent 59%
        );

    opacity: .32;
}

.hero::after {
    content: "";
    position: absolute;

    width: 170px;
    height: 170px;

    right: 20%;
    bottom: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #FFFFFF 0 16%,
            #75C9E6 17% 40%,
            #86B894 41% 60%,
            transparent 61%
        );

    opacity: .24;
}


/* SHARPER MOBILE */

@media (max-width: 850px) {

    .sidebar {
        background: #86B894;
    }

    .hero {
        border-radius: 24px;
    }

    .question-card {
        background: #FFFFFF;
    }
}


/* =========================================================
   REMEMBER PROFILE PORTRAIT
   ========================================================= */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
}

.hero-content {
    grid-column: 1;
}

.profile-panel {
    grid-column: 2;
    grid-row: 1;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 38px;
}

.profile-photo-wrap {
    width: 260px;
    height: 330px;

    position: relative;
    overflow: hidden;

    border-radius: 130px 130px 34px 34px;

    background: #FFFDF9;

    border: 5px solid rgba(255,255,255,.92);

    box-shadow:
        0 22px 48px rgba(56,51,48,.18);
}

.profile-photo {
    width: 100%;
    height: 100%;

    display: none;

    object-fit: cover;
    object-position: center;
}

.profile-photo.visible {
    display: block;
}

.photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 7px;

    color: #5E625F;

    background:
        linear-gradient(
            145deg,
            #F8E7A2,
            #F2C6D3 48%,
            #A9D8E8
        );
}

.photo-icon {
    font-size: 45px;
}

.photo-placeholder span {
    font-size: 12px;
    opacity: .75;
}

.photo-button {
    margin-top: 17px;

    padding: 11px 18px;

    border-radius: 999px;

    background: #FFFFFF;
    color: #4A4745;

    font-weight: 700;
    font-size: 13px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(60,55,52,.12);
}

.profile-caption {
    margin-top: 11px;

    color: white;

    font-family: Georgia, serif;
    font-size: 22px;
}

@media (max-width: 1050px) {

    .hero {
        grid-template-columns: 1fr;
    }

    .profile-panel {
        grid-column: 1;
        grid-row: 1;

        padding-bottom: 5px;
    }

    .hero-content {
        grid-column: 1;
        grid-row: 2;
    }

    .profile-photo-wrap {
        width: 190px;
        height: 235px;
    }
}


/* =========================================================
   REMEMBER PROFILE PORTRAIT
   ========================================================= */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
}

.hero-content {
    grid-column: 1;
}

.profile-panel {
    grid-column: 2;
    grid-row: 1;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 38px;
}

.profile-photo-wrap {
    width: 260px;
    height: 330px;

    position: relative;
    overflow: hidden;

    border-radius: 130px 130px 34px 34px;

    background: #FFFDF9;

    border: 5px solid rgba(255,255,255,.92);

    box-shadow:
        0 22px 48px rgba(56,51,48,.18);
}

.profile-photo {
    width: 100%;
    height: 100%;

    display: none;

    object-fit: cover;
    object-position: center;
}

.profile-photo.visible {
    display: block;
}

.photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 7px;

    color: #5E625F;

    background:
        linear-gradient(
            145deg,
            #F8E7A2,
            #F2C6D3 48%,
            #A9D8E8
        );
}

.photo-icon {
    font-size: 45px;
}

.photo-placeholder span {
    font-size: 12px;
    opacity: .75;
}

.photo-button {
    margin-top: 17px;

    padding: 11px 18px;

    border-radius: 999px;

    background: #FFFFFF;
    color: #4A4745;

    font-weight: 700;
    font-size: 13px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(60,55,52,.12);
}

.profile-caption {
    margin-top: 11px;

    color: white;

    font-family: Georgia, serif;
    font-size: 22px;
}

@media (max-width: 1050px) {

    .hero {
        grid-template-columns: 1fr;
    }

    .profile-panel {
        grid-column: 1;
        grid-row: 1;

        padding-bottom: 5px;
    }

    .hero-content {
        grid-column: 1;
        grid-row: 2;
    }

    .profile-photo-wrap {
        width: 190px;
        height: 235px;
    }
}


/* REMEMBER VOICE RECORDING */

#recordAnswer.recording {
    background: #EDA5BE;
    color: #4A3039;

    border-color: #FFFFFF;

    box-shadow:
        0 0 0 5px rgba(237,165,190,.20),
        0 10px 28px rgba(80,55,65,.14);

    animation:
        rememberRecordingPulse 1.7s ease-in-out infinite;
}

@keyframes rememberRecordingPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}


/* =========================================================
   REMEMBER CAMERA
   ========================================================= */

.photo-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 17px;
}

.photo-action-button {
    appearance: none;
    border: 1px solid #E8E1DC;
    background: #FFFFFF;
    color: #4A4745;

    padding: 11px 16px;
    border-radius: 999px;

    font-weight: 700;
    font-size: 13px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(60,55,52,.10);
}

.photo-action-button:hover {
    transform: translateY(-1px);
    border-color: #A9D8E8;
}


.camera-modal {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: none;
    place-items: center;

    padding: 20px;

    background:
        rgba(45,43,42,.62);
}

.camera-modal.open {
    display: grid;
}


.camera-dialog {
    width: min(94vw, 680px);

    background: #FFFDF9;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 30px 90px rgba(30,28,27,.28);
}


.camera-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22px 24px 16px;
}

.camera-header h2 {
    margin: 3px 0 0;

    font-family: Georgia, serif;
    font-weight: 500;
}

.camera-eyebrow {
    color: #7DAB85;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.camera-close {
    border: 0;
    background: transparent;

    font-size: 34px;
    color: #716B67;

    cursor: pointer;
}


.camera-stage {
    position: relative;

    margin: 0 20px;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #A9D8E8,
            #D5C5E3
        );
}


.camera-stage video,
.camera-stage img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.camera-stage video {
    transform: scaleX(-1);
}


.camera-message {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 35px;

    text-align: center;

    color: #4A4745;

    line-height: 1.6;
}


.camera-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;

    padding: 20px 24px 25px;
}


.camera-primary,
.camera-secondary {
    border-radius: 999px;

    padding: 12px 20px;

    font-weight: 800;

    cursor: pointer;
}


.camera-primary {
    border: 0;

    background: #F4C3A1;
    color: #4A403A;
}


.camera-secondary {
    background: #FFFFFF;
    color: #4A4745;

    border:
        1px solid #DDD6D1;
}


@media (max-width: 600px) {

    .camera-modal {
        padding: 0;
    }

    .camera-dialog {
        width: 100%;
        min-height: 100vh;

        border-radius: 0;
    }

    .camera-stage {
        margin: 0 12px;

        aspect-ratio: 3 / 4;
    }
}



/* =========================================================
   REMEMBER v0.6 — CONVERSATION
   ========================================================= */

.conversation-page {
    min-height: 100%;
}

.conversation-shell {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 38px 34px 46px;
}

.conversation-topbar {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;

    margin-bottom: 22px;
}

.conversation-topbar h1 {
    margin: 5px 0 7px;

    font-family: Georgia, serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 500;

    color: #45403D;
}

.conversation-topbar p {
    margin: 0;
    max-width: 580px;

    color: #77706B;
    line-height: 1.65;
}

.voice-settings {
    min-width: 245px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 14px 16px;

    background: rgba(255,255,255,.82);

    border:
        1px solid rgba(120,110,104,.13);

    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(65,55,50,.08);
}

.voice-setting-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.voice-setting-copy strong {
    color: #4D4743;
}

.voice-setting-copy span {
    font-size: 12px;
    color: #8A817B;
}


/* Voice toggle */

.remember-switch {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.remember-switch input {
    position: absolute;
    opacity: 0;
}

.switch-track {
    width: 52px;
    height: 30px;

    display: block;

    padding: 3px;

    background: #D7D2CE;
    border-radius: 999px;

    transition: .2s ease;
}

.switch-thumb {
    width: 24px;
    height: 24px;

    display: block;

    background: white;
    border-radius: 50%;

    box-shadow:
        0 3px 8px rgba(40,35,32,.18);

    transition: .2s ease;
}

.remember-switch input:checked +
.switch-track {
    background: #9CC8B0;
}

.remember-switch input:checked +
.switch-track .switch-thumb {
    transform: translateX(22px);
}


/* Status */

.conversation-status {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 15px;
    margin-bottom: 14px;

    color: #756E69;
    font-size: 13px;
}

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #9CC8B0;

    box-shadow:
        0 0 0 5px rgba(156,200,176,.15);
}

.conversation-mode {
    margin-left: auto;
    color: #9A918B;
}


/* Messages */

.conversation-messages {
    min-height: 420px;
    max-height: 58vh;

    overflow-y: auto;

    padding: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.83),
            rgba(252,248,245,.92)
        );

    border:
        1px solid rgba(110,100,95,.11);

    border-radius: 28px;

    box-shadow:
        0 20px 55px rgba(65,55,50,.09);
}

.chat-message {
    display: flex;
    gap: 13px;

    margin-bottom: 26px;
}

.chat-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    font-family: Georgia, serif;
    font-weight: 700;
}

.remember-message .chat-avatar {
    background: #E3F0E7;
    color: #557663;
}

.user-message {
    flex-direction: row-reverse;
}

.user-message .chat-avatar {
    background: #F5D8CA;
    color: #875F50;
}

.chat-content {
    max-width: min(76%, 680px);
}

.user-message .chat-content {
    text-align: right;
}

.chat-speaker {
    margin: 0 0 6px 5px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .09em;
    text-transform: uppercase;

    color: #9A918B;
}

.chat-bubble {
    padding: 16px 19px;

    border-radius: 21px;

    line-height: 1.65;

    color: #4D4845;

    background: #F1F7F2;
}

.remember-message .chat-bubble {
    border-top-left-radius: 7px;
}

.user-message .chat-bubble {
    background: #FFF0E8;
    border-top-right-radius: 7px;
}

.chat-tools {
    margin-top: 7px;
}

.chat-tool {
    border: 0;
    background: transparent;

    padding: 5px 7px;

    color: #8A817B;

    font-size: 12px;

    cursor: pointer;
}

.chat-tool:hover {
    color: #557663;
}


/* Composer */

.conversation-composer {
    margin-top: 16px;

    padding: 20px;

    background: rgba(255,255,255,.90);

    border:
        1px solid rgba(110,100,95,.12);

    border-radius: 24px;

    box-shadow:
        0 15px 40px rgba(65,55,50,.08);
}

.composer-heading {
    display: flex;
    justify-content: space-between;

    margin-bottom: 10px;

    color: #625B57;
}

.composer-heading span {
    color: #A09892;
    font-size: 13px;
}

#conversationInput {
    width: 100%;
    resize: vertical;

    border:
        1px solid #E3DDD8;

    outline: none;

    border-radius: 17px;

    padding: 15px 16px;

    font: inherit;
    line-height: 1.55;

    color: #4D4845;
    background: #FFFDFC;
}

#conversationInput:focus {
    border-color: #A9D1BA;

    box-shadow:
        0 0 0 4px rgba(169,209,186,.14);
}

.composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-top: 13px;
}

.conversation-talk,
.conversation-send {
    border: 0;
    border-radius: 999px;

    padding: 12px 19px;

    font-weight: 800;

    cursor: pointer;
}

.conversation-talk {
    background: #E6F1EA;
    color: #557663;
}

.conversation-send {
    background: #F4C8B5;
    color: #674A3F;
}

.composer-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.conversation-hint {
    font-size: 12px;
    color: #A09892;
}


@media (max-width: 760px) {

    .conversation-shell {
        padding: 24px 14px 32px;
    }

    .conversation-topbar {
        align-items: stretch;
        flex-direction: column;
    }

    .voice-settings {
        min-width: 0;
        width: 100%;
    }

    .conversation-messages {
        min-height: 360px;
        padding: 18px 14px;
    }

    .chat-content {
        max-width: 84%;
    }

    .composer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .composer-right {
        justify-content: space-between;
    }
}



/* =========================================================
   REMEMBER v0.6 — USER THEMES
   ========================================================= */

:root,
html[data-theme="earthy"] {

    --theme-primary: #4E9B68;
    --theme-secondary: #D1A12E;
    --theme-accent: #F55C20;
    --theme-soft: #E1C6A8;
    --theme-dark: #2C3E50;

    --theme-primary-soft: rgba(78,155,104,.15);
    --theme-accent-soft: rgba(245,92,32,.12);
}


html[data-theme="jungle"] {

    --theme-primary: #4CAF50;
    --theme-secondary: #FFC107;
    --theme-accent: #FF5722;
    --theme-soft: #03A9F4;
    --theme-dark: #5A2670;

    --theme-primary-soft: rgba(76,175,80,.15);
    --theme-accent-soft: rgba(255,87,34,.13);
}


html[data-theme="tropical"] {

    --theme-primary: #6CCB3F;
    --theme-secondary: #FFB300;
    --theme-accent: #FF6F20;
    --theme-soft: #49A6E8;
    --theme-dark: #5D4037;

    --theme-primary-soft: rgba(108,203,63,.15);
    --theme-accent-soft: rgba(255,111,32,.13);
}


html[data-theme="classic"] {

    --theme-primary: #3FBC5C;
    --theme-secondary: #F6A600;
    --theme-accent: #D92D2E;
    --theme-soft: #EDEDED;
    --theme-dark: #1A1A1A;

    --theme-primary-soft: rgba(63,188,92,.14);
    --theme-accent-soft: rgba(217,45,46,.11);
}


/* Apply themes */

.sidebar {
    background:
        linear-gradient(
            165deg,
            var(--theme-primary),
            color-mix(
                in srgb,
                var(--theme-primary) 76%,
                var(--theme-dark)
            )
        );
}

.nav button.active {
    background: rgba(255,255,255,.22);
    box-shadow:
        inset 4px 0 0
        var(--theme-secondary);
}

.eyebrow {
    color: var(--theme-accent);
}

.primary,
.conversation-send {
    background: var(--theme-accent);
    color: white;
}

.secondary,
.conversation-talk {
    border-color: var(--theme-primary);
    color: var(--theme-dark);
}

.status-dot {
    background: var(--theme-primary);

    box-shadow:
        0 0 0 5px
        var(--theme-primary-soft);
}

.remember-switch input:checked +
.switch-track {
    background: var(--theme-primary);
}

.remember-message .chat-avatar {
    background: var(--theme-primary-soft);
    color: var(--theme-dark);
}

.remember-message .chat-bubble {
    background:
        color-mix(
            in srgb,
            var(--theme-primary) 9%,
            white
        );
}

.user-message .chat-bubble {
    background:
        color-mix(
            in srgb,
            var(--theme-accent) 9%,
            white
        );
}

#conversationInput:focus {
    border-color: var(--theme-primary);

    box-shadow:
        0 0 0 4px
        var(--theme-primary-soft);
}


/* Theme picker */

.theme-picker {
    margin-top: auto;
    padding: 22px 20px 24px;

    border-top:
        1px solid rgba(255,255,255,.18);
}

.theme-label {
    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(255,255,255,.72);
}

.theme-options {
    display: flex;
    gap: 9px;
}

.theme-dot {
    width: 30px;
    height: 30px;

    padding: 4px;

    border:
        2px solid transparent;

    border-radius: 50%;

    background:
        rgba(255,255,255,.16);

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease;
}

.theme-dot span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;
}

.theme-dot:hover {
    transform: scale(1.10);
}

.theme-dot.active {
    border-color: white;
    transform: scale(1.10);
}

.theme-name {
    margin-top: 9px;

    font-size: 12px;

    color: rgba(255,255,255,.86);
}



/* =========================================================
   REMEMBER v0.6 - TRANSCRIPT REVIEW
   ========================================================= */

.transcript-review .chat-bubble {
    min-width: min(580px, 72vw);
}

.transcript-review-text {
    width: 100%;
    min-height: 105px;

    resize: vertical;

    border: 1px solid transparent;
    outline: none;

    padding: 3px;

    background: transparent;

    color: inherit;
    font: inherit;
    line-height: 1.65;
}

.transcript-review-text:not([readonly]) {
    margin-bottom: 8px;

    padding: 12px;

    background: white;

    border-color:
        var(--theme-primary, #9CC8B0);

    border-radius: 12px;

    box-shadow:
        0 0 0 4px
        var(--theme-primary-soft, rgba(156,200,176,.15));
}

.transcript-review-meta {
    margin-top: 8px;

    font-size: 11px;

    color: #9A918B;
}

.transcript-review-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 13px;
}

.transcript-edit-button,
.transcript-approve-button {
    border: 0;
    border-radius: 999px;

    padding: 9px 14px;

    font-weight: 750;

    cursor: pointer;
}

.transcript-edit-button {
    background: rgba(255,255,255,.72);
    color: #625B57;
}

.transcript-approve-button {
    background:
        var(--theme-primary, #9CC8B0);

    color: white;
}

.transcript-edit-button:disabled,
.transcript-approve-button:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 760px) {

    .transcript-review .chat-bubble {
        min-width: 0;
        width: 100%;
    }
}



/* =========================================================
   REMEMBER v0.8 - RESPONSIVE DEVICE SYSTEM
   Phone / Tablet / PC / TV
   ========================================================= */


/* ---------- UNIVERSAL ---------- */

:root {
    --remember-content-max: 1180px;
    --remember-page-pad: clamp(14px, 2.4vw, 38px);
    --remember-title-size: clamp(28px, 3vw, 48px);
    --remember-body-size: clamp(15px, 1.15vw, 18px);
}

* {
    box-sizing: border-box;
}

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

button,
textarea,
input {
    font: inherit;
}

button {
    min-height: 44px;
}

.main {
    min-width: 0;
}

.page {
    min-width: 0;
}


/* ---------- CONVERSATION UNIVERSAL ---------- */

#conversation .conversation-shell {
    width: 100%;
    max-width: var(--remember-content-max);
    margin-inline: auto;
}

#conversation #conversationMessages {
    min-width: 0;
}

#conversation .chat-message {
    max-width: 100%;
}

#conversation .chat-content {
    min-width: 0;
}

#conversation .chat-bubble {
    overflow-wrap: anywhere;
    font-size: var(--remember-body-size);
    line-height: 1.55;
}

#conversation .transcript-review .chat-bubble {
    min-width: 0;
    width: min(100%, 680px);
}

#conversation .conversation-composer {
    width: 100%;
}


/* =========================================================
   PHONE
   0 - 600px
   ========================================================= */

@media (max-width: 600px) {

    body {
        overflow: hidden;
    }

    .app {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100dvh;
        min-height: 0;
    }


    /* Sidebar becomes bottom navigation */

    .sidebar {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 100;

        width: 100%;
        height: 68px;
        min-height: 68px;

        padding: 5px 8px;

        overflow: visible;

        display: flex;
        align-items: center;

        border-radius: 0;
    }

    .sidebar .brand,
    .sidebar .tagline,
    .sidebar .theme-picker {
        display: none;
    }

    .nav {
        width: 100%;

        display: grid;
        grid-template-columns: repeat(4, 1fr);

        gap: 3px;
    }

    .nav button {
        min-width: 0;
        min-height: 54px;

        padding: 6px 3px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 2px;

        font-size: 11px;

        border-radius: 12px;
    }


    /* Main viewport */

    .main {
        width: 100%;
        height: calc(100dvh - 68px);

        padding: 0;

        overflow: hidden;
    }

    #conversation.page.active {
        width: 100%;
        height: calc(100dvh - 68px);

        min-height: 0;

        overflow: hidden;
    }

    #conversation .conversation-shell {
        height: 100%;

        padding:
            max(10px, env(safe-area-inset-top))
            12px
            10px;

        display: flex;
        flex-direction: column;

        min-height: 0;
    }


    /* Header */

    #conversation .conversation-topbar,
    #conversation .topbar {
        margin-bottom: 7px;
    }

    #conversation .eyebrow {
        font-size: 9px;
    }

    #conversation .title {
        font-size: 25px;
        line-height: 1.05;
    }


    /* Messages */

    #conversation .conversation-panel {
        flex: 1 1 auto;
        min-height: 0;
    }

    #conversation #conversationMessages {
        flex: 1 1 auto;

        min-height: 80px;

        padding:
            4px
            2px
            10px;

        overflow-y: auto;
    }

    #conversation .chat-message {
        margin-bottom: 8px;
        gap: 7px;
    }

    #conversation .chat-avatar {
        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 9px;
    }

    #conversation .chat-bubble {
        padding: 11px 13px;

        border-radius: 17px;

        font-size: 14px;
        line-height: 1.45;
    }


    /* Composer */

    #conversation .conversation-composer {
        flex: 0 0 auto;

        margin-top: 5px;

        padding: 9px 10px;

        border-radius: 18px;
    }

    #conversation #conversationInput {
        min-height: 48px;
        max-height: 72px;

        padding: 10px 12px;

        font-size: 16px;
    }

    #conversation .conversation-actions {
        margin-top: 7px;

        gap: 6px;
    }

    #conversation .conversation-actions button {
        min-height: 44px;

        padding: 8px 12px;
    }


    /* Transcript review */

    .transcript-review-text {
        min-height: 70px;
    }

    .transcript-review-actions {
        gap: 5px;
    }

}


/* =========================================================
   TABLET PORTRAIT / SMALL TABLET
   601 - 900px
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .app {
        grid-template-columns: 82px minmax(0, 1fr);
        height: 100dvh;
    }

    .sidebar {
        width: 82px;
        height: 100dvh;

        padding: 18px 8px;
    }

    .sidebar .brand {
        font-size: 15px;
        text-align: center;
    }

    .sidebar .tagline {
        display: none;
    }

    .nav button {
        padding: 12px 5px;

        text-align: center;

        font-size: 11px;
    }

    .theme-picker {
        padding: 14px 4px;
    }

    .theme-label,
    .theme-name {
        text-align: center;
    }

    .theme-options {
        justify-content: center;
        flex-wrap: wrap;
    }

    .main {
        height: 100dvh;
        min-width: 0;
    }

    #conversation.page.active {
        height: 100dvh;
    }

    #conversation .conversation-shell {
        padding: 18px 20px;
    }

    #conversation .title {
        font-size: 34px;
    }

    #conversation #conversationInput {
        min-height: 62px;
        max-height: 90px;
    }

}


/* =========================================================
   TABLET LANDSCAPE / LAPTOP
   901 - 1366px
   ========================================================= */

@media (min-width: 901px) and (max-width: 1366px) {

    .app {
        grid-template-columns:
            clamp(190px, 19vw, 250px)
            minmax(0, 1fr);
    }

    .sidebar {
        height: 100vh;
    }

    #conversation .conversation-shell {
        max-width: 1040px;

        padding: 16px 26px;
    }

    #conversation .title {
        font-size: clamp(32px, 3vw, 42px);
    }

    #conversation #conversationInput {
        min-height: 58px;
        max-height: 84px;
    }

}


/* =========================================================
   DESKTOP
   1367 - 1919px
   ========================================================= */

@media (min-width: 1367px) and (max-width: 1919px) {

    .app {
        grid-template-columns:
            clamp(230px, 17vw, 300px)
            minmax(0, 1fr);
    }

    #conversation .conversation-shell {
        max-width: 1180px;
        padding: 20px 34px;
    }

    #conversation #conversationMessages {
        padding-inline: 6px;
    }

}


/* =========================================================
   LARGE DESKTOP / TV
   1920px+
   ========================================================= */

@media (min-width: 1920px) {

    :root {
        --remember-content-max: 1500px;
        --remember-body-size: clamp(18px, 1.05vw, 24px);
    }

    .app {
        grid-template-columns:
            clamp(290px, 16vw, 380px)
            minmax(0, 1fr);
    }

    .sidebar {
        padding:
            clamp(28px, 3vh, 54px)
            clamp(22px, 2vw, 42px);

        height: 100vh;
    }

    .brand {
        font-size: clamp(28px, 1.8vw, 40px);
    }

    .tagline {
        font-size: clamp(13px, .8vw, 18px);
    }

    .nav button {
        min-height: 58px;

        padding: 14px 18px;

        font-size: clamp(16px, .9vw, 21px);
    }

    #conversation .conversation-shell {
        max-width: 1500px;

        padding:
            clamp(28px, 3vh, 54px)
            clamp(42px, 4vw, 78px);
    }

    #conversation .title {
        font-size: clamp(46px, 3vw, 68px);
    }

    #conversation .eyebrow {
        font-size: clamp(12px, .75vw, 17px);
    }

    #conversation .chat-bubble {
        max-width: 900px;

        padding: 18px 23px;

        font-size: clamp(18px, 1vw, 23px);
    }

    #conversation .chat-avatar {
        width: 50px;
        height: 50px;

        min-width: 50px;
    }

    #conversation .conversation-composer {
        max-width: 1200px;

        margin-inline: auto;

        padding: 20px 24px;
    }

    #conversation #conversationInput {
        min-height: 82px;
        max-height: 120px;

        padding: 18px;

        font-size: clamp(18px, 1vw, 22px);
    }

    #conversation .conversation-actions button {
        min-height: 54px;

        padding: 12px 20px;

        font-size: clamp(16px, .9vw, 20px);
    }

}


/* =========================================================
   4K TV
   ========================================================= */

@media (min-width: 3000px) {

    :root {
        --remember-content-max: 2100px;
    }

    .app {
        grid-template-columns: 480px minmax(0, 1fr);
    }

    .brand {
        font-size: 52px;
    }

    .tagline {
        font-size: 22px;
    }

    .nav button {
        min-height: 82px;
        font-size: 26px;
    }

    #conversation .conversation-shell {
        max-width: 2100px;

        padding: 60px 100px;
    }

    #conversation .title {
        font-size: 82px;
    }

    #conversation .chat-bubble {
        max-width: 1250px;

        padding: 26px 32px;

        font-size: 30px;
        line-height: 1.5;
    }

    #conversation .chat-avatar {
        width: 68px;
        height: 68px;

        min-width: 68px;
    }

    #conversation #conversationInput {
        min-height: 110px;

        font-size: 28px;
    }

    #conversation .conversation-actions button {
        min-height: 72px;

        padding: 16px 28px;

        font-size: 25px;
    }

}



/* =========================================================
   REMEMBER v0.8.1 - CONVERSATION VIEWPORT FIX
   Final authoritative layout rules
   ========================================================= */

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    min-height: 0 !important;
}


/* Main application shell */

.app {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;

    overflow: hidden !important;
}

.sidebar {
    height: 100dvh !important;
    min-height: 0 !important;
}

.main {
    height: 100dvh !important;
    min-height: 0 !important;

    overflow: hidden !important;
}


/* All inactive pages remain hidden */

.page {
    display: none;
}

.page.active {
    display: block;
}


/* Conversation owns exactly the available viewport */

#conversation.page.active {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}


/* Conversation shell */

#conversation .conversation-shell {
    width: 100% !important;
    max-width: 1180px !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    padding:
        clamp(10px, 1.6vh, 20px)
        clamp(16px, 2.5vw, 36px)
        clamp(10px, 1.5vh, 18px) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* Header cannot consume the page */

#conversation .topbar,
#conversation .conversation-topbar {
    flex: 0 0 auto !important;

    min-height: 0 !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

#conversation .title {
    margin:
        2px
        0
        4px !important;

    font-size:
        clamp(26px, 4vh, 42px) !important;

    line-height: 1.05 !important;
}

#conversation .eyebrow {
    margin: 0 !important;
}


/* Voice controls/status must remain compact */

#conversation .conversation-controls,
#conversation .conversation-toolbar {
    flex: 0 0 auto !important;

    margin: 0 0 8px !important;
}


/* Main conversation card consumes remaining height */

#conversation .conversation-panel {
    flex: 1 1 0 !important;

    width: 100% !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
}


/* THIS is the scrolling region */

#conversation #conversationMessages {
    flex: 1 1 0 !important;

    width: 100% !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding:
        8px
        8px
        10px !important;

    margin: 0 !important;

    overscroll-behavior: contain;
}


/* Don't allow individual messages to inflate the layout */

#conversation .chat-message {
    flex: 0 0 auto !important;

    margin-bottom: 8px !important;
}

#conversation .chat-bubble {
    padding: 11px 15px !important;

    line-height: 1.45 !important;
}


/* Composer is always visible */

#conversation .conversation-composer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 7px 0 0 !important;

    padding: 10px 14px !important;

    border-radius: 18px !important;
}

#conversation #conversationInput {
    width: 100% !important;

    min-height: 48px !important;
    height: 56px !important;
    max-height: 72px !important;

    padding: 10px 13px !important;

    resize: none !important;
}

#conversation .conversation-actions {
    margin-top: 7px !important;
}


/* Short laptop screens */

@media (min-width: 761px) and (max-height: 850px) {

    #conversation .conversation-shell {
        padding:
            8px
            22px
            8px !important;
    }

    #conversation .title {
        font-size: 28px !important;
    }

    #conversation .topbar,
    #conversation .conversation-topbar {
        margin-bottom: 5px !important;
    }

    #conversation .chat-bubble {
        padding: 9px 13px !important;
    }

    #conversation .conversation-composer {
        margin-top: 5px !important;
        padding: 8px 12px !important;
    }

    #conversation #conversationInput {
        height: 48px !important;
        min-height: 48px !important;
    }

}


/* Phone */

@media (max-width: 600px) {

    .main {
        height:
            calc(100dvh - 68px) !important;
    }

    #conversation.page.active {
        height:
            calc(100dvh - 68px) !important;

        max-height:
            calc(100dvh - 68px) !important;
    }

    #conversation .conversation-shell {
        padding:
            8px
            10px
            7px !important;
    }

    #conversation .title {
        font-size: 24px !important;
    }

    #conversation #conversationInput {
        height: 46px !important;
        min-height: 46px !important;
    }

}



/* =========================================================
   REMEMBER v0.8.2 - MY STORY VIEWPORT FIT
   ========================================================= */


/* Desktop My Story must fit one visible screen */

@media (min-width: 901px) {

    #story.page.active {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;

        padding:
            clamp(14px, 2vh, 28px)
            clamp(22px, 2.5vw, 48px)
            clamp(12px, 1.5vh, 20px) !important;

        overflow: hidden !important;
    }


    /* Compact top heading */

    #story .topbar {
        min-height: 0 !important;

        margin-bottom:
            clamp(10px, 1.5vh, 18px) !important;
    }

    #story .eyebrow {
        margin-bottom: 4px !important;

        font-size:
            clamp(10px, 1.2vh, 13px) !important;
    }

    #story .title {
        margin: 0 !important;

        font-size:
            clamp(38px, 5.3vh, 58px) !important;

        line-height: 1 !important;
    }


    /* Hero fills remaining screen */

    #story .hero {
        height:
            calc(100dvh - clamp(92px, 12vh, 132px)) !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            clamp(26px, 4vh, 52px)
            clamp(34px, 3.5vw, 64px) !important;

        overflow: hidden !important;
    }


    /* Main legacy headline */

    #story .hero h2,
    #story .hero-title {
        margin:
            0
            0
            clamp(16px, 2vh, 24px) !important;

        font-size:
            clamp(44px, 7vh, 72px) !important;

        line-height: 1.03 !important;
    }


    /* Question / answer card */

    #story .question-card,
    #story .story-card {
        max-height:
            calc(100dvh - 360px) !important;

        padding:
            clamp(18px, 2.2vh, 28px) !important;
    }

    #story .question {
        margin-bottom:
            clamp(10px, 1.4vh, 16px) !important;

        font-size:
            clamp(22px, 2.8vh, 30px) !important;

        line-height: 1.2 !important;
    }

    #story textarea {
        min-height: 86px !important;
        height: clamp(86px, 13vh, 132px) !important;
        max-height: 132px !important;

        padding: 14px 16px !important;

        resize: none !important;
    }

    #story .actions {
        margin-top:
            clamp(10px, 1.4vh, 16px) !important;
    }

    #story .actions button {
        min-height: 44px !important;

        padding:
            10px
            20px !important;
    }


    /* Profile/photo area */

    #story .profile-panel {
        min-height: 0 !important;
    }

    #story .profile-photo {
        max-height:
            clamp(250px, 42vh, 390px) !important;

        object-fit: cover !important;
    }

}


/* =========================================================
   SHORT LAPTOP / 1080p WITH TASKBAR
   ========================================================= */

@media (min-width: 901px) and (max-height: 900px) {

    #story.page.active {
        padding:
            10px
            28px
            8px !important;
    }

    #story .topbar {
        margin-bottom: 8px !important;
    }

    #story .title {
        font-size: 38px !important;
    }

    #story .hero {
        height:
            calc(100dvh - 78px) !important;

        padding:
            22px
            42px !important;
    }

    #story .hero h2,
    #story .hero-title {
        font-size: 48px !important;

        margin-bottom: 12px !important;
    }

    #story textarea {
        height: 82px !important;
        min-height: 82px !important;
    }

    #story .profile-photo {
        max-height: 300px !important;
    }

}


/* =========================================================
   VERY SHORT LAPTOP
   ========================================================= */

@media (min-width: 901px) and (max-height: 760px) {

    #story .title {
        font-size: 32px !important;
    }

    #story .hero {
        height:
            calc(100dvh - 68px) !important;

        padding:
            15px
            32px !important;
    }

    #story .hero h2,
    #story .hero-title {
        font-size: 40px !important;
    }

    #story textarea {
        height: 62px !important;
        min-height: 62px !important;
    }

    #story .profile-photo {
        max-height: 230px !important;
    }

    #story .actions button {
        min-height: 40px !important;
        padding: 8px 16px !important;
    }

}



/* =========================================================
   REMEMBER - COMPACT CAMERA / PHOTO MODAL
   ========================================================= */

#cameraModal {
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
}

#cameraModal .camera-dialog,
#cameraModal .modal-card,
#cameraModal .camera-card {
    width: min(92vw, 680px) !important;
    max-width: 680px !important;

    height: auto !important;
    max-height: 88dvh !important;

    padding: 18px !important;

    overflow-y: auto !important;

    border-radius: 24px !important;
}


/* Live camera */

#cameraModal video,
#cameraModal #cameraPreview {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-height: 480px !important;

    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;

    border-radius: 18px !important;
}


/* Captured photo preview */

#cameraModal canvas,
#cameraModal #capturedPhoto {
    width: 100% !important;
    height: auto !important;

    max-height: 480px !important;

    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;

    border-radius: 18px !important;
}


/* Compact modal title */

#cameraModal h2,
#cameraModal h3 {
    margin:
        0
        40px
        12px
        0 !important;

    font-size: 28px !important;
}


/* Phone */

@media (max-width: 600px) {

    #cameraModal {
        padding: 12px !important;
    }

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: 100% !important;
        max-width: 440px !important;

        padding: 12px !important;

        border-radius: 18px !important;
    }

    #cameraModal video,
    #cameraModal #cameraPreview,
    #cameraModal canvas,
    #cameraModal #capturedPhoto {
        max-height: 52dvh !important;
    }

}



/* =========================================================
   REMEMBER - CAMERA MODAL FINAL COMPACT SIZE
   ========================================================= */

#cameraModal {
    padding: 12px !important;
    overflow: hidden !important;
}

#cameraModal .camera-dialog,
#cameraModal .modal-card,
#cameraModal .camera-card {
    width: min(90vw, 560px) !important;
    max-width: 560px !important;

    height: auto !important;
    max-height: calc(100dvh - 24px) !important;

    padding: 14px !important;

    overflow: hidden !important;

    border-radius: 20px !important;
}


/* Camera and captured image */

#cameraModal video,
#cameraModal #cameraPreview,
#cameraModal canvas,
#cameraModal #capturedPhoto {
    width: 100% !important;

    height: min(42dvh, 360px) !important;
    max-height: 360px !important;

    aspect-ratio: 4 / 3 !important;

    object-fit: cover !important;

    border-radius: 15px !important;
}


/* Smaller heading */

#cameraModal h2,
#cameraModal h3 {
    margin: 0 36px 8px 0 !important;

    font-size: 23px !important;
    line-height: 1.1 !important;
}


/* Compact camera controls */

#cameraModal .camera-actions,
#cameraModal .modal-actions {
    margin-top: 10px !important;

    gap: 8px !important;
}

#cameraModal button {
    min-height: 40px !important;

    padding: 8px 14px !important;
}


/* Tablet */

@media (max-width: 900px) {

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: min(92vw, 520px) !important;
    }

    #cameraModal video,
    #cameraModal #cameraPreview,
    #cameraModal canvas,
    #cameraModal #capturedPhoto {
        height: min(40dvh, 330px) !important;
    }
}


/* Phone */

@media (max-width: 600px) {

    #cameraModal {
        padding: 8px !important;
    }

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: min(94vw, 420px) !important;

        max-height: calc(100dvh - 16px) !important;

        padding: 10px !important;
    }

    #cameraModal video,
    #cameraModal #cameraPreview,
    #cameraModal canvas,
    #cameraModal #capturedPhoto {
        height: min(38dvh, 280px) !important;
    }

    #cameraModal h2,
    #cameraModal h3 {
        font-size: 20px !important;
    }
}



/* =========================================================
   REMEMBER - CAMERA SINGLE PREVIEW FIX
   ========================================================= */

#cameraModal {
    overflow: hidden !important;
}

#cameraModal .camera-dialog,
#cameraModal .modal-card,
#cameraModal .camera-card {
    width: min(88vw, 520px) !important;
    max-width: 520px !important;

    max-height: 94dvh !important;

    padding: 16px !important;

    overflow: hidden !important;
}


/* Live camera and captured image occupy ONE preview area */

#cameraPreview,
#capturedPhoto {
    width: 100% !important;

    height: min(44dvh, 330px) !important;
    max-height: 330px !important;

    margin: 0 !important;

    object-fit: cover !important;

    border-radius: 16px !important;
}


/* Never reserve space for a hidden preview */

#cameraPreview[hidden],
#capturedPhoto[hidden] {
    display: none !important;
}


/* Captured photo should behave like the camera preview */

#capturedPhoto {
    display: block;
}


/* Compact header */

#cameraModal h2,
#cameraModal h3 {
    margin: 0 42px 10px 0 !important;

    font-size: 24px !important;
    line-height: 1.05 !important;
}


/* Keep buttons inside the modal */

#cameraModal .camera-actions,
#cameraModal .modal-actions {
    margin-top: 10px !important;

    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 8px !important;
}

#cameraModal button {
    min-height: 40px !important;

    padding: 8px 16px !important;
}


/* Phone */

@media (max-width: 600px) {

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: min(94vw, 400px) !important;

        padding: 10px !important;
    }

    #cameraPreview,
    #capturedPhoto {
        height: min(40dvh, 260px) !important;
    }
}


#capturedPhoto:not([src]),
#capturedPhoto[src=""] {
    display: none !important;
}



/* =========================================================
   REMEMBER - CAMERA FULL IMAGE FIX
   Show entire camera frame without cropping
   ========================================================= */

#cameraPreview,
#capturedPhoto {
    width: 100% !important;

    height: auto !important;
    max-height: 330px !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    background: #111 !important;

    border-radius: 16px !important;
}


/* Hidden preview must occupy zero space */

#cameraPreview[hidden],
#capturedPhoto[hidden],
#capturedPhoto:not([src]),
#capturedPhoto[src=""] {
    display: none !important;
}


/* Phone */

@media (max-width: 600px) {

    #cameraPreview,
    #capturedPhoto {
        max-height: 260px !important;
    }
}



/* =========================================================
   REMEMBER v0.9 - CAMERA FINAL RESPONSIVE FIX
   Full image, single preview, scroll only when necessary
   ========================================================= */

#cameraModal {
    padding: 18px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* Modal */

#cameraModal .camera-dialog,
#cameraModal .modal-card,
#cameraModal .camera-card {
    width: min(92vw, 580px) !important;
    max-width: 580px !important;

    height: auto !important;
    max-height: none !important;

    margin: auto !important;
    padding: 18px !important;

    overflow: visible !important;

    border-radius: 22px !important;
}


/* ---------------------------------------------------------
   ONE PREVIEW AREA
   Never crop the webcam or captured photo
   --------------------------------------------------------- */

#cameraPreview,
#capturedPhoto {
    display: block;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: min(58dvh, 430px) !important;

    margin: 0 auto !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    background: #111 !important;

    border-radius: 16px !important;
}


/* A hidden preview must consume NO space */

#cameraPreview[hidden],
#capturedPhoto[hidden],
#capturedPhoto:not([src]),
#capturedPhoto[src=""] {
    display: none !important;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

#cameraModal h2,
#cameraModal h3 {
    margin: 0 46px 12px 0 !important;

    font-size: clamp(22px, 3vw, 30px) !important;
    line-height: 1.1 !important;
}


/* ---------------------------------------------------------
   Controls
   --------------------------------------------------------- */

#cameraModal .camera-actions,
#cameraModal .modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 10px !important;

    margin-top: 12px !important;
}

#cameraModal button {
    min-height: 42px !important;

    padding: 9px 17px !important;
}


/* ---------------------------------------------------------
   Short desktop/laptop
   Modal may scroll instead of cropping content
   --------------------------------------------------------- */

@media (min-width: 601px) and (max-height: 800px) {

    #cameraModal {
        align-items: flex-start !important;

        padding-top: 12px !important;
        padding-bottom: 12px !important;

        overflow-y: auto !important;
    }

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: min(88vw, 520px) !important;

        margin: 0 auto !important;

        padding: 14px !important;
    }

    #cameraPreview,
    #capturedPhoto {
        max-height: 60vh !important;
    }
}


/* ---------------------------------------------------------
   Phone
   --------------------------------------------------------- */

@media (max-width: 600px) {

    #cameraModal {
        padding: 8px !important;

        align-items: flex-start !important;

        overflow-y: auto !important;
    }

    #cameraModal .camera-dialog,
    #cameraModal .modal-card,
    #cameraModal .camera-card {
        width: 100% !important;
        max-width: 440px !important;

        margin: 0 auto !important;

        padding: 11px !important;

        border-radius: 18px !important;
    }

    #cameraPreview,
    #capturedPhoto {
        width: 100% !important;
        height: auto !important;

        max-height: 55dvh !important;

        object-fit: contain !important;
    }

    #cameraModal h2,
    #cameraModal h3 {
        margin-bottom: 8px !important;

        font-size: 21px !important;
    }
}



/* =========================================================
   REMEMBER - REMOVE EMPTY CAPTURED PHOTO PANEL
   ========================================================= */

/*
 * A captured image must not occupy any space until JavaScript
 * has actually populated it.
 */

#capturedPhoto {
    display: none !important;
}


/*
 * JavaScript will add this class after a real capture.
 */

#capturedPhoto.remember-photo-ready {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-height: min(58dvh, 430px) !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    border-radius: 16px !important;
}


/*
 * When displaying the captured photograph,
 * hide the live camera so there is still only ONE image box.
 */

#cameraPreview.remember-camera-hidden {
    display: none !important;
}



/* =========================================================
   REMEMBER v0.9.1 - CAMERA DEFINITIVE FIX
   cameraVideo = LIVE
   cameraPreview = CAPTURED PHOTO
   ========================================================= */


/* Hidden means hidden. No previous rule may override this. */

#cameraModal [hidden] {
    display: none !important;
}


/* Camera stage contains exactly ONE visible image */

#cameraModal .camera-stage {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #111 !important;

    border-radius: 18px !important;
}


/* LIVE CAMERA */

#cameraModal #cameraVideo {
    display: block;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 430px !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    background: #111 !important;

    border-radius: 18px !important;
}


/* CAPTURED PHOTO */

#cameraModal #cameraPreview {
    display: block;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 430px !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    background: #111 !important;

    border-radius: 18px !important;
}


/* Canvas is processing-only */

#cameraModal #cameraCanvas {
    display: none !important;
}


/* Modal can scroll only if screen is too short */

#cameraModal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* Compact dialog */

#cameraModal .camera-dialog {
    width: min(92vw, 580px) !important;
    max-width: 580px !important;

    height: auto !important;

    margin: auto !important;

    padding: 18px !important;

    overflow: visible !important;
}


/* Short screens */

@media (max-height: 800px) {

    #cameraModal {
        align-items: flex-start !important;
        padding: 10px !important;
    }

    #cameraModal .camera-dialog {
        width: min(90vw, 520px) !important;
        margin: 0 auto !important;
    }

    #cameraModal #cameraVideo,
    #cameraModal #cameraPreview {
        max-height: 58vh !important;
    }
}


/* Phones */

@media (max-width: 600px) {

    #cameraModal {
        padding: 8px !important;
    }

    #cameraModal .camera-dialog {
        width: 100% !important;
        max-width: 430px !important;

        padding: 11px !important;
    }

    #cameraModal #cameraVideo,
    #cameraModal #cameraPreview {
        max-height: 52dvh !important;
    }
}



/* =========================================================
   REMEMBER v0.9.2 - CAMERA NATURAL ASPECT RATIO
   ========================================================= */

#cameraModal .camera-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: block !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    overflow: hidden !important;

    border-radius: 18px !important;
}


/* Live camera - preserve webcam's native aspect ratio */

#cameraModal #cameraVideo {
    display: block;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: min(55dvh, 430px) !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    border-radius: 18px !important;
}


/* Captured image uses the same space */

#cameraModal #cameraPreview {
    display: block;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: min(55dvh, 430px) !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    border-radius: 18px !important;
}


/* Hidden always wins */

#cameraModal #cameraVideo[hidden],
#cameraModal #cameraPreview[hidden],
#cameraModal #cameraCanvas[hidden] {
    display: none !important;
}


/* Keep controls close to picture */

#cameraModal .camera-controls {
    margin-top: 14px !important;
}


/* Allow scrolling only on genuinely short displays */

#cameraModal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

@media (max-height: 760px) {

    #cameraModal #cameraVideo,
    #cameraModal #cameraPreview {
        max-height: 52vh !important;
    }
}



/* =========================================================
   REMEMBER v0.10 - LIFEBOOK MEDIA HUB
   ========================================================= */

#memories.page.active {
    overflow-y: auto;
}

.memory-tabs {
    display: flex;
    gap: 8px;

    margin:
        0
        0
        24px;

    padding: 5px;

    width: fit-content;

    border-radius: 18px;

    background:
        rgba(255,255,255,.55);

    box-shadow:
        0 10px 30px
        rgba(30,40,50,.07);
}

.memory-tab {
    min-height: 44px;

    padding: 10px 20px;

    border: 0;
    border-radius: 14px;

    background: transparent;

    cursor: pointer;

    font-weight: 700;
}

.memory-tab.active {
    background: var(
        --theme-primary,
        #4E9B68
    );

    color: white;

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.12);
}

.memory-tab-panel {
    display: none;
}

.memory-tab-panel.active {
    display: block;
}


/* Gallery header */

.media-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 24px;

    margin-bottom: 22px;
}

.media-gallery-header h2 {
    margin: 0 0 5px;

    font-size:
        clamp(25px, 3vw, 38px);
}

.media-gallery-header p {
    margin: 0;

    max-width: 620px;

    opacity: .72;
}

.media-gallery-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.media-action-button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 17px;

    border: 1px solid
        rgba(0,0,0,.12);

    border-radius: 14px;

    background: white;

    cursor: pointer;

    font-weight: 700;
}

.media-action-button.primary {
    border-color:
        var(--theme-primary, #4E9B68);

    background:
        var(--theme-primary, #4E9B68);

    color: white;
}


/* Photos */

.photo-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );

    gap: 16px;
}

.photo-card {
    position: relative;

    overflow: hidden;

    min-width: 0;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 10px 28px
        rgba(30,40,50,.10);

    cursor: pointer;
}

.photo-card-image {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    background: #eee;
}

.photo-card-copy {
    padding: 12px 14px 14px;
}

.photo-card-title {
    margin: 0 0 3px;

    font-weight: 800;
}

.photo-card-caption {
    margin: 0;

    font-size: 13px;

    opacity: .67;
}


/* Videos */

.video-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        );

    gap: 18px;
}

.video-card {
    overflow: hidden;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 10px 28px
        rgba(30,40,50,.10);
}

.video-card video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: contain;

    background: #111;
}

.video-card-copy {
    padding: 12px 14px 15px;
}


/* Status / empty */

.media-gallery-status {
    min-height: 20px;

    margin-bottom: 12px;

    font-size: 13px;

    opacity: .72;
}

.media-gallery-empty {
    padding: 48px 24px;

    text-align: center;

    border: 1px dashed
        rgba(0,0,0,.16);

    border-radius: 24px;

    background:
        rgba(255,255,255,.38);
}

.media-empty-icon {
    margin-bottom: 10px;

    font-size: 42px;

    opacity: .5;
}


/* Photo lightbox */

.photo-lightbox {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: none;

    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 40px;

    background:
        rgba(12,17,22,.92);
}

.photo-lightbox.open {
    display: flex;
}

.photo-lightbox img {
    display: block;

    max-width: min(92vw, 1500px);
    max-height: 82vh;

    object-fit: contain;

    border-radius: 12px;
}

.photo-lightbox-close {
    position: absolute;

    top: 18px;
    right: 24px;

    width: 48px;
    height: 48px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255,255,255,.14);

    color: white;

    font-size: 32px;

    cursor: pointer;
}

.photo-lightbox-caption {
    margin-top: 14px;

    max-width: 900px;

    color: white;

    text-align: center;
}


/* Phone */

@media (max-width: 600px) {

    .memory-tabs {
        width: 100%;

        display: grid;
        grid-template-columns:
            repeat(3, 1fr);

        margin-bottom: 16px;
    }

    .memory-tab {
        padding: 9px 5px;

        font-size: 12px;
    }

    .media-gallery-header {
        align-items: stretch;
        flex-direction: column;

        gap: 14px;
    }

    .media-gallery-actions {
        display: grid;
        grid-template-columns:
            repeat(2, 1fr);
    }

    .photo-gallery {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 9px;
    }

    .photo-card {
        border-radius: 14px;
    }

    .photo-card-copy {
        padding: 9px;
    }

    .video-gallery {
        grid-template-columns: 1fr;
    }

    .photo-lightbox {
        padding: 18px;
    }
}


/* TV */

@media (min-width: 1920px) {

    .photo-gallery {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(280px,1fr)
            );

        gap: 24px;
    }

    .video-gallery {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(400px,1fr)
            );

        gap: 26px;
    }

    .memory-tab,
    .media-action-button {
        min-height: 54px;

        font-size: 18px;
    }
}



/* =========================================================
   REMEMBER v0.11 - LIFEBOOK VIDEO RECORDER
   ========================================================= */

.video-recorder-modal {
    position: fixed;
    inset: 0;

    z-index: 6000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 18px;

    overflow-y: auto;

    background: rgba(15,20,25,.72);
    backdrop-filter: blur(8px);
}

.video-recorder-modal.open {
    display: flex;
}

.video-recorder-dialog {
    width: min(92vw, 720px);

    margin: auto;

    padding: 18px;

    border-radius: 24px;

    background: #f8f5ee;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30);
}

.video-recorder-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 12px;
}

.video-recorder-header h2 {
    margin: 3px 0 0;

    font-size: 28px;
}

.video-recorder-close {
    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border: 0;
    border-radius: 50%;

    background: rgba(0,0,0,.08);

    cursor: pointer;

    font-size: 26px;
}

.video-recorder-stage {
    width: 100%;

    overflow: hidden;

    border-radius: 18px;

    background: #111;
}

.video-recorder-stage video {
    display: block;

    width: 100%;
    height: auto;

    max-height: 58vh;

    object-fit: contain;

    background: #111;
}

.video-recorder-stage video[hidden] {
    display: none !important;
}

.video-recorder-status {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    min-height: 38px;

    padding: 8px 2px 0;
}

#videoRecorderTimer {
    font-variant-numeric: tabular-nums;
}

.video-recorder-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 10px;
}

@media (max-width: 600px) {

    .video-recorder-modal {
        align-items: flex-start;
        padding: 8px;
    }

    .video-recorder-dialog {
        width: 100%;

        padding: 11px;

        border-radius: 18px;
    }

    .video-recorder-stage video {
        max-height: 52dvh;
    }

    .video-recorder-header h2 {
        font-size: 22px;
    }
}



/* =========================================================
   REMEMBER v0.11.2 - VIDEO CONTROL CLICK FIX
   ========================================================= */

#videoRecorderModal {
    pointer-events: auto !important;
}

#videoRecorderModal .video-recorder-dialog {
    position: relative !important;
    z-index: 1 !important;

    pointer-events: auto !important;
}

#videoRecorderModal .video-recorder-stage {
    position: relative !important;
    z-index: 1 !important;

    pointer-events: auto !important;
}

#videoRecorderModal .video-recorder-controls {
    position: relative !important;
    z-index: 20 !important;

    pointer-events: auto !important;
}

#videoRecorderModal .video-recorder-controls button,
#videoRecorderModal .video-recorder-close {
    position: relative !important;
    z-index: 30 !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}

#videoRecorderModal .video-recorder-status {
    position: relative !important;
    z-index: 10 !important;
}


/* Video must never overlay the controls */

#videoRecorderModal video {
    position: relative !important;
    z-index: 1 !important;
}


/* Hidden states remain authoritative */

#videoRecorderModal [hidden] {
    display: none !important;
}



/* =========================================================
   REMEMBER v0.12 - FOUR MEMORY TABS
   ========================================================= */

@media (max-width: 600px) {

    .memory-tabs {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    .memory-tab {
        min-width: 0 !important;
        padding: 9px 3px !important;
        font-size: 11px !important;
    }
}



/* =========================================================
   REMEMBER v0.12 - FOUR MEMORY TABS
   ========================================================= */

@media (max-width: 600px) {

    .memory-tabs {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
    }

    .memory-tab {
        min-width: 0 !important;
        padding: 9px 3px !important;
        font-size: 11px !important;
    }
}



/* =========================================================
   REMEMBER v0.12 - PHOTO GALLERY FULL IMAGE
   Never crop LifeBook photographs
   ========================================================= */

.photo-card {
    display: flex !important;
    flex-direction: column !important;

    background: white !important;
}


/* Preserve the entire photograph */

.photo-card-image {
    display: block !important;

    width: 100% !important;
    height: 260px !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    background: #f2f0eb !important;

    border-radius:
        20px 20px 0 0 !important;
}


/* Tablet */

@media (max-width: 900px) {

    .photo-card-image {
        height: 220px !important;
    }
}


/* Phone */

@media (max-width: 600px) {

    .photo-card-image {
        height: 170px !important;

        border-radius:
            14px 14px 0 0 !important;
    }
}


/* Large PC / TV */

@media (min-width: 1600px) {

    .photo-card-image {
        height: 300px !important;
    }
}



/* =========================================================
   REMEMBER v0.12.1 - VISIBLE MEDIA DELETE CONTROL
   ========================================================= */

.media-trash-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 40px !important;

    margin-top: 12px !important;
    padding: 8px 12px !important;

    border: 1px solid rgba(160,40,40,.25) !important;
    border-radius: 10px !important;

    background: rgba(180,45,45,.08) !important;

    color: #9c2f2f !important;

    font: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;

    cursor: pointer !important;

    pointer-events: auto !important;
}

.media-trash-button:hover {
    background: rgba(180,45,45,.16) !important;
}



/* =========================================================
   REMEMBER v0.12.2 - COMPACT PHOTO CARDS + VISIBLE TRASH
   ========================================================= */

#memories.page.active {
    overflow-y: auto !important;
    padding-bottom: 60px !important;
}


/* Gallery cards */

.photo-gallery {
    align-items: start !important;
}

.photo-card {
    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}


/* Show complete photograph, but don't make card excessively tall */

.photo-card-image {
    width: 100% !important;

    height: 200px !important;
    min-height: 0 !important;

    object-fit: contain !important;

    background: #f1efe9 !important;
}


/* Compact information area */

.photo-card-copy,
.video-card-copy {
    display: flex !important;
    flex-direction: column !important;

    padding: 10px 12px 12px !important;
}

.photo-card-title {
    margin: 0 0 3px !important;
}


/* Trash button must always be visible */

.media-trash-button {
    display: flex !important;

    width: 100% !important;
    min-height: 38px !important;

    margin: 9px 0 0 !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    border: 1px solid rgba(160,40,40,.28) !important;
    border-radius: 10px !important;

    background: rgba(180,45,45,.08) !important;

    color: #9c2f2f !important;

    font-weight: 800 !important;

    cursor: pointer !important;
}


/* Laptop / shorter screens */

@media (min-width: 601px) and (max-height: 900px) {

    .photo-card-image {
        height: 165px !important;
    }

}


/* Phone */

@media (max-width: 600px) {

    .photo-card-image {
        height: 145px !important;
    }

}



/* =========================================================
   REMEMBER v0.13 - ADAPTIVE VIEWPORT LAYOUT
   ========================================================= */

:root {
    --remember-ui-scale: 1;
}


/* ---------------------------------------------------------
   SHORT LAPTOP / SMALL DESKTOP
   --------------------------------------------------------- */

html.remember-short #memories.page.active,
html.remember-very-short #memories.page.active {
    padding-top: 18px !important;
    padding-bottom: 70px !important;

    overflow-y: auto !important;
}

html.remember-short #memories .topbar,
html.remember-very-short #memories .topbar {
    margin-bottom: 12px !important;
}

html.remember-short #memories .title {
    font-size: 46px !important;
}

html.remember-very-short #memories .title {
    font-size: 38px !important;
}

html.remember-short .memory-tabs,
html.remember-very-short .memory-tabs {
    margin-bottom: 16px !important;
}

html.remember-short .media-gallery-header,
html.remember-very-short .media-gallery-header {
    margin-bottom: 14px !important;
}


/*
 * Preserve entire photograph while adapting
 * thumbnail height to available vertical space.
 */

html.remember-short .photo-card-image {
    height: 165px !important;

    object-fit: contain !important;
}

html.remember-very-short .photo-card-image {
    height: 125px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   NORMAL DESKTOP
   --------------------------------------------------------- */

html.remember-desktop .photo-card-image {
    height: 230px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   LARGE DISPLAY / TV
   --------------------------------------------------------- */

html.remember-tv .photo-card-image {
    height: clamp(
        260px,
        28vh,
        360px
    ) !important;

    object-fit: contain !important;
}

html.remember-tv .photo-gallery {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 1fr)
        ) !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

html.remember-tablet .photo-gallery {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}

html.remember-tablet .photo-card-image {
    height: 210px !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

html.remember-phone .photo-gallery {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;
}

html.remember-phone .photo-card-image {
    height: 145px !important;

    object-fit: contain !important;
}


/* Buttons must remain visible regardless of resolution. */

.media-trash-button {
    flex-shrink: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
}


/* Never clip active Memories content. */

#memories.page.active {
    max-height:
        var(--remember-vh) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}



/* =========================================================
   REMEMBER v0.13.1 - MAIN WINDOW VERTICAL SCROLL
   Fixed navbar + scrollable content
   ========================================================= */


/* Prevent the entire browser shell from fighting the app scroll */

html,
body {
    height: 100% !important;
    min-height: 100% !important;
}


/* Main application shell */

.app-shell,
.app {
    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
}


/* Keep sidebar/navigation stationary */

.sidebar {
    height: 100dvh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* Main content becomes the scrolling area */

.main,
main {
    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scrollbar-gutter: stable;
}


/* Pages should grow naturally instead of being clipped */

.page {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 80px !important;
}


/* Memories especially needs unrestricted vertical growth */

#memories.page,
#memories.page.active {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 100px !important;
}


/* Gallery rows can grow as much as necessary */

.photo-gallery,
.video-gallery,
.trash-gallery,
.memory-list {
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */

.main::-webkit-scrollbar,
main::-webkit-scrollbar {
    width: 11px;
}

.main::-webkit-scrollbar-track,
main::-webkit-scrollbar-track {
    background: rgba(0,0,0,.035);
}

.main::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
    background: rgba(70,70,70,.28);

    border-radius: 20px;

    border: 3px solid transparent;
    background-clip: padding-box;
}

.main::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover {
    background: rgba(70,70,70,.45);

    border: 3px solid transparent;
    background-clip: padding-box;
}


/* Firefox */

.main,
main {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(70,70,70,.32)
        transparent;
}


/* ---------------------------------------------------------
   Phone/tablet
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .main,
    main {
        height: 100dvh !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }

    .page {
        padding-bottom: 90px !important;
    }
}



/* =========================================================
   REMEMBER v0.14 - MY BIO / PERSONALITY PROFILE
   ========================================================= */

#story.page.active {
    overflow: visible !important;
    padding-bottom: 100px !important;
}

#story .hero {
    align-items: flex-start !important;
}

.bio-content {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 20px;
}

.bio-intro {
    padding: 4px 2px 2px;
}

.bio-intro h2 {
    margin: 6px 0 8px;

    max-width: 760px;

    font-size:
        clamp(26px, 3vw, 42px);

    line-height: 1.08;
}

.bio-intro p {
    margin: 0;

    max-width: 720px;

    opacity: .72;
}


.bio-form {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.bio-section {
    padding: 20px;

    border: 1px solid
        rgba(0,0,0,.07);

    border-radius: 22px;

    background:
        rgba(255,255,255,.52);

    box-shadow:
        0 10px 30px
        rgba(30,40,50,.06);
}


.bio-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}

.bio-section-heading h3 {
    margin: 0 0 2px;

    font-size: 20px;
}

.bio-section-heading p {
    margin: 0;

    font-size: 13px;

    opacity: .65;
}

.bio-section-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        var(
            --theme-primary-soft,
            rgba(78,155,104,.15)
        );

    color:
        var(
            --theme-primary,
            #4E9B68
        );

    font-size: 20px;
    font-weight: 800;
}


.bio-fields {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;
}

.bio-fields-2 {
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
}


.bio-field {
    display: flex;
    flex-direction: column;

    gap: 6px;

    min-width: 0;
}

.bio-field > span {
    font-size: 12px;
    font-weight: 800;

    letter-spacing: .025em;

    opacity: .72;
}

.bio-field input,
.bio-field select,
.bio-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid
        rgba(0,0,0,.12);

    border-radius: 12px;

    padding: 10px 12px;

    background:
        rgba(255,255,255,.84);

    color: inherit;

    font: inherit;

    outline: none;
}

.bio-field input,
.bio-field select {
    min-height: 43px;
}

.bio-field textarea {
    min-height: 84px;

    resize: vertical;

    line-height: 1.45;
}

.bio-field input:focus,
.bio-field select:focus,
.bio-field textarea:focus {
    border-color:
        var(
            --theme-primary,
            #4E9B68
        );

    box-shadow:
        0 0 0 3px
        var(
            --theme-primary-soft,
            rgba(78,155,104,.13)
        );
}


.bio-field-full {
    grid-column: 1 / -1;
}

.bio-legacy {
    min-height: 120px !important;
}


.bio-save-bar {
    position: sticky;
    bottom: 12px;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 12px 14px;

    border: 1px solid
        rgba(0,0,0,.08);

    border-radius: 16px;

    background:
        rgba(250,247,239,.94);

    backdrop-filter: blur(12px);

    box-shadow:
        0 12px 35px
        rgba(30,40,50,.14);
}

.bio-save-status {
    font-size: 13px;

    opacity: .7;
}

.bio-save-button {
    flex: 0 0 auto;

    min-height: 44px;
}


/* Keep profile picture compact alongside Bio */

#story .profile-panel {
    flex: 0 0 250px;

    position: sticky;
    top: 20px;
}


/* Tablet */

@media (max-width: 1100px) {

    #story .hero {
        flex-direction: column !important;
    }

    #story .profile-panel {
        position: static;

        width: 100%;
        max-width: 360px;

        flex-basis: auto;
    }

    .bio-content {
        width: 100%;
    }
}


/* Phone */

@media (max-width: 650px) {

    .bio-fields-2 {
        grid-template-columns: 1fr;
    }

    .bio-section {
        padding: 14px;

        border-radius: 17px;
    }

    .bio-save-bar {
        bottom: 6px;

        flex-direction: column;
        align-items: stretch;
    }

    .bio-save-button {
        width: 100%;
    }
}



/* =========================================================
   REMEMBER v0.14.1 - MY BIO FULL PAGE LAYOUT
   ========================================================= */


/* Bio page is a normal scrolling page, not a fixed-height hero */

#story.page,
#story.page.active {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow: visible !important;

    padding-bottom: 100px !important;
}


/* Allow the old hero container to grow with Bio content */

#story .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(240px, 320px) !important;

    align-items: start !important;

    gap: clamp(24px, 4vw, 60px) !important;

    padding:
        clamp(28px, 4vw, 54px) !important;
}


/* Bio content is the primary column */

#story .bio-content {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    order: 1 !important;
}


/* Profile remains on right */

#story .profile-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: 320px !important;

    position: sticky !important;
    top: 24px !important;

    order: 2 !important;
}


/* Bio sections should grow normally */

#story .bio-form,
#story .bio-section {
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/* Save bar must NOT cover fields */

#story .bio-save-bar {
    position: static !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin-top: 4px !important;

    padding: 14px 16px !important;
}


/* Make form fields comfortable */

#story .bio-fields {
    align-items: start !important;
}

#story .bio-field input,
#story .bio-field select {
    min-height: 46px !important;
}

#story .bio-field textarea {
    min-height: 90px !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    #story .hero {
        grid-template-columns: 1fr !important;
    }

    #story .bio-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #story .profile-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        max-width: 320px !important;

        justify-self: center !important;
    }
}


/* ---------------------------------------------------------
   PHONE
   --------------------------------------------------------- */

@media (max-width: 650px) {

    #story .hero {
        padding: 16px !important;
        gap: 18px !important;
    }

    #story .bio-fields-2 {
        grid-template-columns: 1fr !important;
    }

    #story .bio-save-bar {
        display: flex !important;
        flex-direction: column !important;
    }

    #story .bio-save-button {
        width: 100% !important;
    }
}



/* =========================================================
   REMEMBER v0.15 - AUTHENTICATION
   ========================================================= */

.remember-auth {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    overflow-y: auto;

    background:
        linear-gradient(
            135deg,
            #8fc6a2 0%,
            #f0c1ce 54%,
            #73c7e5 100%
        );
}

.remember-auth[hidden] {
    display: none !important;
}


.remember-auth-card {
    width: min(92vw, 480px);

    padding: clamp(26px, 4vw, 42px);

    border-radius: 30px;

    background:
        rgba(253,250,244,.96);

    box-shadow:
        0 30px 90px
        rgba(20,30,40,.24);
}


.remember-auth-brand {
    margin-bottom: 28px;

    text-align: center;
}

.remember-auth-logo {
    font-family: Georgia, serif;
    font-size: clamp(40px, 6vw, 58px);
    font-style: italic;

    color: #3f7d56;
}

.remember-auth-brand p {
    margin: 7px 0 0;

    opacity: .65;
}


.remember-auth-panel h1 {
    margin: 5px 0 8px;

    font-size:
        clamp(27px, 4vw, 38px);
}

.remember-auth-intro {
    margin: 0 0 22px;

    line-height: 1.5;

    opacity: .68;
}


.remember-auth-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 15px;
}

.remember-auth-field span {
    font-size: 13px;
    font-weight: 800;
}

.remember-auth-field input {
    width: 100%;
    min-height: 50px;

    box-sizing: border-box;

    padding: 11px 14px;

    border: 1px solid
        rgba(0,0,0,.14);

    border-radius: 13px;

    background: white;

    font: inherit;

    outline: none;
}

.remember-auth-field input:focus {
    border-color: #58a96c;

    box-shadow:
        0 0 0 3px
        rgba(88,169,108,.15);
}


.remember-auth-primary {
    width: 100%;
    min-height: 50px;

    margin-top: 6px;

    border: 0;
    border-radius: 14px;

    background: #59b94a;

    color: white;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.remember-auth-primary:disabled {
    opacity: .55;
    cursor: wait;
}


.remember-auth-status {
    min-height: 20px;

    margin: 4px 0 8px;

    font-size: 13px;

    color: #9c3434;
}


.remember-auth-switch {
    margin-top: 20px;

    text-align: center;

    font-size: 14px;
}

.remember-auth-switch button {
    border: 0;

    background: transparent;

    color: #397d50;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}


.remember-password-help {
    margin: -5px 0 12px;

    font-size: 12px;

    opacity: .62;
}


@media (max-width: 600px) {

    .remember-auth {
        align-items: flex-start;

        padding: 12px;
    }

    .remember-auth-card {
        width: 100%;

        margin: 10px auto;

        padding: 22px;

        border-radius: 22px;
    }
}


.profile-photo-status {
    min-height: 22px;
    margin-top: 8px;

    text-align: center;

    font-size: 13px;
    font-weight: 700;

    color: rgba(40,40,40,.72);
}



/* =========================================================
   REMEMBER v0.16 - PROFILE PHOTO STATUS
   ========================================================= */

.profile-photo-status {
    min-height: 20px;

    margin-top: 8px;

    text-align: center;

    font-size: 13px;
    font-weight: 700;

    opacity: .78;
}

.profile-photo-status.error {
    color: #a43d3d;
    opacity: 1;
}



/* =========================================================
   REMEMBER v0.16 - BIO STATE DROPDOWNS
   ========================================================= */

#story .bio-field select,
#story .bio-select {
    width: 100%;
    min-height: 46px;

    box-sizing: border-box;

    padding: 10px 38px 10px 12px;

    border: 1px solid rgba(0,0,0,.14);
    border-radius: 10px;

    background: white;

    color: inherit;
    font: inherit;

    cursor: pointer;
}

#story .bio-field select:focus,
#story .bio-select:focus {
    outline: none;

    border-color: #58a96c;

    box-shadow:
        0 0 0 3px
        rgba(88,169,108,.14);
}



/* =========================================================
   REMEMBER v0.17 - RESPONSIVE FOUNDATION
   ========================================================= */

html {
    width: 100%;
    min-height: 100%;

    overflow-x: hidden;
    overflow-y: auto;
}

body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;
}


/* Everything calculates width predictably */

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


/* Media must never overflow its container */

img,
video,
canvas {
    max-width: 100%;
}


/* Main application area */

.main {
    min-width: 0;

    overflow-x: hidden;
    overflow-y: visible;
}


/* Every page may grow vertically */

.page,
.page.active {
    width: 100%;

    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;

    height: auto !important;
    max-height: none !important;

    overflow-x: hidden;
    overflow-y: visible !important;
}


/* Prevent giant layouts on ultrawide/4K displays */

.page > .topbar,
.page > .hero,
.page > .grid,
.page > .conversation-shell,
#memories > .memories-topbar,
#memories > .memory-tabs,
#memories > .memory-panel {
    width: min(100%, 1600px);

    margin-left: auto;
    margin-right: auto;
}


/* Responsive page spacing */

.page {
    padding:
        clamp(16px, 2.4vw, 44px);
}


/* Fluid typography */

.title {
    font-size:
        clamp(34px, 4vw, 68px);

    line-height: 1.02;
}


/* Inputs should never overflow */

input,
textarea,
select,
button {
    max-width: 100%;
}


/* Touch targets */

button,
.photo-action-button,
.memory-tab {
    min-height: 44px;
}


/* =========================================================
   BIO
   ========================================================= */

#story .hero {
    width: min(100%, 1600px);

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 360px);

    align-items: start;

    gap: clamp(24px, 4vw, 64px);

    padding:
        clamp(20px, 3vw, 48px);
}


#story .bio-content {
    min-width: 0;
    width: 100%;
}


#story .profile-panel {
    width: 100%;
    max-width: 360px;

    justify-self: center;

    position: sticky;
    top: 24px;
}


#story .profile-photo-wrap {
    width: 100%;

    aspect-ratio: 4 / 5;

    height: auto !important;
}


#story .profile-photo {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


#story .bio-fields-2 {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(12px, 1.5vw, 20px);
}


#story .bio-save-bar {
    position: static !important;

    width: 100%;

    margin-top: 10px;
}


/* =========================================================
   GALLERIES
   ========================================================= */

.media-gallery-grid,
.photo-gallery,
.video-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(260px, 100%),
                1fr
            )
        );

    gap: clamp(14px, 2vw, 24px);
}


.media-card,
.gallery-card {
    min-width: 0;
    width: 100%;
}


.media-card img,
.gallery-card img {
    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: contain;

    background: rgba(0,0,0,.04);
}


/* =========================================================
   MODALS
   ========================================================= */

.camera-modal,
.video-recorder-modal,
.photo-lightbox {
    padding:
        clamp(10px, 2vw, 28px);

    overflow-y: auto;
}


.camera-dialog,
.video-recorder-dialog {
    width: min(96vw, 1100px);

    max-height:
        calc(100dvh - 24px);

    overflow-y: auto;
}


.camera-stage video,
.camera-stage img,
.video-recorder-stage video {
    max-height: 65dvh;

    object-fit: contain;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    #story .hero {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 300px);

        gap: 24px;
    }

    #story .profile-panel {
        max-width: 300px;
    }

}


/* =========================================================
   SMALL TABLET / LARGE PHONE
   ========================================================= */

@media (max-width: 800px) {

    #story .hero {
        grid-template-columns: 1fr;

        padding: 18px;
    }

    #story .profile-panel {
        grid-row: 1;

        position: static;

        width: min(100%, 320px);
    }

    #story .bio-content {
        grid-row: 2;
    }

    #story .bio-fields-2 {
        grid-template-columns: 1fr;
    }

    .memory-tabs {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        scrollbar-width: thin;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    .page {
        padding: 14px;
    }

    .title {
        font-size:
            clamp(32px, 11vw, 48px);
    }

    #story .hero {
        border-radius: 22px;

        padding: 14px;
    }

    #story .bio-section {
        padding: 14px;
    }

    .photo-actions,
    .camera-controls,
    .video-recorder-controls {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 10px;
    }

    .photo-action-button,
    .camera-controls button,
    .video-recorder-controls button {
        width: 100%;
    }

}


/* =========================================================
   SHORT LAPTOP SCREENS
   e.g. 1366x768
   ========================================================= */

@media (max-height: 800px) and (min-width: 801px) {

    .page {
        padding-top: 16px;
        padding-bottom: 30px;
    }

    #story .profile-panel {
        position: static;
    }

    #story .hero {
        padding-top: 22px;
        padding-bottom: 28px;
    }

}


/* =========================================================
   VERY LARGE / 4K DISPLAYS
   ========================================================= */

@media (min-width: 2000px) {

    .page > .topbar,
    .page > .hero,
    .page > .grid,
    .page > .conversation-shell,
    #memories > .memories-topbar,
    #memories > .memory-tabs,
    #memories > .memory-panel {
        max-width: 1800px;
    }

}



/* =========================================================
   REMEMBER v0.17.1 - AUTHORITATIVE RESPONSIVE SHELL
   ========================================================= */


/* ---------- GLOBAL ---------- */

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;

    margin: 0;

    overflow-x: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}


/* ---------- DESKTOP APPLICATION SHELL ---------- */

.shell {
    width: 100%;
    min-width: 0;

    min-height: 100vh;
    min-height: 100dvh;

    display: grid !important;

    grid-template-columns:
        clamp(210px, 15vw, 260px)
        minmax(0, 1fr) !important;

    align-items: stretch;
}


/* Sidebar */

.shell > .sidebar {
    width: auto !important;
    min-width: 0 !important;

    height: 100vh;
    height: 100dvh;

    position: sticky;
    top: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        clamp(22px, 2vw, 32px)
        clamp(16px, 1.5vw, 24px);

    z-index: 1000;
}


/* Main content */

.shell > .main {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;

    padding:
        clamp(16px, 2vw, 32px) !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
}


/* Pages grow naturally */

.shell > .main > .page,
.shell > .main > .page.active {
    width: 100%;

    min-width: 0;

    height: auto !important;
    min-height: calc(
        100dvh - clamp(32px, 4vw, 64px)
    );

    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
}


/* Desktop mobile header is hidden */

.mobile-header,
.mobile-nav-backdrop {
    display: none;
}


/* ---------- NAVIGATION ---------- */

.shell > .sidebar .nav {
    width: 100%;

    display: grid;

    gap: 8px;
}

.shell > .sidebar .nav button {
    width: 100%;

    min-height: 46px;

    padding: 12px 14px;

    text-align: left;

    white-space: normal;
}


/* ---------- CONTENT WIDTH ---------- */

/*
 * Prevent content from becoming excessively wide
 * on 1440p, ultrawide and 4K displays.
 */

.main .topbar,
.main .hero,
.main > .page > .grid,
.main .conversation-shell,
#memories .memories-topbar,
#memories .memory-tabs,
#memories .memory-panel {
    width: min(100%, 1600px);

    margin-left: auto;
    margin-right: auto;
}


/* ---------- RESPONSIVE MEDIA ---------- */

.main img,
.main video,
.main canvas {
    max-width: 100%;
}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 801px) {

    .shell {
        grid-template-columns:
            200px
            minmax(0, 1fr) !important;
    }

    .shell > .sidebar {
        padding:
            22px 14px;
    }

    .shell > .main {
        padding: 18px !important;
    }

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 800px) {

    body {
        padding-top: 64px;
    }


    /* Top mobile bar */

    .mobile-header {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        height: 64px;

        z-index: 5000;

        display: flex;

        align-items: center;
        justify-content: space-between;

        padding:
            0 16px;

        background:
            rgba(42,55,48,.97);

        color: white;

        box-shadow:
            0 4px 18px
            rgba(0,0,0,.14);
    }


    .mobile-brand {
        font-family:
            Georgia,
            serif;

        font-size: 27px;
        font-style: italic;
    }


    .mobile-menu-button {
        width: 46px;
        height: 46px;

        min-height: 46px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background:
            rgba(255,255,255,.12);

        color: white;

        font-size: 25px;

        cursor: pointer;
    }


    /* Shell becomes single column */

    .shell {
        display: block !important;

        width: 100%;

        min-height:
            calc(100dvh - 64px);
    }


    /* Sidebar becomes drawer */

    .shell > .sidebar {
        position: fixed !important;

        top: 64px;
        left: 0;
        bottom: 0;

        width:
            min(82vw, 320px) !important;

        height:
            calc(100dvh - 64px);

        z-index: 4900;

        padding: 24px 18px;

        overflow-y: auto;

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        box-shadow:
            12px 0 35px
            rgba(0,0,0,.22);
    }


    body.mobile-nav-open
    .shell > .sidebar {
        transform:
            translateX(0);
    }


    /* Backdrop */

    .mobile-nav-backdrop {
        position: fixed;

        inset:
            64px 0 0 0;

        z-index: 4800;

        display: block;

        background:
            rgba(0,0,0,.38);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }


    body.mobile-nav-open
    .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }


    /* Main gets entire width */

    .shell > .main {
        width: 100% !important;

        min-height:
            calc(100dvh - 64px);

        padding:
            clamp(12px, 3vw, 20px)
            !important;
    }


    /* Don't need duplicate brand inside drawer */

    .shell > .sidebar > .brand,
    .shell > .sidebar > .tagline {
        display: none;
    }


    /* Bigger touch navigation */

    .shell > .sidebar .nav {
        gap: 10px;
    }

    .shell > .sidebar .nav button {
        min-height: 52px;

        padding: 14px 16px;

        font-size: 16px;
    }


    /* Theme picker stays usable */

    .shell > .sidebar .theme-picker {
        margin-top: 28px;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    .mobile-header {
        height: 58px;
    }

    body {
        padding-top: 58px;
    }

    .shell > .sidebar {
        top: 58px;

        height:
            calc(100dvh - 58px);

        width:
            min(88vw, 300px)
            !important;
    }

    .mobile-nav-backdrop {
        inset:
            58px 0 0 0;
    }

    .shell > .main {
        padding:
            10px !important;
    }

    .topbar {
        align-items: flex-start;

        gap: 12px;
    }

}


/* =========================================================
   SHORT LAPTOP / LANDSCAPE TABLET
   ========================================================= */

@media
(min-width: 801px)
and
(max-height: 800px) {

    .shell > .sidebar {
        position: sticky;

        height: 100dvh;

        overflow-y: auto;
    }

    .shell > .main {
        min-height: 100dvh;

        overflow-y: visible !important;
    }

}


/* =========================================================
   LARGE DESKTOP / 4K
   ========================================================= */

@media (min-width: 2000px) {

    .shell {
        grid-template-columns:
            260px
            minmax(0, 1fr)
            !important;
    }

    .main .topbar,
    .main .hero,
    .main > .page > .grid,
    .main .conversation-shell,
    #memories .memories-topbar,
    #memories .memory-tabs,
    #memories .memory-panel {
        max-width: 1800px;
    }

}



/* =========================================================
   REMEMBER v0.17.1 - AUTHORITATIVE RESPONSIVE SHELL
   ========================================================= */

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}


/* DESKTOP */

.shell {
    width: 100%;
    min-width: 0;

    min-height: 100vh;
    min-height: 100dvh;

    display: grid !important;

    grid-template-columns:
        clamp(210px, 15vw, 260px)
        minmax(0, 1fr) !important;
}

.shell > .sidebar {
    width: auto !important;
    min-width: 0 !important;

    height: 100vh;
    height: 100dvh;

    position: sticky;
    top: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        clamp(22px, 2vw, 32px)
        clamp(16px, 1.5vw, 24px);

    z-index: 1000;
}

.shell > .main {
    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;

    padding:
        clamp(16px, 2vw, 32px) !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.shell > .main > .page,
.shell > .main > .page.active {
    width: 100%;
    min-width: 0;

    height: auto !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
}


/* Desktop doesn't need mobile navigation */

.mobile-header,
.mobile-nav-backdrop {
    display: none;
}


/* NAVIGATION */

.shell > .sidebar .nav {
    width: 100%;

    display: grid;

    gap: 8px;
}

.shell > .sidebar .nav button {
    width: 100%;
    min-height: 46px;

    padding: 12px 14px;

    text-align: left;
}


/* Prevent enormous content on ultrawide displays */

.main .topbar,
.main .hero,
.main > .page > .grid,
.main .conversation-shell,
#memories .memories-topbar,
#memories .memory-tabs,
#memories .memory-panel {
    width: min(100%, 1600px);

    margin-left: auto;
    margin-right: auto;
}


/* TABLET */

@media
(max-width: 1100px)
and
(min-width: 801px) {

    .shell {
        grid-template-columns:
            200px
            minmax(0, 1fr) !important;
    }

    .shell > .sidebar {
        padding: 22px 14px;
    }

    .shell > .main {
        padding: 18px !important;
    }
}


/* =========================================================
   MOBILE <= 800px
   ========================================================= */

@media (max-width: 800px) {

    body {
        padding-top: 64px;
    }

    .mobile-header {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        height: 64px;

        z-index: 5000;

        display: flex;

        align-items: center;
        justify-content: space-between;

        padding: 0 16px;

        background:
            rgba(42,55,48,.97);

        color: white;

        box-shadow:
            0 4px 18px
            rgba(0,0,0,.14);
    }

    .mobile-brand {
        font-family: Georgia, serif;

        font-size: 27px;
        font-style: italic;
    }

    .mobile-menu-button {
        width: 46px;
        height: 46px;

        min-height: 46px;

        padding: 0;

        border: 0;
        border-radius: 12px;

        background:
            rgba(255,255,255,.12);

        color: white;

        font-size: 25px;

        cursor: pointer;
    }


    /* Single-column application */

    .shell {
        display: block !important;

        width: 100%;

        min-height:
            calc(100dvh - 64px);
    }


    /* Slide-out navigation */

    .shell > .sidebar {
        position: fixed !important;

        top: 64px;
        left: 0;
        bottom: 0;

        width:
            min(82vw, 320px) !important;

        height:
            calc(100dvh - 64px);

        z-index: 4900;

        padding: 24px 18px;

        overflow-y: auto;

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        box-shadow:
            12px 0 35px
            rgba(0,0,0,.22);
    }

    body.mobile-nav-open
    .shell > .sidebar {
        transform:
            translateX(0);
    }


    /* Dark overlay behind drawer */

    .mobile-nav-backdrop {
        position: fixed;

        inset: 64px 0 0 0;

        z-index: 4800;

        display: block;

        background:
            rgba(0,0,0,.38);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }

    body.mobile-nav-open
    .mobile-nav-backdrop {
        opacity: 1;
        visibility: visible;
    }


    /* Content gets entire screen */

    .shell > .main {
        width: 100% !important;

        min-height:
            calc(100dvh - 64px);

        padding:
            clamp(12px, 3vw, 20px)
            !important;
    }


    /* Brand already exists in mobile header */

    .shell > .sidebar > .brand,
    .shell > .sidebar > .tagline {
        display: none;
    }


    /* Touch-friendly navigation */

    .shell > .sidebar .nav {
        gap: 10px;
    }

    .shell > .sidebar .nav button {
        min-height: 52px;

        padding: 14px 16px;

        font-size: 16px;
    }

    .shell > .sidebar .theme-picker {
        margin-top: 28px;
    }
}


/* PHONE */

@media (max-width: 600px) {

    .mobile-header {
        height: 58px;
    }

    body {
        padding-top: 58px;
    }

    .shell > .sidebar {
        top: 58px;

        height:
            calc(100dvh - 58px);

        width:
            min(88vw, 300px)
            !important;
    }

    .mobile-nav-backdrop {
        inset: 58px 0 0 0;
    }

    .shell > .main {
        padding: 10px !important;
    }

    .topbar {
        align-items: flex-start;
        gap: 12px;
    }
}


/* SHORT LAPTOP */

@media
(min-width: 801px)
and
(max-height: 800px) {

    .shell > .sidebar {
        height: 100dvh;

        overflow-y: auto;
    }

    .shell > .main {
        min-height: 100dvh;

        overflow-y: visible !important;
    }
}


/* 4K / ULTRAWIDE */

@media (min-width: 2000px) {

    .shell {
        grid-template-columns:
            260px
            minmax(0, 1fr)
            !important;
    }

    .main .topbar,
    .main .hero,
    .main > .page > .grid,
    .main .conversation-shell,
    #memories .memories-topbar,
    #memories .memory-tabs,
    #memories .memory-panel {
        max-width: 1800px;
    }
}



/* =========================================================
   REMEMBER v0.19 - LIVE AI AVATAR
   ========================================================= */

.remember-avatar-stage {
    width: min(100%, 1000px);

    margin:
        0 auto 18px;

    padding:
        clamp(14px, 2vw, 24px);

    border:
        1px solid rgba(255,255,255,.7);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(245,241,232,.48)
        );

    box-shadow:
        0 18px 50px
        rgba(30,45,40,.10);

    overflow: hidden;
}


.avatar-mode-tabs {
    display: flex;

    justify-content: center;

    gap: 8px;

    margin-bottom: 16px;
}


.avatar-mode {
    min-height: 40px;

    padding: 8px 15px;

    border:
        1px solid rgba(0,0,0,.10);

    border-radius: 999px;

    background:
        rgba(255,255,255,.72);

    font: inherit;

    cursor: pointer;
}


.avatar-mode.active {
    background: #4e9b68;

    color: white;

    border-color: transparent;
}


.avatar-live-area {
    display: flex;

    flex-direction: column;

    align-items: center;

    min-height:
        clamp(300px, 42vh, 480px);

    justify-content: center;
}


.remember-live-avatar {
    position: relative;

    width:
        clamp(190px, 25vw, 300px);

    aspect-ratio: 1 / 1;

    display: grid;

    place-items: center;
}


.avatar-glow {
    position: absolute;

    inset: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(78,155,104,.20),
            rgba(78,155,104,0)
            68%
        );

    transform: scale(1);

    transition:
        transform .25s ease;
}


.avatar-head {
    position: relative;

    width: 58%;
    height: 72%;

    border-radius:
        46% 46% 43% 43% /
        40% 40% 56% 56%;

    background:
        linear-gradient(
            145deg,
            #e5b894,
            #c98f6c
        );

    box-shadow:
        0 16px 35px
        rgba(40,30,20,.18);

    transform-origin:
        center bottom;

    animation:
        remember-avatar-idle
        5s ease-in-out infinite;
}


.avatar-hair {
    position: absolute;

    left: -3%;
    right: -3%;
    top: -5%;

    height: 38%;

    border-radius:
        50% 50% 30% 30%;

    background:
        linear-gradient(
            145deg,
            #58483e,
            #332b27
        );
}


.avatar-face {
    position: absolute;

    inset:
        32% 15% 12%;
}


.avatar-eyes {
    display: flex;

    justify-content: space-between;

    padding: 0 13%;
}


.avatar-eye {
    width: 17px;
    height: 9px;

    border-radius:
        50%;

    background: #40342e;

    transform-origin: center;

    animation:
        remember-avatar-blink
        5.5s infinite;
}


.avatar-mouth {
    position: absolute;

    left: 50%;
    bottom: 16%;

    width: 30px;
    height: 7px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 30px 30px;

    background: #844e4d;

    transition:
        width .12s ease,
        height .12s ease;
}


.avatar-state-row {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 5px;

    font-size: 14px;
}


.avatar-state-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #89958d;
}


.avatar-speech {
    max-width: 680px;

    min-height: 25px;

    margin-top: 10px;

    padding: 0 12px;

    text-align: center;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(17px, 2vw, 22px);

    line-height: 1.4;
}


/* LISTENING */

.remember-avatar-stage[
    data-avatar-state="listening"
]
.avatar-state-dot {
    background: #35a85a;

    box-shadow:
        0 0 0 7px
        rgba(53,168,90,.12);
}


.remember-avatar-stage[
    data-avatar-state="listening"
]
.avatar-glow {
    animation:
        remember-avatar-listening
        1.4s ease-in-out infinite;
}


/* THINKING */

.remember-avatar-stage[
    data-avatar-state="thinking"
]
.avatar-state-dot {
    background: #d6a83e;
}


.remember-avatar-stage[
    data-avatar-state="thinking"
]
.avatar-head {
    animation:
        remember-avatar-thinking
        1.6s ease-in-out infinite;
}


/* SPEAKING */

.remember-avatar-stage[
    data-avatar-state="speaking"
]
.avatar-state-dot {
    background: #4c88d7;
}


.remember-avatar-stage[
    data-avatar-state="speaking"
]
.avatar-mouth {
    animation:
        remember-avatar-speaking
        .22s ease-in-out infinite alternate;
}


.remember-avatar-stage[
    data-avatar-state="speaking"
]
.avatar-glow {
    transform: scale(1.10);
}


/* IDLE */

@keyframes remember-avatar-idle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(.6deg);
    }
}


@keyframes remember-avatar-blink {

    0%,
    45%,
    48%,
    100% {
        transform:
            scaleY(1);
    }

    46%,
    47% {
        transform:
            scaleY(.08);
    }
}


@keyframes remember-avatar-listening {

    0%,
    100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}


@keyframes remember-avatar-thinking {

    0%,
    100% {
        transform:
            rotate(-1deg);
    }

    50% {
        transform:
            rotate(2deg);
    }
}


@keyframes remember-avatar-speaking {

    from {
        width: 28px;
        height: 7px;
    }

    to {
        width: 34px;
        height: 22px;

        border-radius:
            45%;
    }
}


/* Voice-only mode */

.remember-avatar-stage.voice-only
.remember-live-avatar {
    display: none;
}


.remember-avatar-stage.voice-only
.avatar-live-area {
    min-height: 160px;
}


/* Text mode */

.remember-avatar-stage.text-only {
    display: none;
}


/* MOBILE */

@media (max-width: 800px) {

    .remember-avatar-stage {
        border-radius: 20px;

        padding: 12px;
    }

    .avatar-live-area {
        min-height: 300px;
    }

    .remember-live-avatar {
        width:
            min(230px, 65vw);
    }

    .avatar-mode-tabs {
        overflow-x: auto;

        justify-content:
            flex-start;
    }
}


@media (prefers-reduced-motion: reduce) {

    .avatar-head,
    .avatar-eye,
    .avatar-glow,
    .avatar-mouth {
        animation: none !important;
    }
}



/* =========================================================
   REMEMBER v0.19.1 - REALISTIC AVATAR STAGE
   ========================================================= */

.remember-live-avatar.realistic {
    width:
        clamp(240px, 30vw, 380px);

    aspect-ratio: 4 / 5;

    position: relative;

    display: grid;

    place-items: center;
}


.remember-avatar-media {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 30px;

    background: #e9ece8;

    box-shadow:
        0 22px 55px
        rgba(30,45,40,.20);

    z-index: 2;
}


.remember-avatar-fallback,
.remember-avatar-video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 24%;
}


.remember-avatar-video {
    background: #111;
}


.remember-avatar-connection {
    position: absolute;

    left: 50%;
    bottom: 14px;

    transform:
        translateX(-50%);

    padding:
        7px 13px;

    border-radius: 999px;

    background:
        rgba(25,35,30,.72);

    color: white;

    font-size: 12px;
    font-weight: 700;

    backdrop-filter:
        blur(8px);

    z-index: 5;
}


.remember-live-avatar.realistic
.avatar-glow {
    position: absolute;

    inset: -8%;

    border-radius: 38px;

    z-index: 1;
}


/* Avatar-state feedback */

.remember-avatar-stage[
    data-avatar-state="listening"
]
.remember-avatar-media {
    box-shadow:
        0 0 0 4px
        rgba(53,168,90,.20),
        0 22px 55px
        rgba(30,45,40,.20);
}


.remember-avatar-stage[
    data-avatar-state="thinking"
]
.remember-avatar-media {
    box-shadow:
        0 0 0 4px
        rgba(214,168,62,.20),
        0 22px 55px
        rgba(30,45,40,.20);
}


.remember-avatar-stage[
    data-avatar-state="speaking"
]
.remember-avatar-media {
    box-shadow:
        0 0 0 4px
        rgba(76,136,215,.22),
        0 22px 55px
        rgba(30,45,40,.20);
}


/*
 * The old CSS face no longer renders.
 */

.remember-live-avatar.realistic
.avatar-head {
    display: none !important;
}


/* Mobile */

@media (max-width: 800px) {

    .remember-live-avatar.realistic {
        width:
            min(280px, 76vw);
    }

    .remember-avatar-media {
        border-radius: 22px;
    }
}



/* =========================================================
   REMEMBER v0.19.2 - CONVERSATION AVATAR LAYOUT FIX
   Authoritative override
   ========================================================= */

#conversation.page,
#conversation.page.active {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;

    overflow: visible !important;
}


#conversation .conversation-shell {
    width: min(100%, 1600px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto !important;

    overflow: visible !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 18px !important;
}


/* ---------- AVATAR STAGE ---------- */

#conversation .remember-avatar-stage {
    width: 100% !important;

    height: auto !important;
    min-height: 560px !important;
    max-height: none !important;

    margin: 0 !important;

    padding:
        18px 22px 24px !important;

    overflow: visible !important;

    flex: none !important;
}


#conversation .avatar-mode-tabs {
    flex: none !important;

    margin:
        0 auto 16px !important;
}


#conversation .avatar-live-area {
    width: 100% !important;

    height: auto !important;
    min-height: 480px !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;
}


/* ---------- REALISTIC PORTRAIT ---------- */

#conversation .remember-live-avatar.realistic {
    width:
        min(360px, 80vw) !important;

    height: 430px !important;

    min-height: 430px !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    flex: none !important;

    overflow: visible !important;
}


#conversation .remember-avatar-media {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;

    border-radius: 28px !important;
}


#conversation .remember-avatar-fallback,
#conversation .remember-avatar-video {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    /*
     * Original photo is extremely close-up.
     * Keep the face centered rather than showing
     * only the forehead.
     */
    object-position:
        center center !important;
}


#conversation .avatar-state-row {
    flex: none !important;

    margin-top: 18px !important;
}


#conversation .avatar-speech {
    flex: none !important;

    width: min(100%, 760px) !important;

    margin-top: 10px !important;
}


/* ---------- STATUS ---------- */

#conversation .conversation-status {
    flex: none !important;

    min-height: 48px !important;

    overflow: visible !important;
}


/* ---------- TRANSCRIPT ---------- */

#conversation #conversationMessages {
    width: 100% !important;

    height: auto !important;
    min-height: 180px !important;
    max-height: 360px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    flex: none !important;
}


/* ---------- COMPOSER ---------- */

#conversation .conversation-composer {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    position: static !important;

    flex: none !important;

    overflow: visible !important;
}


/* ---------- SHORT LAPTOP ---------- */

@media
(min-width: 801px)
and
(max-height: 900px) {

    #conversation .remember-avatar-stage {
        min-height: 460px !important;
    }

    #conversation .avatar-live-area {
        min-height: 380px !important;
    }

    #conversation .remember-live-avatar.realistic {
        width: 290px !important;

        height: 350px !important;
        min-height: 350px !important;
    }

    #conversation #conversationMessages {
        min-height: 150px !important;
        max-height: 260px !important;
    }
}


/* ---------- TABLET / PHONE ---------- */

@media (max-width: 800px) {

    #conversation .remember-avatar-stage {
        min-height: 0 !important;

        padding:
            14px !important;
    }

    #conversation .avatar-live-area {
        min-height: 0 !important;
    }

    #conversation .remember-live-avatar.realistic {
        width:
            min(300px, 82vw) !important;

        height:
            min(380px, 100vw) !important;

        min-height: 300px !important;
    }

    #conversation #conversationMessages {
        min-height: 180px !important;
        max-height: 340px !important;
    }
}



/* =========================================================
   REMEMBER v0.20.3 - HOW REMEMBER KNOWS ME
   ========================================================= */

.person-model {
    width: 100%;

    margin-top: 34px;

    padding:
        clamp(20px, 3vw, 34px);

    box-sizing: border-box;

    border:
        1px solid rgba(0,0,0,.08);

    border-radius: 24px;

    background:
        rgba(255,255,255,.76);

    box-shadow:
        0 16px 45px
        rgba(35,55,45,.08);
}


.person-model-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    margin-bottom: 16px;
}


.person-model-header h2 {
    margin:
        4px 0 6px;

    font-size:
        clamp(24px, 3vw, 34px);
}


.person-model-header p {
    max-width: 720px;

    margin: 0;

    opacity: .74;

    line-height: 1.55;
}


.person-model-count {
    flex: none;

    padding:
        9px 14px;

    border-radius: 999px;

    background:
        rgba(70,135,85,.10);

    font-size: 13px;
    font-weight: 800;
}


.person-model-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}


.person-model-categories {
    display: grid;

    gap: 28px;
}


.person-model-category h3 {
    margin:
        0 0 12px;

    font-size: 17px;
}


.person-model-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 12px;
}


.person-model-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        rgba(0,0,0,.08);

    border-radius: 16px;

    background:
        rgba(255,255,255,.82);
}


.person-model-card-title {
    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .04em;

    opacity: .58;
}


.person-model-card-value {
    margin-bottom: 13px;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.person-model-badge {
    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding:
        5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}


.person-model-badge.explicit {
    background:
        rgba(63,143,83,.12);
}


.person-model-badge.observed {
    background:
        rgba(59,112,190,.12);
}


.person-model-badge.inferred {
    background:
        rgba(189,137,40,.14);
}


.person-model-empty,
.person-model-loading {
    padding: 22px;

    border-radius: 14px;

    background:
        rgba(0,0,0,.035);

    text-align: center;

    opacity: .72;
}


@media (max-width: 700px) {

    .person-model-header {
        flex-direction: column;
    }

    .person-model-count {
        align-self: flex-start;
    }

    .person-model-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   REMEMBER v0.24.1 - REAL PORTRAIT MOTION
   State-aware motion for the approved portrait fallback.
   A future video renderer replaces this while live.
   ========================================================= */

#conversation .remember-avatar-fallback {
    transform-origin:
        50% 46%;

    will-change:
        transform;

    backface-visibility:
        hidden;

    animation:
        remember-portrait-idle
        8s ease-in-out infinite;
}


/* IDLE
   Very subtle breathing / camera drift.
*/

#conversation .remember-avatar-stage[
    data-avatar-state="idle"
]
.remember-avatar-fallback {
    animation:
        remember-portrait-idle
        8s ease-in-out infinite;
}


/* LISTENING
   Slightly more engaged, as if leaning toward the speaker.
*/

#conversation .remember-avatar-stage[
    data-avatar-state="listening"
]
.remember-avatar-fallback {
    animation:
        remember-portrait-listening
        4.8s ease-in-out infinite;
}


/* REVIEW
   Settle almost completely while the person edits.
*/

#conversation .remember-avatar-stage[
    data-avatar-state="review"
]
.remember-avatar-fallback {
    animation:
        remember-portrait-review
        7s ease-in-out infinite;
}


/* THINKING
   Gentle contemplative drift.
*/

#conversation .remember-avatar-stage[
    data-avatar-state="thinking"
]
.remember-avatar-fallback {
    animation:
        remember-portrait-thinking
        5.5s ease-in-out infinite;
}


/* SPEAKING
   More active whole-portrait movement.
   This is intentionally NOT lip sync.
*/

#conversation .remember-avatar-stage[
    data-avatar-state="speaking"
]
.remember-avatar-fallback {
    animation:
        remember-portrait-speaking
        3.4s ease-in-out infinite;
}


/* REVIEW STATE FRAME */

#conversation .remember-avatar-stage[
    data-avatar-state="review"
]
.remember-avatar-media {
    box-shadow:
        0 0 0 4px
        rgba(123,112,164,.18),
        0 22px 55px
        rgba(30,45,40,.20);
}


/* ---------------------------------------------------------
   Portrait keyframes
   --------------------------------------------------------- */

@keyframes remember-portrait-idle {

    0%,
    100% {
        transform:
            scale(1.015)
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            scale(1.025)
            translate3d(0, -2px, 0)
            rotate(.15deg);
    }
}


@keyframes remember-portrait-listening {

    0%,
    100% {
        transform:
            scale(1.025)
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            scale(1.04)
            translate3d(0, -3px, 0)
            rotate(-.20deg);
    }
}


@keyframes remember-portrait-review {

    0%,
    100% {
        transform:
            scale(1.018)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            scale(1.022)
            translate3d(0, -1px, 0);
    }
}


@keyframes remember-portrait-thinking {

    0%,
    100% {
        transform:
            scale(1.022)
            translate3d(-1px, 0, 0)
            rotate(-.18deg);
    }

    50% {
        transform:
            scale(1.032)
            translate3d(2px, -2px, 0)
            rotate(.25deg);
    }
}


@keyframes remember-portrait-speaking {

    0%,
    100% {
        transform:
            scale(1.025)
            translate3d(0, 0, 0)
            rotate(-.12deg);
    }

    35% {
        transform:
            scale(1.038)
            translate3d(-2px, -2px, 0)
            rotate(.18deg);
    }

    70% {
        transform:
            scale(1.032)
            translate3d(2px, -1px, 0)
            rotate(-.20deg);
    }
}


/* Live video owns its own facial motion. */

#conversation .remember-avatar-video:not([hidden]) {
    animation: none !important;
    transform: none !important;
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    #conversation .remember-avatar-fallback {
        animation:
            none !important;

        transform:
            none !important;
    }
}


/* =========================================================
   REMEMBER v0.24.4 - TALKING AVATAR PREVIEW
   ========================================================= */

#conversation .remember-talking-avatar-preview {
    margin-top: 16px;
    min-height: 44px;
    padding: 10px 20px;

    border: 0;
    border-radius: 999px;

    background: #4e9b68;
    color: white;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(30, 80, 50, .18);

    transition:
        transform .15s ease,
        opacity .15s ease;
}

#conversation .remember-talking-avatar-preview:hover {
    transform: translateY(-1px);
}

#conversation .remember-talking-avatar-preview:disabled {
    opacity: .65;
    cursor: default;
    transform: none;
}


/* =========================================================
   REMEMBER v0.24.5 - FULL TALKING AVATAR FRAME
   Do not crop the generated mouth/chin area.
   ========================================================= */

#conversation .remember-avatar-video:not([hidden]) {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #111 !important;

    animation: none !important;
    transform: none !important;
}


/* =========================================================
   REMEMBER v0.24.5 - CLEAR TALKING FACE
   Hide status badge while generated avatar video is playing.
   ========================================================= */

#conversation .remember-avatar-media:has(
    .remember-avatar-video:not([hidden])
)
.remember-avatar-connection {
    display: none !important;
}



/* ==========================================================
   REMEMBER v0.34.3B - MY VOICE CSS
   ========================================================== */

.my-voice-page {
    padding-bottom: 48px;
}

.my-voice-intro {
    max-width: 680px;
    margin: 8px 0 0;
    line-height: 1.55;
    opacity: 0.78;
}

.my-voice-layout {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 980px;
}

.my-voice-card {
    padding: 24px;
    border: 1px solid rgba(80, 70, 64, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 36px rgba(50, 40, 34, 0.08);
}

.my-voice-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.my-voice-card h2 {
    margin: 5px 0 0;
    font-size: 1.25rem;
}

.my-voice-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.58;
}

.my-voice-progress {
    height: 10px;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(70, 60, 54, 0.10);
}

.my-voice-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent, #4E9B68);
    transition: width 300ms ease;
}

.my-voice-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.9rem;
    opacity: 0.72;
}

.my-voice-recorder-card {
    text-align: center;
}

.my-voice-step-row {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 14px;
    align-items: center;
}

.my-voice-step-copy span {
    font-size: 0.8rem;
    opacity: 0.62;
}

.my-voice-step-copy h2 {
    margin-top: 4px;
}

.my-voice-step-button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(70, 60, 54, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.my-voice-prompt {
    max-width: 760px;
    margin: 24px auto;
    padding: 22px;
    border-radius: 18px;
    background: rgba(78, 155, 104, 0.08);
}

.my-voice-prompt > span {
    display: block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.62;
}

.my-voice-prompt blockquote {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.7;
    font-weight: 600;
}

.my-voice-recorder-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
}

.my-voice-mic-ring {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(78, 155, 104, 0.12);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.my-voice-mic {
    font-size: 2.2rem;
}

.my-voice-recorder-state[data-state="recording"]
.my-voice-mic-ring {
    transform: scale(1.06);
    box-shadow: 0 0 0 10px rgba(159, 61, 61, 0.10);
}

#myVoiceTimer {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

#myVoiceRecorderMessage {
    opacity: 0.68;
}

.my-voice-actions,
.my-voice-preview-actions,
.my-voice-consent-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.my-voice-primary,
.my-voice-secondary,
.my-voice-danger {
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 14px;
    font-weight: 750;
    cursor: pointer;
}

.my-voice-primary {
    border: 0;
    background: var(--accent, #4E9B68);
    color: #fff;
}

.my-voice-secondary {
    border: 1px solid rgba(70, 60, 54, 0.18);
    background: rgba(255, 255, 255, 0.72);
}

.my-voice-danger {
    border: 0;
    background: #9f3d3d;
    color: #fff;
}

.my-voice-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.my-voice-preview {
    max-width: 700px;
    margin: 24px auto 0;
    padding: 20px;
    border: 1px solid rgba(70, 60, 54, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
}

.my-voice-preview-heading {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    text-align: left;
}

.my-voice-preview audio {
    width: 100%;
    margin-bottom: 16px;
}

.my-voice-message {
    min-height: 24px;
    margin-top: 16px;
    font-weight: 650;
}

.my-voice-prompt-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.my-voice-prompt-item {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.50);
}

.my-voice-prompt-item.active {
    outline: 2px solid rgba(78, 155, 104, 0.28);
}

.my-voice-prompt-state {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(70, 60, 54, 0.08);
    font-size: 0.8rem;
    font-weight: 800;
}

.my-voice-prompt-item.saved
.my-voice-prompt-state {
    background: rgba(78, 155, 104, 0.16);
}

.my-voice-prompt-open {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    opacity: 0.72;
}

.my-voice-consent-card p {
    line-height: 1.6;
    opacity: 0.78;
}

.my-voice-consent-badge {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(70, 60, 54, 0.08);
    font-size: 0.78rem;
    font-weight: 750;
}

.my-voice-consent-badge.enabled {
    background: rgba(78, 155, 104, 0.16);
}

.my-voice-consent-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0;
    padding: 16px;
    border-radius: 14px;
    background: rgba(78, 155, 104, 0.07);
    line-height: 1.5;
}

.my-voice-consent-check input {
    margin-top: 4px;
    transform: scale(1.2);
}

@media (max-width: 600px) {

    .my-voice-page {
        padding-bottom: 100px;
    }

    .my-voice-card {
        padding: 18px;
        border-radius: 18px;
    }

    .my-voice-card-heading {
        gap: 10px;
    }

    .my-voice-step-row {
        grid-template-columns: 38px 1fr 38px;
        gap: 8px;
    }

    .my-voice-step-button {
        width: 38px;
        height: 38px;
    }

    .my-voice-prompt {
        padding: 17px;
        margin: 18px auto;
    }

    .my-voice-prompt blockquote {
        font-size: 1rem;
    }

    .my-voice-mic-ring {
        width: 78px;
        height: 78px;
    }

    .my-voice-primary,
    .my-voice-secondary,
    .my-voice-danger {
        width: 100%;
    }

    .my-voice-prompt-item {
        grid-template-columns: 30px 1fr auto;
        padding: 12px;
    }

    .my-voice-meta {
        flex-direction: column;
    }
}



/* ==========================================================
   REMEMBER RECIPES v0.3B - CSS
   ========================================================== */

.recipes-page {
    padding-bottom: 56px;
}

.recipes-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
}

.recipes-heading h1 {
    margin: 5px 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    font-weight: 500;
    color: var(--text, #183d2b);
}

.recipes-eyebrow {
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, #c88758);
}

.recipes-intro {
    max-width: 650px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted, #68736d);
}


/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */

.recipes-primary-button,
.recipes-secondary-button,
.recipes-close-button,
.recipes-remove-button {
    font: inherit;
}

.recipes-primary-button {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 18px;
    background: var(--primary, #1e5339);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow:
        0 5px 14px rgba(19, 63, 43, 0.12);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.recipes-primary-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 8px 20px rgba(19, 63, 43, 0.17);
}

.recipes-primary-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

.recipes-secondary-button {
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.16));
    border-radius: 11px;
    padding: 9px 14px;
    background:
        var(--surface, rgba(255, 255, 255, 0.68));
    color: var(--primary, #1e5339);
    font-weight: 700;
    cursor: pointer;
}

.recipes-secondary-button:hover {
    background:
        var(--surface-strong, rgba(255, 255, 255, 0.92));
}


/* ----------------------------------------------------------
   Toolbar / tabs
   ---------------------------------------------------------- */

.recipes-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid
        var(--border, rgba(24, 61, 43, 0.13));
}

.recipes-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.recipes-tab {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 14px;
    background: transparent;
    color: var(--text-muted, #68736d);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.recipes-tab:hover {
    background: rgba(30, 83, 57, 0.06);
    color: var(--primary, #1e5339);
}

.recipes-tab.active {
    background: rgba(30, 83, 57, 0.11);
    color: var(--primary, #1e5339);
}

.recipes-search {
    display: grid;
    gap: 5px;
    min-width: min(280px, 100%);
}

.recipes-search > span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #68736d);
}

.recipes-search input {
    width: 100%;
    min-height: 42px;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.16));
    border-radius: 11px;
    padding: 9px 13px;
    background:
        var(--surface, rgba(255, 255, 255, 0.72));
    color: var(--text, #183d2b);
    font: inherit;
    outline: none;
}

.recipes-search input:focus {
    border-color: var(--primary, #1e5339);
    box-shadow:
        0 0 0 3px rgba(30, 83, 57, 0.08);
}


/* ----------------------------------------------------------
   Empty Recipe Box
   ---------------------------------------------------------- */

.recipes-empty {
    max-width: 780px;
    margin: 28px auto 0;
    padding: 56px 34px;
    text-align: center;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.13));
    border-radius: 24px;
    background:
        var(--surface, rgba(255, 255, 255, 0.52));
    box-shadow:
        0 18px 44px rgba(38, 53, 45, 0.05);
}

.recipes-empty-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(30, 83, 57, 0.08);
    font-size: 2rem;
}

.recipes-empty h2 {
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text, #183d2b);
}

.recipes-empty p {
    max-width: 520px;
    margin: 0 auto 22px;
    line-height: 1.6;
    color: var(--text-muted, #68736d);
}


/* ----------------------------------------------------------
   Recipe cards
   ---------------------------------------------------------- */

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

.recipe-card {
    overflow: hidden;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.13));
    border-radius: 20px;
    background:
        var(--surface, rgba(255, 255, 255, 0.68));
    box-shadow:
        0 12px 30px rgba(38, 53, 45, 0.06);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 17px 38px rgba(38, 53, 45, 0.09);
}

.recipe-card-photo {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background:
        linear-gradient(
            135deg,
            rgba(30, 83, 57, 0.09),
            rgba(201, 137, 89, 0.10)
        );
    font-size: 2.4rem;
}

.recipe-card-body {
    padding: 17px;
}

.recipe-card-category {
    margin-bottom: 5px;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent, #c88758);
}

.recipe-card h3 {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text, #183d2b);
}

.recipe-card-description {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.8em;
    margin: 0 0 14px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
    color: var(--text-muted, #68736d);
}

.recipe-card-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: var(--text-muted, #68736d);
}

.recipe-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid
        var(--border, rgba(24, 61, 43, 0.10));
}

.recipe-visibility {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(30, 83, 57, 0.07);
    color: var(--primary, #1e5339);
    font-size: 0.72rem;
    font-weight: 800;
}

.recipe-card-actions {
    display: flex;
    gap: 6px;
}

.recipe-card-action {
    border: 0;
    background: transparent;
    color: var(--primary, #1e5339);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}


/* ----------------------------------------------------------
   Editor overlay
   ---------------------------------------------------------- */

.recipes-editor-overlay {
    position: fixed;
    z-index: 1500;
    inset: 0;
    overflow-y: auto;
    padding: 30px;
    background: rgba(16, 32, 24, 0.56);
    backdrop-filter: blur(6px);
}

.recipes-editor-overlay[hidden] {
    display: none !important;
}

.recipes-editor {
    width: min(900px, 100%);
    margin: 0 auto;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.13));
    border-radius: 24px;
    background:
        var(--page-bg, #f7f3e8);
    color: var(--text, #183d2b);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.20);
}

.recipes-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px 20px;
    border-bottom: 1px solid
        var(--border, rgba(24, 61, 43, 0.12));
}

.recipes-editor-header h2 {
    margin: 4px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 500;
}

.recipes-close-button {
    width: 40px;
    height: 40px;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.13));
    border-radius: 50%;
    background:
        var(--surface, rgba(255, 255, 255, 0.55));
    color: var(--text, #183d2b);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}


/* ----------------------------------------------------------
   Form
   ---------------------------------------------------------- */

#recipesForm {
    padding: 4px 28px 28px;
}

.recipes-form-section {
    padding: 25px 0;
    border-bottom: 1px solid
        var(--border, rgba(24, 61, 43, 0.11));
}

.recipes-form-section:last-of-type {
    border-bottom: 0;
}

.recipes-form-section h3 {
    margin: 0 0 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.recipes-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.recipes-section-heading h3 {
    margin: 0;
}

.recipes-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.recipes-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.recipes-field-wide {
    width: 100%;
}

.recipes-field > span {
    font-size: 0.79rem;
    font-weight: 800;
    color: var(--text, #183d2b);
}

.recipes-field input,
.recipes-field textarea,
.recipes-field select,
.recipe-ingredient-row input,
.recipe-step-row textarea {
    width: 100%;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.16));
    border-radius: 11px;
    padding: 11px 12px;
    background:
        var(--surface, rgba(255, 255, 255, 0.70));
    color: var(--text, #183d2b);
    font: inherit;
    outline: none;
}

.recipes-field textarea,
.recipe-step-row textarea {
    resize: vertical;
}

.recipes-field input:focus,
.recipes-field textarea:focus,
.recipes-field select:focus,
.recipe-ingredient-row input:focus,
.recipe-step-row textarea:focus {
    border-color: var(--primary, #1e5339);
    box-shadow:
        0 0 0 3px rgba(30, 83, 57, 0.08);
}

.recipes-number-field {
    display: flex;
    align-items: center;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.16));
    border-radius: 11px;
    background:
        var(--surface, rgba(255, 255, 255, 0.70));
}

.recipes-number-field input {
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

.recipes-number-field span {
    padding-right: 12px;
    color: var(--text-muted, #68736d);
    font-size: 0.82rem;
}


/* ----------------------------------------------------------
   Dynamic ingredients / steps
   ---------------------------------------------------------- */

.recipe-ingredient-row {
    display: grid;
    grid-template-columns:
        90px 110px minmax(160px, 1fr)
        minmax(130px, 0.7fr) 38px;
    gap: 8px;
    align-items: center;
    margin-bottom: 9px;
}

.recipe-step-row {
    display: grid;
    grid-template-columns:
        36px minmax(0, 1fr) 100px 38px;
    gap: 9px;
    align-items: start;
    margin-bottom: 12px;
}

.recipe-step-number {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 5px;
    border-radius: 50%;
    background: rgba(30, 83, 57, 0.10);
    color: var(--primary, #1e5339);
    font-size: 0.8rem;
    font-weight: 900;
}

.recipes-remove-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(139, 54, 54, 0.07);
    color: #8b3636;
    cursor: pointer;
}


/* ----------------------------------------------------------
   Privacy
   ---------------------------------------------------------- */

.recipes-privacy-options {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.recipes-privacy-card {
    position: relative;
    display: grid;
    gap: 7px;
    min-height: 132px;
    padding: 17px;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.14));
    border-radius: 16px;
    background:
        var(--surface, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.15s ease;
}

.recipes-privacy-card:hover {
    transform: translateY(-1px);
    border-color: rgba(30, 83, 57, 0.28);
}

.recipes-privacy-card:has(input:checked) {
    border-color: var(--primary, #1e5339);
    background: rgba(30, 83, 57, 0.08);
    box-shadow:
        0 0 0 2px rgba(30, 83, 57, 0.05);
}

.recipes-privacy-card input {
    position: absolute;
    top: 14px;
    right: 14px;
    accent-color: var(--primary, #1e5339);
}

.recipes-privacy-card strong {
    padding-right: 24px;
    color: var(--text, #183d2b);
    font-size: 0.94rem;
}

.recipes-privacy-card span {
    color: var(--text-muted, #68736d);
    font-size: 0.82rem;
    line-height: 1.45;
}


/* ----------------------------------------------------------
   Messages / actions
   ---------------------------------------------------------- */

.recipes-message {
    min-height: 22px;
    margin-top: 18px;
    font-size: 0.85rem;
    font-weight: 700;
}

.recipes-message.success {
    color: #28704b;
}

.recipes-message.error {
    color: #9b3d3d;
}

.recipes-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 22px;
}


/* ----------------------------------------------------------
   Recipe detail view support
   ---------------------------------------------------------- */

.recipe-detail {
    display: grid;
    gap: 24px;
}

.recipe-detail-header {
    display: grid;
    gap: 10px;
}

.recipe-detail-header h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    font-weight: 500;
    color: var(--text, #183d2b);
}

.recipe-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-muted, #68736d);
    font-size: 0.85rem;
}

.recipe-detail-columns {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.75fr)
        minmax(0, 1.25fr);
    gap: 28px;
}

.recipe-detail-section {
    padding: 20px;
    border: 1px solid
        var(--border, rgba(24, 61, 43, 0.12));
    border-radius: 17px;
    background:
        var(--surface, rgba(255, 255, 255, 0.46));
}

.recipe-detail-section h3 {
    margin: 0 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.recipe-detail-ingredients {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-detail-ingredients li {
    padding-bottom: 8px;
    border-bottom: 1px solid
        var(--border, rgba(24, 61, 43, 0.08));
}

.recipe-detail-steps {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recipe-detail-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
}

.recipe-detail-story {
    padding: 22px;
    border-radius: 17px;
    background: rgba(201, 137, 89, 0.08);
    line-height: 1.65;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .recipes-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .recipes-heading .recipes-primary-button {
        align-self: flex-start;
    }

    .recipes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .recipes-search {
        width: 100%;
    }

    .recipes-form-grid {
        grid-template-columns: 1fr;
    }

    .recipe-ingredient-row {
        grid-template-columns:
            80px 95px minmax(0, 1fr) 38px;
    }

    .recipe-ingredient-row
    .recipe-ingredient-preparation {
        grid-column: 1 / -1;
    }

    .recipes-privacy-options {
        grid-template-columns: 1fr;
    }

    .recipe-detail-columns {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 640px) {

    .recipes-editor-overlay {
        padding: 0;
        background:
            var(--page-bg, #f7f3e8);
    }

    .recipes-editor {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .recipes-editor-header {
        padding: 20px 18px 16px;
    }

    #recipesForm {
        padding: 0 18px 24px;
    }

    .recipes-grid {
        grid-template-columns: 1fr;
    }

    .recipe-ingredient-row {
        grid-template-columns:
            1fr 1fr 38px;
        padding: 12px;
        border: 1px solid
            var(--border, rgba(24, 61, 43, 0.10));
        border-radius: 14px;
    }

    .recipe-ingredient-row
    .recipe-ingredient-name,
    .recipe-ingredient-row
    .recipe-ingredient-preparation {
        grid-column: 1 / -1;
    }

    .recipe-step-row {
        grid-template-columns:
            34px minmax(0, 1fr) 38px;
    }

    .recipe-step-row
    .recipe-step-timer {
        grid-column: 2 / 3;
    }

    .recipes-form-actions {
        position: sticky;
        bottom: 0;
        margin: 0 -18px -24px;
        padding: 14px 18px;
        background:
            var(--page-bg, #f7f3e8);
        border-top: 1px solid
            var(--border, rgba(24, 61, 43, 0.12));
    }

    .recipes-form-actions button {
        flex: 1;
    }
}


/* ----------------------------------------------------------
   Print recipe support
   ---------------------------------------------------------- */

@media print {

    .recipes-heading,
    .recipes-toolbar,
    .recipes-form-actions,
    .recipe-card-actions,
    .sidebar,
    nav {
        display: none !important;
    }

    .recipes-page,
    .recipe-detail {
        color: #000 !important;
        background: #fff !important;
    }

    .recipe-detail-section,
    .recipe-detail-story {
        break-inside: avoid;
        border-color: #ccc !important;
        background: #fff !important;
    }
}



/*
 * REMEMBER v0.17.2
 * AUTHORITATIVE MOBILE NAVIGATION
 */

@media (max-width: 800px) {

    /* Drawer */
    body .shell > .sidebar {
        display: flex !important;
        flex-direction: column !important;

        width: min(84vw, 320px) !important;
        max-width: 320px !important;

        padding: 18px 14px 20px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        box-sizing: border-box !important;
    }


    /* Hide duplicate desktop branding */
    body .shell > .sidebar > .brand,
    body .shell > .sidebar > .tagline {
        display: none !important;
    }


    /* NAV MUST BE ONE VERTICAL COLUMN */
    body .shell > .sidebar .nav {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 7px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    body .shell > .sidebar .nav button {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: none !important;

        min-height: 50px !important;

        margin: 0 !important;
        padding: 11px 14px !important;

        border-radius: 14px !important;

        text-align: left !important;
        white-space: nowrap !important;

        font-size: 16px !important;
        line-height: 1.25 !important;

        box-sizing: border-box !important;

        flex: 0 0 auto !important;
    }


    /* Selected page */
    body .shell > .sidebar .nav button.active {
        width: 100% !important;
    }


    /* Theme section stays at bottom */
    body .shell > .sidebar .theme-picker {
        width: 100% !important;

        margin: 18px 0 0 !important;
        padding: 16px 10px 4px !important;

        box-sizing: border-box !important;
    }


    body .shell > .sidebar .theme-label {
        text-align: left !important;
    }


    body .shell > .sidebar .theme-options {
        display: flex !important;

        justify-content: flex-start !important;
        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 10px !important;
    }


    body .shell > .sidebar .theme-name {
        text-align: left !important;
    }


    /* Mobile top bar */
    body .mobile-header {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }


    body .mobile-brand {
        margin: 0 !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-style: italic !important;
    }


    body .mobile-menu-button {
        display: grid !important;
        place-items: center !important;

        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;

        padding: 0 !important;
        margin: 0 !important;

        line-height: 1 !important;
    }


    /* Proper backdrop */
    body.mobile-nav-open {
        overflow: hidden !important;
    }


    body.mobile-nav-open
    .mobile-nav-backdrop {
        pointer-events: auto !important;
    }
}


@media (max-width: 600px) {

    body .shell > .sidebar {
        width: min(86vw, 300px) !important;

        padding:
            14px 12px 18px !important;
    }


    body .shell > .sidebar .nav button {
        min-height: 48px !important;

        padding:
            10px 13px !important;

        font-size: 15px !important;
    }


    body .shell > .sidebar .theme-picker {
        margin-top: 14px !important;
    }
}


/*
 * REMEMBER v0.17.3
 * FINAL MOBILE NAV ROW RESET
 */

@media screen and (max-width: 800px) {

    html body .shell > aside.sidebar nav.nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 7px !important;

        overflow: visible !important;
    }


    html body .shell > aside.sidebar
    nav.nav > button {

        position: static !important;

        display: block !important;

        float: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 13px 15px !important;

        transform: none !important;

        flex: none !important;

        text-align: left !important;

        white-space: nowrap !important;

        font-size: 16px !important;
        line-height: 24px !important;

        box-sizing: border-box !important;

        border-radius: 14px !important;
    }


    html body .shell > aside.sidebar
    nav.nav > button.active {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 13px 15px !important;
    }


    /*
     * Drawer itself must never inherit
     * the old bottom-navigation layout.
     */

    html body .shell > aside.sidebar {

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        grid-template-columns: none !important;

        width: min(86vw, 300px) !important;

        height:
            calc(100dvh - 58px) !important;

        top: 58px !important;
        bottom: 0 !important;

        padding: 16px 14px 20px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    /*
     * Do not let theme picker participate
     * in any old sidebar grid.
     */

    html body .shell > aside.sidebar
    .theme-picker {

        display: block !important;

        position: static !important;

        width: 100% !important;

        margin: 18px 0 0 !important;

        flex: none !important;
    }


    html body .shell > aside.sidebar
    .theme-options {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;

        width: 100% !important;
    }
}


@media screen and (max-width: 380px) {

    html body .shell > aside.sidebar {
        width: 88vw !important;
    }

    html body .shell > aside.sidebar
    nav.nav > button {

        min-height: 48px !important;

        padding:
            12px 13px !important;

        font-size: 15px !important;
    }
}


/*
 * REMEMBER RECIPES v0.4B
 * RECIPE MEDIA UI
 */

.recipes-media-section {
    overflow: hidden;
}

.recipes-media-intro {
    margin: 5px 0 0;
    max-width: 620px;

    color:
        var(--text-muted, #68736d);

    font-size: 0.9rem;
    line-height: 1.55;
}


/* ==========================================================
   MEDIA CHOICES
   ========================================================== */

.recipes-media-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

    margin-top: 18px;
}


.recipes-media-panel {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 220px;

    padding: 20px;

    border:
        1px solid
        var(
            --border,
            rgba(24, 61, 43, 0.14)
        );

    border-radius: 18px;

    background:
        var(
            --surface,
            rgba(255, 255, 255, 0.56)
        );

    box-sizing: border-box;
}


.recipes-media-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 14px;

    border-radius: 15px;

    background:
        rgba(30, 83, 57, 0.08);

    font-size: 24px;
}


.recipes-media-copy {
    display: grid;
    gap: 6px;

    margin-bottom: 18px;
}


.recipes-media-copy strong {
    color:
        var(--text, #183d2b);

    font-size: 1rem;
}


.recipes-media-copy span {
    color:
        var(--text-muted, #68736d);

    font-size: 0.86rem;
    line-height: 1.5;
}


.recipes-media-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: auto;
}


.recipes-media-buttons button {
    flex: 1 1 140px;

    min-height: 44px;
}


/* ==========================================================
   FILE INPUTS
   ========================================================== */

.recipes-media-file-input {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================
   SELECTED IMAGE PREVIEW
   ========================================================== */

.recipes-media-preview {
    display: grid;

    grid-template-columns:
        minmax(180px, 280px)
        minmax(0, 1fr);

    gap: 20px;

    margin-top: 20px;
    padding: 16px;

    border:
        1px solid
        rgba(30, 83, 57, 0.15);

    border-radius: 18px;

    background:
        rgba(30, 83, 57, 0.045);
}


.recipes-media-preview[hidden] {
    display: none !important;
}


.recipes-media-preview-image-wrap {
    position: relative;

    min-height: 170px;

    overflow: hidden;

    border-radius: 14px;

    background:
        rgba(24, 61, 43, 0.08);
}


.recipes-media-preview-image {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 170px;
    max-height: 230px;

    object-fit: cover;
}


#recipesMediaPreviewImage {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 170px;
    max-height: 230px;

    object-fit: cover;
}


.recipes-media-preview-info {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    min-width: 0;

    gap: 8px;
}


.recipes-media-preview-info strong {
    display: block;

    max-width: 100%;

    overflow: hidden;

    color:
        var(--text, #183d2b);

    text-overflow: ellipsis;
    white-space: nowrap;
}


.recipes-media-preview-size {
    color:
        var(--text-muted, #68736d);

    font-size: 0.82rem;
}


#recipesMediaRemoveSelection {
    margin-top: 7px;
}


/* ==========================================================
   EXISTING SAVED MEDIA
   ========================================================== */

.recipes-existing-media {
    margin-top: 22px;
}


.recipes-existing-media[hidden] {
    display: none !important;
}


.recipes-existing-media-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(150px, 1fr)
        );

    gap: 12px;

    margin-top: 10px;
}


.recipes-existing-media-item {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(
            --border,
            rgba(24, 61, 43, 0.14)
        );

    border-radius: 15px;

    background:
        var(
            --surface,
            rgba(255, 255, 255, 0.58)
        );
}


.recipes-existing-media-image {
    display: block;

    width: 100%;
    height: 130px;

    object-fit: cover;

    background:
        rgba(24, 61, 43, 0.06);
}


.recipes-existing-media-body {
    display: grid;

    gap: 5px;

    padding: 10px;
}


.recipes-existing-media-type {
    color:
        var(--accent, #c88758);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.recipes-existing-media-name {
    overflow: hidden;

    color:
        var(--text, #183d2b);

    font-size: 0.82rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.recipes-existing-media-remove {
    width: 100%;

    margin-top: 3px;

    border: 0;

    background: transparent;

    color: #9b3c35;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;

    text-align: left;

    cursor: pointer;
}


/* ==========================================================
   HELP
   ========================================================== */

.recipes-media-help {
    margin: 14px 2px 0;

    color:
        var(--text-muted, #68736d);

    font-size: 0.78rem;
    line-height: 1.5;
}


/* ==========================================================
   RECIPE BOX PHOTO
   ========================================================== */

.recipe-card-photo {
    overflow: hidden;
}


.recipe-card-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   RECIPE DETAIL MEDIA
   ========================================================== */

.recipe-detail-media {
    margin:
        0 0 24px;
}


.recipe-detail-media img {
    display: block;

    width: 100%;
    max-height: 520px;

    object-fit: cover;

    border-radius: 18px;
}


.recipe-detail-original {
    margin-top: 20px;
}


.recipe-detail-original img {
    display: block;

    width: 100%;
    max-height: 700px;

    object-fit: contain;

    border-radius: 16px;

    background:
        rgba(24, 61, 43, 0.05);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .recipes-media-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .recipes-media-panel {
        min-height: 0;

        padding: 16px;
    }


    .recipes-media-buttons {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .recipes-media-buttons button {
        width: 100%;

        min-height: 48px;
    }


    .recipes-media-preview {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 12px;
    }


    .recipes-media-preview-image-wrap,
    #recipesMediaPreviewImage {
        min-height: 210px;
        max-height: 300px;
    }


    .recipes-media-preview-info {
        align-items: stretch;
    }


    #recipesMediaRemoveSelection {
        width: 100%;

        min-height: 46px;
    }


    .recipes-existing-media-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .recipes-existing-media-image {
        height: 120px;
    }
}


@media (max-width: 420px) {

    .recipes-existing-media-grid {
        grid-template-columns: 1fr;
    }


    .recipes-existing-media-image {
        height: 180px;
    }
}


/* =========================================================
   REMEMBER v0.40 - USER SIGN OUT
   ========================================================= */

.remember-account-actions {
    margin-top: auto;
    padding-top: 20px;
}

.remember-logout-button {
    width: 100%;
    min-height: 44px;

    padding: 10px 14px;

    border: 1px solid rgba(0,0,0,.14);
    border-radius: 12px;

    background: rgba(255,255,255,.72);

    color: inherit;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.remember-logout-button:hover {
    background: rgba(255,255,255,.95);
}

.remember-logout-button:disabled {
    opacity: .55;
    cursor: wait;
}


/* =========================================================
   REMEMBER v0.41 - PASSWORD RESET UI
   ========================================================= */

.remember-forgot-link {
    margin-top: 12px;
    margin-bottom: -4px;
}

.remember-auth-status.success {
    color: #397d50;
}