:root {
  --primary: #0088ff;
  --accent: #00ff88;
  --bg: #ffffff;
  --text: #111111;
  --muted: #6f6f6f;
  --glass: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.55);
  --error: #ff3b30;
  --success: #12b76a;
  --shadow: 0 20px 60px rgba(0, 136, 255, 0.14);
  --primary-rgb: 0, 136, 255;
}

body.dark {
  --bg: #21242b;
  --text: #f3f7ff;
  --muted: #96a3bb;
  --glass: rgba(18, 22, 30, 0.45);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
body.accent-blue {
  --primary: #0088ff;
  --primary-rgb: 0, 136, 255;
}

body.accent-green {
  --primary: #0cf249;
  --primary-rgb: 12, 242, 73;
}
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(0, 136, 255, 0.08), transparent 26%),
    radial-gradient(circle at 85% 85%, rgba(0, 255, 136, 0.08), transparent 26%),
    var(--bg);
  transition: background .25s ease, color .25s ease;
}

body.call-active {
  overflow: hidden !important;
}

.page {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

/* ===========================
   AUTH
   =========================== */

.auth-card {
  position: relative;
  width: 100%;
  max-width: 450px;
  padding: 6px 20px;
  border-radius: 30px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-glow {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 1.5px;
  background: linear-gradient(135deg, #0088ff, #4db3ff, #0088ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.view {
  display: none;
  position: relative;
  z-index: 1;
}

.view.active {
  display: block;
}

.title {
  margin: 0 0 20px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  color: var(--primary);
}

.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
}

.input-group input,
.profile-about {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(0, 136, 255, 0.18);
  background: rgba(255, 255, 255, 0.52);
  color: var(--text);
  outline: none;
  font-size: 15px;
  transition: .2s ease;
  font: inherit;
}

body.dark .input-group input,
body.dark .profile-about {
  background: rgba(255, 255, 255, 0.04);
}

.input-group input:focus,
.profile-about:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 136, 255, 0.12);
}

.input-group input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.12);
}

.input-group input.ok {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(18, 183, 106, 0.12);
}

.primary-btn,
.link-btn,
.theme-toggle,
.back-link {
  cursor: pointer;
  border: none;
  transition: .2s ease;
}

.primary-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}

.primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 136, 255, 0.25);
}

.small-btn {
  display: inline-flex;
  width: auto;
  padding: 12px 14px;
}

.switch-text {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
}

.link-btn {
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  padding: 0;
}

.back-link {
  background: transparent;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
}

.back-link:hover {
  color: var(--text);
}

.message {
  min-height: 20px;
  margin-top: 14px;
  text-align: center;
  color: var(--error);
  font-size: 14px;
}

.username-status {
  min-height: 18px;
  margin: 8px 2px 0;
  font-size: 13px;
}

.username-status.success {
  color: var(--success);
}

.username-status.error {
  color: var(--error);
}

/* ===========================
   PASSWORD
   =========================== */

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 52px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #111111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s ease;
  padding: 0;
}

.toggle-password:hover {
  background: rgba(0, 0, 0, 0.05);
}

.toggle-password svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

body.dark .toggle-password {
  color: #f3f7ff;
}

body.dark .toggle-password:hover {
  background: rgba(255, 255, 255, 0.08);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input::-ms-reveal,
input::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-textfield-decoration-container,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-caps-lock-indicator,
input[type="password"]::-webkit-password-toggle-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===========================
   APP LAYOUT
   =========================== */

.app-shell {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
}

.sidebar {
  background: #ffffff;
  color: #111111;
  border-right: 1px solid #000000;
  padding: 12px 8px 12px 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100vh;
}

body.dark .sidebar {
  background: #21242b;
  color: #ffffff;
}

.sidebar-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 6px;
  margin-bottom: 12px;
}

#openSettingsBtn {
  width: 34px;
  height: 34px;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#openSettingsBtn:hover {
  background: rgba(0, 136, 255, 0.08);
}

.settings-gear::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-.33-1A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1-.33H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1-.33A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 8 4.6c.38 0 .74-.14 1-.4.26-.26.4-.62.33-1V3a2 2 0 1 1 4 0v.09c-.07.38.07.74.33 1 .26.26.62.4 1 .33h.09a1.65 1.65 0 0 0 1 .4 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8c0 .38.14.74.4 1 .26.26.62.4 1 .33H21a2 2 0 1 1 0 4h-.09c-.38-.07-.74.07-1 .33-.26.26-.4.62-.33 1Z'/></svg>");
}

body.dark .settings-gear::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-.33-1A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1-.33H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1-.33A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 8 4.6c.38 0 .74-.14 1-.4.26-.26.4-.62.33-1V3a2 2 0 1 1 4 0v.09c-.07.38.07.74.33 1 .26.26.62.4 1 .33h.09a1.65 1.65 0 0 0 1 .4 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8c0 .38.14.74.4 1 .26.26.62.4 1 .33H21a2 2 0 1 1 0 4h-.09c-.38-.07-.74.07-1 .33-.26.26-.4.62-.33 1Z'/></svg>");
}

.brand {
  font-size: 22px;
  font-weight: 800;
  color: inherit;
}

.search-wrap {
  padding-left: 6px;
  margin-bottom: 12px;
}

.search-wrap input {
  width: 100%;
  border: none;
  outline: none;
  background: #f2f5f9;
  color: #111111;
  padding: 12px 14px;
  border-radius: 14px;
}

.search-wrap input::placeholder {
  color: #7b8794;
}

body.dark .search-wrap input {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

body.dark .search-wrap input::placeholder {
  color: rgba(255,255,255,0.64);
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: -2px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.chat-item {
  border: none;
  width: 100%;
  background: transparent;
  color: inherit;
  padding: 10px 10px 10px 8px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.chat-item:hover,
.chat-item.active {
  background: rgba(0, 136, 255, 0.08);
}

body.dark .chat-item:hover,
body.dark .chat-item.active {
  background: rgba(255,255,255,0.08);
}

.avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar-img {
  object-fit: cover;
  object-position: center;
  display: block;
  border: none;
}

.chat-item-texts {
  min-width: 0;
  flex: 1;
}

.chat-item-title {
  font-weight: 700;
  min-width: 0;
}

.chat-item-sub {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 190px;
}

body.dark .chat-item-sub {
  color: rgba(255,255,255,0.68);
}

.chat-item-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-pinned-icon,
.chat-muted-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  opacity: 0.95;
}

.chat-pinned-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M14 2l8 8-2 2-2-2-4 4v5l-2 3-2-3v-5l-4-4-2 2-2-2 8-8z'/%3E%3C/svg%3E");
}

body.dark .chat-pinned-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4cfde'%3E%3Cpath d='M14 2l8 8-2 2-2-2-4 4v5l-2 3-2-3v-5l-4-4-2 2-2-2 8-8z'/%3E%3C/svg%3E");
}

.chat-muted-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M22 9 16 15'/%3E%3Cpath d='M16 9 22 15'/%3E%3C/svg%3E");
}

body.dark .chat-muted-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4cfde' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M22 9 16 15'/%3E%3Cpath d='M16 9 22 15'/%3E%3C/svg%3E");
}

.chat-unread-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #0088ff;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.chat-unread-badge.muted {
  background: #9aa4b2;
}

.sidebar-bottom-actions {
  position: absolute;
  right: 16px;
  bottom: 16px;

  padding: 0;
  width: auto;
  height: auto;
}
.sidebar {
  position: relative;
}

.sidebar-create-btn {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  flex-shrink: 0;
}

.sidebar-create-btn::before,
.sidebar-create-btn::after {
  content: "";
  position: absolute;
  display: block;
}

.sidebar-create-btn::before {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

.sidebar-create-btn::after {
  width: 12px;
  height: 12px;
  right: 14px;
  bottom: 14px;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
}

body.accent-green .sidebar-create-btn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}

body.accent-green .sidebar-create-btn::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
}

/* ===========================
   CHAT PANEL
   =========================== */

.chat-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.chat-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 14px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  pointer-events: none;
}

.chat-header-left,
.chat-header-actions,
.chat-header-title,
.chat-close-btn,
.chat-call-btn,
.chat-channel-members-badge,
.chat-header-title-wrap,
#chatHeaderVerifiedBadge {
  pointer-events: auto;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.chat-header-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.liquid-glass {
  position: relative;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(26px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(220%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0,0,0,0.08) !important;
}

body.dark .liquid-glass {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.chat-header-title.liquid-glass {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  max-width: min(420px, calc(100vw - 320px));
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  cursor: pointer !important;
}

.chat-header-title.hidden,
.chat-header-title.hidden.liquid-glass {
  display: none !important;
}

.chat-header-verified-badge {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  cursor: pointer;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  top: 0;
}

.chat-header-verified-badge.hidden {
  display: none !important;
}

.chat-call-btn,
.chat-close-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.chat-call-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.6a2 2 0 0 1-.45 2.11L8 9.94a16 16 0 0 0 6.06 6.06l1.51-1.24a2 2 0 0 1 2.11-.45c.83.3 1.7.51 2.6.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

body.accent-green .chat-call-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.6a2 2 0 0 1-.45 2.11L8 9.94a16 16 0 0 0 6.06 6.06l1.51-1.24a2 2 0 0 1 2.11-.45c.83.3 1.7.51 2.6.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.chat-close-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12'/><path d='M18 6L6 18'/></svg>");
}

.chat-channel-members-badge {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

#chatChannelMembersBadge.hidden,
#chatChannelMembersBadge:empty {
  display: none !important;
}

.chat-header.hidden {
  display: none !important;
}

/* ===========================
   PIN BAR
   =========================== */

.chat-pin-bar {

  position:absolute;

  top:74px;

  left:16px;
  right:16px;

  z-index:30;

  display:flex;
  align-items:center;
  gap:12px;

  min-height:58px;

  padding:14px 16px;

  border-radius:20px;

  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);

  background:rgba(255,255,255,.08);

  border:1px solid rgba(255,255,255,.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 28px rgba(0,0,0,.12);
}

body.dark .chat-pin-bar{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
}

.chat-pin-bar.hidden {
  display: none !important;
}

.chat-pin-line {
  width: 4px;
  min-width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: #0088ff;
  flex-shrink: 0;
}

.chat-pin-content {
  min-width: 0;
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-pin-author {
  color: #0088ff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-pin-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.dark .chat-pin-text {
  color: #ffffff;
}

/* ===========================
   MESSAGES
   =========================== */

#messages.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 86px 18px 18px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.chat-panel.has-pin-bar #messages.messages {
  padding-top: 150px !important;
}

#messages .message-row {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  width: auto;
  max-width: 78%;
  min-width: 0;
  flex: 0 0 auto;
}

