/* ============================================================
   global.css — Fedora.meme shared design system
   All variables, resets, navbar, sidebars, layout, utilities
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── TOKENS ── */
:root {
    --brand:        #6702D1;
    --brand-dark:   #7c3aed;
    --brand-deeper: #4c1d95;
    --brand-glow:   rgba(168, 85, 247, 0.18);
    --brand-light:  #f5f3ff;
    --surface:      #ffffff;
    --surface-2:    #ffffff;
    --border:       #e9e4fb;
    --text-primary:   #1a1523;
    --text-secondary: #6b5f7a;
    --text-muted:     #a899b8;
    --gold:       #f59e0b;
    --gold-light: #fef3c7;
    --danger:  #ef4444;
    --success: #22c55e;
    --surface-rgb: 255, 255, 255;
}

/* ── DARK THEME ──
   Explicit choice (data-theme attribute, set via localStorage) always wins.
   With no explicit choice, prefers-color-scheme follows the OS/browser setting. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:        #9d5ce8;
        --brand-dark:   #a78bfa;
        --brand-deeper: #6d28d9;
        --brand-glow:   rgba(157, 92, 232, 0.25);
        --brand-light:  #241a38;
        --surface:      #1a1523;
        --surface-2:    #0e1310;
        --border:       #322a44;
        --text-primary:   #f3f0f9;
        --text-secondary: #b2a6c4;
        --text-muted:     #7a6f8c;
        --gold:       #fbbf24;
        --gold-light: #3d2f0f;
        --danger:  #f87171;
        --success: #4ade80;
        --surface-rgb: 26, 21, 35;
    }
}
:root[data-theme="dark"] {
    --brand:        #9d5ce8;
    --brand-dark:   #a78bfa;
    --brand-deeper: #6d28d9;
    --brand-glow:   rgba(157, 92, 232, 0.25);
    --brand-light:  #241a38;
    --surface:      #1a1523;
    --surface-2:    #0e1310;
    --border:       #322a44;
    --text-primary:   #f3f0f9;
    --text-secondary: #b2a6c4;
    --text-muted:     #7a6f8c;
    --gold:       #fbbf24;
    --gold-light: #3d2f0f;
    --danger:  #f87171;
    --success: #4ade80;
    --surface-rgb: 26, 21, 35;
}

/* ── THEME TOGGLE CONTROL (sidebar + settings) ── */
.theme-toggle-row { display:flex; align-items:center; gap:4px; }
.theme-toggle-btn {
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:7px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); cursor:pointer; transition:all 0.15s;
}
.theme-toggle-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }
.theme-toggle-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }

.theme-option-card {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    flex:1; padding:16px 10px; border-radius:12px;
    border:1.5px solid var(--border); background:var(--surface-2);
    color:var(--text-muted); cursor:pointer; transition:all 0.15s;
}
.theme-option-card:hover { border-color:var(--text-muted); color:var(--text-primary); }
.theme-option-card.active { border-color:var(--brand); background:var(--brand-light); color:var(--brand); }
.theme-option-card span { font-size:12px; font-weight:700; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; } /* clip not hidden — hidden breaks position:sticky */
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--surface-2);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: clip; /* clip not hidden — hidden breaks position:sticky */
    width: 100%;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', sans-serif; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── NAVBAR ── */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--surface-rgb), 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    height: 60px;
    width: 100%;
}
.navbar-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}
.logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-deeper);
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    /* Mobile: no extra offset - .navbar-inner's own `gap:16px` already
       spaces the logo naturally away from the hamburger button to its
       left. The old 75px padding-left here (inherited from a much
       earlier round, before this header had a hamburger button in this
       position) was stacking on TOP of that gap and shoving the logo far
       to the right of the hamburger - removed per Ken's explicit report.
       Desktop instead centers the icon against the sidebar column below -
       see the >=768px and >=1080px blocks, which override this with a
       width + centering approach driven by the same --sidebar-w the
       .layout grid uses, so the two can never drift apart again. */
}
.logo span { color: var(--brand); }

.search-bar-wrap { display: none; } /* hidden on mobile, shown on desktop */

