/* ===========================
   Luna — dark consumer AI product
   =========================== */

:root {
    --luna-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --luna-bg: #0b0b0d;
    --luna-surface: #15161a;
    --luna-surface-2: #1c1d22;
    --luna-elevated: #1a1b1f;
    --luna-sidebar-bg: #0f1014;
    --luna-input-bg: #17181c;
    --luna-border: #25262c;
    --luna-border-strong: #353740;
    --luna-text: #ececef;
    --luna-text-soft: #c5c5cc;
    --luna-muted: #80808a;
    --luna-muted-strong: #9a9aa3;

    --luna-user-bubble: #1f2026;
    --luna-code-bg: #0a0a0e;
    --luna-code-fg: #ececef;

    --luna-accent: #8b5cf6;
    --luna-accent-2: #6366f1;
    --luna-accent-hover: #7c3aed;
    --luna-accent-soft: rgba(139, 92, 246, 0.12);
    --luna-accent-border: rgba(139, 92, 246, 0.28);
    --luna-accent-glow: rgba(139, 92, 246, 0.22);

    --luna-danger: #ef4444;
    --luna-warning: #f59e0b;
    --luna-success: #10b981;

    --luna-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --luna-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
    --luna-shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);

    --luna-radius-sm: 8px;
    --luna-radius-md: 12px;
    --luna-radius-lg: 16px;
    --luna-radius-pill: 999px;

    --luna-sidebar-width: 280px;
    --luna-sidebar-collapsed-width: 64px;
    --luna-navbar-height: 56px;
}

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

html, body {
    height: 100%;
    color: var(--luna-text);
    font-family: var(--luna-font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    margin: 0;
    background: var(--luna-bg);
    /* Disable double-tap-to-zoom (and its tap delay) on touch devices.
       Pinch-to-zoom is preserved for accessibility. */
    touch-action: manipulation;
}

/* Lock the chat shell on bare-layout pages. Only BODY is position:fixed
   (NOT html) — applying position:fixed to both compounds into weird
   stacking/scroll behavior. html just gets overflow: hidden + height: 100%
   so it acts as a plain locked container.

   Body is pinned to the layout viewport at top:0, height:100%. iOS soft-
   keyboard handling is left entirely to `interactive-widget=resizes-content`
   in the viewport meta. No JS-driven CSS vars, no visualViewport chase —
   every prior JS-bandaid version produced visible jerk because JS reacted
   a frame behind iOS's own keyboard animation. Plain CSS, plain 100%. */
html.luna-locked {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
}
html.luna-locked body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

a { color: var(--luna-text); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--luna-accent); }

/* Bootstrap utility / scaffold link colors — keep everything on the purple
   theme. Without these the default Identity Manage pages render with the
   stock #0d6efd blue links. */
.text-primary,
.link-primary,
a.text-primary,
a.link-primary { color: var(--luna-accent) !important; }
.link-primary:hover,
a.text-primary:hover,
a.link-primary:hover { color: var(--luna-accent-hover) !important; }
.alert a,
.alert .alert-link {
    color: var(--luna-accent);
    text-decoration: underline;
    text-decoration-color: var(--luna-accent-border);
    text-underline-offset: 3px;
}
.alert a:hover,
.alert .alert-link:hover { color: var(--luna-accent-hover); text-decoration-color: var(--luna-accent); }

/* Bootstrap form-control focus uses --bs-primary by default (blue). Hard-pin
   to the Luna accent for every variant. */
:root {
    --bs-primary: var(--luna-accent);
    --bs-primary-rgb: 139, 92, 246;
    --bs-link-color: var(--luna-text);
    --bs-link-hover-color: var(--luna-accent);
    --bs-link-color-rgb: 236, 236, 239;
    --bs-link-hover-color-rgb: 139, 92, 246;
    --bs-focus-ring-color: var(--luna-accent-soft);
}

/* Nav pills (used inside the default Identity Manage scaffold) */
.nav-pills .nav-link {
    color: var(--luna-text-soft);
    border-radius: var(--luna-radius-sm);
}
.nav-pills .nav-link:hover { background: var(--luna-surface-2); color: var(--luna-text); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--luna-accent-soft);
    color: var(--luna-text);
}

/* ============ Bootstrap overrides ============ */
.card {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    box-shadow: var(--luna-shadow-sm);
    color: var(--luna-text);
}

.form-control, .form-select {
    background: var(--luna-input-bg);
    color: var(--luna-text);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    padding: .6rem .8rem;
    font-family: inherit;
    font-size: .94rem;
}
/* iOS Safari auto-zooms into any focused form control with font-size < 16px.
   Bump inputs on mobile so login/register/admin forms don't pop the page up
   when the user taps a field. Desktop keeps the .94rem density. */
@media (max-width: 900px) {
    .form-control, .form-select { font-size: 16px; }
}
.form-control::placeholder { color: var(--luna-muted); }
.form-control:focus, .form-select:focus {
    background: var(--luna-input-bg);
    color: var(--luna-text);
    border-color: var(--luna-accent);
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}
.form-label { color: var(--luna-text-soft); font-size: .88rem; font-weight: 500; margin-bottom: .4rem; }
.form-text { color: var(--luna-muted); font-size: .82rem; margin-top: .35rem; }
.form-check-input:checked { background-color: var(--luna-accent); border-color: var(--luna-accent); }
.form-check-input:focus { border-color: var(--luna-accent); box-shadow: 0 0 0 3px var(--luna-accent-soft); }
.form-floating > .form-control,
.form-floating > .form-select {
    background: var(--luna-input-bg);
    color: var(--luna-text);
    border-color: var(--luna-border);
}
.form-floating > label { color: var(--luna-muted); }

.btn {
    border-radius: var(--luna-radius-sm);
    font-weight: 500;
    font-size: .9rem;
    padding: .55rem 1rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease, transform .06s ease;
    font-family: inherit;
    /* Kill Bootstrap's blue focus shadow globally — every variant gets a
       purple ring instead via the focus-visible rule below. */
    --bs-btn-focus-shadow-rgb: 139, 92, 246;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}
.btn-lg { padding: .75rem 1.4rem; font-size: 1rem; }
.btn-sm { padding: .4rem .8rem; font-size: .85rem; }

.btn-primary {
    background: var(--luna-accent);
    border-color: var(--luna-accent);
    color: #fff;
    font-weight: 500;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--luna-accent-hover);
    border-color: var(--luna-accent-hover);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--luna-text-soft);
    border-color: var(--luna-border-strong);
    background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background: var(--luna-surface-2);
    color: var(--luna-text);
    border-color: var(--luna-border-strong);
}

.btn-outline-danger {
    color: var(--luna-danger);
    border-color: rgba(239, 68, 68, 0.35);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background: rgba(239, 68, 68, 0.12);
    color: var(--luna-danger);
    border-color: var(--luna-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Default + variants used by Identity scaffold / Billing — keep on-theme. */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background: var(--luna-surface-2);
    border-color: var(--luna-border-strong);
    color: var(--luna-text);
}
.btn-secondary:hover { background: var(--luna-elevated); }

.btn-danger {
    background: var(--luna-danger);
    border-color: var(--luna-danger);
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-danger.active {
    background: #c63a3a;
    border-color: #c63a3a;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

.btn-success {
    background: var(--luna-success);
    border-color: var(--luna-success);
    color: #06281e;
}
.btn-success:disabled,
.btn-success.disabled {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--luna-success);
    opacity: 1;
}

.btn-link {
    color: var(--luna-text-soft);
    text-decoration: underline;
    text-decoration-color: var(--luna-border-strong);
    text-underline-offset: 3px;
}
.btn-link:hover, .btn-link:focus {
    color: var(--luna-accent);
    text-decoration-color: var(--luna-accent);
}

.list-group { border-radius: var(--luna-radius-md); overflow: hidden; border: 1px solid var(--luna-border); }
.list-group-item {
    background: var(--luna-surface);
    color: var(--luna-text);
    border-color: var(--luna-border);
    padding: .85rem 1rem;
}
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--luna-surface-2); }

.alert { border-radius: var(--luna-radius-md); border: 1px solid var(--luna-border); color: var(--luna-text); padding: .85rem 1rem; }
.alert-info { background: var(--luna-accent-soft); border-color: var(--luna-accent-border); }
.alert-success { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .28); }
.alert-danger { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .28); }
.alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); }

.table { color: var(--luna-text); }
.table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--luna-border); padding: .8rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--luna-surface-2); }
.table > thead { color: var(--luna-muted-strong); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

.text-muted { color: var(--luna-muted) !important; }
.text-danger { color: var(--luna-danger) !important; }
hr { border-color: var(--luna-border); opacity: 1; }
.badge.bg-primary { background: var(--luna-accent) !important; }

/* ============ Top navbar (only on non-chat pages) ============ */
.luna-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 11, 13, 0.78);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    border-bottom: 1px solid var(--luna-border);
    height: var(--luna-navbar-height);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.luna-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--luna-text);
    letter-spacing: -0.005em;
}
.luna-brand:hover { color: var(--luna-text); }
.luna-mark { color: var(--luna-accent); }

