/* FAB */
.chat-fab{position:fixed; bottom:18px; right:18px; z-index:9999; background:var(--bms-accent); color:#fff; border:none; border-radius:999px; width:54px; height:54px; box-shadow:var(--shadow); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s ease;}
#chatFab.hidden{ display:none; }
.chat-fab:active{transform:translateY(1px)}
/* Window */
.chat-container{position:fixed; bottom:86px; right:18px; z-index:10000; width:360px; max-width:calc(100vw - 24px); height:560px; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; display:none; transform: translateY(12px) scale(.98); opacity:0; transition: transform .28s ease, opacity .28s ease;}
.chat-container.active{ display:block; transform: translateY(0) scale(1); opacity:1; }
.chat-shell{ height:100%; display:flex; flex-direction:column; }
.chat-header{background:var(--bms-accent); color:#2b2100; padding:10px 12px; display:flex; align-items:center; justify-content:space-between}
.hdr-left{display:flex; align-items:center; gap:8px}
.hdr-left img{height:24px}
.chat-title{font-size:14px; font-weight:800}
.chat-subtitle{font-size:11px; opacity:.9}
.chat-header-actions{display:flex; gap:6px}
.icon-btn{background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.08); color:#2b2100; border-radius:8px; padding:6px; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center}
.chat-log{ flex:1; min-height:0; overflow-y:auto; padding:12px; background:#fff }
.msg{display:flex; margin:6px 0; gap:6px;}
.msg:first-child{margin-top:0}
.msg:last-child{margin-bottom:0}
/* Accueil compact */
.msg.welcome{ margin:4px 0; }
.chat-log .msg.welcome + .msg.welcome{ margin-top:6px; }
.msg-bot .bubble{background:#fff; color:#222; border:1px solid var(--border)}
.msg-me{justify-content:flex-end}
.msg-me .bubble{background:var(--bms-accent); color:#fff; border:none}
.bubble{max-width:78%; padding:10px 12px; border-radius:12px; font-size:13px; line-height:1.45; white-space:pre-wrap; box-shadow:0 2px 6px rgba(0,0,0,.04)}
.meta{font-size:10px; color:#6b6b6b; margin-left:6px}
/* Chips suggestions non encapsulées */
.msg .chips{margin:2px 0 0 0}
/* Input */
.chat-input{ border-top:1px solid var(--border); padding:10px; background:#fff9e6; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.chat-text{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; font-size:13px; background:#fff; resize:none; overflow-y:hidden; line-height:1.35; margin:0; }
.chat-send{width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--bms-accent); color:#fff; border:none; border-radius:50%; box-shadow:var(--shadow); cursor:pointer}
.chat-send:hover{opacity:.95}
.typing .dot{ display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#bbb; opacity:.6; animation: blink 1.2s infinite;}
.typing .dot:nth-child(2){ animation-delay:.2s }
.typing .dot:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,80%,100%{opacity:.2} 40%{opacity:1} }
@media (max-height:650px){ .chat-container{ height:calc(100vh - 110px); } }
/* ===== SUGGESTIONS SPÉCIALES EN BAS ===== */

/* Séparateur visuel (saut de ligne entre les groupes) */
.chips-separator {
  display: block;
  width: 100%;
  height: 10px;
}

/* Si tu utilises un conteneur séparé pour ces 2 boutons */
.chips.chips--special {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;           /* forcer une seule ligne */
  width: 100%;
  margin-top: 6px;
}

/* Empêcher la casse de texte dans tous les chips */
.chips .chip { white-space: nowrap; }

/* ---- Styles des 2 boutons ---- */

/* Ouvrir un ticket = VERT */
.chip-open {
  background: #e7f8ee;
  color: #0b6b2e;
  border: 1px solid #6cc38a;
  font-weight: 700;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;

  /* IMPORTANT : largeur stable dans un parent flex (au lieu de display:block) */
  flex: 0 0 160px;             /* ~ largeur fixe */
  max-width: 180px;
}

/* Annuler = ROUGE */
.chip-cancel {
  background: #ffeaea;
  color: #a00;
  border: 1px solid #e0b0b0;
  font-weight: 700;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;

  flex: 0 0 160px;
  max-width: 180px;
}

/* Hover */
.chip-open:hover,
.chip-cancel:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,.1);
}

/* Optionnel : si l’écran est très étroit, on autorise le wrap proprement */
@media (max-width: 380px){
  .chips.chips--special { flex-wrap: wrap; }
  .chip-open, .chip-cancel { flex: 1 1 140px; }
}

#chatBox {
  z-index: 5000; /* inférieur au modal */
}

.chat-link {
    color: var(--bms-primary, #1f5b7a);
    text-decoration: underline;
    font-weight: 600;
}

    .chat-link:hover {
        color: #d6a000;
    }