#messages .message-row.mine {
  align-self: flex-end;
  align-items: flex-end;
}

#messages .message-bubble {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 10px 16px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}

#messages .text-message-row:not(.mine) .message-bubble {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 20px 20px 20px 8px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

#messages .text-message-row.mine .message-bubble {
  background: #0088ff !important;
  color: #ffffff !important;
  border-radius: 20px 20px 8px 20px !important;
  box-shadow: 0 4px 10px rgba(0,136,255,0.18) !important;
}

body.dark #messages .text-message-row:not(.mine) .message-bubble {
  background: #2a303a !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.15) !important;
}

#messages .message-text {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  white-space: pre-wrap;
  font-size: 16px;
}

#messages .reply-quote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  margin: 0 0 6px 0;
  border-radius: 10px;
  background: rgba(0,0,0,0.04);
  max-width: 220px;
  min-width: 0;
}

body.dark #messages .reply-quote {
  background: rgba(255,255,255,0.06);
}

#messages .message-row.mine .reply-quote {
  background: rgba(255,255,255,0.18);
}

#messages .reply-quote-line {
  width: 3px;
  min-width: 3px;
  align-self: stretch;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.8;
  flex-shrink: 0;
}

#messages .reply-quote-content {
  min-width: 0;
  flex: 0 1 auto;
}

#messages .reply-quote-author {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#messages .reply-quote-text {
  font-size: 12px;
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#messages .message-row.mine .reply-quote-author,
#messages .message-row.mine .reply-quote-text,
#messages .message-row.mine .reply-quote-line {
  color: #ffffff;
}

#messages .message-row:not(.mine) .reply-quote-author {
  color: #0088ff;
}

#messages .message-row:not(.mine) .reply-quote-text {
  color: #111111;
}

body.dark #messages .message-row:not(.mine) .reply-quote-text {
  color: #ffffff;
}

#messages .forwarded-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px 0;
  min-width: 0;
}

#messages .forwarded-header-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.82;
}

#messages .forwarded-header-name {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  color: #0088ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#messages .message-row.mine .forwarded-header-label {
  color: rgba(255,255,255,0.9);
}

#messages .message-row.mine .forwarded-header-name {
  color: #ffffff;
}

#messages .message-meta {
  margin-top: 4px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.75;
  color: var(--muted);
}
body.dark
#messages .message-row:not(.mine) .message-meta-time,
body.dark
#messages .message-row.mine .message-meta-time {
  color: rgba(255,255,255,.92) !important;
}

#messages .message-row.mine .message-meta {
  justify-content: flex-end;
}

#messages .message-row:not(.mine) .message-meta {
  justify-content: flex-start;
}

.message-meta-time {
  display: inline-block;
}

.message-status {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  top: 1px;
}

.message-status-clock::before,
.message-status-clock::after {
  content: "";
  position: absolute;
}

.message-status-clock::before {
  left: 1px;
  top: 0;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.message-status-clock::after {
  left: 6px;
  top: 2px;
  width: 1.4px;
  height: 4px;
  background: currentColor;
  border-radius: 999px;
  box-shadow: 2px 2px 0 0 currentColor;
}

.message-status-single::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.message-status-double {
  width: 18px;
}

.message-status-double::before,
.message-status-double::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 3px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
}

.message-status-double::before {
  left: 0;
  top: 2px;
}

.message-status-double::after {
  left: 3px;
  top: 2px;
}

body.dark
#messages .message-row.mine .message-status,
body.dark
#messages .message-row.mine .message-meta-time {
  color: rgba(255,255,255,.92) !important;
}

body:not(.dark)
#messages .message-row.mine .message-status,
body:not(.dark)
#messages .message-row.mine .message-meta-time {
  color: rgba(70,70,70,.85) !important;
}

#messages .media-message-row,
#messages .media-message-row.mine {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#messages .media-message-row .message-bubble,
#messages .media-message-row.mine .message-bubble {

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    max-width: 260px;

    padding: 0 !important;

    overflow: hidden;

    border-radius: 18px !important;

    background: transparent !important;
}

body.dark #messages .media-message-row .message-bubble {
    background: #2a303a;
}

#messages .media-message-row .message-bubble::before,
#messages .media-message-row .message-bubble::after,
#messages .media-message-row.mine .message-bubble::before,
#messages .media-message-row.mine .message-bubble::after {
  display: none !important;
  content: none !important;
}

#messages .file-thumb,
#messages .message-bubble img,
#messages .message-bubble video {
  display: block;
  max-width: 260px;
  max-height: 220px;
  border-radius: 16px;
  object-fit: cover;
}

#messages .media-message-row img,
#messages .media-message-row.mine img,
#messages .media-message-row video,
#messages .media-message-row.mine video {
  display: block !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#messages .message-bubble audio,
#messages .media-message-row audio,
#messages .media-message-row.mine audio {
  display: block;
  max-width: 320px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.file-link {
  color: inherit;
  text-decoration: underline;
}

#messages .mention-link,
.http-danger,
#messages .message-url-link {
  font-weight: 800;
  text-decoration: none;
  color: #2d8cff;
  cursor: pointer;
}

/* Стиль для твоих сообщений (белый текст с подчеркиванием) */
#messages .message-row.mine .mention-link,
.http-danger,
#messages .message-row.mine .message-url-link {
  color: #ffffff;
  text-decoration: underline;
}

/* Эффект при наведении */
.message-url-link:hover {
  opacity: 0.8;
}
.group-message-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.group-message-avatar {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 18px;
}

.group-message-content-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.group-message-author {
  font-size: 12px;
  font-weight: 800;
  color: #0088ff;
  margin: 0 0 4px 2px;
  line-height: 1.1;
}

.system-chat-message {
  align-self: center;
  margin: 8px auto;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.05);
  color: #7b8794;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

body.dark .system-chat-message {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
}

.empty-chat {
  margin: auto;
  color: var(--muted);
  font-weight: 600;
}

.empty-chat-white {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(80, 80, 80, 0.72);
  text-align: center;
  background: #ffffff;
  border-radius: 18px;
}

/* ===========================
   COMPOSER
   =========================== */

.composer {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
}

body.dark .composer {
  background: #21242b;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.icon-btn,
.attach-btn,
.send-btn {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.icon-btn {
  background: transparent;
  color: inherit;
}

.attach-btn {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
}
.send-btn {
  background: var(--primary);
  color: white;
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.22);
}

.send-btn.voice-mode {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  box-shadow: none;
}

.send-btn.recording {
  background: #ff3b30;
  color: white;
}

.composer-input-wrap {
  min-height: 46px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 16px;
  background: #f3f5f8;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
}

body.dark .composer-input-wrap {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.composer-input-wrap.recording-active {
  padding: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  min-height: 46px !important;
}

.composer-input-wrap.blocked-by-me {
  background: rgba(255, 59, 48, 0.12) !important;
  border-color: rgba(255, 59, 48, 0.22) !important;
}

.composer-input-wrap.blocked-by-user {
  background: rgba(255, 59, 48, 0.10) !important;
  border-color: rgba(255, 59, 48, 0.18) !important;
}

#messageInput {
  width: 100%;
  min-height: 24px;
  max-height: 160px;
  padding: 12px 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  display: block;
}

#messageInput.hidden {
  display: none !important;
}

#messageInput:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.blocked-hidden {
  visibility: hidden !important;
  pointer-events: none !important;
}

.recording-indicator {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  color: white;
  background: linear-gradient(270deg, #0088ff, #6a3dff, #00a7ff, #7e2dff);
  background-size: 300% 300%;
  animation: recordingGradient 3s ease infinite;
}

.recording-indicator.hidden {
  display: none !important;
}

@keyframes recordingGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.recording-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 54px;
}

.recording-meter span {
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  transition: height .08s linear;
}

.recording-timer {
  font-weight: 800;
  font-size: 14px;
  min-width: 44px;
  text-align: right;
}

.attach-icon::before,
.voice-icon::before,
.send-icon::before,
.block-action-btn::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.attach-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 1 1-2.82-2.82l8.48-8.48'/></svg>");
}

.voice-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 1 0 6 0V4a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><path d='M12 19v4'/><path d='M8 23h8'/></svg>");
}

.send-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2 15 22 11 13 2 9 22 2z'/></svg>");
}

.composer.channel-subscribe-mode,
.composer.channel-notify-mode {
  grid-template-columns: 1fr !important;
  border-top: none !important;
  background: transparent !important;
  padding-top: 8px !important;
}

.channel-notify-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel-notify-btn {
  width: auto;
  min-width: 260px;
  max-width: min(92vw, 360px);
  min-height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0 auto;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(26px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(220%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0,0,0,0.08) !important;
}

body.dark .channel-notify-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.channel-notify-btn:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* ===========================
   OVERLAYS / MODALS
   =========================== */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 12, 20, 0.52);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.settings-modal {
  width: min(1100px, 100%);
  height: min(760px, calc(100vh - 48px));
  background: var(--bg);
  color: var(--text);
  border-radius: 26px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}

.settings-sidebar {
  background: #ffffff;
  color: #111111;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark .settings-sidebar {
  background: #21242b;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  padding-right: 56px;
}

.settings-title {
  font-size: 22px;
  font-weight: 800;
  color: #111111;
}

body.dark .settings-title {
  color: #ffffff;
}

.settings-nav-item {
  border: 1px solid rgba(0, 136, 255, 0.08);
  background: rgba(0, 136, 255, 0.03);
  color: #111111;
  text-align: left;
  padding: 14px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  transition: .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

.settings-nav-item:hover {
  background: rgba(0, 136, 255, 0.06);
  border-color: rgba(0, 136, 255, 0.12);
}

.settings-nav-item.active {
  background: rgba(0, 136, 255, 0.10);
  border-color: rgba(0, 136, 255, 0.18);
}

body.dark .settings-nav-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body.dark .settings-nav-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}

