@font-face {
    font-family: 'SamsungOne';
    src: url('../font/SamsungOne-400.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SamsungOne';
    src: url('../font/SamsungOne-700.ttf?v=20260330') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --emoditac-font-family: 'SamsungOne', 'Segoe UI', sans-serif;
    --emoditac-font-size-mobile: 12px;
    --emoditac-font-size-tablet: 13px;
    --emoditac-font-size-desktop: 15px;
    --emoditac-font-size: var(--emoditac-font-size-mobile);
    --emoditac-font-size-text: var(--emoditac-font-size);
    --emoditac-font-size-title: var(--emoditac-font-size);
    --emoditac-font-size-button: var(--emoditac-font-size);
}

@media (min-width: 783px) {
    :root {
        --emoditac-font-size: var(--emoditac-font-size-tablet);
    }
}

@media (min-width: 1025px) {
    :root {
        --emoditac-font-size: var(--emoditac-font-size-desktop);
    }
}

.emoditac-floating-icons,
.emoditac-floating-icons button,
.emoditac-floating-icons input,
.emoditac-floating-icons select,
.emoditac-floating-icons textarea {
    font-family: var(--emoditac-font-family);
    font-size: var(--emoditac-font-size-text);
}

.emoditac-floating-icons {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    /* use CSS variable set inline from PHP to control ripple color */
    color: var(--emoditac-ripple-color, var(--emoditac-color-primary));
    /* if an explicit accent color wasn't provided, fall back to the primary ripple color
       so all ripple visuals remain synchronized */
    --emoditac-ripple-accent-color: var(--emoditac-ripple-accent-color, var(--emoditac-ripple-color, var(--emoditac-color-primary)));
}

/* Add CSS variable defaults for icon sizing so site admins can override to make icons smaller/larger */
.emoditac-floating-icons {
    --emoditac-icon-size: 40px; /* default icon image size (was 48px) */
    --emoditac-single-container-size: 56px; /* outer circle for single-icon mode */
    --emoditac-single-icon-size: 40px; /* icon inside single container (was 40px) */
}

/* Positioning: use CSS variables emitted by PHP. Default (desktop) uses --emoditac-bottom-desktop.
   For tablet/mobile we switch to --emoditac-bottom-mobile. */
.emoditac-floating-icons {
    /* if vars are not present, fallback to defaults */
    bottom: var(--emoditac-bottom-desktop, 20px);
}

@media (max-width: 1024px) {
    .emoditac-floating-icons {
        bottom: var(--emoditac-bottom-mobile, var(--emoditac-bottom-desktop, 20px));
    }
}

/* Side positioning (desktop) */
.emoditac-floating-icons.emoditac-pos-right {
    right: var(--emoditac-side-desktop, 20px);
    left: auto;
}
.emoditac-floating-icons.emoditac-pos-left {
    left: var(--emoditac-side-desktop, 20px);
    right: auto;
}

/* Side positioning (mobile/tablet): switch to mobile var */
@media (max-width: 1024px) {
    .emoditac-floating-icons.emoditac-pos-right {
        right: var(--emoditac-side-mobile, var(--emoditac-side-desktop, 20px));
    }
    .emoditac-floating-icons.emoditac-pos-left {
        left: var(--emoditac-side-mobile, var(--emoditac-side-desktop, 20px));
    }
}

.emoditac-floating-icons .emoditac-master,
.emoditac-floating-icons .emoditac-child,
.emoditac-floating-icons .emoditac-item {
    position: relative;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: visible;
    display: inline-block;
    line-height: 0;
    box-shadow: none !important;
    width: var(--emoditac-icon-size, 48px);
    height: var(--emoditac-icon-size, 48px);
}

/* ensure children and master inherit ripple color so pseudo-elements use currentColor */
.emoditac-floating-icons .emoditac-master,
.emoditac-floating-icons .emoditac-child {
    color: var(--emoditac-ripple-color, var(--emoditac-color-primary));
}

/* ripple wave element (created dynamically on click) */
.emoditac-ripple-wave {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0.2);
    opacity: 0.6;
    /* use the accent color for the expanding ripple wave (falls back to primary) */
    background: var(--emoditac-ripple-accent-color, var(--emoditac-ripple-color, currentColor));
    /* place ripple above the item background but below the icon image
       (images inside items will be positioned at a higher z-index) */
    z-index: 2;
    /* subtle outline using the accent color as a CSS fallback when JS doesn't set inline box-shadow */
    box-shadow: 0 0 0 calc(var(--emoditac-ripple-thickness, 2px) / 1.5) rgba(0,0,0,0);
}

