/* _content/MemoryGame.Web/Components/Layout/BuildStamp.razor.rz.scp.css */
/* Scoped to the component, like the other layout pieces here.

   Quiet on purpose: readable when you go looking for it, close to invisible the
   rest of the time. It sits above page content because it is fixed, so it stays
   small and low-contrast rather than competing with anything. */

.build-stamp[b-zc0uodtuuz] {
    position: fixed;
    right: .5rem;
    bottom: .35rem;
    z-index: 1030;
    font-size: .68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    padding: .25rem .45rem;
    border-radius: 4px;
    color: #6c757d;
    background: rgba(127, 127, 127, .12);
    opacity: .45;
    transition: opacity .15s ease;
}

/* Hover only. It is text now, so there is nothing to focus. */
.build-stamp:hover[b-zc0uodtuuz] {
    opacity: 1;
    color: #495057;
}

.build-stamp-warn[b-zc0uodtuuz] {
    color: #b8860b;
    font-weight: 600;
}

/* Follows the viewer's theme rather than assuming the light one. */
@media (prefers-color-scheme: dark) {
    .build-stamp[b-zc0uodtuuz] {
        color: #adb5bd;
        background: rgba(255, 255, 255, .08);
    }

    .build-stamp:hover[b-zc0uodtuuz] {
        color: #dee2e6;
    }
}

/* On a narrow screen it would otherwise sit on whatever is in that corner. */
@media (max-width: 575.98px) {
    .build-stamp[b-zc0uodtuuz] {
        font-size: .62rem;
        opacity: .3;
    }
}
/* _content/MemoryGame.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* THE PAGE SCROLLS, NOT A BOX INSIDE IT.

   This used to pin .main-container to 100vh and give <main> its own overflow, so the document was
   exactly one viewport tall and everything scrolled inside it. Two things came of that, and both
   were reported as bugs before this was understood as one:

     * TWO SCROLLBARS. The document is exactly viewport height, so anything that adds a pixel - a
       zoom level, a horizontal scrollbar appearing, a dev-time script with a line box - gives the
       document a scrollbar of its own beside main's.
     * DEAD SPACE AT THE BOTTOM ON A PHONE. 100vh is the viewport WITHOUT the address bar, so the
       container is taller than what you can see, and the end of the page sits under the browser's
       own furniture.

   A page that scrolls normally has neither problem, and mobile browsers collapse their address bar
   on the way down, which the old version prevented. The bar stays put by being sticky. */
.main-container[b-9xuna8kxpr] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-9xuna8kxpr] {
    flex: 1;
    background-color: var(--app-ground);
}

.page-content[b-9xuna8kxpr] {
    padding: 1.5rem;
}

/* --- Navigation Styling --- */
/* Sticky, now that the page itself scrolls: the bar stayed in view for free when it was inside a
   scrolling box, and this is what buys that back. */
[b-9xuna8kxpr] .top-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--app-bar);
    color: var(--app-surface);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column; /* Stack brand on top of links on mobile */
    align-items: center;
    gap: 10px;
}

[b-9xuna8kxpr] .nav-brand {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 5px 0;
    /* On a phone the brand row holds the toggle at its far right; from 768px up the toggle is
       gone and this collapses back to just the logo. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

[b-9xuna8kxpr] .nav-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    color: var(--app-surface);
    font-size: 1.25rem;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-toggle:hover {
        border-color: var(--app-accent);
        color: var(--app-accent);
    }

/* Hidden on a phone until the toggle says otherwise. Not display:none on the container itself -
   .open has to be able to bring it back, and a row that was never laid out cannot animate. */
/* =========================================
   THE PHONE DRAWER

   Slides in from the left over a dimmed backdrop, items stacked, closing on
   selection, on the backdrop, or on Escape. It is what almost every app does,
   and the reason it suits this nav in particular is that this nav is not flat:
   Explore, Library and Admin have menus inside them. A drawer turns those into
   indented sections; the wrapped row it replaces had them opening as floating
   panels over the page, which is a menu inside a menu on the smallest screen
   in the world.

   Left rather than right, which is the convention. The argument for the right
   is thumb reach on a large phone, and it is a real argument - but the button
   that opens this sits top-left, and a panel that flies out from the opposite
   side of the screen from the control that summoned it is its own small
   confusion.
========================================= */
[b-9xuna8kxpr] .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px);
    background-color: var(--app-bar);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 1rem;
    overflow-y: auto;
    /* Off-screen rather than display:none, so it can slide - and so its
       contents are laid out and measurable before it is ever opened. */
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}

    [b-9xuna8kxpr] .nav-links.open {
        transform: translateX(0);
    }

@media (prefers-reduced-motion: reduce) {
    [b-9xuna8kxpr] .nav-links {
        transition: none;
    }
}

/* The dimmed page behind it. A tap anywhere out there closes the drawer, which
   is the gesture people try first and the one a panel with no way out fails. */
[b-9xuna8kxpr] .nav-scrim {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1001;
    border: 0;
    padding: 0;
}

[b-9xuna8kxpr] .nav-drawer-close {
    align-self: flex-end;
    background: none;
    border: 0;
    color: var(--app-bar-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: .4rem .9rem 1rem;
    cursor: pointer;
}

    [b-9xuna8kxpr] .nav-drawer-close:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item {
    color: var(--app-bar-muted);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    padding: .8rem 1.25rem;
}

    [b-9xuna8kxpr] .nav-item i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    [b-9xuna8kxpr] .nav-item.active {
        color: var(--app-surface);
        border-bottom: 2px solid var(--app-accent);
    }

        /* The icon carries the accent; the label stays white so it reads as a label rather than
           as a link that has been visited. */
        [b-9xuna8kxpr] .nav-item.active i {
            color: var(--app-accent);
        }

/* --- Explore Dropdown (Study / Test / Memorials collapsed into one menu) --- */
[b-9xuna8kxpr] .dropdown-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: stretch;
}

/* In the drawer: part of the list, indented under the thing that opened it.
   The desktop rules below put it back to a floating panel. */
[b-9xuna8kxpr] .dropdown-nav-menu {
    background-color: rgba(0, 0, 0, .18);
    overflow: hidden;
    z-index: 1001;
}

[b-9xuna8kxpr] .dropdown-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 12px 2.6rem;
    color: var(--app-bar-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

    [b-9xuna8kxpr] .dropdown-nav-link:last-child {
        border-bottom: none;
    }

    [b-9xuna8kxpr] .dropdown-nav-link:hover {
        background-color: rgba(255, 255, 255, .06);
        color: var(--app-surface);
    }

    [b-9xuna8kxpr] .dropdown-nav-link.active {
        color: var(--app-accent);
        font-weight: 700;
    }

/* Group label inside a dropdown. Same shape as the home page's section headings,
   so "Remember" and "Browse" read as the same distinction in both places. */
[b-9xuna8kxpr] .dropdown-nav-heading {
    padding: 12px 16px 5px 2.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--app-bar-faint);
    background: none;
    border-bottom: 0;
}

