/* Floating Social Media Bubble public styles */
.fsmb-container { position: fixed; bottom: 24px; right: 24px; z-index: 100; --fsmb-icon-shadow: 0 0 0 0 rgba(0,0,0,0); --fsmb-label-shadow: 0 0 0 0 rgba(0,0,0,0); --fsmb-icon-radius: var(--radius-full, calc(infinity * 1px)); --fsmb-label-radius: var(--radius-full, calc(infinity * 1px)); --fsmb-toggle-radius: var(--radius-full, calc(infinity * 1px)); }
.fsmb-container.fsmb-left { left: 24px; right: auto; }
.fsmb-toggle { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: var(--fsmb-toggle-radius, var(--fsmb-icon-radius, var(--radius-full, calc(infinity * 1px)))); outline: none; box-shadow: var(--fsmb-icon-shadow, 0 0 0 0 rgba(0,0,0,0)); display: inline-flex; align-items: center; justify-content: center; }
.fsmb-toggle:focus { outline: none; }
.fsmb-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--fsmb-accent, #0ea5a0), var(--fsmb-icon-shadow, 0 0 0 0 rgba(0,0,0,0)); }
.fsmb-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 10px; }
.fsmb-menu[hidden] { display: none !important; }
.fsmb-item { display: inline-flex; width: 40px; height: 40px; border-radius: var(--fsmb-icon-radius, var(--radius-full, calc(infinity * 1px))); align-items: center; justify-content: center; background: var(--fsmb-bg, transparent); outline: none; box-shadow: var(--fsmb-icon-shadow, 0 0 0 0 rgba(0,0,0,0)); }
.fsmb-item:focus { outline: none; }
.fsmb-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--fsmb-accent, #0ea5a0), var(--fsmb-icon-shadow, 0 0 0 0 rgba(0,0,0,0)); }

/* Toggle icon states */
.fsmb-toggle .fsmb-icon-close { display: none; }
.fsmb-open .fsmb-toggle .fsmb-icon-open { display: none; }
.fsmb-open .fsmb-toggle .fsmb-icon-close { display: inline; }

/* Labelled rows: keep icons aligned with the toggle */
.fsmb-row { position: relative; width: 40px; display: flex; align-items: center; justify-content: center; }
.fsmb-right .fsmb-row { flex-direction: row; }
.fsmb-label { position: absolute; display: inline-block; background: var(--fsmb-label-bg, #ffffff); color: var(--fsmb-label-color, #111827); padding: 8px 12px; border-radius: var(--fsmb-label-radius, var(--radius-full, calc(infinity * 1px))); font-size: 14px; line-height: 1; white-space: nowrap; box-shadow: var(--fsmb-label-shadow, 0 0 0 0 rgba(0,0,0,0)); --fsmb-label-shift: 10px; transform: translateX(var(--fsmb-label-shift)); }
/* Place label to the side away from screen edge */
.fsmb-left .fsmb-label { left: 100%; --fsmb-label-shift: 10px; }
.fsmb-right .fsmb-label { right: 100%; --fsmb-label-shift: -10px; }

@keyframes fsmb-rotate-kf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fsmb-bounce-kf { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes fsmb-pulse-kf { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fsmb-wiggle-kf { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes fsmb-flip-kf { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes fsmb-rotate-label-kf { from { transform: translateX(var(--fsmb-label-shift)) rotate(0deg); } to { transform: translateX(var(--fsmb-label-shift)) rotate(360deg); } }
@keyframes fsmb-bounce-label-kf { 0%,100% { transform: translateX(var(--fsmb-label-shift)) translateY(0); } 50% { transform: translateX(var(--fsmb-label-shift)) translateY(-4px); } }
@keyframes fsmb-pulse-label-kf { 0%,100% { transform: translateX(var(--fsmb-label-shift)) scale(1); } 50% { transform: translateX(var(--fsmb-label-shift)) scale(1.08); } }
@keyframes fsmb-wiggle-label-kf { 0%,100% { transform: translateX(var(--fsmb-label-shift)) rotate(0deg); } 25% { transform: translateX(var(--fsmb-label-shift)) rotate(-8deg); } 75% { transform: translateX(var(--fsmb-label-shift)) rotate(8deg); } }
@keyframes fsmb-flip-label-kf { 0% { transform: translateX(var(--fsmb-label-shift)) rotateY(0deg); } 50% { transform: translateX(var(--fsmb-label-shift)) rotateY(180deg); } 100% { transform: translateX(var(--fsmb-label-shift)) rotateY(360deg); } }

.fsmb-anim-rotate.fsmb-open .fsmb-item svg, .fsmb-anim-rotate .fsmb-item:hover svg { animation: fsmb-rotate-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-rotate.fsmb-open .fsmb-label, .fsmb-anim-rotate .fsmb-item:hover + .fsmb-label { animation: fsmb-rotate-label-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-bounce.fsmb-open .fsmb-item svg, .fsmb-anim-bounce .fsmb-item:hover svg { animation: fsmb-bounce-kf 0.6s ease; transform-origin: 50% 100%; }
.fsmb-anim-bounce.fsmb-open .fsmb-label, .fsmb-anim-bounce .fsmb-item:hover + .fsmb-label { animation: fsmb-bounce-label-kf 0.6s ease; transform-origin: 50% 100%; }
.fsmb-anim-pulse.fsmb-open .fsmb-item svg, .fsmb-anim-pulse .fsmb-item:hover svg { animation: fsmb-pulse-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-pulse.fsmb-open .fsmb-label, .fsmb-anim-pulse .fsmb-item:hover + .fsmb-label { animation: fsmb-pulse-label-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-wiggle.fsmb-open .fsmb-item svg, .fsmb-anim-wiggle .fsmb-item:hover svg { animation: fsmb-wiggle-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-wiggle.fsmb-open .fsmb-label, .fsmb-anim-wiggle .fsmb-item:hover + .fsmb-label { animation: fsmb-wiggle-label-kf 0.6s ease; transform-origin: 50% 50%; }
.fsmb-anim-flip.fsmb-open .fsmb-item svg, .fsmb-anim-flip .fsmb-item:hover svg { animation: fsmb-flip-kf 0.6s ease; transform-origin: 50% 50%; backface-visibility: hidden; }
.fsmb-anim-flip.fsmb-open .fsmb-label, .fsmb-anim-flip .fsmb-item:hover + .fsmb-label { animation: fsmb-flip-label-kf 0.6s ease; transform-origin: 50% 50%; backface-visibility: hidden; }

/* Admin preview container makes sure it is visible */
.fsmb-preview .fsmb-container { position: relative; }