/* ===== FSA-INTER CHATBOT — изолированные стили v6 ===== */

#chat-toggle {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 99999 !important;
  box-shadow: 0 8px 40px rgba(26,26,46,0.25), 0 0 0 0 rgba(232,176,75,0.4) !important;
  transition: transform 0.2s, box-shadow 0.3s !important;
  animation: fsa-pulse 2.5s infinite !important;
}
#chat-toggle:hover {
  transform: scale(1.08) !important;
  animation: none !important;
  box-shadow: 0 8px 40px rgba(26,26,46,0.25), 0 0 0 8px rgba(232,176,75,0.15) !important;
}
#chat-toggle svg { display: block !important; transition: transform 0.3s !important; }
#chat-toggle.open svg { transform: rotate(45deg) !important; }

@keyframes fsa-pulse {
  0%,100% { box-shadow: 0 8px 40px rgba(26,26,46,0.25), 0 0 0 0 rgba(232,176,75,0.4); }
  50%      { box-shadow: 0 8px 40px rgba(26,26,46,0.25), 0 0 0 10px rgba(232,176,75,0); }
}

#chat-badge {
  position: fixed !important;
  bottom: 78px !important;
  right: 26px !important;
  background: #e74c3c !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100000 !important;
  transition: opacity 0.3s !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
#chat-badge.hidden { opacity: 0 !important; pointer-events: none !important; }

#chat-window {
  position: fixed !important;
  bottom: 104px !important;
  right: 28px !important;
  width: 390px !important;
  max-width: calc(100vw - 40px) !important;
  height: 620px !important;
  max-height: calc(100vh - 130px) !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 40px rgba(26,26,46,0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 99998 !important;
  transform: scale(0.85) translateY(20px) !important;
  transform-origin: bottom right !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease !important;
  font-family: 'Inter', sans-serif !important;
  box-sizing: border-box !important;
}
#chat-window.open {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: all !important;
}
#chat-window * { box-sizing: border-box !important; }

#chat-window .chat-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%) !important;
  color: #fff !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#chat-window .chat-header::after {
  content: '' !important;
  position: absolute !important;
  top: -20px !important; right: -20px !important;
  width: 100px !important; height: 100px !important;
  background: radial-gradient(circle, rgba(232,176,75,0.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
#chat-window .avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e8b04b 0%, #c9963a 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important; flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(232,176,75,0.4) !important;
}
#chat-window .header-info { flex: 1 !important; }
#chat-window .header-name {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important; font-size: 15px !important;
  color: #fff !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
#chat-window .header-status {
  font-size: 12px !important; opacity: 0.8 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  margin-top: 3px !important; color: #fff !important;
}
#chat-window .status-dot {
  width: 7px !important; height: 7px !important;
  background: #4ade80 !important; border-radius: 50% !important;
  flex-shrink: 0 !important; animation: fsa-blink 1.8s infinite !important;
}
@keyframes fsa-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

#chat-window .chat-messages {
  flex: 1 !important; overflow-y: auto !important;
  padding: 16px 14px !important;
  display: flex !important; flex-direction: column !important;
  gap: 10px !important; background: #f9f5ee !important; scroll-behavior: smooth !important;
}
#chat-window .chat-messages::-webkit-scrollbar { width: 4px; }
#chat-window .chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

#chat-window .msg {
  display: flex !important; align-items: flex-end !important;
  gap: 8px !important; margin: 0 !important; padding: 0 !important;
  animation: fsa-fadeUp 0.3s ease !important;
}
@keyframes fsa-fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
#chat-window .msg.user { flex-direction: row-reverse !important; }

#chat-window .msg-avatar {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, #e8b04b 0%, #c9963a 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; flex-shrink: 0 !important;
}
#chat-window .msg-bubble {
  max-width: 78% !important;
  min-width: 80px !important;
  word-break: normal !important;
  overflow-wrap: break-word !important; padding: 10px 14px !important;
  border-radius: 16px !important; font-size: 14px !important;
  line-height: 1.55 !important; color: #1a1a2e !important; margin: 0 !important;
}
#chat-window .msg.bot .msg-bubble {
  background: #ffffff !important; border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
  word-break: normal !important; hyphens: none !important;
  overflow-wrap: break-word !important;
}
#chat-window .msg.user .msg-bubble {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%) !important;
  color: #fff !important; border-bottom-right-radius: 4px !important;
  word-break: keep-all !important; hyphens: none !important;
  min-width: 120px !important; white-space: normal !important;
  overflow-wrap: normal !important;
}
#chat-window .msg-time {
  font-size: 10px !important; color: #7a7a8a !important; margin-top: 3px !important;
}
#chat-window .msg.bot .msg-time  { text-align: left !important; }
#chat-window .msg.user .msg-time { text-align: right !important; }

#chat-window .quick-replies {
  display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; padding: 0 14px 10px !important; background: #f9f5ee !important;
}
#chat-window .quick-btn {
  background: #ffffff !important; border: 1.5px solid #e8b04b !important;
  color: #1a1a2e !important; font-family: 'Inter', sans-serif !important;
  font-size: 12px !important; font-weight: 500 !important;
  padding: 6px 14px !important; border-radius: 20px !important;
  cursor: pointer !important; transition: all 0.2s !important;
  white-space: nowrap !important; margin: 0 !important; line-height: 1.4 !important;
  word-break: keep-all !important; hyphens: none !important;
}
#chat-window .quick-btn:hover {
  background: #e8b04b !important; color: #1a1a2e !important; transform: translateY(-1px) !important;
}

#chat-window .typing-dots {
  background: #ffffff !important; padding: 10px 14px !important;
  border-radius: 16px !important; border-bottom-left-radius: 4px !important;
  display: flex !important; gap: 4px !important; align-items: center !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
#chat-window .typing-dot {
  width: 7px !important; height: 7px !important; background: #e8b04b !important;
  border-radius: 50% !important; animation: fsa-typing 1.2s infinite !important;
}
#chat-window .typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
#chat-window .typing-dot:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes fsa-typing {
  0%,60%,100%{transform:translateY(0);opacity:0.4} 30%{transform:translateY(-5px);opacity:1}
}

#chat-window .chat-input-area {
  padding: 12px 14px !important; background: #ffffff !important;
  border-top: 1px solid #eee !important; display: flex !important;
  gap: 8px !important; align-items: flex-end !important; flex-shrink: 0 !important;
}
#chat-input {
  flex: 1 !important; border: 1.5px solid #e5e0d8 !important;
  border-radius: 12px !important; padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important; font-size: 14px !important;
  color: #1a1a2e !important; background: #f9f5ee !important;
  resize: none !important; max-height: 90px !important;
  line-height: 1.5 !important; outline: none !important;
  transition: border-color 0.2s !important; box-shadow: none !important; width: 100% !important;
}
#chat-input:focus { border-color: #e8b04b !important; }
#chat-input::placeholder { color: #7a7a8a !important; }

#send-btn {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%) !important;
  border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important;
  box-shadow: none !important; transition: transform 0.2s, background 0.2s !important;
}
#send-btn:hover  { transform: scale(1.1) !important; background: #e8b04b !important; }
#send-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; }

#chat-window .error-msg { background: #fff0f0 !important; color: #c62828 !important; font-size: 13px !important; }

@media (max-width: 420px) {
  #chat-window { right: 12px !important; bottom: 92px !important; width: calc(100vw - 24px) !important; }
  #chat-toggle  { right: 16px !important; bottom: 16px !important; }
  #chat-badge   { right: 14px !important; bottom: 68px !important; }
}
