* {
  box-sizing: border-box;
}

:root {
  /* Светлая тема Callibri (Emerald). Токены переписаны: тёмный navy/cyan -> светлый изумруд */
  --bg-main: #eef2f1;
  --bg-deep: #e7ece9;
  --bg-card: #ffffff;
  --bg-card-soft: #f4f7f6;
  --bg-input: #f1f4f3;

  --accent-cyan: #2e6be6;   /* вторичный синий (звонок/видео) */
  --accent-blue: #2e6be6;
  --accent-green: #15a66b;  /* основной изумрудный */
  --accent-lime: #22c55e;   /* яркий зелёный (онлайн/акцент) */

  --text-main: #1e2a37;
  --text-soft: #55606e;
  --text-muted: #8a94a2;

  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.10);

  --border-soft: rgba(20, 40, 30, 0.08);
  --border-bright: rgba(21, 166, 107, 0.35);

  --shadow-card: 0 10px 30px rgba(17, 40, 30, 0.09);
  --shadow-soft: 0 4px 16px rgba(17, 40, 30, 0.06);

  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 12% 10%, rgba(21, 166, 107, 0.06), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(46, 107, 230, 0.05), transparent 32%),
    linear-gradient(160deg, #eef4f2 0%, #e9f0ed 100%);
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

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

#auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: min(100%, 440px);
  padding: 30px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(32, 82, 108, 0.78), rgba(30, 64, 94, 0.88)),
    rgba(26, 68, 96, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.18);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 66%);
  pointer-events: none;
}

.auth-card h1 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #e0f2fe, #67e8f9 42%, #86efac);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-card p {
  margin: 0 0 22px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.auth-card input {
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(26, 60, 88, 0.58);
  color: var(--text-main);
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.auth-card input::placeholder {
  color: rgba(203, 213, 225, 0.48);
}

.auth-card input:focus {
  border-color: rgba(34, 211, 238, 0.52);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.1);
  background: rgba(26, 60, 88, 0.72);
}

.password-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}

.password-wrap input {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

#togglePassword {
  height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  font-weight: 800;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

#togglePassword:hover {
  background: rgba(255, 255, 255, 0.13);
  color: white;
  transform: translateY(-1px);
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  user-select: none;
}

.remember-row input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent-cyan);
}

/* кнопки входа и регистрации рядом */
.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

#loginBtn,
#registerBtn {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  font-weight: 900;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

#loginBtn {
  margin: 0;
  color: white;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.18);
}

#registerBtn {
  margin: 0;
  color: #d9f99d;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(163, 230, 53, 0.22);
}

#loginBtn:hover,
#registerBtn:hover {
  transform: translateY(-1px);
}

#loginBtn:hover {
  box-shadow: 0 18px 36px rgba(16, 185, 129, 0.2);
}

#registerBtn:hover {
  background: rgba(163, 230, 53, 0.1);
  border-color: rgba(163, 230, 53, 0.34);
}

#authError {
  min-height: 20px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 14px;
  text-align: center;
}

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

#app {
  width: 100vw;
  height: 100vh;
  padding: 18px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
}

.sidebar,
.chat {
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(12, 42, 62, 0.82), rgba(4, 20, 34, 0.88)),
    rgba(9, 30, 46, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.14);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.chat {
  display: flex;
  flex-direction: column;
}

/* =========================
   PROFILE / SIDEBAR
========================= */

.profile {
  min-height: 76px;
  padding: 13px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(34, 211, 238, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(125, 211, 252, 0.16);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

#meName {
  color: var(--text-main);
  font-weight: 950;
  font-size: 15px;
  max-width: 148px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#meLogin {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
  max-width: 148px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#logoutBtn {
  min-width: 72px;
  height: 42px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: 15px;
  background: rgba(251, 113, 133, 0.14);
  color: #fecdd3;
  font-weight: 900;
  border: 1px solid rgba(251, 113, 133, 0.18);
}

#profileAvatarBtn,
.callibri-avatar-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0ea5e9, #10b981) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 950 !important;
  font-size: 22px !important;
  padding: 0 !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24) !important;
  border: 1px solid rgba(125, 211, 252, 0.25) !important;
  flex-shrink: 0 !important;
}

#profileAvatarBtn img,
.callibri-avatar-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#settingsBtn,
#callibriGearBtn,
.callibri-settings-btn,
.callibri-gear-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  margin-left: auto !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #06b6d4, #10b981) !important;
  color: white !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease !important;
}

#settingsBtn:hover,
#callibriGearBtn:hover,
.callibri-settings-btn:hover,
.callibri-gear-btn:hover {
  transform: translateY(-1px) rotate(8deg) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#search {
  width: 100%;
  height: 46px;
  margin: 15px 0 12px;
  padding: 0 15px;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  background: rgba(26, 60, 88, 0.48);
  color: var(--text-main);
  outline: none;
  flex-shrink: 0;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

#search::placeholder {
  color: rgba(203, 213, 225, 0.45);
}

#search:focus {
  border-color: rgba(34, 211, 238, 0.44);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08);
  background: rgba(26, 60, 88, 0.64);
}

.sidebar-title {
  margin: 14px 6px 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

#users,
#recentChats,
#groups {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#users {
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}

#recentChats,
#groups {
  flex-shrink: 0;
}

#createGroupBtn {
  width: 100%;
  height: 44px;
  margin: 4px 0 8px;
  border-radius: 16px;
  color: #d9f99d;
  font-weight: 900;
  background: rgba(163, 230, 53, 0.08);
  border: 1px solid rgba(163, 230, 53, 0.16);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

#createGroupBtn:hover {
  transform: translateY(-1px);
  background: rgba(163, 230, 53, 0.12);
  border-color: rgba(163, 230, 53, 0.3);
}

.user {
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border-radius: 19px;
  background: transparent;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.user:hover {
  background: rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.user.active {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(16, 185, 129, 0.16));
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.16);
}

.avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-avatar {
  background: linear-gradient(135deg, #155e75, #047857);
}

.user-info {
  min-width: 0;
  flex: 1;
}

.user-info b {
  display: flex;
  align-items: center;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  margin-right: 6px;
  background: #64748b;
}

.online-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.17);
}

.unread-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: white;
  font-size: 12px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =========================
   ARCHIVE
========================= */

.archive-btn {
  width: 100%;
  min-height: 60px;
  margin: 10px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(16, 185, 129, 0.08));
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.archive-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.34);
  background:
    radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(16, 185, 129, 0.12));
}

.archive-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(26, 60, 88, 0.52);
  color: #67e8f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  border: 1px solid rgba(125, 211, 252, 0.18);
  flex-shrink: 0;
}

.archive-info {
  min-width: 0;
  flex: 1;
}

.archive-info b {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 3px;
}

.archive-info span {
  display: block;
  color: #9bd8e6;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #06b6d4, #10b981);
  color: white;
  font-size: 12px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.archive-context-menu,
.message-context-menu {
  position: fixed;
  z-index: 999999;
  width: 228px;
  max-height: calc(100vh - 20px);
  max-width: calc(100vw - 20px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  animation: ctxPop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  transform-origin: top left;
}

@keyframes ctxPop {
  from { opacity: 0; transform: scale(0.9) translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.archive-context-menu.hidden,
.message-context-menu.hidden {
  display: none;
}

.archive-context-menu button,
.message-context-menu button {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  color: #1e2a37;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  transition: background 0.14s ease, padding-left 0.14s ease;
}

.archive-context-menu button span,
.message-context-menu button span {
  width: 20px;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
}

.archive-context-menu button:hover,
.message-context-menu button:hover {
  background: #f1f5f9;
}

.message-context-menu button.danger {
  color: #fb7185;
}

.message-context-menu button.danger:hover {
  background: #fef2f2;
}

/* =========================
   CHAT HEADER
========================= */

.chat-header {
  min-height: 78px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.12), transparent 40%),
    rgba(26, 60, 88, 0.25);
  flex-shrink: 0;
}

#chatAvatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 17px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.23);
}

#chatAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chatName {
  color: var(--text-main);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

#chatStatus {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

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

#messages {
  flex: 1;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 20% 12%, rgba(34, 211, 238, 0.055), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(16, 185, 129, 0.055), transparent 34%);
}

.empty {
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

.small-empty {
  min-height: 48px;
  height: auto;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

.message {
  width: fit-content;
  max-width: min(68%, 620px);
  margin: 9px 0;
  padding: 11px 13px 9px;
  border-radius: 21px 21px 21px 7px;
  background: rgba(15, 42, 61, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.1);
  color: var(--text-main);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow-wrap: anywhere;
}

.message.mine {
  margin-left: auto;
  border-radius: 21px 21px 7px 21px;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.88), rgba(16, 185, 129, 0.86));
  border-color: rgba(255, 255, 255, 0.16);
  color: white;
}

.message-name {
  margin-bottom: 5px;
  color: #9bd8e6;
  font-size: 12px;
  font-weight: 950;
}

.message.mine .message-name {
  color: rgba(255, 255, 255, 0.82);
}

.message-text {
  font-size: var(--cb-font-size, 15px);
  line-height: 1.45;
  white-space: pre-wrap;
}

.message-time {
  color: inherit;
  opacity: 0.72;
}

.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(203, 213, 225, 0.82);
}

.message.mine .message-meta {
  color: rgba(255, 255, 255, 0.82);
}

.message-edited {
  font-size: 11px;
  opacity: 0.68;
}

.message-status {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 13px;
  flex-shrink: 0;
}

.message-status__check {
  position: absolute;
  top: -2px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.message-status__check.first {
  left: 0;
}

.message-status__check.second {
  left: 7px;
}

/* Не прочитано: одна серая галочка */
.message-status.unread .message-status__check {
  color: rgba(148, 163, 184, 0.95);
}

.message-status.unread .message-status__check.first {
  left: 7px;
}

.message-status.unread .message-status__check.second {
  display: none;
}

/* Прочитано: две синие галочки */
.message-status.read .message-status__check {
  color: #34b7f1;
  text-shadow: 0 0 8px rgba(52, 183, 241, 0.45);
}

.message-reply-preview {
  margin-bottom: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  border-left: 3px solid #22d3ee;
  background: rgba(34, 211, 238, 0.12);
  overflow: hidden;
}

.message.mine .message-reply-preview {
  border-left-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.13);
}

.message-reply-author {
  margin-bottom: 2px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.message.mine .message-reply-author {
  color: rgba(255, 255, 255, 0.88);
}

.message-reply-text {
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   MEDIA / VOICE
========================= */

.message-media {
  margin-top: 5px;
}

.message-media img,
.message-media video {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: 17px;
  object-fit: cover;
}

.message-media video {
  background: #000;
}

.message-media-photo img {
  cursor: zoom-in;
}

/* Видео в сообщении: играет только внутри чата, по тапу — встроенный просмотр */
.message-media-video {
  position: relative;
  cursor: pointer;
  min-width: 180px;
}

.message-media-video video {
  width: 100%;
  min-height: 120px;
  pointer-events: none;
}

.msg-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(4, 16, 30, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.msg-video-play svg {
  margin-left: 3px;
}

.message-media-video:hover .msg-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(14, 165, 233, 0.7);
}

/* ===== Встроенный просмотр фото и видео ===== */
#cbMediaViewer {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  flex-direction: column;
  background: rgba(2, 8, 16, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: modalFade 0.16s ease;
}

body.cb-viewer-open {
  overflow: hidden;
}

.cb-mv-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}

.cb-mv-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: rgba(226, 232, 240, 0.85);
}

.cb-mv-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.cb-mv-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.cb-mv-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom));
}

.cb-mv-body img,
.cb-mv-body video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  animation: mvZoomIn 0.18s ease;
  background: #000;
}

@keyframes mvZoomIn {
  from { transform: scale(0.96); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.voice-card {
  min-width: 290px;
  max-width: 380px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(26, 60, 88, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-card__main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.voice-card__play {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-card__body {
  flex: 1;
  min-width: 0;
}

.voice-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}

.voice-card__hint {
  opacity: 0.66;
}

.voice-card__wave {
  height: 42px;
  cursor: pointer;
}

.voice-card__fallback-wave {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.voice-wave-bar {
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
}

.voice-card__footer {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.voice-card__footer-left,
.voice-card__footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-card__clock {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.voice-card__delete,
.delete-message-btn {
  height: 28px;
  padding: 0 9px;
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.46);
  color: white;
  font-size: 12px;
  font-weight: 850;
}

/* =========================
   INPUT
========================= */

.chat-input {
  padding: 14px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(26, 60, 88, 0.26);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

#messageInput {
  flex: 1;
  min-height: 48px;
  max-height: 140px;
  padding: 13px 15px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(26, 60, 88, 0.58);
  color: var(--text-main);
  outline: none;
  resize: none;
  line-height: 1.4;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

#messageInput::placeholder {
  color: rgba(203, 213, 225, 0.46);
}

#messageInput:focus {
  border-color: rgba(34, 211, 238, 0.46);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.08);
  background: rgba(26, 60, 88, 0.72);
}

#sendBtn,
#attachBtn,
#videoNoteBtn,
#voiceBtn {
  height: 48px;
  min-width: 48px;
  border-radius: 17px;
  color: white;
  font-weight: 950;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

#attachBtn,
#videoNoteBtn,
#voiceBtn {
  width: 48px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #d9f99d;
  font-size: 18px;
}

#sendBtn {
  padding: 0 18px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.14);
}

#sendBtn:hover,
#attachBtn:hover,
#videoNoteBtn:hover,
#voiceBtn:hover {
  transform: translateY(-1px);
}

#attachBtn:hover,
#videoNoteBtn:hover,
#voiceBtn:hover {
  background: rgba(255, 255, 255, 0.13);
}

#sendBtn:disabled,
#attachBtn:disabled,
#videoNoteBtn:disabled,
#voiceBtn:disabled,
#messageInput:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

#voiceBtn.recording {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
}

/* =========================
   REPLY / EDIT PANELS
========================= */

.mode-panel,
.dm-reply-panel,
.dm-edit-panel,
.reply-panel,
.edit-panel {
  margin: 8px 16px 0;
  padding: 10px 12px;
  border-radius: 17px;
  background: rgba(15, 42, 61, 0.88);
  border: 1px solid rgba(125, 211, 252, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
}

.mode-panel.hidden,
.dm-reply-panel.hidden,
.dm-edit-panel.hidden,
.reply-panel.hidden,
.edit-panel.hidden {
  display: none;
}

.mode-panel-line,
.dm-reply-line,
.dm-edit-line,
.reply-panel-line,
.edit-panel-line {
  width: 3px;
  align-self: stretch;
  min-height: 36px;
  border-radius: 999px;
  background: #22d3ee;
  flex-shrink: 0;
}

.mode-panel.edit .mode-panel-line,
.dm-edit-line,
.edit-panel-line {
  background: #f59e0b;
}

.mode-panel-content,
.dm-panel-content,
.reply-panel-content,
.edit-panel-content {
  flex: 1;
  min-width: 0;
}

.mode-panel-title,
.dm-panel-title,
.reply-panel-title,
.edit-panel-title {
  margin-bottom: 3px;
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
}

.mode-panel.edit .mode-panel-title,
.dm-edit-panel .dm-panel-title,
.edit-panel-title {
  color: #fbbf24;
}

.mode-panel-text,
.dm-panel-text,
.reply-panel-text,
.edit-panel-text {
  color: var(--text-soft);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mode-panel-close,
.dm-panel-close,
.reply-panel-close,
.edit-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   RECORDING
========================= */

.recording-panel {
  margin: 8px 16px 0;
  padding: 10px 12px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(14, 165, 233, 0.1)),
    rgba(15, 42, 61, 0.88);
  border: 1px solid rgba(251, 113, 133, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
}

.recording-panel.hidden {
  display: none;
}

.recording-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 70px;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.14);
  animation: pulseDot 1s infinite;
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.recording-timer {
  color: white;
  font-weight: 900;
  font-size: 13px;
}

.recording-visualizer {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.recording-bar {
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #67e8f9, #86efac);
}

.recording-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-action {
  height: 34px;
  padding: 0 12px;
  border-radius: 13px;
  color: white;
  font-weight: 850;
}

.recording-action.cancel {
  background: rgba(251, 113, 133, 0.18);
  color: #fecdd3;
}

.recording-action.send {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
}

.recording-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.modal,
.callibri-clean-settings-modal,
.callibri-gear-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 20px;
  background: rgba(30, 58, 92, 0.72);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden,
.callibri-clean-settings-modal.hidden,
.callibri-gear-modal.hidden {
  display: none;
}

.modal-card,
.settings-modal-shell,
.callibri-clean-settings-card,
.callibri-settings-card {
  width: min(94vw, 560px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(23, 62, 102, 0.98), rgba(16, 84, 96, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55);
  color: var(--text-main);
}

.modal-card h2,
.settings-modal-shell h2,
.callibri-clean-settings-card h2,
.callibri-settings-card h2 {
  margin: 0 0 8px;
  color: white;
  font-size: 24px;
  font-weight: 950;
}

.modal-card p {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.modal-card input,
.modal-card textarea,
.settings-modal-shell input,
.settings-modal-shell textarea,
.settings-modal-shell select,
.callibri-clean-settings-card input,
.callibri-clean-settings-card textarea,
.callibri-clean-settings-card select,
.callibri-settings-card input,
.callibri-settings-card textarea,
.callibri-settings-card select {
  width: 100%;
  margin-bottom: 11px;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 58, 92, 0.45);
  color: var(--text-main);
  outline: none;
}

.modal-card textarea,
.settings-modal-shell textarea,
.callibri-clean-settings-card textarea,
.callibri-settings-card textarea {
  min-height: 120px;
  resize: vertical;
}

.modal-actions,
.settings-row,
.callibri-clean-actions,
.callibri-settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.modal-actions button,
.settings-row button,
.callibri-clean-actions button,
.callibri-settings-actions button,
.callibri-settings-footer button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 14px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 850;
}

.modal-actions button:last-child,
.settings-row .primary,
.callibri-clean-actions .primary,
.callibri-settings-actions .primary,
.callibri-settings-footer .primary {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
}

.settings-row .danger,
.callibri-clean-actions .danger,
.callibri-settings-actions .danger,
.callibri-settings-footer .danger {
  background: linear-gradient(135deg, rgba(190, 24, 93, 0.92), rgba(153, 27, 27, 0.96));
}

#groupError,
#profileError {
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
}

/* =========================
   SCROLLBARS
========================= */

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.22);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.34);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  #app {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .sidebar {
    max-height: 46vh;
  }

  .chat {
    min-height: 70vh;
  }

  .message {
    max-width: 86%;
  }
}

@media (max-width: 560px) {
  #auth {
    padding: 14px;
  }

  .auth-card {
    padding: 22px;
    border-radius: 26px;
  }

  #loginBtn,
  #registerBtn {
    width: 100%;
    margin: 0 0 10px;
  }

  #app {
    padding: 8px;
    gap: 10px;
  }

  .sidebar,
  .chat {
    border-radius: 22px;
  }

  .chat-input {
    flex-wrap: wrap;
  }

  #messageInput {
    flex-basis: 100%;
  }

  #sendBtn {
    flex: 1;
  }

  .message {
    max-width: 92%;
  }

  .voice-card {
    min-width: 240px;
  }
}

.archive-btn {
  width: 100%;
  min-height: 60px;
  margin: 10px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(16, 185, 129, 0.08));
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.archive-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.34);
  background:
    radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(16, 185, 129, 0.12));
}

.archive-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(26, 60, 88, 0.52);
  color: #67e8f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  border: 1px solid rgba(125, 211, 252, 0.18);
  flex-shrink: 0;
}

.archive-info {
  min-width: 0;
  flex: 1;
}

.archive-info b {
  display: block;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 3px;
}

.archive-info span {
  display: block;
  color: #9bd8e6;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #06b6d4, #10b981);
  color: white;
  font-size: 12px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.auth-tabs {
  width: 100%;
  height: 48px;
  margin: 0 0 16px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(26, 60, 88, 0.45);
  border: 1px solid rgba(125, 211, 252, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.auth-tab {
  border-radius: 14px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 900;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.auth-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

.auth-tab.active {
  color: white;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 10px 22px rgba(14, 165, 233, 0.18);
}

.auth-mode-fields {
  width: 100%;
}

.auth-card.auth-register-mode #username::placeholder {
  color: transparent;
}

.auth-switch-hint {
  width: 100%;
  margin-top: 12px;
  padding: 0;
  background: transparent;
  color: #9bd8e6;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.auth-switch-hint:hover {
  color: #d9f99d;
}

.auth-card.auth-register-mode .remember-row {
  display: none;
}

.auth-card.auth-register-mode #username::placeholder {
  color: rgba(203, 213, 225, 0.48);
}

.auth-card.auth-register-mode #username {
  margin-bottom: 12px;
}

.auth-card.auth-register-mode #username + .password-wrap {
  margin-top: 0;
}

/* =========================
   PINNED CHATS
========================= */

.chat-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.chat-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pin-icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
  border-radius: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(16, 185, 129, 0.95));
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.22);
  transform: rotate(45deg);
}

.chat-pin-icon::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

.chat-context-menu {
  position: fixed;
  z-index: 999999;
  width: 190px;
  padding: 7px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
}

.chat-context-menu.hidden {
  display: none;
}

.chat-context-menu button {
  width: 100%;
  height: 42px;
  border: none;
  outline: none;
  background: transparent;
  color: #e5e7eb;
  border-radius: 12px;
  padding: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.chat-context-menu button:hover {
  background: rgba(34, 211, 238, 0.12);
  color: #d9f99d;
}

.chat-context-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-context-pin {
  width: 13px;
  height: 13px;
  border-radius: 5px;
  background: linear-gradient(135deg, #22d3ee, #10b981);
  transform: rotate(45deg);
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.12),
    0 6px 12px rgba(0, 0, 0, 0.25);
}

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

.chat-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pin-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(44, 210, 193, 0.14);
  border: 1px solid rgba(44, 210, 193, 0.28);
  color: #35e0c6;
  box-shadow: 0 0 10px rgba(53, 224, 198, 0.12);
  flex-shrink: 0;
}

.chat-pin-badge svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: currentColor;
}

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

.chat-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pin-wing {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #67f2dd;
  opacity: 0.95;
}

.chat-pin-wing svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
  transform: rotate(-14deg);
  filter: drop-shadow(0 0 8px rgba(103, 242, 221, 0.35));
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.recent-chat-item:hover .chat-pin-wing svg {
  transform: rotate(-10deg) scale(1.06);
  filter: drop-shadow(0 0 10px rgba(103, 242, 221, 0.5));
}

/* =========================
   HUMMINGBIRD PIN ICON
========================= */

.recent-chat-item.pinned-chat-item {
  position: relative;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.13), rgba(16, 185, 129, 0.11)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 3px 0 0 rgba(103, 242, 221, 0.9),
    inset 0 0 0 1px rgba(103, 242, 221, 0.12);
}

.chat-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.chat-title-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hummingbird-pin {
  margin-left: auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7df9e5;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(16, 185, 129, 0.16));
  border: 1px solid rgba(125, 249, 229, 0.24);
  box-shadow:
    0 0 0 2px rgba(103, 242, 221, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 0 16px rgba(103, 242, 221, 0.16);
  flex-shrink: 0;
}

.hummingbird-pin svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: currentColor;
  transform: rotate(-16deg);
  filter: drop-shadow(0 0 7px rgba(125, 249, 229, 0.45));
}

.recent-chat-item:hover .hummingbird-pin svg {
  transform: rotate(-10deg) scale(1.08);
}

/* Выпадающий поиск пользователей */
aside {
  position: relative;
}
#users {
  display: none;
  position: absolute;
  left: 12px;
  right: 12px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--cb-surface, #ffffff);
  border: 1px solid var(--cb-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  z-index: 100;
  padding: 8px;
}
#users.open {
  display: block;
}
/* ===== НОВЫЙ ДИЗАЙН: ЭТАП 1 — пузыри сообщений ===== */

#messages {
  padding: 18px max(24px, 9%);
}

.message {
  max-width: min(64%, 480px);
  margin: 3px 0;
  padding: 7px 12px 5px;
  border-radius: 16px 16px 16px 5px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.message.mine {
  border-radius: 16px 16px 5px 16px;
}

/* своё имя над своими сообщениями не показываем — и так ясно */
.message.mine .message-name {
  display: none;
}

.message-text {
  font-size: 15px;
  line-height: 1.35;
}

.message-meta {
  margin-top: 2px;
  font-size: 11px;
}

/* соседние сообщения одного человека — плотнее, в едином стиле */
.message + .message {
  margin-top: 3px;
}
/* разделители дат в переписке */
.date-divider {
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
}

.date-divider span {
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(26, 60, 88, 0.45);
  color: rgba(226, 232, 240, 0.85);
  font-size: 12px;
  font-weight: 600;
}
/* ===== НОВЫЙ ДИЗАЙН: ЭТАП 2 — список чатов ===== */

.recent-chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
}

.recent-chat-item .user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.recent-chat-item .user-info b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-chat-item .user-info > span {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-chat-item.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(16, 185, 129, 0.3));
}

.recent-chat-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
}
/* ===== НОВЫЙ ДИЗАЙН: ЭТАП 3 — строка ввода ===== */

#search {
  border-radius: 999px;
}

#messageInput {
  border-radius: 24px;
}

#attachBtn,
#videoNoteBtn,
#voiceBtn {
  width: 48px;
  border-radius: 50%;
  background: transparent;
  color: rgba(203, 213, 225, 0.78);
  font-size: 20px;
}

#attachBtn:hover,
#voiceBtn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: white;
}

#sendBtn {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 50%;
}

.composer-hidden {
  display: none;
}

/* ===== НОВЫЙ ДИЗАЙН: ЭТАП 4 — шапка и настройки ===== */

#chatAvatar {
  border-radius: 50%;
}

.settings-avatar {
  width: 92px;
  height: 92px;
  min-width: 92px;
  margin: 4px auto 10px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: white;
  font-size: 36px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(125, 211, 252, 0.35);
  cursor: pointer;
}

.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.settings-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
}

.settings-me b {
  color: white;
  font-size: 19px;
}

.settings-me span {
  color: var(--text-muted);
  font-size: 13px;
}

.settings-mobile-header {
  display: none;
}

.settings-mobile-back {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.settings-mobile-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.settings-mobile-spacer {
  width: 38px;
  height: 38px;
}

.settings-modal-shell .remember-row {
  justify-content: center;
  gap: 8px;
}

/* ===== ПЕРЕДЕЛКА МОДАЛКИ НАСТРОЕК ===== */

.modal {
  backdrop-filter: blur(6px);
  animation: modalFade 0.15s ease;
}

@keyframes modalFade {
  from { opacity: 0; }
}

.settings-modal-shell {
  width: min(94vw, 400px) !important;
  padding: 28px 22px 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(9, 38, 60, 0.99), rgba(7, 44, 52, 0.99)) !important;
  animation: settingsPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes settingsPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.settings-modal-shell textarea {
  min-height: 84px !important;
}

.settings-modal-shell .remember-row {
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
  margin: 2px 0 16px;
  padding: 13px 14px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(30, 58, 92, 0.45);
  color: var(--text-main);
  cursor: pointer;
}

.settings-modal-shell .remember-row input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  flex: 0 0 18px;
}

.settings-modal-shell .modal-actions {
  flex-direction: column;
  gap: 8px;
}

.settings-modal-shell .modal-actions button {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  font-size: 15px;
}

#settingsSaveBtn { order: 1; }

#settingsCloseBtn {
  order: 2;
  background: rgba(255, 255, 255, 0.07);
}

#settingsLogoutBtn {
  order: 3;
  background: transparent;
  color: #fb7185;
}

#settingsLogoutBtn:hover {
  background: rgba(251, 113, 133, 0.12);
}

#settingsStatus {
  min-height: 18px;
  margin-top: 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* шестерёнка — спокойнее */
#callibriGearBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  font-size: 18px !important;
}

#callibriGearBtn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
}

/* ===== ИЗБРАННОЕ — чат-закладка ===== */
.favorites-avatar {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  font-size: 20px;
}

/* ===== ОСВЕЖЕНИЕ ДИЗАЙНА: колонка сообщений ===== */

#usersTitle {
  display: none;
}

#messages {
  padding: 20px 26px;
  background:
    radial-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1.4px),
    radial-gradient(circle at 20% 12%, rgba(34, 211, 238, 0.05), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(16, 185, 129, 0.05), transparent 34%);
  background-size: 22px 22px, auto, auto;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */

#mobileBackBtn {
  display: none;
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
  }

  #app {
    display: block;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .sidebar {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    overflow-y: auto;
  }

  .chat {
    position: fixed;
    inset: 0;
    z-index: 60;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }

  #mobileBackBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
  }

  .chat-input {
    flex-wrap: nowrap;
  }

  #messageInput {
    flex-basis: auto;
  }

  #sendBtn {
    flex: 0 0 auto;
  }

  .message {
    max-width: 84%;
  }

  #messages {
    padding: 14px 12px;
  }

  .settings-modal-shell {
    width: min(400px, calc(100vw - 28px));
  }

  body.settings-open-mobile #appRail,
  body.settings-open-mobile .sidebar,
  body.settings-open-mobile .chat {
    visibility: hidden;
    pointer-events: none;
  }

  #callibriSettingsModal.mobile-settings-page {
    position: fixed;
    inset: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    justify-content: stretch;
    background: #16405e;
    backdrop-filter: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #callibriSettingsModal.mobile-settings-page::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  #callibriSettingsModal.mobile-settings-page .settings-modal-shell {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
    border: none;
    box-shadow: none;
    padding: calc(6px + env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));
    background: transparent !important;
    animation: none;
    color: #f4fbff;
  }

  #callibriSettingsModal.mobile-settings-page .settings-modal-shell,
  #callibriSettingsModal.mobile-settings-page .settings-modal-shell * {
    box-sizing: border-box;
  }

  #callibriSettingsModal.mobile-settings-page .settings-mobile-header {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin: 0 -14px 14px;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
    background: rgba(11, 33, 51, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
  }

  #callibriSettingsModal.mobile-settings-page .settings-mobile-title {
    text-align: center;
    letter-spacing: 0.01em;
    color: #ffffff;
  }

  #callibriSettingsModal.mobile-settings-page .settings-mobile-back {
    background: rgba(255, 255, 255, 0.08);
  }

  #callibriSettingsModal.mobile-settings-page .settings-avatar {
    width: 108px;
    height: 108px;
    min-width: 108px;
    margin: 18px auto 12px;
    border-width: 3px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
    background: linear-gradient(135deg, #14384f, #17495d);
  }

  #callibriSettingsModal.mobile-settings-page .settings-me {
    margin-bottom: 20px;
  }

  #callibriSettingsModal.mobile-settings-page .settings-me b {
    font-size: 19px;
    color: #ffffff;
  }

  #callibriSettingsModal.mobile-settings-page .settings-me span {
    font-size: 13px;
    color: #a9c0cf;
    opacity: 1;
  }

  #callibriSettingsModal.mobile-settings-page .settings-section {
    margin: 0 0 14px;
    padding: 14px;
    border-radius: 20px;
    background: #143247;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  }

  #callibriSettingsModal.mobile-settings-page .settings-section-title {
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #a9bfd0;
    opacity: 1;
  }

  #callibriSettingsModal.mobile-settings-page .settings-row {
    display: block;
    margin: 10px 0 12px;
  }

  #callibriSettingsModal.mobile-settings-page .settings-row > span {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    color: #eef8ff;
  }

  #callibriSettingsModal.mobile-settings-page input,
  #callibriSettingsModal.mobile-settings-page select {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: #16405e;
    color: #ffffff;
    box-shadow: none;
  }

  #callibriSettingsModal.mobile-settings-page input::placeholder {
    color: #9db3c2;
  }

  #callibriSettingsModal.mobile-settings-page .settings-row select {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
  }

  #callibriSettingsModal.mobile-settings-page .settings-mini-btn {
    min-height: 48px;
    border-radius: 16px;
    background: rgba(39, 211, 193, 0.08);
    border-color: rgba(39, 211, 193, 0.18);
    color: #f4fbff;
  }

  #callibriSettingsModal.mobile-settings-page .remember-row {
    margin: 0 0 10px;
    min-height: 56px;
    padding: 14px 14px;
    border-radius: 16px;
    background: #16405e;
    border: 1px solid rgba(255, 255, 255, 0.04);
  }

  #callibriSettingsModal.mobile-settings-page .remember-row span {
    flex: 1;
    font-size: 14px;
    color: #f4fbff;
  }

  #callibriSettingsModal.mobile-settings-page .remember-row input {
    accent-color: #27d3c1;
  }

  #callibriSettingsModal.mobile-settings-page .modal-actions {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 4px 0 0;
    background: transparent;
  }

  #callibriSettingsModal.mobile-settings-page .modal-actions button {
    width: 100%;
    min-height: 52px;
    margin: 0;
    border-radius: 18px;
  }

  #callibriSettingsModal.mobile-settings-page #settingsCloseBtn {
    display: none;
  }

  #callibriSettingsModal.mobile-settings-page #settingsSaveBtn {
    box-shadow: 0 10px 26px rgba(20, 184, 166, 0.18);
  }

  #callibriSettingsModal.mobile-settings-page #settingsLogoutBtn {
    min-height: 44px;
    background: transparent;
    border: none;
    color: #ff8ea1;
  }

  #callibriSettingsModal.mobile-settings-page #settingsStatus {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #a9c0cf;
  }
}

/* ===== КНОПКА «СКАЧАТЬ ПРИЛОЖЕНИЕ» В ПРОФИЛЕ ===== */

.app-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.08);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.app-download-btn:hover {
  background: rgba(34, 211, 238, 0.16);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .app-download-btn {
    display: none;
  }
}

/* ===== ПРОФИЛЬ (в едином стиле) И РАСШИРЕННЫЕ НАСТРОЙКИ ===== */

.profile-modal-shell {
  width: min(400px, calc(100vw - 28px));
  text-align: center;
  position: relative;
  padding: 72px 26px 26px;
  border-radius: 24px;
}

/* Строгий премиальный баннер-обложка сверху карточки */
.profile-modal-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 124px;
  z-index: 0;
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(135deg, #10151b 0%, #1b2b26 55%, #123024 100%);
}

.profile-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.25s ease;
}

.profile-close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}

.profile-big-avatar {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #263a34, #101815);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.95),
    0 14px 32px rgba(16, 40, 30, 0.28);
}

.profile-big-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  position: relative;
  z-index: 1;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1px;
  margin-bottom: 2px;
}

.profile-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px auto 24px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  opacity: 1;
}

.profile-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
}

.profile-status.online {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.38);
  opacity: 1;
}

.profile-status.online::before {
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.95);
  animation: profileDotPulse 1.8s ease-in-out infinite;
}

@keyframes profileDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.75; }
}

.profile-info-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 4px;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
  transition: background 0.2s ease;
}

.profile-info-row:hover {
  background: rgba(148, 163, 184, 0.06);
}

.profile-info-value {
  font-size: 14.5px;
  font-weight: 600;
}

.profile-info-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Кнопка действия в профиле */
.profile-modal-shell .modal-actions {
  margin-top: 22px;
}

.profile-modal-shell .modal-actions button {
  flex: 1;
  min-height: 48px;
  border-radius: 13px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.profile-modal-shell .modal-actions button:hover {
  transform: translateY(-1px);
}

/* Разделы настроек */
.settings-section {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.09);
  text-align: left;
}

.settings-section-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0;
  font-size: 14px;
}

.settings-row select {
  flex: 0 1 60%;
  max-width: 60%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(26, 60, 88, 0.55);
  color: inherit;
  font-size: 13px;
}

.settings-mini-btn {
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.07);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-mini-btn:hover {
  background: rgba(34, 211, 238, 0.16);
}

