/* INTOLERIS Agent IA — Widget CSS v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --ia-teal:      #2dd4bf;
  --ia-teal-l:    #5eead4;
  --ia-bg:        #080d12;
  --ia-bg2:       #0d1520;
  --ia-bg3:       #0a1018;
  --ia-border:    rgba(45,212,191,.15);
  --ia-text:      #e2e8f0;
  --ia-muted:     #64748b;
  --ia-danger:    #f87171;
  --ia-warn:      #fbbf24;
  --ia-ok:        #4ade80;
  --ia-font:      'Outfit', 'DM Sans', system-ui, sans-serif;
  --ia-radius:    16px;
  --ia-shadow:    0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(45,212,191,.1);
}

/* ── Root container ────────────────────────────────────────────────────── */
#ia-agent-root {
  position:    fixed;
  z-index:     99999;
  bottom:      24px;
  right:       24px;
  font-family: var(--ia-font);
  /* Taille auto — s'adapte au contenu du pill */
}
#ia-agent-root[data-position="bottom-left"] { right: auto; left: 24px; }

/* ── FAB — pill visible avec label ─────────────────────────────────── */
#ia-fab {
  display:         flex;
  align-items:     center;
  gap:             9px;
  padding:         0 18px 0 14px;
  height:          48px;
  border-radius:   28px;
  background:      var(--ia-teal);
  border:          none;
  cursor:          pointer;
  box-shadow:      0 4px 24px rgba(45,212,191,.45), 0 0 0 0 rgba(45,212,191,.35);
  transition:      all .25s;
  position:        relative;
  white-space:     nowrap;
  animation:       ia-fab-breathe 3s ease-in-out 2s infinite;
}
@keyframes ia-fab-breathe {
  0%,100% { box-shadow: 0 4px 24px rgba(45,212,191,.45), 0 0 0 0   rgba(45,212,191,.3); }
  50%     { box-shadow: 0 4px 24px rgba(45,212,191,.45), 0 0 0 10px rgba(45,212,191,.0); }
}
#ia-fab:hover {
  transform:  translateY(-2px);
  background: var(--ia-teal-l);
  box-shadow: 0 8px 28px rgba(45,212,191,.55);
  animation:  none;
}
#ia-fab:active { transform: scale(.97); }

/* Icône dans le pill */
#ia-fab-icon-wrap {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      rgba(0,0,0,.18);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
#ia-fab svg {
  width:  16px;
  height: 16px;
  color:  #080d12;
}

/* Texte du pill */
#ia-fab-label {
  font-family:    var(--ia-font);
  font-size:      14px;
  font-weight:    700;
  color:          #080d12;
  letter-spacing: .2px;
  line-height:    1;
}
#ia-fab-sublabel {
  font-family:    var(--ia-font);
  font-size:      10.5px;
  font-weight:    500;
  color:          rgba(8,13,18,.6);
  line-height:    1;
  margin-top:     2px;
}
.ia-fab-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

/* Icône close — cachée par défaut */
#ia-fab-icon-close { display: none; }
#ia-fab.ia-open #ia-fab-icon-open  { display: none; }
#ia-fab.ia-open #ia-fab-icon-close { display: block; }
#ia-fab.ia-open #ia-fab-sublabel   { display: none; }
#ia-fab.ia-open #ia-fab-label      { font-size: 13px; }

.ia-fab-badge {
  position:   absolute;
  top:        -4px;
  right:      -4px;
  width:      18px;
  height:     18px;
  border-radius: 50%;
  background: #ef4444;
  color:      #fff;
  font-size:  11px;
  font-weight: 700;
  display:    flex;
  align-items: center;
  justify-content: center;
  border:     2px solid #fff;
}

/* ── Chat window ──────────────────────────────────────────────────────── */
#ia-chat-window {
  /* Position fixe ancrée au viewport — jamais de débordement */
  position:      fixed;
  bottom:        90px;
  right:         24px;
  width:         360px;
  max-height:    580px;
  border-radius: var(--ia-radius);
  background:    var(--ia-bg);
  border:        1px solid var(--ia-border);
  box-shadow:    var(--ia-shadow);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  animation:     ia-slide-in .2s ease;
  z-index:       99998;
}
/* Version gauche */
#ia-agent-root[data-position="bottom-left"] ~ #ia-chat-window,
#ia-agent-root[data-position="bottom-left"] #ia-chat-window {
  right: auto;
  left:  24px;
}

