.handl-install-pwa[hidden],
.handl-handly[hidden] {
    display: none !important;
}

/*
 * HANDL — Install PWA + Handly Mini Assistant
 * v4.3.0
 *
 * The approved bottom banner remains unchanged in spirit.
 * Handly is a compact floating chat that opens ONLY after Install HANDL.
 */

:root {
    --handl-install-purple: #6840f0;
    --handl-install-purple-dark: #5832e6;
    --handl-install-ink: #090b10;
    --handl-install-muted: #6c7080;

    --handly-bg: #ffffff;
    --handly-soft: #f5f4f8;
    --handly-line: #e9e7ef;
    --handly-text: #242735;
}


/* =========================================================
   ROOT / MOBILE-TABLET ONLY
   ========================================================= */

#handl-install-root[hidden] {
    display: none !important;
}



/* =========================================================
   APPROVED BOTTOM INSTALL BANNER
   ========================================================= */

.handl-install-pwa {
    position: fixed !important;
    z-index: 2147483000 !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    font-family: inherit !important;
}

.handl-install-pwa__bar {
    display: grid !important;

    grid-template-columns:
        34px
        56px
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;
    gap: 12px !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-height: 92px !important;

    margin: 0 !important;
    padding:
        13px
        max(16px, env(safe-area-inset-right))
        max(13px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left))
        !important;

    background: #fff !important;

    border:
        1px solid rgba(104, 64, 240, .14) !important;
    border-bottom: 0 !important;

    border-radius:
        26px
        26px
        0
        0 !important;

    box-shadow:
        0 -14px 38px rgba(20, 18, 35, .16),
        0 -2px 9px rgba(104, 64, 240, .05)
        !important;
}

.handl-install-pwa__close {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: grid !important;
    place-items: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #232631 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    cursor: pointer !important;
}

.handl-install-pwa__close span {
    margin-top: -2px !important;

    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

.handl-install-pwa__close:hover,
.handl-install-pwa__close:focus {
    background: #f3f2f7 !important;
    outline: none !important;
}

.handl-install-pwa__icon {
    display: block !important;

    width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    border-radius: 15px !important;

    box-shadow:
        0 6px 15px rgba(16, 12, 28, .16) !important;
}

.handl-install-pwa__copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.handl-install-pwa__copy strong {
    display: block !important;

    margin: 0 0 3px !important;
    padding: 0 !important;

    color: var(--handl-install-ink) !important;

    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}

.handl-install-pwa__copy span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--handl-install-muted) !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.handl-install-pwa__install {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 138px !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--handl-install-purple-dark),
            var(--handl-install-purple)
        ) !important;

    border: 0 !important;
    border-radius: 13px !important;

    box-shadow:
        0 9px 22px rgba(104, 64, 240, .27) !important;

    font: inherit !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    cursor: pointer !important;
}


/* =========================================================
   HANDLY — MINI FLOATING CHAT
   ========================================================= */

.handl-handly[hidden] {
    display: none !important;
}

.handl-handly {
    position: fixed !important;
    z-index: 2147483400 !important;

    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(
        max(12px, env(safe-area-inset-bottom)) + 102px
    ) !important;

    width: min(340px, calc(100vw - 24px)) !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: inherit !important;

    pointer-events: auto !important;
}

.handl-handly__card {
    overflow: hidden !important;

    background: rgba(255,255,255,.985) !important;

    border: 1px solid rgba(104,64,240,.16) !important;
    border-radius: 19px !important;

    box-shadow:
        0 22px 54px rgba(20,18,35,.22),
        0 3px 12px rgba(104,64,240,.08) !important;

    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
}

.handl-handly__header {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 30px !important;

    align-items: center !important;
    gap: 10px !important;

    padding: 11px 12px !important;

    background: #fff !important;

    border-bottom: 1px solid #efedf3 !important;
}



.handl-handly:not([hidden]) .handl-handly__card {
    animation: handl-handly-open .14s ease-out both !important;
}