body.dark .settings-nav-item.active {
  background: rgba(0, 136, 255, 0.18);
  border-color: rgba(0, 136, 255, 0.22);
}
.settings-spacer {
  flex: 1;
}

.logout-danger-btn {
  border: none;
  background: rgba(255, 59, 48, 0.14);
  color: #ff6158;
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
}

.settings-content {
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.settings-content * {
  min-width: 0;
}

.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
}

.settings-divider {
  height: 1px;
  background: rgba(0,136,255,0.1);
  margin: 24px 0;
}

.settings-content img,
.settings-content video,
.settings-content canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* profile */
.profile-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

#profileAvatarWrap {
  width: 116px;
  height: 116px;
  min-width: 116px;
  min-height: 116px;
  max-width: 116px;
  max-height: 116px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

#profileAvatarPreview,
#profileAvatarFallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

#profileAvatarPreview {
  display: block;
  object-fit: cover;
  object-position: center;
  background: #dbeafe;
}

#profileAvatarFallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  background: #0088ff;
}

#profileAvatarPreview.hidden,
#profileAvatarFallback.hidden {
  display: none !important;
}

.profile-avatar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.profile-avatar-actions .primary-btn,
.profile-avatar-actions .small-btn {
  width: auto;
  min-width: 0;
}

#settings-profile h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 28px;
}

#settings-profile .input-group {
  margin-bottom: 16px;
}

#settings-profile .primary-btn {
  border-radius: 18px;
}

/* settings close button */
.settings-content-top {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 30;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  width: auto;
}

#closeSettingsBtn,
.settings-content-close-btn,
.profile-close-btn,
.image-viewer-close {
  position: absolute !important;
  top: 16px !important;
  right: 10px !important;
  width: 46px !important;
  height: 46px !important;
  border: none !important;
  border-radius: 14px !important;
  background: rgba(255, 59, 48, 0.16) !important;
  color: #ff4d45 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 30 !important;
  font-size: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#closeSettingsBtn::before,
.settings-content-close-btn::before,
.profile-close-btn::before,
.image-viewer-close::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12'/><path d='M18 6 6 18'/></svg>");
}

#closeSettingsBtn:hover,
.settings-content-close-btn:hover,
.profile-close-btn:hover,
.image-viewer-close:hover {
  background: rgba(255, 59, 48, 0.24) !important;
}

/* user profile / confirm */
.user-profile-modal,
.confirm-modal {
  width: min(460px, 100%);
  background: var(--bg);
  color: var(--text);
  border-radius: 24px;
  padding: 28px 22px 22px;
  position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}

.user-profile-modal {
  width: min(520px, 100%) !important;
  border-radius: 28px !important;
  padding: 28px 28px 24px !important;
  overflow: hidden !important;
}

.user-profile-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
}

#userProfileAvatarWrap {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  margin: 8px auto 16px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

#userProfileAvatar,
#userProfileAvatarFallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#userProfileAvatar {
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #dbeafe !important;
  z-index: 2 !important;
}

#userProfileAvatarFallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #0088ff !important;
  z-index: 1 !important;
}

#userProfileAvatar.hidden,
#userProfileAvatarFallback.hidden {
  display: none !important;
}

#userProfileNick {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

#userProfileUsername {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  color: var(--muted) !important;
}

#userProfileAbout {
  margin: 0 0 18px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--text) !important;
  opacity: 0.9 !important;
  max-width: 100% !important;
}

.user-profile-actions,
.confirm-actions,
.create-entity-actions,
.structured-members-actions {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.user-profile-actions {
  margin-top: 14px !important;
}

.user-profile-actions .primary-btn,
.user-profile-actions .danger-secondary-btn,
.channel-user-view-actions .primary-btn,
.channel-user-view-actions .danger-secondary-btn,
.confirm-actions > .secondary-btn-inline,
.confirm-actions > .primary-btn,
.create-entity-actions > .secondary-btn-inline,
.create-entity-actions > .primary-btn,
.structured-members-actions .primary-btn,
.structured-members-actions .secondary-btn-inline {
  flex: 1 !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 15px !important;
  border-radius: 16px !important;
}

.confirm-actions > .secondary-btn-inline,
.confirm-actions > .primary-btn,
.create-entity-actions > .secondary-btn-inline,
.create-entity-actions > .primary-btn {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 20px !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
}

.danger-secondary-btn {
  border: none;
  background: rgba(255, 59, 48, 0.12);
  color: #ff4d45;
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
  flex: 1;
}

.secondary-btn-inline {
  border: none;
  background: rgba(0,136,255,0.08);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
  flex: 1;
}

/* reply preview */
.reply-preview {
  position: fixed;
  left: 336px;
  right: 16px;
  bottom: 76px;
  min-height: 58px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  z-index: 55;
}
body.dark .reply-preview {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
body.dark .reply-preview-text {
  color: #ffffff;
}
body.dark .reply-preview-author {
  color: #4da3ff;
}
.reply-preview-line {
  width: 4px;
  align-self: stretch;
  border-radius: 999px;
  background: #0088ff;
  flex-shrink: 0;
}

.reply-preview-content {
  min-width: 0;
  flex: 1;
}

.reply-preview-author {
  color: #0088ff;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 2px;
}

.reply-preview-text {
  color: #111111;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-preview-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 59, 48, 0.10);
  color: #ff4d45;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  font-size: 0;
}

.reply-preview-close::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12'/><path d='M18 6 6 18'/></svg>");
}

/* context menu */
.message-context-menu,
#chatContextMenu {
  position: fixed;
  min-width: 190px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  padding: 6px;
  z-index: 1300;
}

#chatContextMenu {
  min-width: 220px;
}

body.dark #chatContextMenu {
  background: #1f232b;
  color: #ffffff;
}

.message-context-item {
  width: 100%;
  border: none;
  background: transparent;
  color: #111111;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.message-context-item:hover {
  background: rgba(0, 136, 255, 0.08);
}

.message-context-item.danger {
  color: #ff4d45;
}

.message-context-item.danger:hover {
  background: rgba(255, 59, 48, 0.08);
}

#chatContextMenu .message-context-item.hidden {
  display: none !important;
}

/* forward modal */
.forward-modal {
  width: min(520px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  background: var(--bg);
  color: var(--text);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forward-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forward-title {
  font-size: 22px;
  font-weight: 800;
}

.forward-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 440px;
}

.forward-chat-item {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(0, 136, 255, 0.04);
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.forward-chat-item .avatar-circle,
.forward-chat-item .avatar-img {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}

.forward-chat-item .chat-item-texts {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.forward-chat-item .chat-item-title {
  width: 100%;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  color: var(--text);
}

.forward-chat-item .chat-item-sub {
  width: 100%;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.forward-chat-item.selected {
  border-color: #0088ff;
  box-shadow: 0 0 0 2px rgba(0, 136, 255, 0.12);
  background: rgba(0, 136, 255, 0.08);
}

/* image viewer */
.image-viewer-img {
  max-width: min(92vw, 1600px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

/* confirm checkbox row */
.confirm-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
}

.confirm-checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: #0088ff;
  cursor: pointer;
}

/* create/edit entity */
.create-chat-type-modal {
  width: min(420px, 100%);
  background: var(--bg);
  color: var(--text);
  border-radius: 24px;
  padding: 28px 22px 22px;
  position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}

.create-chat-type-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.create-chat-type-body h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
}

.create-chat-type-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.create-entity-modal {
  width: min(640px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 80px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.create-entity-avatar-wrap {
  width: 108px !important;
  height: 108px !important;
  min-width: 108px !important;
  min-height: 108px !important;
  max-width: 108px !important;
  max-height: 108px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  margin: 8px auto 16px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

#chatAvatarPreview,
#chatAvatarFallback,
#channelProfileAvatar,
#channelProfileAvatarFallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

#chatAvatarPreview,
#channelProfileAvatar {
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 2 !important;
  background: #dbeafe !important;
}

#chatAvatarFallback,
#channelProfileAvatarFallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #0088ff !important;
  z-index: 1 !important;
}

#chatAvatarPreview.hidden,
#chatAvatarFallback.hidden,
#channelProfileAvatar.hidden,
#channelProfileAvatarFallback.hidden {
  display: none !important;
}

.create-entity-input-group {
  width: 100%;
  text-align: left;
}

.member-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-picker-item {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(0, 136, 255, 0.05);
  color: var(--text);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: 0.18s ease;
  text-align: left;
}

.member-picker-item:hover {
  background: rgba(0, 136, 255, 0.08);
}

.member-picker-item.selected {
  border-color: #0088ff !important;
  box-shadow: 0 0 0 2px rgba(0, 136, 255, 0.12);
  background: rgba(0, 136, 255, 0.10);
}

.member-picker-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-picker-avatar img,
.member-picker-avatar .avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.member-picker-texts {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-picker-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.member-picker-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.2;
}

.member-picker-check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0, 136, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.18s ease;
  background: rgba(255,255,255,0.86);
}

.member-picker-item.selected .member-picker-check {
  background: #0088ff;
  border-color: #0088ff;
}

.member-picker-check::before {
  content: "";
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: scale(0.7);
  transition: 0.18s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.member-picker-item.selected .member-picker-check::before {
  opacity: 1;
  transform: scale(1);
}

.channel-subscriber-item {
  width: 100%;
  border: 1px solid transparent;
  background: rgba(0, 136, 255, 0.05);
  color: var(--text);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.channel-subscriber-texts {
  min-width: 0;
  flex: 1;
}

.channel-subscriber-title {
  font-weight: 800;
  font-size: 15px;
}

.channel-subscriber-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.channel-subscriber-remove {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.10);
  color: #ff4d45;
  cursor: pointer;
  font-size: 0;
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.channel-subscriber-remove:hover {
  background: rgba(255, 59, 48, 0.16);
}

.channel-subscriber-remove::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 4H8'/><path d='M21 12H8'/><path d='M21 20H8'/><path d='M3 8l3 4-3 4'/></svg>");
}

.username-prefix-wrap {
  position: relative;
  width: 100%;
}

.username-prefix-wrap .username-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(17, 17, 17, 0.38);
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

body.dark .username-prefix-wrap .username-prefix {
  color: rgba(255,255,255,0.36);
}

.username-prefix-wrap input {
  padding-left: 34px !important;
}

#channelProfileOverlay,
#chatSettingsOverlay {
  align-items: flex-start !important;
  padding-top: 72px !important;
  padding-bottom: 32px !important;
  overflow-y: auto !important;
}

#channelProfileOverlay .create-entity-modal,
#chatSettingsOverlay .create-entity-modal {
  width: min(640px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 104px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

#channelProfileOverlay .user-profile-body,
#chatSettingsOverlay .user-profile-body {
  width: 100%;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 6px 4px 0;
}

#channelProfileOverlay .user-profile-body::-webkit-scrollbar,
#chatSettingsOverlay .user-profile-body::-webkit-scrollbar {
  width: 8px;
}

#channelProfileOverlay .user-profile-body::-webkit-scrollbar-thumb,
#chatSettingsOverlay .user-profile-body::-webkit-scrollbar-thumb {
  background: rgba(0, 136, 255, 0.18);
  border-radius: 999px;
}

