/* MagicTale — виджет чата на сайте (канал Site). Префикс .mtc- чтобы не конфликтовать со стилями сайта. */
.mtc-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  width: 60px; height: 60px; border-radius: 50%;
  background: #1c9eff; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s ease, background .15s ease;
}
.mtc-launcher:hover { transform: scale(1.06); background: #0f8bec; }
.mtc-launcher svg { width: 28px; height: 28px; }
.mtc-launcher.is-hidden { display: none; }
.mtc-launcher.mtc-gone { display: none !important; } /* вне рабочего окна / оффлайн */
.mtc-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  background: #fa383e; color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; box-sizing: border-box;
}
.mtc-badge.is-on { display: flex; }

.mtc-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483002;
  width: 370px; height: 560px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
  display: none; flex-direction: column; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mtc-panel.is-open { display: flex; }

.mtc-head {
  flex: 0 0 auto; background: #1c9eff; color: #fff; padding: 13px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mtc-head-title { font-size: 15px; font-weight: 700; }
.mtc-head-close { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 24px; line-height: 1; padding: 0 2px; opacity: .9; }
.mtc-head-close:hover { opacity: 1; }

.mtc-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; background: #f7f8fa;
}
.mtc-msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
.mtc-msg.in  { align-self: flex-end;   background: #1c9eff; color: #fff; border-bottom-right-radius: 4px; }
.mtc-msg.out { align-self: flex-start; background: #eceef1; color: #111; border-bottom-left-radius: 4px; }
.mtc-msg img { max-width: 210px; border-radius: 10px; display: block; cursor: pointer; }
.mtc-msg a.mtc-file { color: inherit; font-weight: 600; text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; }
.mtc-empty { margin: auto; color: #a8abb0; font-size: 14px; text-align: center; padding: 20px; }

.mtc-foot {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid #e8eaed; background: #fff;
}
.mtc-attach, .mtc-send {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .12s ease;
}
.mtc-attach { background: #eceef1; color: #555; }
.mtc-attach:hover { background: #e0e2e6; }
.mtc-send { background: #1c9eff; color: #fff; }
.mtc-send:hover { background: #0f8bec; }
.mtc-send:disabled, .mtc-attach:disabled { opacity: .5; cursor: default; }
.mtc-attach svg, .mtc-send svg { width: 20px; height: 20px; }
.mtc-input {
  flex: 1 1 auto; resize: none; border: 1px solid #e0e2e6; border-radius: 20px;
  padding: 9px 14px; font-size: 14px; font-family: inherit; max-height: 100px; min-height: 40px; line-height: 1.35; outline: none; box-sizing: border-box;
}
.mtc-input:focus { border-color: #1c9eff; }
.mtc-err { color: #d33; font-size: 12px; padding: 0 12px 6px; display: none; }
.mtc-err.is-on { display: block; }

/* backdrop только для мобилки */
.mtc-backdrop { display: none; }

/* мобилка (≤800px, как у сайта): плавающую иконку прячем — вход в чат через иконку в шапке */
@media (max-width: 800px) {
  .mtc-launcher { display: none !important; }
  .mtc-panel {
    right: 0; left: 0; bottom: 0; width: 100%; height: 80vh; max-height: 80vh;
    border-radius: 16px 16px 0 0;
  }
  .mtc-backdrop.is-open {
    display: block; position: fixed; left: 0; right: 0; top: 0; height: calc(20vh + 24px); z-index: 2147483001;
    background: rgba(0,0,0,.55); cursor: pointer; /* +24px заходит под скруглённые углы панели; тап = закрыть */
  }
}

/* облачко-превью последнего сообщения от поддержки (когда чат закрыт) */
.mtc-preview {
  position: fixed; z-index: 2147483001; right: 24px; bottom: 90px; max-width: 260px;
  background: #fff; color: #1c1e21; border-radius: 16px; padding: 11px 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .30), 0 5px 16px rgba(0, 0, 0, .18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.4; cursor: pointer;
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .22s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}
.mtc-preview[hidden] { display: none; }
.mtc-preview.is-in { opacity: 1; transform: none; }
.mtc-preview-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* десктоп: хвостик снизу-справа — смотрит вниз на иконку-лаунчер */
.mtc-preview::after {
  content: ''; position: absolute; bottom: -7px; right: 18px;
  width: 0; height: 0; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .07));
}
/* мобилка: облачко снизу от иконки в шапке, стрелка вверх */
@media (max-width: 800px) {
  .mtc-preview { right: 10px; left: auto; bottom: auto; width: 80%; max-width: 80%; } /* ~на 20% уже, всегда накрывает иконку */
  .mtc-preview::after { display: none; }
  .mtc-preview::before {
    content: ''; position: absolute; top: -7px; right: calc(var(--arrow-right, 46px) - 8px);
    width: 0; height: 0; border: 8px solid transparent; border-bottom-color: #fff; border-top: 0;
    filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .04));
  }
}

/* лайтбокс картинок */
.mtc-lightbox {
  position: fixed; inset: 0; z-index: 2147483010; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.mtc-lightbox.is-open { display: flex; }
.mtc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }