/* ================================================================
   CHATGPT CHATBOX — CSS v2.2.0
   Entièrement isolé du thème WordPress
================================================================ */

:root {
  --cgpt-panel:   rgba(14,20,36,.94);
  --cgpt-stroke:  rgba(255,255,255,.10);
  --cgpt-ink:     #eaf0ff;
  --cgpt-muted:   #8b96b5;
  --cgpt-accent:  #4f8eff;
  --cgpt-green:   #2ecf8e;
  --cgpt-danger:  #ff5f5f;
  --cgpt-shadow:  0 24px 56px rgba(0,0,0,.45);
  --cgpt-font:    system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ================================================================
   RESET — isolation totale du thème
================================================================ */
.cgpt-fab,
.cgpt-fab *,
#cgpt-chat,
#cgpt-chat * {
  all: revert;
  box-sizing: border-box !important;
  font-family: var(--cgpt-font) !important;
  -webkit-font-smoothing: antialiased;
  line-height: normal !important;
}

/* Liens dans les bulles */
#cgpt-chat a,
#cgpt-chat a:link,
#cgpt-chat a:visited,
#cgpt-chat a:hover,
#cgpt-chat a:active,
#cgpt-chat a:focus {
  all: unset !important;
  box-sizing: border-box !important;
  font-family: var(--cgpt-font) !important;
  color: #91c2ff !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* ================================================================
   FAB — Bouton flottant professionnel (style carte agent)
================================================================ */
.cgpt-fab {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  color: #1a2340 !important;
  border: 0 !important;
  border-radius: 60px !important;
  padding: 8px 16px 8px 8px !important;
  font-family: var(--cgpt-font) !important;
  box-shadow: 0 4px 6px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.13) !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  z-index: 999999 !important;
  text-decoration: none !important;
  min-width: 0 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
.cgpt-fab:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 10px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.18) !important;
  background: #fff !important;
  color: #1a2340 !important;
}

/* Côté gauche : avatar + point vert */
.cgpt-fab-left {
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* Avatar arrondi dans le FAB */
.cgpt-fab-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
}

/* Icône chat si pas d'avatar */
.cgpt-fab-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#4f8eff,#2563eb) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.cgpt-fab-icon-wrap svg { display: block !important; }

/* Point de statut vert (en bas à droite de l'avatar) */
.cgpt-fab-online-dot {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: var(--cgpt-green) !important;
  border: 2px solid #fff !important;
  display: block !important;
  animation: cgpt-pulse 2.2s infinite !important;
}
@keyframes cgpt-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(46,207,142,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(46,207,142,0); }
}

/* Côté droit : textes */
.cgpt-fab-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.cgpt-fab-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a2340 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.cgpt-fab-sub {
  font-size: 11px !important;
  color: #6b7fa8 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

/* ================================================================
   FENÊTRE DE CHAT
================================================================ */
#cgpt-chat {
  position: fixed !important;
  right: 20px !important;
  bottom: 86px !important;
  width: min(375px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 110px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--cgpt-panel) !important;
  color: var(--cgpt-ink) !important;
  border: 1px solid var(--cgpt-stroke) !important;
  border-radius: 20px !important;
  box-shadow: var(--cgpt-shadow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
  z-index: 999998 !important;
  transform-origin: bottom right !important;
  transition: opacity .22s ease, transform .22s ease !important;
  margin: 0 !important; padding: 0 !important;
}
#cgpt-chat.hidden  { opacity: 0 !important; pointer-events: none !important; transform: scale(.94) translateY(8px) !important; }
#cgpt-chat.visible { opacity: 1 !important; transform: scale(1) translateY(0) !important; }

/* En-tête */
.cgpt-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px !important;
  border-bottom: 1px solid var(--cgpt-stroke) !important;
  background: linear-gradient(160deg,rgba(79,142,255,.18) 0%,rgba(14,20,36,0) 100%) !important;
  flex-shrink: 0 !important;
}
.cgpt-head-left { display: flex !important; gap: 10px !important; align-items: center !important; }

.cgpt-avatar {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: #1b2540 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important;
  overflow: hidden !important;
  flex: 0 0 38px !important;
  border: 2px solid rgba(255,255,255,.12) !important;
}
.cgpt-avatar-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 50% !important; display: block !important;
}
.cgpt-botname {
  font-weight: 700 !important; font-size: 14px !important;
  color: var(--cgpt-ink) !important; line-height: 1.2 !important;
}
.cgpt-status {
  color: var(--cgpt-muted) !important; font-size: 11px !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
  margin-top: 2px !important;
}
.cgpt-dot {
  width: 7px !important; height: 7px !important;
  background: var(--cgpt-green) !important;
  border-radius: 50% !important;
  display: inline-block !important; flex: 0 0 7px !important;
  animation: cgpt-pulse 2.2s infinite !important;
}

