/* =========================================================
   ETS SECURITY ADVISOR
   Elite Technology Solutions + OpenAI
   ========================================================= */


/* =========================================================
   GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}


:root {

    --navy: #06172a;
    --navy-soft: #0b223b;
    --navy-mid: #0d2b49;

    --blue: #1688f7;
    --blue-deep: #0d6fce;
    --blue-soft: #eaf5ff;

    --cyan: #42c7ff;

    --white: #ffffff;

    --background: #f5f8fb;

    --surface: #ffffff;
    --surface-soft: #f8fbfe;

    --border: #dbe4ec;

    --text: #182b3e;
    --muted: #65798c;

    --success: #37cf82;

    --warning-background: #fffaf0;
    --warning-border: #e5d9ae;
    --warning-text: #6b5a2b;
    --warning-muted: #7a6a3a;

    --shadow:
        0 22px 70px
        rgba(7, 29, 51, .12);

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #f9fbfd 0%,
            #f3f7fb 100%
        );

    color:
        var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

}


button,
textarea {

    font: inherit;

}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.page-glow {

    position: fixed;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .12;

    pointer-events: none;

    z-index: -1;

}


.glow-one {

    top: -170px;
    right: -120px;

    background:
        var(--blue);

}


.glow-two {

    bottom: -200px;
    left: -170px;

    background:
        var(--cyan);

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    background:
        linear-gradient(
            135deg,
            #06172a 0%,
            #08233d 100%
        );

    color:
        white;

    border-bottom:
        1px solid
        rgba(82, 184, 255, .30);

    box-shadow:
        0 5px 24px
        rgba(4, 21, 38, .16);

}


.header-inner {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    min-height: 84px;

    margin: auto;

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 25px;

}


.brand {

    display: flex;

    align-items: center;

    gap: 14px;

}


.brand-mark {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #218fff,
            #0b67c8
        );

    box-shadow:
        0 8px 24px
        rgba(16, 127, 236, .28);

    font-size: 19px;

    font-weight: 900;

    letter-spacing: .4px;

}


.brand-name {

    font-size: 18px;

    font-weight: 800;

}


.brand-subtitle {

    margin-top: 3px;

    color:
        #a9bfd2;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.header-right {

    display: flex;

    align-items: center;

    gap: 18px;

}


.powered-badge {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .055);

    backdrop-filter:
        blur(8px);

}


.powered-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px
        rgba(66, 199, 255, .8);

}


.powered-badge strong {

    display: block;

    font-size: 11px;

}


.powered-badge span {

    display: block;

    margin-top: 2px;

    color:
        #a8bfd3;

    font-size: 9px;

}


.header-security {

    color:
        #bdd0df;

    font-size: 10px;

}


/* =========================================================
   PAGE
   ========================================================= */

.page {

    width:
        min(
            1050px,
            calc(100% - 36px)
        );

    margin: auto;

    padding:
        58px 0 80px;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    max-width: 850px;

    margin:
        0 auto 36px;

    text-align: center;

}


