* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #0d0f14;
  color: #e6ecff;
  font-family: Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  overflow-y: hidden;
}

/* ===================== */
/* ГЛОБАЛЬНЫЕ ПАРАМЕТРЫ ПАНЕЛЕЙ И UI-ЭЛЕМЕНТОВ */
/* ===================== */

:root {
  /* ---------- Обёртка страницы ---------- */
  --page-max-width: 1200px;

  /* Отступы вокруг всего приложения (#app) */
  --app-padding-top: 16px;
  --app-padding-right: 16px;
  --app-padding-bottom: 10px;
  --app-padding-left: 16px;

  /* ---------- TOP BAR (общие отступы) ---------- */
  --topbar-margin-top: 0px;
  --topbar-margin-right: 0px;
  --topbar-margin-bottom: 16px;
  --topbar-margin-left: 0px;

  --topbar-padding-top: 10px;
  --topbar-padding-right: 12px;
  --topbar-padding-bottom: 10px;
  --topbar-padding-left: 12px;

  /* TOP BAR: надпись "IRONCORE" (лево) */
  --topbar-left-font-size: 25px;
  --topbar-left-letter-spacing: 0.12em;
  --topbar-left-padding-block: 0px;
  --topbar-left-padding-inline: 0px;
  --topbar-left-border-radius: 0px;

  /* TOP BAR: надпись "NOVA" (центр) */
  --topbar-center-font-size: 20px;
  --topbar-center-letter-spacing: 0.20em;

  /* TOP BAR: правая зона (пока пустая, но есть размер) */
  --topbar-right-font-size: 13px;

  /* ---------- Layout: левая+правая колонка ---------- */
  --layout-max-width: 1300px;
  --layout-gap: 14px;
  --layout-margin-top: 0px;
  --layout-margin-right: 0px;
  --layout-margin-bottom: 0px;
  --layout-margin-left: 0px;

  /* ---------- Левая колонка (auth-панель) ---------- */
  --left-panel-width: 320px;
  --left-panel-min-height: calc(100vh - 720px);
  --left-panel-margin-top: 0px;
  --left-panel-margin-right: 0px;
  --left-panel-margin-bottom: 0px;
  --left-panel-margin-left: 0px;

  /* ---------- Правая колонка (панель чата) ---------- */
  --right-panel-min-height: calc(100vh - 140px);
  --right-panel-margin-top: 8px;
  --right-panel-margin-right: 0px;
  --right-panel-margin-bottom: 0px;
  --right-panel-margin-left: 0px;

  /* ---------- Карточки (общие auth/чат) ---------- */
  --card-padding-top: 24px;
  --card-padding-right: 24px;
  --card-padding-bottom: 28px;
  --card-padding-left: 24px;
  --card-border-radius: 16px;

  /* Верхний паддинг только для карточки чата (правая колонка) */
  --chat-card-padding-top: 4px;

  /* Левая карточка (auth) — отдельно поджат сверху */
  --auth-card-padding-top: 16px;

  /* ---------- Кнопки (все .btn) ---------- */
  --btn-font-size: 14px;
  --btn-padding-block: 8px;
  --btn-padding-inline: 12px;
  --btn-border-radius: 999px;

  /* Отдельно: кнопка "Отправить" гостевого чата */
  --guest-chat-send-btn-padding-inline: 14px;

  /* ---------- AUTH: шрифты и поля ---------- */
  --auth-label-font-size: 12px;
  --auth-input-font-size: 14px;
  --auth-input-padding-block: 7px;
  --auth-input-padding-inline: 10px;
  --auth-error-font-size: 13px;
  --auth-success-font-size: 13px;
  --auth-tabs-font-size: 12px;
  --auth-tabs-padding-block: 6px;
  --auth-tabs-padding-inline: 12px;

  /* ---------- Баннер "Гостевой режим" ---------- */
  --guest-banner-font-size: 12px;
  --guest-banner-line-height: 1.32;

  --guest-banner-margin-top: 0px;
  --guest-banner-margin-right: 0px;
  --guest-banner-margin-bottom: 8px;
  --guest-banner-margin-left: 0px;

  --guest-banner-padding-top: 6px;
  --guest-banner-padding-right: 12px;
  --guest-banner-padding-bottom: 6px;
  --guest-banner-padding-left: 12px;

  /* ---------- Контейнер гостевого чата ---------- */
  --guest-chat-container-margin-top: 0px;
  --guest-chat-container-margin-right: 0px;
  --guest-chat-container-margin-bottom: 0px;
  --guest-chat-container-margin-left: 0px;

  /* ---------- ОБЛАСТЬ СООБЩЕНИЙ ВНУТРИ ЧАТА ---------- */
  /* Отступы ОБЛАСТИ сообщений от краёв панели чата */
  --guest-messages-margin-top: 10px;
  --guest-messages-margin-right: 10px;
  --guest-messages-margin-bottom: 14px;
  --guest-messages-margin-left: 5px;

  /* Внутренние отступы внутри области сообщений (от края области до пузырей) */
  --guest-messages-padding-top: 0px;
  --guest-messages-padding-right: 15px;
  --guest-messages-padding-bottom: 0px;
  --guest-messages-padding-left: 0px;

  /* Ширина колонки сообщений */
  --guest-messages-max-width: 100%;

  /* Отступ первого сообщения от верхнего края ОБЛАСТИ */
  --guest-first-message-margin-top: 0px;

  /* Шрифт/пузырьки */
  --guest-message-font-size: 15px;
  --guest-message-line-height: 1.4;
  --guest-bubble-font-size: 15px;
  --guest-bubble-padding-top: 4px;
  --guest-bubble-padding-right: 12px;
  --guest-bubble-padding-bottom: 7px;
  --guest-bubble-padding-left: 12px;
  --guest-bubble-radius: 12px;

  /* Расстояние между сообщениями */
  --guest-message-gap: 10px;

  /* ---------- Строка ввода внизу чата ---------- */
  --guest-chat-input-row-margin-top: 8px;
  --guest-chat-input-row-margin-right: 0px;
  --guest-chat-input-row-margin-bottom: 0px;
  --guest-chat-input-row-margin-left: 0px;

  /* ⬆ шрифт побольше + больше воздуха, чтобы текст не прилипал к краю */
  --guest-chat-input-font-size: 16px;
  --guest-chat-input-line-height: 1.5;
  --guest-chat-input-padding-block: 10px;
  --guest-chat-input-padding-inline: 12px;
}

