:root {
    --muc-accent: #6366f1;
    --muc-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

/* ------------------------------------------------------------------
   SCOPED RESET
   WordPress themes/page builders frequently apply global rules to
   <a>, <button>, <i>, <div> (box-sizing, padding, margin, line-height,
   font, list-style, text-decoration, etc). Those rules "leak" into the
   widget and are the main cause of icons rendering off-center, clipped,
   or invisible on real sites — even though the same markup looks fine
   in an isolated test page. Everything inside .ucw-container is reset
   to safe, predictable values before any widget-specific rule runs.
   ------------------------------------------------------------------ */
.ucw-container, .ucw-container *, .ucw-container *::before, .ucw-container *::after {
    box-sizing: border-box;
}
.ucw-container button,
.ucw-container a {
    margin: 0; padding: 0; border: 0; outline: 0;
    font: inherit; line-height: 1; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 0; min-height: 0; max-width: none; max-height: none;
    flex-shrink: 0; appearance: none; -webkit-appearance: none;
    overflow: visible; vertical-align: middle;
}
.ucw-container i {
    display: inline-block; line-height: 1; font-style: normal;
    vertical-align: middle;
}

.ucw-close-stack-btn{ display: none !important; }

.ucw-stack-btn i, .ucw-trigger i {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-weight: 900;
}
.ucw-stack-btn .fab, .ucw-trigger .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400; }

.ucw-container {
    position: fixed; bottom: 30px; z-index: 99999;
    display: flex; flex-direction: column; align-items: center;
}

/* .ucw-stack itself is unstyled by design: .ucw-stack-btn children are
   positioned absolutely against .ucw-container (the trigger's center),
   not against .ucw-stack. Keep it a plain, non-positioned, zero-size
   wrapper so it never accidentally becomes its own containing block. */
.ucw-stack {
    position: static !important; display: block !important;
    width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important;
}

.ucw-container.align-left { left: 30px; right: auto; align-items: flex-start; }
.ucw-container.align-right { right: 30px; left: auto; align-items: center; }

/* The Stack */
/* Stack Buttons */
.ucw-stack-btn {
    position: absolute !important;
    /* FIX: Anchored to the vertical center (50%) of the container */
    top: 50%;
    left: 50%;

    /* FIX: Negative margins pull the button center to the anchor point */
    margin-top: calc(var(--ucw-size) * -0.5) !important;
    margin-left: calc(var(--ucw-size) * -0.5) !important;

    border-radius: 50%; background: var(--muc-accent); color: #fff; border: none;
    box-shadow: var(--muc-shadow); cursor: pointer;
    display: flex !important; align-items: center; justify-content: center;
    text-decoration: none; font-size: 1.4rem;
    opacity: 0; transform: translate(0, 0) scale(0); pointer-events: none;

    /* PROFESSIONAL MOTION: 
       Duration: 0.45s (Crisp, not slow)
       Curve: cubic-bezier(0.16, 1, 0.3, 1) (Premium "Ease Out Expo") 
    */
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease, color 0.2s ease;
}

.ucw-stack-btn i, .ucw-stack-btn img {
    pointer-events: none; /* clicks always hit the anchor, never the glyph/image */
}

.ucw-container.open .ucw-stack-btn {
    opacity: 1; transform: translate(var(--muc-x), var(--muc-y)) scale(1); pointer-events: all;
}

/* Delays - Snappy and precise timing */
.ucw-container.open .ucw-stack-btn:nth-child(1) { transition-delay: 0s; }
.ucw-container.open .ucw-stack-btn:nth-child(2) { transition-delay: 0.04s; }
.ucw-container.open .ucw-stack-btn:nth-child(3) { transition-delay: 0.08s; }
.ucw-container.open .ucw-stack-btn:nth-child(4) { transition-delay: 0.12s; }
.ucw-container.open .ucw-stack-btn:nth-child(5) { transition-delay: 0.16s; }
.ucw-container.open .ucw-stack-btn:nth-child(6) { transition-delay: 0.20s; }
.ucw-container.open .ucw-stack-btn:nth-child(7) { transition-delay: 0.24s; }
.ucw-container.open .ucw-stack-btn:nth-child(8) { transition-delay: 0.28s; }