.luna-nav-link {
    color: var(--luna-muted);
    padding: .35rem .75rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: .88rem;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.luna-nav-link:hover { color: var(--luna-text); background: var(--luna-surface-2); }

.luna-nav-tail { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.luna-icon-btn {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--luna-border);
    background: var(--luna-surface);
    color: var(--luna-text-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.luna-icon-btn:hover { background: var(--luna-surface-2); color: var(--luna-text); border-color: var(--luna-border-strong); }

.luna-avatar-btn {
    width: 34px; height: 34px;
    border: 1px solid var(--luna-border);
    background: var(--luna-surface);
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.luna-avatar-btn:hover { border-color: var(--luna-accent); }

/* Navbar usage pill — always-visible "Plan · used / limit" link to /billing. */
.luna-usage-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .65rem .3rem .55rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-pill);
    background: var(--luna-surface);
    color: var(--luna-text-soft);
    font-size: .78rem;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.luna-usage-pill:hover {
    color: var(--luna-text);
    background: var(--luna-surface-2);
    border-color: var(--luna-border-strong);
}
.luna-usage-pill > .bi { color: var(--luna-accent); font-size: .85rem; }
.luna-usage-pill-label {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
}
.luna-usage-pill-tier { font-weight: 600; color: var(--luna-text); }
.luna-usage-pill-meta { color: var(--luna-muted); font-variant-numeric: tabular-nums; }
.luna-usage-pill-bar {
    display: inline-block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--luna-surface-2);
    overflow: hidden;
}
.luna-usage-pill-bar-fill {
    display: block;
    height: 100%;
    background: var(--luna-accent);
    transition: width .25s ease;
}
.luna-usage-pill.is-warn { border-color: rgba(234, 179, 8, .55); }
.luna-usage-pill.is-warn .luna-usage-pill-bar-fill { background: #eab308; }
.luna-usage-pill.is-danger { border-color: rgba(239, 68, 68, .65); }
.luna-usage-pill.is-danger .luna-usage-pill-bar-fill { background: var(--luna-danger); }
.luna-usage-pill.is-danger .luna-usage-pill-meta { color: var(--luna-danger); }
@media (max-width: 640px) {
    .luna-usage-pill-meta { display: none; }
    .luna-usage-pill-bar { display: none; }
}

.luna-avatar-sm {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--luna-accent), var(--luna-accent-2));
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.luna-dropdown {
    background: var(--luna-elevated);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    box-shadow: var(--luna-shadow-lg);
    padding: .35rem;
}
.luna-dropdown-header {
    padding: .55rem .75rem;
    color: var(--luna-text-soft);
    font-size: .85rem;
    line-height: 1.35;
}
.luna-dropdown .dropdown-item {
    color: var(--luna-text);
    border-radius: 6px;
    padding: .45rem .65rem;
    font-size: .9rem;
    background: transparent;
}
.luna-dropdown .dropdown-item:hover, .luna-dropdown .dropdown-item:focus {
    background: var(--luna-surface-2);
    color: var(--luna-text);
}
.luna-dropdown .dropdown-divider { border-color: var(--luna-border); margin: .35rem 0; }

/* ============ Config warning banner ============ */
.luna-config-warning {
    background: rgba(245, 158, 11, 0.10);
    border-bottom: 1px solid rgba(245, 158, 11, 0.30);
    color: var(--luna-text);
    padding: .55rem 1.25rem;
    font-size: .85rem;
    display: flex;
    gap: .55rem;
    align-items: center;
}
.luna-config-warning i { color: var(--luna-warning); font-size: .95rem; }
.luna-config-warning-link { margin-left: auto; color: var(--luna-text); font-weight: 500; font-size: .85rem; white-space: nowrap; }
.luna-config-warning-link:hover { color: var(--luna-accent); }

/* ============ Anonymous landing ============ */
.luna-landing {
    position: relative;
    min-height: calc(100vh - var(--luna-navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
    overflow: hidden;
}
.luna-landing-glow {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 90vw);
    height: 600px;
    pointer-events: none;
    background: radial-gradient(closest-side at 50% 50%, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0) 70%);
    filter: blur(20px);
    z-index: 0;
}
.luna-landing-main { position: relative; z-index: 1; width: 100%; max-width: 640px; text-align: center; }
.luna-landing-title {
    font-size: clamp(1.85rem, 4.5vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.15;
    color: var(--luna-text);
    margin: 0 0 2rem;
}
.luna-landing-composer {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    padding: .35rem .35rem .35rem .85rem;
    box-shadow: var(--luna-shadow-md);
    transition: border-color .15s ease, box-shadow .2s ease;
    max-width: 540px;
    margin: 0 auto;
}
.luna-landing-composer:focus-within {
    border-color: var(--luna-accent);
    box-shadow: 0 0 0 3px var(--luna-accent-soft), var(--luna-shadow-md);
}
.luna-landing-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--luna-text);
    font-size: 1rem;
    padding: .65rem .25rem;
    font-family: inherit;
    outline: none;
    min-width: 0;
}
.luna-landing-input::placeholder { color: var(--luna-muted); }
.luna-landing-send {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--luna-accent);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease;
    cursor: pointer;
}
.luna-landing-send:hover { background: var(--luna-accent-hover); }
.luna-landing-foot { margin: 1.5rem 0 0; color: var(--luna-muted); font-size: .9rem; }
.luna-landing-foot a { color: var(--luna-text-soft); font-weight: 500; transition: color .15s ease; }
.luna-landing-foot a:hover { color: var(--luna-text); }
.luna-sep { margin: 0 .65rem; color: var(--luna-border-strong); }

/* ============ Chat shell (sidebar + main) ============ */
.luna-app {
    display: grid;
    grid-template-columns: var(--luna-sidebar-width) 1fr;
    /* Just fills its parent (body, which is itself sized to the visible
       viewport on bare-layout pages — see html.luna-locked above). No
       position: fixed, no transform, no fancy iOS keyboard tracking on this
       element. With body locked to the visible-viewport height and overflow
       hidden, iOS literally has no scroll room — the topbar stays put at
       body top, composer stays put at body bottom (above the keyboard), and
       the messages area shrinks between them as a flex child. Nothing iOS
       can drag because nothing is anchored to the layout viewport. */
    height: 100%;
    min-height: 0;
    background: var(--luna-bg);
    transition: grid-template-columns .22s ease;
}
html.luna-sidebar-collapsed .luna-app { grid-template-columns: var(--luna-sidebar-collapsed-width) 1fr; }

.luna-sidebar {
    background: var(--luna-sidebar-bg);
    border-right: 1px solid var(--luna-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Don't clip — Bootstrap dropdowns need to escape the sidebar bounds. */
}

.luna-sidebar-top {
    display: flex;
    align-items: center;
    gap: .15rem;
}
/* Sidebar wordmark only appears on mobile (next to the moon in the drawer).
   Desktop keeps the pre-existing look — just the moon icon, Luna lives in the topbar. */
.luna-sidebar-brand {
    display: none;
    font-weight: 600;
    font-size: 1rem;
    color: var(--luna-text);
    letter-spacing: -0.005em;
    line-height: 1;
    margin-left: -.15rem;
}
@media (max-width: 900px) {
    .luna-sidebar-brand {
        display: inline-flex;
        align-items: center;
        /* Pull tight to the moon — the 40px button has internal padding that
           pushes the icon away from the right edge, so a negative margin closes
           the visual gap. */
        margin-left: -.5rem;
        line-height: 1;
        /* Nudge down to baseline-match the moon glyph, which sits slightly
           below the optical center of its 40px button. */
        transform: translateY(1px);
    }
    .luna-sidebar-top { align-items: center; gap: 0; }
}

/* Sidebar collapse button: moon icon by default, morphs to layout-sidebar icon on hover */
.luna-sidebar-collapse-btn {
    position: relative;
    width: 40px; height: 40px;
    margin: .65rem .65rem .35rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--luna-text);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.luna-sidebar-collapse-btn .luna-mark { color: var(--luna-accent); transition: opacity .15s ease; }
.luna-sidebar-collapse-btn .luna-sidebar-collapse-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luna-text-soft);
    opacity: 0;
    transition: opacity .15s ease;
    font-size: 1.05rem;
}
.luna-sidebar-collapse-btn:hover { background: var(--luna-surface-2); border-color: var(--luna-border); }
.luna-sidebar-collapse-btn:hover .luna-mark { opacity: 0; }
.luna-sidebar-collapse-btn:hover .luna-sidebar-collapse-icon { opacity: 1; }
/* Collapsed state uses absolute padding (NOT margin: auto / justify-content:
   center) for everything that should appear centered in the 64px column.
   `auto` and `center` both recompute against the parent's current width, so
   when the sidebar animates from 280→64 the icons slide leftward over the
   whole transition. Pinning them with fixed offsets keeps them at the same
   screen X throughout — only the sidebar's right edge animates inward. */
html.luna-sidebar-collapsed .luna-app .luna-sidebar-collapse-btn { margin: .65rem 12px .35rem; }

.luna-sidebar-header {
    padding: .25rem .65rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.luna-new-chat-btn {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    background: var(--luna-surface);
    color: var(--luna-text);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-sm);
    padding: .55rem .75rem;
    font-weight: 500;
    font-size: .88rem;
    transition: background .15s ease, border-color .15s ease;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}
.luna-new-chat-btn i { font-size: 1rem; color: var(--luna-muted-strong); }
.luna-new-chat-btn:hover {
    background: var(--luna-surface-2);
    border-color: var(--luna-border-strong);
    color: var(--luna-text);
}
/* Collapsed: shrink the button to a fixed 40px square (matching the moon
   button above and the nav icons below) instead of a full-width pill. The
   arithmetic puts the icon's center exactly at the rail's 32px midline:
   8px header pad + 4px margin + 1px border + 11px padding + 8px half-icon.
   Fixed offsets only — justify-content:center recomputes against the
   animating width and makes the icon slide during the transition. */
html.luna-sidebar-collapsed .luna-app .luna-new-chat-btn {
    justify-content: flex-start;
    width: 40px;
    margin-left: 4px;
    padding: .55rem 0 .55rem 11px;
}
html.luna-sidebar-collapsed .luna-app .luna-sidebar-header {
    padding-left: .5rem;
    padding-right: .5rem;
}

.luna-sidebar-search {
    position: relative;
    display: flex;
    align-items: center;
}
.luna-sidebar-search i {
    position: absolute;
    left: .65rem;
    color: var(--luna-muted);
    font-size: .85rem;
    pointer-events: none;
}
.luna-search-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--luna-radius-sm);
    padding: .45rem .65rem .45rem 2rem;
    font-size: .85rem;
    width: 100%;
    color: var(--luna-text);
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.luna-search-input::placeholder { color: var(--luna-muted); }
.luna-search-input:hover { background: var(--luna-surface); }
.luna-search-input:focus {
    outline: none;
    background: var(--luna-surface);
    border-color: var(--luna-accent);
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}
html.luna-sidebar-collapsed .luna-app .luna-sidebar-search { display: none; }

.luna-chat-list {
    overflow-y: auto;
    flex: 1;
    padding: .25rem .5rem 1rem;
    min-height: 0;
}
/* Keep the flex space when collapsed so nav stays pinned to the bottom; just hide the contents. */
html.luna-sidebar-collapsed .luna-app .luna-chat-list > * { display: none; }
/* While the sidebar animates open, keep the list hidden too — otherwise chat
   names render at the narrow intermediate width and visibly reflow as the
   column widens. The JS removes this class on the width transitionend, so they
   appear once at full width. */
html.luna-sidebar-animating .luna-app .luna-chat-list > * { display: none; }
/* Same treatment for every other text-bearing element: nav/new-chat labels,
   the search box, and the usage footer's text rows all used to render
   squished at intermediate widths while the column grew. Labels use
   display:none (icons hold the heights); search/usage internals keep their
   layout box via visibility so the footer doesn't jump vertically. */
html.luna-sidebar-animating .luna-app .luna-sidebar-label { display: none; }
html.luna-sidebar-animating .luna-app .luna-sidebar-search { visibility: hidden; }
html.luna-sidebar-animating .luna-app .luna-sidebar-usage-row,
html.luna-sidebar-animating .luna-app .luna-sidebar-usage-bar { visibility: hidden; }

.luna-sidebar-empty { color: var(--luna-muted); font-size: .85rem; padding: .75rem .75rem 0; }

.luna-chat-item-wrap {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin: 2px 0;
    transition: background .15s ease;
    min-width: 0;
}
.luna-chat-item-wrap:hover,
.luna-chat-item-wrap.active { background: var(--luna-surface-2); }
.luna-chat-item-wrap.active .luna-chat-item { color: var(--luna-text); font-weight: 500; }
.luna-chat-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    color: var(--luna-text-soft);
    text-decoration: none;
    font-size: .87rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    transition: color .15s ease;
}
.luna-chat-item:hover { color: var(--luna-text); }
.luna-chat-item-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.luna-chat-delete {
    background: transparent;
    border: none;
    color: var(--luna-muted);
    padding: .3rem .55rem;
    cursor: pointer;
    border-radius: 6px;
    font-size: .85rem;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
    flex-shrink: 0;
}
.luna-chat-item-wrap:hover .luna-chat-delete,
.luna-chat-delete:focus-visible { opacity: 1; }
.luna-chat-delete:hover { color: var(--luna-danger); background: rgba(255, 255, 255, 0.06); }
.luna-chat-busy {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--luna-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 var(--luna-accent);
    animation: luna-chat-busy-pulse 1.4s ease-in-out infinite;
}
@keyframes luna-chat-busy-pulse {
    0%, 100% { opacity: .55; transform: scale(.85); box-shadow: 0 0 0 0 rgba(120, 90, 255, 0.5); }
    50%      { opacity: 1;   transform: scale(1.1); box-shadow: 0 0 0 5px rgba(120, 90, 255, 0); }
}
.luna-chat-item-wrap.is-streaming .luna-chat-item-title {
    color: var(--luna-text);
    font-weight: 600;
}
.luna-chat-item-wrap.is-streaming::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--luna-accent);
}
.luna-chat-item-wrap.is-streaming { position: relative; }