/* Обёртка страницы */
.page-wrapper {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

/* ===================== */
/*   TOP BAR (IronCore / Nova) */
/* ===================== */

.topbar {
  width: 100%;
  margin: var(--topbar-margin-top) var(--topbar-margin-right) var(--topbar-margin-bottom) var(--topbar-margin-left);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--topbar-padding-top) var(--topbar-padding-right) var(--topbar-padding-bottom) var(--topbar-padding-left);
  border-radius: 12px;
  background:
    radial-gradient(circle at top left, rgba(0, 180, 255, 0.24), transparent 55%),
    radial-gradient(circle at top right, rgba(255, 130, 40, 0.22), transparent 60%),
    rgba(12, 16, 26, 0.92);
  border: 1px solid rgba(120, 160, 255, 0.25);
  box-shadow: 0 0 18px rgba(0, 150, 255, 0.25);
}

.topbar-left {
  font-size: var(--topbar-left-font-size);
  letter-spacing: var(--topbar-left-letter-spacing);
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--topbar-left-padding-block) var(--topbar-left-padding-inline);
  border-radius: var(--topbar-left-border-radius);
  color: #ff9a47;
  text-shadow:
    0 0 6px rgba(255, 153, 70, 0.85),
    0 0 14px rgba(255, 170, 90, 0.55),
    0 0 26px rgba(255, 190, 120, 0.35);
  transition: text-shadow 0.12s ease, opacity 0.12s ease;
}

.topbar-center {
  font-size: var(--topbar-center-font-size);
  letter-spacing: var(--topbar-center-letter-spacing);
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  color: #8fbaff;
  text-shadow:
    0 0 6px rgba(120, 180, 255, 0.9),
    0 0 14px rgba(100, 160, 255, 0.6),
    0 0 28px rgba(80, 140, 255, 0.45);
  transition: text-shadow 0.12s ease, transform 0.12s ease;
}

.topbar-right {
  text-align: right;
  font-size: var(--topbar-right-font-size);
}

.topbar-right-inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.topbar-user-email {
  font-size: 12px;
  opacity: 0.8;
}

