/**
 * Volca custom CSS that MUST live in the child theme.
 *
 * The site's historical stylesheet remains in WordPress Customizer >
 * Additional CSS and is intentionally not copied here. This file contains
 * the CSS for Volca-specific functionality plus the standalone /v/ surface.
 */

/* -------------------------------------------------------------
 * Spoilers
 * ------------------------------------------------------------- */
.volca-spoiler {
    display: inline-block;
    background: #000;
    color: #000 !important;
    cursor: pointer;
    border-radius: 2px;
    padding: 0 0.15em;
    transition: color 120ms ease, background-color 120ms ease;
}

.volca-spoiler:not(.is-revealed),
.volca-spoiler:not(.is-revealed) * {
    color: #000 !important;
}

.volca-spoiler-block {
    display: block;
    max-width: 100%;
    margin: 9px 0;
    padding: 7px 0;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.volca-spoiler:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.volca-spoiler.is-revealed {
    background: transparent;
    color: inherit !important;
}

.volca-spoiler.is-revealed * {
    color: inherit !important;
}


/* Inline spoiler formatting can sit inside an existing Gutenberg paragraph. */
.volca-spoiler-inline {
    vertical-align: baseline;
}

/* Individual images may be spoilers inside Gutenberg galleries or uploaded /makev/ galleries. */
figure.volca-image-spoiler,
a.volca-image-spoiler {
    position: relative !important;
    isolation: isolate;
    cursor: pointer;
    overflow: hidden;
}

a.volca-image-spoiler {
    display: block;
}

.volca-image-spoiler:not(.is-revealed)::after {
    content: "SPOILER";
    position: absolute;
    z-index: 8;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    border-radius: inherit;
    background: #000;
    color: #fff;
    font: 700 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.12em;
    text-align: center;
}

.volca-image-spoiler:focus-visible {
    outline: 3px solid #1d9bf0;
    outline-offset: 3px;
}

.volca-image-spoiler.is-revealed::after {
    display: none;
}

/* /makev/: preview each selected upload and let the author flag it individually. */
.vc-mp-image-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
    margin: 12px 0 6px;
}

.vc-mp-image-option {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.06);
}

.vc-mp-image-option__preview {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 4px;
}

.vc-mp-image-option__toggle {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.92em;
    line-height: 1.35;
}

.vc-mp-image-option__toggle input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.vc-mp-image-help {
    font-size: 0.9em;
    opacity: 0.8;
}

/* -------------------------------------------------------------
 * Theme switcher
 * ------------------------------------------------------------- */
.volca-view-theme-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.volca-view-theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.volca-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.volca-theme-svg {
    display: block;
    width: 22px;
    height: 22px;
}

.volca-view-theme-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Historical sidebar widgets: hide without deleting their configuration. */
#block-5.bloglo-sidebar-widget,
#block-6.bloglo-sidebar-widget {
    display: none !important;
}

/* ========================================================================
 * /v/ + single Microposts — clean X-inspired surface
 * ======================================================================== */
html body.vc-v-profile-page,
html body.vc-v-single-page {
    --vc-v-page-bg: #e6e9eb;
    --vc-v-surface: #ffffff;
    --vc-v-surface-soft: #fbfcfc;
    --vc-v-surface-alt: #f7f8f8;
    --vc-v-post-even: #fafafa;
    --vc-v-border: #eff1f2;
    --vc-v-border-strong: #cfd4d8;
    --vc-v-text: #0f1419;
    --vc-v-muted: #536471;
    --vc-v-accent: #1d9bf0;
    --vc-v-avatar-ring: #ffffff;
    --vc-v-background-image: none;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    background-color: var(--vc-v-page-bg) !important;
    background-image: var(--vc-v-background-image) !important;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: var(--vc-v-text) !important;
}

html body.vc-v-profile-page::before,
html body.vc-v-single-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.34);
}

html body.vc-v-profile-page > *,
html body.vc-v-single-page > * {
    position: relative;
    z-index: 1;
}

html body.vc-v-profile-page,
html body.vc-v-profile-page *,
html body.vc-v-single-page,
html body.vc-v-single-page * {
    box-sizing: border-box;
}

html body.vc-v-profile-page a,
html body.vc-v-single-page a {
    color: inherit;
}

/* ----------------------------- Profile shell -------------------------- */
html body.vc-v-profile-page .vc-v-profile {
    width: min(760px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    background: var(--vc-v-surface);
    border-left: 1px solid var(--vc-v-border);
    border-right: 1px solid var(--vc-v-border);
    box-shadow: 0 0 28px rgba(15, 20, 25, 0.08);
}

html body.vc-v-profile-page .vc-v-profile-topbar,
html body.vc-v-single-page .vc-v-single-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--vc-v-border-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html body.vc-v-profile-page .vc-v-home-link,
html body.vc-v-single-page .vc-v-single-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 11px 0 6px;
    border-radius: 999px;
    color: var(--vc-v-text) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

html body.vc-v-profile-page .vc-v-home-link span:first-child,
html body.vc-v-single-page .vc-v-single-back span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 23px;
    line-height: 1;
}

/* Explicitly confirms when /v/ has recognized the Volca MAUI WebView. */
html body.vc-v-profile-page .vc-v-app-recognition-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-left: 8px;
    padding: 4px 8px;
    border: 1px solid #b7e4c7;
    border-radius: 999px;
    background: #e8f7ee;
    color: #175c37;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

html body.vc-v-profile-page[data-vc-app-recognized="1"] .vc-v-app-recognition-badge {
    margin-left: 0;
}

@media (max-width: 420px) {
    html body.vc-v-profile-page .vc-v-app-recognition-badge {
        margin-left: 4px;
        padding: 3px 6px;
        font-size: 10px;
    }
}

html body.vc-v-profile-page .vc-v-rss-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    margin-left: auto;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--vc-v-muted) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
}

html body.vc-v-profile-page .vc-v-rss-link svg {
    display: block;
    width: 18px;
    height: 18px;
}

html body.vc-v-profile-page .vc-v-rss-link:hover,
html body.vc-v-profile-page .vc-v-rss-link:focus-visible {
    background: #eef1f2;
    color: var(--vc-v-text) !important;
    outline-offset: 2px;
}

html body.vc-v-profile-page .vc-v-home-link:hover,
html body.vc-v-profile-page .vc-v-home-link:focus-visible,
html body.vc-v-single-page .vc-v-single-back:hover,
html body.vc-v-single-page .vc-v-single-back:focus-visible {
    background: #eef1f2;
}

html body.vc-v-profile-page .vc-v-profile-header {
    margin: 0;
    padding: 0;
    background: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-profile-cover {
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #d9dde1;
}

html body.vc-v-profile-page .vc-v-profile-identity {
    position: relative;
    margin: 0;
    padding: 0 24px 20px;
    background: var(--vc-v-surface);
    border-bottom: 1px solid var(--vc-v-border-strong);
}

html body.vc-v-profile-page .vc-v-profile-avatar-wrap {
    width: 104px;
    height: 104px;
    border: 4px solid var(--vc-v-avatar-ring);
    border-radius: 50%;
    overflow: hidden;
    background: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-profile-header--has-cover .vc-v-profile-avatar-wrap {
    margin-top: -52px;
}

html body.vc-v-profile-page .vc-v-profile-header--no-cover .vc-v-profile-avatar-wrap {
    margin-top: 16px;
}

html body.vc-v-profile-page .vc-v-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

html body.vc-v-profile-page .vc-v-profile-copy {
    padding-top: 10px;
}

html body.vc-v-profile-page .vc-v-profile-copy h1 {
    margin: 0;
    color: var(--vc-v-text) !important;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}

html body.vc-v-profile-page .vc-v-profile-copy > p {
    margin: 2px 0 0;
    color: var(--vc-v-muted) !important;
    font-size: 15px;
    line-height: 1.4;
}

html body.vc-v-profile-page .vc-v-profile-bio {
    max-width: 650px;
    margin-top: 12px;
    color: var(--vc-v-text) !important;
    font-size: 15px;
    line-height: 1.45;
}

html body.vc-v-profile-page .vc-v-profile-details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 6px;
    margin-top: 8px;
    color: var(--vc-v-muted) !important;
    font-size: 14px;
}

html body.vc-v-profile-page .vc-v-profile-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

html body.vc-v-profile-page .vc-v-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    color: var(--vc-v-link, var(--vc-v-muted)) !important;
    text-decoration: none;
    overflow-wrap: anywhere;
}

