.contact-widget{
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    font-family: sans-serif;
}

/* ปุ่มแท็บ */
.contact-tab{
    background: linear-gradient(130deg, var(--main) 0%, var(--sub) 40%, var(--sub) 60%, var(--main) 100%);
    color: #fff;

    padding: 14px 6px;

    writing-mode: vertical-lr;
    text-orientation: mixed;

    cursor: pointer;

    border-radius: 8px 0 0 8px;

    font-weight: 600;
    font-size: 14px;

    box-shadow: 0 0 8px rgba(0,0,0,.12);
    transition: .25s;
}

.contact-tab:hover{
    background: #0084ff;
}

.contact-tab i{
    transform: rotate(90deg);
    margin-bottom: 8px;
}

/* กล่อง */
.contact-box{

    width: 68px;

    background-color: rgba(
        255,255,255,1    ) !important;

    backdrop-filter: blur(10px);

    border-radius: 10px 0 0 10px;

    padding: 8px 6px;

    box-shadow: 0 0 14px rgba(0,0,0,.12);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    animation: slideIn .25s ease;
}

/* item */
.contact-item{

    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-decoration: none;

    padding: 6px 3px;

    border-radius: 8px;

    transition: .2s;
}

/* hover */
.contact-item:hover{
    background: #0084ff;
    transform: translateY(-1px);
}

/* icon */
.contact-item img{
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

/* text */
.contact-item span{
    font-size: 9px;
    color: #212121;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
}

/* animation เปิด */
@keyframes slideIn{
    from{
        transform: translateX(20px);
        opacity: 0;
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}

/* animation ปิด */
@keyframes slideOut{
    from{
        transform: translateX(0);
        opacity: 1;
    }
    to{
        transform: translateX(20px);
        opacity: 0;
    }
}

/* ตอนเปิด */
.contact-box.show{
    display: flex !important;
    animation: slideIn .25s ease forwards;
}

/* ตอนปิด */
.contact-box.hide{
    animation: slideOut .25s ease forwards;
}

/* mobile */
@media(max-width:768px){

    .contact-box{
        width: 62px;
    }

    .contact-item img{
        width: 22px;
        height: 22px;
    }

    .contact-item span{
        font-size: 8px;
    }

    .contact-tab{
        font-size: 12px;
        padding: 12px 5px;
    }

}

/* contact slide */
.contact-widget{
    transition: transform .25s ease, opacity .25s ease;
}

/* ซ่อน */
.contact-widget.hide-scroll{
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* แสดง */
.contact-widget.show-scroll{
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

/* รูปแบบปุ่มวงกลม: รายการช่องทางติดต่อเปิดขึ้นด้านบน */
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top){
    right:18px;
    top:auto;
    bottom:20px;
    width:60px;
    transform:none;
}
.contact-widget.contact-style-circle .contact-tab{
    display:flex;
    position:relative;
    isolation:isolate;
    width:60px;
    height:60px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:5px solid color-mix(in srgb,var(--bg_main) 88%,transparent);
    border-radius:50%;
    background:linear-gradient(145deg,color-mix(in srgb,var(--main) 88%,#fff),color-mix(in srgb,var(--sub) 78%,#111));
    color:#fff;
    font-size:0;
    writing-mode:horizontal-tb;
    box-shadow:0 12px 30px color-mix(in srgb,var(--main) 32%,rgba(0,0,0,.28)),inset 0 1px rgba(255,255,255,.3);
    transition:transform .2s ease,box-shadow .2s ease;
}
.contact-widget.contact-style-circle .contact-tab::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-8px;
    border:1px solid color-mix(in srgb,var(--main) 42%,transparent);
    border-radius:inherit;
    opacity:.75;
}
.contact-widget.contact-style-circle .contact-tab::after{
    content:"";
    position:absolute;
    right:-1px;
    bottom:1px;
    width:12px;
    height:12px;
    border:3px solid var(--bg_main);
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 9px rgba(34,197,94,.7);
}
.contact-widget.contact-style-circle .contact-tab:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 17px 34px color-mix(in srgb,var(--main) 40%,rgba(0,0,0,.3)),inset 0 1px rgba(255,255,255,.35);
}
.contact-widget.contact-style-circle .contact-tab i{
    display:block;
    margin:0!important;
    line-height:1!important;
    transform:none;
    font-size:21px;
}
.contact-widget.contact-style-circle .contact-box{
    position:absolute;
    right:0;
    bottom:64px;
    width:72px;
    border:1px solid color-mix(in srgb,var(--main) 22%,var(--bg_border));
    border-radius:18px;
    transform-origin:bottom center;
}
.contact-widget.contact-style-circle .contact-box.show{animation:contactRise .24s ease-out forwards}
.contact-widget.contact-style-circle .contact-box.hide{animation:contactDrop .2s ease-in forwards}
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top).hide-scroll,
.contact-widget:is(.contact-style-circle,.contact-style-scroll-top).show-scroll{transform:none;opacity:1;pointer-events:auto}
.contact-scroll-top{
    display:none;
    width:44px;
    height:44px;
    margin:0 auto 9px;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--main) 38%,var(--bg_border));
    border-radius:50%;
    background:color-mix(in srgb,var(--bg_main) 92%,transparent);
    color:var(--main);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:.2s ease;
}
.contact-style-scroll-top .contact-scroll-top{display:grid;margin:0}
.contact-style-scroll-top .contact-scroll-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@keyframes contactRise{from{transform:translateY(14px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes contactDrop{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(12px) scale(.95);opacity:0}}
@media(max-width:768px){
    body:not([data-wallet-style="0"]) .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){right:12px;bottom:calc(88px + env(safe-area-inset-bottom))}
    body[data-wallet-style="0"] .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){right:12px;bottom:18px}
    .contact-widget:is(.contact-style-circle,.contact-style-scroll-top){width:50px}
    .contact-widget.contact-style-circle .contact-tab{width:50px;height:50px;border-width:4px}
    .contact-widget.contact-style-circle .contact-tab i{font-size:18px!important}
    .contact-widget.contact-style-circle .contact-box{right:0;bottom:60px;width:64px;padding:7px 5px}
    .contact-widget.contact-style-circle .contact-item img{width:19px;height:19px}
    .contact-widget.contact-style-circle .contact-item span{font-size:7px}
    .contact-style-scroll-top .contact-scroll-top{width:38px;height:38px;font-size:12px}
}

