/* ============================================================================
   VCap Platform — Shared Page Styles
   ----------------------------------------------------------------------------
   Consumed by every authenticated page. The design tokens below:
     Background  #0A0A0A   Surface    #161616   Surface-2  #1F1F1F
     Accent      #7CFC00   Text       #F5F5F5   Warn       #FF3B3B
   The BootstrapBlazor theme already maps these onto the --bs-* / --bb-*
   variables (see theme.css); this file adds bespoke component classes.
   ========================================================================== */

:root {
    --vcap-accent: #7CFC00;
    --vcap-accent-rgb: 124, 252, 0;
    --vcap-warn: #FF3B3B;
    --vcap-yellow: #FFD43B;
    --vcap-orange: #FF8800;
    --vcap-purple: #9b59b6;
    --vcap-muted: #888;
    --vcap-surface: var(--bb-bg-card);
    --vcap-surface-2: #1F1F1F;
    --vcap-border: var(--bb-border-color);
}

/* ---- Page shell ---------------------------------------------------------- */

.vcap-page {
    padding: 0;
}

.vcap-page-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.vcap-page-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--bb-text-primary);
    margin: 0;
    letter-spacing: .01em;
}

.vcap-page-subtitle {
    color: var(--vcap-muted);
    font-size: .9rem;
    margin: 0;
}

/* ---- KPI tiles ----------------------------------------------------------- */

.vcap-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 992px) { .vcap-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .vcap-kpi-grid { grid-template-columns: 1fr; } }

.vcap-kpi {
    background: var(--vcap-surface);
    border: 1px solid var(--vcap-border);
    border-radius: .75rem;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}

.vcap-kpi:hover {
    border-color: rgba(var(--vcap-accent-rgb), .5);
    transform: translateY(-2px);
}

.vcap-kpi-label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    color: var(--vcap-muted);
    margin-bottom: .5rem;
}

.vcap-kpi-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--vcap-accent);
    line-height: 1;
}

.vcap-kpi-sub {
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--vcap-accent);
}

.vcap-kpi-sub.is-muted { color: var(--vcap-muted); }
.vcap-kpi-sub.is-warn  { color: var(--vcap-yellow); }

.vcap-kpi-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--vcap-muted);
    opacity: .5;
    font-size: 1.1rem;
}

/* value tones */
.vcap-kpi-value.tone-yellow { color: var(--vcap-yellow); }
.vcap-kpi-value.tone-gray   { color: var(--bb-text-muted); }
.vcap-kpi-value.tone-warn   { color: var(--vcap-warn); }

/* ---- Sections & headers -------------------------------------------------- */

.vcap-section {
    background: var(--vcap-surface);
    border: 1px solid var(--vcap-border);
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.vcap-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vcap-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bb-text-primary);
    margin: 0;
}

.vcap-section-action {
    color: var(--vcap-accent);
    font-size: .8rem;
    text-decoration: none;
    font-weight: 600;
}
.vcap-section-action:hover { filter: brightness(1.15); }

/* ---- Badges & status dots ------------------------------------------------ */

.vcap-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
}

.vcap-badge--green   { background: rgba(var(--vcap-accent-rgb), .15); color: var(--vcap-accent); border: 1px solid rgba(var(--vcap-accent-rgb), .4); }
.vcap-badge--yellow  { background: rgba(255,212,59,.15); color: var(--vcap-yellow); border: 1px solid rgba(255,212,59,.4); }
.vcap-badge--red     { background: rgba(255,59,59,.15); color: var(--vcap-warn); border: 1px solid rgba(255,59,59,.4); }
.vcap-badge--gray    { background: rgba(136,136,136,.15); color: var(--vcap-muted); border: 1px solid rgba(136,136,136,.4); }
.vcap-badge--outline { background: transparent; color: var(--vcap-accent); border: 1px solid var(--vcap-accent); }

/* small numeric red badge */
.vcap-badge-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: var(--vcap-warn);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.vcap-status-dot {
    width: .5rem;
    height: .5rem;
    min-width: .5rem;
    min-height: .5rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--vcap-accent);
    box-shadow: 0 0 0 3px rgba(var(--vcap-accent-rgb), .2);
}

/* Inside a badge, the dot follows the badge's own colour (green when live,
   red when the published page is outdated) instead of the fixed accent. */
