/* Расширяю диалоги, которым нужно больше места для списков. */
.wide-dialog {
  width: min(720px, 94vw);
}

/* Собираю аватар, имя и действия в одну строку пользователя. */
.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  min-width: 0;
}

.person-name {
  flex: 1;
  min-width: 0;
}

.person-name strong,
.person-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-name strong {
  font-size: 0.84rem;
}

.person-name small {
  font-size: 0.7rem;
  color: #a99aac;
  margin-top: 3px;
}

.person-row > .avatar {
  flex-shrink: 0;
}

.person-row .secondary,
.quiet {
  font-size: 0.72rem;
  padding: 8px;
  border-radius: 6px;
}

.quiet {
  background: transparent;
  color: #c7a9bc;
}

.danger-text {
  color: #ff91ae;
}

.secondary {
  background: #402b3d;
  color: #f5c7db;
  padding: 10px;
  border-radius: 8px;
  min-height: 36px;
}

/* Ограничиваю высоту списка недавних собеседников и добавляю прокрутку. */
.direct-sidebar {
  padding: 12px 10px;
  max-height: 29vh;
  overflow-y: auto;
  border-top: 1px solid #3b2938;
}

.direct-sidebar .section-label {
  font-size: 0.6rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.direct-person {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  gap: 9px;
  background: transparent;
  padding: 8px;
  border-radius: 7px;
  font-size: 0.78rem;
  overflow: hidden;
}

.direct-person:hover {
  background: #382737;
}

.direct-person .avatar,
.voice-person .avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  font-size: 0.8rem;
}

/* Показываю участников голосовой комнаты компактно под её названием. */
.voice-person {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.73rem;
  color: #c4a9bd;
  margin: 7px 0;
}

.room-presence {
  margin-left: 25px;
}

.channel-group {
  margin-bottom: 7px;
}

.channel-group .channel {
  width: 100%;
}

/* Размещаю поле поиска и кнопку рядом с помощью Grid. */
.search-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.search-line label {
  grid-column: 1/-1;
  margin: 5px 0;
}

.search-line .primary {
  padding: 10px;
}

.members .person-row {
  flex-wrap: wrap;
}

.members .person-name {
  min-width: 80px;
}

.members .person-row .quiet {
  margin-left: auto;
}

/* Растягиваю область чата по доступной высоте. */
.chat-view {
  flex: 1;
  min-height: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.chat-dialog {
  width: min(900px, 96vw);
  height: min(790px, 92dvh);
  padding: 24px 18px 12px;
}

.chat-dialog-slot,
#chat-dialog-slot {
  height: 100%;
  min-height: 0;
}

#chat-pane {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.chat-heading h2 {
  font-size: 1.1rem;
  margin: 0 35px 8px 0;
}

.chat-heading p {
  font-size: 0.72rem;
  color: #c0a7bc;
  margin: 0 0 7px;
}

.chat-heading small {
  display: block;
  font-size: 0.67rem;
  color: #99889f;
  line-height: 1.5;
}

/* Прокручиваю историю сообщений отдельно от поля ввода. */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 160px;
  max-height: 62dvh;
  padding: 14px 0;
  overscroll-behavior: contain;
}

/* Оформляю сообщение с автором, временем и текстом. */
.message {
  display: flex;
  gap: 11px;
  padding: 12px 4px;
  border-top: 1px solid #332636;
}

.message > .avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.message > div {
  min-width: 0;
  flex: 1;
}

.message-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.message-heading strong {
  font-size: 0.8rem;
  color: #eccde0;
}

.message-heading time {
  font-size: 0.65rem;
  color: #a18b9f;
}

.message-delete {
  margin-left: auto;
  background: transparent;
  color: #b992a7;
  font-size: 0.65rem;
  padding: 3px 5px;
}

/* Сохраняю переносы строк сообщения и разрешаю перенос длинных слов. */
.message p {
  font-size: 0.87rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  margin: 5px 0 0;
}

.compact-chat .message {
  padding: 5px 4px;
}

.compact-chat .message > .avatar {
  width: 25px;
  height: 25px;
  font-size: 0.7rem;
}

/* Отделяю форму отправки от истории сообщений. */
#chat-form {
  display: flex;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid #513447;
}

#chat-input {
  resize: vertical;
  min-height: 48px;
  max-height: 150px;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.85rem;
  color: #f3e1ee;
  background: #17121d;
  border: 1px solid #59394f;
  border-radius: 8px;
  padding: 12px;
}

#chat-send {
  align-self: flex-end;
}

#chat-error {
  font-size: 0.74rem;
  color: #ffabc8;
  margin: 8px 0;
}

/* Задаю оформление окна настроек и его вкладок. */
.settings-dialog {
  width: min(700px, 94vw);
}

.settings-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
  border-bottom: 1px solid #52334a;
  padding-bottom: 12px;
}

.settings-tabs button {
  background: transparent;
  padding: 10px;
  color: #c2a6b9;
  border-radius: 8px;
}

.settings-tabs .active {
  background: #603147;
  color: #ffd0e2;
}

.settings-dialog select,
#channel-dialog select,
#retention-days {
  width: 100%;
  padding: 11px;
  border: 1px solid #654057;
  border-radius: 8px;
  background: #1b1521;
  color: #f6ddea;
}

.settings-dialog input[type='range'] {
  width: 100%;
  padding: 0;
  accent-color: #ed4575;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #ed4575;
}

.settings-dialog .primary,
.settings-dialog .secondary {
  margin: 10px 7px 10px 0;
}

.settings-dialog meter {
  display: block;
  width: 100%;
  height: 22px;
  accent-color: #e6325d;
}

#settings-status,
#friends-status,
#server-settings-status {
  color: #f0a4c0;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Убираю анимации и переходы при включённом уменьшении движения. */
.reduce-motion * {
  animation: none !important;
  transition: none !important;
}

/* Визуально скрываю вспомогательный текст, оставляя его для экранных дикторов. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.stage-top {
  gap: 12px;
  flex-wrap: wrap;
}

.stage-top .secondary {
  font-size: 0.72rem;
}

.screen-hint {
  max-width: 100%;
}

#screen-status {
  color: #ffc1d9;
}

.sidebar-body > .sidebar-nav {
  font-weight: 600;
}

.room-view > .screen-hint {
  display: none;
}

/* Подстраиваю расположение и размеры элементов под указанную ширину экрана. */
@media (max-width: 760px) {
  .person-row {
    flex-wrap: wrap;
  }

  .person-row .person-name {
    min-width: 90px;
  }

  .person-row > .secondary,
  .person-row > .quiet {
    min-height: 40px;
  }

  .chat-view {
    padding: 14px 10px;
  }

  .chat-dialog {
    padding: 25px 12px 12px;
    height: 92dvh;
  }

  .chat-messages {
    max-height: none;
  }

  #chat-send {
    padding: 12px;
    font-size: 0.7rem;
  }

  .settings-tabs {
    gap: 3px;
  }

  .settings-tabs button {
    font-size: 0.75rem;
    padding: 8px;
  }

  .direct-sidebar {
    max-height: 22vh;
  }

  .chat-heading small {
    font-size: 0.62rem;
  }

  .message p {
    font-size: 0.8rem;
  }
}