#paystaff-ai-chat{
    --pac-primary:#465fff;
    --pac-primary-dark:#3641f5;
    --pac-primary-soft:#eef1ff;
    --pac-gray-50:#f9fafb;
    --pac-gray-100:#f2f4f7;
    --pac-gray-200:#e4e7ec;
    --pac-gray-300:#d0d5dd;
    --pac-gray-400:#98a2b3;
    --pac-gray-500:#667085;
    --pac-gray-700:#344054;
    --pac-gray-900:#101828;
    --pac-success:#12b76a;
    --pac-error:#d92d20;
    --pac-error-bg:#fef3f2;
    --pac-ease:cubic-bezier(.4,0,.2,1);

    position:fixed;right:20px;bottom:24px;z-index:999999;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
#paystaff-ai-chat *{box-sizing:border-box}

/* ---------- Toggle button ---------- */
#paystaff-ai-chat-toggle{
    width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;position:relative;
    background:linear-gradient(135deg,var(--pac-primary),var(--pac-primary-dark));
    color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 24px rgba(70,95,255,.35),0 2px 6px rgba(16,24,40,.12);
    transition:transform .2s var(--pac-ease),box-shadow .2s var(--pac-ease);
}
#paystaff-ai-chat-toggle:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 32px rgba(70,95,255,.4),0 3px 8px rgba(16,24,40,.14)}
#paystaff-ai-chat-toggle:active{transform:translateY(0) scale(.97)}
#paystaff-ai-chat-toggle svg{width:26px;height:26px}

.paystaff-ai-chat__toggle-icon{
    position:absolute;display:flex;align-items:center;justify-content:center;
    width:100%;height:100%;
    transition:opacity .25s var(--pac-ease),transform .25s var(--pac-ease);
}
.paystaff-ai-chat__toggle-icon--close{opacity:0;transform:rotate(-90deg) scale(.5)}
#paystaff-ai-chat.is-open .paystaff-ai-chat__toggle-icon--chat{opacity:0;transform:rotate(90deg) scale(.5)}
#paystaff-ai-chat.is-open .paystaff-ai-chat__toggle-icon--close{opacity:1;transform:rotate(0) scale(1)}

/* Idle attention pulse — subtle, stops once opened at least once */
@keyframes pacPulseRing{
    0%{box-shadow:0 10px 24px rgba(70,95,255,.35),0 0 0 0 rgba(70,95,255,.35)}
    70%{box-shadow:0 10px 24px rgba(70,95,255,.35),0 0 0 12px rgba(70,95,255,0)}
    100%{box-shadow:0 10px 24px rgba(70,95,255,.35),0 0 0 0 rgba(70,95,255,0)}
}
#paystaff-ai-chat:not(.is-opened-once) #paystaff-ai-chat-toggle{animation:pacPulseRing 2.6s ease-out 1.2s 3}

/* ---------- Window ---------- */
.paystaff-ai-chat__window{
    position:absolute;right:0;bottom:76px;width:376px;max-width:calc(100vw - 40px);
    height:min(600px,calc(100vh - 140px));
    background:#fff;border-radius:20px;overflow:hidden;
    display:flex;flex-direction:column;
    box-shadow:0 24px 64px -12px rgba(16,24,40,.22),0 8px 24px -8px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.04);
    transform-origin:bottom right;
    opacity:0;pointer-events:none;
    transform:translateY(12px) scale(.35);
}
/* Explicit keyframe animations (JS-driven via .is-open / .is-closing) instead
   of a plain state-to-state transition — a transition can get silently
   skipped by the browser when the class toggle doesn't force a style
   recalculation in between, which made the close direction fragile/instant
   in some browsers. Keyframes always play once the class is applied. */
@keyframes pacWindowIn{
    from{opacity:0;transform:translateY(12px) scale(.35)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pacWindowOut{
    from{opacity:1;transform:translateY(0) scale(1)}
    to{opacity:0;transform:translateY(12px) scale(.35)}
}
#paystaff-ai-chat.is-open .paystaff-ai-chat__window{
    opacity:1;pointer-events:auto;transform:translateY(0) scale(1);
    animation:pacWindowIn .32s var(--pac-ease) both;
}
#paystaff-ai-chat.is-closing .paystaff-ai-chat__window{
    opacity:0;pointer-events:none;transform:translateY(12px) scale(.35);
    animation:pacWindowOut .28s var(--pac-ease) both;
}