.vcap-badge .vcap-status-dot {
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* ---- Cards ---------------------------------------------------------------- */

.vcap-card {
    background: var(--vcap-surface-2);
    border: 1px solid var(--vcap-border);
    border-radius: .75rem;
    padding: 1rem;
    transition: border-color .2s, transform .2s;
}

.vcap-card:hover {
    border-color: rgba(var(--vcap-accent-rgb), .4);
}

.vcap-card.is-selected {
    border-color: var(--vcap-accent);
    box-shadow: 0 0 0 1px var(--vcap-accent);
}

/* placeholder image block (NFT / file thumbnails) */
.vcap-thumb {
    aspect-ratio: 1 / 1;
    border-radius: .5rem;
    background:
        linear-gradient(135deg, rgba(var(--vcap-accent-rgb), .08), transparent 60%),
        var(--vcap-surface-2);
    border: 1px dashed var(--vcap-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vcap-muted);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.vcap-thumb .vcap-thumb-glyph {
    font-size: 2rem;
    color: rgba(var(--vcap-accent-rgb), .5);
}

/* ---- Buttons -------------------------------------------------------------- */

.vcap-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: filter .2s, background .2s, border-color .2s;
    background: transparent;
    color: var(--bb-text-primary);
}

.vcap-btn--primary {
    background: var(--vcap-accent);
    color: #0A0A0A;
}
.vcap-btn--primary:hover { filter: brightness(1.1); }

.vcap-btn--outline {
    border-color: var(--vcap-accent);
    color: var(--vcap-accent);
}
.vcap-btn--outline:hover { background: rgba(var(--vcap-accent-rgb), .1); }

.vcap-btn--ghost {
    border-color: var(--vcap-border);
    color: var(--bb-text-muted);
}
.vcap-btn--ghost:hover { border-color: var(--vcap-accent); color: var(--vcap-accent); }

/* ---- Callout panel (right rail documentation) ----------------------------- */

.vcap-callouts {
    background: var(--vcap-surface);
    border: 1px solid var(--vcap-border);
    border-radius: .75rem;
    padding: 1.25rem;
}

.vcap-callouts-title {
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vcap-accent);
    margin-bottom: 1rem;
}

.vcap-callout-item {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--vcap-border);
    font-size: .82rem;
    color: var(--bb-text-muted);
    line-height: 1.5;
}

.vcap-callout-item:last-child { border-bottom: none; }

.vcap-callout-num {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(var(--vcap-warn), .15);
    color: var(--vcap-warn);
    border: 1px solid rgba(var(--vcap-warn), .4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Avatars -------------------------------------------------------------- */

.vcap-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #0A0A0A;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    flex: none;
}
.vcap-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: .7rem; }
.vcap-avatar--md { width: 2.5rem;  height: 2.5rem;  font-size: .9rem; }
.vcap-avatar--lg { width: 3.5rem;  height: 3.5rem;  font-size: 1.1rem; }

/* ---- Progress bars -------------------------------------------------------- */

.vcap-progress {
    height: .4rem;
    background: var(--vcap-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.vcap-progress-bar {
    height: 100%;
    background: var(--vcap-accent);
    border-radius: 999px;
    transition: width .4s ease;
}

/* ---- Top bar (header chrome) --------------------------------------------- */

.vcap-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 .5rem;
}

.vcap-topbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--bb-text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: .05em;
}
.vcap-topbar-brand img { height: 26px; }

.vcap-search {
    flex: 1;
    max-width: 480px;
    position: relative;
    display: flex;
    align-items: center;
}
.vcap-search i {
    position: absolute;
    left: .75rem;
    color: var(--vcap-muted);
    font-size: .85rem;
}
.vcap-search input {
    width: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--vcap-border);
    border-radius: .5rem;
    padding: .45rem .75rem .45rem 2.1rem;
    color: var(--bb-text-primary);
    font-size: .85rem;
}
.vcap-search input::placeholder { color: var(--vcap-muted); }
.vcap-search input:focus {
    outline: none;
    border-color: var(--vcap-accent);
    box-shadow: 0 0 0 .15rem rgba(var(--vcap-accent-rgb), .15);
}

.vcap-user-cluster {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.vcap-icon-btn {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    color: var(--bb-text-muted);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.vcap-icon-btn:hover { background: rgba(var(--vcap-accent-rgb), .08); color: var(--vcap-accent); }
.vcap-dot {
    position: absolute;
    top: .35rem;
    right: .35rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--vcap-accent);
    box-shadow: 0 0 0 2px var(--bb-bg-secondary);
}

/* Top-bar numeric badge (e.g. unread message count on the envelope icon) */
.vcap-icon-btn--has-badge .vcap-topbar-badge {
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    min-width: 1rem;
    height: 1rem;
    font-size: .58rem;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--bb-bg-secondary);
}

