.va-page {
    --va-ink: #1e293b;
    --va-soft: #475569;
    --va-line: var(--bs-border-color, #e2e8f0);
    --va-mist: var(--bs-light, #f1f5f9);
    --va-blue: #1877f2;
    --va-blue-deep: #155db8;
    --va-teal: #168f9c;
    --va-green: #1f8f50;
    --va-rose: #b83a55;
    --va-mono: ui-monospace, "SFMono-Regular", Consolas, monospace
}

    .va-page .va-c-ink {
        --c: var(--va-ink)
    }

    .va-page .va-c-blue {
        --c: var(--va-blue)
    }

    .va-page .va-c-teal {
        --c: var(--va-teal)
    }

    .va-page .va-c-green {
        --c: var(--va-green)
    }

    .va-page .va-c-rose {
        --c: var(--va-rose)
    }

    .va-page .va-c-line {
        --c: #cbd5e1
    }

    .va-page .va-bt {
        border-top: 3px solid var(--c, var(--va-blue));
        padding-top: 1rem
    }

    .va-page .va-bl {
        border-left: 3px solid var(--c, var(--va-blue));
        padding-left: 1rem
    }

    .va-page code {
        font-family: var(--va-mono);
        font-size: .88em;
        background: #eef3fd;
        border-radius: 4px;
        padding: .05em .35em;
        color: var(--va-blue-deep);
        word-break: normal;
        white-space: nowrap
    }

    .va-page pre code, .va-page pre {
        white-space: pre
    }

    .va-page .va-code-wrap pre, .va-page .va-flow-ex pre {
        white-space: pre-wrap
    }

    .va-page pre code, .va-page .table td:first-child > code {
        background: none;
        padding: .05em .35em;
        border-radius: 4px;
        color: inherit
    }

    .va-page .va-on-dark code {
        background: #ffffff1a;
        color: #8fe1ea
    }

    .va-page .breadcrumb {
        font-size: .875rem;
        margin-bottom: 0
    }

.va-hero-visual {
    position: relative;
    padding-bottom: 2.5rem
}

.va-hero-chip {
    position: absolute;
    left: -1.5rem;
    bottom: 0;
    max-width: 22rem;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--va-line);
    border-radius: 12px;
    padding: .95rem 1.1rem;
    box-shadow: 0 24px 48px -24px #1e293b73;
    font-size: .92rem
}

    .va-hero-chip strong {
        display: block;
        color: var(--va-ink)
    }

    .va-hero-chip span {
        display: block;
        color: var(--va-soft)
    }

.va-chip-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--va-green);
    margin-top: .35rem;
    box-shadow: 0 0 0 4px #e3f3ea
}

.va-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: va-step
}

.va-step {
    position: relative;
    counter-increment: va-step;
    padding-left: 4rem
}

    .va-step:before {
        content: counter(va-step);
        position: absolute;
        left: 0;
        top: -.35rem;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        border: 2px solid var(--c, var(--va-blue));
        color: var(--c, var(--va-blue));
        font-weight: 700
    }

.va-timeline .va-step {
    padding-bottom: 2rem
}

    .va-timeline .va-step:last-child {
        padding-bottom: 0
    }

    .va-timeline .va-step:not(:last-child):after {
        content: "";
        position: absolute;
        left: 19px;
        top: 44px;
        bottom: 4px;
        width: 2px;
        background: var(--va-line)
    }

.va-call {
    background: #fff;
    border: 1px solid var(--va-line);
    border-radius: 16px;
    box-shadow: 0 30px 60px -30px #1e293b59;
    overflow: hidden
}

.va-call-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--va-mist);
    border-bottom: 1px solid var(--va-line);
    font-size: .93rem
}

.va-rec {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--va-rose);
    font-weight: 600;
    font-size: .85rem
}

    .va-rec:before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--va-rose)
    }

.va-call-log {
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.25rem .4rem
}

.va-ev {
    display: grid;
    grid-template-columns: 4.6rem 14px 1fr;
    gap: .8rem;
    position: relative;
    padding-bottom: 1.05rem
}

    .va-ev time {
        font-size: .82rem;
        color: var(--va-soft);
        font-variant-numeric: tabular-nums;
        padding-top: .12rem
    }

.va-ev-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: .3rem;
    background: var(--c, var(--va-soft));
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px #fff
}

.va-ev:not(:last-child):after {
    content: "";
    position: absolute;
    left: calc(4.6rem + .8rem + 5px);
    top: 1.1rem;
    bottom: -.1rem;
    width: 2px;
    background: var(--va-line)
}

.va-ev-body strong {
    display: block;
    color: var(--va-ink);
    font-size: .98rem
}