[b-9xuna8kxpr] .dropdown-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* --- Desktop Layout --- */
@media (min-width: 768px) {
    [b-9xuna8kxpr] .top-nav {
        flex-direction: row; /* Side by side brand and links */
        justify-content: space-between;
        height: 60px;
        /* The bar stays full width - it is the app's edge - but its CONTENTS stop where the
           widest page stops, so the logo and the links line up with what is underneath them
           instead of hugging the window. On a wide screen they were pinned to the far right
           while the page sat in the middle.
           
           Done with padding rather than an inner wrapper because the bar has no spare element
           to centre, and max() keeps the 2rem gutter on anything narrower than the cap. This is
           what heaphomestead.com does too, at its own width. */
        padding-inline: max(2rem, calc((100% - var(--app-width-tool)) / 2));
    }

    [b-9xuna8kxpr] .nav-brand {
        width: auto;
    }

    /* The toggle is a phone control. Hiding it here rather than rendering it conditionally in C#
       means resizing a desktop window never leaves the markup disagreeing with the layout. */
    [b-9xuna8kxpr] .nav-toggle,
    [b-9xuna8kxpr] .nav-drawer-close {
        display: none;
    }

    [b-9xuna8kxpr] .nav-links {
        /* Back to a row in the bar: static, no drawer, no transform, whatever
           the phone toggle last said. */
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        justify-content: flex-end;
        gap: 30px;
        padding: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    [b-9xuna8kxpr] .nav-scrim {
        display: none;
    }

    [b-9xuna8kxpr] .nav-item,
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: column;
        gap: 0;
        width: auto;
        font-size: 0.75rem;
        padding: 5px;
    }

        [b-9xuna8kxpr] .nav-item-btn i {
            font-size: 1.3rem;
            width: auto;
        }

    [b-9xuna8kxpr] .dropdown-nav-item {
        flex-direction: row;
        align-items: center;
    }

    [b-9xuna8kxpr] .dropdown-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        min-width: 180px;
    }

    [b-9xuna8kxpr] .dropdown-nav-link {
        padding: 12px 16px;
        color: #212529;
        font-size: 0.9rem;
        border-bottom: 1px solid #f1f2f6;
    }

        [b-9xuna8kxpr] .dropdown-nav-link:hover {
            background-color: #f8f9fa;
            color: var(--app-accent);
        }

    [b-9xuna8kxpr] .dropdown-nav-heading {
        padding: 10px 16px 5px;
        background: #fbfcfd;
        border-bottom: 1px solid #f1f2f6;
    }

    [b-9xuna8kxpr] .nav-item i {
        display: block; /* Ensures it sits on its own line above the text */
        font-size: 1.4rem;
        margin-bottom: 2px;
        color: inherit; /* Inherits the blue color when active */
    }
}

[b-9xuna8kxpr] .nav-item-form {
    display: inline-block;
    margin: 0;
}

[b-9xuna8kxpr] .nav-item-btn {
    background: none;
    border: none;
    color: var(--app-bar-muted);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    padding: .8rem 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}

    [b-9xuna8kxpr] .nav-item-btn i {
        font-size: 1.15rem;
        width: 1.4rem;
        text-align: center;
    }

    /* Match the hover/active states of the NavLinks */
    [b-9xuna8kxpr] .nav-item-btn:hover {
        color: var(--app-surface);
    }

[b-9xuna8kxpr] .nav-item:hover {
    color: var(--app-surface);
}

@media (min-width: 768px) {
    [b-9xuna8kxpr] .nav-item-btn {
        flex-direction: row;
        font-size: 1rem;
        gap: 8px;
    }
}
/* _content/MemoryGame.Web/Components/Layout/NavMenu.razor.rz.scp.css */
.sidebar-island[b-0cmymwtthv] {
    background-color: #212529;
    color: white;
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header[b-0cmymwtthv] {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 15px;
}

.toggle-btn[b-0cmymwtthv] {
    color: white;
    font-size: 1.5rem;
    padding: 0;
    background: none;
    border: none;
}

.nav-links[b-0cmymwtthv] {
    display: flex;
    flex-direction: column;
}

.nav-link[b-0cmymwtthv] {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: #ced4da;
    text-decoration: none;
}

    .nav-link:hover[b-0cmymwtthv] {
        background-color: #343a40;
    }

    .nav-link.active[b-0cmymwtthv] {
        background-color: var(--app-accent);
        color: white;
    }

/* --- DESKTOP --- */
@media (min-width: 768.1px) {
    .sidebar-island.expanded[b-0cmymwtthv] {
        width: 250px;
    }

    .sidebar-island.collapsed[b-0cmymwtthv] {
        width: 65px;
    }

        .sidebar-island.collapsed .text[b-0cmymwtthv] {
            display: none;
        }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .sidebar-island[b-0cmymwtthv] {
        width: 100%;
    }

        .sidebar-island.collapsed .nav-links[b-0cmymwtthv] {
            display: none;
        }
}
/* _content/MemoryGame.Web/Components/Layout/Sidebar.razor.rz.scp.css */
/* --- The Backdrop --- */
.sidebar-backdrop[b-fj8x0j7605] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Dim the background */
    z-index: 1900; /* Just below the sidebar */
    backdrop-filter: blur(2px);
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .sidebar-container[b-fj8x0j7605] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 2000;
        transform: translateX(0);
        transition: transform 0.3s ease-in-out;
        box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    }

        .sidebar-container.collapsed[b-fj8x0j7605] {
            transform: translateX(-100%);
        }

    /* Make sure the header has enough room for the close button */
    .sidebar-header[b-fj8x0j7605] {
        justify-content: space-between;
        padding-right: 1rem;
    }
}

/* Keep your existing .nav-link, .icon, etc. styles below */
/* _content/MemoryGame.Web/Components/Pages/Home.razor.rz.scp.css */
/* Existing Hero & Card Styles */
.hero-section[b-7boaeydxvp] {
	background: linear-gradient(180deg, var(--app-surface) 0%, var(--app-ground) 100%);
}

.feature-card[b-7boaeydxvp] {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-radius: 16px;
}

	.feature-card:hover[b-7boaeydxvp] {
		transform: translateY(-5px);
		box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
	}

.feature-icon[b-7boaeydxvp] {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	border-radius: 12px;
	font-size: 2rem;
}

