/* ==========================================================
   contact-bar.css — WhatsApp + Okki sticky sidebar (v1.1.2)
   Variants on #jyl-cbar: --ripple / --pulse / --vortex / --none
   Tokens: reuses --jyl-* / --rey-* from jyl_design_tokens (wp_head)
   Breakpoints: 598 / 898 / 1198 / 1438 / 1918
   ========================================================== */

#jyl-cbar {
    --cbar-wa:        #128C7E;   /* rest fill: darker official green, white glyph >=3:1 (WCAG AA non-text) */
    --cbar-wa-ring:   #25D366;   /* bright green for the animated glow only */
    --cbar-okki:      var(--jyl-blue);
    --cbar-okki-ring: var(--jyl-blue-light);

    --cbar-size: 54px;
    --cbar-gap:  14px;
    --cbar-edge: 16px;
    /* dock-bottom only: clearance above Okki's native bubble.
       Nudge this one number if the gap to the Okki bubble looks off. */
    --cbar-dock-bottom: 92px;

    position: fixed;
    z-index: calc(var(--jyl-z-modal, 160) - 10);
    display: flex;
    flex-direction: column;
    gap: var(--cbar-gap);
    margin: 0;
    padding: 0;
    font-family: var(--jyl-font);
}

#jyl-cbar.jyl-cbar--right { right: var(--cbar-edge); }
#jyl-cbar.jyl-cbar--left  { left:  var(--cbar-edge); }

/* Vertically centered */
#jyl-cbar.jyl-cbar--dock-center { top: 50%; transform: translateY(-50%); }

/* Bottom-right, stacked directly above the Okki bubble (grows upward) */
#jyl-cbar.jyl-cbar--dock-bottom { top: auto; bottom: var(--cbar-dock-bottom); transform: none; }

/* ---- Icon button ---- */
.jyl-cbar-item {
    position: relative;
    width: var(--cbar-size);
    height: var(--cbar-size);
    border: 0;
    border-radius: var(--jyl-radius-full);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cbar-accent);
    box-shadow: var(--jyl-shadow-sm);
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--jyl-t200) var(--jyl-ease), box-shadow var(--jyl-t200) var(--jyl-ease);
}

/* Pin the glyph colour in EVERY state (id+class+pseudo specificity) so the
   theme's global a:hover link colour can't bleed into the SVG's currentColor. */
#jyl-cbar .jyl-cbar-item,
#jyl-cbar .jyl-cbar-item:hover,
#jyl-cbar .jyl-cbar-item:focus,
#jyl-cbar .jyl-cbar-item:focus-visible,
#jyl-cbar .jyl-cbar-item:active { color: var(--jyl-white); }

.jyl-cbar-item--wa   { --cbar-accent: var(--cbar-wa);   --cbar-ring: var(--cbar-wa-ring);   --cbar-glow: rgba(37,211,102,.55); }
.jyl-cbar-item--okki { --cbar-accent: var(--cbar-okki); --cbar-ring: var(--cbar-okki-ring); --cbar-glow: rgba(90,127,255,.55); }

.jyl-cbar-item:hover { transform: scale(1.08); }

/* Focus ring visible on BOTH light and dark: body-bg gap + accent ring. */
#jyl-cbar .jyl-cbar-item:focus-visible {
    outline: 2px solid var(--rey-body-bg, #fff);
    outline-offset: 2px;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px var(--cbar-accent), var(--jyl-shadow-sm);
}

.jyl-cbar-ico { display: flex; width: 26px; height: 26px; pointer-events: none; position: relative; z-index: 1; }
.jyl-cbar-ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---- Hover/focus text label ----
   Colours bind to theme tokens that dark-mode.css already flips, so the label
   auto-inverts (dark-on-light  ->  light-on-dark) with no .jyl-dark selector. */
.jyl-cbar-label {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    background: var(--rey-body-color, var(--jyl-grey-dark));
    color: var(--rey-body-bg, var(--jyl-white));
    font-size: var(--jyl-fs-14);
    font-weight: var(--jyl-fw-medium);
    line-height: 1;
    padding: 8px 10px;
    border-radius: var(--jyl-radius-sm);
    box-shadow: var(--jyl-shadow-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--jyl-t200) var(--jyl-ease), transform var(--jyl-t200) var(--jyl-ease);
}
#jyl-cbar.jyl-cbar--right .jyl-cbar-label { right: calc(100% + 12px); transform: translateY(-50%) translateX(6px); }
#jyl-cbar.jyl-cbar--left  .jyl-cbar-label { left:  calc(100% + 12px); transform: translateY(-50%) translateX(-6px); }
.jyl-cbar-item:hover .jyl-cbar-label,
.jyl-cbar-item:focus-visible .jyl-cbar-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Animation host — above the button fill, below the icon */
.jyl-cbar-fx { position: absolute; inset: 0; border-radius: var(--jyl-radius-full); pointer-events: none; z-index: 0; }

