@import url(/local/chat/assets.css?v=2);

/* Стиль как на сайте: Montserrat, скругления 3px, кнопки капсом с разрядкой */
#sldc, #sldc * { box-sizing: border-box; }
#sldc { --c: #ffb400; --cd: #e29f00; --tx: #1f2937; --bg: #f3f4f6; --r: 3px; position: fixed; left: 20px; bottom: 20px; z-index: 99990; font: 13px/1.4 Montserrat, Arial, sans-serif; color: var(--tx); }
#sldc button { font-family: inherit; cursor: pointer; }
#sldc .ico { display: block; background: var(--sldc-icon) center/contain no-repeat; }
#sldc .ava { position: relative; flex: none; width: 26px; height: 26px; border-radius: var(--r); background: #fff var(--sldc-agent, var(--sldc-icon)) center/cover no-repeat; border: 1px solid rgba(0,0,0,.08); }
#sldc .ava.noph { background: #fff var(--sldc-icon) center/78% no-repeat; }

/* плашка-лаунчер */
#sldc .sldc-pill { position: relative; display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 6px 12px 6px 6px; border: 0; border-radius: var(--r); background: #333; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 12px; font-weight: 600; text-align: left; transition: background .15s, transform .15s; animation: sldc-pillin .5s .6s both; }
#sldc .sldc-pill:hover { background: #444; }
#sldc .sldc-pill .ic { position: relative; flex: none; width: 30px; height: 30px; border-radius: var(--r); background: #fff; padding: 3px; }
#sldc .sldc-pill .ic .ico { width: 100%; height: 100%; }
#sldc .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #333; }
#sldc .sldc-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e11d48; color: #fff; font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; }
#sldc .sldc-badge.on { display: flex; }
@keyframes sldc-pillin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#sldc.sldc-open .sldc-pill { display: none; }
#sldc .sldc-pill .short { display: none; }

/* окно */
#sldc .sldc-win { position: absolute; left: 0; bottom: 0; width: 310px; height: min(430px, calc(100vh - 40px)); background: #fff; border-radius: var(--r); box-shadow: 0 8px 32px rgba(0,0,0,.28); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom left; }
#sldc.sldc-open .sldc-win { display: flex; animation: sldc-open .45s cubic-bezier(.2,.8,.2,1); }
@keyframes sldc-open { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
#sldc .sldc-head { background: var(--c); padding: 8px 10px; display: flex; align-items: center; gap: 10px; }
#sldc .sldc-head .ava { width: 34px; height: 34px; }
#sldc .sldc-head .ava .dot { border-color: var(--c); }
#sldc .sldc-head .t { flex: 1; min-width: 0; }
#sldc .sldc-head b { display: block; font-size: 13px; font-weight: 700; }
#sldc .sldc-head span { font-size: 11px; opacity: .8; }
#sldc .sldc-head button { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--tx); padding: 0 4px; }

#sldc .sldc-body { flex: 1; overflow-y: auto; padding: 10px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
#sldc .row { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; align-self: flex-start; animation: sldc-in .25s; }
#sldc .row.visitor { align-self: flex-end; }
#sldc .row .ava, #sldc .row .sp { align-self: flex-start; }
#sldc .row .sp { flex: none; width: 26px; }
#sldc .m { padding: 6px 10px; border-radius: var(--r); white-space: pre-wrap; word-wrap: break-word; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
#sldc .row.operator .m { border-left: 3px solid var(--c); }
#sldc .row.visitor .m { background: var(--c); }
#sldc .who { display: block; font-size: 11px; font-weight: 600; opacity: .6; margin-bottom: 2px; }
#sldc .typing { align-self: flex-start; margin-left: 34px; padding: 9px 11px; background: #fff; border-radius: var(--r); display: flex; gap: 4px; }
#sldc .typing i { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: sldc-dot 1.2s infinite; }
#sldc .typing i:nth-child(2) { animation-delay: .2s; }
#sldc .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sldc-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes sldc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#sldc .btns { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-left: 34px; }
#sldc .btns button, #sldc .btns a { border: 1.5px solid var(--c); background: #fff; color: var(--tx); border-radius: var(--r); padding: 5px 10px; text-decoration: none; font-size: 12px; text-align: left; transition: background .15s; }
#sldc .btns button:hover, #sldc .btns a:hover { background: var(--c); }

#sldc .form { align-self: stretch; margin-left: 34px; background: #fff; border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
#sldc .form input { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: var(--r); font: inherit; }
#sldc .form input:focus, #sldc .sldc-foot input:focus { outline: 0; border-color: var(--c); box-shadow: 0 0 0 2px rgba(255,180,0,.35); }
#sldc .form .go { border: 0; background: var(--c); color: var(--tx); border-radius: var(--r); padding: 11px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
#sldc .form .go:hover { background: var(--cd); }
#sldc .form .go:disabled { opacity: .6; }
#sldc .form .err { color: #e11d48; font-size: 12px; }
#sldc .form .hint { font-size: 11px; color: #6b7280; }

#sldc .sldc-foot { display: flex; gap: 6px; padding: 6px; border-top: 1px solid #e5e7eb; background: #fff; }
#sldc .sldc-foot input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: var(--r); font: inherit; }
#sldc .sldc-foot button { width: 34px; height: 34px; border: 0; border-radius: var(--r); background: var(--c); color: var(--tx); display: flex; align-items: center; justify-content: center; }
#sldc .sldc-foot button:hover { background: var(--cd); }
#sldc .sldc-foot svg { width: 18px; height: 18px; fill: currentColor; }
#sldc .sldc-brand { height: 22px; background: #fff var(--sldc-logo) center/auto 13px no-repeat; border-top: 1px solid #f0f0f0; }

@media (max-width: 480px) {
  #sldc { left: 10px; bottom: 76px; }   /* выше липкой панели «Купить» на карточках */
  #sldc .sldc-pill { padding: 5px 12px 5px 5px; gap: 8px; }
  #sldc .sldc-pill .long { display: none; }   /* на телефоне — короткая подпись */
  #sldc .sldc-pill .short { display: inline; }
  #sldc .sldc-pill .ic { width: 36px; height: 36px; }
  #sldc.sldc-open { left: 0; bottom: 0; }
  #sldc .sldc-win { position: fixed; inset: 0; width: 100%; height: 100%; border-radius: 0; }
  #sldc .sldc-foot input, #sldc .form input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { #sldc *, #sldc *::before { animation: none !important; } }