.search-bar {
    width: 100%;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.search-bar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar .search-icon { color: var(--text-muted); flex-shrink: 0; }
.search-shortcut {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}

.nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.btn-create {
    background: var(--brand);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 0 18px;
    height: 36px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s, transform 0.1s;
}
.btn-create:hover { background: var(--brand-dark); }
.btn-create:active { transform: scale(0.97); }

.nav-icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.nav-icon-btn:hover { background: var(--brand-light); border-color: var(--brand); }
.notif-dot {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #e11d48;
    border: 1.5px solid var(--surface);
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1;
}
.avatar-nav {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deeper) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    position: relative;
}
.avatar-nav .online-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface);
}

/* Guest nav buttons */
.btn-login {
    height: 36px;
    padding: 0 16px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: border-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-login:hover { border-color: var(--brand); color: var(--brand); }

.btn-signup {
    height: 36px;
    padding: 0 18px;
    background: var(--brand);
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.btn-signup:hover { background: var(--brand-dark); }

/* ── HAMBURGER / MOBILE SEARCH ── */
.hamburger-btn,
.mob-search-btn {
    display: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: transparent;
    align-items: center; justify-content: center;
    color: var(--text-secondary);
}

/* ── PAGE LAYOUT ── */
.layout {
    max-width: 100%;
    margin: 0 auto;
    padding: 16px 12px 90px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: calc(100vh - 60px);
}
/* Grid children must have min-width:0 — prevents content from blowing out grid columns */
.main-content {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

/* ── LEFT SIDEBAR ── */
.left-sidebar {
    display: none;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    scrollbar-width: none;
    align-self: start; /* CRITICAL: grid children must have align-self:start to stick */
}
.left-sidebar::-webkit-scrollbar { display: none; }

.nav-section-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 10px;
    margin: 20px 0 6px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--brand-light); color: var(--brand-dark); }
.nav-link.active { background: var(--brand-light); color: var(--brand); }
.nav-link .nav-badge {
    margin-left: auto;
    background: var(--brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    padding: 1px 7px;
}
.sidebar-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.sidebar-footer a {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    transition: color 0.15s;
}
.sidebar-footer a:hover { color: var(--brand); }
.social-row { display: flex; gap: 12px; margin-top: 12px; }
.social-row a { color: var(--text-muted); transition: color 0.15s; }
.social-row a:hover { color: var(--brand); }

/* ── RIGHT SIDEBAR ── */
.right-sidebar {
    display: none;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    scrollbar-width: none;
    align-self: start; /* CRITICAL: grid children must have align-self:start to stick */
}
.right-sidebar::-webkit-scrollbar { display: none; }

.sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.sidebar-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

/* Vault card */
.vault-card {
    background: linear-gradient(140deg, var(--brand-deeper) 0%, var(--brand-dark) 60%, #9333ea 100%);
    border: none;
    color: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.vault-card::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}
.vault-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.vault-sub { font-size: 13px; opacity: 0.75; margin-bottom: 16px; line-height: 1.5; }
.vault-balance { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }
.vault-balance-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.vault-balance-ticker { font-size: 14px; opacity: 0.7; font-weight: 600; }
.vault-meta { font-size: 11px; opacity: 0.6; margin-bottom: 16px; }
.btn-vault {
    width: 100%;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    transition: background 0.15s;
}
.btn-vault:hover { background: rgba(255,255,255,0.28); }

/* Collective items */
.collective-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.collective-item:last-child { border-bottom: none; }
.collective-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--brand-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.collective-name { font-size: 13px; font-weight: 600; }
.collective-members { font-size: 11px; color: var(--text-muted); }
.collective-join {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--brand);
    background: var(--brand-light);
    padding: 3px 10px;
    border-radius: 6px;
    border: none;
}

/* Leaderboard */
.lb-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.lb-rank { width: 20px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800; color: var(--text-muted); text-align: center; flex-shrink: 0; }
.lb-rank.top { color: var(--gold); }
.lb-avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--brand-deeper)); flex-shrink: 0; }
.lb-name { font-size: 13px; font-weight: 500; flex: 1; }
.lb-xp { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700; color: var(--brand); }