/* ---------- Header ---------- */
.paystaff-ai-chat__header{
    background:linear-gradient(135deg,var(--pac-primary),var(--pac-primary-dark));
    color:#fff;padding:16px 14px 16px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.paystaff-ai-chat__header-avatar{
    width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;
    background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
}
.paystaff-ai-chat__header-avatar svg{width:18px;height:18px}
.paystaff-ai-chat__header-avatar img{width:100%;height:100%;object-fit:cover}
.paystaff-ai-chat__header-text{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}
.paystaff-ai-chat__header-title{font-weight:700;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paystaff-ai-chat__header-status{display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(255,255,255,.82);font-weight:500}
.paystaff-ai-chat__header-status i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 0 2px rgba(74,222,128,.25)}
.paystaff-ai-chat__header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

.paystaff-ai-chat__end{
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
    font-size:11.5px;font-weight:600;line-height:1;cursor:pointer;padding:7px 11px;border-radius:999px;
    transition:background .15s var(--pac-ease),border-color .15s var(--pac-ease);white-space:nowrap;
}
.paystaff-ai-chat__end:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}

.paystaff-ai-chat__close{
    background:transparent;border:0;color:#fff;cursor:pointer;padding:6px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;opacity:.85;
    transition:background .15s var(--pac-ease),opacity .15s var(--pac-ease);
}
.paystaff-ai-chat__close:hover{background:rgba(255,255,255,.16);opacity:1}
.paystaff-ai-chat__close svg{width:18px;height:18px}

