.av5p,
.av5p * {
    box-sizing: border-box;
}

.av5p {
    --av5p-primary: #4e2f22;
    --av5p-secondary: #7d4f37;
    --av5p-accent: #a85834;
    --av5p-bottom: 90px;
    --av5p-cream: #f5f0e8;
    --av5p-beige: #e9dece;
    --av5p-border: #d6c6b5;
    --av5p-text: #5d4b3f;
    --av5p-soft-text: #7c6a5d;
    --av5p-white: #ffffff;
    --av5p-green: #25d366;

    position: fixed !important;
    right: 18px !important;
    bottom: var(--av5p-bottom) !important;
    left: auto !important;
    z-index: 850 !important;

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--av5p-text);
    isolation: isolate;
    pointer-events: auto !important;
}

.av5p-launcher {
    position: relative !important;

    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    padding: 0 !important;

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

    border: 3px solid var(--av5p-white) !important;
    border-radius: 50% !important;
    background:
        linear-gradient(
            145deg,
            var(--av5p-primary),
            var(--av5p-secondary)
        ) !important;
    color: var(--av5p-white) !important;

    box-shadow:
        0 13px 34px rgba(78, 47, 34, .34),
        0 0 0 4px rgba(168, 88, 52, .12) !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

.av5p-launcher::after {
    display: none !important;
    content: none !important;
}

.av5p-launcher svg {
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    color: var(--av5p-white) !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
    pointer-events: none !important;
}

.av5p-launcher-pulse {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;

    width: 16px !important;
    height: 16px !important;

    border: 3px solid var(--av5p-white) !important;
    border-radius: 50% !important;
    background: #22c978 !important;

    box-shadow:
        0 0 0 0 rgba(34, 201, 120, .55),
        0 2px 7px rgba(0, 74, 40, .30) !important;

    animation: av5pPulse 2s infinite !important;
    pointer-events: none !important;
}

.av5p-launcher:hover,
.av5p-launcher:focus-visible {
    transform: translateY(-3px) scale(1.06) !important;
    filter: brightness(1.06) !important;

    box-shadow:
        0 18px 44px rgba(78, 47, 34, .42),
        0 0 0 5px rgba(168, 88, 52, .16) !important;

    outline: 3px solid rgba(197, 167, 132, .34) !important;
    outline-offset: 3px !important;
}

.av5p-launcher:active {
    transform: translateY(0) scale(.96) !important;
}

@keyframes av5pPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 201, 120, .55);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(34, 201, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 201, 120, 0);
    }
}

.av5p-panel {
    position: absolute !important;
    right: 0 !important;
    bottom: 76px !important;
    left: auto !important;

    width: min(410px, calc(100vw - 24px)) !important;
    height: min(690px, calc(100vh - 185px)) !important;
    min-height: 480px !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    border: 1px solid rgba(78, 47, 34, .15) !important;
    border-radius: 18px !important;
    background: var(--av5p-white) !important;

    box-shadow: 0 24px 70px rgba(55, 30, 20, .34) !important;
    pointer-events: auto !important;
}

.av5p-panel[hidden] {
    display: none !important;
}

.av5p-header {
    min-height: 72px;
    padding: 12px 13px;

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;

    background:
        linear-gradient(
            135deg,
            var(--av5p-primary),
            var(--av5p-secondary)
        );
    color: var(--av5p-white);
}

.av5p-avatar {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

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

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);

    font-size: 13px;
    font-weight: 900;
}

.av5p-header-text {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.av5p-header-text strong {
    color: var(--av5p-white);
    font-size: 14px;
}

.av5p-status {
    margin-top: 4px;

    display: flex;
    align-items: center;
    gap: 6px;

    color: rgba(255, 255, 255, .82);
    font-size: 9.5px;
    line-height: 1.3;
}

.av5p-status i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;
    background: #9aa7b3;
}

.av5p-status.is-open i {
    background: #35d07f;
}

.av5p-reset,
.av5p-close {
    width: 34px;
    height: 34px;
    padding: 0;

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

    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .10);
    color: var(--av5p-white);

    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.av5p-close {
    font-size: 27px;
    font-weight: 300;
}

