/* Chat général */
.chat-main {
  max-width: 760px; margin: 0 auto; width: 100%;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  height: calc(100dvh - var(--topbar-h, 56px));
  display: flex; flex-direction: column; gap: 10px;
}
.chat-title { font-size: 1.2rem; font-weight: 800; margin: 4px 0; }
.chat-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 6px 4px; -webkit-overflow-scrolling: touch;
}
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg__av {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--cherry-700); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; overflow: hidden;
}
.chat-msg__av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.chat-msg__body { flex: 1; min-width: 0; }
.chat-msg__head { display: flex; align-items: baseline; gap: 6px; }
.chat-msg__name { font-weight: 700; font-size: 0.84rem; }
.chat-msg__name.is-admin { color: var(--gold); }
.chat-msg__time { color: var(--text-muted); font-size: 0.68rem; }
.chat-msg__del { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; opacity: 0; }
.chat-msg:hover .chat-msg__del { opacity: 1; }
.chat-msg__text { font-size: 0.92rem; word-wrap: break-word; overflow-wrap: anywhere; }
.chat-msg__text.is-deleted { color: var(--text-muted); font-style: italic; }
.chat-msg.is-mine .chat-msg__name { color: var(--cherry-400, #ff8a96); }
.chat-mention { color: var(--gold); font-weight: 700; }
.chat-mention.is-me { background: rgba(245, 215, 110, 0.18); border-radius: 4px; padding: 0 3px; }
.chat-link { color: var(--cherry-400, #ff8a96); text-decoration: underline; word-break: break-all; }
.chat-gif { display: block; max-width: min(260px, 70%); max-height: 240px; border-radius: var(--radius-md); margin-top: 4px; }

/* Sélecteur de GIF */
.chat-gif-btn { padding: 0 12px; font-weight: 800; font-size: 0.8rem; color: var(--gold); background: var(--bg-elev); border: 1px solid var(--gold-dark); border-radius: var(--radius-md); cursor: pointer; }
.chat-gif-panel { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-gif-panel[hidden] { display: none; }
.chat-gif-search { padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.chat-gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; }
.chat-gif-thumb { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; }
.chat-gif-thumb:hover { outline: 2px solid var(--gold); }
.chat-gif-note { font-size: 0.76rem; color: var(--text-muted); min-height: 1em; }

.chat-form { display: flex; gap: 8px; position: relative; }

/* Prévisualisation des mentions @pseudo */
.chat-mention-box {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  max-height: 232px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45); z-index: 30;
}
.chat-mention-box[hidden] { display: none; }
.chat-mention-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; cursor: pointer; }
.chat-mention-item.is-sel, .chat-mention-item:hover { background: rgba(245, 215, 110, 0.14); }
.chat-mention-item__av {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--cherry-700); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 800;
}
.chat-mention-item__av img { width: 100%; height: 100%; object-fit: cover; }
.chat-mention-item__name { font-weight: 700; font-size: 0.9rem; }
.chat-input { flex: 1; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); }
.chat-send { padding: 12px 18px; font-weight: 800; color: #fff; background: var(--cherry-600); border: none; border-radius: var(--radius-md); cursor: pointer; }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-note { min-height: 1em; font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.chat-note.err { color: var(--cherry-500); }