/* ============================================================
   WA Sticky Widget – Frontend Styles
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */
.wa-sw {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    display: flex;
    align-items: stretch;
    /* no pointer-events on container; individual children handle clicks */
}

.wa-sw--right { right: 0; flex-direction: row-reverse; }
.wa-sw--left  { left:  0; flex-direction: row; }

/* ── Toggle tab ──────────────────────────────────────────── */
.wa-sw__toggle {
    background: #333;
    border: none;
    cursor: pointer;
    width: 22px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s;
    outline: none;
}
.wa-sw--right .wa-sw__toggle { border-radius: 6px 0 0 6px; }
.wa-sw--left  .wa-sw__toggle { border-radius: 0 6px 6px 0; }
.wa-sw__toggle:hover { background: #111; }

/* chevron arrow */
.wa-sw__chevron {
    display: block;
    width:  9px;
    height: 9px;
    border-top:   2px solid #fff;
    border-right: 2px solid #fff;
    transition: transform 0.3s;
    flex-shrink: 0;
}
/* right widget: default = open → arrow points right (→) */
.wa-sw--right .wa-sw__chevron               { transform: rotate( 45deg); margin-left: -3px; }
/* right widget: collapsed → arrow points left (←) */
.wa-sw--right.wa-sw--collapsed .wa-sw__chevron { transform: rotate(225deg); margin-left:  3px; }
/* left widget: default = open → arrow points left */
.wa-sw--left .wa-sw__chevron               { transform: rotate(225deg); margin-left:  3px; }
.wa-sw--left.wa-sw--collapsed .wa-sw__chevron { transform: rotate( 45deg); margin-left: -3px; }

/* ── Channels list ───────────────────────────────────────── */
.wa-sw__channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: opacity 0.25s, visibility 0.25s;
}

.wa-sw--collapsed .wa-sw__channels {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

/* ── Single channel item ─────────────────────────────────── */
.wa-sw__item {
    position: relative;
    display: flex;
    align-items: center;
}

/* ── Channel anchor ──────────────────────────────────────── */
.wa-sw__item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    transition: filter 0.2s;
    outline: none;
}
.wa-sw__item a:hover,
.wa-sw__item a:focus { filter: brightness(1.12); }

/* ── Icon box ────────────────────────────────────────────── */
.wa-sw__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}
.wa-sw__icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    display: block;
    flex-shrink: 0;
}

/* ── Flyout label ────────────────────────────────────────── */
.wa-sw__label {
    position: absolute;
    top: 0;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px 0 12px;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 4px 0 0 4px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-width 0.3s ease, opacity 0.2s ease;
    box-shadow: -3px 0 8px rgba(0,0,0,0.15);
}

/* right widget: label appears to the LEFT of the icon */
.wa-sw--right .wa-sw__label {
    right: 52px;
    border-radius: 6px 0 0 6px;
}
/* left widget: label appears to the RIGHT of the icon */
.wa-sw--left .wa-sw__label {
    left: 52px;
    border-radius: 0 6px 6px 0;
    box-shadow: 3px 0 8px rgba(0,0,0,0.15);
}

.wa-sw__item a:hover .wa-sw__label,
.wa-sw__item a:focus .wa-sw__label {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
}

/* ── Device targeting ────────────────────────────────────── */
@media (max-width: 768px) {
    .wa-sw__item[data-device="desktop"] { display: none; }
}
@media (min-width: 769px) {
    .wa-sw__item[data-device="mobile"]  { display: none; }
}

/* ── Size variants ───────────────────────────────────────── */
.wa-sw--sm .wa-sw__item a,
.wa-sw--sm .wa-sw__icon { width: 40px; height: 40px; }
.wa-sw--sm .wa-sw__icon svg { width: 20px; height: 20px; }
.wa-sw--sm .wa-sw__label { height: 40px; }
.wa-sw--sm .wa-sw__toggle { min-height: 44px; }
.wa-sw--sm.wa-sw--right .wa-sw__label { right: 40px; }
.wa-sw--sm.wa-sw--left  .wa-sw__label { left:  40px; }

.wa-sw--lg .wa-sw__item a,
.wa-sw--lg .wa-sw__icon { width: 64px; height: 64px; }
.wa-sw--lg .wa-sw__icon svg { width: 30px; height: 30px; }
.wa-sw--lg .wa-sw__label { height: 64px; }
.wa-sw--lg .wa-sw__toggle { min-height: 68px; }
.wa-sw--lg.wa-sw--right .wa-sw__label { right: 64px; }
.wa-sw--lg.wa-sw--left  .wa-sw__label { left:  64px; }

/* ── Bottom position ─────────────────────────────────────── */
.wa-sw--bottom-right,
.wa-sw--bottom-left {
    top: auto;
    transform: none;
    bottom: 20px;
}
.wa-sw--bottom-right { right: 0; flex-direction: row-reverse; }
.wa-sw--bottom-left  { left:  0; flex-direction: row; }

/* ── Click-mode flyout (JS adds .wa-sw--click-mode) ─────── */
.wa-sw--click-mode .wa-sw__label { pointer-events: none; }
.wa-sw--click-mode .wa-sw__item a:hover .wa-sw__label,
.wa-sw--click-mode .wa-sw__item a:focus .wa-sw__label {
    max-width: 0;
    opacity: 0;
}
.wa-sw--click-mode .wa-sw__item.open .wa-sw__label {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
}

/* ── Entry animations ────────────────────────────────────── */
.wa-sw--hidden { visibility: hidden; }

@keyframes wa-slide-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes wa-slide-left {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes wa-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* bottom-position widgets slide up */
@keyframes wa-slide-up {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.wa-sw--anim-slide-in { animation: wa-slide-right 0.4s ease forwards; }
.wa-sw--left.wa-sw--anim-slide-in,
.wa-sw--bottom-left.wa-sw--anim-slide-in { animation-name: wa-slide-left; }
.wa-sw--bottom-right.wa-sw--anim-slide-in,
.wa-sw--bottom-left.wa-sw--anim-slide-in { animation-name: wa-slide-up; }
.wa-sw--anim-fade-in  { animation: wa-fade-in 0.5s ease forwards; }

/* ── Accessibility: reduce motion ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wa-sw__label,
    .wa-sw__chevron,
    .wa-sw__channels { transition: none; }
    .wa-sw--anim-slide-in,
    .wa-sw--anim-fade-in { animation: none; }
}