/* === WhatsApp-like widget (robust) ========================== */
:root{
  --wa-gap: 16px;                  /* базовый отступ */
  --wa-toggle-size: 56px;          /* диаметр плавающей кнопки */
  --wa-panel-w-min: 320px;
  --wa-panel-w-max: 360px;
  --wa-z: 2147483000;              /* поверх всего, но не бесконечный :) */
}
/* Состояние «кнопка расширена» (для совместимости) */
.wa-widget.expanded{ border-radius: 1rem; }

/* Плавающая кнопка */
.wa-widget-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--wa-toggle-size);
  height: var(--wa-toggle-size);
  margin: 0 ;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: forestgreen;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
  cursor: pointer;
  position: relative;
}

/* Индикатор */
.wa-widget-toggle::before{
  content:"";
  position:absolute;
  top:5px; right:5px;
  width:10px; height:10px; border-radius:50%;
  background:red;
}

/* Панель чата (по умолчанию) — привязана к кнопке */
.wa-widget .wa-widget-content{
  position: absolute;
  inset-inline-end: 60px;                  /* «к правому краю» кнопки */
  inset-block-end: calc(100% - 25px);      /* Чётко над кнопкой */
  width: clamp(var(--wa-panel-w-min), 32vw, var(--wa-panel-w-max));
  max-height: min(70vh, 640px);
  overflow: hidden;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s linear;
  pointer-events: none;                                 /* пока скрыто — не кликается */
  z-index: var(--wa-z);
}

/* Показ панели */
.wa-widget .wa-widget-content.expanded,
.wa-widget.expanded .wa-widget-content{
  opacity: 1; visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Базовая стилизация внутренностей (оставил твои классы) */
.wa-widget-content{ font-family: Helvetica, Arial, sans-serif; font-size: 15px; }

.chat-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  background: #095e54;
  color: #fff;
}

.chat-header h4, .chat-header p {
  margin: .2rem;
  color: #fff;
}
.chat-admin-picture img{  width: 80px;
}
.chat-content{ padding:1rem; background:#d1ecd4; }
.chat-form{ background:#fff; padding:.25rem; margin-right: 20px}

.chat-form textarea, .chat-form input {
  width: 100%;
  background: inherit;
  border: 1px solid #e4e4e4;
  border-radius: .5rem;
  outline: 0;
  resize: none;
  margin: 10px;
  padding: 5px;
  transition: all .25s linear;
}

.chat-form .chat-send {
  border: 0;
  outline: 0;
  padding: .75rem;
  width: 100%;
  font-weight: 700;
  font-size: 1.1rem;
  background: #4fce5d;
  color: #fff;
  cursor: pointer;
  border-radius: .5rem;
}
.chat-form .required{ border:1px solid rgba(255,0,0,.25); background:rgba(255,0,0,.1); }

/* ====== Мобильный режим: bottom-sheet ====== */
@media (max-width: 480px){
  .wa-widget{
    inset-inline: var(--wa-gap);
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--wa-gap));
  }

  /* Панель фиксируется к экрану, не выходит за края, не перекрывает кнопку */
  .wa-widget .wa-widget-content{
    position: fixed;
    max-width: none;
    max-height: 80vh;
    border-radius: 1rem;
    transform: translateY(8px);
  }
}

/* Очень узкие экраны — ещё чуть меньше боковой отступ */
@media (max-width: 360px){
  .wa-widget .wa-widget-content{ inset-inline: 8px; }
}

.wa-widget{
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 100px);
}

.chat-form input[data-message="name"]{
  height: 48px;
}

.chat-form input[data-message="message"]{
  height: 98px;

}