/* ===================================================================
   AYA-School — Мессенджер: раскладка sidebar + main.
   Только общение (НЕ задания). Переиспользует виджет AyaChat (chat.*).
   Приёмы раскладки перенесены из AYA-Connect (sidebar + main,
   мобильная логика «сначала список → тап → диалог во весь экран»).
   Бренд-токены — из styles.css (петроль/бирюза/золото).
   =================================================================== */

html, body.msgr-body { height: 100%; }
body.msgr-body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  overflow: hidden;
}

/* Шапка мессенджера */
.msgr-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.msgr-spacer { flex: 1 1 auto; }

/* Двухколоночная область — на ВСЮ ширину/высоту (как Connect), без центрирования. */
.msgr-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ── Сайдбар (список диалогов) — фиксированный левый столбец ~340px ── */
.msgr-sidebar {
  flex: 0 0 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--sage);
  box-shadow: var(--shadow);
  z-index: 2;
}
.msgr-sidebar-head {
  flex: 0 0 auto;
  padding: 16px 18px 12px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  border-bottom: 1px solid var(--sage);
}
/* Когда есть кнопка «＋» — раскладываем заголовок и кнопку по краям. */
.msgr-sidebar-head--withnew {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Кнопка «＋»: новая заметка или чат */
.msgr-new-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--sage);
  background: var(--petrol-grad);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.msgr-new-btn:hover { transform: translateY(-1px); }
.msgr-new-btn:active { transform: scale(.95); }

/* Меню «＋»: новая заметка / начать чат по связям */
.msgr-newmenu {
  position: absolute;
  top: calc(100% - 6px);
  right: 12px; left: 12px;
  z-index: 6;
  max-height: 60vh; overflow-y: auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--sage);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.msgr-newmenu[hidden] { display: none; }
.msgr-newmenu-item {
  width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--ink);
  font-family: inherit; text-align: left;
}
.msgr-newmenu-item:hover { background: rgba(26, 170, 180, .08); }
.msgr-newmenu-ic { flex: 0 0 auto; font-size: 18px; }
.msgr-newmenu-body { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.msgr-newmenu-label {
  display: block; font-weight: 600; font-size: 14px; color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msgr-newmenu-sub {
  display: block; font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msgr-newmenu-head {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted);
}
.msgr-newmenu-hint {
  padding: 4px 12px 8px;
  font-size: 13px; color: var(--muted); line-height: 1.45;
}
.msgr-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Пункт диалога */
.msgr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.msgr-item:hover { background: rgba(26, 170, 180, .08); }
.msgr-item.is-active {
  background: rgba(26, 170, 180, .14);
  border-color: rgba(26, 170, 180, .35);
}
.msgr-item-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--petrol-grad);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.msgr-item-body { flex: 1 1 auto; min-width: 0; }
.msgr-item-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgr-item-sub {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}

/* Состояния списка */
.msgr-state, .msgr-empty {
  padding: 18px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ── Главная панель (открытый диалог) ──────────────────────────── */
.msgr-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}
.msgr-main-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--sage);
}
.msgr-back-btn {
  display: none;            /* виден только на мобиле */
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sage);
  background: var(--card);
  color: var(--accent-2);
  font-size: 20px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.msgr-main-titles { min-width: 0; }
.msgr-main-title {
  font-family: var(--head);
  font-weight: 700;
  font-size: 17px;
  color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msgr-main-sub {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Контейнер виджета чата */
.msgr-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: none;            /* показываем, когда диалог открыт */
}
.msgr-layout.is-open .msgr-chat { display: flex; }
/* Виджет AyaChat (.ayac) должен занять всю высоту контейнера */
.msgr-chat .ayac {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Заглушка пустого состояния */
.msgr-placeholder {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.msgr-layout.is-open .msgr-placeholder { display: none; }
/* Пока диалог не открыт — прячем шапку диалога */
.msgr-layout:not(.is-open) .msgr-main-head { display: none; }

/* ── Адаптив: на мобиле — сначала список, тап → диалог во весь экран ── */
@media (max-width: 760px) {
  .msgr-layout { max-width: none; }
  .msgr-sidebar {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
    box-shadow: none;
  }
  .msgr-main {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
  }
  /* Когда диалог открыт — список прячем, диалог во весь экран */
  .msgr-layout.is-open .msgr-sidebar { display: none; }
  .msgr-layout.is-open .msgr-main { display: flex; }
  .msgr-back-btn { display: flex; }
}