.luna-sidebar-nav {
    border-top: 1px solid var(--luna-border);
    padding: .5rem .5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.luna-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--luna-text-soft);
    text-decoration: none;
    padding: .55rem .7rem;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.luna-sidebar-nav-item i { font-size: 1rem; color: var(--luna-muted-strong); }
.luna-sidebar-nav-item:hover { background: var(--luna-surface-2); color: var(--luna-text); }
.luna-sidebar-nav-item.active { background: var(--luna-accent-soft); color: var(--luna-text); }
.luna-sidebar-nav-item.active i { color: var(--luna-accent); }
html.luna-sidebar-collapsed .luna-app .luna-sidebar-nav-item { justify-content: flex-start; padding: .55rem 1rem; }

.luna-sidebar-foot {
    border-top: 1px solid var(--luna-border);
    padding: .5rem;
    flex-shrink: 0;
}
.luna-sidebar-usage {
    display: block;
    text-decoration: none;
    color: var(--luna-text-soft);
    padding: .55rem .65rem;
    border-radius: 8px;
    margin-bottom: .25rem;
    transition: background .15s ease, color .15s ease;
}
.luna-sidebar-usage:hover { background: var(--luna-surface-2); color: var(--luna-text); }
.luna-sidebar-usage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8rem;
}
.luna-sidebar-usage-tier {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: var(--luna-text);
}
.luna-sidebar-usage-tier > .bi { color: var(--luna-accent); font-size: .85rem; }
.luna-sidebar-usage-meta { color: var(--luna-muted); font-variant-numeric: tabular-nums; }
.luna-sidebar-usage-bar {
    display: block;
    height: 3px;
    margin-top: .4rem;
    border-radius: 2px;
    background: var(--luna-surface-2);
    overflow: hidden;
}
.luna-sidebar-usage-bar-fill {
    display: block;
    height: 100%;
    background: var(--luna-accent);
    transition: width .25s ease;
}
.luna-sidebar-usage.is-warn .luna-sidebar-usage-bar-fill { background: #eab308; }
.luna-sidebar-usage.is-danger .luna-sidebar-usage-bar-fill { background: var(--luna-danger); }
.luna-sidebar-usage.is-danger .luna-sidebar-usage-meta { color: var(--luna-danger); }

/* Circular gauge — replaces the linear bar+text when the sidebar is collapsed.
   No `margin: 0 auto` — that would beat the parent's flex-start anchor and
   drag the ring toward the moving center during the column-collapse
   transition. The ring is hidden in the expanded state, so centering only
   matters when collapsed, where the parent's padding-left does the work. */
.luna-sidebar-usage-ring {
    display: none;
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.luna-sidebar-usage-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.luna-sidebar-usage-ring-track {
    fill: none;
    stroke: var(--luna-surface-2);
    stroke-width: 3;
}
.luna-sidebar-usage-ring-fill {
    fill: none;
    stroke: var(--luna-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .3s ease, stroke .15s ease;
}
.luna-sidebar-usage-ring > .bi {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luna-accent);
    font-size: .8rem;
    transition: color .15s ease;
}
.luna-sidebar-usage.is-warn .luna-sidebar-usage-ring-fill { stroke: #eab308; }
.luna-sidebar-usage.is-warn .luna-sidebar-usage-ring > .bi { color: #eab308; }
.luna-sidebar-usage.is-danger .luna-sidebar-usage-ring-fill { stroke: var(--luna-danger); }
.luna-sidebar-usage.is-danger .luna-sidebar-usage-ring > .bi { color: var(--luna-danger); }

/* Collapsed sidebar — swap the linear pill for the ring gauge. Padding-left
   positions the 34px ring such that it ends up centered in the 64px column
   without using justify-content: center (which would drag during animation). */
html.luna-sidebar-collapsed .luna-app .luna-sidebar-usage {
    padding: .35rem .35rem .35rem 7px;
    display: flex;
    justify-content: flex-start;
}
html.luna-sidebar-collapsed .luna-app .luna-sidebar-usage-ring { display: block; }
html.luna-sidebar-collapsed .luna-app .luna-sidebar-usage-row,
html.luna-sidebar-collapsed .luna-app .luna-sidebar-usage-bar { display: none; }
.luna-sidebar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--luna-text-soft);
    padding: .5rem .65rem;
    border-radius: 8px;
    font-size: .85rem;
    text-align: left;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.luna-sidebar-user:hover { background: var(--luna-surface-2); color: var(--luna-text); }
.luna-sidebar-user-email {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Anchor the avatar at flex-start with a padding-left that lands the 26px
   circle at the 64px column's centerline (foot pad 8 + 11 = 19 = (64 − 26)/2).
   `justify-content: center` here would track the shrinking column's midpoint
   during the collapse transition and drag the avatar across the row. */
html.luna-sidebar-collapsed .luna-app .luna-sidebar-user {
    justify-content: flex-start;
    padding: .5rem .35rem .5rem 11px;
}

.luna-sidebar-label { transition: opacity .12s ease; }
html.luna-sidebar-collapsed .luna-app .luna-sidebar-label { display: none; }

.luna-chat-list::-webkit-scrollbar,
.luna-messages::-webkit-scrollbar { width: 8px; }
.luna-chat-list::-webkit-scrollbar-thumb,
.luna-messages::-webkit-scrollbar-thumb {
    background: var(--luna-border-strong);
    border-radius: 8px;
}
.luna-chat-list::-webkit-scrollbar-track,
.luna-messages::-webkit-scrollbar-track { background: transparent; }

/* ============ Main area ============ */
.luna-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--luna-bg); }

.luna-topbar {
    height: var(--luna-navbar-height);
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--luna-bg);
    border-bottom: 1px solid var(--luna-border);
}
.luna-topbar-left {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    flex: 1 1 auto;
}
.luna-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--luna-text);
    letter-spacing: -0.005em;
    text-decoration: none;
    flex-shrink: 0;
}
.luna-topbar-brand:hover { color: var(--luna-text); }
.luna-topbar-brand .luna-mark { color: var(--luna-accent); }
.luna-topbar-sep {
    color: var(--luna-border-strong);
    font-weight: 400;
    flex-shrink: 0;
}
.luna-topbar-title {
    color: var(--luna-text-soft);
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 0;
}
.luna-topbar-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.luna-messages { flex: 1; overflow-y: auto; padding: 1.5rem 1.25rem; background: var(--luna-bg); }
/* Reserves scroll room below the latest turn so its prompt can sit at the top
   of the window while the reply streams in (Gemini-style). Shrinks to 0 once
   the reply is tall enough to fill the viewport on its own. */
.luna-scroll-spacer { width: 100%; flex-shrink: 0; pointer-events: none; }
/* Brief dim while the chat list is fetched + swapped in place (Chats <->
   Archived). Keeps a slow load from looking frozen without a jarring flash. */
.luna-chat-list.is-swapping { opacity: .5; transition: opacity .12s ease; }
.luna-msg { max-width: 900px; margin: 0 auto 1.5rem auto; display: flex; gap: .85rem; align-items: flex-start; }
.luna-avatar {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .72rem;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
}
.luna-msg.assistant .luna-avatar { background: linear-gradient(135deg, var(--luna-accent), var(--luna-accent-2)); }
/* Match the role label's height to the avatar (30px) so the avatar circle's
   vertical center aligns with the "Luna" / "You" text's center instead of
   the avatar overhanging an unrelated shorter row. */
.luna-msg.assistant .luna-msg-role {
    height: 30px;
    line-height: 30px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.luna-msg-content { flex: 1; min-width: 0; position: relative; }
.luna-msg-role {
    font-size: .78rem;
    font-weight: 600;
    color: var(--luna-text);
    margin-bottom: .25rem;
    letter-spacing: -0.005em;
}
/* User messages: no avatar circle, right-aligned bubble with the "You"
   label sitting on the right side above it. */
.luna-msg.user {
    flex-direction: row-reverse;
    gap: 0;
}
.luna-msg.user .luna-msg-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 100%;
}
.luna-msg.user .luna-msg-role { text-align: right; }

.luna-msg-body { line-height: 1.65; color: var(--luna-text); word-wrap: break-word; font-size: .95rem; }
.luna-msg.user .luna-msg-body {
    background: var(--luna-user-bubble);
    padding: .75rem 1rem;
    border-radius: var(--luna-radius-md);
    max-width: 100%;
    text-align: left;
}
.luna-msg.assistant .luna-msg-body { padding: 0; }

.luna-msg-body p { margin: 0 0 .7rem; }
.luna-msg-body p:last-child { margin-bottom: 0; }
.luna-msg-body h1, .luna-msg-body h2, .luna-msg-body h3 { margin: 1.1rem 0 .55rem; font-weight: 600; letter-spacing: -0.01em; color: var(--luna-text); }
.luna-msg-body h1 { font-size: 1.35rem; }
.luna-msg-body h2 { font-size: 1.15rem; }
.luna-msg-body h3 { font-size: 1rem; }
.luna-msg-body ul, .luna-msg-body ol { padding-left: 1.3rem; margin: 0 0 .7rem; }
.luna-msg-body li { margin: .2rem 0; }
.luna-msg-body blockquote { border-left: 3px solid var(--luna-accent); margin: .5rem 0; padding: .1rem .9rem; color: var(--luna-text-soft); }

