/* AM Chatbot v2.0.0 */
/* =============================================
   AM CHATBOT — Styles principaux
   4 thèmes : modern | glass | minimal | retro
   ============================================= */

/* ── Variables de base ── */
:root {
  --am-bubble-color: #1a73e8;
  --am-bubble-size: 60px;
  --am-chat-width: 360px;
  --am-chat-height: 500px;
  --am-radius: 18px;
  --am-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --am-z: 999999;
}

/* ── Bulle flottante WhatsApp-style ── */
#am-chatbot-bubble {
  position: fixed;
  bottom: 24px;
  z-index: var(--am-z);
  width: var(--am-bubble-size);
  height: var(--am-bubble-size);
  border-radius: 50%;
  background: var(--am-bubble-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 0 var(--am-bubble-color);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: am-pulse 2.5s infinite;
  user-select: none;
}
#am-chatbot-bubble.am-pos-right { right: 24px; }
#am-chatbot-bubble.am-pos-left  { left:  24px; }
#am-chatbot-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
  animation: none;
}
#am-chatbot-bubble svg,
#am-chatbot-bubble .am-icon-emoji {
  width: 28px; height: 28px;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
}
@keyframes am-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 0 var(--am-bubble-color); }
  60%      { box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 12px transparent; }
}

/* Badge notification */
#am-chatbot-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #e53935;
  border: 2px solid #fff;
  display: none;
}
#am-chatbot-badge.am-visible { display: block; }

/* ── Fenêtre de chat ── */
#am-chatbot-window {
  position: fixed !important;
  bottom: 96px !important;
  z-index: var(--am-z) !important;
  width: var(--am-chat-width) !important;
  height: var(--am-chat-height) !important;
  min-height: var(--am-chat-height) !important;
  max-height: var(--am-chat-height) !important;
  display: none !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--am-radius) !important;
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  pointer-events: none !important;
}
#am-chatbot-window.am-pos-right { right: 24px; }
#am-chatbot-window.am-pos-left  { left:  24px; }
#am-chatbot-window.am-open {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  height: var(--am-chat-height) !important;
  pointer-events: all !important;
}

/* ── Responsive mobile ── */
@media (max-width: 480px) {
  #am-chatbot-window {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    pointer-events: none !important;
  }
  #am-chatbot-window.am-open {
    display: flex !important;
    flex-direction: column !important;
    pointer-events: all !important;
  }
  #am-chatbot-window .am-chat-messages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  #am-chatbot-window .am-chat-input-row,
  #am-chatbot-window .am-powered {
    flex: 0 0 auto !important;
  }
}

/* ── Structure interne commune ── */
.am-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  flex-shrink: 0;
}
.am-chat-header .am-header-info {
  flex: 1;
}
.am-chat-header .am-bot-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.am-chat-header .am-status {
  font-size: 12px;
  opacity: .65;
  margin-top: 2px;
}
.am-chat-header .am-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.am-chat-header .am-avatar svg {
  width: 42px; height: 42px;
}
/* Logo AM avatar - fond blanc, lettres couleur bulle */
.am-chat-header .am-avatar.am-logo-avatar {
  background: #fff !important;
  padding: 4px;
}
.am-chat-header .am-avatar.am-logo-avatar svg {
  width: 38px; height: 21px;
}
/* Thème minimal: fond noir, logo blanc */
.am-theme-minimal .am-chat-header .am-avatar.am-logo-avatar {
  background: #fff !important;
  color: #111;
}
/* Thème retro: fond vert sombre */
.am-theme-retro .am-chat-header .am-avatar.am-logo-avatar {
  background: #0d1117 !important;
  color: #30f260;
  border: 1px solid #30f260 !important;
}
.am-chat-header .am-header-info { flex: 1; }
.am-chat-header .am-bot-name { font-weight: 700; font-size: 16px; line-height: 1; }
.am-chat-header .am-close-btn {
  background: none; border: none;
  cursor: pointer; padding: 4px;
  opacity: .6; font-size: 20px;
  line-height: 1;
  transition: opacity .15s;
}
.am-chat-header .am-close-btn:hover { opacity: 1; }