/* ==========================================================
   Variant 1 - Ripple / sonar (outward)
   ========================================================== */
@keyframes jyl-cbar-ripple {
    0%   { transform: scale(1);   opacity: .6; }
    70%  { opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}
.jyl-cbar--ripple .jyl-cbar-fx::before,
.jyl-cbar--ripple .jyl-cbar-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--jyl-radius-full);
    border: 2px solid var(--cbar-ring, var(--cbar-accent));
    opacity: 0;
    animation: jyl-cbar-ripple 2.4s var(--jyl-ease) infinite;
}
.jyl-cbar--ripple .jyl-cbar-fx::after { animation-delay: 1.2s; }

/* ==========================================================
   Variant 2 - Breathing pulse
   ========================================================== */
@keyframes jyl-cbar-breathe {
    0%, 100% { transform: scale(1);    box-shadow: var(--jyl-shadow-sm); }
    50%      { transform: scale(1.08); box-shadow: 0 6px 24px var(--cbar-glow); }
}
.jyl-cbar--pulse .jyl-cbar-item { animation: jyl-cbar-breathe 2.8s ease-in-out infinite; }
.jyl-cbar--pulse .jyl-cbar-item:hover,
.jyl-cbar--pulse .jyl-cbar-item:focus-visible { animation-play-state: paused; }

/* ==========================================================
   Variant 3 - Vortex / siphon (inward, G502-logo-light feel)
   ========================================================== */
@keyframes jyl-cbar-siphon {
    0%   { transform: scale(2.1) rotate(0deg);  opacity: 0; }
    30%  { opacity: .9; }
    100% { transform: scale(.42) rotate(80deg); opacity: 0; }
}
.jyl-cbar--vortex .jyl-cbar-fx::before,
.jyl-cbar--vortex .jyl-cbar-fx::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--jyl-radius-full);
    background: radial-gradient(circle,
        transparent 50%,
        var(--cbar-ring, var(--cbar-accent)) 60%,
        transparent 76%);
    filter: blur(1px);
    opacity: 0;
    animation: jyl-cbar-siphon 2.4s cubic-bezier(.5, 0, .2, 1) infinite;
}
.jyl-cbar--vortex .jyl-cbar-fx::after { animation-delay: 1.2s; }

@keyframes jyl-cbar-core {
    0%, 100% { box-shadow: var(--jyl-shadow-sm), 0 0 0 0 var(--cbar-glow); }
    50%      { box-shadow: var(--jyl-shadow-sm), 0 0 20px 3px var(--cbar-glow); }
}
.jyl-cbar--vortex .jyl-cbar-item { animation: jyl-cbar-core 2.4s ease-in-out infinite; }
.jyl-cbar--vortex .jyl-cbar-item:hover,
.jyl-cbar--vortex .jyl-cbar-item:focus-visible { animation-play-state: paused; }

/* Variant 4 - None: no animation rules needed. */

/* ==========================================================
   Okki integration state (proxy mode only)
   ========================================================== */
.jyl-cbar-item--okki[data-ows-unavailable] { display: none; }
.jyl-cbar-okki-proxied [class*="okki"][class*="float"],
.jyl-cbar-okki-proxied [class*="okki"][class*="bubble"] { display: none !important; }

/* ==========================================================
   Narrow viewports
   ========================================================== */
@media (max-width: 598px) {
    #jyl-cbar { --cbar-size: 46px; --cbar-gap: 12px; --cbar-edge: 10px; }
    .jyl-cbar-label { display: none; }
}
@media (max-height: 520px) {
    #jyl-cbar.jyl-cbar--dock-center { top: auto; bottom: 16px; transform: none; }
}

/* ==========================================================
   Reduced motion — kill every loop, keep hover transition
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    #jyl-cbar .jyl-cbar-item,
    #jyl-cbar .jyl-cbar-fx::before,
    #jyl-cbar .jyl-cbar-fx::after { animation: none !important; }
    #jyl-cbar .jyl-cbar-fx::before,
    #jyl-cbar .jyl-cbar-fx::after { display: none; }
    .jyl-cbar-item { transition: transform var(--jyl-t200) var(--jyl-ease); }
}