@keyframes handl-handly-open {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Handly brand avatar uses the official HANDL app icon. */
.handl-handly__robot {
    display: grid !important;
    place-items: center !important;

    width: 42px !important;
    height: 42px !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow:
        0 5px 12px rgba(24,17,48,.18) !important;
}

.handl-handly__robot-logo {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    border-radius: 12px !important;
}

.handl-handly__antenna,
.handl-handly__face,
.handl-handly__face i {
    display: none !important;
}

.handl-handly__identity {
    min-width: 0 !important;
}

.handl-handly__identity strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;

    margin: 0 0 6px !important;

    color: #171925 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

.handl-handly__identity span {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    color: #7a7f8e !important;

    font-size: 9.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

.handl-handly__identity span i {
    display: block !important;

    width: 6px !important;
    height: 6px !important;

    background: #35ba6f !important;

    border-radius: 50% !important;

    box-shadow:
        0 0 0 3px rgba(53,186,111,.10) !important;
}

.handl-handly__close {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: grid !important;
    place-items: center !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 0 3px !important;

    color: #737785 !important;
    background: #f7f7f9 !important;

    border: 1px solid #e6e5eb !important;
    border-radius: 50% !important;

    font-size: 22px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.handl-handly__messages {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;

    max-height: 225px !important;

    overflow-y: auto !important;
    overscroll-behavior: contain !important;

    padding: 12px 12px 4px !important;
}

.handl-handly__bubble {
    box-sizing: border-box !important;

    max-width: 88% !important;

    padding: 9px 11px !important;

    border-radius: 13px !important;

    font-size: 11.5px !important;
    font-weight: 520 !important;
    line-height: 1.4 !important;

    opacity: 0 !important;
    transform: translateY(4px) !important;

    transition:
        opacity .11s ease-out,
        transform .11s ease-out !important;
}

.handl-handly__bubble.is-visible {
    opacity: 1 !important;
    transform: none !important;
}

.handl-handly__bubble.is-handly {
    align-self: flex-start !important;

    color: var(--handly-text) !important;
    background: var(--handly-soft) !important;

    border: 1px solid #ebe9ef !important;
    border-bottom-left-radius: 4px !important;
}

.handl-handly__bubble.is-user {
    align-self: flex-end !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--handl-install-purple-dark),
            var(--handl-install-purple)
        ) !important;

    border-bottom-right-radius: 4px !important;
}

.handl-handly__bubble b,
.handl-handly__bubble strong {
    font-weight: 800 !important;
}

.handl-handly__actions {
    display: grid !important;
    gap: 7px !important;

    padding: 10px 12px 12px !important;
}

.handl-handly__chip {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    border-radius: 11px !important;

    font: inherit !important;
    font-size: 10.8px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
}

.handl-handly__chip.is-primary {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            var(--handl-install-purple-dark),
            var(--handl-install-purple)
        ) !important;

    border: 0 !important;

    box-shadow:
        0 8px 18px rgba(104,64,240,.20) !important;
}

.handl-handly__chip.is-soft {
    color: #5f3ce8 !important;
    background: #f8f6ff !important;

    border: 1px solid #ddd4ff !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 561px) and (max-width: 991px) {
    .handl-handly {
        right: 16px !important;
        bottom: calc(
            max(12px, env(safe-area-inset-bottom)) + 108px
        ) !important;

        width: 340px !important;
    }
}

@media (max-width: 560px) {
    .handl-install-pwa__bar {
        grid-template-columns:
            28px
            50px
            minmax(0, 1fr)
            auto !important;

        gap: 9px !important;

        min-height: 86px !important;

        padding:
            11px
            max(12px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left))
            !important;

        border-radius:
            22px
            22px
            0
            0 !important;
    }

    .handl-install-pwa__close {
        width: 28px !important;
        height: 28px !important;
    }

    .handl-install-pwa__close span {
        font-size: 30px !important;
    }

    .handl-install-pwa__icon {
        width: 50px !important;
        height: 50px !important;

        border-radius: 13px !important;
    }

    .handl-install-pwa__copy strong {
        font-size: 18px !important;
    }

    .handl-install-pwa__copy span {
        max-width: 165px !important;

        font-size: 10.5px !important;
    }

    .handl-install-pwa__install {
        min-width: 112px !important;
        min-height: 44px !important;

        padding: 0 13px !important;

        border-radius: 12px !important;

        font-size: 12px !important;
    }

    .handl-handly {
        right: 9px !important;

        bottom: calc(
            max(6px, env(safe-area-inset-bottom)) + 94px
        ) !important;

        width: min(
            326px,
            calc(100vw - 18px)
        ) !important;
    }

    .handl-handly__messages {
        max-height: 205px !important;
    }
}

