/* ============================================================
   Green Musicians — Assistant IA (widget)
   CHARTE OFFICIELLE GM (CHARTE-GM-FINALE #00FFB5, 21/08/2026)
   - Vert GM  #00FFB5  : CTA, accents, tags, fonds, badges
   - Violet GM #350665 : headers, fonds sombres, textes sur fond clair
   - Texte vert lisible sur fond clair : #00CC8E
   - CTA : border-radius 25px, ombre rgba(0,255,181,.3), hover #00e6a3
   - Typo : DM Sans / Poppins / Helvetica
   Règle absolue : JAMAIS de noir sur violet (texte blanc sur violet).
   ============================================================ */
#gm-assistant-root { font-family: 'DM Sans', Poppins, Helvetica, Arial, sans-serif; }

/* ---- Bulle flottante (état fermé) : CTA charte ---- */
#gm-a-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  background: #00FFB5; color: #000; border: none; border-radius: 25px;
  padding: 13px 22px; font-size: .92rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,255,181,.3);
  display: flex; align-items: center; gap: 8px;
  transition: background .15s ease, transform .15s ease;
  font-family: inherit;
}
#gm-a-btn:hover { background: #00e6a3; transform: translateY(-2px); }

/* ---- Panneau ---- */
#gm-a-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 10000;
  width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 40px);
  background: #fff; border-radius: 16px; box-shadow: 0 8px 32px rgba(53,6,101,.22);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid #eee;
}
#gm-a-panel.gm-a-open { display: flex; }

/* ---- En-tête : VIOLET GM (header charte) ---- */
#gm-a-head {
  background: #350665; color: #fff; padding: 13px 14px;
  display: flex; align-items: center; gap: 10px;
}
#gm-a-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #00FFB5; color: #000; /* texte NOIR sur vert = charte */
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex-shrink: 0;
}
#gm-a-head .gm-a-t { flex: 1; }
#gm-a-title { font-weight: 700; font-size: .93rem; color: #fff; }
#gm-a-status { font-size: .72rem; opacity: .9; color: #fff; }
/* Badge IA : tag charte = fond vert, texte noir */
#gm-a-badge {
  background: #00FFB5; color: #000; border-radius: 25px; padding: 3px 11px;
  font-size: .64rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
}
#gm-a-close { background: none; border: none; color: #fff; font-size: 1.15rem; cursor: pointer; opacity: .85; padding: 2px 6px; }

/* ---- Messages ---- */
#gm-a-msgs { flex: 1; overflow-y: auto; padding: 13px 13px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.gm-a-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: .85rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
/* Bulle IA : fond VERT GM, texte NOIR (charte) */
.gm-a-msg.gm-a-ia { background: #00FFB5; color: #000; border-top-left-radius: 4px; align-self: flex-start; }
/* Bulle client : fond VIOLET GM, texte BLANC (jamais noir sur violet) */
.gm-a-msg.gm-a-user { background: #350665; color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.gm-a-msg.gm-a-typing { color: #999; font-style: italic; }
/* Note discrète (source / divulgation) : beige charte */
.gm-a-msg.gm-a-note { align-self: flex-start; background: #f5f0eb; color: #555; font-size: .72rem; }
/* Suggestions : pilules contour vert foncé lisible, texte violet */
.gm-a-sugg {
  align-self: flex-start; background: #fff; border: 1.5px solid #00CC8E; color: #350665;
  border-radius: 25px; padding: 7px 13px; font-size: .8rem; cursor: pointer;
}
.gm-a-sugg:hover { background: #eafff7; border-color: #00FFB5; }

/* ---- Saisie ---- */
#gm-a-input-bar { border-top: 1px solid #eee; padding: 9px 11px; display: flex; gap: 8px; background: #fff; }
#gm-a-input {
  flex: 1; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 25px;
  font-size: .87rem; font-family: inherit; outline: none;
}
#gm-a-input:focus { border-color: #00CC8E; }
#gm-a-send {
  background: #00FFB5; color: #000; border: none; border-radius: 25px;
  padding: 0 18px; font-weight: 800; cursor: pointer; font-size: .95rem;
  box-shadow: 0 4px 15px rgba(0,255,181,.3);
}
#gm-a-send:hover { background: #00e6a3; }

/* ---- Pied : divulgation IA + bouton humain ---- */
#gm-a-foot {
  background: #f5f0eb; padding: 7px 11px; font-size: .68rem; color: #555;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
}
#gm-a-foot .gm-a-ia-note { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
#gm-a-dot { width: 9px; height: 9px; border-radius: 50%; background: #350665; flex-shrink: 0; }
/* Bouton humain : secondaire = outline violet */
#gm-a-human {
  background: #fff; border: 1.5px solid #350665; color: #350665; border-radius: 25px;
  padding: 5px 12px; font-size: .72rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
#gm-a-human:hover { background: #350665; color: #fff; }

@media (max-width: 480px) {
  #gm-a-btn { right: 14px; bottom: 14px; }
  #gm-a-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: 72vh; }
}