/*
   SIS engagement stack: discount popup -> chat popup -> fixed bot -> music
   player. Namespaced under .sis-* the same way the loader is, so it can't
   collide with the theme's own styles.
*/

:root {
    --sis-a: #f99d4e;
    --sis-b: #e93b6e;
}

/* ---------- shared popup shell ---------- */

.sis-popup {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.sis-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease;
}

.sis-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 7, 11, .6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sis-popup__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}

.sis-popup__close:hover {
    background: rgba(255, 255, 255, .16);
    transform: rotate(90deg);
}

/* ---------- discount popup ---------- */

.sis-popup--discount .sis-popup__card {
    position: relative;
    z-index: 1;
    width: 480px;
    max-width: calc(100vw - 32px);
    padding: 52px 48px 44px;
    border-radius: 24px;
    background: linear-gradient(165deg, #14141c, #0a0a0e);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    text-align: center;
    transform: scale(.9) translateY(10px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.sis-popup--discount.is-open .sis-popup__card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.sis-popup__badge {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(249, 157, 78, .12);
    border: 1px solid rgba(249, 157, 78, .35);
    color: var(--sis-a);
    font: 700 12px/1 'Outfit', sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.sis-popup__title {
    font-family: 'Outfit', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 16px;
}

.sis-popup__title b {
    background: linear-gradient(90deg, var(--sis-a), var(--sis-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sis-popup__text {
    font: 400 16px/1.65 'Outfit', sans-serif;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 30px;
}

.sis-popup__cta {
    display: block;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--sis-a), var(--sis-b));
    color: #fff;
    font: 700 16px/1 'Outfit', sans-serif;
    text-decoration: none;
    letter-spacing: .3px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.sis-popup__cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(233, 59, 110, .35);
}

.sis-popup__fine {
    display: block;
    margin-top: 18px;
    font: 400 12.5px/1 'Outfit', sans-serif;
    color: rgba(255, 255, 255, .3);
}

/* ---------- free audit popup ---------- */

/* One short column: heading, one line, three fields, one button. */
.sis-audit {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    border-radius: 24px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(233, 59, 110, .16), transparent 55%),
        radial-gradient(90% 70% at 100% 100%, rgba(249, 157, 78, .10), transparent 60%),
        linear-gradient(165deg, #13131b, #09090d);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
    font-family: 'Outfit', sans-serif;
    transform: scale(.94) translateY(14px);
    opacity: 0;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
.sis-popup--audit.is-open .sis-audit { transform: none; opacity: 1; }
.sis-popup--audit .sis-popup__close { z-index: 2; top: 16px; right: 16px; }

.sis-audit__pitch { padding: 40px 36px 0; }
.sis-audit__pitch .sis-popup__badge { margin-bottom: 18px; letter-spacing: 1.8px; font-size: 11px; }

.sis-audit__title {
    margin: 0 0 10px;
    padding-right: 30px;
    font: 700 30px/1.15 'Outfit', sans-serif;
    letter-spacing: -.5px;
    color: #fff;
}
.sis-audit__title b {
    background: linear-gradient(90deg, #ff4d94, var(--sis-a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sis-audit__lead {
    margin: 0;
    font: 400 15px/1.55 'Outfit', sans-serif;
    color: rgba(255, 255, 255, .58);
}
.sis-audit__lead b { color: #fff; font-weight: 600; }

.sis-audit__form { padding: 24px 36px 36px; }
.sis-audit__grid { display: grid; gap: 12px; }

/* Scoped under the popup id: main.css styles bare input[type=text] etc.
   with a grey fill and a 60px height at (0,1,1). */
#sisAuditPopup .sis-audit__input {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #f3f4f7;
    font: 400 15px/1.4 'Outfit', sans-serif;
    outline: none;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#sisAuditPopup .sis-audit__input::placeholder { color: rgba(255, 255, 255, .36); font-size: 15px; }
#sisAuditPopup .sis-audit__input:focus {
    border-color: rgba(255, 77, 148, .55);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 4px rgba(255, 77, 148, .12);
}

.sis-audit__err {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 77, 109, .1);
    border: 1px solid rgba(255, 77, 109, .3);
    color: #ff8fa6;
    font-size: 13.5px;
}

.sis-audit__go {
    width: 100%;
    height: 54px;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff2d8a 0%, #ff5a78 45%, #f7a04b 100%);
    color: #fff;
    font: 600 15.5px/1 'Outfit', sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 45, 138, .3);
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
.sis-audit__go:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255, 45, 138, .42); }
.sis-audit__go i { transition: transform .25s ease; }
.sis-audit__go:hover i { transform: translateX(4px); }
.sis-audit__go.is-busy { opacity: .6; pointer-events: none; }
.sis-audit__go.is-busy span::after { content: '…'; }

/* success */
.sis-audit__done { padding: 48px 36px 36px; text-align: center; }
.sis-audit__done .sis-audit__title { padding-right: 0; }
.sis-audit__done .sis-audit__lead { margin-bottom: 8px; }
.sis-audit__tick {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2d8a, #f7a04b);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 12px 34px rgba(255, 45, 138, .4);
}

@media (max-width: 480px) {
    .sis-audit__pitch { padding: 34px 22px 0; }
    .sis-audit__form { padding: 20px 22px 26px; }
    .sis-audit__title { font-size: 26px; }
}

/* ---------- chat popup ---------- */

































/* ---------- fixed bot widget ---------- */

@media (max-width: 640px) {
    }

/* ---------- music player ---------- */

.sis-music {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 9000;
    opacity: 0;
    transform: scale(.7);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1.4), opacity .4s ease;
}

.sis-music.is-visible {
    opacity: 1;
    transform: scale(1);
}

.sis-music__toggle {
    position: relative;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #101017;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sis-music__wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sis-music__bar {
    stroke: var(--sis-a);
    stroke-width: 3;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center top;
    transform: scaleY(.4);
    opacity: .55;
    transition: opacity .3s ease;
}

/* slow-motion circular wave: each radial bar pulses on its own offset,
   driven purely by CSS — no per-frame JS, stays cheap even while playing */
.sis-music.is-playing .sis-music__bar {
    opacity: 1;
    animation: sis-music-pulse 2.4s ease-in-out infinite;
    animation-delay: calc(var(--sis-i) * -0.085s);
}

@keyframes sis-music-pulse {
    0%, 100% { transform: scaleY(.4); }
    50% { transform: scaleY(1.3); }
}

.sis-music__icon {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

/* paused state: a play triangle, built from two clipped bars */
.sis-music__icon i {
    display: block;
    width: 3px;
    height: 14px;
    border-radius: 1px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease, width .2s ease, height .2s ease, border-radius .2s ease;
}

.sis-music__icon i:nth-child(3) { display: none; }

/* playing state: swap to a pause icon (two bars) */
.sis-music.is-playing .sis-music__icon i:nth-child(1) { transform: translateX(1px); }
.sis-music.is-playing .sis-music__icon i:nth-child(2) { transform: translateX(-1px); }

/* paused state: merge the two bars into a play triangle via clip-path */
.sis-music:not(.is-playing) .sis-music__icon {
    clip-path: none;
}

.sis-music:not(.is-playing) .sis-music__icon i:nth-child(1) {
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    border-radius: 0;
    transform: translateX(2px);
}

.sis-music:not(.is-playing) .sis-music__icon i:nth-child(2) {
    display: none;
}

@media (max-width: 640px) {
    .sis-music { left: 14px; bottom: 14px; }
    .sis-music__toggle { width: 54px; height: 54px; }
}






/* ===========================================================================
   Assistant — Agent SIS
   ===========================================================================
   One card: header (who · mute · close), a Chat | Voice switch, then the
   active view. A floating card on desktop, full screen on phones.
   =========================================================================== */

.sis-as {
    --as-bg: #0e0e15;
    --as-line: rgba(255, 255, 255, .08);
    --as-soft: rgba(255, 255, 255, .06);
    --as-text: #f3f1f6;
    --as-mute: rgba(255, 255, 255, .55);
    --as-grad: linear-gradient(125deg, #f99d4e, #e93b6e);
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* the sticky header sets z-index: 10000 !important in supreme_branding.css */
    z-index: 10050;
    font-family: 'Outfit', sans-serif;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.97);
    transform-origin: bottom right;
    transition: opacity .28s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility .3s;
}

.sis-as.is-open { opacity: 1; visibility: visible; transform: none; }

.sis-as__device {
    width: 400px;
    height: min(680px, calc(100vh - 48px));
    height: min(680px, calc(100dvh - 48px));
    border-radius: 26px;
    overflow: hidden;
    background: var(--as-bg);
    box-shadow:
        0 30px 80px -10px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(255, 255, 255, .07);
}

.sis-as__panel {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--as-text);
    background:
        radial-gradient(120% 50% at 100% 0%, rgba(233, 59, 110, .22), transparent 60%),
        radial-gradient(90% 40% at 0% 0%, rgba(249, 157, 78, .14), transparent 60%),
        var(--as-bg);
}

/* ---------------- header ---------------- */

.sis-as__head {
    flex: 0 0 auto;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--as-line);
}

.sis-as__bar { display: flex; align-items: center; gap: 11px; }

.sis-as__mini {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #0b0b14;
    box-shadow: 0 0 0 2px rgba(233, 59, 110, .5), 0 0 18px rgba(233, 59, 110, .35);
}

.sis-as__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sis-as__who { flex: 1 1 auto; min-width: 0; }

.sis-as__who strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.sis-as__who small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--as-mute);
}