.va-ev-body > span {
    display: block;
    color: var(--va-soft);
    font-size: .92rem
}

.va-ret {
    margin: .55rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .8rem;
    font-size: .88rem;
    background: var(--va-mist);
    border-radius: 8px;
    padding: .7rem .85rem
}

    .va-ret dt {
        color: var(--va-soft);
        font-weight: 400
    }

    .va-ret dd {
        margin: 0
    }

    .va-ret code {
        color: var(--va-teal);
        background: none;
        padding: 0
    }

.va-path {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem
}

    .va-path span {
        background: #fff;
        border: 1px solid var(--va-line);
        border-radius: 999px;
        padding: .05rem .55rem;
        font-size: .82rem
    }

.va-call-foot {
    padding: .75rem 1.25rem 1rem;
    font-size: .8rem;
    color: var(--va-soft);
    border-top: 1px solid var(--va-line);
    margin: 0
}

@media(prefers-reduced-motion:no-preference) {
    .va-js .va-ev {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .45s ease,transform .45s ease;
        transition-delay: calc(var(--i) * .55s + .25s)
    }

    .va-js .va-call.is-playing .va-ev {
        opacity: 1;
        transform: none
    }
}

.va-shot img {
    border: 1px solid var(--va-line);
    background: var(--va-mist)
}

.va-flow-scroll {
    overflow-x: auto;
    border: 1px solid var(--va-line);
    border-radius: 12px;
    background: #fff
}

    .va-flow-scroll img {
        min-width: 900px;
        width: 100%;
        height: auto
    }

.va-switches .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    flex: none;
    cursor: pointer
}

    .va-switches .form-check-input:checked {
        background-color: var(--va-teal);
        border-color: var(--va-teal)
    }

    .va-switches .form-check-input:disabled {
        opacity: .75
    }

.va-proof-logos img {
    height: 30px;
    width: auto;
    filter: grayscale(1);
    opacity: .7
}

.va-seq {
    background: #fff;
    border: 1px solid var(--va-line);
    border-radius: 16px;
    box-shadow: 0 30px 60px -30px #1e293b59;
    padding: 1.3rem 1.2rem 1.1rem;
    margin: 0
}

.va-seq-lanes, .va-seq-row {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr))
}

.va-seq-lanes {
    margin-bottom: .6rem
}

.va-lane {
    grid-column: span 2;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem .3rem;
    border-radius: 8px;
    background: var(--va-mist)
}

    .va-lane small {
        display: block;
        font-weight: 400;
        color: var(--va-soft);
        font-size: .78rem
    }

.va-lane-is {
    color: var(--va-blue)
}

.va-lane-va {
    color: var(--va-teal)
}

.va-seq-body {
    position: relative;
    padding: .4rem 0 .2rem
}

    .va-seq-body:before, .va-seq-body:after, .va-seq-mid {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0;
        border-left: 2px dashed #d3d9e8
    }

    .va-seq-body:before {
        left: calc(100% / 6)
    }

    .va-seq-body:after {
        left: calc(100% / 6 * 5)
    }

.va-seq-mid {
    left: 50%
}

.va-seq-row {
    position: relative;
    z-index: 1;
    margin: .55rem 0 .9rem
}

.va-msg {
    --c: var(--va-ink);
    text-align: center
}

.va-msg-label {
    display: block;
    font-size: .85rem;
    line-height: 1.35;
    padding: 0 .4rem .35rem
}

    .va-msg-label code {
        font-size: .8rem;
        color: var(--c);
        background: none;
        padding: 0
    }

.va-msg-line {
    display: block;
    height: 2px;
    background: var(--c);
    position: relative
}

.va-to-right .va-msg-line:after, .va-to-left .va-msg-line:before {
    content: "";
    position: absolute;
    top: -5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
}

.va-to-right .va-msg-line:after {
    right: -2px;
    border-left: 9px solid var(--c)
}

.va-to-left .va-msg-line:before {
    left: -2px;
    border-right: 9px solid var(--c)
}

.va-talk .va-msg-line {
    background: repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 11px)
}

.va-a-b {
    grid-column: 2 / 4
}

.va-b-c {
    grid-column: 4 / 6
}

.va-a-c {
    grid-column: 2 / 6
}

.va-by-caller {
    --c: var(--va-ink)
}

.va-by-is {
    --c: var(--va-blue)
}

.va-by-va {
    --c: var(--va-teal)
}

.va-seq-note {
    grid-column: 3 / 5;
    margin-top: .4rem;
    font-size: .78rem;
    color: var(--va-soft);
    background: var(--va-mist);
    border-radius: 6px;
    padding: .3rem .5rem;
    text-align: center
}

