/* ============================================================
   SmartyAI Chat Widget — Design System
   ============================================================ */

/* ── 1. Дизайн-токены ──────────────────────────────────────── */
:root {
  --sw-primary:       #2563EB;
  --sw-primary-dark:  #1D4ED8;
  --sw-primary-light: #EFF6FF;
  --sw-surface:       #F8FAFC;
  --sw-border:        #E2E8F0;
  --sw-text:          #0F172A;
  --sw-text-muted:    #64748B;
  --sw-bot-bubble:    #F1F5F9;
  --sw-user-bubble:   #DBEAFE;
  --sw-user-text:     #1E40AF;
  --sw-radius:        20px;
  --sw-radius-sm:     12px;
  --sw-shadow:        0 8px 32px rgba(37,99,235,.14), 0 2px 8px rgba(0,0,0,.07);
}

/* ── 2. Скрыть элементы InitWidget ─────────────────────────── */
.chat-widget-toggle,
.chat-widget-list,
.bubble,
.chat-window-toggle { display: none !important; }

/* ── 3. Обёртка виджета ─────────────────────────────────────── */
#sw-widget {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sw-text);
  box-sizing: border-box;
}
#sw-widget *,
#sw-widget *::before,
#sw-widget *::after {
  box-sizing: border-box;
}
#sw-widget button,
#sw-widget input,
#sw-widget textarea {
  font-family: inherit;
}

/* ── 4. Кнопка-запускатель #sw-toggle ─────────────────────── */
#sw-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 12000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sw-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  animation: sw-pulse 2.8s infinite;
  transition: transform .2s, box-shadow .2s;
  padding: 0;
}
#sw-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(37,99,235,.45);
  animation: none;
}
#sw-toggle .sw-icon-chat {
  width: 26px;
  height: 26px;
  display: block;
  filter: brightness(0) invert(1);
  transition: opacity .2s, transform .2s;
}
#sw-toggle .sw-icon-close {
  display: none;
  width: 22px;
  height: 22px;
  color: #fff;
  transition: opacity .2s, transform .2s;
}
#sw-toggle.sw-toggle--open .sw-icon-chat {
  display: none;
}
#sw-toggle.sw-toggle--open .sw-icon-close {
  display: block;
}

@keyframes sw-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37,99,235,.4), 0 2px 8px rgba(37,99,235,.3);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37,99,235,0), 0 2px 8px rgba(37,99,235,.3);
  }
}

/* ── 5. Панель #sw-panel ────────────────────────────────────── */
#sw-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 11900;
  width: 340px;
  max-height: 600px;
  background: #fafafa;
  border-radius: var(--sw-radius);
  box-shadow: var(--sw-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}
#sw-panel.sw-panel--chat {
  bottom: 24px;
  height: calc(100dvh - 32px);
  max-height: 620px;
}
#sw-panel.sw-panel--chat .sw-footer {
  display: none;
}
#sw-panel.sw-panel--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* ── 6. Шапка .sw-header ────────────────────────────────────── */
.sw-header {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sw-primary);
  color: #fff;
  border-radius: var(--sw-radius) var(--sw-radius) 0 0;
  flex-shrink: 0;
}
.sw-header--visible {
  display: flex;
}
.sw-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.sw-back-btn:hover {
  background: rgba(255,255,255,.15);
}
.sw-back-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.sw-header-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 7. Страницы .sw-page ────────────────────────────────────── */
.sw-page {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}
.sw-page--active {
  display: flex;
}
/* Скролл */
.sw-page::-webkit-scrollbar { width: 4px; }
.sw-page::-webkit-scrollbar-thumb { background: var(--sw-border); border-radius: 4px; }

/* ── 8. Приветствие .sw-welcome ─────────────────────────────── */
.sw-welcome {
  padding: 4px 0 6px;
}
.sw-welcome h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--sw-text);
  margin: 0 0 4px;
}
.sw-welcome p {
  font-size: 13px;
  color: var(--sw-text-muted);
  margin: 0;
}

/* ── 9. Карточки .sw-card ───────────────────────────────────── */
.sw-card {
  background: #ffffff;
  border-radius: var(--sw-radius-sm);
  border: 0.5px solid #e2e2e2;
  padding: 14px;
}
.sw-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--sw-text);
  margin: 0 0 10px;
}
.sw-card-sub {
  font-size: 14px;
  color: var(--sw-text-muted);
  margin: 0 0 12px;
}

.sw-chat-fallback {
  margin: auto 0;
}

.sw-chat-fallback .sw-btn {
  margin-top: 12px;
}