/* Ad slot */
.ad-slot {
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── MOBILE BOTTOM NAV ── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: rgba(var(--surface-rgb), 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.mobile-bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.mob-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    transition: color 0.15s;
    position: relative;
}
.mob-nav-btn.active { color: var(--brand); }
.mob-nav-btn .mob-notif {
    position: absolute;
    top: -2px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    background: #e11d48;
    border-radius: 999px;
    border: 1.5px solid var(--surface);
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mob-create-btn {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--brand);
    border: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.mob-create-btn:active { transform: scale(0.94); }

/* ── MOBILE DRAWER ── */
.drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.5);
    z-index: 300;
    backdrop-filter: blur(2px);
}
.drawer-backdrop.open { display: block; }
.drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    background: var(--surface);
    z-index: 301;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.drawer.open { transform: translateX(0); }
/* Scrollable nav content - everything except the pinned Create button below,
   so long content can never scroll underneath/behind the button (it used to,
   because the button was position:absolute pinned to the drawer's fixed
   viewport height, independent of how tall the nav content actually was). */
.drawer-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 16px 20px;
}
/* Real flex item, not position:absolute - always sits below drawer-scroll,
   can never overlap it regardless of content length or viewport height. */
.drawer-create-wrap {
    flex-shrink: 0;
    padding: 8px 16px 8px;
}
/* Ken: the copyright line nav-left.blade.php already shows on desktop was
   never added to this separate mobile drawer template, so it was simply
   missing on mobile - not hidden by CSS, just never written into this file.
   Always rendered (regardless of auth state) and pinned below the
   scrollable nav / the Create button, same as nav-left's bottom-of-sidebar
   placement - a real flex item, not position:absolute, so it can't overlap
   drawer-scroll's content. Now the true last item, so it owns the bottom
   safe-area inset that drawer-create-wrap gave up above. */
.drawer-footer-copyright {
    flex-shrink: 0;
    padding: 4px 16px max(14px, env(safe-area-inset-bottom));
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.drawer-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 24px; position: relative; }
/* Ken: logo needs to be visually centered in the drawer header regardless
   of the close button's width - absolute-centering it independent of the
   flex flow does that, rather than space-between which just pins it to
   the far left since it's the only other flex item. */
.drawer-header .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.drawer-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}

/* ── MOBILE SEARCH OVERLAY ── */
.mob-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(var(--surface-rgb), 0.98);
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
}
.mob-search-overlay.open { display: flex; }
.mob-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1.5px solid var(--brand);
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.mob-search-bar input {
    flex: 1;
    border: none; outline: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
}
.mob-search-cancel {
    background: transparent;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
}

/* ── MODALS ── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.6);
    backdrop-filter: blur(4px);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: calc(100vw - 32px);
    box-shadow: 0 24px 60px rgba(76, 29, 149, 0.2);
    animation: modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.93) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    margin-bottom: 20px;
}
.modal-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; }
.modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
}
.modal-back {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    margin-right: 8px;
}

/* ── CREATE MODAL: step-0 chooser (Meme / Editor / Template / Collective) ── */
.create-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) {
    .create-choice-grid { grid-template-columns: 1fr; }
}
.create-choice-btn {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.create-choice-btn:hover {
    border-color: var(--brand);
    background: var(--brand-light);
    transform: translateY(-2px);
}
/* Color is set on this wrapper (not on the icon itself) because Lucide's
   createIcons() replaces the <i data-lucide="..."> with an <svg> at
   render time - a rule targeting the "i" element type would stop matching
   the moment that swap happens and the icon silently falls back to
   whatever text color it inherits, which is exactly why these icons were
   showing up dim/invisible in dark mode. Setting color here instead works
   regardless of the element's tag, since the svg's stroke="currentColor"
   inherits the computed `color` from this ancestor either way. */
.create-choice-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
}
.create-choice-icon i, .create-choice-icon svg { width: 20px; height: 20px; }
.create-choice-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.create-choice-btn span {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}
.create-choice-btn small {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
}
.modal-body { padding: 0 24px 24px; }
.modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* ── UPLOAD MODAL: sticky header/footer with an internally-scrolling body ──
   .modal previously had no max-height, so a long form (media picker + drop
   zone + Title + Category + Caption + Tags + Collective) forced the whole
   page to be scrolled just to reach Cancel/Post Meme - especially bad on
   mobile. Now the modal is capped to the viewport height (mirrors the
   existing max-width: calc(100vw - 32px) pattern) and only the middle
   scrolls, so the footer buttons stay reachable at all times. Scoped to
   the upload modal only, not every .modal site-wide, to keep this minimal. */