html body.vc-v-profile-page .vc-v-profile-link:hover,
html body.vc-v-profile-page .vc-v-profile-link:focus-visible {
    color: var(--vc-v-text) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body.vc-v-profile-page .vc-v-profile-link-icon {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

/* MAUI-only compose action is injected only after the app and its writer
 * capability have both been confirmed. Keep it between profile identity and search. */
html body.vc-v-profile-page .vc-v-app-write-wrap {
    margin: 0;
    padding: 10px 20px 0;
    background: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-app-write-wrap[hidden] {
    display: none !important;
}

html body.vc-v-profile-page .vc-v-app-write-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--vc-v-accent) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none;
}

html body.vc-v-profile-page .vc-v-app-write-button:hover,
html body.vc-v-profile-page .vc-v-app-write-button:focus-visible {
    filter: brightness(0.94);
    color: #fff !important;
    outline: 2px solid var(--vc-v-accent);
    outline-offset: 2px;
}

/* ----------------------------- /v/ Search ----------------------------- */
html body.vc-v-profile-page .vc-v-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 20px;
    background: var(--vc-v-surface);
    border-bottom: 1px solid var(--vc-v-border-strong);
}

html body.vc-v-profile-page .vc-v-search-form input[type="search"] {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--vc-v-border-strong) !important;
    border-radius: 999px;
    outline-offset: 2px;
    background: var(--vc-v-surface-soft) !important;
    color: var(--vc-v-text) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 15px;
}

html body.vc-v-profile-page .vc-v-search-form input[type="search"]::placeholder {
    color: var(--vc-v-muted) !important;
    opacity: 1;
}

html body.vc-v-profile-page .vc-v-search-form input[type="search"]:focus-visible {
    border-color: var(--vc-v-accent) !important;
    outline: 2px solid var(--vc-v-accent);
}

html body.vc-v-profile-page .vc-v-search-form button[type="submit"] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    margin: 0;
    padding: 0 17px;
    border: 0;
    border-radius: 999px;
    background: var(--vc-v-accent) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

html body.vc-v-profile-page .vc-v-search-form button[type="submit"] svg {
    display: block;
    width: 17px;
    height: 17px;
}

html body.vc-v-profile-page .vc-v-search-form button[type="submit"]:hover,
html body.vc-v-profile-page .vc-v-search-form button[type="submit"]:focus-visible {
    filter: brightness(0.94);
}

html body.vc-v-profile-page .vc-v-search-clear {
    flex: 0 0 auto;
    color: var(--vc-v-muted) !important;
    font-size: 13px;
    text-decoration: none;
}

html body.vc-v-profile-page .vc-v-search-clear:hover,
html body.vc-v-profile-page .vc-v-search-clear:focus-visible {
    color: var(--vc-v-text) !important;
    text-decoration: underline;
}

/* -------------------------------- Tabs -------------------------------- */
html body.vc-v-profile-page .vc-v-tabs {
    position: sticky;
    top: 56px;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-height: 54px;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--vc-v-border-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html body.vc-v-profile-page .vc-v-tabs a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-v-muted) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

html body.vc-v-profile-page .vc-v-tabs a:hover,
html body.vc-v-profile-page .vc-v-tabs a:focus-visible {
    background: #f4f6f6;
}

html body.vc-v-profile-page .vc-v-tabs a.is-active {
    color: var(--vc-v-text) !important;
}

html body.vc-v-profile-page .vc-v-tabs a.is-active::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--vc-v-accent);
}