#channelProfileOverlay .user-profile-body::-webkit-scrollbar-track,
#chatSettingsOverlay .user-profile-body::-webkit-scrollbar-track {
  background: transparent;
}

#channelProfileOverlay .create-entity-input-group,
#chatSettingsOverlay .create-entity-input-group {
  width: 100%;
}

#channelProfileOverlay .forward-list {
  max-height: 220px;
  overflow-y: auto;
}

#channelProfileOverlay .confirm-actions.create-entity-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-top: 12px;
  z-index: 2;
}

.channel-viewer-card {
  width: 100%;
  text-align: center;
  padding: 6px 0 2px;
}

.channel-viewer-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 10px;
}

.channel-viewer-username {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 14px;
}

.channel-viewer-about {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.92;
  margin: 0 auto 16px;
  max-width: 420px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.channel-viewer-members {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 18px;
}

.channel-viewer-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.channel-viewer-actions .primary-btn,
.channel-viewer-actions .danger-secondary-btn {
  width: auto !important;
  min-width: 240px;
  max-width: 320px;
  min-height: 54px;
  margin: 0 !important;
  border-radius: 18px !important;
}

.channel-description-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.channel-description-error {
  font-size: 13px;
  color: var(--error);
  min-height: 18px;
}

.channel-description-count {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
/* ===========================
   CALL MODAL
   =========================== */

#callOverlay.overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px !important;
  background: rgba(7, 12, 20, 0.52) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#callOverlay.hidden {
  display: none !important;
}

.call-modal {
  width: min(620px, 100%) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  border-radius: 30px !important;
  padding: 28px 24px 24px !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.22) !important;
}

.call-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.call-avatars-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 42px;
  margin-bottom: 22px;
}

.call-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
}

.call-avatar-ring {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .18s ease;
  border: 3px solid transparent;
}

.call-avatar-ring.active {
  border-color: #0088ff;
  box-shadow:
    0 0 0 6px rgba(0,136,255,0.12),
    0 0 28px rgba(0,136,255,0.24);
}

.call-avatar-ring.remote.dimmed {
  opacity: 0.42;
  filter: grayscale(0.18);
}

.call-avatar-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #dbeafe;
}

.call-avatar,
.call-avatar-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.call-avatar {
  object-fit: cover;
  object-position: center;
}

.call-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0088ff;
  color: white;
  font-size: 42px;
  font-weight: 800;
}

.call-avatar-name {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}

.call-status {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin-bottom: 22px;
}

.call-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.call-action-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 0 !important;
  font-size: 0 !important;
  transition: transform .16s ease, background .16s ease, opacity .16s ease !important;
}

.call-action-btn.hidden {
  display: none !important;
}

.call-action-btn.off {
  opacity: 0.58;
}

.call-action-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.call-action-btn:hover {
  transform: translateY(-1px);
}

.call-action-btn:active {
  transform: scale(0.97);
}

.call-accept-style,
.call-decline-style,
.call-end-style,
.call-control-style {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(26px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(220%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0,0,0,0.08) !important;
}

body.dark .call-accept-style,
body.dark .call-decline-style,
body.dark .call-end-style,
body.dark .call-control-style {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.call-accept-style {
  color: #12b76a !important;
}

.call-decline-style,
.call-end-style {
  color: #ff4d45 !important;
}

.call-control-style {
  color: #0088ff !important;
}

.call-accept-style:hover,
.call-decline-style:hover,
.call-end-style:hover,
.call-control-style:hover {
  background: rgba(255,255,255,0.14) !important;
}

.chat-close-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.chat-close-btn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12'/><path d='M18 6L6 18'/></svg>");
}

.chat-header.hidden {
  display: none !important;
}

#callMicBtn,
#callSoundBtn {
  position: relative;
}

#callMicBtn::before,
#callSoundBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#callMicBtn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 1 0 6 0V4a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><path d='M12 19v4'/><path d='M8 23h8'/></svg>");
}

#callSoundBtn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H3v6h3l5 4z'/><path d='M15.5 8.5a5 5 0 0 1 0 7'/><path d='M18.5 5.5a9 9 0 0 1 0 13'/></svg>");
}

#callMicBtn.off,
#callSoundBtn.off {
  background: rgba(255, 77, 69, 0.14) !important;
  border: 1px solid rgba(255, 77, 69, 0.22) !important;
}

#callMicBtn.off::before,
#callSoundBtn.off::before {
  opacity: 0.82;
}

#callMicBtn.off::after,
#callSoundBtn.off::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2.5px;
  border-radius: 999px;
  background: #ff4d45;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
}

.messages.messages-empty {
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

.messages.messages-empty > * {
  display: none !important;
}

.messages.messages-empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
}
.user-profile-name-row,
.structured-profile-name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.user-profile-name-row h2,
.structured-profile-name-row h2 {
  margin: 0 !important;
}

.profile-badge {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease;
  opacity: 0.96;
  position: relative;
  z-index: 2;
}

.profile-badge:hover {
  transform: scale(1.08);
  opacity: 1;
}

.profile-badge.hidden {
  display: none !important;
}

.verified-badge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%230088ff'/%3E%3Cpath d='M8.4 12.3l2.2 2.2 5-5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.moderator-badge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 3v5c0 4.6-2.9 8.8-7 10-4.1-1.2-7-5.4-7-10V5l7-3z' fill='%236b7280'/%3E%3Cpath d='M12 6.7l1.15 2.3 2.55.37-1.85 1.8.44 2.53L12 12.55l-2.29 1.15.44-2.53-1.85-1.8 2.55-.37L12 6.7z' fill='white'/%3E%3C/svg%3E");
}

.badge-info-box {
  max-width: 420px;
  width: calc(100% - 32px);
  border-radius: 22px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
}

.badge-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

#badgeInfoTitle {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

#badgeInfoText {
  font-size: 16px;
  line-height: 1.55;
  color: #374151;
  white-space: pre-line;
}

.user-profile-id,
.channel-user-view-id,
.structured-profile-id {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.2;
}

.user-profile-id.hidden,
.structured-profile-id.hidden {
  display: none !important;
}

.channel-verify-modal {
  max-width: 460px;
}

#channelVerifyText {
  white-space: pre-line;
  line-height: 1.55;
}

#submitChannelVerifyBtn.disabled-like {
  background: #d1d5db !important;
  color: #6b7280 !important;
  cursor: not-allowed !important;
  pointer-events: auto;
  border: none;
  box-shadow: none;
}

#submitChannelVerifyBtn.disabled-like:hover {
  transform: none !important;
  filter: none !important;
}

.chat-header-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.chat-header-verified-badge {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  cursor: pointer;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  top: 0;
}

.chat-header-verified-badge.hidden {
  display: none !important;
}

.channel-user-view-members-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.channel-verified-inline {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  background-size: 20px 20px;
}

.chat-item-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.chat-item-title-row .chat-item-title {
  margin: 0;
}

.chat-list-verified-badge {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: inline-block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%230088ff'/%3E%3Cpath d='M8.4 12.3l2.2 2.2 5-5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.scroll-to-bottom-btn {
  position: absolute;
  right: 18px;
  bottom: 92px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.scroll-to-bottom-btn.hidden {
  display: none !important;
}

.scroll-to-bottom-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>");
}

body.dark .scroll-to-bottom-btn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4cfde' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>");
}
.connection-status {
  position: absolute;
  top: 18px;
  left: 170px;
  z-index: 20;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.connection-status.loading {
  color: var(--muted);
}

.connection-status.connected {
  color: var(--success);
}
.chat-online-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px #ffffff;
  display: inline-block;
  flex-shrink: 0;
}

body.dark .chat-online-dot {
  box-shadow: 0 0 0 2px #21242b;
}
.appearance-block {
  margin-bottom: 22px;
}

.appearance-label {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.appearance-theme-switcher {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.appearance-theme-btn {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: .18s ease;
}

.appearance-theme-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.18);
}

.appearance-theme-btn.active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.10);
}

body.dark .appearance-theme-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #ffffff;
}

body.dark .appearance-theme-btn:hover {
  background: rgba(255,255,255,0.08);
}

body.dark .appearance-theme-btn.active {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: var(--primary);
}

.appearance-accent-list {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.appearance-accent-option {
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.appearance-accent-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .18s ease;
}

.appearance-accent-option.active .appearance-accent-ring {
  transform: scale(1.06);
}

.appearance-accent-option[data-accent-value="blue"].active .appearance-accent-ring {
  border-color: #0088ff;
}

.appearance-accent-option[data-accent-value="green"].active .appearance-accent-ring {
  border-color: #0cf249;
}

.appearance-accent-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
}

.appearance-accent-dot-blue {
  background: #0088ff;
}

.appearance-accent-dot-green {
  background: #0cf249;
}
body.accent-green .attach-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 1 1-2.82-2.82l8.48-8.48'/></svg>");
}

body.accent-green .voice-icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 1 0 6 0V4a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><path d='M12 19v4'/><path d='M8 23h8'/></svg>");
}

body.accent-green .chat-call-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.6a2 2 0 0 1-.45 2.11L8 9.94a16 16 0 0 0 6.06 6.06l1.51-1.24a2 2 0 0 1 2.11-.45c.83.3 1.7.51 2.6.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

