:root{
--dslc-bot: 20px;
--dslc-bubble-size: 56px;
--dslc-offset: 0px; --dslc-gap: 8px;
--dslc-radius: 18px;
--dslc-shadow: 0 18px 44px rgba(0,0,0,.18);
--dslc-bg: #0f172a;
--dslc-accent: #4f46e5;
--dslc-muted: #64748b;
}
#dslc-widget{ position:fixed; right:20px; bottom:calc(var(--dslc-bot) + var(--dslc-offset)); z-index:99999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
#dslc-bubble{ width:56px; height:56px; border-radius:50%; border:0; background:var(--dslc-accent); color:#fff; box-shadow:var(--dslc-shadow); cursor:pointer; position:relative;}
#dslc-bubble .i{ font-size:22px; display:inline-block; transform:translateY(1px);}
#dslc-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; border-radius:999px; background:#ef4444; color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; padding:0 6px; }
#dslc-bubble-label{display:none!important;}
#dslc-panel{
width: min(380px, calc(100vw - 24px));
border-radius: var(--dslc-radius);
background: #fff;
box-shadow: var(--dslc-shadow);
position:fixed;
right:20px; bottom: calc(var(--dslc-bot) + var(--dslc-offset) + var(--dslc-bubble-size) + var(--dslc-gap) + env(safe-area-inset-bottom));
display:none;
overflow:hidden;
max-height: min(calc(100dvh - (var(--dslc-bot) + var(--dslc-offset) + var(--dslc-bubble-size) + var(--dslc-gap) + env(safe-area-inset-bottom)) - 12px - env(safe-area-inset-top)), 720px);
}
#dslc-widget:not(.dslc-closed) #dslc-panel{ display:flex; flex-direction:column;}
.dslc-closed #dslc-panel{ display:none; }
.dslc-header{
background: var(--dslc-bg);
color:#fff;
padding:12px 14px;
display:flex;
align-items:center;
gap:10px;
}
.dslc-header .brand{ display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.dslc-header .dot{ font-size:14px; color:#22c55e; }
.dslc-header .dot.off{ color:#94a3b8; }
.dslc-header .title{ font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dslc-header .hours{ font-size:12px; color:#cbd5e1; white-space:nowrap;}
.dslc-header .actions{ display:flex; gap:6px; }
.dslc-header button{ border:0; background:rgba(255,255,255,.1); color:#fff; width:34px; height:34px; border-radius:10px; cursor:pointer; }
.dslc-header #dslc-close{ font-size:20px; line-height:1; }
.dslc-messages{
padding:14px;
background:#f8fafc;
overflow:auto;
flex:1;
}
.dslc-msg{ display:flex; margin:8px 0; }
.dslc-msg.me{ justify-content:flex-end; }
.dslc-b{ max-width:78%; background:#fff; border:1px solid #e2e8f0; padding:10px 12px; border-radius:14px; white-space:pre-wrap; word-break:break-word; }
.dslc-msg.me .dslc-b{ background:#eef2ff; border-color:#e0e7ff; }
.dslc-sys{ color:#475569; font-size:12px; line-height:1.35; background:#fff; border:1px dashed #cbd5e1; padding:10px 12px; border-radius:14px; }
.dslc-att img{ max-width:220px; border-radius:12px; display:block; margin-bottom:8px; }
.dslc-att a{ color:#1d4ed8; font-weight:700; text-decoration:none; }
.dslc-loginwall{
margin:0 14px 12px 14px;
padding:12px;
background:#fff7ed;
border:1px solid #fed7aa;
border-radius:14px;
}
.dslc-loginwall .ttl{ font-weight:900; color:#9a3412; margin-bottom:6px; font-size:13px;}
.dslc-loginwall .hint{ color:#9a3412; font-size:12px; margin-bottom:10px; line-height:1.35;}
.dslc-loginwall .btn{
display:inline-block;
background:#fb923c;
color:#fff;
text-decoration:none;
font-weight:900;
padding:10px 12px;
border-radius:12px;
}
.dslc-callback{ margin:0 14px 12px 14px; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; }
.dslc-callback summary{
list-style:none;
cursor:pointer;
padding:10px 12px;
font-weight:800;
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
}
.dslc-callback summary::-webkit-details-marker{ display:none; }
.dslc-callback .body{ padding:10px 12px; display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.dslc-callback label{ flex:1; min-width:180px; }
.dslc-callback label span{ display:block; font-size:12px; color:#475569; margin-bottom:4px;}
.dslc-callback input{
width:100%;
padding:10px 10px;
border:1px solid #e2e8f0;
border-radius:12px;
font-size:14px;
}
.dslc-callback .btn{
border:0;
background:var(--dslc-accent);
color:#fff;
font-weight:900;
padding:10px 14px;
border-radius:12px;
cursor:pointer;
}
.dslc-callback .info{ flex-basis:100%; font-size:12px; color:#16a34a; }
.dslc-contacts{
margin:0 14px 12px 14px;
display:flex;
align-items:center;
gap:10px;
}
.dslc-contacts .ttl{ font-size:12px; color:#475569; font-weight:700; margin-right:auto;}
.dslc-contacts .c{
width:34px; height:34px;
border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:#0f172a;
box-shadow:0 10px 20px rgba(0,0,0,.08);
}
#dslc-form{
display:flex;
gap:8px;
padding:12px 14px;
background:#fff;
border-top:1px solid #e2e8f0;
}
#dslc-form.disabled{ opacity:.6; pointer-events:none; }
#dslc-attach{ width:40px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; cursor:pointer; }
#dslc-input{
flex:1;
resize:none;
border:1px solid #e2e8f0;
border-radius:12px;
padding:10px 10px;
font-size:14px;
line-height:1.25;
max-height:140px;
}
#dslc-send{
border:0;
background:var(--dslc-accent);
color:#fff;
font-weight:900;
padding:0 14px;
border-radius:12px;
cursor:pointer;
}
#dslc-toast{
position:fixed;
right:20px;
bottom: calc(20px + var(--dslc-offset) + 56px + var(--dslc-gap) + 8px + env(safe-area-inset-bottom));
background:rgba(15,23,42,.96);
color:#fff;
padding:10px 12px;
border-radius:14px;
box-shadow: var(--dslc-shadow);
opacity:0;
transform:translateY(12px);
transition: all .2s ease;
z-index:99999;
max-width:min(360px, calc(100vw - 40px));
cursor:pointer;
}
#dslc-toast.show{ opacity:1; transform:translateY(0); }
@media (max-width: 520px){
#dslc-widget{ right:14px; }
#dslc-panel{ right:12px; width: calc(100vw - 24px); }
}