#dslc-portal{ position:fixed; inset:0; z-index:2147483647; pointer-events:none; }
#dslc-portal #dslc-widget{ pointer-events:auto; } #dslc-widget, #dslc-panel, #dslc-bubble, #dslc-bubble-label{
z-index:2147483647 !important;
} :root{
--dslc-bubble-bottom: 18px;
--dslc-gap: 8px;
--dslc-size: 60px;
--dslc-offset: 0px; } #dslc-widget, #dslc-widget * {
box-sizing: border-box;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
} #dslc-bubble {
position: fixed; right: 18px;
bottom: calc(var(--dslc-bubble-bottom) + var(--dslc-offset) + env(safe-area-inset-bottom));
width: 60px; height: 60px; border-radius: 50%;
border: 0; cursor: pointer; outline: none;
color: #fff; font-size: 22px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg,#4f46e5,#06b6d4);
box-shadow: 0 10px 24px rgba(0,0,0,.18);
transition: transform .15s ease, box-shadow .2s ease;
}
#dslc-bubble:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
#dslc-bubble .dslc-bubble-glow {
position:absolute; inset:-8px; border-radius:50%;
background: radial-gradient(closest-side, rgba(99,102,241,.35), transparent 70%);
animation: dslc-pulse 2.2s infinite ease-in-out;
}
#dslc-bubble .dslc-bubble-emoji { position: relative; z-index: 1; }
#dslc-bubble .dslc-badge {
position:absolute; top:-2px; right:-2px; font-size:10px; color:#22c55e;
text-shadow: 0 0 6px rgba(34,197,94,.7);
filter: drop-shadow(0 0 3px rgba(34,197,94,.6));
}
#dslc-bubble-label{
position:fixed; right:88px;
bottom: calc(var(--dslc-bubble-bottom) + var(--dslc-gap) + var(--dslc-offset) + env(safe-area-inset-bottom));
background:#0f172a; color:#fff; padding:6px 10px; border-radius:10px;
font-size:13px; box-shadow:0 8px 20px rgba(0,0,0,.2);
} #dslc-panel{
position: fixed; right: 18px;
bottom: calc(var(--dslc-bubble-bottom) + var(--dslc-size) + var(--dslc-gap) + var(--dslc-offset) + env(safe-area-inset-bottom));
width: min(420px, calc(100vw - 36px));
max-height: min(76vh, 780px); display:none; flex-direction:column;
background:#ffffff; border-radius:16px; overflow:hidden;
box-shadow: 0 24px 48px rgba(2,6,23,.25), 0 4px 12px rgba(2,6,23,.15);
border:1px solid rgba(15,23,42,.06);
}
#dslc-widget.dslc-open #dslc-panel{ display:flex; } .dslc-header{
display:flex; align-items:center; gap:12px; padding:10px 12px;
background: linear-gradient(180deg, #f8fafc, #ffffff);
border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:2;
}
.dslc-title-wrap{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.dslc-brand{ display:flex; align-items:center; gap:8px; font-weight:700; color:#0f172a; }
.dslc-brand .dslc-dot{ color:#22c55e; font-size:14px; }
.dslc-hours{ font-size:12px; color:#475569; }
.dslc-head-actions{ display:flex; align-items:center; gap:6px; }
#dslc-close{ background:transparent; border:0; font-size:20px; cursor:pointer; }
#dslc-mute{ background:transparent; border:0; font-size:16px; cursor:pointer; } .dslc-messages{
padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px;
background: #f8fafc;
}
.dslc-msg{ display:flex; align-items:flex-end; gap:8px; max-width: 86%; }
.dslc-msg .bubble{
padding:10px 12px; border-radius:14px; background:#fff; box-shadow: 0 2px 6px rgba(2,6,23,.06);
line-height:1.35; font-size:14px; color:#0f172a; word-wrap: break-word; white-space: pre-wrap;
}
.dslc-msg.me{ justify-content:flex-end; margin-left:auto; }
.dslc-msg.me .bubble{ background: linear-gradient(135deg,#4f46e5,#06b6d4); color:#fff; }
.dslc-system{ text-align:center; font-size:12px; color:#64748b; padding:4px 0; } .dslc-attach{ display:inline-flex; flex-direction:column; gap:6px; font-size:13px; }
.dslc-attach a{ color:#0ea5e9; text-decoration:underline; word-break: break-all; }
.dslc-attach img{
max-width: 200px; max-height: 160px; border-radius:10px; display:block;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
} .dslc-callback{ background:#fff; border-top:1px solid rgba(2,6,23,.06); padding:8px 12px; }
.dslc-callback summary{ cursor:pointer; font-weight:600; list-style:none; outline:none; }
.dslc-callback summary::-webkit-details-marker{ display:none; }
.dslc-callback-body{ display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; margin-top:8px; align-items:end; }
.dslc-callback label{ display:flex; flex-direction:column; gap:4px; font-size:13px; }
.dslc-callback input{
height:36px; padding:8px 10px; border:1px solid #e2e8f0; border-radius:10px; outline:none;
}
.dslc-btn{
height:36px; padding:0 12px; border-radius:10px; border:0; cursor:pointer; color:#fff;
background: linear-gradient(135deg,#22c55e,#16a34a);
}
.dslc-save-info{ font-size:12px; color:#16a34a; padding-left:4px; } .dslc-contacts{
display:flex; gap:8px; padding:8px 12px; background:#fff;
border-top:1px solid rgba(2,6,23,.06); flex-wrap:wrap;
}
.dslc-contact{
padding:8px 10px; border-radius:10px; font-size:13px; font-weight:600; color:#fff;
text-decoration:none; display:inline-block;
}
.dslc-contact.ig{ background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.dslc-contact.tg{ background:#229ED9; }
.dslc-contact.wa{ background:#25D366; color:#073b1a; } #dslc-form{
display:flex; align-items:center; gap:8px; padding:10px; background:#fff; border-top:1px solid rgba(2,6,23,.06);
}
#dslc-attach{ background:transparent; border:0; font-size:18px; cursor:pointer; }
#dslc-input{
flex:1 1 auto; min-height:36px; max-height:160px; resize:none;
padding:9px 12px; border:1px solid #e2e8f0; border-radius:12px; outline:none; font-size:14px;
background:#f8fafc;
}
#dslc-send{
height:36px; padding:0 14px; border-radius:12px; border:0; cursor:pointer; color:#fff; font-weight:600;
background: linear-gradient(135deg,#4f46e5,#06b6d4);
} @keyframes dslc-pulse {
0%, 100% { transform: scale(1); opacity:.9; }
50% { transform: scale(1.06); opacity:1; }
} @media (max-width: 440px){
.dslc-callback-body{ grid-template-columns: 1fr; }
#dslc-panel{ right: 10px; width: calc(100vw - 20px); }
#dslc-bubble-label{ display:none; }
}