body.accent-green .scroll-to-bottom-btn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='m19 12-7 7-7-7'/></svg>");
}

body.accent-green #callMicBtn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 1 0 6 0V4a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><path d='M12 19v4'/><path d='M8 23h8'/></svg>");
}

body.accent-green #callSoundBtn::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H3v6h3l5 4z'/><path d='M15.5 8.5a5 5 0 0 1 0 7'/><path d='M18.5 5.5a9 9 0 0 1 0 13'/></svg>");
}


.chat-call-btn.hidden {
  display: none !important;
}

.edit-message-modal {
  width: min(560px, 100%) !important;
}

.edit-message-body {
  align-items: stretch !important;
  text-align: left !important;
}

.edit-message-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: var(--text);
}

.edit-message-body textarea {
  min-height: 140px;
  resize: vertical;
}

.message-edited-label {
  font-size: 11px;
  line-height: 1;
  opacity: 0.78;
  display: inline-block;
}

#messages .message-row.mine .message-edited-label {
  color: rgba(255, 255, 255, 0.92);
}

#messages .message-row:not(.mine) .message-edited-label {
  color: var(--muted);
}

body.dark #messages .message-row:not(.mine) .message-edited-label {
  color: rgba(255,255,255,0.72);
}
.privacy-option-btn {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  transition: .18s ease;
}

.privacy-option-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.18);
}

.privacy-option-btn.active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.10);
}

body.dark .privacy-option-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #ffffff;
}

body.dark .privacy-option-btn:hover {
  background: rgba(255,255,255,0.08);
}

body.dark .privacy-option-btn.active {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: var(--primary);
}
.privacy-option-btn[data-privacy-value="nobody"].active {
  background: rgba(255, 59, 48, 0.14) !important;
  border-color: rgba(255, 59, 48, 0.45) !important;
  color: #ff4d45 !important;
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.10) !important;
}

body.dark .privacy-option-btn[data-privacy-value="nobody"].active {
  background: rgba(255, 59, 48, 0.16) !important;
  border-color: rgba(255, 59, 48, 0.42) !important;
  color: #ff7b74 !important;
}
.voice-message-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.voice-duration-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.78;
  line-height: 1;
}

#messages .message-row.mine .voice-duration-label {
  color: rgba(255,255,255,0.92);
}

#messages .message-row:not(.mine) .voice-duration-label {
  color: var(--muted);
}

body.dark #messages .message-row:not(.mine) .voice-duration-label {
  color: rgba(255,255,255,0.72);
}
#themeToggle,
.theme-toggle {
  display: none !important;
}
/* ===========================
   SETTINGS PROFILE FIX
   =========================== */

.settings-profile-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  padding-right: 76px;
}

.settings-profile-topbar h2 {
  margin: 0;
  margin-right: auto;
}

.settings-profile-edit-btn {
  width: auto !important;
  min-width: 170px;
  flex: 0 0 auto !important;
}

#previewMyProfileBtn {
  margin-left: auto;
}
.settings-profile-topbar h2 {
  margin: 0;
  font-size: 28px;
}

#settings-profile {
  padding-top: 4px;
}

#settingsProfileViewMode,
#settingsProfileEditMode {
  width: 100%;
}

.settings-profile-view-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-top: 8px !important;
}

#settingsProfileViewAvatarWrap {
  width: 116px !important;
  height: 116px !important;
  min-width: 116px !important;
  min-height: 116px !important;
  max-width: 116px !important;
  max-height: 116px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  margin: 8px auto 16px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}

#settingsProfileViewAvatar,
#settingsProfileViewAvatarFallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#settingsProfileViewAvatar {
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #dbeafe !important;
  z-index: 2 !important;
}

#settingsProfileViewAvatarFallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: #0088ff !important;
  z-index: 1 !important;
}

#settingsProfileViewAvatar.hidden,
#settingsProfileViewAvatarFallback.hidden {
  display: none !important;
}

#settingsProfileViewNick {
  margin: 0 0 8px !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
}

#settingsProfileViewUsername {
  margin: 0 0 10px !important;
  font-size: 18px !important;
  color: var(--muted) !important;
}

#settingsProfileViewPublicId {
  margin: 0 0 16px !important;
  font-size: 16px !important;
  color: var(--muted) !important;
}

#settingsProfileViewAbout {
  margin: 0 auto !important;
  max-width: 560px !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  opacity: 0.92 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

#settingsProfileViewAbout.hidden {
  display: none !important;
}

#settingsProfileEditMode.hidden,
#settingsProfileViewMode.hidden {
  display: none !important;
}

/* чтобы вкладки не "слипались" */
.settings-tab {
  display: none;
}

.settings-tab.active {
  display: block;
}


#themeToggle,
.theme-toggle {
  display: none !important;
}
/* ===========================
   CONTEXT MENU (DARK THEME FIX)
   =========================== */
body.dark .message-context-menu,
body.dark #chatContextMenu {
  background: #1f232b;
  color: #ffffff;
}

body.dark .message-context-item {
  color: #ffffff;
}

body.dark .message-context-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.dark .message-context-item.danger {
  color: #ff7b74;
}

body.dark .message-context-item.danger:hover {
  background: rgba(255, 59, 48, 0.14);
}
/* Ячейки ввода кода в стиле Liquid Glass */
.code-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 30px 0;
}

.code-dot {
  width: 48px;
  height: 60px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  /* Эффект Liquid Glass */
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.1);
  outline: none;
  transition: all 0.25s ease;
}

body.dark .code-dot {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.code-dot:focus {
  border-color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.3);
  transform: translateY(-2px);
}

.code-dot.success {
  border-color: var(--success) !important;
  color: var(--success);
  box-shadow: 0 0 15px rgba(18, 183, 106, 0.3);
}

.code-dot.error {
  border-color: var(--error) !important;
  color: var(--error);
  box-shadow: 0 0 15px rgba(255, 59, 48, 0.3);
}

/* Кнопка почты в стиле Liquid Glass */
.settings-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  margin-top: 10px;
  cursor: pointer;
  
  /* Базовый стиль Liquid Glass */
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.settings-action-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.01);
}

.settings-action-texts {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.settings-action-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.settings-action-sub {
  font-size: 13px;
  color: var(--primary); /* Подсвечиваем почту основным цветом */
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.8;
}

.settings-action-arrow {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(150, 163, 187, 0.8)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}
/* Кнопка в настройках безопасности */
.settings-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  margin-top: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
}

.settings-action-sub {
  font-size: 13px;
  color: var(--primary); /* Почта светится цветом темы */
  font-weight: 700;
  margin-top: 4px;
}

/* Ячейки кода подтверждения */
.code-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 30px 0;
}

.code-dot {
  width: 46px;
  height: 58px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  outline: none;
  transition: all 0.2s ease;
}

.code-dot:focus {
  border-color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
  transform: scale(1.05);
}

.code-dot.success { border-color: var(--success) !important; color: var(--success); }
.code-dot.error { border-color: var(--error) !important; color: var(--error); }

/* Кнопка "Назад" в стиле как кнопка закрытия чата */
#backToEmailInputBtn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--text);
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

#backToEmailInputBtn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}
/* Добавь к существующим стилям */

.code-dot {
  width: 46px;
  height: 58px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  outline: none;
  transition: all 0.2s ease;
}

.code-dot:focus {
  border-color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.1) !important;
  box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.2);
  transform: scale(1.05);
}

/* Цифра введена, но ещё не проверена */
.code-dot.filled {
  color: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Код верный */
.code-dot.success {
  border-color: var(--success) !important;
  color: var(--success);
  background: rgba(var(--success-rgb, 34, 197, 94), 0.08) !important;
  transform: scale(1.05);
}

/* Код неверный */
.code-dot.error {
  border-color: var(--error) !important;
  color: var(--error);
  background: rgba(var(--error-rgb, 239, 68, 68), 0.08) !important;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.settings-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.settings-spacer {
  flex: 1;
}

.settings-logout-btn {
  width: 100%;
  border: 1px solid rgba(255, 77, 69, 0.25);
  background: rgba(255, 77, 69, 0.08);
  color: #ff4d45;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s;
  margin-top: 12px;
}

.settings-logout-btn:hover {
  background: rgba(255, 77, 69, 0.14);
  border-color: rgba(255, 77, 69, 0.4);
  transform: translateY(-1px);
}
#registerView .input-group {
  margin-bottom: 12px;
}

#registerView .username-status {
  margin: 6px 0 0;
  min-height: 18px;
  line-height: 1.2;
}

#registerView .username-status:empty {
  margin: 0;
  min-height: 0;
}
.chat-banned-icon {
  width: 18px;
  height: 18px;
  border: 2px solid #ff4d45;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.chat-banned-icon::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 7px;
  height: 2px;
  background: #ff4d45;
  transform: rotate(-45deg);
}

.ban-banner {
  margin: 12px 16px;
  padding: 16px;
  border: 1px solid rgba(255, 77, 69, 0.35);
  background: rgba(255, 77, 69, 0.08);
  border-radius: 16px;
  color: #ffb4ae;
}

.ban-banner-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ban-banner-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #ff4d45;
  border-radius: 50%;
  position: relative;
  margin-top: 2px;
}

.ban-banner-icon::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 8px;
  height: 2px;
  background: #ff4d45;
  transform: rotate(-45deg);
}

.ban-banner-title {
  font-weight: 900;
  color: #ff4d45;
  margin-bottom: 4px;
}

.ban-banner-sub {
  font-size: 13px;
  line-height: 1.45;
}
.global-news-banner {
  margin: 0 0 10px 6px;
  padding: 12px 14px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(0,136,255,0.08);
  border: 1px solid rgba(0,136,255,0.15);

  color: var(--text);
}

body.dark .global-news-banner {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

.global-news-text {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.global-news-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255,77,69,0.12);
  position: relative;
}

.global-news-close::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4d45' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12'/><path d='M18 6 6 18'/></svg>");
}
/* ===========================
   PIN SECURITY
   =========================== */

.pin-code-inputs,
.pin-confirm-inputs,
.pin-remove-inputs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 28px 0;
}

