.reme-sticky,
.reme-sticky-1x {
    position: fixed !important;
    top: var(--reme-offset, 50%) !important;
    transform: translateY(-50%) !important;
    z-index: var(--reme-z, 999999) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--reme-gap, 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.reme-sticky.left1x,
.reme-sticky.reme-left1x,
.reme-sticky.reme-left,
.reme-left1x,
.reme-left {
    left: 0 !important;
    right: auto !important;
}

.reme-sticky.right1x,
.reme-sticky.reme-right1x,
.reme-sticky.reme-right,
.reme-right1x,
.reme-right {
    right: 0 !important;
    left: auto !important;
}

.reme-icon,
.reme-icon-1x {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--reme-size, 52px);
    min-width: var(--reme-size, 52px);
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .35s ease, opacity .25s ease;
    font-family: inherit;
    background-color: var(--reme-bg, #111111);
    color: var(--reme-color, #ffffff);
    box-sizing: border-box;
}

.reme-left .reme-icon,
.reme-left1x .reme-icon,
.left1x .reme-icon {
    transform: translateX(0);
    border-radius: 0 30px 30px 0;
}

.reme-right .reme-icon,
.reme-right1x .reme-icon,
.right1x .reme-icon {
    transform: translateX(0);
    border-radius: 30px 0 0 30px;
}

.reme-icon:hover,
.reme-icon-1x:hover {
    transform: translateX(0) !important;
    filter: brightness(1.08);
}

.reme-icon i,
.reme-icon-1x i,
.reme-icon svg,
.reme-icon-1x svg {
    width: var(--reme-size, 52px);
    height: var(--reme-size, 52px);
    min-width: var(--reme-size, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    color: inherit;
    box-sizing: border-box;
}

.reme-icon img,
.reme-icon-1x img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin: 12px;
}

.reme-tooltip,
.reme-tooltip-1x {
    white-space: nowrap;
    padding: 0 18px;
    font-size: 14px;
    line-height: var(--reme-size, 52px);
    color: inherit;
    box-sizing: border-box;
}

/* Keep the icon visible and collapse only its label until hover/focus. */
.reme-tooltip,
.reme-tooltip-1x {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .35s ease, padding .35s ease, opacity .2s ease;
}

.reme-icon:hover .reme-tooltip,
.reme-icon:focus-visible .reme-tooltip,
.reme-icon-1x:hover .reme-tooltip-1x,
.reme-icon-1x:focus-visible .reme-tooltip-1x {
    max-width: 260px;
    padding-left: 18px;
    padding-right: 18px;
    opacity: 1;
}

.reme-icon:focus-visible,
.reme-icon-1x:focus-visible {
    outline: 3px solid rgba(255,255,255,.9);
    outline-offset: -3px;
}

@media (max-width: 768px) {
    .reme-hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .reme-hide-desktop { display: none !important; }
}
.reme-awaiting { opacity: 0 !important; pointer-events: none !important; }

/* 1 — Chat capsule, matching the supplied WhatsApp reference. */
.reme-style-1 { gap: 8px !important; }
.reme-style-1 .reme-icon {
    width: auto; min-width: var(--reme-size, 52px); border-radius: 999px !important;
    padding: 0 10px; box-shadow: 0 8px 24px rgba(18,140,75,.3);
}
.reme-style-1 .reme-tooltip { max-width: 260px; padding: 0 10px; opacity: 1; font-weight: 700; text-decoration: underline; }

/* 2 — Frosted floating glass. */
.reme-style-2 .reme-icon { border: 1px solid rgba(255,255,255,.55); border-radius: 16px !important; backdrop-filter: blur(12px); box-shadow: 0 12px 28px rgba(15,23,42,.22); }

/* 3 — Neon glow. */
.reme-style-3 .reme-icon { border: 1px solid currentColor; border-radius: 10px !important; box-shadow: 0 0 8px currentColor, 0 0 22px color-mix(in srgb, currentColor 55%, transparent); }
.reme-style-3 .reme-icon:hover { box-shadow: 0 0 12px currentColor, 0 0 34px currentColor; }

/* 4 — Clean outline. */
.reme-style-4 .reme-icon { background: #fff; color: var(--reme-bg, #111); border: 2px solid currentColor; border-radius: 999px !important; box-shadow: none; }

/* 5 — Soft elevated cards. */
.reme-style-5 .reme-icon { border-radius: 14px !important; box-shadow: 0 4px 8px rgba(15,23,42,.12), 0 16px 32px rgba(15,23,42,.16); }
.reme-style-5 .reme-icon:hover { transform: translateY(-3px) !important; }

/* 6 — Animated gradient capsule. */
.reme-style-6 .reme-icon { background: linear-gradient(120deg, var(--reme-bg), #7c3aed, #06b6d4); background-size: 220% 220%; border-radius: 999px !important; animation: remeGradient 5s ease infinite; }
@keyframes remeGradient { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }

/* 7 — Angular tech tiles. */
.reme-style-7 .reme-icon { border-radius: 4px !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: none; }
.reme-style-7 .reme-icon::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }

/* 8 — Circular pop icons. */
.reme-style-8 .reme-icon { width: 54px; min-width: 54px; height: 54px; border-radius: 50% !important; overflow: visible; }
.reme-style-8 .reme-tooltip { position: absolute; top: 7px; background: #111827; color: #fff; border-radius: 8px; line-height: 40px; }
.reme-style-8.reme-right .reme-tooltip { right: 64px; }
.reme-style-8.reme-left .reme-tooltip { left: 64px; }

/* 9 — Dark luxury with gold edge. */
.reme-style-9 .reme-icon { background: linear-gradient(145deg,#080808,#242424); color: #f5ce72; border: 1px solid #c69a3c; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,.38); }
.reme-style-9 .reme-tooltip { letter-spacing: .04em; }

/* 10 — Attention pulse. */
.reme-style-10 .reme-icon { border-radius: 999px !important; animation: remePulse 2s infinite; }
@keyframes remePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--reme-bg) 55%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (prefers-reduced-motion: reduce) {
    .reme-icon, .reme-tooltip, .reme-style-6 .reme-icon, .reme-style-10 .reme-icon { animation: none !important; transition: none !important; }
}