/* ============ Чат-виджет ============ */

.te-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(150deg, var(--red, #c3122a), var(--bordo, #6d0f17));
  color: #fff; font-size: 26px; line-height: 1;
  box-shadow: 0 8px 26px rgba(109, 15, 23, .38);
  display: grid; place-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.te-launcher:hover { transform: scale(1.06); box-shadow: 0 12px 34px rgba(109, 15, 23, .46); }
.te-launcher:active { transform: scale(.97); }
.te-launcher[hidden] { display: none; }

.te-launcher .te-badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px;
  border-radius: 11px; background: #fff; color: var(--bordo, #6d0f17);
  font-size: 12px; font-weight: 800; display: none; place-items: center;
  padding: 0 6px; border: 2px solid var(--red, #c3122a);
}
.te-launcher.has-unread .te-badge { display: grid; }

.te-hint {
  position: fixed; right: 92px; bottom: 32px; z-index: 899;
  background: #fff; border: 1px solid var(--line, #e6e3e3); border-radius: 12px;
  padding: 11px 15px; font-size: 14px; color: var(--ink, #16171a);
  box-shadow: 0 8px 28px rgba(80, 12, 22, .14); max-width: 240px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.te-hint.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.te-hint button { position: absolute; top: 3px; right: 6px; border: 0; background: none; cursor: pointer; color: #9aa0a6; font-size: 15px; }

/* -------- Окно -------- */

.te-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 901;
  width: 388px; max-width: calc(100vw - 32px);
  height: 610px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(30, 8, 12, .3);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  contain: layout paint;
}
.te-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.te-head {
  background: linear-gradient(135deg, var(--bordo, #6d0f17), var(--bordo-dark, #4d0a10));
  color: #fff; padding: 15px 16px; display: flex; align-items: center; gap: 12px; flex: none;
}
.te-avatar {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .16);
  display: grid; place-items: center; font-size: 19px; flex: none;
}
.te-head-info { flex: 1; min-width: 0; }
.te-head-info b { display: block; font-size: 15px; font-weight: 700; }
.te-head-info span { font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.te-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: none; }
.te-dot.off { background: #fbbf24; }
.te-dot.bad { background: #f87171; }
.te-close {
  background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; font-size: 17px; flex: none;
}
.te-close:hover { background: rgba(255, 255, 255, .22); }

/* -------- Лента -------- */

.te-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 14px; background: var(--bg-2, #fbfafa);
  display: flex; flex-direction: column; gap: 9px;
  scrollbar-width: thin; scrollbar-color: #d4cfcf transparent;
  -webkit-overflow-scrolling: touch;
}
.te-body::-webkit-scrollbar { width: 7px; }
.te-body::-webkit-scrollbar-thumb { background: #d9d4d4; border-radius: 4px; }
.te-body::-webkit-scrollbar-track { background: transparent; }

.te-msg {
  max-width: 82%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.8px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere;
  white-space: pre-wrap; position: relative; animation: teIn .16s ease-out;
}
@keyframes teIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.te-msg.in  { align-self: flex-start; background: #fff; border: 1px solid var(--line, #e6e3e3); border-bottom-left-radius: 5px; color: var(--ink, #16171a); }
.te-msg.out { align-self: flex-end; background: var(--red, #c3122a); color: #fff; border-bottom-right-radius: 5px; }
.te-msg.sys {
  align-self: center; background: #efeceb; color: #6d7280; font-size: 12.5px;
  padding: 5px 12px; border-radius: 999px; max-width: 90%; text-align: center;
}
.te-msg .te-who { display: block; font-size: 11.5px; font-weight: 700; color: var(--bordo, #6d0f17); margin-bottom: 3px; }
.te-msg .te-meta { display: block; font-size: 10.5px; opacity: .62; margin-top: 4px; text-align: right; }
.te-msg.out.pending { opacity: .68; }
.te-msg.out.failed { background: #8a8f98; }
.te-msg.out.failed .te-meta::after { content: ' · не отправлено'; }

.te-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 15px; background: #fff; border: 1px solid var(--line, #e6e3e3); border-radius: 16px; border-bottom-left-radius: 5px; }
.te-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9bec5; animation: teBounce 1.3s infinite; }
.te-typing i:nth-child(2) { animation-delay: .18s; }
.te-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes teBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-5px); opacity: 1 } }

.te-day { align-self: center; font-size: 11.5px; color: #9aa0a6; padding: 3px 0; }

/* -------- Форма контактов -------- */

.te-contact {
  background: #fff; border: 1px solid var(--red-line, #ecccd1); border-radius: 14px;
  padding: 14px; margin: 2px 0;
}
.te-contact p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2, #3d4149); }
.te-contact input {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--line, #e6e3e3);
  border-radius: 9px; font-family: inherit; font-size: 14.5px; margin-bottom: 8px;
}
.te-contact input:focus { outline: none; border-color: var(--red, #c3122a); }
.te-contact .row { display: flex; gap: 8px; }
.te-contact button {
  flex: 1; padding: 9px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--red, #c3122a); color: #fff; font-family: inherit; font-weight: 600; font-size: 14px;
}
.te-contact button.skip { background: #eee9e9; color: #6d7280; }

/* -------- Быстрые подсказки посетителю -------- */

.te-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; background: var(--bg-2, #fbfafa); flex: none; }
.te-chips button {
  background: #fff; border: 1px solid var(--red-line, #ecccd1); color: var(--bordo, #6d0f17);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: .14s;
}
.te-chips button:hover { background: var(--red-soft, #f6e6e8); }
.te-chips[hidden] { display: none; }

/* -------- Ввод -------- */

.te-foot {
  flex: none; border-top: 1px solid var(--line, #e6e3e3); background: #fff;
  padding: 10px 12px; display: flex; gap: 9px; align-items: flex-end;
}
.te-input {
  flex: 1; border: 1.5px solid var(--line, #e6e3e3); border-radius: 12px;
  padding: 10px 13px; font-family: inherit; font-size: 15px; line-height: 1.4;
  resize: none; max-height: 116px; min-height: 42px; overflow-y: auto;
  transition: border-color .14s;
}
.te-input:focus { outline: none; border-color: var(--red, #c3122a); }
.te-send {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--red, #c3122a); color: #fff; font-size: 17px;
  display: grid; place-items: center; transition: .14s;
}
.te-send:hover { background: var(--bordo, #6d0f17); }
.te-send:disabled { background: #d6d1d1; cursor: not-allowed; }

.te-status {
  flex: none; font-size: 12px; text-align: center; padding: 5px;
  background: #fff6e5; color: #92400e; display: none;
}
.te-status.show { display: block; }

@media (max-width: 480px) {
  .te-panel {
    right: 0; bottom: 0; width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .te-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .te-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .te-panel, .te-launcher, .te-msg, .te-hint { transition: none !important; animation: none !important; }
}