/* Legacy dropdown styles (keeping for compatibility) */
.avatar-menu .dropdown-item {
    padding: 7px 15px;
}

.avatar-menu li {
    padding: 5px 10px;
}

.animated.fadeInDown .swal2-image {
    margin: 0;
}

.animated.fadeInDown .swal2-close {
    border: 0;
}

.center-image {
    display: block; 
    margin: auto !important;
}

/* Discovery nav chips bar — mobile: second fixed row; desktop: right side of first row */
#avatarMenuContainer.nav-action-bar {
    position: fixed;
    /* Sit flush below the 60px logo row on mobile (+ notch inset) */
    top: calc(60px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 6px 12px 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--surface-overlay);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1020;
}

/* Desktop: merge chips into the same row as the logo */
@media (min-width: 992px) {
    #avatarMenuContainer.nav-action-bar {
        top: 0;
        left: auto;
        right: 0;
        width: auto;
        height: 60px;
        background: transparent;
        border-bottom: none;
        overflow-x: visible;
        padding: 0 16px;
        z-index: 1051;
    }
}

/* ============================================================================
   OFFCANVAS SIDEBAR — Professional Redesign
   ============================================================================ */

/* Stagger animation for menu items */
@keyframes menuItemSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes menuHeaderFadeIn {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sidebarScanline {
    0% { transform: translateX(-120%); opacity: 0; }
    20%, 70% { opacity: 0.55; }
    100% { transform: translateX(120%); opacity: 0; }
}

#userMenuOffcanvas {
    width: 318px;
    max-width: 88vw;
    max-height: 100vh;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.6), transparent 36%),
        radial-gradient(circle at 100% 16%, rgba(255, 255, 255, 0.45), transparent 34%),
        linear-gradient(145deg, rgba(252, 252, 252, 0.97), rgba(255, 255, 255, 0.985) 52%, rgba(255, 255, 255, 0.99));
    box-shadow:
        18px 0 70px rgba(0, 0, 0, 0.12),
        0 0 30px rgba(0, 0, 0, 0.04),
        inset -1px 0 0 rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 28px 28px 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    will-change: transform;
    isolation: isolate;
}

/* No `backdrop-filter` in this base rule — against this 97-99% opaque gradient
   it blurred nothing. The AURORA GLASS block near the end of this file makes the
   panel genuinely translucent and re-applies a blur there with `!important`;
   that block is the one that governs, and it is where the mobile opt-out lives. */

#userMenuOffcanvas::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, rgba(88, 88, 88, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, transparent 0, rgba(133, 133, 133, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    /* Unprefixed mask-image only landed in Chrome 120; Android devices on older
       Chrome/WebView would otherwise show this grid at full strength with no
       fade-out. Keep both. */
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 76%);
    mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 76%);
    opacity: 0.6;
}

#userMenuOffcanvas > * {
    position: relative;
    z-index: 1;
}

/* Smooth slide animations */
#userMenuOffcanvas:not(.show) {
    visibility: hidden !important;
    transform: translateX(-100%) !important;
}

#userMenuOffcanvas.show {
    visibility: visible !important;
    transform: translateX(0px) !important;
    position: fixed;
    /* The `subtleGlow` loop used to run here. It animated `box-shadow` — a paint
       property — forever, on a panel that covers most of the screen on mobile,
       forcing a full repaint of it every frame for as long as the menu was open.
       That was the other half of the Android blank-text bug. The static shadow
       already set on #userMenuOffcanvas is the loop's resting state; the pulse
       between it and the midpoint was imperceptible. Keep this static. */
}

#userMenuOffcanvas.showing {
    visibility: visible !important;
}

#userMenuOffcanvas.hiding {
    transform: translateX(-100%) !important;
}

/* Stagger animation on show */
#userMenuOffcanvas.show .offcanvas-header {
    animation: menuHeaderFadeIn 0.3s ease-out 0.1s both;
}

#userMenuOffcanvas.show .list-group-item {
    animation: menuItemSlideIn 0.3s ease-out both;
}

#userMenuOffcanvas.show .list-group-item:nth-child(1) { animation-delay: 0.06s; }
#userMenuOffcanvas.show .list-group-item:nth-child(2) { animation-delay: 0.09s; }
#userMenuOffcanvas.show .list-group-item:nth-child(3) { animation-delay: 0.12s; }
#userMenuOffcanvas.show .list-group-item:nth-child(4) { animation-delay: 0.15s; }
#userMenuOffcanvas.show .list-group-item:nth-child(5) { animation-delay: 0.18s; }
#userMenuOffcanvas.show .list-group-item:nth-child(6) { animation-delay: 0.21s; }
#userMenuOffcanvas.show .list-group-item:nth-child(7) { animation-delay: 0.24s; }
#userMenuOffcanvas.show .list-group-item:nth-child(8) { animation-delay: 0.27s; }
#userMenuOffcanvas.show .list-group-item:nth-child(9) { animation-delay: 0.30s; }
#userMenuOffcanvas.show .list-group-item:nth-child(10) { animation-delay: 0.33s; }
#userMenuOffcanvas.show .list-group-item:nth-child(11) { animation-delay: 0.36s; }
#userMenuOffcanvas.show .list-group-item:nth-child(12) { animation-delay: 0.39s; }
#userMenuOffcanvas.show .list-group-item:nth-child(13) { animation-delay: 0.42s; }
#userMenuOffcanvas.show .list-group-item:nth-child(14) { animation-delay: 0.45s; }
#userMenuOffcanvas.show .list-group-item:nth-child(15) { animation-delay: 0.48s; }
#userMenuOffcanvas.show .list-group-item:nth-child(n+16) { animation-delay: 0.50s; }

/* Body */
#userMenuOffcanvas .offcanvas-body {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 12px 16px;
    overscroll-behavior: contain;
}

#userMenuOffcanvas .offcanvas-body::-webkit-scrollbar {
    display: none;
}

/* List group */
#userMenuOffcanvas .list-group {
    max-height: 100%;
    background: transparent;
    gap: 2px;
}

/* Menu items — spacious, futuristic, professional */
#userMenuOffcanvas .list-group-item {
    padding: 10px 12px !important;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        color 0.22s ease;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    margin-bottom: 4px !important;
    white-space: nowrap;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.045), rgba(0, 0, 0, 0.018)),
        rgba(234, 234, 234, 0.22) !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: var(--text-primary, rgba(0, 0, 0, 0.9));
    cursor: pointer;
    font-size: 0.92rem !important;
    font-weight: 650;
    letter-spacing: 0.015em;
    position: relative;
    overflow: hidden;
    min-height: 44px !important;
    line-height: 1.2 !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
}

#userMenuOffcanvas .menu-item {
    min-height: 44px !important;
    margin: 0 !important;
    padding-block: 10px !important;
}

#userMenuOffcanvas .sidebar-section > .menu-item + .menu-item {
    margin-top: 5px;
}

/* Hover highlight bar + background */
#userMenuOffcanvas .list-group-item::before {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px;
    height: 58%;
    background: linear-gradient(180deg, #858585, #757575);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#userMenuOffcanvas .list-group-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(133, 133, 133, 0.13) 44%, rgba(88, 88, 88, 0.12) 52%, transparent 64%);
    opacity: 0;
    transform: translateX(-120%);
    pointer-events: none;
}

#userMenuOffcanvas .list-group-item:hover {
    background:
        linear-gradient(135deg, rgba(119, 119, 119, 0.18), rgba(133, 133, 133, 0.08)),
        rgba(0, 0, 0, 0.055) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
    transform: translateX(4px) !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16),
        0 0 18px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

