/* =========================================================
   CHAT.CSS — Alertemps Live Chat (Premium / stable / scoped)
   - Ne casse pas le reste du site : tout est scope sur #chatWidget
   - Nettoyage des doublons + UI plus premium
   ========================================================= */

/* ---------------------------
   Chat page (la page /chat)
--------------------------- */
.chat-page{
  display:flex !important;
  flex-direction:column !important;
  gap: 14px !important;
  padding: 12px 0 32px !important;
}
.chat-page h1{
  margin: 0 !important;
}
.chat-page p{
  margin: 0 !important;
}

/* ---------------------------
   Widget scope + tokens
--------------------------- */
#chatWidget{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 9999 !important;
  font-family: inherit !important;

  /* tokens */
  --chat-panel: rgba(12, 22, 42, .92);
  --chat-panel-2: rgba(10, 18, 36, .88);
  --chat-border: rgba(255,255,255,.10);
  --chat-border-2: rgba(255,255,255,.16);
  --chat-soft: rgba(255,255,255,.06);

  --chat-text: rgba(255,255,255,.92);
  --chat-muted: rgba(255,255,255,.62);

  --chat-accent: #3aa6ff;
  --chat-accent2:#6a5cff;
  --chat-danger:#ff4d6d;
  --chat-success:#28d17c;

  --chat-shadow: 0 22px 70px rgba(0,0,0,.60);
  --chat-radius: 20px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* reset interne */
#chatWidget *{ box-sizing: border-box !important; }
#chatWidget p,
#chatWidget h1,#chatWidget h2,#chatWidget h3,
#chatWidget button{ margin: 0 !important; }
#chatWidget button{ font: inherit !important; }
#chatWidget svg{ display:block !important; }

/* focus premium */
#chatWidget :is(button, textarea):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(58,166,255,.18) !important;
  border-color: rgba(58,166,255,.35) !important;
}

/* =========================================================
   FAB (bouton flottant)
   ========================================================= */
#chatWidget .chat-fab{
  width: 58px !important;
  height: 58px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  background:
    radial-gradient(120% 120% at 20% 10%, rgba(125,205,255,.75), transparent 55%),
    radial-gradient(120% 120% at 90% 20%, rgba(90,180,255,.65), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)),
    rgba(54, 150, 235, .95) !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.48),
    0 0 0 4px rgba(58,166,255,.08) !important;

  display: grid !important;
  place-items: center !important;

  cursor: pointer !important;
  padding: 0 !important;
  line-height: 0 !important;
  position: relative !important;

  transition: transform .16s var(--ease),
              filter .16s var(--ease),
              box-shadow .16s var(--ease),
              border-color .16s var(--ease) !important;
}

#chatWidget.is-alert .chat-fab{
  border-color: rgba(255,77,109,.45) !important;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,170,170,.85), transparent 55%),
    radial-gradient(120% 120% at 90% 20%, rgba(255,110,140,.75), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.08)),
    rgba(230, 60, 90, .95) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.48),
    0 0 0 4px rgba(255,77,109,.12) !important;
}

#chatWidget .chat-fab-icon{
  animation: chatFabFloat 6s var(--ease) infinite;
}

#chatWidget .chat-fab:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  border-color: rgba(58,166,255,.30) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 6px rgba(58,166,255,.10) !important;
}

#chatWidget.is-alert .chat-fab:hover{
  border-color: rgba(255,77,109,.65) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 6px rgba(255,77,109,.18) !important;
}

#chatWidget .chat-fab:active{
  transform: translateY(0) scale(.98) !important;
}

/* badge (online) */
#chatWidget .chat-fab-badge{
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--chat-danger) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 3px rgba(10,16,30,.92), 0 0 0 7px rgba(255,77,109,.14) !important;
}

/* icon */
#chatWidget .chat-fab-icon{
  display:grid !important;
  place-items:center !important;
  color: rgba(255,255,255,.96) !important;
}
#chatWidget .chat-fab-img{
  width: 24px !important;
  height: 24px !important;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)) !important;
  transform-origin: 50% 55% !important;
  transition: transform .18s var(--ease), filter .18s var(--ease) !important;
}
#chatWidget .chat-fab-img{
  filter: brightness(0) invert(1) drop-shadow(0 10px 14px rgba(0,0,0,.35)) !important;
}
#chatWidget .chat-fab:hover .chat-fab-img{
  transform: translateY(-1px) scale(1.07) !important;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.45)) !important;
}