.pin-dot,
.pin-confirm-dot,
.pin-remove-dot {
  width: 54px;
  height: 66px;

  border-radius: 16px;

  text-align: center;

  font-size: 28px;
  font-weight: 800;

  color: var(--primary);

  background: rgba(255,255,255,0.05);

  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  outline: none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

body.dark .pin-dot,
body.dark .pin-confirm-dot,
body.dark .pin-remove-dot {
  background: rgba(255,255,255,0.03);
}

.pin-dot:focus,
.pin-confirm-dot:focus,
.pin-remove-dot:focus {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .08);

  box-shadow:
    0 0 0 2px rgba(var(--primary-rgb), .12),
    0 0 18px rgba(var(--primary-rgb), .15);

  transform: translateY(-2px);
}

.pin-dot.filled,
.pin-confirm-dot.filled,
.pin-remove-dot.filled {
  color: rgba(255,255,255,.35);
}

.pin-dot.success,
.pin-confirm-dot.success,
.pin-remove-dot.success {
  border-color: #12b76a;
  color: #12b76a;

  box-shadow:
    0 0 0 2px rgba(18,183,106,.10),
    0 0 18px rgba(18,183,106,.18);
}

.pin-dot.error,
.pin-confirm-dot.error,
.pin-remove-dot.error {
  border-color: #ff4d45;
  color: #ff4d45;

  box-shadow:
    0 0 0 2px rgba(255,77,69,.10),
    0 0 18px rgba(255,77,69,.18);

  animation: pinShake .35s ease;
}

@keyframes pinShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-5px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

#pinStepCreate,
#pinStepConfirm,
#pinStepRemove {
  width: 100%;
}

#pinStepCreate.hidden,
#pinStepConfirm.hidden,
#pinStepRemove.hidden {
  display: none !important;
}
.pin-login-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
}
/* ===========================
   UPDATE BANNER
   =========================== */

.update-banner {
  margin: 0 0 10px 6px;
  padding: 12px 14px;

  border-radius: 16px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  background: rgba(12, 242, 73, 0.08);
  border: 1px solid rgba(12, 242, 73, 0.18);
}

body.dark .update-banner {
  background: rgba(12, 242, 73, 0.08);
  border-color: rgba(12, 242, 73, 0.14);
}

.update-banner.hidden {
  display: none !important;
}

.update-banner-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.update-banner-btn {
  width: 100%;
  min-height: 42px;

  border: none;
  border-radius: 12px;

  cursor: pointer;

  font-size: 14px;
  font-weight: 800;

  color: #ffffff;

  background: #12b76a;

  transition: .18s ease;
}

.update-banner-btn:hover {
  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(18, 183, 106, 0.25);
}

.update-banner-btn:active {
  transform: scale(0.98);
}

@media (max-width: 980px) {

  /* === СТРАНИЦА И ОБОЛОЧКА === */

  html,
  body {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
  }

  main.page {
    display: block !important;
    padding: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* === АВТОРИЗАЦИЯ === */

  main.page:has(.auth-card:not(.hidden)) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }

  .auth-card {
    width: 100% !important;
    max-width: 420px !important;
    margin-top: 16px !important;
  }

  /* === APP SHELL === */

  .app-shell {
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell.hidden {
    display: none !important;
  }

  /* === САЙДБАР === */
  .composer.reply-mode {
    padding-top: 66px;
}
  .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-right: none !important;
    padding: 12px 12px 0 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  #settings-profile .settings-profile-topbar {

    display:grid !important;

    grid-template-columns:1fr 1fr;

    gap:10px;

    padding-right:58px !important;

    align-items:start;

}

#settings-profile .settings-profile-topbar h2 {

    grid-column:1 / 3;

    margin:0 !important;

}

#previewMyProfileBtn,
#openProfileEditModeBtn {

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

}

#previewMyProfileBtn {

    margin-left:0 !important;

}

#backProfileViewModeBtn {

    grid-column:1 / 3;

}

  .sidebar-top {
    padding-left: 0 !important;
    margin-bottom: 10px !important;
  }

  .search-wrap {
    padding-left: 0 !important;
    margin-bottom: 10px !important;
  }

  .search-wrap input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chat-list {
    margin-left: 0 !important;
    padding-right: 0 !important;
  }

  .chat-item {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* статус соединения — внутри сайдбара, не абсолютный */

  .connection-status {
  display: none !important;
}
  .reply-preview {

  position: absolute;

  left: 16px;
  right: 16px;

  bottom: 74px;

  min-height: 58px;

  border-radius: 16px;

  background: #ffffff;

  box-shadow: 0 12px 28px rgba(0,0,0,.12);

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;

  z-index: 25;
}

.reply-preview-author {
  font-size: 12px;
}

.reply-preview-text {
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-preview-close {
  width: 30px;
  height: 30px;

  flex-shrink: 0;
}
  /* кнопка создания чата */

  .sidebar-bottom-actions {
    padding: 10px 6px 12px 6px !important;
    flex-shrink: 0 !important;
  }

  .sidebar-create-btn {
    width: 54px !important;
    height: 54px !important;
  }

  /* баннеры */

  .global-news-banner,
  .update-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* === ПАНЕЛЬ ЧАТА === */

  .chat-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-shell.mobile-chat-open .sidebar {
    display: none !important;
  }

  .app-shell.mobile-chat-open .chat-panel {
    display: flex !important;
  }

  .app-shell:not(.mobile-chat-open) .chat-panel {
    display: none !important;
  }

  /* шапка чата */

  .chat-header {
    padding: 8px 12px !important;
  }

  .chat-header-title.liquid-glass {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 15px !important;
    padding: 0 12px !important;
    max-width: calc(100vw - 130px) !important;
  }

  .chat-call-btn,
  .chat-close-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  /* сообщения */

  #messages.messages {
    padding-top: 70px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 12px !important;
  }

  /* поле ввода */

  .composer {
    padding: 10px 12px 12px 12px !important;
  }

  .composer-input-wrap {
    align-items: center !important;
}

#messageInput{

min-height:22px;

height:22px;

padding:0;

line-height:22px;

overflow:hidden;

}

  /* кнопка скролла вниз */

  .scroll-to-bottom-btn {
    right: 12px !important;
    bottom: 80px !important;
  }
}

#appView.hidden {
  display: none !important;
}
@media (max-width: 980px) {

  /* окно настроек */

  .settings-modal {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    margin: 8px !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* верхняя навигация */

  .settings-sidebar {
    width: 100% !important;
    flex: none !important;

    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);

    padding: 16px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;

    height: auto !important;
  }

  .settings-title-row {
    width: 100%;
    margin-bottom: 8px !important;
    padding-right: 0 !important;
  }

  .settings-title {
    font-size: 28px !important;
  }

  .settings-nav-item {
  flex: 1 1 calc(50% - 4px) !important;
  min-width: 0 !important;

  font-size: 13px !important;
  padding: 12px 10px !important;

  overflow: hidden;
  text-overflow: ellipsis;
}

  .settings-spacer {
    display: none !important;
  }

  .settings-logout-btn {
    width: 100% !important;
    margin-top: 6px !important;
  }

  /* контент */

  .settings-content {
    flex: 1 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
  }

  /* профиль */

  #settingsProfileViewNick {
    font-size: 26px !important;
  }

  #settingsProfileViewUsername {
    font-size: 16px !important;
  }

  #settingsProfileViewAbout {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* кнопка закрытия */

  #closeSettingsBtn {
    top: 12px !important;
    right: 12px !important;
  }

  /* кнопки внешнего вида */

  .appearance-theme-switcher {
    flex-direction: column !important;
  }

  .appearance-theme-btn,
  .privacy-option-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ===========================
   PIN / CODE INPUTS LIGHT THEME FIX
   =========================== */

body:not(.dark) .code-dot,
body:not(.dark) .pin-dot,
body:not(.dark) .pin-confirm-dot,
body:not(.dark) .pin-remove-dot,
body:not(.dark) .pin-login-dot {
  background: rgba(0, 136, 255, 0.06) !important;
  border: 1px solid rgba(0, 136, 255, 0.18) !important;
  color: var(--primary) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 8px 24px rgba(0,136,255,0.08);
}

body:not(.dark) .code-dot:focus,
body:not(.dark) .pin-dot:focus,
body:not(.dark) .pin-confirm-dot:focus,
body:not(.dark) .pin-remove-dot:focus,
body:not(.dark) .pin-login-dot:focus {
  background: rgba(0, 136, 255, 0.10) !important;
  border-color: var(--primary) !important;

  box-shadow:
    0 0 0 3px rgba(0,136,255,0.12),
    0 12px 30px rgba(0,136,255,0.12);
}

body:not(.dark) .code-dot.filled,
body:not(.dark) .pin-dot.filled,
body:not(.dark) .pin-confirm-dot.filled,
body:not(.dark) .pin-remove-dot.filled,
body:not(.dark) .pin-login-dot.filled {
  color: var(--primary) !important;
}

body:not(.dark) #pinLoginOverlay .user-profile-modal,
body:not(.dark) #pinOverlay .user-profile-modal {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.16);
}

body:not(.dark) #pinLoginOverlay .user-profile-about,
body:not(.dark) #pinOverlay .user-profile-about {
  color: #6b7280 !important;
}
/* ===========================
   DEVICES TAB
   =========================== */

#devicesList {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.device-card {
  width: 100%;
  padding: 18px;
  border-radius: 20px;

  background: rgba(0, 136, 255, 0.04);
  border: 1px solid rgba(0, 136, 255, 0.10);

  display: flex;
  flex-direction: column;
  gap: 8px;

  transition: .18s ease;
}

.device-card:hover {
  background: rgba(0, 136, 255, 0.06);
  border-color: rgba(0, 136, 255, 0.16);
}

body.dark .device-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

body.dark .device-card:hover {
  background: rgba(255,255,255,0.06);
}

.device-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.device-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}

.device-current {
  margin-top: 8px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(18, 183, 106, 0.12);
  color: var(--success);

  font-size: 13px;
  font-weight: 800;
}

.device-current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.device-card .danger-secondary-btn {
  margin-top: 10px;
  width: fit-content;
  min-width: 180px;
}

.devices-actions {
  margin-top: 20px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.devices-actions .primary-btn,
.devices-actions .secondary-btn-inline {
  width: auto;
  min-width: 220px;
}

.device-section-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.device-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border-radius: 18px;
  background: rgba(0,136,255,0.04);
}