.hero-kicker {

    margin-bottom: 11px;

    color:
        var(--blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.hero h1 {

    margin: 0;

    color:
        var(--navy);

    font-size:
        clamp(
            38px,
            6vw,
            62px
        );

    line-height: 1.12;

    letter-spacing:
        -1.8px;

}


.hero h1 span {

    display: block;

    margin-top: 2px;

    padding-bottom: 6px;

    background:
        linear-gradient(
            90deg,
            #177ee3,
            #32b7f4
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-lead {

    max-width: 760px;

    margin:
        16px auto 0;

    color:
        var(--muted);

    font-size: 17px;

    line-height: 1.65;

}


.hero-trust-row {

    margin-top: 24px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        12px 22px;

}


.hero-trust-item {

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        #5d7184;

    font-size: 11px;

    font-weight: 700;

}


.trust-icon {

    width: 18px;
    height: 18px;

    display:
        inline-grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #e7f8ef;

    color:
        #1b9c5d;

    font-size: 10px;

}


/* =========================================================
   TURNSTILE / HUMAN VERIFICATION
   ========================================================= */

.verification-gate {

    margin:
        0 0 22px;

}


.verification-card {

    padding:
        24px 26px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap: 18px;

    border:
        1px solid
        rgba(22, 136, 247, .24);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5faff
        );

    box-shadow:
        0 12px 35px
        rgba(7, 29, 51, .06);

}


.verification-icon {

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #e8f8f0;

    color:
        #209860;

    font-size: 17px;

    font-weight: 900;

}


.verification-copy {

    min-width: 0;

}


.verification-label {

    margin-bottom: 4px;

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.verification-copy h2 {

    margin:
        0 0 5px;

    color:
        var(--navy);

    font-size: 17px;

}


.verification-copy p {

    max-width: 540px;

    margin: 0;

    color:
        var(--muted);

    font-size: 10px;

    line-height: 1.5;

}


.turnstile-widget {

    min-width: 300px;

}


.verification-message {

    display: none;

    grid-column:
        2 / -1;

    color:
        #718493;

    font-size: 10px;

}


.verification-message.error {

    display: block;

    color:
        #9a3d3d;

}


.verification-message.success {

    display: block;

    color:
        #218858;

}


.verification-gate.verified {

    display: none;

}


.advisor-shell.awaiting-verification {

    position: relative;

    pointer-events: none;

    user-select: none;

    opacity: .42;

    filter:
        grayscale(.12);

}


/* =========================================================
   ADVISOR SHELL
   ========================================================= */

.advisor-shell {

    overflow: hidden;

    border:
        1px solid
        rgba(19, 77, 119, .15);

    border-radius: 22px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

}


/* =========================================================
   ADVISOR HEADER
   ========================================================= */

.advisor-topbar {

    min-height: 78px;

    padding:
        15px 20px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    background:
        linear-gradient(
            135deg,
            #06182b 0%,
            #0a2947 100%
        );

    color: white;

}


.advisor-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.advisor-symbol {

    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #1688f7,
            #39bdf7
        );

    box-shadow:
        0 0 28px
        rgba(35, 160, 244, .28);

    font-size: 20px;

}


.advisor-name {

    font-size: 15px;

    font-weight: 800;

}


.advisor-subtitle {

    margin-top: 3px;

    color:
        #abc0d2;

    font-size: 10px;

}


.advisor-status {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #b8d1e4;

    font-size: 10px;

}


.status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 10px
        rgba(55, 207, 130, .55);

}


/* =========================================================
   CONTEXT BAR
   ========================================================= */

.advisor-context-bar {

    padding:
        11px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border-bottom:
        1px solid
        #e5ecf2;

    background:
        linear-gradient(
            90deg,
            #f8fbfe,
            #ffffff,
            #f7fbff
        );

}


.context-item {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #6b7e90;

    font-size: 10px;

}


.context-label {

    padding:
        3px 6px;

    border-radius: 5px;

    background:
        var(--navy);

    color: white;

    font-size: 9px;

    font-weight: 800;

}


.context-label.ai {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

}


.context-divider {

    width: 1px;
    height: 20px;

    background:
        #d9e3eb;

}


/* =========================================================
   CHAT
   ========================================================= */

.chat {

    min-height: 430px;

    max-height: 580px;

    overflow-y: auto;

    padding:
        25px 26px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    scrollbar-width: thin;

    scrollbar-color:
        #c5d6e4
        transparent;

}


.chat::-webkit-scrollbar {

    width: 7px;

}


.chat::-webkit-scrollbar-track {

    background:
        transparent;

}


.chat::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background:
        #c5d6e4;

}


.message {

    margin-bottom: 19px;

    display: flex;

}


.message.assistant {

    justify-content:
        flex-start;

}


.message.user {

    justify-content:
        flex-end;

}


.bubble {

    max-width: 78%;

    padding:
        14px 16px;

    border-radius: 17px;

    font-size: 14px;

    line-height: 1.55;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


.assistant .bubble {

    border:
        1px solid
        #dcecf8;

    border-top-left-radius:
        5px;

    background:
        linear-gradient(
            145deg,
            #eef7fe,
            #f6fbff
        );

    color:
        #243c50;

}


.user .bubble {

    border-top-right-radius:
        5px;

    background:
        linear-gradient(
            135deg,
            #1586ee,
            #0d71d3
        );

    color: white;

    box-shadow:
        0 8px 20px
        rgba(19, 126, 226, .16);

}


/* =========================================================
   TYPING
   ========================================================= */

.typing {

    display: flex;

    align-items: center;

    gap: 5px;

}


.typing span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #7893a9;

    animation:
        typing 1.1s infinite;

}


.typing span:nth-child(2) {

    animation-delay:
        .14s;

}


.typing span:nth-child(3) {

    animation-delay:
        .28s;

}


@keyframes typing {

    0%,
    100% {

        opacity: .35;

        transform:
            translateY(0);

    }

    50% {

        opacity: 1;

        transform:
            translateY(-3px);

    }

}


/* =========================================================
   RECOMMENDATION
   ========================================================= */

.recommendation {

    margin:
        0 24px 22px;

    padding:
        20px;

    border:
        1px solid
        rgba(22, 136, 247, .40);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            #f5fbff,
            #eef8ff
        );

    box-shadow:
        inset 0 0 28px
        rgba(20, 125, 225, .03);

}