/* ------------------------------- Feed --------------------------------- */
html body.vc-v-profile-page .vc-v-feed {
    margin: 0;
    padding: 0;
    background: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-post {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    width: 100%;
    margin: 0;
    padding: 17px 20px 18px;
    border: 0;
    border-bottom: 1px solid var(--vc-v-border-strong);
    border-radius: 0;
    box-shadow: none;
    color: var(--vc-v-text);
    cursor: pointer;
    transition: background-color 120ms ease;
}

html body.vc-v-profile-page .vc-v-post--odd {
    background: var(--vc-v-surface);
    --vc-v-thread-break-surface: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-post--even {
    background: var(--vc-v-post-even);
    --vc-v-thread-break-surface: var(--vc-v-post-even);
}

html body.vc-v-profile-page .vc-v-post:hover {
    background: #f3f5f5;
    --vc-v-thread-break-surface: #f3f5f5;
}

html body.vc-v-profile-page .vc-v-post:focus-visible {
    outline: 2px solid var(--vc-v-accent);
    outline-offset: -2px;
}

html body.vc-v-profile-page .vc-v-post--pinned {
    box-shadow: inset 3px 0 0 var(--vc-v-accent);
}

html body.vc-v-profile-page .vc-v-post-avatar,
html body.vc-v-profile-page .vc-v-post-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

html body.vc-v-profile-page .vc-v-post-avatar img {
    display: block;
    object-fit: cover;
}

html body.vc-v-profile-page .vc-v-post-body {
    min-width: 0;
}

html body.vc-v-profile-page .vc-v-post-pinned-label {
    display: inline-flex;
    margin: -1px 0 5px;
    color: var(--vc-v-muted) !important;
    font-size: 12px;
    font-weight: 800;
}

html body.vc-v-profile-page .vc-v-post-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 5px;
    margin: 0 0 2px;
    color: var(--vc-v-muted) !important;
    font-size: 15px;
    line-height: 1.35;
}

html body.vc-v-profile-page .vc-v-post-meta a {
    text-decoration: none !important;
}

html body.vc-v-profile-page .vc-v-post-author {
    color: var(--vc-v-text) !important;
    font-weight: 800;
}

html body.vc-v-profile-page .vc-v-post-content {
    margin: 0;
    padding: 0;
    color: var(--vc-v-text) !important;
    font-size: 15.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html body.vc-v-profile-page .vc-v-post-content p {
    margin: 0 0 10px !important;
}

html body.vc-v-profile-page .vc-v-post-content p:last-child {
    margin-bottom: 0 !important;
}

html body.vc-v-profile-page .vc-v-post-content a {
    color: #0b78b8;
    text-decoration: none;
}

html body.vc-v-profile-page .vc-v-post-content a:hover {
    text-decoration: underline;
}

html body.vc-v-profile-page .vc-v-post-more {
    margin: 12px 0 0 !important;
}

html body.vc-v-profile-page .vc-v-post-more a {
    color: var(--vc-v-accent) !important;
    font-weight: 700;
}

/* --------------------------- Micropost tags --------------------------- */
.vc-v-post-tags {
    /* Keep the HR on its own row even if an old cached stylesheet used flex. */
    display: block !important;
    position: relative;
    margin: 13px 0 0;
    padding: 0 !important;
    border: 0 !important;
    color: var(--vc-v-muted, #536471);
    font-size: 13px;
    line-height: 1.5;
}

/* The separator is real HTML, and also carries inline fallback styles from PHP. */
.vc-v-post-tags-divider {
    appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    flex: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #cfd4d8 !important;
    background-image: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove the former pseudo-divider; the <hr> above is the only line. */
.vc-v-post-tags::before {
    content: none !important;
    display: none !important;
}

.vc-v-post-tags-items {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 9px;
    margin: 0;
    padding: 0;
    border: 0;
}

.vc-v-post-tags-label {
    flex: 0 0 auto;
    font-weight: 700;
}

.vc-v-post-tag {
    display: inline-block;
    color: var(--vc-v-accent, #1d9bf0) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

.vc-v-post-tag:hover,
.vc-v-post-tag:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.vc-v-post-tags--single {
    margin-top: 18px;
    font-size: 14px;
}

.vc-v-post-tags--single .vc-v-post-tags-divider {
    margin-bottom: 14px !important;
}

/* Keep the tag wrapper flush after media, but leave a visible gap before the line itself. */
.vc-v-post-tags--after-media .vc-v-post-tags-divider {
    margin-top: 10px !important;
}

/* PHP adds this modifier only when the visible final block is media. */
.vc-v-post-tags--after-media {
    margin-top: 0 !important;
}

.vc-v-post-tags--media {
    margin-top: 18px;
    color: #536471;
}

.vc-v-post-tags--media .vc-v-post-tags-divider {
    background: #e4e7e9 !important;
}

html body.vc-v-media-view-page .vc-v-post-tags--media .vc-v-post-tag {
    color: #0b78b8 !important;
}

/* ------------------------- Infinite feed loading --------------------- */
html body.vc-v-profile-page .vc-v-load-more-control {
    position: relative;
    margin: 0;
    padding: 18px 20px 22px;
    border-top: 1px solid var(--vc-v-border-strong);
    background: var(--vc-v-surface);
    text-align: center;
}

html body.vc-v-profile-page .vc-v-load-more-status {
    margin: 0 auto 12px !important;
    max-width: 32rem;
    color: var(--vc-v-muted) !important;
    font-size: 14px;
    line-height: 1.45;
}

html body.vc-v-profile-page .vc-v-load-more-button[hidden] {
    display: none !important;
}

html body.vc-v-profile-page .vc-v-load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--vc-v-border-strong);
    border-radius: 999px;
    background: var(--vc-v-surface-soft);
    color: var(--vc-v-text) !important;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

html body.vc-v-profile-page .vc-v-load-more-button:hover,
html body.vc-v-profile-page .vc-v-load-more-button:focus-visible {
    border-color: var(--vc-v-accent);
}

html body.vc-v-profile-page .vc-v-load-more-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

html body.vc-v-profile-page .vc-v-load-more-sentinel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
}

html body.vc-v-profile-page .vc-v-filter-state {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 9px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--vc-v-border-strong);
    background: var(--vc-v-surface-soft);
    color: var(--vc-v-muted);
    font-size: 14px;
}

html body.vc-v-profile-page .vc-v-filter-state a {
    margin-left: auto;
    color: var(--vc-v-accent) !important;
    font-weight: 700;
    text-decoration: none;
}

html body.vc-v-profile-page .vc-v-filter-state a:hover {
    text-decoration: underline;
}

/* Media attached to a post in the feed. */
html body.vc-v-profile-page .vc-v-post-media {
    display: grid;
    width: 100%;
    margin: 13px 0 0;
    gap: 2px;
    overflow: hidden;
    border-radius: 14px;
    background: #d8dde1;
}

html body.vc-v-profile-page .vc-v-preview-media {
    display: block;
    width: 100%;
    margin: 13px 0 0;
    overflow: hidden;
    border-radius: 14px;
    background: #d8dde1;
}

html body.vc-v-profile-page .vc-v-post-media--1 {
    grid-template-columns: 1fr;
}

html body.vc-v-profile-page .vc-v-post-media--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-post-media--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-post-media--3 .vc-v-post-media__item:first-child {
    grid-row: 1 / -1;
}

html body.vc-v-profile-page .vc-v-post-media--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-post-media--2 .vc-v-post-media__item,
html body.vc-v-profile-page .vc-v-post-media--3 .vc-v-post-media__item:not(:first-child),
html body.vc-v-profile-page .vc-v-post-media--4 .vc-v-post-media__item {
    aspect-ratio: 1 / 1;
}

html body.vc-v-profile-page .vc-v-post-media__item {
    display: block;
    min-width: 0;
    overflow: hidden;
}

html body.vc-v-profile-page .vc-v-post-media__image,
html body.vc-v-profile-page .vc-v-post-media video,
html body.vc-v-profile-page .vc-v-preview-media img,
html body.vc-v-profile-page .vc-v-preview-media video {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    object-fit: cover;
}

html body.vc-v-profile-page .vc-v-preview-media > .vc-v-gallery {
    margin: 0;
    border-radius: 0;
}

html body.vc-v-profile-page .vc-v-preview-media > img,
html body.vc-v-profile-page .vc-v-preview-media > video {
    margin: 0 !important;
}

html body.vc-v-profile-page .vc-v-post-media--1 .vc-v-post-media__image,
html body.vc-v-profile-page .vc-v-preview-media img,
html body.vc-v-profile-page .vc-v-preview-media video {
    height: auto;
    max-height: 560px;
}

html body.vc-v-profile-page .vc-v-post-media--2 .vc-v-post-media__image,
html body.vc-v-profile-page .vc-v-post-media--3 .vc-v-post-media__image,
html body.vc-v-profile-page .vc-v-post-media--4 .vc-v-post-media__image,
html body.vc-v-profile-page .vc-v-post-media--2 video,
html body.vc-v-profile-page .vc-v-post-media--3 video,
html body.vc-v-profile-page .vc-v-post-media--4 video {
    height: 100%;
}

/* ------------------------------ Media tab ----------------------------- */
html body.vc-v-profile-page .vc-v-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    background: var(--vc-v-surface);
}

html body.vc-v-profile-page .vc-v-media-item {
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #dfe3e6;
}

html body.vc-v-profile-page .vc-v-media-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

html body.vc-v-profile-page .vc-v-media-item img,
html body.vc-v-profile-page .vc-v-media-item video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    object-fit: cover;
    transition: transform 140ms ease, filter 140ms ease;
}

html body.vc-v-profile-page .vc-v-media-item:hover img,
html body.vc-v-profile-page .vc-v-media-item:hover video {
    transform: scale(1.025);
    filter: brightness(0.94);
}

/* ------------------------------ Single -------------------------------- */
html body.vc-v-single-page .vc-v-single-shell {
    width: min(760px, calc(100% - 32px));
    margin: 18px auto 32px;
}

html body.vc-v-single-page .vc-v-single-topbar {
    position: sticky;
    top: 12px;
    margin: 0 0 12px;
    border: 1px solid var(--vc-v-border-strong);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15, 20, 25, 0.08);
}

html body.vc-v-single-page .vc-v-single-post {
    margin: 0;
    padding: 20px 24px 28px;
    background: var(--vc-v-surface);
    color: var(--vc-v-text);
    border: 1px solid var(--vc-v-border-strong);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(15, 20, 25, 0.08);
}

html body.vc-v-single-page .vc-v-single-author,
html body.vc-v-media-view-page .vc-v-single-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

html body.vc-v-single-page .vc-v-single-avatar-link,
html body.vc-v-media-view-page .vc-v-single-avatar-link {
    display: block;
    flex: 0 0 auto;
}

