@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;700&display=swap');
/* PERF: Fonts ahora se cargan via <link rel="preload"> en HTML para evitar bloqueo de render */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;700&display=swap'); */

:root {
    /* ═══════════════════════════════════════════
     ORIGINAL COLOR SCHEME (Restored)
     ═══════════════════════════════════════════ */

    /* Backgrounds */
    --bg: #0B0B11;
    /* Original Dark Background */
    --bg-primary: #0B0B11;
    --block-bg: rgb(31, 31, 43);
    /* Prompt Bar Color */
    --bg-secondary: var(--block-bg);
    --surface: var(--block-bg);
    --surface-2: var(--block-bg);
    --surface-elevated: var(--block-bg);

    /* Semantic Backgrounds */
    --panel-bg: rgba(21, 21, 29, 0.95);
    --bg-page: var(--bg);

    /* Borders */
    --border: #272732;
    --border-dim: rgba(255, 255, 255, 0.08);
    /* Unified Border Standard */
    --border-hover: rgba(255, 255, 255, 0.15);

    /* Text Colors */
    --text: #ECECF3;
    --text-muted: #8b8b95;
    --text-strong: #F3F4F8;
    --text-secondary: #A1A1AA;
    --text-primary: #FFFFFF;

    /* Alias for compatibility */
    --muted: var(--text-muted);
    --muted-2: color-mix(in oklab, var(--text-muted) 65%, transparent);

    /* Brand & Accent Colors */
    --brand-1: #7C3AED;
    --brand-2: #A78BFA;
    --brand-3: #6EE7F9;
    --accent-1: #16f59b;
    --accent-2: #a7f3d0;
    --brand: var(--brand-1);
    --accent-color: var(--brand-1);
    --warning: #fbbf24;

    /* Geometry & Layout */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-1: 0 8px 30px rgba(0, 0, 0, .25);
    --shadow-2: 0 14px 44px rgba(0, 0, 0, .46);

    --gap: 12px;
    --max-width: 1100px;
    --transition: 100ms cubic-bezier(.2, .9, .2, 1);

    /* Layout */
    --header-h: 64px;
    --tabbar-h: 72px;
    --pad-x: 24px;
    --bp-sm: 640px;
    --bp-md: 1024px;

    /* Menu Lateral */
    --side-collapsed: 86px;
    --side-expanded: 220px;
    --side: 0px;

    /* Typography */
    --font-base: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-brand: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --fs-base: 16px;
    --fs-h1: clamp(26px, 4vw, 44px);
    --fs-h2: clamp(22px, 3.2vw, 34px);
    --fs-h3: 1.06rem;
}

/* Lógica de expansión del menú en escritorio */
@media (min-width: 1024px) {
    :root {
        --side: var(--side-collapsed);
    }

    /* Usando fallback safe selector para evitar crashes en navegadores viejos si :has falla */
    :root:has(.mj-nav:hover),
    :root:has(.mj-side.menu-open) {
        --side: var(--side-expanded);
    }
}

/* =========================
   BASE + RESET (FIXED SCROLL)
   ========================= */
* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    height: auto;
    min-height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Prevent global horizontal scroll */
}

body {
    margin: 0;
    background: #000000;
    color: var(--text);
    font: 500 var(--fs-base)/1.6 var(--font-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Ensure body also clips overflow */
}

[hidden] {
    display: none !important;
}


/* =========================================================
   GLOBAL AVATAR PROTECTION
   ========================================================= */
.user-profile img,
.user-avatar,
#avatarPreview,
#userAvatar,
.acct-chip img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    /* Ensure clicks still work for upload/delete */
}

/* =========================================================
   IOS INPUT ZOOM FIX (Global Best Practice)
   Prevents auto-zoom on inputs/selects by enforcing 16px
   ========================================================= */