@keyframes ia-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

@media (max-width: 480px) {
  #ia-agent-root        { bottom: 12px; right: 12px; }
  #ia-agent-root[data-position="bottom-left"] { right: auto; left: 12px; }
  #ia-chat-window {
    width:  calc(100vw - 24px);
    right:  12px;
    left:   12px;
    bottom: 80px;
    max-height: calc(100vh - 100px);
  }
}

/* ── Inline widget ───────────────────────────────────────────────────── */
.ia-inline-widget {
  border-radius: var(--ia-radius);
  border:        1px solid var(--ia-border);
  background:    var(--ia-bg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
}
.ia-inline-widget .ia-chat-inner { height: 100%; }

/* ── Inner layout ────────────────────────────────────────────────────── */
.ia-chat-inner {
  display:        flex;
  flex-direction: column;
  height:         100%;
  max-height:     580px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.ia-chat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         14px 16px;
  background:      linear-gradient(135deg, #0f2d2a, #0d1520);
  border-bottom:   1px solid var(--ia-border);
  flex-shrink:     0;
}
.ia-chat-header-left { display: flex; align-items: center; gap: 11px; }
.ia-chat-avatar {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    rgba(45,212,191,.12);
  border:        1.5px solid rgba(45,212,191,.35);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     18px;
  flex-shrink:   0;
}
.ia-chat-name   { font-weight: 700; font-size: 14px; color: var(--ia-text); }
.ia-chat-status {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   11px;
  color:       var(--ia-teal);
}
.ia-status-dot {
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background:       var(--ia-teal);
  animation:        ia-pulse 2s infinite;
}
@keyframes ia-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.ia-chat-header-actions { display: flex; gap: 4px; }
.ia-btn-icon {
  width:         28px;
  height:        28px;
  border-radius: 6px;
  background:    transparent;
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #64748b;
  transition:    all .2s;
}
.ia-btn-icon:hover { background: rgba(255,255,255,.07); color: var(--ia-text); }
.ia-btn-icon svg { width: 14px; height: 14px; }

/* ── Messages ────────────────────────────────────────────────────────── */
.ia-messages {
  flex:        1;
  overflow-y:  auto;
  padding:     14px;
  display:     flex;
  flex-direction: column;
  gap:         10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(45,212,191,.2) transparent;
}
.ia-messages::-webkit-scrollbar       { width: 4px; }
.ia-messages::-webkit-scrollbar-thumb { background: rgba(45,212,191,.2); border-radius: 4px; }

/* Message bubbles */
.ia-msg { display: flex; gap: 8px; max-width: 88%; }
.ia-msg.ia-bot  { align-self: flex-start; }
.ia-msg.ia-user { align-self: flex-end; flex-direction: row-reverse; }

.ia-msg-avatar {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     13px;
  flex-shrink:   0;
  margin-top:    2px;
}
.ia-bot  .ia-msg-avatar { background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.2); }
.ia-user .ia-msg-avatar { background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.25); }

.ia-msg-bubble {
  padding:       9px 13px;
  border-radius: 13px;
  font-size:     13.5px;
  line-height:   1.55;
}
.ia-bot  .ia-msg-bubble {
  background:    var(--ia-bg2);
  border:        1px solid rgba(45,212,191,.1);
  color:         var(--ia-text);
  border-radius: 4px 13px 13px 13px;
}
.ia-user .ia-msg-bubble {
  background:    rgba(45,212,191,.13);
  border:        1px solid rgba(45,212,191,.22);
  color:         var(--ia-text);
  border-radius: 13px 4px 13px 13px;
}