#userMenuOffcanvas .list-group-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

#userMenuOffcanvas .list-group-item:hover::after {
    animation: sidebarScanline 0.85s ease-out;
}

#userMenuOffcanvas .list-group-item:active {
    background: var(--scrim-soft);
    transform: translateX(2px) scale(0.99);
    transition-duration: 0.1s;
}

/* Icon styling */
#userMenuOffcanvas .list-group-item i {
    width: 25px;
    text-align: center;
    flex-shrink: 0;
    margin-right: 10px;
    font-size: 1.08rem;
    opacity: 0.78;
    color: var(--ink-soft);
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
    transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}

#userMenuOffcanvas .list-group-item i.me-3 {
    margin-right: 10px !important;
}

#userMenuOffcanvas .list-group-item:hover i {
    opacity: 1;
    color: var(--ink);
    transform: translateX(1px) scale(1.08);
    text-shadow: 0 0 16px rgba(0, 0, 0, 0.16);
}

#userMenuOffcanvas .list-group-item span {
    flex: 1;
    text-align: left;
    font-weight: 450;
}

/* Header — minimal, clean */
#userMenuOffcanvas .offcanvas-header {
    padding: 16px 18px 14px;
    flex-shrink: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.025) 100%),
        linear-gradient(90deg, rgba(119, 119, 119, 0.12), transparent 70%);
    border-bottom: 1px solid rgba(88, 88, 88, 0.16);
    display: block;
    border-radius: 0 28px 0 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.sidebar-search-wrap {
    position: relative;
    margin-top: 14px;
}

.sidebar-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: 0.88rem;
    pointer-events: none;
}

.sidebar-menu-search {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid rgba(88, 88, 88, 0.22);
    border-radius: 18px;
    background: var(--glass-strong);
    color: var(--ink);
    font-size: 0.94rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 0 20px rgba(0, 0, 0, 0.06);
}

.sidebar-menu-search::placeholder {
    color: var(--ink-muted);
}

.sidebar-menu-search:focus {
    border-color: var(--line-strong);
    background: var(--glass-strong);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Back arrow button in sidebar header */
.sidebar-back-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    color: var(--ink-soft);
    transition: all 0.2s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.sidebar-back-btn:hover {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: translateX(-2px);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.06);
}

.sidebar-back-btn:active {
    transform: translateX(-2px) scale(0.95);
}

.sidebar-back-btn i {
    font-size: 1.1rem;
}

/* Login badge button in sidebar header (guest/temp users) */
.sidebar-login-badge {
    display: inline-block;
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--scrim-soft);
    border: 1px solid rgba(88, 88, 88, 0.34);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    letter-spacing: 0.02em;
}

/* Hover: brighten the glass only — no transform, so the nav badge's
   translateY(-50%) centering isn't clobbered (that caused the "move down"). */
.sidebar-login-badge:hover {
    background: var(--scrim-soft);
    border-color: var(--line-strong);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.06);
}

.sidebar-login-badge:active {
    background: var(--scrim);
}

/* Login badge in the main navbar header — right-aligned in nav flow */
.nav-login-badge {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 1059;
}

/* ============================================================
   NAV ACTION BAR — Modern chip/pill redesign
   ============================================================ */

/* Outer nav wrapper: fixed at top, full-width.
   padding-top reserves the iOS notch / status-bar area in standalone PWA mode
   (env() resolves to 0 on every device that doesn't have an inset). */
.main-nav-outer {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding-top: env(safe-area-inset-top);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    background: var(--veil-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Spacer below fixed nav: pushes page content below the navbar(s).
   Matches the logo row height + the safe-area inset so the page header
   never ends up hidden behind the fixed nav on notched / standalone mobile. */
.main-nav-spacer {
    /* Always reserve space for the fixed logo row (+ notch) */
    height: calc(60px + env(safe-area-inset-top));
    flex-shrink: 0;
}


.main-nav-outer > #mainNav {
    flex: 1;
    min-width: 0;
    min-height: 60px;
}

/* (scrollbar hidden via rule above) */

#avatarMenuContainer.nav-action-bar::-webkit-scrollbar {
    display: none;
}

/* ── Base chip ───────────────────────────────────────────────────────────────
   ONE chip, one look. Every action in the nav bar — chat, alerts, coins, gems,
   admin — is the same frosted white pill: same height, same radius, same
   border, same ink. Hierarchy comes from weight and from the single filled
   variant (.nav-chip--solid), never from a different fill or a coloured icon.
   Icons inherit currentColor so nothing in this bar is anything but black,
   white and grey. The blur is what makes it read as glass over whatever the
   page scrolls underneath. */
.nav-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    text-decoration: none !important;
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.15s ease, color 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Translucent overlay surface, so the blur has something to do. The plain
       declaration is the fallback for engines without color-mix(); both come
       from --surface-overlay, so the chip follows the theme rather than
       hard-coding white. */
    background: var(--surface-overlay);
    background: color-mix(in srgb, var(--surface-overlay) 74%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--veil);
}

.nav-chip:hover {
    background: var(--surface-overlay);
    background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--veil);
}

.nav-chip:active {
    transform: translateY(0);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-sm);
}

.nav-chip:focus-visible {
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Icons are ink, never an accent. */
.nav-chip i,
.nav-chip .nav-chip-icon {
    font-size: 0.85rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.85;
}

.nav-chip:hover i,
.nav-chip:hover .nav-chip-icon {
    opacity: 1;
}

/* The trailing word ("pts", "Alerts") — quieter than the value it annotates. */
.nav-chip-label {
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Filled variant: the one chip allowed to shout. Black fill, white label. */
.nav-chip--solid {
    background: var(--brand-fill);
    border-color: transparent;
    color: var(--brand-ink);
    box-shadow: var(--shadow-md);
}

.nav-chip--solid:hover {
    background: var(--brand-fill-hover);
    border-color: transparent;
    color: var(--brand-ink);
    box-shadow: var(--shadow-lg);
}

.nav-chip--solid .nav-chip-label,
.nav-chip--solid .nav-chip-points-val {
    color: inherit;
    opacity: 0.72;
}

/* Unread mail: the bell goes full ink and breathes, and a pip sits on the
   corner. Monochrome on purpose — presence is signalled by contrast and
   motion, not by a red that would be the only colour in the bar. */
.nav-chip--has-notif {
    color: var(--ink);
    border-color: var(--line-strong);
}

.nav-chip--has-notif i.bi-bell {
    color: var(--ink) !important;
    opacity: 1;
    animation: navBellGlow 2.2s ease-in-out infinite;
    transform-origin: 50% 10%;
}

.nav-chip--has-notif::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--surface-overlay);
}

