/* Виджет поддержки. Самодостаточен: свои цвета и шрифты, ничего не тянет из ui.css,
   чтобы одинаково работать и на лендинге (свои inline-стили), и на страницах кабинета. */
.bp-sup, .bp-sup * { box-sizing: border-box; }

.bp-sup-bubble{
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif; color: #1e1030;
  background: linear-gradient(180deg, #b98cf0, #8a4fd6);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bp-sup-bubble:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.bp-sup-bubble .bp-sup-ic{ font-size: 17px; }
.bp-sup-bubble.bp-hide{ display: none; }
@media (max-width: 520px){ .bp-sup-bubble .bp-sup-txt{ display: none; } .bp-sup-bubble{ padding: 14px; } }

.bp-sup-badge{
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  background: #d0567e; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.bp-sup-badge.bp-on{ display: inline-flex; }

.bp-sup-panel{
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483001;
  width: 370px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 40px);
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.08);
  background: #1a1230; color: #efe9fa;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  font: 400 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: bp-sup-in .16s ease;
}
.bp-sup-panel.bp-open{ display: flex; }
@keyframes bp-sup-in{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

.bp-sup-head{
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: linear-gradient(180deg, #281c44, #1c1434);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.bp-sup-head .bp-sup-logo{
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(180deg, #b98cf0, #8a4fd6);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.bp-sup-head h4{ margin: 0; font-size: 15px; font-weight: 700; }
.bp-sup-head p{ margin: 2px 0 0; font-size: 12px; color: #a99cc6; }
.bp-sup-head .bp-sup-x{
  margin-left: auto; background: transparent; border: 0; color: #a99cc6;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 8px;
}
.bp-sup-head .bp-sup-x:hover{ color: #fff; background: rgba(255,255,255,.08); }
.bp-sup-head .bp-sup-hback{
  background: transparent; border: 0; color: #a99cc6; font-size: 24px; line-height: 1;
  cursor: pointer; padding: 2px 8px; border-radius: 8px; flex: 0 0 auto;
}
.bp-sup-head .bp-sup-hback:hover{ color: #fff; background: rgba(255,255,255,.08); }
.bp-sup-head .bp-sup-hback[hidden]{ display: none; }

.bp-sup-body{ flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.bp-sup-intro{ color: #b3a8c8; font-size: 13px; margin: 0 0 12px; }

.bp-sup-q{
  display: block; width: 100%; text-align: left; margin: 0 0 8px; cursor: pointer;
  padding: 11px 13px; border-radius: 11px; color: #efe9fa;
  background: #241a3c; border: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px; transition: background .12s ease, border-color .12s ease;
}
.bp-sup-q:hover{ background: #2e2150; border-color: rgba(174,121,238,.4); }

.bp-sup-answer{ background: #241a3c; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px; }
.bp-sup-answer .bp-q{ font-weight: 700; margin: 0 0 8px; }
.bp-sup-answer .bp-a{ color: #d7cee8; margin: 0; }
.bp-sup-back{
  background: transparent; border: 0; color: #b98cf0; cursor: pointer;
  font-size: 13px; padding: 4px 0; margin-bottom: 10px; display: inline-flex; gap: 6px; align-items: center;
}

.bp-sup-op{
  display: block; width: 100%; margin-top: 14px; padding: 12px; cursor: pointer;
  border: 0; border-radius: 11px; font-weight: 700; font-size: 14px; color: #1e1030;
  background: linear-gradient(180deg, #b98cf0, #8a4fd6);
}
.bp-sup-op.bp-secondary{ background: #2e2150; color: #efe9fa; border: 1px solid rgba(255,255,255,.08); }

/* чат */
.bp-sup-msgs{ display: flex; flex-direction: column; gap: 8px; }
.bp-sup-msg{ max-width: 82%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; word-wrap: break-word; white-space: pre-wrap; }
.bp-sup-msg.bp-me{ align-self: flex-end; background: linear-gradient(180deg, #b98cf0, #8a4fd6); color: #1e1030; border-bottom-right-radius: 4px; }
.bp-sup-msg.bp-them{ align-self: flex-start; background: #281c44; color: #efe9fa; border-bottom-left-radius: 4px; }
.bp-sup-msg.bp-sys{ align-self: center; background: transparent; color: #8a7fa8; font-size: 12px; text-align: center; }

.bp-sup-foot{ padding: 10px; border-top: 1px solid rgba(255,255,255,.07); display: none; gap: 8px; background: #160e28; }
.bp-sup-foot.bp-on{ display: flex; }
.bp-sup-foot textarea{
  flex: 1 1 auto; resize: none; height: 42px; max-height: 110px; padding: 10px 12px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.1); background: #241a3c; color: #efe9fa;
  font: inherit;
}
.bp-sup-foot textarea:focus{ outline: none; border-color: rgba(174,121,238,.5); }
.bp-sup-send{
  flex: 0 0 auto; width: 44px; border: 0; border-radius: 11px; cursor: pointer; font-size: 18px; color: #1e1030;
  background: linear-gradient(180deg, #b98cf0, #8a4fd6);
}
.bp-sup-send:disabled{ opacity: .5; cursor: default; }
.bp-sup-hint{ padding: 0 14px 12px; font-size: 12px; color: #8a7fa8; }


/* --- Балансы в шапке (чипы рядом с кнопками) --- */
.bp-bal{ display:inline-flex; align-items:center; gap:8px; }
.bp-bal-chip{ display:inline-flex; align-items:center; gap:5px; text-decoration:none; cursor:pointer;
  font-size:13px; font-weight:700; line-height:1; padding:9px 13px; border-radius:11px; white-space:nowrap;
  color:#efe9fa; background:linear-gradient(180deg,#251a40,#1a1230);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:border-color .15s ease, transform .12s ease; }
.bp-bal-chip:hover{ border-color:rgba(174,121,238,.6); transform:translateY(-1px); }
.bp-bal-chip b{ font-weight:800; }
.bp-bal-chip.money b{ color:#b98cf0; }
.bp-bal-chip.bonus{ background:linear-gradient(180deg,rgba(138,79,214,.20),rgba(138,79,214,.08));
  border-color:rgba(138,79,214,.45); color:#c9a6f5; }
@media (max-width:560px){ .bp-bal{ gap:6px; } .bp-bal-chip{ padding:8px 10px; font-size:12px; } }