.va-seq-when {
    display: block;
    font-size: .75rem;
    color: var(--va-soft)
}

.va-seq-foot {
    font-size: .8rem;
    color: var(--va-soft);
    border-top: 1px solid var(--va-line);
    padding-top: .8rem;
    margin-top: .4rem
}

.va-msg-route {
    display: none
}

.va-code{
    border-radius:0.65rem;
}

.va-code pre {
    margin: 0;
    background: var(--va-ink);
    color: #e6e9f5;
    border-radius: 12px;
    padding: 1.2rem 1.3rem;
    font-family: var(--va-mono);
    font-size: .86rem;
    line-height: 1.6;
    overflow-x: auto
}

.va-code .k {
    color: #9fb0ff
}

.va-code .s {
    color: #8fe1ea
}

.va-code .p {
    color: #7d86a8
}

.va-code-wrap pre {
    white-space: pre-wrap;
    word-break: break-all
}

.va-callout {
    border-left: 3px solid var(--va-teal);
    background: var(--va-mist);
    padding: 1rem 1.2rem;
    border-radius: 0 10px 10px 0;
    max-width: 52rem
}

.bg-light .va-callout {
    background: #fff
}

.va-flow-ex pre {
    margin: .6rem 0 0;
    font-family: var(--va-mono);
    font-size: .82rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--va-ink);
    background: var(--va-mist);
    border-radius: 8px;
    padding: .6rem .75rem
}

.va-start {
    list-style: none;
    padding-left: 0;
    counter-reset: va-start
}

.va-start-item {
    counter-increment: va-start;
    border-top: 2px solid var(--va-ink);
    padding-top: 1rem;
    height: 100%
}

    .va-start-item:before {
        content: counter(va-start);
        display: block;
        font-weight: 700;
        color: var(--va-blue);
        font-size: 1.4rem;
        line-height: 1;
        margin-bottom: .6rem
    }

.va-glance {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 3rem;
    margin: 0
}

    .va-glance > div {
        display: grid;
        grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr);
        gap: 1.2rem;
        padding: 1rem 0;
        border-top: 1px solid var(--va-line)
    }

    .va-glance dt {
        font-weight: 600;
        color: var(--va-ink)
    }

    .va-glance dd {
        margin: 0;
        color: var(--va-soft)
    }

.va-when {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c);
    margin-top: .2rem
}

@media(max-width:991.98px) {
    .va-hero-chip {
        left: 1rem
    }

    .va-glance {
        grid-template-columns: minmax(0,1fr)
    }
}

@media(max-width:575.98px) {
    .va-hero-visual {
        padding-bottom: 0
    }

    .va-glance > div {
        grid-template-columns: 1fr;
        gap: .3rem
    }

    .va-hero-chip {
        position: relative;
        left: 0;
        margin: -2rem .8rem 0;
        max-width: none
    }

    .va-ev {
        grid-template-columns: 3.9rem 14px 1fr;
        gap: .6rem
    }

        .va-ev:not(:last-child):after {
            left: calc(4.5rem + 5px)
        }

    .va-seq-lanes, .va-seq-body:before, .va-seq-body:after, .va-seq-mid {
        display: none
    }

    .va-seq-row {
        display: block;
        margin: 0;
        padding: .75rem 0;
        border-bottom: 1px solid var(--va-line)
    }

        .va-seq-row:last-of-type {
            border-bottom: 0
        }

    .va-msg {
        text-align: left
    }

    .va-msg-line {
        display: none
    }

    .va-msg-label {
        padding: 0;
        font-size: .92rem
    }

    .va-msg-route {
        display: block;
        font-size: .78rem;
        font-weight: 600;
        color: var(--c);
        margin-bottom: .2rem
    }

    .va-seq-note {
        display: block;
        margin-top: .5rem;
        text-align: left
    }
}


