.public-action-fabs {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 22px;
    z-index: 1100;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.public-action-dock-list {
    display: grid;
    max-height: min(440px, calc(100dvh - 148px));
    justify-items: end;
    gap: 0;
    overflow-y: auto;
    padding: 4px;
    margin: -4px;
    scrollbar-width: none;
}

.public-action-dock-list::-webkit-scrollbar {
    display: none;
}

.public-action-fabs .public-action-fab {
    position: relative;
    display: inline-grid;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    text-decoration: none;
    isolation: isolate;
    cursor: pointer;
    transition:
        height .2s cubic-bezier(.2, .8, .2, 1),
        min-height .2s cubic-bezier(.2, .8, .2, 1),
        margin-block-start .2s cubic-bezier(.2, .8, .2, 1),
        opacity .18s ease,
        transform .2s cubic-bezier(.2, .8, .2, 1),
        visibility .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.public-action-dock-list > .public-action-fab + .public-action-fab {
    margin-block-start: 10px;
}

.public-action-fab:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.04);
}

.public-action-fab:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 4px;
}

.public-action-fab svg {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.public-action-fab-label {
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    z-index: 1;
    padding: 7px 11px;
    color: #fff;
    background: #10243a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(5px);
    transition: opacity .16s ease, transform .16s ease;
}

[dir="rtl"] .public-action-fab-label {
    transform: translateY(-50%) translateX(-5px);
}

.public-action-fab:hover .public-action-fab-label,
.public-action-fab:focus-visible .public-action-fab-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.public-action-fab[data-public-action-secondary="true"] {
    height: 0;
    min-height: 0;
    margin-block-start: 0;
    border-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.78);
}

.public-action-fabs[data-expanded] .public-action-fab[data-public-action-secondary="true"] {
    height: 48px;
    min-height: 48px;
    margin-block-start: 10px;
    border-width: 1px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: var(--dock-delay, 0ms);
}

.youtube-fab {
    color: #fff;
    background: linear-gradient(145deg, #ff3156 0%, #f0002f 52%, #d60029 100%);
    border-color: rgba(255, 255, 255, .48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 10px 26px rgba(240, 0, 47, .3),
        0 3px 10px rgba(15, 23, 42, .16);
}

.youtube-fab:hover {
    background: linear-gradient(145deg, #ff244b 0%, #e9002d 55%, #c70026 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 14px 30px rgba(240, 0, 47, .38),
        0 4px 12px rgba(15, 23, 42, .18);
}

.youtube-fab svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 1px rgba(95, 0, 18, .22));
}

.youtube-fab rect {
    fill: #fff;
    stroke: none;
}

.youtube-fab .youtube-fab-play {
    fill: #f0002f;
    stroke: none;
}

.youtube-fab:hover .youtube-fab-play {
    fill: #cf0029;
}

.whatsapp-fab {
    background: linear-gradient(145deg, #22c963, #12a84d 62%, #0d8c3e);
    box-shadow: 0 10px 26px rgba(22, 163, 74, .28), 0 3px 10px rgba(15, 23, 42, .16);
}

.whatsapp-fab:hover {
    background: linear-gradient(145deg, #20bd5d, #0e9a45 65%, #087936);
    box-shadow: 0 14px 30px rgba(22, 163, 74, .34), 0 4px 12px rgba(15, 23, 42, .18);
}

.facebook-fab {
    background: linear-gradient(145deg, #2f7af2, #0866ff 58%, #0755d4);
    box-shadow: 0 10px 26px rgba(8, 102, 255, .28), 0 3px 10px rgba(15, 23, 42, .15);
}

.instagram-fab {
    background: radial-gradient(circle at 31% 105%, #ffd36a 0 20%, #ff5f4d 38%, #c837ab 63%, #5a4fe8 100%);
    box-shadow: 0 10px 26px rgba(193, 53, 171, .28), 0 3px 10px rgba(15, 23, 42, .15);
}

.instagram-fab svg,
.linkedin-fab svg,
.x-fab svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.tiktok-fab {
    background: linear-gradient(145deg, #26313a, #101820 62%, #05090c);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .3), -2px -1px 0 rgba(37, 244, 238, .62), 2px 1px 0 rgba(254, 44, 85, .58);
}

.linkedin-fab {
    background: linear-gradient(145deg, #1684c6, #0a66c2 64%, #075296);
    box-shadow: 0 10px 26px rgba(10, 102, 194, .28), 0 3px 10px rgba(15, 23, 42, .15);
}

.x-fab {
    background: linear-gradient(145deg, #26313a, #111827 65%, #030712);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .3), 0 3px 10px rgba(15, 23, 42, .18);
}

.public-action-dock-toggle {
    overflow: visible;
    color: #fff;
    background: linear-gradient(145deg, #2369bd, #133f72 58%, #0c2c50);
    box-shadow: 0 12px 30px rgba(15, 53, 91, .34), 0 3px 10px rgba(15, 23, 42, .18);
}

.public-action-dock-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.public-action-fabs[data-expanded] .public-action-dock-toggle svg {
    transform: rotate(45deg);
}

.public-action-dock-count {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: -4px;
    display: grid;
    min-width: 19px;
    height: 19px;
    padding-inline: 4px;
    place-items: center;
    color: #113657;
    background: #fff;
    border: 2px solid #174f87;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.public-action-fabs .whatsapp-fab[data-suppressed] {
    display: none;
}

@media (min-width: 641px) and (min-height: 520px) {
    .public-action-dock-list {
        max-height: none;
        overflow: visible;
    }
}

@media (min-width: 641px) and (max-height: 519px) {
    .public-action-fab-label {
        display: none;
    }
}

@media (max-width: 640px) {
    .public-action-fabs {
        inset-inline-end: 16px;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
        gap: 8px;
    }

    .public-action-dock-list {
        gap: 0;
    }

    .public-action-dock-list > .public-action-fab + .public-action-fab,
    .public-action-fabs[data-expanded] .public-action-fab[data-public-action-secondary="true"] {
        margin-block-start: 8px;
    }

    .public-action-fabs .public-action-fab,
    .public-action-fabs[data-expanded] .public-action-fab[data-public-action-secondary="true"] {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
    }

    .public-action-fabs .public-action-fab[data-public-action-secondary="true"] {
        height: 0;
        min-height: 0;
        margin-block-start: 0;
    }

    .public-action-fab-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-action-fab,
    .public-action-fab svg,
    .public-action-fab-label {
        transition: none;
    }
}