.av5p-reset:hover,
.av5p-close:hover,
.av5p-reset:focus-visible,
.av5p-close:focus-visible {
    background: rgba(255, 255, 255, .20);
    outline: 2px solid rgba(255, 255, 255, .25);
}

.av5p-notice {
    flex: 0 0 auto;
    padding: 9px 13px;

    border-bottom: 1px solid #e6ddd4;
    background: #f8f3ed;
    color: var(--av5p-soft-text);

    font-size: 9.7px;
    line-height: 1.45;
}

.av5p-search {
    flex: 0 0 auto;
    padding: 10px 12px;

    border-bottom: 1px solid #e6ddd4;
    background: var(--av5p-white);
}

.av5p-search > label {
    display: block;
    margin-bottom: 5px;

    color: var(--av5p-primary);
    font-size: 9.5px;
    font-weight: 850;
}

.av5p-search > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.av5p-search input {
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;

    border: 1px solid #d9cec3;
    border-radius: 9px;
    background: var(--av5p-cream);
    color: var(--av5p-text);

    font: inherit;
    font-size: 10.5px;
    outline: none;
}

.av5p-search input:focus {
    border-color: var(--av5p-accent);
    background: var(--av5p-white);
    box-shadow: 0 0 0 3px rgba(168, 88, 52, .10);
}

.av5p-search button {
    min-height: 38px;
    padding: 8px 12px;

    border: 0;
    border-radius: 9px;
    background: var(--av5p-accent);
    color: var(--av5p-white);

    font-size: 9.5px;
    font-weight: 850;
    cursor: pointer;
}

.av5p-search small {
    display: block;
    margin-top: 5px;

    color: #8b7a6e;
    font-size: 8.3px;
    line-height: 1.35;
}

.av5p-messages {
    min-height: 115px;
    padding: 14px;

    flex: 1 1 auto;
    overflow-y: auto;

    background: #faf8f5;
    scroll-behavior: smooth;
}

.av5p-message {
    display: flex;
    margin: 0 0 9px;
}

.av5p-message.is-user {
    justify-content: flex-end;
}

.av5p-bubble {
    max-width: 90%;
    padding: 10px 12px;

    border: 1px solid #e4dcd5;
    border-radius: 14px 14px 14px 4px;
    background: var(--av5p-white);
    color: var(--av5p-text);

    box-shadow: 0 3px 10px rgba(78, 47, 34, .04);

    font-size: 10.8px;
    line-height: 1.56;
    white-space: pre-line;
}

.av5p-message.is-user .av5p-bubble {
    border: 0;
    border-radius: 14px 14px 4px 14px;
    background: var(--av5p-primary);
    color: var(--av5p-white);
}