/* Dark theme: keep the diagrams, code samples and request forms readable. */
html[data-bs-theme="dark"] .va-page {
    --va-ink: #edf2fb;
    --va-soft: #b8c4d8;
    --va-line: #39465b;
    --va-mist: #202b3b;
}
html[data-bs-theme="dark"] .va-page .text-dark,
html[data-bs-theme="dark"] .va-page .text-body,
html[data-bs-theme="dark"] .va-page .va-ev-body strong,
html[data-bs-theme="dark"] .va-page .va-hero-chip strong {
    color: #edf2fb !important;
}
html[data-bs-theme="dark"] .va-page .text-muted,
html[data-bs-theme="dark"] .va-page .va-hero-chip span {
    color: #b8c4d8 !important;
}
html[data-bs-theme="dark"] .va-page .bg-light,
html[data-bs-theme="dark"] .va-page .card,
html[data-bs-theme="dark"] .va-page .va-call,
html[data-bs-theme="dark"] .va-page .va-seq,
html[data-bs-theme="dark"] .va-page .va-flow-scroll,
html[data-bs-theme="dark"] .va-page .va-hero-chip {
    background-color: #182232 !important;
    color: #edf2fb;
    border-color: #39465b;
}
html[data-bs-theme="dark"] .va-page .va-call-head,
html[data-bs-theme="dark"] .va-page .va-mist,
html[data-bs-theme="dark"] .va-page .va-ret,
html[data-bs-theme="dark"] .va-page .va-seq-note,
html[data-bs-theme="dark"] .va-page .va-flow-ex pre {
    background-color: #202b3b;
    color: #dce5f4;
}
html[data-bs-theme="dark"] .va-page .va-path span,
html[data-bs-theme="dark"] .va-page .va-step:before,
html[data-bs-theme="dark"] .va-page .va-ev-dot {
    background-color: #182232;
}
html[data-bs-theme="dark"] .va-page .form-control,
html[data-bs-theme="dark"] .va-page .form-select {
    color: #edf2fb;
    background-color: #111a28;
    border-color: #46546a;
}
html[data-bs-theme="dark"] .va-page .form-control::placeholder {
    color: #9eacc2;
    opacity: 1;
}
html[data-bs-theme="dark"] .va-page .form-check-label,
html[data-bs-theme="dark"] .va-page legend,
html[data-bs-theme="dark"] .va-page .accordion-button {
    color: #edf2fb;
}
html[data-bs-theme="dark"] .va-page .accordion-item,
html[data-bs-theme="dark"] .va-page .accordion-button {
    background-color: #182232;
    border-color: #39465b;
}
html[data-bs-theme="dark"] .va-page .accordion-button:not(.collapsed) {
    background-color: #202b3b;
    color: #8db8ff;
}
html[data-bs-theme="dark"] .va-page .table {
    --bs-table-color: #dce5f4;
    --bs-table-bg: #182232;
    --bs-table-border-color: #39465b;
    --bs-table-striped-color: #dce5f4;
    --bs-table-striped-bg: #202b3b;
}
html[data-bs-theme="dark"] .va-page .table .text-dark {
    color: #edf2fb !important;
}
html[data-bs-theme="dark"] .va-page .alert-success {
    color: #b8f2ce;
    background-color: #173729;
    border-color: #285b43;
}


/* Vendor guide CTA — dark-mode correction */
[data-bs-theme="dark"] .va-on-dark {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151;
    border-radius: 1rem;
}

    [data-bs-theme="dark"] .va-on-dark h3 {
        color: #f9fafb !important;
    }

    [data-bs-theme="dark"] .va-on-dark p {
        color: #cbd5e1 !important;
    }

    [data-bs-theme="dark"] .va-on-dark code {
        color: #7dd3fc !important;
        background-color: #1f2937;
        padding: 0.15rem 0.35rem;
        border-radius: 0.25rem;
    }

    [data-bs-theme="dark"] .va-on-dark .btn-light {
        color: #f9fafb !important;
        background-color: #374151 !important;
        border-color: #4b5563 !important;
    }

        [data-bs-theme="dark"] .va-on-dark .btn-light:hover {
            background-color: #4b5563 !important;
            border-color: #64748b !important;
        }



