/* Chat événement 2026 — clair, réactif et confortable sur mobile. */
#modal-chat{
  z-index:9860!important;
  padding:.75rem!important;
  background:rgba(31,38,57,.48)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
#modal-chat .chat-modal{
  display:flex!important;
  flex-direction:column;
  width:min(100%,620px)!important;
  height:min(88dvh,790px);
  max-height:min(88dvh,790px)!important;
  padding:0!important;
  overflow:hidden!important;
  contain:none!important;
  border:1px solid #dce2ea!important;
  border-radius:26px!important;
  background:#f4f7fb!important;
  color:#202338!important;
  box-shadow:0 28px 85px rgba(24,31,50,.28)!important;
  animation:none!important;
  transform:none!important;
  -webkit-backface-visibility:visible!important;
  backface-visibility:visible!important;
}
#modal-chat .chat-header{
  position:relative;
  z-index:4;
  flex:0 0 auto;
  gap:.75rem;
  padding:1rem 1.05rem .9rem;
  border-bottom:1px solid #e2e7ed;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(31,41,70,.045);
}
.chat-heading{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.chat-presence{
  display:inline-flex;
  align-items:center;
  gap:.34rem;
  margin-bottom:.28rem;
  color:#167653;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.chat-presence i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22a96f;
  box-shadow:0 0 0 4px rgba(34,169,111,.12);
}
.chat-presence[data-state="connecting"]{color:#8b6500}
.chat-presence[data-state="connecting"] i{background:#e5a817;box-shadow:0 0 0 4px rgba(229,168,23,.13)}
.chat-presence[data-state="warning"]{color:#a33c4e}
.chat-presence[data-state="warning"] i{background:#d8495f;box-shadow:0 0 0 4px rgba(216,73,95,.12)}
#modal-chat #chat-title{
  width:100%;
  color:#202338!important;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.03rem;
  font-weight:950;
  line-height:1.28;
}
#modal-chat #chat-sub{
  margin:.2rem 0 0;
  color:#687083!important;
  font-size:.7rem;
  font-weight:650;
  line-height:1.4;
}
#modal-chat #chat-cl{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid #dce2ea!important;
  border-radius:13px!important;
  background:#f5f7fa!important;
  color:#424b5d!important;
  font-size:1.2rem;
}
#modal-chat #chat-cl:hover{border-color:#efb08c!important;background:#fff1e8!important;color:#b94b27!important}
.chat-welcome{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:.58rem;
  flex:0 0 auto;
  margin:.65rem .8rem 0;
  padding:.58rem .68rem;
  border:1px solid #cfe9dd;
  border-radius:14px;
  background:#effaf5;
}
.chat-welcome>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#d9f4e7;font-size:.9rem}
.chat-welcome p{margin:0;color:#527064!important;font-size:.67rem;line-height:1.45}
.chat-welcome strong{display:block;color:#216047;font-size:.7rem}
.chat-thread-shell{
  position:relative;
  display:flex;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
#modal-chat .chat-messages{
  display:flex;
  min-height:0;
  max-height:none;
  flex:1 1 auto;
  flex-direction:column;
  gap:.72rem;
  padding:.85rem 1rem 1rem;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:radial-gradient(circle at 100% 0,rgba(74,144,226,.055),transparent 17rem),linear-gradient(180deg,#f4f7fb,#f7f9fc)!important;
  scrollbar-color:#c8d0dc transparent;
  scroll-behavior:smooth;
}
#modal-chat .chat-messages::-webkit-scrollbar{width:6px}
#modal-chat .chat-messages::-webkit-scrollbar-thumb{border-radius:999px;background:#c8d0dc}
.chat-day-separator{
  display:flex;
  align-items:center;
  gap:.55rem;
  width:100%;
  color:#7c8494;
  font-size:.61rem;
  font-weight:850;
  text-align:center;
}
.chat-day-separator::before,.chat-day-separator::after{content:'';height:1px;flex:1;background:#dde3eb}
.chat-day-separator span{flex:0 0 auto;padding:.22rem .48rem;border:1px solid #e0e5ec;border-radius:999px;background:#fff}
#modal-chat .chat-message{
  position:relative;
  max-width:min(82%,430px);
  transition:background .18s ease,box-shadow .18s ease;
}
#modal-chat .chat-message.is-highlighted{border-radius:18px;background:#fff0e6;box-shadow:0 0 0 7px #fff0e6}
#modal-chat .chat-author{
  margin:0 0 .24rem .35rem;
  color:#a84927!important;
  font-size:.68rem;
  font-weight:900;
}
#modal-chat .chat-bubble{
  max-width:100%;
  padding:.66rem .82rem;
  border:1px solid #dfe5ed!important;
  border-radius:17px;
  background:#fff!important;
  color:#293042!important;
  box-shadow:0 5px 16px rgba(31,41,70,.065)!important;
  font-size:.8rem;
  line-height:1.52;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
#modal-chat .chat-message.is-other .chat-bubble{border-bottom-left-radius:5px}
#modal-chat .chat-message.is-me .chat-bubble{
  border-color:transparent!important;
  border-bottom-right-radius:5px;
  background:linear-gradient(135deg,#ff7a35,#ee4960)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(238,73,96,.17)!important;
}
#modal-chat .chat-time{margin-top:.22rem;padding:0 .3rem;color:#778092!important;font-size:.61rem;font-weight:700}
#modal-chat .chat-message.is-me .chat-time{color:#7b7180!important}
.chat-reply-ref{
  display:block;
  width:100%;
  margin:0 0 .42rem;
  padding:.4rem .48rem;
  overflow:hidden;
  border:0;
  border-left:3px solid #ee7846;
  border-radius:7px;
  background:#f4f6fa;
  color:#596274;
  font-family:inherit;
  font-size:.65rem;
  font-weight:750;
  line-height:1.35;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
.chat-message.is-me .chat-reply-ref{border-left-color:#fff;background:rgba(255,255,255,.17);color:#fff}
.chat-message-flag{
  display:inline-flex;
  margin-bottom:.42rem;
  padding:.22rem .42rem;
  border-radius:999px;
  background:#fff4cf;
  color:#775900!important;
  font-size:.62rem;
  font-weight:900;
}
.chat-message.is-me .chat-message-flag{background:rgba(255,255,255,.2);color:#fff!important}
#modal-chat .chat-message.is-pinned .chat-bubble{border-color:#e8c965!important;box-shadow:0 0 0 2px rgba(232,201,101,.18),0 6px 18px rgba(31,41,70,.07)!important}
.chat-ux-actions,.chat-moderation-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.25rem;
  margin-top:.3rem;
  opacity:0;
  transition:opacity .15s ease;
}
.chat-message:hover .chat-ux-actions,.chat-message:focus-within .chat-ux-actions,
.chat-message:hover .chat-moderation-actions,.chat-message:focus-within .chat-moderation-actions{opacity:1}
.chat-message.is-me .chat-ux-actions,.chat-message.is-me .chat-moderation-actions{justify-content:flex-end}
.chat-ux-actions button,.chat-moderation-actions button{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  justify-content:center;
  padding:.28rem .45rem;
  border:1px solid #dfe4eb!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#596274!important;
  font-family:inherit!important;
  font-size:.63rem!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:0 3px 9px rgba(31,41,70,.045);
  cursor:pointer;
}
.chat-ux-actions button:hover{border-color:#efaf89!important;background:#fff4ed!important;color:#a94725!important}
.chat-moderation-actions button:hover{border-color:#efc0c6!important;background:#fff0f2!important;color:#ad3447!important}
.chat-reactions{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.3rem}
.chat-reactions span{padding:.18rem .45rem;border:1px solid #dfe4eb;border-radius:999px;background:#fff;color:#3f4759;font-size:.67rem;font-weight:800;box-shadow:0 2px 7px rgba(31,41,70,.04)}
.chat-jump-new{
  position:absolute;
  z-index:5;
  right:50%;
  bottom:.7rem;
  display:inline-flex;
  min-height:39px;
  align-items:center;
  gap:.4rem;
  padding:.46rem .72rem;
  border:1px solid #d5dce6;
  border-radius:999px;
  background:#fff;
  color:#344054;
  box-shadow:0 8px 24px rgba(31,41,70,.16);
  font-family:inherit;
  font-size:.67rem;
  font-weight:850;
  line-height:1;
  transform:translateX(50%);
  cursor:pointer;
}
.chat-jump-new[hidden]{display:none!important}
.chat-jump-new span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff0e8;color:#c8512b}
#modal-chat .chat-reply-bar{
  flex:0 0 auto;
  gap:.65rem;
  padding:.62rem .85rem;
  border-top:1px solid #f2d4c1;
  background:#fff4ec!important;
  color:#74422e!important;
  font-size:.68rem;
  font-weight:800;
}
#modal-chat .chat-reply-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#modal-chat .chat-reply-bar button{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #edc5ad;border-radius:10px;background:#fff;color:#a94725;font-size:1rem}
#modal-chat .chat-input-zone{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:.38rem;
  padding:.7rem .78rem calc(.65rem + env(safe-area-inset-bottom));
  border-top:1px solid #dfe5ed;
  background:#fff!important;
}
.chat-composer-main{display:flex;align-items:flex-end;gap:.52rem;width:100%}
#modal-chat .chat-input{
  width:100%;
  min-width:0!important;
  min-height:48px!important;
  max-height:112px;
  margin:0!important;
  padding:.75rem .82rem!important;
  resize:none;
  overflow-y:auto;
  border:1px solid #d7dee8!important;
  border-radius:15px!important;
  background:#f7f9fc!important;
  color:#202338!important;
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:650!important;
  line-height:1.42!important;
}
#modal-chat .chat-input::placeholder{color:#8d95a4!important}
#modal-chat .chat-input:focus{border-color:#ef8959!important;background:#fff!important;box-shadow:0 0 0 4px rgba(244,128,58,.11)!important}
#modal-chat .chat-send{
  display:inline-flex!important;
  min-width:106px;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  padding:.68rem .82rem!important;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#ff7a35,#ee4960)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(238,73,96,.18)!important;
  font-size:.73rem!important;
}
#modal-chat .chat-send span{font-size:.76rem;transform:rotate(-7deg)}
#modal-chat .chat-send b{font:inherit}
#modal-chat .chat-send:disabled{opacity:.62;box-shadow:none!important;cursor:wait}
.chat-composer-meta{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:0 .15rem;color:#858d9c;font-size:.59rem;font-weight:650}
.chat-counter{flex:0 0 auto;min-width:42px;color:#687083!important;font-size:.62rem!important;font-weight:850;text-align:right}
.chat-counter.near-limit{color:#bd394d!important}
#modal-chat .chat-status{
  padding:.8rem 1rem;
  border-top:1px solid #e2e6ed!important;
  background:#fff!important;
  color:#596274!important;
  font-size:.7rem;
}
#modal-chat .chat-status-closed{background:#fff3f4!important;color:#9f3042!important}
#modal-chat .chat-status-locked{background:#fff7ef!important;color:#95451f!important}
#modal-chat .chat-state{
  width:min(100%,380px);
  margin:auto;
  padding:1.15rem;
  border:1px solid #dfe5ed;
  border-radius:18px;
  background:#fff!important;
  color:#687083!important;
  box-shadow:0 6px 18px rgba(31,41,70,.045);
  font-size:.72rem;
}
#modal-chat .chat-state strong{color:#293042!important;font-size:.8rem}
#modal-chat .chat-state-error{border-color:#efc3c8!important;background:#fff2f3!important;color:#9f3042!important}
#modal-chat .chat-spam-warn{border-top:1px solid #efc3c8!important;background:#fff2f3!important;color:#9f3042!important}

@media(max-width:620px){
  #modal-chat{align-items:flex-end!important;padding:0!important;background:rgba(31,38,57,.4)!important}
  #modal-chat .chat-modal{
    width:100%!important;
    height:min(94dvh,850px)!important;
    max-height:94dvh!important;
    border-right:0!important;
    border-bottom:0!important;
    border-left:0!important;
    border-radius:24px 24px 0 0!important;
  }
  #modal-chat .chat-header{padding:.78rem .75rem .68rem}
  .chat-presence{font-size:.58rem}
  #modal-chat #chat-title{font-size:.9rem}
  #modal-chat #chat-sub{max-width:260px;font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #modal-chat #chat-cl{flex-basis:40px;width:40px;height:40px}
  .chat-welcome{grid-template-columns:32px minmax(0,1fr);margin:.5rem .58rem 0;padding:.48rem .55rem}
  .chat-welcome>span{width:32px;height:32px}.chat-welcome p{font-size:.62rem}.chat-welcome strong{font-size:.65rem}
  #modal-chat .chat-messages{padding:.72rem .65rem .9rem}
  #modal-chat .chat-message{max-width:88%}
  #modal-chat .chat-bubble{padding:.62rem .74rem;font-size:.78rem}
  .chat-ux-actions,.chat-moderation-actions{opacity:1}
  .chat-ux-actions button,.chat-moderation-actions button{min-height:32px;padding:.3rem .48rem}
  #modal-chat .chat-input-zone{padding:.58rem .62rem calc(.55rem + env(safe-area-inset-bottom))}
  .chat-composer-meta>span:first-child{display:none}
  .chat-counter{margin-left:auto}
  #modal-chat .chat-send{min-width:50px;width:50px;padding:.6rem!important}
  #modal-chat .chat-send b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #modal-chat .chat-send span{font-size:.9rem}
}
@media(max-width:370px){
  .chat-welcome{display:none}
  #modal-chat .chat-message{max-width:92%}
  .chat-reply-action{min-width:100%}
}
@media(prefers-reduced-motion:reduce){
  #modal-chat .chat-messages{scroll-behavior:auto}
  #modal-chat .chat-message,.chat-ux-actions,.chat-moderation-actions{transition:none!important}
}