html body.vc-v-single-page .vc-v-single-avatar,
html body.vc-v-media-view-page .vc-v-single-avatar {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

html body.vc-v-single-page .vc-v-single-author-copy,
html body.vc-v-media-view-page .vc-v-single-author-copy {
    min-width: 0;
}

html body.vc-v-single-page .vc-v-single-author-line,
html body.vc-v-media-view-page .vc-v-single-author-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

html body.vc-v-single-page .vc-v-single-author-line strong,
html body.vc-v-media-view-page .vc-v-single-author-line strong {
    font-size: 16px;
    font-weight: 800;
}

html body.vc-v-single-page .vc-v-single-author-line span,
html body.vc-v-media-view-page .vc-v-single-author-line span,
html body.vc-v-single-page .vc-v-single-author-copy time,
html body.vc-v-media-view-page .vc-v-single-author-copy time {
    color: var(--vc-v-muted);
    font-size: 14px;
}

html body.vc-v-single-page .vc-v-single-divider,
html body.vc-v-media-view-page .vc-v-single-divider {
    height: 1px;
    margin: 18px 0 20px;
    background: var(--vc-v-border);
}

html body.vc-v-single-page .vc-v-single-content,
html body.vc-v-media-view-page .vc-v-single-content {
    color: var(--vc-v-text);
    font-size: 16px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

html body.vc-v-single-page .vc-v-single-content p,
html body.vc-v-media-view-page .vc-v-single-content p {
    margin: 0 0 14px;
}

html body.vc-v-single-page .vc-v-single-content p:last-child,
html body.vc-v-media-view-page .vc-v-single-content p:last-child {
    margin-bottom: 0;
}

html body.vc-v-single-page .vc-v-single-content img,
html body.vc-v-single-page .vc-v-single-content video,
html body.vc-v-media-view-page .vc-v-single-content img,
html body.vc-v-media-view-page .vc-v-single-content video {
    max-width: 100%;
    height: auto;
}

html body.vc-v-single-page .vc-v-single-content a,
html body.vc-v-media-view-page .vc-v-single-content a {
    color: #0b78b8;
}

html body.vc-v-single-page .vc-v-single-not-found {
    padding: 48px 24px;
}

/* Explicit <v-gallery> only. Ordinary single-post media remain independent.
 * The same gallery component is used on /v/ and on single Micropost pages.
 * Gutenberg's nested gallery classes are deliberately flattened here so its
 * own flex/column sizing cannot override the four layouts below. */
html body.vc-v-profile-page .vc-v-gallery,
.vc-v-single-page .vc-v-gallery,
.vc-v-media-view-page .vc-v-gallery {
    display: grid;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0;
    gap: 2px;
    overflow: hidden;
    border-radius: 14px;
    background: #d8dde1;
}

html body.vc-v-profile-page .vc-v-post-content .vc-v-gallery > .wp-block-gallery,
.vc-v-single-page .vc-v-gallery > .wp-block-gallery,
.vc-v-media-view-page .vc-v-gallery > .wp-block-gallery {
    display: contents !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

html body.vc-v-profile-page .vc-v-gallery > *,
.vc-v-single-page .vc-v-gallery > *,
.vc-v-media-view-page .vc-v-gallery > * {
    min-width: 0;
    min-height: 0;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    flex: none !important;
}

/* Gutenberg's image figures carry their own width/flex rules. Reset those
 * rules only inside our owned gallery so the parent grid is authoritative. */
html body.vc-v-profile-page .vc-v-gallery figure.wp-block-image,
.vc-v-single-page .vc-v-gallery figure.wp-block-image,
.vc-v-media-view-page .vc-v-gallery figure.wp-block-image {
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
}

html body.vc-v-profile-page .vc-v-gallery--1,
.vc-v-single-page .vc-v-gallery--1,
.vc-v-media-view-page .vc-v-gallery--1 {
    grid-template-columns: 1fr;
}

html body.vc-v-profile-page .vc-v-gallery--2,
.vc-v-single-page .vc-v-gallery--2,
.vc-v-media-view-page .vc-v-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-gallery--3,
.vc-v-single-page .vc-v-gallery--3,
.vc-v-media-view-page .vc-v-gallery--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-gallery--3 > :first-child,
.vc-v-single-page .vc-v-gallery--3 > :first-child,
.vc-v-media-view-page .vc-v-gallery--3 > :first-child {
    grid-row: 1 / -1;
}

html body.vc-v-profile-page .vc-v-gallery--4,
.vc-v-single-page .vc-v-gallery--4,
.vc-v-media-view-page .vc-v-gallery--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

html body.vc-v-profile-page .vc-v-gallery--2 > *,
html body.vc-v-profile-page .vc-v-gallery--3 > :not(:first-child),
html body.vc-v-profile-page .vc-v-gallery--4 > *,
.vc-v-single-page .vc-v-gallery--2 > *,
.vc-v-single-page .vc-v-gallery--3 > :not(:first-child),
.vc-v-single-page .vc-v-gallery--4 > *,
.vc-v-media-view-page .vc-v-gallery--2 > *,
.vc-v-media-view-page .vc-v-gallery--3 > :not(:first-child),
.vc-v-media-view-page .vc-v-gallery--4 > * {
    aspect-ratio: 1 / 1;
}

html body.vc-v-profile-page .vc-v-gallery img,
html body.vc-v-profile-page .vc-v-gallery video,
.vc-v-single-page .vc-v-gallery img,
.vc-v-single-page .vc-v-gallery video,
.vc-v-media-view-page .vc-v-gallery img,
.vc-v-media-view-page .vc-v-gallery video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none;
    margin: 0 !important;
    object-fit: cover;
}

html body.vc-v-profile-page .vc-v-gallery--1 img,
html body.vc-v-profile-page .vc-v-gallery--1 video,
.vc-v-single-page .vc-v-gallery--1 img,
.vc-v-single-page .vc-v-gallery--1 video,
.vc-v-media-view-page .vc-v-gallery--1 img,
.vc-v-media-view-page .vc-v-gallery--1 video {
    height: auto !important;
    max-height: 560px;
    object-fit: contain;
}

/* Gutenberg figure wrappers can insert caption pseudo/layout rules; keep the
 * image tile itself free of those styles inside /v/. */
html body.vc-v-profile-page .vc-v-gallery figcaption,
.vc-v-single-page .vc-v-gallery figcaption,
.vc-v-media-view-page .vc-v-gallery figcaption {
    display: none !important;
}

.vc-v-single-page .vc-v-single-media {
    display: block;
    margin: 16px 0 0;
    padding: 0;
}

.vc-v-single-page .vc-v-single-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 14px;
}

/* ---------------------------- Media viewer ---------------------------- */
html body.vc-v-media-view-page {
    margin: 0 !important;
    background: #000 !important;
    overflow: hidden;
}

html body.vc-v-media-view-page #wpadminbar,
html body.vc-v-media-view-page #site-header,
html body.vc-v-media-view-page .site-header,
html body.vc-v-media-view-page header#masthead,
html body.vc-v-media-view-page footer,
html body.vc-v-media-view-page .site-footer {
    display: none !important;
}

html body.vc-v-media-view-page .vc-v-media-mobile-topbar {
    display: none;
}

html body.vc-v-media-view-page .vc-v-media-view {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    color: #0f1419;
}

html body.vc-v-media-view-page .vc-v-media-view-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 42px;
    background: #000;
}

html body.vc-v-media-view-page .vc-v-media-view-image,
html body.vc-v-media-view-page .vc-v-media-view-video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

html body.vc-v-media-view-page .vc-v-media-view-post {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 26px 24px 24px;
    background: #fff;
    color: #0f1419;
    border-left: 1px solid #d8dadd;
}

html body.vc-v-media-view-page .vc-v-media-view-post-inner {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
}

html body.vc-v-media-view-page .vc-v-media-nav[hidden] {
    display: none !important;
}

html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-single-divider {
    background: #e4e7e9;
}

html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-single-content {
    font-size: 15.5px;
}

html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-single-media {
    display: none;
}

html body.vc-v-media-view-page .vc-v-media-view-date {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e4e7e9;
    color: #536471;
    font-size: 14px;
}

html body.vc-v-media-view-page .vc-v-media-view-close {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 20, 25, 0.78);
    color: #fff !important;
    font-size: 28px;
    line-height: 1;
    text-decoration: none !important;
}

html body.vc-v-media-view-page .vc-v-media-view-close:hover,
html body.vc-v-media-view-page .vc-v-media-view-close:focus-visible {
    background: rgba(15, 20, 25, 0.96);
}

/* External widgets stay on top of the media viewer. */
html body.vc-v-media-view-page [id^="kofi-widget-overlay-"],
html body.vc-v-media-view-page [id^="hu-"] {
    z-index: 1000000 !important;
    pointer-events: auto !important;
}

html body.vc-v-media-view-page .vc-v-media-invalid {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 8px;
    background: #000;
    color: #fff;
}

/* --------------------------- Dark / Noir ------------------------------ */
html[data-theme="dark"] body.vc-v-profile-page,
html[data-theme="dark"] body.vc-v-single-page {
    --vc-v-page-bg: #111315;
    --vc-v-surface: #000000;
    --vc-v-surface-soft: #0b0d0e;
    --vc-v-surface-alt: #111315;
    --vc-v-post-even: #0c0e0f;
    --vc-v-border: #2b2f33;
    --vc-v-border-strong: #444a4f;
    --vc-v-text: #e7e9ea;
    --vc-v-muted: #8b98a5;
    --vc-v-avatar-ring: #000000;
}