.ucw-stack-btn:hover {
    z-index: 15;
    transform: translate(var(--muc-x), var(--muc-y)) scale(1.15) !important;
    /* Falls back to the button's own normal background/icon color (not
       "inherit") so a channel that has no explicit hover color simply
       keeps its normal look on hover instead of losing its styling. */
    background-color: var(--muc-hover-bg, var(--muc-bg, currentColor)) !important;
    color: var(--muc-hover-icon, var(--muc-icon, inherit)) !important;
}

/* Hover Label */
.ucw-hover-label {
    position: absolute; right: 65px; top: 50%;
    transform: translateY(-50%) translateX(10px);
    background-color: #ffffff; color: #000000;
    padding: 8px 16px; border-radius: 25px; font-size: 13px; font-weight: 600;
    white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    opacity: 0; pointer-events: none; transition: all 0.3s ease;
}
.ucw-stack-btn:hover .ucw-hover-label {
    opacity: 1; transform: translateY(-50%) translateX(0);
}

.ucw-container.align-left .ucw-hover-label {
    right: auto; left: 65px;
    transform: translateY(-50%) translateX(-10px);
}
.ucw-container.align-left .ucw-stack-btn:hover .ucw-hover-label {
    transform: translateY(-50%) translateX(0);
}

/* Main Trigger */
.ucw-trigger {
    width: 64px; height: 64px; border-radius: 50%; background: var(--muc-accent);
    color: white; border: none; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    cursor: pointer; display: flex !important; align-items: center; justify-content: center;
    font-size: 1.6rem; position: relative; z-index: 12;
    transition: transform 0.3s ease;
    line-height: 0; /* FIX: Removes extra space that causes stretching */
    flex-shrink: 0;
}
.ucw-trigger:hover { transform: scale(1.05); }
.ucw-container.open .ucw-trigger:hover { transform: rotate(90deg) scale(1.05); }

.ucw-trigger i { pointer-events: none; }