.recommendation-eyebrow {

    margin-bottom: 10px;

    color:
        var(--blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.4px;

    text-transform:
        uppercase;

}


.recommendation-main {

    display: flex;

    gap: 13px;

}


.recommendation-icon {

    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--blue);

    color: white;

    font-weight: 900;

}


.recommendation h2 {

    margin:
        0 0 6px;

    color:
        var(--navy);

    font-size: 20px;

    line-height: 1.25;

}


.recommendation p {

    margin: 0;

    color:
        var(--muted);

    font-size: 13px;

    line-height: 1.55;

}


.recommendation-actions {

    margin-top: 17px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.primary-button,
.secondary-button {

    padding:
        12px 15px;

    border-radius: 9px;

    cursor: pointer;

    font-size: 12px;

    font-weight: 800;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;

}


.primary-button {

    border: none;

    background:
        linear-gradient(
            135deg,
            #1789f5,
            #0c71d1
        );

    color: white;

    box-shadow:
        0 8px 20px
        rgba(22, 136, 247, .15);

}


.primary-button:hover {

    transform:
        translateY(-1px);

    filter:
        brightness(1.04);

}


.secondary-button {

    border:
        1px solid
        #bacbd9;

    background:
        white;

    color:
        #3c556a;

}


.secondary-button:hover {

    background:
        #f8fbfd;

}


/* =========================================================
   COMPOSER
   ========================================================= */

.composer {

    padding:
        17px 20px;

    display: flex;

    align-items:
        flex-end;

    gap: 11px;

    border-top:
        1px solid
        var(--border);

    background:
        #ffffff;

}


.composer-field {

    flex: 1;

}


.composer textarea {

    width: 100%;

    min-height: 48px;

    max-height: 140px;

    padding:
        12px 13px;

    resize: none;

    border:
        1px solid
        #c7d6e2;

    border-radius: 11px;

    outline: none;

    color:
        var(--text);

    background:
        #fbfdff;

    font-size: 13px;

    line-height: 1.5;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;

}


.composer textarea:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(22, 136, 247, .09);

    background:
        white;

}


.composer textarea::placeholder {

    color:
        #91a1ae;

}


.composer-hint {

    margin-top: 5px;

    color:
        #93a3b0;

    font-size: 9px;

}


.send-button {

    min-height: 48px;

    padding:
        0 21px;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #1688f7,
            #0c70d0
        );

    color: white;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(20, 125, 225, .16);

}


.send-button:hover {

    filter:
        brightness(1.05);

}


.send-button:disabled {

    opacity: .55;

    cursor: not-allowed;

}


/* =========================================================
   CONTROLLED MATERIAL NOTICE
   ========================================================= */

.upload-policy {

    margin-top: 10px;

    display: flex;

    align-items:
        flex-start;

    gap: 9px;

    padding:
        10px 12px;

    border:
        1px solid
        var(--warning-border);

    border-radius: 9px;

    background:
        var(--warning-background);

    color:
        var(--warning-text);

}


.upload-policy-icon {

    flex:
        0 0 auto;

    margin-top: 1px;

    font-size: 13px;

    line-height: 1;

}


.upload-policy-content {

    min-width: 0;

}


.upload-policy strong {

    display: block;

    margin-bottom: 3px;

    color:
        var(--warning-text);

    font-size: 10px;

    font-weight: 800;

}


.upload-policy span {

    display: block;

    color:
        var(--warning-muted);

    font-size: 9px;

    line-height: 1.45;

}


/* =========================================================
   ADVISOR FOOTER
   ========================================================= */

.advisor-footer {

    padding:
        0 20px 16px;

    display: flex;

    justify-content:
        center;

    flex-wrap: wrap;

    gap: 15px;

    color:
        #8495a3;

    font-size: 9px;

}