@media (max-width: 768px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
        transform-origin: left;
    }

    /* Optional: Scale down visually if needed, but font-size must be 16px computed */
    .select-mini {
        transform: scale(0.85);
        /* Visual compensation for small selects */
        width: 115% !important;
        /* Counter-scale width */
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* Selection */
::selection {
    background: rgba(124, 58, 237, 0.3);
    color: white;
}

/* =========================
   UTILITIES
   ========================= */
/* Body push for sidebar */
body.with-sidebar {
    padding-left: 0;
}

@media (min-width: 1024px) {

    /* Only apply padding-left when page doesn't have its own margin-left push */
    body.with-sidebar:not(:has(.pricing-page-wrap)) {
        padding-left: var(--side);
    }
}

.pushable {
    padding-bottom: var(--tabbar-h);
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .pushable {
        padding-bottom: 0;
    }
}

/* Special layouts that need sidebar push (full-height layouts) */
.pricing-page-wrap {}

@media (min-width: 1024px) {
    .pricing-page-wrap {
        margin-left: var(--side);
    }

    /* Gen header - offset for sidebar */
    .gen-header {
        margin-left: var(--side);
        margin-left: var(--side);
        z-index: 60;
    }

    /* Toggle panel button - always visible */
    .toggle-panel-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
        background: var(--surface, #15151D) !important;
        border: 1px solid var(--border, #272732) !important;
        border-right: none !important;
    }

    .toggle-panel-btn:hover {
        background: var(--brand, #7C3AED) !important;
        border-color: var(--brand, #7C3AED) !important;
        color: white !important;
    }

    /* Gen button - proper dark background */
    .gen-btn {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .gen-btn:not(:disabled) {
        background: var(--brand, #7C3AED) !important;
        color: white !important;
    }

    .gen-btn:disabled {
        background: rgb(255 255 255 / 14%) !important;
        color: rgb(255 255 255) !important;
    }

    /* Random prompt button - muted icon color */
    #randomPromptBtn {
        color: var(--text-muted, #71717a) !important;
    }

    #randomPromptBtn:hover {
        color: var(--brand, #7C3AED) !important;
    }

    /* Results panel - ensure visibility */
    .results-panel:not(.collapsed) {
        width: 320px !important;
        opacity: 1 !important;
    }
}

/* Containers */
.page-wrap {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem var(--pad-x);
}

/* Flex utils */
.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
}

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

.justify-center {
    justify-content: center;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.w-full {
    width: 100%;
}

/* Typography */
.h1 {
    font-family: var(--font-brand);
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.1;
    font-size: var(--fs-h1);
}

.h2 {
    font-family: var(--font-brand);
    font-weight: 600;
    color: var(--text-strong);
    font-size: var(--fs-h2);
}

.h3 {
    font-family: var(--font-brand);
    font-weight: 600;
    color: var(--text-strong);
    font-size: var(--fs-h3);
}

.text-muted {
    color: var(--text-muted);
}

.text-sm {
    font-size: 0.875rem;
}

/* =========================
   BUTTON DESIGN SYSTEM (Global)
   ========================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    /* Standard Height */
    padding: 0 24px;
    border-radius: 12px;
    /* Standard Radius */
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
    border: none;
    text-decoration: none;
    user-select: none;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 1. PRIMARY BUTTON (Acción Principal - Gradient Solido) */
.btn-primary {
    background: #7c3aed;
    color: white;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* 2. SECONDARY BUTTON (Estilo "Sidebar Active" - Dark Glow) */
.btn-secondary {
    background: #ffffff;
    color: #000000;
    position: relative;
}

.btn-secondary:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* 3. GHOST BUTTON (Transparente) */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

/* 4. DANGER BUTTON */
.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ffcccc;
}

/* SIZES */
.btn-sm {
    height: 36px;
    padding: 0 16px;
    font-size: 0.85rem;
    border-radius: 10px;
}

.btn-lg {
    height: 56px;
    padding: 0 32px;
    font-size: 1.1rem;
    border-radius: 30px;
}

/* FULL WIDTH UTIL */
.btn-block {
    width: 100%;
    display: flex;
}

/* Backgrounds */
.bg-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.bg-gradient {
    display: none;
}

.glass-panel {
    background: rgba(21, 21, 29, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-lg);
}

/* =========================================================
   NAVIGATION (Updated from Navbar.js)
   ========================================================= */

/* Desktop Sidebar */
.mj-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
}

.mj-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--side-collapsed);
    background: #000000;
    /* Slightly lighter than bg for hierarchy */
    border-right: 1px solid #272732b3;
    display: flex;
    flex-direction: column;
    padding: 24px 12px;
    z-index: 1000;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow scroll if needed */
    scrollbar-width: none;
    /* Firefox */
    font-family: var(--font-base);
}

.mj-side::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

:root:has(.mj-nav:hover) .mj-side,
.mj-side.menu-open {
    width: var(--side-expanded);
}

/* Logo Area */
.side-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 13px;
    margin-bottom: 24px;
    text-decoration: none;
    color: var(--text-strong);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.side-brand span {
    opacity: 0;
    opacity: 0;
    transform: translateX(-10px);
}

:root:has(.mj-nav:hover) .side-brand span,
.mj-side.menu-open .side-brand span {
    opacity: 1;
    transform: translateX(0);
}

/* Nav List */
.side-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.side-nav li {
    width: 100%;
}

.side-nav a,
.acct-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.95rem;
}

.side-nav a:hover,
.acct-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.side-nav a.active {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.15) 0%, transparent 100%);
    color: #fff;
    border-left: 3px solid var(--brand);
    /* Stick */
}

