/* Виджет поддержки — внешний вид снят с виджета Crisp оригинала (тема amber, dark) */
@font-face { font-family: "UPGS 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: "UPGS 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: "UPGS 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: "UPGS Noto"; font-weight: 700; src: url(assets/noto-cyr-bold.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }

.upgs, .upgs * { 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; }
.upgs { --a: rgb(225, 174, 1); --bg: rgb(18, 18, 18); --c2: rgb(48, 48, 48); --c3: rgb(66, 66, 66); --ic: rgb(211, 221, 230);
  position: fixed; right: 24px; bottom: 20px; z-index: 2147483000; font-family: "UPGS Noto", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1.3; color: #fff; }
.upgs b, .upgs strong { font-weight: 700; }
.upgs-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; }

/* ---------- кнопка ---------- */
.upgs-launch { position: relative; width: 54px; height: 54px; border-radius: 100%; background: var(--a) url(assets/logo.webp) center / cover no-repeat; box-shadow: 0 4px 10px rgba(0, 0, 0, .05); cursor: pointer; transition: transform .15s ease; }
.upgs-launch:hover { transform: scale(1.06); }
.upgs-launch:active { transform: scale(.96); }
.upgs-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; }
.upgs-badge.on { display: block; }

/* ---------- окно ---------- */
.upgs-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; }
.upgs.open .upgs-box { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }

/* шапка с узором «крестики-нолики» */
.upgs-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%); }
.upgs-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; }
.upgs-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18, 18, 18, 0) 0%, var(--bg) 100%); pointer-events: none; }
.upgs-head > * { position: relative; z-index: 1; }
.upgs-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 16px; }
.upgs-homebtn { width: 76px; height: 40px; padding: 4px 0; display: flex; }
.upgs-nav.chat .upgs-homebtn { width: 64px; }
.upgs-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; }
.upgs-pill .upgs-ic { background-color: #fff; }
.upgs-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; }
.upgs-pill.on::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(rgba(255, 255, 255, .1) 0%, rgba(196, 151, 0, .35) 30%, rgba(196, 151, 0, 0) 100%); pointer-events: none; }
.upgs-pill.on > * { position: relative; }
.upgs-tabs { display: flex; gap: 2px; background: var(--c2); border-radius: 20px; padding: 4px; }
.upgs-tabs .upgs-pill:not(.on):hover { background: rgba(255, 255, 255, .06); }
.upgs-more { width: 76px; display: flex; justify-content: flex-end; }
.upgs-nav.chat .upgs-more { width: 64px; }
.upgs-dots { padding: 10px 7px; border-radius: 5px; cursor: pointer; display: flex; }
.upgs-dots:hover { background: rgba(255, 255, 255, .06); }
.upgs-x { display: none; width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; line-height: 1; font-weight: 400; }

.upgs-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; }
.upgs-av { flex: none; width: 42px; height: 42px; border-radius: 42px; background: var(--a) url(assets/logo.webp) center / cover no-repeat; position: relative; }
.upgs-intro .t1 { font-weight: 700; font-size: 14.4px; line-height: 20px; }
.upgs-intro .t2 { font-size: 12.8px; line-height: 20px; }
.upgs-intro.chat { padding: 0 6px 11px; gap: 9px; }
.upgs-intro.chat .upgs-av { width: 36px; height: 36px; }
.upgs-intro.chat h2 { font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .2px; }
.upgs-intro.chat p { font-size: 11.6px; line-height: 16px; letter-spacing: .2px; margin-top: 3px; }
.upgs-intro.op { padding: 0 6px 14px; gap: 11px; }
.upgs-intro.op .upgs-av { width: 30px; height: 30px; }
.upgs-intro.op .upgs-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); }
.upgs-intro.op .nm { font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .2px; }
.upgs-intro.op .dd { width: 24px; height: 24px; border-radius: 7px; background: rgba(48, 48, 48, .5); display: flex; align-items: center; justify-content: center; }

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

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

/* чат */
.upgs-msgs { padding: 15px 15px 12px 15px; }
.upgs-date { text-align: center; font-weight: 700; font-size: 11.2px; line-height: 11.2px; padding: 3px 0 17px 36px; }
.upgs-m { display: flex; margin-bottom: 8px; }
.upgs-m .col { min-width: 0; max-width: calc(100% - 36px); }
.upgs-m.op { gap: 8px; }
.upgs-m.op .ava { flex: none; width: 28px; height: 28px; border-radius: 28px; background: var(--a) url(assets/logo.webp) center / cover no-repeat; margin-top: 3px; }
.upgs-m.op.cont .ava { visibility: hidden; height: 0; }
.upgs-m .who { font-size: 12px; line-height: 14px; padding-left: 1px; margin-bottom: 6px; }
.upgs-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); }
.upgs-bub a { text-decoration: underline; }
.upgs-bub img { display: block; max-width: 220px; max-height: 260px; border-radius: 8px; cursor: zoom-in; }
.upgs-bub img + span:not(:empty) { display: block; margin-top: 6px; }
.upgs-m.me { justify-content: flex-end; }
.upgs-m.me .upgs-bub { background: var(--a); }
.upgs-m.me.pending .upgs-bub { opacity: .6; }
.upgs-m .tm { font-size: 10.4px; opacity: .5; margin-top: 4px; }
.upgs-m.me .tm { text-align: right; }
.upgs-m.greet { padding-left: 0; }
.upgs-typing { display: none; padding: 0 0 8px 36px; }
.upgs-typing.on { display: block; }

/* поле ввода */
.upgs-foot { flex: none; padding: 0 10px 10px; display: none; }
.upgs.v-chat .upgs-foot { display: block; }
.upgs-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; }
.upgs-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; }
.upgs-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: #fff; }
.upgs-comp textarea::placeholder { color: rgba(255, 255, 255, .45); }
.upgs-tools { display: flex; align-items: center; gap: 10px; height: 36px; }
.upgs-tools .t { width: 16px; height: 16px; border-radius: 2px; cursor: pointer; display: flex; }
.upgs-tools .t:hover .upgs-ic { background-color: #fff; }
.upgs-tools .sp { flex: 1; }
.upgs-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; }
.upgs-send .upgs-ic { background-color: #fff; width: 17px; height: 17px; }
.upgs-send.off { opacity: .45; cursor: default; }
.upgs-emoji { position: absolute; left: 6px; bottom: 48px; width: 262px; padding: 10px; background: #1d1d1d; border: 1px solid var(--c2); border-radius: 12px; display: none; flex-wrap: wrap; gap: 2px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.upgs-emoji.on { display: flex; }
.upgs-emoji span { width: 30px; height: 30px; font-size: 19px; line-height: 30px; text-align: center; border-radius: 6px; cursor: pointer; }
.upgs-emoji span:hover { background: rgba(255, 255, 255, .08); }
.upgs-err { color: #ff8a8a; font-size: 11.5px; padding: 6px 4px 0; display: none; }
.upgs-err.on { display: block; }

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

/* меню «три точки» */
.upgs-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); }
.upgs-menu.on { display: block; }
.upgs-menu div { padding: 9px 12px; border-radius: 7px; font-size: 12.4px; cursor: pointer; }
.upgs-menu div:hover { background: rgba(255, 255, 255, .06); }

.upgs-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; }
.upgs-zoom.on { display: flex; }
.upgs-zoom img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }

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