/* ---------- Intake ---------- */
@keyframes pacFadeInUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.paystaff-ai-chat__intake{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;background:#fff;animation:pacFadeInUp .3s var(--pac-ease) both}
.paystaff-ai-chat__intake-intro{margin:0 0 16px;font-size:13.5px;color:var(--pac-gray-500);line-height:1.5}
.paystaff-ai-chat__intake-label{font-size:12px;font-weight:600;color:var(--pac-gray-700);margin-bottom:6px}
.paystaff-ai-chat__intake-label span{font-weight:400;color:var(--pac-gray-400)}
.paystaff-ai-chat__intake-field{
    border:1.5px solid var(--pac-gray-200);border-radius:10px;padding:10px 12px;font-size:13.5px;
    font-family:inherit;margin-bottom:14px;width:100%;color:var(--pac-gray-900);background:var(--pac-gray-50);
    transition:border-color .15s var(--pac-ease),box-shadow .15s var(--pac-ease),background .15s var(--pac-ease);
}
.paystaff-ai-chat__intake-field::placeholder{color:var(--pac-gray-400)}
.paystaff-ai-chat__intake-field:focus{outline:0;border-color:var(--pac-primary);background:#fff;box-shadow:0 0 0 3.5px rgba(70,95,255,.14)}
.paystaff-ai-chat__intake-error{color:var(--pac-error);background:var(--pac-error-bg);border-radius:8px;padding:8px 10px;font-size:12px;margin:-2px 0 12px}

.paystaff-ai-chat__intake-submit,
.paystaff-ai-chat__send{position:relative}

.paystaff-ai-chat__intake-submit{
    width:100%;border:0;border-radius:10px;color:#fff;padding:11px;font-size:13.5px;font-weight:700;cursor:pointer;
    background:linear-gradient(135deg,var(--pac-primary),var(--pac-primary-dark));
    box-shadow:0 4px 12px rgba(70,95,255,.28);
    transition:transform .15s var(--pac-ease),box-shadow .15s var(--pac-ease),opacity .15s var(--pac-ease);
}
.paystaff-ai-chat__intake-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(70,95,255,.34)}
.paystaff-ai-chat__intake-submit:active:not(:disabled){transform:translateY(0)}
.paystaff-ai-chat__intake-submit:disabled{opacity:.75;cursor:default}

.paystaff-ai-chat__spinner{
    position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
    animation:pacSpin .7s linear infinite;
}
@keyframes pacSpin{to{transform:rotate(360deg)}}

/* ---------- End-of-chat rating ---------- */
.paystaff-ai-chat__rate{
    flex:1;overflow-y:auto;padding:28px 22px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;background:#fff;animation:pacFadeInUp .3s var(--pac-ease) both;
}
.paystaff-ai-chat__rate-title{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--pac-gray-900)}
.paystaff-ai-chat__rate-sub{margin:0 0 18px;font-size:12.5px;color:var(--pac-gray-500);line-height:1.5}
.paystaff-ai-chat__rate-stars{display:flex;gap:6px;margin-bottom:22px}
.paystaff-ai-chat__star{
    background:transparent;border:0;cursor:pointer;padding:2px;color:var(--pac-gray-300);
    transition:color .15s var(--pac-ease),transform .15s var(--pac-ease);
}
.paystaff-ai-chat__star svg{width:30px;height:30px}
.paystaff-ai-chat__star:hover{transform:scale(1.12)}
.paystaff-ai-chat__star.is-active{color:#f59e0b}
.paystaff-ai-chat__rate-actions{display:flex;align-items:center;gap:16px}
.paystaff-ai-chat__rate-cancel,
.paystaff-ai-chat__rate-skip{
    background:transparent;border:0;cursor:pointer;font-size:12.5px;font-weight:600;padding:4px 2px;
    color:var(--pac-gray-500);transition:color .15s var(--pac-ease);
}
.paystaff-ai-chat__rate-cancel:hover,
.paystaff-ai-chat__rate-skip:hover{color:var(--pac-gray-900)}

/* ---------- Messages ---------- */
.paystaff-ai-chat__messages{
    flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;background:var(--pac-gray-50);
    scrollbar-width:thin;scrollbar-color:var(--pac-gray-300) transparent;
    animation:pacFadeInUp .3s var(--pac-ease) both;
}
.paystaff-ai-chat__messages::-webkit-scrollbar{width:6px}
.paystaff-ai-chat__messages::-webkit-scrollbar-thumb{background:var(--pac-gray-300);border-radius:99px}
.paystaff-ai-chat__messages::-webkit-scrollbar-track{background:transparent}

@keyframes pacMsgIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.paystaff-ai-chat__row{display:flex;margin:6px 0;animation:pacMsgIn .28s var(--pac-ease) both}
.paystaff-ai-chat__row--user{justify-content:flex-end}
.paystaff-ai-chat__row--assistant,
.paystaff-ai-chat__row--error{justify-content:flex-start}

.paystaff-ai-chat__msg{
    max-width:82%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.5;
    white-space:pre-wrap;word-wrap:break-word;
}
.paystaff-ai-chat__msg--assistant{background:#fff;color:var(--pac-gray-900);border:1px solid var(--pac-gray-200);border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.paystaff-ai-chat__msg--user{background:linear-gradient(135deg,var(--pac-primary),var(--pac-primary-dark));color:#fff;border-bottom-right-radius:5px;box-shadow:0 2px 8px rgba(70,95,255,.22)}
.paystaff-ai-chat__msg--error{background:var(--pac-error-bg);color:var(--pac-error);border-bottom-left-radius:5px}

.paystaff-ai-chat__msg--typing{display:flex;align-items:center;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--pac-gray-200);border-bottom-left-radius:5px}
.paystaff-ai-chat__msg--typing span{width:6px;height:6px;border-radius:50%;background:var(--pac-gray-400);animation:pacTypingDot 1.1s ease-in-out infinite}
.paystaff-ai-chat__msg--typing span:nth-child(2){animation-delay:.15s}
.paystaff-ai-chat__msg--typing span:nth-child(3){animation-delay:.3s}
@keyframes pacTypingDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ---------- Composer ---------- */
.paystaff-ai-chat__form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--pac-gray-200);background:#fff;flex-shrink:0}
.paystaff-ai-chat__input{
    flex:1;resize:none;border:1.5px solid var(--pac-gray-200);border-radius:16px;padding:15px;
    font-size:13.5px;font-family:inherit;min-height:56px;max-height:110px;box-sizing:border-box;
    color:var(--pac-gray-900);background:var(--pac-gray-50);
    transition:border-color .15s var(--pac-ease),box-shadow .15s var(--pac-ease),background .15s var(--pac-ease);
}
.paystaff-ai-chat__input::placeholder{color:var(--pac-gray-400)}
.paystaff-ai-chat__input:focus{outline:0;border-color:var(--pac-primary);background:#fff;box-shadow:0 0 0 3.5px rgba(70,95,255,.14)}

.paystaff-ai-chat__send{
    width:56px;height:56px;flex-shrink:0;border:0;border-radius:50%;color:#fff;cursor:pointer;
    background:linear-gradient(135deg,var(--pac-primary),var(--pac-primary-dark));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(70,95,255,.34);
    transition:transform .15s var(--pac-ease),box-shadow .15s var(--pac-ease),opacity .15s var(--pac-ease);
}
.paystaff-ai-chat__send svg{width:24px;height:24px;transform:translateX(-1px)}
.paystaff-ai-chat__send:hover:not(:disabled){transform:translateY(-1px) scale(1.04);box-shadow:0 6px 18px rgba(70,95,255,.4)}
.paystaff-ai-chat__send:active:not(:disabled){transform:translateY(0) scale(.97)}
.paystaff-ai-chat__send:disabled{opacity:.55;cursor:default;box-shadow:none}

@media (prefers-reduced-motion:reduce){
    #paystaff-ai-chat *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:480px){
    .paystaff-ai-chat__window{width:calc(100vw - 32px);height:calc(100vh - 120px);right:-4px}
}