/* ──────────────────────────────────────────────────────────────────────────
   "Urechile" laterale: Simuleaza / Oferta de azi / Chat
   Design: info/urechi/magnetus-urechi-2.html + urechi-desktop.png
   Markup: resources/views/partials/urechi.blade.php

   Desktop: lipite de marginea din dreapta, la jumatatea ecranului.
   Telefon (sub 700px): ies din marginea de jos, in locul benzii gri
   "Simuleaza live" (care se si ascunde, acolo unde mai exista).
   ────────────────────────────────────────────────────────────────────────── */

.mgr-dock{
    position: fixed;
    right: 0;
    top: 300px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-family: 'Libertinus Sans', sans-serif;
}
.mgr-dock *{ box-sizing: border-box; }

.mgr-tab{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 16px 0 8px;
    border: 1px solid #e2e3e7;
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: #fff;
    color: #1c1c1f;
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(20,20,30,.06), 0 10px 24px -6px rgba(20,20,30,.22);
    transform: translateX(0);
    transition: transform .2s ease, box-shadow .2s ease, padding .2s ease;
}
/* linia rosie care apare la stanga, la hover */
.mgr-tab::before{
    content: "";
    position: absolute;
    left: -1px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background .2s ease;
}
.mgr-tab:hover, .mgr-tab:focus-visible{
    padding-right: 22px;
    box-shadow: 0 1px 2px rgba(20,20,30,.06), 0 16px 32px -8px rgba(20,20,30,.32);
    color: #1c1c1f;
    text-decoration: none;
    outline: none;
}
.mgr-tab:hover::before, .mgr-tab:focus-visible::before{ background: #c8102e; }

.mgr-ic{
    flex: none;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f3f3f4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55555b;
    transition: background .2s ease, color .2s ease;
}
.mgr-tab:hover .mgr-ic, .mgr-tab:focus-visible .mgr-ic{ background: #c8102e; color: #fff; }
.mgr-dot{ width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.mgr-hot .mgr-ic{ color: #c8102e; }
.mgr-hot.mgr-active .mgr-ic{ color: #fff; }

/* punctul verde "online" de pe Chat */
.mgr-online{
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1fa463;
    border: 2px solid #fff;
}

/* starea activa: butonul apasat devine negru, cu bulina rosie care pulseaza */
.mgr-active{ background: #111113; border-color: #111113; color: #fff; }
.mgr-active:hover, .mgr-active:focus-visible{ color: #fff; }
.mgr-active::before{ display: none; }
.mgr-active .mgr-ic{ background: #c8102e; color: #fff; }
.mgr-active .mgr-ic::after{
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 50%;
    border: 2px solid #c8102e;
    animation: mgrRipple 1.8s ease-out infinite;
}
.mgr-active:hover .mgr-ic, .mgr-active:focus-visible .mgr-ic{ background: #fff; color: #c8102e; }
.mgr-active .mgr-online{ border-color: #111113; }

@keyframes mgrRipple{ 0%{ transform: scale(1); opacity: .9 } 80%,100%{ transform: scale(1.7); opacity: 0 } }

/* ── telefon: urechile trec pe marginea de jos ── */
@media (max-width: 700px){
    /* acolo unde mai exista banda gri, o inlocuim */
    .live-simulate-bar{ display: none !important; }
    .wa-float{ bottom: 52px !important; }
    body{ padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

    .mgr-dock{
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
        padding: 0 10px;
        background: transparent;
        pointer-events: none;
    }
    .mgr-tab, .mgr-tab:hover, .mgr-tab:focus-visible{
        pointer-events: auto;
        flex: 1 1 0;
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        min-height: 0;
        height: calc(34px + env(safe-area-inset-bottom));
        padding: 0 6px env(safe-area-inset-bottom) 6px;
        border: 1px solid #e2e3e7;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        background: #fff;
        color: #3a3a40;
        font-size: 13px;
        transform: none;
        box-shadow: 0 -1px 2px rgba(0,0,0,.05), 0 -8px 20px -8px rgba(0,0,0,.30);
    }
    .mgr-tab::before{ display: none; }
    .mgr-ic, .mgr-tab:hover .mgr-ic, .mgr-tab:focus-visible .mgr-ic{
        width: 20px;
        height: 20px;
        background: #f3f3f4;
        color: #55555b;
    }
    .mgr-ic svg{ width: 12px; height: 12px; }
    .mgr-dot{ width: 7px; height: 7px; }
    .mgr-online{ width: 6px; height: 6px; right: -2px; bottom: -2px; }

    .mgr-active, .mgr-active:hover, .mgr-active:focus-visible{
        height: calc(37px + env(safe-area-inset-bottom));
        background: #111113;
        border-color: #111113;
        color: #fff;
        font-weight: 700;
    }
    .mgr-active .mgr-ic, .mgr-active:hover .mgr-ic, .mgr-active:focus-visible .mgr-ic{
        background: #c8102e;
        color: #fff;
    }
    .mgr-active .mgr-online{ border-color: #111113; }
    .mgr-hot:not(.mgr-active) .mgr-txt{ color: #c8102e; font-weight: 700; }
    .mgr-hot:not(.mgr-active) .mgr-ic{ color: #c8102e; }
}

@media (prefers-reduced-motion: reduce){
    .mgr-active .mgr-ic::after{ animation: none; }
    .mgr-tab{ transition: none; }
}