body.dark .device-empty {
  background: rgba(255,255,255,0.04);
}
.sidebar-qr-btn {
  position: fixed !important;

  right: 24px !important;
  bottom: 24px !important;

  width: 58px !important;
  height: 58px !important;

  min-width: 58px !important;
  min-height: 58px !important;

  border-radius: 50% !important;
  border: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 9999 !important;
  cursor: pointer !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  backdrop-filter: blur(26px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(220%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0,0,0,0.08) !important;
}

body.dark .sidebar-qr-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.sidebar-qr-btn::before {
  content: "";

  width: 22px;
  height: 22px;

  display: block;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5' height='5'/%3E%3Crect x='16' y='3' width='5' height='5'/%3E%3Crect x='3' y='16' width='5' height='5'/%3E%3Cpath d='M16 16h2v2'/%3E%3Cpath d='M21 16v5h-5'/%3E%3C/svg%3E");
}

body.accent-green .sidebar-qr-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230cf249' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6'/%3E%3Crect x='15' y='3' width='6' height='6'/%3E%3Crect x='3' y='15' width='6' height='6'/%3E%3Cpath d='M15 15h3v3'/%3E%3Cpath d='M21 15v6h-6'/%3E%3C/svg%3E");
}

.sidebar-qr-btn:hover {
  transform: translateY(-2px);
}
.context-emoji-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 4px;
  gap: 2px;
}

.context-emoji-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease;
  padding: 0;
  line-height: 1;
}

.context-emoji-btn:hover {
  background: rgba(0,136,255,0.10);
  transform: scale(1.2);
}

body.dark .context-emoji-btn:hover {
  background: rgba(255,255,255,0.10);
}

.context-menu-divider {
  height: 1px;
  background: rgba(0,0,0,0.07);
  margin: 4px 6px;
}

body.dark .context-menu-divider {
  background: rgba(255,255,255,0.08);
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: .15s ease;
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

body.dark .reaction-chip {
  background: rgba(255,255,255,0.07);
}

.reaction-chip.mine {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
}

.reaction-chip:hover {
  background: rgba(var(--primary-rgb), 0.10);
}

.reaction-chip-count {
  font-size: 12px;
  font-weight: 800;
}
/* Контейнер плеера */
.voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 12px;
  border-radius: 20px;
  width: 220px;
}

body.dark .voice-player {
  background: rgba(255, 255, 255, 0.1);
}

.voice-play-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--accent-color, #3390ec); /* Твой цвет акцента */
}

/* Прогресс-бар */
.voice-progress-container {
  flex: 1;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.voice-progress-bar {
  height: 100%;
  background: var(--accent-color, #3390ec);
  border-radius: 2px;
  width: 0%;
}

.voice-time {
  font-size: 11px;
  opacity: 0.7;
  font-family: monospace;
}
.language-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.language-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: rgba(0,136,255,.06);
  color: var(--text);
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}

.language-btn:hover {
  background: rgba(0,136,255,.10);
}

.language-btn.active {
  background: rgba(0,136,255,.16);
  border: 1px solid rgba(0,136,255,.22);
}
.auth-language-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-language-btn {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(0,136,255,.08);
  color: var(--text);
  font-weight: 700;
  transition: .2s;
}

.auth-language-btn.active {
  background: #12b76a;
  color: #fff;
}
.premium-info-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(var(--primary-rgb), .06);
}

.premium-info-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.premium-info-text {
  color: var(--muted);
  line-height: 1.5;
}

.splints-balance {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
}

.premium-switcher {
  flex-wrap: wrap;
}

.premium-free-note {
  margin-top: 12px;
  color: #12b76a;
  font-weight: 700;
}

.premium-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.premium-option-btn:hover {
  background: rgba(var(--primary-rgb), .08);
}

.premium-option-btn {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: .2s;
}

.premium-option-btn.active {
  background: rgba(255,255,255,.03);
  border: 2px solid #12b76a;
  box-shadow: 0 0 0 1px rgba(18,183,106,.15);
}

.premium-option-main,
.premium-option-title {
  font-size: 16px;
  font-weight: 800;
}

.premium-option-price,
.premium-option-sub {
  margin-top: 4px;
  font-size: 14px;
  opacity: .85;
}

.premium-buy-btn {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  border: none;
  border-radius: 16px;
  background: #9aa4b2;
  color: white;
  font-size: 16px;
  font-weight: 800;
  cursor: not-allowed;
  transition: .2s ease;
}

.premium-buy-btn.active {
  background: var(--primary);
  cursor: pointer;
}
.premium-expire-date {
  font-size: 20px;
  font-weight: 800;
  color: #12b76a;
}
#settings-premium .premium-info-card {
  margin-bottom: 14px;
}

#settings-premium .premium-info-card:last-child {
  margin-bottom: 0;
}
/* ===========================
   CHANNEL PROFILE V2
   =========================== */

#channelViewMode,
#channelEditMode,
#channelMembersMode{
  width:100%;
}

#channelViewTitle{
  margin:10px 0 6px;
  text-align:center;
  font-size:28px;
  font-weight:800;
  color:var(--text);
}

#channelViewUsername{
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin-bottom:14px;
}

#channelViewDescription{
  text-align:center;
  color:var(--text);
  line-height:1.55;
  font-size:15px;
  margin:0 auto 16px;
  max-width:520px;
  white-space:pre-wrap;
  word-break:break-word;
}

#channelViewMembers{
  text-align:center;
  color:var(--primary);
  font-size:15px;
  font-weight:800;
  margin-bottom:20px;
}

#channelViewActions{
  width:100%;
}

#channelViewActions .primary-btn,
#channelViewActions .danger-secondary-btn{
  width:100%;
}

#channelEditMode .confirm-actions{
  margin-bottom:18px;
}

#channelEditMode .input-group{
  margin-bottom:16px;
}

#channelEditMode .primary-btn,
#channelEditMode .danger-secondary-btn{
  width:100%;
}

#openMembersManagerBtn{
  margin-top:8px;
  margin-bottom:14px;
}

#deleteChannelBtn{
  margin-top:8px;
}

#channelMembersMode .confirm-actions{
  margin-bottom:18px;
}

#channelMembersMode .forward-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:420px;
  overflow-y:auto;
}

#channelMembersMode .channel-subscriber-item{
  border-radius:16px;
  padding:14px;
  background:rgba(var(--primary-rgb),.05);
  border:1px solid rgba(var(--primary-rgb),.08);
}

body.dark
#channelMembersMode
.channel-subscriber-item{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}

#channelMembersMode
.channel-subscriber-title{
  font-size:15px;
  font-weight:800;
}

#channelMembersMode
.channel-subscriber-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

#saveChannelBtn:disabled{
  background:#9aa4b2 !important;
  cursor:not-allowed !important;
  opacity:.7;
}

#saveChannelBtn:not(:disabled){
  background:var(--primary);
}

#structuredProfilePublicId{
  margin-bottom:16px;
  text-align:center;
}

#channelEditMode.hidden,
#channelViewMode.hidden,
#channelMembersMode.hidden{
  display:none !important;
}
.date-divider {
  display: flex;
  justify-content: center; /* Центрируем */
  align-items: center;
  margin: 20px 0;
  width: 100%; /* Растягиваем на всю ширину чата */
  clear: both;
}

.date-divider-text {
  background: rgba(45, 55, 66, 0.6); /* Полупрозрачный фон под стиль твоего чата */
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px); /* Красивое размытие */
  -webkit-backdrop-filter: blur(8px);
}
/* В светлой теме можно сделать текст и фон другими */
body:not(.dark) .date-divider-text {
  background: rgba(255, 255, 255, 0.7);
  color: #555;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.terms-wrap{
  margin-top:10px;
  margin-bottom:14px;
}

.terms-check{
  display:flex;
  align-items:flex-start;
  gap:8px;

  font-size:13px;
  line-height:1.35;

  opacity:.9;

  cursor:pointer;
}

.terms-check input{
  width:14px;
  height:14px;

  margin-top:2px;

  flex-shrink:0;
}

.terms-check span{
  display:block;
}

.terms-check a{
  color:#0088ff;
  text-decoration:none;
}

.terms-check a:hover{
  text-decoration:underline;
}
.system-chat-message {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 12px 0;

  clear: both;
}

.system-chat-message-text {
  background: rgba(45, 55, 66, 0.6);

  color: #ffffff;

  padding: 5px 15px;

  border-radius: 20px;

  font-size: 13px;
  font-weight: 500;

  text-align: center;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body:not(.dark) .system-chat-message-text {
  background: rgba(255, 255, 255, 0.7);

  color: #555;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.chat-list::-webkit-scrollbar,
#messages::-webkit-scrollbar,
.settings-content::-webkit-scrollbar,
.forward-list::-webkit-scrollbar,
.user-profile-body::-webkit-scrollbar {
  width: 5px; /* Делаем его очень тонким */
}

/* Фон дорожки (трека) — делаем прозрачным */
.chat-list::-webkit-scrollbar-track,
#messages::-webkit-scrollbar-track,
.settings-content::-webkit-scrollbar-track,
.forward-list::-webkit-scrollbar-track,
.user-profile-body::-webkit-scrollbar-track {
  background: transparent;
}

/* Сам ползунок */
.chat-list::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb,
.forward-list::-webkit-scrollbar-thumb,
.user-profile-body::-webkit-scrollbar-thumb {
  background: rgba(0, 136, 255, 0.2); /* Светло-синий прозрачный */
  border-radius: 10px;
  transition: background 0.3s ease;
}

/* Ползунок при наведении */
.chat-list::-webkit-scrollbar-thumb:hover,
#messages::-webkit-scrollbar-thumb:hover,
.settings-content::-webkit-scrollbar-thumb:hover,
.forward-list::-webkit-scrollbar-thumb:hover,
.user-profile-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 136, 255, 0.5); /* Становится ярче */
}

/* Особенности для ТЕМНОЙ темы */
body.dark .chat-list::-webkit-scrollbar-thumb,
body.dark #messages::-webkit-scrollbar-thumb,
body.dark .settings-content::-webkit-scrollbar-thumb,
body.dark .forward-list::-webkit-scrollbar-thumb,
body.dark .user-profile-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); /* Белый полупрозрачный */
}

