/* Скрываем правые панели */
  .chat-area { display: none !important; }
  .profile-panel { display: none !important; }
  .communities-sidebar { display: none !important; }
  .mobile-back-btn { display: flex !important; }
  #profile-panel { display: none !important; }

  /* Сайдбар на всю ширину и высоту */
  .sidebar { 
    width: 100vw !important; 
    min-width: 100vw !important; 
    height: 100dvh !important;
  }

  /* Анимация переключения панелей на мобильном */
  .sidebar-content-wrap { overflow: hidden !important; }
  @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes slideInLeft  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  @keyframes slideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
  @keyframes slideOutRight{ from { transform: translateX(0); } to { transform: translateX(100%); } }
  .pane-anim-in-right  { animation: slideInRight .25s ease forwards; }
  .pane-anim-in-left   { animation: slideInLeft  .25s ease forwards; }
  .pane-anim-out-left  { animation: slideOutLeft .25s ease forwards; }
  .pane-anim-out-right { animation: slideOutRight .25s ease forwards; }

  /* Чат открыт — показываем chat-area поверх всего */
  body.chat-open .sidebar { display: none !important; }
  body.chat-open .chat-area {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 100 !important;
    background: var(--bg) !important;
  }

  /* Сообщества */
  body.comm-open .sidebar-header { display: none !important; }
  body.comm-open .folders-bar { display: none !important; }
  body.comm-open #saved-chat-wrap { display: none !important; }
  body.comm-open .chat-list { display: none !important; }
  body.comm-open .communities-sidebar { display: flex !important; flex: 1; min-height: 0; }
  body.comm-open #pane-communities { display: flex !important; transform: translateX(0) !important; opacity: 1 !important; }

/* Панель каналов — на мобильном на весь экран поверх */
.comm-channels-panel {
  left: 0 !important;
  width: 100vw !important;
  z-index: 200 !important;
}
#screen-app.channels-open .chat-area {
  margin-left: 0 !important;
}

/* Канал сообщества открыт */
body.comm-open.chat-open .sidebar { display: none !important; }
body.comm-open.chat-open .chat-area {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 100 !important;
  background: var(--bg) !important;
}

/* Настройки */
.settings-modal { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; flex-direction: column; }
.settings-nav { width: 100% !important; min-width: 100% !important; }
body.settings-nav-open .settings-content { display: none !important; }
body.settings-nav-open .settings-nav { display: flex !important; }
body:not(.settings-nav-open) .settings-nav { display: none !important; }
body:not(.settings-nav-open) .settings-content { display: block !important; }

/* Карточка профиля */
.profile-card { width: 100% !important; max-height: 90dvh; border-radius: 16px 16px 0 0 !important; }
.profile-card-modal { align-items: flex-end; }

/* Голосовой грид */
.voice-grid { grid-template-columns: 1fr !important; }
.voice-tile { height: 180px !important; }

/* Скролл списка чатов */
.sidebar-content-wrap {
  display: flex;
  flex-direction: column;
  position: static;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Нижняя панель профиля ── */
.sidebar-profile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-height: 64px;
  overflow: visible !important;
}
.sidebar-profile-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sidebar-profile-name {
  display: block !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-profile-username {
  display: block !important;
  font-size: .75rem !important;
  color: var(--text3) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Сайдбар — flex колонка чтобы профиль внизу был виден */
.sidebar {
  display: flex !important;
  flex-direction: column !important;
}
.sidebar-content-wrap {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#sidebar-profile-wrap {
  flex-shrink: 0 !important;
  display: block !important;
}

/* При открытом чате/голосовом — скрываем панель каналов */
body.chat-open .comm-channels-panel {
  display: none !important;
}

/* ── Кнопка громкой связи в звонке ── */
.call-speaker-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s;
}
.call-speaker-btn.active {
  background: rgba(0,184,148,.4) !important;
  color: #00b894;
}
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Сайдбар */
.sidebar {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
}

/* Чат открыт */
body.chat-open .chat-area {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}

/* Канал сообщества */
body.comm-open.chat-open .chat-area {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}

/* ── Safe area для остальных экранов ── */

/* Настройки */
.settings-overlay {
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
}
.settings-modal {
  height: calc(100dvh - env(safe-area-inset-top, 0px)) !important;
}

/* Панель каналов сообщества */
#comm-channels-panel {
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
  height: 100dvh !important;
}

/* Экран звонка */
#call-screen {
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing: border-box !important;
}

/* Входящий звонок */
#incoming-call {
  top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

/* Сообщества — список */
body.comm-open .communities-sidebar {
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
}

/* ── Галерея изображений ── */
.msg-img-group {
  grid-template-columns: 1fr 1fr !important;
  width: calc(100vw - 80px) !important;
  max-width: 80vw !important;
}
.msg-img-group-item {
  height: 160px !important;
  aspect-ratio: unset !important;
}
.msg-img-group.count-1 { 
  grid-template-columns: 1fr !important; 
}
.msg-img-group.count-1 .msg-img-group-item { 
  height: 260px !important;
  aspect-ratio: unset !important;
}
/* 3 фото — последнее на всю ширину */
.msg-img-group.count-3 .msg-img-group-item:first-child { 
  grid-column: 1 !important;
  height: 160px !important;
  aspect-ratio: unset !important;
}
.msg-img-group.count-3 .msg-img-group-item:nth-child(2) { 
  grid-column: 2 !important;
  height: 160px !important;
  aspect-ratio: unset !important;
}
.msg-img-group.count-3 .msg-img-group-item:last-child { 
  grid-column: span 2 !important; 
  height: 160px !important;
  aspect-ratio: unset !important;
}
.msg-img-group.count-5 .msg-img-group-item:first-child,
.msg-img-group.count-5 .msg-img-group-item:nth-child(2) { 
  height: 180px !important;
  aspect-ratio: unset !important;
}
.msg-img-group.count-7 .msg-img-group-item:first-child { 
  grid-column: span 2 !important; 
  height: 180px !important;
  aspect-ratio: unset !important;
}
/* Видео в сообщении */
.msg-bubble.has-img video {
  width: 100% !important;
  max-width: 100% !important;
}

/* Заменяем contenteditable на textarea стиль */
#msg-input {
  -webkit-user-modify: read-write !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: text !important;
  cursor: text !important;
}

/* Textarea замена для Capacitor 
body.capacitor-android #msg-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 8px 48px 8px 0 !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  resize: none !important;
  width: 100% !important;
  min-height: 36px !important;
  max-height: 120px !important;
} */

/* Textarea для Capacitor — такой же как contenteditable */
body.capacitor-android #msg-input {
  background: var(--bg3) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 20px !important;
  padding: 10px 48px 10px 16px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: .93rem !important;
  min-height: 44px !important;
  max-height: 120px !important;
  height: 44px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  resize: none !important;
  overflow-y: auto !important;
  width: 100% !important;
}

#channel-card-modal .profile-card {
  max-height: 85dvh !important;
  overflow-y: auto !important;
}