#uploadModal .modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}
#uploadModal .modal-header { flex-shrink: 0; }
#uploadForm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
#uploadModal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#uploadModal .modal-footer { flex-shrink: 0; }

/* ── EDIT PROFILE MODAL: same sticky-header/scrollable-body/sticky-footer
   fix as the Upload modal above. Adding the 5 social-link fields (item 25)
   pushed this modal's form past a typical desktop viewport height, with no
   max-height at all, so Cancel/Save Changes could be pushed off-screen just
   like the Upload modal was before item 11d. Scoped to #editModal only. */
#editModal .modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}
#editModal .modal-header { flex-shrink: 0; }
#editProfileForm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
#editModal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
#editModal .modal-footer { flex-shrink: 0; }

/* ── UPLOAD MODAL: collapsible "Additional details" (Caption/Tags/Collective) ──
   Collapsed by default so mobile only has to see Title + Category (the two
   required fields) before Post Meme is reachable; the optional fields are one
   tap away, not hidden. Forced open (and the toggle UI hidden) on wider
   screens to match the modal's pre-existing always-expanded desktop layout.
   NOTE: the open/closed state itself is driven by JS (syncUploadMoreDetails()
   in app.blade.php), not by CSS alone - Chrome's native <details> rendering
   (the ::details-content internal box) collapses to zero height whenever the
   `open` attribute is absent, even if an inner element is forced
   `display:block!important`. This block only handles the *visual* styling
   (hiding the toggle UI, removing the border) once JS has set `open` for the
   current breakpoint. */
