/* ========================================================================
   Partner IT - Premium 3D Glass Support Hub V5
   File: public_html/assets/floating_support.css
   FULL REPLACE
   ======================================================================== */

:root{
    --psh-right:20px;
    --psh-bottom:20px;
    --psh-red:#AE2624;
    --psh-red2:#E52B29;
    --psh-dark:#181A1E;
    --psh-dark2:#292D33;
    --psh-line:rgba(255,255,255,.12);
    --psh-text:#F7F8F9;
    --psh-muted:#B9C0C8;
    --psh-card-width:318px;
    --psh-z:100120;
    --psh-panel-z:100100;
    --psh-ease:cubic-bezier(.2,.82,.22,1);
}

#partnerSupportHub,
#partnerSupportHub *{
    box-sizing:border-box;
}

#partnerSupportHub{
    position:fixed;
    right:var(--psh-right);
    bottom:var(--psh-bottom);
    z-index:var(--psh-z);
    width:var(--psh-card-width);
    height:auto;
    font-family:"Segoe UI",Arial,sans-serif;
    pointer-events:none;
    perspective:1200px;
    transition:opacity .2s ease, transform .25s var(--psh-ease), visibility .2s ease;
}

.psh-trigger{
    position:relative;
    float:right;
    min-width:190px;
    height:64px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 17px 0 8px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    background:
        linear-gradient(135deg,#353941 0%,#1B1E23 58%,#74211F 100%);
    color:#fff;
    box-shadow:
        0 18px 44px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.12);
    cursor:pointer;
    pointer-events:auto;
    outline:none;
    isolation:isolate;
    transform:translateZ(0);
    transition:transform .25s var(--psh-ease), box-shadow .25s ease, filter .25s ease;
    -webkit-tap-highlight-color:transparent;
}

.psh-trigger::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 36%,rgba(229,43,41,.09));
    pointer-events:none;
    z-index:-1;
}

.psh-trigger:hover,
.psh-trigger:focus-visible,
#partnerSupportHub.is-open .psh-trigger{
    transform:translateY(-3px) rotateX(4deg);
    box-shadow:
        0 23px 52px rgba(0,0,0,.38),
        0 0 28px rgba(174,38,36,.15),
        inset 0 1px 0 rgba(255,255,255,.15);
    filter:saturate(1.05);
}

.psh-trigger-orb{
    position:relative;
    width:49px;
    height:49px;
    flex:0 0 49px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#FF766D 0%,var(--psh-red2) 38%,#8D2422 68%,#541715 100%);
    box-shadow:
        0 0 0 3px rgba(229,43,41,.15),
        0 0 24px rgba(229,43,41,.36),
        inset 0 2px 3px rgba(255,255,255,.22);
}

.psh-trigger-ring{
    position:absolute;
    inset:6px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:50%;
    animation:pshSpin 6s linear infinite;
}

.psh-trigger-ring::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    right:1px;
    top:4px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 8px #fff;
}

.psh-trigger-face{
    width:17px;
    height:8px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 0 13px rgba(255,255,255,.95);
}

.psh-trigger-copy{
    min-width:0;
    display:grid;
    text-align:left;
    line-height:1.05;
}

.psh-trigger-copy b{
    font-size:13px;
    font-weight:850;
    letter-spacing:.1px;
}

.psh-trigger-copy small{
    margin-top:4px;
    color:#D0D5DA;
    font-size:9px;
    font-weight:650;
    white-space:nowrap;
}

.psh-trigger-badge{
    position:absolute;
    right:-3px;
    top:-5px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:999px;
    background:#FFCB35;
    color:#202225;
    font-size:9px;
    font-weight:900;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.psh-card{
    position:absolute;
    right:0;
    bottom:76px;
    width:var(--psh-card-width);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px;
    background:
        linear-gradient(145deg,rgba(42,46,53,.97),rgba(22,24,29,.98) 72%,rgba(63,24,23,.96));
    color:var(--psh-text);
    box-shadow:
        0 28px 72px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform-origin:85% 100%;
    transform:translateY(16px) scale(.94) rotateX(-10deg) rotateY(3deg);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .3s var(--psh-ease);
}

#partnerSupportHub.is-open .psh-card{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1) rotateX(0) rotateY(0);
}

.psh-card-glow{
    position:absolute;
    right:-74px;
    top:-92px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(229,43,41,.30) 0%,rgba(229,43,41,.08) 48%,transparent 72%);
    filter:blur(8px);
    pointer-events:none;
}

.psh-head{
    position:relative;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 34px;
    gap:10px;
    align-items:center;
    padding:14px 14px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.psh-head-orb{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(145deg,#F0443E,#8D2422);
    box-shadow:0 10px 22px rgba(174,38,36,.24),inset 0 1px 0 rgba(255,255,255,.2);
}

.psh-head-orb span{
    width:17px;
    height:8px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 0 12px rgba(255,255,255,.85);
}

.psh-head-copy{
    min-width:0;
    display:grid;
}

.psh-head-copy strong{
    font-size:13px;
    font-weight:850;
}

.psh-head-copy small{
    margin-top:4px;
    color:#BFC6CD;
    font-size:9.5px;
    line-height:1.25;
}

.psh-close{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:#DDE1E5;
    font-size:19px;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease;
}

.psh-close:hover,
.psh-close:focus-visible{
    background:rgba(255,255,255,.11);
    transform:rotate(5deg) scale(1.04);
    outline:none;
}

.psh-options{
    display:grid;
    gap:8px;
    padding:11px;
}

.psh-option{
    position:relative;
    width:100%;
    min-height:66px;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:8px 11px 8px 8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-decoration:none;
    text-align:left;
    font:inherit;
    cursor:pointer;
    overflow:hidden;
    outline:none;
    transform:translateZ(0);
    transition:
        transform .22s var(--psh-ease),
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
    -webkit-tap-highlight-color:transparent;
}

.psh-option::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:linear-gradient(100deg,rgba(255,255,255,.08),transparent 40%,rgba(255,255,255,.025));
    transition:opacity .2s ease;
    pointer-events:none;
}

.psh-option:hover,
.psh-option:focus-visible{
    transform:translateX(-5px) translateY(-1px) scale(1.025) rotateY(-2deg);
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.15);
    box-shadow:0 12px 26px rgba(0,0,0,.20);
}

