/* 67BET chat + player profiles (see chat.js) */
.ch-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100%;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  background: #0A0C10;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.35);
  color: #F3F5F9;
  transform: translateX(105%);
  transition: transform 0.22s ease;
  padding-top: env(safe-area-inset-top, 0px);
}
.ch-panel.is-open { transform: none; }
@media (max-width: 767px) {
  .ch-panel { width: 100%; border-left: 0; }
  body.ch-open { overflow: hidden; }
}
body.tg-fullscreen .ch-panel { padding-top: calc(env(safe-area-inset-top, 0px) + 44px); }

.ch-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ch-head strong { font-size: 16px; }
.ch-head__sub { font-size: 12px; color: #8A93A6; flex: 1; }
.ch-x { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.06); color: #cbd5e1; font-size: 15px; cursor: pointer; }

.ch-list { flex: 1; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.ch-empty { margin: auto; color: #8A93A6; font-size: 14px; text-align: center; padding: 20px; }
.ch-msg { display: flex; gap: 8px; padding: 6px 6px; border-radius: 10px; }
.ch-msg:hover { background: rgba(255, 255, 255, 0.03); }
.ch-msg.is-mine { background: rgba(77, 157, 255, 0.07); }
.ch-msg__av { border: 0; padding: 0; background: none; cursor: pointer; flex: none; height: 30px; }
.ch-av { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.ch-msg__body { min-width: 0; flex: 1; }
.ch-msg__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-name { border: 0; padding: 0; background: none; color: #9fd0ff; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name.is-admin { color: #fbbf24; }
.ch-badge { font-size: 9.5px; font-weight: 900; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; background: #b45309; color: #fff; }
.ch-time { font-size: 11px; color: #7D8597; }
.ch-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.ch-tools button { border: 0; background: none; cursor: pointer; font-size: 12px; opacity: 0.6; padding: 0 3px; }
.ch-tools button:hover { opacity: 1; }
.ch-text { font-size: 14px; line-height: 1.4; color: #F3F5F9; overflow-wrap: anywhere; white-space: pre-wrap; }

.ch-form { display: flex; gap: 8px; padding: 10px 10px 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ch-form input { flex: 1; min-width: 0; height: 42px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: #0A0C10; color: #fff; padding: 0 12px; font: inherit; font-size: 15px; }
.ch-form input:focus { outline: 2px solid rgba(77, 157, 255, 0.55); outline-offset: 0; }
.ch-form button { width: 46px; height: 42px; border-radius: 10px; border: 0; background: #2F6FEB; color: #fff; font-size: 17px; cursor: pointer; }
.ch-form button:disabled { opacity: 0.5; }
.ch-rules { padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 11px; color: #7D8597; }

/* Profile popup (inside the chat panel) and the "My profile" card on the Wallet page */
.ch-profile { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ch-profile.hidden { display: none; }
.ch-profile__bg { position: absolute; inset: 0; background: rgba(5, 10, 20, 0.7); }
.ch-profile__card { position: relative; width: 100%; max-width: 340px; background: #12151B; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 18px 16px 16px; }
.ch-profile__card > .ch-x { position: absolute; top: 10px; right: 10px; }
.ch-pcard { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ch-pcard__name { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ch-stats div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 9px 6px; display: flex; flex-direction: column; gap: 3px; }
.ch-stats small { font-size: 11px; color: #8A93A6; }
.ch-stats b { font-size: 14px; color: #fff; }
.ch-split { font-size: 11.5px; color: #8A93A6; }
.ch-private { font-size: 13.5px; color: #cbd5e1; background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 12px; width: 100%; }
.ch-privacy { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.ch-privacy input { width: 18px; height: 18px; margin-top: 2px; accent-color: #2F6FEB; }
.ch-privacy span { display: flex; flex-direction: column; gap: 2px; }
.ch-privacy b { font-size: 14px; }
.ch-privacy small { font-size: 12px; color: #8A93A6; }
#ps-profile-card { margin: 14px 0; padding: 14px; border-radius: 14px; background: var(--ps-panel, #12151B); border: 1px solid var(--ps-line, rgba(255, 255, 255, 0.08)); }
#ps-profile-card:empty { display: none; }
.ch-own-title { font-size: 15px; margin: 0 0 10px; color: #fff; }

/* Chat button in the top bar */
.ps-chat-btn { position: relative; }
.ps-chat-btn .ch-dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.ps-chat-btn .ch-dot.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .ch-panel { transition: none; } }

/* Older server without chat: no button */
body.ch-unavailable .ps-chat-btn, body.ch-unavailable #ps-profile-card { display: none; }

/* Money Rain bar (under the chat title) and its result messages */
.ch-rain { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(135deg, rgba(45, 123, 255, 0.14), rgba(34, 197, 94, 0.08)); }
.ch-rain:empty { display: none; }
.ch-rain__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ch-rain__title { font-weight: 900; font-size: 14px; }
.ch-rain__pot { font-size: 12px; font-weight: 800; color: #86efac; background: rgba(34, 197, 94, 0.14); padding: 3px 8px; border-radius: 999px; }
.ch-rain__timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 900; font-size: 16px; color: #fff; }
.ch-rbtn { display: block; width: 100%; height: 42px; border-radius: 11px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform 0.08s ease, filter 0.15s ease; }
.ch-rbtn:active:not(:disabled) { transform: scale(0.98); }
.ch-rbtn--join { border: 0; color: #052e16; background: linear-gradient(180deg, #4ade80, #22c55e); box-shadow: 0 6px 16px rgba(34, 197, 94, 0.28); }
.ch-rbtn--join:hover { filter: brightness(1.06); }
.ch-rbtn--wait { border: 1px solid rgba(251, 191, 36, 0.55); color: #fde68a; background: rgba(251, 191, 36, 0.08); font-weight: 700; }
.ch-rbtn--in { border: 1px solid rgba(74, 222, 128, 0.5); color: #86efac; background: rgba(34, 197, 94, 0.1); cursor: default; }
.ch-rbtn--admin { border: 0; color: #fff; background: linear-gradient(180deg, #3d7eff, #2F6FEB); }
.ch-rain__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: #8A93A6; }
.ch-rain__meta span:first-child { color: #cbd5e1; font-weight: 700; }
.ch-rain__hint { margin-top: 4px; font-size: 11px; color: #7D8597; line-height: 1.4; }
.ch-sys { display: flex; align-items: center; gap: 8px; margin: 6px 4px; padding: 9px 12px; border-radius: 12px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #dcfce7; font-size: 13.5px; font-weight: 700; }
.ch-sys span { flex: 1; overflow-wrap: anywhere; }
.ch-sys small { font-size: 11px; color: #86efac; font-weight: 600; }
.ch-sys button { border: 0; background: none; cursor: pointer; opacity: 0.6; }

/* Admin: set the name shown in chat */
.ch-namebtn { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #cbd5e1; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.ch-namebtn.hidden { display: none; }

/* In-app dialog (instead of browser pop-ups, which Telegram on PC blocks) */
.ch-dialog { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ch-dialog.hidden { display: none; }
.ch-dialog__bg { position: absolute; inset: 0; background: rgba(5, 10, 20, 0.72); }
.ch-dialog__card { position: relative; width: 100%; max-width: 330px; background: #12151B; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 18px 16px 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.ch-dialog__card h3 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.ch-dialog__card p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #9fb0cc; }
.ch-dialog__card input { width: 100%; box-sizing: border-box; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: #0A0C10; color: #fff; padding: 0 12px; font: inherit; font-size: 15px; }
.ch-dialog__card input:focus { outline: 2px solid rgba(77, 157, 255, 0.55); outline-offset: 0; }
.ch-dialog__choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ch-chip { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #dbe7f8; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ch-chip:hover { background: rgba(255, 255, 255, 0.1); }
.ch-dialog__actions { display: flex; gap: 8px; margin-top: 14px; }
.ch-dialog__actions button { flex: 1; height: 42px; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.ch-dialog__cancel { border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #cbd5e1; }
.ch-dialog__ok { border: 0; background: linear-gradient(180deg, #3d7eff, #2F6FEB); color: #fff; }
.ch-dialog__ok.is-danger { background: linear-gradient(180deg, #ef4444, #dc2626); }


/* VIP rank icon next to names in chat and on profiles */
.ch-rank { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ch-rank .rk-icon { display: block; }
.ch-pcard__rank { display: inline-flex; align-items: center; gap: 6px; margin: 2px auto 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(255,255,255,.06); font-weight: 800; font-size: 13px; color: #fff; }