
.tsfb-wrap{
    position:fixed !important;
    right:0 !important;
    top:50% !important;
    z-index:999980 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    transform:translate(115%, calc(-50% - 170px)) !important;
    opacity:0 !important;
    transition:transform .35s ease, opacity .28s ease !important;
}
.tsfb-wrap.tsfb-visible{
    transform:translate(0, calc(-50% - 170px)) !important;
    opacity:1 !important;
}
.tsfb-button{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:9px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:9px 0 0 9px !important;
    text-decoration:none !important;
    box-shadow:0 4px 16px rgba(0,0,0,.18) !important;
    cursor:pointer !important;
    transition:filter .18s ease, transform .18s ease !important;
}
.tsfb-button svg{
    display:block !important;
    width:100% !important;
    height:100% !important;
}
.tsfb-button:hover{
    filter:brightness(.96) !important;
    transform:translateX(-2px) !important;
}
.tsfb-line{
    background:#06c755 !important;
    color:#fff !important;
}
.tsfb-instagram{
    background:#fff !important;
    color:#222 !important;
    border:1px solid #dedede !important;
}
@media(max-width:700px){
    .tsfb-wrap{
        gap:7px !important;
        transform:translate(115%, calc(-50% - 145px)) !important;
    }
    .tsfb-wrap.tsfb-visible{
        transform:translate(0, calc(-50% - 145px)) !important;
    }
    .tsfb-button{
        width:43px !important;
        height:43px !important;
        min-width:43px !important;
        min-height:43px !important;
        padding:8px !important;
        border-radius:8px 0 0 8px !important;
    }
}
@media(prefers-reduced-motion:reduce){
    .tsfb-wrap,.tsfb-button{transition:none !important;}
}


/* v1.0.2 PC hover tooltips */
@media (hover:hover) and (pointer:fine){
    .tsfb-button{
        position:relative !important;
        overflow:visible !important;
    }

    .tsfb-button::before{
        content:attr(data-tsfb-tooltip);
        position:absolute !important;
        top:50% !important;
        right:calc(100% + 12px) !important;
        transform:translate(8px,-50%) !important;
        white-space:nowrap !important;
        padding:7px 11px !important;
        border-radius:6px !important;
        background:#333 !important;
        color:#fff !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.35 !important;
        letter-spacing:0 !important;
        pointer-events:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        box-shadow:0 3px 12px rgba(0,0,0,.18) !important;
        transition:opacity .16s ease, transform .16s ease, visibility .16s ease !important;
    }

    .tsfb-button::after{
        content:"";
        position:absolute !important;
        top:50% !important;
        right:calc(100% + 5px) !important;
        transform:translateY(-50%) !important;
        border-width:6px 0 6px 7px !important;
        border-style:solid !important;
        border-color:transparent transparent transparent #333 !important;
        pointer-events:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        transition:opacity .16s ease, visibility .16s ease !important;
    }

    .tsfb-button:hover::before,
    .tsfb-button:focus-visible::before{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate(0,-50%) !important;
    }

    .tsfb-button:hover::after,
    .tsfb-button:focus-visible::after{
        opacity:1 !important;
        visibility:visible !important;
    }
}


/* v1.0.3 subtle icon animation */
@media (hover:hover) and (pointer:fine){
    .tsfb-button:hover svg,
    .tsfb-button:focus-visible svg{
        animation:tsfb-icon-pop .42s ease both !important;
    }
    .tsfb-line:hover svg,
    .tsfb-line:focus-visible svg{
        animation:tsfb-icon-bounce .46s ease both !important;
    }
}
@keyframes tsfb-icon-pop{
    0%{transform:scale(1);}
    45%{transform:scale(1.10);}
    72%{transform:scale(.98);}
    100%{transform:scale(1);}
}
@keyframes tsfb-icon-bounce{
    0%{transform:translateY(0) scale(1);}
    38%{transform:translateY(-3px) scale(1.08);}
    68%{transform:translateY(1px) scale(.99);}
    100%{transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
    .tsfb-button:hover svg,
    .tsfb-button:focus-visible svg{
        animation:none !important;
    }
}
