.message.theirs {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-left: 3px solid rgba(138,43,226,0.7) !important;
    border-radius: 18px 18px 18px 4px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    max-width: 70% !important;
    align-self: flex-start !important;
  }
  .message.mine {
    background: linear-gradient(135deg, #8A2BE2, #4169E1) !important;
    border-radius: 18px 18px 4px 18px !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(138,43,226,0.35) !important;
    max-width: 70% !important;
    align-self: flex-end !important;
  }
  .message {
    color: #ffffff !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    font-size: 14.5px !important;
    word-break: break-word !important;
  }
  .message-meta {
    color: rgba(255,255,255,0.5) !important;
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  /* ── Новые CSS-классы пузырей (msg-bubble) ── */
  .msg-row {
    display: flex;
    margin-bottom: 6px;
  }
  .msg-row--mine  { flex-direction: row-reverse; }
  .msg-row--theirs { flex-direction: row; }

  .msg-bubble {
    display: inline-flex;
    flex-direction: column;
    max-width: 70%;
    padding: 10px 14px 8px;
    font-size: 14.5px;
    line-height: 1.5;
    word-break: break-word;
  }
  .msg-bubble--mine {
    background: linear-gradient(135deg, #8A2BE2, #4169E1);
    border-radius: 18px 18px 4px 18px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(138,43,226,0.35);
    align-self: flex-end;
  }
  .msg-bubble--theirs {
    background: rgba(138,43,226,0.18);
    border: 1px solid rgba(138,43,226,0.4);
    border-left: 3px solid #8A2BE2;
    border-radius: 18px 18px 18px 4px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    align-self: flex-start;
  }
  .msg-text { white-space: pre-wrap; }
  .msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 5px;
  }
  .msg-time {
    font-size: 11px;
    opacity: 0.45;
  }

  /* ── Светлая тема: пузыри ── */
  [data-theme="light"] .msg-bubble--theirs {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-left: 1px solid rgba(0,0,0,0.06) !important;
    color: #1e293b !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
  }
  [data-theme="light"] .msg-bubble--theirs .msg-time { opacity: 1; color: #94a3b8; }
  [data-theme="light"] .msg-bubble--mine {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.25) !important;
  }
  [data-theme="light"] .msg-bubble--mine .msg-time { color: rgba(255,255,255,0.7); opacity: 1; }

  /* ── Светлая тема: плашка даты ── */
  [data-theme="light"] .date-divider span {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #64748b !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    border: 1px solid rgba(0,0,0,0.06);
  }

  /* ── Светлая тема: хедер чата — чистый, без линии ── */
  [data-theme="light"] .chat-header {
    border-bottom: none !important;
    box-shadow: none !important;
  }
  .user-name { color: #ffffff !important; }
  .user-email { color: rgba(255,255,255,0.4) !important; }
  .panel-title { color: #ffffff !important; }
  .panel-muted { color: rgba(255,255,255,0.5) !important; }
  .chat-title { color: #ffffff !important; }
  .chat-subtitle { color: rgba(255,255,255,0.5) !important; }
  [data-theme="dark"] .sidebar {
    background: rgba(7, 17, 31, 0.55) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
  }
  [data-theme="dark"] .chat-card {
    background: rgba(7, 17, 31, 0.5) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
  }
  .composer {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 30px !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    padding: 10px 10px 10px 20px !important;
  }
  .composer .input {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
  }
  .composer .input::placeholder { color: rgba(255,255,255,0.35) !important; }
  .composer .input { padding-left: 4px !important; }
  .empty-note { color: rgba(255,255,255,0.45) !important; }

  /* ── EMOJI PICKER (replaces sticker picker while custom stickers are in dev) ── */
  .emoji-picker {
    position: absolute;
    bottom: 80px;
    left: 20px;
    right: 20px;
    background: rgba(15,12,30,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 14px 16px;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: pickerSlideUp .2s ease;
  }
  .emoji-picker-search {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    padding: 7px 12px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
  }
  .emoji-picker-search::placeholder { color: rgba(255,255,255,0.35); }
  .emoji-picker-search:focus { border-color: rgba(138,43,226,0.5); }
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
  }
  .emoji-grid::-webkit-scrollbar { width: 3px; }
  .emoji-grid::-webkit-scrollbar-track { background: transparent; }
  .emoji-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 999px; }
  .emoji-cell {
    font-size: 22px;
    line-height: 1;
    text-align: center;
    padding: 5px 2px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, transform .12s;
    user-select: none;
  }
  .emoji-cell:hover {
    background: rgba(138,43,226,0.2);
    transform: scale(1.18);
  }

  /* ── APPLE EMOJI IMAGES ── */
  /* ── WATCHING PULSE ── */
  /* ── WATCHING PULSE ──
     backdrop-filter на .chat-card создаёт stacking context который обрезает
     любые дочерние position:absolute элементы выходящие за border-radius карточки.
     outline и box-shadow на самом элементе — единственные свойства которые
     браузер рисует поверх stacking context, не обрезая их. */

  @keyframes pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,0), 0 4px 16px rgba(91,140,255,0.35); }
    50%     { box-shadow: 0 0 14px 5px rgba(168,85,247,0.75), 0 0 28px 8px rgba(168,85,247,0.3); }
  }

  @keyframes pulse-glow-soft {
    0%,100% { box-shadow: 0 4px 14px rgba(91,140,255,0.3); }
    50%     { box-shadow: 0 0 12px 4px rgba(168,85,247,0.65); }
  }

  .chat-avatar-wrapper {
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-header-avatar {
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s ease;
  }

  .chat-avatar-wrapper.avatar-watching .chat-header-avatar {
    animation: pulse-glow 2.4s ease-in-out infinite;
  }

  .user-avatar {
    transition: box-shadow 0.3s ease;
  }

  .user-avatar.avatar-watching {
    animation: pulse-glow-soft 2.8s ease-in-out infinite;
  }

  /* ── LIGHT THEME: зелёные пульсации вместо фиолетовых ── */
  @keyframes pulse-glow-green {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 4px 16px rgba(34,197,94,0.2); }
    50%     { box-shadow: 0 0 14px 5px rgba(34,197,94,0.55), 0 0 28px 8px rgba(34,197,94,0.2); }
  }
  @keyframes pulse-glow-soft-green {
    0%,100% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #22c55e, 0 4px 10px rgba(34,197,94,0.15); }
    50%     { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #22c55e, 0 0 12px 4px rgba(34,197,94,0.45); }
  }
  [data-theme="light"] .chat-avatar-wrapper.avatar-watching .chat-header-avatar {
    animation: pulse-glow-green 2.4s ease-in-out infinite !important;
  }
  [data-theme="light"] .user-avatar.avatar-watching {
    animation: pulse-glow-soft-green 2.8s ease-in-out infinite !important;
  }

  /* ── VERIFIED BADGE ── */
  .verified-badge {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-left: 4px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(168,85,247,0.45));
  }

  /* Slightly bigger in the chat header */
  .chat-title .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-left: 5px;
  }

  .apple-emoji {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: -5px;
    margin: 0 1px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
  }
  /* Emoji-only messages — bigger like Telegram */
  .apple-emoji-big {
    width: 48px !important;
    height: 48px !important;
    margin: 2px !important;
  }
  /* Picker cells */
  .emoji-cell .apple-emoji {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
  }
  /* Adjust picker cell size since images are bigger */
  .emoji-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 6px !important;
  }
  .emoji-cell {
    padding: 5px 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* ── CONTENTEDITABLE COMPOSER ── */
  .composer-editable {
    min-height: 24px;
    max-height: 120px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    line-height: 1.5;
    caret-color: #fff;
    /* scrollbar hidden */
    scrollbar-width: none;
  }
  .composer-editable::-webkit-scrollbar { display: none; }

  /* Placeholder via ::before when empty */
  .composer-editable:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.35);
    pointer-events: none;
    position: absolute;
    font-size: 15px;
    font-weight: 400;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  /* Плавное исчезновение placeholder при фокусе */
  .composer-editable:focus:empty::before {
    opacity: 0.3;
  }

  /* Shell needs relative for placeholder positioning */
  .composer-shell { position: relative; }

  /* Emoji images inside the composer */
  .composer-editable img.apple-emoji-input {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    pointer-events: none;
    /* prevent browser from treating it as selectable image */
    user-select: none;
    -webkit-user-drag: none;
  }

  /* disabled state */
  .composer-editable[contenteditable="false"] {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .composer-editable[contenteditable="false"]::before {
    opacity: 0.4;
  }

  /* ── MOBILE LOCK ── */
  #mobile-lock {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #07111f;
    color: #94a3b8;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    padding: 32px;
    flex-direction: column;
    gap: 16px;
  }
  #mobile-lock .lock-icon {
    font-size: 48px;
    margin-bottom: 8px;
  }
  #mobile-lock .lock-title {
    font-size: 18px;
    font-weight: 700;
    color: #e2e8f0;
  }
  #mobile-lock .lock-text {
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
  }
  @media (max-width: 1024px) {
    #mobile-lock { display: flex; }
    body { overflow: hidden; }
  }


