/* Caser support: original light Crisp theme, original logo and floor-tile asset. */
@font-face { font-family: "CASER SUPPORT Noto"; font-weight: 400; src: url(assets/noto-latin-regular.woff2) format("woff2"); unicode-range: U+0020-007F; font-display: swap; }
@font-face { font-family: "CASER SUPPORT Noto"; font-weight: 400; src: url(assets/noto-cyr-regular.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "CASER SUPPORT Noto"; font-weight: 700; src: url(assets/noto-latin-bold.woff2) format("woff2"); unicode-range: U+0020-007F; font-display: swap; }
@font-face { font-family: "CASER SUPPORT Noto"; font-weight: 700; src: url(assets/noto-cyr-bold.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }

.csrs, .csrs * { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; text-decoration: none; list-style: none; outline: none; -webkit-tap-highlight-color: transparent; }
.csrs { --a: #df8110; --bg: #e4e6e7; --c2: #d7dce0; --c3: #eef0f2; --ic: #66788a;
  position: fixed; right: 24px; bottom: 20px; z-index: 2147483000; font-family: "CASER SUPPORT Noto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1.3; color: #1c293b; }
.csrs b, .csrs strong { font-weight: 700; }
.csrs-ic { display: inline-block; flex: none; background-color: var(--ic); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ---------- кнопка ---------- */
.csrs-launch { position: relative; width: 54px; height: 54px; border-radius: 100%; background: var(--a) url(assets/original-logo.webp) center / cover no-repeat; box-shadow: 0 4px 10px rgba(0, 0, 0, .05); cursor: pointer; transition: transform .15s ease; }
.csrs-launch:hover { transform: scale(1.06); }
.csrs-launch:active { transform: scale(.96); }
.csrs-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e1304a; border: 2px solid var(--bg); font-weight: 700; font-size: 11px; line-height: 16px; text-align: center; display: none; }
.csrs-badge.on { display: block; }

/* ---------- окно ---------- */
.csrs-box { position: absolute; right: 0; bottom: 70px; width: 400px; height: min(730px, calc(100vh - 110px)); background: var(--bg); border-radius: 16px; overflow: hidden;
  box-shadow: rgba(0, 0, 0, .02) 0 10px 2px 0, rgba(0, 0, 0, .12) 0 4px 20px 0; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: right bottom; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.csrs.open .csrs-box { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }

/* шапка с узором «крестики-нолики» */
.csrs-head { position: relative; flex: none; border-radius: 16px 16px 0 0; background-image: linear-gradient(rgba(18, 18, 18, .1) 0%, rgba(18, 18, 18, .4) 99%); }
.csrs-head::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .055); -webkit-mask: url(assets/tile.svg) 0 0 / 64px 64px repeat; mask: url(assets/tile.svg) 0 0 / 64px 64px repeat; pointer-events: none; }
.csrs-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18, 18, 18, 0) 0%, var(--bg) 100%); pointer-events: none; }
.csrs-head > * { position: relative; z-index: 1; }
.csrs-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 16px; }
.csrs-homebtn { width: 76px; height: 40px; padding: 4px 0; display: flex; }
.csrs-nav.chat .csrs-homebtn { width: 64px; }
.csrs-pill { height: 32px; border-radius: 16px; padding: 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; line-height: 32px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.csrs-pill .csrs-ic { background-color: #1c293b; }
.csrs-pill.on { position: relative; background: var(--a); box-shadow: rgba(255, 255, 255, .45) 0 1px 2px 0 inset, rgba(0, 0, 0, .24) 0 -1px 2px 0 inset; }
.csrs-pill.on::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(rgba(255, 255, 255, .1) 0%, rgba(165, 81, 3, .35) 30%, rgba(165, 81, 3, 0) 100%); pointer-events: none; }
.csrs-pill.on > * { position: relative; }
.csrs-tabs { display: flex; gap: 2px; background: var(--c2); border-radius: 20px; padding: 4px; }
.csrs-tabs .csrs-pill:not(.on):hover { background: rgba(255, 255, 255, .06); }
.csrs-more { width: 76px; display: flex; justify-content: flex-end; }
.csrs-nav.chat .csrs-more { width: 64px; }
.csrs-dots { padding: 10px 7px; border-radius: 5px; cursor: pointer; display: flex; }
.csrs-dots:hover { background: rgba(255, 255, 255, .06); }
.csrs-x { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; line-height: 1; font-weight: 400; }

.csrs-intro { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 6px 23px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin: 0 15px; }
.csrs-av { flex: none; width: 42px; height: 42px; border-radius: 42px; background: var(--a) url(assets/original-logo.webp) center / cover no-repeat; position: relative; }
.csrs-intro .t1 { font-weight: 700; font-size: 14.4px; line-height: 20px; }
.csrs-intro .t2 { font-size: 12.8px; line-height: 20px; }
.csrs-intro.chat { padding: 0 6px 11px; gap: 9px; }
.csrs-intro.chat .csrs-av { width: 36px; height: 36px; }
.csrs-intro.chat h2 { font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .2px; }
.csrs-intro.chat p { font-size: 11.6px; line-height: 16px; letter-spacing: .2px; margin-top: 3px; }
.csrs-intro.op { padding: 0 6px 14px; gap: 11px; }
.csrs-intro.op .csrs-av { width: 30px; height: 30px; }
.csrs-intro.op .csrs-av::after { content: ""; position: absolute; right: -2px; bottom: -1px; width: 9px; height: 9px; border-radius: 100%; background: rgb(78, 206, 61); box-shadow: 0 0 0 2px var(--bg); }
.csrs-intro.op .nm { font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .2px; }
.csrs-intro.op .dd { width: 24px; height: 24px; border-radius: 7px; background: rgba(48, 48, 48, .5); display: flex; align-items: center; justify-content: center; }

/* ---------- тело ---------- */
.csrs-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.csrs-view { display: none; }
.csrs-view.on { display: block; }

/* home */
.csrs-home { padding: 24px 15px 40px; }
.csrs-h3 { font-weight: 700; font-size: 13.2px; line-height: 13.2px; padding: 0 10px; margin-bottom: 17px; }
.csrs-list > li { background: var(--c2); border-radius: 10px; margin-bottom: 8px; }
.csrs-row { display: flex; align-items: center; gap: 9px; padding: 14px 25px 14px 23px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13.6px; line-height: 16px; }
.csrs-row .csrs-ic.lead { background-color: var(--a); width: 18px; height: 18px; }
.csrs-row .grow { flex: 1; min-width: 0; }
.csrs-row .csrs-ic.chev { width: 14px; height: 14px; }
.csrs-list > li.arts { padding: 5px; }
.csrs-list > li.arts > .csrs-row { background: var(--c3); padding: 14px 20px 14px 18px; }
.csrs-row:hover { filter: brightness(1.12); }
.csrs-alinks { padding: 5px 0 0; }
.csrs-alink { display: block; padding: 6px 20px; border-radius: 10px; font-size: 12.4px; line-height: 20px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csrs-alink:hover { background: rgba(255, 255, 255, .05); }
.csrs-scard { width: 179px; margin-top: 14px; border: 1px solid var(--c2); border-radius: 10px; padding: 12px 15px; cursor: pointer; }
.csrs-scard:hover { background: rgba(255, 255, 255, .03); }
.csrs-scard .a { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.6px; line-height: 16px; }
.csrs-scard .a .csrs-ic { background-color: #1c293b; width: 15px; height: 15px; }
.csrs-scard .b { font-size: 12.4px; line-height: 15px; margin-top: 8px; }

/* чат */
.csrs-msgs { padding: 15px 15px 12px 15px; }
.csrs-date { text-align: center; font-weight: 700; font-size: 11.2px; line-height: 11.2px; padding: 3px 0 17px 36px; }
.csrs-m { display: flex; margin-bottom: 8px; }
.csrs-m .col { min-width: 0; max-width: calc(100% - 36px); }
.csrs-m.op { gap: 8px; }
.csrs-m.op .ava { flex: none; width: 28px; height: 28px; border-radius: 28px; background: var(--a) url(assets/original-logo.webp) center / cover no-repeat; margin-top: 3px; }
.csrs-m.op.cont .ava { visibility: hidden; height: 0; }
.csrs-m .who { font-size: 12px; line-height: 14px; padding-left: 1px; margin-bottom: 6px; }
.csrs-bub { display: inline-block; border-radius: 12px; padding: 8px 14px 9px; font-size: 12.6px; line-height: 18px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; background: var(--c2); }
.csrs-bub a { text-decoration: underline; }
.csrs-m.me { justify-content: flex-end; }
.csrs-m.me .csrs-bub { background: var(--a); }
.csrs-m.me.pending .csrs-bub { opacity: .6; }
.csrs-m .tm { font-size: 10.4px; opacity: .5; margin-top: 4px; }
.csrs-m.me .tm { text-align: right; }
.csrs-m.greet { padding-left: 0; }
.csrs-typing { display: none; padding: 0 0 8px 36px; }
.csrs-typing.on { display: block; }

/* поле ввода */
.csrs-foot { position: relative; flex: none; padding: 0 10px 10px; display: none; }
.csrs.v-chat .csrs-foot { display: block; }
.csrs-comp { position: relative; background: var(--c2); border-radius: 16px; border: 1px solid transparent; padding: 0 6px 6px 13px; transition: border-color .15s, box-shadow .15s; }
.csrs-comp:focus-within { border-color: var(--a); box-shadow: rgb(49, 41, 15) 0 0 0 3px, rgba(0, 0, 0, .02) 0 2px 3px 0; }
.csrs-comp textarea { display: block; width: 100%; resize: none; padding: 14px 0 4px; min-height: 36px; max-height: 120px; font-size: 13.6px; line-height: 18px; letter-spacing: .15px; color: #1c293b; }
.csrs-comp textarea::placeholder { color: rgba(255, 255, 255, .45); }
.csrs-tools { display: flex; align-items: center; gap: 10px; height: 36px; }
.csrs-tools .t { width: 16px; height: 16px; border-radius: 2px; cursor: pointer; display: flex; }
.csrs-tools .t:hover .csrs-ic { background-color: #1c293b; }
.csrs-tools .sp { flex: 1; }
.csrs-send { width: 36px; height: 36px; border-radius: 13px; background: var(--a); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: rgba(0, 0, 0, .16) 0 1px 2px 0, rgba(255, 255, 255, .45) 0 1px 2px 0 inset, rgba(0, 0, 0, .24) 0 -1px 2px 0 inset; transition: opacity .15s; }
.csrs-send .csrs-ic { background-color: #1c293b; width: 17px; height: 17px; }
.csrs-err { color: #ff8a8a; font-size: 11.5px; padding: 6px 4px 0; display: none; }
.csrs-err.on { display: block; }

/* статьи / поиск */
.csrs-pad { padding: 18px 15px 30px; }
.csrs-cat { margin-bottom: 18px; }
.csrs-cat h4 { font-weight: 700; font-size: 13.2px; padding: 0 10px 8px; }
.csrs-cat .box { background: var(--c2); border-radius: 10px; padding: 5px; }
.csrs-art-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.4px; cursor: pointer; margin-bottom: 14px; opacity: .85; }
.csrs-art-back .csrs-ic { transform: rotate(180deg); width: 12px; height: 12px; background-color: #1c293b; }
.csrs-art h1 { font-weight: 700; font-size: 17px; line-height: 23px; margin-bottom: 12px; }
.csrs-art .txt { font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .88); }
.csrs-art .txt p { margin-bottom: 6px; }
.csrs-art .txt b, .csrs-art .txt strong { color: #1c293b; }
.csrs-art .txt a { color: var(--a); text-decoration: underline; }
.csrs-art .txt ul, .csrs-art .txt ol { padding-left: 18px; margin-bottom: 6px; }
.csrs-art .txt li { list-style: disc; }
.csrs-art .ask { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; background: var(--a); border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 12.6px; cursor: pointer; }
.csrs-art .ask .csrs-ic { background-color: #1c293b; }
.csrs-sbox { display: flex; align-items: center; gap: 8px; background: var(--c2); border-radius: 12px; padding: 0 14px; height: 42px; margin-bottom: 14px; border: 1px solid transparent; }
.csrs-sbox:focus-within { border-color: var(--a); }
.csrs-sbox input { flex: 1; font-size: 13.6px; color: #1c293b; height: 100%; }
.csrs-sbox input::placeholder { color: rgba(255, 255, 255, .45); }
.csrs-empty { text-align: center; font-size: 12.4px; opacity: .6; padding: 20px 0; }

/* меню «три точки» */
.csrs-menu { position: absolute; right: 12px; top: 50px; z-index: 5; background: #1d1d1d; border: 1px solid var(--c2); border-radius: 10px; padding: 5px; display: none; min-width: 190px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.csrs-menu.on { display: block; }
.csrs-menu div { padding: 9px 12px; border-radius: 7px; font-size: 12.4px; cursor: pointer; }
.csrs-menu div:hover { background: rgba(255, 255, 255, .06); }

.csrs-zoom { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; align-items: center; justify-content: center; z-index: 2; cursor: zoom-out; }
.csrs-zoom.on { display: flex; }
.csrs-zoom img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

/* ---------- телефон: окно на весь экран ---------- */
@media (max-width: 480px) {
  .csrs { right: 14px; bottom: 14px; }
  .csrs-box { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; transform: translateY(20px); }
  .csrs-head { border-radius: 0; }
  .csrs.open .csrs-launch { display: none; }
  .csrs-dots { display: none; }
  .csrs-x { display: flex; }
  .csrs-comp textarea { font-size: 16px; }
}

/* ===== кнопка отправки: пустое состояние как у Crisp ===== */
.csrs-send.off { background: transparent; box-shadow: none; cursor: default; }
.csrs-send.off .csrs-ic { background-color: rgb(102, 120, 138); opacity: .4; }

/* ===== панель эмодзи (Crisp): поиск, категории с липкими заголовками, вкладка внизу ===== */
.csrs-emoji { position: absolute; left: 10px; right: 10px; bottom: 100%; margin-bottom: -46px; height: 290px; z-index: 3; display: none; flex-direction: column;
  background: var(--bg); border: 1px solid rgba(71, 71, 71, .5); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); overflow: hidden; }
.csrs-emoji.on { display: flex; }
.csrs-esearch { flex: none; display: flex; align-items: center; gap: 10px; margin: 12px 14px 4px; height: 38px; padding: 0 14px; border: 1px solid var(--a); border-radius: 12px; background: var(--c2); box-shadow: rgb(49, 41, 15) 0 0 0 3px; }
.csrs-esearch .csrs-ic { background-color: #1c293b; }
.csrs-esearch input { flex: 1; min-width: 0; font-size: 13px; color: #1c293b; }
.csrs-esearch input::placeholder { color: rgba(255, 255, 255, .5); }
.csrs-elist { flex: 1; overflow-y: auto; padding: 0 12px 40px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.csrs-elist h5 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 0 8px 4px; background: rgba(18, 18, 18, .976); font-weight: 700; font-size: 11.6px; line-height: 11.6px; }
.csrs-elist .grid { display: flex; flex-wrap: wrap; }
.csrs-elist button { width: 10%; aspect-ratio: 1; max-width: 12.5%; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 22px; line-height: 1; cursor: pointer;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: background .1s, transform .1s; }
.csrs-elist button:hover { background: rgba(255, 255, 255, .08); transform: scale(1.12); }
.csrs-etabs { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 20px; background: rgba(48, 48, 48, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.csrs-etabs span { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 14px; font-weight: 700; font-size: 11px; }
.csrs-etabs span.on { background: var(--a); }
.csrs-etabs .csrs-ic { background-color: #1c293b; }

/* ===== запись голосового ===== */
.csrs-rec { display: none; }
.csrs-comp.recording { border-color: rgba(71, 71, 71, .5); box-shadow: rgba(0, 0, 0, .02) 0 2px 3px 0; }
.csrs-comp.recording .csrs-cmain { display: none; }
.csrs-comp.recording .csrs-rec { display: block; }
.csrs-wave { display: block; width: 100%; height: 40px; }
.csrs-rec-row { display: flex; align-items: center; height: 36px; margin-top: 2px; }
.csrs-rec-row .t { display: flex; width: 16px; height: 16px; cursor: pointer; margin-left: 3px; }
.csrs-rec-row .sp { flex: 1; }
.csrs-ic.red { background-color: rgb(238, 51, 75); }
.csrs-ic.dark { background-color: rgb(28, 41, 59); }
.csrs-rec-pill { position: relative; display: flex; align-items: center; height: 30px; padding: 0 10px 0 12px; border-radius: 10px; background: rgb(238, 51, 75); overflow: hidden; }
.csrs-rec-pill > i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .125); }
.csrs-rec-pill b { font-weight: 400; font-size: 12px; letter-spacing: .15px; color: rgb(28, 41, 59); padding-left: 10px; min-width: 38px; font-variant-numeric: tabular-nums; }
.csrs-rec-pill .csrs-ic { animation: csrsPulse 1.2s ease-in-out infinite; }
@keyframes csrsPulse { 50% { opacity: .45; } }

/* ===== вложения в пузырях ===== */
.csrs-m .col > * + * { margin-top: 6px; }
.csrs-m.me .col { display: flex; flex-direction: column; align-items: flex-end; }
.csrs-m.op .col { display: flex; flex-direction: column; align-items: flex-start; }
.csrs-media { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--c2); max-width: 240px; }
.csrs-media img { display: block; max-width: 240px; max-height: 280px; min-width: 60px; min-height: 40px; object-fit: cover; cursor: zoom-in; }
.csrs-media video { display: block; max-width: 240px; max-height: 300px; background: #000; }
.csrs-file { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 250px; padding: 5px 14px 5px 5px; border-radius: 12px; background: var(--c2); cursor: pointer; overflow: hidden; }
.csrs-file .dl { flex: none; width: 30px; height: 30px; border-radius: 11px; background: var(--a); display: flex; align-items: center; justify-content: center; }
.csrs-file .dl .csrs-ic { background-color: #1c293b; }
.csrs-file b { font-weight: 700; font-size: 11.4px; line-height: 18px; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csrs-file:hover { filter: brightness(1.1); }
.csrs-audio { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 12px; background: var(--c2); overflow: hidden; }
.csrs-audio .pb { flex: none; width: 30px; height: 30px; border-radius: 11px; background: var(--a); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.csrs-audio .pb .csrs-ic { background-color: #1c293b; }
.csrs-audio .tr { position: relative; width: 100px; height: 3px; border-radius: 3px; background: rgb(71, 71, 71); cursor: pointer; }
.csrs-audio .tr::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.csrs-audio .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--a); }
.csrs-audio .tr b { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 100%; background: var(--a); }
.csrs-audio .tm { min-width: 26px; font-size: 12px; line-height: 23px; letter-spacing: .5px; color: var(--ic); font-variant-numeric: tabular-nums; }
/* варианты для сообщений игрока (жёлтый пузырь) */
.csrs-m.me .csrs-file, .csrs-m.me .csrs-audio { background: var(--a); }
.csrs-m.me .csrs-file .dl, .csrs-m.me .csrs-audio .pb { background: rgba(0, 0, 0, .22); }
.csrs-m.me .csrs-audio .tr { background: rgba(0, 0, 0, .25); }
.csrs-m.me .csrs-audio .tr i, .csrs-m.me .csrs-audio .tr b { background: #1c293b; }
.csrs-m.me .csrs-audio .tm { color: rgba(255, 255, 255, .9); }
/* прогресс загрузки */
.csrs-up { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .25); }
.csrs-up i { display: block; height: 100%; width: 0; background: #1c293b; transition: width .15s; }
.csrs-m.pending .csrs-media img, .csrs-m.pending .csrs-media video { opacity: .6; }
.csrs-m.failed .csrs-media, .csrs-m.failed .csrs-file, .csrs-m.failed .csrs-audio { opacity: .5; }
.csrs-fail { font-size: 10.5px; color: #ff8a8a; }

/* ===== перетаскивание файлов ===== */
.csrs-drop { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(18, 18, 18, .82); backdrop-filter: blur(2px); }
.csrs-drop.on { display: flex; }
.csrs-drop > div { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--a); border-radius: 14px; }
.csrs-drop .csrs-ic { background-color: var(--a); }
.csrs-drop b { font-weight: 700; font-size: 14px; }
.csrs-drop span { font-size: 12px; opacity: .7; }

/* ===== превью сообщения над кнопкой, когда чат закрыт ===== */
.csrs-peek { position: absolute; right: 0; bottom: 70px; width: 300px; display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.csrs-peek.on { display: flex; animation: csrsPeek .3s ease; }
.csrs.open .csrs-peek { display: none; }
@keyframes csrsPeek { from { opacity: 0; transform: translateY(10px); } }
.csrs-peek .x { width: 22px; height: 22px; border-radius: 50%; background: rgba(120, 120, 120, .6); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; cursor: pointer; }
.csrs-peek .card { display: flex; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid rgba(71, 71, 71, .6); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; }
.csrs-peek .card .ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--a) url(assets/original-logo.webp) center / cover no-repeat; }
.csrs-peek .card b { display: block; font-weight: 700; font-size: 12px; margin-bottom: 3px; }
.csrs-peek .card p { font-size: 12.6px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.csrs-peek .reply { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 19px; background: var(--a); font-weight: 700; font-size: 12.6px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.csrs-peek .reply .csrs-ic { background-color: #1c293b; }
@media (max-width: 480px) {
  .csrs-peek { width: calc(100vw - 28px); }
}
/* глобальный CSS сайта ставит img, svg, span { pointer-events: none } — внутри виджета возвращаем клики */
.csrs span, .csrs img, .csrs svg, .csrs-launch span, .csrs-launch img, .csrs-peek span, .csrs-peek img { pointer-events: auto; }

/* Colors, typography and layout follow the original Caser Crisp light theme. */
.csrs{--a:#df8110;--bg:#e4e6e7;--c2:#d7dce0;--c3:#eef0f2;--ic:#66788a;color:#1c293b}
.csrs[hidden]{display:none!important}
.csrs-launch{background:var(--a) url(assets/original-logo.webp) center/cover no-repeat;border:0;box-shadow:0 4px 10px #0000000d}
.csrs-badge{color:#fff}
.csrs-head{background:transparent}
.csrs-head::before{background:#000;opacity:.075;-webkit-mask:url(assets/floor-tile.svg) 0 0/32px 32px repeat;mask:url(assets/floor-tile.svg) 0 0/32px 32px repeat}
.csrs-head::after{background:linear-gradient(#e4e6e700,var(--bg))}
.csrs-pill.on{color:#fff;background:var(--a)}
.csrs-pill.on .csrs-ic,.csrs-send .csrs-ic,.csrs-etabs .csrs-ic,.csrs-art .ask .csrs-ic,.csrs-peek .reply .csrs-ic{background-color:#fff}
.csrs-pill:not(.on) .csrs-ic{background-color:#1c293b}
.csrs-pill:not(.on):hover,.csrs-dots:hover,.csrs-menu div:hover,.csrs-alink:hover{background:#1c293b0b}
.csrs-dots .csrs-ic{background-color:#66788a}
.csrs-intro{border-bottom:1px solid #ccd3d9}
.csrs-intro.chat{flex-direction:column;gap:12px;padding:0 6px 17px}
.csrs-intro.chat h2{font-size:13px;line-height:18px}
.csrs-intro.op .csrs-av::after{display:none}
.csrs-intro.op .dd{background:#d7dce0}
.csrs-faces{display:flex;justify-content:center;padding:0 7px}
.csrs-face{width:46px;height:46px;border-radius:50%;border:3px solid var(--bg);background-position:center;background-size:cover;margin-left:-7px}
.csrs-face-default{background-color:#cbd2d7;background-image:url(assets/avatar-default.svg);background-size:60%;background-repeat:no-repeat}
.csrs-face-one{background-image:url(assets/operator-1.png)}
.csrs-face-two{background-image:url(assets/operator-2.png)}
.csrs-face-brand{background-image:url(assets/original-logo.webp)}
.csrs-msgs{padding-top:15px}.csrs-m.greet{gap:8px}.csrs-m.greet .ava{margin-top:3px}
.csrs-m.me .csrs-bub,.csrs-m.me .csrs-file,.csrs-m.me .csrs-audio{color:#fff}
.csrs-m .tm{color:#66788a;opacity:1}
.csrs-comp{background:#fff;border:1px solid #d9dfe4}
.csrs-comp textarea,.csrs-sbox input,.csrs-esearch input{color:#1c293b}
.csrs-comp textarea::placeholder,.csrs-sbox input::placeholder,.csrs-esearch input::placeholder{color:#66788a}
.csrs-comp:focus-within,.csrs-esearch{box-shadow:0 0 0 3px #ffddb8}
.csrs-tools .t:hover .csrs-ic{background-color:#1c293b}
.csrs-body,.csrs-elist{scrollbar-color:#bec8d1 transparent}
.csrs-menu{background:#fff;border-color:#d7dce0;box-shadow:0 6px 24px #0000001a}
.csrs-err,.csrs-fail{color:#bd293c}
.csrs-art .txt{color:#374151}.csrs-art .txt b,.csrs-art .txt strong{color:#1c293b}
.csrs-art .ask,.csrs-peek .reply,.csrs-etabs span.on{color:#fff}
.csrs-emoji{background:#fff;border-color:#d7dce0;box-shadow:0 -8px 24px #0000001a}
.csrs-elist h5{background:#fffffff9}
.csrs-etabs{background:#e4e6e7ed;box-shadow:0 4px 14px #0000001a}
.csrs-esearch .csrs-ic{background-color:#66788a}
.csrs-drop{background:#e4e6e7e8}
.csrs-peek .card{background:#fff;border-color:#d7dce0;box-shadow:0 8px 24px #0000001a}
.csrs-contact{display:none;flex:none;margin:0 8px 8px;padding:16px 30px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #edf0f6,0 4px 14px #0000000c;text-align:center}
.csrs.v-chat.needs-email .csrs-contact:not([hidden]){display:block}
.csrs.v-chat.needs-email .csrs-foot{display:none}
.csrs-contact h3{font-size:16px;line-height:22px;font-weight:700;margin:0 -20px 8px}
.csrs-contact p{font-size:13px;line-height:18px;margin:0 0 20px}
.csrs-contact input{display:block;width:100%;height:46px;background:#f0f2f5;border:1px solid #d7dce0;border-radius:12px;padding:0 16px;font-size:12.4px;color:#1c293b}
.csrs-contact input::placeholder{color:#66788a}
.csrs-contact input:focus{border-color:#ff8e05;box-shadow:0 0 0 3px #ffddb8}
.csrs-contact button{display:inline-flex;justify-content:center;align-items:center;height:44px;margin-top:18px;padding:0 17px;border-radius:8px;background:#e6810d;color:white;font-size:13px;font-weight:700;cursor:pointer;box-shadow:inset 0 -1px 2px #0000001a,0 1px 2px #00000014}
.csrs-contact button:hover{background:#d67609}
.csrs-contact button:active{transform:translateY(1px)}
.csrs-article-search{display:flex;align-items:center;gap:9px;width:100%;border-radius:10px;background:#f0f2f5;margin-bottom:16px;padding:13px 15px;font-size:13px;text-align:left;cursor:pointer}
.csrs [role=button]:focus-visible,.csrs button:focus-visible,.csrs a:focus-visible{outline:2px solid #df8110;outline-offset:2px}
@media(max-width:900px){.csrs{bottom:calc(80px + env(safe-area-inset-bottom));right:14px}.csrs.open .csrs-box{height:calc(100dvh - 160px);max-height:730px}}
@media(max-width:480px){.csrs.open .csrs-box{height:100dvh;max-height:none}.csrs-foot{padding-bottom:env(safe-area-inset-bottom)}.csrs-contact{margin-bottom:calc(8px + env(safe-area-inset-bottom))}.csrs-contact input{font-size:16px}}

/* Measured against the current original Caser widget. Grey is a modal overlay, not the normal chat background. */
.csrs{--a:#df7e15;--bg:#fff;--c2:#f0f2f5;--c3:#edf0f6;--ic:#66788a;color:#1c293b}
.csrs-box{width:400px;height:min(730px,calc(100dvh - 110px));background:#fff}
.csrs.expanded .csrs-box{width:500px}
.csrs-launch,.csrs-av,.csrs-m.op .ava,.csrs-peek .card .ava{background:#df7e15 url(assets/support-logo-v3.webp) center/cover no-repeat}
.csrs-head{background-image:linear-gradient(#ffffff1a 0%,#ffffff66 99%)}
.csrs-head::after{background:linear-gradient(#ffffff00,#fff)}
.csrs-tabs{background:#f0f2f5}.csrs-pill.on{background:#df7e15;color:white}
.csrs-pill.on::before{background:linear-gradient(#ffffff1a 0%,rgba(189,107,17,.35) 30%,rgba(189,107,17,0) 100%)}
.csrs-intro{border-color:rgba(28,41,59,.08)}
.csrs-intro.chat{gap:13px;padding:0 6px 18px}
.csrs-face{width:44px;height:44px;border:3px solid #fff;margin-left:-7px}
.csrs-face-david{background-image:url(assets/support-david-v3.webp)}
.csrs-face-george{background-image:url(assets/support-george-v3.webp)}
.csrs-face-victor{background-image:url(assets/support-victor-v3.webp)}
.csrs-face-brand{background-image:url(assets/support-logo-v3.webp)}
.csrs-bub{background:#f0f2f5}.csrs-intro.op .dd{background:#f0f2f5}
.csrs-home .csrs-row,.csrs-home .csrs-alink{width:100%;text-align:left}
.csrs-home .csrs-alink{white-space:normal;line-height:20px}
.csrs-menu{padding:8px;min-width:205px;border-color:#edf0f6}
.csrs-menu>strong{display:block;font-size:11.2px;color:#66788a;font-weight:400;padding:3px 9px 6px}
.csrs-menu>button{display:block;width:100%;padding:10px 9px;text-align:left;font-size:12.4px;border-radius:7px;cursor:pointer}
.csrs-menu>button:hover{background:#f0f2f5}
.csrs-contact-layer{position:absolute;inset:0;z-index:9;background:rgba(28,41,59,.12);display:block}
.csrs-contact-layer[hidden]{display:none!important}
.csrs .csrs-contact{display:block;position:absolute;bottom:8px;left:8px;right:8px;margin:0;padding:18px 15px 15px;border-radius:12px;background:#fff;box-shadow:0 4px 12px #0000000f,0 0 6px #0000000a}
.csrs-contact h3{font-size:15.2px;line-height:18px;margin:0 0 12px;font-weight:700}
.csrs-contact p{font-size:12.4px;line-height:18px;margin:0 0 16px}
.csrs-contact input{height:46px;border:1px solid transparent;border-radius:12px;background:#f0f2f5;padding:13px 6px 13px 15px;font-size:12.4px}
.csrs-contact input:focus{border-color:#df7e15;box-shadow:0 0 0 3px #faecdc,0 2px 3px #00000005}
.csrs-contact button{height:44px;margin-top:18px;padding:10px 25px 11px;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:#df7e15;font-size:13.2px;line-height:21px;color:#fff;box-shadow:0 2px 4px #0000000d}
.csrs-contact button:hover{background:#bd6b11}.csrs-contact button:disabled{opacity:.65;cursor:wait}
.csrs-contact-error{color:#bd293c;font-size:11.6px;line-height:16px;margin-top:8px}.csrs-contact-error:empty{display:none}
.csrs.v-chat.needs-email .csrs-foot{display:block}
.csrs-contact-lock{display:block;width:100%;text-align:center;font-size:11.2px;line-height:16px;padding:7px 0;color:#66788a;cursor:pointer}
.csrs-contact-lock[hidden]{display:none}
.csrs.needs-email .csrs-comp{border-color:#edf0f6}.csrs.needs-email .csrs-comp textarea{opacity:.65;cursor:not-allowed}
.csrs-contact-request{margin:0 0 16px 36px;padding:12px 14px;background:#f0f2f5;border-radius:12px;font-size:12.6px;line-height:18px}
.csrs-contact-request button{display:block;border-radius:8px;background:#fff;margin-top:10px;padding:8px 12px;font-size:12.4px;cursor:pointer;box-shadow:0 1px 2px #0000000d}
.csrs-help-head{position:relative;margin:0 15px;padding:0 10px 16px;text-align:center;border-bottom:1px solid rgba(28,41,59,.08)}
.csrs-help-head h2{font-size:13px;line-height:18px;font-weight:700;margin-bottom:18px}
.csrs-help-head .csrs-sbox{margin:0;height:38px;border-radius:12px;background:#f0f2f5}
.csrs-help-head .csrs-sbox:focus-within{border-color:#df7e15;box-shadow:0 0 0 3px #faecdc}
.csrs-help-head .csrs-sbox input{min-width:0;font-size:13.6px;line-height:18px;color:#1c293b}
.csrs-help-head.detail{padding:0 38px 12px;min-height:56px}
.csrs-help-head.detail h2{font-size:14px;line-height:20px;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrs-help-head.detail p{font-size:11.6px;line-height:16px;color:#66788a}
.csrs-help-back,.csrs-help-external{position:absolute;left:4px;top:3px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#df7e15;color:#fff;cursor:pointer}
.csrs-help-back .csrs-ic{transform:rotate(180deg);background:#fff}.csrs-help-external{left:auto;right:4px;background:#f0f2f5;color:#1c293b;font-size:20px}
.csrs .js-arts{padding:10px 10px 24px}.csrs-help-result{display:flex;align-items:center;gap:12px;position:relative;padding:13px 16px;width:100%;border-radius:10px;text-align:left;cursor:pointer}
.csrs-help-result+.csrs-help-result:before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;background:rgba(28,41,59,.08)}
.csrs-help-result:hover,.csrs-help-result:focus-visible{background:#f0f2f5}.csrs-help-result-copy{flex:1;min-width:0}
.csrs-help-result strong{display:block;font-size:13.6px;line-height:18px;font-weight:700}
.csrs-help-result-copy>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.4px;line-height:18px;margin-top:4px;color:#374f64}
.csrs.v-articles .js-v-article.on{display:flex;height:100%;min-height:0}.csrs .js-art{padding:0;width:100%;height:100%;min-height:0}
.csrs-article-reader{display:block;width:100%;height:100%;border:0;background:#fff}
.csrs .csrs-empty{padding:24px 16px;color:#66788a;opacity:1}
.csrs [role=button]:focus-visible,.csrs button:focus-visible,.csrs a:focus-visible{outline-color:#df7e15}
@media(max-width:1300px){.csrs-box{width:360px}}
@media(max-width:900px){.csrs.open .csrs-box{height:calc(100dvh - 160px)}}
@media(max-width:600px){.csrs.expanded .csrs-box{width:min(500px,calc(100vw - 28px))}}
@media(max-width:480px){.csrs-box,.csrs.expanded .csrs-box{width:100%;height:100dvh}.csrs.open .csrs-box{height:100dvh}.csrs .csrs-contact{bottom:calc(8px + env(safe-area-inset-bottom))}.csrs-contact input,.csrs-help-head .csrs-sbox input{font-size:16px}}

/* Keep the portrait from the supplied reference, despite the original service changing its avatar. */
.csrs-face-george{background-image:url(assets/support-george-reference.png);background-size:439px 766px;background-position:-178px -75px}

/* Crisp's viewport sizing is based on both dimensions, not just the width. */
.csrs{--support-width:360px;--support-expanded-width:500px;--support-height:610px;right:24px;bottom:20px}
.csrs .csrs-box{width:var(--support-width);height:var(--support-height);max-height:none;transition:width .15s ease-in-out,height .15s ease-in-out,opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.csrs.open .csrs-box{height:var(--support-height);transition:width .15s ease-in-out,height .15s ease-in-out,opacity .18s ease,transform .18s ease}
.csrs.expanded .csrs-box{width:var(--support-expanded-width);height:calc(100dvh - 112px)}
@media(min-height:841px) and (min-width:641px){.csrs{--support-width:400px;--support-expanded-width:600px;--support-height:730px}}
@media(max-height:719px),(max-width:539px){.csrs{--support-width:320px;--support-expanded-width:440px;--support-height:490px}}
@media(max-height:599px),(max-width:479px){
 .csrs.open{position:fixed;inset:0}.csrs.open .csrs-box,.csrs.open.expanded .csrs-box{position:fixed;inset:0;width:100%;height:100dvh;max-height:none;border-radius:0;transform:none;transition:none}
 .csrs.open .csrs-launch{display:none}.csrs.open .csrs-x{display:block}.csrs .csrs-foot{padding-bottom:env(safe-area-inset-bottom)}
}
.csrs-faces{overflow:visible}.csrs-face{position:relative;flex:none;cursor:default;outline-offset:2px}
.csrs-face:focus-visible{outline:2px solid var(--a)}
.csrs-face-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,3px);white-space:nowrap;background:rgba(28,41,59,.94);color:#fff;border-radius:6px;padding:0 12px;line-height:28px;font-size:11.2px;letter-spacing:.1px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s .1s,transform .1s .1s,visibility .1s .1s;z-index:20}
.csrs-face-label:after{content:'';position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:rgba(28,41,59,.94)}
.csrs-face:hover,.csrs-face:focus-visible{z-index:5}.csrs-face:hover .csrs-face-label,.csrs-face:focus-visible .csrs-face-label{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .15s,transform .15s,visibility .15s}
.csrs-topic-options{display:flex;flex-wrap:wrap;gap:4px 6px;padding-top:6px}
.csrs-topic{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--a);border-radius:11px;color:var(--a);background:white;font-size:11.2px;font-weight:700;line-height:16px;padding:7px 13px;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.csrs-topic>span{font-size:16px;font-weight:400}.csrs-topic:hover{background:var(--a);color:#fff}.csrs-topic:active{transform:translateY(1px)}.csrs-topic:disabled{opacity:.55;cursor:wait}
.csrs-topic.selected{background:var(--a);color:white;opacity:1}.csrs-topic:disabled{cursor:default}
.csrs-m.bot .col{max-width:100%}.csrs-m.bot{padding-left:0}.csrs-m.bot .ava{display:none}.csrs-m.bot .who{display:none}
.csrs-bot-articles{display:flex;flex-direction:column;gap:6px;margin-top:8px}.csrs-bot-articles button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:#f0f2f5;border-radius:10px;font-size:12.4px;line-height:18px;text-align:left;cursor:pointer}.csrs-bot-articles button>span:not(.csrs-ic){flex:1}.csrs-bot-articles button:hover{background:#e7ebef}
.csrs-m{will-change:auto}.csrs .js-art{position:relative}.csrs-reader-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:1;color:#66788a;font-size:12.4px}.csrs-reader-loading[hidden]{display:none}.csrs-reader-loading:before{content:'';width:18px;height:18px;border:2px solid #edf0f6;border-top-color:var(--a);border-radius:50%;margin-right:10px;animation:csrs-spin .7s linear infinite}
@keyframes csrs-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.csrs .csrs-box,.csrs.open .csrs-box,.csrs-face-label,.csrs-topic{transition:none!important}.csrs-reader-loading:before{animation:none}}

/* Small status details; the original support layout and palette stay intact. */
.csrs .csrs-receipt{display:block;align-self:flex-end;text-align:right;font-size:10px;line-height:16px;color:#7e8a98;margin:3px 2px 0}
.csrs .csrs-receipt.read{color:#be6b11}
.csrs .csrs-typing{display:flex;align-items:center;gap:4px;padding:9px 14px 12px;color:#7e8a98;font-size:11px}
.csrs .csrs-typing[hidden]{display:none}
.csrs .csrs-typing span{margin-left:4px}
.csrs .csrs-typing i{width:4px;height:4px;border-radius:50%;background:#df7e15;animation:csrs-live-dot 1.2s infinite}
.csrs .csrs-typing i:nth-child(2){animation-delay:.16s}.csrs .csrs-typing i:nth-child(3){animation-delay:.32s}
@keyframes csrs-live-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.csrs .csrs-typing i{animation:none}}