/**
 * Sidebar Styles
 * Location: /public_html/nav/assets/sidebar.css
 *
 * All sidebar styling scoped to .sidebar class.
 * Collapse model: DEFAULT EXPANDED. Toggle adds/removes .sidebar--collapsed;
 * sidebar.js persists the choice and keeps --sidebar-w in sync so pages that
 * use `margin-left: var(--sidebar-w)` reflow with it.
 */

:root {
    --gold: #F9C94C;
    --orange: #F28E1C;
    --gold-grad: linear-gradient(135deg, #F9C94C 0%, #F28E1C 100%);
    --sidebar-bg: #0f172a;
    --sidebar-text: #94a3b8;
    --sidebar-text-active: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --trans: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-w: 260px;
}

/* Sidebar container */
.sidebar {
    width: var(--sidebar-w) !important;
    background-color: var(--sidebar-bg) !important;
    color: var(--sidebar-text) !important;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    transition: width var(--trans), transform var(--trans);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    /* The whole sidebar used to scroll vertically, so the nav list and the
       pinned footer (Wallet / Dashboard / Docs / Settings / Sign Out) moved
       together and the footer could scroll out of reach. The nav list is now
       the only scroller; the footer stays pinned. overscroll-behavior stops a
       scroll that reaches the end of the list from chaining to the page. */
    overflow: hidden;
}

/* ── Collapsed state (desktop) ────────────────────────────────────────── */
.sidebar.sidebar--collapsed { width: 80px !important; }
:root:has(.sidebar.sidebar--collapsed) { --sidebar-w: 80px; }

.sidebar.sidebar--collapsed .brand-name,
.sidebar.sidebar--collapsed .brand-sub,
.sidebar.sidebar--collapsed .nav-label,
.sidebar.sidebar--collapsed .nav-section-label,
.sidebar.sidebar--collapsed .sidebar-footer,
.sidebar.sidebar--collapsed .brand-wallet {
    display: none;
}

.sidebar.sidebar--collapsed .logo { margin: 0 auto; }

.sidebar.sidebar--collapsed .sidebar-header {
    justify-content: center;
    padding: 20px 0;
}

/* Center nav icons + hide the icon gap when collapsed */
.sidebar.sidebar--collapsed .nav-link { justify-content: center; padding: 0.75rem 0; }
.sidebar.sidebar--collapsed .nav-icon { margin-right: 0; }

/* ── Collapse toggle: floats at the sidebar's right edge ──
   Anchored to .app-shell (not the sidebar) so it never gets clipped by the
   sidebar's own overflow-y:auto. It tracks the sidebar width via --sidebar-w. */
.app-shell { position: relative; }
.sidebar .sidebar-toggle {
    position: fixed;
    top: 84px;                                  /* sits just below the header */
    left: calc(var(--sidebar-w, 260px) - 14px); /* rides the sidebar's right edge */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sidebar-text);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    transition: left var(--trans), color var(--trans), border-color var(--trans);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.sidebar .sidebar-toggle:hover {
    color: var(--sidebar-text-active);
    border-color: var(--gold);
}
/* Icon flips direction with state (chevron points the way it will move) */
.sidebar.sidebar--collapsed .sidebar-toggle { transform: rotate(180deg); }
/* Clicks always register on the button, never the inner SVG */
.sidebar .sidebar-toggle .iconify,
.sidebar .sidebar-toggle svg { pointer-events: none; }

/* ── Header ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar .logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar .logo img { width: 100%; height: 100%; object-fit: contain; }

.sidebar .sidebar-brand { display: flex; flex-direction: column; gap: 0; }

.sidebar .brand-name {
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    font-family: 'Space Grotesk', sans-serif;
}

.sidebar .brand-sub {
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.brand-wallet {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.brand-wallet:hover { opacity: 0.75; }

.brand-wallet-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.brand-wallet-balance {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
}
.brand-wallet--connect {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* ── Navigation ───────────────────────────────────────────────────────── */
/* .nav-wrapper is the scroller. min-height:0 is required — a flex child will
   not shrink below its content height without it, which is what let the list
   push the pinned footer off-screen while .sidebar itself also scrolled. */
.sidebar .nav-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 1rem 0;
}
.sidebar .sidebar-footer { flex: 0 0 auto; }

.sidebar .nav-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.5rem 1.5rem 0.5rem;
    color: #475569;
}

.sidebar .nav-menu { list-style: none; padding: 0; margin: 0; }
.sidebar .nav-item { margin: 0 0 2px; padding: 0; }

.sidebar .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    /* Without border-box this resolves to 100% + 48px padding + 3px border, so
       every nav row was ~51px wider than the 260px sidebar. The row's last
       child is the unread badge, so the overflow landed exactly on it and the
       Chats count was clipped at the sidebar edge. */
    box-sizing: border-box;
    padding: 0.75rem 1.5rem;
    color: var(--sidebar-text);
    font-weight: 500;
    transition: var(--trans);
    border-left: 3px solid transparent;
    background: none;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
}
.sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.03); color: var(--sidebar-text-active); }
.sidebar .nav-link.active {
    background: rgba(249, 201, 76, 0.1);
    color: var(--gold);
    border-left-color: var(--gold);
}