.sis-as__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35e08c;
    box-shadow: 0 0 8px rgba(53, 224, 140, .8);
}

.sis-as__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--as-soft);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}

.sis-as__icon:hover { background: rgba(255, 255, 255, .14); }
.sis-as__close:hover { transform: rotate(90deg); }
.sis-as__icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Chat | Voice */
.sis-as__seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 14px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--as-line);
}

.sis-as__seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--as-mute);
    font: 600 13.5px/1 'Outfit', sans-serif;
    cursor: pointer;
    transition: background .25s ease, color .2s ease, box-shadow .25s ease;
}

.sis-as__seg button:hover { color: #fff; }

.sis-as__seg button[aria-pressed="true"] {
    background: var(--as-grad);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(233, 59, 110, .7);
}

.sis-as__seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------- views ---------------- */

.sis-as__view {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.sis-as__view.is-active { display: flex; animation: sis-as-in .3s ease both; }

@keyframes sis-as-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- chat ---------------- */

.sis-as__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.sis-as__thread::-webkit-scrollbar { width: 4px; }
.sis-as__thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }

.sis-as__msg {
    /* replies are plain text with real newlines (lists), so keep them */
    white-space: pre-wrap;
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .05);
    color: var(--as-text);
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    animation: sis-as-in .25s ease both;
}

