/* Виджеты в углу сайта: кнопка мессенджеров (внизу) и онлайн-чат (над ней). Модуль artisan.widgets. */
.aw {
  --aw-navy: #233c6e;
  --aw-toggle-bottom: 20px;
  --aw-chat-bottom: 92px;
  font-family: inherit;
}
.aw--messengers { --aw-toggle-bottom: 96px; --aw-chat-bottom: 168px; }
@media (min-width: 640px) {
  .aw { --aw-toggle-bottom: 24px; --aw-chat-bottom: 96px; }
  .aw--messengers { --aw-toggle-bottom: 112px; --aw-chat-bottom: 184px; }
}
.aw *, .aw *::before, .aw *::after { box-sizing: border-box; }
.aw [hidden] { display: none !important; }
.aw svg { display: block; }

/* ── Кнопка мессенджеров ── */
.aw-msg {
  position: fixed; right: 16px; bottom: 20px; z-index: 990;
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 640px) { .aw-msg { right: 24px; bottom: 24px; } }

/* Подпись — только на широком экране: на телефоне она закрыла бы половину страницы. */
.aw-msg__label {
  display: none; white-space: nowrap; user-select: none;
  padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 3px;
  background: #14171a; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
  transition: opacity 280ms ease;
}
@media (min-width: 640px) { .aw-msg__label { display: block; } }

.aw-msg__btn {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; color: #fff !important; text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transform: perspective(600px) rotateY(0);
  transition: transform 280ms ease-in-out, background-color 140ms ease;
}
.aw-msg__icon { transition: opacity 187ms ease; }
.aw-msg__icon svg { width: 28px; height: 28px; }

/* Переворот: кружок встаёт ребром, рисунок и подпись гаснут — в этот момент их подменяют. */
.aw-msg--flip .aw-msg__btn { transform: perspective(600px) rotateY(90deg); }
.aw-msg--flip .aw-msg__icon, .aw-msg--flip .aw-msg__label { opacity: 0; }

/* ── Онлайн-чат ── */
.aw-chat-toggle {
  position: fixed; right: 16px; bottom: var(--aw-toggle-bottom); z-index: 990;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: var(--aw-navy); color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.aw-chat-toggle:hover { transform: scale(1.05); }
.aw-chat-toggle svg { width: 22px; height: 22px; }

.aw-chat {
  position: fixed; right: 16px; bottom: var(--aw-chat-bottom); z-index: 990;
  display: flex; flex-direction: column; overflow: hidden;
  width: min(352px, calc(100% - 32px)); height: 416px; max-height: calc(100vh - var(--aw-chat-bottom) - 16px);
  border: 1px solid #e2e4e8; border-radius: 6px; background: #fff; color: #333;
  font-size: 14px; line-height: 1.45;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
@media (min-width: 640px) { .aw-chat-toggle, .aw-chat { right: 24px; } }

.aw-chat__head {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 12px 16px; background: var(--aw-navy); color: #fff;
}
.aw-chat__photo { position: relative; flex-shrink: 0; width: 40px; height: 40px; }
.aw-chat__photo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
/* Зелёная точка «на связи» — привычный знак у чатов. */
.aw-chat__photo i {
  position: absolute; right: 0; bottom: 0; width: 11px; height: 11px;
  border: 2px solid var(--aw-navy); border-radius: 50%; background: #3fbf5f;
}
.aw-chat__who { min-width: 0; }
.aw-chat__who b, .aw-chat__who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-chat__who b { font-size: 14px; font-weight: 600; }
.aw-chat__who small { font-size: 12px; color: rgba(255, 255, 255, .7); }

.aw-chat__list {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; overflow-y: auto; overscroll-behavior: contain;
}
.aw-chat__msg {
  max-width: 85%; padding: 8px 12px; border-radius: 6px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.aw-chat__msg--visitor { align-self: flex-end; background: #e8edf6; }
.aw-chat__msg--manager { align-self: flex-start; background: #f2f3f5; }
.aw-chat__note {
  display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #dcdfe4;
  font-size: 12px; color: #666; white-space: normal;
}
.aw-chat__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.aw-chat__links a { color: var(--aw-navy); font-weight: 600; text-decoration: none; }
.aw-chat__links a:hover { text-decoration: underline; }
.aw-chat__empty { margin: 0; padding: 24px 4px; text-align: center; font-size: 12px; color: #999; }
.aw-chat__error { margin: 0; padding: 0 12px 6px; font-size: 12px; color: #c0392b; }

.aw-chat__form { display: flex; gap: 8px; flex-shrink: 0; margin: 0; padding: 8px; border-top: 1px solid #e2e4e8; }
/* 16px: при меньшем шрифте iPhone увеличивает страницу при фокусе на поле. */
.aw-chat__form input {
  flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 12px;
  border: 1px solid #cfd4dc; border-radius: 4px; background: #fff; color: #333;
  font: inherit; font-size: 16px; box-shadow: none;
}
.aw-chat__form input:focus { border-color: var(--aw-navy); outline: none; }
.aw-chat__form button {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 4px;
  background: var(--aw-navy); color: #fff; cursor: pointer;
}
.aw-chat__form button svg { width: 18px; height: 18px; }