/* =========================================================
   TRUST CARDS
   ========================================================= */

.trust-section {

    margin-top: 23px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


.trust-card {

    padding: 22px;

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 10px 30px
        rgba(17, 42, 65, .04);

}


.trust-card.featured {

    border-color:
        rgba(22, 136, 247, .34);

    background:
        linear-gradient(
            145deg,
            #f8fcff,
            #ffffff
        );

}


.trust-card-icon {

    width: 36px;
    height: 36px;

    margin-bottom: 14px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        var(--navy);

    color: white;

    font-size: 10px;

    font-weight: 900;

}


.trust-card-icon.ai {

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--cyan)
        );

    font-size: 18px;

}


.trust-card h3 {

    margin:
        0 0 7px;

    color:
        var(--navy);

    font-size: 14px;

    line-height: 1.3;

}


.trust-card p {

    margin: 0;

    color:
        var(--muted);

    font-size: 11px;

    line-height: 1.55;

}


/* =========================================================
   BOTTOM CALLOUT
   ========================================================= */

.bottom-callout {

    margin-top: 22px;

    padding:
        27px 30px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #071b31,
            #0c2c4b
        );

    color: white;

    box-shadow:
        0 13px 35px
        rgba(6, 25, 44, .10);

}


.bottom-kicker {

    color:
        #4bc2fb;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.bottom-callout h2 {

    margin:
        5px 0 8px;

    font-size: 26px;

}


.bottom-callout p {

    max-width: 720px;

    margin: 0;

    color:
        #bed0df;

    font-size: 12px;

    line-height: 1.55;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

    border-top:
        1px solid
        #e0e7ed;

    background:
        #eef3f7;

}


.footer-inner {

    width:
        min(
            1050px,
            calc(100% - 36px)
        );

    margin: auto;

    padding:
        25px 0 30px;

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 40px;

}


.footer-brand {

    flex:
        0 0 auto;

}


.footer-brand strong {

    display: block;

    color:
        var(--navy);

    font-size: 12px;

}


.footer-brand span {

    display: block;

    margin-top: 2px;

    color:
        #8292a0;

    font-size: 9px;

}


.footer-content {

    max-width: 690px;

    margin-left: auto;

}


.footer-sensitive-data {

    padding-bottom: 10px;

    margin-bottom: 10px;

    border-bottom:
        1px solid
        #d9e2e9;

}


.footer-sensitive-data strong {

    display: block;

    margin-bottom: 3px;

    color:
        #6c5a28;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.footer-sensitive-data span {

    display: block;

    color:
        #7c7461;

    font-size: 9px;

    line-height: 1.5;

}


.footer-disclaimer {

    color:
        #83929f;

    font-size: 9px;

    line-height: 1.5;

    text-align: right;

}


.hidden {

    display: none !important;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 760px) {

    .powered-badge,
    .header-security {

        display: none;

    }


    .page {

        width:
            min(
                calc(100% - 22px),
                1050px
            );

        padding:
            34px 0 55px;

    }


    .hero h1 {

        font-size: 40px;

        line-height: 1.12;

        letter-spacing: -.9px;

    }


    .verification-card {

        grid-template-columns:
            auto 1fr;

    }


    .turnstile-widget {

        grid-column:
            1 / -1;

        width: 100%;

        min-width: 0;

        margin-top: 5px;

    }


    .verification-message {

        grid-column:
            1 / -1;

    }


    .advisor-status {

        display: none;

    }


    .advisor-context-bar {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 8px;

    }


    .context-divider {

        display: none;

    }


    .chat {

        min-height: 390px;

        max-height: 520px;

        padding: 18px;

    }


    .bubble {

        max-width: 90%;

        font-size: 13px;

    }


    .recommendation {

        margin-left: 17px;

        margin-right: 17px;

    }


    .recommendation-actions {

        flex-direction:
            column;

    }


    .primary-button,
    .secondary-button {

        width: 100%;

    }


    .trust-section {

        grid-template-columns:
            1fr;

    }


    .footer-inner {

        display: block;

    }


    .footer-content {

        max-width: none;

        margin-top: 16px;

    }


    .footer-disclaimer {

        text-align: left;

    }

}