@keyframes navBellGlow {
    0%, 100% { opacity: 0.7;  transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* One-shot attention "ping" fired the moment a live notification arrives —
   a quick swell + shake so it's felt in the current view. */
.nav-chip--notif-ping i.bi-bell {
    animation: navBellPing 1.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
}

@keyframes navBellPing {
    0%   { transform: scale(1) rotate(0deg); }
    15%  { transform: scale(1.35) rotate(-14deg); opacity: 1; }
    30%  { transform: scale(1.25) rotate(12deg); }
    45%  { transform: scale(1.2) rotate(-8deg); }
    60%  { transform: scale(1.12) rotate(5deg); }
    75%  { transform: scale(1.06) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-chip--has-notif i.bi-bell,
    .nav-chip--notif-ping i.bi-bell {
        animation: none;
    }
}

/* Every chip below inherits the base pill. A modifier may change *weight* or
   *state*, never the fill or the hue — that is what keeps the bar one family
   instead of five competing badges. */

/* Points / coins chip — the number is the loudest thing in the bar, and
   tabular figures stop the pill resizing as the balance ticks. */
.nav-chip-points-val {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Upgrade chip — the one call to action, so it takes the filled treatment. */
.nav-chip--upgrade {
    background: var(--brand-fill);
    border-color: transparent;
    color: var(--brand-ink);
    box-shadow: var(--shadow-md);
}

.nav-chip--upgrade:hover {
    background: var(--brand-fill-hover);
    border-color: transparent;
    color: var(--brand-ink);
    box-shadow: var(--shadow-lg);
}

.nav-chip--upgrade i,
.nav-chip--upgrade .nav-chip-label {
    color: inherit;
    opacity: 0.85;
}

/* Active premium badge — status, not an action: quiet ink on glass, with a
   firmer border so it still reads as "on". */
.nav-chip--premium-active {
    color: var(--ink);
    border-color: var(--line-strong);
}

/* Quests / Badges chip */
.nav-chip--quests i {
    font-size: 0.82rem;
}

/* Gems chip */
.nav-chip--gems {
    color: var(--ink-soft);
}

/* The gem glyph is a Bootstrap icon, not an emoji — an emoji drags its own
   colour into a bar that has none. This class stays for any older markup
   still shipping the 💎 character, and greys it out. */
.nav-chip-gem-icon {
    font-size: 0.85rem;
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.85;
}

/* Admin chip — informational, so it reads as a label: no hover lift, a heavier
   border rather than a colour to set it apart. */
.nav-chip--admin {
    color: var(--ink);
    border-color: var(--line-strong);
    cursor: default;
}

.nav-chip--admin:hover {
    transform: none;
    background: var(--surface-overlay);
    background: color-mix(in srgb, var(--surface-overlay) 74%, transparent);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--veil);
}

/* Icon-only chip (notification) keeps square-ish shape */
.nav-chip--icon {
    padding: 0 0.6rem;
    gap: 0.3rem;
}

/* Responsive: the labels STAY on mobile. An icon-only bar is a row of riddles —
   a bell is not obviously "Alerts", a lightning bolt is not obviously "coins" —
   and the bar is horizontally scrollable anyway, so the cost of keeping the
   words is a scroll, not a broken header. Below 480px the chips only get
   tighter: less padding, a smaller label, a narrower gap. */
@media (max-width: 480px) {
    .nav-chip {
        gap: 0.28rem;
        padding: 0 0.6rem;
        font-size: 0.75rem;
    }

    .nav-chip--icon {
        padding: 0 0.55rem;
    }

    .nav-chip-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 360px) {
    .nav-chip {
        gap: 0.25rem;
        padding: 0 0.5rem;
    }

    .nav-chip--icon {
        padding: 0 0.45rem;
    }

    #avatarMenuContainer.nav-action-bar {
        gap: 0.3rem;
        padding: 4px 10px 6px 10px;
    }
}

/* Legacy selectors kept for compatibility */
.avatar-nav-actions { gap: 0.65rem !important; align-items: center !important; }
.avatar-nav-button { display: inline-flex !important; align-items: center; justify-content: center; }
.avatar-nav-gem { font-size: 1.15rem; }

#userMenuOffcanvas .user-info h6 {
    font-weight: 750;
    color: var(--ink) !important;
    font-size: 1rem;
    letter-spacing: 0.015em;
    min-height: 1.2em;
}

#userMenuOffcanvas .offcanvas-header h6 {
    font-weight: 600;
    color: var(--text-primary, #000000);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* Avatar container for proper sizing and centering */
.avatar-container {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
    border: 2px solid rgba(40, 40, 40, 0.42);
    box-shadow:
        0 0 0 5px rgba(0, 0, 0, 0.06),
        0 0 24px rgba(0, 0, 0, 0.1),
        0 10px 26px rgba(0, 0, 0, 0.16);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.avatar-container:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

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

/* Main avatar button styling - positioned within header */
#avatarMenuBtn {
    border-radius: 50%;
    padding: 2px;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

#avatarMenuBtn img {
    width: 35px;
    height: 35px;
    object-fit: cover;
}

#avatarMenuBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#avatarMenuBtn:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.16);
    outline: none;
}

/* Upgrade banner positioning */
.upgrade-banner {
    position: fixed !important;
    top: 105px !important;
    right: 5px !important;
    z-index: 1040 !important; /* Below offcanvas */
}

/* Premium indicator positioning */
.premiumIndicator {
    z-index: 10;
}

/* Backdrop styling */
.offcanvas-backdrop {
    background-color: var(--veil-strong);
    z-index: 1050;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Divider styling */
#userMenuOffcanvas hr {
    margin: 8px 12px;
    border-color: var(--line);
    opacity: 1;
}

/* Section labels */
#userMenuOffcanvas .px-3.py-2 {
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 4px 12px 2px !important;
}

#userMenuOffcanvas .px-3.py-2 small {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-disabled) !important;
    text-transform: uppercase;
}

/* Collapsible section toggle button (legacy — kept for compatibility, no longer rendered) */
#userMenuOffcanvas .sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 4px 12px 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

#userMenuOffcanvas .sidebar-section-toggle:hover {
    background: var(--glass);
}

#userMenuOffcanvas .sidebar-section-toggle small {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-disabled) !important;
    text-transform: uppercase;
}

/* Chevron rotates when section is collapsed */
#userMenuOffcanvas .sidebar-section-toggle .sidebar-chevron {
    font-size: 0.65rem;
    color: var(--ink-disabled);
    transition: transform 0.25s ease;
    width: auto;
    margin-right: 0;
    opacity: 1;
}

#userMenuOffcanvas .sidebar-section-toggle[aria-expanded="false"] .sidebar-chevron {
    transform: rotate(-90deg);
}

/* Modern section label (replaces collapsible toggle) */
#userMenuOffcanvas .sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 11px 6px;
    margin-top: 2px;
    user-select: none;
    pointer-events: none; /* labels are non-interactive */
}

#userMenuOffcanvas .sidebar-section-label .sidebar-section-emoji {
    font-size: 0.82rem;
    line-height: 1;
    filter: saturate(1.15);
    transform: translateY(-0.5px);
}

#userMenuOffcanvas .sidebar-section-label small {
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--ink-muted) !important;
    text-transform: uppercase;
}

/* ── Locked rows (agent licensing, docs/AGENT_LICENSING.md) ────────────────
   A page the account has no licence for is DIMMED, not hidden: hiding it would
   mean a user could never discover what the other brain buys, and the sidebar
   is the best place in the app to sell it. The links still work — they point at
   the licence page, which explains the price.

   Locking is per ROW, not per section. Monetization mixes influencer rows with
   one business row (Payments), and each row asks the capability registry what
   it needs — so the dimming has to follow the row too. `sidebar-item-locked` is
   written by the `navLocked` helper in plugins/handlebars-helpers.js. */
#userMenuOffcanvas .menu-item.sidebar-item-locked,
#userMenuOffcanvas .sidebar-section-locked .menu-item {
    opacity: 0.55;
}

#userMenuOffcanvas .menu-item.sidebar-item-locked:hover,
#userMenuOffcanvas .sidebar-section-locked .menu-item:hover {
    opacity: 0.85;
}

