/* ============================================================
   Vellure UI layer
   Global refinements applied on top of the compiled Bootstrap
   theme + app.css. Scoped per theme via body.theme-dark /
   body.theme-light (set in the layout files).
   Palette: gold #d8b56c / #b08d4f, warm dark surfaces.
   ============================================================ */

:root {
    --vl-gold: #d8b56c;
    --vl-gold-strong: #b08d4f;
    --vl-gold-soft: rgba(216, 181, 108, 0.12);
    --vl-gold-border: rgba(216, 181, 108, 0.14);
    --vl-radius: 18px;
    --vl-radius-sm: 12px;
}

body.theme-dark {
    /* Page sits on a deep warm black so the cards (lighter) can float above it */
    background-color: #161311 !important;
    --vl-surface: #211d1a;
    --vl-surface-2: #2a251f;
    --vl-surface-hover: rgba(216, 181, 108, 0.07);
    --vl-border: rgba(216, 181, 108, 0.12);
    --vl-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28);
    --vl-text-strong: #f5efe4;
}

/* Keep the neutral strips (stories bar, mobile nav) in the same warm family */
body.theme-dark .neutral-bg {
    background-color: #1b1815 !important;
}

body.theme-light {
    /* Warm off-white so the white cards separate from the page */
    background-color: #f7f4ef !important;
    --vl-surface: #ffffff;
    --vl-surface-2: #faf7f2;
    --vl-surface-hover: rgba(176, 141, 79, 0.07);
    --vl-border: rgba(120, 90, 40, 0.12);
    --vl-shadow: 0 1px 2px rgba(60, 45, 20, 0.05), 0 10px 24px rgba(60, 45, 20, 0.07);
    --vl-text-strong: #241d12;
}

/* ------------------------------------------------------------
   App shell: unified background, sticky navigation,
   collapsible left rail, hideable right widgets column
   ------------------------------------------------------------ */

/* Hard column separators are gone; cards carry the structure now */
.main-wrapper .border-left {
    border-left: 0 !important;
}

.main-wrapper .border-right {
    border-right: 0 !important;
}

