/* =============================================================================
   AT-Float Bar — Frontend Styles v1.2.0
   Positions: right | left | bottom | edge-right | edge-left
   Dark mode:  afb-dm-auto | afb-dm-light | afb-dm-dark
   Mobile bar: .afb-mobile-bottom overrides position on ≤768 px
   Copyright (C) 2025-2026 Altechmind Technologies (OPC) Pvt. Ltd.
   License: GPL-2.0-or-later
   ============================================================================= */

/* =============================================================================
   DESIGN TOKENS — Light (default)
   ============================================================================= */
:root {
    --afb-bottom:        32px;
    --afb-side:          24px;
    --afb-gap:           10px;

    /* Button */
    --afb-shadow:        0 4px 16px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.10);
    --afb-shadow-hover:  0 8px 28px rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.14);
    --afb-size-sm:       42px;
    --afb-size-md:       52px;
    --afb-size-lg:       62px;
    --afb-icon-sm:       18px;
    --afb-icon-md:       22px;
    --afb-icon-lg:       28px;

    /* Tooltip */
    --afb-tooltip-bg:    rgba(15,23,42,.93);
    --afb-tooltip-txt:   #ffffff;

    /* Edge panel / bottom bar surface — light */
    --afb-surface-bg:    rgba(255,255,255,.97);
    --afb-surface-bdr:   rgba(0,0,0,.09);
    --afb-surface-divdr: rgba(0,0,0,.07);
    --afb-surface-hover: rgba(0,0,0,.05);
    --afb-surface-shadow-r: -4px 0 30px rgba(0,0,0,.12);
    --afb-surface-shadow-l:  4px 0 30px rgba(0,0,0,.12);
    --afb-surface-shadow-b:  0 -2px 20px rgba(0,0,0,.10);

    /* Bottom bar text */
    --afb-bar-lbl:       rgba(0,0,0,.55);
    --afb-bar-lbl-act:   var(--afb-btn-color, #25D366);
}

/* ── Dark token override: forced dark ──────────────────────────────────────── */
.afb-dm-dark {
    --afb-tooltip-bg:    rgba(230,236,255,.95);
    --afb-tooltip-txt:   #0f172a;

    --afb-surface-bg:    rgba(18,18,24,.96);
    --afb-surface-bdr:   rgba(255,255,255,.10);
    --afb-surface-divdr: rgba(255,255,255,.07);
    --afb-surface-hover: rgba(255,255,255,.07);
    --afb-surface-shadow-r: -4px 0 30px rgba(0,0,0,.55);
    --afb-surface-shadow-l:  4px 0 30px rgba(0,0,0,.55);
    --afb-surface-shadow-b:  0 -2px 24px rgba(0,0,0,.55);

    --afb-bar-lbl: rgba(255,255,255,.45);
}

/* ── Auto dark: follows OS preference ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .afb-dm-auto {
        --afb-tooltip-bg:    rgba(230,236,255,.95);
        --afb-tooltip-txt:   #0f172a;

        --afb-surface-bg:    rgba(18,18,24,.96);
        --afb-surface-bdr:   rgba(255,255,255,.10);
        --afb-surface-divdr: rgba(255,255,255,.07);
        --afb-surface-hover: rgba(255,255,255,.07);
        --afb-surface-shadow-r: -4px 0 30px rgba(0,0,0,.55);
        --afb-surface-shadow-l:  4px 0 30px rgba(0,0,0,.55);
        --afb-surface-shadow-b:  0 -2px 24px rgba(0,0,0,.55);

        --afb-bar-lbl: rgba(255,255,255,.45);
    }
}

/* =============================================================================
   WRAPPER
   ============================================================================= */
.afb-wrap {
    position:       fixed;
    z-index:        99999;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--afb-gap);
    pointer-events: none;
}

/* ── Floating right ─────────────────────────────────────────────────────────── */
.afb-pos-right {
    bottom: var(--afb-bottom);
    right:  var(--afb-side);
    align-items: flex-end;
}

/* ── Floating left ──────────────────────────────────────────────────────────── */
.afb-pos-left {
    bottom: var(--afb-bottom);
    left:   var(--afb-side);
    align-items: flex-start;
}

/* ── Floating bottom row ────────────────────────────────────────────────────── */
.afb-pos-bottom {
    bottom:    var(--afb-bottom);
    left:      50%;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    gap: var(--afb-gap);
}

/* ── Edge panel — right ─────────────────────────────────────────────────────── */
.afb-pos-edge-right {
    top:       50%;
    right:     0;
    bottom:    auto;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background:       var(--afb-surface-bg);
    backdrop-filter:  blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border:           1px solid var(--afb-surface-bdr);
    border-right:     none;
    border-radius:    14px 0 0 14px;
    padding:          6px 0;
    box-shadow:       var(--afb-surface-shadow-r);
    pointer-events:   all;
    transition:       background .25s ease, box-shadow .25s ease;
}