.side-nav a.active .side-ico {
    color: var(--brand);
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));
    /* Glow */
}

.side-nav a.active .side-label {
    color: #fff;
    font-weight: 600;
}

/* Micro-animation: Icon Lift & Tilt */
.side-nav a:hover .side-ico svg {
    transform: translateY(-2px) rotate(-6deg);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Active State: Frozen Tilt & Scale */
.side-nav a.active .side-ico svg {
    transform: translateY(-2px) rotate(-6deg) scale(1.1);
    stroke-width: 2.5px;
    /* Slight bold for active */
}

.side-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.side-ico svg {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}

.side-label {
    opacity: 0;
    opacity: 0;
    font-size: 0.95rem;
}

:root:has(.mj-nav:hover) .side-label,
.mj-side.menu-open .side-label {
    opacity: 1;
}

/* User Profile Chip */
.acct-chip img {
    border-radius: 50%;
    object-fit: cover;
    border-radius: 50%;
    object-fit: cover;
    /* border: 1px solid var(--border); Removed in favor of user-profile wrapper */
    width: 100%;
    height: 100%;
}

/* User Profile Wrapper (Plan Borders) */
.user-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 50%;
    border: none;
    /* No border unless plan class is applied */
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
    /* Ensure circle */
    flex-shrink: 0;
    /* Prevent squashing */
    transition: all 0.3s ease;
}

/* Variants for larger sizes */
.user-profile-lg {
    width: 64px;
    height: 64px;
    border-width: 3px;
    padding: 3px;
}

.user-profile-xl {
    width: 128px;
    height: 128px;
    border-width: 4px;
    padding: 4px;
}

.user-profile-responsive {
    width: 100%;
    height: auto;
    border-width: 3px;
}

.user-profile.border-free {
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.user-profile.border-premium {
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.user-profile.border-pro {
    border: 2px solid #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

/* Initials Avatar Fallback (when no photo) */
.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    user-select: none;
}

/* Footer / Metadata */
.side-footer {
    margin-top: auto;
    padding: 0 14px;
    opacity: 0;
    opacity: 0;
    pointer-events: none;
}

:root:has(.mj-nav:hover) .side-footer,
.mj-side.menu-open .side-footer {
    opacity: 1;
    pointer-events: auto;
}

.side-policies {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-left: 4px;
}

.side-policies a {
    text-decoration: none;
    color: inherit;
}

.side-policies a:hover {
    color: var(--text);
}

.side-copy {
    font-size: 0.7rem;
    color: #52525b;
    margin: 0;
}

/* Mobile Tabbar */
#mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    /* Allow growth for safe area */
    min-height: 60px;
    /* Minimum visual height */
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-dim);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 2000;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-sizing: content-box;
    /* Ensure padding adds to height if not already reset, or explicit handling */
}

body.scrolled-down #mobile-tabbar {
    transform: translateY(130%);
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    /* 5 items = 20% each */
    height: 60px;
    color: var(--text-muted);
    /* Inactive color */
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
    /* Ensure no background */
}

/* Base icon sizing */
.tab svg {
    width: 24px;
    height: 24px;
    stroke-width: 2px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mobile Active State (Unified with Desktop) */
.tab.active {
    color: var(--brand) !important;
    /* Fix iOS/Mobile overrides */
}

.tab.active svg {
    transform: translateY(-2px) rotate(-6deg) scale(1.1);
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6));
}



.tab:active {
    transform: scale(0.92);
}



/* User Tab Exceptions for Avatar */
/* User Tab Exceptions for Avatar */
.tab.user img {
    border: 2px solid transparent;
    transition: border-color 0.2s;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transform: translateY(-2px);
    box-sizing: content-box;
    /* Ensure border doesn't shrink image if we want it outside, or use standard box-sizing */
}

/* Default Active State (White) - Only if NO plan border */
.tab.active.user:not([class*="border-"]) img {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Plan Borders (Mobile) - Matches Desktop .user-profile styles */
.tab.user.border-premium img {
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.tab.user.border-pro img {
    border: 2px solid #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.tab.user.border-free img {
    border: 2px solid rgba(255, 255, 255, 0.15);
}

/* If active AND has plan, maybe enhance the glow? Or just keep plan style. 
   User said "Mobile must be just like it", implying the plan border is paramount. 
   We will keep the plan border styles even when active. 
*/
.tab.active.user.border-premium img,
.tab.active.user.border-pro img {
    /* Optional: slightly stronger glow on active? */
    filter: brightness(1.2);
}

/* Logo Position Fix */
.tab.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-2px);
}