.av5p-typing {
    min-width: 47px;

    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.av5p-typing i {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    background: #93857b;

    animation: av5pTyping 1s infinite ease-in-out;
}

.av5p-typing i:nth-child(2) {
    animation-delay: .14s;
}

.av5p-typing i:nth-child(3) {
    animation-delay: .28s;
}

@keyframes av5pTyping {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.av5p-actions {
    max-height: 192px;
    padding: 10px 12px;

    flex: 0 1 auto;
    overflow-y: auto;

    border-top: 1px solid #e6ddd4;
    background: var(--av5p-white);
}

.av5p-actions:empty {
    display: none;
}

.av5p-actions button,
.av5p-actions a {
    width: 100%;
    min-height: 38px;
    margin: 0 0 6px;
    padding: 8px 10px;

    display: flex;
    align-items: center;

    border: 1px solid #dccfc4;
    border-radius: 10px;
    background: var(--av5p-white);
    color: var(--av5p-primary);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.av5p-actions button:last-child,
.av5p-actions a:last-child {
    margin-bottom: 0;
}

.av5p-actions button:hover,
.av5p-actions button:focus-visible,
.av5p-actions a:hover,
.av5p-actions a:focus-visible {
    border-color: var(--av5p-accent);
    background: #fbf5ee;
    outline: none;
}

.av5p-actions .av5p-action-primary {
    border-color: var(--av5p-secondary);
    background:
        linear-gradient(
            90deg,
            var(--av5p-primary),
            var(--av5p-secondary)
        );
    color: var(--av5p-white);
}

.av5p-actions .av5p-action-whatsapp {
    border-color: #128c7e;
    background: #087f4f;
    color: var(--av5p-white);
}

.av5p-actions .av5p-action-muted {
    color: var(--av5p-soft-text);
    font-weight: 700;
}

.av5p-composer {
    max-height: 275px;
    padding: 10px 12px;

    flex: 0 0 auto;
    overflow-y: auto;

    border-top: 1px solid #e6ddd4;
    background: var(--av5p-white);
}

.av5p-composer[hidden] {
    display: none !important;
}

.av5p-composer label {
    display: block;
    margin-bottom: 6px;

    color: var(--av5p-primary);
    font-size: 10px;
    font-weight: 850;
}

.av5p-composer textarea {
    display: block;
    width: 100%;
    min-height: 76px;
    padding: 9px 10px;
    resize: vertical;

    border: 1px solid #d4c7bb;
    border-radius: 9px;
    color: var(--av5p-text);

    font: inherit;
    font-size: 10.5px;
    line-height: 1.4;
}

.av5p-composer textarea:focus {
    border-color: var(--av5p-accent);
    outline: 2px solid rgba(168, 88, 52, .12);
}

.av5p-composer small {
    display: block;
    margin: 5px 0 8px;

    color: #82756b;
    font-size: 8.5px;
}

.av5p-whatsapp {
    position: relative !important;
    z-index: 2 !important;

    width: 100%;
    min-height: 41px;

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

    border: 0;
    border-radius: 10px;
    background: #087f4f;
    color: var(--av5p-white) !important;

    font-size: 10.5px;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.av5p-whatsapp:hover,
.av5p-whatsapp:focus-visible {
    background: #076c45;
    color: var(--av5p-white);
    outline: none;
}

.av5p-copy-message,
.av5p-cancel-composer {
    width: 100%;
    min-height: 35px;
    margin-top: 6px;

    border: 1px solid #d4c7bb;
    border-radius: 9px;
    background: var(--av5p-white);
    color: var(--av5p-primary);

    font-size: 9.5px;
    font-weight: 750;
    cursor: pointer;
}

.av5p-copy-message:hover,
.av5p-copy-message:focus-visible,
.av5p-cancel-composer:hover,
.av5p-cancel-composer:focus-visible {
    border-color: var(--av5p-accent);
    background: var(--av5p-cream);
    outline: none;
}

.av5p-footer {
    min-height: 35px;
    padding: 6px 12px;

    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;

    border-top: 1px solid #e6ddd4;
    background: var(--av5p-white);
    color: #81756c;

    font-size: 8px;
}

.av5p-footer span {
    margin-right: auto;
}

.av5p-footer a {
    color: var(--av5p-primary);
    font-weight: 750;
    text-decoration: none;
}

body.admin-bar .av5p {
    z-index: 850 !important;
}

@media (max-width: 520px) {
    .av5p {
        right: 14px !important;
        bottom: calc(var(--av5p-bottom) - 8px) !important;
    }

    .av5p-launcher {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
    }

    .av5p-launcher svg {
        width: 27px !important;
        height: 27px !important;
    }

    .av5p-launcher-pulse {
        width: 15px !important;
        height: 15px !important;
    }

    .av5p-panel {
        position: fixed !important;
        right: 8px !important;
        bottom: 148px !important;
        left: 8px !important;

        width: auto !important;
        height: min(690px, calc(100dvh - 164px)) !important;
        min-height: 430px !important;
        border-radius: 15px !important;
    }

    .av5p-messages {
        min-height: 80px;
    }

    .av5p-actions {
        max-height: 175px;
    }

    .av5p-composer {
        max-height: 250px;
    }
}

@media (max-height: 650px) and (min-width: 521px) {
    .av5p-panel {
        height: calc(100vh - 175px) !important;
        min-height: 400px !important;
    }

    .av5p-actions {
        max-height: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .av5p-launcher,
    .av5p-messages {
        scroll-behavior: auto;
    }

    .av5p-launcher-pulse,
    .av5p-typing i {
        animation: none !important;
    }

    .av5p-launcher {
        transition: none !important;
    }
}