.topbar-logout-btn {
  padding-block: 6px;
  padding-inline: 16px;
  font-size: 12px;
}

/* ===================== */

#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--app-padding-top) var(--app-padding-right) var(--app-padding-bottom) var(--app-padding-left);
  box-sizing: border-box;
}

/* Общий контейнер приложения (карточки) */
.app-container {
  min-width: 280px;
  max-width: 460px;

  padding: var(--card-padding-top) var(--card-padding-right) var(--card-padding-bottom) var(--card-padding-left);
  border-radius: var(--card-border-radius);

  background:
    radial-gradient(circle at top left, rgba(0, 180, 255, 0.26), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 130, 40, 0.22), transparent 60%),
    rgba(18, 22, 32, 0.88);
  border: 1px solid rgba(120, 160, 255, 0.25);
  box-shadow: 0 0 28px rgba(0, 150, 255, 0.32);
}

/* Левая карточка — меньше паддинг сверху */
.layout-column-left .app-container {
  padding-top: var(--auth-card-padding-top);
}

/* Правая карточка (чат) */
.layout-column-right .app-container {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;

  padding: var(--chat-card-padding-top) 18px 18px 18px;

  /* ✅ якорь для абсолютных кнопок внутри (крестик в админке) */
  position: relative;

  /* 🔥 фиксируем высоту панели чата — внутри неё будет скролл сообщений */
  height: var(--right-panel-min-height);
  max-height: var(--right-panel-min-height);
}

/* ===== ВЫСОТА ПАНЕЛЕЙ ===== */

.layout-column-left .app-container {
  min-height: var(--left-panel-min-height);
  margin: var(--left-panel-margin-top)
          var(--left-panel-margin-right)
          var(--left-panel-margin-bottom)
          var(--left-panel-margin-left);
}

.layout-column-right .app-container {
  margin: var(--right-panel-margin-top)
          var(--right-panel-margin-right)
          var(--right-panel-margin-bottom)
          var(--right-panel-margin-left);
}

/* Заголовок приложения (на будущее) */
.app-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4f6ff;
  margin-bottom: 4px;
}

.app-subtitle {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 18px;
}

/* ===================== */
/* AUTH */
/* ===================== */

.auth-card {
  display: flex;
  flex-direction: column;
}

.auth-header,
.auth-logo,
.auth-heading {
  display: none;
}

/* дополнительные элементы auth */