/* The Inbox quick-action chip is gated by the same capability as its section
   row, so it dims the same way — but it is not a `.menu-item`, and the rules
   above are written for rows. Unscoped because the quick-action strip is also
   rendered outside #userMenuOffcanvas. */
.sidebar-quick-action.sidebar-item-locked {
    opacity: 0.55;
}

.sidebar-quick-action.sidebar-item-locked:hover {
    opacity: 0.85;
}

/* …except the one that SELLS the thing. "Launch a Business Agent" sits inside
   the Agent section but is the acquisition path, so it stays at full strength
   even when everything around it is dimmed. Dimming the only route to buying a
   business agent because you don't own one yet is the same mistake as bouncing
   an unlicensed user off the licence page. */
#userMenuOffcanvas .sidebar-section-locked .menu-item.sidebar-item-unlocked,
#userMenuOffcanvas .sidebar-section-locked .menu-item.sidebar-item-unlocked:hover {
    opacity: 1;
}

/* Every padlock hangs on the FAR RIGHT of its row, never trailing the label.
   The rows are flex, so one `margin-left: auto` lines the whole column up no
   matter how long the labels are — which is the point: a ragged column of locks
   reads as clutter, a straight one reads as a state. */
#userMenuOffcanvas .sidebar-lock {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.66rem;
    opacity: 0.65;
    flex-shrink: 0;
}

/* The price sits on the section HEADING rather than on every row, so the offer
   reads once instead of six times. */
#userMenuOffcanvas .sidebar-lock-badge {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: var(--scrim-soft);
    border: 1px solid rgba(111, 111, 111, 0.35);
    /* The badge is a link to /dashboard/licenses now — a plan name, not a price. */
    text-decoration: none;
}

/* The heading is `pointer-events: none`, so the badge needs its own. */
#userMenuOffcanvas .sidebar-subsection-label .sidebar-lock-badge,
#userMenuOffcanvas .sidebar-section-label .sidebar-lock-badge {
    pointer-events: auto;
}

/* Subsection label — lighter, indented heading nested under a group label
   (e.g. Create → Characters / Studio / Publish, Admin → Users & Analytics …). */
#userMenuOffcanvas .sidebar-subsection-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px 4px 20px;
    margin-top: 0;
    user-select: none;
    pointer-events: none;
    position: relative;
}

#userMenuOffcanvas .sidebar-subsection-label::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--scrim);
}

#userMenuOffcanvas .sidebar-subsection-label small {
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    color: var(--ink-muted) !important;
    text-transform: uppercase;
}

/* Section content container (replaces .collapse) */
#userMenuOffcanvas .sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 1px;
    margin-bottom: 2px;
}

.sidebar-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 1px 10px;
}

.sidebar-quick-action {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(88, 88, 88, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0.035)),
        rgba(119, 119, 119, 0.08);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.14);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Full-width so the five chips read as one CTA row + a clean 2×2 (Create /
   Explore / Chat / Inbox) instead of leaving the fifth one orphaned in a
   half-empty row. */
.sidebar-quick-action-primary {
    grid-column: 1 / -1;
    background:
        linear-gradient(135deg, rgba(119, 119, 119, 0.44), rgba(133, 133, 133, 0.13)),
        rgba(119, 119, 119, 0.18);
    border-color: var(--line-strong);
}

.sidebar-quick-action:hover,
.sidebar-quick-action:focus-visible {
    color: var(--ink);
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.28), rgba(133, 133, 133, 0.14));
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), 0 0 20px rgba(0, 0, 0, 0.06);
}

.sidebar-quick-action i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    margin-bottom: 0;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.sidebar-quick-action span {
    display: block;
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-no-results {
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 6px;
    padding: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.14);
    border-radius: 14px;
    color: var(--ink-muted);
    font-size: 0.84rem;
}

.sidebar-no-results:not(.d-none) {
    display: flex;
}

/* Premium / subscription item — subtle gradient */
#userMenuOffcanvas .list-group-item[style*="background: linear-gradient"] {
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.2) 0%, rgba(100, 100, 100, 0.12) 100%) !important;
    border: 1px solid rgba(119, 119, 119, 0.25) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
}

#userMenuOffcanvas .list-group-item[style*="background: linear-gradient"]:hover {
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.3) 0%, rgba(100, 100, 100, 0.2) 100%) !important;
    border-color: var(--line-strong) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

#userMenuOffcanvas .list-group-item[style*="background: linear-gradient"] i {
    color: var(--ink-soft) !important;
    opacity: 1;
}

/* Custom gradient background override for subscription item */
#userMenuOffcanvas .custom-gradient-bg.text-white {
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.2) 0%, rgba(100, 100, 100, 0.12) 100%) !important;
    border-radius: 8px;
    margin-bottom: 2px;
    border: 1px solid rgba(119, 119, 119, 0.25) !important;
}

#userMenuOffcanvas .custom-gradient-bg.text-white:hover {
    background: linear-gradient(135deg, rgba(119, 119, 119, 0.3) 0%, rgba(100, 100, 100, 0.2) 100%) !important;
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border-color: var(--line-strong) !important;
}

#userMenuOffcanvas .custom-gradient-bg.text-white i {
    color: var(--ink-soft);
    opacity: 1;
}

#userMenuOffcanvas .custom-gradient-bg.text-white span {
    color: var(--ink);
}

/* Logout item special styling */
#userMenuOffcanvas .list-group-item.text-danger {
    color: rgba(144, 25, 36, 0.8) !important;
}

#userMenuOffcanvas .list-group-item.text-danger:hover {
    background: rgba(144, 25, 36, 0.1);
    color: #ca0012 !important;
}

#userMenuOffcanvas .list-group-item.text-danger:hover::before {
    background: #ca0012;
}

#userMenuOffcanvas .list-group-item.text-danger i {
    color: inherit !important;
}

#userMenuOffcanvas .list-group-item.text-danger:hover i {
    color: #ca0012 !important;
}

/* Close button */
#userMenuOffcanvas .btn-close,
#userMenuOffcanvas .btn-close-right {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    border-radius: 8px;
    color: var(--ink-muted);
    transition: all 0.2s ease;
    filter: invert(1);
    opacity: 0.5;
}

