/* Chatbot IPTV - Standalone CSS */
/* France IPTV Pro - Include on any page with chatbot */

#iptvChatWidget * {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

:root {
  --iptv-red: #ff0000;
  --iptv-red-dark: #b80000;
  --iptv-bg: #050000;
}

/* Bouton flottant */
.iptv-btn {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 2px solid var(--iptv-red) !important;
  background: linear-gradient(135deg, #ff4b4b, #9b0000) !important;
  box-shadow: 0 0 20px #ff0000, 0 0 60px #b80000;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  animation: pulseGlow 3s infinite alternate ease-in-out;
  z-index: 99999 !important;
  transition: transform 0.3s ease;
}
.iptv-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px #ff0000, 0 0 80px #b80000;
}
.iptv-btn svg { fill: #fff !important; }

@keyframes pulseGlow {
  0% { box-shadow: 0 0 15px #ff0000, 0 0 40px #b80000; }
  100% { box-shadow: 0 0 30px #ff4b4b, 0 0 60px #b80000; }
}

/* Container chat */
.iptv-box {
  position: fixed !important;
  bottom: 110px !important;
  right: 30px !important;
  width: 480px !important;
  max-width: calc(100vw - 40px) !important;
  height: 680px !important;
  max-height: 85vh !important;
  border-radius: 28px !important;
  background: #000 !important;
  border: 2px solid rgba(255, 0, 0, 0.8) !important;
  box-shadow: 0 0 64px rgba(255, 0, 0, 0.85);
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 99999 !important;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  isolation: isolate !important;
}
.iptv-box.active {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.iptv-header {
  padding: 14px 22px !important;
  background: linear-gradient(90deg, var(--iptv-red), var(--iptv-red-dark)) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 0 14px rgba(255, 0, 0, 0.7);
  border-radius: 28px 28px 0 0 !important;
  font-weight: 700;
  font-size: 16px;
}
.iptv-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.iptv-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 14px #ff0000;
}
.iptv-logo-play {
  width: 0 !important;
  height: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 13px solid red !important;
  margin-left: 4px !important;
}
.iptv-header-title {
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
}
.iptv-header-title span:first-child {
  font-size: 15px !important;
  font-weight: 900 !important;
}
.iptv-header-title span:last-child {
  font-size: 11px !important;
  opacity: 0.9 !important;
}
.iptv-close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(0,0,0,0.3) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 18px !important;
  box-shadow: 0 0 12px #ff0000;
  transition: background 0.3s ease;
}
.iptv-close:hover { background: rgba(255, 0, 0, 0.7) !important; }

/* Body */
.iptv-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--iptv-bg) !important;
  padding: 10px 14px 0 14px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Form view */
.iptv-form {
  padding: 26px 18px 18px 18px !important;
  color: #fff !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  border-radius: 18px !important;
  background: #050000 !important;
  box-shadow: inset 0 0 16px rgba(255,0,0,0.35);
  scrollbar-width: thin;
  scrollbar-color: #ff0000 transparent;
}
.iptv-form::-webkit-scrollbar { width: 6px; }
.iptv-form::-webkit-scrollbar-track { background: transparent; }
.iptv-form::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 20px;
}
.iptv-form-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  text-shadow: 0 0 12px #ff0000;
}
.iptv-form-sub {
  font-size: 13px !important;
  text-align: center !important;
  opacity: 0.9 !important;
  margin-bottom: 16px !important;
  font-weight: 500;
  line-height: 1.4;
}
.iptv-label {
  font-size: 13px !important;
  margin: 10px 0 4px 4px !important;
  font-weight: 600;
}
.iptv-input, .iptv-select {
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 10px 14px !important;
  background: #151515 !important;
  color: #fff !important;
  font-size: 13px !important;
  outline: none !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: inset 0 0 8px #b80000;
  transition: box-shadow 0.3s ease;
  font-weight: 500;
}
.iptv-input:focus, .iptv-select:focus {
  box-shadow: inset 0 0 12px #ff0000;
}
.iptv-help {
  font-size: 11px !important;
  opacity: 0.7 !important;
  margin-bottom: 8px !important;
}
.iptv-err {
  font-size: 10px !important;
  color: #ff6b6b !important;
  margin-top: 2px !important;
  display: none !important;
}
.iptv-btn-main {
  margin-top: 10px !important;
  width: 100% !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 10px 14px !important;
  background: linear-gradient(90deg, #ff0000, #b80000) !important;
  box-shadow: 0 0 15px #ff0000;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  text-transform: uppercase;
}
.iptv-btn-secondary {
  border-radius: 999px !important;
  border: 2px solid #ff0000 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  color: #ff0000 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.iptv-btn-secondary:hover {
  background: rgba(255, 0, 0, 0.1) !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}
.iptv-or {
  margin-top: 5px !important;
  text-align: center !important;
  font-size: 10px !important;
  opacity: 0.85 !important;
  font-weight: 600;
}

/* Chat view */
.iptv-chat {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  margin-top: 10px !important;
  padding: 12px 12px 8px 12px !important;
  color: #fff !important;
  background: #050000 !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 16px rgba(255, 0, 0, 0.35);
  min-height: 0 !important;
  overflow: hidden !important;
}

.iptv-chat-messages {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 4px 6px 4px !important;
  min-height: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: #ff0000 transparent;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}
.iptv-chat-messages::-webkit-scrollbar { width: 6px; }
.iptv-chat-messages::-webkit-scrollbar-track { background: transparent; }
.iptv-chat-messages::-webkit-scrollbar-thumb {
  background-color: #ff0000;
  border-radius: 15px;
}

.iptv-msg-user-wrap,
.iptv-msg-bot-wrap {
  display: flex !important;
  margin: 6px 0 !important;
}
.iptv-msg-user-wrap { justify-content: flex-end !important; }
.iptv-msg-bot-wrap { justify-content: flex-start !important; }

.iptv-msg-user,
.iptv-msg-bot {
  max-width: 90% !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
}
.iptv-msg-user {
  background: linear-gradient(135deg, #ff0000, #dc2626) !important;
  color: #fff !important;
  border-radius: 16px 16px 4px 16px !important;
}
.iptv-msg-bot {
  background: linear-gradient(135deg, #200000, #450000) !important;
  color: #fff !important;
  border-radius: 16px 16px 16px 4px !important;
}

.iptv-typing {
  display: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: 0.8 !important;
  margin: 4px 0 4px 2px !important;
  color: #ff4b4b !important;
}
.iptv-typing.active {
  display: block !important;
  animation: typingBlink 1s infinite;
}
@keyframes typingBlink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

/* Zone input */
.iptv-input-zone {
  padding: 12px 18px 18px 18px !important;
  border-top: 1px solid rgba(255, 0, 0, 0.7) !important;
  background: #050000 !important;
}
.iptv-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #151515 !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  border: 1px dashed #b80000 !important;
  box-shadow: inset 0 0 15px #ff0000;
}
.iptv-chat-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  color: #ff4b4b !important;
  font-size: 16px !important;
  padding: 8px 4px !important;
  line-height: 16px !important;
  text-align: left !important;
  font-weight: 600;
}
.iptv-chat-input::placeholder {
  color: #b80000 !important;
  font-weight: 400;
}
.iptv-send {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff0000, #b80000) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 18px #ff0000 !important;
}
.iptv-send svg {
  width: 20px !important;
  height: 20px !important;
  fill: #fff !important;
}

/* Quit Chat Button */
.iptv-quit-btn {
  width: 100% !important;
  padding: 10px !important;
  margin-top: 8px !important;
  background: rgba(255, 0, 0, 0.1) !important;
  border: 1px solid rgba(255, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}
.iptv-quit-btn:hover {
  background: rgba(255, 0, 0, 0.2) !important;
  border-color: rgba(255, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* MOBILE */
@media (max-width: 480px) {
  .iptv-box {
    width: 95vw !important;
    max-width: 380px !important;
    right: 2.5vw !important;
    bottom: 80px !important;
    height: 70vh !important;
    max-height: 550px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5) !important;
  }
  .iptv-header {
    border-radius: 20px 20px 0 0 !important;
    padding: 15px !important;
  }
  .iptv-input-zone {
    border-radius: 0 0 20px 20px !important;
    padding: 12px !important;
  }
  .iptv-btn {
    right: 15px !important;
    bottom: 15px !important;
    width: 60px !important;
    height: 60px !important;
  }
  .iptv-chat-messages {
    max-height: calc(70vh - 180px) !important;
  }
}