.dcw {
    --dcw-primary: #e88104 !important;
    position: fixed;
    left: max(14px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 10050;
    display: grid;
    justify-items: end;
    gap: 10px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    box-sizing: border-box;
}

.dcw * { box-sizing: border-box; }
.dcw--left { right: auto; left: max(14px, env(safe-area-inset-left)); justify-items: start; }

.dcw__greeting {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: min(340px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
    padding: 17px 40px 17px 17px;
    border: 1px solid color-mix(in srgb, var(--dcw-primary) 24%, transparent);
    border-radius: 18px 18px 5px 18px;
    color: #20242b;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 42px rgba(15, 23, 42, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transform-origin: right bottom;
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.dcw--left .dcw__greeting { right: auto; left: 0; border-radius: 18px 18px 18px 5px; transform-origin: left bottom; }
.dcw.is-greeting-visible .dcw__greeting { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.dcw__avatar { width: 52px; height: 52px; display: block; border: 2px solid var(--dcw-primary); border-radius: 50%; object-fit: cover; }
.dcw__copy strong { display: block; color: #171a20; font-size: 15px; line-height: 1.25; }
.dcw__copy p { margin: 5px 0 0; color: #4d5663; font-size: 13px; line-height: 1.42; }

.dcw__greeting-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #718096;
    background: #f0f3f6;
    cursor: pointer;
}

.dcw__greeting-close:hover { color: #fff; background: var(--dcw-primary); }
.dcw__greeting-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dcw__actions { display: grid; justify-items: center; gap: 9px; pointer-events: none; }

.dcw__action {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .2);
    opacity: 0;
    transform: translateY(12px) scale(.78);
    transition: opacity .18s ease, transform .22s ease;
}

.dcw.is-open .dcw__actions { pointer-events: auto; }
.dcw.is-open .dcw__action { opacity: 1; transform: translateY(0) scale(1); }
.dcw__action img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dcw__action--whatsapp,
.dcw__action--vk { background: #fff; }

.dcw__toggle {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--dcw-primary);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--dcw-primary) 42%, transparent);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.dcw__toggle::before,
.dcw__toggle::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 2px solid var(--dcw-primary);
    border-radius: 50%;
    animation: dcw-pulse 2.2s ease-out infinite;
}

.dcw__toggle::after { animation-delay: 1.1s; }
.dcw__toggle:hover { transform: translateY(-1px); }
.dcw__toggle:focus-visible,
.dcw__action:focus-visible,
.dcw__greeting-close:focus-visible { outline: 3px solid color-mix(in srgb, var(--dcw-primary) 52%, transparent); outline-offset: 3px; }
.dcw__toggle svg { position: absolute; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: opacity .16s ease, transform .2s ease; }
.dcw__message path:last-child { stroke-width: 3.4; }
.dcw__close { opacity: 0; transform: rotate(-80deg) scale(.6); }
.dcw.is-open .dcw__toggle { background: #18a957; }
.dcw.is-open .dcw__toggle::before,
.dcw.is-open .dcw__toggle::after { display: none; }
.dcw.is-open .dcw__message { opacity: 0; transform: rotate(70deg) scale(.6); }
.dcw.is-open .dcw__close { opacity: 1; transform: rotate(0) scale(1); }

@keyframes dcw-pulse {
    0% { opacity: .62; transform: scale(1); }
    75%, 100% { opacity: 0; transform: scale(1.72); }
}

@media (max-width: 480px) {
    .dcw { right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .dcw--left { right: auto; left: max(10px, env(safe-area-inset-left)); }
    .dcw__toggle { width: 50px; height: 50px; }
    .dcw__action { width: 44px; height: 44px; }
    .dcw__greeting { bottom: 59px; width: min(315px, calc(100vw - 20px)); grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px 36px 14px 14px; }
    .dcw__avatar { width: 44px; height: 44px; }
    .dcw__copy strong { font-size: 14px; }
    .dcw__copy p { font-size: 12px; line-height: 1.38; }
}

@media (prefers-reduced-motion: reduce) {
    .dcw__toggle::before,
    .dcw__toggle::after { animation: none; }
    .dcw__greeting,
    .dcw__action,
    .dcw__toggle,
    .dcw__toggle svg { transition: none; }
}