/*
──────────────────────────────────────────────────────────────────
Copyright (c) 2026 Ilhom Abdullayev (@aib81).
Proyekt: AT MEDSERT — sertifikatsiya tizimi (ISO 13485).
Email: ilhom8108@gmail.com · Telegram: @aib81 (id: 834760045)

Mualliflik huquqi muallifga tegishli. Without written permission —
no copying, forking, or commercial use is allowed.
──────────────────────────────────────────────────────────────────
*/
/* Окно нового сообщения поверх системы (web 077).

   Живёт в components/, а не в pages/chat.css: всплывать должно на любой
   странице, а тот файл грузится только в самом чате. */

.chat-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Пустая стопка не должна перехватывать клики по странице. */
  pointer-events: none;
  max-width: min(360px, calc(100vw - 36px));
}

.chat-toast {
  pointer-events: auto;
  position: relative;
  cursor: pointer;
  padding: 12px 34px 12px 14px;
  border-radius: 10px;
  border-left: 4px solid var(--accent-color, #007084);
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #2c3e50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  animation: chat-toast-in .18s ease-out;
}

@keyframes chat-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-toast:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.chat-toast__head {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 2px;
}

.chat-toast__body {
  font-size: .86rem;
  color: var(--text-secondary, #5a6b7b);
  /* Длинное сообщение не должно растягивать окно на пол-экрана. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.chat-toast__close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  color: var(--text-secondary, #7f8c8d);
  padding: 2px 4px;
}

.chat-toast__close:hover {
  color: var(--text-primary, #2c3e50);
}

/* Узкий экран: окно во всю ширину, чтобы текст читался. */
@media (max-width: 520px) {
  .chat-toast-stack {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}


/* ── Полоса «включите уведомления» (web 091) ─────────────────────────
   Висит поверх страницы снизу: сообщение, которое никто не увидел,
   дороже одной строки на экране. */
.notify-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(720px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 4px solid #f39c12;
  background: var(--bg-secondary, #fff);
  color: var(--text-primary, #2c3e50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  font-size: .9rem;
}

.notify-banner__text {
  flex: 1;
  min-width: 0;
}

@media (max-width: 560px) {
  .notify-banner {
    flex-wrap: wrap;
    bottom: 10px;
  }
}