/* Чат прототипа. Отдельным файлом, потому что подключается и к сайту,
   и к админке — а палитры у них разные, поэтому переменные свои. */

.chat {
  --chat-navy: #0F2557;
  --chat-gold: #F0A500;
  --chat-gold-deep: #C98800;
  --chat-white: #FFFFFF;
  --chat-mist: #F5F7FA;
  --chat-line: #DCE3EE;
  --chat-ink: #1E2430;
  --chat-font: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- чат прототипа ----------
   Висит на каждой странице. Заказчик смотрит прототип и тут же
   пишет замечания, не переключаясь в мессенджер. */

.chat { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--chat-font); }

.chat__toggle {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  border: 0; background: var(--chat-gold); color: #241900; cursor: pointer;
  box-shadow: 0 10px 30px rgba(15, 37, 87, .28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s, background .16s;
}
.chat__toggle:hover { transform: translateY(-2px); }
.chat__toggle.is-open { background: var(--chat-navy); color: var(--chat-white); }
.chat__badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
  border-radius: 99px; background: #C0392B; color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

.chat__panel {
  /* Панель — это <section>, а у сайта есть общее правило с крупными
     отступами для всех секций. Гасим его, иначе шапка чата уезжает вниз. */
  padding: 0;
  margin: 0;
  position: absolute; right: 0; bottom: 72px; width: min(380px, calc(100vw - 40px));
  height: min(540px, calc(100vh - 140px));
  background: var(--chat-white); border: 1px solid var(--chat-line); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(15, 37, 87, .24);
  display: flex; flex-direction: column; overflow: hidden;

  /* Окно тянется за правый нижний угол. Пределы нужны, чтобы его нельзя
     было схлопнуть в точку или растянуть за край экрана. */
  resize: both;
  min-width: 300px;
  min-height: 300px;
  max-width: 94vw;
  max-height: 90vh;
}
/* Когда окно передвинули, оно перестаёт быть привязанным к кнопке
   и живёт по своим координатам. */
.chat__panel.is-free { position: fixed; right: auto; bottom: auto; }

.chat__head {
  cursor: move; user-select: none;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--chat-navy); color: var(--chat-white);
}
.chat__head b { display: block; font-size: 15px; }
.chat__status { font-size: 12.5px; color: rgba(232, 237, 247, .65); }
.chat__status.is-on { color: #8FD3A6; }
.chat__close {
  margin-left: auto; cursor: pointer; background: none; border: 0; color: rgba(255, 255, 255, .7);
  font-size: 16px; cursor: pointer; padding: 4px 6px;
}
.chat__close:hover { color: var(--chat-white); }

.chat__log {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--chat-mist);
}
.chat__msg {
  max-width: 86%; padding: 10px 13px 20px; border-radius: 10px; font-size: 14.5px;
  line-height: 1.5; position: relative; white-space: normal; word-break: break-word;
}
.chat__msg.from-agent { align-self: flex-start; background: var(--chat-white); border: 1px solid var(--chat-line); color: var(--chat-ink); }
.chat__msg.from-me { align-self: flex-end; background: var(--chat-navy); color: #EAEFF9; }
.chat__time { position: absolute; right: 11px; bottom: 6px; font-size: 11px; opacity: .55; }

.chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--chat-line); }
.chat__form textarea {
  flex: 1; font: inherit; font-size: 15px; line-height: 1.4; resize: none;
  border: 1px solid var(--chat-line); border-radius: 4px; padding: 10px 12px; max-height: 120px;
}
.chat__form textarea:focus { outline: 2px solid var(--chat-gold); outline-offset: -1px; border-color: transparent; }
.chat__form button {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 4px;
  background: var(--chat-gold); color: #241900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat__form button:hover { background: var(--chat-gold-deep); color: var(--chat-white); }

@media (max-width: 520px) {
  .chat { right: 14px; bottom: 14px; }
  .chat__panel { bottom: 68px; height: min(70vh, 520px); }
}