.cgpt-close {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--cgpt-stroke) !important;
  color: var(--cgpt-muted) !important;
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  font-size: 18px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; transition: background .15s, color .15s !important;
}
.cgpt-close:hover { background: rgba(255,255,255,.1) !important; color: var(--cgpt-ink) !important; }

/* Messages */
.cgpt-messages {
  padding: 14px !important;
  overflow-y: auto !important;
  display: flex !important; flex-direction: column !important;
  gap: 8px !important; scroll-behavior: smooth !important; flex: 1 !important; margin: 0 !important;
}
.cgpt-row         { display: flex !important; margin: 0 !important; }
.cgpt-row.user    { justify-content: flex-end !important; }
.cgpt-row.bot     { justify-content: flex-start !important; }

.cgpt-bubble {
  max-width: 84% !important;
  padding: 10px 13px !important;
  border-radius: 16px !important;
  line-height: 1.5 !important;
  border: 1px solid var(--cgpt-stroke) !important;
  animation: cgpt-pop .15s ease !important;
  font-size: 14px !important;
  color: var(--cgpt-ink) !important;
  word-break: break-word !important;
}
@keyframes cgpt-pop {
  from { transform: scale(.96); opacity:.6; }
  to   { transform: scale(1);   opacity:1;  }
}
.cgpt-bubble.user {
  background: linear-gradient(135deg,rgba(79,142,255,.28),rgba(79,142,255,.16)) !important;
  border-color: rgba(79,142,255,.25) !important;
  border-bottom-right-radius: 4px !important;
}
.cgpt-bubble.bot {
  background: rgba(255,255,255,.055) !important;
  border-bottom-left-radius: 4px !important;
}

/* Typing */
.cgpt-typing { padding: 4px 14px !important; flex-shrink: 0 !important; }
.cgpt-typing .cgpt-bubble {
  width: 56px !important; text-align: center !important;
  letter-spacing: 3px !important; font-size: 16px !important;
}

/* Formulaire */
.cgpt-form {
  display: flex !important; gap: 8px !important; padding: 10px 12px !important;
  border-top: 1px solid var(--cgpt-stroke) !important;
  background: rgba(0,0,0,.2) !important;
  flex-shrink: 0 !important; margin: 0 !important;
}
#cgpt-input {
  flex: 1 !important;
  background: rgba(255,255,255,.065) !important;
  color: var(--cgpt-ink) !important;
  border: 1px solid var(--cgpt-stroke) !important;
  border-radius: 12px !important;
  padding: 10px 13px !important;
  font-size: 14px !important; font-family: var(--cgpt-font) !important;
  outline: none !important; min-height: 40px !important;
  transition: border-color .15s !important;
  -webkit-appearance: none !important; appearance: none !important;
  box-shadow: none !important;
}
#cgpt-input:focus {
  border-color: rgba(79,142,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(79,142,255,.14) !important;
}
#cgpt-input::placeholder { color: var(--cgpt-muted) !important; opacity: 1 !important; }
#cgpt-input:-webkit-autofill,
#cgpt-input:-webkit-autofill:hover,
#cgpt-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cgpt-ink) !important;
  box-shadow: 0 0 0 1000px rgba(14,20,36,.96) inset !important;
  border: 1px solid var(--cgpt-stroke) !important;
  transition: background-color 99999s !important;
}
.cgpt-send {
  background: var(--cgpt-accent) !important;
  color: #fff !important; border: 0 !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-weight: 700 !important; font-size: 14px !important;
  font-family: var(--cgpt-font) !important;
  white-space: nowrap !important;
  transition: filter .15s !important; flex-shrink: 0 !important;
}
.cgpt-send:hover { filter: brightness(1.1) !important; }

/* ================================================================
   MOBILE
================================================================ */
@media (max-width: 440px) {
  #cgpt-chat {
    right: 0 !important; left: 0 !important;
    bottom: 0 !important; width: 100% !important;
    max-height: 88vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .cgpt-fab { right: 12px !important; bottom: 12px !important; }
  .cgpt-fab-sub { display: none !important; }
}