.luna-msg-body pre {
    background: var(--luna-code-bg);
    color: var(--luna-code-fg);
    padding: .85rem 1rem;
    border-radius: var(--luna-radius-md);
    overflow-x: auto;
    border: 1px solid var(--luna-border);
    font-size: .85rem;
    line-height: 1.55;
    margin: .65rem 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.luna-msg-body .luna-code-block {
    margin: .65rem 0;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    overflow: hidden;
    background: var(--luna-code-bg);
}
.luna-msg-body .luna-code-block > pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}
.luna-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .7rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--luna-border);
    font-size: .75rem;
    color: var(--luna-text-soft);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.luna-code-lang {
    text-transform: lowercase;
    letter-spacing: .02em;
}
.luna-code-copy {
    background: transparent;
    border: 0;
    color: var(--luna-text-soft);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    padding: .1rem .45rem;
    border-radius: 4px;
    font-size: .75rem;
    font-family: inherit;
    line-height: 1;
}
.luna-code-copy:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--luna-text);
}
.luna-code-copy.is-copied {
    color: #4ade80;
}
.luna-code-block .luna-code-body {
    display: flex;
    align-items: stretch;
    background: var(--luna-code-bg);
}
.luna-code-block .luna-code-body > pre {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
/* highlight.js themes ship with their own `display: block; padding: .5em;`
   on `code.hljs`, which shifts the first line of code down by half an em
   while the gutter starts at the pre's content-box top. Strip that so
   the gutter and the code's first line share the same baseline. */
.luna-code-block .luna-code-body pre code,
.luna-code-block .luna-code-body pre code.hljs {
    padding: 0;
    background: transparent;
}
.luna-code-block.has-lines .luna-code-gutter {
    flex: 0 0 auto;
    white-space: pre;
    color: rgba(255, 255, 255, 0.28);
    user-select: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.55;
    padding: .85rem .25rem .85rem 1rem;
    border-right: 1px solid var(--luna-border);
}
.luna-msg-body code:not(pre code) {
    background: var(--luna-code-bg);
    padding: .12rem .4rem;
    border-radius: 5px;
    font-size: .87em;
    color: var(--luna-text);
    border: 1px solid var(--luna-border);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.luna-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}
.luna-msg-attachments img {
    /* max-width: 100% prevents the old 320px-fixed overflow on mobile and
       lets the image grow to fill the message column on desktop (~680px,
       roughly 2× the previous size). For full-resolution viewing the user
       can click the image to open the lightbox. */
    max-width: 100%;
    width: auto;
    height: auto;
    /* Cap vertical so a single tall image can't push the composer off-screen. */
    max-height: 70vh;
    border-radius: var(--luna-radius-sm);
    border: 1px solid var(--luna-border);
    cursor: zoom-in;
    transition: filter .15s ease, transform .15s ease;
    display: block;
}
.luna-msg-attachments img:hover { filter: brightness(1.05); }
/* Generated video clips: same footprint as a generated image, with the native
   player chrome. No zoom cursor — the controls own the interaction. */
.luna-msg-attachments video.luna-msg-video {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 70vh;
    border-radius: var(--luna-radius-sm);
    border: 1px solid var(--luna-border);
    display: block;
    background: #000;
}
@media (max-width: 480px) {
    .luna-msg-attachments video.luna-msg-video { max-height: 55vh; }
}
/* Generated music: a full-width native audio player on its own row. */
.luna-msg-attachments audio.luna-msg-audio {
    flex: 1 1 100%;
    width: 100%;
    max-width: 480px;
    display: block;
}
/* Uploaded images render as compact thumbnails (generated images keep the
   full-size rule above). Click still opens the original in the lightbox. */
.luna-msg-attachments--upload img {
    max-width: 160px;
    max-height: 160px;
}
@media (max-width: 480px) {
    /* Phones: be even more conservative on vertical so the keyboard + message
       text still have breathing room. */
    .luna-msg-attachments img { max-height: 55vh; }
    /* Keep upload thumbnails small on phones too. */
    .luna-msg-attachments--upload img { max-height: 140px; }
}

.luna-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}
.luna-lightbox[hidden] { display: none; }
.luna-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--luna-radius-sm);
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
    /* JS (Luna.attachImageZoom) owns gestures here, so the browser must not
       claim the touch for its own scroll/zoom. */
    touch-action: none;
    transform-origin: 0 0;
}
.luna-lightbox-close,
.luna-lightbox-download {
    position: fixed;
    /* Stay above the image: once the image has a transform it forms its own
       stacking context and would otherwise paint over these controls. */
    z-index: 2;
    top: 1rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    text-decoration: none;
    font-size: 1rem;
}
.luna-lightbox-close { right: 1rem; }
.luna-lightbox-download { right: 3.6rem; }
.luna-lightbox-close:hover,
.luna-lightbox-download:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.luna-msg-copy {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: var(--luna-muted);
    cursor: pointer;
    padding: .15rem .4rem;
    font-size: .95rem;
    line-height: 1;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.luna-msg:hover .luna-msg-copy,
.luna-msg-copy:focus-visible { opacity: 1; }
.luna-msg-copy:hover { color: var(--luna-text); background: var(--luna-surface-2); }
/* User messages: the content column spans the full chat width while the
   bubble hugs the right edge, so left-anchored buttons end up stranded at
   the far left of the column. Anchor them top-right instead, just left of
   the right-aligned "You" label, so they sit beside the bubble. */
.luna-msg.user .luna-msg-copy { top: 0; bottom: auto; right: 2.4rem; left: auto; }

/* Regenerate (assistant) and edit-and-resend (user) sit beside the copy
   button, but only on the conversation tail — regenerating or editing a
   mid-conversation turn isn't supported by the server flow. */
/* "Tail" is the last real message, but a trailing .luna-scroll-spacer (added
   on the first send) sits after every message — so :last-child alone never
   matches once you've sent a turn. Match either the true last child (no
   spacer yet) or the message(s) immediately before the spacer. */
.luna-msg-regen { right: 2rem; display: none; }
.luna-msg.assistant:last-child .luna-msg-regen,
.luna-msg.assistant:has(+ .luna-scroll-spacer) .luna-msg-regen { display: inline-block; }
.luna-msg.user .luna-msg-edit { top: 0; bottom: auto; right: 4.4rem; left: auto; display: none; }
.luna-msg.user:last-child .luna-msg-edit,
.luna-msg.user:nth-last-child(2) .luna-msg-edit,
.luna-msg.user:has(+ .luna-scroll-spacer) .luna-msg-edit,
.luna-msg.user:has(+ .luna-msg.assistant + .luna-scroll-spacer) .luna-msg-edit { display: inline-block; }

/* ============ Composer ============ */
/* The wrapper is intentionally transparent — the rounded "pill" inside
   (.luna-composer-inner) owns its own surface color. Painting the wrapper
   solid put a flat dark rectangle behind the pill (especially visible on
   mobile where the wrapper extends to the screen edges), and on iOS it
   also blocked the home-indicator's translucent overlay from showing. */
.luna-composer { padding: .75rem 1.25rem 1.25rem; background: transparent; }
.luna-composer-inner {
    max-width: 900px;
    margin: 0 auto;
    background: var(--luna-input-bg);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    box-shadow: var(--luna-shadow-md);
    padding: .35rem .5rem;
    transition: border-color .15s ease, box-shadow .2s ease;
    cursor: text;
}
.luna-composer-inner:focus-within {
    border-color: var(--luna-accent);
    box-shadow: 0 0 0 3px var(--luna-accent-soft), var(--luna-shadow-md);
}
#attachment-list:not(:empty) { padding: .3rem .25rem 0; }
.luna-composer-row {
    display: flex;
    /* End-align so the attach + send buttons sit alongside the last line of
       text when the textarea grows multi-line, instead of floating in the
       vertical middle of a tall box. */
    align-items: flex-end;
    gap: .25rem;
    min-height: 44px;
}
.luna-composer textarea {
    flex: 1;
    resize: none;
    min-height: 36px;
    max-height: 240px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .45rem .6rem !important;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--luna-text);
    font-family: var(--luna-font);
    /* Custom thin scrollbar — Windows' native textarea scrollbar shows up/down
       arrow buttons that look glitchy crammed against the send button. */
    scrollbar-width: thin;
    scrollbar-color: var(--luna-border) transparent;
}
.luna-composer textarea::-webkit-scrollbar { width: 8px; }
.luna-composer textarea::-webkit-scrollbar-track { background: transparent; }
.luna-composer textarea::-webkit-scrollbar-thumb {
    background: var(--luna-border);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.luna-composer textarea::-webkit-scrollbar-thumb:hover { background: var(--luna-text-soft); background-clip: padding-box; border: 2px solid transparent; }
.luna-composer textarea::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.luna-composer textarea::-webkit-scrollbar-corner { background: transparent; }
/* Keep the attach + send buttons at the textarea's bottom-line baseline. */
.luna-composer .luna-attach-btn,
.luna-composer .luna-send-btn { align-self: flex-end; margin-bottom: 2px; }
.luna-composer textarea:focus { outline: none; box-shadow: none !important; }
.luna-composer textarea::placeholder { color: var(--luna-muted); }

.luna-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--luna-accent);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .06s ease;
    cursor: pointer;
}
.luna-send-btn:hover:not(:disabled) { background: var(--luna-accent-hover); }
.luna-send-btn:disabled { opacity: .4; cursor: not-allowed; }
.luna-send-btn.is-stopping { background: var(--luna-text); color: var(--luna-bg); }
.luna-send-btn.is-stopping:hover { background: var(--luna-text-soft); }