@media (min-width: 768px) {
    /* Left navigation stays in view while scrolling */
    .main-wrapper > .col-md-3 > .side-menu {
        position: sticky;
        top: 0.75rem;
        max-height: calc(100vh - 1.5rem);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .main-wrapper > .col-md-3 > .side-menu::-webkit-scrollbar {
        display: none;
    }

    /* Right widgets column follows the scroll too */
    .feed-widgets {
        position: sticky;
        top: 0.75rem;
    }

    /* --- Collapsed (icon-only) left rail --- */
    .main-wrapper > .col-md-3,
    .main-wrapper > .content-wrapper {
        transition: max-width 0.18s ease, flex-basis 0.18s ease;
    }

    body.vl-nav-collapsed .main-wrapper > .col-md-3 {
        flex: 0 0 92px;
        max-width: 92px;
    }

    body.vl-nav-collapsed .main-wrapper > .content-wrapper {
        flex: 1 1 0;
        max-width: calc(100% - 92px);
    }

    body.vl-nav-collapsed .side-menu .side-menu-label,
    body.vl-nav-collapsed .side-menu .side-menu-action-text,
    body.vl-nav-collapsed .side-menu .user-details > div:nth-child(2),
    body.vl-nav-collapsed .side-menu .side-menu-create-toggle {
        display: none !important;
    }

    body.vl-nav-collapsed .side-menu .user-side-menu .nav-link {
        justify-content: center !important;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    body.vl-nav-collapsed .side-menu .user-details {
        justify-content: center;
    }

    /* Create button becomes a round "+" in the collapsed rail */
    body.vl-nav-collapsed .side-menu .side-menu-create-group .side-menu-create-main,
    body.vl-nav-collapsed .side-menu .side-menu-create-group .btn {
        border-radius: 999px !important;
    }

    body.vl-nav-collapsed .side-menu .side-menu-create-group {
        display: flex;
        justify-content: center;
    }

    body.vl-nav-collapsed .side-menu .side-menu-create-group .side-menu-action-btn {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.vl-nav-collapsed .side-menu .side-menu-action-content {
        justify-content: center !important;
    }

    /* Theme pins the icon to the left edge (position: absolute; left: 0);
       release it in the collapsed rail so flexbox can center the "+" */
    body.vl-nav-collapsed .side-menu .user-side-menu .side-menu-action-icon {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* Collapse toggle: swap icons depending on state.
   !important needed: the theme applies a higher-specificity display rule
   to icon wrappers which would otherwise show both icons at once. */
.side-menu .vl-nav-expand-icon {
    display: none !important;
}

body.vl-nav-collapsed .side-menu .vl-nav-collapse-icon {
    display: none !important;
}

body.vl-nav-collapsed .side-menu .vl-nav-expand-icon {
    display: inline-flex !important;
}

/* --- Hideable right widgets column (drawer handle at viewport edge) --- */
.vl-widgets-toggle {
    display: none;
}

@media (min-width: 768px) {
    .vl-widgets-toggle {
        position: fixed;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        z-index: 950;
        width: 30px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--vl-border);
        border-radius: 999px;
        background: var(--vl-surface);
        color: inherit;
        opacity: 0.55;
        transition: opacity 0.15s ease, color 0.15s ease;
        padding: 0;
    }

    .vl-widgets-toggle:hover {
        opacity: 1;
        color: var(--vl-gold);
        border-color: rgba(216, 181, 108, 0.45);
    }

    .vl-widgets-toggle .vl-widgets-toggle-show,
    body.vl-widgets-hidden .vl-widgets-toggle .vl-widgets-toggle-hide {
        display: none;
    }

    body.vl-widgets-hidden .vl-widgets-toggle .vl-widgets-toggle-show {
        display: flex;
    }

    body.vl-widgets-hidden .main-wrapper .vl-widgets-col {
        display: none !important;
    }

    body.vl-widgets-hidden .main-wrapper .vl-center-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Keep the feed column readable when it goes full width */
    body.vl-widgets-hidden .main-wrapper .vl-center-col .posts-wrapper .post-box {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ------------------------------------------------------------
   Settings: navigation list gets the gold treatment
   ------------------------------------------------------------ */
.settings-nav .list-group-item {
    background: transparent;
    border-color: var(--vl-border);
    transition: background 0.12s ease, color 0.12s ease;
}

.settings-nav .list-group-item:hover {
    background: rgba(216, 181, 108, 0.08);
}

.settings-nav .list-group-item.active {
    background: linear-gradient(90deg, rgba(216, 181, 108, 0.16), rgba(216, 181, 108, 0.04));
    border-left: 2px solid var(--vl-gold);
    color: var(--vl-gold);
}

.settings-nav .list-group-item.active .h6,
.settings-nav .list-group-item.active span {
    color: var(--vl-gold) !important;
}

/* ------------------------------------------------------------
   Feed: posts become elevated cards
   ------------------------------------------------------------ */

.posts-wrapper .post-box {
    background: var(--vl-surface);
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius);
    box-shadow: var(--vl-shadow);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 0 0.9rem 1.4rem;
}

/* The old flat separators between posts are no longer needed */
.posts-wrapper > hr {
    display: none;
}

.feed-box.posts-wrapper {
    padding-top: 1.25rem !important;
}

/* Post media hugs the card, so round it slightly where it meets edges */
.post-box .post-media img,
.post-box .post-media video {
    border-radius: 2px;
}

/* Post header: slightly stronger name emphasis */
.post-box .post-details .text-bold a {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Engagement pills: gold tint feedback */
.post-box .h-pill:not(.disabled):hover,
.mobile-bottom-nav .h-pill:hover {
    background: var(--vl-gold-soft) !important;
    color: var(--vl-gold) !important;
}

.post-box .react-button.active {
    color: var(--vl-gold);
}

/* ------------------------------------------------------------
   Locked / PPV content
   ------------------------------------------------------------ */

.post-box .locked-media.svg-locked-post {
    background-color: var(--vl-surface-2);
    background-size: 420px !important;
    border-top: 1px solid var(--vl-border);
    border-bottom: 1px solid var(--vl-border);
}

body.theme-dark .post-box .locked-media.svg-locked-post {
    background-color: #191613;
}

/* Story ring: separator between gold ring and avatar follows the theme */
body.theme-dark .story-thumb-avatar {
    border-color: #171412;
}

body.theme-dark .story-thumb-add-badge {
    border-color: #171412;
}

/* ------------------------------------------------------------
   Left side menu
   ------------------------------------------------------------ */

.side-menu .user-side-menu .nav-link {
    border-radius: var(--vl-radius-sm);
    margin-bottom: 0.2rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.side-menu .user-side-menu .nav-link:hover {
    background: var(--vl-surface-hover);
    color: var(--vl-gold);
}

.side-menu .user-side-menu .nav-link.active {
    background: linear-gradient(90deg, rgba(216, 181, 108, 0.18), rgba(216, 181, 108, 0.04)) !important;
    color: var(--vl-gold) !important;
    box-shadow: inset 3px 0 0 var(--vl-gold);
}

body.theme-light .side-menu .user-side-menu .nav-link.active {
    color: var(--vl-gold-strong) !important;
    box-shadow: inset 3px 0 0 var(--vl-gold-strong);
}

.side-menu .user-details .user-avatar {
    border: 2px solid var(--vl-gold-border);
}

/* ------------------------------------------------------------
   Right column widgets (suggestions, search, tags)
   ------------------------------------------------------------ */

.feed-widgets .suggestions-box,
.feed-widgets #suggestions-box {
    background: var(--vl-surface);
    border: 1px solid var(--vl-border) !important;
    border-radius: var(--vl-radius) !important;
    box-shadow: var(--vl-shadow);
}

.feed-widgets .search-box-wrapper .input-group {
    background: var(--vl-surface);
    border: 1px solid var(--vl-border);
    border-radius: 999px;
    overflow: hidden;
}

.feed-widgets .search-box-wrapper .form-control {
    background: transparent;
    border: 0 !important;
    padding-left: 1.1rem;
}

.feed-widgets .search-box-wrapper .input-group-text {
    background: transparent;
    border: 0;
}

.feed-widgets .search-box-wrapper .input-group:focus-within {
    border-color: rgba(216, 181, 108, 0.45);
    box-shadow: 0 0 0 3px rgba(216, 181, 108, 0.10);
}

/* ------------------------------------------------------------
   Create / edit post (composer card)
   ------------------------------------------------------------ */

.vl-composer-width {
    max-width: 760px;
}

.vl-page-header h5 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.7;
}

.vl-composer {
    position: relative;
    background: var(--vl-surface);
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius);
    box-shadow: var(--vl-shadow);
    padding: 1.25rem 1.25rem 0.9rem;
    overflow: hidden;
}

/* Gold hairline accent along the top of the card */
.vl-composer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(216, 181, 108, 0.55), transparent);
}

.vl-composer-avatar {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border: 2px solid var(--vl-gold-border);
}

.hl-textarea-wrap .hl-textarea,
textarea.dropzone {
    background: var(--vl-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--vl-radius-sm) !important;
    min-height: 170px;
    padding: 0.9rem 1rem;
    font-size: 1.02rem;
    line-height: 1.55;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hl-textarea-wrap .hl-textarea:focus,
textarea.dropzone:focus {
    border-color: rgba(216, 181, 108, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(216, 181, 108, 0.10) !important;
}

/* Action buttons (Files / Price / Poll / AI / Scheduling) become chips */
.vl-composer .h-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vl-border);
    border-radius: 999px;
    padding: 0.42rem 0.95rem;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vl-composer .h-pill:not(.disabled):hover {
    background: var(--vl-gold-soft) !important;
    border-color: rgba(216, 181, 108, 0.45);
    color: var(--vl-gold) !important;
    cursor: pointer;
}

body.theme-light .vl-composer .h-pill:not(.disabled):hover {
    color: var(--vl-gold-strong) !important;
}

.vl-composer .h-pill.disabled {
    opacity: 0.45;
}

/* Attachment previews area only takes space when it has content */
.vl-composer .dropzone-previews:not(:empty) {
    border: 1px dashed rgba(216, 181, 108, 0.35);
    border-radius: var(--vl-radius-sm);
    padding: 0.6rem;
    margin-bottom: 0.85rem;
}

.vl-composer .draft-clear-button {
    color: inherit;
    opacity: 0.65;
}

.vl-composer .draft-clear-button:hover {
    opacity: 1;
    color: var(--vl-gold);
    text-decoration: none;
}

/* ------------------------------------------------------------
   Messenger
   ------------------------------------------------------------ */

/* Own messages: gold gradient bubble with dark text */
.message-bubble.alert-primary,
.paid-message-box.alert-primary {
    background: linear-gradient(135deg, #e3c17c 0%, #c49a55 100%) !important;
    border: 0;
    color: #241b0e !important;
}

.message-bubble.alert-primary a,
.paid-message-box.alert-primary a {
    color: #241b0e !important;
    text-decoration: underline;
}

/* Received messages: soft surface bubble */
.message-bubble.alert-default,
.paid-message-box.alert-default {
    background: var(--vl-surface-2) !important;
    border: 1px solid var(--vl-border) !important;
}

/* Conversation list rows */
.contact-box {
    border-radius: var(--vl-radius-sm);
    margin: 0.15rem 0.4rem;
    transition: background-color 0.15s ease;
}

.contact-box:hover {
    background: var(--vl-surface-hover);
}

.contact-box.active {
    background: var(--vl-gold-soft) !important;
    box-shadow: inset 3px 0 0 var(--vl-gold);
}

/* Composer input */
.conversation-writeup .form-control,
.conversation-writeup textarea {
    background: var(--vl-surface) !important;
    border: 1px solid var(--vl-border) !important;
    border-radius: 999px !important;
    padding-left: 1.1rem !important;
}

.conversation-writeup .form-control:focus,
.conversation-writeup textarea:focus {
    border-color: rgba(216, 181, 108, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(216, 181, 108, 0.10) !important;
}

/* ------------------------------------------------------------
   Profile
   ------------------------------------------------------------ */

.profile-cover-bg {
    border-radius: 0 0 var(--vl-radius) var(--vl-radius);
}

.profile-page-avatar-holder img,
.profile-page-avatar-holder video {
    border: 3px solid var(--vl-gold) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------
   Shared elements: modals, dropdowns, inputs
   ------------------------------------------------------------ */

.modal-content {
    border-radius: var(--vl-radius) !important;
    border: 1px solid var(--vl-border) !important;
    box-shadow: var(--vl-shadow);
}

.dropdown-menu {
    border-radius: var(--vl-radius-sm) !important;
    border: 1px solid var(--vl-border) !important;
    box-shadow: var(--vl-shadow) !important;
    overflow: hidden;
}

.dropdown-menu .dropdown-item {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.dropdown-menu .dropdown-item:hover {
    background: var(--vl-gold-soft);
    color: var(--vl-gold);
}

body.theme-light .dropdown-menu .dropdown-item:hover {
    color: var(--vl-gold-strong);
}

/* Primary buttons: consistent gold gradient with soft glow */
.btn-primary,
.bg-gradient-primary.btn,
button.bg-gradient-primary {
    box-shadow: 0 4px 14px rgba(216, 181, 108, 0.22);
}

.btn-primary:hover,
.bg-gradient-primary.btn:hover {
    box-shadow: 0 6px 18px rgba(216, 181, 108, 0.32);
}