.am-chat-messages {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.am-chat-messages::-webkit-scrollbar { width: 5px; }
.am-chat-messages::-webkit-scrollbar-thumb { border-radius: 4px; }

.am-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  animation: am-msg-in .18s ease;
}
@keyframes am-msg-in {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}
.am-msg.am-bot { align-self: flex-start; border-bottom-left-radius: 4px; }
.am-msg.am-user { align-self: flex-end; border-bottom-right-radius: 4px; }

/* Typing indicator */
.am-typing {
  display: flex; gap: 5px;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.am-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  animation: am-dot .9s infinite;
}
.am-typing span:nth-child(2) { animation-delay: .15s; }
.am-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes am-dot {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-5px); }
}

.am-chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  flex-shrink: 0;
}
.am-chat-input-row textarea {
  flex: 1;
  border-radius: 22px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: var(--am-font);
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 40px;
  max-height: 100px;
  overflow-y: auto;
}
.am-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, opacity .15s;
}
.am-send-btn:hover  { transform: scale(1.08); }
.am-send-btn:active { transform: scale(.94); }
.am-send-btn svg { width: 18px; height: 18px; }

.am-powered {
  text-align: center;
  font-size: 10px;
  opacity: .4;
  padding: 4px 0 6px;
  flex-shrink: 0;
}

/* ================================================================
   THÈME 1 — MODERN (default)
   Blanc, ombres, coins arrondis, couleur de marque
   ================================================================ */
