@import url("/assistant-settings/styles.css?v=3e9009836e");

:host {
    --size: 56px;
    --launch-bg: linear-gradient(135deg, #d63a63 0%, #b8459f 52%, #8c47e0 100%);
    --launch-shadow: 0 12px 30px -6px rgba(184, 69, 159, .62), 0 4px 12px rgba(140, 71, 224, .32);
    --launch-shadow-hover: 0 16px 38px -6px rgba(184, 69, 159, .78), 0 5px 14px rgba(140, 71, 224, .4);
}

:host([data-theme="light"]) {
    --launch-shadow: 0 12px 26px -8px rgba(184, 69, 159, .58), 0 3px 9px rgba(140, 71, 224, .24);
    --launch-shadow-hover: 0 16px 32px -8px rgba(184, 69, 159, .7), 0 4px 11px rgba(140, 71, 224, .32);
}

@media (min-width: 768px) {
    :host {
        --size: 60px;
    }
}

.launcher {
    grid-template-columns: auto var(--size);
    width: auto;
    min-width: var(--size);
    border-radius: 999px;
}

.launcher svg {
    grid-area: 1 / 2;
}

.launcher .i-chat {
    width: 30px;
    height: 30px;
}

.launcher .i-close {
    width: 25px;
    height: 25px;
}

.launcher:hover {
    transform: scale(1.04);
}

.launcher::before {
    border-radius: inherit;
}

.launcher.ring::before {
    animation: mhs-ring-soft 1.6s cubic-bezier(.2, .7, .3, 1) 2;
}

.launcher::after,
.launcher.ring::after {
    content: var(--mhs-chat-label, "");
    position: static;
    z-index: auto;
    grid-area: 1 / 1;
    max-width: 0;
    padding-inline-start: 0;
    overflow: hidden;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: var(--size);
    white-space: nowrap;
    opacity: 0;
    animation: none;
    transition: max-width .5s var(--ease), padding .5s var(--ease), opacity .3s ease;
}

.launcher.ring::after {
    max-width: 240px;
    padding-inline-start: 22px;
    opacity: 1;
}

@media (min-width: 768px) and (hover: hover) {
    .launcher:hover::after,
    .launcher:focus-visible::after {
        max-width: 240px;
        padding-inline-start: 22px;
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .launcher:has(> .badge:not([hidden]))::after,
    .launcher:focus-visible::after {
        max-width: 240px;
        padding-inline-start: 22px;
        opacity: 1;
    }
}

.mhsa.is-open .launcher::after {
    max-width: 0;
    padding-inline-start: 0;
    opacity: 0;
}

@keyframes mhs-ring-soft {
    0% {
        opacity: .5;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.2, 1.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .launcher::after,
    .launcher.ring::after {
        transition: none;
    }
}