@media
(max-width: 480px) {

    .brand-subtitle {

        display: none;

    }


    .hero h1 {

        font-size: 34px;

        line-height: 1.14;

    }


    .hero-trust-row {

        flex-direction:
            column;

        align-items:
            center;

    }


    .advisor-shell {

        border-radius: 16px;

    }


    .composer {

        align-items: stretch;

        flex-direction: column;

    }


    .send-button {

        width: 100%;

        min-height: 44px;

    }

}

/* Consent-based lead handoff */
.lead-panel{margin:18px 24px;padding:22px;border:1px solid #b9d6ed;border-radius:14px;background:#f3f9ff;color:#18354f}
.lead-panel.hidden{display:none}
.lead-panel h2{margin:0 0 10px;font-size:1.3rem}
.lead-panel p{line-height:1.5}
.lead-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}
.lead-fields label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:600}
.lead-fields input,.lead-fields select{padding:10px;border:1px solid #b8ccda;border-radius:8px;background:white;min-width:0}
.lead-consent{display:flex;align-items:flex-start;gap:10px;line-height:1.4;font-size:.9rem}
.lead-consent input{margin-top:4px}
.lead-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
#leadStatus{font-weight:600}

/* ETS Realtime voice (independent of text chat) */
.voice-start-button {align-self:flex-end;min-height:46px;padding:0 14px;border:1px solid #b5cde2;border-radius:10px;background:#edf5fc;color:#153d60;font-weight:700;cursor:pointer;white-space:nowrap}
.voice-start-button:disabled {opacity:.5;cursor:not-allowed}
.voice-panel {margin:12px 20px;padding:18px;border:1px solid #b8d2e8;border-radius:14px;background:#f5faff;color:#18354f}
.voice-panel[hidden] {display:none}
.voice-panel-heading {font-weight:750;font-size:1.05rem}
.voice-disclosure {font-size:.85rem;line-height:1.5}
.voice-controls {display:flex;gap:10px;flex-wrap:wrap}
.voice-controls button {padding:10px 16px;border-radius:10px;border:1px solid #a4bbce;cursor:pointer;background:white}
#voiceEndButton {background:#a71d2a;color:white;border-color:#a71d2a}
.voice-transcript {max-height:180px;overflow:auto;font-size:.9rem;line-height:1.5;margin-top:10px}
.voice-transcript p {margin:5px 0}
@media(max-width:650px) {.voice-start-button {width:100%}}

/* ETS UNIFIED VOICE CONTROLS */
.composer {flex-wrap:wrap}
.voice-inline-controls {order:10;flex:0 0 100%;width:100%;margin:0!important;padding:10px 12px!important;border:1px solid #b8d2e8;border-radius:10px;background:#f5faff;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.voice-inline-controls[hidden] {display:none!important}
.voice-inline-controls #voiceStatus {margin:0;flex:1;min-width:170px;font-size:.88rem;font-weight:600}
.voice-inline-controls .voice-disclosure {order:10;flex:0 0 100%;margin:0;font-size:.73rem;line-height:1.35;color:#52667a}
.voice-inline-controls .voice-controls {display:flex;gap:8px}
.voice-inline-controls .voice-controls button {padding:8px 12px;font-size:.85rem}
.voice-inline-controls #voiceTranscript {display:none!important}
@media(max-width:650px) {.voice-inline-controls {gap:8px}.voice-inline-controls .voice-controls {width:100%}.voice-inline-controls .voice-controls button {flex:1}}

/* ETS ChatGPT-style voice button */

#voiceStartButton {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #1683ed !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0 !important;
    transition: background .2s, transform .2s;
}

#voiceStartButton:hover:not(:disabled) {
    background: #0969c6 !important;
    transform: scale(1.05);
}

#voiceStartButton:disabled {
    opacity: .65;
    cursor: wait;
}

#voiceStartButton svg {
    width: 23px;
    height: 23px;
}

#voiceStartButton.ets-voice-active {
    background: #dc2626 !important;
}


/* ETS lead authorization */

.ets-voice-consent {
    flex: 0 0 100%;
    width: 100%;
    padding: 10px 12px;
    margin-top: 8px;
    background: #f0f7ff;
    border: 1px solid #bfd8f4;
    border-radius: 9px;
    box-sizing: border-box;
}

.ets-voice-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #203d59;
    font-size: 13px;
    line-height: 1.5;
}

.ets-voice-consent input {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 1px;
    accent-color: #1683ed;
    cursor: pointer;
}