/* HTML cleanup */
.brand--home { cursor: pointer; }
.brand-title--auth { font-size: 22px; }
.chat-main { display: flex; flex-direction: column; height: 100%; }
.chat-main--hidden { display: none; }
.chat-header-avatar--hidden { display: none; }
.emoji-picker--hidden { display: none; }
.sticker-picker--hidden { display: none; }
.composer-shell--stretch { padding-right: 14px; flex: 1; cursor: text; }
.gurnyx-modal-overlay--hidden { display: none; }
.gurnyx-modal-footer--spaced { margin-top: 20px; }
.is-hidden-inline { display: none; }


.is-hidden {
  display: none !important;
}

.user-avatar--stacked {
  position: relative;
}

.skeleton-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.skeleton-line--muted {
  opacity: 0.6;
}

.chat-header-avatar--visible {
  display: flex !important;
}

.pending-message-row {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 8px;
}

.pending-message-bubble {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-end;
  max-width: 70%;
  padding: 10px 14px 8px;
  border-radius: 18px 18px 4px 18px;
  color: #fff;
  font-size: 14.5px;
  word-break: break-word;
  opacity: 0.55;
  filter: grayscale(0.4);
  background: linear-gradient(135deg, #8A2BE2, #4169E1);
}

.pending-message-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.pending-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 5px;
}