.upload-more-details {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 4px;
}
.upload-more-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    list-style: none;
}
.upload-more-summary::-webkit-details-marker { display: none; }
.upload-more-summary-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
.upload-more-chevron {
    width: 16px; height: 16px;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.upload-more-details[open] .upload-more-chevron { transform: rotate(180deg); }
.upload-more-body { padding: 0 14px 14px; }
@media (min-width: 768px) {
    .upload-more-details { border: none; margin-top: 0; }
    .upload-more-summary { display: none; }
    .upload-more-body { padding: 0; }
}

/* ── FORMS ── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-input {
    width: 100%;
    height: 40px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.form-textarea {
    width: 100%;
    height: 80px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--surface);
    outline: none;
    resize: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

.btn-cancel {
    flex: 1;
    height: 40px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
.btn-save {
    flex: 2;
    height: 40px;
    background: var(--brand);
    border: none;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    transition: background 0.15s;
}
.btn-save:hover { background: var(--brand-dark); }

/* ── TOAST ── */
.toast-container {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    /* Fixed dark color, not the --text-primary token: a toast/snackbar is meant to
       always read as a dark pill with white text regardless of site theme - using
       the text-color token as a background inverted along with dark mode (it flips
       to near-white there), making the toast nearly invisible. Same bug shape as
       .btn-edit (see punch list item 11a). */
    background: #1a1523;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    animation: toast-in 0.3s ease;
    pointer-events: auto;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── MEME DETAIL MODAL STYLES (global — modal lives in app.blade.php) ── */
.meme-action-row { display: flex; gap: 8px; margin-bottom: 16px; }
.meme-action-btn {
    flex: 1; height: 38px; border-radius: 10px;
    border: 1.5px solid var(--border); background: transparent;
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.meme-action-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.meme-action-btn.liked { background: #fff1f2; border-color: #fda4af; color: #e11d48; }
.meme-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.meme-tag { font-size: 12px; font-weight: 600; color: var(--brand); background: var(--brand-light); padding: 3px 10px; border-radius: 6px; }

/* ── SHARE MODAL STYLES (global) ── */
.share-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.share-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border: 1.5px solid var(--border); border-radius: 12px;
    background: transparent; font-size: 11px; font-weight: 600; color: var(--text-secondary);
    transition: background 0.15s, border-color 0.15s;
}
.share-btn:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.share-btn-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.copy-link-row { display: flex; gap: 8px; }
.copy-input {
    flex: 1; height: 38px; border: 1.5px solid var(--border); border-radius: 10px;
    padding: 0 12px; font-size: 13px; color: var(--text-secondary);
    background: var(--surface-2); outline: none;
}
.btn-copy {
    height: 38px; padding: 0 16px; background: var(--brand); color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700;
    border: none; border-radius: 10px;
}

/* ── PROFILE EDIT MODAL STYLES (global) ── */
.modal-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.modal-avatar {
    width: 64px; height: 64px; border-radius: 14px;
    background: linear-gradient(135deg, #c084fc, #818cf8);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; color: #fff;
    overflow: hidden;
}
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.btn-change-avatar {
    background: var(--brand-light); color: var(--brand);
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    border: 1.5px solid var(--brand); border-radius: 10px; padding: 8px 14px;
}

/* ── ONLINE PRESENCE INDICATOR ── */
.online-dot, .avatar-online {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface);
    display: none; /* hidden by default — shown only when is-online class present */
}
.is-online .online-dot,
.is-online .avatar-online { display: block; }
.online-dot-sm {
    display: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    border: 2px solid var(--surface);
    flex-shrink: 0;
}
.is-online .online-dot-sm { display: inline-block; }

/* ── UPLOAD MODAL ── */
.upload-type-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}
.upload-type-btn.active {
    background: var(--brand-light);
    border-color: var(--brand);
    color: var(--brand);
}
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── SKELETON ── */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    position: relative;
    overflow: hidden;
    /* Theme-aware base */
    background-color: var(--surface-2) !important;
    /* The Sweep: a diagonal highlight, using the border token so it still reads in dark mode */
    background-image: linear-gradient(
        110deg, 
        var(--surface-2) 35%, 
        var(--border) 50%, 
        var(--surface-2) 65%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
    
    /* Clean up the element */
    border: none !important;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
}

/* Ensure all internal content is hidden */
.skeleton * {
    visibility: hidden !important;
}

/* 4. Fix for Images specifically */
img.skeleton {
    object-position: -9999px; /* Moves the real image out of view */
    background-clip: content-box;
}

/* Force different widths so the text lines look staggered/natural */
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }

/* ── RESPONSIVE — MOBILE FIRST ── */

/* Mobile base: sidebars hidden, bottom nav visible */
.search-bar-wrap  { display: none; }
.search-bar       { display: none; }
.hamburger-btn    { display: flex; }
.mob-search-btn   { display: flex; }
.create-label     { display: none; }
.btn-create       { padding: 0 12px; }




/* 1. Parent Fix (Crucial for Sticky) */
.layout, .main-content {
    overflow: visible !important;
}

/* 2. The Sticky Action Bar */
.feed-sort {
    position: -webkit-sticky;
    position: sticky;
    /* Ken: was top:70px, leaving a 10px gap below the 60px navbar where
       the bar visibly floated before sticking. Flush against the navbar
       now. */
    top: 63px;
    z-index: 50; /* Stays above posts but below main navbar */
    
    /* Solid background + Glass Effect */
    background: var(--surface); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Spacing & Alignment */
    padding: 12px 0;
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
    
    /* Subtle separation from content below */
    border-bottom: 1px solid var(--border);
}

/* Ensure buttons don't shift when bar sticks */
.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}



.comment-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid var(--surface);
    border-radius: 50%;
    z-index: 2;
}



/* Desktop: Forced 520px height with cover crop */
.feed-meme-wrapper {
    display: block;
    width: 100%;
    height: 520px;
    overflow: hidden;
}
.feed-meme-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Mobile: Full aspect ratio (Natural height) */
@media (max-width: 768px) {
    .feed-meme-wrapper {
        height: auto !important;
    }
    .feed-meme-img {
        height: auto !important;
        object-fit: contain !important; /* Shows the full image without cropping */
    }
}

/* Mobile Tweak: Ensure the bar doesn't cut off on small screens */
@media (max-width: 600px) {
    .feed-sort {
        overflow-x: auto; /* Allow horizontal swipe if tabs are too wide */
        padding: 10px 16px;
        scrollbar-width: none; /* Hide scrollbar for clean look */
    }
    .feed-sort::-webkit-scrollbar { display: none; }
}