/* Voice Assistant vendor guide — dark mode */
[data-bs-theme="dark"] .va-page {
    color: #e5e7eb;
}

    /* Inline code: flow, token, vbcallend, JSON keys, etc. */
    [data-bs-theme="dark"] .va-page code {
        color: #93c5fd !important;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 0.3rem;
        padding: 0.12em 0.35em;
        overflow-wrap: anywhere;
    }

    /* Block code examples */
    [data-bs-theme="dark"] .va-page pre {
        color: #e2e8f0;
        background: #0b1220 !important;
        border: 1px solid #334155;
        border-radius: 0.65rem;
        padding: 1rem 1.15rem;
        overflow-x: auto;
        white-space: pre;
        -webkit-overflow-scrolling: touch;
    }

        /* Syntax highlighting inside code blocks */
        [data-bs-theme="dark"] .va-page pre .k {
            color: #7dd3fc !important;
        }

        [data-bs-theme="dark"] .va-page pre .s {
            color: #86efac !important;
        }

        [data-bs-theme="dark"] .va-page pre .p {
            color: #c4b5fd !important;
        }

    /* Cards and API callouts */
    [data-bs-theme="dark"] .va-page .card,
    [data-bs-theme="dark"] .va-page .va-callout,
    [data-bs-theme="dark"] .va-page .va-code,
    [data-bs-theme="dark"] .va-page .va-flow-ex {
        color: #e5e7eb;
        background-color: #111827 !important;
        border-color: #374151 !important;
    }

    [data-bs-theme="dark"] .va-page .card-body {
        background-color: transparent;
    }

    /* Remove Bootstrap's forced dark text */
    [data-bs-theme="dark"] .va-page .text-dark,
    [data-bs-theme="dark"] .va-page .fw-semibold.text-dark,
    [data-bs-theme="dark"] .va-page strong.text-dark,
    [data-bs-theme="dark"] .va-page dt.text-dark {
        color: #f3f4f6 !important;
    }

    /* Muted descriptions and captions */
    [data-bs-theme="dark"] .va-page .text-muted {
        color: #aab7c8 !important;
    }

    /* Tables */
    [data-bs-theme="dark"] .va-page .table {
        --bs-table-color: #e5e7eb;
        --bs-table-bg: transparent;
        --bs-table-border-color: #374151;
        --bs-table-striped-bg: #172033;
        --bs-table-striped-color: #e5e7eb;
        --bs-table-hover-bg: #1e293b;
        --bs-table-hover-color: #f9fafb;
    }

        [data-bs-theme="dark"] .va-page .table thead th {
            color: #f9fafb;
            background-color: #172033;
        }

        [data-bs-theme="dark"] .va-page .table td,
        [data-bs-theme="dark"] .va-page .table th {
            border-color: #374151;
        }

    /* Light-background sections */
    [data-bs-theme="dark"] .va-page section.bg-light {
        background-color: #0f172a !important;
    }

    /* Code in FAQ answers and accordion */
    [data-bs-theme="dark"] .va-page .accordion-item {
        color: #e5e7eb;
        background-color: #111827;
        border-color: #374151;
    }

    [data-bs-theme="dark"] .va-page .accordion-button {
        color: #f3f4f6;
        background-color: #111827;
    }

        [data-bs-theme="dark"] .va-page .accordion-button:not(.collapsed) {
            color: #93c5fd;
            background-color: #1e293b;
        }


    [data-bs-theme="dark"] .va-page .accordion-body {
        background-color: #111827;
        color: #d1d5db;
    }

    /* Form controls */
    [data-bs-theme="dark"] .va-page .form-control,
    [data-bs-theme="dark"] .va-page .form-select {
        color: #f3f4f6;
        background-color: #111827;
        border-color: #475569;
    }


    .va-page .form-control, textarea {
        background-color: #fff !important;
    }

    [data-bs-theme="dark"] .va-page .form-control, textarea {
        background-color: #111827 !important;
    }


        [data-bs-theme="dark"] .va-page .form-control::placeholder {
            color: #94a3b8;
        }

    [data-bs-theme="dark"] .va-page .form-check-label,
    [data-bs-theme="dark"] .va-page legend {
        color: #e5e7eb !important;
    }


/* Voice Assistant forms — radio button colors */

/* LIGHT MODE */
[data-bs-theme="light"] .va-page .form-check-input[type="radio"] {
    background-color: #ffffff;
    border: 1.5px solid #94a3b8;
    box-shadow: none;
}

    [data-bs-theme="light"] .va-page .form-check-input[type="radio"]:checked {
        background-color: #ffffff !important;
        border-color: #6d28d9 !important;
        background-image: radial-gradient( circle, #6d28d9 0 3px, transparent 3.5px ) !important;
    }

    [data-bs-theme="light"] .va-page .form-check-input[type="radio"]:focus {
        border-color: #6d28d9;
        box-shadow: 0 0 0 0.2rem rgb(109 40 217 / 18%);
    }

/* DARK MODE */
[data-bs-theme="dark"] .va-page .form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: #111827 !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 50%;
    box-shadow: none !important;
    cursor: pointer;
}

    [data-bs-theme="dark"] .va-page .form-check-input[type="radio"]:checked {
        background-color: #111827 !important;
        border-color: #1877F2 !important;
        background-image: radial-gradient( circle, #1877F2 0 3px, transparent 3.5px ) !important;
    }

    [data-bs-theme="dark"] .va-page .form-check-input[type="radio"]:focus-visible {
        outline: 2px solid #1877F2;
        outline-offset: 3px;
        box-shadow: none !important;
    }

[data-bs-theme="dark"] .va-page .form-check-label {
    color: #e5e7eb;
    cursor: pointer;
}