.bg-primary-subtle[b-7boaeydxvp] {
	background-color: var(--app-slate-tint);
}

h1[b-7boaeydxvp] {
	letter-spacing: -1px;
}

/* =========================================
   NEW: DYNAMIC HOOK CHAT STYLES
========================================= */

.hook-chat-wrapper[b-7boaeydxvp] {
	max-width: 650px;
	width: 100%;
	margin: 0 auto;
}

/* The sample exchange, sized to sit under the hero rather than to fill it. */
.hook-sample[b-7boaeydxvp] {
	max-width: 560px;
	width: 100%;
	margin: 2rem auto 0;
	background-color: var(--app-surface);
	border: 1px solid var(--app-rule);
	border-radius: 10px;
	padding: 1rem 1.15rem 1.15rem;
	text-align: center;
}

.hook-sample-who[b-7boaeydxvp] {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--app-muted);
	margin-bottom: 0.6rem;
	text-align: left;
}

.hook-bubble-incoming[b-7boaeydxvp] {
	background-color: var(--app-surface);
	color: var(--app-text);
	padding: 0.85rem 1.1rem;
	border-radius: 4px 14px 14px 14px;
	border: 1px solid var(--app-rule);
	font-size: 1rem;
	line-height: 1.55;
	position: relative;
	border-left: 4px solid var(--app-accent);
	/* --- NEW: Forces HTML to respect \n line breaks --- */
	white-space: pre-wrap;
}

.hook-btn-reply[b-7boaeydxvp] {
	background-color: var(--app-accent);
	color: white;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 0.5rem 1.1rem;
	border-radius: 14px 14px 4px 14px;
	font-weight: 600;
	font-size: 0.92rem;
	margin-top: 0.75rem;
	transition: all 0.2s ease-in-out;
	max-width: 550px;
	border: none;
}

	.hook-btn-reply:hover[b-7boaeydxvp] {
		background-color: var(--app-accent-dark);
		transform: translateY(-2px);
		color: white;
		box-shadow: 0 6px 15px rgba(var(--app-accent-rgb), 0.25) !important;
	}

.tracking-wider[b-7boaeydxvp] {
	letter-spacing: 0.05em;
}

.hover-underline:hover[b-7boaeydxvp] {
	text-decoration: underline !important;
}

.animate-fade-in[b-7boaeydxvp] {
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}

@keyframes fadeIn-b-7boaeydxvp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* --- NEW: Avatar for the Home Page Hook --- */
.hook-avatar[b-7boaeydxvp] {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background-color: var(--app-surface);
	border-radius: 50%;
	border: 3px solid var(--app-surface);
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	animation: fadeIn-b-7boaeydxvp 0.4s ease-out forwards;
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Event.razor.rz.scp.css */
/* =========================================
   FULLSCREEN IMAGE MODAL
========================================= */
.image-modal-overlay[b-klai0o6sf9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-content[b-klai0o6sf9] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.image-modal-close[b-klai0o6sf9] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .image-modal-close:hover[b-klai0o6sf9] {
        background: rgba(255, 255, 255, 0.4);
    }

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-klai0o6sf9] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid #ffffff;
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-klai0o6sf9] {
    transform: scale(0.9);
}

/* =========================================
   HORIZONTAL TIMELINE LAYOUT
========================================= */
.timeline-horizontal-container[b-klai0o6sf9] {
    width: 100%;
    overflow-x: auto; /* Allows swiping left/right */
    padding: 20px 10px 40px 10px;
    /* Makes scrolling buttery smooth on iOS/touch devices */
    -webkit-overflow-scrolling: touch;
    /* Optional: Hides the ugly scrollbar for a cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .timeline-horizontal-container[b-klai0o6sf9]::-webkit-scrollbar {
        display: none;
    }

.timeline-horizontal-grid[b-klai0o6sf9] {
    display: grid;
    /* 3 Rows: Top Content, The Line (4px), Bottom Content */
    grid-template-rows: 1fr 4px 1fr;
    /* Each memory card is exactly 350px wide */
    grid-auto-columns: 350px;
    grid-auto-flow: column;
    gap: 0 40px;
    position: relative;
    /* Ensures the grid expands horizontally as new items are added */
    min-width: max-content;
    align-items: center;
}

/* The Continuous Center Line */
.timeline-line[b-klai0o6sf9] {
    grid-row: 2; /* Forces it into the middle row */
    grid-column: 1 / -1; /* Spans from the first card to the very last card */
    background-color: var(--app-accent);
    height: 4px;
    border-radius: 2px;
    width: 100%;
}

.timeline-h-item[b-klai0o6sf9] {
    position: relative;
    width: 100%;
}

    /* Top items sit in the first row and anchor to the bottom (near the line) */
    .timeline-h-item.top-item[b-klai0o6sf9] {
        grid-row: 1;
        align-self: end;
        padding-bottom: 30px;
    }

    /* Bottom items sit in the third row and anchor to the top */
    .timeline-h-item.bottom-item[b-klai0o6sf9] {
        grid-row: 3;
        align-self: start;
        padding-top: 30px;
    }

    /* The Timeline Dots */
    .timeline-h-item[b-klai0o6sf9]::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 4px solid var(--app-accent);
        border-radius: 50%;
        left: 50%;
        margin-left: -10px; /* Perfectly centers the dot horizontally */
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    /* Top dots overlap the center line downward */
    .timeline-h-item.top-item[b-klai0o6sf9]::after {
        bottom: -8px;
    }

    /* Bottom dots overlap the center line upward */
    .timeline-h-item.bottom-item[b-klai0o6sf9]::after {
        top: -8px;
    }

.timeline-content[b-klai0o6sf9] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* Smooth fade-in animation for new items */
.slide-fade-in[b-klai0o6sf9] {
    animation: slideRightFade-b-klai0o6sf9 0.4s ease-out forwards;
}

@keyframes slideRightFade-b-klai0o6sf9 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================
   THEIR STORIES - LANES THAT SHARE THEIR ROWS
   ========================================= */

/* One row per date across every lane, so the same day is at the same height in all of them and
   the columns end together. Grid rather than a row of independent lists, which is what they were:
   each lane closed up its own gaps, the day the couple met sat at two different heights, and the
   convergence curves below began under a column that had finished a screenful earlier. */
.story-grid[b-klai0o6sf9] {
    display: grid;
    column-gap: 1.5rem;
    /* No row-gap. The line down each lane is drawn by the cells themselves, and a gap between
       them would break it into dashes. Spacing lives inside the cell instead. */
    row-gap: 0;
    align-items: stretch;
}

.story-person[b-klai0o6sf9] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

