:root {
    --cfb-z-index: 9999;
    --cfb-spacing: 20px;
    --cfb-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#cfb-wrapper {
    position: fixed;
    z-index: var(--cfb-z-index);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    /* Let clicks pass through empty space */
}


/* Text Position Modes */
.cfb-text-pos-top {
    flex-direction: column;
    /* Text(1) -> Button(2) */
}

.cfb-text-pos-left {
    flex-direction: row;
    /* Text(1) -> Button(2) */
}

.cfb-text-pos-right {
    flex-direction: row-reverse;
    /* Button(2-visual) -> Text(1-visual) */
}

/* OVERLAY MODES */
.cfb-text-pos-center,
.cfb-text-pos-center-left,
.cfb-text-pos-center-right {
    /* Overlay mode - wrapper logic remains fixed, but layout is absolute */
}

.cfb-text-pos-center .cfb-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    white-space: nowrap;
}

.cfb-text-pos-center-left .cfb-text {
    position: absolute;
    top: 50%;
    left: 10%;
    /* Slight offset from left edge */
    transform: translateY(-50%);
    z-index: 2;
    white-space: nowrap;
}

.cfb-text-pos-center-right .cfb-text {
    position: absolute;
    top: 50%;
    right: 10%;
    /* Slight offset from right edge */
    transform: translateY(-50%);
    z-index: 2;
    white-space: nowrap;
}

/* Positions */
.cfb-bottom-right {
    bottom: var(--cfb-offset-y, 20px);
    right: var(--cfb-offset-x, 20px);
}

.cfb-bottom-left {
    bottom: var(--cfb-offset-y, 20px);
    left: var(--cfb-offset-x, 20px);
}

.cfb-center-right {
    top: 50%;
    right: var(--cfb-offset-x, 20px);
    /* Allow shifting up/down using offset-y */
    transform: translateY(calc(-50% + var(--cfb-offset-y, 0px)));
}

.cfb-center-left {
    top: 50%;
    left: var(--cfb-offset-x, 20px);
    /* Allow shifting up/down using offset-y */
    transform: translateY(calc(-50% + var(--cfb-offset-y, 0px)));
}

/* Button Styling */
.cfb-button {
    display: block;
    width: var(--cfb-width, 56px);
    height: var(--cfb-height, 56px);

    /* Strict border control */
    border-width: var(--cfb-border-width, 0px);
    border-style: solid;
    border-color: var(--cfb-border-color, transparent);

    border-radius: 50%;
    /* removed box-shadow */
    transition: transform var(--cfb-transition);
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    background-color: transparent;
    /* Fix for white ring if image is transparent */
    box-sizing: border-box;
    outline: none;

    /* Reset any browser defaults */
    padding: 0;
    margin: 0;
}

.cfb-button img,
.cfb-button svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    /* Ensure no image border */
}

.cfb-button svg {
    padding: 12px;
    box-sizing: border-box;
}

/* Hover Effects */
.cfb-button:hover {
    transform: scale(1.1);
}

.cfb-button:active {
    transform: scale(0.95);
}

/* Floating Text (Chatea) */
.cfb-text {
    background-color: var(--cfb-box-bg, #333);
    color: var(--cfb-text-color, #fff);

    font-family: var(--cfb-font-family, system-ui) !important;
    font-size: var(--cfb-text-size, 12px);
    font-weight: var(--cfb-text-weight, normal);

    padding: var(--cfb-box-padding, 6px 10px);
    border-radius: var(--cfb-box-radius, 12px);
    border: var(--cfb-box-border-width, 0px) solid var(--cfb-box-border-color, transparent);

    pointer-events: auto;
    opacity: 0;
    /* Transform is handled differently per mode now, usually handled by flexbox placement except for center */
    transition: opacity var(--cfb-transition);
    white-space: nowrap;

    /* Initially hidden for JS to toggle */
    visibility: hidden;
}

/* Setup initial transforms for animation based on position + offsets */
/* Top: Base move up 10px */
.cfb-text-pos-top .cfb-text {
    transform: translate(var(--cfb-text-ox, 0px), calc(10px + var(--cfb-text-oy, 0px)));
}

/* Left: Base move left 10px */
.cfb-text-pos-left .cfb-text {
    /* If user wants to move text 'left' (negative X), we add to the base shift. */
    transform: translate(calc(-10px + var(--cfb-text-ox, 0px)), var(--cfb-text-oy, 0px));
}

/* Right: Base move right 10px */
.cfb-text-pos-right .cfb-text {
    transform: translate(calc(10px + var(--cfb-text-ox, 0px)), var(--cfb-text-oy, 0px));
}

/* Center: Centered */
.cfb-text-pos-center .cfb-text {
    transform: translate(calc(-50% + var(--cfb-text-ox, 0px)), calc(-50% + var(--cfb-text-oy, 0px)));
}

/* State class for visible text */
#cfb-wrapper.show-text .cfb-text {
    opacity: 1;
    /* Removed transform reset so it keeps the calculated position */
    visibility: visible;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    :root {
        --cfb-spacing: 16px;
    }
}