.mic-meter {
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.mic-meter-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #34d399);
  transition: width 0.08s linear;
}

/* Длинные модалки: прокрутка и на ПК, и на телефоне */
.settings-modal-shell,
.profile-modal-shell {
  max-height: 88dvh;
  overflow-y: auto;
}

/* Подсказка в настройках приватности */
.settings-hint {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.55;
}

/* Зеленый статус «в сети» */
.status-online {
  color: #34d399;
}

/* Долгое нажатие на телефоне: без выделения текста и системного меню */
@media (max-width: 768px) {
  .message {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

/* ===== КРАСИВЫЙ РЕЖИМ ВЫБОРА СООБЩЕНИЙ ===== */

.callibri-selection-toolbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(4, 18, 32, 0.92);
  border: 1px solid rgba(34, 211, 238, 0.25);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  animation: selectionBarIn 0.22s ease;
}

@keyframes selectionBarIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.callibri-selected-count {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #7dd3fc;
  white-space: nowrap;
}

.callibri-selection-toolbar button {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.callibri-selection-toolbar button:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
}

.callibri-selection-toolbar button.primary {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.85), rgba(16, 185, 129, 0.85));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

.callibri-selection-toolbar button.danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}

.callibri-selection-toolbar button.danger:hover {
  background: rgba(248, 113, 113, 0.22);
}

/* Сообщения в режиме выбора */
.message.callibri-selection-mode {
  cursor: pointer;
}

.message.callibri-selection-mode:hover {
  filter: brightness(1.1);
}

.message.callibri-selected {
  position: relative;
  outline: 2px solid rgba(34, 211, 238, 0.75);
  outline-offset: 2px;
}

.message.callibri-selected::after {
  content: "\2713";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  .callibri-selection-toolbar {
    bottom: 10px;
    width: calc(100vw - 20px);
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
  }

  .callibri-selection-toolbar button {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ===== ХВОСТИКИ И АНИМАЦИЯ ПУЗЫРЕЙ ===== */

.message {
  position: relative;
}

.message:not(.mine) {
  border-bottom-left-radius: 4px;
}

.message:not(.mine)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -6px;
  width: 12px;
  height: 12px;
  z-index: -1;
  background: rgba(15, 42, 61, 0.95);
  clip-path: path("M12 0 C10.5 6.5, 6.5 10.5, 0 12 L12 12 Z");
  pointer-events: none;
}

.message.mine {
  border-bottom-right-radius: 4px;
}

.message.mine::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -6px;
  width: 12px;
  height: 12px;
  z-index: -1;
  background: rgba(16, 185, 129, 0.95);
  clip-path: path("M0 0 C1.5 6.5, 5.5 10.5, 12 12 L0 12 Z");
  pointer-events: none;
}

/* Анимация появления — только у действительно нового сообщения,
   чтобы при перерисовке чата пузыри не дёргались повторно */
#messages .message.msg-appear {
  animation: msgIn 0.22s ease;
}

/* Часики у сообщения, которое ещё отправляется */
.message-status.pending {
  font-size: 11px;
  opacity: 0.85;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== ВРЕМЯ В СПИСКЕ ЧАТОВ ===== */

.user-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.user-top-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list-time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.85;
  white-space: nowrap;
}

/* ===== ОБОИ ЧАТА ===== */

/* Классика — мелкие иконки как в WhatsApp */
#messages.wp-classic {
  background-color: #eae6df !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' opacity='0.08'%3E%3Ctext x='10' y='25' font-size='18'%3E💬%3C/text%3E%3Ctext x='60' y='55' font-size='14'%3E📎%3C/text%3E%3Ctext x='120' y='30' font-size='16'%3E😊%3C/text%3E%3Ctext x='170' y='60' font-size='13'%3E📷%3C/text%3E%3Ctext x='30' y='85' font-size='15'%3E🎵%3C/text%3E%3Ctext x='90' y='80' font-size='12'%3E⭐%3C/text%3E%3Ctext x='150' y='95' font-size='16'%3E📞%3C/text%3E%3Ctext x='15' y='130' font-size='13'%3E🔒%3C/text%3E%3Ctext x='75' y='120' font-size='17'%3E❤️%3C/text%3E%3Ctext x='130' y='140' font-size='14'%3E✏️%3C/text%3E%3Ctext x='45' y='165' font-size='15'%3E🕐%3C/text%3E%3Ctext x='100' y='175' font-size='13'%3E📌%3C/text%3E%3Ctext x='160' y='170' font-size='16'%3E🎤%3C/text%3E%3Ctext x='20' y='195' font-size='12'%3E✨%3C/text%3E%3Ctext x='80' y='195' font-size='14'%3E🔔%3C/text%3E%3Ctext x='140' y='195' font-size='13'%3E💫%3C/text%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
}

/* Градиент — мягкий переход */
#messages.wp-gradient {
  background: linear-gradient(145deg, #dfe6e9 0%, #b2bec3 30%, #a4b0be 60%, #dfe6e9 100%) !important;
}

/* Узор — серые диагональные линии как в WhatsApp */
#messages.wp-pattern {
  background-color: #f0ebe3 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.13) 10px,
      rgba(180, 170, 157, 0.13) 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.1) 10px,
      rgba(180, 170, 157, 0.1) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(180, 170, 157, 0.06) 20px,
      rgba(180, 170, 157, 0.06) 21px
    ) !important;
}

/* Без обоев */
#messages.wp-clean {
  background: #ffffff !important;
}

/* Пузыри — мягкие круги */
#messages.wp-bubbles {
  background-color: #e8eff5 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(147, 165, 190, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(130, 170, 200, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(147, 165, 190, 0.1) 0%, transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(130, 170, 200, 0.13) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(160, 180, 200, 0.08) 0%, transparent 60%) !important;
}

/* Соты — геометрический узор */
#messages.wp-honeycomb {
  background-color: #f5f1eb !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16l28-16 28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%23c4b9a8' stroke-width='0.6' opacity='0.3'/%3E%3C/svg%3E") !important;
  background-size: 56px 100px !important;
}

/* Ночь — тёмный фон */
#messages.wp-night {
  background: linear-gradient(170deg, #1a1c2c 0%, #2a2d3e 40%, #1f2233 100%) !important;
}

/* Минимализм — точки */
#messages.wp-dots {
  background-color: #f7f7f5 !important;
  background-image: radial-gradient(circle, #d0cec8 0.8px, transparent 0.8px) !important;
  background-size: 18px 18px !important;
}

/* Те же обои — фоном всего сайта (сам body, включая отступы/зазоры вокруг сайдбара и чата), а не только внутри открытого чата */
body.wp-classic {
  background-color: #eae6df !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' opacity='0.08'%3E%3Ctext x='10' y='25' font-size='18'%3E💬%3C/text%3E%3Ctext x='60' y='55' font-size='14'%3E📎%3C/text%3E%3Ctext x='120' y='30' font-size='16'%3E😊%3C/text%3E%3Ctext x='170' y='60' font-size='13'%3E📷%3C/text%3E%3Ctext x='30' y='85' font-size='15'%3E🎵%3C/text%3E%3Ctext x='90' y='80' font-size='12'%3E⭐%3C/text%3E%3Ctext x='150' y='95' font-size='16'%3E📞%3C/text%3E%3Ctext x='15' y='130' font-size='13'%3E🔒%3C/text%3E%3Ctext x='75' y='120' font-size='17'%3E❤️%3C/text%3E%3Ctext x='130' y='140' font-size='14'%3E✏️%3C/text%3E%3Ctext x='45' y='165' font-size='15'%3E🕐%3C/text%3E%3Ctext x='100' y='175' font-size='13'%3E📌%3C/text%3E%3Ctext x='160' y='170' font-size='16'%3E🎤%3C/text%3E%3Ctext x='20' y='195' font-size='12'%3E✨%3C/text%3E%3Ctext x='80' y='195' font-size='14'%3E🔔%3C/text%3E%3Ctext x='140' y='195' font-size='13'%3E💫%3C/text%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
}

body.wp-gradient {
  background: linear-gradient(145deg, #dfe6e9 0%, #b2bec3 30%, #a4b0be 60%, #dfe6e9 100%) !important;
}

body.wp-pattern {
  background-color: #f0ebe3 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.13) 10px,
      rgba(180, 170, 157, 0.13) 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.1) 10px,
      rgba(180, 170, 157, 0.1) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(180, 170, 157, 0.06) 20px,
      rgba(180, 170, 157, 0.06) 21px
    ) !important;
}

body.wp-clean {
  background: #ffffff !important;
}

body.wp-bubbles {
  background-color: #e8eff5 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(147, 165, 190, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(130, 170, 200, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(147, 165, 190, 0.1) 0%, transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(130, 170, 200, 0.13) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(160, 180, 200, 0.08) 0%, transparent 60%) !important;
}

body.wp-honeycomb {
  background-color: #f5f1eb !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16l28-16 28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%23c4b9a8' stroke-width='0.6' opacity='0.3'/%3E%3C/svg%3E") !important;
  background-size: 56px 100px !important;
}

body.wp-night {
  background: linear-gradient(170deg, #1a1c2c 0%, #2a2d3e 40%, #1f2233 100%) !important;
}

body.wp-dots {
  background-color: #f7f7f5 !important;
  background-image: radial-gradient(circle, #d0cec8 0.8px, transparent 0.8px) !important;
  background-size: 18px 18px !important;
}

body.wp-classic .chat {
  background-color: #eae6df !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' opacity='0.08'%3E%3Ctext x='10' y='25' font-size='18'%3E💬%3C/text%3E%3Ctext x='60' y='55' font-size='14'%3E📎%3C/text%3E%3Ctext x='120' y='30' font-size='16'%3E😊%3C/text%3E%3Ctext x='170' y='60' font-size='13'%3E📷%3C/text%3E%3Ctext x='30' y='85' font-size='15'%3E🎵%3C/text%3E%3Ctext x='90' y='80' font-size='12'%3E⭐%3C/text%3E%3Ctext x='150' y='95' font-size='16'%3E📞%3C/text%3E%3Ctext x='15' y='130' font-size='13'%3E🔒%3C/text%3E%3Ctext x='75' y='120' font-size='17'%3E❤️%3C/text%3E%3Ctext x='130' y='140' font-size='14'%3E✏️%3C/text%3E%3Ctext x='45' y='165' font-size='15'%3E🕐%3C/text%3E%3Ctext x='100' y='175' font-size='13'%3E📌%3C/text%3E%3Ctext x='160' y='170' font-size='16'%3E🎤%3C/text%3E%3Ctext x='20' y='195' font-size='12'%3E✨%3C/text%3E%3Ctext x='80' y='195' font-size='14'%3E🔔%3C/text%3E%3Ctext x='140' y='195' font-size='13'%3E💫%3C/text%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
}

body.wp-gradient .chat {
  background: linear-gradient(145deg, #dfe6e9 0%, #b2bec3 30%, #a4b0be 60%, #dfe6e9 100%) !important;
}

body.wp-pattern .chat {
  background-color: #f0ebe3 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.13) 10px,
      rgba(180, 170, 157, 0.13) 11px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 10px,
      rgba(180, 170, 157, 0.1) 10px,
      rgba(180, 170, 157, 0.1) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      rgba(180, 170, 157, 0.06) 20px,
      rgba(180, 170, 157, 0.06) 21px
    ) !important;
}

body.wp-clean .chat {
  background: #ffffff !important;
}

body.wp-bubbles .chat {
  background-color: #e8eff5 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(147, 165, 190, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(130, 170, 200, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(147, 165, 190, 0.1) 0%, transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(130, 170, 200, 0.13) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(160, 180, 200, 0.08) 0%, transparent 60%) !important;
}

body.wp-honeycomb .chat {
  background-color: #f5f1eb !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16l28-16 28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%23c4b9a8' stroke-width='0.6' opacity='0.3'/%3E%3C/svg%3E") !important;
  background-size: 56px 100px !important;
}

body.wp-night .chat {
  background: linear-gradient(170deg, #1a1c2c 0%, #2a2d3e 40%, #1f2233 100%) !important;
}

body.wp-dots .chat {
  background-color: #f7f7f5 !important;
  background-image: radial-gradient(circle, #d0cec8 0.8px, transparent 0.8px) !important;
  background-size: 18px 18px !important;
}

/* ===== СТЕКЛЯННАЯ ШАПКА ЧАТА ===== */

@media (min-width: 769px) {
  .chat {
    position: relative;
  }
}

.chat-header {
  background: rgba(3, 14, 26, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(34, 211, 238, 0.14);
}

@media (min-width: 769px) {
  .chat-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  #messages {
    padding-top: 104px;
  }

  /* Мини-плеер должен идти ПОД шапкой с именем собеседника, а не перекрывать её */
  .mini-player {
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    z-index: 39;
  }
}

/* ===== ЭКРАН ЗАГРУЗКИ ===== */

#callibriSplash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(14, 165, 233, 0.16), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(16, 185, 129, 0.14), transparent 45%),
    #10304c;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#callibriSplash.splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-logo {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 20px 60px rgba(14, 165, 233, 0.35);
  animation: splashPulse 1.6s ease infinite;
}

@keyframes splashPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.splash-name {
  font-size: 22px;
  font-weight: 900;
  color: #e2f4ff;
  letter-spacing: 0.5px;
}

.splash-dots {
  display: flex;
  gap: 6px;
}

.splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  animation: splashDot 1s ease infinite;
}

.splash-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.splash-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes splashDot {
  0%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}


/* ===== НОВЫЕ ГОЛОСОВЫЕ, РЕАКЦИИ, ПОИСК, АВАТАРКИ ГРУПП ===== */
.cb-voice { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 320px; padding: 4px 2px; cursor: pointer; }
.cb-voice-play { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, #0ea5e9, #10b981); color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); transition: transform 0.15s ease; }
.cb-voice-play:hover { transform: scale(1.07); }
.cb-voice-wave { display: flex; align-items: center; gap: 2px; height: 30px; flex: 1; }
.cb-voice-wave i { display: block; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); transition: background 0.2s ease; }
.message:not(.mine) .cb-voice-wave i { background: rgba(125, 211, 252, 0.35); }
.cb-voice-wave i.played { background: #ffffff; }
.message:not(.mine) .cb-voice-wave i.played { background: #22d3ee; }
.cb-voice-dur { font-size: 11px; opacity: 0.8; white-space: nowrap; }
.cb-voice.playing .cb-voice-play { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.25); }

.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msg-reaction { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(26, 60, 88, 0.3); color: inherit; border-radius: 999px; padding: 2px 9px; font-size: 13px; cursor: pointer; line-height: 1.5; transition: transform 0.12s ease, background 0.12s ease; }
.msg-reaction:hover { transform: scale(1.08); }
.msg-reaction b { font-size: 11px; font-weight: 800; }
.msg-reaction.mine-reaction { background: rgba(34, 211, 238, 0.25); border-color: rgba(34, 211, 238, 0.6); }
.reaction-row { display: flex; justify-content: space-between; gap: 0; padding: 4px 2px 8px; border-bottom: 1px solid rgba(148, 226, 213, 0.18); margin-bottom: 6px; }
.reaction-row .reaction-pick { flex: 1 1 0; min-width: 0; border: none; background: transparent; font-size: 19px; padding: 6px 0; cursor: pointer; border-radius: 12px; line-height: 1; text-align: center; transition: transform 0.14s ease, background 0.14s ease; }
.reaction-row .reaction-pick:hover { transform: scale(1.3) translateY(-2px); background: rgba(45, 212, 191, 0.16); }

.chat-search-btn { margin-left: auto; width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.07); color: inherit; font-size: 16px; cursor: pointer; transition: background 0.15s ease; }
.chat-search-btn:hover { background: rgba(255, 255, 255, 0.16); }
.chat-search-bar { position: absolute; left: auto; right: 12px; top: calc(100% + 8px); width: min(440px, calc(100% - 24px)); z-index: 45; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 999px; background: linear-gradient(135deg, rgba(7, 32, 50, 0.97), rgba(3, 16, 28, 0.95)); border: 1px solid rgba(45, 212, 191, 0.26); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: searchDrop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.chat-search-bar::before { content: "🔍"; font-size: 13px; opacity: 0.65; }
.chat-search-bar:focus-within { border-color: rgba(45, 212, 191, 0.55); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(45, 212, 191, 0.14); }
.chat-search-bar.hidden { display: none; }
.chat-search-bar input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: inherit; font-size: 14px; }
.chat-search-bar input::placeholder { color: rgba(148, 163, 184, 0.55); }
#chatSearchCount { font-size: 12px; color: #5eead4; background: rgba(45, 212, 191, 0.12); border: 1px solid rgba(45, 212, 191, 0.3); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
#chatSearchCount:empty { display: none; }
#chatSearchClose { width: 28px; height: 28px; min-width: 28px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: inherit; opacity: 0.85; cursor: pointer; font-size: 12px; line-height: 1; transition: background 0.15s ease, transform 0.18s ease, opacity 0.15s ease; }
#chatSearchClose:hover { opacity: 1; background: rgba(45, 212, 191, 0.22); transform: rotate(90deg); }
.message.search-hidden { display: none; }
#messages .message.search-match { box-shadow: 0 0 0 1.5px rgba(45, 212, 191, 0.4); }
@keyframes searchDrop { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } }

.group-avatar { overflow: hidden; }
.group-avatar img { width: 100%; height: 100%; object-fit: cover; }
#chatAvatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 768px) {
  .chat-header { position: relative; }
  .chat-search-bar { left: 8px; right: 8px; width: auto; border-radius: 20px; }
}


/* ===== ДИЗАЙН В ЕДИНОМ СТИЛЕ: РЕЙЛ, СПИСОК ЧАТОВ, КАНАЛЫ ===== */
.profile { display: none !important; }
.sidebar-title { display: none !important; }
#groups { display: none !important; }
#createGroupBtn { display: none !important; }

@media (min-width: 769px) {
  #app { grid-template-columns: 76px 330px minmax(0, 1fr); }
}

#appRail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: var(--radius-xl); background: rgba(4, 18, 32, 0.55); border: 1px solid rgba(148, 163, 184, 0.12); }
.rail-logo { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #0ea5e9, #10b981); margin-bottom: 10px; }
.rail-btn { width: 60px; padding: 8px 2px; border: none; background: transparent; color: #8ea3b8; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.rail-btn span { font-size: 19px; line-height: 1.2; }
.rail-btn small { font-size: 10px; }
.rail-btn:hover { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; }
.rail-btn.active { background: rgba(34, 211, 238, 0.14); color: #e2e8f0; }
.rail-spacer { flex: 1; }

.sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 2px; position: relative; }
.sidebar-heading { font-size: 20px; font-weight: 800; }
#newChatBtn { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; box-sizing: border-box; padding: 0 0 2px; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 50%; border: none; color: #fff; font-size: 20px; line-height: 1; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #0ea5e9, #10b981); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; }
#newChatBtn:hover { transform: scale(1.08); }
/* Liquid Glass — жидкое стекло */
.new-chat-menu {
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(45, 212, 191, 0.08) 0%, rgba(9, 30, 46, 0.72) 28%, rgba(3, 14, 26, 0.78) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-top: 1px solid rgba(125, 211, 252, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 30px rgba(0, 0, 0, 0.35);
  animation: menuSlideIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  transform-origin: top right;
}

@keyframes menuSlideIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.new-chat-menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  border: none;
  background: transparent;
  color: #e2e8f0;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}

.new-chat-menu button span {
  font-size: 17px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.new-chat-menu button:hover {
  background: rgba(125, 211, 252, 0.12);
  transform: translateX(-2px);
}

.new-chat-menu button:active {
  transform: translateX(-1px) scale(0.98);
  background: rgba(125, 211, 252, 0.16);
}

#messages > .empty { height: 100%; margin: 0; width: 100%; max-width: none; background: transparent; border: none; border-radius: 0; padding: 0; font-size: 14px; }
body:not(.chat-open) #messages {
  background:
    repeating-linear-gradient(45deg, rgba(148, 163, 184, 0.05) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-45deg, rgba(34, 211, 238, 0.04) 0 2px, transparent 2px 18px),
    radial-gradient(circle at 78% 86%, rgba(16, 185, 129, 0.06), transparent 40%),
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.05), transparent 36%);
}

@media (max-width: 768px) {
  /* Нижняя панель в мобильном стиле: плотное жидкое стекло */
  #appRail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    top: auto;
    z-index: 40;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-radius: 0;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  /* Три вкладки: Контакты, Чаты, Настройки */
  #appRail .rail-btn[data-rail="contacts"] { order: 1; }
  #appRail .rail-btn[data-rail="all"] { order: 2; }
  #railSettingsBtn { order: 3; }
  #appRail .rail-btn[data-rail="groups"],
  #appRail .rail-btn[data-rail="channels"],
  #railSlider { display: none !important; }

  #appRail .rail-btn {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 9px 16px;
    border-radius: 20px;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    transition: background 0.25s ease, color 0.25s ease;
  }

  #appRail .rail-btn span { font-size: 20px; line-height: 1; }
  #appRail .rail-btn small { font-size: 13px; font-weight: 600; }

  /* Овальная подложка активной вкладки */
  #appRail .rail-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  /* Красный круглый индикатор непрочитанных на вкладке "Чаты" */
  .rail-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.45);
  }

  .rail-badge.hidden { display: none; }
  .rail-logo { display: none; }
  .rail-spacer { display: none; }
  .rail-btn { width: auto; min-width: 52px; padding: 6px 4px; }
  body.chat-open #appRail { display: none; }
  .sidebar { padding-bottom: 84px; }
}

/* Когда чат не выбран — прячем шапку, поле ввода и мини-плеер */
body:not(.chat-open) .chat > header,
body:not(.chat-open) .chat-input,
body:not(.chat-open) .mini-player {
  display: none !important;
}

/* Контекстное меню списка чатов */
.callibri-sidebar-context-menu { position: fixed; z-index: 120; min-width: 230px; display: flex; flex-direction: column; padding: 7px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 8px 30px rgba(0,0,0,0.15); animation: ctxPop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2); transform-origin: top left; }
.callibri-sidebar-context-menu button { display: flex; align-items: center; gap: 10px; border: none; background: transparent; color: #1e2a37; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; text-align: left; transition: background 0.14s ease; }
.callibri-sidebar-context-menu button:hover { background: #f1f5f9; }
.callibri-sidebar-context-menu button.danger-item { color: #ef4444; }
.callibri-sidebar-context-menu button.danger-item:hover { background: #fef2f2; }
body.cb-dark .callibri-sidebar-context-menu { background: #17212b !important; border-color: #1f2c39 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; }
body.cb-dark .callibri-sidebar-context-menu button { color: #f5f5f5 !important; }
body.cb-dark .callibri-sidebar-context-menu button:hover { background: #242f3d !important; }
body.cb-dark .callibri-sidebar-context-menu button.danger-item { color: #e75454 !important; }
.callibri-sidebar-context-separator { height: 1px; margin: 4px 8px; background: rgba(148, 163, 184, 0.18); }


/* ===== НОВЫЙ ЛОГОТИП CALLIBRI (v=callibri-20) ===== */

.splash-logo {
  background: none;
  border-radius: 19px;
  box-shadow: 0 20px 60px rgba(45, 212, 191, 0.35);
  object-fit: contain;
  font-size: 0;
}

img.rail-logo {
  background: none;
  border-radius: 8px;
  object-fit: contain;
}

.auth-logo {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  border-radius: 17px;
  box-shadow: 0 12px 32px rgba(45, 212, 191, 0.3);
}

/* ===== LIQUID GLASS — всё приложение (v=callibri-26) ===== */
/* Боковая панель со списком чатов */
.sidebar {
  background: linear-gradient(165deg, rgba(45, 212, 191, 0.07) 0%, rgba(9, 30, 46, 0.62) 30%, rgba(3, 14, 26, 0.66) 100%);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Шапка чата */
.chat-header {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.08), rgba(6, 22, 36, 0.55));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(148, 226, 213, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Поле ввода сообщения */
.chat-input {
  background: linear-gradient(0deg, rgba(45, 212, 191, 0.06), rgba(4, 16, 28, 0.55));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid rgba(148, 226, 213, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Левый рейл (на телефоне — нижняя панель вкладок) */
#appRail {
  background: linear-gradient(165deg, rgba(45, 212, 191, 0.10) 0%, rgba(8, 28, 44, 0.60) 40%, rgba(3, 14, 26, 0.70) 100%);
  border: 1px solid rgba(148, 226, 213, 0.20);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Модальные карточки (настройки, профиль, группы) */
.callibri-settings-card,
.modal-card {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.14) 0%, rgba(10, 34, 50, 0.60) 34%, rgba(3, 14, 26, 0.72) 100%) !important;
  border: 1px solid rgba(148, 226, 213, 0.28) !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

/* Экран входа */
.auth-card {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.13) 0%, rgba(10, 34, 50, 0.58) 34%, rgba(3, 14, 26, 0.70) 100%);
  border: 1px solid rgba(148, 226, 213, 0.26);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Пузыри сообщений: лёгкий стеклянный блик без размытия (бережём производительность) */
#messages .message {
  border-color: rgba(148, 226, 213, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
#messages .message.mine {
  border-color: rgba(148, 226, 213, 0.24);
}

/* Панели редактирования, записи голосового и выделения */
.edit-panel,
.recording-panel,
.callibri-selection-toolbar {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.12), rgba(6, 22, 36, 0.68));
  border: 1px solid rgba(148, 226, 213, 0.24);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Кнопки рейла и элементы списка — стеклянный отклик */
.rail-btn:hover { background: rgba(45, 212, 191, 0.12); }
.rail-btn.active { background: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(14, 165, 233, 0.14)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.recent-chat-item:hover { background: rgba(45, 212, 191, 0.08); }
.recent-chat-item.active { background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(14, 165, 233, 0.10)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }

/* На телефоне боковая панель во весь экран — без рамок по краям */
@media (max-width: 768px) {
  .sidebar { border: none; box-shadow: none; }
  #appRail { border-left: none; border-right: none; border-bottom: none; box-shadow: none; }
}

/* ===== НАСТРОЙКИ НА ПК В ЕДИНОМ СТИЛЕ (мобильные не трогаем) ===== */
@media (min-width: 769px) {
  #callibriSettingsModal .settings-modal-shell {
    width: min(94vw, 424px) !important;
    padding: 34px 0 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(23, 52, 78, 0.99), rgba(18, 58, 70, 0.99)) !important;
    position: relative;
  }

  /* Цве��ная обложка сверху, как у профиля */
  #callibriSettingsModal .settings-modal-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 148px;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 30%, rgba(244, 114, 182, 0.45), transparent 48%),
      radial-gradient(circle at 82% 15%, rgba(129, 140, 248, 0.55), transparent 50%),
      radial-gradient(circle at 55% 95%, rgba(34, 211, 238, 0.5), transparent 55%),
      linear-gradient(120deg, #0ea5e9, #8b5cf6 55%, #10b981);
    background-size: 220% 220%;
    animation: profileBannerShift 10s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent);
    mask-image: linear-gradient(180deg, #000 52%, transparent);
  }

  #callibriSettingsModal .settings-avatar {
    position: relative;
    z-index: 1;
    margin: 0 auto 10px;
    border: none;
    box-shadow:
      0 0 0 4px rgba(20, 45, 70, 0.95),
      0 0 0 7px rgba(34, 211, 238, 0.85),
      0 14px 38px rgba(139, 92, 246, 0.4);
  }

  #callibriSettingsModal .settings-me {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
  }

  #callibriSettingsModal .settings-me b {
    font-size: 20px;
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  #callibriSettingsModal .settings-me span {
    color: rgba(226, 232, 240, 0.85);
  }

  /* Секции — плоские панели, в едином стиле */
  #callibriSettingsModal .settings-section {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
  }

  #callibriSettingsModal .settings-section-title {
    margin-bottom: 10px;
    color: #5cb9f8;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  /* Поля ввода */
  #callibriSettingsModal .settings-section input[type="text"] {
    margin-bottom: 10px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  #callibriSettingsModal .settings-section input[type="text"]:focus {
    border-color: #3390ec;
    background: rgba(51, 144, 236, 0.08);
  }

  /* Строки с выпадающими списками */
  #callibriSettingsModal .settings-row {
    margin: 6px 0;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background 0.15s ease;
  }

  #callibriSettingsModal .settings-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  #callibriSettingsModal .settings-row select {
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    cursor: pointer;
  }

  /* Чекбоксы -> переклю��атели, в едином стиле */
  #callibriSettingsModal .remember-row {
    margin: 2px 0 8px;
    padding: 10px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    transition: background 0.15s ease;
  }

  #callibriSettingsModal .remember-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  #callibriSettingsModal .remember-row input {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    flex: 0 0 40px;
    min-width: 40px;
    margin: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  #callibriSettingsModal .remember-row input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
  }

  #callibriSettingsModal .remember-row input:checked {
    background: #3390ec;
  }

  #callibriSettingsModal .remember-row input:checked::after {
    transform: translateX(18px);
  }

  /* Кнопка проверки микрофона — текстовая, в едином стиле */
  #callibriSettingsModal .settings-mini-btn {
    border: none;
    background: transparent;
    color: #5cb9f8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12.5px;
  }

  #callibriSettingsModal .settings-mini-btn:hover {
    background: rgba(51, 144, 236, 0.12);
  }

  #callibriSettingsModal .settings-hint {
    padding: 0 10px;
  }

  /* Кнопка скачивания и действия */
  #callibriSettingsModal .app-download-btn {
    width: calc(100% - 32px);
    margin: 14px 16px 0;
  }

  #callibriSettingsModal .modal-actions {
    margin: 14px 16px 0;
  }

  #callibriSettingsModal #settingsSaveBtn {
    background: linear-gradient(135deg, #2b9df4, #4fc3f7);
    box-shadow: 0 10px 24px rgba(51, 144, 236, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
  }

  #callibriSettingsModal #settingsSaveBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(51, 144, 236, 0.45);
  }

  #callibriSettingsModal #settingsStatus {
    margin: 8px 16px 0;
  }

  /* Тонкий скроллбар */
  #callibriSettingsModal .settings-modal-shell::-webkit-scrollbar {
    width: 6px;
  }

  #callibriSettingsModal .settings-modal-shell::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
  }
}

/* ===== ЗВОНКИ ===== */
.chat-call-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.chat-call-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.45);
}

#chatCallBtn:not(.hidden) + #chatSearchBtn {
  margin-left: 8px;
}

#callibriCallUI {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 16, 30, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modalFade 0.15s ease;
}

.call-card {
  width: min(92vw, 360px);
  padding: 26px 24px 28px;
  border-radius: 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.16), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(139, 92, 246, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(23, 62, 102, 0.98), rgba(16, 84, 96, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55);
  animation: settingsPop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.call-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148, 197, 222, 0.8);
  margin-bottom: 20px;
}

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

.call-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #34d399);
  box-shadow: 0 0 0 4px rgba(5, 22, 38, 0.9), 0 0 0 7px rgba(34, 211, 238, 0.7);
  animation: callPulse 1.8s ease-in-out infinite;
}

.call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes callPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(5, 22, 38, 0.9), 0 0 0 7px rgba(34, 211, 238, 0.7); }
  50% { box-shadow: 0 0 0 4px rgba(5, 22, 38, 0.9), 0 0 0 13px rgba(34, 211, 238, 0.16); }
}

.call-name {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
}

.call-sub {
  min-height: 18px;
  margin: 4px 0 22px;
  font-size: 13.5px;
  color: rgba(226, 232, 240, 0.75);
}

.call-actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.call-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 64px;
}

.call-action > span {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.75);
}

.call-btn {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.call-btn svg {
  width: 24px;
  height: 24px;
}

.call-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

.call-btn.accept {
  background: linear-gradient(135deg, #22c55e, #10b981);
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45);
  animation: callAcceptPulse 1.6s ease-in-out infinite;
}

@keyframes callAcceptPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45), 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45), 0 0 0 12px rgba(34, 197, 94, 0); }
}

.call-btn.hangup {
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  box-shadow: 0 12px 28px rgba(244, 63, 94, 0.45);
}

.call-btn.hangup svg {
  transform: rotate(135deg);
}

.call-btn.mute {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.call-btn.mute.muted {
  background: rgba(244, 63, 94, 0.85);
  border-color: rgba(244, 63, 94, 0.9);
}

@media (max-width: 768px) {
  .chat-call-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  /* Полноэкранный звонок, как в мобильных мессенджерах */
  #callibriCallUI {
    align-items: stretch;
    justify-content: stretch;
    background: rgba(2, 10, 20, 0.9);
  }

  .call-card {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    justify-content: space-between;
    padding: calc(30px + env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom));
    animation: none;
  }

  .call-center {
    flex: 1;
    justify-content: center;
  }

  .call-avatar {
    width: 132px;
    height: 132px;
    font-size: 54px;
  }

  .call-name {
    font-size: 27px;
  }

  .call-sub {
    font-size: 15px;
    margin-bottom: 0;
  }

  .call-actions {
    gap: 36px;
  }

  .call-btn {
    width: 68px;
    height: 68px;
  }

  .call-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* ===== ВИДЕОСООБЩЕНИЯ (кружочки) ===== */
.message-media-videonote {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Убираем белую/цветную "обводку" пузыря-сообщения вокруг кружка — только чистый круг, как в Телеграме */
.message:has(.message-media-videonote),
.message.message--videonote,
.message.mine:has(.message-media-videonote),
.message.mine.message--videonote,
body.cb-dark .message:has(.message-media-videonote),
body.cb-dark .message.message--videonote,
body.cb-dark .message.mine:has(.message-media-videonote),
body.cb-dark .message.mine.message--videonote {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.message:has(.message-media-videonote)::before,
.message.message--videonote::before {
  content: none !important;
  display: none !important;
}

.message.message--videonote .message-meta {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  margin: 0;
}

.cb-videonote {
  position: relative;
  width: 216px;
  height: 216px;
  cursor: pointer;
  user-select: none;
}

.cb-videonote video {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #0b2133;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transform: scaleX(-1); /* запись ведётся с фронтальной камеры без зеркального отражения — зеркалим при показе, чтобы совпадало с тем, что видел отправитель при записи */
}

.cb-vn-ring {
  display: none;
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.cb-vn-ring-bg,
.cb-vn-ring-fg {
  fill: none;
  stroke-width: 3;
}

.cb-vn-ring-bg {
  stroke: rgba(255, 255, 255, 0.18);
}

.cb-vn-ring-fg {
  stroke: #34d399;
  stroke-linecap: round;
  stroke-dasharray: 298.45;
  stroke-dashoffset: 298.45;
  transition: stroke-dashoffset 0.25s linear;
}

.cb-vn-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  background: rgba(4, 16, 30, 0.35);
  border-radius: 50%;
  transition: opacity 0.18s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.cb-videonote.playing .cb-vn-badge {
  opacity: 0;
}

.cb-vn-dur {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: rgba(4, 16, 30, 0.6);
  pointer-events: none;
}

@media (max-width: 768px) {
  .cb-videonote {
    width: 196px;
    height: 196px;
  }

  .cb-vn-badge {
    font-size: 26px;
  }

  .cb-vn-dur {
    font-size: 11.5px;
    bottom: 10px;
  }
}

/* Оверлей записи кружочка (выше открытого чата на телефоне, z-index чата 999) */
#videoNoteRecUI {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(4, 16, 30, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modalFade 0.15s ease;
}

.vn-rec-circle {
  width: min(72vw, 300px);
  height: min(72vw, 300px);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(5, 22, 38, 0.9),
    0 0 0 7px rgba(52, 211, 153, 0.8),
    0 24px 70px rgba(0, 0, 0, 0.55);
  animation: callPulse 1.8s ease-in-out infinite;
}

.vn-rec-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.vn-rec-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.vn-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f43f5e;
  animation: profileDotPulse 1.2s ease-in-out infinite;
}

.vn-rec-max {
  font-weight: 500;
  color: rgba(226, 232, 240, 0.55);
}

.vn-rec-hint {
  font-size: 12.5px;
  color: rgba(226, 232, 240, 0.65);
}

.vn-rec-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 6px;
}