.tab.logo img {
    width: 28px;
    height: 28px;
}

.tab.logo img {
    width: 30px;
    height: 30px;
}

/* Avatar Fix */
#mobileAvatar {
    border-radius: 50% !important;
    object-fit: cover;
}

.tab .ico svg {
    width: 24px;
    height: 24px;
}

@media (min-width: 1024px) {
    #mobile-tabbar {
        display: none;
    }
}

@media (max-width: 1023px) {
    .mj-side {
        display: none;
    }
}

/* =========================================================
   POPOVERS & DROPDOWNS
   ========================================================= */
.sp-popover {
    position: fixed;
    background: #000000;
    border: 1px solid var(--border-dim);
    border-radius: 16px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    animation: popIn 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.sp-popover[hidden] {
    display: none !important;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

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

.pop-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.pop-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.pop-item.danger {
    color: #ef4444;
}

.pop-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.pop-sep {
    height: 1px;
    background: var(--border-dim);
    margin: 4px 0;
}

/* Chats Dropdown Special Styles */
.chats-dropdown {
    width: 300px;
    padding: 0;
    overflow: hidden;
}

.chats-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-dim);
    background: rgba(255, 255, 255, 0.02);
}

.chats-dropdown-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.chats-dropdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    color: var(--text-muted);
    gap: 8px;
    text-align: center;
    font-size: 0.9rem;
}

.icon-btn-mini-round {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn-mini-round:hover {
    background: var(--brand);
    color: white;
}

/* Sidebar Action Button & Group */
.nav-item-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-item-group a {
    flex: 1;
    padding-right: 40px;
    /* Space for button */
}

.side-action-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.nav-item-group:hover .side-action-btn,
.side-action-btn:hover {
    opacity: 1;
    pointer-events: auto;
}

.side-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Hide action button when sidebar is collapsed */
:root:not(:has(.mj-nav:hover)) .mj-side:not(.menu-open) .side-action-btn {
    display: none;
}

/* =========================================================
   LEGAL PAGES & BREADCRUMBS
   ========================================================= */
.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.sp-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.sp-breadcrumb a:hover {
    color: var(--text);
}

.sp-breadcrumb .sep {
    color: var(--border);
    font-size: 0.8rem;
}

.sp-breadcrumb .current {
    color: var(--brand);
    font-weight: 500;
}

/* Legal Header Enhancements */
.sp-legal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 1rem;
}

.sp-legal-meta .date {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-legal-meta .date::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: var(--brand);
    border-radius: 50%;
}

.btn-print {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-print:hover {
    border-color: var(--text);
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

@media print {
    body.with-sidebar {
        padding-left: 0 !important;
    }

    .mj-side,
    .sp-breadcrumb,
    #mobile-tabbar,
    .btn-print,
    scroll-navbar {
        display: none !important;
    }

    .sp-legal-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    a {
        text-decoration: underline;
        color: black !important;
    }
}

/* =========================================================
   MOBILE USER OVERLAY & SHEET (Re-added)
   ========================================================= */
.mobile-user-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mobile-user-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-user-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #15151d;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 40px;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.mobile-user-sheet.active {
    transform: translateY(0);
}

.sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    margin: 0 auto 20px;
}

/* Close Button (X) for Non-iOS */
.sheet-close-x {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.sheet-close-x:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.sheet-close-x svg {
    width: 20px;
    height: 20px;
}

.sheet-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Sheet Avatar matching Plan Borders */
.sheet-avatar {
    width: 60px;
    /* Slightly larger in sheet */
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.sheet-avatar.border-premium {
    border: 3px solid #8b5cf6;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.sheet-avatar.border-pro {
    border: 3px solid #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.sheet-avatar.border-free {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.sheet-user-info {
    flex: 1;
}

.sheet-user-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.sheet-user-plan {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.sheet-credits {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.sheet-credits-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.sheet-credits-value {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sheet-credits-value svg {
    color: #fbbf24;
}

.sheet-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sheet-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
}

.sheet-option-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.sheet-option-btn svg {
    color: var(--text-muted);
}

.sheet-option-btn.danger {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.sheet-option-btn.danger svg {
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATE DIVIDER (History)
   ═══════════════════════════════════════════════════════════════════════════ */
.date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 32px 0 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.date-divider::before,
.date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
    margin: 0 16px;
    max-width: 80px;
}