/* Ensure the custom topbar always sits above the BootstrapBlazor tab strip
   when both are present in the header. */
.layout-header { display: flex; flex-direction: column; }
.layout-header > .vcap-topbar { flex: none; }
.layout-header > .tabs { flex: none; }

/* ---- Sidebar collapse toggle --------------------------------------------- */

.vcap-sidebar-toggle {
    flex: none;
}
.vcap-sidebar-toggle:hover {
    border-color: rgba(var(--vcap-accent-rgb), .4);
}

/* Smooth width transition when the side panel collapses/expands */
.layout .layout-side {
    transition: width .25s ease, min-width .25s ease, padding .25s ease;
    overflow: hidden;
    /* Flex column so the drive meter can be pinned to the bottom-left
       of the sidebar regardless of the menu's length. The banner stays
       on top, the menu grows in the middle and the drive meter drops to
       the very bottom. */
    display: flex;
    flex-direction: column;
}

/* Visual order: banner (top) → menu (middle, grows) → drive meter (bottom). */
.layout .layout-side .layout-banner { order: 0; flex: none; }
.layout .layout-side .layout-menu,
.layout .layout-side > .menu { order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.layout .layout-side .vcap-drive-meter { order: 3; flex: none; margin-top: auto; }

/* Collapsed state — shrinks the sidebar to zero width so the main
   content expands to full width. Driven by the top-bar hamburger toggle. */
.vcap-side-collapsed .layout-side {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* ---- Sidebar referral link (above drive meter) --------------------------- */

.layout .layout-side .vcap-referral-link { order: 2; flex: none; }

.vcap-referral-link {
    display: block;
    padding: .5rem 1rem;
    font-size: .75rem;
    letter-spacing: .1em;
    color: var(--vcap-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--vcap-border);
}
.vcap-referral-link:hover { color: var(--bb-primary); }

/* ---- Sidebar drive meter (pinned to the bottom-left of the sidebar) ------ */

.vcap-drive-meter {
    padding: .75rem 1rem;
    border-top: 1px solid var(--vcap-border);
}
.vcap-drive-meter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .4rem;
}
.vcap-drive-label { font-size: .7rem; letter-spacing: .12em; color: var(--bb-text-muted); }
.vcap-drive-value { font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--vcap-accent); }
.vcap-drive-upgrade {
    display: inline-block;
    margin-top: .4rem;
    font-size: .72rem;
    color: var(--vcap-accent);
    text-decoration: none;
    font-weight: 600;
}

/* ---- Sidebar group headers ----------------------------------------------- */

.menu .menu-item.group-header {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vcap-muted) !important;
    padding-top: 1rem;
    pointer-events: none;
    background: transparent !important;
}
.menu .menu-item.group-header .menu-text { color: inherit !important; }

/* ---- Generic helpers ----------------------------------------------------- */

.vcap-muted { color: var(--vcap-muted); }
.vcap-accent { color: var(--vcap-accent); }
.vcap-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.vcap-row-gutter { display: flex; flex-wrap: wrap; gap: 1rem; }
.vcap-divider { height: 1px; background: var(--vcap-border); border: none; margin: 1rem 0; }

/* utility grid for two-column right-rail layouts */
.vcap-2col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1200px) { .vcap-2col { grid-template-columns: 1fr; } }

.vcap-3col {
    display: grid;
    grid-template-columns: 240px 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1200px) { .vcap-3col { grid-template-columns: 1fr; } }

/* code block (AI chatbot) */
.vcap-code {
    background: #0d0d0d;
    border: 1px solid var(--vcap-border);
    border-radius: .5rem;
    padding: .85rem 1rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8rem;
    color: #e5e5e5;
    overflow-x: auto;
    white-space: pre;
}
.vcap-code .kw { color: var(--vcap-accent); }