/* Voice-mode button (left of submit) */
.luna-voice-btn {
    align-self: flex-end;
    margin-bottom: 2px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--luna-muted);
    border: 1px solid var(--luna-border, rgba(127,127,127,.3));
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease, transform .06s ease;
    cursor: pointer;
}
.luna-voice-btn:hover { color: var(--luna-text); background: var(--luna-surface-2, rgba(127,127,127,.12)); }
.luna-voice-btn.is-active { background: var(--luna-accent); color: #fff; border-color: transparent; }

/* Voice overlay */
.luna-voice-overlay {
    position: fixed; inset: 0; z-index: 1080;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.luna-voice-overlay.is-open { display: flex; }
.luna-voice-card {
    background: var(--luna-bg, #111); color: var(--luna-text, #eee);
    border-radius: 18px; padding: 32px 28px; width: min(420px, 92vw);
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.luna-voice-orb {
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--luna-accent, #6c5ce7), #2d2a55);
    box-shadow: 0 0 0 0 rgba(108,92,231,.6);
    animation: luna-orb-idle 2.4s ease-in-out infinite;
}
.luna-voice-orb[data-mode="speaking"] { animation: luna-orb-speak .9s ease-in-out infinite; }
.luna-voice-orb[data-mode="listening"] { animation: luna-orb-idle 2.4s ease-in-out infinite; }
.luna-voice-orb[data-mode="thinking"] { animation: luna-orb-think 1.4s linear infinite; }
@keyframes luna-orb-idle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes luna-orb-speak { 0%,100% { transform: scale(1.02); } 50% { transform: scale(1.14); } }
@keyframes luna-orb-think { 0% { filter: brightness(.9); } 50% { filter: brightness(1.25); } 100% { filter: brightness(.9); } }
.luna-voice-state { font-size: 15px; font-weight: 600; min-height: 1.2em; }
/* Remaining-call-time countdown; amber inside the wrap-up window so the
   session cap reads as designed, not as Luna hanging up unannounced. */
.luna-voice-timer {
    font-size: 13px; color: var(--luna-muted, #999);
    font-variant-numeric: tabular-nums; min-height: 1.2em;
}
.luna-voice-timer.is-ending { color: #e5a13d; }
/* Circular call controls, mirroring the iOS app: a surface mic toggle and a red
   end button. (The dialog used to show a live transcript line here — dropped:
   it truncated mid-sentence and duplicated what the voice already conveys.) */
.luna-voice-controls { display: flex; gap: 36px; align-items: center; justify-content: center; margin-top: 6px; }
.luna-voice-ctl {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .06s ease;
}
.luna-voice-ctl:active { transform: scale(.94); }
.luna-voice-mic {
    background: var(--luna-surface-2, rgba(127,127,127,.16));
    color: var(--luna-text, #eee);
}
.luna-voice-mic:hover { background: var(--luna-surface-3, rgba(127,127,127,.24)); }
/* Muted reads as a quiet dimmed state (matching iOS), not an accent glow —
   the auto-gate mutes every turn, and an accent fill blinked like an LED. */
.luna-voice-mic.is-muted { color: var(--luna-muted, #999); }
.luna-voice-end { background: #e5484d; color: #fff; }
.luna-voice-end:hover { background: #d93a40; }

.luna-attach-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--luna-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}
.luna-attach-btn:hover { background: var(--luna-surface-2); color: var(--luna-text); }

.luna-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-pill);
    margin: 0 .35rem .35rem 0;
    font-size: .8rem;
    background: var(--luna-surface-2);
    color: var(--luna-text);
}
.luna-attachment-chip button {
    background: transparent; border: none; padding: 0 .1rem;
    color: var(--luna-muted); cursor: pointer; font-size: 1rem; line-height: 1;
}

/* ============ Thinking indicator ============ */
/* Plain "Thinking" with a lighter highlight sweeping across the letters. */
.luna-thinking {
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: .95rem;
    background: linear-gradient(
        90deg,
        var(--luna-muted) 0%,
        var(--luna-muted) 40%,
        var(--luna-text) 50%,
        var(--luna-muted) 60%,
        var(--luna-muted) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: luna-thinking-shimmer 1.8s linear infinite;
}
@keyframes luna-thinking-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.luna-thinking-interim { margin: .15rem 0 .35rem; }

/* ============ Tool status pills (above the assistant message body) ============ */
.luna-tool-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .5rem 0;
}
.luna-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    padding: .2rem .65rem;
    border-radius: var(--luna-radius-pill);
    background: var(--luna-surface-2);
    border: 1px solid var(--luna-border);
    color: var(--luna-text-soft);
}
.luna-tool-pill i { color: var(--luna-accent); font-size: .9rem; }
.luna-tool-timer { font-variant-numeric: tabular-nums; opacity: .75; }
.luna-tool-pill.is-running {
    background: var(--luna-accent-soft);
    border-color: var(--luna-accent-border);
    color: var(--luna-text);
    animation: luna-pill-pulse 1.6s ease-in-out infinite;
}
.luna-tool-pill.is-done {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .25);
}
.luna-tool-pill.is-done i { color: var(--luna-success); }
.luna-tool-pill.is-error {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .3);
    color: var(--luna-text);
    cursor: help;
}
.luna-tool-pill.is-error i { color: #ef4444; }
.luna-tool-pill.is-notice {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .3);
    color: var(--luna-text);
    cursor: help;
}
.luna-tool-pill.is-notice i { color: #f59e0b; }
@keyframes luna-pill-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--luna-accent-glow); }
    50%      { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
}

/* ============ Inline error chip (visible inside the assistant body) ============ */
.luna-error-inline {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .28);
    color: var(--luna-text);
    padding: .55rem .75rem;
    border-radius: var(--luna-radius-sm);
    font-size: .85rem;
    margin: .6rem 0 0;
}
.luna-error-inline i { color: var(--luna-danger); flex-shrink: 0; margin-top: 2px; }
.luna-error-inline.luna-stopped {
    background: var(--luna-surface-2);
    border-color: var(--luna-border);
    color: var(--luna-muted);
}
.luna-error-inline.luna-stopped i { color: var(--luna-muted); }

/* ============ Configuration page: tool list ============ */
.luna-tool-list { display: flex; flex-direction: column; gap: .5rem; }
.luna-tool-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: var(--luna-surface-2);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-sm);
}
.luna-tool-row i { color: var(--luna-accent); font-size: 1.1rem; }

/* ============ Toast notifications ============ */
.luna-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.luna-toast {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .9rem;
    background: var(--luna-elevated);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    box-shadow: var(--luna-shadow-lg);
    color: var(--luna-text);
    font-size: .87rem;
    max-width: 360px;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    pointer-events: auto;
}
.luna-toast.is-visible { transform: translateY(0); opacity: 1; }
.luna-toast i { font-size: 1rem; flex-shrink: 0; }
.luna-toast.is-error i   { color: var(--luna-danger); }
.luna-toast.is-success i { color: var(--luna-success); }
.luna-toast.is-warning i { color: #f59e0b; }
.luna-toast.is-info i,
.luna-toast i { color: var(--luna-accent); }

/* ============ Confirm dialog ============ */
.luna-confirm {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.luna-confirm[hidden] { display: none; }
.luna-confirm.is-visible { opacity: 1; pointer-events: auto; }
.luna-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.luna-confirm-dialog {
    position: relative;
    background: var(--luna-elevated);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    box-shadow: var(--luna-shadow-lg);
    width: 100%;
    max-width: 400px;
    padding: 1.25rem 1.25rem 1rem;
    transform: translateY(8px) scale(.98);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.luna-confirm.is-visible .luna-confirm-dialog { transform: translateY(0) scale(1); }
.luna-confirm-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; color: var(--luna-text); letter-spacing: -0.01em; }
.luna-confirm-body  { font-size: .9rem; color: var(--luna-text-soft); margin: 0 0 1rem; line-height: 1.5; }
.luna-confirm-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.luna-confirm-actions button {
    background: transparent;
    border: 1px solid var(--luna-border-strong);
    color: var(--luna-text);
    padding: .45rem .9rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.luna-confirm-actions button:hover { background: var(--luna-surface-2); }
.luna-confirm-ok {
    background: var(--luna-accent) !important;
    border-color: var(--luna-accent) !important;
    color: #fff !important;
}
.luna-confirm-ok:hover { background: var(--luna-accent-hover) !important; border-color: var(--luna-accent-hover) !important; }
.luna-confirm-ok.is-danger { background: var(--luna-danger) !important; border-color: var(--luna-danger) !important; }
.luna-confirm-ok.is-danger:hover { background: #c63a3a !important; border-color: #c63a3a !important; }

/* ============ Temporary chat ============ */
.luna-temp-banner {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.25rem;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.06));
    border-bottom: 1px solid var(--luna-border);
    color: var(--luna-text-soft);
    font-size: .82rem;
}
.luna-temp-banner i { color: var(--luna-accent); font-size: 1rem; }
.luna-messages[data-temporary="1"] { background: linear-gradient(180deg, rgba(139, 92, 246, 0.04), transparent 240px), var(--luna-bg); }

/* ============ Empty state ============ */
.luna-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    text-align: center;
    color: var(--luna-text);
    padding-bottom: 4rem;
}
.luna-empty-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--luna-text-soft);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: -0.005em;
}
.luna-empty-brand .luna-mark { color: var(--luna-accent); }
.luna-empty-greeting {
    font-family: var(--luna-font);
    font-weight: 500;
    font-size: 2rem;
    color: var(--luna-text);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.2;
}

/* ============ Offcanvas ============ */
.luna-offcanvas { background: var(--luna-surface); color: var(--luna-text); border-left: 1px solid var(--luna-border); }
.luna-offcanvas .offcanvas-header { border-bottom: 1px solid var(--luna-border); }
.luna-offcanvas .btn-close { filter: invert(0.85); opacity: .7; }
.luna-offcanvas .btn-close:hover { opacity: 1; }

/* ============ Auth pages ============ */
.luna-auth-shell {
    min-height: calc(100vh - var(--luna-navbar-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
}
.luna-auth-shell::before {
    content: "";
    position: absolute;
    top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 500px;
    background: radial-gradient(closest-side at 50% 50%, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0) 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.luna-auth-card {
    position: relative;
    z-index: 1;
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    box-shadow: var(--luna-shadow-lg);
    padding: 2.25rem;
    width: 100%;
    max-width: 420px;
}
.luna-auth-card h1, .luna-auth-card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 .35rem;
    color: var(--luna-text);
}
.luna-auth-subtitle { color: var(--luna-muted); font-size: .92rem; margin-bottom: 1.4rem; }
.luna-auth-card .form-floating { margin-bottom: .85rem; }
.luna-auth-card hr { border-color: var(--luna-border); opacity: 1; }
.luna-auth-card .text-danger { color: var(--luna-danger) !important; font-size: .85rem; }
.luna-auth-aside { color: var(--luna-muted); font-size: .88rem; text-align: center; margin-top: 1.25rem; }
.luna-auth-aside a { color: var(--luna-text-soft); font-weight: 500; }
.luna-auth-aside a:hover { color: var(--luna-accent); }
.luna-auth-legal {
    color: var(--luna-muted);
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
    margin: .9rem 0 0;
}
.luna-auth-legal a { color: var(--luna-text-soft); }
.luna-auth-legal a:hover { color: var(--luna-accent); }

/* Floating-label color theming inside the auth card. Bootstrap's defaults
   make the floated label fade-on-focus look muted-blue; recolor to accent. */
.luna-auth-card .form-floating > .form-control:focus ~ label,
.luna-auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--luna-accent);
}
.luna-auth-card .form-check-input:checked {
    background-color: var(--luna-accent);
    border-color: var(--luna-accent);
}

/* ============ Polished page layout (Settings, Admin, Notes) ============ */
.luna-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.luna-page-head {
    margin-bottom: 2rem;
}
.luna-page-head .luna-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 600;
    color: var(--luna-accent);
    margin-bottom: .65rem;
}
.luna-page-head h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.75rem;
    margin: 0 0 .35rem;
    color: var(--luna-text);
}
.luna-page-head p {
    color: var(--luna-muted);
    margin: 0;
    font-size: .95rem;
    max-width: 640px;
}

.luna-page-section {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.25rem;
}
.luna-page-section-head { margin-bottom: 1.25rem; }
.luna-page-section-head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--luna-text);
    letter-spacing: -0.005em;
}
.luna-page-section-head p {
    color: var(--luna-muted);
    font-size: .88rem;
    margin: 0;
}
.luna-page-section-head p a { color: var(--luna-text-soft); text-decoration: underline; text-decoration-color: var(--luna-border-strong); }
.luna-page-section-head p a:hover { color: var(--luna-accent); }

.luna-page-actions {
    display: flex;
    gap: .65rem;
    margin-top: 1.25rem;
}

/* Transient "Saved" confirmation beside auto-saving toggles. */
.luna-setting-status {
    margin-left: .5rem;
    font-size: .78rem;
    color: var(--luna-accent);
    opacity: 0;
    transition: opacity .2s ease;
}
.luna-setting-status.is-visible { opacity: 1; }

.luna-optional {
    font-size: .72rem;
    color: var(--luna-muted);
    font-weight: 400;
    text-transform: lowercase;
    padding: .05rem .4rem;
    background: var(--luna-surface-2);
    border-radius: var(--luna-radius-pill);
    margin-left: .3rem;
    border: 1px solid var(--luna-border);
}

/* Two-column form grid for sub-sections that hold several short inputs
   (e.g. current / new / confirm password). Collapses to single column. */
.luna-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem 1.1rem;
}
.luna-form-grid > div { display: flex; flex-direction: column; }

/* Account header summary (avatar + name + email) */
.luna-account-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(99, 102, 241, 0.04));
    border: 1px solid var(--luna-accent-border);
    border-radius: var(--luna-radius-lg);
    margin-bottom: 1.25rem;
}
.luna-account-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--luna-accent), var(--luna-accent-2));
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
    user-select: none;
}
.luna-account-summary-meta { min-width: 0; flex: 1; }
.luna-account-summary-name {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--luna-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.luna-account-summary-sub {
    color: var(--luna-muted);
    font-size: .85rem;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Danger zone — destructive sections (delete account, delete all chats). */
.luna-danger-zone {
    border-color: rgba(239, 68, 68, 0.28);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.045), transparent 80%), var(--luna-surface);
}
.luna-danger-zone .luna-page-section-head h3 { color: var(--luna-text); }
.luna-danger-zone .luna-page-section-head h3::before {
    content: "";
    display: inline-block;
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--luna-danger);
    margin-right: .55rem;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