/* ── Edge panel — left ──────────────────────────────────────────────────────── */
.afb-pos-edge-left {
    top:       50%;
    left:      0;
    right:     auto;
    bottom:    auto;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background:       var(--afb-surface-bg);
    backdrop-filter:  blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border:           1px solid var(--afb-surface-bdr);
    border-left:      none;
    border-radius:    0 14px 14px 0;
    padding:          6px 0;
    box-shadow:       var(--afb-surface-shadow-l);
    pointer-events:   all;
    transition:       background .25s ease, box-shadow .25s ease;
}

/* Edge panel: button wraps get pointer-events */
.afb-pos-edge-right .afb-btn-wrap,
.afb-pos-edge-left  .afb-btn-wrap {
    pointer-events: all;
}

/* Hairline dividers between edge items */
.afb-pos-edge-right .afb-btn-wrap + .afb-btn-wrap,
.afb-pos-edge-left  .afb-btn-wrap + .afb-btn-wrap {
    border-top: 1px solid var(--afb-surface-divdr);
}

/* Edge panel buttons — transparent background, icon coloured by brand colour */
.afb-pos-edge-right .afb-btn,
.afb-pos-edge-left  .afb-btn {
    width:          52px;
    height:         52px;
    border-radius:  0 !important;
    background:     transparent !important;
    box-shadow:     none !important;
    color:          var(--afb-btn-color, #333);
    flex-direction: column;
    gap:            0;
    transition:     background .18s ease, transform .18s ease;
}

.afb-size-sm .afb-pos-edge-right .afb-btn,
.afb-size-sm .afb-pos-edge-left  .afb-btn { width: 44px; height: 44px; }
.afb-size-lg .afb-pos-edge-right .afb-btn,
.afb-size-lg .afb-pos-edge-left  .afb-btn { width: 60px; height: 60px; }

.afb-pos-edge-right .afb-btn:hover,
.afb-pos-edge-left  .afb-btn:hover {
    background: var(--afb-surface-hover) !important;
    transform:  scale(1.06);
    box-shadow: none !important;
    filter:     none;
}

.afb-pos-edge-right .afb-btn .afb-icon,
.afb-pos-edge-left  .afb-btn .afb-icon {
    color: var(--afb-btn-color, #333);
}

/* No pulse shadow on edge (transparent bg) */
.afb-pos-edge-right .afb-btn.afb-pulse,
.afb-pos-edge-left  .afb-btn.afb-pulse { animation: none; }

/* =============================================================================
   ENTRANCE ANIMATION
   Targets .afb-btn-wrap — pulse targets .afb-btn — ZERO conflict.
   ============================================================================= */
.afb-animate .afb-btn-wrap {
    opacity:   0;
    transform: translateX(28px);
    animation: afb-slide-in .42s cubic-bezier(.22,.68,0,1.2) forwards;
}

.afb-pos-left.afb-animate   .afb-btn-wrap { transform: translateX(-28px); }
.afb-pos-bottom.afb-animate .afb-btn-wrap { transform: translateY(28px); }
.afb-pos-edge-right.afb-animate .afb-btn-wrap { transform: translateX(18px); }
.afb-pos-edge-left.afb-animate  .afb-btn-wrap { transform: translateX(-18px); }

.afb-animate .afb-btn-wrap:nth-child(1) { animation-delay: .04s; }
.afb-animate .afb-btn-wrap:nth-child(2) { animation-delay: .10s; }
.afb-animate .afb-btn-wrap:nth-child(3) { animation-delay: .16s; }
.afb-animate .afb-btn-wrap:nth-child(4) { animation-delay: .22s; }
.afb-animate .afb-btn-wrap:nth-child(5) { animation-delay: .28s; }
.afb-animate .afb-btn-wrap:nth-child(6) { animation-delay: .34s; }
.afb-animate .afb-btn-wrap:nth-child(7) { animation-delay: .40s; }
.afb-animate .afb-btn-wrap:nth-child(8) { animation-delay: .46s; }
.afb-animate .afb-btn-wrap:nth-child(9) { animation-delay: .52s; }

@keyframes afb-slide-in {
    to { opacity: 1; transform: translate(0,0); }
}

/* =============================================================================
   BASE BUTTON
   ============================================================================= */
.afb-btn-wrap { pointer-events: all; }

.afb-btn {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--afb-size-md);
    height:          var(--afb-size-md);
    background:      var(--afb-btn-color, #25D366);
    color:           #fff;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    outline:         none;
    box-shadow:      var(--afb-shadow);
    transition:      transform .22s cubic-bezier(.22,.68,0,1.4),
                     box-shadow .22s ease,
                     filter .22s ease;
    will-change:     transform;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    overflow: hidden;
}

/* Label — visible only in bottom app-bar mode */
.afb-btn-label { display: none; }

.afb-btn:hover,
.afb-btn:focus-visible {
    transform:  scale(1.12) translateY(-2px);
    box-shadow: var(--afb-shadow-hover);
    filter:     brightness(1.08);
}

.afb-btn:active { transform: scale(.95); box-shadow: var(--afb-shadow); }

.afb-btn:focus-visible {
    outline:        3px solid rgba(255,255,255,.88);
    outline-offset: 2px;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
.afb-size-sm .afb-btn { width: var(--afb-size-sm); height: var(--afb-size-sm); }
.afb-size-lg .afb-btn { width: var(--afb-size-lg); height: var(--afb-size-lg); }

/* ── Shapes ────────────────────────────────────────────────────────────────── */
.afb-style-circle .afb-btn { border-radius: 50%; }
.afb-style-square  .afb-btn { border-radius: 10px; }
.afb-style-pill    .afb-btn { border-radius: 28px; }

/* =============================================================================
   ICON
   ============================================================================= */
.afb-icon {
    width:          var(--afb-icon-md);
    height:         var(--afb-icon-md);
    flex-shrink:    0;
    pointer-events: none;
    transition:     transform .22s ease;
}
.afb-size-sm .afb-icon { width: var(--afb-icon-sm); height: var(--afb-icon-sm); }
.afb-size-lg .afb-icon { width: var(--afb-icon-lg); height: var(--afb-icon-lg); }
.afb-btn:hover .afb-icon { transform: scale(1.1); }

/* =============================================================================
   WHATSAPP PULSE
   Lives on .afb-btn (inner element) — entrance lives on .afb-btn-wrap (outer).
   Separate elements = zero animation conflict.
   ============================================================================= */
.afb-btn.afb-pulse {
    animation: afb-pulse-ring 2.8s ease-out infinite;
}

@keyframes afb-pulse-ring {
    0%   { box-shadow: var(--afb-shadow), 0 0 0 0  rgba(37,211,102,.60); }
    65%  { box-shadow: var(--afb-shadow), 0 0 0 15px rgba(37,211,102,0); }
    100% { box-shadow: var(--afb-shadow), 0 0 0 0  rgba(37,211,102,0); }
}

.afb-btn.afb-pulse:hover {
    animation: none;
    box-shadow: var(--afb-shadow-hover);
}

/* =============================================================================
   TOOLTIP
   ============================================================================= */
.afb-tooltip {
    position:        absolute;
    right:           calc(100% + 12px);
    top:             50%;
    transform:       translateY(-50%) scale(.92);
    background:      var(--afb-tooltip-bg);
    color:           var(--afb-tooltip-txt);
    font-family:     system-ui, -apple-system, sans-serif;
    font-size:       12px;
    font-weight:     600;
    line-height:     1;
    white-space:     nowrap;
    padding:         7px 12px;
    border-radius:   8px;
    pointer-events:  none;
    opacity:         0;
    transition:      opacity .18s ease, transform .18s ease;
    user-select:     none;
    letter-spacing:  .01em;
}

.afb-tooltip::after {
    content:  '';
    position: absolute;
    left:     100%;
    top:      50%;
    transform: translateY(-50%);
    border:   6px solid transparent;
    border-left-color: var(--afb-tooltip-bg);
}

/* Left position — tooltip on right */
.afb-pos-left .afb-tooltip { right: auto; left: calc(100% + 12px); }
.afb-pos-left .afb-tooltip::after {
    left: auto; right: 100%;
    border-left-color: transparent;
    border-right-color: var(--afb-tooltip-bg);
}

/* Bottom — tooltip above */
.afb-pos-bottom .afb-tooltip {
    right:     auto;
    top:       auto;
    bottom:    calc(100% + 10px);
    left:      50%;
    transform: translateX(-50%) scale(.92);
}
.afb-pos-bottom .afb-tooltip::after {
    left: 50%; top: 100%; right: auto;
    transform: translateX(-50%);
    border-left-color:   transparent;
    border-top-color:    var(--afb-tooltip-bg);
    border-bottom-color: transparent;
}
.afb-pos-bottom .afb-btn:hover .afb-tooltip,
.afb-pos-bottom .afb-btn:focus-visible .afb-tooltip { transform: translateX(-50%) scale(1); }

/* Edge right — tooltip on left */
.afb-pos-edge-right .afb-tooltip {
    right: calc(100% + 10px);
    top:   50%;
    transform: translateY(-50%) scale(.92);
}
/* Edge left — tooltip on right */
.afb-pos-edge-left .afb-tooltip {
    right: auto;
    left:  calc(100% + 10px);
    top:   50%;
    transform: translateY(-50%) scale(.92);
}
.afb-pos-edge-left .afb-tooltip::after {
    left: auto; right: 100%;
    border-left-color:  transparent;
    border-right-color: var(--afb-tooltip-bg);
}

.afb-btn:hover .afb-tooltip,
.afb-btn:focus-visible .afb-tooltip {
    opacity:   1;
    transform: translateY(-50%) scale(1);
}

/* =============================================================================
   DEVICE VISIBILITY
   ============================================================================= */
@media (max-width: 768px)  { .afb-hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .afb-hide-desktop { display: none !important; } }

/* =============================================================================
   MOBILE APP BOTTOM BAR
   Two trigger cases:
   1. .afb-pos-bottom on any screen ≤768 → app bar style
   2. .afb-mobile-bottom on any position ≤768 → app bar style (desktop position unchanged)
   ============================================================================= */
@media (max-width: 768px) {
    .afb-pos-bottom,
    .afb-mobile-bottom {
        /* Reset any floating positioning */
        top:       auto !important;
        left:      0    !important;
        right:     0    !important;
        bottom:    0    !important;
        transform: none !important;
        width:     100% !important;
        max-width: 100% !important;

        /* App bar surface */
        background:       var(--afb-surface-bg);
        backdrop-filter:  saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top:       1px solid var(--afb-surface-bdr);
        box-shadow:       var(--afb-surface-shadow-b);

        /* Safe area for iPhone home indicator */
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));

        /* Layout */
        flex-direction:  row;
        justify-content: space-around;
        align-items:     center;
        gap:             0;
        border-radius:   0;
        pointer-events:  all;
        transition:      background .25s ease;
    }

    /* Button wrappers: stretch to fill equal slots */
    .afb-pos-bottom .afb-btn-wrap,
    .afb-mobile-bottom .afb-btn-wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        pointer-events: all;
    }

    /* Reset entrance animation direction for bottom bar mode */
    .afb-mobile-bottom.afb-animate .afb-btn-wrap {
        transform: translateY(20px);
    }

    /* Each button = an app tab */
    .afb-pos-bottom .afb-btn,
    .afb-mobile-bottom .afb-btn {
        flex-direction: column;
        gap:            2px;
        width:          auto !important;
        height:         auto !important;
        min-width:      44px;
        padding:        7px 6px 5px;
        background:     transparent !important;
        box-shadow:     none !important;
        border-radius:  12px !important;
        color:          var(--afb-btn-color);
        transition:     transform .15s ease, background .15s ease;
    }

    /* Show label below icon */
    .afb-pos-bottom .afb-btn .afb-btn-label,
    .afb-mobile-bottom .afb-btn .afb-btn-label {
        display:        block;
        font-family:    system-ui, -apple-system, sans-serif;
        font-size:      10px;
        font-weight:    600;
        color:          var(--afb-btn-color);
        white-space:    nowrap;
        overflow:       hidden;
        text-overflow:  ellipsis;
        max-width:      60px;
        line-height:    1.2;
        opacity:        .80;
    }

    .afb-pos-bottom .afb-btn .afb-icon,
    .afb-mobile-bottom .afb-btn .afb-icon {
        width:  22px !important;
        height: 22px !important;
        color:  var(--afb-btn-color);
    }

    .afb-pos-bottom .afb-btn:active,
    .afb-mobile-bottom .afb-btn:active {
        background: var(--afb-surface-hover) !important;
        transform:  scale(.90);
        box-shadow: none !important;
        filter:     none;
    }

    /* Pulse in tab bar: opacity breathe instead of shadow ring */
    .afb-pos-bottom .afb-btn.afb-pulse,
    .afb-mobile-bottom .afb-btn.afb-pulse {
        animation: afb-pulse-opacity 2.4s ease-in-out infinite;
    }
    @keyframes afb-pulse-opacity {
        0%, 100% { opacity: 1; }
        50%       { opacity: .55; }
    }

    /* Hide tooltips — label already visible */
    .afb-pos-bottom .afb-tooltip,
    .afb-mobile-bottom .afb-tooltip { display: none; }
}

/* =============================================================================
   MOBILE — other floating positions (not bottom bar)
   ============================================================================= */
@media (max-width: 768px) {
    /* Tighten side gap */
    .afb-pos-right { right: 14px; }
    .afb-pos-left  { left:  14px; }

    /* No hover tooltips on touch */
    .afb-no-tooltip .afb-tooltip { display: none !important; }

    /* Slightly narrower edge panels */
    .afb-pos-edge-right .afb-btn,
    .afb-pos-edge-left  .afb-btn { width: 46px !important; height: 46px !important; }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .afb-btn,
    .afb-btn-wrap,
    .afb-icon,
    .afb-tooltip {
        transition: none;
        animation:  none !important;
    }
    .afb-animate .afb-btn-wrap {
        opacity:   1 !important;
        transform: none !important;
        animation: none !important;
    }
}