.ucw-trigger .icon-close { display: none; position: absolute; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ucw-container.open .ucw-trigger .icon-chat { display: none; }
.ucw-container.open .ucw-trigger .icon-close { display: block; }
.ucw-container.open .ucw-trigger { transform: rotate(90deg); }

/* Badge */
.ucw-badge {
    position: absolute; top: 0; right: 0; width: 18px; height: 18px;
    background: #ff3b30; border: 3px solid white; border-radius: 50%;
    animation: pulse 2s infinite;
    pointer-events: none;
}
.ucw-container.open .ucw-badge { display: none; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Device Visibility */
.ucw-device-desktop { display: flex; }
.ucw-device-mobile { display: none; }

/* Tablet: keep full layout, just nudge the widget in from the edge */
@media (max-width: 1024px) and (min-width: 769px) {
    .ucw-container { bottom: 24px; }
    .ucw-container.align-left { left: 20px; }
    .ucw-container.align-right { right: 20px; }
}

@media (max-width: 768px) {
    .ucw-device-desktop { display: none; }
    .ucw-device-mobile { display: flex; }
    .ucw-hover-label { display: none !important; }
    .ucw-container { bottom: 16px; }
    .ucw-container.align-left { left: 16px; }
    .ucw-container.align-right { right: 16px; }
}

/* Size Logic */
:root {
    --ucw-size: 45px;       
    --ucw-anim-duration: 2s;
}

.ucw-trigger {
    width: var(--ucw-size) !important;
    height: var(--ucw-size) !important;
    font-size: calc(var(--ucw-size) * 0.45) !important;
}

.ucw-stack-btn {
    width: var(--ucw-size) !important;
    height: var(--ucw-size) !important;
    font-size: calc(var(--ucw-size) * 0.45) !important;
    /* margin-left and margin-top are already set in the main .ucw-stack-btn block */
}

.ucw-badge {
    width: calc(var(--ucw-size) * 0.28) !important;
    height: calc(var(--ucw-size) * 0.28) !important;
    /* Border scales with size so it never overwhelms the badge on small icons */
    border-width: clamp(1.5px, calc(var(--ucw-size) * 0.045), 3px) !important;
}

.ucw-hover-label { right: calc(var(--ucw-size) + 10px) !important; }
.ucw-container.align-left .ucw-hover-label { left: calc(var(--ucw-size) + 10px) !important; right: auto !important; }

/* Animations */
.ucw-container.anim-pulse .ucw-trigger { animation: pulse var(--ucw-anim-duration) infinite; }
.ucw-container.anim-bounce .ucw-trigger { animation: bounce var(--ucw-anim-duration) infinite; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
.ucw-container.anim-shake .ucw-trigger { animation: shake var(--ucw-anim-duration) infinite; }
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.ucw-container.anim-glow .ucw-trigger { animation: glow var(--ucw-anim-duration) infinite alternate; }
@keyframes glow {
    from { box-shadow: 0 0 10px #fff, 0 0 20px var(--muc-accent); }
    to { box-shadow: 0 0 20px #fff, 0 0 30px var(--muc-accent); }
}
.ucw-container.anim-fade .ucw-trigger { animation: fadeIn var(--ucw-anim-duration) infinite alternate; }
@keyframes fadeIn { from { opacity: 0.7; } to { opacity: 1; } }
.ucw-container.anim-spin .ucw-trigger { animation: spin var(--ucw-anim-duration) linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.ucw-container.anim-zoom .ucw-trigger { animation: zoom var(--ucw-anim-duration) ease-in-out infinite; }
@keyframes zoom { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ucw-container.anim-waggle .ucw-trigger { animation: waggle var(--ucw-anim-duration) ease-in-out infinite; }
@keyframes waggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.ucw-container.anim-jello .ucw-trigger { animation: jello var(--ucw-anim-duration) infinite; }
@keyframes jello {
    0%, 11.1%, 100% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.ucw-container.anim-tada .ucw-trigger { animation: tada var(--ucw-anim-duration) infinite; }
@keyframes tada {
    0% { transform: scale(1) rotate(0deg); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.ucw-container.anim-swing .ucw-trigger { animation: swing var(--ucw-anim-duration) infinite; transform-origin: top center; }
@keyframes swing {
    20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.ucw-container.anim-rubberBand .ucw-trigger { animation: rubberBand var(--ucw-anim-duration) infinite; }
@keyframes rubberBand {
    0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); }
    40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); }
    65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); }
    100% { transform: scale3d(1, 1, 1); }
}
.ucw-container.anim-heartBeat .ucw-trigger { animation: heartBeat var(--ucw-anim-duration) infinite; }
@keyframes heartBeat {
    0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); }
    42% { transform: scale(1.3); } 70% { transform: scale(1); }
}
.ucw-container.anim-flip .ucw-trigger { animation: flip var(--ucw-anim-duration) infinite; }
@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; }
    40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; }
    50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; }
    80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; }
    100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; }
}
.ucw-container.anim-flash .ucw-trigger { animation: flash var(--ucw-anim-duration) infinite; }
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.5; } }

/* Behavior Hover */
.ucw-container.behavior-hover .ucw-stack { opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.ucw-container.behavior-hover:hover .ucw-stack { opacity: 1; visibility: visible; }
.ucw-container.behavior-hover:hover .ucw-stack-btn {
    opacity: 1; transform: translate(var(--muc-x), var(--muc-y)) scale(1) !important;
    pointer-events: all; transition-delay: 0s !important; 
}
/* Match the click-mode trigger animation (icon swap + rotation + badge
   hide) so hovering feels the same as clicking, since hover mode never
   toggles the .open class that those effects normally rely on. */
.ucw-container.behavior-hover:hover .ucw-trigger .icon-chat { display: none; }
.ucw-container.behavior-hover:hover .ucw-trigger .icon-close { display: block; }
.ucw-container.behavior-hover:hover .ucw-trigger { transform: rotate(90deg); }
.ucw-container.behavior-hover:hover .ucw-badge { display: none; }