:root{
  /* Ширина контентной области, как у карточек сверху (можно подогнать) */
  --kxm-chat-max: 1180px;
  /* Боковые поля на узких экранах, чтобы не липло к краям */
  --kxm-chat-side-gap: 16px;
}

/* Стиль блока “Спросить у IT сейчас”: стеклянный фон с переливом */
.kxm-chat{
  width:100%;
  max-width:min(var(--kxm-chat-max), calc(100% - 2*var(--kxm-chat-side-gap)));
  margin:24px auto 48px;
  padding:20px;
  border-radius:14px;
  color:var(--text);
  font-family:'Inter','Roboto',sans-serif;

  /* прозрачный градиент со сдвигом: эффект жидкого стекла */
  background:linear-gradient(270deg,
      rgba(0,164,219,.14),
      rgba(255,255,255,.05),
      rgba(0,164,219,.14));
  background-size:400% 400%;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px) saturate(180%);
  box-shadow:inset 0 0 12px rgba(0,164,219,.15),
              0 4px 16px rgba(0,164,219,.15);
  animation:liquidChat 20s linear infinite;

  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kxm-chat:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:var(--brand);
  box-shadow:inset 0 0 24px rgba(255,140,0,.45),
              0 12px 36px rgba(255,140,0,.45),
              0 8px 28px rgba(0,164,219,.35);
}

/* Анимация для блока чата */
@keyframes liquidChat{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}


.kxm-chat h2{ margin:0 0 12px; font-size:18px; font-weight:700 }

/* Окно сообщений: используем более светлый фон и стеклянный эффект */
.kxm-chat__window{
  height: 300px;
  overflow:auto;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  /* Светлый фон для окна сообщений */
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}

.kxm-chat__msg{ margin:8px 0; line-height:1.5; white-space:pre-wrap; word-wrap:break-word }
.kxm-chat__msg .role{ display:inline-block; min-width:2.2em; font-weight:600; color:#cbd5e1 }
.kxm-chat__msg.user .role{ color:#93c5fd }
.kxm-chat__msg.assistant .role{ color:#facc15 }

.kxm-chat__form{ display:grid; gap:10px; margin-top:12px }
.kxm-chat__form textarea{
  resize:vertical;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 18px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.05);
}

.kxm-chat__controls{ display:flex; gap:12px; align-items:center; justify-content:space-between }
.kxm-chat__btn{ padding:10px 14px; border:0; border-radius:10px; background:#1d4ed8; color:#fff; cursor:pointer; font-weight:600 }
.kxm-chat__btn:disabled{ opacity:.6; cursor:not-allowed }
.kxm-chat__keep{ font-size:12px; color:#cbd5e1; display:flex; align-items:center; gap:6px; user-select:none }

/* Адаптив: на узких экранах — 100% ширины с небольшими боковыми отступами */
@media (max-width: 1279px){
  :root{ --kxm-chat-side-gap: 12px; }
  .kxm-chat__window{ height: 240px; }
}