.pending-message-clock {
  font-size: 11px;
  opacity: 0.45;
}

.pending-message-spinner {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

.message-row {
  display: flex;
  margin-bottom: 10px;
}

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

.message-bubble {
  display: inline-flex;
  flex-direction: column;
  max-width: 70%;
  padding: 10px 14px 8px;
  font-size: 14.5px;
  word-break: break-word;
}

.message-bubble--mine {
  align-self: flex-end;
}

.message-author {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.78;
}

.message-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.message-text--sticker {
  display: flex;
  justify-content: center;
}

.message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 5px;
}

.message-time {
  font-size: 11px;
}

.message-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  transition: all 0.4s ease;
}

.message-status-dot--sent {
  background: rgba(255,255,255,0.3);
}

.message-status-dot--delivered {
  background: #4facfe;
  box-shadow: 0 0 8px #4facfe;
}

.message-status-dot--read {
  background: #8A2BE2;
  box-shadow: 0 0 10px #8A2BE2, 0 0 18px #8A2BE2;
  animation: neon-pulse 2s infinite;
}

.sticker-image {
  max-width: 180px;
  max-height: 180px;
  display: block;
}

.emoji-picker {
  display: none;
}

.emoji-picker.is-open {
  display: block;
}

.gurnyx-modal.is-open,
.modal.is-open,
#settingsModal.is-open {
  display: flex !important;
}


/* ── GHOST MODE (isGhost: true) ── */

/* Сайдбар: скрываем строку статуса у ghost-пользователя */
.user-item[data-uid].ghost-user .card-status {
  display: none !important;
}

/* Шапка чата: скрываем подзаголовок (онлайн / был(а) ...) */
.composer.is-locked-owner ~ * .chat-subtitle,
.chat-header .chat-subtitle.is-ghost-hidden {
  display: none !important;
}

/* Инпут: визуальная блокировка composer в ghost-режиме */
.composer.is-locked-owner {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.composer.is-locked-owner .composer-editable {
  cursor: not-allowed;
}