/* petit anneau “ping” doux */
#chatWidget .chat-fab-ping{
  position:absolute !important;
  inset: -6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(58,166,255,.20) !important;
  box-shadow: 0 0 0 4px rgba(106,92,255,.06) !important;
  opacity: .85 !important;
  pointer-events:none !important;
  animation: chatFabPing 5s ease-in-out infinite;
}
#chatWidget.is-alert .chat-fab-ping{
  border-color: rgba(255,77,109,.35) !important;
  box-shadow: 0 0 0 4px rgba(255,77,109,.12) !important;
}
#chatWidget.open .chat-fab-ping{ opacity: 0 !important; }

/* animation subtle de l'icone */

@keyframes chatFabFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-1.5px); }
  100%{ transform: translateY(0); }
}

@keyframes chatFabPing{
  0%{ transform: scale(1); opacity:.75; }
  50%{ transform: scale(1.08); opacity:.45; }
  100%{ transform: scale(1); opacity:.75; }
}

@keyframes chatBoltFlash{
  0%{ opacity:.9; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.08); }
  100%{ opacity:.9; transform: scale(1); }
}

/* =========================================================
   Panel
   ========================================================= */
#chatWidget .chat-panel{
  width: min(340px, calc(100vw - 32px)) !important;
  height: min(500px, calc(100vh - 120px)) !important;

  border-radius: var(--chat-radius) !important;
  border: 1px solid var(--chat-border) !important;

  background:
    radial-gradient(120% 120% at 0% 0%, rgba(58,166,255,.20), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(106,92,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%),
    var(--chat-panel) !important;

  box-shadow: var(--chat-shadow) !important;
  overflow: hidden !important;

  position: absolute !important;
  right: 0 !important;
  bottom: 74px !important;

  opacity: 0 !important;
  transform: translateY(10px) scale(.98) !important;
  transform-origin: 90% 100% !important;
  pointer-events: none !important;

  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;

  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

#chatWidget.open .chat-panel{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  transition: opacity .16s var(--ease), transform .18s var(--ease) !important;
}

/* =========================================================
   Header
   ========================================================= */
#chatWidget .chat-head{
  padding: 14px 14px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;

  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0)) !important;
}

/* petite ligne shiny en haut (premium) */
#chatWidget .chat-head::before{
  content:"" !important;
  position:absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(58,166,255,.35), rgba(106,92,255,.25), transparent) !important;
  opacity: .9 !important;
}

#chatWidget .chat-head-left{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}
#chatWidget .chat-dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: var(--chat-success) !important;
  box-shadow: 0 0 0 7px rgba(40,209,124,.11) !important;
  flex: 0 0 auto !important;
}
#chatWidget.is-alert .chat-dot{
  background: var(--chat-danger) !important;
  box-shadow: 0 0 0 7px rgba(255,77,109,.12) !important;
}
#chatWidget .chat-head-txt{
  display:flex !important;
  flex-direction:column !important;
  gap: 2px !important;
}
#chatWidget .chat-title{
  color: var(--chat-text) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  font-size: .86rem !important;
  text-transform: uppercase !important;
}
#chatWidget .chat-sub{
  color: var(--chat-muted) !important;
  font-size: .78rem !important;
}

#chatWidget .chat-x{
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.88) !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  padding: 0 !important;
  transition: transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease) !important;
}
#chatWidget .chat-x:hover{
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
#chatWidget .chat-x svg{ width:18px !important; height:18px !important; }

/* =========================================================
   Tabs
   ========================================================= */
#chatWidget .chat-tabs{
  padding: 10px 12px 12px !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#chatWidget .chat-tab{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.86) !important;

  padding: 10px !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  cursor:pointer !important;
  min-height: 50px !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;
  transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease) !important;
}

#chatWidget .chat-tab:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.05) !important;
}

#chatWidget .chat-tab.active{
  background: linear-gradient(135deg, rgba(58,166,255,.24), rgba(106,92,255,.18)) !important;
  border-color: rgba(58,166,255,.35) !important;
}

#chatWidget .tab-ic{
  width: 32px !important;
  height: 32px !important;
  border-radius: 14px !important;
  display:grid !important;
  place-items:center !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  flex: 0 0 auto !important;
}
#chatWidget .tab-ic svg{
  width: 18px !important;
  height: 18px !important;
  color: rgba(255,255,255,.92) !important;
}