.vn-rec-btn {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.vn-rec-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

.vn-rec-btn.cancel {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.vn-rec-btn.send {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
}

/* ===== "печатает..." — блекло-бирюзовый, с плавным появлением ===== */
#chatStatus.status-typing {
  color: rgba(94, 234, 212, 0.78);
  animation: typingFadeIn 0.25s ease;
}

@keyframes typingFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* ===== Скрытие контейнера на время первичного рендера чата (анти-прыжок скролла) ===== */
#messages.messages-prerender {
  visibility: hidden;
  scroll-behavior: auto !important;
}

/* ===== КНОПКА-СТРЕЛОЧКА "ВНИЗ" ===== */
.chat {
  position: relative;
}

.scroll-down-btn {
  position: absolute;
  right: 18px;
  bottom: 96px;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 50%;
  background: rgba(4, 18, 32, 0.78);
  color: #2dd4bf;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: scrollBtnIn 0.2s ease;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.scroll-down-btn:hover {
  transform: translateY(-2px);
  background: rgba(8, 32, 52, 0.9);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(45, 212, 191, 0.14);
}

.scroll-down-btn.hidden {
  display: none;
}

@keyframes scrollBtnIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Индикатор непрочитанного на стрелочке */
.scroll-down-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2dd4bf;
  border: 2px solid rgba(4, 18, 32, 0.95);
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.9);
  animation: profileDotPulse 1.4s ease-in-out infinite;
}

.scroll-down-dot.hidden {
  display: none;
}

@media (max-width: 768px) {
  .scroll-down-btn {
    right: 12px;
    bottom: 86px;
    width: 40px;
    height: 40px;
  }
}

/* ===== Мобильные тапы: мгновенный отклик списка чатов ===== */
.user,
.recent-chat-item,
.group-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(45, 212, 191, 0.12);
}

@media (max-width: 768px) {
  .user:active {
    background: rgba(45, 212, 191, 0.1);
  }
}

/* ===== МОБИЛЬНОЕ РАЗДЕЛЕНИЕ ЭКРАНОВ: сайдбар и чат по 100% ширины, внахлёст ===== */
@media (max-width: 768px) {
  .sidebar {
    width: 100vw;
    max-width: 100vw;
  }

  /* По умолчанию виден только сайдбар; чат ждёт за правым краем экрана */
  .chat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    display: flex;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 999;
    will-change: transform;
  }

  /* Выбран чат: плавно выезжает справа налево (обе метки — страховка от рассинхрона) */
  .chat.active,
  body.chat-open .chat {
    transform: translateX(0);
  }

  /* Сайдбар при открытом чате: лёгкий параллакс-уход влево (остаётся в DOM для анимации) */
  .sidebar {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

  .sidebar.hidden {
    display: block !important;
    transform: translateX(-14%);
    opacity: 0.35;
    pointer-events: none;
  }
}


/* Ползунок вкладок — только на мобильных */
@media (min-width: 769px) {
  #railSlider { display: none; }
  .rail-badge { display: none; }
}

/* =========================
   НАСТРОЙКИ В СТИЛЕ MAX
========================= */
#callibriSettingsModal { background: rgba(0, 0, 0, 0.55); }
#callibriSettingsModal .mx-shell { display: flex; width: min(96vw, 1080px); height: min(88vh, 720px); background: #060607; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; overflow: hidden; box-shadow: 0 34px 100px rgba(0,0,0,0.6); color: #f2f3f5; }
#callibriSettingsModal .mx-nav { width: 292px; flex: none; display: flex; flex-direction: column; background: #101216; border-right: 1px solid #1d2026; }
#callibriSettingsModal .mx-nav-title { font-size: 17px; font-weight: 700; padding: 16px 18px 10px; color: #f2f3f5; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#callibriSettingsModal .mx-nav-close { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; border: 0; border-radius: 50%; background: #1c1f26; color: #cfd3da; font-size: 14px; line-height: 1; cursor: pointer; transition: background 0.2s ease; }
#callibriSettingsModal .mx-nav-close:active { background: #2a2e37; }
#callibriSettingsModal .mx-nav-scroll { flex: 1; overflow-y: auto; padding: 0 8px 14px; display: flex; flex-direction: column; }
#callibriSettingsModal .mx-profile-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
#callibriSettingsModal .mx-profile-row:hover { background: #191d23; }
#callibriSettingsModal .mx-profile-row.active { background: #22262e; }
#callibriSettingsModal .mx-ava { width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff; background: linear-gradient(135deg, #2a7ef2, #22d3ee); }
#callibriSettingsModal .mx-ava img { width: 100%; height: 100%; object-fit: cover; }
#callibriSettingsModal .mx-ptxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#callibriSettingsModal .mx-ptxt b { font-size: 14px; font-weight: 600; color: #f2f3f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#callibriSettingsModal .mx-ptxt small { font-size: 12px; color: #8b909a; }
#callibriSettingsModal .mx-chev { margin-left: auto; width: 7px; height: 7px; flex: none; border-right: 1.6px solid #5d636c; border-top: 1.6px solid #5d636c; transform: rotate(45deg); }
#callibriSettingsModal .mx-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #e6e8eb; font-size: 13.5px; cursor: pointer; text-align: left; position: relative; }
#callibriSettingsModal .mx-row:hover { background: #191d23; }
#callibriSettingsModal .mx-row.active { background: #22262e; }
#callibriSettingsModal .mx-ic { color: #9aa1ab; flex: none; }
#callibriSettingsModal .mx-invite { color: #8b7cf6; }
#callibriSettingsModal .mx-invite .mx-ic { color: #8b7cf6; }
#callibriSettingsModal .mx-r-security, #callibriSettingsModal .mx-r-appearance, #callibriSettingsModal .mx-r-business, #callibriSettingsModal .mx-r-help { margin-top: 13px; }
#callibriSettingsModal .mx-r-security::before, #callibriSettingsModal .mx-r-appearance::before, #callibriSettingsModal .mx-r-business::before, #callibriSettingsModal .mx-r-help::before { content: ""; position: absolute; top: -7px; left: -8px; right: -8px; height: 1px; background: #1d2026; }
#callibriSettingsModal .mx-body { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #060607; }
#callibriSettingsModal .mx-head { position: relative; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.04); }
#callibriSettingsModal .mx-head-title { font-size: 15px; font-weight: 600; color: #f2f3f5; }
#callibriSettingsModal .mx-back { display: none; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #4ea1ff; font-size: 30px; line-height: 1; padding: 4px 12px; cursor: pointer; }
#callibriSettingsModal .mx-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #8b909a; font-size: 15px; padding: 6px; cursor: pointer; }
#callibriSettingsModal .mx-close:hover { color: #f2f3f5; }
#callibriSettingsModal .mx-panes { flex: 1; overflow-y: auto; }
#callibriSettingsModal .mx-pane { display: none; }
#callibriSettingsModal .mx-pane.active { display: block; }
#callibriSettingsModal .mx-pane-inner { max-width: 480px; margin: 26px auto 0; padding: 0 20px 44px; }
#callibriSettingsModal .mx-bigava { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 4px auto 22px; padding: 0; border: 0; border-radius: 50%; font-size: 36px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2a7ef2, #22d3ee); cursor: pointer; overflow: visible; }
#callibriSettingsModal .mx-bigava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
#callibriSettingsModal .mx-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #2a7ef2; border: 3px solid #060607; color: #fff; display: flex; align-items: center; justify-content: center; }
#callibriSettingsModal .mx-field { position: relative; display: block; margin: 12px 0; }
#callibriSettingsModal .mx-field input, #callibriSettingsModal .mx-field textarea { width: 100%; box-sizing: border-box; background: #1d2127; border: 0; border-radius: 12px; padding: 14px 46px 14px 14px; color: #eef0f3; font-size: 14px; font-family: inherit; }
#callibriSettingsModal .mx-field textarea { min-height: 110px; resize: vertical; padding-right: 14px; }
#callibriSettingsModal .mx-field input::placeholder, #callibriSettingsModal .mx-field textarea::placeholder { color: #7f858e; }
#callibriSettingsModal .mx-field input:focus, #callibriSettingsModal .mx-field textarea:focus { outline: 1px solid rgba(42, 126, 242, 0.6); }
#callibriSettingsModal .mx-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #7f858e; pointer-events: none; }
#callibriSettingsModal .mx-logout-row { display: flex; gap: 10px; margin-top: 14px; }
#callibriSettingsModal .mx-logout { flex: 1; height: 48px; border: 0; border-radius: 12px; background: #262a31; color: #eef0f3; font-size: 14px; font-weight: 600; cursor: pointer; }
#callibriSettingsModal .mx-logout:hover, #callibriSettingsModal .mx-more:hover { background: #2d323a; }
#callibriSettingsModal .mx-more { width: 48px; height: 48px; flex: none; border: 0; border-radius: 12px; background: #262a31; color: #eef0f3; font-size: 20px; cursor: pointer; }
#callibriSettingsModal .mx-status { min-height: 16px; margin-top: 10px; text-align: center; font-size: 12px; color: #8b909a; }

/* Новый дизайн вкладки «Редактировать профиль»: шапка-аватар + имя/@логин, поля сгруппированы в карточку с иконками.
   Цвета идут через --cb-* переменные, поэтому автоматически работают и в тёмной теме. */
#callibriSettingsModal .mx-profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 4px; }
#callibriSettingsModal .mx-profile-hero .mx-bigava { margin: 4px auto 14px; }
#callibriSettingsModal .mx-profile-hero-name { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--cb-ink, #eef0f3); }
#callibriSettingsModal .mx-profile-hero-name .cb-official { color: var(--cb-blue, #1d9bf0); flex: none; }
#callibriSettingsModal .mx-profile-hero-sub { margin-top: 3px; font-size: 13.5px; color: var(--cb-muted, #8b909a); }
#callibriSettingsModal .mx-fcard { margin: 16px 0 0; border-radius: 14px; overflow: hidden; background: var(--cb-surface, #1d2127); border: 1px solid var(--cb-border, transparent); box-shadow: var(--cb-sh-sm, none); }
#callibriSettingsModal .mx-fcard .mx-field { margin: 0; }
#callibriSettingsModal .mx-fcard .mx-field input,
#callibriSettingsModal .mx-fcard .mx-field textarea { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#callibriSettingsModal .mx-field-sep { height: 1px; margin: 0 14px; background: var(--cb-border, rgba(255,255,255,.07)); }
#callibriSettingsModal .mx-field-ic input,
#callibriSettingsModal .mx-field-ic textarea { padding-left: 46px !important; }
#callibriSettingsModal .mx-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--cb-muted, #7f858e); pointer-events: none; }
#callibriSettingsModal .mx-field-area .mx-field-icon { top: 16px; transform: none; }
#callibriSettingsModal .mx-field-hint { margin: 8px 6px 0; font-size: 12px; line-height: 1.4; color: var(--cb-muted, #7f858e); }
#callibriSettingsModal .mx-card { background: #15181d; border-radius: 14px; overflow: hidden; }
#callibriSettingsModal .mx-card > * + * { border-top: 1px solid #1f232a; }
#callibriSettingsModal .mx-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; font-size: 14px; color: #eef0f3; }
#callibriSettingsModal a.mx-link-row { text-decoration: none; color: #4ea1ff; }
#callibriSettingsModal .mx-select-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; color: #eef0f3; }
#callibriSettingsModal .mx-select-row select { max-width: 55%; background: #262a31; color: #eef0f3; border: 0; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
#callibriSettingsModal input.mx-switch { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 14px; background: #3a3f47; position: relative; cursor: pointer; transition: background 0.2s ease; }
#callibriSettingsModal input.mx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
#callibriSettingsModal input.mx-switch:checked { background: #2a7ef2; }
#callibriSettingsModal input.mx-switch:checked::after { transform: translateX(18px); }
#callibriSettingsModal .mx-mini-btn { margin-top: 12px; padding: 10px 14px; border: 0; border-radius: 10px; background: #1d2127; color: #eef0f3; font-size: 13px; cursor: pointer; }
#callibriSettingsModal .mx-hint { margin: 10px 4px 0; font-size: 12px; color: #7f858e; }
#callibriSettingsModal .mx-stub { text-align: center; padding: 56px 16px; color: #8b909a; font-size: 13.5px; }
#callibriSettingsModal .mx-stub .mx-ic { width: 44px; height: 44px; color: #5d636c; }
#callibriSettingsModal .mx-stub b { display: block; margin: 12px 0 6px; font-size: 16px; color: #eef0f3; }
#callibriSettingsModal .mx-stub a { color: #4ea1ff; }
#callibriSettingsModal .mx-about-logo { width: 72px; height: 72px; border-radius: 18px; }
#callibriSettingsModal .mx-kbd { background: #262a31; border-radius: 6px; padding: 2px 8px; font-size: 12px; color: #cfd3d9; }
#callibriSettingsModal .mx-check { color: #2a7ef2; font-size: 16px; }
#callibriSettingsModal .mx-soon { font-size: 12px; color: #7f858e; }
#callibriSettingsModal .mx-dim > span:first-child { color: #8b909a; }
#mxToast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(8px); background: rgba(24, 26, 31, 0.96); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 12px; z-index: 100001; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
#mxToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Мобильные настройки: список как на iOS --- */
@media (max-width: 768px) {
  /* Нижняя панель поверх окна настроек — из настроек всегда можно выйти по вкладкам */
  body.settings-open-mobile #appRail { visibility: visible; pointer-events: auto; z-index: 100000; }
  body.settings-open-mobile.mx-sub-open #appRail { visibility: hidden; pointer-events: none; }
  #callibriSettingsModal.mobile-settings-page { background: #050506; }
  #callibriSettingsModal.mobile-settings-page .mx-shell { flex-direction: column; width: 100vw; height: auto; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; background: #050506; }
  #callibriSettingsModal.mobile-settings-page .mx-body { display: none; }
  #callibriSettingsModal.mobile-settings-page.mx-sub .mx-nav { display: none; }
  #callibriSettingsModal.mobile-settings-page.mx-sub .mx-body { display: flex; min-height: 100dvh; }
  #callibriSettingsModal.mobile-settings-page .mx-nav { width: 100%; border: 0; background: transparent; }
  #callibriSettingsModal.mobile-settings-page .mx-nav-title { font-size: 34px; font-weight: 800; padding: calc(18px + env(safe-area-inset-top)) 16px 6px; }
  #callibriSettingsModal.mobile-settings-page .mx-nav-close { display: inline-flex; width: 38px; height: 38px; min-width: 38px; font-size: 16px; }
  #callibriSettingsModal.mobile-settings-page .mx-nav-scroll { padding: 0 0 calc(120px + env(safe-area-inset-bottom)); overflow: visible; display: flex; flex-direction: column; }
  #callibriSettingsModal.mobile-settings-page .mx-profile-row { padding: 12px 16px; border-radius: 0; order: 0; }
  #callibriSettingsModal.mobile-settings-page .mx-ava { width: 62px; height: 62px; font-size: 24px; }
  #callibriSettingsModal.mobile-settings-page .mx-ptxt { gap: 3px; margin-left: 6px; }
  #callibriSettingsModal.mobile-settings-page .mx-ptxt b { font-size: 21px; font-weight: 700; }
  #callibriSettingsModal.mobile-settings-page .mx-ptxt small { font-size: 15px; color: #8e8e93; }
  #callibriSettingsModal.mobile-settings-page .mx-row { padding: 14px 16px; border-radius: 0; font-size: 17px; gap: 16px; }
  #callibriSettingsModal.mobile-settings-page .mx-row:hover { background: transparent; }
  #callibriSettingsModal.mobile-settings-page .mx-row:active { background: #1c1c1e; }
  #callibriSettingsModal.mobile-settings-page .mx-ic { width: 25px; height: 25px; color: #d7dade; }
  #callibriSettingsModal.mobile-settings-page .mx-invite .mx-ic { color: #8b7cf6; }
  #callibriSettingsModal.mobile-settings-page .mx-row::after { content: ""; position: absolute; left: 57px; right: 0; top: 0; height: 1px; background: rgba(84, 84, 88, 0.32); }
  #callibriSettingsModal.mobile-settings-page .mx-r-security::before, #callibriSettingsModal.mobile-settings-page .mx-r-appearance::before, #callibriSettingsModal.mobile-settings-page .mx-r-business::before, #callibriSettingsModal.mobile-settings-page .mx-r-help::before { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-r-security, #callibriSettingsModal.mobile-settings-page .mx-r-appearance { margin-top: 0; }
  #callibriSettingsModal.mobile-settings-page .mx-r-data, #callibriSettingsModal.mobile-settings-page .mx-r-hotkeys, #callibriSettingsModal.mobile-settings-page .mx-r-about { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-invite { order: 1; }
  #callibriSettingsModal.mobile-settings-page .mx-invite::after { left: 0; }
  #callibriSettingsModal.mobile-settings-page .mx-r-folders { order: 2; margin-top: 22px; }
  #callibriSettingsModal.mobile-settings-page .mx-r-folders::after { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-r-security { order: 3; }
  #callibriSettingsModal.mobile-settings-page .mx-r-devices { order: 4; }
  #callibriSettingsModal.mobile-settings-page .mx-r-notify { order: 5; }
  #callibriSettingsModal.mobile-settings-page .mx-r-appearance { order: 6; }
  #callibriSettingsModal.mobile-settings-page .mx-r-language { order: 7; }
  #callibriSettingsModal.mobile-settings-page .mx-r-business { order: 8; margin-top: 22px; }
  #callibriSettingsModal.mobile-settings-page .mx-r-business::after { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-r-help { order: 9; margin-top: 22px; }
  #callibriSettingsModal.mobile-settings-page .mx-r-help::after { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-head { position: sticky; top: 0; z-index: 5; height: auto; min-height: 50px; padding: calc(6px + env(safe-area-inset-top)) 0 6px; background: rgba(5, 5, 6, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  #callibriSettingsModal.mobile-settings-page .mx-head-title { font-size: 17px; }
  #callibriSettingsModal.mobile-settings-page .mx-back { display: block; }
  #callibriSettingsModal.mobile-settings-page .mx-close { display: none; }
  #callibriSettingsModal.mobile-settings-page .mx-panes { overflow: visible; }
  #callibriSettingsModal.mobile-settings-page .mx-pane-inner { margin-top: 14px; padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #callibriSettingsModal.mobile-settings-page .mx-bigava { width: 108px; height: 108px; font-size: 40px; }
  #callibriSettingsModal.mobile-settings-page .mx-cam { border-color: #050506; }
  #callibriSettingsModal.mobile-settings-page .mx-field input, #callibriSettingsModal.mobile-settings-page .mx-field textarea { background: #1c1f26; font-size: 16px; padding: 14px 46px 14px 14px; border-radius: 12px; width: 100%; margin: 0; }
  #callibriSettingsModal.mobile-settings-page .mx-field textarea { padding-right: 14px; }
  #callibriSettingsModal.mobile-settings-page input.mx-switch { width: 50px; height: 30px; border-radius: 15px; padding: 0; }
  #callibriSettingsModal.mobile-settings-page input.mx-switch::after { width: 26px; height: 26px; }
  #callibriSettingsModal.mobile-settings-page input.mx-switch:checked::after { transform: translateX(20px); }
  #callibriSettingsModal.mobile-settings-page .mx-select-row select { width: auto; margin: 0; padding: 7px 10px; }
  #callibriSettingsModal.mobile-settings-page .mx-logout { height: 50px; font-size: 16px; }
  #mxToast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ===== КОМПОЗЕР «ЖИДКОЕ СТЕКЛО» (в мобильном стиле) ===== */
.chat-input.composer-glass {
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 9px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: none;
  background: linear-gradient(180deg, rgba(2, 10, 18, 0), rgba(2, 10, 18, 0.45));
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: none;
}

.composer-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  min-height: 46px;
  border-radius: 23px;
  background: rgba(18, 26, 32, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.composer-pill:focus-within {
  border-color: rgba(45, 212, 191, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 3px rgba(45, 212, 191, 0.1);
}

.chat-input.composer-glass #messageInput {
  flex: 1 1 auto;
  flex-basis: auto;
  min-width: 0;
  min-height: 44px;
  max-height: 132px;
  padding: 12px 4px 12px 16px;
  border: none;
  border-radius: 23px;
  background: transparent;
  box-shadow: none;
}

.chat-input.composer-glass #messageInput:focus {
  border: none;
  background: transparent;
  box-shadow: none;
}

.chat-input.composer-glass #attachBtn,
.chat-input.composer-glass #videoNoteBtn,
.chat-input.composer-glass #sendBtn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 26, 32, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.22);
}

.chat-input.composer-glass #attachBtn:hover,
.chat-input.composer-glass #videoNoteBtn:hover {
  background: rgba(45, 212, 191, 0.14);
  color: #fff;
  transform: none;
}

.chat-input.composer-glass #sendBtn {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35);
}

.chat-input.composer-glass #voiceBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 3px 4px 3px 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  background: transparent;
  color: rgba(203, 213, 225, 0.68);
  font-size: 0;
}

.chat-input.composer-glass #voiceBtn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}

.chat-input.composer-glass #voiceBtn.recording {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
}

@media (max-width: 768px) {
  .chat-input.composer-glass {
    gap: 8px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }
}

/* ===== ШАПКА ЧАТА: аккуратные подписи, ничего не съезжает ===== */
.chat-header > div:not([id]) {
  flex: 1;
  min-width: 0;
}

#chatName,
#chatStatus {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== КНОПКИ ГРУППЫ: ровные стеклянные чипы ===== */
#groupActionsBox {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.group-chip {
  height: 26px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 226, 213, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #cfe9e4;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.group-chip:hover {
  background: rgba(45, 212, 191, 0.14);
  color: #fff;
}

.group-chip-danger {
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.35);
}

.group-chip-danger:hover {
  background: rgba(244, 63, 94, 0.16);
  color: #fecdd3;
}

/* ===== ПРЕВЬЮ ВЛОЖЕНИЯ С ПОДПИСЬЮ ===== */
#cbAttachPreview {
  z-index: 100001;
}

.cb-ap-card {
  width: min(94vw, 480px);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.13) 0%, rgba(10, 34, 50, 0.62) 34%, rgba(3, 14, 26, 0.8) 100%);
  border: 1px solid rgba(148, 226, 213, 0.28);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: settingsPop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.cb-ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f1f5f9;
  font-size: 15px;
}

.cb-ap-head button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
}

.cb-ap-head button:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.cb-ap-preview {
  border-radius: 16px;
  overflow: hidden;
  background: #04101c;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 52dvh;
}

.cb-ap-preview img,
.cb-ap-preview video {
  display: block;
  width: 100%;
  max-height: 52dvh;
  object-fit: contain;
}

#cbApCaption {
  min-height: 44px;
  max-height: 120px;
  resize: none;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(6, 22, 36, 0.55);
  color: #e2e8f0;
  font-size: 14.5px;
  outline: none;
}

#cbApCaption:focus {
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.08);
}

.cb-ap-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cb-ap-actions button {
  height: 40px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

#cbApCancelBtn {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

#cbApCancelBtn:hover {
  background: rgba(255, 255, 255, 0.14);
}

#cbApSendBtn {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  color: #fff;
}

#cbApSendBtn:hover {
  filter: brightness(1.08);
}

@media (max-width: 768px) {
  #cbAttachPreview {
    padding: 10px;
    align-items: flex-end;
  }

  .cb-ap-card {
    width: 100%;
  }
}

/* ===== НАСТРОЙКИ В ФИРМЕННЫХ ЦВЕТАХ CALLIBRI (сине-бирюзовое стекло вместо чёрного) ===== */
#callibriSettingsModal {
  background: rgba(4, 16, 30, 0.6);
}

#callibriSettingsModal .mx-shell {
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.12) 0%, rgba(10, 34, 50, 0.97) 32%, rgba(4, 16, 28, 0.98) 100%);
  border: 1px solid rgba(148, 226, 213, 0.24);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#callibriSettingsModal .mx-nav {
  background: rgba(5, 22, 38, 0.55);
  border-right: 1px solid rgba(148, 226, 213, 0.14);
}

#callibriSettingsModal .mx-nav-close {
  background: rgba(45, 212, 191, 0.12);
  color: #cfe9e4;
}

#callibriSettingsModal .mx-nav-close:active {
  background: rgba(45, 212, 191, 0.24);
}

#callibriSettingsModal .mx-profile-row:hover,
#callibriSettingsModal .mx-row:hover {
  background: rgba(45, 212, 191, 0.1);
}

#callibriSettingsModal .mx-profile-row.active,
#callibriSettingsModal .mx-row.active {
  background: rgba(45, 212, 191, 0.17);
}

#callibriSettingsModal .mx-ava,
#callibriSettingsModal .mx-bigava {
  background: linear-gradient(135deg, #0ea5e9, #10b981);
}

#callibriSettingsModal .mx-ptxt small {
  color: #86a8bd;
}

#callibriSettingsModal .mx-chev {
  border-right-color: rgba(148, 226, 213, 0.55);
  border-top-color: rgba(148, 226, 213, 0.55);
}

#callibriSettingsModal .mx-ic {
  color: #9fd0c8;
}

#callibriSettingsModal .mx-r-security::before,
#callibriSettingsModal .mx-r-appearance::before,
#callibriSettingsModal .mx-r-business::before,
#callibriSettingsModal .mx-r-help::before {
  background: rgba(148, 226, 213, 0.13);
}

#callibriSettingsModal .mx-body {
  background: transparent;
}

#callibriSettingsModal .mx-head {
  border-bottom: 1px solid rgba(148, 226, 213, 0.13);
}

#callibriSettingsModal .mx-back {
  color: #2dd4bf;
}

#callibriSettingsModal .mx-close {
  color: #86a8bd;
}

#callibriSettingsModal .mx-cam {
  background: #10b981;
  border-color: #072033;
}

#callibriSettingsModal .mx-field input,
#callibriSettingsModal .mx-field textarea {
  background: rgba(10, 36, 54, 0.75);
  border: 1px solid rgba(148, 226, 213, 0.12);
  color: #e7f3f1;
}

#callibriSettingsModal .mx-field input:focus,
#callibriSettingsModal .mx-field textarea:focus {
  outline: none;
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

#callibriSettingsModal .mx-logout,
#callibriSettingsModal .mx-more {
  background: rgba(14, 44, 64, 0.8);
  border: 1px solid rgba(148, 226, 213, 0.14);
}

#callibriSettingsModal .mx-logout {
  color: #fda4af;
}

#callibriSettingsModal .mx-logout:hover,
#callibriSettingsModal .mx-more:hover {
  background: rgba(20, 58, 82, 0.9);
}

#callibriSettingsModal .mx-card {
  background: rgba(8, 30, 48, 0.66);
  border: 1px solid rgba(148, 226, 213, 0.12);
}

#callibriSettingsModal .mx-card > * + * {
  border-top: 1px solid rgba(148, 226, 213, 0.1);
}

#callibriSettingsModal a.mx-link-row {
  color: #2dd4bf;
}

#callibriSettingsModal .mx-select-row select {
  background: rgba(14, 44, 64, 0.9);
  border: 1px solid rgba(148, 226, 213, 0.14);
}

#callibriSettingsModal input.mx-switch {
  background: rgba(74, 100, 116, 0.75);
}

#callibriSettingsModal input.mx-switch:checked {
  background: #10b981;
}

#callibriSettingsModal .mx-mini-btn {
  background: rgba(14, 44, 64, 0.85);
  border: 1px solid rgba(148, 226, 213, 0.14);
  color: #dcefe9;
}

#callibriSettingsModal .mx-hint,
#callibriSettingsModal .mx-status,
#callibriSettingsModal .mx-stub {
  color: #86a8bd;
}

#callibriSettingsModal .mx-check {
  color: #2dd4bf;
}

#mxToast {
  background: rgba(8, 32, 52, 0.96);
  border: 1px solid rgba(148, 226, 213, 0.22);
}

@media (max-width: 768px) {
  #callibriSettingsModal.mobile-settings-page {
    background: #04121f;
  }

  #callibriSettingsModal.mobile-settings-page .mx-shell {
    background: linear-gradient(180deg, #072338 0%, #04121f 42%, #030d18 100%);
    border: 0;
    box-shadow: none;
  }

  #callibriSettingsModal.mobile-settings-page .mx-row:active {
    background: rgba(45, 212, 191, 0.13);
  }

  #callibriSettingsModal.mobile-settings-page .mx-row::after {
    background: rgba(148, 226, 213, 0.14);
  }

  #callibriSettingsModal.mobile-settings-page .mx-ic {
    color: #b9dcd5;
  }

  #callibriSettingsModal.mobile-settings-page .mx-ptxt small {
    color: #86a8bd;
  }

  #callibriSettingsModal.mobile-settings-page .mx-head {
    background: rgba(4, 18, 32, 0.9);
  }

  #callibriSettingsModal.mobile-settings-page .mx-field input,
  #callibriSettingsModal.mobile-settings-page .mx-field textarea {
    background: rgba(10, 36, 54, 0.85);
  }

  #callibriSettingsModal.mobile-settings-page .mx-cam {
    border-color: #04121f;
  }

  #mxToast {
    background: rgba(8, 32, 52, 0.97);
  }
}

/* ===== МОБИЛЬНАЯ ПОЛИРОВКА ===== */
html,
body {
  overscroll-behavior-y: none;
}

button,
.user,
.recent-chat-item,
.group-item,
.rail-btn,
.message {
  -webkit-tap-highlight-color: transparent;
}

#messages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar,
#users,
#callibriSettingsModal .mx-nav-scroll,
#callibriSettingsModal .mx-panes {
  -webkit-overflow-scrolling: touch;
}

#messageInput {
  height: auto;
}

.message-context-menu,
.callibri-sidebar-context-menu {
  max-width: calc(100vw - 16px);
}

@media (max-width: 768px) {
  /* 16px в полях ввода — iPhone не приближает страницу при фокусе */
  .chat-input.composer-glass #messageInput,
  #search,
  #chatSearchInput,
  #auth input,
  .modal-card input,
  .modal-card textarea,
  #cbApCaption {
    font-size: 16px;
  }

  /* Долгое нажатие открывает наше меню — системное выделение текста не мешает */
  #messages .message {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .modal-card {
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Просмотрщик и превью вложений с учётом выреза экрана */
  .cb-mv-top {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  /* Контекстное меню сообщений — крупнее пункты под палец */
  .message-context-menu button {
    min-height: 42px;
  }
}

/* ===== КАНАЛЫ: кнопка «Выключить/Включить звук» вместо поля ввода (в едином стиле) ===== */
.chat-input.composer-muted-channel {
  display: none !important;
}

#channelMuteBar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  margin: 10px 12px calc(12px + env(safe-area-inset-bottom));
  border: 1px solid rgba(148, 226, 213, 0.24);
  border-radius: 25px;
  background: rgba(14, 34, 48, 0.55);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px rgba(0, 0, 0, 0.28);
  color: #2dd4bf;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

#channelMuteBar:active {
  transform: scale(0.985);
}

#channelMuteBar:hover {
  background: rgba(45, 212, 191, 0.12);
}

#channelMuteBar.is-muted {
  color: #8fb4c9;
}

.muted-bell {
  font-size: 12px;
  opacity: 0.85;
  flex: none;
}

.muted-chat .avatar {
  filter: saturate(0.75);
}

/* ===== СПИСОК ЧАТОВ НА ТЕЛЕФОНЕ — В ЕДИНОМ СТИЛЕ iOS, В ЦВЕТАХ CALLIBRI ===== */
@media (max-width: 768px) {
  .sidebar {
    background: linear-gradient(180deg, #06253c 0%, #04121f 34%, #030d18 100%);
  }

  .sidebar-top {
    padding: calc(10px + env(safe-area-inset-top)) 16px 2px;
    align-items: center;
  }

  .sidebar-heading {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f1f5f9;
  }

  #newChatBtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
  }

  #search {
    height: 40px;
    margin: 10px 0 8px;
    border-radius: 12px;
    border: 1px solid rgba(148, 226, 213, 0.1);
    background: rgba(14, 44, 64, 0.6);
  }

  .archive-btn {
    min-height: 52px;
    margin: 2px 0 6px;
    border-radius: 14px;
  }

  /* Строки чатов: крупный круглый аватар, две строки превью, время справа */
  .sidebar .user {
    min-height: 74px;
    padding: 9px 6px;
    border-radius: 0;
    border: none;
    background: transparent;
    gap: 12px;
    position: relative;
  }

  .sidebar .user::after {
    content: "";
    position: absolute;
    left: 72px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(148, 226, 213, 0.09);
  }

  .sidebar .user:last-child::after {
    display: none;
  }

  .sidebar .user:active {
    background: rgba(45, 212, 191, 0.08);
  }

  .sidebar .user.active,
  .sidebar .recent-chat-item.active {
    background: transparent;
  }

  .sidebar .user .avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    font-size: 22px;
  }

  .sidebar .user .user-info b,
  .sidebar .recent-chat-item .user-info b {
    font-size: 16.5px;
    font-weight: 700;
    color: #f1f5f9;
  }

  .sidebar .user .user-info > span,
  .sidebar .recent-chat-item .user-info > span {
    font-size: 14.5px;
    line-height: 1.28;
    color: #7fa3b8;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sidebar .user .chat-list-time {
    font-size: 13px;
    font-weight: 400;
    color: #6b8ba0;
    flex: none;
  }

  .sidebar .user .unread-badge {
    min-width: 23px;
    height: 23px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
  }
}

/* ===== ИНДИКАТОР СОЕДИНЕНИЯ ===== */
#connBanner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100003;
  max-width: calc(100vw - 24px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(30, 26, 8, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fcd34d;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  animation: connIn 0.2s ease;
  pointer-events: none;
}

#connBanner.conn-ok {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(6, 30, 22, 0.88);
  color: #6ee7b7;
}

@keyframes connIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%); }
}

/* ===== ССЫЛКИ В СООБЩЕНИЯХ ===== */
.msg-link {
  color: #5eead4;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.msg-link:hover {
  color: #99f6e4;
}

.message.mine .msg-link {
  color: #a7f3d0;
}

/* =========================
   EMAIL-КОД: КРАСИВЫЙ ВВОД
========================= */

.email-code-block {
  width: 100%;
  margin: 2px 0 14px;
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: rgba(26, 60, 88, 0.45);
  border: 1px solid rgba(125, 211, 252, 0.14);
  animation: otpReveal 0.28s ease;
}

@keyframes otpReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.otp-title {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 4px;
}

.otp-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  min-height: 15px;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.auth-card .otp-inputs .otp-cell {
  width: 46px;
  height: 56px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(26, 60, 88, 0.6);
  color: var(--text-main);
  caret-color: #22d3ee;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.auth-card .otp-inputs .otp-cell:focus {
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
  background: rgba(26, 60, 88, 0.85);
  transform: translateY(-1px);
}

.auth-card .otp-inputs .otp-cell.filled {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.1);
}

.otp-inputs.otp-error .otp-cell {
  border-color: rgba(248, 113, 113, 0.75);
  background: rgba(248, 113, 113, 0.08);
  animation: otpShake 0.4s ease;
}

@keyframes otpShake {
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}

.otp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.otp-link {
  padding: 0;
  background: transparent;
  border: none;
  color: #9bd8e6;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease;
}

.otp-link:hover {
  color: #d9f99d;
}

.otp-link:disabled {
  color: rgba(203, 213, 225, 0.4);
  cursor: default;
}

@media (max-width: 420px) {
  .otp-inputs {
    gap: 6px;
  }

  .auth-card .otp-inputs .otp-cell {
    width: 42px;
    height: 52px;
    font-size: 21px;
  }
}