/* The lane's line. On EVERY cell, including the empty ones - a stretched empty cell is what keeps
   somebody's timeline continuous through the years they have nothing written down for. */
.story-cell[b-klai0o6sf9] {
    border-left: 2px solid var(--app-rule);
    padding-left: 1.4rem;
    padding-bottom: 1.25rem;
}

.story-moment[b-klai0o6sf9] {
    position: relative;
}

    .story-moment + .story-moment[b-klai0o6sf9] {
        margin-top: 1rem;
    }

.story-dot[b-klai0o6sf9] {
    position: absolute;
    left: -1.72rem;
    top: .45rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--app-accent);
}

/* The lanes stay side by side on a phone, and that IS a change: they used to stack at this width.
   Two reasons. A shared-row grid cannot be collapsed to one column by CSS alone - the cells are
   laid out row by row, so one column would interleave both people's moments into a single
   nonsensical list. And stacking was already at odds with what sits underneath: the convergence
   curves were drawn whatever the width, so a narrow screen got two lives told one after the other
   and then a picture of them meeting.

   What gives instead is everything inside the cell. The pictures come down hardest, because they
   are what makes a 170px lane unreadable rather than merely narrow.

   !important only because RenderMedia writes its 180px cap as an inline style, which no ordinary
   rule can reach. */
@media (max-width: 767.98px) {
    .story-grid[b-klai0o6sf9] {
        column-gap: .75rem;
        font-size: .9rem;
    }

    .story-cell[b-klai0o6sf9] {
        padding-left: .9rem;
        padding-bottom: .9rem;
    }

    .story-dot[b-klai0o6sf9] {
        left: -1.2rem;
    }

    .story-person[b-klai0o6sf9] {
        gap: .5rem;
    }

        .story-person img[b-klai0o6sf9],
        .story-person > div[aria-hidden="true"][b-klai0o6sf9] {
            width: 40px !important;
            height: 40px !important;
        }

        .story-person .fs-5[b-klai0o6sf9] {
            font-size: 1rem !important;
        }

    .story-cell img[b-klai0o6sf9],
    .story-cell video[b-klai0o6sf9] {
        max-height: 110px !important;
    }
}

/* The frame around the whole figure: the lanes, the curves, and the occasion they arrive at.

   Without it the curves float - they leave the centre of each column while the spines run down the
   left edge of each, so the two never actually touch and the eye reads a join that did not quite
   happen. Boxed, they are lines drawn inside one object rather than lines that nearly meet.

   Surface rather than ground, and the same rule and radius as the other blocks on this page, so it
   reads as a panel the page already owns and not a new kind of thing. */
.story-panel[b-klai0o6sf9] {
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: 12px;
    padding: 1.5rem 1.5rem .75rem;
}

@media (max-width: 575.98px) {
    .story-panel[b-klai0o6sf9] {
        padding: 1rem .85rem .5rem;
    }
}

/* =========================================
   ADD TO CALENDAR
   ========================================= */

/* A small menu under the date, drawn the way Host tools is drawn: a quiet line that opens a panel
   over the page rather than pushing the invitation down. The header is centred, so this is too -
   and the panel is centred on its own summary rather than hung off one edge, which at this width
   is the only placement that cannot end up off the side of the screen. */
.add-to-calendar[b-klai0o6sf9] {
    position: relative;
    display: inline-block;
    margin-top: .25rem;
}

    .add-to-calendar > summary[b-klai0o6sf9] {
        list-style: none;
        cursor: pointer;
    }

        .add-to-calendar > summary[b-klai0o6sf9]::-webkit-details-marker {
            display: none;
        }

.add-to-calendar-chevron[b-klai0o6sf9] {
    font-size: .75rem;
    transition: transform .15s ease;
}

.add-to-calendar[open] .add-to-calendar-chevron[b-klai0o6sf9] {
    transform: rotate(180deg);
}

.add-to-calendar-panel[b-klai0o6sf9] {
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    min-width: 14rem;
    padding: .35rem 0;
    text-align: left;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: .65rem;
    box-shadow: 0 .4rem 1.25rem rgba(var(--app-slate-rgb), .16);
}

.add-to-calendar-item[b-klai0o6sf9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    color: var(--app-text);
    text-decoration: none;
    font-weight: 500;
}

    .add-to-calendar-item:hover[b-klai0o6sf9],
    .add-to-calendar-item:focus-visible[b-klai0o6sf9] {
        background-color: var(--app-sunken);
        color: var(--app-accent);
    }

    .add-to-calendar-item i[b-klai0o6sf9] {
        color: var(--app-muted);
    }

    .add-to-calendar-item:hover i[b-klai0o6sf9],
    .add-to-calendar-item:focus-visible i[b-klai0o6sf9] {
        color: var(--app-accent);
    }

/* The line that keeps the host's pictures and the guests' apart when the gallery shows both.
   Quiet on purpose - it is a label, not a section heading; the page already has its headings and
   this sits inside the invitation's own picture area. */
.gallery-group[b-klai0o6sf9] {
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-muted);
}
/* _content/MemoryGame.Web/Components/Pages/Memory/Library.razor.rz.scp.css */
.top-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.search-box[b-flitkqsp8e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 350px;
}

    .search-box input[b-flitkqsp8e] {
        width: 100%;
    }

.pagination-controls[b-flitkqsp8e] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-top: 10px;
}

.page-info[b-flitkqsp8e] {
    font-weight: 500;
    color: var(--app-muted);
}

.image-list[b-flitkqsp8e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-card[b-flitkqsp8e] {
    display: flex;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--app-rule);
    border-radius: 6px;
    background: var(--app-surface);
}

.thumb[b-flitkqsp8e] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    background-color: var(--app-sunken);
    border: 1px solid var(--app-rule);
    border-radius: 6px;
}

.info[b-flitkqsp8e] {
    flex: 1;
}

    .info h3[b-flitkqsp8e] {
        margin: 0 0 6px 0;
    }

    .info p[b-flitkqsp8e] {
        margin: 0 0 10px 0;
        color: var(--app-muted);
    }