@media (max-width: 360px) {
    .handl-install-pwa__bar {
        grid-template-columns:
            28px
            48px
            minmax(0,1fr) !important;

        grid-template-rows: auto auto !important;

        gap: 8px 9px !important;
    }

    .handl-install-pwa__install {
        grid-column: 2 / 4 !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 39px !important;
    }

    .handl-handly {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
    }

    .handl-handly__messages {
        max-height: 180px !important;
    }
}

@media (display-mode: standalone) {
    .handl-install-pwa {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .handl-handly__bubble {
        transition: none !important;
    }
}


/* =========================================================
   v4.3.0 — DESKTOP/LAPTOP FOOTER-TRIGGERED HANDLY
   ========================================================= */

@media (min-width: 992px) {
    /*
     * Never show the automatic mobile Install HANDL bottom bar
     * on desktop/laptop.
     */
    .handl-install-pwa {
        display: none !important;
    }

    /*
     * Handly is allowed on desktop, but remains hidden until the
     * footer's Install HANDL control is deliberately clicked.
     */
    .handl-handly {
        position: fixed !important;
        z-index: 2147483400 !important;

        right: 10px !important;
        bottom: 10px !important;
        left: auto !important;

        width: 340px !important;
        max-width: calc(100vw - 20px) !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: auto !important;
    }

    .handl-handly__messages {
        max-height: 260px !important;
    }
}


/* =========================================================
   v4.3.0 — HANDLY CONCIERGE GLOBAL LAUNCHER
   ========================================================= */

.handl-handly-launcher[hidden] {
    display: none !important;
}

.handl-handly-launcher {
    -webkit-appearance: none !important;
    appearance: none !important;

    position: fixed !important;
    z-index: 2147483350 !important;

    left: 20px !important;
    bottom: 20px !important;

    display: grid !important;
    place-items: center !important;

    width: 56px !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow:
        0 5px 12px rgba(30,23,62,.18)
        !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateY(8px)
        scale(.94) !important;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease
        !important;

    cursor: pointer !important;
}

.handl-handly-launcher.is-visible {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0)
        scale(1) !important;
}

.handl-handly-launcher img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: 14px !important;
}

.handl-handly.is-general {
    right: auto !important;
    left: 0 !important;
    bottom: 0 !important;

    width: min(
        360px,
        calc(100vw - 8px)
    ) !important;
}

.handl-handly.is-general .handl-handly__card {
    border-radius:
        0
        20px
        0
        0 !important;
}

@media (max-width: 560px) {
    .handl-handly.is-general {
        right: auto !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(
            336px,
            calc(100vw - 4px)
        ) !important;
    }
}

@media (min-width: 992px) {
    .handl-handly.is-general {
        right: auto !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 360px !important;
        max-width: calc(100vw - 8px) !important;
    }
}


/* =========================================================
   v4.3.0 — TRUE CHAT COMPOSER
   ========================================================= */

.handl-handly__composer[hidden] {
    display: none !important;
}

.handl-handly__composer {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        38px
        38px !important;

    align-items: center !important;
    gap: 8px !important;

    padding: 9px 10px 10px !important;

    background: #fff !important;

    border-top:
        1px solid #eceaf1 !important;
}

.handl-handly__input {
    -webkit-appearance: none !important;
    appearance: none !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    color: #242735 !important;
    background: #f6f5f8 !important;

    border:
        1px solid #e7e5ec !important;
    border-radius: 12px !important;

    outline: none !important;

    font: inherit !important;
    font-size: 11.5px !important;
    font-weight: 520 !important;
}