/* Contact panel V2: shared card for both side-tab and circular launcher. */
.contact-widget .contact-box{position:relative;width:248px;padding:14px;align-items:stretch;gap:7px;overflow:hidden;border:1px solid color-mix(in srgb,var(--main) 22%,var(--bg_border));border-radius:18px 0 0 18px;background:color-mix(in srgb,var(--bg_main) 91%,transparent)!important;box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(18px) saturate(1.15)}
.contact-box-head{display:flex;align-items:center;gap:10px;padding:2px 34px 10px 2px;border-bottom:1px solid color-mix(in srgb,var(--main) 16%,var(--bg_border));text-align:left}
.contact-box-head>span{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:12px;background:linear-gradient(145deg,var(--main),var(--sub));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--main) 24%,transparent)}
.contact-box-head strong,.contact-box-head small{display:block}.contact-box-head strong{color:var(--font_main);font-size:12px;font-weight:700}.contact-box-head small{margin-top:2px;color:var(--font_sub);font-size:9px}
.contact-widget .contact-item{min-height:48px;flex-direction:row;justify-content:flex-start;gap:10px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--main) 9%,var(--bg_border));border-radius:12px;background:color-mix(in srgb,var(--bg_sub) 72%,transparent)}
.contact-widget .contact-item:hover{border-color:color-mix(in srgb,var(--main) 45%,var(--bg_border));background:color-mix(in srgb,var(--main) 13%,var(--bg_sub));transform:translateX(-3px)}
.contact-widget .contact-item img{width:32px;height:32px;flex:0 0 32px;margin:0;border-radius:9px;object-fit:cover}
.contact-widget .contact-item span{color:var(--font_main);font-size:11px;font-weight:700;text-align:left}
.contact-close{position:absolute;z-index:2;top:13px;right:13px;display:grid;width:28px;height:28px;padding:0;border:1px solid color-mix(in srgb,var(--font_main) 10%,var(--bg_border));border-radius:9px;background:color-mix(in srgb,var(--bg_sub) 76%,transparent);color:var(--font_sub);place-items:center;transition:.18s ease}
.contact-close:hover{border-color:color-mix(in srgb,var(--main) 45%,var(--bg_border));color:var(--main);transform:rotate(6deg)}
.contact-widget.contact-style-side .contact-tab{display:flex;width:38px;min-height:105px;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:8px 4px;border:1px solid color-mix(in srgb,var(--main) 38%,transparent);border-right:0;border-radius:13px 0 0 13px;background:linear-gradient(165deg,color-mix(in srgb,var(--main) 92%,#fff),color-mix(in srgb,var(--sub) 88%,#111));box-shadow:0 9px 23px rgba(0,0,0,.18);writing-mode:horizontal-tb}
.contact-widget.contact-style-side .contact-tab i{margin:0!important;transform:none;font-size:15px}
.contact-widget.contact-style-side .contact-tab-label{display:block;font-size:8px;font-weight:700;line-height:1;letter-spacing:.08em;writing-mode:vertical-rl;text-orientation:upright;transform:none}
.contact-widget.contact-style-side .contact-box{width:220px;padding:11px;gap:6px}
.contact-widget.contact-style-side .contact-box-head{gap:8px;padding:1px 31px 8px 1px}.contact-widget.contact-style-side .contact-box-head>span{width:34px;height:34px;flex-basis:34px;border-radius:10px}.contact-widget.contact-style-side .contact-box-head strong{font-size:11px}.contact-widget.contact-style-side .contact-box-head small{font-size:8px}
.contact-widget.contact-style-side .contact-item{min-height:43px;padding:6px 8px}.contact-widget.contact-style-side .contact-item img{width:28px;height:28px;flex-basis:28px}.contact-widget.contact-style-side .contact-item span{font-size:10px}
.contact-widget.contact-style-circle .contact-box{right:0;bottom:74px;width:248px;padding:14px;border-radius:18px}
@media(max-width:768px){
    .contact-widget .contact-box,.contact-widget.contact-style-circle .contact-box{width:min(260px,calc(100vw - 20px));padding:12px}
    .contact-widget.contact-style-side .contact-tab{width:34px;min-height:94px;padding:7px 3px;border-radius:11px 0 0 11px}
    .contact-widget.contact-style-side .contact-tab i{font-size:13px}
    .contact-widget.contact-style-side .contact-tab-label{font-size:7px}
    .contact-widget.contact-style-side .contact-box{width:min(210px,calc(100vw - 16px));padding:10px}
    .contact-widget .contact-item img{width:30px;height:30px}
    .contact-widget .contact-item span{font-size:10px}
    .contact-widget.contact-style-circle .contact-box{right:0;bottom:62px}
}