#userMenuOffcanvas .btn-close:hover,
#userMenuOffcanvas .btn-close-right:hover {
    background: var(--glass-strong);
    opacity: 0.8;
    transform: rotate(90deg);
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    #userMenuOffcanvas.show {
        transform: translateY(0) !important;
    }
    
    #userMenuOffcanvas {
        --sidebar-mobile-max-height: 88vh;
        --sidebar-mobile-header-offset: 138px;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: none;
        height: min(var(--sidebar-mobile-max-height), 720px);
        max-height: var(--sidebar-mobile-max-height);
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -22px 56px rgba(0, 0, 0, 0.16), 0 0 30px rgba(0, 0, 0, 0.06);
        transform: translateY(105%) !important;
    }

    @supports (height: 100dvh) {
        #userMenuOffcanvas {
            --sidebar-mobile-max-height: 88dvh;
        }
    }

    #userMenuOffcanvas:not(.show) {
        transform: translateY(105%) !important;
    }

    #userMenuOffcanvas.hiding {
        transform: translateY(105%) !important;
    }

    #userMenuOffcanvas::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: var(--scrim-soft);
        transform: translateX(-50%);
        z-index: 2;
    }
    
    .upgrade-banner {
        top: 105px !important;
        right: 5px !important;
    }
    
    .avatar-container {
        width: 38px;
        height: 38px;
    }
    
    #userMenuOffcanvas .list-group-item {
        padding: 10px 12px !important;
        font-size: 0.92rem !important;
        border-radius: 16px !important;
    }

    #userMenuOffcanvas .list-group-item i {
        font-size: 1.08rem;
    }

    #userMenuOffcanvas .list-group-item i.me-3 {
        margin-right: 10px !important;
    }

    #userMenuOffcanvas .offcanvas-header {
        padding: 24px 16px 16px;
        display: block;
        border-radius: 26px 26px 0 0;
    }

    #userMenuOffcanvas .offcanvas-header img {
        height: 36px !important;
    }

    #userMenuOffcanvas .offcanvas-body {
        max-height: calc(var(--sidebar-mobile-max-height) - var(--sidebar-mobile-header-offset));
        padding: 12px 12px max(18px, env(safe-area-inset-bottom));
    }

    #userMenuOffcanvas .sidebar-section-label {
        padding: 12px 11px 6px;
    }

    .sidebar-quick-actions {
        gap: 8px;
        padding-bottom: 10px;
    }

    .sidebar-quick-action {
        border-radius: 16px;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    #userMenuOffcanvas {
        width: 100vw;
        max-width: none;
        border-radius: 24px 24px 0 0;
    }

    .upgrade-banner {
        top: 105px !important;
        right: 5px !important;
    }

    .avatar-container {
        width: 36px;
        height: 36px;
    }

    #userMenuOffcanvas .list-group-item {
        padding: 10px 11px !important;
        font-size: 0.9rem !important;
        border-radius: 15px !important;
    }

    #userMenuOffcanvas .list-group-item i {
        width: 24px;
        margin-right: 9px;
        font-size: 1.04rem;
    }

    #userMenuOffcanvas .list-group-item i.me-3 {
        margin-right: 9px !important;
    }
    
    #userMenuOffcanvas .offcanvas-header {
        padding: 24px 14px 16px;
        display: block;
        border-radius: 24px 24px 0 0;
    }
    
    #userMenuOffcanvas .offcanvas-header h6 {
        font-size: 0.9rem;
    }
    
    #userMenuOffcanvas .offcanvas-header small {
        font-size: 0.7rem;
    }
}

/* Large screen specific styles */
@media (min-width: 992px) {
    .upgrade-banner {
        top: 65px !important;
        right: 5px !important;
        z-index: 1040 !important;
    }
    
    .avatar-container {
        width: 44px;
        height: 44px;
    }
    
    #userMenuOffcanvas {
        width: 336px;
        border-radius: 0 28px 28px 0;
    }

    #userMenuOffcanvas .offcanvas-header {
        padding: 17px 18px 15px;
        display: block;
        border-radius: 0 28px 0 0;
    }
    
    #userMenuOffcanvas .list-group-item {
        padding: 10px 12px !important;
        font-size: 0.93rem !important;
        border-radius: 16px !important;
    }

    #userMenuOffcanvas .list-group-item i {
        width: 25px;
        margin-right: 10px;
        font-size: 1.08rem;
    }

    #userMenuOffcanvas .list-group-item i.me-3 {
        margin-right: 10px !important;
    }
    
    #userMenuOffcanvas .offcanvas-header img {
        height: 50px !important;
    }
    
    #userMenuOffcanvas .offcanvas-header h6 {
        font-size: 1rem;
    }
    
    #userMenuOffcanvas .offcanvas-body {
        padding: 12px 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #userMenuOffcanvas.show,
    #userMenuOffcanvas.show .offcanvas-header,
    #userMenuOffcanvas.show .list-group-item,
    #userMenuOffcanvas .list-group-item:hover::after {
        animation: none !important;
    }

    #userMenuOffcanvas,
    #userMenuOffcanvas .list-group-item,
    .sidebar-quick-action {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   NOTIFICATION BADGE & MODAL STYLES - Professional Native App Design
   ============================================================================ */

/* Avatar Notification Badge - Red Dot Design */
.avatar-notification-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 12px;
    height: 12px;
    padding: 0;
    background: linear-gradient(135deg, #ca0012 0%, #be0010 100%);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 2px var(--bg-primary, rgba(0, 0, 0, 0.16));
    z-index: 10;
    pointer-events: none;
    animation: badge-pop 0.3s ease-out;
}

/* Red dot on the header bell icon when there are unread notifications */
#avatarNotificationBadge {
    width: 10px;
    height: 10px;
    min-width: 10px;
    padding: 0;
    background: linear-gradient(135deg, #ca0012 0%, #be0010 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-secondary, rgba(0, 0, 0, 0.16));
    z-index: 10;
    pointer-events: none;
    animation: badge-dot-pop 0.3s ease-out;
    /* Override Bootstrap badge styles */
    font-size: 0;
    line-height: 0;
}

@keyframes badge-dot-pop {
    /* Bootstrap translate-middle keeps translate(-50%,-50%) as base transform */
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes badge-pop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Menu Notification Badge - Fixed Circular Size */
.menu-notification-badge {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    color: var(--status-ink);
    background: linear-gradient(135deg, #ca0012 0%, #be0010 100%);
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notifications Menu Item */
#notificationsMenuItem {
    display: flex;
    align-items: center;
}

/* ============================================================================
   NOTIFICATION MODAL - Native App Design
   ============================================================================ */

/* Ensure notification modal appears above offcanvas */
#userNotificationsModal {
    z-index: 1200 !important;
}

#userNotificationsModal .modal-dialog {
    /* Let .modal-dialog-centered handle vertical centering; only cap the height
       so the dialog never exceeds the viewport (leaving a small margin). */
    max-height: calc(100vh - 2rem);
}

#userNotificationsModal .modal-content {
    height: auto;
    max-height: calc(100vh - 2rem);
}