/* _content/MemoryGame.Web/Components/Pages/Memory/Memorial.razor.rz.scp.css */
/* =========================================
   FULLSCREEN IMAGE MODAL
========================================= */
.image-modal-overlay[b-jg6dqoxg7n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main profile photo at the top of a memorial. A fixed frame (instead of just capping height)
   so a wide/landscape image - a logo, say - gets letterboxed on a clean white background instead
   of rendering full-width-but-short and looking lost against the page's dark section. A normal
   portrait photo still fills most of the frame naturally. */
.memorial-hero-image[b-jg6dqoxg7n] {
    width: 100%;
    max-width: 320px;
    height: 280px;
    object-fit: contain;
    background-color: var(--app-surface);
}

.image-modal-content[b-jg6dqoxg7n] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.image-modal-close[b-jg6dqoxg7n] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .image-modal-close:hover[b-jg6dqoxg7n] {
        background: rgba(255, 255, 255, 0.4);
    }

/* =========================================
   ZOOM INDICATOR (Magnifying Glass)
========================================= */
.zoom-indicator[b-jg6dqoxg7n] {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: var(--app-accent);
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border: 2px solid var(--app-surface);
    transition: transform 0.2s ease;
}

.position-relative:active .zoom-indicator[b-jg6dqoxg7n] {
    transform: scale(0.9);
}

.btn-multiline-pill[b-jg6dqoxg7n] {
    white-space: normal; /* Forces the text to wrap instead of running off the edge */
    height: auto; /* Allows the button to grow dynamically */
    padding: 15px 35px; /* Extra side padding keeps text away from the pinched curves */
    line-height: 1.4; /* Gives multiline text a bit of breathing room */
}

/* Smooth fade for transitioning between views */
.slide-fade-in[b-jg6dqoxg7n] {
    animation: fadeInMode-b-jg6dqoxg7n 0.3s ease-out forwards;
}

@keyframes fadeInMode-b-jg6dqoxg7n {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   INTERACTIVE REPLY BUTTON
========================================= */
/* .bounce-hint / @keyframes bounceDown now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being page-scoped here only. */

.interactive-reply-btn[b-jg6dqoxg7n] {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
}

    /* Makes the button slightly grow when hovered (for desktop) */
    .interactive-reply-btn:hover[b-jg6dqoxg7n] {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(var(--app-slate-rgb), 0.25) !important;
    }

    /* Creates a satisfying "squish" effect when physically tapped on a phone */
    .interactive-reply-btn:active[b-jg6dqoxg7n] {
        transform: scale(0.96);
        background-color: var(--app-accent-dark); /* Darker on tap */
    }
/* _content/MemoryGame.Web/Components/Pages/Memory/OccasionHostTools.razor.rz.scp.css */
/* Out of the centred column entirely.

   The page reads down the middle - photographs, name, day, place, the three things a guest is
   asked to do. This sits to the right of all of it, where a thing's own controls live in nearly
   every application: a guest's eye never crosses it, and the host knows where to look. Below the
   nav rather than fixed to it, because it belongs to this occasion and not to the app. */
.host-tools-row[b-gm18qzg869] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

.host-tools[b-gm18qzg869] {
    position: relative;
}

    /* The marker goes the way the QR fold's does; the chevron says the same thing in the same
       direction as every other disclosure in the app. */
    .host-tools > summary[b-gm18qzg869] {
        list-style: none;
        cursor: pointer;
    }

        .host-tools > summary[b-gm18qzg869]::-webkit-details-marker {
            display: none;
        }

.host-tools-summary[b-gm18qzg869] {
    display: inline-flex;
    align-items: center;
}

.host-tools-chevron[b-gm18qzg869] {
    font-size: .75rem;
    transition: transform .15s ease;
}

.host-tools[open] .host-tools-chevron[b-gm18qzg869] {
    transform: rotate(180deg);
}

/* Lifted out of the flow so opening it does not shove the invitation down the page - the host
   pressing this is looking for a television, not rearranging what the guests below are reading. */
.host-tools-panel[b-gm18qzg869] {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 20;
    min-width: 15rem;
    padding: .35rem 0;
    text-align: left;
    background-color: var(--app-surface);
    border: 1px solid var(--app-rule);
    border-radius: .65rem;
    box-shadow: 0 .4rem 1.25rem rgba(var(--app-slate-rgb), .16);
}

.host-tools-item[b-gm18qzg869] {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    color: var(--app-text);
    text-decoration: none;
}

    .host-tools-item:hover[b-gm18qzg869],
    .host-tools-item:focus-visible[b-gm18qzg869] {
        background-color: var(--app-sunken);
        color: var(--app-accent);
    }

    .host-tools-item i[b-gm18qzg869] {
        color: var(--app-muted);
    }

    .host-tools-item:hover i[b-gm18qzg869],
    .host-tools-item:focus-visible i[b-gm18qzg869] {
        color: var(--app-accent);
    }

/* Between the two televisions and the editor: the first two are for a screen in the room right
   now, the third changes the occasion itself. */
.host-tools-rule[b-gm18qzg869] {
    height: 1px;
    margin: .35rem 0;
    background-color: var(--app-rule);
}
/* _content/MemoryGame.Web/Components/Pages/Memory/StudyReader.razor.rz.scp.css */
/* =========================================
   1. LAYOUT CONTROLS & BASICS
========================================= */
.test-layout[b-ci0belu6qm] {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- STICKY CONVERSATION PROFILE LEFT CARD --- */
.left-panel[b-ci0belu6qm] {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid #f0f0f0;
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem;
}

.image-wrapper[b-ci0belu6qm] {
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
}

.header-image[b-ci0belu6qm] {
	width: 220px; /* Increased from 150px */
	height: 220px; /* Increased from 150px */
	object-fit: contain;
	background-color: #ffffff;
	border-radius: 50%;
	border: 4px solid #e9ecef;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.zoom-indicator[b-ci0belu6qm] {
	position: absolute;
	bottom: 15px; /* Bumped up from 5px to sit nicely on the larger circle's curve */
	right: 15px; /* Bumped in from 5px */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	border: 2px solid #ffffff;
}

.status-indicator[b-ci0belu6qm] {
	font-size: 0.85rem;
	color: var(--app-sage-dark);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

	.status-indicator .dot[b-ci0belu6qm] {
		width: 8px;
		height: 8px;
		background-color: var(--app-sage);
		border-radius: 50%;
		display: inline-block;
	}

/* --- RIGHT PANEL LAYOUT --- */
.right-panel[b-ci0belu6qm] {
	border-left: 1px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. TEXTING THREAD & BUBBLE MECHANICS
========================================= */
.chat-wrapper[b-ci0belu6qm] {
	border: 1px solid #eef0f2;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.chat-header[b-ci0belu6qm] {
	background-color: #f8f9fa;
}

.chat-feed[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	background-color: #f4f6f8;
	min-height: 350px;
}

/* Incoming Message Bubble (Left Align) */
.chat-bubble-incoming[b-ci0belu6qm] {
	align-self: flex-start;
	background-color: #ffffff;
	color: #212529;
	padding: 1rem 1.25rem;
	border-radius: 4px 18px 18px 18px;
	max-width: 85%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.04);
	margin-bottom: 1.5rem;
	position: relative;
	border: 1px solid #eaeaea;
}

/* Outgoing History Bubble (Right Align Flat text) */
.chat-bubble-outgoing[b-ci0belu6qm] {
	align-self: flex-end;
	background-color: #e1f5fe;
	color: #0288d1;
	padding: 1rem 1.25rem;
	border-radius: 18px 18px 4px 18px;
	max-width: 85%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.03);
	margin-bottom: 1.5rem;
	border: 1px solid #b3e5fc;
	font-weight: 500;
}

.message-text[b-ci0belu6qm] {
	line-height: 1.6;
	font-size: 1.1rem;
	white-space: pre-wrap; /* Keeps your standard \n line breaks working! */
}

	/* --- NEW: Image handling for rich media chat bubbles --- */
	.message-text[b-ci0belu6qm]  img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		display: block; /* REQUIRED: Tells the image to take up its own line */
		margin: 10px auto 5px auto; /* REQUIRED: Centers the image horizontally */
	}

/* Outgoing Interactive Action Button */
.reply-wrapper[b-ci0belu6qm] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
}

.btn-reply[b-ci0belu6qm] {
	align-self: flex-end;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 1rem 1.5rem;
	max-width: 85%;
	text-align: right;
	border-radius: 18px 18px 4px 18px;
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.4;
	border: none;
	box-shadow: 0 4px 12px rgba(var(--app-accent-rgb), 0.25);
	transition: all 0.2s ease-in-out;
}

.btn-reply-primary[b-ci0belu6qm] {
	background-color: var(--app-accent);
	color: white;
}

	.btn-reply-primary:hover[b-ci0belu6qm] {
		background-color: var(--app-accent-dark);
		transform: scale(1.02);
	}

.btn-reply-success[b-ci0belu6qm] {
	background-color: var(--app-sage);
	color: white;
	box-shadow: 0 4px 12px rgba(var(--app-sage-rgb), 0.25);
}

	.btn-reply-success:hover[b-ci0belu6qm] {
		background-color: var(--app-sage-dark);
		transform: scale(1.02);
	}

/* --- COLLAPSIBLE MEMO PANEL STYLES --- */
.memos-collapsible-wrapper[b-ci0belu6qm] {
	background-color: #ffffff;
	border: 1px solid #eef0f2;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 2rem;
}

.toggle-memos-btn[b-ci0belu6qm] {
	background: #ffffff;
	text-align: left;
	border: none;
	transition: background-color 0.15s ease;
}

	.toggle-memos-btn:hover[b-ci0belu6qm] {
		background-color: #f8f9fa;
	}

.memo-card[b-ci0belu6qm] {
	border-radius: 8px;
	border-left: 3px solid #ffc107 !important;
}

/* =========================================
   3. RESPONSIVE COMPACT LAYOUTS (Mobile)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-ci0belu6qm] {
		display: block;
		padding: 0;
	}

	.left-panel[b-ci0belu6qm] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0; /* CHANGED: This is where the 0 goes to fix the mobile peek-a-boo bug! */
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%;
		box-sizing: border-box;
	}

	#active-message-target[b-ci0belu6qm] {
		scroll-margin-top: 250px; /* Adjust this slightly if your sticky header is taller/shorter */
	}

	.image-wrapper[b-ci0belu6qm] {
		position: relative;
		align-self: center;
		margin-bottom: 15px;
		cursor: pointer;
	}

	.header-image[b-ci0belu6qm] {
		width: 120px; /* Matched the Test page size */
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block;
	}

	.zoom-indicator[b-ci0belu6qm] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent);
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff;
		transition: transform 0.2s ease;
	}

	.image-wrapper:active .zoom-indicator[b-ci0belu6qm] {
		transform: scale(0.9);
	}

	.status-indicator[b-ci0belu6qm] {
		display: none;
	}

	.chat-name[b-ci0belu6qm] {
		font-size: 1.5rem;
		margin: 0 0 10px 0 !important;
		padding-left: 0;
		text-align: center; /* Centered beautifully under the image */
		width: 100%;
	}

	.left-panel .border-top[b-ci0belu6qm] {
		border-top: none !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
		width: 100% !important;
	}

	.left-panel .badge[b-ci0belu6qm] {
		font-size: 0.9rem !important;
		padding: 8px 12px !important;
		display: block;
		margin: 0 auto;
	}

	.right-panel[b-ci0belu6qm] {
		border-left: none;
		padding: 15px;
	}

	/* --- THE ULTIMATE MOBILE BUBBLE & IMAGE FIX --- */
	.chat-bubble-incoming[b-ci0belu6qm], .chat-bubble-outgoing[b-ci0belu6qm], .btn-reply[b-ci0belu6qm] {
		max-width: 95%;
		box-sizing: border-box !important; /* Stops the padding from expanding the bubble off-screen */
		min-width: 0 !important; /* The magic Flexbox rule that forces GIFs to shrink */
	}

	.message-text[b-ci0belu6qm] {
		width: 100%;
		min-width: 0;
		word-wrap: break-word; /* Safety net so long text doesn't break the bubble either */
	}

		.message-text[b-ci0belu6qm]  img {
			max-width: 100% !important;
			height: auto !important;
			max-height: 250px !important;
			object-fit: contain !important;
			border-radius: 8px;
			display: block; /* Already here, perfect */
			margin: 10px auto 5px auto !important; /* Forces centering on mobile */
		}
}