.sis-as__msg b { color: #fff; }

/* bubbles written into the template carry no real newlines */
.sis-as__msg--static { white-space: normal; }

.sis-as__msg--me {
    align-self: flex-end;
    background: var(--as-grad);
    border-color: transparent;
    color: #fff;
    border-radius: 18px 18px 6px 18px;
}

/* the wait for a reply */
.sis-as__typing { display: flex; align-items: center; gap: 5px; padding: 14px 16px; }

.sis-as__typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    animation: sis-as-typing 1.25s ease-in-out infinite;
}

.sis-as__typing i:nth-child(2) { animation-delay: .18s; }
.sis-as__typing i:nth-child(3) { animation-delay: .36s; }

@keyframes sis-as-typing {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
}

/* step 1 : the visitor's details */
.sis-as__lead { display: none; flex-direction: column; gap: 12px; align-self: stretch; }
.sis-as__thread[data-sis-as-step="lead"] .sis-as__lead { display: flex; }
.sis-as__lead .sis-as__msg { align-self: flex-start; }

.sis-as__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--as-line);
}

.sis-as__field { display: block; min-width: 0; margin: 0; }
.sis-as__field--wide { grid-column: 1 / -1; }

.sis-as__field > span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78);
}

.sis-as__field i { color: #ff6f9c; font-style: normal; }
.sis-as__field em { color: rgba(255, 255, 255, .4); font-style: normal; font-weight: 500; }

/* scoped under the id: main.css gives bare inputs a grey fill and 60px height */
#sisAssistant .sis-as__field input {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font: 400 14px/1.3 'Outfit', sans-serif;
    outline: 0;
    box-shadow: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#sisAssistant .sis-as__field input::placeholder { color: rgba(255, 255, 255, .32); }

#sisAssistant .sis-as__field input:focus {
    border-color: rgba(233, 59, 110, .7);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 3px rgba(233, 59, 110, .16);
}