@keyframes emoditac-ripple-anim {
    from { transform: scale(0.2); opacity: 0.6; }
    to { transform: scale(1.5); opacity: 0; }
}

@keyframes emoditac-ripple-anim-small {
    /* 50% smaller final scale compared to emoditac-ripple-anim */
    from { transform: scale(0.1); opacity: 0.6; }
    to { transform: scale(0.9); opacity: 0; }
}

.emoditac-ripple-animate .emoditac-ripple-wave {
    /* use the same duration variable so server-side and JS are in sync */
    animation: emoditac-ripple-anim var(--emoditac-ripple-duration, 0.7s) ease-out forwards;
}

/* Make the dynamic ripple wave smaller for single-icon mode (50% scale) */
.emoditac-floating-icons.emoditac-single .emoditac-ripple-animate .emoditac-ripple-wave {
    animation: emoditac-ripple-anim-small var(--emoditac-ripple-duration, 0.7s) ease-out forwards;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.emoditac-floating-icons .emoditac-master::before,
.emoditac-floating-icons .emoditac-master::after,
.emoditac-floating-icons .emoditac-child::before,
.emoditac-floating-icons .emoditac-child::after,
.emoditac-floating-icons.emoditac-single .emoditac-item::before,
.emoditac-floating-icons.emoditac-single .emoditac-item::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    /* border width controlled by CSS variable; inner ring uses primary color explicitly */
    border: var(--emoditac-ripple-thickness, 2px) solid var(--emoditac-ripple-color, currentColor);
    border-radius: 50%;
    opacity: 0;
    /* place pseudo-elements above the element background but below the icon image */
    z-index: 1;
}

/* Reduce pseudo-element ring size by 50% when only a single icon is present */
.emoditac-floating-icons.emoditac-single .emoditac-item::before,
.emoditac-floating-icons.emoditac-single .emoditac-item::after {
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
}

/* when master has no-ripple class, hide its pseudo ripple */
.emoditac-floating-icons .emoditac-master.emoditac-no-ripple::before,
.emoditac-floating-icons .emoditac-master.emoditac-no-ripple::after {
    display: none;
}


.emoditac-floating-icons .emoditac-master::before,
.emoditac-floating-icons .emoditac-child::before,
.emoditac-floating-icons.emoditac-single .emoditac-item::before {
    /* use the server-defined ripple duration so both single and master pulses stay in sync */
    animation: ripple var(--emoditac-ripple-duration, 1.5s) ease-out infinite;
}

.emoditac-floating-icons .emoditac-master::after,
.emoditac-floating-icons .emoditac-child::after,
.emoditac-floating-icons.emoditac-single .emoditac-item::after {
    animation: ripple var(--emoditac-ripple-duration, 1.5s) ease-out calc(var(--emoditac-ripple-duration, 1.5s) / 2) infinite;
    /* explicitly use the accent color for the outer ring (falls back to primary/currentColor) */
    border-color: var(--emoditac-ripple-accent-color, var(--emoditac-ripple-color, currentColor));
}