.sidebar .nav-icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar .nav-label {
    flex: 1;
    /* A flex item will not shrink below its content width without this, which
       would push the badge back out however wide the row is. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Submenu (kept from original) */
.sidebar .nav-submenu {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: max-height 0.3s ease-in-out;
}
.sidebar .nav-item.expanded .nav-submenu { max-height: 500px; }
.sidebar .nav-submenu li { list-style: none; }
.sidebar .nav-submenu li a {
    display: block;
    padding: 0.6rem 1rem 0.6rem 3.5rem;
    font-size: 0.9rem;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: var(--trans);
}
.sidebar .nav-submenu li a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }

.sidebar .nav-link .nav-chevron {
    margin-left: auto;
    font-size: 1rem;
    opacity: 0.5;
    transition: var(--trans);
}
.sidebar .nav-item.expanded .nav-link .nav-chevron { transform: rotate(180deg); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.sidebar .sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar .sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: var(--trans);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.sidebar .sidebar-footer-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--sidebar-text-active); }
.sidebar .sidebar-footer-link.active { color: var(--gold); }
.sidebar .sidebar-footer-link span { display: flex; align-items: center; }

/* Scrollbar */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* ========================================================================= */
/* MOBILE                                                                    */
/* ========================================================================= */

.mobile-menu-toggle {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 210;
    width: 44px;
    height: 44px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    font-size: 1.35rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--trans);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mobile-menu-toggle:hover { transform: translateY(-1px); color: var(--gold); border-color: rgba(249, 201, 76, .55); box-shadow: 0 10px 28px rgba(0,0,0,.42); }
.mobile-menu-toggle:active { transform: scale(0.95); }
.mobile-menu-toggle[aria-expanded="true"] { color: var(--gold); border-color: rgba(249, 201, 76, .55); }

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--trans), visibility var(--trans);
}
.mobile-overlay.active { opacity: 1; visibility: visible; }

@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; }

    .sidebar { transform: translateX(-100%); width: 280px; z-index: 50; }
    .sidebar.mobile-open { transform: translateX(0); }

    /* Collapse concept doesn't apply on mobile — always full width + labels */
    .sidebar.sidebar--collapsed { width: 280px; transform: translateX(-100%); }
    .sidebar.sidebar--collapsed.mobile-open { transform: translateX(0); }
    .sidebar.sidebar--collapsed .brand-name,
    .sidebar.sidebar--collapsed .brand-sub,
    .sidebar.sidebar--collapsed .nav-label,
    .sidebar.sidebar--collapsed .nav-section-label,
    .sidebar.sidebar--collapsed .sidebar-footer,
    .sidebar.sidebar--collapsed .brand-wallet { display: block; }
    .sidebar.sidebar--collapsed .nav-link { justify-content: flex-start; padding: 0.75rem 1.5rem; }
    .sidebar.sidebar--collapsed .nav-icon { margin-right: 0.75rem; }
    .sidebar.sidebar--collapsed .logo { margin: 0; }
    .sidebar.sidebar--collapsed .sidebar-header { justify-content: flex-start; padding: 1.25rem; }

    /* Hide desktop collapse toggle on mobile */
    .sidebar .sidebar-toggle { display: none; }

    .sidebar .sidebar-header { padding: 1.25rem; }

    .sidebar .mobile-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: auto;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        border-radius: 8px;
        color: var(--sidebar-text);
        font-size: 1.25rem;
        cursor: pointer;
        transition: var(--trans);
    }
    .sidebar .mobile-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--sidebar-text-active); }
}

/* Docs keeps the platform menu available; its slide index remains in the
   header while global navigation stays in the mobile safe area. */

@media (min-width: 769px) and (max-width: 1024px) {
    :root { --sidebar-w: 240px; }
    .sidebar.sidebar--collapsed { width: 70px !important; }
}

@media (min-width: 769px) {
    .mobile-menu-toggle,
    .mobile-overlay,
    .sidebar .mobile-close { display: none !important; }
}

/* ========================================================================= */
/* Skeleton loaders — shared shimmer base                                    */
/* ========================================================================= */
.xln-skel {
    position: relative;
    overflow: hidden;
    background: var(--xln-surface-2, rgba(255,255,255,.06));
    border-radius: 8px;
}
.xln-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--xln-line-2, rgba(255,255,255,.09)), transparent);
    animation: xln-shimmer 1.4s ease-in-out infinite;
}
@keyframes xln-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .xln-skel::after { animation: none; } }

.xln-skel-line { height: 13px; margin: 7px 0; }
.xln-skel-line.sm { width: 40%; } .xln-skel-line.md { width: 65%; } .xln-skel-line.lg { width: 90%; }
.xln-skel-avatar { width: 56px; height: 56px; border-radius: 50%; }
.xln-skel-card { height: 120px; border-radius: 14px; }
.xln-skel-chip { height: 32px; width: 88px; border-radius: 980px; }
/* Global atmosphere derived from the Docs deck: restrained grid, aurora and
   cursor light. Individual products keep their own layouts and palettes. */
body:not(.docs-page)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at var(--xln-cursor-x,78%) var(--xln-cursor-y,8%),rgba(155,125,240,.09),transparent 28rem),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
body:not(.docs-page)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% -10%,rgba(249,201,76,.07),transparent 42%),radial-gradient(ellipse at 15% 90%,rgba(82,211,255,.05),transparent 38%);mix-blend-mode:screen}
.mobile-menu-toggle{z-index:12020!important}.sidebar{z-index:12010!important}.mobile-overlay{z-index:12000!important}