.notifications-modal-content {
    background: var(--bg-secondary, #e1e1e1);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - 2rem);
}

.notifications-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-primary, #eaeaea);
    color: var(--text-primary, #000000);
    font-size: 15px;
    font-weight: 600;
}

.notifications-modal-header i {
    color: var(--primary-color, #777777);
}

.notifications-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #777777);
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-close-btn:hover {
    background: var(--scrim-soft);
    color: var(--text-primary, #000000);
}

.notifications-modal-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 0;
}

.notifications-modal-body::-webkit-scrollbar {
    display: none;
}

.notifications-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: var(--text-secondary, #999999);
}

.notifications-empty i {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 12px;
}

.notifications-empty p {
    font-size: 14px;
    margin: 0;
}

/* Notification List */
.notifications-list {
    padding: 8px;
}

/* Individual Notification Item */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.notif-item:hover {
    background: var(--glass);
}

.notif-item:active {
    background: var(--glass-strong);
    transform: scale(0.99);
}

/* Unread Notification */
.notif-unread {
    background: var(--glass-strong);
}

.notif-unread:hover {
    background: var(--glass-strong);
}

/* Notification Icon */
.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

/* Character/media thumbnail shown in place of the type icon when a notification
   carries data.imageUrl (e.g. re-engagement "your character misses you"). */
.notif-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(114, 114, 114, 0.35);
    background: var(--glass);
}
.notif-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.notif-icon-info {
    background: var(--veil);
    color: var(--ink-disabled);
}

.notif-icon-success {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.notif-icon-warning {
    background: rgba(162, 122, 0, 0.15);
    color: #a27a00;
}

.notif-icon-error {
    background: rgba(144, 25, 36, 0.15);
    color: #901924;
}

.notif-icon-video {
    background: var(--scrim-soft);
    color: var(--ink-muted);
}

.notif-icon-image {
    background: var(--scrim-soft);
    color: var(--ink-muted);
}

/* Notification Content */
.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #000000);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-message {
    font-size: 13px;
    color: var(--text-secondary, #777777);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.notif-time {
    font-size: 11px;
    color: var(--text-tertiary, #999999);
}

/* Unread Indicator Dot */
.notif-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-color, #777777);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* Arrow for clickable notifications */
.notif-arrow {
    color: var(--text-tertiary, #aaaaaa);
    font-size: 12px;
    align-self: center;
    margin-left: auto;
}

/* Mobile adjustments */
@media (max-width: 576px) {
    #userNotificationsModal .modal-dialog {
        margin: 8px;
    }
    
    .notifications-modal-content {
        max-height: 80vh;
        border-radius: 16px;
    }
    
    .notifications-modal-header {
        padding: 14px 16px;
    }
    
    .notifications-list {
        padding: 6px;
    }
    
    .notif-item {
        padding: 10px;
        gap: 10px;
    }
    
    .notif-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .notif-title {
        font-size: 13px;
    }
    
    .notif-message {
        font-size: 12px;
    }
}

/* ============================================================================
   CONNECTIONS MODAL - Native App Design
   ============================================================================ */

/* Ensure connections modal appears above offcanvas */
#userConnectionsModal {
    z-index: 1200 !important;
}

.connections-modal-content {
    background: var(--bg-secondary, #e1e1e1);
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.16);
    max-height: 80vh;
}

.connections-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-primary, #eaeaea);
    color: var(--text-primary, #000000);
    font-size: 15px;
    font-weight: 600;
}

.connections-modal-header i {
    color: var(--primary-color, #777777);
}

.connections-close-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-strong);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #777777);
    cursor: pointer;
    transition: all 0.2s ease;
}

.connections-close-btn:hover {
    background: var(--scrim-soft);
    color: var(--text-primary, #000000);
}

.connections-modal-body {
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.connections-modal-body::-webkit-scrollbar {
    display: none;
}

/* Connections Section */
.connections-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.connections-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.connections-section-header {
    margin-bottom: 12px;
}

.connections-section-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.connections-section-title i {
    color: var(--primary-color, #777777);
}

.connections-section-subtitle {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.4;
}

/* Connected Accounts List in Modal */
#modalConnectedAccountsList .connected-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--glass);
    border-radius: 10px;
    border: 1px solid rgba(119, 119, 119, 0.2);
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

#modalConnectedAccountsList .connected-account-item:hover {
    background: var(--glass-strong);
}

#modalConnectedAccountsList .account-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#modalConnectedAccountsList .account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--glass-strong);
}

#modalConnectedAccountsList .account-details {
    display: flex;
    flex-direction: column;
}

#modalConnectedAccountsList .account-username {
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
}

#modalConnectedAccountsList .account-platform {
    font-size: 11px;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

#modalConnectedAccountsList .disconnect-btn {
    color: #901924;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 4px;
}

#modalConnectedAccountsList .disconnect-btn:hover {
    opacity: 1;
}

/* ── Profile switcher + custom glass dropdown (cx-picker) ─────────────── */
.cx-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 6px;
}

.cx-picker-mount {
    position: relative;
}

.cx-picker {
    position: relative;
    width: 100%;
}

.cx-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--veil-strong);
    border: 1px solid rgba(119, 119, 119, 0.3);
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cx-picker-trigger:hover,
.cx-picker-trigger.is-open {
    border-color: var(--line-strong);
    background: var(--veil-strong);
}

.cx-picker-label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-picker-label.is-placeholder {
    color: var(--ink-muted);
}

.cx-picker-caret {
    font-size: 12px;
    color: var(--ink-muted);
    transition: transform 0.2s ease;
}

.cx-picker-trigger.is-open .cx-picker-caret {
    transform: rotate(180deg);
}

.cx-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface-overlay);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(119, 119, 119, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.cx-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cx-picker-item:hover {
    background: var(--scrim-soft);
}

.cx-picker-item.is-selected {
    background: var(--scrim-soft);
}

.cx-picker-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-picker-item-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-picker-item-sub {
    font-size: 11px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-picker-item-check {
    font-size: 14px;
    color: var(--ink-soft);
    opacity: 0;
}

.cx-picker-item.is-selected .cx-picker-item-check {
    opacity: 1;
}

.cx-active-profile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.cx-active-profile-meta code {
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cx-connect-target .cx-new-profile-input {
    background: var(--veil-strong);
    border-color: var(--line-strong);
    color: var(--ink);
}

.cx-connect-target .cx-new-profile-input::placeholder {
    color: var(--ink-muted);
}

/* Platform Connect Buttons in Modal */
.platform-connect-btn-modal {
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid rgba(119, 119, 119, 0.3);
    font-size: 13px;
}

.platform-connect-btn-modal:hover {
    background: var(--glass-strong);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.platform-connect-btn-modal.connected {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #28a745;
}

.platform-connect-btn-modal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Recent Posts in Modal */
#modalRecentPostsList .recent-post-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--glass);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: background 0.2s;
}

#modalRecentPostsList .recent-post-item:hover {
    background: var(--glass-strong);
}

#modalRecentPostsList .post-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--veil);
}

#modalRecentPostsList .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#modalRecentPostsList .post-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#modalRecentPostsList .post-text {
    font-size: 12px;
    color: var(--ink-soft);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

#modalRecentPostsList .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--ink-muted);
    flex-wrap: wrap;
}

#modalRecentPostsList .post-platforms {
    display: flex;
    gap: 3px;
    align-items: center;
}

#modalRecentPostsList .platform-badge {
    display: inline-flex;
    align-items: center;
    color: var(--ink-soft);
}

/* Mobile adjustments for Connections Modal */
@media (max-width: 576px) {
    #userConnectionsModal .modal-dialog {
        margin: 8px;
    }
    
    .connections-modal-content {
        max-height: 85vh;
        border-radius: 16px;
    }
    
    .connections-modal-header {
        padding: 14px 16px;
    }
    
    .connections-modal-body {
        padding: 12px;
    }
    
    .connections-section-title {
        font-size: 13px;
    }
    
    #modalConnectedAccountsList .connected-account-item {
        padding: 8px 10px;
    }
    
    #modalConnectedAccountsList .account-avatar {
        width: 32px;
        height: 32px;
    }
    
    #modalConnectedAccountsList .account-username {
        font-size: 12px;
    }
    
    .platform-connect-btn-modal {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    #modalRecentPostsList .post-thumbnail {
        width: 45px;
        height: 45px;
    }
    
    #modalRecentPostsList .post-text {
        font-size: 11px;
    }
}

/* ============================================================
   THEMED CONFIRM DIALOG (Connections modal)
   Rendered above #userConnectionsModal (z-index 1200) so it is
   never hidden behind it. Matches the app's violet/dark theme.
   Driven by showConnectionConfirm() in dashboard-avatar.hbs.
   ============================================================ */
.cx-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--veil-strong);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: cx-confirm-fade 0.15s ease-out;
}

