/* =========================================================================
   Дополнительные стили: вход по коду, профиль, безопасные зоны, адаптив.
   Подключаются после styles.css.
   ========================================================================= */

/* Атрибут hidden должен побеждать любые display из классов (.field, .auth__modes,
   .profile-row и т.п.), иначе поля остаются на экране. */
[hidden] {
  display: none !important;
}

/* ----------------------------- вход по коду ----------------------------- */

.auth {
  overflow-y: auto;
}

.auth__modes {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: var(--bg-elev-2);
}

.auth__mode {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 8px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .16s, color .16s;
}

.auth__mode.is-active {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.auth__code-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.auth__code-row .field {
  flex: 1 1 auto;
  min-width: 0;
}

.auth__code-row .btn {
  flex: 0 0 auto;
  padding: 11px 14px;
  white-space: nowrap;
}

.auth__hint--code {
  text-align: left;
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}

.auth__bind {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
}

.auth__bind summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.auth__bind[open] summary {
  margin-bottom: 12px;
}

.auth__bind .field {
  margin-bottom: 10px;
}

.auth__bind .auth__hint--code {
  margin-bottom: 4px;
}

.auth__server {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

/* ------------------------------- профиль -------------------------------- */

.profile-contacts {
  margin: 4px 0 14px;
  padding: 2px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  min-height: 44px;
}

.profile-row + .profile-row {
  border-top: 1px solid var(--line);
}

.profile-row__label {
  font-size: 14px;
  font-weight: 500;
}

.profile-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-row__value {
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-row__btn {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 13px;
}

.profile-contacts__note {
  margin: 8px 0 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-faint);
}

.profile-code-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 8px;
}

.profile-code-row .field {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.profile-code-row .btn {
  flex: 0 0 auto;
  padding: 11px 14px;
}

/* -------------------------------- тосты --------------------------------- */

.toast-root {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  max-width: min(92vw, 420px);
}

/* --------------------------- безопасные зоны ---------------------------- */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

.sidebar__top {
  padding-top: calc(10px + var(--safe-top));
  padding-left: calc(10px + var(--safe-left));
}

.sidebar__footer {
  padding-bottom: calc(8px + var(--safe-bottom));
}

.chat-top {
  padding-top: calc(8px + var(--safe-top));
  padding-right: calc(10px + var(--safe-right));
}

.messages {
  overscroll-behavior-y: contain;
}

.composer {
  padding-bottom: calc(10px + var(--safe-bottom));
  padding-left: calc(10px + var(--safe-left));
  padding-right: calc(10px + var(--safe-right));
}

.call {
  height: 100dvh;
}

.call__info {
  padding-top: calc(18px + var(--safe-top));
}

.call__controls {
  padding-bottom: calc(18px + var(--safe-bottom));
  flex-wrap: wrap;
}

/* ------------------------------- адаптив -------------------------------- */

/* Телефоны: узкие и «высокие» экраны, крупный системный шрифт */
@media (max-width: 420px) {
  .auth {
    padding: 14px;
  }

  .auth__card {
    padding: 24px 18px 18px;
    border-radius: 20px;
  }

  .auth__brand h1 {
    font-size: 22px;
  }

  .auth__code-row,
  .profile-code-row {
    flex-direction: column;
    align-items: stretch;
  }

  .auth__code-row .btn,
  .profile-code-row .btn {
    width: 100%;
  }

  .sidebar__top {
    gap: 6px;
  }

  .call__controls {
    gap: 10px;
  }
}

/* Маленькая высота (ландшафт телефона, клавиатура): карточка входа скроллится */
@media (max-height: 700px) {
  .auth {
    place-items: start center;
  }

  .auth__card {
    margin: 8px 0 20px;
  }

  .auth__brand {
    margin-bottom: 14px;
  }

  .auth__logo,
  .empty__logo {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .auth {
    padding: 8px;
  }

  .auth__brand {
    display: none;
  }

  .auth__card {
    max-width: 520px;
  }
}

/* Планшеты и большие мониторы: читаемая ширина переписки */
@media (min-width: 1280px) {
  .messages__inner {
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* Электрон: рамка окна уже занимает место сверху */
body.is-electron .sidebar__top,
body.is-electron .chat-top {
  padding-top: 10px;
}

/* --------------------- модалки: прокрутка на низких экранах -------------- */
/* Флекс-элемент по умолчанию не сжимается ниже содержимого, из-за чего
   .modal__body не получал прокрутку и нижние кнопки уезжали за экран. */
.modal__body {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal {
  max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
}

@media (max-height: 640px) {
  .modal-backdrop {
    padding: 8px;
  }

  .modal {
    max-height: calc(100dvh - 12px);
    border-radius: 16px;
  }

  .modal__head {
    padding: 10px 14px 8px;
  }

  .modal__body {
    padding: 0 14px 6px;
  }

  .modal__foot {
    padding: 8px 14px 10px;
  }

  .profile-row {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}