html[data-theme="dark"] body.vc-v-profile-page::before,
html[data-theme="dark"] body.vc-v-single-page::before {
    background: rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] body.vc-v-profile-page .vc-v-profile-topbar,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-tabs,
html[data-theme="dark"] body.vc-v-single-page .vc-v-single-topbar {
    background: rgba(0, 0, 0, 0.9);
}

html[data-theme="dark"] body.vc-v-profile-page .vc-v-home-link:hover,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-home-link:focus-visible,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-rss-link:hover,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-rss-link:focus-visible,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-tabs a:hover,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-tabs a:focus-visible,
html[data-theme="dark"] body.vc-v-profile-page .vc-v-post:hover,
html[data-theme="dark"] body.vc-v-single-page .vc-v-single-back:hover,
html[data-theme="dark"] body.vc-v-single-page .vc-v-single-back:focus-visible {
    background: #17191b;
}

html[data-theme="dark"] body.vc-v-profile-page .vc-v-profile-cover {
    background-color: #22262a;
}

html[data-theme="sepia"] body.vc-v-profile-page,
html[data-theme="sepia"] body.vc-v-single-page {
    --vc-v-page-bg: #e9e4dc;
    --vc-v-surface: #fffdf9;
    --vc-v-surface-soft: #faf6ef;
    --vc-v-surface-alt: #f4efe8;
    --vc-v-post-even: #faf5ee;
    --vc-v-border: #dfd6cc;
    --vc-v-border-strong: #c9beb1;
    --vc-v-text: #28231d;
    --vc-v-muted: #756d63;
    --vc-v-avatar-ring: #fffdf9;
}

html[data-theme="sepia"] body.vc-v-profile-page::before,
html[data-theme="sepia"] body.vc-v-single-page::before {
    background: rgba(255, 250, 243, 0.24);
}

html[data-theme="sepia"] body.vc-v-profile-page .vc-v-profile-topbar,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-tabs,
html[data-theme="sepia"] body.vc-v-single-page .vc-v-single-topbar {
    background: rgba(255, 253, 249, 0.92);
}

html[data-theme="sepia"] body.vc-v-profile-page .vc-v-post:hover,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-tabs a:hover,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-tabs a:focus-visible,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-home-link:hover,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-home-link:focus-visible,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-rss-link:hover,
html[data-theme="sepia"] body.vc-v-profile-page .vc-v-rss-link:focus-visible,
html[data-theme="sepia"] body.vc-v-single-page .vc-v-single-back:hover,
html[data-theme="sepia"] body.vc-v-single-page .vc-v-single-back:focus-visible {
    background: #f0ebe4;
}