/* Smaller 'ripple' animation for pseudo-elements used by single-icon mode */
@keyframes ripple-small {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* Override pseudo-element animation for single-icon to be 50% smaller */
.emoditac-floating-icons.emoditac-single .emoditac-item::before {
    animation: ripple-small var(--emoditac-ripple-duration, 1.5s) ease-out infinite;
}
.emoditac-floating-icons.emoditac-single .emoditac-item::after {
    animation: ripple-small var(--emoditac-ripple-duration, 1.5s) ease-out calc(var(--emoditac-ripple-duration, 1.5s) / 2) infinite;
}

/* Heartbeat animation synchronized with ripple duration variable */
@keyframes emoditac-heartbeat-anim {
    0% { transform: scale(1); }
    /* reduced pulse amplitude: ~50% of previous */
    30% { transform: scale(1.04); }
    60% { transform: scale(0.99); }
    100% { transform: scale(1); }
}

.emoditac-floating-icons.emoditac-heartbeat .emoditac-item img:not(.emoditac-master-active),
.emoditac-floating-icons.emoditac-heartbeat .emoditac-child img:not(.emoditac-master-active),
.emoditac-floating-icons.emoditac-heartbeat .emoditac-master img:not(.emoditac-master-active) {
    /* pulse all icons (children and master) but exclude the alternate master image */
    animation: emoditac-heartbeat-anim calc(var(--emoditac-ripple-duration, 1.5s) * 1.2) ease-in-out infinite;
}

.emoditac-floating-icons .emoditac-master img,
.emoditac-floating-icons .emoditac-child img,
.emoditac-floating-icons .emoditac-item img {
    width: var(--emoditac-icon-size, 48px);
    height: var(--emoditac-icon-size, 48px);
    min-width: var(--emoditac-icon-size, 48px);
    min-height: var(--emoditac-icon-size, 48px);
    max-width: var(--emoditac-icon-size, 48px);
    max-height: var(--emoditac-icon-size, 48px);
    display: block;
    border-radius: 50%;
    object-fit: cover;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
    aspect-ratio: 1/1;
    /* ensure images sit above the ripple element */
    position: relative;
    z-index: 3;
}

.emoditac-floating-icons .emoditac-master img[hidden] {
    display: none !important;
}

.emoditac-floating-icons .emoditac-label {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--emoditac-color-text);
    font-size: var(--emoditac-font-size-button);
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes emoditac-chat-badge-float {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.02); }
}

.emoditac-floating-icons .emoditac-chat-badge {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: min(220px, calc(100vw - 120px));
    padding: 8px 14px;
    border: 1px solid var(--emoditac-color-glass-border);
    border-radius: 999px;
    background: var(--emoditac-color-primary-surface);
    color: var(--emoditac-color-text);
    box-shadow: var(--emoditac-shadow-md);
    font-size: var(--emoditac-font-size-text);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none !important;
    white-space: nowrap;
    pointer-events: none;
}

.emoditac-floating-icons.emoditac-pos-right .emoditac-chat-badge {
    right: calc(100% + 8px);
    transform: translateY(-50%);
}

.emoditac-floating-icons.emoditac-pos-left .emoditac-chat-badge {
    left: calc(100% + 8px);
    transform: translateY(-50%);
}

.emoditac-floating-icons .emoditac-chat-badge::after {
    content: none;
}

.emoditac-floating-icons .emoditac-chat-badge--master {
    animation: emoditac-chat-badge-float 2.8s ease-in-out infinite;
}

.emoditac-floating-icons.emoditac-open .emoditac-chat-badge--master {
    opacity: 0;
    visibility: hidden;
}

.emoditac-floating-icons .emoditac-fallback-badge {
    border-radius: 50%;
    background: var(--emoditac-color-primary);
    box-shadow: var(--emoditac-glass-shadow-active);
}

.emoditac-floating-icons .emoditac-child {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.emoditac-floating-icons.emoditac-open .emoditac-child {
    opacity: 1;
    pointer-events: auto;
}

.emoditac-floating-icons .emoditac-child .emoditac-chat-badge {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.emoditac-floating-icons.emoditac-open .emoditac-child .emoditac-chat-badge,
.emoditac-floating-icons.emoditac-single .emoditac-item--ai-chat .emoditac-chat-badge {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1024px) {
    .emoditac-floating-icons .emoditac-chat-badge {
        min-height: 30px;
        max-width: min(180px, calc(100vw - 96px));
        padding: 7px 12px;
    }

    .emoditac-floating-icons.emoditac-pos-right .emoditac-chat-badge {
        right: calc(100% + 6px);
    }

    .emoditac-floating-icons.emoditac-pos-left .emoditac-chat-badge {
        left: calc(100% + 6px);
    }
}

/* Admin styles */
.emoditac-button-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--emoditac-color-glass-border);
    margin-bottom: 8px;
    background: var(--emoditac-color-primary-surface);
}

