:root{
    --lc-navy:#0B1D42;
    --lc-blue:#1E96D6;
    --lc-blue-light:#5FC7F0;
    --lc-line:#E1E8F2;
}
#lcLauncher{
    position:fixed; right:22px; bottom:22px; z-index:9998;
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(155deg,var(--lc-navy),var(--lc-blue));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 30px -8px rgba(11,29,66,0.45);
    cursor:pointer; border:none;
    transition:transform .2s ease;
}
#lcLauncher:hover{ transform:scale(1.06); }
#lcLauncher svg{ width:26px; height:26px; }
#lcLauncher .lc-badge{
    position:absolute; top:-4px; right:-4px; background:#D64545; color:#fff;
    font-size:11px; font-weight:700; border-radius:999px; padding:1px 6px; min-width:19px; text-align:center;
    display:none;
}

#lcPanel{
    position:fixed; right:22px; bottom:94px; z-index:9999;
    width:340px; max-width:calc(100vw - 32px);
    height:460px; max-height:calc(100vh - 140px);
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 30px 60px -18px rgba(11,29,66,0.4);
    display:none; flex-direction:column;
    font-family:'Plus Jakarta Sans', Arial, sans-serif;
}
#lcPanel.open{ display:flex; }

.lc-head{
    background:linear-gradient(120deg,var(--lc-navy),var(--lc-blue) 160%);
    color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; flex:none;
}
.lc-head strong{ font-size:14.5px; display:block; }
.lc-head span{ font-size:12px; color:rgba(255,255,255,0.75); }
.lc-head button{ background:rgba(255,255,255,0.15); border:none; color:#fff; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:16px; line-height:1; }

.lc-body{ flex:1; overflow-y:auto; padding:14px; background:#F7FAFD; }
.lc-msg{ max-width:80%; padding:9px 12px; border-radius:12px; margin-bottom:9px; font-size:13.5px; line-height:1.5; }
.lc-msg.visitor{ background:var(--lc-navy); color:#fff; margin-left:auto; border-bottom-right-radius:3px; }
.lc-msg.admin{ background:#fff; border:1px solid var(--lc-line); color:#1a1a1a; border-bottom-left-radius:3px; }
.lc-msg-time{ font-size:10px; opacity:.6; margin-top:3px; }
.lc-empty{ text-align:center; color:#5B6B85; font-size:13px; padding:24px 10px; }

.lc-preform{ padding:16px; }
.lc-preform p{ font-size:13px; color:#5B6B85; margin:0 0 14px; line-height:1.5; }
.lc-preform input{
    width:100%; padding:10px 12px; border-radius:9px; border:1.5px solid var(--lc-line);
    font-size:13.5px; margin-bottom:10px; font-family:inherit;
}
.lc-preform input:focus{ outline:none; border-color:var(--lc-blue); }
.lc-preform button{
    width:100%; padding:11px; border-radius:9px; border:none; background:var(--lc-navy); color:#fff;
    font-weight:700; font-size:13.5px; cursor:pointer;
}

.lc-inputwrap{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--lc-line); flex:none; background:#fff; }
.lc-inputwrap input{
    flex:1; padding:10px 13px; border-radius:999px; border:1.5px solid var(--lc-line); font-size:13.5px; font-family:inherit;
}
.lc-inputwrap input:focus{ outline:none; border-color:var(--lc-blue); }
.lc-inputwrap button{
    width:38px; height:38px; border-radius:50%; border:none; background:var(--lc-navy); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none;
}
.lc-inputwrap button:hover{ background:var(--lc-blue); }

@media (max-width: 480px){
    #lcPanel{ right:16px; bottom:84px; width:calc(100vw - 32px); }
    #lcLauncher{ right:16px; bottom:16px; }
}

/* Keep the template's "scroll to top" button from overlapping the chat launcher —
   stack it neatly above the chat bubble instead of sitting on top of it. */
.scroll__top.open{
    bottom: 96px !important;
    right: 24px !important;
}
@media (max-width: 1199.98px){
    .scroll__top.open{ bottom: 92px !important; right: 20px !important; }
}
@media (max-width: 767.98px){
    .scroll__top.open{ bottom: 72px !important; right: 14px !important; }
}