.handl-handly__input:focus {
    background: #fff !important;

    border-color:
        rgba(104, 64, 240, .48) !important;

    box-shadow:
        0 0 0 3px
        rgba(104, 64, 240, .08)
        !important;
}

.handl-handly__send {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: grid !important;
    place-items: center !important;

    width: 38px !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #5832e6,
            #6840f0
        ) !important;

    border: 0 !important;
    border-radius: 11px !important;

    box-shadow:
        0 7px 16px
        rgba(104,64,240,.20) !important;

    cursor: pointer !important;
}

.handl-handly__send span {
    display: block !important;

    margin-top: -1px !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.handl-handly__inline-link {
    color: #6240e8 !important;

    font-weight: 800 !important;
    text-decoration: none !important;
}

.handl-handly__inline-link:hover {
    text-decoration: underline !important;
}


/* =========================================================
   v4.3.0 — VERIFIED IDENTITY + FEEDBACK
   ========================================================= */

.handl-handly__verified {
    display: inline-grid !important;
    place-items: center !important;

    width: 11px !important;
    height: 11px !important;

    flex: 0 0 11px !important;

    margin: 0 0 0 1px !important;

    border-radius: 50% !important;

    box-shadow:
        0 0 0 2px rgba(47,128,237,.16) !important;

    transform: translateY(-4px) !important;

    overflow: visible !important;
}

.handl-handly__verified svg {
    display: block !important;

    width: 11px !important;
    height: 11px !important;

    overflow: visible !important;
}

.handl-handly__verified circle {
    fill: #2f80ed !important;
}

.handl-handly__verified path {
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.handl-handly__feedback {
    display: grid !important;
    gap: 9px !important;
}

.handl-handly__feedback-label {
    color: #343746 !important;

    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
}

.handl-handly__stars {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: 100% !important;
    padding: 4px 0 8px !important;
}

.handl-handly__star {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: grid !important;
    place-items: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #D9D6DE !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    font-size: 29px !important;
    line-height: 1 !important;

    text-shadow: 0 1px 1px rgba(0,0,0,.03) !important;

    cursor: pointer !important;

    transition:
        color .14s ease,
        transform .14s ease,
        filter .14s ease
        !important;
}

.handl-handly__star:hover,
.handl-handly__star.is-selected,
.handl-handly__star[aria-pressed="true"] {
    color: #FFB400 !important;
    background: transparent !important;
    filter: drop-shadow(0 3px 5px rgba(255,180,0,.20)) !important;
}

.handl-handly__star:hover {
    transform: translateY(-1px) scale(1.08) !important;
}

.handl-handly__star:active {
    transform: scale(.94) !important;
}

.handl-handly__feedback-comment,
.handl-handly__feedback-email {
    -webkit-appearance: none !important;
    appearance: none !important;

    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;

    color: #292c38 !important;
    background: #f7f6f9 !important;

    border: 1px solid #e6e3eb !important;
    border-radius: 11px !important;

    outline: none !important;

    font: inherit !important;
    font-size: 11px !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}

.handl-handly__feedback-comment {
    min-height: 74px !important;

    padding: 10px 11px !important;

    resize: vertical !important;
}

.handl-handly__feedback-email {
    height: 40px !important;

    padding: 0 11px !important;
}

.handl-handly__feedback-comment:focus,
.handl-handly__feedback-email:focus {
    background: #fff !important;

    border-color:
        rgba(104, 64, 240, .48) !important;

    box-shadow:
        0 0 0 3px
        rgba(104, 64, 240, .08)
        !important;
}

.handl-handly__feedback-error {
    min-height: 14px !important;

    color: #b42318 !important;

    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   v4.3.0 — VOICE + ACTION BRAIN UI
   ========================================================= */

.handl-handly__mic {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6240e8 !important;
    background: #f7f4ff !important;
    border: 1px solid #d9d0ff !important;
    border-radius: 11px !important;
    cursor: pointer !important;
    transition: background .12s ease, color .12s ease, transform .12s ease, box-shadow .12s ease !important;
}

.handl-handly__mic svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    fill: currentColor !important;
}

.handl-handly__mic:hover,
.handl-handly__mic:focus {
    color: #5632dc !important;
    background: #f1edff !important;
    outline: none !important;
}

.handl-handly__mic.is-listening {
    color: #fff !important;
    background: #6840f0 !important;
    box-shadow: 0 0 0 5px rgba(104,64,240,.12) !important;
    animation: handly-mic-pulse 1s ease-in-out infinite !important;
}

.handl-handly__mic.is-unavailable { opacity: .55 !important; }

@keyframes handly-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(.94); }
}