.sis-as__leaderr {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 77, 109, .1);
    border: 1px solid rgba(255, 77, 109, .28);
    font-size: 12.5px;
    color: #ff9db8;
}

.sis-as__continue {
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--as-grad);
    color: #fff;
    font: 700 15px/1 'Outfit', sans-serif;
    cursor: pointer;
    box-shadow: 0 12px 28px -8px rgba(233, 59, 110, .6);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, opacity .2s ease;
}

.sis-as__continue i { font-style: normal; margin-left: 6px; }
.sis-as__continue:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -8px rgba(233, 59, 110, .7); }
.sis-as__continue:disabled { opacity: .55; cursor: default; transform: none; }

.sis-as__privacy {
    margin: -2px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .38);
}

/* step 2 : what brings you here — a 2 × 2 grid of tiles */
.sis-as__intents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-self: stretch;
    margin-top: 2px;
}

.sis-as__intents[hidden] { display: none; }

.sis-as__intents button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .045);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.sis-as__intents button:hover {
    background: rgba(233, 59, 110, .14);
    border-color: rgba(233, 59, 110, .5);
    transform: translateY(-2px);
}

.sis-as__intent-ico {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    font-size: 16px;
}

.sis-as__intents b { display: block; font-size: 13.5px; font-weight: 700; }
.sis-as__intents small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--as-mute); }

/* nothing to send until the details are in */
.sis-as__thread[data-sis-as-step="lead"] ~ .sis-as__compose { display: none; }

.sis-as__compose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.sis-as__compose:focus-within {
    border-color: rgba(233, 59, 110, .6);
    box-shadow: 0 0 0 3px rgba(233, 59, 110, .14);
}

#sisAssistant .sis-as__compose input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 400 14.5px/1.3 'Outfit', sans-serif;
    outline: none;
    box-shadow: none;
}

#sisAssistant .sis-as__compose input::placeholder { color: rgba(255, 255, 255, .38); }

.sis-as__send {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--as-grad);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, filter .2s ease;
}

.sis-as__send:hover { transform: scale(1.06); filter: brightness(1.08); }
.sis-as__send:disabled,
#sisAssistant .sis-as__compose input:disabled { opacity: .55; cursor: default; }
.sis-as__send:disabled:hover { transform: none; filter: none; }

/* ---------------- voice ---------------- */

.sis-as__stage {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 22px 18px;
}

.sis-as__ask {
    margin: 0 0 26px;
    font: 800 26px/1.15 'Outfit', sans-serif;
    letter-spacing: -.5px;
    color: #fff;
}

.sis-as__ring {
    position: relative;
    flex: 0 0 auto;
    width: 172px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sis-as__ring img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* the halo breathes, so the orb reads as alive rather than a static image */
.sis-as__ring-halo {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 59, 110, .5) 0%,
                                        rgba(249, 157, 78, .2) 44%, transparent 68%);
    animation: sis-as-breathe 3.6s ease-in-out infinite;
}

@keyframes sis-as-breathe {
    0%, 100% { transform: scale(1);    opacity: .75; }
    50%      { transform: scale(1.09); opacity: 1; }
}