/* =========================
   ОКНО ВХОДА С МАСКОТОМ-КОЛИБРИ (v=callibri-37)
========================= */

.auth-scene {
  position: relative;
  width: min(100%, 440px);
  padding-top: 112px;
}

.auth-scene .auth-card {
  width: 100%;
  padding-top: 62px;
}

.auth-scene .auth-tabs {
  display: none;
}

.mascot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 208px;
  height: 158px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(2, 20, 35, 0.5));
}

.mascot svg {
  display: block;
  overflow: visible;
}

.mascot .pupil {
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.12s ease;
}

.mascot .lids circle {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: birdBlink 4.6s infinite;
}

@keyframes birdBlink {
  0%, 93.5%, 100% {
    transform: scaleY(0);
  }
  95.5%, 97.5% {
    transform: scaleY(1);
  }
}

.mascot .happy-eyes {
  opacity: 0;
}

.mascot .blush {
  transition: opacity 0.25s ease;
}

.mascot .wing {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot.cover .wing-l {
  transform: translate(9px, -72px) rotate(12deg);
}

.mascot.cover .wing-r {
  transform: translate(-9px, -72px) rotate(-12deg);
}

.mascot.peek .wing-l {
  transform: translate(7px, -38px) rotate(6deg);
}

.mascot.peek .wing-r {
  transform: translate(-7px, -38px) rotate(-6deg);
}

.mascot.peek .pupil {
  transform: translate(0px, 1.5px);
}

.mascot.happy .pupils,
.mascot.happy .lids {
  opacity: 0;
}

.mascot.happy .happy-eyes {
  opacity: 1;
}

.mascot.happy .blush {
  opacity: 0.6;
}

.mascot.happy .bird-root {
  animation: birdBounce 0.6s ease;
}

@keyframes birdBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* ===== Поля с плавающими подписями, как в референсе ===== */

.auth-card .field {
  position: relative;
  width: 100%;
  margin: 0 0 12px;
}

.auth-card .field input {
  height: 56px;
  margin: 0;
  padding: 22px 15px 8px;
}

.auth-card .field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(203, 213, 225, 0.5);
  font-size: 14.5px;
  pointer-events: none;
  transition:
    top 0.16s ease,
    font-size 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.auth-card .field input:focus + label,
.auth-card .field input:not(:placeholder-shown) + label {
  top: 15px;
  transform: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #7dd3fc;
}

.auth-card .field.pass-field input {
  padding-right: 52px;
}

.auth-card .field.pass-field #togglePassword {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: transparent;
  color: rgba(203, 213, 225, 0.55);
}

.auth-card .field.pass-field #togglePassword:hover {
  color: #7dd3fc;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-50%);
}

/* ===== Кнопка входа: блик и загрузка ===== */

#loginBtn {
  position: relative;
  overflow: hidden;
}

#loginBtn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  animation: btnShine 3.4s ease infinite;
  pointer-events: none;
}

@keyframes btnShine {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}

#loginBtn:disabled {
  opacity: 0.85;
  cursor: default;
}

#loginBtn.loading::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: btnSpin 0.7s linear infinite;
  flex: none;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* ===== Ввод кода: как в референсе OTP ===== */

.email-code-block {
  background: rgba(8, 27, 43, 0.72);
  border-color: rgba(125, 211, 252, 0.16);
}

.otp-title {
  font-size: 16px;
}

.auth-card .otp-inputs .otp-cell {
  width: 48px;
  height: 58px;
  border-radius: 13px;
  background: rgba(10, 32, 50, 0.7);
}

.auth-card .otp-inputs .otp-cell:focus {
  border-color: #22d3ee;
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.16),
    0 0 18px rgba(34, 211, 238, 0.25);
  transform: scale(1.05);
}

/* ===== Успех: зелёная галочка со свечением ===== */

.otp-success {
  position: relative;
  text-align: center;
  padding: 14px 6px 8px;
  animation: otpReveal 0.3s ease;
}

.otp-glow {
  position: absolute;
  inset: -40px -20px -20px;
  background: radial-gradient(circle at 50% 35%, rgba(16, 185, 129, 0.3), transparent 62%);
  filter: blur(4px);
  pointer-events: none;
  animation: glowIn 0.6s ease;
}

@keyframes glowIn {
  from { opacity: 0; }
}

.otp-check {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 6px auto 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0b3b2e, #065f46);
  border: 1px solid rgba(52, 211, 153, 0.55);
  box-shadow:
    0 0 26px rgba(16, 185, 129, 0.4),
    inset 0 0 14px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: checkPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.otp-check svg path {
  stroke: #34d399;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 0.45s 0.2s ease forwards;
}

@keyframes checkPop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.otp-success-title {
  position: relative;
  font-size: 16px;
  font-weight: 900;
  color: #d1fae5;
  margin-bottom: 4px;
}

.otp-success-sub {
  position: relative;
  font-size: 12.5px;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .auth-scene {
    padding-top: 102px;
  }

  .mascot {
    width: 188px;
    height: 143px;
  }

  .auth-card .otp-inputs .otp-cell {
    width: 43px;
    height: 53px;
  }
}

/* =========================
   ОТДЕЛЬНЫЙ ЭКРАН ВВОДА КОДА (v=callibri-38)
========================= */

#otpScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#otpScreen.hidden {
  display: none;
}

.otp-page-card {
  width: min(100%, 430px);
  padding: 32px 28px 26px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(32, 82, 108, 0.78), rgba(30, 64, 94, 0.88)),
    rgba(26, 68, 96, 0.82);
  border: 1px solid rgba(125, 211, 252, 0.18);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  animation: otpPageIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes otpPageIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

.otp-page-card::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 66%);
  pointer-events: none;
}

.otp-page-card .otp-title {
  font-size: 19px;
  margin-bottom: 6px;
}

.otp-page-card .otp-hint {
  font-size: 13px;
  margin-bottom: 20px;
}

.otp-page-card .otp-inputs {
  gap: 9px;
}

.otp-page-card .otp-cell {
  width: 50px;
  height: 60px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 25px;
  font-weight: 800;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(10, 32, 50, 0.7);
  color: var(--text-main);
  caret-color: #22d3ee;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.otp-page-card .otp-cell:focus {
  border-color: #22d3ee;
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.16),
    0 0 18px rgba(34, 211, 238, 0.25);
  background: rgba(26, 60, 88, 0.85);
  transform: scale(1.06);
}

.otp-page-card .otp-cell.filled {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.1);
}

.otp-page-card .otp-footer {
  margin-top: 16px;
}

#otpSubmitBtn {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #10b981);
  box-shadow: 0 14px 28px rgba(14, 165, 233, 0.18);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

#otpSubmitBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(16, 185, 129, 0.2);
}

#otpSubmitBtn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  animation: btnShine 3.4s ease infinite;
  pointer-events: none;
}

#otpSubmitBtn:disabled {
  opacity: 0.85;
  cursor: default;
}

#otpSubmitBtn.loading::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: btnSpin 0.7s linear infinite;
  flex: none;
}

#otpError {
  min-height: 20px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 14px;
  text-align: center;
}

.otp-page-card .otp-success {
  padding: 20px 6px 14px;
}

@media (max-width: 420px) {
  .otp-page-card {
    padding: 26px 18px 20px;
  }

  .otp-page-card .otp-inputs {
    gap: 6px;
  }

  .otp-page-card .otp-cell {
    width: 44px;
    height: 54px;
    font-size: 22px;
  }
}


/* =========================================================================
   CALLIBRI — СВЕТЛАЯ ИЗУМРУДНАЯ ТЕМА (по референсу «Emerald/Nova»)
   Только визуал. Слой добавлен в конце файла и переопределяет тёмные правила.
   Бренд в интерфейсе берётся из index.html/app.js и уже равен «Callibri».
   ========================================================================= */
:root{
  --cb-primary:#15a66b; --cb-primary-hover:#0f8f5b; --cb-primary-050:#e9f7f0; --cb-primary-100:#d7efe4;
  --cb-blue:#2e6be6; --cb-blue-050:#eaf1ff;
  --cb-ink:#1e2a37; --cb-ink-2:#55606e; --cb-muted:#8a94a2;
  --cb-surface:#ffffff; --cb-canvas:#eef2f1; --cb-chat:#f4f7f6;
  --cb-border:#e6e9ec; --cb-bubble-in:#eef1f4; --cb-online:#22c55e;
  --cb-sh-sm:0 1px 2px rgba(16,40,30,.06),0 4px 14px rgba(16,40,30,.05);
  --cb-sh-md:0 10px 30px rgba(16,40,30,.10);
  color-scheme: light;
}
html,body{ background:var(--cb-canvas)!important; color:var(--cb-ink)!important; }

/* Скроллбары */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cfd8d4; border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
*{ scrollbar-color:#cfd8d4 transparent; scrollbar-width:thin; }

/* Сплэш */
#callibriSplash{ background:linear-gradient(160deg,#f4f9f7,#e9f2ee)!important; }
.splash-name{ color:var(--cb-primary)!important; }
.splash-dots span{ background:var(--cb-primary)!important; }

/* ===== АВТОРИЗАЦИЯ ===== */
#auth{ background:linear-gradient(160deg,#eef4f2 0%,#e6f0ec 100%)!important; }
.auth-card{ background:var(--cb-surface)!important; border:1px solid var(--cb-border)!important; box-shadow:var(--cb-sh-md)!important; color:var(--cb-ink)!important; }
.auth-card::before{ display:none!important; }
.auth-card h1{ color:var(--cb-primary)!important; }
.auth-card p,#authSubtitle{ color:var(--cb-ink-2)!important; }
.auth-card input,.field input{ background:#f4f7f6!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.auth-card input::placeholder{ color:var(--cb-muted)!important; }
.auth-card input:focus,.field input:focus{ border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
.field label{ color:var(--cb-muted)!important; }
.auth-tabs{ background:#eef2f1!important; }
.auth-tab{ color:var(--cb-ink-2)!important; }
.auth-tab.active{ background:var(--cb-surface)!important; color:var(--cb-primary)!important; box-shadow:var(--cb-sh-sm)!important; }
.auth-actions button,#loginBtn,#registerBtn,#otpSubmitBtn{ background:var(--cb-primary)!important; color:#fff!important; box-shadow:0 8px 20px rgba(21,166,107,.28)!important; }
.auth-actions button:hover,#loginBtn:hover,#registerBtn:hover,#otpSubmitBtn:hover{ background:var(--cb-primary-hover)!important; }
.auth-switch-hint{ color:var(--cb-primary)!important; }
#togglePassword{ color:var(--cb-muted)!important; }
.remember-row{ color:var(--cb-ink-2)!important; }
#authError,#otpError{ color:var(--danger)!important; }
/* OTP */
#otpScreen{ background:linear-gradient(160deg,#eef4f2,#e6f0ec)!important; }
.otp-page-card{ background:var(--cb-surface)!important; border:1px solid var(--cb-border)!important; box-shadow:var(--cb-sh-md)!important; }
.otp-title{ color:var(--cb-ink)!important; } .otp-hint,.otp-success-sub{ color:var(--cb-muted)!important; }
.otp-cell{ background:#f4f7f6!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.otp-cell:focus{ border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
.otp-link{ color:var(--cb-primary)!important; }
.otp-check{ background:var(--cb-primary)!important; color:#fff!important; }
.otp-success-title{ color:var(--cb-ink)!important; }

/* ===== ОБОЛОЧКА ПРИЛОЖЕНИЯ ===== */
#app{ background:var(--cb-canvas)!important; }

/* Обои чата как фон всего #app (у #app свой фон по ID, поэтому нужен класс именно на нём с большей специфичностью) */
#app.wp-classic {
  background-color: #eae6df !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' opacity='0.08'%3E%3Ctext x='10' y='25' font-size='18'%3E💬%3C/text%3E%3Ctext x='60' y='55' font-size='14'%3E📎%3C/text%3E%3Ctext x='120' y='30' font-size='16'%3E😊%3C/text%3E%3Ctext x='170' y='60' font-size='13'%3E📷%3C/text%3E%3Ctext x='30' y='85' font-size='15'%3E🎵%3C/text%3E%3Ctext x='90' y='80' font-size='12'%3E⭐%3C/text%3E%3Ctext x='150' y='95' font-size='16'%3E📞%3C/text%3E%3Ctext x='15' y='130' font-size='13'%3E🔒%3C/text%3E%3Ctext x='75' y='120' font-size='17'%3E❤️%3C/text%3E%3Ctext x='130' y='140' font-size='14'%3E✏️%3C/text%3E%3Ctext x='45' y='165' font-size='15'%3E🕐%3C/text%3E%3Ctext x='100' y='175' font-size='13'%3E📌%3C/text%3E%3Ctext x='160' y='170' font-size='16'%3E🎤%3C/text%3E%3Ctext x='20' y='195' font-size='12'%3E✨%3C/text%3E%3Ctext x='80' y='195' font-size='14'%3E🔔%3C/text%3E%3Ctext x='140' y='195' font-size='13'%3E💫%3C/text%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
}

#app.wp-gradient {
  background: linear-gradient(145deg, #dfe6e9 0%, #b2bec3 30%, #a4b0be 60%, #dfe6e9 100%) !important;
}

#app.wp-pattern {
  background-color: #f0ebe3 !important;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(180, 170, 157, 0.13) 10px, rgba(180, 170, 157, 0.13) 11px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(180, 170, 157, 0.1) 10px, rgba(180, 170, 157, 0.1) 11px),
    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(180, 170, 157, 0.06) 20px, rgba(180, 170, 157, 0.06) 21px) !important;
}

#app.wp-clean {
  background: #ffffff !important;
}

#app.wp-bubbles {
  background-color: #e8eff5 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(147, 165, 190, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(130, 170, 200, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 40% 70%, rgba(147, 165, 190, 0.1) 0%, transparent 55%),
    radial-gradient(circle at 70% 85%, rgba(130, 170, 200, 0.13) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(160, 180, 200, 0.08) 0%, transparent 60%) !important;
}

#app.wp-honeycomb {
  background-color: #f5f1eb !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16l28-16 28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%23c4b9a8' stroke-width='0.6' opacity='0.3'/%3E%3C/svg%3E") !important;
  background-size: 56px 100px !important;
}

#app.wp-night {
  background: linear-gradient(170deg, #1a1c2c 0%, #2a2d3e 40%, #1f2233 100%) !important;
}

#app.wp-dots {
  background-color: #f7f7f5 !important;
  background-image: radial-gradient(circle, #d0cec8 0.8px, transparent 0.8px) !important;
  background-size: 18px 18px !important;
}

body.cb-dark #app.wp-pattern { background-color: #0e1621 !important; background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.015) 10px,rgba(255,255,255,0.015) 11px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,0.01) 10px,rgba(255,255,255,0.01) 11px) !important; }
body.cb-dark #app.wp-classic { background-color: #0e1621 !important; }
body.cb-dark #app.wp-gradient { background: linear-gradient(145deg, #0e1621, #17212b, #0e1621) !important; }
body.cb-dark #app.wp-bubbles { background-color: #0c1219 !important; background-image: radial-gradient(circle at 15% 20%,rgba(43,82,120,0.08) 0%,transparent 50%),radial-gradient(circle at 85% 30%,rgba(43,82,120,0.06) 0%,transparent 45%) !important; }
body.cb-dark #app.wp-honeycomb { background-color: #0e1621 !important; }
body.cb-dark #app.wp-dots { background-color: #0c1219 !important; background-image: radial-gradient(circle,#1f2c39 0.8px,transparent 0.8px) !important; }
body.cb-dark #app.wp-clean { background: #0e1621 !important; }
body.cb-dark #app.wp-night { background: linear-gradient(170deg,#0a0f18,#0e1621,#0a0f18) !important; }

