* {
  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;
}

/* соседние сообщения одного человека — плотнее, как в Telegram */
.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;
  }
}

/* ===== ПРОФИЛЬ (как в Telegram) И РАСШИРЕННЫЕ НАСТРОЙКИ ===== */

.profile-modal-shell {
  width: min(380px, calc(100vw - 28px));
  text-align: center;
  position: relative;
  padding-top: 54px;
}

/* Цветной баннер-обложка сверху карточки */
.profile-modal-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 132px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(244, 114, 182, 0.55), transparent 46%),
    radial-gradient(circle at 85% 15%, rgba(129, 140, 248, 0.6), transparent 50%),
    radial-gradient(circle at 55% 95%, rgba(34, 211, 238, 0.55), 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);
}

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

.profile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(26, 56, 84, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.25s ease;
}

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

.profile-big-avatar {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #38bdf8, #34d399);
  box-shadow:
    0 0 0 4px rgba(30, 64, 94, 0.95),
    0 0 0 7px rgba(34, 211, 238, 0.85),
    0 16px 44px rgba(139, 92, 246, 0.45);
}

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

.profile-name {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.2px;
  background: linear-gradient(90deg, #e0f2fe, #a5f3fc 45%, #bbf7d0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.profile-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px auto 16px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  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: 7px;
  height: 7px;
  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.6s ease-in-out infinite;
}

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

.profile-info-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(125, 211, 252, 0.22);
  text-align: left;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
}

.profile-info-row:hover {
  transform: translateY(-1px);
  border-color: rgba(167, 139, 250, 0.45);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.16));
}

.profile-info-value {
  color: #7dd3fc;
  font-size: 15px;
  font-weight: 700;
}

.profile-info-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.65;
}

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

.profile-modal-shell .modal-actions button {
  flex: 1;
  min-height: 46px;
  border-radius: 15px;
  font-size: 15px;
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6 50%, #10b981);
  background-size: 200% 200%;
  background-position: 0% 50%;
  box-shadow: 0 10px 26px rgba(14, 165, 233, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-position 0.35s ease;
}

.profile-modal-shell .modal-actions button:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 14px 34px rgba(139, 92, 246, 0.45);
}

/* Разделы настроек */
.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; }
}


/* ===== ДИЗАЙН КАК В TELEGRAM: РЕЙЛ, СПИСОК ЧАТОВ, КАНАЛЫ ===== */
.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: 190px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(10, 25, 35, 0.65), rgba(5, 15, 25, 0.85));
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: menuGlassIn 0.18s ease-out;
}

@keyframes menuGlassIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

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

.new-chat-menu button:hover {
  background: rgba(255, 255, 255, 0.09);
}

#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) {
  /* Нижняя панель как в Telegram iOS: плотное жидкое стекло */
  #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; }
}

/* ===== НАСТРОЙКИ НА ПК В СТИЛЕ TELEGRAM (мобильные не трогаем) ===== */
@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);
  }

  /* Секции — плоские панели, как в Telegram */
  #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;
  }

  /* Чекбоксы -> переключатели, как в Telegram */
  #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);
  }

  /* Кнопка проверки микрофона — текстовая, как в Telegram */
  #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; }
#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)); }
}

/* ===== КО��ПОЗЕР «ЖИДКОЕ СТЕКЛО» (как в Telegram iOS) ===== */
.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;
  }
}

/* ===== КАНАЛЫ: кнопка «Выключить/Включить звук» вместо поля ввода (как в Telegram) ===== */
.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);
}

/* ===== СПИСОК ЧАТОВ НА ТЕЛЕФОНЕ — КАК В TELEGRAM 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; }
@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; }
  #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; }
}

/* =========================================================================
   МОДАЛКИ: создание группы/канала, приглашение, профиль пользователя —
   светлая изумрудная тема. Только внешний вид. #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(120deg,#12a065,#2ecb8b 55%,#15a66b)!important; animation:none!important; }
.profile-close{ background:rgba(255,255,255,.22)!important; border:1px solid rgba(255,255,255,.5)!important; color:#fff!important; backdrop-filter:blur(4px); }
.profile-close:hover{ background:rgba(255,255,255,.35)!important; }
.profile-big-avatar{ background:linear-gradient(135deg,#2ecb8b,#12a065)!important; box-shadow:0 0 0 4px #fff,0 12px 30px rgba(16,40,30,.20)!important; }
.profile-name{ background:none!important; -webkit-text-fill-color:var(--cb-ink)!important; color:var(--cb-ink)!important; }
.profile-status{ background:#eef2f1!important; border:1px solid var(--cb-border)!important; color:var(--cb-ink-2)!important; }
.profile-status::before{ background:var(--cb-muted)!important; }
.profile-status.online{ background:var(--cb-primary-050)!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:#f4f7f6!important; border:1px solid var(--cb-border)!important; }
.profile-info-row:hover{ background:#eef3f1!important; border-color:var(--cb-primary-100)!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-primary)!important; background-image:none!important; color:#fff!important; box-shadow:0 8px 20px rgba(21,166,107,.28)!important; }
.profile-modal-shell .modal-actions button:hover{ background:var(--cb-primary-hover)!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-primary)!important; background-image:none!important; color:#fff!important; border:0!important; box-shadow:0 8px 18px rgba(21,166,107,.26)!important; }
#profileMessageBtn:hover{ background:var(--cb-primary-hover)!important; }
#profileCallBtn{ background:#eef2f1!important; background-image:none!important; color:var(--cb-primary)!important; border:1px solid var(--cb-border)!important; box-shadow:none!important; }
#profileCallBtn:hover{ background:var(--cb-primary-050)!important; }
.profile-modal-shell .profile-block-btn{ width:100%; margin-top:10px; min-height:44px; border:1px solid var(--cb-border); border-radius:15px; background:#fff; color:var(--danger); font-size:14px; font-weight:600; cursor:pointer; transition:background .15s ease; }
.profile-modal-shell .profile-block-btn:hover{ background:#fbeaea; }
.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); }

/* =========================================================================
   ФИКС: точки статуса (офлайн — серые, онлайн — зелёные) +
   читаемое превью последнего сообщения в списке чатов.
   ========================================================================= */
/* Офлайн — серая точка; онлайн — зелёная */
.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:8px; min-height:38px; border:0; background:transparent; color:var(--cb-muted); font-size:13px; font-weight:600; 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: 12px;
  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: 110px;
  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 16px; }
.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;
  gap: 12px;
}
.mx-accent-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  outline: none;
  padding: 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 16px; }
.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: 90px; }
  .mx-accent-dot { width: 34px; height: 34px; }
  .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;
}