/* Keep the /v/ search row compact on narrow screens. */
@media (max-width: 480px) {
    html body.vc-v-profile-page .vc-v-search-form {
        gap: 7px;
        padding: 10px 12px;
    }

    html body.vc-v-profile-page .vc-v-search-form button[type="submit"] {
        gap: 0;
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    html body.vc-v-profile-page .vc-v-search-form button[type="submit"] span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    html body.vc-v-profile-page .vc-v-search-clear {
        font-size: 12px;
    }
}

/* ---------------------------- Mobile /v/ polish ----------------------- */
@media (max-width: 767px) {
    html body.vc-v-profile-page .vc-v-profile,
    html body.vc-v-single-page .vc-v-single-shell {
        width: 99%;
        max-width: 760px;
    }

    html body.vc-v-profile-page .vc-v-profile-cover {
        background-position: 50% 50% !important;
    }

    /* Standard Gutenberg images must fit the narrow post column. Keep the
     * explicit .vc-v-gallery grid rules untouched. */
    html body.vc-v-profile-page .vc-v-post-content > figure.wp-block-image,
    html body.vc-v-single-page .vc-v-single-content > figure.wp-block-image,
    html body.vc-v-media-view-page .vc-v-single-content > figure.wp-block-image {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html body.vc-v-profile-page .vc-v-post-content > figure.wp-block-image img,
    html body.vc-v-single-page .vc-v-single-content > figure.wp-block-image img,
    html body.vc-v-media-view-page .vc-v-single-content > figure.wp-block-image img {
        display: block;
        max-width: 100% !important;
        height: auto !important;
    }

    /* On phones the ?media=N route should look like the regular single post.
     * Keep the split viewer for desktop, but use the full post stream here. */
    html body.vc-v-media-view-page {
        --vc-v-page-bg: #e6e9eb;
        --vc-v-surface: #ffffff;
        --vc-v-border: #eff1f2;
        --vc-v-border-strong: #cfd4d8;
        --vc-v-text: #0f1419;
        --vc-v-muted: #536471;
        --vc-v-accent: #1d9bf0;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 100vh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: var(--vc-v-page-bg) !important;
        background-image: var(--vc-v-background-image, none) !important;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        color: var(--vc-v-text) !important;
    }

    html[data-theme="dark"] body.vc-v-media-view-page {
        --vc-v-page-bg: #111315;
        --vc-v-surface: #000000;
        --vc-v-border: #2b2f33;
        --vc-v-border-strong: #444a4f;
        --vc-v-text: #e7e9ea;
        --vc-v-muted: #8b98a5;
        --vc-v-accent: #1d9bf0;
    }

    html[data-theme="sepia"] body.vc-v-media-view-page {
        --vc-v-page-bg: #e9e4dc;
        --vc-v-surface: #fffdf9;
        --vc-v-border: #dfd6cc;
        --vc-v-border-strong: #c9beb1;
        --vc-v-text: #28231d;
        --vc-v-muted: #756d63;
        --vc-v-accent: #1d9bf0;
    }

    html body.vc-v-media-view-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: rgba(255, 255, 255, 0.34);
    }

    html[data-theme="dark"] body.vc-v-media-view-page::before {
        background: rgba(0, 0, 0, 0.2);
    }

    html[data-theme="sepia"] body.vc-v-media-view-page::before {
        background: rgba(255, 250, 243, 0.24);
    }

    html body.vc-v-media-view-page > * {
        position: relative;
        z-index: 1;
    }

    html body.vc-v-media-view-page .vc-v-media-view {
        position: static;
        display: block;
        width: 99%;
        max-width: 760px;
        height: auto;
        min-height: 0;
        margin: 18px auto 32px;
        padding: 0;
        overflow: visible;
        background: transparent;
        color: var(--vc-v-text);
    }

    html body.vc-v-media-view-page .vc-v-media-mobile-topbar {
        position: sticky;
        top: 12px;
        z-index: 30;
        display: flex;
        align-items: center;
        min-height: 56px;
        margin: 0 0 12px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--vc-v-border-strong);
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(15, 20, 25, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    html[data-theme="dark"] body.vc-v-media-view-page .vc-v-media-mobile-topbar {
        background: rgba(0, 0, 0, 0.9);
    }

    html[data-theme="sepia"] body.vc-v-media-view-page .vc-v-media-mobile-topbar {
        background: rgba(255, 253, 249, 0.92);
    }

    html body.vc-v-media-view-page .vc-v-media-mobile-topbar .vc-v-single-back {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        color: var(--vc-v-text) !important;
        font-size: 18px;
        font-weight: 800;
        text-decoration: none !important;
    }

    html body.vc-v-media-view-page .vc-v-media-view-close,
    html body.vc-v-media-view-page .vc-v-media-view-stage {
        display: none !important;
    }

    html body.vc-v-media-view-page .vc-v-media-view-post {
        display: block;
        min-width: 0;
        min-height: 0;
        overflow: visible;
        margin: 0;
        padding: 20px 24px 28px;
        background: var(--vc-v-surface);
        color: var(--vc-v-text);
        border: 1px solid var(--vc-v-border-strong);
        border-radius: 18px;
        box-shadow: 0 6px 24px rgba(15, 20, 25, 0.08);
    }

    html body.vc-v-media-view-page .vc-v-media-view-post-inner {
        display: block;
        min-height: 0;
    }

    html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-single-media {
        display: block;
        margin: 16px 0 0;
        padding: 0;
    }

    html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-single-media img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0;
        border-radius: 14px;
    }

    html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-post-tags--media {
        border-color: var(--vc-v-border-strong);
        color: var(--vc-v-muted);
    }

    html body.vc-v-media-view-page .vc-v-media-view-post .vc-v-post-tags--media .vc-v-post-tag {
        color: var(--vc-v-accent) !important;
    }
}


/* -------------------------------------------------------------
 * Single Micropost: relative timestamps and linked media viewer
 * These rules are scoped to single posts and do not change /v/ cards.
 * ------------------------------------------------------------- */
html body.vc-v-single-page .vc-v-relative-time--recent,
html body.vc-v-media-view-page .vc-v-relative-time--recent {
    cursor: default;
    text-decoration: none;
}

html body.vc-v-profile-page .vc-v-post-modified {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
    color: var(--vc-v-muted) !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

html body.vc-v-profile-page .vc-v-post-modified time,
html body.vc-v-single-page .vc-v-post-modified time,
html body.vc-v-media-view-page .vc-v-post-modified time {
    color: inherit !important;
    font-size: inherit !important;
}

html body.vc-v-single-page .vc-v-post-modified,
html body.vc-v-media-view-page .vc-v-post-modified {
    /* Keep the modification notice on the same metadata line as the publication time. */
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0 4px;
    margin: 0 0 0 6px;
    vertical-align: baseline;
    color: var(--vc-v-muted) !important;
    font-size: 12px;
    line-height: 1.4;
}

html body.vc-v-profile-page .vc-v-post-modified-separator {
    margin-right: 1px;
}

html body.vc-v-single-page .vc-v-relative-time--older,
html body.vc-v-media-view-page .vc-v-relative-time--older,
html body.vc-v-single-page .vc-v-relative-time--date,
html body.vc-v-media-view-page .vc-v-relative-time--date {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

html body.vc-v-single-page .vc-v-media-link,
html body.vc-v-media-view-page .vc-v-media-link {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    vertical-align: top;
    text-decoration: none !important;
    cursor: zoom-in;
}

html body.vc-v-single-page .vc-v-gallery figure.wp-block-image > a.vc-v-media-link,
html body.vc-v-media-view-page .vc-v-gallery figure.wp-block-image > a.vc-v-media-link {
    display: block;
    width: 100%;
    height: 100%;
}

html body.vc-v-single-page .vc-v-single-media > a.vc-v-media-link,
html body.vc-v-media-view-page .vc-v-single-media > a.vc-v-media-link {
    display: block;
    width: fit-content;
    max-width: 100%;
}

html body.vc-v-single-page .vc-v-media-link img,
html body.vc-v-media-view-page .vc-v-media-link img {
    display: block;
}

html body.vc-v-single-page .vc-v-media-link:focus-visible,
html body.vc-v-media-view-page .vc-v-media-link:focus-visible {
    outline: 3px solid var(--vc-v-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

html body.vc-v-media-view-page .vc-v-media-view-stage {
    position: relative;
}

html body.vc-v-media-view-page .vc-v-media-nav {
    position: absolute;
    z-index: 10;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(20, 24, 28, 0.72);
    color: #fff !important;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 120ms ease, transform 120ms ease;
}

html body.vc-v-media-view-page .vc-v-media-nav--previous {
    left: 14px;
}

html body.vc-v-media-view-page .vc-v-media-nav--next {
    right: 14px;
}

html body.vc-v-media-view-page .vc-v-media-nav:hover,
html body.vc-v-media-view-page .vc-v-media-nav:focus-visible {
    background: rgba(70, 76, 84, 0.94);
    color: #fff !important;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

html body.vc-v-media-view-page .vc-v-media-counter {
    position: absolute;
    z-index: 10;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(20, 24, 28, 0.72);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html body.vc-v-media-view-page .vc-v-media-nav {
        transition: none;
    }
}


/* v48 — fake reply segments within a single micropost */
html body.vc-v-profile-page .vc-v-reply-segment,
html body.vc-v-single-page .vc-v-reply-segment { scroll-margin-block-start: 50vh; scroll-margin-block-end: 0; }
/* v60 — a little more breathing room above and below the hidden-replies marker. */
html body.vc-v-profile-page .vc-v-reply-divider {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 22px;
    min-height: 38px;
    color: var(--vc-v-text, #0f1419);
    font-size: 14px;
    line-height: 1.3;
}

/* Replace the solid timeline just around the hidden-replies marker with a
   short dashed section, without changing the line above or below it. */
html body.vc-v-profile-page .vc-v-reply-divider-spine {
    position: absolute;
    z-index: 2;
    left: -36px;
    top: -10px;
    bottom: -10px;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--vc-v-border-strong, #cfd4d8) 0 3px,
        var(--vc-v-thread-break-surface, var(--vc-v-surface, #fff)) 3px 7px
    );
    pointer-events: none;
}

html body.vc-v-profile-page .vc-v-reply-divider-line {
    flex: 1 1 auto;
    min-width: 8px;
    height: 0;
    border: 0;
    border-top: 2px dashed var(--vc-v-border-strong, #cfd4d8);
    background: none;
}

html body.vc-v-profile-page .vc-v-reply-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 2px dashed var(--vc-v-border-strong, #cfd4d8);
    border-radius: 999px;
    background: var(--vc-v-surface, #fff);
    color: var(--vc-v-text, #0f1419) !important;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

html body.vc-v-profile-page .vc-v-reply-count:hover {
    border-color: var(--vc-v-text, #0f1419);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html body.vc-v-profile-page .vc-v-reply-count:focus-visible {
    outline: 2px solid var(--vc-v-border-strong, #cfd4d8);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    html body.vc-v-profile-page .vc-v-reply-divider {
        gap: 8px;
        margin: 17px 0 19px;
    }

    html body.vc-v-profile-page .vc-v-reply-count {
        padding: 7px 10px;
        font-size: 13px;
    }
}
.volca-reply-editor-block { padding:12px; border:1px dashed #1d9bf0; border-radius:6px; background:rgba(29,155,240,.06); }

html body.vc-v-profile-page .vc-v-reply-meta { margin:0; font-size:12px; color:var(--vc-v-muted, #536471); }
html body.vc-v-profile-page .vc-v-reply-meta a { color:inherit; text-decoration:none; }
html body.vc-v-profile-page .vc-v-reply-meta .vc-v-reply-author { color:var(--vc-v-text, #0f1419) !important; font-weight:800 !important; }

html body.vc-v-media-view-page .vc-v-reply-meta { margin: 0 0 5px; font-size: 12px; color: #536471; }

/* v54 — visually connect feed replies to their parent post. The timeline sits
   in the avatar gutter, while each displayed reply gets its own avatar/meta. */
html body.vc-v-profile-page .vc-v-post-body {
    position: relative;
    min-width: 0;
}

html body.vc-v-profile-page .vc-v-post--thread .vc-v-post-body::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -36px;
    top: 0;
    bottom: auto;
    /* The archive script measures the connector to the last visible reply
       avatar. Keep the old card-bottom length as a no-JS fallback. */
    height: var(--vc-v-thread-line-height, calc(100% - 24px));
    width: 2px;
    border-radius: 999px;
    background: var(--vc-v-border-strong, #cfd4d8);
    pointer-events: none;
}

html body.vc-v-profile-page .vc-v-post--thread .vc-v-post-avatar {
    position: relative;
    z-index: 2;
}

html body.vc-v-profile-page .vc-v-post--thread .vc-v-post-body > * {
    position: relative;
    z-index: 1;
}

html body.vc-v-profile-page .vc-v-reply-thread {
    min-width: 0;
}

html body.vc-v-profile-page .vc-v-reply-segment--root {
    min-width: 0;
}

html body.vc-v-profile-page .vc-v-reply-segment--latest {
    position: relative;
    min-width: 0;
    min-height: 48px;
    margin-top: 2px;
}

/* v63 — one visible reply needs its own separator because there is no hidden-reply divider pill. */
html body.vc-v-profile-page .vc-v-reply-thread[data-reply-count="1"] .vc-v-reply-segment--latest {
    margin-top: 18px;
    padding-top: 12px;
}

html body.vc-v-profile-page .vc-v-reply-thread[data-reply-count="1"] .vc-v-reply-segment--latest::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 1px solid var(--vc-v-border, #cfd4d8);
    pointer-events: none;
}

html body.vc-v-profile-page .vc-v-reply-thread[data-reply-count="1"] .vc-v-reply-avatar {
    top: 12px;
}

html body.vc-v-profile-page .vc-v-reply-avatar {
    position: absolute;
    left: -60px;
    top: 0;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--vc-v-surface, #fff);
    box-shadow: 0 0 0 3px var(--vc-v-surface, #fff);
    z-index: 2;
}

html body.vc-v-profile-page .vc-v-reply-avatar img {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}

html body.vc-v-profile-page .vc-v-reply-segment-main {
    min-width: 0;
}

html body.vc-v-profile-page .vc-v-reply-segment--latest .vc-v-reply-meta {
    display: block;
    margin: 0;
    line-height: 1.35;
}

html body.vc-v-profile-page .vc-v-reply-segment--latest .vc-v-reply-meta a {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--vc-v-muted, #536471);
    text-decoration: none;
}

html body.vc-v-profile-page .vc-v-reply-segment--latest .vc-v-reply-meta a:hover {
    text-decoration: underline;
}

/* v55 — render the full micropost thread like a /v/ feed card:
   one continuous surface, one avatar column, metadata/content in the right
   column, and a timeline that visually links each reply to the next. */
html body.vc-v-single-page .vc-v-single-thread {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--vc-v-text);
    background: var(--vc-v-surface);
    border: 1px solid var(--vc-v-border-strong);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(15, 20, 25, 0.08);
}

html body.vc-v-single-page .vc-v-single-thread .vc-v-single-thread-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 17px 20px 18px !important;
    color: var(--vc-v-text);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.vc-v-single-page .vc-v-single-thread--has-replies .vc-v-single-thread-item::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 44px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 999px;
    background: var(--vc-v-border-strong, #cfd4d8);
    pointer-events: none;
}

/* Start the line at the centre of the root avatar, not above the first post. */
html body.vc-v-single-page .vc-v-single-thread--has-replies .vc-v-single-thread-root::before {
    top: 41px;
}

/* The last reply only receives the connector down to the top of its avatar. */
html body.vc-v-single-page .vc-v-single-thread--has-replies .vc-v-single-thread-item:last-child::before {
    top: 0;
    bottom: auto;
    height: 17px;
}

html body.vc-v-single-page .vc-v-single-thread-avatar {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    align-self: start;
}

html body.vc-v-single-page .vc-v-single-thread-avatar .vc-v-single-avatar-link {
    display: block;
    width: 48px;
    height: 48px;
}

html body.vc-v-single-page .vc-v-single-thread-avatar .vc-v-single-avatar {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--vc-v-surface);
}

html body.vc-v-single-page .vc-v-single-thread-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

html body.vc-v-single-page .vc-v-single-thread-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 5px;
    min-width: 0;
    margin: 0 0 5px;
    color: var(--vc-v-muted);
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

html body.vc-v-single-page .vc-v-single-thread-meta .vc-v-single-thread-author {
    color: var(--vc-v-text) !important;
    font-weight: 800;
    text-decoration: none;
}

html body.vc-v-single-page .vc-v-single-thread-meta .vc-v-single-thread-author:hover {
    text-decoration: underline;
}

html body.vc-v-single-page .vc-v-single-thread-meta > span,
html body.vc-v-single-page .vc-v-single-thread-meta time {
    color: var(--vc-v-muted) !important;
    font-size: 14px;
}

html body.vc-v-single-page .vc-v-single-thread .vc-v-single-content {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--vc-v-text);
    font-size: 15.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html body.vc-v-single-page .vc-v-single-thread .vc-v-single-content p {
    margin: 0 0 10px;
}

html body.vc-v-single-page .vc-v-single-thread .vc-v-single-content p:last-child {
    margin-bottom: 0;
}


/* v57 — anchor the /v/ thread connector to the displayed root avatar.
   Normal cards place the root avatar at the top of the body. The preserved
   Customizer CSS offsets pinned avatars by 39px to clear their pinned label,
   so the connector must follow that same offset for pinned thread cards. */
html body.vc-v-profile-page .vc-v-post--thread .vc-v-post-body::before {
    top: 0;
}

html body.vc-v-profile-page .vc-v-post--thread.vc-v-post--pinned .vc-v-post-body::before {
    top: 39px;
    height: var(--vc-v-thread-line-height, calc(100% - 63px));
}

html body.vc-v-single-page .vc-v-single-thread-item + .vc-v-single-thread-item::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 20px;
    left: 80px;
    height: 1px;
    background: var(--vc-v-border, #e1e8ed);
    pointer-events: none;
}

/* The ?media=N viewer uses the same article-per-reply markup as the regular
   single page, adapted to the already white, scrollable side panel. */
html body.vc-v-media-view-page .vc-v-single-thread--media {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #0f1419;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 17px 0 18px !important;
    color: #0f1419;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.vc-v-media-view-page .vc-v-single-thread--media.vc-v-single-thread--has-replies .vc-v-single-thread-item::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 2px;
    border-radius: 999px;
    background: #d8dadd;
    pointer-events: none;
}

html body.vc-v-media-view-page .vc-v-single-thread--media.vc-v-single-thread--has-replies .vc-v-single-thread-root::before {
    top: 41px;
}

html body.vc-v-media-view-page .vc-v-single-thread--media.vc-v-single-thread--has-replies .vc-v-single-thread-item:last-child::before {
    top: 0;
    bottom: auto;
    height: 17px;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-avatar {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    align-self: start;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-avatar .vc-v-single-avatar-link,
html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-avatar .vc-v-single-avatar {
    display: block;
    width: 48px;
    height: 48px;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-avatar .vc-v-single-avatar {
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 5px;
    min-width: 0;
    margin: 0 0 5px;
    color: #536471;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-meta .vc-v-single-thread-author {
    color: #0f1419 !important;
    font-weight: 800;
    text-decoration: none;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-meta .vc-v-single-thread-author:hover {
    text-decoration: underline;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-meta > span,
html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-meta time {
    color: #536471 !important;
    font-size: 14px;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-content {
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #0f1419;
    font-size: 15.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-content p {
    margin: 0 0 10px;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-content p:last-child {
    margin-bottom: 0;
}

html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-item + .vc-v-single-thread-item::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 60px;
    height: 1px;
    background: #e4e7e9;
    pointer-events: none;
}

html body.vc-v-single-page .vc-v-single-thread-item,
html body.vc-v-media-view-page .vc-v-single-thread--media .vc-v-single-thread-item {
    scroll-margin-block-start: 50vh;
    scroll-margin-block-end: 0;
}

/* --------------------- Quoted Micropost / reply --------------------- */
.vc-v-quote {
    box-sizing: border-box;
    display: block;
    min-width: 0;
    margin: 14px 0 4px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid var(--vc-v-border-strong, #cfd4d8);
    border-radius: 14px;
    background: var(--vc-v-surface-soft, #f7f9fa);
    color: var(--vc-v-text, #0f1419);
    font: inherit;
    text-align: left;
}

.vc-v-quote-header {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0 0 10px;
}

.vc-v-quote-avatar {
    display: block;
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 50%;
    object-fit: cover;
}

.vc-v-quote-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    color: var(--vc-v-muted, #536471);
    font-size: 12px;
    line-height: 1.4;
}

.vc-v-quote-author {
    color: var(--vc-v-text, #0f1419) !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
}

.vc-v-quote-author:hover,
.vc-v-quote-author:focus-visible {
    text-decoration: underline !important;
}

.vc-v-quote-handle,
.vc-v-quote-dot {
    color: var(--vc-v-muted, #536471);
}

.vc-v-quote-content {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.96em;
    line-height: 1.5;
}

.vc-v-quote-content > :first-child {
    margin-top: 0 !important;
}

.vc-v-quote-content > :last-child {
    margin-bottom: 0 !important;
}

.vc-v-quote-content p,
.vc-v-quote-content figure,
.vc-v-quote-content blockquote {
    max-width: 100%;
}

.vc-v-quote-content img,
.vc-v-quote-content video,
.vc-v-quote-content iframe {
    max-width: 100%;
}

.vc-v-quote-content img,
.vc-v-quote-content video {
    height: auto;
    border-radius: 8px;
}

.vc-v-quote .vc-v-post-media {
    display: grid;
    width: 100%;
    margin: 11px 0 0;
    gap: 2px;
    overflow: hidden;
    border-radius: 10px;
    background: #d8dde1;
}

.vc-v-quote .vc-v-post-media--1 { grid-template-columns: minmax(0, 1fr); }
.vc-v-quote .vc-v-post-media--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-v-quote .vc-v-post-media--3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.vc-v-quote .vc-v-post-media--3 .vc-v-post-media__item:first-child { grid-row: 1 / -1; }
.vc-v-quote .vc-v-post-media--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.vc-v-quote .vc-v-post-media__item {
    display: block;
    min-width: 0;
    overflow: hidden;
}
.vc-v-quote .vc-v-post-media--2 .vc-v-post-media__item,
.vc-v-quote .vc-v-post-media--3 .vc-v-post-media__item:not(:first-child),
.vc-v-quote .vc-v-post-media--4 .vc-v-post-media__item { aspect-ratio: 1 / 1; }
.vc-v-quote .vc-v-post-media__image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 !important;
    object-fit: cover;
}
.vc-v-quote .vc-v-post-media--2 .vc-v-post-media__image,
.vc-v-quote .vc-v-post-media--3 .vc-v-post-media__image,
.vc-v-quote .vc-v-post-media--4 .vc-v-post-media__image { height: 100%; }

.vc-v-quote-footer {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
}

.vc-v-quote-footer a {
    color: var(--vc-v-accent, #1d9bf0) !important;
    font-weight: 700;
    text-decoration: none;
}

.vc-v-quote-footer a:hover,
.vc-v-quote-footer a:focus-visible {
    text-decoration: underline;
}

.vc-v-quote--unavailable {
    color: var(--vc-v-muted, #536471);
    font-size: 13px;
}


/* v67 — compact permalink controls for the root Micropost and each reply. */
.vc-v-copy-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 4px;
    margin: 0 0 0 2px;
    padding: 3px 7px;
    border: 1px solid var(--vc-v-border, #d8dadd);
    border-radius: 999px;
    background: transparent;
    color: var(--vc-v-muted, #536471);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vc-v-copy-link:hover {
    border-color: var(--vc-v-border-strong, #aeb7bf);
    background: rgba(127, 127, 127, .09);
    color: var(--vc-v-text, #0f1419);
}

.vc-v-copy-link:focus-visible {
    outline: 2px solid var(--vc-v-accent, #1d9bf0);
    outline-offset: 2px;
}

.vc-v-copy-link .vc-v-copy-link-icon {
    display: block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vc-v-copy-link .vc-v-copy-link-text {
    font-size: 11px;
    line-height: 1.2;
}

.vc-v-copy-link.is-copied {
    border-color: rgba(22, 128, 76, .35);
    color: #16804c;
}

.vc-v-copy-link.is-copy-error {
    border-color: rgba(180, 35, 24, .35);
    color: #b42318;
}

.vc-v-copy-link .vc-v-copy-link-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 480px) {
    .vc-v-copy-link {
        gap: 0;
        width: 25px;
        min-width: 25px;
        height: 25px;
        padding: 5px;
        font-size: 0;
    }

    .vc-v-copy-link .vc-v-copy-link-text {
        display: none !important;
    }

    .vc-v-copy-link .vc-v-copy-link-icon {
        flex: 0 0 13px;
    }
}

/* v70 — export a whole thread or a single reply as a shareable PNG. */
.vc-v-thread-export {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 9px 0 0;
    color: var(--vc-v-text, #0f1419);
    font: inherit;
    line-height: 1.35;
}

.vc-v-thread-export > summary {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--vc-v-border, #d8dadd);
    border-radius: 999px;
    background: transparent;
    color: var(--vc-v-muted, #536471);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.vc-v-thread-export > summary::-webkit-details-marker {
    display: none;
}

.vc-v-thread-export > summary::marker {
    content: "";
}

.vc-v-thread-export > summary:hover,
.vc-v-thread-export[open] > summary {
    border-color: var(--vc-v-border-strong, #aeb7bf);
    background: rgba(127, 127, 127, .08);
    color: var(--vc-v-text, #0f1419);
}

.vc-v-thread-export > summary:focus-visible,
.vc-v-thread-export-panel button:focus-visible {
    outline: 2px solid var(--vc-v-accent, #1d9bf0);
    outline-offset: 2px;
}

.vc-v-thread-export > summary svg {
    display: block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vc-v-thread-export-chevron {
    margin-left: 1px;
    font-size: 11px;
    transition: transform .15s ease;
}

.vc-v-thread-export[open] .vc-v-thread-export-chevron {
    transform: rotate(180deg);
}

.vc-v-thread-export-panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    gap: 3px;
    width: min(330px, calc(100vw - 36px));
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--vc-v-border-strong, #cfd4d8);
    border-radius: 14px;
    background: var(--vc-v-surface, #fff);
    color: var(--vc-v-text, #0f1419);
    box-shadow: 0 12px 32px rgba(15, 20, 25, .18);
}

.vc-v-thread-export-panel button {
    appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}

.vc-v-thread-export-panel button:hover:not(:disabled) {
    background: rgba(127, 127, 127, .12);
}

.vc-v-thread-export-panel button:disabled {
    opacity: .55;
    cursor: progress;
}

.vc-v-thread-export-separator {
    display: block;
    height: 1px;
    margin: 4px 7px;
    background: var(--vc-v-border, #d8dadd);
}

.vc-v-thread-export-option {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--vc-v-text, #0f1419);
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
}

.vc-v-thread-export-option:hover {
    background: rgba(127, 127, 127, .08);
}

.vc-v-thread-export-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--vc-v-accent, #1d9bf0);
    cursor: pointer;
}

.vc-v-thread-export-option span {
    display: block;
}

.vc-v-thread-export-status {
    display: none;
    margin: 4px 8px 3px;
    color: var(--vc-v-muted, #536471);
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.vc-v-thread-export-status:not(:empty) {
    display: block;
}

.vc-v-thread-export-status.is-success {
    color: #16804c;
}

.vc-v-thread-export-status.is-error {
    color: #b42318;
}

html body.vc-v-single-page .vc-v-single-topbar.vc-v-export-open,
html body.vc-v-media-view-page .vc-v-media-mobile-topbar.vc-v-export-open {
    z-index: 120;
}

/* The thread export control lives once in the toolbar, aligned opposite “← Post”. */
html body.vc-v-single-page .vc-v-single-topbar > .vc-v-thread-export,
html body.vc-v-media-view-page .vc-v-media-mobile-topbar > .vc-v-thread-export {
    width: auto;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

/* Reply permalink controls in the /v/ feed get a little extra separation. */
html body.vc-v-profile-page .vc-v-reply-meta > a.vc-v-copy-link--reply {
    margin-left: 11px;
    margin-bottom: 0;
    vertical-align: baseline;
}

@media (max-width: 480px) {
    .vc-v-thread-export > summary {
        padding: 5px 8px;
        font-size: 11px;
    }

    .vc-v-thread-export-panel {
        width: min(310px, calc(100vw - 28px));
    }
}

/* App-recognized /v/: hide stale/legacy Home and RSS markup as a server-side fallback.
 * The MAUI WebView also enforces this locally after observing the recognition badge. */
html body.vc-v-profile-page[data-vc-app-recognized="1"] .vc-v-home-link,
html body.vc-v-profile-page[data-vc-app-recognized="1"] .vc-v-rss-link {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}