.handl-handly__handoff {
    display: grid !important;
    gap: 8px !important;
}

.handl-handly__handoff-input,
.handl-handly__handoff-message {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    color: #292c38 !important;
    background: #f7f6f9 !important;
    border: 1px solid #e6e3eb !important;
    border-radius: 11px !important;
    outline: none !important;
    font: inherit !important;
    font-size: 11px !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}

.handl-handly__handoff-input { height: 40px !important; padding: 0 11px !important; }
.handl-handly__handoff-message { min-height: 72px !important; padding: 10px 11px !important; resize: vertical !important; }

.handl-handly__handoff-input:focus,
.handl-handly__handoff-message:focus {
    background: #fff !important;
    border-color: rgba(104,64,240,.48) !important;
    box-shadow: 0 0 0 3px rgba(104,64,240,.08) !important;
}

.handl-handly__handoff-error {
    min-height: 12px !important;
    color: #b42318 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

.handl-handly__chip-link { text-decoration: none !important; }


/* v4.3.0 — HANDL feedback rating uses the approved gold/yellow. */
.handl-handly__star[aria-pressed="true"],
.handl-handly__star.is-selected {
    color: #FFB400 !important;
}


/* =========================================================
   v4.3.0 — HANDLY VOICE / REQUEST SERVICE / SIZE CORRECTIONS
   ========================================================= */

.handl-handly__composer {
    grid-template-columns:
        minmax(0, 1fr)
        40px
        40px !important;
}

.handl-handly__mic,
.handl-handly__send {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
}

.handl-handly__mic[hidden] {
    display: none !important;
}

.handl-handly__mic:not([hidden]) {
    display: grid !important;
}

.handl-handly__intake-picker,
.handl-handly__intake-summary {
    display: grid !important;
    gap: 9px !important;
}

.handl-handly__intake-select {
    -webkit-appearance: none !important;
    appearance: none !important;

    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 38px 0 12px !important;

    color: #292c38 !important;
    background:
        #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236840F0' d='M1.4.8 6 5.4 10.6.8 12 2.2l-6 6-6-6z'/%3E%3C/svg%3E")
        no-repeat right 13px center !important;

    border: 1px solid #ded8f5 !important;
    border-radius: 12px !important;
    outline: none !important;

    font: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}

.handl-handly__intake-select:focus {
    border-color: rgba(104,64,240,.52) !important;
    box-shadow: 0 0 0 3px rgba(104,64,240,.08) !important;
}

.handl-handly__intake-summary {
    padding: 10px !important;
    background: #faf9fc !important;
    border: 1px solid #ece8f3 !important;
    border-radius: 13px !important;
}

.handl-handly__intake-summary-row {
    display: grid !important;
    gap: 2px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #ece8f3 !important;
}

.handl-handly__intake-summary-row:last-of-type {
    border-bottom: 0 !important;
}

.handl-handly__intake-summary-row span {
    color: #868896 !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
}

.handl-handly__intake-summary-row strong {
    color: #282b38 !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

@media (max-width: 560px) {
    .handl-handly__composer {
        grid-template-columns:
            minmax(0, 1fr)
            38px
            38px !important;
        gap: 6px !important;
    }

    .handl-handly__mic,
    .handl-handly__send {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
}


/* =========================================================
   v4.3.0 - CONVERSATION SHARE
   ========================================================= */
.handl-handly__chip.is-whatsapp {
    color: #0f7a42 !important;
    background: #f0fff6 !important;
    border: 1px solid #bdebcf !important;
}

.handl-handly__share-form {
    display: grid !important;
    gap: 9px !important;
}

.handl-handly__share-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    color: #292c38 !important;
    background: #f7f6f9 !important;
    border: 1px solid #e6e3eb !important;
    border-radius: 11px !important;
    outline: none !important;
    font: inherit !important;
    font-size: 11px !important;
}

.handl-handly__share-input:focus {
    background: #fff !important;
    border-color: rgba(104,64,240,.48) !important;
    box-shadow: 0 0 0 3px rgba(104,64,240,.08) !important;
}

.handl-handly__share-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    color: #666a78 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

.handl-handly__share-consent input {
    margin-top: 2px !important;
}

.handl-handly__share-error {
    min-height: 12px !important;
    color: #b42318 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}


/* =========================================================
   v4.3.0 — Human handoff identity form
   ========================================================= */
.handl-handly__handoff-title {
    margin: 0 0 2px !important;
    color: #242735 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.handl-handly__handoff-help {
    margin: -1px 0 2px !important;
    color: #777b89 !important;
    font-size: 9.8px !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}


/* =========================================================
   v5.2.0 — HANDLY IDENTITY + COMPACT HANDOFF + SHARE CLARITY
   ========================================================= */

/* HANDLY must read as the product/robot name, not a tiny secondary label. */
.handl-handly__identity strong {
    gap: 6px !important;
    margin-bottom: 5px !important;
}

.handl-handly__identity .handl-handly__name {
    display: inline-flex !important;
    align-items: center !important;

    color: #6840F0 !important;

    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.handl-handly__identity .handl-handly__role {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    color: #757b8c !important;

    font-size: 10px !important;
    font-weight: 680 !important;
    line-height: 1.1 !important;
}

.handl-handly__identity .handl-handly__role i {
    width: 7px !important;
    height: 7px !important;
}

.handl-handly__verified {
    flex: 0 0 15px !important;
    width: 15px !important;
    height: 15px !important;
}

/* Keep very long states/forms inside the viewport instead of extending off-screen. */
.handl-handly.is-general .handl-handly__card {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 4px) !important;
}

.handl-handly__header,
.handl-handly__composer {
    flex: 0 0 auto !important;
}

.handl-handly__messages {
    min-height: 0 !important;
    flex: 0 1 auto !important;
}

.handl-handly__actions {
    min-height: 0 !important;
    flex: 0 1 auto !important;
}

/* Handoff becomes a compact readable takeover rather than a very tall stack. */
.handl-handly.is-handoff-form .handl-handly__messages {
    max-height: 92px !important;
    padding-bottom: 8px !important;
}

.handl-handly.is-handoff-form .handl-handly__actions {
    max-height: calc(100dvh - 165px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

.handl-handly__handoff {
    display: grid !important;
    gap: 8px !important;
}

.handl-handly__handoff-title {
    margin: 0 !important;

    color: #242735 !important;

    font-size: 12.5px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.handl-handly__handoff-help {
    margin: -2px 0 1px !important;

    color: #727786 !important;

    font-size: 9.4px !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}

.handl-handly__handoff-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.handl-handly__handoff-field {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.handl-handly__handoff-field.is-wide {
    grid-column: 1 / -1 !important;
}

.handl-handly__handoff-field > span {
    color: #686e7e !important;

    font-size: 8.7px !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
}

.handl-handly__handoff-input {
    height: 35px !important;
    min-width: 0 !important;
    padding: 0 9px !important;

    background: #fbfafc !important;
    border-radius: 9px !important;

    font-size: 10.5px !important;
}

.handl-handly__handoff-field.is-note {
    gap: 5px !important;
}

.handl-handly__handoff-message {
    min-height: 54px !important;
    max-height: 90px !important;
    padding: 8px 9px !important;

    background: #fbfafc !important;
    border-radius: 9px !important;

    font-size: 10.5px !important;
    resize: vertical !important;
}

.handl-handly__handoff-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
}

.handl-handly__handoff-buttons .handl-handly__chip {
    min-height: 38px !important;
    padding: 0 8px !important;

    font-size: 10px !important;
}

.handl-handly.is-handoff-form .handl-handly__share-consent {
    font-size: 9px !important;
}

/* Make "send to yourself" unmistakable. */
.handl-handly__share-title {
    color: #292c38 !important;

    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

.handl-handly__share-help {
    margin-top: -3px !important;

    color: #737887 !important;

    font-size: 9.4px !important;
    font-weight: 520 !important;
    line-height: 1.35 !important;
}

@media (max-width: 360px) {
    .handl-handly__identity .handl-handly__name {
        font-size: 17px !important;
    }

    .handl-handly__handoff-grid {
        gap: 6px !important;
    }

    .handl-handly__handoff-input {
        height: 34px !important;
        font-size: 10px !important;
    }

    .handl-handly__handoff-buttons {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 992px) {
    .handl-handly.is-general .handl-handly__card {
        max-height: calc(100dvh - 12px) !important;
    }

    .handl-handly.is-handoff-form .handl-handly__messages {
        max-height: 105px !important;
    }

    .handl-handly.is-handoff-form .handl-handly__actions {
        max-height: calc(100dvh - 190px) !important;
    }
}


/* =========================================================
   v5.2.0 — CHAT VIEWPORT / COMPOSER VISIBILITY FIX
   The header and composer must never be pushed out of view.
   ========================================================= */

.handl-handly.is-general .handl-handly__card {
    display: flex !important;
    flex-direction: column !important;

    height: min(
        620px,
        calc(100dvh - 8px)
    ) !important;

    min-height: min(
        430px,
        calc(100dvh - 8px)
    ) !important;

    max-height: calc(100dvh - 8px) !important;

    overflow: hidden !important;
}

.handl-handly.is-general .handl-handly__header {
    flex: 0 0 auto !important;
}

.handl-handly.is-general .handl-handly__messages {
    flex: 1 1 auto !important;

    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.handl-handly.is-general .handl-handly__actions {
    flex: 0 1 auto !important;

    min-height: 0 !important;
    max-height: 52dvh !important;

    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

.handl-handly.is-general .handl-handly__actions:empty {
    display: none !important;
}

.handl-handly.is-general .handl-handly__composer:not([hidden]) {
    display: grid !important;
    flex: 0 0 auto !important;

    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;
    box-sizing: border-box !important;

    margin-top: auto !important;
}

@media (max-height: 520px) {
    .handl-handly.is-general .handl-handly__card {
        height: calc(100dvh - 4px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 4px) !important;
    }

    .handl-handly.is-general .handl-handly__actions {
        max-height: 42dvh !important;
    }
}

@media (max-width: 560px) {
    .handl-handly.is-general .handl-handly__card {
        height: min(
            620px,
            calc(100dvh - 4px)
        ) !important;

        max-height: calc(100dvh - 4px) !important;
    }
}


/* =========================================================
   v5.2.0 — SUBTLE VIEWPORT INSET
   Handly sits a few pixels inside the screen so its bottom controls and
   rounded edge remain fully visible on mobile and laptop viewports.
   ========================================================= */

.handl-handly.is-general {
    left: max(6px, env(safe-area-inset-left)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;

    width: min(
        360px,
        calc(100vw - 12px)
    ) !important;
}

.handl-handly.is-general .handl-handly__card {
    height: min(
        620px,
        calc(100dvh - 12px)
    ) !important;

    min-height: min(
        430px,
        calc(100dvh - 12px)
    ) !important;

    max-height: calc(100dvh - 12px) !important;

    border-radius: 20px 20px 14px 14px !important;
}

@media (max-width: 560px) {
    .handl-handly.is-general {
        left: max(4px, env(safe-area-inset-left)) !important;
        bottom: max(4px, env(safe-area-inset-bottom)) !important;

        width: min(
            336px,
            calc(100vw - 8px)
        ) !important;
    }

    .handl-handly.is-general .handl-handly__card {
        height: min(
            620px,
            calc(100dvh - 8px)
        ) !important;

        max-height: calc(100dvh - 8px) !important;
    }
}

@media (min-width: 992px) {
    .handl-handly.is-general {
        left: 8px !important;
        bottom: 8px !important;
        width: 360px !important;
        max-width: calc(100vw - 16px) !important;
    }

    .handl-handly.is-general .handl-handly__card {
        max-height: calc(100dvh - 16px) !important;
    }
}