/* Rail (левая навигация / нижнее меню на мобиле) */
#appRail{ background:var(--cb-surface)!important; border-right:1px solid var(--cb-border)!important; box-shadow:none!important; }
.rail-btn{ background:transparent!important; color:var(--cb-muted)!important; }
.rail-btn:hover{ background:var(--cb-primary-050)!important; color:var(--cb-primary)!important; }
.rail-btn.active{ color:var(--cb-primary)!important; background:var(--cb-primary-050)!important; }
.rail-badge{ background:var(--cb-primary)!important; color:#fff!important; }
#railSlider{ background:var(--cb-primary)!important; }
@media (max-width:768px){
  #appRail{ background:var(--cb-surface)!important; border-right:none!important; border-top:1px solid var(--cb-border)!important; box-shadow:0 -6px 20px rgba(16,40,30,.06)!important; }
  .rail-btn.active{ color:#fff!important; background:transparent!important; }
  #railSlider{ background:var(--cb-primary)!important; box-shadow:0 6px 16px rgba(21,166,107,.35)!important; }
}

/* Боковая панель + список чатов */
.sidebar{ background:var(--cb-surface)!important; border-right:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.profile{ border-bottom:1px solid var(--cb-border)!important; }
#meName,.profile-name{ color:var(--cb-ink)!important; }
#meLogin,.profile-status{ color:var(--cb-muted)!important; }
.sidebar-title,.sidebar-heading,#sidebarTitle{ color:var(--cb-ink)!important; }
#newChatBtn{ background:var(--cb-primary)!important; color:#fff!important; box-shadow:0 6px 16px rgba(21,166,107,.28)!important; }
#newChatBtn:hover{ background:var(--cb-primary-hover)!important; }
#search{ background:#f1f4f3!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
#search::placeholder{ color:var(--cb-muted)!important; }
#search:focus{ border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
.archive-btn{ background:#f4f7f6!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.archive-btn:hover{ background:var(--cb-primary-050)!important; border-color:var(--cb-primary-100)!important; }
.archive-btn b{ color:var(--cb-ink)!important; } .archive-btn span{ color:var(--cb-muted)!important; }
.archive-badge{ background:var(--cb-primary)!important; color:#fff!important; }

/* Элемент списка чатов */
.user{ color:var(--cb-ink)!important; border-radius:14px!important; }
.user:hover{ background:#f2f5f4!important; }
.user.active,.user.selected,.user[aria-selected="true"]{ background:var(--cb-primary-050)!important; box-shadow:inset 3px 0 0 var(--cb-primary)!important; }
.user b,.user-top-row b{ color:var(--cb-ink)!important; }
.user p,.user .user-sub,.chat-list-preview,.user small{ color:var(--cb-muted)!important; }
.chat-list-time{ color:var(--cb-muted)!important; }
.unread-badge{ background:var(--cb-primary)!important; color:#fff!important; box-shadow:0 2px 6px rgba(21,166,107,.35)!important; }
.online-dot,.online-dot.online{ background:var(--cb-online)!important; box-shadow:0 0 0 2px #fff!important; }
.avatar,.group-avatar,#chatAvatar{ background:linear-gradient(135deg,#2ecb8b,#12a065)!important; color:#fff!important; }

/* Область беседы */
main.chat,.chat{ background:var(--cb-chat)!important; }
.chat-header{ background:var(--cb-surface)!important; border-bottom:1px solid var(--cb-border)!important; }
#chatName{ color:var(--cb-ink)!important; }
#chatStatus{ color:var(--cb-muted)!important; }
.chat-call-btn,.chat-search-btn{ background:transparent!important; color:var(--cb-ink-2)!important; }
.chat-call-btn:hover{ color:var(--cb-primary)!important; background:var(--cb-primary-050)!important; }
.chat-search-btn:hover{ background:#eef2f1!important; color:var(--cb-primary)!important; }
#chatSearchBar{ background:var(--cb-surface)!important; border:1px solid var(--cb-border)!important; }
#chatSearchInput{ background:transparent!important; color:var(--cb-ink)!important; }
#chatSearchCount{ color:var(--cb-muted)!important; }

/* Сообщения */
#messages{ background:var(--cb-chat)!important; }
.empty{ color:var(--cb-muted)!important; }
.date-divider span{ background:#e5ebe8!important; color:var(--cb-ink-2)!important; }
.message{ background:var(--cb-bubble-in)!important; color:var(--cb-ink)!important; border-radius:18px 18px 18px 6px!important; box-shadow:0 1px 1px rgba(16,40,30,.05)!important; }
.message.mine{ background:var(--cb-primary)!important; color:#fff!important; border-radius:18px 18px 6px 18px!important; }
.message-text{ color:inherit!important; }
.message-name{ color:var(--cb-primary)!important; }
.message-time,.message-meta,.message-edited{ color:var(--cb-muted)!important; }
.message.mine .message-time,.message.mine .message-meta,.message.mine .message-edited{ color:rgba(255,255,255,.82)!important; }
.message-reply-preview{ background:rgba(16,40,30,.05)!important; border-left:3px solid var(--cb-primary)!important; }
.message.mine .message-reply-preview{ background:rgba(255,255,255,.18)!important; border-left-color:rgba(255,255,255,.75)!important; }
.message-reply-author{ color:var(--cb-primary)!important; }
.message-reply-text{ color:var(--cb-ink-2)!important; }
.message.mine .message-reply-author,.message.mine .message-reply-text{ color:#fff!important; }
.message-status.read .message-status__check{ color:#eafff5!important; }
.msg-link{ color:var(--cb-blue)!important; }
.message.mine .msg-link{ color:#eafff3!important; }
.reaction-row .reaction,.reaction-pill,.reaction-chip{ background:#fff!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.reaction.mine,.reaction.active{ background:var(--cb-primary-050)!important; border-color:var(--cb-primary-100)!important; color:var(--cb-primary)!important; }

/* Поле ввода */
.chat-input{ background:var(--cb-surface)!important; border-top:1px solid var(--cb-border)!important; }
#messageInput{ background:#f1f4f3!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
#messageInput::placeholder{ color:var(--cb-muted)!important; }
#messageInput:focus{ border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
#sendBtn{ background:var(--cb-primary)!important; color:#fff!important; box-shadow:0 8px 18px rgba(21,166,107,.30)!important; }
#sendBtn:hover{ background:var(--cb-primary-hover)!important; }
#sendBtn:disabled,#messageInput:disabled{ opacity:1!important; }
#sendBtn:disabled{ background:#cdd6d2!important; color:#8b968f!important; box-shadow:none!important; }
.composer-pill,#attachBtn,#voiceBtn,#videoNoteBtn,.attach-btn{ color:var(--cb-ink-2)!important; background:transparent!important; }
#attachBtn:hover,#voiceBtn:hover,#videoNoteBtn:hover,.attach-btn:hover{ color:var(--cb-primary)!important; }
.scroll-down-btn{ background:var(--cb-surface)!important; color:var(--cb-primary)!important; border:1px solid var(--cb-border)!important; box-shadow:var(--cb-sh-sm)!important; }
.scroll-down-dot{ background:var(--cb-primary)!important; }

/* Модалки: настройки / профиль / группа / режимы */
.modal{ background:rgba(16,30,26,.35)!important; }
.modal-card,.profile-modal-shell,.mx-card,.mx-pane,.mode-panel,.new-chat-menu,.message-context-menu,.callibri-sidebar-context-menu,.callibri-selection-toolbar{ background:var(--cb-surface)!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; box-shadow:var(--cb-sh-md)!important; }
.modal-card h2,.modal-card h3,.mx-card b,.mx-row b{ color:var(--cb-ink)!important; }
.modal-card input,.modal-card textarea,.mx-field input,.mx-field textarea,#callibriSettingsModal .mx-field input,#callibriSettingsModal .mx-field textarea,#groupNameInput,#groupMembersInput,#inviteMembersInput{ background:#f4f7f6!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink)!important; }
.modal-card input:focus,.mx-field input:focus,.mx-field textarea:focus{ border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
.modal-actions button.primary,.mx-primary,button.primary{ background:var(--cb-primary)!important; color:#fff!important; }
.modal-actions button.primary:hover,button.primary:hover{ background:var(--cb-primary-hover)!important; }
.modal-actions button:not(.primary),.mx-secondary{ background:#eef2f1!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; }
.mx-hint,.mx-status,.mode-panel-text,.profile-info-label,.profile-status{ color:var(--cb-muted)!important; }
.mode-panel-title,.profile-info-value{ color:var(--cb-ink)!important; }
.mx-toggle-row,.mx-select-row,.mx-row,.profile-info-row,.danger-item{ border-color:var(--cb-border)!important; }
.message-context-menu button,.new-chat-menu button{ color:var(--cb-ink)!important; }
.message-context-menu button:hover,.new-chat-menu button:hover{ background:var(--cb-primary-050)!important; }
.danger,.danger-item,.message-context-menu button.danger{ color:var(--danger)!important; }
.mx-switch{ background:#d7dee2!important; }
.mx-switch.on,.mx-switch.active,.mx-switch[aria-checked="true"]{ background:var(--cb-primary)!important; }
.mx-kbd{ background:#eef2f1!important; color:var(--cb-ink-2)!important; border:1px solid var(--cb-border)!important; }
.group-chip{ background:var(--cb-primary-050)!important; color:var(--cb-primary)!important; border:1px solid var(--cb-primary-100)!important; }
.mx-chev,.mx-cam{ color:var(--cb-muted)!important; }

/* Звонок: принять — зелёный, сбросить — красный, видео/аудио — синий акцент */
.call-btn.call,.call-action.call,#callAcceptBtn{ background:var(--cb-primary)!important; color:#fff!important; }
.call-btn.hangup,.call-action.hangup,.hangup,#callHangupBtn{ background:var(--danger)!important; color:#fff!important; }
.call-action{ color:var(--cb-ink)!important; }
.profile-big-avatar{ box-shadow:0 10px 30px rgba(16,40,30,.15)!important; }

/* =========================================================================
   МОБИЛЬНЫЙ НИЖНИЙ БАР — «один в один» по референсу (светлый, зелёная пилюля)
   Идёт последним: переопределяет тёмный стеклянный бар оригинала.
   ========================================================================= */
.rail-ico{ display:inline-flex; align-items:center; justify-content:center; }
.rail-ico svg{ width:22px; height:22px; display:block; }

@media (max-width:768px){
  #appRail{
    background:#ffffff!important;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
    border:none!important; border-top:1px solid var(--cb-border)!important;
    box-shadow:0 -8px 24px rgba(16,40,30,.08)!important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
    justify-content:space-around!important; align-items:stretch!important; gap:6px!important;
  }
  /* 4 вкладки как в референсе: Чаты, Группы, Контакты, Настройки */
  #appRail .rail-btn[data-rail="all"]{ order:1; display:flex!important; }
  #appRail .rail-btn[data-rail="groups"]{ order:2; display:flex!important; }
  #appRail .rail-btn[data-rail="contacts"]{ order:3; display:flex!important; }
  #railSettingsBtn{ order:4; display:flex!important; }
  #appRail .rail-btn[data-rail="channels"]{ display:none!important; }
  #railSlider{ display:none!important; }

  /* Элемент: иконка сверху, подпись снизу */
  #appRail .rail-btn{
    flex:1 1 0!important; min-width:0!important;
    flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important;
    padding:7px 4px!important; border-radius:16px!important;
    background:transparent!important; color:var(--cb-muted)!important;
  }
  #appRail .rail-btn .rail-ico svg{ width:24px!important; height:24px!important; }
  #appRail .rail-btn small{ font-size:11px!important; font-weight:600!important; line-height:1!important; }

  /* Активная вкладка — зелёная «пилюля», белые иконка и подпись */
  #appRail .rail-btn.active{
    background:var(--cb-primary)!important; color:#ffffff!important;
    box-shadow:0 6px 16px rgba(21,166,107,.35)!important;
  }
  #appRail .rail-btn:not(.active):active{ background:var(--cb-primary-050)!important; }

  /* Бейдж непрочитанных рядом с иконкой «Чаты» */
  #appRail .rail-badge{
    top:3px!important; left:calc(50% + 6px)!important; right:auto!important;
    background:#ef4444!important; color:#fff!important;
    box-shadow:0 2px 8px rgba(239,68,68,.4)!important;
  }
  #appRail .rail-badge.hidden{ display:none!important; }
}

/* =========================================================================
   НАСТРОЙКИ (#callibriSettingsModal .mx-*) — светлая изумрудная тема.
   Единый вид на ПК и телефоне. Только внешний вид: разметка/логика/адаптив
   не тронуты. Левый сайдбар (#appRail) НЕ затрагивается.
   ========================================================================= */
#callibriSettingsModal{ background:rgba(16,30,26,.45)!important; }
#callibriSettingsModal .mx-shell{ background:#fff!important; border:1px solid var(--cb-border)!important; box-shadow:0 30px 90px rgba(16,40,30,.22)!important; color:var(--cb-ink)!important; }

/* Левая колонка категорий */
#callibriSettingsModal .mx-nav{ background:#f6f9f8!important; border-right:1px solid var(--cb-border)!important; }
#callibriSettingsModal .mx-nav-title{ color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-nav-close{ background:#eef2f1!important; color:var(--cb-ink-2)!important; }
#callibriSettingsModal .mx-nav-close:hover{ background:#e4eae7!important; }
#callibriSettingsModal .mx-profile-row{ color:var(--cb-ink)!important; border-radius:14px!important; }
#callibriSettingsModal .mx-profile-row:hover{ background:#eef3f1!important; }
#callibriSettingsModal .mx-profile-row.active{ background:#fff!important; box-shadow:var(--cb-sh-sm)!important; }
#callibriSettingsModal .mx-ava{ background:linear-gradient(135deg,#2ecb8b,#12a065)!important; color:#fff!important; }
#callibriSettingsModal .mx-ptxt b{ color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-ptxt small{ color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-chev{ border-color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-row{ color:var(--cb-ink)!important; border-radius:14px!important; font-weight:500!important; }
#callibriSettingsModal .mx-row:hover{ background:#eef3f1!important; }
#callibriSettingsModal .mx-row.active{ background:#fff!important; color:var(--cb-primary)!important; box-shadow:var(--cb-sh-sm)!important; }
/* Иконка категории в аккуратной «плитке» */
#callibriSettingsModal .mx-row .mx-ic{ width:38px!important; height:38px!important; padding:8px!important; box-sizing:border-box!important; border-radius:12px!important; background:#eaeff0!important; color:var(--cb-ink-2)!important; flex:none!important; }
#callibriSettingsModal .mx-row:hover .mx-ic,
#callibriSettingsModal .mx-row.active .mx-ic{ background:var(--cb-primary-050)!important; color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-invite,#callibriSettingsModal .mx-invite .mx-ic{ color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-invite .mx-ic{ background:var(--cb-primary-050)!important; }
#callibriSettingsModal .mx-r-security::before,#callibriSettingsModal .mx-r-appearance::before,#callibriSettingsModal .mx-r-business::before,#callibriSettingsModal .mx-r-help::before{ background:var(--cb-border)!important; }

/* Правая колонка */
#callibriSettingsModal .mx-body{ background:#fff!important; }
#callibriSettingsModal .mx-head{ border-bottom:1px solid var(--cb-border)!important; }
#callibriSettingsModal .mx-head-title{ color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-back{ color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-close{ color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-close:hover{ color:var(--cb-ink)!important; }

/* Профиль: аватар + камера */
#callibriSettingsModal .mx-bigava{ background:linear-gradient(135deg,#2ecb8b,#12a065)!important; color:#fff!important; box-shadow:0 10px 26px rgba(16,40,30,.15)!important; }

#callibriSettingsModal .mx-cam{ background:var(--cb-primary)!important; border-color:#fff!important; color:#fff!important; }

/* Поля ввода */
#callibriSettingsModal .mx-field input,#callibriSettingsModal .mx-field textarea{ background:#f4f7f6!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; }
#callibriSettingsModal .mx-field input::placeholder,#callibriSettingsModal .mx-field textarea::placeholder{ color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-field input:focus,#callibriSettingsModal .mx-field textarea:focus{ outline:none!important; border-color:var(--cb-primary)!important; box-shadow:0 0 0 3px var(--cb-primary-050)!important; }
#callibriSettingsModal .mx-count{ color:var(--cb-muted)!important; }

/* Карточки-группы настроек */
#callibriSettingsModal .mx-card{ background:#fff!important; border:1px solid var(--cb-border)!important; box-shadow:var(--cb-sh-sm)!important; }
#callibriSettingsModal .mx-card > * + *{ border-top:1px solid var(--cb-border)!important; }
#callibriSettingsModal .mx-toggle-row{ color:var(--cb-ink)!important; }
#callibriSettingsModal a.mx-link-row{ color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-select-row{ color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-select-row select{ background:#f4f7f6!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; }

/* Тумблеры — зелёные */
#callibriSettingsModal input.mx-switch{ background:#d7dee2!important; }
#callibriSettingsModal input.mx-switch:checked{ background:var(--cb-primary)!important; }
#callibriSettingsModal input.mx-switch::after{ background:#fff!important; box-shadow:0 1px 3px rgba(0,0,0,.2)!important; }

/* Кнопки */
#callibriSettingsModal .mx-logout,#callibriSettingsModal .mx-more{ background:#eef2f1!important; color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-logout:hover,#callibriSettingsModal .mx-more:hover{ background:#e0e7e3!important; }
#callibriSettingsModal .mx-mini-btn{ background:var(--cb-primary)!important; color:#fff!important; }
#callibriSettingsModal .mx-mini-btn:hover{ background:var(--cb-primary-hover)!important; }
#callibriSettingsModal .mx-status{ color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-hint{ color:var(--cb-muted)!important; }

/* Заглушки и мелочи */
#callibriSettingsModal .mx-stub{ color:var(--cb-muted)!important; }
#callibriSettingsModal .mx-stub .mx-ic{ color:var(--cb-primary)!important; background:transparent!important; padding:0!important; width:44px!important; height:44px!important; }
#callibriSettingsModal .mx-stub b{ color:var(--cb-ink)!important; }
#callibriSettingsModal .mx-stub a{ color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-kbd{ background:#eef2f1!important; color:var(--cb-ink-2)!important; border:1px solid var(--cb-border)!important; }
#callibriSettingsModal .mx-check{ color:var(--cb-primary)!important; }
#callibriSettingsModal .mx-soon,#callibriSettingsModal .mx-dim > span:first-child{ color:var(--cb-muted)!important; }

/* Мобильные настройки — тот же светлый вид */
#callibriSettingsModal.mobile-settings-page,
#callibriSettingsModal.mobile-settings-page .mx-shell{ background:#f4f7f6!important; }
#callibriSettingsModal.mobile-settings-page .mx-nav{ background:transparent!important; }
#callibriSettingsModal.mobile-settings-page .mx-nav-title{ color:var(--cb-ink)!important; }
#callibriSettingsModal.mobile-settings-page .mx-row:active,
#callibriSettingsModal.mobile-settings-page .mx-profile-row:active{ background:#e9efec!important; }
#callibriSettingsModal.mobile-settings-page .mx-row::after{ background:var(--cb-border)!important; }

/* =========================================================================
   МОБИЛЬНАЯ ДОМАШНЯЯ СТРАНИЦА НАСТРОЕК (скрин 1): карточка профиля +
   секции Аккаунт/Уведомления/Настройки в одну прокрутку. Только моб. вид.
   ========================================================================= */
#mxMobileHome{ display:none; }

/* Структурные стили карточек/аватара/строк — работают и в мобильном полноэкранном
   виде, и в десктопном доке (.sidebar-settings-page), независимо от ширины экрана. */
#mxMobileHome .mxh-profilecard{ background:#eef1fb; border-radius:22px; padding:26px 18px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:24px; }
#mxMobileHome .mxh-ava{ position:relative; width:96px; height:96px; border-radius:50%; border:0; padding:0; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:700; color:#fff; background:linear-gradient(135deg,#2ecb8b,#12a065); cursor:pointer; overflow:visible; }
#mxMobileHome .mxh-ava img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
#mxMobileHome .mxh-cam{ position:absolute; right:-2px; bottom:-2px; width:30px; height:30px; border-radius:50%; background:var(--cb-primary); border:3px solid #eef1fb; color:#fff; display:flex; align-items:center; justify-content:center; }
#mxMobileHome .mxh-name{ margin-top:14px; font-size:22px; font-weight:800; color:var(--cb-ink); }
#mxMobileHome .mxh-status{ margin-top:4px; font-size:14px; color:var(--cb-primary); font-weight:600; display:flex; align-items:center; gap:6px; }
#mxMobileHome .mxh-dot{ width:8px; height:8px; border-radius:50%; background:var(--cb-online); }
#mxMobileHome .mxh-edit{ margin-top:16px; padding:11px 28px; border:1.5px solid var(--cb-primary); border-radius:999px; background:transparent; color:var(--cb-primary); font-size:14px; font-weight:600; cursor:pointer; }
#mxMobileHome .mxh-edit:active{ background:var(--cb-primary-050); }

#mxMobileHome .mxh-sect-title{ margin:0 6px 8px; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--cb-primary); }
#mxMobileHome .mxh-card{ background:#fff; border:1px solid var(--cb-border); border-radius:16px; overflow:hidden; margin-bottom:24px; box-shadow:var(--cb-sh-sm); }
#mxMobileHome .mxh-card > * + *{ border-top:1px solid var(--cb-border); }
#mxMobileHome .mxh-row{ display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; border:0; background:transparent; text-align:left; cursor:pointer; color:var(--cb-ink); font-family:inherit; }
#mxMobileHome .mxh-row:active{ background:#f2f5f4; }
#mxMobileHome .mxh-toggle{ cursor:default; }
#mxMobileHome .mxh-ic{ width:40px; height:40px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef2f1; color:var(--cb-ink-2); }
#mxMobileHome .mxh-ic svg{ width:22px; height:22px; }
#mxMobileHome .mxh-ic .mx-ic{ color:inherit; }
#mxMobileHome .mxh-ic-blue{ background:var(--cb-blue-050); color:var(--cb-blue); }
#mxMobileHome .mxh-ic-green{ background:var(--cb-primary-050); color:var(--cb-primary); }
#mxMobileHome .mxh-rtext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#mxMobileHome .mxh-rtext b{ font-size:15px; font-weight:600; color:var(--cb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mxMobileHome .mxh-rtext small{ font-size:12.5px; color:var(--cb-muted); }
#mxMobileHome .mx-chev{ margin-left:auto; width:8px; height:8px; border-right:1.8px solid var(--cb-muted); border-top:1.8px solid var(--cb-muted); transform:rotate(45deg); flex:none; }
#mxMobileHome .mxh-logout{ width:100%; padding:15px; border:1px solid var(--cb-border); border-radius:16px; background:#fff; color:var(--danger); font-size:15px; font-weight:600; cursor:pointer; }
#mxMobileHome .mxh-logout:active{ background:#fbeaea; }

@media (max-width:768px){
  #callibriSettingsModal.mobile-settings-page .mx-nav{ display:none!important; }
  #callibriSettingsModal.mobile-settings-page #mxMobileHome{ display:block; }
  #callibriSettingsModal.mobile-settings-page.mx-sub #mxMobileHome{ display:none; }

  #mxMobileHome .mxh-scroll{ min-height:100dvh; padding:calc(16px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom)); background:#f4f7f6; }
}

/* =========================================================================
   МОДАЛКИ: создание группы/канала, приглашение, профиль пользователя —
   светлая изумрудная тема. Только внешний вид. #appRail не затрагивается.
   ========================================================================= */
/* Основная кнопка действия (последняя) — зелёная; «Отмена» — нейтральная */
.modal-actions button:last-child{ background:var(--cb-primary)!important; background-image:none!important; color:#fff!important; border:0!important; box-shadow:0 8px 18px rgba(21,166,107,.26)!important; }
.modal-actions button:last-child:hover{ background:var(--cb-primary-hover)!important; }
.modal-actions button:first-child:not(:last-child){ background:#eef2f1!important; background-image:none!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; box-shadow:none!important; }
.modal-actions button:first-child:not(:last-child):hover{ background:#e2e8e4!important; }
.modal-card h2{ color:var(--cb-ink)!important; }
.modal-card p{ color:var(--cb-muted)!important; }
#groupError,#inviteError,#profileError{ color:var(--danger)!important; }

/* Профиль пользователя — премиальный, строгий стиль */
.profile-modal-shell::before{ background:linear-gradient(135deg,#10151b 0%,#1b2b26 55%,#123024 100%)!important; animation:none!important; }
.profile-close{ background:rgba(255,255,255,.1)!important; border:1px solid rgba(255,255,255,.22)!important; color:#fff!important; backdrop-filter:blur(6px); }
.profile-close:hover{ background:rgba(255,255,255,.18)!important; }
.profile-big-avatar{ background:linear-gradient(135deg,#263a34,#101815)!important; box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(16,40,30,.10),0 14px 32px rgba(16,40,30,.22)!important; }
.profile-name{ background:none!important; -webkit-text-fill-color:var(--cb-ink)!important; color:var(--cb-ink)!important; font-weight:700!important; }
.profile-status{ background:#fff!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink-2)!important; box-shadow:var(--cb-sh-sm)!important; }
.profile-status::before{ background:var(--cb-muted)!important; }
.profile-status.online{ background:#fff!important; border-color:var(--cb-primary-100)!important; color:var(--cb-primary)!important; }
.profile-status.online::before{ background:var(--cb-online)!important; box-shadow:0 0 8px rgba(34,197,94,.7)!important; }
.profile-info-row{ background:transparent!important; border:0!important; border-top:1px solid var(--cb-border)!important; border-bottom:1px solid var(--cb-border)!important; border-radius:0!important; padding:14px 4px!important; }
.profile-info-row:hover{ background:#fafbfa!important; }
.profile-info-value{ color:var(--cb-ink)!important; }
.profile-info-label{ color:var(--cb-muted)!important; opacity:1!important; }
.profile-modal-shell .modal-actions button{ background:var(--cb-ink)!important; background-image:none!important; color:#fff!important; box-shadow:0 8px 20px rgba(16,26,34,.22)!important; }
.profile-modal-shell .modal-actions button:hover{ background:#000!important; }

/* Профиль чужого пользователя: «Написать» + «Позвонить» в ряд, «Заблокировать» ниже */
.profile-modal-shell .profile-actions-row{ display:flex!important; gap:10px!important; }
.profile-modal-shell .profile-actions-row button{ flex:1!important; }
#profileMessageBtn{ background:var(--cb-ink)!important; background-image:none!important; color:#fff!important; border:0!important; box-shadow:0 8px 18px rgba(16,26,34,.22)!important; }
#profileMessageBtn:hover{ background:#000!important; }
#profileCallBtn{ background:#fff!important; background-image:none!important; color:var(--cb-ink)!important; border:1px solid var(--cb-border)!important; box-shadow:none!important; }
#profileCallBtn:hover{ background:#f4f7f6!important; border-color:var(--cb-ink)!important; }
.profile-modal-shell .profile-block-btn{ width:100%; margin-top:12px; min-height:46px; border:1px solid var(--cb-border); border-radius:12px; background:#fff; color:var(--danger); font-size:13.5px; font-weight:600; letter-spacing:.01em; cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.profile-modal-shell .profile-block-btn:hover{ background:#fbeaea; border-color:rgba(239,68,68,.3); }
.profile-modal-shell .profile-block-btn.is-blocked{ color:var(--cb-primary); }
.profile-modal-shell .profile-block-btn.is-blocked:hover{ background:var(--cb-primary-050); border-color:var(--cb-primary-100); }

/* =========================================================================
   ФИКС: точки статуса (офлайн — серые, онлайн — зелёные) +
   читаемое превью последнего сообщения в списке чатов.
   ========================================================================= */
/* Офлайн — се��ая точка; онлайн — зелёная */
.online-dot{ background:#c2cad2!important; box-shadow:0 0 0 2px #fff!important; }
.online-dot.online{ background:var(--cb-online)!important; }

/* Превью сообщения в списке — тёмно-серый, читаемый (было почти белым на белом) */
.user .user-info > span,
.sidebar .user .user-info > span,
.recent-chat-item .user-info > span,
.sidebar .recent-chat-item .user-info > span{ color:var(--cb-ink-2)!important; }

/* =========================================================================
   УСИЛЕННЫЙ ФИКС (id-специфичность, перебивает всё):
   тёмное превью + серы��/зелёные точки статуса в списке чатов #users.
   ========================================================================= */
#users .user .user-info > span,
.sidebar #users .user .user-info > span{ color:#414b57 !important; }
#users .online-dot{ background:#c2cad2 !important; box-shadow:0 0 0 2px #fff !important; }
#users .online-dot.online{ background:#22c55e !important; }

/* =========================================================================
   ПУЗЫРИ И КОМПОЗЕР (мобайл+ПК): чистые скруглённые пузыри без кривых
   хвостиков + аккуратное поле ввода + единая к��опка голосовое/видео снаружи.
   ========================================================================= */
/* Убираем разноцветные «оторванные» хвостики, оставляем аккуратные скругления */
.message:not(.mine)::before,
.message.mine::before,
.message::after{ display:none !important; }
.message{ border-radius:18px 18px 18px 6px !important; }
.message.mine{ border-radius:18px 18px 6px 18px !important; }

/* Композер */
.chat-input{ background:#fff !important; border-top:1px solid var(--cb-border) !important; display:flex !important; align-items:flex-end !important; gap:8px !important; padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
.composer-pill{ flex:1 !important; display:flex !important; align-items:center !important; background:#f1f4f3 !important; border:1px solid var(--cb-border) !important; border-radius:22px !important; padding:0 8px !important; }
.composer-pill:focus-within{ border-color:var(--cb-primary) !important; box-shadow:0 0 0 3px var(--cb-primary-050) !important; }
#messageInput{ flex:1 !important; background:transparent !important; border:0 !important; box-shadow:none !important; min-height:44px !important; max-height:132px !important; padding:11px 8px !important; color:var(--cb-ink) !important; }
#messageInput::placeholder{ color:var(--cb-muted) !important; }
#messageInput:focus{ border:0 !important; box-shadow:none !important; background:transparent !important; }

/* Круглые кнопки композера */
#attachBtn,#voiceBtn,.composer-media-btn{ width:46px !important; min-width:46px !important; height:46px !important; padding:0 !important; border-radius:50% !important; border:0 !important; background:#eef2f1 !important; color:var(--cb-primary) !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:background .15s ease, transform .12s ease; }
#attachBtn{ color:var(--cb-primary) !important; }
#attachBtn:hover,#voiceBtn:hover,.composer-media-btn:hover{ background:var(--cb-primary-050) !important; transform:none !important; }
.composer-media-btn[data-mode="video"]{ color:var(--cb-blue) !important; }
/* Запись — красная кнопка */
.composer-media-btn.holding,#voiceBtn.recording{ background:#ef4444 !important; color:#fff !important; transform:scale(1.06) !important; }

#sendBtn{ width:46px !important; min-width:46px !important; height:46px !important; padding:0 !important; border-radius:50% !important; background:var(--cb-primary) !important; background-image:none !important; color:#fff !important; box-shadow:0 8px 18px rgba(21,166,107,.3) !important; display:flex !important; align-items:center !important; justify-content:center !important; }
#sendBtn:hover{ background:var(--cb-primary-hover) !important; transform:none !important; }
#sendBtn:disabled{ background:#cdd6d2 !important; color:#8b968f !important; box-shadow:none !important; }
.composer-hidden{ display:none !important; }

/* =========================================================================
   RuStore-обязательное: жалоба в профиле + удаление аккаунта
   ========================================================================= */
.profile-modal-shell .profile-report-btn{ width:100%; margin-top:14px; padding-top:14px; border:0; border-top:1px solid var(--cb-border); min-height:32px; background:transparent; color:var(--cb-muted); font-size:12.5px; font-weight:600; letter-spacing:.02em; cursor:pointer; }
.profile-modal-shell .profile-report-btn:hover{ color:var(--danger); }
#mxMobileHome .mxh-danger{ width:100%; margin-top:10px; padding:15px; border:1px solid var(--cb-border); border-radius:16px; background:#fff; color:var(--danger); font-size:15px; font-weight:600; cursor:pointer; }
#mxMobileHome .mxh-danger:active{ background:#fbeaea; }
#callibriSettingsModal .mx-delete-acc{ width:100%; margin-top:10px; height:46px; border:1px solid var(--cb-border); border-radius:12px; background:#fff; color:var(--danger); font-size:14px; font-weight:600; cursor:pointer; }
#callibriSettingsModal .mx-delete-acc:hover{ background:#fbeaea; }

/* ===== DARK THEME ===== */
body.cb-dark {
  --bg-main: #0e1621;
  --bg-card: #17212b;
  --bg-input: #242f3d;
  --text-main: #f5f5f5;
  --text-soft: #8696a7;
  --text-muted: #6b7c8d;
  --cb-ink: #f5f5f5;
  --cb-ink-2: #8696a7;
  --cb-muted: #6b7c8d;
  --cb-surface: #17212b;
  --cb-border: #1f2c39;
  --cb-bg: #0e1621;
  --cb-primary-050: rgba(51,144,236,0.14);
  --cb-primary-100: rgba(51,144,236,0.26);
  --cb-online: #4dd97d;
  --danger: #e75454;
  background: #0e1621 !important;
  color: #f5f5f5 !important;
}

/* Тинты кнопок/подсветок подстраиваются под текущий акцентный цвет (в т.ч.
   если пользователь сам выбрал акцент в настройках), а не остаются
   изумрудно-зелёными, как в светлой теме. */
@supports (color: color-mix(in srgb, red, blue)) {
  body.cb-dark {
    --cb-primary-050: color-mix(in srgb, var(--cb-primary) 16%, transparent);
    --cb-primary-100: color-mix(in srgb, var(--cb-primary) 28%, transparent);
  }
}

/* ---- Согласованные (нейтральные) тени вместо зелёного свечения ---- */
body.cb-dark #sendBtn,
body.cb-dark #newChatBtn,
body.cb-dark .unread-badge,
body.cb-dark .archive-badge,
body.cb-dark #railSlider {
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

/* ---- Кнопка "Скрытые чаты" (архив): была светло-серой в любой теме ---- */
body.cb-dark .archive-btn {
  background: #17212b !important;
  border: 1px solid #1f2c39 !important;
}
body.cb-dark .archive-btn:hover {
  background: #1f2c39 !important;
  border-color: #2b3c4e !important;
}
body.cb-dark .archive-icon {
  background: rgba(255,255,255,0.06) !important;
  color: #6ab2f2 !important;
  border-color: #2b3c4e !important;
}

/* ---- Точки "в сети": белое кольцо-обводка терялось на тёмном фоне ---- */
body.cb-dark .online-dot,
body.cb-dark .online-dot.online,
body.cb-dark #users .online-dot,
body.cb-dark #users .online-dot.online {
  box-shadow: 0 0 0 2px #17212b !important;
}

/* ---- Всё основное ---- */
body.cb-dark > div,
body.cb-dark main,
body.cb-dark .app,
body.cb-dark .app-container,
body.cb-dark .container,
body.cb-dark .wrapper { background: #0e1621 !important; color: #f5f5f5 !important; }

/* ---- Рейл (левая вертикал��ная панель с иконками) ---- */
body.cb-dark nav,
body.cb-dark .rail,
body.cb-dark .rail-nav { background: #0e1621 !important; border-color: #1f2c39 !important; }
body.cb-dark .rail button,
body.cb-dark .rail a,
body.cb-dark .rail-nav button,
body.cb-dark .rail span { color: #6b7c8d !important; }
body.cb-dark .rail button.active,
body.cb-dark .rail-nav button.active,
body.cb-dark .rail button.active span { color: #f5f5f5 !important; }

/* ---- Сайдбар (список чатов) ---- */
body.cb-dark .sidebar,
body.cb-dark aside { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .sidebar-title,
body.cb-dark .sidebar h2,
body.cb-dark .sidebar h3,
body.cb-dark h2 { color: #f5f5f5 !important; }

/* ---- Чаты в списке ---- */
body.cb-dark .user { color: #f5f5f5 !important; }
body.cb-dark .user:hover { background: rgba(255,255,255,0.04) !important; }
body.cb-dark .user.active { background: #2b5278 !important; }
body.cb-dark .user-info b { color: #f5f5f5 !important; }
body.cb-dark .user-info > span,
body.cb-dark .recent-chat-item .user-info > span { color: #8696a7 !important; }

/* ---- Поиск ---- */
body.cb-dark #search { background: #242f3d !important; border-color: #242f3d !important; color: #f5f5f5 !important; border-radius: 22px !important; }
body.cb-dark #search::placeholder { color: #6b7c8d !important; }
body.cb-dark #search:focus { border-color: #3a4d63 !important; }
body.cb-dark #users { background: #17212b !important; border-color: #1f2c39 !important; }

/* ---- Область чата ---- */
body.cb-dark .chat,
body.cb-dark .chat-area { background: #0e1621 !important; }
body.cb-dark #messages { background: #0e1621 !important; color: #f5f5f5 !important; }
body.cb-dark .empty { color: #6b7c8d !important; }

/* ---- Шапка чата ---- */
body.cb-dark .chat-header { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark #chatName { color: #f5f5f5 !important; }
body.cb-dark #chatStatus { color: #8696a7 !important; }

/* ---- Сообщения ---- */
body.cb-dark .message { background: #182533 !important; color: #f5f5f5 !important; box-shadow: none !important; }
body.cb-dark .message.mine { background: #2b5278 !important; color: #fff !important; }
body.cb-dark .message-meta { color: #6b7c8d !important; }
body.cb-dark .message.mine .message-meta { color: rgba(255,255,255,0.55) !important; }
body.cb-dark .message-name { color: #5ebbef !important; }
body.cb-dark .msg-link { color: #6ab2f2 !important; }
body.cb-dark .date-divider span { background: rgba(14,22,33,0.85) !important; color: #6b7c8d !important; border: 1px solid #1f2c39 !important; border-radius: 12px !important; padding: 3px 10px !important; }
body.cb-dark .date-divider::before { background: transparent !important; }

/* ---- Поле ввода ---- */
body.cb-dark .chat-input,
body.cb-dark .composer-glass,
body.cb-dark footer { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .composer-pill { background: #242f3d !important; border-color: #242f3d !important; }
body.cb-dark #messageInput { background: transparent !important; color: #f5f5f5 !important; }
body.cb-dark #messageInput::placeholder { color: #6b7c8d !important; }
body.cb-dark #sendBtn { color: #fff !important; }
body.cb-dark #attachBtn,
body.cb-dark #voiceBtn,
body.cb-dark .composer-media-btn { background: #242f3d !important; color: #8ea2b8 !important; }
body.cb-dark #attachBtn:hover,
body.cb-dark #voiceBtn:hover,
body.cb-dark .composer-media-btn:hover { background: var(--cb-primary-050) !important; color: var(--cb-primary) !important; }
body.cb-dark .composer-media-btn.holding,
body.cb-dark #voiceBtn.recording { background: #ef4444 !important; color: #fff !important; }
body.cb-dark #emojiBtn { color: #6b7c8d !important; }
body.cb-dark #emojiBtn:hover,
body.cb-dark #emojiBtn.emoji-active { color: var(--cb-primary) !important; }

/* ---- Реакции ---- */
body.cb-dark .msg-reaction { background: #1f2c39 !important; border-color: #2b3c4e !important; color: #f5f5f5 !important; }

/* ---- Бейджи и кнопки ---- */
body.cb-dark .unread-badge { background: var(--cb-primary) !important; color: #fff !important; }
body.cb-dark .scroll-down-btn { background: #17212b !important; color: #f5f5f5 !important; border-color: #1f2c39 !important; }

/* ---- Контекстное меню ---- */
body.cb-dark .context-menu,
body.cb-dark .archive-context-menu,
body.cb-dark .message-context-menu { background: #17212b !important; border-color: #1f2c39 !important; color: #f5f5f5 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; }
body.cb-dark .context-menu button,
body.cb-dark .archive-context-menu button,
body.cb-dark .message-context-menu button { color: #f5f5f5 !important; }
body.cb-dark .context-menu button:hover,
body.cb-dark .archive-context-menu button:hover,
body.cb-dark .message-context-menu button:hover { background: #242f3d !important; }
body.cb-dark .message-context-menu button.danger { color: #e75454 !important; }
body.cb-dark .message-context-menu button.danger:hover { background: rgba(231,84,84,0.1) !important; }

/* ---- Модалки / настройки ---- */
body.cb-dark #callibriSettingsModal,
body.cb-dark .callibri-modal,
body.cb-dark .mx-modal-shell,
body.cb-dark .profile-modal-shell { background: #17212b !important; color: #f5f5f5 !important; }
body.cb-dark .mx-card { background: #1f2c39 !important; border-color: #2b3c4e !important; color: #f5f5f5 !important; }
body.cb-dark .mx-pane-inner { color: #f5f5f5 !important; }
body.cb-dark .mx-pane-title { color: #f5f5f5 !important; }
body.cb-dark .mx-toggle-row,
body.cb-dark .mx-select-row { color: #f5f5f5 !important; }
body.cb-dark .mx-hint { color: #6b7c8d !important; }
body.cb-dark select { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark input[type="text"],
body.cb-dark input[type="email"],
body.cb-dark input[type="password"],
body.cb-dark textarea:not(#messageInput) { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .mx-theme-card { border-color: #2b3c4e !important; }
body.cb-dark .mx-theme-card span { color: #f5f5f5 !important; }
body.cb-dark .mx-theme-card:has(input:checked) { border-color: var(--cb-primary) !important; }
body.cb-dark .mx-accent-header span:first-child,
body.cb-dark .mx-font-size-header span:first-child { color: #f5f5f5 !important; }
body.cb-dark .mx-fs-a-big { color: #f5f5f5 !important; }
body.cb-dark .mx-font-size-slider input[type="range"] { background: #2b3c4e !important; }

/* ---- Эмодзи ---- */
body.cb-dark .emoji-panel { background: #17212b !important; border-color: #1f2c39 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.35) !important; }
body.cb-dark .emoji-tabs { border-color: #1f2c39 !important; }
body.cb-dark .emoji-tab { color: #6b7c8d !important; }
body.cb-dark .emoji-tab.active { color: var(--cb-primary) !important; }
body.cb-dark .emoji-item:hover { background: #242f3d !important; }

/* ---- Обои в тёмной теме ---- */
body.cb-dark #messages.wp-pattern { background-color: #0e1621 !important; background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.015) 10px,rgba(255,255,255,0.015) 11px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,0.01) 10px,rgba(255,255,255,0.01) 11px) !important; }
body.cb-dark #messages.wp-classic { background-color: #0e1621 !important; }
body.cb-dark #messages.wp-gradient { background: linear-gradient(145deg, #0e1621, #17212b, #0e1621) !important; }
body.cb-dark #messages.wp-bubbles { background-color: #0c1219 !important; background-image: radial-gradient(circle at 15% 20%,rgba(43,82,120,0.08) 0%,transparent 50%),radial-gradient(circle at 85% 30%,rgba(43,82,120,0.06) 0%,transparent 45%) !important; }
body.cb-dark #messages.wp-honeycomb { background-color: #0e1621 !important; }
body.cb-dark #messages.wp-dots { background-color: #0c1219 !important; background-image: radial-gradient(circle,#1f2c39 0.8px,transparent 0.8px) !important; }
body.cb-dark #messages.wp-clean { background: #0e1621 !important; }
body.cb-dark #messages.wp-night { background: linear-gradient(170deg,#0a0f18,#0e1621,#0a0f18) !important; }

/* Тёмная тема: те же обои фоном всего сайта */
body.cb-dark.wp-pattern { background-color: #0e1621 !important; background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.015) 10px,rgba(255,255,255,0.015) 11px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,0.01) 10px,rgba(255,255,255,0.01) 11px) !important; }
body.cb-dark.wp-classic { background-color: #0e1621 !important; }
body.cb-dark.wp-gradient { background: linear-gradient(145deg, #0e1621, #17212b, #0e1621) !important; }
body.cb-dark.wp-bubbles { background-color: #0c1219 !important; background-image: radial-gradient(circle at 15% 20%,rgba(43,82,120,0.08) 0%,transparent 50%),radial-gradient(circle at 85% 30%,rgba(43,82,120,0.06) 0%,transparent 45%) !important; }
body.cb-dark.wp-honeycomb { background-color: #0e1621 !important; }
body.cb-dark.wp-dots { background-color: #0c1219 !important; background-image: radial-gradient(circle,#1f2c39 0.8px,transparent 0.8px) !important; }
body.cb-dark.wp-clean { background: #0e1621 !important; }
body.cb-dark.wp-night { background: linear-gradient(170deg,#0a0f18,#0e1621,#0a0f18) !important; }

body.cb-dark.wp-pattern .chat { background-color: #0e1621 !important; background-image: repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,0.015) 10px,rgba(255,255,255,0.015) 11px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(255,255,255,0.01) 10px,rgba(255,255,255,0.01) 11px) !important; }
body.cb-dark.wp-classic .chat { background-color: #0e1621 !important; }
body.cb-dark.wp-gradient .chat { background: linear-gradient(145deg, #0e1621, #17212b, #0e1621) !important; }
body.cb-dark.wp-bubbles .chat { background-color: #0c1219 !important; background-image: radial-gradient(circle at 15% 20%,rgba(43,82,120,0.08) 0%,transparent 50%),radial-gradient(circle at 85% 30%,rgba(43,82,120,0.06) 0%,transparent 45%) !important; }
body.cb-dark.wp-honeycomb .chat { background-color: #0e1621 !important; }
body.cb-dark.wp-dots .chat { background-color: #0c1219 !important; background-image: radial-gradient(circle,#1f2c39 0.8px,transparent 0.8px) !important; }
body.cb-dark.wp-clean .chat { background: #0e1621 !important; }
body.cb-dark.wp-night .chat { background: linear-gradient(170deg,#0a0f18,#0e1621,#0a0f18) !important; }

/* ---- Настройки: полный override ---- */
body.cb-dark .settings-modal-shell,
body.cb-dark .settings-modal-shell * { color: #f5f5f5; }
body.cb-dark .settings-modal-shell { background: #17212b !important; }
body.cb-dark .settings-modal-shell h2 { color: #f5f5f5 !important; }
body.cb-dark .settings-modal-shell input,
body.cb-dark .settings-modal-shell textarea,
body.cb-dark .settings-modal-shell select { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .settings-modal-shell input::placeholder,
body.cb-dark .settings-modal-shell textarea::placeholder { color: #6b7c8d !important; }
body.cb-dark .settings-modal-shell label { color: #8696a7 !important; }
body.cb-dark .settings-modal-shell button { color: #f5f5f5 !important; }
body.cb-dark .settings-modal-shell .modal-actions button { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .settings-modal-shell #settingsSaveBtn { background: var(--cb-primary) !important; color: #fff !important; }
body.cb-dark .settings-modal-shell #settingsLogoutBtn { background: transparent !important; color: #e75454 !important; border-color: #e75454 !important; }

/* Левое меню настроек */
body.cb-dark .mx-menu,
body.cb-dark .settings-nav,
body.cb-dark .mx-sidebar { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .mxh-row,
body.cb-dark .mx-row,
body.cb-dark .settings-row,
body.cb-dark .settings-section { background: transparent !important; color: #f5f5f5 !important; border-color: #1f2c39 !important; }
body.cb-dark .mxh-row:hover,
body.cb-dark .mx-row:hover,
body.cb-dark .settings-row:hover { background: #1f2c39 !important; }
body.cb-dark .mxh-row b,
body.cb-dark .mxh-rtext b,
body.cb-dark .settings-row > span { color: #f5f5f5 !important; }
body.cb-dark .mxh-row span,
body.cb-dark .mxh-rtext span { color: #8696a7 !important; }
body.cb-dark .mx-ic,
body.cb-dark .mxh-ic { color: #6b7c8d !important; }
body.cb-dark .mx-chev,
body.cb-dark .mx-chev::after { border-color: #6b7c8d !important; color: #6b7c8d !important; }
body.cb-dark .settings-section-title { color: #6b7c8d !important; }

/* Профиль в шапке меню настроек */
body.cb-dark .settings-me b { color: #f5f5f5 !important; }
body.cb-dark .settings-me span { color: #8696a7 !important; }
body.cb-dark .settings-avatar { border-color: #2b3c4e !important; }

/* Секция с пунктами настроек */
body.cb-dark .mx-card label,
body.cb-dark .mx-card span,
body.cb-dark .mx-card b,
body.cb-dark .mx-card div { color: #f5f5f5 !important; }
body.cb-dark .mx-select-row select { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .mx-toggle-row span:last-child { color: #8696a7 !important; }
body.cb-dark .mx-kbd { background: #242f3d !important; color: #8696a7 !important; border-color: #2b3c4e !important; }
body.cb-dark .mx-soon { color: #6b7c8d !important; }
body.cb-dark .mx-check { color: var(--cb-primary) !important; }
body.cb-dark .mx-dim { opacity: 0.4 !important; }
body.cb-dark .mx-link-row { color: #6ab2f2 !important; }
body.cb-dark .mx-link-row span { color: #6ab2f2 !important; }

/* Правая панель настроек */
body.cb-dark .mx-pane { background: #0e1621 !important; }
body.cb-dark .mx-pane-inner { background: #0e1621 !important; }

/* Шапка настроек (мобилка) */
body.cb-dark .settings-mobile-header { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .settings-mobile-title { color: #f5f5f5 !important; }
body.cb-dark .settings-mobile-back { color: #f5f5f5 !important; }

/* Кнопка закрытия */
body.cb-dark #settingsCloseBtn { color: #8696a7 !important; }
body.cb-dark #settingsCloseBtn:hover { color: #f5f5f5 !important; }

/* Удалить аккаунт */
body.cb-dark .mx-delete-acc,
body.cb-dark .mxh-danger { background: transparent !important; color: #e75454 !important; border-color: #2b3c4e !important; }
body.cb-dark .mx-delete-acc:hover,
body.cb-dark .mxh-danger:active { background: rgba(231,84,84,0.1) !important; }

/* Пригласить друзей */
body.cb-dark .mx-invite-row,
body.cb-dark [class*="invite"] { color: var(--cb-primary) !important; }

/* ===== SECURITY PANEL ===== */
.mx-section-label { font-size: 13px; font-weight: 700; color: var(--cb-primary, #15a66b); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px 6px; }
.mx-input-row { padding: 4px 16px; }
.mx-input-row input { width: 100%; padding: 10px 14px; border: 1px solid var(--cb-border, #e2e8f0); border-radius: 10px; font-size: 14px; background: var(--bg-input, #f8fafc); color: var(--cb-ink, #1e2a37); outline: none; transition: border-color 0.15s; }
.mx-input-row input:focus { border-color: var(--cb-primary, #15a66b); }
.mx-input-row input::placeholder { color: var(--cb-muted, #8a94a2); }
.mx-action-btn { display: block; width: calc(100% - 32px); margin: 10px 16px; padding: 10px; border: none; border-radius: 10px; background: var(--cb-primary, #15a66b); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.mx-action-btn:hover { opacity: 0.85; }
.mx-action-btn:disabled { opacity: 0.5; cursor: default; }
.mx-action-btn.mx-action-danger { background: transparent; color: #ef4444; border: 1px solid #ef4444; }
.mx-action-btn.mx-action-danger:hover { background: #fef2f2; }
.mx-status-text { padding: 4px 16px; font-size: 13px; min-height: 20px; }
.mx-status-ok { color: var(--cb-primary, #15a66b); }
.mx-status-error { color: #ef4444; }
.mx-blocked-list { padding: 8px 16px; }
.mx-blocked-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cb-border, #e2e8f0); }
.mx-blocked-row span { font-size: 14px; color: var(--cb-ink, #1e2a37); }
.mx-unblock-btn { border: none; background: none; color: var(--cb-primary, #15a66b); font-size: 13px; font-weight: 600; cursor: pointer; }

/* ===== DATA & STORAGE PANEL ===== */
button.mx-toggle-row { width: 100%; border: none; background: none; text-align: left; cursor: pointer; font: inherit; }
.mx-toggle-row.mx-chev-row { gap: 10px; }
.mx-toggle-row .mx-row-value { margin-left: auto; color: var(--cb-muted, #8a94a2); font-size: 13px; }
.mx-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mx-row-main b { font-size: 14px; font-weight: 600; }
.mx-row-main small { font-size: 12px; color: var(--cb-muted, #8a94a2); }
button.mx-link-row { display: block; }
body.cb-dark .mx-toggle-row .mx-row-value,
body.cb-dark .mx-row-main small { color: #6b7c8d !important; }
body.cb-dark button.mx-link-row span { color: #6ab2f2 !important; }
#callibriSettingsModal button.mx-toggle-row:hover,
#callibriSettingsModal button.mx-link-row:hover { background: rgba(0,0,0,0.03); }
body.cb-dark #callibriSettingsModal button.mx-toggle-row:hover,
body.cb-dark #callibriSettingsModal button.mx-link-row:hover { background: rgba(255,255,255,0.04); }
body.cb-dark .mx-input-row input { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .mx-input-row input::placeholder { color: #6b7c8d !important; }
body.cb-dark .mx-blocked-row { border-color: #1f2c39 !important; }
body.cb-dark .mx-blocked-row span { color: #f5f5f5 !important; }
body.cb-dark .mx-section-label { color: var(--cb-primary) !important; }

/* ---- Модалка настроек / редактирование профиля (была жёстко светлой) ---- */
body.cb-dark #callibriSettingsModal .mx-body { background: #0e1621 !important; }
body.cb-dark #callibriSettingsModal .mx-head { background: #17212b !important; border-bottom-color: #1f2c39 !important; }
body.cb-dark #callibriSettingsModal .mx-head-title { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-back { color: var(--cb-primary) !important; }
body.cb-dark #callibriSettingsModal .mx-close { color: #8696a7 !important; }
body.cb-dark #callibriSettingsModal .mx-close:hover { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-field input,
body.cb-dark #callibriSettingsModal .mx-field textarea,
body.cb-dark .modal-card input,
body.cb-dark .modal-card textarea,
body.cb-dark #groupNameInput,
body.cb-dark #groupMembersInput,
body.cb-dark #inviteMembersInput { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark #callibriSettingsModal .mx-field input::placeholder,
body.cb-dark #callibriSettingsModal .mx-field textarea::placeholder { color: #6b7c8d !important; }
body.cb-dark #callibriSettingsModal .mx-field input:focus,
body.cb-dark #callibriSettingsModal .mx-field textarea:focus { border-color: var(--cb-primary) !important; box-shadow: 0 0 0 3px var(--cb-primary-050) !important; }
body.cb-dark #callibriSettingsModal .mx-logout,
body.cb-dark #callibriSettingsModal .mx-more { background: #242f3d !important; color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-logout:hover,
body.cb-dark #callibriSettingsModal .mx-more:hover { background: #2b3c4e !important; }


/* ===== FILE PREVIEW ===== */
.cb-ap-file-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 10px; }
.cb-ap-file-icon { font-size: 56px; line-height: 1; }
.cb-ap-file-name { font-size: 15px; font-weight: 600; color: var(--cb-ink, #1e2a37); word-break: break-all; text-align: center; max-width: 280px; }
.cb-ap-file-meta { font-size: 13px; color: var(--cb-muted, #8a94a2); }

/* Файлы в сообщениях */
.msg-file { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.msg-file-icon { font-size: 28px; flex-shrink: 0; }
.msg-file-info { min-width: 0; }
.msg-file-name { font-size: 14px; font-weight: 600; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; display: block; }
.msg-file-size { font-size: 12px; color: var(--cb-muted, #8a94a2); }

/* ===== LANGUAGE PICKER ===== */
.mx-lang-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s;
  text-align: left;
}
.mx-lang-row:hover { background: #f1f5f9; }
.mx-lang-flag { font-size: 24px; flex-shrink: 0; }
.mx-lang-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--cb-ink, #1e2a37); }
.mx-lang-check { font-size: 18px; color: var(--cb-primary, #15a66b); font-weight: 700; width: 20px; text-align: center; }

body.cb-dark .mx-lang-row:hover { background: #242f3d !important; }
body.cb-dark .mx-lang-name { color: #f5f5f5 !important; }

/* Анимация смены языка */
body.lang-transition * {
  transition: opacity 0.3s ease !important;
}
@keyframes langFade {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
body.lang-transition {
  animation: langFade 0.4s ease;
}

/* Скрываем поле ввода когда чат не выбран */
.chat-input.composer-no-chat,
.composer-glass.composer-no-chat { display: none !important; }

/* ===== APPEARANCE PANEL ===== */
.mx-pane-title { font-size: 22px; font-weight: 700; color: var(--cb-ink, #1e2a37); margin-bottom: 4px; }
.mx-pane-subtitle { font-size: 13px; color: var(--cb-muted, #8a94a2); margin-bottom: 20px; }

.mx-theme-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.mx-theme-card {
  cursor: pointer;
  text-align: center;
  border-radius: 16px;
  border: 2px solid transparent;
  padding: 0;
  transition: border-color 0.2s;
}
.mx-theme-card:has(input:checked) {
  border-color: var(--cb-primary, #15a66b);
}
.mx-theme-card input[type="radio"] { display: none; }
.mx-theme-card span {
  display: block;
  padding: 8px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-ink, #1e2a37);
}

.mx-theme-preview {
  border-radius: 14px 14px 0 0;
  height: 84px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.mx-theme-light-preview { background: #f0f2f5; }
.mx-theme-dark-preview { background: #1a1a2e; }
.mx-tp-bar { height: 10px; border-radius: 4px; background: rgba(0,0,0,0.08); }
.mx-theme-dark-preview .mx-tp-bar { background: rgba(255,255,255,0.1); }
.mx-tp-bubble { height: 14px; border-radius: 8px; width: 65%; }
.mx-tp-bubble.short { width: 40%; }
.mx-tp-in { background: #e4e6eb; align-self: flex-start; }
.mx-tp-out { background: var(--cb-primary, #15a66b); opacity: 0.7; align-self: flex-end; }
.mx-theme-dark-preview .mx-tp-in { background: #2a2a3e; }
.mx-theme-dark-preview .mx-tp-out { opacity: 0.5; }

.mx-accent-section { padding: 14px; }
.mx-accent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.mx-accent-header span:first-child { font-size: 15px; font-weight: 600; color: var(--cb-ink, #1e2a37); }
.mx-accent-label { font-size: 14px; font-weight: 600; color: var(--cb-primary, #15a66b); }

.mx-accent-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mx-accent-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  outline: none;
  padding: 0;
  flex-shrink: 0;
}
.mx-accent-dot:hover { transform: scale(1.1); }
.mx-accent-dot.active {
  border-color: var(--cb-ink, #1e2a37);
  box-shadow: 0 0 0 2px #fff inset;
}

.mx-font-size-section { padding: 14px; }
.mx-font-size-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.mx-font-size-header span:first-child { font-size: 15px; font-weight: 600; color: var(--cb-ink, #1e2a37); }
.mx-font-size-header span:last-child { font-size: 13px; color: var(--cb-muted, #8a94a2); }

.mx-font-size-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mx-fs-a-small { font-size: 12px; color: var(--cb-muted, #8a94a2); font-weight: 600; }
.mx-fs-a-big { font-size: 20px; color: var(--cb-ink, #1e2a37); font-weight: 700; }
.mx-font-size-slider input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e8f0;
  border-radius: 4px;
  outline: none;
}
.mx-font-size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cb-primary, #15a66b);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.mx-font-size-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cb-primary, #15a66b);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Toggle switch */
.mx-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.mx-switch input { opacity: 0; width: 0; height: 0; }
.mx-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}
.mx-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.mx-switch input:checked + .mx-slider { background: var(--cb-primary, #15a66b); }
.mx-switch input:checked + .mx-slider::before { transform: translateX(20px); }

/* No animations mode */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  animation-duration: 0.01s !important;
  transition-duration: 0.01s !important;
}

@media (max-width: 768px) {
  .mx-theme-preview { height: 84px; }
  .mx-accent-dot { width: 32px; height: 32px; }
  .mx-accent-dots { gap: 8px; }
}

/* ===== EMOJI PICKER ===== */
#emojiBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--cb-muted, #8a94a2);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
#emojiBtn:hover,
#emojiBtn.emoji-active { color: var(--cb-primary, #15a66b); }

.emoji-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 12px;
  left: auto;
  max-width: 380px;
  max-height: 320px;
  background: #fff;
  border: 1px solid var(--cb-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: emojiSlideUp 0.2s ease;
}
.emoji-panel.hidden { display: none; }
@keyframes emojiSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.emoji-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cb-border, #e2e8f0);
  overflow-x: auto;
  flex-shrink: 0;
}
.emoji-tab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted, #8a94a2);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
}
.emoji-tab.active {
  color: var(--cb-primary, #15a66b);
  border-bottom-color: var(--cb-primary, #15a66b);
}
.emoji-tab:hover { color: var(--cb-ink, #1e2a37); }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  max-height: 240px;
}
.emoji-grid.hidden { display: none; }

.emoji-item {
  background: none;
  border: none;
  font-size: 24px;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
  line-height: 1;
  text-align: center;
}
.emoji-item:hover { background: var(--cb-primary-050, #e6f7f0); }

/* Стикеры (мобилка) */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.sticker-grid.hidden { display: none; }
.sticker-item {
  background: none;
  border: none;
  font-size: 38px;
  padding: 8px;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.1s, transform 0.1s;
  line-height: 1;
  text-align: center;
}
.sticker-item:active {
  background: var(--cb-primary-050, #e6f7f0);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .emoji-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-width: none;
    max-height: 45vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.2);
    animation: emojiSlideUpMobile 0.25s ease;
  }
  @keyframes emojiSlideUpMobile {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
    max-height: calc(45vh - 50px);
    -webkit-overflow-scrolling: touch;
  }
  .emoji-item { font-size: 22px; }
}

/* =========================================================================
   МОБИЛЬНАЯ ОПТИМИЗАЦИЯ: отключаем тяжёлые эффекты для слабых устройств
   ========================================================================= */
@media (max-width: 768px) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .message, .sidebar, .chat-header, .modal, .popup,
  .context-menu, [class*="modal"], [class*="popup"],
  [class*="dropdown"], [class*="tooltip"], [class*="overlay"] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  @keyframes none-anim { from {} to {} }
  .message, .sidebar, .chat-header {
    animation-duration: 0.01s !important;
    transition-duration: 0.1s !important;
  }
}

/* ===== МИНИ-ПЛЕЕР ГОЛОСОВЫХ/ВИДЕОСООБЩЕНИЙ (под шапкой чата) ===== */
.mini-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 14px 0;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 5;
}

/* Кнопки мини-плеера — зелёный акцент бренда вместо телеграмовского синего */
.mp-btn,
#mpVolumeBtn.mp-icon-btn {
  color: var(--cb-primary, #15a66b) !important;
}

.mp-btn svg,
#mpVolumeBtn.mp-icon-btn svg {
  display: block;
}

.mini-player.hidden {
  display: none !important;
}

.mp-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.mp-btn {
  border: none;
  background: transparent;
  color: var(--cb-primary, #2a7ef2);
  font-size: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
}

.mp-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.mp-btn.mp-play {
  font-size: 14px;
}

.mp-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mp-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-meta {
  font-size: 12px;
  color: #7a7a7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mp-icon-btn {
  border: none;
  background: transparent;
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: background 0.15s ease;
  padding: 0;
}

.mp-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.mp-speed-btn {
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 30px;
}

.mp-close {
  color: #999;
  font-size: 13px;
}

body.cb-dark .mini-player {
  background: #1f2c39 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

body.cb-dark .mp-title {
  color: #f5f5f5 !important;
}

body.cb-dark .mp-meta {
  color: #9fb0bd !important;
}

body.cb-dark .mp-btn:hover,
body.cb-dark .mp-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.cb-dark .mp-icon-btn {
  color: #b0bfca !important;
}

body.cb-dark .mp-btn,
body.cb-dark #mpVolumeBtn.mp-icon-btn {
  color: var(--cb-primary, #15a66b) !important;
}

body.cb-dark .mp-speed-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e8eef2 !important;
}

body.cb-dark .mp-close {
  color: #8a97a3 !important;
}


/* ===== ПРОКРУТКА СПИСКА ЧАТОВ КОЛЁСИКОМ МЫШИ (ПК) =====
   На десктопе .sidebar имел overflow: hidden, а #recentChats / #groups —
   flex-shrink: 0 без своей области прокрутки, поэтому список просто
   обрезался и колёсиком не листался. На телефоне работало из-за
   .sidebar { overflow-y: auto } в media (max-width: 768px). */
@media (min-width: 769px) {
  .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* Шапка, поиск и Архив остаются на месте, листается только список */
  #recentChats,
  #groups {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
  }

  #recentChats::-webkit-scrollbar,
  #groups::-webkit-scrollbar {
    width: 8px;
  }

  #recentChats::-webkit-scrollbar-thumb,
  #groups::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
  }

  #recentChats::-webkit-scrollbar-track,
  #groups::-webkit-scrollbar-track {
    background: transparent;
  }
}


/* ===== АДМИН-ПАНЕЛЬ =====
   Пункт меню скрыт по умолчанию и показывается, только когда сервер
   подтвердил права (body.callibri-admin). Это только удобство:
   защита реально живёт на бэкенде. */
.mx-r-admin { display: none !important; }
body.callibri-admin .mx-r-admin { display: flex !important; }

.adm-pane { display: flex; flex-direction: column; gap: 14px; }

.adm-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.adm-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: inherit;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}

.adm-tab:hover { background: rgba(255, 255, 255, 0.08); }

.adm-tab.active {
  background: #2b6cb0;
  border-color: #2b6cb0;
  color: #fff;
}

.adm-badge {
  background: #e53e3e;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  padding: 3px 6px;
  min-width: 18px;
  text-align: center;
}

.adm-tabpane { display: none; flex-direction: column; gap: 12px; }
.adm-tabpane.active { display: flex; }

.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.adm-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adm-card b { font-size: 22px; font-weight: 600; line-height: 1.1; }
.adm-card span { font-size: 12px; opacity: .65; }

.adm-search { display: flex; gap: 8px; flex-wrap: wrap; }

.adm-search input,
.adm-search select {
  flex: 1 1 160px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 9px 11px;
  color: inherit;
  font-size: 14px;
  font-family: inherit;
}

.adm-search input:focus,
.adm-search select:focus { outline: none; border-color: #2b6cb0; }

.adm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.adm-list::-webkit-scrollbar { width: 8px; }
.adm-list::-webkit-scrollbar-track { background: transparent; }
.adm-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.adm-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 11px;
  padding: 11px 13px;
}

.adm-item-main { min-width: 0; flex: 1 1 auto; }

.adm-item-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  word-break: break-word;
}

.adm-item-meta { font-size: 12px; opacity: .6; margin-top: 3px; word-break: break-word; }

.adm-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.adm-quote {
  margin-top: 7px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.adm-reason { margin-top: 6px; font-size: 12px; color: #fc8181; }

.adm-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.adm-tag-admin { background: rgba(43, 108, 176, 0.9); color: #fff; }
.adm-tag-ban { background: rgba(229, 62, 62, 0.9); color: #fff; }
.adm-tag-on { background: rgba(56, 161, 105, 0.9); color: #fff; }
.adm-tag-verified { background: #1d9bf0; color: #fff; }

.adm-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
  align-self: flex-start;
}

.adm-btn:hover { background: rgba(255, 255, 255, 0.13); }
.adm-btn-sm { padding: 6px 10px; font-size: 12px; }
.adm-btn-primary { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.adm-btn-primary:hover { background: #2c5f96; }
.adm-btn-danger { color: #fc8181; border-color: rgba(252, 129, 129, 0.35); }
.adm-btn-danger:hover { background: rgba(229, 62, 62, 0.16); }

.adm-empty { padding: 22px; text-align: center; font-size: 13px; opacity: .55; }
.adm-hint { font-size: 12px; opacity: .6; line-height: 1.45; }

@media (max-width: 768px) {
  .adm-item { flex-direction: column; align-items: stretch; }
  .adm-item-actions { justify-content: flex-start; }
  .adm-list { max-height: none; }
  .adm-stats { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}


/* ===== КРАСИВЫЕ ОКНА (cbConfirm / cbPrompt / cbAlert) ===== */
.cb-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 40, 30, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .16s ease;
}

.cb-dialog-overlay.cb-dialog-open { opacity: 1; }

.cb-dialog {
  width: 100%;
  max-width: 380px;
  background: var(--cb-surface, #fff);
  border-radius: 22px;
  padding: 26px 24px 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(16, 40, 30, 0.22);
  transform: translateY(12px) scale(.96);
  opacity: 0;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
}

.cb-dialog-overlay.cb-dialog-open .cb-dialog { transform: translateY(0) scale(1); opacity: 1; }

.cb-dialog-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-primary-050, #e9f7f0);
  color: var(--cb-primary, #15a66b);
}

.cb-dialog-icon svg { width: 27px; height: 27px; }

.cb-dialog-danger .cb-dialog-icon {
  background: rgba(239, 68, 68, 0.10);
  color: var(--danger, #ef4444);
}

.cb-dialog-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--cb-ink, #1e2a37);
  line-height: 1.3;
}

.cb-dialog-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-ink-2, #55606e);
  word-break: break-word;
}

.cb-dialog-input {
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--cb-ink, #1e2a37);
  background: var(--cb-chat, #f4f7f6);
  border: 1.5px solid var(--cb-border, #e6e9ec);
  border-radius: 13px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

.cb-dialog-input:focus {
  outline: none;
  border-color: var(--cb-primary, #15a66b);
  box-shadow: 0 0 0 3px var(--cb-primary-050, #e9f7f0);
}

.cb-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.cb-dialog-btn {
  flex: 1 1 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}

.cb-dialog-btn:active { transform: scale(.97); }

.cb-dialog-btn-ghost {
  background: var(--cb-chat, #f4f7f6);
  color: var(--cb-ink-2, #55606e);
}

.cb-dialog-btn-ghost:hover { background: var(--cb-bubble-in, #eef1f4); }

.cb-dialog-btn-main {
  background: var(--cb-primary, #15a66b);
  color: #fff;
  box-shadow: 0 6px 16px rgba(21, 166, 107, 0.28);
}

.cb-dialog-btn-main:hover { background: var(--cb-primary-hover, #0f8f5b); }

.cb-dialog-danger .cb-dialog-btn-main {
  background: var(--danger, #ef4444);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.28);
}

.cb-dialog-danger .cb-dialog-btn-main:hover { background: #dc2626; }

@media (max-width: 480px) {
  .cb-dialog { max-width: 100%; border-radius: 20px; padding: 22px 18px 18px; }
  .cb-dialog-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-dialog-overlay, .cb-dialog { transition: none; }
}

/* ===== Галочка официального аккаунта Callibri ===== */
.cb-official {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-left: 5px;
  vertical-align: -3px;
  color: #1d9bf0;
  border-radius: 50%;
  line-height: 0;
  flex: 0 0 auto;
}

.cb-official svg { width: 100%; height: 100%; display: block; border-radius: 50%; }

/* ===== Чат с непрочитанными сообщениями ===== */
.recent-chat-item.has-unread .user-info b {
  font-weight: 800;
  color: var(--cb-ink, #1e2a37);
}

.recent-chat-item.has-unread .user-info > span,
.recent-chat-item.has-unread .user-info span:not(.chat-list-time):not(.online-dot) {
  color: var(--cb-ink, #1e2a37);
  font-weight: 600;
}

.recent-chat-item.has-unread .chat-list-time {
  color: var(--cb-primary, #15a66b);
  font-weight: 700;
}

/* ===== Спорное сообщение во вкладке жалоб ===== */
.adm-quote-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-ink-2, #6b7a89);
  margin-bottom: 4px;
}

.adm-quote-gone {
  color: var(--cb-ink-2, #6b7a89);
  font-style: italic;
}

/* ===== ФИКС ВЁРСТКИ КАРТОЧЕК АДМИНКИ =====
   Раньше блок кнопок не уменьшался и не переносился, поэтому текст
   сжимался в колонку шириной в одну букву. */
.adm-item {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Тексту гарантируем минимальную ширину: не влезает — кнопки уедут на строку ниже */
.adm-item-main {
  flex: 1 1 260px;
  min-width: 0;
}

.adm-item-actions {
  flex: 0 1 auto;
  align-items: flex-start;
}

.adm-item-actions .adm-btn {
  white-space: nowrap;
}

.adm-item-title {
  overflow-wrap: anywhere;
}

/* Цитата спорного сообщения: фон под тему, а не глухой тёмный */
.adm-quote {
  background: var(--cb-bubble-in, rgba(0, 0, 0, 0.05));
  border-left: 3px solid var(--cb-primary, #15a66b);
  border-radius: 0 8px 8px 0;
  color: inherit;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}

/* Список жалоб на узком экране */
@media (max-width: 560px) {
  .adm-item-main { flex: 1 1 100%; }
  .adm-item-actions { width: 100%; justify-content: flex-start; }
}

/* ===== ВЫБОР УЧАСТНИКОВ (группы, каналы, приглашения) ===== */
.cb-picker {
  width: 100%;
  margin: 8px 0 0;
}

.cb-picker-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cb-bubble-in, #f2f4f7);
  border: 1px solid var(--cb-border, #e3e8ee);
  cursor: text;
}

.cb-picker-input {
  flex: 1 1 140px;
  min-width: 120px;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 4px 2px !important;
  margin: 0 !important;
  font-size: 14px;
  color: var(--cb-ink, #1e2a37);
  box-shadow: none !important;
}

.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--cb-primary, #15a66b);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.cb-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-chip-x {
  border: none;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-chip-x:hover { background: rgba(255, 255, 255, 0.42); }

.cb-picker-drop {
  margin-top: 6px;
  max-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  border: 1px solid var(--cb-border, #e3e8ee);
  background: var(--cb-surface, #fff);
  box-shadow: 0 10px 24px rgba(16, 48, 76, 0.12);
}

.cb-picker-drop.hidden { display: none; }

.cb-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.cb-picker-row:hover,
.cb-picker-row.active {
  background: var(--cb-primary-050, #e9f7f0);
}

.cb-picker-row .avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 13px;
}

.cb-picker-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cb-picker-row-text b {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-ink, #1e2a37);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-picker-row-text i {
  font-style: normal;
  font-size: 12px;
  color: var(--cb-ink-2, #6b7a89);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-picker-add {
  font-size: 11px;
  font-weight: 700;
  color: var(--cb-primary, #15a66b);
  text-transform: uppercase;
  white-space: nowrap;
}

.cb-picker-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--cb-ink-2, #6b7a89);
  text-align: center;
}

/* ===== ПАНЕЛЬ ЗАПИСИ ГОЛОСОВОГО ===== */
.composer-glass { position: relative; }

.cb-recbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--cb-surface, #fff);
  animation: cbRecIn 0.16s ease-out;
}

.cb-recbar.hidden { display: none; }

@keyframes cbRecIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.cb-recbar-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--cb-bubble-in, #f2f4f7);
}

.cb-recbar-dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  animation: cbRecBlink 1.1s ease-in-out infinite;
}

.cb-recbar.paused .cb-recbar-dot { animation: none; opacity: 0.4; }

@keyframes cbRecBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.cb-recbar-bars {
  flex: 1;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}

.cb-recbar-bars span {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 4px;
  border-radius: 2px;
  background: var(--cb-primary, #15a66b);
  transition: height 0.09s linear;
}

.cb-recbar.paused .cb-recbar-bars span { background: var(--cb-ink-2, #6b7a89); }

.cb-recbar-time {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cb-ink, #1e2a37);
  white-space: nowrap;
}

.cb-recbar-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: var(--cb-ink-2, #6b7a89);
  padding: 0;
}

.cb-recbar-btn:hover { background: var(--cb-bubble-in, #f2f4f7); }

.cb-recbar-trash { color: var(--danger, #ef4444); }
.cb-recbar-trash:hover { background: rgba(239, 68, 68, 0.12); }

.cb-recbar-send {
  background: var(--cb-primary, #15a66b);
  color: #fff;
}

.cb-recbar-send:hover { background: var(--cb-primary-hover, #0f8f5b); }

/* Пока кнопку держат пальцем, панелью нажать нельзя — показываем подсказку */
.cb-recbar:not(.locked) .cb-recbar-btn { opacity: 0.35; pointer-events: none; }

.cb-recbar-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--cb-ink-2, #6b7a89);
  pointer-events: none;
}

.cb-recbar.locked .cb-recbar-hint { display: none; }

@media (max-width: 480px) {
  .cb-recbar { gap: 4px; padding: 8px 6px; }
  .cb-recbar-wrap { padding: 0 10px; gap: 6px; }
  .cb-recbar-btn { width: 38px; height: 38px; min-width: 38px; }
}

/* Метка главного админа */
.adm-tag-owner {
  background: linear-gradient(135deg, #15a66b, #0f8f5b);
  color: #fff;
  border: none;
  font-weight: 700;
}

/* ===== Карточка группы / канала ===== */
.cb-gi { display: flex; align-items: center; justify-content: center; }
.cb-gi-card {
  width: min(420px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--cb-surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 48, 76, .28);
}
.cb-gi-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  color: #fff;
}
.cb-gi-toptitle { flex: 1; font-size: 16px; font-weight: 700; text-align: center; }
.cb-gi-x, .cb-gi-edit {
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 15px; cursor: pointer;
  transition: background .15s ease;
}
.cb-gi-x:hover, .cb-gi-edit:hover { background: rgba(255, 255, 255, .3); }
.cb-gi-edit-spacer { width: 34px; flex: 0 0 34px; }

.cb-gi-hero { padding: 4px 20px 22px; text-align: center; color: #fff; }
.cb-gi-ava {
  width: 104px; height: 104px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 3px solid rgba(255, 255, 255, .5);
  overflow: hidden;
}
.cb-gi-ava img { width: 100%; height: 100%; object-fit: cover; }
.cb-gi-title { font-size: 20px; font-weight: 700; }
.cb-gi-sub {
  margin-top: 5px; font-size: 13px; opacity: .9;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cb-gi-badge {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}

/* Группа — зелёная шапка, круглый аватар */
.cb-gi.is-group .cb-gi-top,
.cb-gi.is-group .cb-gi-hero { background: linear-gradient(135deg, #15a66b, #0f8f5b); }
.cb-gi.is-group .cb-gi-ava { border-radius: 50%; }

/* Канал — тёмно-синяя шапка, скруглённый квадрат */
.cb-gi.is-channel .cb-gi-top,
.cb-gi.is-channel .cb-gi-hero { background: linear-gradient(135deg, #10304c, #1c4a6e); }
.cb-gi.is-channel .cb-gi-ava { border-radius: 26px; }
.cb-gi.is-channel .cb-gi-title::before { content: "📢 "; }

.cb-gi-body { flex: 1; overflow-y: auto; padding: 14px; background: var(--cb-chat); }
.cb-gi-block {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cb-gi-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cb-border);
}
.cb-gi-row:last-child { border-bottom: 0; }
.cb-gi-row-btn { cursor: pointer; }
.cb-gi-row-btn:hover { background: var(--cb-primary-050); }
.cb-gi-ic { font-size: 17px; width: 22px; text-align: center; }
.cb-gi-rowmain { flex: 1; min-width: 0; }
.cb-gi-rowmain b { display: block; font-size: 14px; color: var(--cb-ink); font-weight: 600; }
.cb-gi-rowmain small { display: block; font-size: 12px; color: var(--cb-ink-2); margin-top: 2px; }

.cb-gi-switch {
  width: 42px; height: 24px; flex: 0 0 42px;
  border-radius: 999px; background: #cfd8e0;
  position: relative; transition: background .18s ease;
}
.cb-gi-switch i {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cb-gi-switch.on { background: var(--cb-primary); }
.cb-gi.is-channel .cb-gi-switch.on { background: #1c4a6e; }
.cb-gi-switch.on i { transform: translateX(18px); }

.cb-gi-tabs {
  display: flex; gap: 6px; padding: 4px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 14px;
  margin-bottom: 10px;
}
.cb-gi-tab {
  flex: 1; padding: 9px 4px;
  border: 0; border-radius: 11px;
  background: transparent; color: var(--cb-ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cb-gi-tab.active { background: var(--cb-primary-050); color: var(--cb-primary); }
.cb-gi.is-channel .cb-gi-tab.active { background: #e8eef4; color: #10304c; }

.cb-gi-pane {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 16px;
  overflow: hidden;
}
.cb-gi-member, .cb-gi-file {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cb-border);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease;
}
.cb-gi-member:last-child, .cb-gi-file:last-child { border-bottom: 0; }
.cb-gi-member:hover, .cb-gi-file:hover { background: var(--cb-primary-050); }
.cb-gi-member .avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.cb-gi-mmain { flex: 1; min-width: 0; }
.cb-gi-mmain b {
  display: block; font-size: 14px; font-weight: 600; color: var(--cb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-gi-mmain small { display: block; font-size: 12px; color: var(--cb-ink-2); margin-top: 2px; }
.cb-gi-role {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: var(--cb-primary-050); color: var(--cb-primary);
  font-size: 11px; font-weight: 700;
}
.cb-gi.is-channel .cb-gi-role { background: #e8eef4; color: #10304c; }
.cb-gi-fic { font-size: 20px; width: 42px; text-align: center; }
.cb-gi-empty { padding: 26px 14px; text-align: center; color: var(--cb-ink-2); font-size: 13px; }

.cb-gi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.cb-gi-cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #000; }
.cb-gi-cell img, .cb-gi-cell video { width: 100%; height: 100%; object-fit: cover; }
.cb-gi-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

.cb-gi-actions {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-surface);
}
.cb-gi-btn {
  flex: 1; min-height: 42px;
  border: 1px solid var(--cb-border); border-radius: 14px;
  background: #fff; color: var(--cb-ink);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s ease;
}
.cb-gi-btn:hover { background: var(--cb-primary-050); }
.cb-gi-btn-primary { background: var(--cb-primary); border-color: var(--cb-primary); color: #fff; }
.cb-gi-btn-primary:hover { background: var(--cb-primary-hover); }
.cb-gi.is-channel .cb-gi-btn-primary { background: #10304c; border-color: #10304c; }
.cb-gi.is-channel .cb-gi-btn-primary:hover { background: #1c4a6e; }
.cb-gi-btn-danger { color: var(--danger); }
.cb-gi-btn-danger:hover { background: #fbeaea; }

body.cb-dark .cb-gi-card,
body.cb-dark .cb-gi-block,
body.cb-dark .cb-gi-pane,
body.cb-dark .cb-gi-tabs,
body.cb-dark .cb-gi-actions { background: #17212b; }
body.cb-dark .cb-gi-btn { background: #1f2c38; color: #f5f5f5; }

@media (max-width: 480px) {
  .cb-gi-card { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .cb-gi-ava { width: 88px; height: 88px; font-size: 34px; }
  .cb-gi-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Фото и видео без пузыря =====
   Убираем зелёную рамку у своих сообщений и белую у чужих —
   остаётся только сам снимок, как в привычных мессенджерах. */
.message.message--mediaonly,
.message.mine.message--mediaonly,
#messages .message.message--mediaonly,
#messages .message.mine.message--mediaonly,
body.cb-dark .message.message--mediaonly,
body.cb-dark .message.mine.message--mediaonly {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.message.message--mediaonly::before,
.message.mine.message--mediaonly::before,
.message.message--mediaonly::after,
.message.mine.message--mediaonly::after {
  content: none !important;
  display: none !important;
}

.message--mediaonly .message-media { margin-top: 0 !important; }
.message--mediaonly .message-media img,
.message--mediaonly .message-media video {
  display: block;
  border-radius: 18px !important;
}

/* Время и галочки кладём поверх снимка тёмной плашкой */
.message--mediaonly .message-meta {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  margin: 0 !important;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.message--mediaonly .message-meta,
.message--mediaonly .message-time,
.message--mediaonly .message-edited,
.message--mediaonly .message-status,
.message.mine.message--mediaonly .message-meta,
.message.mine.message--mediaonly .message-time,
.message.mine.message--mediaonly .message-edited {
  color: #fff !important;
}

/* Имя автора в группе и реакции живут вне снимка */
.message--mediaonly .message-name { margin: 0 0 5px 4px !important; }
.message--mediaonly .msg-reactions { margin-top: 6px !important; }

/* Фото с подписью: пузырь нужен для текста, но картинка идёт впритык к краям */
.message--mediacap .message-media {
  margin: -11px -13px 8px !important;
}
.message--mediacap .message-media img,
.message--mediacap .message-media video {
  width: 100%;
  border-radius: 20px 20px 4px 4px !important;
}
.message--mediacap .message-name + .message-media {
  margin-top: 0 !important;
}

@media (max-width: 480px) {
  .message--mediaonly .message-media img,
  .message--mediaonly .message-media video { border-radius: 16px !important; }
}

/* =========================================================
   РАЗМЕР ТЕКСТА (ползунок в Оформлении)
   Раньше переменную перебивало правило с жёсткими 15px ниже по файлу,
   поэтому ползунок ничего не менял.
   ========================================================= */
:root { --cb-font-size: 15px; --cb-font-scale: 1; }

.message-text,
.message .message-text,
#messages .message .message-text {
  font-size: var(--cb-font-size, 15px) !important;
  line-height: 1.42 !important;
}

/* Вместе с текстом тянем сопутствующие элементы, чтобы чат оставался цельным */
.message-reply-text,
.msg-file-name,
.message-name {
  font-size: calc(13px * var(--cb-font-scale, 1)) !important;
}
.message-meta,
.message-time,
.msg-file-size {
  font-size: calc(11px * var(--cb-font-scale, 1)) !important;
}

/* =========================================================
   ТЁМНАЯ ТЕМА — ОКНО НАСТРОЕК
   Раньше левое меню оставалось белым, а текст брался тёмной темы —
   светло-серое по белому. Перекрываем всё явно.
   ========================================================= */
body.cb-dark #callibriSettingsModal .mx-modal-shell,
body.cb-dark #callibriSettingsModal .mx-panes,
body.cb-dark #callibriSettingsModal .mx-pane,
body.cb-dark #callibriSettingsModal .mx-pane-inner {
  background: #0e1621 !important;
  color: #f5f5f5 !important;
}

body.cb-dark #callibriSettingsModal .mx-nav {
  background: #17212b !important;
  border-right: 1px solid #1f2c39 !important;
}
body.cb-dark #callibriSettingsModal .mx-nav-title { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-nav-close {
  background: #242f3d !important;
  color: #cfd8e0 !important;
}
body.cb-dark #callibriSettingsModal .mx-nav-close:hover { background: #2b3c4e !important; }

body.cb-dark #callibriSettingsModal .mx-row {
  background: transparent !important;
  color: #f5f5f5 !important;
}
body.cb-dark #callibriSettingsModal .mx-row span { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-row:hover { background: #242f3d !important; }
body.cb-dark #callibriSettingsModal .mx-row.active {
  background: #242f3d !important;
  color: var(--cb-primary) !important;
}
body.cb-dark #callibriSettingsModal .mx-row.active span { color: var(--cb-primary) !important; }
body.cb-dark #callibriSettingsModal .mx-chev,
body.cb-dark #callibriSettingsModal .mx-chev::after { border-color: #6b7c8d !important; color: #6b7c8d !important; }

body.cb-dark #callibriSettingsModal .mx-card {
  background: #17212b !important;
  border: 1px solid #1f2c39 !important;
  box-shadow: none !important;
}
body.cb-dark #callibriSettingsModal .mx-card > * + * { border-top: 1px solid #1f2c39 !important; }
body.cb-dark #callibriSettingsModal .mx-card b,
body.cb-dark #callibriSettingsModal .mx-card span,
body.cb-dark #callibriSettingsModal .mx-card label,
body.cb-dark #callibriSettingsModal .mx-toggle-row,
body.cb-dark #callibriSettingsModal .mx-select-row { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-hint,
body.cb-dark #callibriSettingsModal .mx-status,
body.cb-dark #callibriSettingsModal .mx-count,
body.cb-dark #callibriSettingsModal .mx-pane-subtitle,
body.cb-dark #callibriSettingsModal .mx-soon { color: #8696a7 !important; }
body.cb-dark #callibriSettingsModal .mx-pane-title { color: #f5f5f5 !important; }

body.cb-dark #callibriSettingsModal .mx-field input,
body.cb-dark #callibriSettingsModal .mx-field textarea,
body.cb-dark #callibriSettingsModal .mx-select-row select,
body.cb-dark #callibriSettingsModal input[type="text"],
body.cb-dark #callibriSettingsModal input[type="password"],
body.cb-dark #callibriSettingsModal input[type="email"],
body.cb-dark #callibriSettingsModal textarea,
body.cb-dark #callibriSettingsModal select {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border: 1px solid #2b3c4e !important;
}
body.cb-dark #callibriSettingsModal .mx-field input::placeholder,
body.cb-dark #callibriSettingsModal textarea::placeholder { color: #6b7c8d !important; }

body.cb-dark #callibriSettingsModal .mx-logout,
body.cb-dark #callibriSettingsModal .mx-more {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border-color: #2b3c4e !important;
}
body.cb-dark #callibriSettingsModal .mx-logout:hover,
body.cb-dark #callibriSettingsModal .mx-more:hover { background: #2b3c4e !important; }

body.cb-dark #callibriSettingsModal .mx-stub {
  background: #17212b !important;
  color: #8696a7 !important;
  border-color: #1f2c39 !important;
}
body.cb-dark #callibriSettingsModal .mx-stub b { color: #f5f5f5 !important; }

body.cb-dark #callibriSettingsModal .mx-theme-card { background: #17212b !important; }
body.cb-dark #callibriSettingsModal .mx-font-size-header span:last-child,
body.cb-dark #callibriSettingsModal .mx-fs-a-small { color: #8696a7 !important; }
body.cb-dark #callibriSettingsModal .mx-fs-a-big,
body.cb-dark #callibriSettingsModal .mx-font-size-header span:first-child,
body.cb-dark #callibriSettingsModal .mx-accent-header span:first-child { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-font-size-slider input[type="range"] { background: #2b3c4e !important; }

body.cb-dark #callibriSettingsModal .mx-profile-row,
body.cb-dark #callibriSettingsModal .mx-invite-row { color: #f5f5f5 !important; }
body.cb-dark #callibriSettingsModal .mx-invite span { color: var(--cb-primary) !important; }
body.cb-dark #callibriSettingsModal input.mx-switch { background: #2b3c4e !important; }
body.cb-dark #callibriSettingsModal input.mx-switch:checked { background: var(--cb-primary) !important; }

/* =========================================================
   ТЁМНАЯ ТЕМА — ОСТАЛЬНЫЕ ОКНА И ПАНЕЛИ
   ========================================================= */

/* Карточка группы / канала */
body.cb-dark .cb-gi-body { background: #0e1621 !important; }
body.cb-dark .cb-gi-block,
body.cb-dark .cb-gi-pane,
body.cb-dark .cb-gi-tabs,
body.cb-dark .cb-gi-actions,
body.cb-dark .cb-gi-card { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .cb-gi-row { border-bottom-color: #1f2c39 !important; }
body.cb-dark .cb-gi-row-btn:hover,
body.cb-dark .cb-gi-member:hover,
body.cb-dark .cb-gi-file:hover { background: #242f3d !important; }
body.cb-dark .cb-gi-rowmain b,
body.cb-dark .cb-gi-mmain b { color: #f5f5f5 !important; }
body.cb-dark .cb-gi-rowmain small,
body.cb-dark .cb-gi-mmain small,
body.cb-dark .cb-gi-empty { color: #8696a7 !important; }
body.cb-dark .cb-gi-member,
body.cb-dark .cb-gi-file { border-bottom-color: #1f2c39 !important; }
body.cb-dark .cb-gi-switch { background: #2b3c4e !important; }
body.cb-dark .cb-gi-btn { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .cb-gi-btn:hover { background: #2b3c4e !important; }
body.cb-dark .cb-gi-btn-danger { color: #e75454 !important; }

/* Окна подтверждения / ввода */
body.cb-dark .cb-dialog,
body.cb-dark .cb-dialog-card { background: #17212b !important; color: #f5f5f5 !important; border-color: #1f2c39 !important; }
body.cb-dark .cb-dialog-title { color: #f5f5f5 !important; }
body.cb-dark .cb-dialog-text { color: #c7d0d9 !important; }
body.cb-dark .cb-dialog-input {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border-color: #2b3c4e !important;
}
body.cb-dark .cb-dialog-btn-cancel { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .cb-dialog-btn-cancel:hover { background: #2b3c4e !important; }

/* Админ-панель */
body.cb-dark .adm-pane,
body.cb-dark .adm-list,
body.cb-dark .adm-item { background: #17212b !important; border-color: #1f2c39 !important; color: #f5f5f5 !important; }
body.cb-dark .adm-item-title { color: #f5f5f5 !important; }
body.cb-dark .adm-item-meta,
body.cb-dark .adm-hint,
body.cb-dark .adm-empty { color: #8696a7 !important; }
body.cb-dark .adm-tab { color: #8696a7 !important; }
body.cb-dark .adm-tab.active { background: #242f3d !important; color: var(--cb-primary) !important; }
body.cb-dark .adm-btn { background: #242f3d !important; color: #f5f5f5 !important; border-color: #2b3c4e !important; }
body.cb-dark .adm-btn:hover { background: #2b3c4e !important; }
body.cb-dark .adm-btn-danger { color: #e75454 !important; }
body.cb-dark .adm-search,
body.cb-dark #admUserSearch,
body.cb-dark #admGroupSearch,
body.cb-dark #admBcTitle,
body.cb-dark #admBcBody {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border-color: #2b3c4e !important;
}
body.cb-dark .adm-quote { background: #242f3d !important; color: #dfe6ec !important; border-color: #2b3c4e !important; }
body.cb-dark .adm-quote-head,
body.cb-dark .adm-reason { color: #8696a7 !important; }
body.cb-dark .adm-stats { color: #f5f5f5 !important; }

/* Выбор участников */
body.cb-dark .cb-picker-box { background: #242f3d !important; border-color: #2b3c4e !important; }
body.cb-dark .cb-picker-input { background: transparent !important; color: #f5f5f5 !important; }
body.cb-dark .cb-picker-drop { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .cb-picker-row { color: #f5f5f5 !important; }
body.cb-dark .cb-picker-row:hover,
body.cb-dark .cb-picker-row.active { background: #242f3d !important; }
body.cb-dark .cb-picker-empty { color: #8696a7 !important; }
body.cb-dark .cb-chip { background: #2b3c4e !important; color: #f5f5f5 !important; }

/* Панель записи голосового и предпросмотр вложения */
body.cb-dark .cb-recbar { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .cb-recbar-time,
body.cb-dark .cb-recbar-hint { color: #8696a7 !important; }
body.cb-dark .cb-ap-card { background: #17212b !important; border-color: #1f2c39 !important; color: #f5f5f5 !important; }
body.cb-dark .cb-ap-file-preview { background: #242f3d !important; }
body.cb-dark .cb-ap-file-name { color: #f5f5f5 !important; }
body.cb-dark .cb-ap-file-meta { color: #8696a7 !important; }
body.cb-dark #cbApCaption {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border-color: #2b3c4e !important;
}

/* Файл внутри сообщения */
body.cb-dark .msg-file { background: rgba(255, 255, 255, .06) !important; }
body.cb-dark .message:not(.mine) .msg-file-name { color: #f5f5f5 !important; }
body.cb-dark .message:not(.mine) .msg-file-size { color: #8696a7 !important; }

/* Окна группы и приглашения */
body.cb-dark #groupModal .modal-card,
body.cb-dark #inviteGroupModal .modal-card { background: #17212b !important; color: #f5f5f5 !important; border-color: #1f2c39 !important; }
body.cb-dark #groupNameInput,
body.cb-dark #groupMembersInput,
body.cb-dark #inviteMembersInput {
  background: #242f3d !important;
  color: #f5f5f5 !important;
  border-color: #2b3c4e !important;
}

/* Контекстное меню сообщения и тосты */
body.cb-dark .message-context-menu { background: #17212b !important; border-color: #1f2c39 !important; }
body.cb-dark .message-context-menu button { color: #f5f5f5 !important; }
body.cb-dark .message-context-menu button:hover { background: #242f3d !important; }
body.cb-dark .mx-toast,
body.cb-dark .cb-toast { background: #242f3d !important; color: #f5f5f5 !important; }

/* ===== Согласие с политикой конфиденциальности при регистрации ===== */
.agree-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cb-muted, #5b6b7c);
  cursor: pointer;
  user-select: none;
}

.agree-row.hidden { display: none; }

.agree-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 1px 0 0;
  accent-color: var(--cb-primary, #15a66b);
  cursor: pointer;
}

.agree-row a {
  color: var(--cb-primary, #15a66b);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 166, 107, .35);
}

.agree-row a:hover { border-bottom-color: currentColor; }

/* Подсказка, если галочку не поставили */
.agree-row.agree-shake {
  animation: cbAgreeShake .4s ease;
  color: #d64545;
}

.agree-row.agree-shake input[type="checkbox"] { outline: 2px solid #d64545; outline-offset: 2px; border-radius: 4px; }

@keyframes cbAgreeShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .agree-row.agree-shake { animation: none; }
}

/* =========================================================
   CB-DARK-SETTINGS-FIX — тёмная тема в настройках.
   Было: подложки иконок и карточка профиля оставались светлыми из светлой
   темы, а сами иконки и текст — белыми. Белое по белому не читалось.
   ========================================================= */

/* ── Квадратные плашки иконок в боковом меню ── */
body.cb-dark #callibriSettingsModal .mx-row .mx-ic,
body.cb-dark #callibriSettingsModal.mobile-settings-page .mx-row .mx-ic {
  background: #242f3d !important;
  color: #d3dce6 !important;
}
body.cb-dark #callibriSettingsModal .mx-row:hover .mx-ic {
  background: #2b3c4e !important;
  color: #ffffff !important;
}
body.cb-dark #callibriSettingsModal .mx-row.active .mx-ic {
  background: rgba(46, 203, 139, 0.20) !important;
  color: #2ecb8b !important;
}
body.cb-dark #callibriSettingsModal .mx-row.active {
  background: #242f3d !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body.cb-dark #callibriSettingsModal .mx-invite,
body.cb-dark #callibriSettingsModal .mx-invite span {
  color: #2ecb8b !important;
}
body.cb-dark #callibriSettingsModal .mx-invite .mx-ic {
  background: rgba(46, 203, 139, 0.20) !important;
  color: #2ecb8b !important;
}
body.cb-dark #callibriSettingsModal .mx-stub .mx-ic {
  background: transparent !important;
  color: #2ecb8b !important;
}

/* ── Карточка профиля в боковом меню ── */
body.cb-dark #callibriSettingsModal .mx-profile-row {
  background: transparent !important;
  color: #ffffff !important;
}
body.cb-dark #callibriSettingsModal .mx-profile-row:hover {
  background: #1f2c39 !important;
}
body.cb-dark #callibriSettingsModal .mx-profile-row.active,
body.cb-dark #callibriSettingsModal.mobile-settings-page .mx-profile-row:active {
  background: #242f3d !important;
  box-shadow: none !important;
}
body.cb-dark #callibriSettingsModal .mx-ptxt b,
body.cb-dark #callibriSettingsModal.mobile-settings-page .mx-ptxt b {
  color: #ffffff !important;
}
body.cb-dark #callibriSettingsModal .mx-ptxt small,
body.cb-dark #callibriSettingsModal.mobile-settings-page .mx-ptxt small {
  color: #8696a7 !important;
}
body.cb-dark #callibriSettingsModal .mx-chev {
  border-color: #8696a7 !important;
}

/* ── Мобильная главная страница настроек ── */
body.cb-dark #mxMobileHome .mxh-scroll { background: #0e1621 !important; }
body.cb-dark #mxMobileHome .mxh-card {
  background: #17212b !important;
  border-color: #1f2c39 !important;
  box-shadow: none !important;
}
body.cb-dark #mxMobileHome .mxh-card > * + * { border-top-color: #1f2c39 !important; }
body.cb-dark #mxMobileHome .mxh-row { color: #f5f5f5 !important; }
body.cb-dark #mxMobileHome .mxh-row:active { background: #242f3d !important; }
body.cb-dark #mxMobileHome .mxh-rtext b { color: #ffffff !important; }
body.cb-dark #mxMobileHome .mxh-rtext small { color: #8696a7 !important; }
body.cb-dark #mxMobileHome .mxh-ic {
  background: #242f3d !important;
  color: #d3dce6 !important;
}
body.cb-dark #mxMobileHome .mxh-ic .mx-ic {
  background: transparent !important;
  color: inherit !important;
}
body.cb-dark #mxMobileHome .mxh-ic-blue {
  background: rgba(90, 169, 255, 0.20) !important;
  color: #5aa9ff !important;
}
body.cb-dark #mxMobileHome .mxh-ic-green {
  background: rgba(46, 203, 139, 0.20) !important;
  color: #2ecb8b !important;
}
body.cb-dark #mxMobileHome .mx-chev { border-color: #8696a7 !important; }

/* Карточка «я» сверху: была светло-голубой с белым именем */
body.cb-dark #mxMobileHome .mxh-profilecard { background: #17212b !important; }
body.cb-dark #mxMobileHome .mxh-name { color: #ffffff !important; }
body.cb-dark #mxMobileHome .mxh-cam { border-color: #17212b !important; }
body.cb-dark #mxMobileHome .mxh-sect-title { color: #2ecb8b !important; }
body.cb-dark #mxMobileHome .mxh-logout,
body.cb-dark #mxMobileHome .mxh-danger {
  background: #17212b !important;
  border-color: #1f2c39 !important;
  color: #e75454 !important;
}
body.cb-dark #mxMobileHome .mxh-logout:active,
body.cb-dark #mxMobileHome .mxh-danger:active {
  background: rgba(231, 84, 84, 0.12) !important;
}

/* =========================================================
   CB-CALL-SPEAKER — кнопка громкой связи в окне звонка
   ========================================================= */
.call-btn.speaker {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.call-btn.speaker:hover { background: rgba(255, 255, 255, 0.22); }
.call-btn.speaker.on {
  background: #fff !important;
  color: #12a065 !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.call-btn.speaker.on svg { color: #12a065 !important; }
body.cb-dark .call-btn.speaker { background: rgba(255, 255, 255, 0.12); color: #fff; }
body.cb-dark .call-btn.speaker.on { background: #2ecb8b !important; color: #06231a !important; }
body.cb-dark .call-btn.speaker.on svg { color: #06231a !important; }

/* =========================================================
   CB-DARK-PROFILE-FIX — карточка профиля в тёмной теме.
   Выше в файле есть светлые правила с !important без префикса body.cb-dark
   (.profile-info-row, .profile-block-btn и прочие) — они делали поля и кнопки
   белыми поверх тёмной карточки, а текст в них был почти не виден.
   ========================================================= */

/* Имя и статус */
body.cb-dark .profile-modal-shell .profile-name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  font-weight: 700 !important;
}
body.cb-dark .profile-modal-shell .profile-status {
  background: transparent !important;
  border: 1px solid #2b3c4e !important;
  color: #c7d0d9 !important;
}
body.cb-dark .profile-modal-shell .profile-status::before {
  background: #8696a7 !important;
}
body.cb-dark .profile-modal-shell .profile-status.online {
  background: transparent !important;
  border-color: rgba(46, 203, 139, 0.38) !important;
  color: #2ecb8b !important;
}
body.cb-dark .profile-modal-shell .profile-status.online::before {
  background: #2ecb8b !important;
  box-shadow: 0 0 8px rgba(46, 203, 139, 0.7) !important;
}

/* Кольцо вокруг аватарки на тёмном фоне */
body.cb-dark .profile-modal-shell .profile-big-avatar {
  box-shadow: 0 0 0 4px #17212b, 0 0 0 5px rgba(46, 203, 139, 0.18), 0 14px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Поле "Имя пользователя" — минималистичная строка с разделителями */
body.cb-dark .profile-modal-shell .profile-info-row {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #2b3c4e !important;
  border-bottom: 1px solid #2b3c4e !important;
  border-radius: 0 !important;
}
body.cb-dark .profile-modal-shell .profile-info-row:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}
body.cb-dark .profile-modal-shell .profile-info-value {
  color: #ffffff !important;
}
body.cb-dark .profile-modal-shell .profile-info-label {
  color: #8696a7 !important;
  opacity: 1 !important;
}

/* Кнопка "Заблокировать" — строгий контур вместо заливки */
body.cb-dark .profile-modal-shell .profile-block-btn {
  background: transparent !important;
  border: 1px solid #2b3c4e !important;
  color: #e75454 !important;
}
body.cb-dark .profile-modal-shell .profile-block-btn:hover {
  background: rgba(231, 84, 84, 0.12) !important;
  border-color: rgba(231, 84, 84, 0.42) !important;
}
body.cb-dark .profile-modal-shell .profile-block-btn.is-blocked {
  color: #2ecb8b !important;
}
body.cb-dark .profile-modal-shell .profile-block-btn.is-blocked:hover {
  background: rgba(46, 203, 139, 0.12) !important;
  border-color: rgba(46, 203, 139, 0.42) !important;
}

/* "Пожаловаться" — с разделителем сверху */
body.cb-dark .profile-modal-shell .profile-report-btn {
  background: transparent !important;
  border-top: 1px solid #2b3c4e !important;
  color: #8696a7 !important;
}
body.cb-dark .profile-modal-shell .profile-report-btn:hover {
  color: #e75454 !important;
}

/* Крестик закрытия на тёмном баннере */
body.cb-dark .profile-modal-shell .profile-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
body.cb-dark .profile-modal-shell .profile-close:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* =========================================================
   CB-DARK-RAIL-FIX — нижняя панель вкладок в тёмной теме.
   Светлые правила задают #appRail{background:#ffffff!important}, а тёмные
   были написаны для .rail / .rail-nav / nav — то есть ни одно из них не
   попадало в реальный элемент #appRail, и панель оставалась белой.
   ========================================================= */

body.cb-dark #appRail {
  background: #17212b !important;
  border-color: #1f2c39 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.cb-dark #appRail .rail-btn {
  background: transparent !important;
  color: #8696a7 !important;
}
body.cb-dark #appRail .rail-btn small,
body.cb-dark #appRail .rail-btn span,
body.cb-dark #appRail .rail-btn .rail-ico svg {
  color: inherit !important;
}
body.cb-dark #appRail .rail-btn:hover {
  background: rgba(46, 203, 139, 0.12) !important;
  color: #2ecb8b !important;
}
body.cb-dark #appRail .rail-btn.active {
  background: #15a66b !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(21, 166, 107, 0.35) !important;
}
body.cb-dark #appRail .rail-btn:not(.active):active {
  background: rgba(46, 203, 139, 0.16) !important;
}
body.cb-dark #appRail .rail-badge {
  background: #e75454 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(231, 84, 84, 0.45) !important;
}

@media (max-width: 768px) {
  /* На телефоне это именно нижняя панель — граница сверху, а не справа */
  body.cb-dark #appRail {
    background: #17212b !important;
    border: none !important;
    border-top: 1px solid #1f2c39 !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35) !important;
  }
  body.cb-dark #appRail .rail-btn { color: #8696a7 !important; }
  body.cb-dark #appRail .rail-btn.active { background: #15a66b !important; color: #ffffff !important; }
}

/* Фон под панелью и сама оболочка приложения — чтобы не просвечивала белая полоса */
body.cb-dark { background: #0e1621 !important; }


/* =========================================================================
   НАСТРОЙКИ ОТКРЫВАЮТСЯ НА МЕСТЕ СПИСКА ЧАТОВ (в едином стиле Desktop).
   Класс .sidebar-settings-page ставится JS-ом только на широких экранах;
   точные left/top/width/height выставляются инлайно через positionSidebarSettingsDock().
   ========================================================================= */
#callibriSettingsModal.sidebar-settings-page {
  position: fixed;
  inset: auto;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
  animation: none;
}
#callibriSettingsModal.sidebar-settings-page .mx-shell {
  width: 100%;
  height: 100%;
  flex-direction: column;
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-card, 0 20px 60px rgba(0, 0, 0, 0.4));
}
#callibriSettingsModal.sidebar-settings-page .mx-nav { display: none !important; }
#callibriSettingsModal.sidebar-settings-page .mx-body { display: none; height: 100%; }
#callibriSettingsModal.sidebar-settings-page.mx-sub .mx-body { display: flex; height: 100%; }
#callibriSettingsModal.sidebar-settings-page .mx-panes { height: 100%; }
#callibriSettingsModal.sidebar-settings-page .mx-back { display: block; }
#callibriSettingsModal.sidebar-settings-page .mx-close { display: none; }
#callibriSettingsModal.sidebar-settings-page #mxMobileHome {
  display: block;
  height: 100%;
  overflow-y: auto;
}
#callibriSettingsModal.sidebar-settings-page.mx-sub #mxMobileHome { display: none; }
#callibriSettingsModal.sidebar-settings-page #mxMobileHome .mxh-scroll {
  min-height: 100%;
  padding: 18px 14px 26px;
  background: transparent;
}
body.cb-dark #callibriSettingsModal.sidebar-settings-page .mx-shell {
  box-shadow: var(--shadow-card, 0 20px 60px rgba(0, 0, 0, 0.55));
}

/* ===== НАСТРОЙКИ: ГРУППЫ-КАРТОЧКИ И ЦВЕТНЫЕ ПЛИТКИ (v=callibri-66) ===== */

/* Группа настроек — белый прямоугольник со скруглени��м */
#callibriSettingsModal .mxh-card {
  background: var(--cb-surface, #ffffff) !important;
  border: 1px solid var(--cb-border, #e6e9ec) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(16, 40, 30, 0.05) !important;
  margin: 0 0 18px !important;
}

/* Заголовок ��руппы */
#callibriSettingsModal .mxh-sect-title {
  margin: 0 4px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--cb-primary, #15a66b) !important;
}

/* Строка списка */
#callibriSettingsModal .mxh-card .mxh-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 9px 16px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  color: var(--cb-ink, #1e2a37) !important;
  font-family: inherit !important;
  transition: background-color 0.15s ease !important;
}

#callibriSettingsModal .mxh-card .mxh-row:hover {
  background: var(--cb-chat, #f4f7f6) !important;
}

#callibriSettingsModal .mxh-card .mxh-row:active {
  background: var(--cb-primary-050, #e9f7f0) !important;
}

/* Разделительная полоска — начинается после иконки, у последней строки её нет */
#callibriSettingsModal .mxh-card .mxh-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 64px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cb-border, #e6e9ec);
  pointer-events: none;
}

/* Цветная квадратная плитка с иконкой */
#callibriSettingsModal .mxh-card .mxh-ic {
  width: 32px !important;
  height: 32px !important;
  flex: none !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 16px 0 0 !important;
  background: var(--cb-muted, #8a94a2) !important;
  color: #ffffff !important;
}

#callibriSettingsModal .mxh-card .mxh-ic svg,
#callibriSettingsModal .mxh-card .mxh-ic .mx-ic {
  width: 20px !important;
  height: 20px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Палитра плиток Callibri */
#callibriSettingsModal .mxh-card .mxh-ic-blue { background: var(--cb-blue, #2e6be6) !important; }
#callibriSettingsModal .mxh-card .mxh-ic-green { background: var(--cb-primary, #15a66b) !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="profile"] .mxh-ic { background: var(--cb-blue, #2e6be6) !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="admin"] .mxh-ic { background: #ef4444 !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="security"] .mxh-ic { background: var(--cb-primary, #15a66b) !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="devices"] .mxh-ic { background: var(--cb-blue, #2e6be6) !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="appearance"] .mxh-ic { background: #7c5cf0 !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="data"] .mxh-ic { background: #f2840c !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="language"] .mxh-ic { background: #0ea5a5 !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="help"] .mxh-ic { background: var(--cb-blue, #2e6be6) !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="folders"] .mxh-ic { background: #0891b2 !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="hotkeys"] .mxh-ic { background: #64748b !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="business"] .mxh-ic { background: #d99400 !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-pane="about"] .mxh-ic { background: #64748b !important; }
#callibriSettingsModal .mxh-card .mxh-row[data-action="invite"] .mxh-ic { background: var(--cb-primary, #15a66b) !important; }

/* Текст строки */
#callibriSettingsModal .mxh-card .mxh-rtext {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#callibriSettingsModal .mxh-card .mxh-rtext b {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cb-ink, #1e2a37) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#callibriSettingsModal .mxh-card .mxh-rtext small {
  font-size: 13px !important;
  color: var(--cb-muted, #8a94a2) !important;
}

/* Значение справа */
#callibriSettingsModal .mxh-card .mxh-value {
  margin-left: auto !important;
  font-size: 15px !important;
  color: var(--cb-muted, #8a94a2) !important;
  flex: none !important;
}

/* Шеврон */
#callibriSettingsModal .mxh-card .mx-chev {
  margin-left: auto !important;
  width: 7px !important;
  height: 7px !important;
  flex: none !important;
  border-right: 1.7px solid var(--cb-muted, #8a94a2) !important;
  border-top: 1.7px solid var(--cb-muted, #8a94a2) !important;
  transform: rotate(45deg) !important;
}

/* Строка-переключатель */
#callibriSettingsModal .mxh-card .mxh-toggle {
  cursor: pointer !important;
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ===== */
#callibriSettingsModal input.mx-switch.mx-switch {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: 34px !important;
  height: 20px !important;
  flex: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #b9bec6 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out !important;
}

#callibriSettingsModal input.mx-switch.mx-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
  transition: transform 0.2s ease-in-out !important;
}

#callibriSettingsModal input.mx-switch.mx-switch:checked {
  background: var(--cb-primary, #15a66b) !important;
}

#callibriSettingsModal input.mx-switch.mx-switch:checked::after {
  transform: translateX(14px) !important;
}

/* ===== ТЁМНАЯ ТЕМА ===== */
body.cb-dark #callibriSettingsModal .mxh-card {
  background: #17212b !important;
  border-color: #1f2c39 !important;
  box-shadow: none !important;
}

body.cb-dark #callibriSettingsModal .mxh-card .mxh-row:hover {
  background: #1c2732 !important;
}

body.cb-dark #callibriSettingsModal .mxh-card .mxh-row:active {
  background: #242f3d !important;
}

body.cb-dark #callibriSettingsModal .mxh-card .mxh-row:not(:last-child)::after {
  background: #1f2c39;
}

body.cb-dark #callibriSettingsModal .mxh-card .mxh-rtext b {
  color: #eef2f5 !important;
}

body.cb-dark #callibriSettingsModal .mxh-card .mxh-rtext small,
body.cb-dark #callibriSettingsModal .mxh-card .mxh-value {
  color: #7f8b98 !important;
}

body.cb-dark #callibriSettingsModal input.mx-switch.mx-switch {
  background: #3a4650 !important;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 760px) {
  #callibriSettingsModal .mxh-card .mxh-row {
    padding: 11px 16px !important;
  }
  #callibriSettingsModal .mxh-card .mxh-ic {
    width: 30px !important;
    height: 30px !important;
    margin-right: 14px !important;
  }
  #callibriSettingsModal .mxh-card .mxh-row:not(:last-child)::after {
    left: 60px;
  }
  #callibriSettingsModal input.mx-switch.mx-switch {
    width: 38px !important;
    height: 22px !important;
  }
  #callibriSettingsModal input.mx-switch.mx-switch::after {
    width: 18px !important;
    height: 18px !important;
  }
  #callibriSettingsModal input.mx-switch.mx-switch:checked::after {
    transform: translateX(16px) !important;
  }
}

/* ===== БОКОВОЕ МЕНЮ САЙДБАРА (v=callibri-67) ===== */

/* Кнопка-бургер в шапке списка чатов */
#cbMenuBtn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cb-ink-2, #55606e);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#cbMenuBtn:hover,
#cbMenuBtn.active {
  background: rgba(0, 0, 0, .06);
  color: var(--cb-ink, #1e2a37);
}
#cbMenuBtn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  pointer-events: none;
}

/* Подложка для закрытия по клику мимо */
.cb-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: transparent;
  opacity: 0;
  transition: opacity .18s ease;
}
.cb-menu-overlay.open { opacity: 1; }

/* Контейнер меню */
.cb-menu {
  position: absolute;
  top: 96px;
  left: 12px;
  z-index: 1401;
  width: 260px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 8px 0;
  border-radius: 12px;
  background: var(--cb-surface, #ffffff);
  color: var(--cb-ink, #1e2a37);
  box-shadow: 0 8px 24px rgba(16, 40, 30, .18);
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  transform-origin: top left;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.cb-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cb-menu-group { display: flex; flex-direction: column; }

/* Разделительная полоса между блоками */
.cb-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--cb-border, #e6e9ec);
}

/* Пункт меню */
.cb-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cb-menu-item:hover { background: rgba(0, 0, 0, .05); }

/* Контейнер иконки слева */
.cb-menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}
.cb-menu-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--cb-muted, #8a94a2);
}
.cb-menu-item:hover .cb-menu-icon svg { fill: var(--cb-ink-2, #55606e); }

/* Аватарка с фирменной обводкой Callibri */
.cb-menu-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cb-primary, #15a66b);
  flex-shrink: 0;
}
.cb-menu-avatar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-primary, #15a66b);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* Текст пункта */
.cb-menu-text {
  flex-grow: 1;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Счётчик (например, у Архива) */
.cb-menu-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--cb-primary, #15a66b);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Стрелка у пункта «Ещё» */
.cb-menu-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.cb-menu-arrow svg {
  width: 20px;
  height: 20px;
  fill: var(--cb-muted, #8a94a2);
}
.cb-menu-item.expanded .cb-menu-arrow { transform: rotate(90deg); }

/* Раскрывающийся подсписок «Ещё» */
.cb-menu-sub {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  visibility: hidden;
  transition: grid-template-rows .22s ease, visibility 0s linear .22s;
}
/* Все пункты лежат в одной обёртке: иначе grid схлопывает только первую строку */
.cb-menu-sub-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cb-menu.sub-open .cb-menu-sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .22s ease, visibility 0s linear 0s;
}
.cb-menu-sub .cb-menu-item { padding-left: 24px; }
.cb-menu-sub .cb-menu-text { font-size: 14px; font-weight: 400; }

/* Опасное действие — выход */
.cb-menu-danger .cb-menu-text { color: var(--danger, #ef4444); }
.cb-menu-danger .cb-menu-icon svg { fill: var(--danger, #ef4444); }
.cb-menu-danger:hover { background: rgba(239, 68, 68, .08); }

/* Тёмная тема */
body.cb-dark .cb-menu {
  background: #242f3d;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
body.cb-dark .cb-menu-sep { background: rgba(0, 0, 0, .35); }
body.cb-dark .cb-menu-item:hover { background: rgba(255, 255, 255, .08); }
body.cb-dark .cb-menu-icon svg { fill: #aaaaaa; }
body.cb-dark .cb-menu-item:hover .cb-menu-icon svg { fill: #ffffff; }
body.cb-dark .cb-menu-arrow svg { fill: #777777; }
body.cb-dark #cbMenuBtn { color: #8696a7; }
body.cb-dark #cbMenuBtn:hover,
body.cb-dark #cbMenuBtn.active {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

/* Мобильные: меню шире и с затемнением фона */
@media (max-width: 768px) {
  .cb-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 78vh;
    padding: 8px 0 max(10px, env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    transform-origin: bottom center;
    transform: translateY(100%);
  }
  .cb-menu.open { transform: translateY(0); }
  .cb-menu-overlay { background: rgba(0, 0, 0, .4); }
  .cb-menu-item { padding: 13px 20px; }
  .cb-menu-sub .cb-menu-item { padding-left: 28px; }
}

/* ============================================================
   НОВЫЙ ИНТЕРФЕЙС CALLIBRI — ТЁМНАЯ ТЕМА (v=callibri-69)
   Оригинальная реализация. Фирменный зелёный акцент Callibri.

   1. Токены
   2. Каркас и сайдбар
   3. Шапка сайдбара: бургер + поиск
   4. Строка архива
   5. Список чатов
   6. Плавающая кнопка
   7. Шапка чата и полотно
   8. Пузыри сообщений
   9. Поле ввода
   10. Настройки
   11. Скроллбары
   12. Мобильная версия
   ============================================================ */

/* ---------- 1. Токены ---------- */
body.cb-dark {
  --d-sidebar: #17212b;
  --d-panel: #17212b;
  --d-canvas: #0e1621;
  --d-hover: #202b36;
  --d-active: #2b5278;
  --d-border: #101921;
  --d-text: #ffffff;
  --d-muted: #8b98a5;
  --d-field: #242f3d;
  --d-bubble-in: #182533;
  --d-bubble-out: #15a66b;
  --d-accent: var(--cb-primary, #15a66b);
}

/* ---------- 2. Каркас и сайдбар ---------- */
body.cb-dark .sidebar {
  background: var(--d-sidebar) !important;
  border-right: 1px solid var(--d-border) !important;
  color: var(--d-text) !important;
  padding: 0 !important;
}
body.cb-dark .sidebar .profile { display: none !important; }

/* ---------- 3. Шапка сайдбара: бургер + поиск ---------- */
body.cb-dark .sidebar-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
}
body.cb-dark .sidebar-heading,
body.cb-dark #sidebarTitle { display: none !important; }
body.cb-dark #newChatBtn { display: none !important; }

body.cb-dark #cbMenuBtn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  color: var(--d-muted) !important;
}
body.cb-dark #cbMenuBtn:hover,
body.cb-dark #cbMenuBtn.active {
  background: var(--d-hover) !important;
  color: var(--d-text) !important;
}

/* Поиск-пилюля с иконкой лупы */
body.cb-dark #search {
  flex: 1 1 auto !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 16px 0 42px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background-color: var(--d-field) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b98a5'><path d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 20px 20px !important;
  color: var(--d-text) !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
body.cb-dark #search::placeholder { color: var(--d-muted) !important; }
body.cb-dark #search:focus {
  border-color: var(--d-accent) !important;
  background-color: var(--d-canvas) !important;
  box-shadow: none !important;
}

/* ---------- 4. Строка архива ---------- */
body.cb-dark .archive-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 6px !important;
  padding: 9px 10px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--d-text) !important;
  transition: background-color .15s ease !important;
}
body.cb-dark .archive-btn:hover { background: var(--d-hover) !important; }
body.cb-dark .archive-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--d-accent) !important;
  color: #fff !important;
  font-size: 22px !important;
}
body.cb-dark .archive-info b {
  color: var(--d-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
body.cb-dark .archive-info span {
  color: var(--d-muted) !important;
  font-size: 15px !important;
}
body.cb-dark .archive-badge {
  background: var(--d-accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
}

/* ---------- 5. Список чатов ---------- */
body.cb-dark #users {
  padding: 0 6px 90px !important;
  background: transparent !important;
}

body.cb-dark .user,
body.cb-dark .recent-chat-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--d-text) !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}
body.cb-dark .user:hover,
body.cb-dark .recent-chat-item:hover:not(.active) {
  background: var(--d-hover) !important;
  box-shadow: none !important;
}
body.cb-dark .user.active,
body.cb-dark .recent-chat-item.active {
  background: var(--d-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}
body.cb-dark .user.active *,
body.cb-dark .recent-chat-item.active * { color: #fff !important; }
body.cb-dark .recent-chat-item.active .unread-badge {
  background: #fff !important;
  color: var(--d-accent) !important;
}

/* Аватар 54px, как в десктопной вёрстке */
body.cb-dark .user .avatar,
body.cb-dark .recent-chat-item .avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

body.cb-dark .user-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
body.cb-dark .user-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body.cb-dark .user-info b,
body.cb-dark .user-top-row b {
  color: var(--d-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.cb-dark .user-info > span,
body.cb-dark .user-info span {
  color: var(--d-muted) !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.cb-dark .chat-list-time {
  flex-shrink: 0 !important;
  color: var(--d-muted) !important;
  font-size: 12px !important;
}
body.cb-dark .unread-badge {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 11px !important;
  background: var(--d-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  text-align: center !important;
  box-shadow: none !important;
}

/* ---------- 6. Плавающая кнопка ---------- */
#cbFab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--cb-primary, #15a66b);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: transform .18s ease, box-shadow .18s ease, background-color .15s ease;
}
#cbFab:hover {
  background: var(--cb-primary-hover, #0f8f5b);
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
}
#cbFab:active { transform: scale(.96); }
#cbFab svg { width: 24px; height: 24px; fill: currentColor; pointer-events: none; }
body.chat-open #cbFab { display: none; }

/* Меню плавающей кнопки */
#cbFabMenu {
  position: absolute;
  right: 18px;
  bottom: 82px;
  z-index: 61;
  min-width: 200px;
  padding: 6px 0;
  border-radius: 12px;
  background: var(--cb-surface, #fff);
  box-shadow: 0 8px 24px rgba(16, 40, 30, .2);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
#cbFabMenu.open { opacity: 1; transform: none; pointer-events: auto; }
#cbFabMenu button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--cb-ink, #1e2a37);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}
#cbFabMenu button:hover { background: rgba(0, 0, 0, .05); }
#cbFabMenu svg { width: 22px; height: 22px; fill: var(--cb-muted, #8a94a2); flex-shrink: 0; }
body.cb-dark #cbFabMenu { background: #242f3d; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
body.cb-dark #cbFabMenu button { color: #fff; }
body.cb-dark #cbFabMenu button:hover { background: rgba(255, 255, 255, .08); }
body.cb-dark #cbFabMenu svg { fill: #aaa; }

/* ---------- 7. Шапка чата и полотно ---------- */
body.cb-dark .chat-header {
  min-height: 56px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--d-border) !important;
  background: var(--d-panel) !important;
  box-shadow: none !important;
}
body.cb-dark #chatAvatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  font-size: 17px !important;
}
body.cb-dark #chatName {
  color: var(--d-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
body.cb-dark #chatStatus {
  color: var(--d-muted) !important;
  font-size: 14px !important;
}
body.cb-dark .chat-call-btn,
body.cb-dark .chat-search-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--d-muted) !important;
  transition: background-color .15s ease, color .15s ease !important;
}
body.cb-dark .chat-call-btn:hover,
body.cb-dark .chat-search-btn:hover {
  background: var(--d-hover) !important;
  color: var(--d-text) !important;
}

body.cb-dark #messages { padding: 12px 6% 16px !important; }

/* ---------- 8. Пузыри сообщений ---------- */
body.cb-dark .message {
  max-width: 68% !important;
  padding: 7px 12px 8px !important;
  border: none !important;
  border-radius: 12px 12px 12px 6px !important;
  background: var(--d-bubble-in) !important;
  color: var(--d-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}
body.cb-dark .message.mine {
  border-radius: 12px 12px 6px 12px !important;
  background: var(--d-bubble-out) !important;
  color: #fff !important;
}
body.cb-dark .message-text { font-size: 15px !important; line-height: 1.35 !important; }
body.cb-dark .message-name {
  color: var(--d-accent) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
body.cb-dark .message.mine .message-name { color: rgba(255, 255, 255, .9) !important; }
body.cb-dark .message-time { color: var(--d-muted) !important; font-size: 12px !important; }
body.cb-dark .message.mine .message-time,
body.cb-dark .message.mine .message-status { color: rgba(255, 255, 255, .75) !important; }

/* ---------- 9. Поле ввода ---------- */
body.cb-dark .chat-input {
  padding: 8px 6% 12px !important;
  border-top: none !important;
  background: transparent !important;
}
body.cb-dark #messageInput {
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 12px !important;
  background: var(--d-panel) !important;
  color: var(--d-text) !important;
  font-size: 15px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25) !important;
}
body.cb-dark #messageInput::placeholder { color: var(--d-muted) !important; }
body.cb-dark #sendBtn {
  background: var(--d-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* ---------- 10. Настройки ---------- */
body.cb-dark #callibriSettingsModal .mxh-card,
body.cb-dark #mxMobileHome .mxh-card {
  background: var(--d-panel) !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.cb-dark #callibriSettingsModal .mxh-row:hover { background: var(--d-hover) !important; }
body.cb-dark #callibriSettingsModal .mxh-rtext b { color: var(--d-text) !important; }
body.cb-dark #callibriSettingsModal .mxh-rtext small { color: var(--d-muted) !important; }
body.cb-dark .mxh-sect-title {
  color: var(--d-accent) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
body.cb-dark .mxh-name { color: var(--d-text) !important; font-size: 21px !important; }
body.cb-dark .mxh-status { color: var(--d-muted) !important; }

/* ---------- 11. С��роллбары ---------- */
body.cb-dark #users::-webkit-scrollbar,
body.cb-dark #messages::-webkit-scrollbar { width: 6px; }
body.cb-dark #users::-webkit-scrollbar-thumb,
body.cb-dark #messages::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
}
body.cb-dark #users::-webkit-scrollbar-thumb:hover,
body.cb-dark #messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }
body.cb-dark #users::-webkit-scrollbar-track,
body.cb-dark #messages::-webkit-scrollbar-track { background: transparent; }

/* ---------- 12. Мобильная версия ---------- */
@media (max-width: 768px) {
  #cbFab {
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
  }
  #cbFabMenu {
    position: fixed;
    right: 16px;
    bottom: calc(136px + env(safe-area-inset-bottom));
  }

  body.cb-dark .sidebar-top { padding: 8px !important; }
  body.cb-dark #search { height: 40px !important; font-size: 16px !important; }

  /* Строки чатов чуть плотнее, аватар меньше */
  body.cb-dark .user,
  body.cb-dark .recent-chat-item {
    min-height: 68px !important;
    padding: 8px !important;
    border-radius: 0 !important;
  }
  body.cb-dark .user .avatar,
  body.cb-dark .recent-chat-item .avatar {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  body.cb-dark .user-info b,
  body.cb-dark .user-top-row b { font-size: 16px !important; }
  body.cb-dark .user-info > span { font-size: 14px !important; }

  /* Полотно и пузыри на узком экране */
  body.cb-dark #messages { padding: 10px 10px 14px !important; }
  body.cb-dark .message { max-width: 82% !important; }
  body.cb-dark .chat-input { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)) !important; }
  body.cb-dark .chat-header { min-height: 52px !important; padding: 6px 10px !important; }
  body.cb-dark #chatAvatar { width: 38px !important; height: 38px !important; min-width: 38px !important; }

  /* Крупнее цели нажатия */
  body.cb-dark #cbMenuBtn,
  body.cb-dark .chat-call-btn,
  body.cb-dark .chat-search-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
}

/* Очень узкие экраны */
@media (max-width: 360px) {
  body.cb-dark .user .avatar,
  body.cb-dark .recent-chat-item .avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
  body.cb-dark .message { max-width: 88% !important; }
}

/* Кнопка создания заменена плавающей кнопкой с карандашом (v=callibri-70) */
#newChatBtn { display: none !important; }

/* ============================================================
   СТИЛЬ ЛЕНТЫ СООБЩЕНИЙ (v=callibri-71)
   Пузыри с хвостиками, время внутри пузыря, цитаты, медиа.
   Цвета — фирменные Callibri (--cb-primary).
   ============================================================ */

/* ---------- Полотно переписки ---------- */
#messages {
  padding: 12px 0 18px !important;
  scroll-behavior: smooth;
}

/* По центру стоит только разделитель даты */
#messages > .date-divider {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Разделитель даты: плавающая пилюля ---------- */
.date-divider {
  display: flex !important;
  justify-content: center !important;
  margin: 14px auto !important;
  border: 0 !important;
  background: none !important;
}

.date-divider span {
  display: inline-block;
  padding: 4px 12px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, .42) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* ---------- Пузырь ---------- */
.message {
  position: relative !important;
  max-width: 68% !important;
  min-width: 88px;
  margin: 2px 16px 2px 18px !important;
  padding: 6px 10px 7px !important;
  border-radius: 12px 12px 12px 4px !important;
  background: var(--cb-bubble-in, #eef1f4) !important;
  color: var(--cb-ink, #1e2a37) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  box-shadow: 0 1px 1px rgba(16, 40, 30, .10) !important;
  transition: background .15s ease;
}

.message.mine {
  margin-right: 18px !important;
  margin-left: 16px !important;
  border-radius: 12px 12px 4px 12px !important;
  background: var(--cb-primary, #15a66b) !important;
  color: #fff !important;
}

/* Хвостик у нижнего края, как в оригинале */
.message::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 14px;
  background: inherit;
  pointer-events: none;
}

.message:not(.mine)::after {
  left: -7px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-left-radius: 10px;
}

.message.mine::after {
  right: -7px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  border-bottom-right-radius: 10px;
}

/* У медиа без подписи хвостик лишний */
.message--mediaonly::after,
.message--videonote::after {
  display: none;
}

/* ---------- Имя отправителя в группах ---------- */
.message-name {
  margin: 0 0 2px !important;
  color: var(--cb-primary, #15a66b) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.message.mine .message-name {
  color: rgba(255, 255, 255, .92) !important;
}

/* ---------- Цитата (ответ на сообщение) ---------- */
.message-reply-preview {
  position: relative;
  margin: 0 0 4px !important;
  padding: 3px 8px 3px 9px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: rgba(21, 166, 107, .10) !important;
  cursor: pointer;
  overflow: hidden;
}

.message-reply-preview::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cb-primary, #15a66b);
}

.message.mine .message-reply-preview {
  background: rgba(255, 255, 255, .16) !important;
}

.message.mine .message-reply-preview::before {
  background: #fff;
}

.message-reply-author {
  color: var(--cb-primary, #15a66b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.message.mine .message-reply-author {
  color: #fff !important;
}

.message-reply-text {
  display: block;
  max-width: 100%;
  color: var(--cb-ink-2, #55606e) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message.mine .message-reply-text {
  color: rgba(255, 255, 255, .88) !important;
}

/* ---------- Текст и время внутри пузыря ---------- */
.message-text {
  padding-right: 52px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: pre-wrap;
  word-break: break-word;
}

.message.mine .message-text {
  padding-right: 68px !important;
}

.message-meta {
  position: absolute !important;
  right: 10px !important;
  bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  line-height: 1 !important;
  pointer-events: none;
}

.message-time {
  color: var(--cb-muted, #8a94a2) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.message.mine .message-time {
  color: rgba(255, 255, 255, .78) !important;
}

.message-edited {
  color: var(--cb-muted, #8a94a2) !important;
  font-size: 11.5px !important;
  font-style: normal !important;
}

.message.mine .message-edited {
  color: rgba(255, 255, 255, .70) !important;
}

/* Галочки прочтения */





/* ---------- Медиа ---------- */
.message--mediaonly,
.message--mediacap {
  padding: 3px !important;
  min-width: 0;
}

.message--mediaonly {
  background: transparent !important;
  box-shadow: none !important;
}

.message-media {
  border-radius: 10px !important;
  overflow: hidden !important;
}

.message-media img,
.message-media video {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 10px !important;
}

.message--mediacap .message-text {
  padding: 5px 7px 6px !important;
}

/* На фото без подписи время ложится плашкой поверх снимка */
.message--mediaonly .message-meta {
  right: 9px !important;
  bottom: 9px !important;
  padding: 3px 7px !important;
  border-radius: 11px !important;
  background: rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.message--mediaonly .message-time,
.message--mediaonly .message-status {
  color: #fff !important;
}

/* ---------- Реакции ---------- */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px !important;
}

.msg-reactions .msg-reaction,
.msg-reactions button {
  padding: 2px 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(21, 166, 107, .12) !important;
  color: var(--cb-primary, #15a66b) !important;
  font-size: 13px !important;
  cursor: pointer;
}

.message.mine .msg-reactions .msg-reaction,
.message.mine .msg-reactions button {
  background: rgba(255, 255, 255, .20) !important;
  color: #fff !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */
body.cb-dark .message {
  background: #182533 !important;
  color: #fff !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
}

body.cb-dark .message.mine {
  background: var(--cb-primary, #15a66b) !important;
  color: #fff !important;
}

body.cb-dark .message--mediaonly {
  background: transparent !important;
}

body.cb-dark .message-time {
  color: #8b98a5 !important;
}

body.cb-dark .message.mine .message-time {
  color: rgba(255, 255, 255, .82) !important;
}

body.cb-dark .message-reply-preview {
  background: rgba(255, 255, 255, .08) !important;
}

body.cb-dark .message-reply-text {
  color: #a9b6c3 !important;
}

body.cb-dark .date-divider span {
  background: rgba(0, 0, 0, .48) !important;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
  .message {
    max-width: 82% !important;
    margin-left: 12px !important;
    margin-right: 10px !important;
    font-size: 15.5px !important;
  }

  .message.mine {
    margin-right: 12px !important;
    margin-left: 10px !important;
  }

  .message-media img,
  .message-media video {
    max-width: 100%;
  }

  #messages {
    padding: 8px 0 14px !important;
  }
}

@media (max-width: 360px) {
  .message {
    max-width: 88% !important;
    margin-left: 8px !important;
  }

  .message.mine {
    margin-right: 8px !important;
  }

  .message-text {
    padding-right: 50px !important;
  }
}

/* Своя реакция — залитая */
.msg-reactions .msg-reaction.mine-reaction {
  background: var(--cb-primary, #15a66b) !important;
  color: #fff !important;
}

.message.mine .msg-reactions .msg-reaction.mine-reaction {
  background: #fff !important;
  color: var(--cb-primary, #15a66b) !important;
}

.msg-reactions .msg-reaction b {
  font-weight: 600;
}

/* ============================================================
   Выравнивание пузырей: входящие слева, свои справа (v=callibri-72)
   ============================================================ */
#messages > .message {
  width: fit-content !important;
  margin-left: 18px !important;
  margin-right: auto !important;
}

#messages > .message.mine {
  margin-left: auto !important;
  margin-right: 18px !important;
}

@media (max-width: 768px) {
  #messages > .message {
    margin-left: 12px !important;
    margin-right: auto !important;
  }

  #messages > .message.mine {
    margin-left: auto !important;
    margin-right: 12px !important;
  }
}

@media (max-width: 360px) {
  #messages > .message {
    margin-left: 8px !important;
  }

  #messages > .message.mine {
    margin-right: 8px !important;
  }
}

/* ============================================================
   ЭКРАН НАСТРОЕК — чистый списочный вид (v=callibri-73)
   Светлый фон, белые карточки, однотонные контурные иконки.
   ============================================================ */

/* ---------- Полотно ---------- */
#mxMobileHome {
  background: #f0f0f0 !important;
}

#mxMobileHome .mxh-scroll {
  padding: 0 0 24px !important;
}

/* Заголовки секций в этом макете не нужны — группы разделены карточками */
#mxMobileHome .mxh-sect-title {
  display: none !important;
}

/* ---------- Карточка профиля ---------- */
#mxMobileHome .mxh-profilecard {
  margin: 0 0 10px !important;
  padding: 26px 16px 24px !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
}

#mxMobileHome .mxh-ava {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 14px !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  object-fit: cover;
  overflow: hidden;
  cursor: pointer;
}

#mxMobileHome .mxh-ava img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#mxMobileHome .mxh-name {
  margin: 0 0 3px !important;
  color: #000 !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

#mxMobileHome .mxh-status {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 5px;
  color: #8c8c8c !important;
  font-size: 14px !important;
}

#mxMobileHome .mxh-dot {
  display: none !important;
}

#mxMobileHome .mxh-edit {
  margin-top: 12px !important;
  padding: 6px 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--cb-primary-050, #e9f7f0) !important;
  color: var(--cb-primary, #15a66b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

/* ---------- Карточки-группы ---------- */
#mxMobileHome .mxh-card {
  margin: 0 8px 10px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* ---------- Строка ---------- */
#mxMobileHome .mxh-row {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer;
  transition: background .12s ease;
}

#mxMobileHome .mxh-row:hover {
  background: #f4f4f5 !important;
}

#mxMobileHome .mxh-row:active {
  background: #ebebec !important;
}

/* Разделитель с отступом под текст, кроме последней строки */
#mxMobileHome .mxh-row::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #ececec;
}

#mxMobileHome .mxh-row:last-child::after {
  display: none;
}

/* ---------- Иконка: без плитки, тонкий контур ---------- */
#mxMobileHome .mxh-ic,
#mxMobileHome .mxh-ic-blue,
#mxMobileHome .mxh-ic-green {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px !important;
  height: 24px !important;
  margin-right: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #707579 !important;
  box-shadow: none !important;
}

#mxMobileHome .mxh-ic svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Некоторые иконки в коде заливные — делаем их того же цвета */
#mxMobileHome .mxh-ic svg[fill]:not([fill="none"]) {
  fill: currentColor !important;
  stroke: none !important;
}

/* ---------- Текст строки ---------- */
#mxMobileHome .mxh-rtext {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 1px;
}

#mxMobileHome .mxh-rtext b {
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mxMobileHome .mxh-rtext small {
  color: #8c8c8c !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
}

/* Строки с данными (почта, логин): значение сверху, подпись снизу */
#mxMobileHome .mxh-row[data-pane="profile"] .mxh-rtext b {
  font-weight: 400 !important;
}

/* ---------- Шеврон справа ---------- */
#mxMobileHome .mx-chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 1.7px solid #c4c9cc;
  border-bottom: 1.7px solid #c4c9cc;
  transform: rotate(-45deg);
  opacity: .9;
}

/* ---------- Переключатели ---------- */
#mxMobileHome .mx-switch {
  flex: 0 0 auto;
  width: 36px !important;
  height: 21px !important;
  margin-left: 10px !important;
}

/* ---------- Кнопки внизу ---------- */
#mxMobileHome .mxh-logout,
#mxMobileHome .mxh-danger {
  display: block !important;
  width: calc(100% - 16px) !important;
  margin: 0 8px 10px !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: left !important;
  cursor: pointer;
  transition: background .12s ease;
}

#mxMobileHome .mxh-logout {
  color: #000 !important;
}

#mxMobileHome .mxh-danger {
  color: #e53935 !important;
}

#mxMobileHome .mxh-logout:hover,
#mxMobileHome .mxh-danger:hover {
  background: #f4f4f5 !important;
}

/* ============================================================
   БОКОВОЙ СПИСОК РАЗДЕЛОВ (широкий экран)
   ============================================================ */
.mx-nav .mx-row {
  padding: 10px 16px !important;
  border-radius: 0 !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
}

.mx-nav .mx-row svg {
  width: 24px !important;
  height: 24px !important;
  margin-right: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  color: #707579 !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */
body.cb-dark #mxMobileHome {
  background: #0e1621 !important;
}

body.cb-dark #mxMobileHome .mxh-profilecard,
body.cb-dark #mxMobileHome .mxh-card,
body.cb-dark #mxMobileHome .mxh-logout,
body.cb-dark #mxMobileHome .mxh-danger {
  background: #17212b !important;
}

body.cb-dark #mxMobileHome .mxh-name,
body.cb-dark #mxMobileHome .mxh-rtext b,
body.cb-dark #mxMobileHome .mxh-logout {
  color: #fff !important;
}

body.cb-dark #mxMobileHome .mxh-rtext small,
body.cb-dark #mxMobileHome .mxh-status {
  color: #8b98a5 !important;
}

body.cb-dark #mxMobileHome .mxh-ic {
  color: #8b98a5 !important;
}

body.cb-dark #mxMobileHome .mxh-row::after {
  background: rgba(255, 255, 255, .07) !important;
}

body.cb-dark #mxMobileHome .mxh-row:hover {
  background: rgba(255, 255, 255, .05) !important;
}

body.cb-dark #mxMobileHome .mxh-logout:hover,
body.cb-dark #mxMobileHome .mxh-danger:hover {
  background: rgba(255, 255, 255, .05) !important;
}

body.cb-dark #mxMobileHome .mx-chev {
  border-color: #5c6a78;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 768px) {
  #mxMobileHome .mxh-ava {
    width: 110px !important;
    height: 110px !important;
  }

  #mxMobileHome .mxh-row {
    padding: 13px 16px !important;
  }

  #mxMobileHome .mxh-rtext b {
    font-size: 16px !important;
  }

  #mxMobileHome .mxh-card,
  #mxMobileHome .mxh-logout,
  #mxMobileHome .mxh-danger {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

@media (max-width: 360px) {
  #mxMobileHome .mxh-ava {
    width: 96px !important;
    height: 96px !important;
    font-size: 36px !important;
  }

  #mxMobileHome .mxh-row {
    padding: 12px 14px !important;
  }

  #mxMobileHome .mxh-row::after {
    left: 52px;
  }
}

/* Галочки прочтения — исходный компактный вид (v=callibri-74) */
.message.mine .message-status.unread .message-status__check {
  color: rgba(255, 255, 255, .78) !important;
}

.message.mine .message-status.read .message-status__check {
  color: #eafff5 !important;
}

/* ============================================================
   ОКНО ПРИВЯЗКИ / СМЕНЫ ПОЧТЫ (v=callibri-74)
   ============================================================ */
.cb-em-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .18s ease;
}

.cb-em-overlay.open {
  opacity: 1;
}

.cb-em-modal {
  width: 100%;
  max-width: 400px;
  padding: 0 0 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
  transform: translateY(12px) scale(.98);
  transition: transform .2s ease;
}

.cb-em-overlay.open .cb-em-modal {
  transform: translateY(0) scale(1);
}

.cb-em-modal.busy {
  pointer-events: none;
  opacity: .75;
}

/* ---------- Шапка ---------- */
.cb-em-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 6px;
}

.cb-em-title {
  color: #000;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.cb-em-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8c8c8c;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease;
}

.cb-em-x:hover {
  background: #f0f0f0;
}

/* ---------- Тело ---------- */
.cb-em-body {
  padding: 4px 20px 0;
  text-align: center;
}

.cb-em-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 8px auto 14px;
  border-radius: 50%;
  background: var(--cb-primary-050, #e9f7f0);
  color: var(--cb-primary, #15a66b);
}

.cb-em-icon svg {
  width: 34px;
  height: 34px;
}

.cb-em-ok svg {
  width: 38px;
  height: 38px;
}

.cb-em-sub {
  margin: 0 0 16px;
  color: #707579;
  font-size: 14.5px;
  line-height: 1.45;
}

.cb-em-sub b {
  color: #000;
  font-weight: 600;
  word-break: break-all;
}

/* ---------- Поле адреса ---------- */
.cb-em-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid #dcdfe2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 15.5px;
  outline: none;
  transition: border-color .15s ease;
}

.cb-em-input:focus {
  border-color: var(--cb-primary, #15a66b);
}

/* ---------- Ячейки кода ---------- */
.cb-em-code {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cb-em-cell {
  width: 46px;
  height: 54px;
  padding: 0;
  border: 1.5px solid #dcdfe2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 23px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cb-em-cell:focus {
  border-color: var(--cb-primary, #15a66b);
  box-shadow: 0 0 0 3px rgba(21, 166, 107, .14);
}

/* ---------- Ошибка и повторная отправка ---------- */
.cb-em-err {
  min-height: 18px;
  margin: 10px 0 2px;
  color: #e53935;
  font-size: 13.5px;
  line-height: 1.35;
}

.cb-em-link {
  margin: 0 auto 4px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--cb-primary, #15a66b);
  font-size: 14px;
  cursor: pointer;
}

.cb-em-link:disabled {
  color: #a8adb2;
  cursor: default;
}

/* ---------- Кнопки ---------- */
.cb-em-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.cb-em-btn {
  flex: 1 1 0;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #f0f1f2;
  color: #000;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s ease;
}

.cb-em-btn:hover {
  background: #e6e7e9;
}

.cb-em-btn.primary {
  background: var(--cb-primary, #15a66b);
  color: #fff;
}

.cb-em-btn.primary:hover {
  background: var(--cb-primary-hover, #0f8f5b);
}

/* ---------- Строка без привязанной почты ---------- */
#mxMobileHome .mxh-row.cb-email-empty .mxh-rtext b {
  color: var(--cb-primary, #15a66b) !important;
}

/* ---------- Тёмная тема ---------- */
body.cb-dark .cb-em-modal {
  background: #17212b;
}

body.cb-dark .cb-em-title,
body.cb-dark .cb-em-sub b,
body.cb-dark .cb-em-input,
body.cb-dark .cb-em-cell,
body.cb-dark .cb-em-btn {
  color: #fff;
}

body.cb-dark .cb-em-sub {
  color: #8b98a5;
}

body.cb-dark .cb-em-input,
body.cb-dark .cb-em-cell {
  border-color: #2b3a4a;
  background: #0e1621;
}

body.cb-dark .cb-em-btn {
  background: #242f3d;
}

body.cb-dark .cb-em-btn:hover {
  background: #2b3949;
}

body.cb-dark .cb-em-btn.primary {
  color: #fff;
}

body.cb-dark .cb-em-x:hover {
  background: rgba(255, 255, 255, .08);
}

body.cb-dark .cb-em-icon {
  background: rgba(21, 166, 107, .16);
}

/* ---------- Телефон ---------- */
@media (max-width: 480px) {
  .cb-em-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .cb-em-modal {
    max-width: none;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
  }

  .cb-em-cell {
    width: 44px;
    height: 52px;
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .cb-em-cell {
    width: 40px;
    height: 48px;
    gap: 6px;
    font-size: 20px;
  }
}

/* ============================================================
   НАСТРОЙКИ НА ПК — ТОЛЬКО УГЛЫ (v=callibri-75)
   ============================================================ */

/* Оболочка окна: чуть мягче и с гарантированной обрезкой содержимого */
#callibriSettingsModal .mx-shell {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Столбец настроек повторяет скругление оболочки */
#callibriSettingsModal #mxMobileHome {
  border-radius: inherit;
}

/* Карточка профиля больше не упирается в края квадратными углами */
#callibriSettingsModal #mxMobileHome .mxh-profilecard {
  margin: 8px 8px 10px !important;
  border-radius: 12px !important;
}

/* На узком экране настройки — полноэкранная страница, углы там не нужны */
@media (max-width: 768px) {
  #callibriSettingsModal.mobile-settings-page .mx-shell {
    border-radius: 0 !important;
  }

  #callibriSettingsModal.mobile-settings-page #mxMobileHome .mxh-profilecard {
    margin: 0 0 10px !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* ============================================================
   АДМИН-ПАНЕЛЬ (v=callibri-76)
   Светлая тема — чистые карточки, тёмная — неоновые свечения.
   ============================================================ */

/* ---------- Каркас: вертикальный рейл слева + контент справа ---------- */
.adm-pane {
  display: grid !important;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: start;
  gap: 0 18px !important;
}

.adm-tabs {
  position: sticky;
  top: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px 8px 6px 0 !important;
  border: 0 !important;
  border-right: 1px solid #e9ecef !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.adm-tabpane {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* ---------- Кнопка раздела ---------- */
.adm-tab {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100% !important;
  padding: 12px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #7b8794 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.adm-tab-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.adm-tab-ic svg {
  width: 24px;
  height: 24px;
}

.adm-tab:hover {
  background: #f2f4f6 !important;
  color: #4a5560 !important;
}

.adm-tab.active {
  border-color: #cfe6f7 !important;
  background: linear-gradient(160deg, #eaf6ff, #f4fbff) !important;
  color: #1b74c4 !important;
  box-shadow: 0 4px 14px rgba(27, 116, 196, .12) !important;
}

/* Счётчик жалоб */
.adm-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* ---------- Сетка карточек ---------- */
.adm-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* ---------- Карточка показателя ---------- */
.adm-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 104px;
  padding: 14px 16px !important;
  border: 1px solid #e7ebee !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(16, 40, 30, .05) !important;
  transition: transform .16s ease, box-shadow .16s ease;
}

.adm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 40, 30, .1) !important;
}

.adm-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.adm-card-label {
  color: #6b7682;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.adm-card-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eef2f5;
  color: #64748b;
}

.adm-card-ic svg {
  width: 17px;
  height: 17px;
}

.adm-card b {
  margin-top: auto;
  color: #101828 !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.5px;
}

/* Цветовые акценты по смыслу показателя */
.adm-card-blue .adm-card-ic { background: #e8f1ff; color: #2b6ee0; }
.adm-card-green .adm-card-ic { background: #e6f7ef; color: #15a66b; }
.adm-card-teal .adm-card-ic { background: #e4f7f7; color: #0e9c9c; }
.adm-card-red .adm-card-ic { background: #fdeaea; color: #e04343; }
.adm-card-violet .adm-card-ic { background: #f0ecfe; color: #6d4bd8; }
.adm-card-amber .adm-card-ic { background: #fdf1de; color: #cc8410; }

/* ---------- Общие элементы ---------- */
.adm-btn {
  border-radius: 10px !important;
}

.adm-list {
  border-radius: 14px !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА — неоновая панель со свечением
   ============================================================ */
body.cb-dark .adm-tabs {
  border-right-color: rgba(120, 190, 220, .14) !important;
}

body.cb-dark .adm-tab {
  color: #8fa3b4 !important;
}

body.cb-dark .adm-tab:hover {
  background: rgba(120, 200, 230, .07) !important;
  color: #cfe3ef !important;
}

body.cb-dark .adm-tab.active {
  border-color: rgba(90, 200, 235, .45) !important;
  background: linear-gradient(160deg, rgba(50, 150, 200, .28), rgba(30, 90, 130, .12)) !important;
  color: #5ad2f0 !important;
  box-shadow: 0 0 18px rgba(70, 190, 230, .28), inset 0 0 12px rgba(90, 210, 240, .12) !important;
}

body.cb-dark .adm-card {
  border-color: rgba(120, 190, 220, .18) !important;
  background: linear-gradient(158deg, rgba(24, 42, 58, .95), rgba(14, 24, 34, .95)) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45) !important;
}

body.cb-dark .adm-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(70, 190, 230, .16) !important;
}

body.cb-dark .adm-card-label {
  color: #b6c6d4;
}

body.cb-dark .adm-card b {
  color: #fff !important;
  text-shadow: 0 0 16px rgba(120, 210, 240, .35);
}

body.cb-dark .adm-card-ic {
  background: rgba(90, 200, 235, .12);
  color: #6fd6f2;
}

/* Светящаяся рамка у ключевых карточек */
body.cb-dark .adm-card-blue {
  border-color: rgba(80, 170, 245, .5) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 20px rgba(70, 150, 240, .22) !important;
}

body.cb-dark .adm-card-blue .adm-card-ic {
  background: rgba(70, 150, 240, .16);
  color: #66aaff;
}

body.cb-dark .adm-card-green,
body.cb-dark .adm-card-teal {
  border-color: rgba(60, 220, 200, .45) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 20px rgba(60, 220, 200, .18) !important;
}

body.cb-dark .adm-card-green .adm-card-ic,
body.cb-dark .adm-card-teal .adm-card-ic {
  background: rgba(60, 220, 200, .14);
  color: #4fe0c8;
}

body.cb-dark .adm-card-red .adm-card-ic {
  background: rgba(240, 90, 90, .14);
  color: #ff8080;
}

body.cb-dark .adm-card-violet .adm-card-ic {
  background: rgba(150, 120, 250, .14);
  color: #a78bff;
}

body.cb-dark .adm-card-amber .adm-card-ic {
  background: rgba(240, 180, 60, .14);
  color: #ffc457;
}

/* ============================================================
   ТЕЛЕФОН
   ============================================================ */
@media (max-width: 768px) {
  .adm-pane {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 0 12px !important;
  }

  .adm-tab {
    padding: 10px 4px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .adm-tab-ic svg {
    width: 22px;
    height: 22px;
  }

  .adm-badge {
    top: 6px;
    right: 6px;
  }

  .adm-card {
    min-height: 92px;
    padding: 12px 13px !important;
  }

  .adm-card b {
    font-size: 26px !important;
  }

  .adm-card-label {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .adm-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   НАСТРОЙКИ: РУЧКА ИЗМЕНЕНИЯ ШИРИНЫ (v=callibri-77)
   ============================================================ */

.cb-dock-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}

/* Сама полоска — появляется только под курсором */
.cb-dock-grip {
  width: 3px;
  height: 44px;
  border-radius: 3px;
  background: var(--cb-primary, #15a66b);
  opacity: 0;
  transition: opacity .16s ease, height .16s ease;
}

.cb-dock-resizer:hover .cb-dock-grip {
  opacity: .55;
}

body.cb-dock-resizing .cb-dock-grip {
  opacity: .9;
  height: 72px;
}

/* Во время перетаскивания не выделяем текст и держим курсор */
body.cb-dock-resizing {
  cursor: ew-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.cb-dock-resizing #callibriSettingsModal .mx-shell {
  transition: none !important;
}

/* На телефоне настройки во весь экран — тянуть нечего */
@media (max-width: 768px) {
  .cb-dock-resizer {
    display: none !important;
  }
}

/* ============================================================
   АДМИНКА: СЕТКА ПОДСТРАИВАЕТСЯ ПОД ЛЮБУЮ ШИРИНУ
   Теперь окно тянется, и медиа-запросы по экрану больше не годятся:
   колонки считаются от реальной ширины блока.
   ============================================================ */
.adm-stats {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
}

/* Длинные подписи не наезжают на иконку */
.adm-card-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adm-card-ic {
  flex: 0 0 auto !important;
}

/* Узкий док: рейл разделов сжимается */
@media (max-width: 420px) {
  .adm-stats {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  }
}

/* ============================================================
   СПИСОК ЧАТОВ: РЕГУЛИРУЕМАЯ ШИРИНА (v=callibri-78)
   Ширина общая с окном настроек — переменная --cb-pane-w.
   ============================================================ */

/* На широком экране средняя колонка тянется, чат занимает остаток */
@media (min-width: 769px) {
  #app {
    grid-template-columns: 76px var(--cb-pane-w, 330px) minmax(0, 1fr) !important;
  }
}

/* Ручка живёт внутри списка чатов */
.sidebar {
  position: relative;
}

.cb-pane-resizer {
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  cursor: ew-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: transparent;
}

.cb-pane-resizer:hover .cb-dock-grip {
  opacity: .55;
}

/* Во время перетаскивания колонки не анимируются — движение идёт за курсором */
body.cb-dock-resizing #app,
body.cb-dock-resizing .sidebar,
body.cb-dock-resizing .chat {
  transition: none !important;
}

/* На телефоне колонка одна — тянуть нечего */
@media (max-width: 768px) {
  .cb-pane-resizer {
    display: none !important;
  }
}

/* ============================================================
   ФИКС: ПЕРВОЕ СООБЩЕНИЕ ПРЯТАЛОСЬ ЗА ШАПКОЙ (v=callibri-79)

   На широком экране шапка чата позиционируется абсолютно и не занимает
   места в потоке — её высоту компенсировал верхний отступ у ленты.
   Слой стиля пузырей перебил его через !important — возвращаем.
   ============================================================ */
@media (min-width: 769px) {
  #messages {
    padding-top: 104px !important;
  }
}

/* ============================================================
   ФИКС: КРУГЛЫЕ ВИДЕОСООБЩЕНИЯ (v=callibri-80)

   Слой стиля медиа задавал всем video внутри .message-media
   border-radius: 10px !important и height: auto — из-за этого кружок
   становился квадратным и вылезал за границы контейнера.
   Возвращаем круг и жёсткие пропорции 1:1.
   ============================================================ */

/* Обёртка медиа не должна обрезать круг прямоугольными углами */
.message-media.message-media-videonote {
  border-radius: 50% !important;
  overflow: visible !important;
  background: transparent !important;
  width: max-content !important;
}

.message-media-videonote .cb-videonote {
  width: 216px !important;
  height: 216px !important;
  max-width: 216px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Главное: круглая маска и квадратный бокс вместо height: auto */
.message-media-videonote .cb-videonote video,
.message .cb-videonote video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Кольцо прогресса и подписи остаются поверх круга */
.message-media-videonote .cb-vn-ring {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

@media (max-width: 768px) {
  .message-media-videonote .cb-videonote {
    width: 196px !important;
    height: 196px !important;
    max-width: 196px !important;
  }
}

/* ============================================================
   ФИКС: ЧИТАЕМОСТЬ ВЫБРАННОГО ЧАТА В ТЁМНОЙ ТЕМЕ (v=callibri-82)

   Правило "весь текст активной строки — белый" стояло ВЫШЕ правил
   для имени, превью и времени. У обоих !important, поэтому побеждало
   то, что ниже в файле: превью оставалось серым (--d-muted) на зелёном.
   Повторяем правила в конце и повышаем точность селекторов.
   ============================================================ */

body.cb-dark .user.active .user-info b,
body.cb-dark .user.active .user-top-row b,
body.cb-dark .recent-chat-item.active .user-info b,
body.cb-dark .recent-chat-item.active .user-top-row b {
  color: #ffffff !important;
}

/* Превью последнего сообщения и время: приглушённый белый,
   чтобы сохранить иерархию, но оставаться читаемым */
body.cb-dark .user.active .user-info > span,
body.cb-dark .user.active .user-info span,
body.cb-dark .user.active .chat-list-time,
body.cb-dark .recent-chat-item.active .user-info > span,
body.cb-dark .recent-chat-item.active .user-info span,
body.cb-dark .recent-chat-item.active .chat-list-time {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Цветные подписи в превью ("Вы:", тип вложения, набор текста) */
body.cb-dark .user.active .user-info span *,
body.cb-dark .recent-chat-item.active .user-info span * {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Точка "в сети" и галочка официального аккаунта не должны сливаться с фоном */
body.cb-dark .user.active .online-dot,
body.cb-dark .recent-chat-item.active .online-dot {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18) !important;
}

/* Счётчик непрочитанных на акцентном фоне: белая плашка, тёмная цифра */
body.cb-dark .user.active .unread-badge,
body.cb-dark .recent-chat-item.active .unread-badge {
  background: #ffffff !important;
  color: var(--d-accent, #15a66b) !important;
}

/* ============================================================
   ОПТИМИЗАЦИЯ ДЛИННЫХ ЧАТОВ (v=callibri-82)

   Браузер верстал и красил все пузыри сразу, даже те, что далеко за
   пределами экрана. content-visibility пропускает отрисовку невидимых,
   contain-intrinsic-size резервирует под них место, чтобы полоса
   прокрутки не прыгала. Слово auto запоминает реальный размер
   после первого показа.
   ============================================================ */

#messages > .message {
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
}

/* Свежие сообщения всегда готовы: рядом идёт набор текста,
   анимация появления и автопрокрутка */
#messages > .message:nth-last-child(-n + 12),
#messages > .message.msg-appear,
#messages > .message--videonote {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Пока тянем границу панелей — не пересчитываем тени и блюр */
body.cb-dock-resizing #messages > .message {
  contain: layout paint;
}

/* Лента и список чатов изолированы: изменения внутри не заставляют
   браузер пересчитывать всю страницу */
#messages,
#users {
  contain: layout paint style;
}

/* Аватарки и картинки не тормозят первую отрисовку */
#users img,
.message-media img {
  content-visibility: auto;
}