/* Main Wrapper */
.acb-wrapper {
    position: fixed;
    z-index: var(--acb-z-index, 999999) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    box-sizing: border-box;
}

.acb-wrapper * {
    box-sizing: border-box;
}

/* Visibility State */
.acb-wrapper.is-visible {
    opacity: 1;
    visibility: visible !important;
    pointer-events: none;
    animation: acbFadeIn var(--acb-anim-duration, 280ms) var(--acb-anim-easing, ease-out) forwards;
}

@keyframes acbFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Positioning */
.acb-pos-bottom-right {
    bottom: var(--acb-margin-bottom, 20px) !important;
    right: var(--acb-margin-right, 20px) !important;
    align-items: flex-end;
}

.acb-pos-bottom-left {
    bottom: var(--acb-margin-bottom, 20px) !important;
    left: var(--acb-margin-left, 20px) !important;
    align-items: flex-start;
}

.acb-pos-top-right {
    top: var(--acb-margin-top, 20px) !important;
    right: var(--acb-margin-right, 20px) !important;
    align-items: flex-end;
    flex-direction: column-reverse;
}

.acb-pos-top-left {
    top: var(--acb-margin-top, 20px) !important;
    left: var(--acb-margin-left, 20px) !important;
    align-items: flex-start;
    flex-direction: column-reverse;
}

/* Bubble Container (CIRCULAR) */
.acb-bubble {
    width: var(--acb-size, 130px) !important;
    height: var(--acb-size, 130px) !important;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 50% !important;
    /* Force Circular */
    overflow: hidden;
    /* Clip content to circle */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.acb-bubble:hover {
    transform: scale(1.02);
}

/* Background Layers */
.acb-bubble-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 50%;
}

/* Closed BG: White background behind video */
.acb-bubble-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    transition: opacity 0.3s;
    opacity: 1;
    background-color: #fff;
}

/* Open BG: Blue Circle */
.acb-bubble-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--acb-open-bg, #ADDBEC);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Toggle State via class on Wrapper */
.acb-wrapper.is-open .acb-bubble-bg::after {
    opacity: 1;
}

/* Video Content */
.acb-content-closed {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s;
}

.acb-wrapper.is-open .acb-content-closed {
    opacity: 0;
    pointer-events: none;
}

.acb-video {
    width: 100% !important;
    height: 100% !important;
    /* Use Admin Setting, Default to contain if var missing */
    object-fit: var(--acb-vid-fit, contain) !important;
    border-radius: 50%;
}

.acb-fallback-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Open Content (X) */
.acb-content-open {
    position: absolute;
    z-index: 20;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.acb-wrapper.is-open .acb-content-open {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto;
}

.acb-close-icon {
    width: 40px !important;
    height: 40px !important;
    display: block;
}

/* Links Container */
.acb-links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10px;
    /* Reduced Gap */
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom center;
    pointer-events: none;
    transition: all var(--acb-anim-duration, 280ms) var(--acb-anim-easing, ease-out);
    z-index: 5;
}

.acb-pos-bottom-left .acb-links-container,
.acb-pos-top-left .acb-links-container {
    align-items: flex-start;
}

/* Top positions: Reverse direction but keep small gap */
.acb-pos-top-left .acb-links-container,
.acb-pos-top-right .acb-links-container {
    margin-bottom: 0;
    margin-top: 10px;
    transform-origin: top center;
}

.acb-wrapper.is-open .acb-links-container {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Pills */
.acb-pill {
    background: #fff;
    color: var(--acb-text-color, #333);
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-family: var(--acb-font-family, inherit) !important;
    font-size: var(--acb-font-size, 14px);
    font-weight: var(--acb-font-weight, normal);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.acb-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.acb-pill-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.acb-icon-left .acb-pill-icon {
    margin-right: 10px;
}


/* Welcome Message */
.acb-welcome-msg {
    position: absolute;
    /* Center vertical relative to bubble (which is at bottom: 0 of wrapper) */
    bottom: calc(var(--acb-size, 130px) / 2);
    right: calc(var(--acb-size, 130px) + 20px);
    background: #fff;
    color: var(--acb-text-color, #333);
    font-family: var(--acb-font-family, inherit);
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    /* Translate Y 50% moves it down by half its height to center it on the bottom coordinate */
    /* Translate X -10px for initial animation offset */
    transform: translate(-10px, 50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: 1000;
    font-weight: 600;
    max-width: 300px;
    text-align: center;
    display: flex; /* Flex to align close btn */
    align-items: center;
    gap: 10px;
}

.acb-welcome-text {
    flex: 1;
}

.acb-welcome-close {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 0 5px;
}

.acb-welcome-close:hover {
    opacity: 1;
}

/* Arrow Tip (Right side of bubble, pointing to chat) */
.acb-welcome-msg::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 10px solid #fff;
}

/* Position Overrides */
/* Bottom Left: Message to the RIGHT of bubble */
.acb-pos-bottom-left .acb-welcome-msg {
    right: auto;
    left: calc(var(--acb-size, 130px) + 20px);
    transform: translate(10px, 50%);
}

.acb-pos-bottom-left .acb-welcome-msg::after {
    right: auto;
    left: -8px;
    border-left: none;
    border-right: 10px solid #fff;
}

/* Top Positions: Adjust anchor */
.acb-pos-top-right .acb-welcome-msg {
    bottom: auto;
    top: calc(var(--acb-size, 130px) / 2);
    /* Translate Y -50% to move up by half height? No, translateY 50% moves down.
       If top is center, we want to move UP by half height -> -50% */
    transform: translate(-10px, -50%);
}

.acb-pos-top-left .acb-welcome-msg {
    bottom: auto;
    top: calc(var(--acb-size, 130px) / 2);
    transform: translate(10px, -50%);
}

/* Visible State */
.acb-welcome-msg.is-visible {
    opacity: 1;
    /* Maintain vertical center (50% or -50%) and reset X */
    transform: translate(0, 50%);
    pointer-events: auto;
}

.acb-pos-top-right .acb-welcome-msg.is-visible,
.acb-pos-top-left .acb-welcome-msg.is-visible {
    transform: translate(0, -50%);
}

/* Hide when Open */
.acb-wrapper.is-open .acb-welcome-msg {
    opacity: 0 !important;
    pointer-events: none;
    /* Slide out slightly */
    transform: translate(-10px, 50%);
}

.acb-pos-top-right .acb-wrapper.is-open .acb-welcome-msg,
.acb-pos-top-left .acb-wrapper.is-open .acb-welcome-msg {
    transform: translate(-10px, -50%);
}