/* Tablet ≥ 768px */
@media (min-width: 768px) {
    :root { --sidebar-w: 210px; }
    .layout {
        max-width: 1300px;
        padding: 20px 16px 24px;
        grid-template-columns: var(--sidebar-w) 1fr;
        gap: 20px;
    }
    /* Center the top-bar icon over the sidebar column below it (Ken:
       previously a hardcoded 75px inline padding-left that only
       approximately lined up). .navbar-inner and .layout share the same
       max-width/margin/left-padding, so a box exactly --sidebar-w wide,
       flush against that same left edge, lines up with the sidebar to the
       pixel. Mobile is untouched - it now relies only on the navbar's own flex gap. */
    .logo {
        padding-left: 0;
        width: var(--sidebar-w);
        justify-content: center;
    }
    .left-sidebar       { display: block; }
    .right-sidebar      { display: none; }
    .search-bar-wrap    { display: flex; }
    .search-bar         { display: flex; }
    .hamburger-btn      { display: none; }
    .mob-search-btn     { display: none; }
    .mobile-bottom-nav  { display: none; }
    .modal              { max-width: 480px; }
    .create-label       { display: inline; }
    .btn-create         { padding: 0 18px; }
    #navBellDesktop     { display: flex !important; }
    #navMessagesDesktop { display: flex !important; }
}

/* Desktop ≥ 1080px */
@media (min-width: 1080px) {
    :root { --sidebar-w: 220px; }
    .layout { grid-template-columns: var(--sidebar-w) 1fr 260px; }
    .right-sidebar { display: block; }
}

/* ── MENTION SYSTEM ── */
.mention-textarea-wrap { position: relative; }
.mention-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999; /* must be above everything */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
    display: none;
}
.mention-link {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.mention-link:hover { text-decoration: underline; }

/* ── STATUS POST SPECIFIC ── */
.status-post-card .post-caption { white-space: pre-wrap; word-break: break-word; }
.post-menu { animation: modal-in 0.15s ease; z-index: 20 !important;}
.repost-btn.reposted { color: #16a34a !important; }
.post-action-btn.liked { color: #e11d48; }

/* ── Post action buttons (global — used in meme modal on all pages) ── */
.post-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.post-action-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 10px;
    border: none; background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.post-action-btn:hover { background: var(--brand-light); color: var(--brand); }
.post-action-btn.liked { color: #e11d48; }
.post-action-btn.liked:hover { background: #fff1f2; }
.post-action-btn.saved { color: var(--brand); }




/* Bookmark active state */
.post-action-btn.bookmark-btn.saved {
    color: #eab308; /* A nice gold/yellow color */
}
.post-action-btn.bookmark-btn.saved i {
    fill: #eab308; /* Fills the bookmark icon */
}


/* ── COMMENT FACELIFT ── */
.comment-card { 
    position: relative; 
    padding: 12px 0 4px;
}
.comment-reply-wrapper {
    position: relative;
    padding-left: 42px; /* Space for the connector line */
}
/* Vertical Connector Line */
.comment-reply-wrapper::before {
    content: '';
    position: absolute;
    left: 19px; /* Centered under parent avatar */
    top: -12px;
    bottom: 24px;
    width: 2px;
    background: var(--border);
    border-radius: 2px;
}
.comment-card .post-avatar {
    z-index: 2; /* Sit above the line */
}
.comment-content-area {
    flex: 1;
    min-width: 0;
}
.comment-meta-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: 13px;
}
.comment-body-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    word-break: break-word;
    margin-bottom: 6px;
}
.comment-actions-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.comment-action-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    transition: color 0.15s;
}
.comment-action-link:hover { color: var(--brand); }
.comment-action-link.liked { color: #e11d48; }
.comment-action-link.delete:hover { color: #e11d48; }

/* Nested Reply sizing */
.comment-reply .post-avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; }
.comment-reply .comment-body-text { font-size: 13px; }






/* ── Pagination Facelift ── */
.pagination-wrap nav {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.pagination-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    gap: 6px;
    padding: 0;
    max-width: 100%;
}
/* On a narrow phone even a handful of page pills can run past the
   viewport edge (Ken: XP history's pagination "way too long on
   mobile") - shrink the pill size and let them wrap onto a second
   row instead of forcing a single overflowing line. Controllers also
   pass onEachSide(1) now so there are fewer pills to begin with. */
@media (max-width: 480px) {
    .pagination-wrap li span,
    .pagination-wrap li a {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 13px;
    }
    .pagination-wrap ul {
        gap: 4px;
    }
}
.pagination-wrap li span, 
.pagination-wrap li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.pagination-wrap li a:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.pagination-wrap li.active span {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pagination-wrap li.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}
/* Hide the "Showing X to Y of Z results" text if it appears */
.pagination-wrap nav > div:first-child { display: none; }





.preview-remove-btn {
    position: absolute;
    top: 10px;
    left: 10px; /* Put it on the opposite side of the 'Studio' button */
    width: 28px;
    height: 28px;
    background: rgba(225, 29, 72, 0.9); /* Subtle red */
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.15s, background 0.15s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.preview-remove-btn:hover {
    transform: scale(1.1);
    background: #e11d48;
}




.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--color-text-tertiary, #999);
    font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}



.btn-tip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: transparent;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s;
    line-height: 1;
}
.btn-tip:hover {
    color: #f59e0b;
}
.btn-tip i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}


.btn-tip-profile {
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.btn-tip-profile:hover {
    border-color: #f59e0b;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
}
.btn-tip-profile i {
    display: inline-block;
    width: 14px;
    height: 14px;
}


/* Upload Progress & Success States */
/* 1. The Loading Overlay (Stays absolute to cover the form during upload) */
#uploadOverlay {
    position: absolute; inset: 0;
    background: rgba(var(--surface-rgb), 0.85);
    backdrop-filter: blur(8px);
    z-index: 10; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 30px; text-align: center; border-radius: inherit;
}

/* 2. The Success State (Relative so it gives the modal height) */
#uploadSuccessState {
    display: none; 
    flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px; 
    text-align: center; 
    width: 100%;
    min-height: 400px; /* Ensures the modal stays open */
}

