/* IVI — assistant IA IPTVIA (widget site web). Préfixe #ivi-* pour ne jamais
   entrer en conflit avec les styles du site. */

#ivi-root, #ivi-root * { box-sizing: border-box; }
#ivi-root {
  --ivi-red: #E53935;
  --ivi-red-d: #C62828;
  --ivi-bg: #0A0A0A;
  --ivi-bot: #1C1C1C;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== Bulle flottante (état fermé) ===== */
#ivi-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ivi-red); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(229,57,53,0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
#ivi-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(229,57,53,0.55); }
#ivi-fab .ivi-bot { width: 40px; height: 40px; animation: ivi-float 3s ease-in-out infinite; }
#ivi-fab.ivi-hidden { transform: scale(0); opacity: 0; pointer-events: none; }

#ivi-badge {
  position: absolute; top: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #FF1744; border: 2px solid var(--ivi-bg);
}
#ivi-badge.ivi-hidden { display: none; }

@keyframes ivi-float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

/* ===== Robot SVG (états) ===== */
.ivi-eye { transform-box: fill-box; transform-origin: center; }
.ivi-bot:not(.ivi-think) .ivi-eye-l { animation: ivi-blink 3s infinite; }
.ivi-bot:not(.ivi-think) .ivi-eye-r { animation: ivi-blink 3s infinite .4s; }
.ivi-bot.ivi-think .ivi-eyes { animation: ivi-think 1s linear infinite; transform-box: fill-box; transform-origin: center; }
.ivi-antenna-dot { animation: ivi-pulse 1.6s ease-in-out infinite; transform-box: fill-box; }
.ivi-mouth { transition: d .3s ease; }

@keyframes ivi-blink { 0%,90%,100% { transform: scaleY(1);} 95% { transform: scaleY(0.1);} }
@keyframes ivi-think { from { transform: rotate(0);} to { transform: rotate(360deg);} }
@keyframes ivi-pulse { 0%,100% { opacity: 1;} 50% { opacity: .3;} }

/* ===== Panneau chat (état ouvert) ===== */
#ivi-panel {
  position: fixed; bottom: 100px; right: 24px; z-index: 9999;
  width: 380px; height: 580px; max-height: calc(100vh - 120px);
  background: var(--ivi-bg); border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 48px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
  animation: ivi-open .3s cubic-bezier(0.34,1.56,0.64,1);
}
#ivi-panel.ivi-hidden { display: none; }
@keyframes ivi-open {
  from { transform: scale(0.3) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Header */
#ivi-header {
  background: var(--ivi-red); height: 56px; flex: 0 0 56px;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #fff;
}
#ivi-header .ivi-bot { width: 28px; height: 28px; flex: 0 0 28px; }
#ivi-title { font-weight: 700; font-size: 16px; }
#ivi-status { display: flex; align-items: center; gap: 5px; font-size: 11px; opacity: .85; }
#ivi-status .ivi-dot { width: 7px; height: 7px; border-radius: 50%; background: #4CAF50; }
#ivi-close {
  margin-left: auto; background: none; border: none; color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 6px; opacity: .9; transition: opacity .2s;
}
#ivi-close:hover { opacity: .6; }

/* Zone messages */
#ivi-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ivi-bg);
}
#ivi-messages::-webkit-scrollbar { width: 6px; }
#ivi-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.ivi-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; animation: ivi-bubble .2s ease-out; }
.ivi-row.ivi-user { justify-content: flex-end; }
@keyframes ivi-bubble { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

.ivi-avatar {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--ivi-red); display: flex; align-items: center; justify-content: center;
}
.ivi-avatar .ivi-bot { width: 18px; height: 18px; }

.ivi-msg {
  max-width: 80%; padding: 10px 14px; font-size: 14px; line-height: 1.5;
  color: #fff; word-wrap: break-word; white-space: pre-wrap;
}
.ivi-msg.ivi-from-ivi { background: var(--ivi-bot); border-radius: 4px 16px 16px 16px; }
.ivi-msg.ivi-from-user { background: var(--ivi-red); border-radius: 16px 4px 16px 16px; }
.ivi-cursor::after { content: '▋'; opacity: .7; animation: ivi-caret 1s steps(1) infinite; }
@keyframes ivi-caret { 50% { opacity: 0; } }

/* Typing indicator */
.ivi-typing { display: flex; gap: 4px; padding: 14px; }
.ivi-typing span { width: 7px; height: 7px; border-radius: 50%; background: #888; animation: ivi-dot 1.2s infinite; }
.ivi-typing span:nth-child(2) { animation-delay: .15s; }
.ivi-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ivi-dot { 0%,60%,100% { transform: translateY(0);} 30% { transform: translateY(-6px);} }

/* Chips suggestions */
#ivi-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; }
#ivi-chips.ivi-hidden { display: none; }
.ivi-chip {
  background: var(--ivi-bot); border: 1px solid rgba(229,57,53,0.4);
  color: #fff; font-size: 12px; border-radius: 20px; padding: 6px 12px;
  cursor: pointer; transition: background .15s;
}
.ivi-chip:hover { background: rgba(229,57,53,0.15); }

/* Zone escalade */
.ivi-escalate { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ivi-escalate input {
  background: var(--ivi-bot); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 9px 12px; color: #fff; font-size: 13px; outline: none;
}
.ivi-escalate input:focus { border-color: var(--ivi-red); }
.ivi-escalate button {
  background: var(--ivi-red); color: #fff; border: none; border-radius: 10px;
  padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ivi-escalate button:hover { background: var(--ivi-red-d); }
.ivi-escalate button:disabled { opacity: .5; cursor: default; }

/* Input */
#ivi-input-zone {
  flex: 0 0 auto; background: #141414; border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 16px; display: flex; gap: 8px; align-items: center;
}
#ivi-text {
  flex: 1; background: var(--ivi-bot); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 10px 16px; color: #fff; font-size: 14px; outline: none;
}
#ivi-text::placeholder { color: #888; }
#ivi-text:focus { border-color: var(--ivi-red); }
#ivi-send {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--ivi-red); border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s;
}
#ivi-send:hover { background: var(--ivi-red-d); }
#ivi-send:disabled { opacity: .4; cursor: default; }

/* Mobile */
@media (max-width: 480px) {
  #ivi-panel {
    width: 100vw; height: 75vh; max-height: 75vh;
    bottom: 0; right: 0; left: 0;
    border-radius: 16px 16px 0 0;
  }
  #ivi-fab { bottom: 18px; right: 18px; }
}