.psh-option:hover::before,
.psh-option:focus-visible::before{
    opacity:1;
}

.psh-option-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 9px 19px rgba(0,0,0,.18);
    transition:transform .24s var(--psh-ease), box-shadow .24s ease;
}

.psh-option:hover .psh-option-icon,
.psh-option:focus-visible .psh-option-icon{
    transform:scale(1.12) rotate(-4deg) translateZ(12px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 13px 25px rgba(0,0,0,.25);
}

.psh-option--pitra .psh-option-icon{
    background:radial-gradient(circle at 32% 28%,#FF7169 0%,#E52B29 42%,#7D211E 100%);
}

.psh-option--live .psh-option-icon{
    background:linear-gradient(145deg,#E24A45,#972522);
}

.psh-option--whatsapp .psh-option-icon{
    background:linear-gradient(145deg,#35DB72,#159447);
}

.psh-option-copy{
    min-width:0;
    display:grid;
}

.psh-option-copy b{
    font-size:12px;
    font-weight:850;
    letter-spacing:.1px;
}

.psh-option-copy small{
    margin-top:4px;
    color:#B9C1C9;
    font-size:9px;
    line-height:1.25;
}

.psh-arrow{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    color:#BFC5CB;
    font-size:24px;
    line-height:1;
    transition:transform .2s ease,color .2s ease;
}

.psh-option:hover .psh-arrow,
.psh-option:focus-visible .psh-arrow{
    transform:translateX(3px);
    color:#fff;
}

.psh-unread{
    position:absolute;
    right:33px;
    top:7px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border:2px solid #2A2D32;
    border-radius:999px;
    background:#FFCB35;
    color:#202225;
    font-size:8px;
    font-weight:900;
}

.psh-foot{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px 12px;
    color:#9EA7B0;
    font-size:8.5px;
    font-weight:650;
}

.psh-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#35CE79;
    box-shadow:0 0 9px rgba(53,206,121,.75);
}

/* ------------------------------------------------------------------------
   Hide legacy launch buttons. They remain in DOM so the new hub can trigger
   the existing Live Chat and PITRA JavaScript without changing those modules.
   ------------------------------------------------------------------------ */
#pcChatLauncher,
.pcv2-launcher,
#p4Launch,
.p4-launch,
.wa-float{
    position:fixed !important;
    right:-9999px !important;
    bottom:-9999px !important;
    left:auto !important;
    top:auto !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* PITRA old welcome bubble is intentionally hidden: the unified Support Hub
   is now the single clean website entry point. */
#p4Welcome,
.p4-welcome{
    display:none !important;
}

/* ------------------------------------------------------------------------
   Chat panels. When either panel opens, the Support Hub disappears completely
   so it can never cover the message composer / Send / Remove controls.
   ------------------------------------------------------------------------ */
body.psh-tool-open #partnerSupportHub{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px) scale(.96);
}

#pcv2Panel,
.pcv2-panel{
    right:20px !important;
    bottom:20px !important;
    z-index:var(--psh-panel-z) !important;
    max-height:calc(100vh - 40px) !important;
}

#p4Panel,
.p4-panel{
    right:20px !important;
    bottom:20px !important;
    z-index:calc(var(--psh-panel-z) + 5) !important;
    max-height:calc(100vh - 40px) !important;
}

@keyframes pshSpin{
    to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion:reduce){
    #partnerSupportHub *,
    #partnerSupportHub *::before,
    #partnerSupportHub *::after{
        animation:none !important;
        transition-duration:.01ms !important;
    }
}

@media (max-width:620px){
    :root{
        --psh-right:10px;
        --psh-bottom:12px;
        --psh-card-width:min(318px,calc(100vw - 20px));
    }

    #partnerSupportHub{
        width:var(--psh-card-width);
    }

    .psh-trigger{
        min-width:62px;
        width:62px;
        height:62px;
        padding:0;
        justify-content:center;
    }

    .psh-trigger-copy{
        display:none;
    }

    .psh-trigger-orb{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .psh-card{
        right:0;
        bottom:72px;
        border-radius:19px;
        transform-origin:92% 100%;
    }

    .psh-head{
        padding:12px;
    }

    .psh-option{
        min-height:64px;
    }

    .psh-option:hover,
    .psh-option:focus-visible{
        transform:translateY(-1px) scale(1.01);
    }

    #pcv2Panel,
    .pcv2-panel{
        right:7px !important;
        bottom:7px !important;
        width:calc(100vw - 14px) !important;
        height:calc(100dvh - 14px) !important;
        max-height:calc(100dvh - 14px) !important;
        border-radius:16px !important;
    }

    #p4Panel,
    .p4-panel{
        right:7px !important;
        bottom:7px !important;
        width:calc(100vw - 14px) !important;
        height:calc(100dvh - 14px) !important;
        max-height:calc(100dvh - 14px) !important;
        border-radius:16px !important;
    }
}

@media (max-width:370px){
    .psh-option-copy small{
        font-size:8.5px;
    }

    .psh-head-copy small{
        font-size:9px;
    }
}