.sis-as__try {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.sis-as__try li {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--as-line);
    font-size: 12px;
    color: rgba(255, 255, 255, .65);
}

/* once a conversation is on screen the examples have done their job */
.sis-as[data-sis-voice="listening"] .sis-as__try,
.sis-as[data-sis-voice="thinking"] .sis-as__try,
.sis-as[data-sis-voice="speaking"] .sis-as__try { display: none; }

/* The orb (img/site/agent-orb.webp) is already in the brand's amber, rose and
   violet, and transparent outside its own glass rim — no recolouring. */

/* ===========================================================================
   Launcher — one pill: the orb (voice) + "Chat with us"
   =========================================================================== */

.sis-launch {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10040;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(14, 14, 21, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1), visibility .3s;
}

.sis-launch.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sis-launch.is-hidden  { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); }

.sis-launch__btn {
    position: relative;
    height: 50px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1), filter .2s ease;
}

.sis-launch__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sis-launch__btn--voice {
    width: 50px;
    background: #0b0b14;
    box-shadow: 0 0 0 2px rgba(233, 59, 110, .45);
}

.sis-launch__btn--voice:hover { transform: scale(1.06); }

.sis-launch__orb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.sis-launch__btn--chat {
    gap: 8px;
    padding: 0 20px 0 16px;
    background: linear-gradient(125deg, #f99d4e, #e93b6e);
    color: #fff;
    font: 600 14.5px/1 'Outfit', sans-serif;
    white-space: nowrap;
}

.sis-launch__btn--chat:hover { filter: brightness(1.07); }

.sis-launch__ping {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(233, 59, 110, .55);
    animation: sis-launch-ping 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes sis-launch-ping {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.18, 1.4); opacity: 0; }
    100% { transform: scale(1.18, 1.4); opacity: 0; }
}

/* tooltip above the orb */
.sis-launch__label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translate(-50%, 6px);
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 999px;
    background: #14141c;
    color: #fff;
    font: 600 12.5px/1 'Outfit', sans-serif;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.sis-launch__btn:hover .sis-launch__label,
.sis-launch__btn:focus-visible .sis-launch__label { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- phones ---------------- */

@media (max-width: 767px) {
    /* full screen: a card over a phone page only leaves slivers of both */
    .sis-as {
        inset: 0;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        transform-origin: bottom center;
        transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, visibility .45s;
    }

    .sis-as.is-open { transform: none; }

    .sis-as__device {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .sis-as__head { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
    .sis-as__seg { margin-top: 12px; }
    .sis-as__thread { padding: 14px 14px 8px; }
    .sis-as__msg { max-width: 90%; font-size: 15px; }

    /* 16px stops iOS zooming the page when a field is focused */
    #sisAssistant .sis-as__field input,
    #sisAssistant .sis-as__compose input { font-size: 16px; }

    .sis-as__compose { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); }

    .sis-as__ask { font-size: 24px; margin-bottom: 22px; }
    .sis-as__ring { width: min(180px, 46vw); }

    .sis-launch {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        padding: 5px;
    }

    .sis-launch__btn { height: 46px; }
    .sis-launch__btn--voice { width: 46px; }
    .sis-launch__btn--chat { padding: 0 16px 0 13px; font-size: 14px; }
    .sis-launch__text::after { content: none; }
    .sis-launch__label { display: none; }
}

@media (max-width: 360px) {
    /* very narrow: the chat button keeps only its icon */
    .sis-launch__text { display: none; }
    .sis-launch__btn--chat { width: 46px; padding: 0; }
    .sis-as__fields { grid-template-columns: 1fr; }
}

/* short screens: tighten the voice screen so the reply still fits */
@media (max-height: 700px) {
    .sis-as__ask { font-size: 22px; margin-bottom: 16px; }
    .sis-as__ring { width: 140px; }
    .sis-as__try { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .sis-as { transition: visibility .2s, opacity .2s; }
    .sis-as__view.is-active, .sis-as__msg { animation: none; }
    .sis-as__ring-halo, .sis-launch__ping, .sis-as__typing i { animation: none; }
}