.am-theme-modern #am-chatbot-window {
  background: #ffffff;
  border-radius: var(--am-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
}
.am-theme-modern .am-chat-header {
  background: var(--am-bubble-color);
  color: #fff;
}
.am-theme-modern .am-chat-header .am-avatar { background: rgba(255,255,255,.22); color: #fff; font-weight: 700; }
.am-theme-modern .am-chat-header .am-close-btn { color: #fff; }
.am-theme-modern .am-chat-messages { background: #f5f7fa; }
.am-theme-modern .am-chat-messages::-webkit-scrollbar-thumb { background: #c9d0dc; }
.am-theme-modern .am-msg.am-bot  { background: #fff; color: #1a1a2e; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.am-theme-modern .am-msg.am-user { background: var(--am-bubble-color); color: #fff; }
.am-theme-modern .am-typing      { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.am-theme-modern .am-typing span { background: #aab; }
.am-theme-modern .am-chat-input-row { background: #fff; border-top: 1px solid #eef0f4; }
.am-theme-modern .am-chat-input-row textarea { background: #f5f7fa; border: 1.5px solid #e2e6ed; color: #1a1a2e; }
.am-theme-modern .am-chat-input-row textarea:focus { border-color: var(--am-bubble-color); }
.am-theme-modern .am-send-btn    { background: var(--am-bubble-color); color: #fff; }
.am-theme-modern .am-powered     { background: #fff; color: #888; }

/* ================================================================
   THÈME 2 — GLASSMORPHISM
   Fond flouté, transparences, style Apple
   ================================================================ */
.am-theme-glass #am-chatbot-window {
  background: rgba(255,255,255,.18);
  border-radius: var(--am-radius);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.am-theme-glass .am-chat-header {
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #1a1a2e;
}
.am-theme-glass .am-chat-header .am-avatar { background: var(--am-bubble-color); color:#fff; font-weight: 700; }
.am-theme-glass .am-chat-header .am-close-btn { color: #333; }
.am-theme-glass .am-chat-messages { background: transparent; }
.am-theme-glass .am-msg.am-bot  { background: rgba(255,255,255,.55); color: #1a1a2e; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.5); }
.am-theme-glass .am-msg.am-user { background: var(--am-bubble-color); color:#fff; }
.am-theme-glass .am-typing      { background: rgba(255,255,255,.55); backdrop-filter:blur(8px); }
.am-theme-glass .am-typing span { background: #888; }
.am-theme-glass .am-chat-input-row { background: rgba(255,255,255,.2); border-top: 1px solid rgba(255,255,255,.25); }
.am-theme-glass .am-chat-input-row textarea { background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.5); color: #1a1a2e; backdrop-filter: blur(8px); }
.am-theme-glass .am-chat-input-row textarea::placeholder { color: #666; }
.am-theme-glass .am-send-btn { background: var(--am-bubble-color); color: #fff; }
.am-theme-glass .am-powered { color: #666; }

/* ================================================================
   THÈME 3 — MINIMAL
   Noir & blanc, lignes nettes, typographie forte
   ================================================================ */
.am-theme-minimal #am-chatbot-window {
  background: #fff;
  border-radius: 6px;
  border: 2px solid #111;
  box-shadow: 6px 6px 0 #111;
  font-family: 'Georgia', serif;
}
.am-theme-minimal .am-chat-header { background: #111; color: #fff; padding: 16px; }
.am-theme-minimal .am-chat-header .am-avatar { background: #fff; color:#111; font-weight: 900; }
.am-theme-minimal .am-chat-header .am-bot-name { font-family:'Georgia',serif; letter-spacing:.04em; }
.am-theme-minimal .am-chat-header .am-close-btn { color: #fff; }
.am-theme-minimal .am-chat-messages { background: #fafafa; }
.am-theme-minimal .am-msg.am-bot  { background: #efefef; color: #111; border-radius: 4px; font-size:13.5px; }
.am-theme-minimal .am-msg.am-user { background: #111; color: #fff; border-radius: 4px; }
.am-theme-minimal .am-typing      { background: #efefef; border-radius:4px; }
.am-theme-minimal .am-typing span { background: #555; }
.am-theme-minimal .am-chat-input-row { background: #fff; border-top: 2px solid #111; }
.am-theme-minimal .am-chat-input-row textarea { background: #fff; border: 2px solid #111; border-radius: 4px; color:#111; font-family:'Georgia',serif; }
.am-theme-minimal .am-chat-input-row textarea:focus { outline:2px solid #555; }
.am-theme-minimal .am-send-btn { background: #111; color:#fff; border-radius:4px; }
.am-theme-minimal .am-powered { color:#999; }

/* ================================================================
   THÈME 4 — RETRO TERMINAL
   Fond sombre, texte vert, police monospace, style console
   ================================================================ */
.am-theme-retro #am-chatbot-window {
  background: #0d1117;
  border-radius: 8px;
  border: 1px solid #30f260;
  box-shadow: 0 0 0 1px rgba(48,242,96,.15), 0 0 30px rgba(48,242,96,.12);
  font-family: 'Courier New', monospace;
}
.am-theme-retro .am-chat-header {
  background: #0d1117;
  border-bottom: 1px solid #30f26033;
  color: #30f260;
  padding: 10px 14px;
}
.am-theme-retro .am-chat-header::before {
  content: '● ● ● ';
  color: #30f26066;
  font-size: 11px;
  letter-spacing: 3px;
}
.am-theme-retro .am-chat-header .am-avatar { background: #30f26022; color:#30f260; border: 1px solid #30f26044; font-weight: 700; }
.am-theme-retro .am-chat-header .am-bot-name { color: #30f260; font-weight: 400; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
.am-theme-retro .am-chat-header .am-status { color: #30f26088; }
.am-theme-retro .am-chat-header .am-close-btn { color: #30f260; }
.am-theme-retro .am-chat-messages { background: #0d1117; }
.am-theme-retro .am-chat-messages::-webkit-scrollbar-thumb { background: #30f26044; }
.am-theme-retro .am-msg.am-bot  {
  background: transparent;
  color: #30f260;
  border-left: 2px solid #30f260;
  border-radius: 0;
  padding-left: 10px;
  font-size: 13px;
}
.am-theme-retro .am-msg.am-bot::before { content: '> '; color:#30f26088; }
.am-theme-retro .am-msg.am-user {
  background: #30f26018;
  color: #c3e88d;
  border: 1px solid #30f26033;
  border-radius: 4px;
  font-size: 13px;
}
.am-theme-retro .am-typing      { background: transparent; border-left:2px solid #30f260; border-radius:0; padding-left:10px; }
.am-theme-retro .am-typing span { background: #30f260; }
.am-theme-retro .am-chat-input-row { background: #0d1117; border-top: 1px solid #30f26033; }
.am-theme-retro .am-chat-input-row textarea {
  background: #0d1117;
  border: 1px solid #30f26066;
  border-radius: 4px;
  color: #30f260;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  caret-color: #30f260;
}
.am-theme-retro .am-chat-input-row textarea::placeholder { color: #30f26044; }
.am-theme-retro .am-chat-input-row textarea:focus { border-color: #30f260; box-shadow: 0 0 8px rgba(48,242,96,.2); }
.am-theme-retro .am-send-btn { background: #30f26022; color:#30f260; border:1px solid #30f260; border-radius:4px; }
.am-theme-retro .am-send-btn:hover { background: #30f26044; }
.am-theme-retro .am-powered { color: #30f26033; }

/* v2.0 — Status ligne, avatar logo noir */
.am-chat-header .am-status {
  font-size: 11px;
  opacity: .65;
  margin-top: 1px;
}
.am-theme-modern .am-chat-header .am-status { color: rgba(255,255,255,.8); }
.am-theme-glass  .am-chat-header .am-status { color: #555; }
.am-theme-minimal .am-chat-header .am-status { color: rgba(255,255,255,.6); }
.am-theme-retro  .am-chat-header .am-status { color: #30f26088; }

/* Avatar logo : fond noir, image ronde */
.am-chat-header .am-logo-avatar {
  background: #1a1a1a !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.15);
}
.am-chat-header .am-logo-avatar img {
  border-radius: 50%;
  display: block;
}

/* Bouton fermer amélioré */
.am-chat-header .am-close-btn {
  background: rgba(255,255,255,.15) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 1 !important;
  transition: background .15s !important;
  flex-shrink: 0 !important;
}
.am-chat-header .am-close-btn:hover { background: rgba(255,255,255,.28) !important; }
.am-chat-header .am-close-btn svg { width: 14px !important; height: 14px !important; }

/* v2.0.1 — Logo centré, object-fit contain pour garder proportion */
.am-chat-header .am-logo-avatar img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}
.am-chat-header .am-logo-avatar {
  background: #1a1a1a !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}


/* ── v2.0 fixes finaux ── */

/* Fenêtre : hauteur stricte */
#am-chatbot-window {
  box-sizing: border-box !important;
}

/* Messages zone : flex correct */
.am-chat-messages {
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

/* Input + powered : ne pas se dilater */
.am-chat-input-row,
.am-powered {
  flex: 0 0 auto !important;
}

/* Header modern : couleur bulle + texte blanc */
.am-theme-modern .am-chat-header {
  background: var(--am-bubble-color) !important;
  color: #fff !important;
}
.am-theme-modern .am-chat-header .am-bot-name  { color: #fff !important; }
.am-theme-modern .am-chat-header .am-status    { color: rgba(255,255,255,.72) !important; }
.am-theme-modern .am-chat-header .am-close-btn {
  background: rgba(255,255,255,.18) !important;
  border-radius: 50% !important;
  width: 28px !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; border: none !important; cursor: pointer !important;
}
.am-theme-modern .am-chat-header .am-close-btn svg { stroke: #fff !important; width: 13px !important; height: 13px !important; }
.am-theme-modern .am-chat-header .am-logo-avatar {
  background: rgba(255,255,255,.14) !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
}

/* ── Mobile : header toujours visible, input toujours en bas ── */
@media (max-width: 480px) {
  .am-chat-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }
  .am-chat-messages {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .am-chat-input-row {
    flex: 0 0 auto !important;
    position: relative !important;
  }
  .am-powered {
    flex: 0 0 auto !important;
  }
}