/* Notes grid */
.luna-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.luna-note-card {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    color: var(--luna-text);
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
    min-height: 140px;
}
.luna-note-card:hover {
    border-color: var(--luna-border-strong);
    transform: translateY(-1px);
    color: var(--luna-text);
}
.luna-note-card h4 {
    font-size: .98rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.005em;
    color: var(--luna-text);
    line-height: 1.3;
    /* Compact the title to at most two lines so a long title can't push the
       preview down and make the card grid ragged. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.luna-note-preview {
    flex: 1;
    margin: 0;
    color: var(--luna-muted);
    font-size: .85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
/* The preview holds rendered markdown; without these rules headings render at
   browser-default sizes inside a 4-line card. Flatten everything to the card's
   own scale — the card is a glimpse of the note, not a tiny document. */
.luna-note-preview h1, .luna-note-preview h2, .luna-note-preview h3,
.luna-note-preview h4, .luna-note-preview h5, .luna-note-preview h6 {
    font-size: .88rem;
    font-weight: 600;
    margin: 0 0 .2rem;
    line-height: 1.4;
    color: inherit;
}
.luna-note-preview p, .luna-note-preview ul, .luna-note-preview ol,
.luna-note-preview blockquote, .luna-note-preview pre, .luna-note-preview table {
    margin: 0 0 .25rem;
    font-size: .85rem;
}
.luna-note-preview ul, .luna-note-preview ol { padding-left: 1.1rem; }
.luna-note-preview pre, .luna-note-preview code {
    font-size: .78rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.luna-note-preview pre { padding: 0; background: none; border: none; }
.luna-note-preview blockquote {
    padding-left: .6rem;
    border-left: 2px solid var(--luna-border);
}
.luna-note-preview img { display: none; }
.luna-note-preview hr { display: none; }
.luna-note-preview a { color: inherit; pointer-events: none; }
.luna-note-meta { font-size: .75rem; color: var(--luna-muted); }

.luna-note-editor {
    background: var(--luna-input-bg);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-sm);
    color: var(--luna-text);
    padding: 1rem 1.15rem;
    line-height: 1.65;
    font-size: .95rem;
    font-family: var(--luna-font);
    resize: vertical;
}

.luna-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--luna-muted);
    font-size: .85rem;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color .15s ease;
}
.luna-back-link:hover { color: var(--luna-text); }

/* Stat grid (admin) */
.luna-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .85rem;
    margin-bottom: 1.5rem;
}
.luna-stat {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.luna-stat-label {
    font-size: .75rem;
    color: var(--luna-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.luna-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--luna-text);
    letter-spacing: -0.02em;
}
/* Period-over-period delta badge. Direction-only coloring (up = green,
   down = red) — no good/bad judgement, since "more" isn't always better. */
.luna-stat-delta {
    font-size: .75rem;
    font-weight: 600;
    margin-top: .1rem;
}
.luna-stat-delta.luna-delta-up { color: #5ad6a9; }
.luna-stat-delta.luna-delta-down { color: #ff7a7a; }
.luna-stat-delta.luna-delta-flat { color: var(--luna-muted); }

.luna-chart-wrap {
    position: relative;
    height: 320px;
    max-width: 100%;
}

/* Conversion funnel: a labeled bar per stage, width = share of the top stage. */
.luna-funnel { display: flex; flex-direction: column; gap: .6rem; max-width: 640px; }
.luna-funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .2rem; }
.luna-funnel-label { font-size: .9rem; color: var(--luna-text); }
.luna-funnel-count { font-size: .9rem; font-weight: 600; color: var(--luna-text); white-space: nowrap; }
.luna-funnel-bar-track { height: 10px; border-radius: 6px; background: var(--luna-surface-2); overflow: hidden; }
.luna-funnel-bar-fill {
    display: block; height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, var(--luna-accent), var(--luna-accent-2));
    min-width: 2px; transition: width .3s ease;
}

.luna-tag-admin {
    display: inline-flex;
    align-items: center;
    background: var(--luna-accent-soft);
    color: var(--luna-accent);
    border: 1px solid var(--luna-accent-border);
    padding: .12rem .55rem;
    border-radius: var(--luna-radius-pill);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Admin users page — search bar, dense table, pagination */
.luna-page-wide { max-width: 1180px; }

.luna-admin-users { padding: 1.25rem 0 0; overflow: hidden; }
.luna-admin-users-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0 1.6rem 1rem;
}
.luna-admin-users-head h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--luna-text);
    letter-spacing: -0.005em;
}
.luna-admin-users-head p {
    color: var(--luna-muted);
    font-size: .88rem;
    margin: 0;
    max-width: 480px;
}

.luna-admin-search {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.luna-admin-search-input {
    position: relative;
    display: flex;
    align-items: center;
}
.luna-admin-search-input > i.bi {
    position: absolute;
    left: .65rem;
    color: var(--luna-muted);
    font-size: .9rem;
    pointer-events: none;
}
.luna-admin-search-input input {
    padding: .35rem .75rem .35rem 2rem;
    background: var(--luna-surface-soft, var(--luna-surface));
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md, 8px);
    color: var(--luna-text);
    font-size: .9rem;
    width: 260px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.luna-admin-search-input input:focus {
    outline: none;
    border-color: var(--luna-accent-border);
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}
.luna-admin-search-input input::-webkit-search-cancel-button { display: none; }
.luna-admin-search-clear {
    position: absolute;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 999px;
    color: var(--luna-muted);
    text-decoration: none;
    font-size: .7rem;
}
.luna-admin-search-clear:hover { background: var(--luna-border); color: var(--luna-text); }
.luna-admin-pagesize { width: auto; min-width: 100px; }

.luna-admin-users-meta {
    padding: .35rem 1.6rem .9rem;
    color: var(--luna-muted);
    font-size: .85rem;
}
.luna-admin-users-meta strong { color: var(--luna-text); font-weight: 600; }

.luna-admin-users-table { border-top: 1px solid var(--luna-border); }
.luna-admin-users-table table { font-size: .9rem; }
.luna-admin-users-table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--luna-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--luna-border);
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.luna-admin-users-table tbody td {
    padding-top: .65rem;
    padding-bottom: .65rem;
    border-color: var(--luna-border);
}
.luna-col-pad-l { padding-left: 1.6rem !important; }
.luna-col-pad-r { padding-right: 1.6rem !important; }

.luna-admin-email {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.luna-tag-tier {
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    border-radius: var(--luna-radius-pill);
    border: 1px solid var(--luna-border);
    background: var(--luna-surface-soft, transparent);
    color: var(--luna-text-soft, var(--luna-text));
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.luna-admin-tier-form {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.luna-admin-tier-form .form-select-sm { width: auto; min-width: 110px; }

.luna-admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: 1rem 1.6rem;
    border-top: 1px solid var(--luna-border);
}
.luna-admin-pager-btn,
.luna-admin-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .65rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md, 8px);
    color: var(--luna-text-soft, var(--luna-text));
    background: transparent;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.luna-admin-pager-btn { gap: .35rem; }
.luna-admin-pager-btn:hover,
.luna-admin-pager-num:hover {
    background: var(--luna-surface-soft, var(--luna-surface));
    color: var(--luna-text);
    border-color: var(--luna-border-strong, var(--luna-border));
}
.luna-admin-pager-btn.disabled,
.luna-admin-pager-num.disabled {
    color: var(--luna-muted);
    opacity: .55;
    pointer-events: none;
}
.luna-admin-pager-num.active {
    background: var(--luna-accent-soft);
    border-color: var(--luna-accent-border);
    color: var(--luna-accent);
}
.luna-admin-pager-gap { color: var(--luna-muted); padding: 0 .15rem; }

@media (max-width: 720px) {
    .luna-admin-users-head { flex-direction: column; align-items: stretch; }
    .luna-admin-search { flex-wrap: wrap; }
    .luna-admin-search-input input { width: 100%; }
}

/* Admin-specific (legacy class kept for compatibility) */
.luna-admin-page { max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.luna-admin-head { margin-bottom: 2rem; }
.luna-admin-head h2 { font-weight: 600; letter-spacing: -0.02em; font-size: 1.75rem; margin: 0 0 .35rem; }
.luna-admin-head p { color: var(--luna-muted); margin: 0; font-size: .95rem; max-width: 640px; }
.luna-admin-head .luna-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .14em;
    font-weight: 600;
    color: var(--luna-accent);
    margin-bottom: .65rem;
}
.luna-admin-head-hero h2 { font-size: 2rem; }

.luna-config-section {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.25rem;
}
.luna-config-section-head { margin-bottom: 1.25rem; }
.luna-config-section h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; color: var(--luna-text); letter-spacing: -0.005em; }
.luna-config-section-head p { color: var(--luna-muted); font-size: .88rem; margin: 0; }
.luna-config-section-head p a { color: var(--luna-text-soft); text-decoration: underline; text-decoration-color: var(--luna-border-strong); }
.luna-config-section-head p a:hover { color: var(--luna-accent); }
.luna-config-help { color: var(--luna-muted); font-size: .88rem; margin: 0 0 1.25rem; }
.luna-config-actions { display: flex; gap: .65rem; padding-top: .5rem; }

/* ============ Mobile menu button (in topbar) ============ */
.luna-mobile-menu-btn { display: none; }
.luna-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    /* inset: 0 already pins the backdrop to all four viewport edges — no
       explicit height needed. Avoids 100vh / dvh lies on iOS. */
    background: rgba(0, 0, 0, 0.5);
    z-index: 55;
    opacity: 0;
    transition: opacity .2s ease;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
    .luna-app { grid-template-columns: 1fr; }
    .luna-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--luna-sidebar-width);
        /* top/bottom anchors give us the visible viewport height without
           any viewport-unit lies — drawer always fills the visible area. */
        /* Safe-area insets so the iOS notch/home indicator don't eat the
           sidebar top/bottom controls. max(...) keeps the existing spacing
           on Androids and notched-but-pulled-in devices. */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 60;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .luna-app.mobile-open .luna-sidebar { transform: translateX(0); }
    .luna-app .luna-mobile-backdrop { display: block; }
    .luna-app.mobile-open .luna-mobile-backdrop { opacity: 1; pointer-events: auto; }
    .luna-app:not(.mobile-open) .luna-mobile-backdrop { pointer-events: none; }
    .luna-mobile-menu-btn { display: inline-flex; }
    .luna-msg { gap: .65rem; }
    .luna-avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: .68rem; }
    .luna-topbar { padding: 0 .75rem; gap: .5rem; }
    .luna-topbar-left { gap: .5rem; }
    .luna-topbar-title { font-size: .88rem; }
    /* On mobile, Luna lives in the sidebar drawer — keep the topbar clean (title only). */
    .luna-topbar-brand,
    .luna-topbar-sep { display: none; }
    /* Composer: tighter so the textarea isn't strangled by side padding + buttons.
       Bottom padding respects the iOS home-indicator inset so the send button
       isn't sitting on top of the system gesture bar. */
    .luna-composer {
        padding: .5rem .65rem .85rem;
        padding-bottom: max(.85rem, env(safe-area-inset-bottom));
    }
    .luna-composer-inner { padding: .25rem .35rem; }
    .luna-composer-row { gap: .15rem; }
    .luna-attach-btn, .luna-send-btn { width: 32px; height: 32px; }
    .luna-composer textarea { padding: .35rem .45rem !important; font-size: 16px; /* prevent iOS zoom-on-focus */ }
}