@keyframes cx-confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cx-confirm-card {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(160deg, #dbdbdb 0%, #d2d2d2 100%);
    color: var(--ink);
    border: 1px solid rgba(114, 114, 114, 0.35);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    animation: cx-confirm-pop 0.18s cubic-bezier(0.2, 0.8, 0.4, 1);
}

@keyframes cx-confirm-pop {
    from { transform: translateY(12px) scale(0.97); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.cx-confirm-body {
    padding: 22px 22px 18px;
    text-align: center;
}

.cx-confirm-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
    background: var(--scrim-soft);
    color: var(--primary-color, #777777);
}

.cx-confirm-overlay.danger .cx-confirm-icon {
    background: rgba(144, 25, 36, 0.15);
    color: #e00017;
}

.cx-confirm-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--ink);
}

.cx-confirm-message {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

.cx-confirm-actions {
    display: flex;
    gap: 10px;
    padding: 0 22px 22px;
}

.cx-confirm-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cx-confirm-btn.cx-cancel {
    background: var(--glass-strong);
    color: var(--ink-soft);
}

.cx-confirm-btn.cx-cancel:hover {
    background: var(--scrim-soft);
}

.cx-confirm-btn.cx-confirm {
    background: var(--primary-color, #777777);
    color: var(--on-primary, #f6f6f6);
}

.cx-confirm-btn.cx-confirm:hover {
    filter: brightness(1.08);
}

.cx-confirm-overlay.danger .cx-confirm-btn.cx-confirm {
    background: #901924;
}

/* ============================================================
   GEM NAV DROPDOWN
   ============================================================ */
#gemDropdownContainer {
    position: relative;
}

/* Hide default Bootstrap caret on nav-chip toggles */
.nav-chip.dropdown-toggle::after {
    display: none;
}

.nav-chip-caret {
    font-size: 0.6rem !important;
    opacity: 0.55;
    margin-left: 0.05rem;
    transition: transform 0.2s ease;
}

.nav-chip[aria-expanded="true"] .nav-chip-caret {
    transform: rotate(180deg);
}

.gem-nav-dropdown {
    min-width: 200px;
    background: var(--surface-overlay);
    border: 1px solid rgba(162, 162, 162, 0.22);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-top: 6px !important;
}

.gem-nav-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 10px;
}

.gem-nav-balance {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.gem-nav-sub {
    font-size: 0.71rem;
    color: var(--ink-muted);
    margin-top: 2px;
}

.gem-nav-divider {
    height: 1px;
    background: var(--glass-strong);
    margin: 4px 0 8px;
}

.gem-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--ink-soft);
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.gem-nav-item + .gem-nav-item {
    margin-top: 2px;
}

.gem-nav-item:hover {
    background: var(--glass-strong);
    color: var(--ink-soft);
}

.gem-nav-item i {
    font-size: 0.85rem;
    color: var(--ink-muted);
    flex-shrink: 0;
}

/* ============================================================================
   AURORA GLASS — sidebar drawer frosted-glass enhancement
   ----------------------------------------------------------------------------
   The drawer already had brand gradients + backdrop-filter, but its dark base
   layers were ~0.97-0.99 opaque, so the blur never showed through. Here we make
   the panel genuinely translucent and frosted, and give the inner controls a
   layered glass-on-glass depth. Self-contained (no design-system.css needed,
   since this partial renders on chat/dashboard/favorites too).
   ============================================================================ */

/* The panel: translucent WHITE base so the blurred page shows through.
   Every tint here is white-on-white — grey tints (rgb(119…)/rgb(219…)) were what
   made the drawer read as a grey slab instead of frosted glass. Keep the alphas
   in the 0.5-0.7 range: high enough for text contrast, low enough that the
   backdrop-filter blur below has something left to blur. */
#userMenuOffcanvas {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.55), transparent 42%),
        radial-gradient(circle at 100% 14%, rgba(255, 255, 255, 0.4), transparent 40%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.56) 55%, rgba(255, 255, 255, 0.62)) !important;
    -webkit-backdrop-filter: blur(34px) saturate(150%) !important;
    backdrop-filter: blur(34px) saturate(150%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        24px 0 80px rgba(0, 0, 0, 0.12),
        0 0 40px rgba(0, 0, 0, 0.04),
        inset -1px 0 0 rgba(255, 255, 255, 0.5),
        inset 1px 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* A soft sheen along the top edge for a polished glass highlight. */
#userMenuOffcanvas .offcanvas-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 90%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Avatar ring -> brand gradient on a glass disc. */
#userMenuOffcanvas .avatar-container img {
    border: 2px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #232323, #777777 55%, #858585) border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Search field: frosted glass. No own blur — it sits inside the drawer's blur
   already, so a second nested pass cost compositing work for no visible change. */
#userMenuOffcanvas .sidebar-menu-search {
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
#userMenuOffcanvas .sidebar-menu-search:focus {
    border-color: var(--line-strong) !important;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

/* Quick-action tiles: glass-on-glass. No own blur — same nesting problem as the
   rows above; these tiles rendered as empty outlined pills on Android. */
#userMenuOffcanvas .sidebar-quick-action {
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
#userMenuOffcanvas .sidebar-quick-action-primary {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75)) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px rgba(0, 0, 0, 0.07) !important;
}
#userMenuOffcanvas .sidebar-quick-action:hover,
#userMenuOffcanvas .sidebar-quick-action:focus-visible {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8)) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    transform: translateY(-2px);
}

/* Section list rows: subtle frosted surfaces.
   NO `backdrop-filter` here. There are ~87 of these rows, every one of them
   nested inside the drawer's own blur — so each row made the compositor snapshot
   the already-blurred panel behind it and blur it a second time. That is what
   broke rendering on Android: the rows painted their background and border but
   their label text and `bi-*` icon never rasterized. A 8px blur behind a 3.5%
   black fill was invisible anyway. Do not re-add it. */
#userMenuOffcanvas .sidebar-section .list-group-item,
#userMenuOffcanvas .sidebar-section a.list-group-item {
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
#userMenuOffcanvas .sidebar-section .list-group-item:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Reduce the page-dimming so the frosted page actually shows through the glass. */
.offcanvas-backdrop.show { background-color: var(--veil); }

@media (prefers-reduced-motion: reduce) {
    #userMenuOffcanvas .sidebar-quick-action:hover { transform: none; }
}

/* ============================================================================
   AURORA GLASS — top navigation refactor + content breathing room
   ----------------------------------------------------------------------------
   1) Frost the brand bar and the mobile chips row to match the glass design.
   2) Fix the spacing: the spacer reserved only the 60px brand row, but on
      mobile a second fixed row (the chips) sits below it — so the first card
      tucked right under the nav. The spacer now clears brand bar + chips row
      + a comfortable gap. Chat mode (nav hidden) keeps its original spacing.
   ============================================================================ */

/* Brand bar — translucent frosted glass */
.main-nav-outer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.6)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
        0 6px 26px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Mobile chips row — matching frosted glass */
@media (max-width: 991.98px) {
    #avatarMenuContainer.nav-action-bar {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.58)) !important;
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
    }
}

/* Breathing room below the nav so content doesn't start flush under it.
   Mobile: brand bar (60) + chips row (~48) + gap (24). */
.main-nav-spacer {
    height: calc(100px + env(safe-area-inset-top)) !important;
}
/* Desktop: chips merge into the 60px brand row, so just bar + gap. */
@media (min-width: 992px) {
    .main-nav-spacer {
        height: calc(60px + env(safe-area-inset-top)) !important;
    }
}
/* Chat mode hides the brand bar + chips — preserve chat's original spacing. */
body.chat-active .main-nav-spacer {
    height: calc(60px + env(safe-area-inset-top)) !important;
}