/* Animations */
.entry-fade[b-ci0belu6qm] {
	animation: chatSlideIn-b-ci0belu6qm 0.35s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes chatSlideIn-b-ci0belu6qm {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-pulse[b-ci0belu6qm] {
	animation: replyPulse-b-ci0belu6qm 2s infinite;
}

@keyframes replyPulse-b-ci0belu6qm {
	0% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(25, 135, 84, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
	}
}

/* .image-modal-overlay / .image-modal-content / .image-modal-close now live in
   wwwroot/app.css - shared with WeekTestPlay.razor and others instead of
   being copy-pasted per page. */
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/ChoiceToggle.razor.rz.scp.css */

.choice-card[b-vghmxhdlh4] {
	padding: 12px;
	margin: 8px 0;
	border-radius: 8px;
	border: 2px solid #ccc;
	cursor: pointer;
	transition: 0.2s ease;
}

	.choice-card:hover[b-vghmxhdlh4] {
		border-color: #888;
		background-color: #f7f7f7;
	}

	.choice-card.selected[b-vghmxhdlh4] {
		border-color: #007bff;
		background-color: #e7f1ff;
	}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestComplete.razor.rz.scp.css */
/* =========================================
   1. MAIN CONTAINER
========================================= */
.completion-container[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 80vh;
	padding: 20px;
	background: radial-gradient(circle at center, var(--app-surface) 0%, var(--app-ground) 100%);
	border-radius: 20px;
}

/* =========================================
   2. SUCCESS CARD
========================================= */
.success-card[b-9j6qq5l6xb] {
	background: white;
	max-width: 500px;
	width: 100%;
	padding: 3rem 2rem;
	border-radius: 24px;
	box-shadow: 0 20px 40px rgba(var(--app-slate-rgb), 0.10);
	text-align: center;
	border: 1px solid var(--app-rule);
	animation: slideUpFade-b-9j6qq5l6xb 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* =========================================
   3. ANIMATED TROPHY ICON
========================================= */
.icon-wrapper[b-9j6qq5l6xb] {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 2rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.glow-ring[b-9j6qq5l6xb] {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--app-slate-tint);
	border-radius: 50%;
	animation: pulseGlow-b-9j6qq5l6xb 2s infinite alternate;
	z-index: 1;
}

.trophy-icon[b-9j6qq5l6xb] {
	font-size: 4.5rem;
	color: var(--app-accent);
	z-index: 2;
	text-shadow: 0 8px 15px rgba(var(--app-accent-rgb), 0.30);
	animation: popInBounce-b-9j6qq5l6xb 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =========================================
   4. TYPOGRAPHY & STATS
========================================= */
.celebration-title[b-9j6qq5l6xb] {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--app-slate);
	margin-bottom: 0.5rem;
}

.celebration-text[b-9j6qq5l6xb] {
	font-size: 1.1rem;
	color: var(--app-muted);
	line-height: 1.6;
	margin-bottom: 2.5rem;
}

.stats-row[b-9j6qq5l6xb] {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.stat-box[b-9j6qq5l6xb] {
	background: var(--app-sunken);
	padding: 1.2rem 1.5rem;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 140px;
	border: 1px solid var(--app-rule);
}

.stat-icon[b-9j6qq5l6xb] {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.stat-number[b-9j6qq5l6xb] {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--app-slate);
}

.stat-label[b-9j6qq5l6xb] {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--app-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

/* =========================================
   5. BUTTONS
========================================= */
.action-buttons[b-9j6qq5l6xb] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.action-btn[b-9j6qq5l6xb] {
	padding: 0.8rem 1.5rem;
	font-weight: bold;
	font-size: 1.1rem;
	border-radius: 12px;
	transition: all 0.2s ease;
}

	.action-btn:hover[b-9j6qq5l6xb] {
		transform: translateY(-2px);
	}

/* =========================================
   6. ANIMATIONS
========================================= */
@keyframes slideUpFade-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes popInBounce-b-9j6qq5l6xb {
	0% {
		opacity: 0;
		transform: scale(0.3) rotate(-15deg);
	}

	60% {
		transform: scale(1.1) rotate(5deg);
	}

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

@keyframes pulseGlow-b-9j6qq5l6xb {
	0% {
		transform: scale(0.8);
		opacity: 0.4;
	}

	100% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

/* Mobile Adjustments */
@media (max-width: 500px) {
	.stats-row[b-9j6qq5l6xb] {
		flex-direction: column;
		gap: 1rem;
	}

	.stat-box[b-9j6qq5l6xb] {
		min-width: 100%;
	}

	.success-card[b-9j6qq5l6xb] {
		padding: 2rem 1.5rem;
	}
}
/* _content/MemoryGame.Web/Components/Pages/Memory/TestingPage/TestPlay.razor.rz.scp.css */
/* =========================================
   1. MAIN DESKTOP LAYOUT
========================================= */
.test-layout[b-izn53bs28c] {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
	max-width: 1200px;
	margin: 0;
	padding: 20px;
	align-items: start;
}

/* --- LEFT PANEL (Sticky Header) --- */
.left-panel[b-izn53bs28c] {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	padding: 1.5rem;
}

/* -------------------------------------
   ADD THESE DESKTOP WRAPPER & BADGE RULES
-------------------------------------- */

/* DESKTOP IMAGE WRAPPER */
.image-wrapper[b-izn53bs28c] {
	position: relative;
	align-self: center; /* Centers it in the sidebar */
	margin-bottom: 20px;
	cursor: pointer;
	width: 100%;
	max-width: 250px; /* Locks the wrapper to perfectly fit the image */
}

/* DESKTOP IMAGE */
.header-image[b-izn53bs28c] {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* THE ZOOM BADGE */
.zoom-indicator[b-izn53bs28c] {
	position: absolute;
	bottom: -10px; /* Hangs off the bottom */
	right: -10px; /* Snaps to the right corner! */
	background-color: var(--app-accent);
	color: white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	border: 2px solid #ffffff;
	transition: transform 0.2s ease;
}

.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
	transform: scale(0.9);
}

/* ------------------------------------- */

.mobile-button-group[b-izn53bs28c] {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.submit-btn[b-izn53bs28c] {
	width: 100%;
}

.refresh-btn[b-izn53bs28c] {
	width: 100%;
}

.desktop-divider[b-izn53bs28c] {
	display: block;
	width: 100%;
}

/* --- RIGHT PANEL (Scrolling Content) --- */
.right-panel[b-izn53bs28c] {
	padding-top: 0;
	border-left: 2px solid #e0e0e0;
	padding-left: 2rem;
}

/* =========================================
   2. INTERACTIVE CHOICE CARDS & BADGES
========================================= */
.choice-list[b-izn53bs28c] {
	list-style-type: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

	.choice-list li[b-izn53bs28c] {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
		border: 1px solid #f0f0f0;
		transition: all 0.2s ease;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		.choice-list li:hover[b-izn53bs28c] {
			transform: translateY(-3px);
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
			cursor: pointer;
		}

.choice-wrapper[b-izn53bs28c] {
	flex-grow: 1;
}

/* --- GRADED STATES --- */
.choice-list li.selected-card[b-izn53bs28c] {
	background-color: #eff6ff;
	border-color: var(--app-accent);
	box-shadow: 0 4px 15px rgba(var(--app-accent-rgb), 0.15);
}

.choice-list li.correct-card[b-izn53bs28c] {
	background-color: #f0fdf4;
	border-color: #22c55e;
	box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}

.choice-list li.wrong-card[b-izn53bs28c] {
	background-color: #fef2f2;
	border-color: #ef4444;
	box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

/* --- BADGES --- */
.selected-badge[b-izn53bs28c], .correct-badge[b-izn53bs28c], .wrong-badge[b-izn53bs28c] {
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 15px;
	animation: popIn-b-izn53bs28c 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.selected-badge[b-izn53bs28c] {
	background-color: var(--app-accent);
}

.correct-badge[b-izn53bs28c] {
	background-color: #22c55e;
}

.wrong-badge[b-izn53bs28c] {
	background-color: #ef4444;
}

@keyframes popIn-b-izn53bs28c {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* =========================================
   3. MOBILE RESPONSIVENESS (The Stacked Header)
========================================= */
@media (max-width: 768px) {
	.test-layout[b-izn53bs28c] {
		display: block; /* Turns off Grid so the header can stick and slide down */
		padding: 0;
	}

	.left-panel[b-izn53bs28c] {
		position: sticky;
		top: 0;
		z-index: 100;
		display: flex;
		flex-direction: column; /* Stack vertically */
		align-items: center;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 0 0 15px 15px;
		border-bottom: 1px solid #ddd;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		width: 100%; /* Fixes the horizontal scrolling bug */
		box-sizing: border-box;
	}

	/* 1. NEW: The wrapper takes over the centering and spacing */
	.image-wrapper[b-izn53bs28c] {
		position: relative;
		align-self: center;
		margin-bottom: 15px; /* Moved this from the image to the wrapper */
		cursor: pointer;
	}

	/* 2. UPDATED: The image itself (just removed margin-bottom and align-self) */
	.header-image[b-izn53bs28c] {
		width: 120px;
		height: 120px;
		object-fit: contain;
		background-color: #ffffff;
		border-radius: 50%;
		border: 3px solid #f0f0f0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.05);
		display: block; /* Removes weird spacing below images */
	}

	/* 3. NEW: The slick zoom badge */
	.zoom-indicator[b-izn53bs28c] {
		position: absolute;
		bottom: 0px;
		right: 0px;
		background-color: var(--app-accent); /* Nice bright blue */
		color: white;
		border-radius: 50%;
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		box-shadow: 0 2px 6px rgba(0,0,0,0.2);
		border: 2px solid #ffffff; /* Gives it a cut-out look against the image */
		transition: transform 0.2s ease;
	}

	/* When tapped, give the badge a little pop! */
	.image-wrapper:active .zoom-indicator[b-izn53bs28c] {
		transform: scale(0.9);
	}

	.left-panel h3[b-izn53bs28c] {
		display: none;
	}

	.mobile-button-group[b-izn53bs28c] {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Full-width Submit Button below the image */
	.submit-btn[b-izn53bs28c] {
		width: 100%;
		margin-top: 0;
		padding: 12px;
		font-size: 1.1rem;
		font-weight: bold;
		border-radius: 8px;
	}

	/* FLOATING TOP-RIGHT REFRESH ICON */
	.refresh-btn[b-izn53bs28c] {
		position: absolute; /* Pulls it out of the flow */
		top: 15px;
		right: 15px; /* Pins it to the top right of the panel */

		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 1.3rem;
		color: #555;
		background-color: #f8f9fa;
		border: 1px solid #e0e0e0;
		border-radius: 50%;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}

	.desktop-divider[b-izn53bs28c] {
		display: none;
	}

	.right-panel[b-izn53bs28c] {
		border-left: none;
		padding: 15px;
	}
}
/* =========================================
   5. IMAGE MODAL / LIGHTBOX
========================================= */

/* Add a pointer cursor and subtle hover effect to the small profile image */
.header-image[b-izn53bs28c] {
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

	.header-image:hover[b-izn53bs28c] {
		transform: scale(1.05); /* Grows slightly when hovered */
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	}

/* .image-modal-overlay / .image-modal-content / .image-modal-close (and their
   fadeInModal/zoomInImage animations) now live in wwwroot/app.css - shared
   with WeekRemember.razor instead of being copy-pasted per page. */

/* =========================================
   6. NEXT ROUND GLOW ANIMATION
========================================= */

/* The "Ready to Move On" glowing button */
.pulse-next-btn[b-izn53bs28c] {
	background-color: #22c55e !important; /* Bright success green */
	color: white !important;
	border-color: #22c55e !important;
	transform: scale(1.05); /* Makes the button physically pop out */
	z-index: 10; /* Ensures the glow overlaps other elements */
	/* The continuous ripple animation */
	animation: pulse-green-b-izn53bs28c 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}

	/* Ensure any icons inside turn white when it glows */
	.pulse-next-btn i[b-izn53bs28c] {
		color: white !important;
	}

/* The expanding glow effect */
@keyframes pulse-green-b-izn53bs28c {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}

	70% {
		box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

/* =========================================
   7. INSTRUCTION BANNER
========================================= */
.instruction-banner[b-izn53bs28c] {
	background-color: #f0f9ff; /* Very soft, inviting blue */
	color: #0369a1; /* Deep, readable blue */
	border: 1px solid #bae6fd;
	padding: 15px 20px;
	border-radius: 12px;
	margin-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
	animation: slideDownFade 0.4s ease-out forwards;
}

	.instruction-banner .icon[b-izn53bs28c] {
		font-size: 1.4rem;
		color: #0ea5e9;
		margin-top: -2px; /* Aligns the icon perfectly with the text */
	}

/* On mobile, shrink the text just a tiny bit to save space */
@media (max-width: 768px) {
	.instruction-banner[b-izn53bs28c] {
		font-size: 0.95rem;
		padding: 12px 15px;
	}
}
/* _content/MemoryGame.Web/Components/Shared/PhotoGallery.razor.rz.scp.css */
/* Moved here from Memorial.razor.css, which is where this grid was written first. Scoped CSS is
   per component, so the occasion's wall could not have reused it where it was. */

.gallery-view-grid[b-8nvbzrbmn0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: start; /* Keeps cards sized to their content instead of stretching */
}

.gallery-card[b-8nvbzrbmn0] {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .gallery-card:hover[b-8nvbzrbmn0] {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
    }

.gallery-media[b-8nvbzrbmn0] {
    max-height: 250px;
    object-fit: contain;
    background-color: #ffffff;
    width: 100%;
}

/* A button rather than a div, so it is reachable by keyboard and announced as something that does
   something - but it has to be stripped back to looking like the picture it wraps. */
.gallery-open[b-8nvbzrbmn0] {
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
}

.gallery-zoom-icon[b-8nvbzrbmn0] {
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background-color: rgba(0,0,0,0.6);
    color: white;
}

.gallery-embed[b-8nvbzrbmn0] {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

    .gallery-embed iframe[b-8nvbzrbmn0] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* =========================================
   FULL SCREEN
========================================= */
.gallery-modal-overlay[b-8nvbzrbmn0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.gallery-modal-content[b-8nvbzrbmn0] {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.gallery-modal-close[b-8nvbzrbmn0] {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

    .gallery-modal-close:hover[b-8nvbzrbmn0] {
        background: rgba(255, 255, 255, 0.4);
    }