/* iOS-only: the textarea's intrinsic baseline renders a couple of pixels
   lower than Chrome/Firefox, which makes the attach + send icons look
   off-center next to single-line input. The @supports (-webkit-touch-callout)
   query is a long-standing iOS-only feature flag, so this override scopes
   cleanly to Mobile Safari without touching Android or desktop responsive
   mode (where the original flex-end alignment looks correct). */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .luna-composer-row { align-items: center; }
        .luna-composer .luna-attach-btn,
        .luna-composer .luna-send-btn { align-self: center; margin-bottom: 0; }
    }
}

/* ============ Landing v2 — full marketing home ============
   Sits inside the nav-bearing layout (FullBleed=true), so .luna-home is a
   scrolling document, NOT a centered viewport-height splash. The original
   .luna-landing-* composer styles above are reused. */

.luna-home {
    position: relative;
    overflow-x: clip;
    padding-bottom: 4rem;
}
.luna-home-glow {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 95vw);
    height: 720px;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 50% 30%, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0) 70%),
        radial-gradient(closest-side at 30% 60%, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0) 70%);
    filter: blur(24px);
    z-index: 0;
    animation: luna-home-breathe 8s ease-in-out infinite;
}
@keyframes luna-home-breathe {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .luna-home-glow { animation: none; opacity: 0.8; }
}

/* Hero — copy on the left, the live demo panel (the product itself) on the
   right. Stacks below 1000px with the panel under the copy. */
.luna-home-hero2 {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 4rem 1.5rem 2.5rem;
}
@media (min-width: 1000px) {
    .luna-home-hero2 {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
        padding-top: 5rem;
    }
    .luna-home-hero2-copy { text-align: left; }
    .luna-home-hero2-copy .luna-home-cta-row { justify-content: flex-start; }
    .luna-home-hero2-copy .luna-home-sub { margin-left: 0; }
    .luna-home-hero2-copy .luna-home-caps { justify-content: flex-start; }
}
.luna-home-hero2-copy { text-align: center; }
.luna-home-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--luna-accent);
    background: var(--luna-accent-soft);
    border: 1px solid var(--luna-accent-border);
    border-radius: var(--luna-radius-pill);
    padding: .3rem .8rem;
    margin: 0 0 1.1rem;
}
.luna-home-h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 1rem;
    color: var(--luna-text);
}
.luna-home-sub {
    color: var(--luna-text-soft);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.55;
    margin: 0 auto 1.25rem;
    max-width: 540px;
}
/* Capability chips under the hero sub — the whole product in one glance. */
.luna-home-caps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    margin: 0 0 1.6rem;
    padding: 0;
}
.luna-home-caps li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-pill);
    background: var(--luna-surface);
    color: var(--luna-text-soft);
    font-size: .8rem;
    white-space: nowrap;
}
.luna-home-caps li > .bi { color: var(--luna-accent); font-size: .85rem; }
.luna-home-final { text-align: center; padding-bottom: 1.5rem; }

/* The demo panel is framed like the app itself — header bar, message area,
   composer — so the hero doubles as a product screenshot you can type into. */
.luna-demo-panel {
    display: flex;
    flex-direction: column;
    background: var(--luna-surface);
    border: 1px solid var(--luna-border-strong);
    border-radius: var(--luna-radius-lg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(139, 92, 246, 0.08);
    overflow: hidden;
    min-height: 420px;
    max-height: 520px;
}
.luna-demo-panel-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--luna-border);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
.luna-demo-panel-dots { display: inline-flex; gap: .32rem; }
.luna-demo-panel-dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--luna-border-strong);
}
.luna-demo-panel-title {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--luna-text);
}
.luna-demo-panel-title svg { color: var(--luna-accent); }
.luna-demo-panel-badge {
    margin-left: auto;
    font-size: .72rem;
    color: var(--luna-accent);
    background: var(--luna-accent-soft);
    border-radius: var(--luna-radius-pill);
    padding: .2rem .6rem;
    white-space: nowrap;
}
.luna-demo-composer {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .65rem .75rem .75rem;
    padding: .25rem .25rem .25rem .75rem;
    background: var(--luna-bg);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-pill);
    transition: border-color .15s ease, box-shadow .2s ease;
    flex-shrink: 0;
}
.luna-demo-composer:focus-within {
    border-color: var(--luna-accent);
    box-shadow: 0 0 0 3px var(--luna-accent-soft);
}

.luna-home-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.luna-home-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    background: var(--luna-accent);
    color: #fff;
    border-radius: var(--luna-radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background .15s ease, transform .1s ease;
}
.luna-home-cta-primary:hover { background: var(--luna-accent-hover); color: #fff; }
.luna-home-cta-primary:active { transform: translateY(1px); }
.luna-home-cta-secondary {
    display: inline-flex;
    padding: 0.65rem 1.1rem;
    color: var(--luna-text-soft);
    border-radius: var(--luna-radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.luna-home-cta-secondary:hover { color: var(--luna-text); background: var(--luna-surface); }
.luna-home-cta-lg { padding: 0.85rem 1.6rem; font-size: 1rem; }
.luna-home-trust {
    margin: 0;
    color: var(--luna-muted);
    font-size: 0.8rem;
}

/* Sections */
.luna-home-section {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem;
}
.luna-home-section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 0.5rem;
    color: var(--luna-text);
}
.luna-home-section-sub {
    text-align: center;
    color: var(--luna-muted-strong);
    margin: 0 auto 2.5rem;
    max-width: 540px;
}

/* Features grid — pinned to 1 / 2 / 4 columns so 4 cards always lay out
   cleanly. `auto-fit` could otherwise land on 3+1 or 2+2 in awkward window
   widths. */
.luna-home-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2.5rem;
}
@media (min-width: 560px) {
    .luna-home-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .luna-home-features { grid-template-columns: repeat(4, 1fr); }
}
.luna-home-feature {
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    padding: 1.5rem;
    transition: border-color .15s ease, transform .15s ease;
}
.luna-home-feature:hover {
    border-color: var(--luna-border-strong);
    transform: translateY(-2px);
}
.luna-home-feature-icon {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--luna-radius-sm);
    background: var(--luna-accent-soft);
    color: var(--luna-accent);
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}
.luna-home-feature h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    color: var(--luna-text);
    letter-spacing: -0.01em;
}
.luna-home-feature p {
    margin: 0;
    color: var(--luna-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Why-Luna mini block */
.luna-home-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 880px;
    margin: 2rem auto 0;
}
.luna-home-why-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-left: 2px solid var(--luna-accent);
    background: linear-gradient(90deg, var(--luna-accent-soft), transparent 80%);
    border-radius: 0 var(--luna-radius-md) var(--luna-radius-md) 0;
}
.luna-home-why-item strong {
    color: var(--luna-text);
    font-weight: 600;
    font-size: 0.98rem;
}
.luna-home-why-item span {
    color: var(--luna-text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Pricing */
/* Five plans never wrap: the row is a horizontal snap scroller. On desktop
   ~4½ cards show inside the 1200px container so the Lunatic card peeks in
   from the right edge as a built-in "there's more" affordance; on phones
   each card takes most of the viewport and snaps one at a time. Edge fades
   are toggled by JS (.can-left / .can-right) so they only appear when
   there is actually content hidden in that direction. */
.luna-home-section-wide { max-width: 1200px; }
.luna-home-plans-scroller { position: relative; }
.luna-home-plans-scroller::before,
.luna-home-plans-scroller::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 14px; /* keep the fade off the scrollbar */
    width: 56px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}
.luna-home-plans-scroller::before {
    left: 0;
    background: linear-gradient(90deg, var(--luna-bg), transparent);
}
.luna-home-plans-scroller::after {
    right: 0;
    background: linear-gradient(-90deg, var(--luna-bg), transparent);
}
.luna-home-plans-scroller.can-left::before { opacity: 1; }
.luna-home-plans-scroller.can-right::after { opacity: 1; }
/* On phones the next card only peeks ~10vw; a 56px fog would swallow it. */
@media (max-width: 640px) {
    .luna-home-plans-scroller::before,
    .luna-home-plans-scroller::after { width: 24px; }
}
.luna-home-plans {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    /* Top padding keeps the -10px "Most popular" badge inside the padding
       box (overflow clips at the padding edge); bottom padding gives the
       featured glow somewhere to land before the scrollbar. */
    padding: 14px 2px 22px;
    margin-top: .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--luna-border-strong) transparent;
}
.luna-home-plans::-webkit-scrollbar { height: 8px; }
.luna-home-plans::-webkit-scrollbar-thumb {
    background: var(--luna-border-strong);
    border-radius: 999px;
}
.luna-home-plans::-webkit-scrollbar-track { background: transparent; }
.luna-home-plan {
    position: relative;
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-lg);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 250px;
    scroll-snap-align: start;
}
@media (max-width: 640px) {
    .luna-home-plan { flex-basis: min(300px, 84vw); }
}
/* The Lunatic card itself gets the shared .luna-card-lunatic gradient border
   (defined with the tier flair at the end of this file); its badge answers
   the featured card's "Most popular" in gradient. */
.luna-home-plan-badge.is-lunatic {
    background: linear-gradient(105deg, #8b5cf6, #ec4899);
    font-style: italic;
}
.luna-home-plan.is-featured {
    border-color: var(--luna-accent-border);
    box-shadow: 0 0 0 1px var(--luna-accent-border), 0 18px 48px var(--luna-accent-glow);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.06), transparent 70%), var(--luna-surface);
}
.luna-home-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--luna-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: var(--luna-radius-pill);
}
.luna-home-plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--luna-text);
}
.luna-home-plan-tagline {
    margin: 0 0 0.75rem;
    color: var(--luna-text-soft);
    font-size: 0.9rem;
}
.luna-home-plan-tokens {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--luna-border);
    border-bottom: 1px solid var(--luna-border);
    margin: 0.25rem 0 0.75rem;
}
.luna-home-plan-tokens-n {
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--luna-text);
    letter-spacing: -0.02em;
}
.luna-home-plan-tokens-unit {
    color: var(--luna-muted-strong);
    font-size: 0.85rem;
}
/* Memories management page */
.luna-memory-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    position: relative;
}
.luna-memory-search i {
    position: absolute;
    left: .75rem;
    color: var(--luna-muted);
    pointer-events: none;
}
.luna-memory-search input { padding-left: 2.1rem; max-width: 26rem; }

.luna-memory-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem .25rem;
    border-bottom: 1px solid var(--luna-border);
}
.luna-memory-row:last-child { border-bottom: none; }
.luna-memory-row.is-disabled .luna-memory-content { opacity: .55; }
.luna-memory-main { flex: 1; min-width: 0; }
.luna-memory-content { color: var(--luna-text); line-height: 1.5; overflow-wrap: break-word; }
.luna-memory-meta { color: var(--luna-muted); font-size: .8rem; margin-top: .15rem; }
.luna-memory-actions { display: flex; gap: .35rem; flex-shrink: 0; }

/* On narrow screens, stack the action buttons below the content so the text
   isn't squeezed into a sliver of a column that wraps one word per line. */
@media (max-width: 575.98px) {
    .luna-memory-row { flex-direction: column; align-items: stretch; gap: .5rem; }
    .luna-memory-actions { justify-content: flex-end; }
}

/* Notes: rendered-markdown preview pane (Edit page Write/Preview toggle) */
.luna-note-preview-pane {
    min-height: 12rem;
    padding: .85rem 1rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-sm);
    background: var(--luna-surface);
    overflow-wrap: break-word;
}
.luna-note-preview-pane > :last-child { margin-bottom: 0; }