.progress-container { width: 100%; max-width: 260px; background: var(--surface-2); height: 8px; border-radius: 10px; overflow: hidden; margin: 20px 0; border: 1px solid var(--border); }
.progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--brand), #a855f7); transition: width 0.3s ease; }

.success-icon { width: 64px; height: 64px; background: #f0fdf4; color: #16a34a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
@keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 320px; margin-top: 20px; }


/* ── Success Screen Share Buttons ── */
.success-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--text-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.success-share-btn:hover {
    border-color: var(--brand);
    background: var(--brand-light);
    color: var(--brand);
    transform: translateY(-2px);
}

.success-share-btn i, .success-share-btn svg {
    width: 20px;
    height: 20px;
}

/* Primary "View Post" button */
.success-primary-btn {
    grid-column: span 2;
    background: var(--brand);
    color: #fff;
    padding: 14px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
    transition: opacity 0.15s;
}

.success-primary-btn:hover {
    opacity: 0.9;
}




/* Surgical fix to ensure the heart fills when liked */
.like-btn.liked svg {
	fill: #e11d48; /* This is the red color used in your app */
}




/* ── MENTION PILL ANIMATION ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.mention-pill { animation: fadeIn 0.2s ease; }

/* ── SELECT DROPDOWN STYLING ── */
select.form-select {
    appearance: none;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 7px 32px 7px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
select.form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }




article.promoted-post {
    border-top: 4px solid var(--brand) !important;
    //border-bottom: 5px solid var(--brand) !important;
    //border-left: 1px solid var(--brand) !important;
    //border-right: 1px solid var(--brand) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: var(--surface) !important;
}



