/* Зачётка — чат поддержки: круглая кнопка справа внизу и окно переписки.
   Иконка гарнитуры — Tabler Icons (MIT), перерисована под палитру сайта. */

.zk-sup-btn {
  position: fixed; z-index: 60;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px; border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--color-accent-400), var(--color-accent-600));
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 2, 8, .55), 0 0 0 6px color-mix(in srgb, var(--color-accent) 14%, transparent);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
  animation: pop .4s var(--ease-out) both;
}
.zk-sup-btn svg { width: 30px; height: 30px; display: block; }
.zk-sup-btn .zk-sup-ico, .zk-sup-btn .zk-sup-x { grid-area: 1 / 1; transition: opacity .2s ease, transform .3s var(--ease-out); }
.zk-sup-btn .zk-sup-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.zk-sup-btn.is-open .zk-sup-ico { opacity: 0; transform: rotate(90deg) scale(.6); }
.zk-sup-btn.is-open .zk-sup-x { opacity: 1; transform: none; }
.zk-sup-online {
  position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 999px;
  background: var(--color-accent-2-400); border: 2px solid var(--color-bg);
}
.zk-sup-badge {
  position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--color-danger); color: #240b06; border: 2px solid var(--color-bg);
  font: 700 12px/18px var(--font-body); display: grid; place-items: center;
}
@media (hover: hover) {
  .zk-sup-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(0, 2, 8, .6), 0 0 0 9px color-mix(in srgb, var(--color-accent) 16%, transparent); }
}
.zk-sup-btn:focus-visible { outline: 2px solid var(--color-accent-200); outline-offset: 4px; }

/* — окно переписки — */
.zk-sup {
  position: fixed; z-index: 59;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 74px);
  width: min(380px, calc(100vw - 36px)); max-height: min(620px, calc(100vh - 120px));
  display: none; flex-direction: column; overflow: hidden;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 2, 8, .75);
}
.zk-sup.is-open { display: flex; animation: supIn .28s var(--ease-out) both; }
@keyframes supIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

.zk-sup-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--color-divider); }
.zk-sup-ava {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--color-accent-400), var(--color-accent-600)); color: #fff;
}
.zk-sup-ava svg { width: 22px; height: 22px; }
.zk-sup-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 999px; background: var(--color-accent-2-400); border: 2px solid var(--color-surface); }
.zk-sup-meta { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.zk-sup-meta b { font-size: 16px; }
.zk-sup-meta span { font-size: 13px; color: var(--color-neutral-400); }
.zk-sup-close { width: 36px; height: 36px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--color-neutral-300); cursor: pointer; display: grid; place-items: center; }
.zk-sup-close svg { width: 20px; height: 20px; }
.zk-sup-close:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }

.zk-sup-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: grid; gap: 10px; align-content: start; }
.zk-msg { display: grid; gap: 3px; max-width: 86%; }
.zk-msg-text { padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.zk-msg-who { font-size: 12px; color: var(--color-neutral-400); padding-left: 4px; }
.zk-msg-time { font-size: 11px; color: var(--color-neutral-500); padding: 0 4px; }
.zk-msg-bot .zk-msg-text, .zk-msg-admin .zk-msg-text { background: var(--color-raised); border-bottom-left-radius: 6px; }
.zk-msg-admin .zk-msg-text { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-raised)); }
.zk-msg-user { justify-items: end; margin-left: auto; }
.zk-msg-user .zk-msg-text { background: var(--color-accent); color: var(--color-bg); border-bottom-right-radius: 6px; font-weight: 500; }
.zk-msg-user .zk-msg-time { text-align: right; }

.zk-sup-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.zk-sup-chip {
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); background: transparent;
  color: var(--color-accent-200); border-radius: 999px; padding: 9px 14px; font: 500 14px var(--font-body); cursor: pointer;
}
.zk-sup-chip:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.zk-sup-note { font-size: 13px; color: var(--color-neutral-400); text-align: center; padding: 4px 0; }

.zk-sup-foot { display: grid; gap: 8px; padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-divider); background: var(--color-surface); }
.zk-sup-line { font-size: 13px; color: var(--color-neutral-400); text-align: left; }
.zk-sup-link { background: none; border: 0; padding: 0; color: var(--color-accent-300); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.zk-sup-contact { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.zk-sup-contact .input { min-height: 42px; font-size: 15px; padding: 8px 14px; }
.zk-sup-save { grid-column: 1 / -1; padding: 10px 18px; font-size: 14px; }
.zk-sup-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; color: var(--color-neutral-300); cursor: pointer; }
.zk-sup-agree input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--color-accent); }
.zk-sup-agree a { color: var(--color-accent-300); }
.zk-sup-error { background: var(--color-danger-bg); color: var(--color-danger-text); border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.zk-sup-input { display: flex; align-items: flex-end; gap: 8px; }
.zk-sup-input textarea {
  flex: 1; resize: none; max-height: 120px; min-height: 44px; padding: 11px 16px; border-radius: 22px;
  border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text);
  font: 15px/1.4 var(--font-body);
}
.zk-sup-input textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.zk-sup-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: var(--color-accent); color: var(--color-bg); cursor: pointer; display: grid; place-items: center; }
.zk-sup-send svg { width: 20px; height: 20px; }
.zk-sup-send[disabled] { opacity: .5; cursor: default; }
.zk-sup-hp { position: absolute; left: -10000px; width: 1px; height: 1px; }

/* — телефон: окно на весь экран — */
@media (max-width: 560px) {
  .zk-sup {
    right: 0; left: 0; bottom: 0; top: 0; width: auto; max-height: none; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .zk-sup.is-open { animation: supUp .3s var(--ease-out) both; }
  @keyframes supUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  /* display, а не прозрачность: анимация появления кнопки перебивает opacity */
  .zk-sup-btn.is-open { display: none; }
  /* страница под открытым чатом не прокручивается */
  .zk-sup-lock, .zk-sup-lock body { overflow: hidden; }
  .zk-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .zk-sup-btn, .zk-sup.is-open { animation: none !important; }
}

/* поля чата на телефоне — от 16px, иначе iPhone увеличивает страницу при вводе */
@media (max-width: 860px) {
  .zk-sup-input textarea, .zk-sup-contact .input { font-size: 16px; }
}