.auth-message {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.auth-message-error {
  background: rgba(120, 20, 32, 0.82);
  border: 1px solid rgba(255, 120, 140, 0.7);
  color: #ffdce0;
}

.auth-message-success {
  background: rgba(16, 90, 52, 0.84);
  border: 1px solid rgba(110, 230, 180, 0.7);
  color: #deffef;
}

/* Кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--btn-border-radius);
  border: 1px solid transparent;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--btn-font-size);
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(90deg, #ff7a3c, #ffb347);
  color: #0b0d11;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(255, 140, 60, 0.4);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 🔒 Состояние отключённой кнопки (в т.ч. когда Nova отвечает) */
.btn[disabled],
.btn.btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  background: linear-gradient(90deg, #5b6474, #3b4250);
}

.btn[disabled]:hover,
.btn[disabled]:active,
.btn.btn-disabled:hover,
.btn.btn-disabled:active {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  background: transparent;
  border-color: rgba(130, 170, 255, 0.55);
  color: #d7e1ff;
}

.btn-secondary:hover {
  background: rgba(40, 60, 100, 0.6);
  box-shadow: 0 0 12px rgba(120, 160, 255, 0.35);
}

/* ===================== */
/* layout: слева auth, справа чат */
/* ===================== */

.layout-root {
  display: flex;
  flex-direction: row;
  gap: var(--layout-gap);
  width: 100%;
  max-width: var(--layout-max-width);
  margin: var(--layout-margin-top)
          var(--layout-margin-right)
          var(--layout-margin-bottom)
          var(--layout-margin-left);
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.layout-column {
  display: flex;
  flex-direction: column;
}

.layout-column-left {
  flex: 0 0 var(--left-panel-width);
  max-width: var(--left-panel-width);
}

.layout-column-right {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

/* ======== layout для авторизованного чата ======== */

.layout-root-auth {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: var(--layout-max-width);
  margin: var(--layout-margin-top)
          var(--layout-margin-right)
          var(--layout-margin-bottom)
          var(--layout-margin-left);
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
}

.layout-column-chat-only {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.layout-chat-top-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.logout-btn {
  font-size: 13px;
  padding-inline: 16px;
}

.layout-chat-main {
  display: flex;
}

/* Адаптив под мобильные */

@media (max-width: 800px) {
  body {
    overflow-y: auto;
    height: auto;
  }

  #app {
    height: auto;
    min-height: 100vh;
    padding: 12px 12px;
  }

  .page-wrapper {
    max-width: 100%;
  }

  .layout-root,
  .layout-root-auth {
    flex-direction: column;
    max-width: 100%;
    justify-content: flex-start;
    overflow: visible;
    margin: 0;
  }

  .layout-column-left,
  .layout-column-right,
  .layout-column-chat-only {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .app-container,
  .layout-column-right .app-container,
  .layout-column-left .app-container {
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  /* 🔥 на мобильных высоту чата не фиксируем */
  .layout-column-right .app-container {
    height: auto;
    max-height: none;
  }
}

/* welcome-экран (на будущее) */

.welcome-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* AUTH формы */

.auth-body {
  margin-top: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* actions под формой (кнопка "Войти" и прочие) */
.auth-actions {
  margin-top: 10px;           /* 👈 опускаем кнопку ниже, чтобы не липла к полю пароля */
  display: flex;
  flex-direction: column;
}

/* чуть стабильнее кликабельность и высота */
.auth-primary-btn {
  min-height: 38px;
}


.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-label {
  font-size: var(--auth-label-font-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9faccf;
}

.auth-input {
  border-radius: 10px;
  border: 1px solid rgba(110, 140, 230, 0.55);
  background: rgba(7, 10, 18, 0.9);
  color: #e6ecff;
  padding: var(--auth-input-padding-block) var(--auth-input-padding-inline);
  font-size: var(--auth-input-font-size);
  outline: none;
}

.auth-input:focus {
  border-color: #00b7ff;
  box-shadow: 0 0 0 1px rgba(0, 183, 255, 0.4);
}

/* доп. элементы auth */

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-password-toggle {
  background: none;
  border: none;
  color: #9faccf;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}

.auth-password-toggle:hover {
  color: #d7e1ff;
}

.auth-field-hint {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.8;
}

.auth-field-error {
  color: #ff8080;
}

.auth-error {
  margin-top: 8px;
  font-size: var(--auth-error-font-size);
  color: #ff8080;
}

.auth-success {
  margin-top: 8px;
  font-size: var(--auth-success-font-size);
  color: #7cffc7;
}

.auth-note {
  font-size: 12px;
  opacity: 0.8;
}

.auth-footer-links {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.link-ghost {
  background: none;
  border: none;
  color: #76b7ff;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}

.link-ghost:hover {
  text-decoration: underline;
}

.auth-tabs-bottom {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.auth-tab {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: var(--auth-tabs-padding-block) var(--auth-tabs-padding-inline);
  font-size: var(--auth-tabs-font-size);
  cursor: pointer;
  background: rgba(12, 16, 26, 0.85);
  color: #aeb8e6;
  border: 1px solid rgba(110, 140, 230, 0.5);
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.auth-tab.active {
  background: linear-gradient(90deg, #00b7ff, #5f7bff);
  color: #05070a;
  font-weight: 500;
  transform: translateY(-1px);
}

/* ===================== */
/* Гостевой / основной чат */
/* ===================== */

.guest-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  margin: var(--guest-chat-container-margin-top)
          var(--guest-chat-container-margin-right)
          var(--guest-chat-container-margin-bottom)
          var(--guest-chat-container-margin-left);
}

/* баннер про гостевой режим */
.guest-mode-banner {
  font-size: var(--guest-banner-font-size);
  line-height: var(--guest-banner-line-height);
  opacity: 0.92;

  padding: var(--guest-banner-padding-top)
           var(--guest-banner-padding-right)
           var(--guest-banner-padding-bottom)
           var(--guest-banner-padding-left);

  margin: var(--guest-banner-margin-top)
          var(--guest-banner-margin-right)
          var(--guest-banner-margin-bottom)
          var(--guest-banner-margin-left);

  border-radius: 10px;
  border: 1px solid rgba(120, 160, 255, 0.5);
  background: rgba(10, 14, 22, 0.9);

  box-shadow: 0 0 12px rgba(90, 130, 255, 0.25);
}

/* ===================== */
/*  CHAT (logged-in): tighter gap between info banner and chat card */
/*  Не влияет на гостевой чат */
/* ===================== */

#chat-info-banner {
  /* было 8px (из переменных), делаем 4px */
  margin-bottom: 4px;
}

/* Карточка чата идёт сразу после баннера: уменьшаем верхний отступ карточки */
#chat-info-banner + #chat-root .app-container {
  margin-top: 4px;
}

.guest-chat-header {
  margin-bottom: 8px;
}

.guest-chat-subtitle {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.guest-chat-subtitle-main {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

/* ОБЛАСТЬ СООБЩЕНИЙ */

.guest-chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;

  margin: var(--guest-messages-margin-top)
          var(--guest-messages-margin-right)
          var(--guest-messages-margin-bottom)
          var(--guest-messages-margin-left);

  padding: var(--guest-messages-padding-top)
           var(--guest-messages-padding-right)
           var(--guest-messages-padding-bottom)
           var(--guest-messages-padding-left);

  max-width: var(--guest-messages-max-width);
  width: 100%;

  overflow-y: auto;
  overflow-x: hidden; /* горизонтальный скролл убран */

  /* Цвет скроллбара для Firefox — чуть приглушённый и пошире */
  scrollbar-color: #d86b34 rgba(8, 10, 18, 0.8);
  scrollbar-width: auto;
}

/* скроллбар */

.guest-chat-messages::-webkit-scrollbar {
  width: 12px; /* было 6px — в 2 раза шире */
}

.guest-chat-messages::-webkit-scrollbar-track {
  background: rgba(8, 10, 18, 0.8);
}

.guest-chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d86b34, #f19a4a); /* чуть тусклее */
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

/* сообщения */

.guest-chat-message {
  margin-bottom: var(--guest-message-gap);
}

/* первое сообщение Nova ближе/дальше к верху области */
.guest-chat-message:first-child {
  margin-top: var(--guest-first-message-margin-top);
}

/* Внутренняя раскладка сообщений */

.guest-chat-message-inner {
  display: flex;
  width: 100%;
}

/* Nova — слева */
.guest-chat-message-system .guest-chat-message-inner {
  justify-content: flex-start;
}

/* Пользователь — тоже слева (пока так) */
.guest-chat-message-user .guest-chat-message-inner {
  justify-content: flex-start;
}

/* Пузырь сообщения */

.guest-chat-bubble {
  max-width: 100%;
  padding: var(--guest-bubble-padding-top)
           var(--guest-bubble-padding-right)
           var(--guest-bubble-padding-bottom)
           var(--guest-bubble-padding-left);

  border-radius: var(--guest-bubble-radius);
  font-size: var(--guest-bubble-font-size);
  line-height: 1.25;

  border: none;
  position: relative;
  background: transparent;

  overflow-wrap: break-word;
  word-break: break-word;
}

.guest-chat-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.guest-chat-message-system .guest-chat-bubble::before {
  border: 1px solid transparent;

  background: linear-gradient(
    to right,
  rgba(255,216,74,1)   0%,
  rgba(255,216,74,1)   5%,
  rgba(255,216,74,0.55) 10%,
  rgba(255,216,74,0.28) 15%,
  rgba(255,216,74,0.12) 25%,
  rgba(255,216,74,0)  100%
  ) border-box;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.guest-chat-message-user .guest-chat-bubble::before {
  border: 1px solid transparent;

  background: linear-gradient(
    to right,
  rgba(108,182,255,1)   0%,
  rgba(108,182,255,1)   10%,
  rgba(108,182,255,0.55) 15%,
  rgba(108,182,255,0.28) 30%,
  rgba(108,182,255,0.12) 50%,
  rgba(108,182,255,0)  100%
  ) border-box;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.guest-chat-message-system .guest-chat-bubble {
  border-color: #ffd84a; /* жёлтый */
}

.guest-chat-message-user .guest-chat-bubble {
  border-color: #6cb6ff; /* голубой */
}

/* автор/ник скрыт */

.guest-chat-message-author {
  display: none;
}

.guest-chat-message-text {
  font-size: var(--guest-message-font-size);
  line-height: var(--guest-message-line-height);
}

/* Поле ввода и кнопка отправки */

.guest-chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.guest-chat-input {
  flex: 1;

  /* ⬇ менее «таблетка», обычные скруглённые углы */
  border-radius: 14px;

  border: 1px solid rgba(110, 140, 230, 0.55);
  background: rgba(7, 10, 18, 0.9);
  color: #e6ecff;

  padding: var(--guest-chat-input-padding-block) var(--guest-chat-input-padding-inline);
  font-size: var(--guest-chat-input-font-size);
  line-height: var(--guest-chat-input-line-height);

  outline: none;

  /* 🧠 поведение как у GPT */
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;

  /* ограничение по высоте ≈ 7–8 строк */
  min-height: 30px;
  max-height: 140px;

  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;

  /* скроллбар как в окне сообщений, но уже */
  scrollbar-color: #d86b34 rgba(8, 10, 18, 0.8);
  scrollbar-width: thin;
}

.guest-chat-input {
  scrollbar-width: none; /* Firefox */
}

.guest-chat-input:focus {
  border-color: #00b7ff;
  box-shadow: 0 0 0 1px rgba(0, 183, 255, 0.4);
}

.guest-chat-send-btn {
  white-space: nowrap;
  padding-inline: var(--guest-chat-send-btn-padding-inline);
}

/* ===================== */
/* ADMIN */
/* ===================== */

.admin-container {
  max-width: none;
  width: 100%;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;

  /* чтобы крестик можно было прижать к краю окна */
  position: relative;

  /* резерв под кнопку закрытия, чтобы заголовок не лез под неё */
  padding-right: 44px;
}

.admin-header-main {
  max-width: calc(100% - 40px);
}

.admin-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f6ff;
  margin-bottom: 4px;
}

.admin-subtitle {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.admin-support {
  font-size: 13px;
  opacity: 0.85;
}

.admin-support-link {
  color: #7cb8ff;
  text-decoration: none;
}

.admin-support-link:hover {
  text-decoration: underline;
}

.admin-close-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ✅ фикс: позиционируем относительно карточки админки, а не header */
  position: absolute;
  top: 8px;   /* чуть ниже */
  right: -4px;  /* ближе к правому краю */
  z-index: 50;

  /* на всякий случай убираем влияние флекса/маргинов */
  margin: 0;
  flex: 0 0 auto;
}

.admin-block {
  margin-top: 12px;
}

.admin-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-block-title {
  font-size: 18px;
  font-weight: 600;
}

.admin-status {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 4px;
}

/* обёртка таблицы с прокруткой */
.admin-table-wrapper {
  margin-top: 4px;
  max-height: 420px; /* 👈 высота видимой области */
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  border: 1px solid rgba(120, 160, 255, 0.25);
  background: rgba(8, 10, 18, 0.82);

  /* цвет скроллбара (Firefox) */
  scrollbar-color: #d86b34 rgba(8, 10, 18, 0.8);
  scrollbar-width: auto;
}

/* скроллбар (Chrome/Edge/Safari) */
.admin-table-wrapper::-webkit-scrollbar {
  width: 12px;
}

.admin-table-wrapper::-webkit-scrollbar-track {
  background: rgba(8, 10, 18, 0.8);
}

.admin-table-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d86b34, #f19a4a);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table thead {
  position: sticky;
  top: 0;
  background: rgba(10, 14, 24, 0.96);
  z-index: 1;
}

.admin-table th,
.admin-table td {
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.admin-table th {
  font-weight: 600;
  border-bottom: 1px solid rgba(120, 160, 255, 0.4);
}

.admin-table tr:nth-child(even) td {
  background: rgba(14, 18, 28, 0.85);
}

.admin-table tr:nth-child(odd) td {
  background: rgba(10, 14, 24, 0.85);
}

.admin-table-placeholder {
  text-align: center;
  opacity: 0.85;
}

.admin-table-error {
  color: #ff9a9a;
}

/* подсветка онлайна */
.admin-online {
  color: #7cffc7;
  font-weight: 500;
}

.admin-offline {
  color: #a8b3d6;
  opacity: 0.85;
}