/* user-chat-telegram-ui */
/* Player chat: admin-parity large panel, Telegram sidebar, real avatars */

@media (min-width: 769px) {
  .chat-panel.open {
    width: 92vw !important;
    max-width: 1280px !important;
    height: 88vh !important;
    max-height: min(88vh, calc(100vh - 40px)) !important;
    margin-top: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
    overflow: hidden !important;
    backdrop-filter: blur(12px);
  }

  .chat-panel.open .chat-users-sidebar {
    width: 360px !important;
    min-width: 320px !important;
    max-width: 420px !important;
  }
}

@media (max-width: 768px) {
  .chat-panel.open {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}

.chat-panel.open {
  background: linear-gradient(180deg, rgba(18, 19, 24, 0.98), rgba(12, 13, 17, 0.98)) !important;
}

.chat-panel.open .chat-users-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(22, 24, 30, 0.98), rgba(16, 17, 22, 0.98)) !important;
  padding: 8px 0 12px !important;
}

.chat-panel.open .chat-head {
  min-height: 56px !important;
  padding: 0 16px 0 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(14, 16, 22, 0.92) !important;
}

.chat-panel.open .chat-head .chat-title,
.chat-panel.open .chat-head .chat-title-text,
.chat-panel.open .chat-head h3,
.chat-panel.open .chat-head span {
  font-size: 16px !important;
  font-weight: 700 !important;
}

.chat-panel.open .chat-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 10px 12px !important;
  background: rgba(12, 14, 20, 0.95) !important;
}

.chat-panel.open .chat-foot input,
.chat-panel.open .chat-foot textarea {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0f172a !important;
  color: #fff !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
}

.chat-panel.open .chat-foot .send-btn,
.chat-panel.open .chat-foot button.send-btn {
  border-radius: 999px !important;
  width: 42px !important;
  height: 42px !important;
  background: linear-gradient(135deg, #3d9aed, #2b7fd4) !important;
  border: none !important;
}

/* Sidebar rows — Telegram grid */
.chat-users-sidebar .chat-user-item {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  position: relative !important;
  margin: 4px 10px !important;
  padding: 10px 12px !important;
  min-height: 68px !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left-width: 3px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background 0.15s ease, border-color 0.15s ease;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

.chat-users-sidebar .chat-user-item:hover,
.chat-users-sidebar .chat-user-item.active,
.chat-users-sidebar .chat-user-item.selected {
  background: rgba(61, 154, 237, 0.14) !important;
  border-color: rgba(61, 154, 237, 0.28) !important;
}

.chat-users-sidebar .chat-user-item-icon,
.chat-users-sidebar .chat-user-item .chat-user-item-icon,
.chat-users-sidebar .chat-user-item .user-avatar {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  align-self: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: #2b2b2b !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.chat-users-sidebar .chat-user-item-label {
  grid-row: 1 !important;
  grid-column: 2 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-users-sidebar .chat-user-item-label::after {
  display: none !important;
}

.chat-users-sidebar .chat-user-item-preview {
  grid-row: 2 !important;
  grid-column: 2 / 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin: 0 !important;
  flex: unset !important;
}

.chat-users-sidebar .chat-user-item-preview-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-users-sidebar .chat-user-item-preview-time {
  grid-row: 1 !important;
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: start !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  flex-shrink: 0 !important;
}

.chat-users-sidebar .chat-user-item.has-unread .chat-user-item-label {
  color: #fff !important;
}

.chat-users-sidebar .chat-user-item.has-unread .chat-user-item-preview-text {
  color: #9fd0ff !important;
  font-weight: 600 !important;
}

.chat-users-sidebar .chat-user-item.has-unread .chat-user-item-preview-time {
  color: #7eb8ff !important;
}

.chat-users-sidebar .chat-user-unread-dot {
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  right: 12px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  text-align: center !important;
  box-shadow: 0 0 0 2px rgba(18, 19, 24, 0.9) !important;
}

.chat-users-sidebar .chat-user-item[data-persona="Артур"] {
  border-left-color: #3d9aed !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Наталья"] {
  border-left-color: #a78bfa !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Ольга"] {
  border-left-color: #34d399 !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Анастасия"] {
  border-left-color: #fb923c !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Новости"] {
  border-left-color: #f97316 !important;
}

/* Real staff avatars */
.chat-users-sidebar .chat-user-item[data-persona="Артур"] .chat-user-item-icon {
  background-image: url("/assets/chat-personas/artur.png") !important;
  color: transparent !important;
  font-size: 0 !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Наталья"] .chat-user-item-icon {
  background-image: url("/assets/chat-personas/natalya.png") !important;
  color: transparent !important;
  font-size: 0 !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Ольга"] .chat-user-item-icon {
  background-image: url("/assets/chat-personas/olga.png") !important;
  color: transparent !important;
  font-size: 0 !important;
}
.chat-users-sidebar .chat-user-item[data-persona="Анастасия"] .chat-user-item-icon {
  background-image: url("/assets/chat-personas/anastasia.png") !important;
  color: transparent !important;
  font-size: 0 !important;
}

.chat-messages-wrap .msg-group.group-contact[data-persona="Артур"] .msg-avatar {
  background: #2b2b2b url("/assets/chat-personas/artur.png") center top / cover no-repeat !important;
}
.chat-messages-wrap .msg-group.group-contact[data-persona="Наталья"] .msg-avatar {
  background: #2b2b2b url("/assets/chat-personas/natalya.png") center top / cover no-repeat !important;
}
.chat-messages-wrap .msg-group.group-contact[data-persona="Ольга"] .msg-avatar {
  background: #2b2b2b url("/assets/chat-personas/olga.png") center top / cover no-repeat !important;
}
.chat-messages-wrap .msg-group.group-contact[data-persona="Анастасия"] .msg-avatar {
  background: #2b2b2b url("/assets/chat-personas/anastasia.png") center top / cover no-repeat !important;
}

.chat-messages-wrap .msg-group.group-contact[data-persona="Артур"] .msg-avatar-initials,
.chat-messages-wrap .msg-group.group-contact[data-persona="Наталья"] .msg-avatar-initials,
.chat-messages-wrap .msg-group.group-contact[data-persona="Ольга"] .msg-avatar-initials,
.chat-messages-wrap .msg-group.group-contact[data-persona="Анастасия"] .msg-avatar-initials {
  opacity: 0 !important;
  font-size: 0 !important;
}

/* Bubbles */
.chat-messages-wrap .msg-group.group-me .msg {
  background: linear-gradient(135deg, #3d9aed 0%, #2b7fd4 100%) !important;
  border-radius: 18px 18px 6px 18px !important;
  color: #fff !important;
}

.chat-messages-wrap .msg-group.group-contact .msg {
  background: #1e293b !important;
  border-radius: 18px 18px 18px 6px !important;
  color: #e2e8f0 !important;
}

.chat-messages-wrap .msg-group.group-contact .msg p {
  white-space: pre-wrap;
}

/* Hide legacy diamond-style persona prefix if still rendered as first strong line */
.chat-messages-wrap .msg-group.group-contact .user-persona-badge {
  display: none !important;
}