* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #1a1a2e;
  color: #eee;
  height: 100vh;
  overflow: hidden;
}
.messenger-container { display: flex; height: 100vh; }
.sidebar {
  width: 320px; background: #2a2a4e;
  border-right: 1px solid #3a3a5e;
  display: flex; flex-direction: column;
}
.sidebar-header {
  padding: 1rem; border-bottom: 1px solid #3a3a5e;
  display: flex; justify-content: space-between; align-items: center;
}
.user-info {
  display: flex; align-items: center; gap: 0.5rem;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #4a9eff; display: flex; align-items: center;
  justify-content: center; font-weight: 600; overflow: hidden;
  flex-shrink: 0;
}
.user-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.user-avatar.avatar-error {
  display: flex; align-items: center; justify-content: center;
}
.user-avatar.avatar-error img {
  display: none;
}
.username { font-weight: 600; color: #fff; }
.btn-profile {
  background: none; border: none; color: #888;
  cursor: pointer; padding: 0.5rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.btn-profile:hover { background: #3a3a5e; color: #4a9eff; }
.tab-id {
  font-size: 1.2rem; cursor: help; opacity: 0.7;
  transition: opacity 0.2s;
}
.tab-id:hover { opacity: 1; }
.btn-logout {
  background: none; border: none; color: #888;
  cursor: pointer; padding: 0.5rem; border-radius: 4px;
}
.btn-logout:hover { background: #3a3a5e; color: #ff4757; }
.btn-notify {
  background: none; border: none; color: #888;
  cursor: pointer; padding: 0.5rem; border-radius: 4px;
  font-size: 1rem; line-height: 1;
}
.btn-notify:hover:not(:disabled) { background: #3a3a5e; color: #f5a623; }
.btn-notify:disabled { opacity: 0.4; cursor: not-allowed; }
.tabs { display: flex; border-bottom: 1px solid #3a3a5e; }
.tabs button {
  flex: 1; padding: 0.75rem; background: none; border: none;
  color: #888; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs button.active { color: #fff; border-bottom-color: #4a9eff; }
.search-box { padding: 0.75rem; }
.search-box input {
  width: 100%; padding: 0.625rem 0.75rem;
  background: #1a1a2e; border: 1px solid #3a3a5e;
  border-radius: 6px; color: #fff; font-size: 0.875rem;
}
.search-box input:focus {
  outline: none; border-color: #4a9eff;
}
.search-box input::placeholder { color: #666; }
.chat-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
/* Кнопки в sidebar не сжимаются */
.btn-new-message, .btn-new-chat {
  flex-shrink: 0;
}
.chat-item {
  display: flex; align-items: center; padding: 0.75rem;
  border-radius: 8px; cursor: pointer;
}
.chat-item:hover { background: #3a3a5e; }
.chat-item.active { background: #4a9eff; }
.chat-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #4a9eff; display: flex; align-items: center;
  justify-content: center; font-weight: 600; margin-right: 0.75rem;
}
.chat-info { flex: 1; }
.chat-name { font-weight: 500; color: #fff; }
.chat-type { font-size: 0.8rem; color: #888; }
.chat-meta { display: flex; align-items: center; gap: 0.5rem; }
.unread-badge {
  background: #ff4757; color: #fff;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.2rem 0.5rem; border-radius: 10px;
  min-width: 20px; text-align: center;
}
.btn-new-chat {
  margin: 1rem; padding: 0.75rem; background: #4a9eff;
  color: #fff; border: none; border-radius: 6px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 0.5rem;
}
.btn-new-chat:hover { background: #3a8eef; }
.btn-new-message {
  margin: 0.5rem 1rem; padding: 0.75rem; background: #5cb85c;
  color: #fff; border: none; border-radius: 6px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; gap: 0.5rem;
  font-weight: 500;
}
.btn-new-message:hover { background: #4cae4c; }
.main-content { flex: 1; display: flex; flex-direction: column; }
.no-chat-selected {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.empty-state { text-align: center; color: #666; }
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  overflow: hidden;
}
.chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; background: #2a2a4e;
  border-bottom: 1px solid #3a3a5e;
  flex-shrink: 0;
}
.chat-header-info { display: flex; align-items: center; gap: 0.75rem; }
.chat-header-info h2 {
  margin: 0; font-size: 1.25rem; color: #fff;
}
.chat-type-label {
  font-size: 0.75rem; color: #888;
  background: rgba(255,255,255,0.1);
  padding: 0.2rem 0.5rem; border-radius: 4px;
  display: inline-block; margin-right: 0.5rem;
}
.online-status {
  font-size: 0.75rem; color: #4cd137;
  display: inline-block;
}
.chat-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #4a9eff; display: flex; align-items: center;
  justify-content: center; font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.chat-header-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.chat-header-avatar.editable:hover {
  opacity: 0.8;
  box-shadow: 0 0 0 2px #fff;
}
.avatar-edit-container {
  display: flex; flex-direction: column; align-items: center;
  margin: 1rem 0;
}
.avatar-preview {
  width: 150px; height: 150px; border-radius: 50%;
  background: #1a1a2e; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.avatar-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar-preview-placeholder {
  width: 150px; height: 150px; border-radius: 50%;
  background: #4a9eff; display: flex; align-items: center;
  justify-content: center; font-size: 3rem; font-weight: 600;
  margin-bottom: 1rem;
}
.avatar-preview-placeholder img {
  width: 100%; height: 100%; object-fit: cover;
}
.btn-danger {
  padding: 0.75rem 1.5rem; background: #ff4757; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
}
.btn-danger:hover { background: #e84142; }

.file-input { display: none; }

/* Модальное окно редактора изображений для аватара чата */
.chat-avatar-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.chat-avatar-editor-modal {
  background: #2a2a4e;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.chat-avatar-editor-modal h2 {
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
}
.chat-avatar-editor-container {
  flex: 1;
  min-height: 300px;
  background: #1a1a2e;
  border-radius: 8px;
  overflow: visible;
  margin-bottom: 1rem;
}
.chat-avatar-editor-container img {
  max-width: 100%;
  display: block;
}
.chat-avatar-editor-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chat-avatar-editor-btn {
  padding: 0.5rem 1rem;
  background: #3a3a5e;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  transition: background 0.2s;
}
.chat-avatar-editor-btn:hover { background: #4a4a6e; }
.chat-avatar-editor-btn.primary { background: #4a9eff; }
.chat-avatar-editor-btn.primary:hover { background: #3a8eef; }
.chat-avatar-editor-btn.primary.active { background: #2d7dd2; box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.4); }
.chat-avatar-editor-btn.active { background: #4a4a6e; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); }
.chat-avatar-editor-btn.danger { background: #ff4757; }
.chat-avatar-editor-btn.danger:hover { background: #ff3344; }
.chat-avatar-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
.chat-avatar-preview-box {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #4a9eff;
  background: #1a1a2e;
}
.chat-avatar-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-avatar-preview-label {
  color: #888;
  font-size: 0.85rem;
  margin-left: 1rem;
}
.btn-leave-chat {
  background: transparent; border: 1px solid #666; color: #888;
  padding: 0.5rem; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.btn-leave-chat:hover {
  background: #ff4444; border-color: #ff4444; color: #fff;
}
.chat-header-actions {
  display: flex; gap: 0.5rem; align-items: center;
}
.btn-delete-chat {
  background: transparent; border: 1px solid #ff4444; color: #ff4444;
  padding: 0.5rem; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.btn-delete-chat:hover {
  background: #ff4444; border-color: #ff4444; color: #fff;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  position: relative;
  scroll-behavior: smooth;
}

/* На мобильных уменьшаем отступы для большей области сообщений */
@media (max-width: 480px) {
  .messages-container {
    padding: 0.5rem !important;
  }
  .message {
    padding: 0.5rem !important;
    max-width: 98% !important;
    width: calc(100% - 0.5rem) !important;
  }
}
/* Закреплённое сообщение - фиксированное вверху */
.pinned-message-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #2a2a4e 0%, #1f1f3a 100%);
  border-left: 3px solid #4a9eff;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  margin-top: -1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: calc(1rem + 3px);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.pinned-message-bar:hover {
  background: linear-gradient(135deg, #3a3a5e 0%, #2a2a4a 100%);
  transform: none;
}
.pinned-icon { font-size: 1rem; flex-shrink: 0; }
.pinned-label {
  font-size: 0.7rem;
  color: #4a9eff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.pinned-content {
  color: #ccc;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.unpin-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: all 0.2s;
  flex-shrink: 0;
}
.unpin-btn:hover {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
}
.messages-list { display: flex; flex-direction: column; gap: 0.75rem; }
.date-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  margin: 0.5rem 0;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.date-separator span {
  color: #888;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  background: rgba(42, 42, 78, 0.8);
  border-radius: 12px;
}
.load-older-wrapper {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}
.load-older-btn {
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: #4a9eff;
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.load-older-btn:hover {
  background: rgba(74, 158, 255, 0.2);
  border-color: rgba(74, 158, 255, 0.5);
}
.load-older-btn:active {
  transform: scale(0.97);
}
.loading-older-messages {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  color: #888;
  font-size: 0.85rem;
  gap: 0.5rem;
}
.loading-older-messages .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.no-more-messages {
  text-align: center;
  padding: 0.5rem;
  color: #aaa;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.message { display: flex; gap: 0.75rem; max-width: 70%; position: relative; }
.message.own { margin-left: auto; flex-direction: row-reverse; }
.message-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #4a9eff; display: flex; align-items: center;
  justify-content: center; font-weight: 600; font-size: 0.85rem;
  flex-shrink: 0;
}
.message.own .message-avatar { background: #5cb85c; }
.message-content {
  background: #2a2a4e; padding: 0.5rem 0.75rem;
  border-radius: 12px;
  flex: 0 1 auto; /* Не растягивается на всю ширину, но может сжиматься */
  min-width: 0;
  max-width: 85%; /* Максимум 85% ширины чата */
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Уменьшенные отступы для сообщений с картинкой */
.message-content:has(.message-image-container) {
  padding: 0.15rem;
  background: transparent;
  border: none;
}
.message.own .message-content:has(.message-image-container) {
  background: transparent;
  border: none;
}
.message.own .message-content { 
  background: #3a5a8a; 
  border: 1px solid rgba(255, 255, 255, 0.15); /* Чуть ярче для своих сообщений */
}
.message-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.message-time { font-size: 0.75rem; color: #bbb; flex-shrink: 0; font-weight: 500; }
.pinned-indicator {
  font-size: 1rem;
  margin-left: 0.5rem;
  animation: pulse 2s infinite;
}
/* Tooltip username при тапе на аватар (мобильные) */
.avatar-name-tooltip {
  position: absolute;
  top: -30px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  animation: tooltip-fade-in 0.2s ease;
}
@keyframes tooltip-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Подсветка первого непрочитанного сообщения */
.message-unread-highlight {
  animation: unread-pulse 2s ease-in-out;
  border-left: 3px solid #4a9eff;
  background: rgba(74, 158, 255, 0.1);
}
@keyframes unread-pulse {
  0%, 100% { 
    background: rgba(74, 158, 255, 0.1);
    transform: scale(1);
  }
  50% { 
    background: rgba(74, 158, 255, 0.2);
    transform: scale(1.02);
  }
}

/* Эффект вибрации при редактировании */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.message.shaking {
  animation: shake 0.5s ease-in-out;
  animation-iteration-count: 2; /* Повторить 2 раза = 1 секунда */
}

/* Эффект сгорания при удалении - ОГОНЬ! */
@keyframes burn {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: brightness(1) contrast(1);
  }
  10% {
    opacity: 0.95;
    transform: scale(1.05);
    filter: brightness(1.3) contrast(1.2) saturate(1.5);
  }
  20% {
    opacity: 0.9;
    transform: scale(1.1);
    filter: brightness(1.6) contrast(1.3) saturate(2) hue-rotate(-10deg);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.15) translateY(-5px);
    filter: brightness(2) contrast(1.4) saturate(2.5) hue-rotate(-30deg);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.2);
    filter: brightness(2.5) contrast(1.5) saturate(3) hue-rotate(-50deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.25) translateY(-10px) rotate(-2deg);
    filter: brightness(3) contrast(1.6) saturate(3.5) hue-rotate(-70deg);
  }
  60% {
    opacity: 0.4;
    transform: scale(1.3) translateY(-15px) rotate(-4deg);
    filter: brightness(3.5) contrast(1.7) saturate(4) hue-rotate(-90deg) blur(2px);
  }
  70% {
    opacity: 0.3;
    transform: scale(1.35) translateY(-20px) rotate(-6deg);
    filter: brightness(4) contrast(1.8) saturate(4.5) hue-rotate(-110deg) blur(4px);
  }
  80% {
    opacity: 0.15;
    transform: scale(1.4) translateY(-25px) rotate(-8deg);
    filter: brightness(5) contrast(2) saturate(5) hue-rotate(-130deg) blur(6px);
  }
  90% {
    opacity: 0.05;
    transform: scale(1.45) translateY(-30px) rotate(-10deg);
    filter: brightness(6) contrast(2.2) saturate(5.5) hue-rotate(-150deg) blur(8px);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) translateY(-40px) rotate(-12deg);
    filter: brightness(7) contrast(2.5) saturate(6) hue-rotate(-180deg) blur(15px);
  }
}

/* Добавляем псевдоэлементы для искр и дыма */
.message.burning::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,100,0,0.8) 0%, rgba(255,50,0,0.4) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: burn-glow 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

.message.burning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255,69,0,0.6) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,140,0,0.5) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,99,71,0.4) 0%, transparent 70%);
  animation: burn-fire 1s ease-out forwards;
  pointer-events: none;
  z-index: 11;
  filter: blur(8px);
}

@keyframes burn-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes burn-fire {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.3) translateY(-20px);
  }
}

.message.burning {
  animation: burn 1s ease-out forwards;
  position: relative;
  overflow: visible;
}
.reply-btn {
  background: transparent; border: none; color: #666;
  cursor: pointer; padding: 0.25rem; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.2s;
}
.message-content:hover .reply-btn { opacity: 1; }
.reply-btn:hover { background: #3a3a5e; color: #4a9eff; }
.reply-preview {
  background: rgba(0,0,0,0.2); border-left: 3px solid #4a9eff;
  padding: 0.5rem; margin: 0.5rem 0; border-radius: 4px;
  cursor: pointer; font-size: 0.85rem;
}
.reply-preview:hover { background: rgba(0,0,0,0.3); }
.reply-preview-label {
  display: block; color: #4a9eff; font-weight: 600;
  margin-bottom: 0.25rem;
}
.reply-preview-text {
  display: block; color: #aaa; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.reply-preview-bar {
  background: #2a2a4e; border-left: 3px solid #4a9eff;
  padding: 0.5rem 1rem; display: flex; align-items: center;
  gap: 0.75rem;
}
.reply-preview-bar .reply-preview-label {
  margin-bottom: 0; font-size: 0.85rem;
}
.reply-preview-bar .reply-preview-text {
  flex: 1; color: #aaa; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cancel-reply-btn {
  background: transparent; border: none; color: #666;
  cursor: pointer; padding: 0.25rem; font-size: 1rem;
}
.cancel-reply-btn:hover { color: #ff4444; }
.message-text {
  color: #eee;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  hyphens: auto;
  font-size: 1rem; /* Увеличено на 20% */
}
.message-text a {
  color: #64b5f6;
  text-decoration: underline;
  word-break: break-all;
}
.message-text a:hover {
  color: #90caf9;
  text-decoration: none;
}
.message-image-container {
  margin-top: 0;
  display: inline-block;
  max-width: 100%;
}
.message-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
  display: block;
}
.message-image-container .message-text {
  margin-top: 0;
}
.message-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.message.own:hover .message-actions,
.message:hover .message-actions {
  opacity: 1;
}
.btn-edit, .btn-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.btn-edit:hover { background: #3a3a5e; }
.btn-delete:hover { background: #ff4444; }
.btn-attach {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.btn-attach:hover { background: #3a3a5e; }
.image-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #1a1a2e;
  border-top: 1px solid #3a3a5e;
}
.preview-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}
.image-filename {
  flex: 1;
  color: #aaa;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-send-image, .btn-cancel {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-send-image {
  background: #4a9eff;
  color: #fff;
}
.btn-send-image:hover:not(:disabled) {
  background: #3a8eef;
}
.btn-send-image:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-cancel {
  background: #3a3a5e;
  color: #fff;
}
.btn-cancel:hover {
  background: #4a4a6e;
}
.image-modal {
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-size-image {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
}
.edit-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  background: #1a1a2e;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.edited-label {
  font-size: 0.7rem;
  color: #888;
  font-style: italic;
}
.message-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
  display: block;
  margin-top: 0;
}
.message-image-container {
  margin-top: 0;
  display: inline-block;
  max-width: 100%;
}
.message-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.message.own:hover .message-actions,
.message:hover .message-actions {
  opacity: 1;
}
.btn-edit, .btn-delete {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.btn-edit:hover { background: #3a3a5e; }
.btn-delete:hover { background: #ff4444; }
.btn-attach {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.btn-attach:hover { background: #3a3a5e; }
.btn-file {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.2rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.btn-file:hover { background: #3a3a5e; }
.image-modal {
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-size-image {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.9);
}
.btn-sticker {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.4rem;
  border-radius: 4px;
  margin-right: 0.25rem;
}
.btn-sticker:hover { background: #3a3a5e; }
.sticker-picker-panel {
  background: #2a2a4e;
  border-top: 1px solid #3a3a5e;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}
.sticker-packs-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #3a3a5e;
  padding-bottom: 0.5rem;
  align-items: center;
}
.sticker-pack-tab {
  padding: 0.5rem 1rem;
  background: #3a3a5e;
  border: none;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
}
.sticker-pack-tab:hover { background: #4a4a6e; }
.sticker-pack-tab.active {
  background: #4a9eff;
  color: #fff;
}
.sticker-picker-close {
  margin-left: auto;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.sticker-picker-close:hover {
  background: #4a4a6e;
  color: #fff;
}
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.25rem;
}
.sticker-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.15s, background 0.15s;
}
.sticker-item-wrapper:hover {
  transform: scale(1.1);
  background: #3a3a5e;
}
.sticker-item-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-item-gif {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
.sticker-item-emoji {
  font-size: 26px;
  text-align: center;
  line-height: 38px;
  width: 38px;
  height: 38px;
}
/* Кнопка удаления в сетке стикеров */
.sticker-grid-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 68, 68, 0.9);
  color: white;
  border: none;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transform: scale(0.8);
  z-index: 5;
  pointer-events: auto;
}
.sticker-item-wrapper:hover .sticker-grid-delete {
  opacity: 1;
  transform: scale(1);
}
/* На мобильных — показывать только при long press */
.sticker-item-wrapper.grid-long-press-active .sticker-grid-delete {
  opacity: 1;
  transform: scale(1);
}
.sticker-grid-delete:hover {
  background: rgba(255, 68, 68, 1);
}
.message-sticker {
  max-width: 110px;
  max-height: 110px;
  object-fit: contain;
  display: block;
}
.message-sticker-container {
  display: inline-block;
}
/* Стикер без фона - отображается отдельно от message-content */
.message-sticker-wrapper {
  display: inline-block;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
}
/* Кнопка удаления стикера - появляется при наведении (ПК) */
.sticker-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(255, 68, 68, 0.9);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: scale(0.8);
  z-index: 10;
  color: white;
  pointer-events: none;
}
.message.own:hover .sticker-delete-btn,
.message:hover .sticker-delete-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
/* На мобильных кнопка появляется при долгом нажатии */
.sticker-delete-btn.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.sticker-delete-btn:hover {
  background: rgba(255, 68, 68, 1);
}
/* Кнопка добавления стикера в коллекцию */
.sticker-add-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(74, 158, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: scale(0.8);
  z-index: 10;
  color: white;
  pointer-events: none;
}
.message.own:hover .sticker-add-btn,
.message:hover .sticker-add-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.sticker-add-btn.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
.sticker-add-btn:hover {
  background: rgba(74, 158, 255, 1);
}
/* Стили для панели стикеров */
.sticker-upload-btn {
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
}
.sticker-upload-btn:hover {
  background: #4a4a6e;
  color: #fff;
}
.sticker-packs-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  max-height: 120px;
  overflow-y: auto;
}
.sticker-pack-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sticker-pack-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #3a3a5e;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.sticker-pack-item:hover { background: #4a4a6e; }
.sticker-pack-item.active { background: #4a9eff; }
.pack-delete-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 68, 68, 0.7);
  color: white;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.sticker-pack-item:hover .pack-delete-btn {
  opacity: 1;
}
.pack-delete-btn:hover {
  background: rgba(255, 68, 68, 1);
}
/* На мобильных — всегда видна кнопка удаления */
@media (max-width: 480px) {
  .pack-delete-btn {
    opacity: 1 !important;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
.pack-thumbnail {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
}
.pack-emoji {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: #2a2a4e;
  border-radius: 4px;
}
.pack-name {
  flex: 1;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pack-count {
  font-size: 0.75rem;
  color: #888;
  background: #2a2a4e;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}
.empty-stickers {
  text-align: center;
  padding: 2rem 1rem;
  color: #888;
  font-size: 0.9rem;
}
/* Модальное окно загрузки стикера */
.sticker-upload-modal {
  max-width: 500px;
}
.sticker-upload-content {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}
.sticker-upload-dropzone {
  flex: 1;
  min-height: 150px;
  border: 2px dashed #3a3a5e;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}
.sticker-upload-dropzone:hover,
.sticker-upload-dropzone.dragover {
  border-color: #4a9eff;
  background: rgba(74, 158, 255, 0.1);
}
.sticker-upload-placeholder {
  text-align: center;
  color: #888;
}
.sticker-upload-placeholder svg {
  margin-bottom: 0.5rem;
  color: #666;
}
.sticker-upload-placeholder p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.upload-hint {
  font-size: 0.75rem;
  color: #666;
}
.upload-hint-editor {
  display: block;
  margin-top: 0.35rem;
  color: #4a9eff;
  font-size: 0.7rem;
}
.sticker-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}
.sticker-upload-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Emoji selector */
.emoji-selector {
  position: relative;
}
.emoji-selected-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #2a2a4e;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 36px;
}
.emoji-selected-display:hover {
  border-color: #4a9eff;
  background: #333360;
}
.emoji-preview-chosen {
  font-size: 1.3rem;
  line-height: 1;
}
.emoji-placeholder-text {
  color: #888;
  font-size: 0.85rem;
}
.emoji-dropdown-arrow {
  margin-left: auto;
  color: #666;
  font-size: 0.6rem;
  transition: transform 0.2s;
}
.emoji-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
  max-height: 350px;
  background: #1e1e32;
  border: 1px solid #3a3a5e;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.emoji-picker-search {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #3a3a5e;
  gap: 0.4rem;
}
.emoji-filter-input {
  flex: 1;
  background: #2a2a4e;
  border: 1px solid #3a3a5e;
  border-radius: 4px;
  color: #fff;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  outline: none;
}
.emoji-filter-input:focus {
  border-color: #4a9eff;
}
.emoji-clear-btn {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.emoji-clear-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 0.5rem;
  overflow-y: auto;
  max-height: 300px;
}
.emoji-grid-item {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  transition: all 0.15s;
}
.emoji-grid-item:hover {
  background: #3a3a5e;
  border-color: #4a9eff;
  transform: scale(1.1);
}
.emoji-grid-item.selected {
  background: #4a9eff;
  border-color: #4a9eff;
}

/* === Редактор стикеров === */
.sticker-editor-overlay {
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
}
.sticker-editor-modal {
  width: 100vw;
  height: 100%;
  max-width: 100vw;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 0;
}
.sticker-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #3a3a5e;
  flex-shrink: 0;
  background: #1e1e32;
}
.sticker-editor-header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.sticker-editor-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.sticker-editor-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.sticker-editor-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.sticker-editor-canvas-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: #1a1a2e;
}
/* Шахматный фон для прозрачности */
.sticker-editor-canvas-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#2a2a3e 0% 25%, #1a1a2e 0% 50%) 50% / 16px 16px;
  opacity: 0.5;
  z-index: 0;
}
.sticker-editor-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
/* Панель инструментов — горизонтально, снизу */
.sticker-editor-tools {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  padding-bottom: 90px;
  background: #1e1e32;
  border-top: 1px solid #3a3a5e;
  overflow-y: auto;
  max-height: 45vh;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
  overscroll-behavior: contain;      /* Изоляция прокрутки */
  touch-action: pan-y;
}
/* Круглая crop box — только когда включен режим */
.sticker-editor-canvas-wrapper.circle-crop .cropper-crop-box {
  border-radius: 50% !important;
}
.sticker-editor-canvas-wrapper.circle-crop .cropper-view-box {
  border-radius: 50% !important;
}
.tool-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 120px;
}
.tool-group label {
  font-size: 0.7rem;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  display: block;
  letter-spacing: 0.5px;
}
.tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.tool-btn {
  background: #2a2a4e;
  border: 1px solid #3a3a5e;
  color: #ccc;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s;
  white-space: nowrap;
}
.tool-btn:hover {
  background: #3a3a5e;
  border-color: #4a9eff;
  color: #fff;
}
.tool-btn.active {
  background: #4a9eff;
  border-color: #4a9eff;
  color: #fff;
}
.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Magic Wand overlay */
.magic-wand-overlay {
  position: absolute;
  inset: 0;
  z-index: 10000;
  cursor: crosshair;
}
.magic-wand-click-catcher {
  position: absolute;
  inset: 0;
  z-index: 99999;
  cursor: crosshair;
  background: transparent;
}
/* Когда палочка активна — отключаем Cropper */
.sticker-editor-canvas-wrapper.magic-wand-mode .cropper-container {
  pointer-events: none !important;
}
.magic-wand-selection-overlay {
  position: absolute;
  border: 2px dashed #4a9eff;
  box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
  pointer-events: auto;
  cursor: move;
  z-index: 11;
}
.magic-wand-selection-overlay .resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #4a9eff;
  border: 1px solid #fff;
  border-radius: 2px;
  z-index: 12;
}
.magic-wand-selection-overlay .resize-handle.rh-nw { top: -5px; left: -5px; cursor: nw-resize; }
.magic-wand-selection-overlay .resize-handle.rh-ne { top: -5px; right: -5px; cursor: ne-resize; }
.magic-wand-selection-overlay .resize-handle.rh-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.magic-wand-selection-overlay .resize-handle.rh-se { bottom: -5px; right: -5px; cursor: se-resize; }
.magic-wand-selection-overlay .resize-handle.rh-n  { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.magic-wand-selection-overlay .resize-handle.rh-s  { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.magic-wand-selection-overlay .resize-handle.rh-w  { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
.magic-wand-selection-overlay .resize-handle.rh-e  { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
.lasso-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 100;
  cursor: crosshair;
}
.magic-wand-hint {
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.magic-wand-hint > span {
  font-size: 0.7rem;
  color: #4a9eff;
}
.magic-wand-tolerance {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.magic-wand-tolerance label {
  font-size: 0.6rem;
  color: #888;
  text-transform: none;
  margin: 0;
}
.magic-wand-tolerance input[type="range"] {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  background: #3a3a5e;
  border-radius: 2px;
  outline: none;
}
.magic-wand-tolerance input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a9eff;
  cursor: pointer;
}
.magic-wand-tolerance .tolerance-value {
  font-size: 0.6rem;
  color: #4a9eff;
  font-family: 'Courier New', Consolas, monospace;
  width: 20px;
  text-align: right;
}
.effect-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.effect-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}
.effect-row span:first-child {
  width: 75px;
  flex-shrink: 0;
  color: #aaa;
  font-size: 0.7rem;
}
.effect-row input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: #3a3a5e;
  border-radius: 2px;
  outline: none;
}
.effect-row input[type="range"]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.effect-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4a9eff;
  cursor: pointer;
}
.effect-value {
  width: 35px;
  text-align: right;
  color: #4a9eff;
  font-size: 0.65rem;
  font-family: 'Courier New', Consolas, monospace;
}
/* Кнопки действий в редакторе */
/* Кнопки действий — фиксированы внизу редактора, всегда видны */
.sticker-editor-actions-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  background: #1e1e32;
  border-top: 1px solid #3a3a5e;
  padding: 0.6rem 1rem;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.4);
  /* Добавить padding сверху для safe area на мобильных */
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0.6rem));
}
.sticker-editor-actions-fixed .editor-actions-group {
  width: 100%;
  min-width: 100%;
}
.sticker-editor-actions-fixed .editor-actions-group .tool-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.btn-editor-cancel,
.btn-editor-apply {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  flex: 0 0 auto;
}
/* Добавить отступ к панели инструментов чтобы кнопки не перекрывали контент */
.sticker-editor-tools {
  padding-bottom: 80px !important;
}
.editor-actions-group .tool-buttons {
  flex-direction: column;
}
.btn-editor-cancel {
  background: #2a2a4e !important;
  border-color: #3a3a5e !important;
  color: #ccc !important;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8rem !important;
}
.btn-editor-cancel:hover {
  background: #3a3a5e !important;
  color: #fff !important;
}
.btn-editor-apply {
  background: #4a9eff !important;
  border-color: #4a9eff !important;
  color: #fff !important;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8rem !important;
}
.btn-editor-apply:hover {
  background: #3a8aef !important;
}

@media (max-width: 768px) {
  .sticker-editor-modal {
    width: 100vw;
    height: 100%;
    max-width: 100vw;
    max-height: 100%;
    border-radius: 0;
  }
  .sticker-editor-header {
    padding: 0.5rem 0.75rem;
  }
  .sticker-editor-header h2 {
    font-size: 0.95rem;
  }
  .sticker-editor-canvas-wrapper {
    min-height: 50vh;
  }
  .sticker-editor-actions-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2001;
    background: #1e1e32;
    border-top: 1px solid #3a3a5e;
    padding: 0.5rem 0.75rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sticker-editor-actions-fixed .editor-actions-group {
    width: 100%;
    min-width: 100%;
  }
  .sticker-editor-actions-fixed .editor-actions-group .tool-buttons {
    flex-direction: row !important;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .btn-editor-cancel,
  .btn-editor-apply {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
    width: 48%;
    flex: 1;
  }
  /* Добавить отступ снизу к панели инструментов, чтобы не перекрывалась */
  .sticker-editor-tools {
    max-height: 45vh;
    padding: 0.5rem 0.75rem 100px 0.75rem;
    gap: 0.5rem;
  }
  .tool-group {
    min-width: 100px;
  }
  .tool-btn {
    padding: 0.3rem 0.45rem;
    font-size: 0.7rem;
  }
  .effect-row span:first-child {
    width: 60px;
    font-size: 0.65rem;
  }
  .emoji-picker-dropdown {
    width: 290px;
    max-height: 300px;
  }
  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
    max-height: 250px;
  }
}
/* Модальное окно добавления в коллекцию */
.add-to-collection-modal .sticker-preview-large {
  text-align: center;
  padding: 1rem;
  margin-bottom: 1rem;
}
.add-to-collection-modal .sticker-preview-large img {
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
}
.add-to-collection-modal .emoji-large {
  font-size: 80px;
}
.message-sticker-gif {
  max-width: 110px;
  max-height: 110px;
  object-fit: contain;
  display: block;
}
/* Большая эмодзи для стикеров */
.message-sticker-emoji-large {
  font-size: 80px;
  line-height: 1;
  display: inline-block;
}
/* Файлы в сообщениях */
.message-file-container {
  margin: 0.5rem 0;
}
.message-file-wrapper {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #3a3a5e;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  max-width: 300px;
}
.message-file-wrapper:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: #4a9eff;
}
.file-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.file-name {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size {
  color: #888;
  font-size: 0.75rem;
}
.file-expire {
  color: #666;
  font-size: 0.7rem;
}
.file-expire.expiring-soon {
  color: #ff9800;
  font-weight: 600;
}
.file-download-btn {
  background: transparent;
  border: none;
  color: #4a9eff;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.file-download-btn:hover {
  background: rgba(74, 158, 255, 0.2);
  transform: scale(1.1);
}
.message-reactions {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-top: 0; align-items: center;
}
.reaction {
  background: #3a3a5e; color: #fff;
  font-size: 0.75rem; padding: 0.2rem 0.4rem;
  border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.reaction:hover { background: #4a4a6e; }
.reaction.own {
  background: #4a9eff; border-color: #6ab0ff;
}
.add-reaction-btn {
  background: transparent; border: 1px dashed #666;
  color: #888; font-size: 0.9rem; width: 24px; height: 24px;
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.add-reaction-btn:hover { border-color: #4a9eff; color: #4a9eff; }

/* Реакции - разделение на emoji, count и аватарки */
.reaction {
  background: #3a3a5e; color: #fff;
  font-size: 0.75rem; padding: 0.2rem 0.4rem;
  border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.reaction-emoji { font-size: 0.9rem; }
.reaction-count { font-size: 0.7rem; opacity: 0.8; }

/* Мини-аватарки для реакций на мобильных */
.reaction-avatars {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px;
}
.reaction-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.reaction-avatar.avatar-0 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.reaction-avatar.avatar-1 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.reaction-avatar.avatar-2 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.reaction-avatar-more {
  font-size: 0.6rem; color: #888;
  margin-left: 2px;
}

/* Всплывающая подсказка с именами пользователей */
.reaction {
  position: relative;
}
.reaction:hover::after {
  content: attr(data-usernames);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  margin-bottom: 6px;
  backdrop-filter: blur(10px);
}
/* Стрелочка вниз у подсказки */
.reaction:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  margin-bottom: -4px;
}

/* На десктопе скрываем аватарки в реакциях */
@media (min-width: 481px) {
  .reaction-avatars { display: none !important; }
}
.reaction-picker {
  position: absolute; background: #2a2a4e;
  border: 1px solid #3a3a5e; border-radius: 8px;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem;
  z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 280px;
}
.reaction-picker span {
  font-size: 1.2rem; cursor: pointer; padding: 0.25rem;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.reaction-picker span:hover { 
  background: #3a3a5e; 
  transform: scale(1.1);
}
@keyframes reaction-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
.reaction.new {
  animation: reaction-pop 0.4s ease-out;
}
@keyframes emoji-float {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}
.emoji-float {
  position: absolute;
  font-size: 1.5rem;
  pointer-events: none;
  animation: emoji-float 0.8s ease-out forwards;
  z-index: 1000;
}
.message-input-container {
  padding: 1rem; background: #2a2a4e;
  border-top: 1px solid #3a3a5e;
}
.message-input-wrapper { background: #1a1a2e; border-radius: 8px; padding: 0.5rem; }
.message-form { display: flex; gap: 0.5rem; }
.message-input {
  flex: 1; padding: 0.75rem; border: 1px solid #3a3a5e;
  border-radius: 6px; background: #2a2a4e; color: #fff;
}
.message-input:focus { outline: none; border-color: #4a9eff; }
.btn-send {
  padding: 0.75rem; background: #4a9eff; border: none;
  border-radius: 6px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-send:hover:not(:disabled) { background: #3a8eef; }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85); display: flex;
  align-items: center; justify-content: center; z-index: 1000;
}
.modal {
  background: #2a2a4e; padding: 1.5rem; border-radius: 12px;
  width: 100%; max-width: 400px;
}
.modal h2 { margin-bottom: 1rem; color: #fff; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #ccc; }
.form-group input, .form-group select {
  width: 100%; padding: 0.75rem; border: 1px solid #3a3a5e;
  border-radius: 6px; background: #1a1a2e; color: #fff;
}
.btn-secondary {
  padding: 0.75rem 1.5rem; background: #3a3a5e; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  transition: background 0.2s;
}
.btn-secondary:hover { background: #4a4a6e; }
.btn-primary {
  padding: 0.875rem 2rem; background: #4a9eff; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 1rem;
  box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
  transition: all 0.2s;
}
.btn-primary:hover:not(:disabled) {
  background: #3a8eef;
  box-shadow: 0 4px 16px rgba(74, 158, 255, 0.5);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.btn-close {
  width: 100%; padding: 0.75rem; background: #3a3a5e;
  color: #fff; border: none; border-radius: 6px;
  cursor: pointer; margin-top: 1rem;
}
.chat-header-actions {
  display: flex; gap: 0.5rem;
}
.chat-header-actions button {
  background: none; border: none; color: #888;
  cursor: pointer; padding: 0.5rem; border-radius: 4px;
}
.chat-header-actions button:hover {
  background: #3a3a5e; color: #fff;
}
.btn-add-member:hover { color: #4a9eff !important; }
.btn-delete-chat:hover { color: #ff4757 !important; }
.btn-leave-chat:hover { color: #ffa502 !important; }
.user-search-box { position: relative; margin-bottom: 1rem; }
.user-search-box input {
  width: 100%; padding: 0.875rem 1rem;
  background: #1a1a2e; border: 1px solid #3a3a5e;
  border-radius: 8px; color: #fff; font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.user-search-box input:focus {
  outline: none; border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
}
.user-search-box input::placeholder { color: #666; }
.user-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #1a1a2e; border: 1px solid #3a3a5e;
  border-radius: 8px; max-height: 300px; overflow-y: auto;
  z-index: 100; margin-top: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.user-search-item {
  padding: 0.875rem 1rem; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  transition: background 0.15s;
}
.user-search-item:hover { background: #3a3a5e; }
.user-search-item.selected {
  background: rgba(74, 158, 255, 0.15);
  border-left: 3px solid #4a9eff;
}
.user-search-item .username-text {
  font-weight: 500; color: #fff;
}
.selected-mark { color: #4a9eff; font-weight: bold; font-size: 1.2rem; }
.search-loading {
  padding: 1rem; text-align: center; color: #888; font-size: 0.875rem;
}
.search-no-results {
  padding: 1.5rem 1rem; text-align: center; color: #888; font-size: 0.875rem;
}
.search-hint {
  font-size: 0.75rem; color: #666; margin-top: 0.5rem;
  padding: 0 0.5rem;
}
.selected-members-list {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.selected-members-list h3 {
  font-size: 0.875rem; color: #888; margin-bottom: 0.5rem;
}
.selected-member-tag {
  display: flex; align-items: center; gap: 0.5rem;
  background: #3a3a5e; padding: 0.25rem 0.5rem;
  border-radius: 4px; font-size: 0.875rem; margin-bottom: 0.25rem;
}
.remove-member {
  background: none; border: none; color: #ff4757;
  cursor: pointer; font-size: 1.2rem; padding: 0;
  line-height: 1;
}
.no-members {
  color: #888; font-size: 0.875rem; font-style: italic;
}
.add-member-modal { 
  max-width: 550px; 
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
.add-member-modal .modal-content-scrollable {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
}
.add-member-modal .modal-footer-fixed {
  flex-shrink: 0;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #3a3a5e;
}
.modal-header-with-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-header-with-count h2 {
  margin: 0;
}
.selected-count-badge {
  background: #4a9eff;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  animation: badge-pop 0.3s ease-out;
}
@keyframes badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #3a3a5e; border-radius: 4px; }

/* === АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ === */
@media (max-width: 768px) {
  .sidebar { width: 280px; }
  .chat-avatar { width: 42px; height: 42px; }
  .chat-header-info h2 { font-size: 1.1rem; }
  
  /* Мобильная версия закреплённого сообщения */
  .pinned-message-bar {
    padding: 0.4rem 0.75rem;
    margin-bottom: 0;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: calc(0.75rem + 3px);
  }
  .pinned-label {
    font-size: 0.65rem;
  }
  .pinned-content {
    font-size: 0.8rem;
  }
  
  /* Мобильная версия редактора аватара */
  .chat-avatar-editor-modal {
    padding: 1rem;
    max-height: 95vh;
  }
  .chat-avatar-editor-container {
    min-height: 250px;
  }
  .chat-avatar-editor-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 100%; max-width: 320px;
    z-index: 100; transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .sidebar.show { transform: translateX(0); }
  .sidebar-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 95;
  }
  .sidebar-overlay.show { display: block; }
  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed; top: 1rem; left: 1rem; z-index: 200;
    background: rgba(74, 158, 255, 0.95) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.6rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.2s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .mobile-menu-btn:hover {
    background: rgba(74, 158, 255, 1) !important;
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.6) !important;
    transform: translateY(-2px) !important;
  }
  .mobile-menu-btn:active {
    transform: translateY(0) !important;
  }
  
  .mobile-menu-btn.hidden {
    display: none !important;
  }
  
  /* Отступ для sidebar-header чтобы кнопка не перекрывала аватар */
  .sidebar-header {
    padding-left: 4.5rem !important;
  }
  
  .main-content { width: 100%; }
  .user-avatar { width: 32px; height: 32px; }
  .chat-avatar { width: 40px; height: 40px; margin-right: 0.5rem; }
  .chat-item { padding: 0.625rem; }
  .chat-name { font-size: 0.9rem; }
  .chat-type { font-size: 0.75rem; }
  /* Chat header - кнопка назад вместо мобильного меню */
  .chat-header {
    padding: 0.75rem 1rem !important;
    padding-left: 4.5rem !important; /* Отступ чтобы не перекрывать кнопку меню */
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-height: 60px !important; /* Уменьшаем высоту заголовка */
  }
  .chat-header .btn-back-mobile {
    display: flex !important;
    flex-shrink: 0;
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(74, 158, 255, 0.95) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.6rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.2s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 101 !important;
  }
  .chat-header .btn-back-mobile:hover {
    background: rgba(74, 158, 255, 1) !important;
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.6) !important;
    transform: translateY(-50%) translateX(-2px) !important;
  }
  .chat-header .btn-back-mobile:active {
    transform: translateY(-50%) translateX(0) !important;
  }
  .chat-header .btn-back-mobile svg {
    stroke: #fff !important;
    stroke-width: 2.5 !important;
  }
  .chat-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .chat-header-info h2 {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  .chat-header-avatar { width: 36px; height: 36px; }
  .online-status { font-size: 0.7rem; }
  .messages-container { padding: 0.75rem; }
  .chat-type { font-size: 0.75rem; }
  /* Увеличенный padding слева чтобы кнопка меню не перекывала аватар */
  .message { 
    padding: 0.625rem; 
    max-width: 95%; 
    width: calc(100% - 1rem);
    margin: 0 auto;
  }
  /* Свои сообщения - аватар справа, сообщение прижато вправо */
  .message.own { 
    margin-left: auto; 
    margin-right: 0;
    flex-direction: row-reverse;
  }
  .message.own .message-content {
    margin-left: 0.5rem;
  }
  .message-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
  /* Увеличенная зона текста - тонкие рамки */
  .message-content {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    max-width: 85%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая белая обводка как в Telegram */
  }
  /* Уменьшенные отступы для сообщений с картинкой */
  .message-content:has(.message-image-container) {
    padding: 0.3rem;
  }
  .message.own .message-content {
    border: 1px solid rgba(255, 255, 255, 0.15); /* Чуть ярче для своих сообщений */
  }
  /* Улучшения для мобильных сообщений */
  .message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .message-content a {
    word-break: break-word;
    color: #4a9eff;
  }
  .message-time {
    font-size: 0.7rem;
    opacity: 1;
    margin-top: 0.25rem;
    color: #bbb;
    font-weight: 500;
  }
  .sender-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  /* Разделитель между сообщениями */
  .message + .message {
    margin-top: 0.25rem;
  }
  /* Скругление углов для сообщений */
  .message-content {
    border-radius: 12px;
  }
  .message.own .message-content {
    border-bottom-right-radius: 4px;
  }
  .message:not(.own) .message-content {
    border-bottom-left-radius: 4px;
  }

  /* Мобильная версия редактора аватара чата */
  .chat-avatar-editor-modal {
    padding: 0.75rem;
    max-height: 98vh;
  }
  .chat-avatar-editor-container {
    min-height: 220px;
  }
  .chat-avatar-editor-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }

  /* Панель ввода - FIX для Samsung S22 и Android Chrome */
  .message-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.25rem !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    background: #2a2a4e !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
  }
  .message-input-wrapper {
    background: #1a1a2e;
    border-radius: 8px;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .message-form {
    display: flex;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    align-items: center;
  }
  .message-input {
    font-size: 1rem;
    padding: 0.75rem;
    min-height: 44px;
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
  }
  .btn-attach, .btn-file, .btn-sticker {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    background: #3a3a5e !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    padding: 0 !important;
  }
  .btn-attach:hover, .btn-file:hover, .btn-sticker:hover {
    background: #4a4a6e !important;
  }
  .btn-send {
    min-width: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Добавляем отступ снизу для контейнера сообщений, чтобы последняя кнопка не перекрывалась */
  .messages-container {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }
  .messages-list {
    padding-bottom: 160px !important;
  }

  /* FIX: Кнопки в sidebar - перемещаем вниз и добавляем отступы */
  .btn-new-message, .btn-new-chat {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* FIX: Sidebar на мобильных - добавляем отступ снизу для кнопок */
  .sidebar {
    padding-bottom: 20px !important;
  }
  
  /* FIX: Chat-header - увеличиваем z-index чтобы не перекрывался */
  .chat-header {
    z-index: 150 !important;
  }
  
  /* FIX: Кнопки профиля и выхода в sidebar - добавляем z-index */
  .btn-profile, .btn-logout {
    position: relative !important;
    z-index: 160 !important;
  }

  /* Кнопки действий сообщения - скрыты по умолчанию, появляются при долгом нажатии */
  .message-actions {
    opacity: 0 !important; /* Скрыты по умолчанию */
    position: static !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0.2rem !important;
    border-radius: 4px !important;
    margin-top: 0.25rem !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    transition: opacity 0.2s !important;
    pointer-events: none !important; /* Не кликабельны когда скрыты */
  }
  /* Показываем при долгом нажатии */
  .message.long-press-active .message-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .message.own .message-actions {
    justify-content: flex-end !important;
  }
  .btn-edit, .btn-delete {
    min-width: 22px !important;
    min-height: 22px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: #3a3a5e !important;
    font-size: 0.6rem !important;
  }
  /* Кнопка удаления стикера на мобильных - всегда видна при long press */
  .sticker-delete-btn {
    width: 32px !important;
    height: 32px !important;
    top: -10px !important;
    right: -10px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .btn-edit:hover { background: #4a4a6e !important; }
  .btn-delete:hover { background: #ff4444 !important; }
  
  /* Reaction picker - фиксированное позиционирование снизу */
  .reaction-picker {
    position: fixed !important;
    bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 300px !important;
    grid-template-columns: repeat(6, 1fr) !important;
    padding: 0.75rem !important;
    background: #2a2a4e !important;
    border: 1px solid #3a3a5e !important;
    border-radius: 12px !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important;
    z-index: 1001 !important;
  }
  
  /* Панель стикеров - фиксированная снизу */
  .sticker-picker-panel {
    position: fixed !important;
    bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 45vh !important;
    background: #2a2a4e !important;
    border-top: 2px solid #3a3a5e !important;
    z-index: 1001 !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
  
  /* Модальное окно редактора изображений - на весь экран с отступами */
  .chat-avatar-editor-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(calc(1rem + env(safe-area-inset-bottom)), 80px) max(1rem, env(safe-area-inset-left)) !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .chat-avatar-editor-modal {
    max-height: calc(100vh - 160px) !important;
    max-width: 95vw !important;
    width: 100% !important;
    padding: 1rem !important;
    margin: auto 0 !important;
    overflow-y: auto !important;
    background: #2a2a4e !important;
    border-radius: 12px !important;
  }
  .chat-avatar-editor-container {
    min-height: 200px !important;
    max-height: 35vh !important;
    background: #1a1a2e !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 0.75rem !important;
  }
  .chat-avatar-editor-controls {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .chat-avatar-editor-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 60px !important;
    min-height: 60px !important;
    background: #3a3a5e !important;
    border-radius: 8px !important;
  }
  .chat-avatar-editor-btn svg {
    margin-bottom: 0.25rem !important;
    width: 16px !important;
    height: 16px !important;
  }
  .chat-avatar-editor-actions {
    flex-direction: row !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 0.5rem !important;
  }
  .chat-avatar-editor-actions .chat-avatar-editor-btn {
    width: auto !important;
    min-width: 130px !important;
    justify-content: center !important;
    flex-direction: row !important;
    background: #4a9eff !important;
  }
  .chat-avatar-editor-actions .chat-avatar-editor-btn.danger {
    background: #ff4757 !important;
  }
  .chat-avatar-editor-actions .chat-avatar-editor-btn svg {
    margin-bottom: 0 !important;
    margin-right: 0.5rem !important;
  }
  .chat-avatar-preview-container {
    margin-bottom: 0.75rem !important;
  }
  
  /* Предотвращаем скрытие контента за нижней панелью */
  .chat-view {
    height: 100% !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 320px) {
  .sidebar { max-width: 100%; }
  .message { max-width: 90%; }
  .message-sticker-gif { max-width: 100px; }
  .file-info { max-width: 150px; }
  /* Ещё больший padding для очень маленьких экранов */
  .chat-header { padding-left: 4rem; }
}

@media (max-width: 768px) and (orientation: landscape) {
  .messages-container { max-height: calc(100vh - 120px); }
  .modal-content { max-height: 90vh; }
}

/* FIX: Увеличиваем z-index для sidebar-overlay чтобы перекрывал chat-header */
@media (max-width: 480px) {
  .sidebar-overlay {
    z-index: 140 !important;
  }
  
  /* Sidebar поверх всего */
  .sidebar.show {
    z-index: 145 !important;
  }
}

/* Скрываем контент до загрузки Vue */
[v-cloak] { display: none !important; }

/* Splash Screen - экран загрузки */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.splash-content {
  text-align: center;
}

.splash-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #3a3a5e;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

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

.splash-text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* --- Поиск пользователей (User Search) --- */
.user-search-container {
  position: relative;
  margin-bottom: 0.5rem;
}
.user-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2a2a4e;
  border: 1px solid #3a3a5e;
  border-radius: 0 0 8px 8px;
  border-top: none;
  max-height: 300px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.user-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
}
.user-search-item:hover {
  background: #3a3a5e;
}
.user-search-item .user-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
}
.user-search-item .user-info {
  flex: 1;
  overflow: hidden;
}
.user-search-item .user-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-search-item .user-status {
  font-size: 0.75rem;
  color: #888;
}
/* Скрываем результаты если фокус ушел */
.user-search-container:not(:focus-within) .user-search-results:not(:hover) {
  display: none;
}
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
</head>
<body>
  <!-- Splash Screen - экран загрузки -->
  <div id="splash-screen">
<div class="splash-content">
  <div class="splash-spinner"></div>
  <div class="splash-text">ScMessenger</div>
</div>
  </div>
  
  <div id="app" v-cloak>
<!-- Кнопка мобильного меню -->
<button :class="['mobile-menu-btn', { hidden: selectedChat }]" @click="sidebarOpen = !sidebarOpen" title="Меню">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="3" y1="12" x2="21" y2="12"/>
    <line x1="3" y1="6" x2="21" y2="6"/>
    <line x1="3" y1="18" x2="21" y2="18"/>
  </svg>
</button>

<!-- Затемнение фона -->
<div class="sidebar-overlay" :class="{ show: sidebarOpen }" @click="sidebarOpen = false"></div>

<div class="messenger-container">
  <aside class="sidebar" :class="{ show: sidebarOpen }">
    <div class="sidebar-header">
      <div class="user-info">
        <div class="user-avatar" v-if="user.avatar">
          <img :src="user.avatar" alt="Avatar" @error="handleAvatarError($event, user)">
        </div>
        <div class="user-avatar" v-else>{{ user.username.slice(0, 2).toUpperCase() }}</div>
        <span class="username">{{ user.username }}</span>
        <button @click="goToAdmin" class="btn-profile" title="Админка" v-if="user.is_admin" style="color: #ffa502;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
            <path d="M2 17l10 5 10-5"/>
            <path d="M2 12l10 5 10-5"/>
          </svg>
        </button>
        <button @click="goToProfile" class="btn-profile" title="Личный кабинет">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
        </button>
      </div>
      <button v-if="pushPermission !== 'granted'"
              @click="enableNotifications"
              class="btn-notify"
              :title="pushPermission === 'denied' ? 'Уведомления заблокированы в браузере' : 'Включить push-уведомления'"
              :disabled="pushPermission === 'denied'">
        {{ pushPermission === 'denied' ? '🔕' : '🔔' }}
      </button>
      <button v-if="pushPermission === 'granted'"
              @click="pushSubscribed ? disableNotifications() : enableNotifications()"
              class="btn-notify"
              :title="pushSubscribed ? 'Отключить push-уведомления' : 'Включить push-уведомления'">
        {{ pushSubscribed ? '🔕' : '🔔' }}
      </button>
      <button @click="logout" class="btn-logout" title="Выйти">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
          <polyline points="16 17 21 12 16 7"/>
          <line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
      </button>
    </div>
    <div class="tabs">
      <button :class="{ active: activeTab === 'chats' }" @click="switchTab('chats')">Чаты</button>
      <button :class="{ active: activeTab === 'public' }" @click="switchTab('public')">Публичные</button>
    </div>
    <div class="search-box">
      <input v-model="chatSearchQuery" type="text" :placeholder="activeTab === 'public' ? 'Поиск публичных чатов...' : 'Поиск моих чатов...'" />
    </div>
    <div class="user-search-container">
      <div class="search-box" style="margin-bottom: 0; border-radius: 0 0 8px 8px;">
         <input 
            v-model="userSearchQuery" 
            type="text" 
            placeholder="Поиск пользователей..." 
            @input="debouncedUserSearch"
            @focus="showUserResults = true"
         />
      </div>
      <div class="user-search-results" v-if="showUserResults && (userSearchResults.length > 0 || userSearchLoading)">
        <div v-if="userSearchLoading" class="search-loading" style="padding: 1rem; text-align: center; color: #888;">
          Поиск...
        </div>
        <div v-else>
          <div 
            v-for="user in userSearchResults" 
            :key="user.id" 
            class="user-search-item"
            @click="handleUserSelect(user)"
          >
            <div class="user-avatar">
               <img v-if="user.avatar" :src="user.avatar" alt="A" @error="handleAvatarError($event, user)">
               <span v-else>{{ (user.username || 'U').slice(0, 2).toUpperCase() }}</span>
            </div>
            <div class="user-info">
               <div class="user-name">{{ user.full_name || user.username }}</div>
               <div class="user-status">@{{ user.username }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-list">
      <div v-if="filteredChats.length === 0" class="empty-state">Нет чатов</div>
      <div v-for="(chat, index) in filteredChats" :key="chat.id + '-' + chat.chat_type + '-' + index" :class="['chat-item', { active: selectedChat && selectedChat.id === chat.id }]" @click="selectChat(chat)">
        <div class="chat-avatar">
          <img v-if="chat.chat_type === 'direct' || chat.is_direct ? getPartnerAvatar(chat) : chat.avatar"
               :src="chat.chat_type === 'direct' || chat.is_direct ? getPartnerAvatar(chat) : chat.avatar"
               alt="Avatar"
               style="width:100%;height:100%;object-fit:cover;border-radius:50%;"
               @error="handleAvatarError($event, chat)" />
          <span v-else>{{ getChatInitials(chat) }}</span>
        </div>
        <div class="chat-info">
          <div class="chat-name">{{ getChatName(chat) }}</div>
          <div class="chat-type">{{ getChatTypeLabel(chat.chat_type) }}</div>
        </div>
        <div class="chat-meta">
          <span v-if="unreadCounts[chat.id] && unreadCounts[chat.id] > 0" class="unread-badge">{{ unreadCounts[chat.id] }}</span>
        </div>
      </div>
    </div>
    <button v-show="!selectedChat" @click="showNewMessageModal = true" class="btn-new-message">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
      Новое сообщение
    </button>
    <button v-show="!selectedChat" @click="showCreateChat = true" class="btn-new-chat">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
      Новый чат
    </button>
  </aside>
  <main class="main-content">
    <div v-if="selectedChat" class="chat-view">
      <header class="chat-header">
        <!-- Кнопка Назад для мобильных -->
        <button @click="closeChat" class="btn-back-mobile" title="Назад">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"/>
          </svg>
        </button>
        <div class="chat-header-info">
          <div class="chat-header-avatar"
               @click="(selectedChat.chat_type === 'direct' || selectedChat.is_direct) ? null : (selectedChat.creator_id === user.id ? showAvatarMenu = true : null)"
               :class="{ editable: !(selectedChat.chat_type === 'direct' || selectedChat.is_direct) && selectedChat.creator_id === user.id }"
               :title="(selectedChat.chat_type === 'direct' || selectedChat.is_direct) ? '' : 'Изменить аватар'">
            <img v-if="selectedChat.chat_type === 'direct' || selectedChat.is_direct ? getPartnerAvatar(selectedChat) : selectedChat.avatar"
                 :src="selectedChat.chat_type === 'direct' || selectedChat.is_direct ? getPartnerAvatar(selectedChat) : selectedChat.avatar"
                 alt="Avatar"
                 style="width:100%;height:100%;object-fit:cover;border-radius:50%;"
                 @error="handleAvatarError($event, selectedChat)" />
            <span v-else>{{ getChatInitials(selectedChat) }}</span>
          </div>
          <div>
            <h2>{{ getChatName(selectedChat) }}</h2>
            <span class="chat-type-label">{{ getChatTypeLabel(selectedChat.chat_type) }}</span>
            <!-- Для директ-чатов показываем только онлайн/офлайн -->
            <span v-if="selectedChat.chat_type === 'direct'" class="online-status" :style="{color: isPartnerOnline ? '#4cd137' : '#888'}">
              {{ isPartnerOnline ? 'онлайн' : 'офлайн' }}
            </span>
            <!-- Для приватных и секретных чатов показываем количество онлайн -->
            <span v-else-if="shouldShowOnlineStatus" class="online-status">{{ onlineCount }} из {{ totalMembers }} онлайн</span>
          </div>
        </div>
        <div class="chat-header-actions">
          <button v-if="canAddMembers && selectedChat.chat_type !== 'direct' && !selectedChat.is_direct" @click="showAddMemberModal = true" class="btn-add-member" title="Добавить участника">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="8.5" cy="7" r="4"/>
              <line x1="20" y1="8" x2="20" y2="14"/>
              <line x1="23" y1="11" x2="17" y2="11"/>
            </svg>
          </button>
          <button v-if="selectedChat.creator_id === user.id" @click="deleteChat" class="btn-delete-chat" title="Удалить чат (только для создателя)">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polyline points="3 6 5 6 21 6"/>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
              <line x1="10" y1="11" x2="10" y2="17"/>
              <line x1="14" y1="11" x2="14" y2="17"/>
            </svg>
          </button>
          <button v-if="selectedChat.chat_type !== 'public' && selectedChat.creator_id !== user.id" @click="leaveChat" class="btn-leave-chat" title="Покинуть чат">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
              <polyline points="16 17 21 12 16 7"/>
              <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>
          </button>
        </div>
      </header>
      <div ref="messagesContainer" class="messages-container">
        <!-- Закреплённое сообщение -->
        <div v-if="pinnedMessage" class="pinned-message-bar" @click="scrollToPinnedMessage(pinnedMessage.id)">
          <span class="pinned-icon">📌</span>
          <span class="pinned-label">Закреплённое сообщение</span>
          <span class="pinned-content">{{ getPinnedMessageContent(pinnedMessage) }}</span>
          <button class="unpin-btn" @click.stop="unpinMessage(pinnedMessage)" title="Открепить" v-if="canPinMessage">✕</button>
        </div>
        <div v-if="messages.length === 0" class="empty-state">Нет сообщений</div>
        <div v-else class="messages-list">
          <!-- Кнопка загрузки старых сообщений -->
          <div v-if="hasMoreMessages" class="load-older-wrapper">
            <button v-if="!isLoadingOlderMessages" @click="loadOlderMessages" class="load-older-btn">
              ⬆️ Загрузить старые сообщения (ещё {{ totalMessages - messages.length }})
            </button>
            <div v-else class="loading-older-messages">
              <div class="spinner"></div>
              <span>Загрузка...</span>
            </div>
          </div>
          <div v-if="!hasMoreMessages && totalMessages > messages.length" class="no-more-messages">
            Все сообщения загружены
          </div>
          <div v-for="msg in messagesWithDateSeparators" :key="msg.id ? msg.id : 'date-' + msg.date" :data-message-id="msg.id" :data-created-at="msg.created_at" :data-created-time="getMessageTimestamp(msg)"
               :class="msg.isSeparator ? 'date-separator' : ['message', { own: msg.sender_id === user.id, 'long-press-active': longPressMessageId === msg.id, 'shaking': shakingMessageIds.indexOf(msg.id) !== -1 }]"
               @touchstart="!msg.isSeparator && onMessageTouchStart(msg, $event)"
               @touchend="!msg.isSeparator && onMessageTouchEnd"
               @touchmove="!msg.isSeparator && onMessageTouchMove(msg, $event)"
               @touchcancel="!msg.isSeparator && onMessageTouchEnd">
            <span v-if="msg.isSeparator">{{ msg.label }}</span>
            <template v-else>
            <div class="message-avatar" v-if="getSenderAvatar(msg)"
                 :title="getSenderName(msg)"
                 @touchstart="onAvatarTouchStart(msg, $event)"
                 @touchend="onAvatarTouchEnd"
                 @touchmove="onAvatarTouchEnd">
              <img :src="getSenderAvatar(msg)" alt="Avatar" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
            </div>
            <div class="message-avatar" v-else
                 :title="getSenderName(msg)"
                 @touchstart="onAvatarTouchStart(msg, $event)"
                 @touchend="onAvatarTouchEnd"
                 @touchmove="onAvatarTouchEnd">{{ getSenderInitials(msg) }}</div>
            <!-- Tooltip username при тапе на мобильных -->
            <div v-if="avatarTooltipId === msg.id" class="avatar-name-tooltip">
              {{ getSenderName(msg) }}
            </div>
            <!-- Стикер отображается без фона -->
            <div v-if="msg.message_type === 'sticker'" class="message-sticker-wrapper"
                 @touchstart="onStickerTouchStart(msg, $event)"
                 @touchend="onStickerTouchEnd"
                 @touchmove="onStickerTouchEnd"
                 @contextmenu.prevent="onStickerContextMenu(msg, $event)">
              <img v-if="msg.image_path && (msg.image_path.endsWith('.gif') || msg.image_path.endsWith('.webp') || msg.image_path.endsWith('.png'))"
                   :src="getImageUrl(msg.image_path)"
                   alt="Sticker"
                   class="message-sticker-gif"
                   @error="onStickerImgError($event, msg)" />
              <div v-else class="message-sticker-emoji-large">{{ msg.content }}</div>
              <!-- Кнопка удаления (только для своих стикеров) -->
              <button v-if="msg.sender_id === user.id"
                      :class="['sticker-delete-btn', { visible: stickerLongPressId === msg.id }]"
                      @click="deleteSticker(msg)"
                      title="Удалить стикер">🗑️</button>
              <!-- Кнопка добавления в коллекцию (только для чужих кастомных стикеров, которых ещё нет у меня) -->
              <button v-if="msg.sender_id !== user.id && !isSystemSticker(msg) && !isStickerInMyCollection(msg)"
                      :class="['sticker-add-btn', { visible: showAddStickerMenuId === msg.id }]"
                      @click="addStickerFromChat(msg)"
                      title="Добавить в свои стикеры">➕</button>
            </div>
            <!-- Обычные сообщения с фоном -->
            <div v-else class="message-content">
              <div class="message-header">
                <span class="message-time">{{ formatTime(msg.created_at) }}</span>
                <span v-if="msg.is_pinned" class="pinned-indicator" title="Закреплено">📌</span>
                <span v-if="msg.edited_at" class="edited-label">(ред.)</span>
                <button class="reply-btn" @click="replyToMessage(msg)" title="Ответить">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 17 4 12 9 7"/>
                    <path d="M20 18v-2a4 4 0 0 0-4-4H4"/>
                  </svg>
                </button>
              </div>
              <div v-if="msg.parent_message_id && getParentMessage(msg)" class="reply-preview" @click="scrollToParentMessage(msg.parent_message_id)">
                <span class="reply-preview-label">Ответ {{ getSenderName(getParentMessage(msg)) }}</span>
                <span class="reply-preview-text">{{ truncateText(getParentMessage(msg).content) }}</span>
              </div>
              <div v-if="msg.message_type === 'image' && msg.image_path" class="message-image-container">
                <img :src="getImageUrl(msg.image_path)" alt="Image" class="message-image" @click="openImageModal(getImageUrl(msg.image_path))" />
                <p v-if="msg.content" class="message-text" v-html="formatLinks(msg.content)"></p>
              </div>
              <div v-else-if="msg.message_type === 'file' && msg.file_info" class="message-file-container">
                <div class="message-file-wrapper" @click="downloadFile(msg)">
                  <span class="file-icon">📎</span>
                  <div class="file-info">
                    <span class="file-name">{{ msg.file_info.original_filename }}</span>
                    <span class="file-size">{{ formatFileSize(msg.file_info.file_size) }}</span>
                    <span class="file-expire" v-if="msg.file_info.expires_at" :class="{ 'expiring-soon': isExpiringSoon(msg.file_info.expires_at) }">
                      {{ getFileExpiryText(msg.file_info.expires_at) }}
                    </span>
                  </div>
                  <button class="file-download-btn" title="Скачать">⬇️</button>
                </div>
                <p v-if="msg.content" class="message-text" v-html="formatLinks(msg.content)"></p>
              </div>
              <p v-else class="message-text" v-html="formatLinks(msg.content)"></p>
              <div v-if="msg.sender_id === user.id" class="message-actions">
                <button @click="togglePinMessage(msg)" class="btn-pin" :title="msg.is_pinned ? 'Открепить' : 'Закрепить'" :disabled="!canPinMessage">
                  {{ msg.is_pinned ? '📌' : '📍' }}
                </button>
                <button @click="editMessage(msg)" class="btn-edit" title="Редактировать">✏️</button>
                <button @click="deleteMessage(msg)" class="btn-delete" title="Удалить">🗑️</button>
              </div>
              <div class="message-reactions">
                <span v-for="reaction in groupedReactions(msg)" :key="reaction.emoji"
                      :class="['reaction', { own: reaction.hasOwn }, { new: reaction.isNew }]"
                      @click="toggleReaction(msg.id, reaction.emoji)"
                      :data-usernames="reaction.users.join(', ')">
                  <span class="reaction-emoji">{{ reaction.emoji }}</span>
                  <span class="reaction-count">{{ reaction.count }}</span>
                  <!-- Мини-аватарки на мобильных -->
                  <span v-if="isMobile && reaction.users.length > 0" class="reaction-avatars">
                    <span v-for="(user, idx) in reaction.limitUsers || reaction.users.slice(0, 3)" :key="idx"
                          :class="['reaction-avatar', 'avatar-' + idx]"
                          :data-username="user">
                      {{ getInitials(user) }}
                    </span>
                    <span v-if="reaction.users.length > 3" class="reaction-avatar-more">+{{ reaction.users.length - 3 }}</span>
                  </span>
                </span>
                <button class="add-reaction-btn" @click="showReactionPicker(msg.id)" title="Добавить реакцию">+</button>
              </div>
            </div>
          </template>
          </div>
        </div>
      </div>
      <div class="message-input-container">
        <div v-if="replyingTo" class="reply-preview-bar">
          <span class="reply-preview-label">Ответ {{ getSenderName(replyingTo) }}</span>
          <span class="reply-preview-text">{{ truncateText(replyingTo.content) }}</span>
          <button class="cancel-reply-btn" @click="cancelReply" title="Отменить">✕</button>
        </div>
        <input type="file" ref="imageInput" accept="image/*" @change="onImageSelected" style="display:none" />
        <input type="file" ref="fileInput" @change="onFileSelected" style="display:none" />
        <div class="message-input-wrapper">
          <button @click="$refs.imageInput.click()" class="btn-attach" title="Прикрепить изображение">📷</button>
          <button @click="$refs.fileInput.click()" class="btn-file" title="Прикрепить файл">📎</button>
          <button @click="toggleStickerPicker" class="btn-sticker" title="Стикеры">😊</button>
          <form @submit.prevent="sendMessage" class="message-form">
            <input v-model="newMessage" type="text" placeholder="Напишите сообщение..." class="message-input">
            <button type="submit" :disabled="!newMessage.trim()" class="btn-send">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="22" y1="2" x2="11" y2="13"/>
                <polygon points="22 2 15 22 11 13 2 9 22 2"/>
              </svg>
            </button>
          </form>
        </div>
      </div>
      
      <!-- Панель выбора стикеров -->
      <div v-if="showStickerPicker" class="sticker-picker-panel">
        <div class="sticker-packs-tabs">
          <!-- Вкладка глобальных паков -->
          <button :class="['sticker-pack-tab', { active: stickerTab === 'global' }]"
                  @click="stickerTab = 'global'; loadGlobalStickerPacks()">
            Глобальные
          </button>
          <!-- Вкладка своих паков -->
          <button :class="['sticker-pack-tab', { active: stickerTab === 'my' }]"
                  @click="stickerTab = 'my'; loadMyStickerPacks()">
            Мои
          </button>
          <!-- Кнопка загрузки стикера -->
          <button class="sticker-upload-btn" @click="showStickerUploadModal = true" title="Загрузить стикер">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
          </button>
          <button class="sticker-picker-close" @click="toggleStickerPicker" title="Закрыть">✕</button>
        </div>
        <!-- Список паков (только для вкладки "Мои") -->
        <div class="sticker-packs-list" v-if="stickerTab === 'my' && myStickerPacks.length > 0">
          <div v-for="pack in myStickerPacks" :key="pack.id" class="sticker-pack-wrapper">
            <button :class="['sticker-pack-item', { active: selectedPackId === pack.id }]"
                    @click="console.log('[Stickers] Клик на пак:', pack.id, 'tab:', stickerTab); selectPack(pack.id)">
              <img v-if="pack.stickers && pack.stickers.length > 0 && isImageSticker(pack.stickers[0].file_path)"
                   :src="pack.stickers[0].file_path" class="pack-thumbnail" />
              <span v-else class="pack-emoji">📦</span>
              <span class="pack-name">{{ pack.name }}</span>
              <span class="pack-count">{{ pack.stickers ? pack.stickers.length : 0 }}</span>
            </button>
            <button class="pack-delete-btn" @click="deleteMyStickerPack(pack)" title="Удалить пакет">✕</button>
          </div>
        </div>
        <!-- Список глобальных паков (для вкладки "Глобальные") -->
        <div class="sticker-packs-list" v-if="stickerTab === 'global' && stickerPacks.length > 0">
          <button v-for="pack in stickerPacks" :key="pack.id"
                  :class="['sticker-pack-item', { active: selectedPackId === pack.id }]"
                  @click="selectPack(pack.id)">
            <img v-if="pack.stickers && pack.stickers.length > 0 && isImageSticker(pack.stickers[0].file_path)"
                 :src="pack.stickers[0].file_path" class="pack-thumbnail" />
            <span v-else class="pack-emoji">📦</span>
            <span class="pack-name">{{ pack.name }}</span>
            <span class="pack-count">{{ pack.stickers ? pack.stickers.length : 0 }}</span>
          </button>
        </div>
        <!-- Сетка стикеров -->
        <div class="stickers-grid" :key="selectedPackId" v-if="currentStickers.length > 0">
          <div v-for="sticker in currentStickers" :key="'sticker-' + sticker.id"
               :class="['sticker-item-wrapper', { 'grid-long-press-active': stickerGridLongPressId === sticker.id }]"
               @click="sendSticker(sticker.id)"
               @touchstart="onStickerGridTouchStart(sticker, $event)"
               @touchend="onStickerGridTouchEnd"
               @touchmove="onStickerGridTouchMove(sticker, $event)"
               @touchcancel="onStickerGridTouchEnd">
            <div class="sticker-item-inner">
              <img v-if="isImageSticker(sticker.file_path)"
                   :src="sticker.file_path"
                   :alt="sticker.emoji || ''"
                   class="sticker-item-gif"
                   loading="lazy" />
              <div v-else class="sticker-item-emoji">{{ sticker.emoji || '?' }}</div>
              <!-- Кнопка удаления (только во вкладке "Мои") -->
              <button v-if="stickerTab === 'my'"
                      class="sticker-grid-delete"
                      @click.stop="deleteMySticker(sticker)"
                      title="Удалить стикер">✕</button>
            </div>
          </div>
        </div>
        <div v-else class="empty-stickers">
          <p v-if="stickerTab === 'my'">Нет своих стикеров. Загрузите первый!</p>
          <p v-else>Нет доступных стикеров</p>
        </div>
      </div>
    </div>
    <div v-else class="no-chat-selected">
      <div class="empty-state">
        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#4a4a6a" stroke-width="1">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        </svg>
        <p>Выберите чат или создайте новый</p>
      </div>
    </div>
  </main>
</div>

<!-- Picker для реакций -->
<div v-if="showPicker && pickerMessageId"
     class="reaction-picker"
     :style="{ top: pickerY + 'px', left: pickerX + 'px' }"
     @click.stop>
  <span v-for="emoji in emojis" :key="emoji" @click="addReaction(pickerMessageId, emoji)">{{ emoji }}</span>
</div>

<!-- Модальное окно загрузки стикера -->
<div v-if="showStickerUploadModal" class="modal-overlay" @click.self="showStickerUploadModal = false">
  <div class="modal sticker-upload-modal" @click.stop>
    <h2>Загрузить стикер</h2>
    <div class="sticker-upload-content">
      <div class="sticker-upload-dropzone"
           :class="{ 'dragover': isDragover }"
           @dragover.prevent="isDragover = true"
           @dragleave="isDragover = false"
           @drop.prevent="onStickerFileDrop"
           @click="$refs.stickerFileInput.click()">
        <input type="file" ref="stickerFileInput" accept="image/*" @change="onStickerFileSelected" style="display:none" />
        <div v-if="stickerPreviewUrl" class="sticker-preview">
          <img :src="stickerPreviewUrl" alt="Preview" />
        </div>
        <div v-else class="sticker-upload-placeholder">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
          </svg>
          <p>Перетащите файл сюда или нажмите для выбора</p>
          <span class="upload-hint">JPEG, PNG, GIF, WebP до 10MB → конвертация в WebP до 512KB</span>
          <span class="upload-hint upload-hint-editor">✏️ После выбора откроется редактор стикеров</span>
        </div>
      </div>
      <div class="sticker-upload-form">
        <div class="form-group">
          <label>Emoji (опционально)</label>
          <div class="emoji-selector">
            <div class="emoji-selected-display" @click="showStickerEmojiPicker = !showStickerEmojiPicker">
              <span v-if="stickerUploadEmoji" class="emoji-preview-chosen">{{ stickerUploadEmoji }}</span>
              <span v-else class="emoji-placeholder-text">Выберите emoji…</span>
              <span class="emoji-dropdown-arrow">▼</span>
            </div>
            <div v-if="showStickerEmojiPicker" class="emoji-picker-dropdown" @click.stop>
              <div class="emoji-picker-search">
                <input type="text" v-model="stickerEmojiFilter" placeholder="Поиск emoji…" class="emoji-filter-input" />
                <button v-if="stickerUploadEmoji" @click="stickerUploadEmoji = ''; showStickerEmojiPicker = false" class="emoji-clear-btn">✕</button>
              </div>
              <div class="emoji-grid">
                <button v-for="emoji in filteredStickerEmojis" :key="emoji"
                        @click="selectStickerEmoji(emoji)"
                        class="emoji-grid-item"
                        :class="{ selected: stickerUploadEmoji === emoji }"
                        :title="emoji">
                  {{ emoji }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label>Пакет</label>
          <select v-model="stickerUploadPackId">
            <option :value="null">Создать новый</option>
            <option v-for="pack in myStickerPacks" :key="pack.id" :value="pack.id">{{ pack.name }}</option>
          </select>
        </div>
        <div class="form-group" v-if="stickerUploadPackId === null">
          <label>Название нового пака</label>
          <input v-model="stickerUploadPackName" type="text" placeholder="Мои стикеры" />
        </div>
      </div>
    </div>
    <div class="form-actions">
      <button @click="showStickerUploadModal = false" class="btn-secondary">Отмена</button>
      <button @click="uploadSticker" :disabled="!stickerUploadFile || stickerUploading" class="btn-primary">
        {{ stickerUploading ? 'Загрузка...' : 'Загрузить' }}
      </button>
    </div>
  </div>
</div>

<!-- Модальное окно редактора стикеров -->
<div v-if="showStickerEditor" class="modal-overlay sticker-editor-overlay" @click.self="closeStickerEditor">
  <div class="modal sticker-editor-modal" @click.stop>
    <div class="sticker-editor-header">
      <h2>✏️ Редактор стикера</h2>
      <button class="sticker-editor-close" @click="closeStickerEditor" title="Закрыть">✕</button>
    </div>
    <div class="sticker-editor-body">
      <div class="sticker-editor-canvas-wrapper"
           :class="{ 'magic-wand-mode': magicWandActive }">
        <img ref="stickerEditorImage" :src="stickerEditorImageSrc" class="sticker-editor-image" crossorigin="anonymous" />
        <!-- Overlay для обводки -->
        <canvas v-if="lassoActive" ref="lassoCanvas" class="lasso-overlay"
                @mousedown="onLassoMouseDown" @mousemove="onLassoMouseMove" @mouseup="onLassoMouseUp"
                @touchstart="onLassoTouchStart" @touchmove="onLassoTouchMove" @touchend="onLassoTouchEnd"></canvas>
        <div v-if="magicWandSelection && magicWandSelection.bbox" class="magic-wand-selection-overlay"
             :style="{
               left: magicWandSelection.bbox.x + 'px',
               top: magicWandSelection.bbox.y + 'px',
               width: magicWandSelection.bbox.width + 'px',
               height: magicWandSelection.bbox.height + 'px'
             }"
             @mousedown="onBboxMouseDown" @touchstart="onBboxTouchStart">
          <div class="resize-handle rh-nw" data-dir="nw"></div>
          <div class="resize-handle rh-ne" data-dir="ne"></div>
          <div class="resize-handle rh-sw" data-dir="sw"></div>
          <div class="resize-handle rh-se" data-dir="se"></div>
          <div class="resize-handle rh-n" data-dir="n"></div>
          <div class="resize-handle rh-s" data-dir="s"></div>
          <div class="resize-handle rh-w" data-dir="w"></div>
          <div class="resize-handle rh-e" data-dir="e"></div>
        </div>
      </div>
      <div class="sticker-editor-tools">
        <!-- Инструменты -->
        <div class="tool-group">
          <label>Обрезка</label>
          <div class="tool-buttons">
            <button @click="stickerCrop()" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Обрезать квадратом">✂️ Crop</button>
            <button @click="toggleFreeCrop" :class="['tool-btn', { active: stickerEditorFreeCrop }]" :disabled="magicWandActive || lassoActive" title="Свободная обрезка">⬚ Free</button>
            <button @click="toggleCircleCrop" :class="['tool-btn', { active: stickerEditorCircleCrop }]" :disabled="magicWandActive || lassoActive" title="Круглая обрезка">⭕ Круг</button>
          </div>
        </div>
        <div class="tool-group">
          <label>Выделение</label>
          <div class="tool-buttons">
            <button @click="toggleMagicWand" :class="['tool-btn', { active: magicWandActive }]" title="Кликни по объекту для выделения">🪄 Палочка</button>
            <button @click="toggleLassoTool" :class="['tool-btn', { active: lassoActive }]" title="Обведи объект от руки">✏️ Обводка</button>
            <button v-if="magicWandActive || lassoActive" @click="applyMagicWandCrop" class="tool-btn" :disabled="lassoActive" title="Удалить всё за рамкой">✂️ Обрезать</button>
            <button v-if="magicWandActive || lassoActive" @click="applyLassoCrop" class="tool-btn" :disabled="magicWandActive" title="Удалить всё снаружи контура">🎯 Удалить внешнее</button>
            <button v-if="magicWandActive" @click="invertMagicWandSelection" class="tool-btn" title="Инвертировать выделение">🔃 Инверт</button>
          </div>
          <div v-if="magicWandActive" class="magic-wand-hint">
            <span>Кликни по объекту</span>
            <div class="magic-wand-tolerance">
              <label>Точность</label>
              <input type="range" min="5" max="80" v-model.number="magicWandTolerance" />
              <span class="tolerance-value">{{ magicWandTolerance }}</span>
            </div>
          </div>
          <div v-if="lassoActive && lassoPoints.length > 0" class="magic-wand-hint">
            <span>{{ lassoPoints.length }} точек · Кликни рядом с началом чтобы замкнуть</span>
          </div>
        </div>
        <div class="tool-group">
          <label>Поворот</label>
          <div class="tool-buttons">
            <button @click="stickerEditorRotate(-90)" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Повернуть влево">↺ -90°</button>
            <button @click="stickerEditorRotate(90)" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Повернуть вправо">↻ +90°</button>
            <button @click="stickerEditorFlipX" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Отразить по горизонтали">↔ Flip</button>
            <button @click="stickerEditorFlipY" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Отразить по вертикали">↕ Flip</button>
          </div>
        </div>
        <div class="tool-group">
          <label>Эффекты</label>
          <div class="effect-sliders">
            <div class="effect-row">
              <span>Яркость</span>
              <input type="range" min="-100" max="100" v-model.number="stickerEditorBrightness" @input="applyStickerEditorEffects" :disabled="magicWandActive || lassoActive" />
              <span class="effect-value">{{ stickerEditorBrightness }}</span>
            </div>
            <div class="effect-row">
              <span>Контраст</span>
              <input type="range" min="-100" max="100" v-model.number="stickerEditorContrast" @input="applyStickerEditorEffects" :disabled="magicWandActive || lassoActive" />
              <span class="effect-value">{{ stickerEditorContrast }}</span>
            </div>
            <div class="effect-row">
              <span>Насыщенность</span>
              <input type="range" min="-100" max="100" v-model.number="stickerEditorSaturation" @input="applyStickerEditorEffects" :disabled="magicWandActive || lassoActive" />
              <span class="effect-value">{{ stickerEditorSaturation }}</span>
            </div>
            <div class="effect-row">
              <span>Размытие</span>
              <input type="range" min="0" max="10" step="0.5" v-model.number="stickerEditorBlur" @input="onBlurChange" :disabled="magicWandActive || lassoActive" />
              <span class="effect-value">{{ stickerEditorBlur }}px</span>
            </div>
          </div>
          <div class="tool-buttons" style="margin-top: 0.35rem">
            <button @click="resetAllTransforms" class="tool-btn" :disabled="magicWandActive || lassoActive" title="Сбросить всё">🔄 Полный сброс</button>
          </div>
        </div>
        <div class="tool-group">
          <label>Фон</label>
          <div class="tool-buttons">
            <button @click="removeStickerBackground" class="tool-btn" :disabled="stickerEditorRemovingBg || magicWandActive || lassoActive" title="Удалить фон">
              {{ stickerEditorRemovingBg ? '⏳ Удаляю...' : '🎯 Удалить фон' }}
            </button>
          </div>
        </div>
        <div class="tool-group editor-actions-group">
          <label>Действия</label>
          <div class="tool-buttons">
            <button @click="closeStickerEditor" class="tool-btn btn-editor-cancel">✕ Отмена</button>
            <button @click="applyStickerEditor" class="tool-btn btn-editor-apply">✓ Применить</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Модальное окно "Добавить в мои стикеры" -->
<div v-if="showAddToMyStickersModal" class="modal-overlay" @click="showAddToMyStickersModal = false">
  <div class="modal add-to-collection-modal" @click.stop style="max-width: 350px;">
    <h2>Добавить в свои стикеры</h2>
    <div class="sticker-preview-large">
      <img v-if="stickerToAdd && isImageSticker(stickerToAdd.image_path)" :src="getImageUrl(stickerToAdd.image_path)" alt="Sticker" />
      <div v-else class="emoji-large">{{ stickerToAdd?.content }}</div>
    </div>
    <div class="form-group">
      <label>В пакет</label>
      <select v-model="addToCollectionPackId">
        <option :value="null">Создать новый "Из чата"</option>
        <option v-for="pack in myStickerPacks" :key="pack.id" :value="pack.id">{{ pack.name }}</option>
      </select>
    </div>
    <div class="form-actions">
      <button @click="showAddToMyStickersModal = false" class="btn-secondary">Отмена</button>
      <button @click="addStickerToCollection" :disabled="addingToCollection" class="btn-primary">
        {{ addingToCollection ? 'Добавление...' : 'Добавить' }}
      </button>
    </div>
  </div>
</div>

<div v-if="showCreateChat" class="modal-overlay" @click="showCreateChat = false">
  <div class="modal" @click.stop>
    <h2>Создать чат</h2>
    <form @submit.prevent="createChat">
      <div class="form-group">
        <label>Название</label>
        <input v-model="newChat.name" type="text" placeholder="Название чата">
      </div>
      <div class="form-group">
        <label>Тип чата</label>
        <select v-model="newChat.chat_type">
          <option value="public">Публичный</option>
          <option value="private">Приватный</option>
          <option value="secret">Секретный</option>
        </select>
      </div>
      <div class="form-actions">
        <button type="button" @click="showCreateChat = false" class="btn-secondary">Отмена</button>
        <button type="submit" class="btn-primary">Создать</button>
      </div>
    </form>
  </div>
</div>

<!-- Модальное окно нового сообщения (direct chat) -->
<div v-if="showNewMessageModal" class="modal-overlay" @click="showNewMessageModal = false">
  <div class="modal" @click.stop style="max-width: 500px;">
    <h2>Новое сообщение</h2>
    <div class="user-search-box" style="margin-bottom: 1rem;">
      <input v-model="newMessageSearchQuery" type="text" placeholder="Поиск пользователя..." @input="debouncedNewMessageSearch">
      <div v-if="newMessageSearchLoading" class="search-loading" style="padding: 0.5rem; color: #888;">Поиск...</div>
      <div v-else-if="newMessageSearchResults.length > 0" class="user-search-results" style="position: static; max-height: 250px; margin-top: 0.5rem;">
        <div v-for="user in newMessageSearchResults" :key="user.id" 
             class="user-search-item"
             :class="{ selected: selectedUserForMessage && selectedUserForMessage.id === user.id }"
             @click="selectUserForMessage(user)">
          <span class="username-text">{{ user.full_name || user.username }}</span>
          <span v-if="selectedUserForMessage && selectedUserForMessage.id === user.id" class="selected-mark">✓</span>
        </div>
      </div>
    </div>
    <div v-if="selectedUserForMessage" class="selected-user-info" style="padding: 0.75rem; background: #1a1a2e; border-radius: 6px; margin-bottom: 1rem;">
      <strong>Выбран:</strong> {{ selectedUserForMessage.full_name || selectedUserForMessage.username }}
    </div>
    <div class="form-actions">
      <button type="button" @click="showNewMessageModal = false" class="btn-secondary">Отмена</button>
      <button type="button" @click="createDirectChat" class="btn-primary" :disabled="!selectedUserForMessage">
        Написать сообщение
      </button>
    </div>
  </div>
</div>

<!-- Меню аватара чата (выбор действия) -->
<div v-if="showAvatarMenu" class="modal-overlay" @click="showAvatarMenu = false">
  <div class="modal" @click.stop style="max-width: 350px;">
    <h2>Аватар чата</h2>
    <div style="text-align: center; margin-bottom: 1.5rem;">
      <div class="avatar-preview" style="margin: 0 auto 1rem auto;">
        <img v-if="selectedChat && selectedChat.avatar" :src="selectedChat.avatar" alt="Avatar" />
        <span v-else>{{ getChatInitials(selectedChat) }}</span>
      </div>
    </div>
    <div class="form-actions" style="flex-direction: column; gap: 0.5rem;">
      <button type="button" @click="triggerChatAvatarInput" class="btn-primary" style="width: 100%; justify-content: center;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        {{ selectedChat && selectedChat.avatar ? 'Изменить аватар' : 'Загрузить аватар' }}
      </button>
      <button v-if="selectedChat && selectedChat.avatar" type="button" @click="deleteChatAvatarAction" class="btn-danger" style="width: 100%; justify-content: center;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="3 6 5 6 21 6"/>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
          <line x1="10" y1="11" x2="10" y2="17"/>
          <line x1="14" y1="11" x2="14" y2="17"/>
        </svg>
        Удалить аватар
      </button>
      <button type="button" @click="showAvatarMenu = false" class="btn-secondary" style="width: 100%;">
        Отмена
      </button>
    </div>
  </div>
</div>

<input type="file" ref="chatAvatarInput" class="file-input" accept="image/*" @change="onChatAvatarSelected">

<!-- Модальное окно редактирования аватара чата -->
<div v-if="showAvatarModal" class="chat-avatar-editor-overlay" @click="closeAvatarEditor">
  <div class="chat-avatar-editor-modal" @click.stop>
    <h2>Редактирование аватара чата</h2>

    <div class="chat-avatar-editor-container">
      <img ref="chatImageToCrop" :src="chatImageSrc" alt="Image to crop">
    </div>

    <div class="chat-avatar-preview-container">
      <div class="chat-avatar-preview-box">
        <img :src="chatPreviewSrc" alt="Preview">
      </div>
      <span class="chat-avatar-preview-label">Предпросмотр</span>
    </div>

    <div class="chat-avatar-editor-controls">
      <button @click="rotateChatAvatar(-90)" class="chat-avatar-editor-btn" title="Повернуть влево">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="1 4 1 10 7 10"/>
          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
        </svg>
        Поворот ←
      </button>
      <button @click="rotateChatAvatar(90)" class="chat-avatar-editor-btn" title="Повернуть вправо">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="23 4 23 10 17 10"/>
          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
        </svg>
        Поворот →
      </button>
      <button @click="flipChatAvatarX" class="chat-avatar-editor-btn" title="Отразить по горизонтали">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 20V4"/>
          <path d="M5 12h14"/>
          <path d="M5 8l4 4-4 4"/>
        </svg>
        Отразить
      </button>
      <button @click="resetChatCrop" class="chat-avatar-editor-btn" title="Сбросить">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 12"/>
          <path d="M3 3v9h9"/>
        </svg>
        Сброс
      </button>
      <button @click="setChatAspectRatio(1)" class="chat-avatar-editor-btn primary" :class="{ 'active': chatAspectRatio === 1 }">
        1:1
      </button>
      <button @click="setChatAspectRatio(NaN)" class="chat-avatar-editor-btn" :class="{ 'active': chatAspectRatio === 'free' }">
        Свободно
      </button>
    </div>

    <div class="chat-avatar-editor-actions" style="display: flex; gap: 0.5rem; justify-content: center;">
      <button @click="closeAvatarEditor" class="chat-avatar-editor-btn danger">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Отмена
      </button>
      <button @click="cropAndSaveChatAvatar" class="chat-avatar-editor-btn primary" :disabled="chatCropping">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
        {{ chatCropping ? 'Загрузка...' : 'Сохранить' }}
      </button>
    </div>
  </div>
</div>

<!-- Модальное окно редактора изображений для сообщений -->
<div v-if="showImageEditor" class="chat-avatar-editor-overlay" @click="closeImageEditor">
  <div class="chat-avatar-editor-modal" @click.stop>
    <h2>Редактирование изображения</h2>

    <div class="chat-avatar-editor-container">
      <img ref="imageToEdit" :src="imageEditorSrc" alt="Image to edit">
    </div>

    <div class="chat-avatar-preview-container">
      <div class="chat-avatar-preview-box image-preview-box">
        <img :src="imagePreviewSrc" alt="Preview" v-if="imagePreviewSrc">
      </div>
      <span class="chat-avatar-preview-label">Предпросмотр</span>
    </div>

    <div class="chat-avatar-editor-controls">
      <button @click="rotateImage(-90)" class="chat-avatar-editor-btn" title="Повернуть влево">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="1 4 1 10 7 10"/>
          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
        </svg>
        Поворот ←
      </button>
      <button @click="rotateImage(90)" class="chat-avatar-editor-btn" title="Повернуть вправо">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="23 4 23 10 17 10"/>
          <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
        </svg>
        Поворот →
      </button>
      <button @click="flipImageX" class="chat-avatar-editor-btn" title="Отразить по горизонтали">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 20V4"/>
          <path d="M5 12h14"/>
          <path d="M5 8l4 4-4 4"/>
        </svg>
        Отразить
      </button>
      <button @click="resetImageCrop" class="chat-avatar-editor-btn" title="Сбросить">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 12"/>
          <path d="M3 3v9h9"/>
        </svg>
        Сброс
      </button>
      <button @click="setImageAspectRatio(1)" class="chat-avatar-editor-btn primary" :class="{ 'active': imageAspectRatio === 1 }">
        1:1
      </button>
      <button @click="setImageAspectRatio(NaN)" class="chat-avatar-editor-btn" :class="{ 'active': imageAspectRatio === 'free' }">
        Свободно
      </button>
    </div>

    <div class="chat-avatar-editor-actions" style="display: flex; gap: 0.5rem; justify-content: center;">
      <button @click="closeImageEditor" class="chat-avatar-editor-btn danger">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Отмена
      </button>
      <button @click="sendEditedImage" class="chat-avatar-editor-btn primary" :disabled="imageSending">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
        {{ imageSending ? 'Отправка...' : 'Отправить' }}
      </button>
    </div>
  </div>
</div>

<!-- Модальное окно добавления участника -->
<div v-if="showAddMemberModal" class="modal-overlay" @click="showAddMemberModal = false">
  <div class="modal add-member-modal" @click.stop>
    <div class="modal-header-with-count">
      <h2>Добавить участника</h2>
      <span v-if="membersToAdd.length > 0" class="selected-count-badge">{{ membersToAdd.length }} выбр.</span>
    </div>
    <div class="modal-content-scrollable">
      <div class="user-search-box">
        <input v-model="memberSearchQuery" type="text" placeholder="Введите имя пользователя (минимум 3 символа)..." @input="debouncedMemberSearch">
        <div v-if="memberSearchLoading" class="search-loading">Поиск пользователей...</div>
        <div v-else-if="memberSearchResults.length > 0" class="user-search-results">
          <div v-for="user in memberSearchResults" :key="user.id"
               class="user-search-item"
               :class="{ selected: isMemberSelected(user.id) }"
               @click="toggleMember(user)">
            <span class="username-text">{{ user.full_name || user.username }}</span>
            <span v-if="isMemberSelected(user.id)" class="selected-mark">✓</span>
          </div>
          <div class="search-hint">Найдите пользователя по имени, фамилии или имени пользователя</div>
        </div>
        <div v-else-if="memberSearchQuery.length >= 3 && !memberSearchLoading" class="search-no-results">
          Пользователи не найдены
        </div>
      </div>
      <div class="selected-members-list">
        <h3>Выбранные пользователи:</h3>
        <div v-for="userId in membersToAdd" :key="userId" class="selected-member-tag">
          <span>{{ getUsernameById(userId) }}</span>
          <button type="button" @click="removeMember(userId)" class="remove-member">×</button>
        </div>
        <div v-if="membersToAdd.length === 0" class="no-members">Никто не выбран</div>
      </div>
    </div>
    <div class="modal-footer-fixed">
      <div class="form-actions">
        <button type="button" @click="showAddMemberModal = false" class="btn-secondary">Отмена</button>
        <button type="button" @click="addMembers" class="btn-primary" :disabled="membersToAdd.length === 0">
          Добавить {{ membersToAdd.length > 0 ? '(' + membersToAdd.length + ')' : '' }}
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Модальное окно для просмотра изображений -->
<div id="imageModal" class="modal-overlay" style="display:none;" @click="closeImageModal">
  <div class="modal image-modal" @click.stop>
    <img id="fullImage" src="" alt="Full size image" class="full-size-image" />
    <button @click="closeImageModal" class="modal-close-btn">✕</button>
  </div>
</div>
  </div>