/* ── 10. Карточка чата .sw-chat-card ────────────────────────── */
.sw-chat-card {
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.sw-chat-card:hover {
  border-color: var(--sw-primary);
  box-shadow: 0 2px 12px rgba(37,99,235,.12);
}
.sw-chat-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--sw-text);
  margin: 0 0 12px;
}
.sw-chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sw-avatars {
  display: flex;
  flex-shrink: 0;
}
.sw-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}
.sw-avatars img:last-child {
  margin-left: -12px;
}
.sw-chat-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sw-chat-response-title {
  font-size: 13px;
  color: var(--sw-text-muted);
  line-height: 1.3;
}
.sw-chat-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sw-text);
}
.sw-chat-time svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sw-primary);
}

/* ── 11. Кнопки .sw-btn ─────────────────────────────────────── */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  transition: background .18s, transform .18s;
  white-space: nowrap;
}
.sw-btn--primary {
  background: var(--sw-primary);
  color: #fff;
}
.sw-btn--primary:hover {
  background: var(--sw-primary-dark);
  transform: scale(1.02);
}
.sw-btn--full {
  width: 100%;
  border-radius: var(--sw-radius-sm);
}
.sw-btn--gradient {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
}
.sw-btn--gradient:hover {
  background: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 100%);
  transform: scale(1.02);
}

/* ── 12. Иконки мессенджеров .sw-messengers ────────────────── */
.sw-messengers {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sw-messenger-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fafafa;
  border: 1px solid var(--sw-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  padding: 0;
  text-decoration: none;
  overflow: hidden;
}
.sw-messenger-btn:hover {
  transform: scale(1.12);
  border-color: var(--sw-primary);
  box-shadow: 0 2px 8px rgba(37,99,235,.15);
}
.sw-messenger-btn img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* ── 13. Форма обратной связи ───────────────────────────────── */
#sw-callback-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#sw-callback-form input {
  width: 100%;
  background: var(--sw-surface);
  border: 1.5px solid var(--sw-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--sw-text);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
#sw-callback-form input::placeholder {
  color: var(--sw-text-muted);
}
#sw-callback-form input:focus {
  border-color: var(--sw-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
#sw-callback-form input.sw-input--error {
  border-color: #EF4444;
}
.sw-form-status {
  font-size: 12px;
  min-height: 18px;
  text-align: center;
}
.sw-form-status--success { color: #10B981; }
.sw-form-status--error   { color: #EF4444; }

/* ── 14. QR-страницы ────────────────────────────────────────── */
.sw-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0 4px;
}
.sw-qr-img {
  width: 100%;
  max-width: 240px;
  border-radius: var(--sw-radius-sm);
  border: 1px solid var(--sw-border);
  display: block;
}

/* ── 15. Страница чата #sw-page-chat ────────────────────────── */
#sw-page-chat {
  padding: 0;
  position: relative;
  flex: 1 1 0%;
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
}
/* n8n — сброс размеров, заполнить вкладку */
#sw-page-chat .chat-window,
#sw-page-chat .chat-window-wrapper,
#sw-page-chat .chat-window-wrapper *,
#sw-page-chat .chat-layout {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#sw-page-chat .chat-window-wrapper {
  position: absolute !important;
  inset: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  z-index: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #fafafa !important;
  scrollbar-gutter: auto !important;
}
#sw-page-chat .chat-window {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: #fafafa !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}
#sw-page-chat .chat-window-wrapper > .chat-window {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
#sw-page-chat .chat-layout {
  flex: 1 1 0% !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fafafa !important;
  scrollbar-gutter: auto !important;
}
#sw-page-chat .chat-body {
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fafafa !important;
  scrollbar-gutter: auto !important;
}
#sw-page-chat .chat-body::-webkit-scrollbar,
#sw-page-chat .chat-layout::-webkit-scrollbar,
#sw-page-chat .chat-window-wrapper::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
/* скрыть n8n-шапку — у нас своя */
#sw-page-chat .chat-window .chat-header {
  display: none !important;
}

/* ── 16. Футер .sw-footer ───────────────────────────────────── */
.sw-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sw-border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-footer-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: .75;
  transition: opacity .18s;
}
.sw-footer-link:hover { opacity: 1; }
.sw-footer-link img {
  height: 20px;
  display: block;
}