/* chat bubbles */
.vcap-chat-bubble {
    border-radius: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--vcap-border);
    background: var(--vcap-surface-2);
    line-height: 1.55;
    font-size: .88rem;
}
.vcap-chat-bubble.is-user {
    border-color: rgba(var(--vcap-accent-rgb), .5);
    background: rgba(var(--vcap-accent-rgb), .06);
}
.vcap-chat-list { list-style: none; padding-left: 1.25rem; margin: .5rem 0; }
.vcap-chat-list li { position: relative; padding: .2rem 0; color: var(--bb-text-primary); }
.vcap-chat-list li::before { content: "•"; color: var(--vcap-accent); position: absolute; left: -1rem; }

/* list rows (notifications / activity / messages) */
.vcap-list { list-style: none; padding: 0; margin: 0; }
.vcap-list-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--vcap-border);
    font-size: .85rem;
}
.vcap-list-row:last-child { border-bottom: none; }
.vcap-list-row .vcap-list-time { margin-left: auto; color: var(--vcap-muted); font-size: .75rem; white-space: nowrap; }

/* segmented control (tabs) */
.vcap-seg {
    display: inline-flex;
    background: var(--vcap-surface-2);
    border: 1px solid var(--vcap-border);
    border-radius: .5rem;
    padding: .15rem;
    gap: .15rem;
}
.vcap-seg button {
    border: none;
    background: transparent;
    color: var(--vcap-muted);
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: .35rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.vcap-seg button.active {
    background: var(--vcap-accent);
    color: #0A0A0A;
}

/* scrollbar for long lists */
.vcap-scroll {
    max-height: 24rem;
    overflow-y: auto;
}
.vcap-scroll::-webkit-scrollbar { width: 5px; }

/* ---- Quill custom font picker labels --------------------------------- */

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Sans Serif'; }

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="inter"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="inter"]::before { content: 'Inter' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before { content: 'Lato' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lora"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lora"]::before { content: 'Lora' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="merriweather"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="merriweather"]::before { content: 'Merriweather' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="montserrat"]::before { content: 'Montserrat' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="nunito"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="nunito"]::before { content: 'Nunito' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open-sans"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open-sans"]::before { content: 'Open Sans' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="oswald"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="oswald"]::before { content: 'Oswald' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="playfair-display"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="playfair-display"]::before { content: 'Playfair Display' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="poppins"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="poppins"]::before { content: 'Poppins' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="raleway"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="raleway"]::before { content: 'Raleway' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before { content: 'Roboto' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto-mono"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto-mono"]::before { content: 'Roboto Mono' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="source-sans-3"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="source-sans-3"]::before { content: 'Source Sans 3' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="ubuntu"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="ubuntu"]::before { content: 'Ubuntu' !important; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="work-sans"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="work-sans"]::before { content: 'Work Sans' !important; }

/* ---- Font family mappings ------------------------------------------- */

.ql-font-inter { font-family: 'Inter', sans-serif; }
.ql-font-lato { font-family: 'Lato', sans-serif; }
.ql-font-lora { font-family: 'Lora', serif; }
.ql-font-merriweather { font-family: 'Merriweather', serif; }
.ql-font-montserrat { font-family: 'Montserrat', sans-serif; }
.ql-font-nunito { font-family: 'Nunito', sans-serif; }
.ql-font-open-sans { font-family: 'Open Sans', sans-serif; }
.ql-font-oswald { font-family: 'Oswald', sans-serif; }
.ql-font-playfair-display { font-family: 'Playfair Display', serif; }
.ql-font-poppins { font-family: 'Poppins', sans-serif; }
.ql-font-raleway { font-family: 'Raleway', sans-serif; }
.ql-font-roboto { font-family: 'Roboto', sans-serif; }
.ql-font-roboto-mono { font-family: 'Roboto Mono', monospace; }
.ql-font-source-sans-3 { font-family: 'Source Sans 3', sans-serif; }
.ql-font-ubuntu { font-family: 'Ubuntu', sans-serif; }
.ql-font-work-sans { font-family: 'Work Sans', sans-serif; }
.vcap-scroll::-webkit-scrollbar-thumb { background: var(--vcap-border); border-radius: 3px; }

/* ---- AI Chatbot collapsible layout (responsive) -------------------------
   Moved here from the page-scoped <style> block so the page markup contains
   no CSS @-rules (which would need @@ escaping in Razor). Plain CSS here. */
@media (max-width: 1200px) {
    .vcap-chat-layout { grid-template-columns: 1fr; }
    .vcap-chat-layout.is-collapsed { grid-template-columns: 1fr; }
    .vcap-chat-layout.is-collapsed .chat-left-panel {
        opacity: 1;
        height: auto;
        pointer-events: auto;
    }
}