/* Demo panel message area (anonymous, capped) */
.luna-demo-messages {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .9rem .85rem .4rem;
    text-align: left;
}
.luna-demo-msg {
    border-radius: 12px;
    padding: .6rem .85rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--luna-text);
    overflow-wrap: break-word;
}
.luna-demo-msg.user {
    align-self: flex-end;
    background: var(--luna-accent-soft);
    max-width: 85%;
}
.luna-demo-msg.assistant {
    align-self: flex-start;
    background: var(--luna-bg);
    border: 1px solid var(--luna-border);
    max-width: 95%;
}
.luna-demo-msg p:last-child { margin-bottom: 0; }
.luna-demo-thinking { color: var(--luna-muted); }
.luna-demo-cta { padding: .35rem 1rem .5rem; text-align: center; flex-shrink: 0; }
.luna-demo-cta p { color: var(--luna-text-soft); margin-bottom: .6rem; font-size: .9rem; }

.luna-home-plan-equiv {
    margin: -0.35rem 0 0.6rem;
    color: var(--luna-muted);
    font-size: 0.8rem;
}
.luna-home-plan-best {
    margin: 0 0 1rem;
    color: var(--luna-muted-strong);
    font-size: 0.85rem;
    line-height: 1.5;
    flex: 1;
}
.luna-home-plan-cta {
    display: inline-flex;
    justify-content: center;
    padding: 0.6rem 1rem;
    border-radius: var(--luna-radius-md);
    border: 1px solid var(--luna-border-strong);
    color: var(--luna-text);
    background: transparent;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.luna-home-plan-cta:hover {
    border-color: var(--luna-accent);
    color: var(--luna-text);
    background: var(--luna-accent-soft);
}
.luna-home-plan-cta.is-primary {
    background: var(--luna-accent);
    border-color: var(--luna-accent);
    color: #fff;
}
.luna-home-plan-cta.is-primary:hover {
    background: var(--luna-accent-hover);
    border-color: var(--luna-accent-hover);
    color: #fff;
}
.luna-home-plan-cta.is-disabled {
    color: var(--luna-muted-strong);
    border-color: var(--luna-border);
    background: transparent;
    cursor: not-allowed;
    pointer-events: none;
    font-style: italic;
}
.luna-home-plan-fineprint {
    margin: 1.75rem auto 0;
    color: var(--luna-muted);
    font-size: 0.8rem;
    text-align: center;
    max-width: 680px;
    line-height: 1.55;
}

/* FAQ */
.luna-home-faq {
    max-width: 720px;
    margin: 1.5rem auto 0;
}
.luna-home-faq-item {
    border-bottom: 1px solid var(--luna-border);
    padding: 0.25rem 0;
}
.luna-home-faq-item:first-of-type { border-top: 1px solid var(--luna-border); }
.luna-home-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 0.25rem;
    color: var(--luna-text);
    font-weight: 500;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color .15s ease;
}
.luna-home-faq-item > summary::-webkit-details-marker { display: none; }
.luna-home-faq-item > summary::after {
    content: "";
    width: 10px; height: 10px;
    border-right: 1.5px solid var(--luna-muted-strong);
    border-bottom: 1.5px solid var(--luna-muted-strong);
    transform: rotate(45deg);
    transition: transform .2s ease, border-color .15s ease;
    flex-shrink: 0;
    margin-right: 4px;
}
.luna-home-faq-item[open] > summary::after {
    transform: rotate(-135deg);
    border-color: var(--luna-accent);
}
.luna-home-faq-item > summary:hover { color: var(--luna-accent); }
.luna-home-faq-item > p {
    margin: 0 0 1.1rem;
    padding: 0 0.25rem;
    color: var(--luna-text-soft);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Footer */
.luna-home-footer {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 2rem auto 0;
    padding: 1.75rem 1.5rem;
    border-top: 1px solid var(--luna-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.luna-home-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--luna-muted-strong);
    font-size: 0.88rem;
}
.luna-home-footer-brand svg { color: var(--luna-accent); }
.luna-home-footer-nav {
    display: inline-flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.luna-home-footer-nav a {
    color: var(--luna-muted-strong);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color .15s ease;
}
.luna-home-footer-nav a:hover { color: var(--luna-text); }

/* Plan price block (only renders when admin has set a USD price). */
.luna-home-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin: 0.1rem 0 0.6rem;
}
.luna-home-plan-price-n {
    font-size: 2rem;
    font-weight: 600;
    color: var(--luna-text);
    letter-spacing: -0.02em;
}
.luna-home-plan-price-unit {
    color: var(--luna-muted-strong);
    font-size: 0.85rem;
}

/* Mobile tightening */
@media (max-width: 640px) {
    .luna-home-hero { padding: 2.5rem 1.25rem 2rem; }
    .luna-home-section { padding: 2.5rem 1.25rem; }
    .luna-home-plan { padding: 1.5rem 1.25rem; }
    .luna-home-plan.is-featured { box-shadow: 0 0 0 1px var(--luna-accent-border); }
}

/* ============ Legal pages (Privacy, Terms) ============
   Long-form reading column. Constrained line length, generous leading,
   muted heading hierarchy so the page reads like a document and not a
   marketing splash. */

.luna-legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: var(--luna-text-soft);
    font-size: 0.98rem;
    line-height: 1.7;
}
.luna-legal-head {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--luna-border);
}
.luna-legal-head h1 {
    font-size: clamp(2rem, 4vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--luna-text);
    margin: 0 0 0.75rem;
}
.luna-legal-meta {
    margin: 0;
    color: var(--luna-muted-strong);
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.luna-legal-meta strong { color: var(--luna-text-soft); font-weight: 500; }
.luna-legal-lead {
    font-size: 1.05rem;
    color: var(--luna-text);
    line-height: 1.65;
    margin: 0 0 1.25rem;
}
.luna-legal section { margin: 2.25rem 0; }
.luna-legal h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--luna-text);
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    padding-top: 0.5rem;
}
.luna-legal h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--luna-text);
    margin: 1.5rem 0 0.6rem;
}
.luna-legal p { margin: 0 0 1rem; }
.luna-legal ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}
.luna-legal li { margin-bottom: 0.45rem; }
.luna-legal strong { color: var(--luna-text); font-weight: 600; }
.luna-legal a {
    color: var(--luna-accent);
    text-decoration: underline;
    text-decoration-color: var(--luna-accent-border);
    text-underline-offset: 2px;
    transition: text-decoration-color .15s ease;
}
.luna-legal a:hover { text-decoration-color: var(--luna-accent); }
.luna-legal-emphasis {
    background: var(--luna-surface);
    border-left: 2px solid var(--luna-border-strong);
    border-radius: 0 var(--luna-radius-md) var(--luna-radius-md) 0;
    padding: 0.85rem 1.1rem;
    color: var(--luna-text);
    font-size: 0.88rem;
    line-height: 1.6;
    letter-spacing: 0.005em;
}
.luna-legal-table-wrap {
    overflow-x: auto;
    margin: 0 0 1.25rem;
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
}
.luna-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: var(--luna-text-soft);
}
.luna-legal-table th,
.luna-legal-table td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--luna-border);
    vertical-align: top;
}
.luna-legal-table th {
    color: var(--luna-text);
    font-weight: 600;
    background: var(--luna-surface);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.luna-legal-table tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
    .luna-legal { padding: 2rem 1.25rem 3rem; }
    .luna-legal-head { margin-bottom: 1.75rem; }
    .luna-legal section { margin: 1.75rem 0; }
}

/* Images gallery — responsive grid of generated-image cards (Pages/Images) */
.luna-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}
.luna-image-card {
    margin: 0;
    background: var(--luna-surface);
    border: 1px solid var(--luna-border);
    border-radius: var(--luna-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.luna-image-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--luna-elevated);
    overflow: hidden;
}
/* Absolutely fill the aspect-ratio box so the image's intrinsic height can
   never override the 1:1 square. Chrome/Firefox otherwise let a portrait
   image's height win (height:100% is circular against the box), stretching
   the thumb to full height and dragging sibling cards up with it; Safari
   happened to resolve the square. */
.luna-image-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Video gallery cards reuse the image-card grid; the player fills the square
   thumb box the same way an image thumbnail does. */
.luna-video-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
    overflow: hidden;
}
.luna-video-thumb video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}
/* Music gallery cards: a gradient "album art" square with a note icon, and the
   native audio player below it (audio has no visual frame of its own). */
.luna-music-art {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--luna-accent), var(--luna-accent-2));
    color: #fff;
}
.luna-music-art i { font-size: 2.8rem; opacity: .92; }
.luna-music-player {
    width: 100%;
    display: block;
    padding: .55rem .55rem 0;
    box-sizing: border-box;
}
.luna-image-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    font-size: .8rem;
    color: var(--luna-muted);
    border-top: 1px solid var(--luna-border);
}
.luna-image-date { flex: 0 0 auto; }
.luna-image-chat {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--luna-muted);
    text-decoration: none;
}
.luna-image-chat:hover { color: var(--luna-text); text-decoration: underline; }
.luna-image-download {
    flex: 0 0 auto;
    color: var(--luna-muted);
    text-decoration: none;
}
.luna-image-download:hover { color: var(--luna-text); }

/* ============ Lunatic tier flair ============
   The top tier gets a shimmering violet→pink wordmark wherever its name
   appears (nav pill, chat sidebar, billing, pricing). The gradient starts
   and ends on the same color so the 200%-wide tile loops seamlessly.
   Engines without background-clip:text fall back to the flat pink.
   Kept at the END of the file on purpose: these single-class utilities are
   layered onto components (.luna-stat-label, .luna-home-plan-name, …) that
   set color/background themselves, and at equal specificity the later rule
   must be this one. */
.luna-tier-lunatic {
    font-style: italic;
    font-weight: 700;
    letter-spacing: .01em;
    color: #d956b9; /* fallback when background-clip: text is unsupported */
    /* Italic glyphs overhang their advance width; without this the final
       letter's corner is shaved off by the transparent-text clip. */
    padding-right: .09em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .luna-tier-lunatic {
        background: linear-gradient(105deg, #a78bfa 0%, #f472b6 35%, #e879f9 60%, #a78bfa 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: luna-lunatic-shimmer 4.5s linear infinite;
    }
}
@keyframes luna-lunatic-shimmer {
    to { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
    .luna-tier-lunatic { animation: none; }
}
/* Card-level flair: 1px gradient border via the padding-box/border-box
   two-layer trick, plus a soft pink glow. Works on .luna-stat billing cards
   and .luna-home-plan pricing cards alike — both have a 1px border to eat. */
.luna-card-lunatic {
    border-color: transparent !important;
    background:
        linear-gradient(var(--luna-surface), var(--luna-surface)) padding-box,
        linear-gradient(140deg, #8b5cf6, #ec4899 55%, #a78bfa) border-box;
    box-shadow: 0 10px 36px rgba(236, 72, 153, 0.12);
}
/* Home pricing card variant adds a faint pink wash on top of the surface. */
.luna-home-plan.luna-card-lunatic {
    background:
        linear-gradient(180deg, rgba(236, 72, 153, 0.07), transparent 60%) padding-box,
        linear-gradient(var(--luna-surface), var(--luna-surface)) padding-box,
        linear-gradient(140deg, #8b5cf6, #ec4899 55%, #a78bfa) border-box;
}