#chatWidget .tab-txt{
  display:flex !important;
  flex-direction:column !important;
  gap: 4px !important;
  line-height: 1.05 !important;
}
#chatWidget .tab-name{ font-weight: 950 !important; font-size: .90rem !important; }
#chatWidget .tab-pill{
  width: fit-content !important;
  font-size: .68rem !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* =========================================================
   Messages
   ========================================================= */
#chatWidget .chat-messages{
  padding: 14px 12px 14px 14px !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges !important;

  background:
    radial-gradient(90% 60% at 50% 0%, rgba(58,166,255,.10), transparent 60%),
    radial-gradient(90% 60% at 70% 10%, rgba(106,92,255,.08), transparent 55%),
    transparent !important;
}

#chatWidget .chat-empty{
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

#chatWidget .chat-msg{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 4px 0 !important;
}

#chatWidget .chat-msg-body-wrap{
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#chatWidget .chat-msg-author{
  margin: 0 0 3px 4px !important;
  color: rgba(255,255,255,.72) !important;
  font-weight: 900 !important;
  font-size: .7rem !important;
}

#chatWidget .chat-msg-body{
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 6px !important;

  position: relative !important;
  width: fit-content !important;
  max-width: 70% !important;

  padding: 6px 8px !important;
  border-radius: 12px !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;

  box-shadow: 0 14px 32px rgba(0,0,0,.22) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;

  transition: transform .12s var(--ease), border-color .12s var(--ease) !important;
}
#chatWidget .chat-msg-body:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Self */
#chatWidget .chat-msg.self{ align-items: flex-end !important; }
#chatWidget .chat-msg.self .chat-msg-author{
  text-align: right !important;
  margin: 0 4px 3px 0 !important;
}
#chatWidget .chat-msg.self .chat-msg-body{
  background: linear-gradient(135deg, rgba(58,166,255,.26), rgba(58,166,255,.10)) !important;
  border-color: rgba(58,166,255,.40) !important;
  margin-left: auto !important;
}

/* Admin */
#chatWidget .chat-msg.admin .chat-msg-body{
  background: linear-gradient(135deg, rgba(239,68,68,.30), rgba(239,68,68,.12)) !important;
  border-color: rgba(239,68,68,.45) !important;
}

#chatWidget .chat-msg-time{
  position: static !important;
  margin: 0 !important;
  font-size: .64rem !important;
  color: rgba(255,255,255,.55) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
#chatWidget .chat-msg-text{ display: inline !important; }
#chatWidget .chat-msg-text,
#chatWidget .chat-msg-author{
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
}

/* Light theme: keep messages white */
body[data-theme="clair"] #chatWidget .chat-msg-author{
  color: rgba(255,255,255,.8) !important;
}
body[data-theme="clair"] #chatWidget .chat-msg-text,
body[data-theme="clair"] #chatWidget .chat-msg-time{
  color: #ffffff !important;
}

/* =========================================================
   Composer (zone d'écriture) — plus “premium”, zéro vide
   ========================================================= */
#chatWidget .chat-compose{
  padding: 8px 10px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  background: transparent !important;
  display: grid !important;
  gap: 6px !important;
}

#chatWidget .compose-inner{
  display:flex !important;
  align-items: center !important;
  gap: 8px !important;

  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    rgba(0,0,0,.2) !important;

  padding: 8px 8px 8px 12px !important;
  min-height: 38px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease) !important;
}

#chatWidget .compose-inner:focus-within{
  border-color: rgba(58,166,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(58,166,255,.18), inset 0 0 0 1px rgba(58,166,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(58,166,255,.10), rgba(0,0,0,.2)),
    rgba(0,0,0,.2) !important;
}

#chatWidget #chatInput{
  flex: 1 !important;
  display: block !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;

  color: rgba(255,255,255,.92) !important;
  font-size: .88rem !important;
  line-height: 1.25 !important;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;

  padding: 4px 0 !important;
  margin: 0 !important;

  min-height: 24px !important;
  max-height: 90px !important;

  overflow: hidden !important;
}
#chatWidget #chatInput::placeholder{
  color: rgba(255,255,255,.5) !important;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