/* ── 17. Переопределение переменных n8n ─────────────────────── */
#n8n-chat,
.chat-window-wrapper {
  --chat--color-primary:              var(--sw-primary);
  --chat--color-primary-shade-50:     var(--sw-primary-dark);
  --chat--color-primary-shade-100:    #1e40af;
  --chat--color-secondary:            var(--sw-primary);
  --chat--color-secondary-shade-50:   var(--sw-primary-dark);
  --chat--color-white:                #ffffff;
  --chat--color-light:                var(--sw-surface);
  --chat--color-light-shade-50:       var(--sw-border);
  --chat--color-dark:                 var(--sw-text);
  --chat--color-disabled:             var(--sw-text-muted);
  --chat--body--background:           #fafafa;
  --chat--footer--background:         #fafafa;
  --chat--header--background:         var(--sw-primary);
  --chat--header--color:              #ffffff;
  --chat--heading--font-size:         15px;
  --chat--subtitle--font-size:        12px;
  --chat--message--bot--background:   var(--sw-bot-bubble);
  --chat--message--bot--color:        var(--sw-text);
  --chat--message--user--background:  var(--sw-user-bubble);
  --chat--message--user--color:       var(--sw-user-text);
  --chat--message--font-size:         13px;
  --chat--message--border-radius:     var(--sw-radius-sm);
  --chat--message-line-height:        1.4;
  --chat--border-radius:              var(--sw-radius-sm);
  --chat--window--width:              340px;
  --chat--window--height:             508px;
  --chat--toggle--size:               0px;
  --chat--spacing:                    0.75rem;
  --chat--header--padding:            14px 16px;
  --chat--textarea--height:           40px;
}

/* ── 18. Стили n8n внутри нашей панели ──────────────────────── */
#sw-page-chat .chat-messages-list {
  padding: 12px !important;
  width: 100% !important;
  max-width: none !important;
  background: #fafafa !important;
}
#sw-page-chat .chat-footer {
  border-top: none !important;
  padding: 0 12px 12px !important;
  width: 100% !important;
  max-width: none !important;
  background: #fafafa !important;
}
#sw-page-chat .chat-inputs {
  align-items: center !important;
  background-color: #fff !important;
  border: 1.5px solid var(--sw-border) !important;
  border-radius: 50px !important;
  display: flex !important;
  min-height: 44px !important;
  height: 44px !important;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
#sw-page-chat .chat-inputs:focus-within {
  border-color: var(--sw-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}
#sw-page-chat .chat-inputs textarea {
  flex: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  resize: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  line-height: 40px !important;
  padding: 0 8px 0 14px !important;
  overflow: hidden !important;
}
#sw-page-chat .chat-inputs-controls {
  align-items: center !important;
  display: flex !important;
  height: 100% !important;
  padding-right: 4px !important;
}
#sw-page-chat .chat-input-send-button {
  align-items: center !important;
  background-color: var(--sw-primary) !important;
  border-radius: 50% !important;
  color: #fff !important;
  display: inline-flex !important;
  justify-content: center !important;
  height: 34px !important;
  width: 34px !important;
  padding: 6px !important;
  transition: background .18s, transform .18s !important;
}
#sw-page-chat .chat-input-send-button:hover {
  background-color: var(--sw-primary-dark) !important;
  transform: scale(1.05) !important;
}
#sw-page-chat .chat-input-send-button:disabled {
  background-color: var(--sw-border) !important;
  transform: none !important;
}
#sw-page-chat .chat-input-send-button > svg {
  height: 14px !important;
}
#sw-page-chat .chat-message > .chat-message-markdown > p {
  font-family: 'Lato', sans-serif;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#sw-page-chat .chat-message.chat-message-from-user .chat-message-markdown p {
  color: var(--sw-user-text) !important;
}
#sw-page-chat .chat-message.chat-message-from-bot .chat-message-markdown p {
  color: var(--sw-text) !important;
}
#sw-page-chat .chat-message.chat-message-from-user {
  background-color: var(--sw-user-bubble) !important;
  border-bottom-right-radius: 4px !important;
}
#sw-page-chat .chat-message.chat-message-from-bot {
  background-color: var(--sw-bot-bubble) !important;
  border-bottom-left-radius: 4px !important;
}
#sw-page-chat .chat-powered-by a {
  font-size: 0 !important;
}
#sw-page-chat .chat-powered-by a::before {
  content: 'Powered by SmartyAI';
  font-size: 11px;
  color: var(--sw-text-muted);
}

/* ── 19. Адаптив (мобильные) ────────────────────────────────── */
@media (max-width: 480px) {
  #sw-toggle {
    bottom: 12px;
    right: 12px;
  }
  #sw-panel {
    right: 0;
    bottom: 72px;
    width: 100vw;
    border-radius: 20px 20px 0 0;
    max-height: 85dvh;
  }
  .sw-header {
    border-radius: 20px 20px 0 0;
  }
}