/* Typing indicator */
.ia-typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.ia-typing-dots span {
  width:           7px;
  height:          7px;
  border-radius:   50%;
  background:      var(--ia-teal);
  opacity:         .4;
  animation:       ia-blink 1.2s infinite;
}
.ia-typing-dots span:nth-child(2) { animation-delay: .2s; }
.ia-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ia-blink { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Carte résultat d'analyse ─────────────────────────────────────────── */
.ia-result-card {
  margin-top:    8px;
  background:    #091520;
  border:        1px solid rgba(45,212,191,.18);
  border-radius: 10px;
  padding:       11px 13px;
  font-size:     12.5px;
}
.ia-result-title {
  font-weight:   700;
  color:         var(--ia-text);
  margin-bottom: 8px;
  font-size:     13px;
}
.ia-result-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.ia-pill {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      3px 8px;
  border-radius: 6px;
  font-size:    11.5px;
  font-weight:  700;
}
.ia-pill-danger { background: rgba(239,68,68,.12); color: var(--ia-danger); border: 1px solid rgba(239,68,68,.2); }
.ia-pill-warn   { background: rgba(251,191,36,.1);  color: var(--ia-warn);   border: 1px solid rgba(251,191,36,.2); }
.ia-pill-ok     { background: rgba(34,197,94,.1);   color: var(--ia-ok);     border: 1px solid rgba(34,197,94,.2); }
.ia-pill-na     { background: rgba(100,116,139,.1); color: var(--ia-muted);  border: 1px solid rgba(100,116,139,.15); }
.ia-result-alts {
  margin-top:    7px;
  padding-top:   7px;
  border-top:    1px solid rgba(255,255,255,.05);
  color:         var(--ia-muted);
  font-size:     11.5px;
  line-height:   1.55;
}
.ia-result-alts strong { color: var(--ia-ok); }
.ia-result-conseil {
  margin-top:    6px;
  font-size:     11.5px;
  color:         #94a3b8;
  font-style:    italic;
  line-height:   1.5;
}

/* ── Suggestions rapides ──────────────────────────────────────────────── */
.ia-suggestions {
  padding:     0 12px 8px;
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
}
.ia-sug-btn {
  background:    rgba(45,212,191,.07);
  border:        1px solid rgba(45,212,191,.2);
  color:         var(--ia-teal);
  border-radius: 20px;
  padding:       5px 11px;
  font-size:     12px;
  cursor:        pointer;
  transition:    all .2s;
  font-family:   var(--ia-font);
  line-height:   1.4;
}
.ia-sug-btn:hover { background: rgba(45,212,191,.15); border-color: rgba(45,212,191,.4); }

/* ── Zone de saisie ──────────────────────────────────────────────────── */
.ia-input-area {
  display:     flex;
  gap:         8px;
  align-items: flex-end;
  padding:     10px 12px;
  border-top:  1px solid rgba(45,212,191,.08);
  background:  var(--ia-bg3);
  flex-shrink: 0;
}
.ia-input {
  flex:          1;
  background:    var(--ia-bg2);
  border:        1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding:       8px 12px;
  color:         var(--ia-text);
  font-size:     13.5px;
  font-family:   var(--ia-font);
  resize:        none;
  outline:       none;
  min-height:    36px;
  max-height:    96px;
  line-height:   1.5;
  transition:    border-color .2s;
}
.ia-input::placeholder { color: #475569; }
.ia-input:focus        { border-color: rgba(45,212,191,.35); }

.ia-send-btn {
  width:         36px;
  height:        36px;
  border-radius: 9px;
  background:    var(--ia-teal);
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all .2s;
  flex-shrink:   0;
}
.ia-send-btn:hover    { background: var(--ia-teal-l); transform: scale(1.05); }
.ia-send-btn:disabled { opacity: .4; cursor: default; transform: none; }
.ia-send-btn svg      { width: 15px; height: 15px; fill: #080d12; }

/* ── Footer note ─────────────────────────────────────────────────────── */
.ia-footer-note {
  text-align:  center;
  font-size:   10px;
  color:       rgba(255,255,255,.12);
  padding:     4px 12px 8px;
  font-family: var(--ia-font);
  letter-spacing: .3px;
}

/* ── Trigger button (shortcode) ──────────────────────────────────────── */
.ia-trigger-btn {
  background:    var(--ia-teal);
  color:         #080d12;
  border:        none;
  border-radius: 8px;
  padding:       10px 20px;
  font-family:   var(--ia-font);
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all .2s;
}
.ia-trigger-btn:hover { background: var(--ia-teal-l); transform: translateY(-1px); }