/* ── AD CARD MOBILE RESPONSIVE ── */
@media (max-width: 767px) {

    /* Feed forum thread ad — stack vertically, hide button */
    .feed-ad-forum {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .feed-ad-forum .feed-ad-cta {
        align-self: flex-start !important;
    }

    /* Feed collective ad — stack vertically */
    .feed-ad-collective {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .feed-ad-collective .feed-ad-cta {
        align-self: flex-start !important;
    }

    /* Feed house ad — stack vertically */
    .feed-ad-house {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
    }
    .feed-ad-house .feed-ad-cta {
        align-self: flex-start !important;
    }
    .feed-ad-house-icon {
        width: 38px !important;
        height: 38px !important;
    }
}


/* Post action bar mobile fix */
@media (max-width: 640px) {
    .post-actions {
        gap: 8px !important;
    }
    
    .post-action-btn {
        min-width: 0;
        flex-shrink: 1;
    }
    
    .post-action-btn span {
        font-size: 11px;
    }
}

/* ── Auto-linked plain URLs (autolink_urls() / clientAutolinkUrls) ── */
.body-link {
    color: var(--brand);
    text-decoration: none;
    word-break: break-all;
}

/* ── Open Graph link preview cards (comments / forum posts / status updates) ── */
.og-preview-slot:empty {
    display: none;
}
.og-preview-card {
    display: flex;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--surface-2);
    transition: border-color 0.15s;
}
.og-preview-card:hover {
    border-color: var(--brand);
}
.og-preview-image {
    width: 96px;
    min-width: 96px;
    background-size: cover;
    background-position: center;
    background-color: var(--surface);
}
.og-preview-body {
    padding: 10px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.og-preview-site {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.og-preview-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.og-preview-desc {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── TWEMOJI ──
   Ken: Twemoji (loaded in layouts/app.blade.php) swaps unicode emoji for
   <img class="emoji"> elements so they render consistently across OSes
   (fixes Windows missing color flag glyphs). Twemoji does NOT ship this
   sizing CSS itself - without it the <img> has no explicit width/height,
   so browsers fall back to the SVG's own intrinsic size (or the ~300x150
   replaced-element default), rendering emoji far too large in post
   bodies, comments, etc. This pins them back to a normal inline-text
   size, matching Twitter's own recommended twemoji.css. */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* ── CUSTOM SELECT (.csel) ──
   Replaces plain native <select> popups (which render with unstyleable
   OS/browser chrome - white background, blue highlight - clashing with the
   app's dark theme) with a div-based dropdown styled to match the rest of
   the UI. A real <select class="csel-native"> is kept (visually hidden,
   still a real form field with its own name/id/onchange) so existing
   server-side form submission and JS that reads .value keep working
   unchanged; the visible trigger + menu are just a skin on top of it.
   The menu is positioned with position:fixed computed at open-time (see
   openCsel() in layouts/app.blade.php) rather than plain CSS
   position:absolute, so it escapes ancestor overflow:hidden/auto clipping
   - needed since the Post-to-Collective instance lives inside the Create
   modal's scrolling body. */
.csel { position: relative; display: inline-block; }
.csel-native {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.csel-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.csel-trigger:hover, .csel.open .csel-trigger { border-color: var(--brand); }
.csel-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-trigger-chevron { width: 12px; height: 12px; margin-left: auto; color: var(--text-muted); transition: transform 0.15s; flex-shrink: 0; }
.csel.open .csel-trigger-chevron { transform: rotate(180deg); }
.csel-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    padding: 6px;
    z-index: 500;
    max-height: 240px;
    overflow-y: auto;
}
.csel.open .csel-menu { display: block; }
.csel-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.csel-option:hover { background: var(--brand-light); color: var(--brand); }
.csel-option.selected { background: var(--brand-light); color: var(--brand); }

/* ── HASH-TARGET FLASH ──
   Ken's request: a link like /memes/785/...#comment-40 already scrolls to
   that element natively (the browser's own anchor behavior against its
   id="comment-40"), but landing on it with no visual cue makes it easy to
   miss which comment/reply/forum-post you were sent to, especially in a
   long thread. flashHashTarget() in layouts/app.blade.php adds this class
   to whatever element the URL hash points to on page load, then removes it
   after the animation finishes.
   Ken's follow-up: the original single 2.2s fade-out wasn't noticeable
   enough. Pulses 3 times instead of fading once, at a stronger opacity
   (0.4 vs 0.22) and with a matching outline ring so it also reads on
   elements with little background area to flash against. Keep the
   iteration count here in sync with the setTimeout duration in
   flashHashTarget(). */
@keyframes hashFlash {
    0%, 100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
    50%      { background-color: rgba(168,85,247,0.4); box-shadow: 0 0 0 2px rgba(168,85,247,0.6); }
}
.hash-flash { animation: hashFlash 0.7s ease-in-out 3; border-radius: 10px; }