#dxf-root, #dxf-root *, #dxf-root *::before, #dxf-root *::after { box-sizing: border-box; }
#dxf-root{
    font-family:'Inter',-apple-system,system-ui,sans-serif;
    --dxf-safe-b: env(safe-area-inset-bottom, 0px);
    --dxf-safe-l: env(safe-area-inset-left, 0px);
}

/* ── Trigger — DESKTOP: left edge, vertically centered, vertical text ── */
#dxf-trigger{
    position:fixed;
    left:0; top:50%;
    transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl; text-orientation:mixed;
    z-index:99998;cursor:pointer;
    background:#111;color:#fff;
    padding:18px 10px;
    border-radius:0 10px 10px 0;
    border:none; outline:none;
    border-right:1px solid #232323;
    border-top:1px solid #232323;
    border-bottom:1px solid #232323;
    display:flex;align-items:center;gap:10px;
    box-shadow:4px 0 22px rgba(0,0,0,.4);
    transition:background .2s, box-shadow .2s, transform .2s;
    user-select:none;
}
#dxf-trigger:hover{background:#171717;box-shadow:5px 0 28px rgba(0,0,0,.5);}
#dxf-trigger:focus-visible{outline:2px solid #E8430A;outline-offset:2px;}

.dxft-icon{
    width:22px;height:22px;flex-shrink:0;
    transform:rotate(180deg); /* counter-rotate so the icon stays upright */
    display:flex;align-items:center;justify-content:center;
    color:#E8430A;
}
.dxft-icon svg{width:100%;height:100%;}
.dxft-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;transform:rotate(180deg);animation:dxfp 2.2s ease infinite;}
@keyframes dxfp{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}50%{box-shadow:0 0 0 5px rgba(74,222,128,0);}}
.dxft-label{font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.92);white-space:nowrap;}

/* ── Overlay ── */
#dxf-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.55);z-index:99999;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;transition:opacity .2s ease;
}
#dxf-overlay.dxf-show{opacity:1;}

/* ── Popup — opens from the left edge on desktop ── */
#dxf-popup{
    display:none;position:fixed;
    left:56px;top:50%;
    transform:translateY(-50%) scale(.95);
    z-index:100000;
    background:#111;
    border:1px solid #232323;
    border-radius:16px;
    width:min(320px, calc(100vw - 76px));
    overflow:hidden;
    opacity:0;
    transform-origin:left center;
    box-shadow:0 30px 70px rgba(0,0,0,.55);
    transition:transform .24s cubic-bezier(.34,1.15,.64,1), opacity .2s ease;
}
#dxf-popup.dxf-open{opacity:1;transform:translateY(-50%) scale(1);}

/* Header — transparent white-wordmark logo, straight on the dark header */
.dxf-head{
    padding:18px 18px 15px;
    border-bottom:1px solid #1c1c1c;
    display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.dxf-head-main{min-width:0;}
.dxf-logo-wrap{
    display:inline-flex;align-items:center;
    margin-bottom:10px;
}
.dxf-logo-wrap img{height:26px;width:auto;display:block;}
.dxf-reply-time{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;color:rgba(255,255,255,.5);
}
.dxf-reply-time .dxft-dot2{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:dxfp 2.2s ease infinite;}
#dxf-close{
    all:unset;flex-shrink:0;
    width:26px;height:26px;border-radius:7px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.4);transition:background .15s,color .15s;
}
#dxf-close:hover{background:rgba(255,255,255,.1);color:#fff;}

.dxf-primary-wrap{padding:14px 16px 10px;}
.dxf-btn-primary{
    display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
    padding:13px 16px;border-radius:10px;
    background:#E8430A;color:#fff;
    font-size:13.5px;font-weight:700;letter-spacing:-.01em;
    text-decoration:none;border:none;cursor:pointer;font-family:inherit;
    box-shadow:0 4px 18px rgba(232,67,10,.4), inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .18s cubic-bezier(.34,1.15,.64,1), box-shadow .2s, background .2s;
}
.dxf-btn-primary:hover{transform:translateY(-1px);background:#C23508;box-shadow:0 6px 22px rgba(232,67,10,.5), inset 0 1px 0 rgba(255,255,255,.18);}
.dxf-btn-primary:active{transform:translateY(0);}

.dxf-quickrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px;}
.dxf-qbtn{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:11px 6px 10px;border-radius:10px;
    background:#181818;border:1px solid #232323;
    text-decoration:none;cursor:pointer;
    transition:background .16s,border-color .16s,transform .18s cubic-bezier(.34,1.15,.64,1);
}
.dxf-qbtn:hover{transform:translateY(-2px);border-color:#333;background:#1d1d1d;}
.dxf-qbtn-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dxf-qbtn-audit .dxf-qbtn-ico{background:rgba(232,67,10,.14);}
.dxf-qbtn-wa .dxf-qbtn-ico{background:rgba(37,211,102,.13);}
.dxf-qbtn-email .dxf-qbtn-ico{background:rgba(255,255,255,.07);}
.dxf-qbtn-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.55);text-align:center;line-height:1.2;white-space:nowrap;}
.dxf-qbtn:hover .dxf-qbtn-label{color:rgba(255,255,255,.85);}

.dxf-note{padding:0 16px 15px;font-size:9.5px;color:rgba(255,255,255,.22);text-align:center;letter-spacing:.05em;text-transform:uppercase;border-top:1px solid #1a1a1a;padding-top:12px;margin:0 16px;}

/* ── Mobile — bottom pill, horizontal, unchanged ── */
@media(max-width:640px){
    #dxf-trigger{
        left:calc(20px + var(--dxf-safe-l)); top:auto;
        bottom:calc(20px + var(--dxf-safe-b));
        transform:none;
        writing-mode:horizontal-tb; text-orientation:initial;
        border-radius:100px; padding:13px 18px 13px 14px;
        border:1px solid #232323;
        box-shadow:0 6px 24px rgba(0,0,0,.35);
    }
    #dxf-trigger:hover{transform:translateY(-2px);}
    .dxft-icon{ transform:none; width:20px;height:20px; }
    .dxft-dot{ transform:none; margin-left:-2px; }

    #dxf-popup{
        left:8px;right:8px;bottom:8px;top:auto;
        width:auto;
        transform:translateY(16px) scale(.98);
        transform-origin:bottom center;
    }
    #dxf-popup.dxf-open{transform:translateY(0) scale(1);}
}
@media(max-width:340px){
    .dxf-quickrow{gap:6px;}
    .dxf-qbtn-label{font-size:9px;}
    .dxf-logo-wrap img{height:22px;}
}
@media(prefers-reduced-motion:reduce){#dxf-root *{animation:none!important;transition:none!important;}}