/* Bulle de chat du site (en bas à droite) */
.chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: var(--pink); color: #000; border: 0; border-radius: 999px; padding: 12px 18px; font: 700 15px var(--font-b); cursor: pointer; box-shadow: 0 10px 30px -10px var(--pink), 0 4px 14px rgba(0, 0, 0, .5); }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab[hidden], .chat-panel[hidden], .chat-dot[hidden], .chat-x2[hidden], .chat-e[hidden] { display: none; }
.chat-dot { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b30; border: 2px solid var(--bg, #0b0b10); }

.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: 360px; max-width: calc(100vw - 24px); height: 480px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
.chat-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.chat-x { background: none; border: 0; color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.chat-m { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-b { max-width: 82%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; font-size: 14px; }
.chat-b.admin { align-self: flex-start; background: #23232d; color: var(--text); }
.chat-b.me { align-self: flex-end; background: var(--pink); color: #000; }
.chat-f { border-top: 1px solid var(--line); padding: 10px; display: grid; gap: 8px; }
.chat-x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chat-f input, .chat-f textarea { background: #101016; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 9px 11px; font: 14px var(--font-b); min-width: 0; }
.chat-f input:focus, .chat-f textarea:focus { outline: 2px solid var(--pink); border-color: transparent; }
.chat-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-row textarea { flex: 1; resize: none; max-height: 110px; }
.chat-s { background: var(--pink); color: #000; border: 0; border-radius: 10px; padding: 10px 16px; font: 700 14px var(--font-b); cursor: pointer; }
.chat-s:disabled { opacity: .5; cursor: default; }
.chat-e { margin: 0; color: #ff8a8a; font-size: 13px; }

@media (max-width: 600px) {
  .chat-fab { right: 14px; bottom: 14px; padding: 12px 16px; }
  .chat-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: min(520px, calc(100vh - 16px)); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab:hover { transform: none; } }