.pci-inline-panel{
max-width:760px;
margin:24px auto;
}
.pci-chat-wrap{
width:100%;
border:1px solid #dbe2ea;
border-radius:22px;
background:#f8fafc;
box-shadow:0 18px 50px rgba(15,23,42,.12);
overflow:hidden;
}
.pci-chat-shell{
display:flex;
flex-direction:column;
background:#f8fafc;
}
.pci-chat-hero{
display:flex;
justify-content:space-between;
gap:18px;
padding:22px 22px 18px;
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
color:#fff;
}
.pci-kicker{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:rgba(255,255,255,.12);
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
}
.pci-chat-hero h3{
margin:10px 0 8px;
font-size:28px;
line-height:1.12;
color:#fff;
}
.pci-chat-hero p{
margin:0;
color:rgba(255,255,255,.82);
line-height:1.45;
}
.pci-chat-hero-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
text-align:right;
}
.pci-live-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:999px;
background:rgba(255,255,255,.12);
font-size:13px;
}
.pci-live-dot{
width:9px;
height:9px;
border-radius:50%;
background:#22c55e;
flex:0 0 auto;
}
.pci-mini-points{
display:flex;
flex-direction:column;
gap:6px;
font-size:13px;
color:rgba(255,255,255,.88);
}
.pci-chat-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
}
.pci-chat-title-row{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.pci-avatar-badge{
width:42px;
height:42px;
flex:0 0 auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#111827;
color:#fff;
font-size:18px;
}
.pci-chat-title-row strong{
display:block;
color:#fff;
font-size:16px;
line-height:1.3;
}
.pci-subtitle{
margin-top:4px;
color:#cbd5e1;
font-size:13px;
line-height:1.4;
}
.pci-close-chat{
appearance:none;
border:0;
width:34px;
height:34px;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
flex:0 0 auto;
}
.pci-chat-body{
min-height:180px;
overflow:auto;
padding:18px;
background:#f1f5f9;
}
.pci-message{
display:flex;
flex-direction:column;
margin-bottom:14px;
}
.pci-message.pci-visitor{align-items:flex-end}
.pci-message.pci-admin{align-items:flex-start}
.pci-bubble{
max-width:82%;
padding:12px 14px;
border-radius:16px;
word-break:break-word;
line-height:1.45;
}
.pci-visitor .pci-bubble{
background:#1f7aec;
color:#fff;
border-bottom-right-radius:6px;
}
.pci-admin .pci-bubble{
background:#eef2f6;
color:#101828;
border-bottom-left-radius:6px;
}
.pci-time{
margin-top:5px;
color:#667085;
font-size:12px;
}
.pci-empty{
padding:32px 18px;
text-align:center;
color:#64748b;
font-size:14px;
line-height:1.45;
}
.pci-empty strong,
.pci-empty span{
display:block;
}
.pci-empty-icon{
margin-bottom:8px;
font-size:28px;
}
.pci-chat-form{
padding:16px 18px 18px;
background:#fff;
border-top:1px solid #e2e8f0;
}
.pci-field{
display:block;
}
.pci-field span{
display:block;
margin-bottom:6px;
color:#344054;
font-size:13px;
font-weight:600;
}
.pci-chat-form textarea{
display:block;
width:100%;
min-height:120px;
box-sizing:border-box;
border:1px solid #cfd6df;
border-radius:14px;
background:#f8fafc;
padding:14px 15px;
font:inherit;
color:#101828;
resize:vertical;
}
.pci-note{
margin-top:12px;
color:#667085;
font-size:12px;
line-height:1.45;
}
.pci-actions{
display:block;
margin-top:12px;
}
.pci-send-button{
appearance:none;
display:block;
width:100%;
min-height:52px;
box-sizing:border-box;
border:0;
border-radius:14px;
background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
color:#fff;
padding:14px 18px;
font-weight:700;
cursor:pointer;
text-align:center;
box-shadow:0 10px 22px rgba(15,23,42,.18);
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pci-status{
margin-top:10px;
color:#475467;
font-size:13px;
}
.pci-floating-launcher{
position:fixed;
right:18px;
bottom:18px;
z-index:999999;
}
.pci-floating-button{
width:56px;
height:56px;
padding:0;
border:0;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:#111827;
color:#fff;
box-shadow:0 14px 34px rgba(15,23,42,.24);
cursor:pointer;
}
.pci-floating-icon{
font-size:22px;
line-height:1;
}
.pci-floating-text{
display:none!important;
}
.pci-floating-panel[hidden]{
display:none!important;
}
.pci-floating-panel{
position:fixed;
right:18px;
bottom:86px;
width:min(390px, calc(100vw - 24px));
z-index:999998;
}
.pci-is-floating{
height:auto;
max-height:calc(100vh - 100px);
max-height:calc(100dvh - 100px);
border-radius:20px;
}
.pci-is-floating .pci-chat-shell{
max-height:calc(100vh - 100px);
max-height:calc(100dvh - 100px);
overflow:hidden;
}
.pci-is-floating .pci-chat-hero{
display:none;
}
.pci-is-floating .pci-chat-header{
padding:14px 16px;
}
.pci-is-floating .pci-chat-body{
flex:1 1 auto;
min-height:120px;
max-height:260px;
padding:14px 16px;
}
.pci-is-floating .pci-chat-form{
flex:0 0 auto;
padding:14px 16px 16px;
}
.pci-is-floating .pci-chat-form textarea{
min-height:78px;
}
.pci-chat-body::-webkit-scrollbar{
width:10px;
}
.pci-chat-body::-webkit-scrollbar-thumb{
background:#d0d5dd;
border-radius:999px;
border:2px solid #fcfcfd;
}
@media (max-width:760px){
.pci-chat-hero{
flex-direction:column;
align-items:flex-start;
}
.pci-chat-hero-side{
align-items:flex-start;
text-align:left;
}
.pci-bubble{
max-width:90%;
}
}
@media (max-width:560px){
.pci-floating-launcher{
right:12px;
bottom:12px;
}
.pci-floating-button{
width:52px;
height:52px;
}
.pci-floating-panel{
left:12px;
right:12px;
width:auto;
bottom:74px;
}
.pci-is-floating{
max-height:calc(100vh - 88px);
max-height:calc(100dvh - 88px);
}
.pci-is-floating .pci-chat-shell{
max-height:calc(100vh - 88px);
max-height:calc(100dvh - 88px);
}
.pci-is-floating .pci-chat-body{
max-height:220px;
}
}
.pci-honeypot{position:absolute !important;left:-9999px !important;opacity:0 !important;pointer-events:none !important;height:0 !important;width:0 !important;}
.pci-floating-button{position:relative}
.pci-floating-badge{
position:absolute;
top:-5px;
right:-4px;
min-width:22px;
height:22px;
padding:0 6px;
border-radius:999px;
background:#ef4444;
color:#fff;
font-size:11px;
font-weight:700;
line-height:22px;
text-align:center;
box-shadow:0 8px 18px rgba(239,68,68,.35);
}
.pci-floating-button.pci-has-unread{
animation:pciPulse 1.8s ease-in-out infinite;
}
.pci-message-pop .pci-bubble{
animation:pciPop .9s ease-out;
}
@keyframes pciPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.05)}
}
@keyframes pciPop{
0%{transform:scale(.96); box-shadow:0 0 0 rgba(31,122,236,0)}
40%{transform:scale(1.01); box-shadow:0 12px 24px rgba(31,122,236,.18)}
100%{transform:scale(1); box-shadow:0 0 0 rgba(31,122,236,0)}
}
.pci-send-button:hover,
.pci-send-button:focus-visible{
transform:translateY(-1px);
box-shadow:0 14px 28px rgba(15,23,42,.22);
filter:brightness(1.03);
}
.pci-close-chat:hover,
.pci-close-chat:focus-visible{
background:rgba(255,255,255,.18);
}
.pci-chat-form textarea:focus{
outline:none;
border-color:#94a3b8;
box-shadow:0 0 0 3px rgba(148,163,184,.18);
}