body.dark .chat-list::-webkit-scrollbar-thumb:hover,
body.dark #messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Для Firefox (у него свои правила) */
.chat-list, #messages, .settings-content, .forward-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 136, 255, 0.2) transparent;
}
/* Контейнер для сообщения в группе */
.group-message-row {
    flex-direction: row !important; /* Ставим аватарку и контент в ряд */
    align-items: flex-end !important; /* Прижимаем аватарку к низу сообщения */
    gap: 10px;
}

/* Маленькая аватарка пользователя в чате */
.group-message-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 4px; /* Немного приподнимаем над временем */
    font-size: 14px !important; /* Для текстовых аватарок */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Никнейм над сообщением */
.group-message-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 2px;
    margin-left: 4px;
    cursor: pointer;
}

.group-message-author:hover {
    text-decoration: underline;
}

/* Исправляем отступ мета-данных в групповых сообщениях */
.group-message-row .message-meta {
    margin-left: 4px;
}
.timezone-select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(var(--primary-rgb), .12);
  background: rgba(var(--primary-rgb), .04);
  color: var(--text);
  font: inherit;
}
body.dark #settings-other .settings-action-btn {
  color: #ffffff !important;
}
.group-message-author {
  display: block !important;
  width: 100% !important;

  text-align: left !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;

  margin-left: 0 !important;
}
.message-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #8b95a7;
  font-size: 11px;
  font-weight: 700;
}

body.dark .message-views {
  color: #c4cfde;
}
#messages .message-row:not(.mine) .message-meta-time {
  color: #6b7280;
}
.message-views-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4cfde' stroke-width='2'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
#requestChannelVerifyBtn:disabled {
  background: #9aa4b2 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.settings-version-btn {
  border: none;
  background: transparent;

  margin-left: 14px;

  color: var(--muted);

  font-size: 15px;
  font-weight: 400;

  cursor: pointer;

  padding: 0;

  opacity: .9;
}
.settings-changelog-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 80px);

  overflow-y: auto;

  background: var(--bg);
  color: var(--text);

  border-radius: 28px;

  padding: 28px;
}
.changelog-item {
  padding: 18px 0;
}

.changelog-item:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.changelog-version {
  font-size: 24px;
  font-weight: 800;

  color: var(--primary);
}
.changelog-date {
  margin-top: 4px;

  color: var(--muted);

  font-size: 14px;
}
.changelog-list {
  margin-top: 14px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}
.changelog-line {
  position: relative;

  padding-left: 18px;

  line-height: 1.5;
}
.changelog-line::before {
  content: "";

  position: absolute;

  left: 0;
  top: .65em;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #ffffff;

  transform: translateY(-50%);
}
body:not(.dark) .changelog-line::before {
  background: #111111;
}
.premium-badge {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFD700' d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}
.premium-gradient-nick {

  background-size: 300% 300%;

  animation:
    premiumGradientMove 5s ease infinite;

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

@keyframes premiumGradientMove {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}
.nick-gradient-modal {

  width: 360px !important;

  max-width: calc(100vw - 32px);

  padding:
    26px
    22px
    22px
    !important;
}

.nick-gradient-btn {

  border: none;

  background:
    rgba(var(--primary-rgb), .08);

  color: var(--primary);

  height: 32px;

  padding: 0 12px;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  transition: .18s ease;
}

.nick-gradient-btn:hover {

  background:
    rgba(var(--primary-rgb), .14);

  transform:
    translateY(-1px);
}

body.dark .nick-gradient-btn {

  background:
    rgba(255,255,255,.06);

  color:
    #ffffff;
}

.user-profile-divider {

  width: 100%;

  height: 1px;

  margin: 18px 0;

  background: rgba(255,255,255,.08);

}

body:not(.dark)
.user-profile-divider {

  background: rgba(0,0,0,.08);

}

.user-profile-report-wrap {

  width: 100%;

}

.user-profile-report-wrap
button {

  width: 100%;

}
.report-user-btn {

  background:
    rgba(255,77,69,.08);

  color:
    #ff4d45;

}

.hidden {
  display: none !important;
}
#badgeInfoOverlay {
  z-index: 5000;
}

#badgeInfoOverlay .badge-info-box {
  width: min(460px, 100%);
  background: var(--bg);
  color: var(--text);
  border-radius: 24px;
  padding: 28px 22px 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
}

#badgeInfoOverlay .badge-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

#badgeInfoTitle {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

#badgeInfoText {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  opacity: .92;
}

#closeBadgeInfoBtn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  cursor: pointer;

  background: rgba(255,59,48,.12);
  color: #ff4d45;

  font-size: 22px;
  line-height: 1;
}
/* ===========================
   STEQLA RANK
   =========================== */

.profile-rank-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    width:20px;
    height:20px;

    min-width:16px;
    min-height:16px;

    font-size:10px;
    font-weight:800;

    color:#ffffff;

    cursor:pointer;

    user-select:none;

    transition:.18s ease;

    border-radius:0;
    clip-path:none;
}

.profile-rank-badge:hover{

    transform:scale(1.08);

}

.rank-level-1{

    border-radius:50%;
    clip-path:none;

    background:#0088ff;

}

.rank-level-2,
.rank-level-3,
.rank-level-4{

    border-radius:4px;
    clip-path:none;

}
.rank-level-2{
    background:#2fa7ff;
}

.rank-level-3{
    background:#33b8ff;
}

.rank-level-4{
    background:#4ec8ff;
    box-shadow:0 0 12px rgba(0,136,255,.28);
}

/* ---------- УРОВЕНЬ 5 ---------- */

.rank-level-5{

    width:18px;
    height:18px;

    border-radius:0;

    background:#0088ff;

    color:#ffffff;

    clip-path:polygon(
        50% 0%,
        100% 38%,
        81% 100%,
        19% 100%,
        0% 38%
    );

    box-shadow:
        0 0 10px rgba(0,136,255,.28);

}
/* ===========================
   STEQLA LEVEL
   =========================== */

#steqlaLevelTitle{

    margin:0 0 22px;

    font-size:28px;
    font-weight:800;

}

.steqla-progress{

    width:100%;

    height:14px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}

body:not(.dark) .steqla-progress{

    background:rgba(0,0,0,.08);

}

.steqla-progress-bar{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #0088ff,
        #39b4ff
    );

    transition:width .35s ease;

}

.steqla-progress-text{

    margin-top:12px;

    text-align:center;

    font-size:15px;

    font-weight:800;

    color:var(--primary);

}

.steqla-level-divider{

    width:100%;

    height:1px;

    margin:26px 0;

    background:rgba(255,255,255,.08);

}

body:not(.dark)
.steqla-level-divider{

    background:rgba(0,0,0,.08);

}

.steqla-rating-title{

    font-size:26px;

    font-weight:800;

}

.steqla-rating-value{

    margin-top:12px;

    font-size:44px;

    font-weight:900;

    color:var(--primary);

}

.steqla-level-card{

    width:100%;

    margin-top:16px;

    padding:18px;

    border-radius:18px;

    background:rgba(var(--primary-rgb),.07);

    text-align:left;

}

body.dark
.steqla-level-card{

    background:rgba(255,255,255,.05);

}

.steqla-level-card-title{

    font-size:17px;

    font-weight:800;

}

.steqla-level-card-text{

    margin-top:8px;

    color:var(--muted);

    line-height:1.5;

}

.steqla-soon{

    margin-top:12px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:#9aa4b2;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}

#closeSteqlaLevelBtn2{

    margin-top:28px;

}
#steqlaLevelOverlay .user-profile-modal{

    width:430px !important;

    max-width:calc(100vw - 32px);

}
.steqla-level-progress-card{

    width:100%;

    padding:18px;

    border-radius:18px;

    background:rgba(var(--primary-rgb),.06);

}

body.dark .steqla-level-progress-card{

    background:rgba(255,255,255,.05);

}
.steqla-level-progress-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:14px;

    font-size:17px;

    font-weight:800;

    color:var(--text);

}
.chat-typing-status{

    margin-top:6px;
    margin-left:18px;

    min-height:18px;

    font-size:14px;
    font-weight:700;

    color:var(--primary);

    opacity:.95;

}
.typing-label{

    color:var(--primary);

    font-weight:700;

}
/* ===========================
   IMAGE PREVIEW
   =========================== */

.image-preview-wrap{

    padding:12px 16px 0;

    background:transparent;

}

.image-preview-wrap.hidden{

    display:none !important;

}

.image-preview-card{

    position:relative;

    width:fit-content;

    max-width:220px;

    border-radius:18px;

    overflow:hidden;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

}

body:not(.dark)
.image-preview-card{

    background:#f5f7fb;

    border:1px solid rgba(0,0,0,.08);

}

.image-preview-img{

    display:block;

    max-width:220px;

    max-height:220px;

    object-fit:cover;

    border-radius:18px;

}

.image-preview-close{

    position:absolute;

    top:8px;
    right:8px;

    width:32px;
    height:32px;

    border:none;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);

    color:#ffffff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    z-index:5;

    padding:0;

}

#messages .media-message-row img {
    display: block;
    width: 100%;
    margin: 0;
}

.message-image-caption {

    display: block;

    padding: 10px 14px;

    margin: 0;

    line-height: 1.45;

    background: var(--primary);
    color: #fff;
}
.message-image-wrap{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:18px;
}

.message-image-wrap img{
    display:block;
}

.message-image-caption{
    padding:10px 14px;
    margin:0;
}
.changelog-main-title {
    margin: 0 0 24px;

    font-size: 30px;
    font-weight: 800;

    color: var(--text);
}

#messages .message-row.mine .message-image-caption {

    color: #ffffff;

    background: var(--primary);

}

#messages .message-row:not(.mine) .message-image-caption {

    color: var(--text);

    background: inherit;

}

#messages .message-row.mine
.message-image-caption{

    color:#ffffff;

}

#messages .message-row:not(.mine)
.message-image-caption{

    color:var(--text);

}
.image-preview-close {
    font-size: 0;
}

.image-preview-close::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'><path d='M6 6l12 12'/><path d='M18 6L6 18'/></svg>");
}