/* ============================================================================
   MOBILE COMPOSITING BUDGET — do not "restore" these effects for small screens
   ============================================================================
   On phones this drawer is full-width and nearly full-height, so anything that
   forces a repaint of it repaints most of the screen. On Android that showed up
   as menu rows and quick-action pills painting their background and border but
   NOT their label text or `bi-*` icon, plus black un-rastered tiles over the
   brand bar. See docs/FRONTEND_ASSET_DELIVERY.md.

   The entrance stagger is the remaining offender: `menuItemSlideIn` runs with
   `animation-fill-mode: both`, so every one of the ~87 menu items starts at
   `opacity: 0` and animates in on its own delay. That is ~87 concurrent
   animations on a full-screen surface at exactly the moment the drawer is also
   sliding in. Desktop keeps the polish; phones just show the menu. */
@media (max-width: 576px) {
    #userMenuOffcanvas.show .offcanvas-header,
    #userMenuOffcanvas.show .list-group-item,
    #userMenuOffcanvas.show .list-group-item:nth-child(n) {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* The blur opt-out below is gated on `pointer: coarse` as well as the width.
   The compositing budget it protects is a *phone* problem, not a narrow-window
   problem — a desktop browser with devtools docked (or any window dragged under
   576px) was hitting `backdrop-filter: none !important` and losing the glass
   entirely, which is exactly the "blur is overwritten" symptom. Touch devices
   still get the cheap opaque panel; a narrow desktop window keeps the frost. */
@media (max-width: 576px) and (pointer: coarse) {
    /* Phones: opaque panel, no blur. The drawer is full-width and ~full-height
       here, so the Aurora Glass blur meant re-blurring essentially the whole
       viewport every frame — the single most expensive thing on the page. The
       translucency it enabled is also pointless at this size: the drawer covers
       what would show through. Desktop keeps the frosted look. */
    /* Token fills, not white literals: this block used to pin the drawer and
       bars to hardcoded white, which on a dark-brand page (chatlamix's
       data-brand skin) painted a white drawer over a dark app. The tokens keep
       the property that matters here — an OPAQUE fill with no blur — while
       following whichever skin the page wears. */
    #userMenuOffcanvas {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--surface-raised) !important;
    }

    /* Same reasoning for the two fixed bars the drawer sits over — stacked
       full-width blurs were what left a black un-rastered tile across the brand
       title in the reported Android screenshot. Their Aurora Glass backgrounds
       are only ~0.6-0.72 alpha and relied on the blur to stay readable, so drop
       the blur and make them opaque together — never one without the other, or
       page content scrolls visibly behind the fixed bars. */
    .main-nav-outer {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--surface-raised) !important;
    }

    #avatarMenuContainer.nav-action-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--surface-raised) !important;
    }
}

/* ── Creator upsell card (partials/brand-upsell.hbs) ─────────────────────────
   The sibling brands' quiet door into the manager product. Sits at the natural
   end of the menu, after the ad slot. Styled entirely from theme tokens so it
   wears whichever brand skin the page has (on chatlamix that means the violet
   fill and gradient from theme.css's data-brand block). */
.sidebar-upsell {
    margin: 10px 12px 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}

.sidebar-upsell-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-fill);
    margin-bottom: 6px;
}

.sidebar-upsell-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    margin-bottom: 4px;
}

.sidebar-upsell-body {
    font-size: 0.8rem;
    color: var(--ink-muted);
    line-height: 1.45;
    margin-bottom: 10px;
}

.sidebar-upsell-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--brand-gradient);
    border-radius: 999px;
    padding: 7px 14px;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.sidebar-upsell-cta:hover {
    color: var(--brand-ink);
    filter: brightness(1.06);
}

/* ============================================================================
   DARK-BRAND SKIN — the drawer and the nav on chatlamix / seisei
   ----------------------------------------------------------------------------
   The Aurora Glass blocks above paint the drawer, the brand bar and the chips
   row as translucent WHITE glass with !important — authored for the light
   manager theme before the chatlamix skin existed, so on chatlamix.com they
   bleached the dark page (the white drawer / grey nav in the 2026-08-20
   report, the same wash on seisei.me a week later). These overrides re-paint
   the same surfaces as dark glass.
   They must stay AFTER those blocks and carry !important themselves: the rules
   they beat are !important, so order + equal weight is the only thing that
   wins. Scoped to the dark brands `html[data-brand="chatlamix"]` and
   `html[data-brand="seisei"]` — every rule below paints from theme tokens, so
   each brand's own palette (violet / sakura) applies — while the light brands
   keep the white glass untouched.
   ============================================================================ */

html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas {
    background:
        radial-gradient(circle at 12% 0%, var(--brand-fill-soft), transparent 42%),
        radial-gradient(circle at 100% 14%, rgba(31, 199, 255, 0.08), transparent 40%),
        linear-gradient(150deg, rgba(18, 14, 28, 0.86), rgba(10, 8, 16, 0.78) 55%, rgba(16, 12, 26, 0.84)) !important;
    border-right: 1px solid var(--line) !important;
    box-shadow:
        24px 0 80px rgba(0, 0, 0, 0.5),
        inset -1px 0 0 var(--line-soft) !important;
}

html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .offcanvas-header {
    background: linear-gradient(180deg, var(--glass), transparent 90%);
    border-bottom: 1px solid var(--line-soft);
}

/* Avatar ring: the brand gradient around a dark disc (was white padding-box). */
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .avatar-container img {
    background:
        linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
        var(--brand-gradient) border-box;
    box-shadow: var(--shadow-sm);
}

html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-menu-search {
    background: var(--glass) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-menu-search::placeholder {
    color: var(--ink-muted);
}
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-menu-search:focus {
    border-color: var(--focus-ring) !important;
    box-shadow: 0 0 0 3px var(--brand-fill-soft) !important;
}

html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-quick-action {
    background: var(--glass) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-quick-action-primary {
    background: var(--brand-fill-soft) !important;
    border-color: var(--focus-ring) !important;
}
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-quick-action:hover,
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-quick-action:focus-visible {
    background: var(--glass-strong) !important;
    border-color: var(--line-strong) !important;
}

html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-section .list-group-item,
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-section a.list-group-item {
    background: var(--glass) !important;
    border: 1px solid var(--line-soft) !important;
    color: var(--ink) !important;
}
html[data-brand="chatlamix"] #userMenuOffcanvas,
html[data-brand="seisei"] #userMenuOffcanvas .sidebar-section .list-group-item:hover {
    background: var(--glass-strong) !important;
    border-color: var(--line) !important;
}

/* Brand bar + mobile chips row: dark frosted glass instead of white. */
html[data-brand="chatlamix"] .main-nav-outer,
html[data-brand="seisei"] .main-nav-outer {
    background: linear-gradient(180deg, rgba(14, 11, 22, 0.82), rgba(10, 8, 16, 0.72)) !important;
    border-bottom: 1px solid var(--line-soft) !important;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--line-soft) !important;
}
@media (max-width: 991.98px) {
    html[data-brand="chatlamix"] #avatarMenuContainer.nav-action-bar,
html[data-brand="seisei"] #avatarMenuContainer.nav-action-bar {
        background: linear-gradient(180deg, rgba(14, 11, 22, 0.8), rgba(10, 8, 16, 0.7)) !important;
        border-bottom: 1px solid var(--line-soft) !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    }
}