/* Ensure buttons inside the admin item have a little extra space when adjacent
   (covers WP's .button elements and native input[type=button]) */
.emoditac-button-item .button + .button,
.emoditac-button-item input[type="button"] + input[type="button"],
.emoditac-button-item .button + input[type="button"],
.emoditac-button-item input[type="button"] + .button {
    margin-left: 8px;
}

.emoditac-thumb img {
    max-width: var(--emoditac-icon-size, 48px);
    max-height: var(--emoditac-icon-size, 48px);
}

/* Icon preview transitions */
.emoditac-preview-image {
    transition: all 0.3s ease-in-out;
}

/* visually dim the color picker when ripple is disabled (we use readonly instead of disabled so value posts) */
.emoditac-color-disabled { opacity: 0.5; filter: grayscale(40%); }

/* admin/preview and active-master rules removed: plugin uses a single master icon */

.emoditac-master-icon {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.28s ease, transform 0.28s ease;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.emoditac-master-icon.active {
    /* when master has .active, hide it (fade/scale down) */
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}


#emoditac-master-preview img:hover {
    transform: scale(1.1);
    box-shadow: var(--emoditac-shadow-sm);
}

.emoditac-fields input[type=text] {
    display: block;
    margin-bottom: 6px;
    width: 300px;
}

/* Single icon styling: when only one icon exists, display it centered with a circular background */
.emoditac-floating-icons.emoditac-single {
    pointer-events: auto;
}
.emoditac-floating-icons.emoditac-single .emoditac-item,
.emoditac-floating-icons.emoditac-single .emoditac-master {
    width: var(--emoditac-single-container-size, 56px);
    height: var(--emoditac-single-container-size, 56px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--emoditac-color-glass-background);
    box-shadow: var(--emoditac-glass-shadow);
    overflow: visible;
}
.emoditac-floating-icons.emoditac-single {
    /* ensure single wrapper inherits ripple color variable so pseudo-elements use it */
    color: var(--emoditac-ripple-color, var(--emoditac-color-primary));
}
.emoditac-floating-icons.emoditac-single .emoditac-item {
    position: relative; /* ensure pseudo-elements/ripple are positioned relative to item */
    pointer-events: auto;
}
.emoditac-floating-icons.emoditac-single .emoditac-item img,
.emoditac-floating-icons.emoditac-single .emoditac-master img {
    width: var(--emoditac-single-icon-size, 40px);
    height: var(--emoditac-single-icon-size, 40px);
}

/* Utility classes */
.emoditac-hide-mobile {
    display: inline-block;
}

/* Fade-in for floating icons: keep positional properties (left/right/top/bottom)
   instant to avoid jitter when user changes the horizontal margin (px).
   Use CSS variables so PHP/JS can override timing from plugin settings. */
.emoditac-floating-icons {
    /* start hidden; animation will set to visible */
    opacity: 0;
    /* only animate opacity/transform; do NOT transition positional properties
       (left/right/top/bottom) so user px values apply immediately without interpolation */
    transition-property: opacity, transform;
    transition-duration: var(--emoditac-fade-duration, 0.45s);
    transition-timing-function: ease;
    will-change: opacity, transform;
    /* provide a declarative fade-in with configurable delay */
    animation: emoditac-fade-in var(--emoditac-fade-duration, 0.45s) ease var(--emoditac-fade-delay, 0.25s) forwards;
}

@keyframes emoditac-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* If the plugin toggles visibility with .emoditac-open we still keep a smooth reveal
   but ensure the position jump is immediate. This rule makes child transitions delayed
   so they appear after the container if desired. */
.emoditac-floating-icons.emoditac-open {
    /* ensure final state is visible in case JS toggles class */
    opacity: 1;
    transform: none;
}

/* Child icons already have transitions on opacity/transform; make sure they obey the
   fade-delay variable so the whole group appears in a staggered/less-janky way */
.emoditac-floating-icons .emoditac-child {
    transition: transform var(--emoditac-child-transition, 0.3s) ease, opacity var(--emoditac-child-transition, 0.3s) ease;
    transition-delay: var(--emoditac-child-delay, 0.08s);
}


/* .emoditac-admin-menu-icon{
    margin-top: 5px !important;
} */