#chatWidget .chat-send{
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(58,166,255,.38) !important;

  background: radial-gradient(120% 120% at 0% 0%, rgba(58,166,255,.60), rgba(58,166,255,.18)) !important;
  color: rgba(255,255,255,.95) !important;

  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  padding: 0 !important;

  box-shadow: 0 16px 30px rgba(58,166,255,.16) !important;
  transition: transform .14s var(--ease), filter .14s var(--ease), box-shadow .14s var(--ease) !important;
}
#chatWidget .chat-send:hover{ transform: translateY(-1px) !important; filter: brightness(1.06) !important; }
#chatWidget .chat-send:active{ transform: translateY(0) scale(.98) !important; }
#chatWidget .chat-send svg{ width: 18px !important; height: 18px !important; }

#chatWidget .chat-hint{
  margin: 0 !important;
  padding-left: 2px !important;
  color: rgba(255,255,255,.55) !important;
  font-size: .78rem !important;
}

/* disabled */
#chatWidget :is(#chatInput, .chat-send):disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* avoid double focus outline on textarea */
#chatWidget #chatInput:focus-visible{
  box-shadow: none !important;
  border-color: transparent !important;
}

/* =========================================================
   Scrollbar (chat-messages) — moderne
   ========================================================= */

/* Firefox */
#chatWidget .chat-messages{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,.26) transparent !important;
}

/* Chrome / Edge / Safari */
#chatWidget .chat-messages::-webkit-scrollbar{ width: 10px !important; }
#chatWidget .chat-messages::-webkit-scrollbar-track{ background: transparent !important; }
#chatWidget .chat-messages::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.20) !important;
  border-radius: 999px !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
}
#chatWidget .chat-messages::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.32) !important;
  background-clip: padding-box !important;
}
#chatWidget .chat-messages::-webkit-scrollbar-corner{ background: transparent !important; }

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 520px){
  #chatWidget{ right: 12px !important; bottom: 12px !important; }
  #chatWidget .chat-panel{
    width: min(360px, calc(100vw - 24px)) !important;
    height: min(520px, calc(100vh - 120px)) !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #chatWidget *{ transition: none !important; animation: none !important; }
}


/* =========================================================
   Chat enhancements (status, pinned, typing, reactions)
   ========================================================= */
#chatWidget .chat-fab-badge{
  opacity: 0 !important;
  transform: scale(.9) !important;
  transition: opacity .18s var(--ease), transform .18s var(--ease), background .18s var(--ease) !important;
}
#chatWidget.has-unread .chat-fab-badge{
  opacity: 1 !important;
  transform: scale(1) !important;
}
#chatWidget.has-mention .chat-fab-badge{
  opacity: 1 !important;
  transform: scale(1) !important;
  background: var(--chat-danger) !important;
  box-shadow: 0 0 0 3px rgba(10,16,30,.92), 0 0 0 7px rgba(255,77,109,.14) !important;
}

#chatWidget .chat-sub{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#chatWidget .chat-status{ color: var(--chat-muted) !important; font-weight: 600 !important; }
#chatWidget .chat-status-sep{ color: rgba(255,255,255,.28) !important; }
#chatWidget .chat-status--admin{
  border-radius: 999px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.75) !important;
}
#chatWidget .chat-status--admin.is-online{
  background: rgba(40,209,124,.18) !important;
  border-color: rgba(40,209,124,.38) !important;
  color: rgba(255,255,255,.92) !important;
}

#chatWidget .chat-pinned{
  margin: 12px 14px 0 !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#chatWidget .chat-pinned-label{
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(58,166,255,.2) !important;
  border: 1px solid rgba(58,166,255,.35) !important;
  color: rgba(255,255,255,.9) !important;
}
#chatWidget .chat-pinned-text{ color: rgba(255,255,255,.9) !important; font-weight: 600 !important; font-size: .84rem !important; }

#chatWidget .chat-typing{
  margin: 6px 14px 0 !important;
  font-size: .78rem !important;
  color: var(--chat-muted) !important;
}

#chatWidget .chat-msg.mention .chat-msg-body{
  border-color: rgba(255,77,109,.55) !important;
  box-shadow: 0 0 0 1px rgba(255,77,109,.25) !important;
}

#chatWidget .chat-msg-body-wrap{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
}
#chatWidget .chat-msg.self .chat-msg-body-wrap{
  align-items: flex-end !important;
}
#chatWidget .chat-msg-body{ max-width: 100% !important; }
#chatWidget .chat-msg-report{
  margin-left: 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--chat-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;
}
#chatWidget .chat-msg-report:hover{
  color: var(--chat-danger) !important;
}
#chatWidget .chat-msg-report.is-reported{
  color: var(--chat-success) !important;
  cursor: default !important;
}