/* ================== GLOBAL ================== */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #111;
  color: #eee;
  height: 100dvh;
}

.chat-app {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ================== SIDEBAR ================== */
.sidebar {
  width: 320px;
  background: #1b1b1b;
  border-right: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
}

/* Pour le burger mobile */
.sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  padding: 15px;
  border-bottom: 1px solid #2a2a2a;
  font-weight: bold;
  font-size: 18px;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.conversation {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}

.conversation:hover {
  background: #252525;
}

.conv-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

/* ================== CHAT AREA ================== */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 15px;
  background: #1b1b1b;
  border-bottom: 1px solid #2a2a2a;
  font-weight: bold;
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-messages div {
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 70%;
}

.chat-messages div.user {
  background: #25d366;
  color: #111;
  align-self: flex-end;
}

.chat-messages div.admin {
  background: #2a2a2a;
  align-self: flex-start;
}

/* ================== CHAT FORM BOUTON ENVOIS ================== */
.chat-form {
  display: flex;
  padding: 10px;
  border-top: 1px solid #2a2a2a;
  background: #1b1b1b;
}

.chat-form input {
  flex: 1;
  padding: 10px;
  background: #222;
  border: 2px solid #222; /* border de base sombre */
  color: #fff;
  border-radius: 12px;
  transition: border 0.2s ease;
}

.chat-form input:focus {
  outline: none;
  border: 2px solid #25d366; /* contour vert clair au focus */
}

.chat-form button {
    background: linear-gradient(145deg, #25d366, #1fa841);
    border: none;
    padding: 0 20px;
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.chat-form button:hover {
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 8px 20px rgba(37,211,102,0.6), 0 0 10px rgba(37,211,102,0.5) inset;
    background: linear-gradient(145deg, #1fa841, #25d366);
}

.chat-form button:active {
    transform: scale(0.95) rotate(0deg);
    box-shadow: 0 3px 8px rgba(37,211,102,0.3);
}

/* ================== CHAT FORM MOBILE-FRIENDLY ================== */
@media (max-width: 768px) {
  .chat-form {
    position: fixed;
    bottom: 10px; /* petit espace du bas */
    left: 10px;
    right: 10px;
    padding: 10px;
    background: none; /* semi-transparent pour voir un peu le chat derrière */
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
    box-shadow: none;
    border: none;
  }

.chat-form input {
  flex: 1;
  padding: 10px;
  background: #222;
  border: 2px solid #222; /* border de base sombre */
  color: #fff;
  border-radius: 12px;
  transition: border 0.2s ease;
}

.chat-form input:focus {
  outline: none;
  border: 2px solid #25d366; /* contour vert clair au focus */
}

  .chat-form button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 22px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #25d366, #1fa841);
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    position: relative;
    overflow: hidden;
  }

  /* Pulse interne */
  .chat-form button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37,211,102,0.2);
    animation: pulseSendBtn 2s infinite;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .chat-form button > * {
    position: relative;
    z-index: 1;
  }

  .chat-form button:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 18px rgba(37,211,102,0.7), 0 0 10px rgba(37,211,102,0.5) inset;
  }

  .chat-form button:active {
    transform: scale(0.95);
    box-shadow: 0 3px 8px rgba(37,211,102,0.3);
  }
}









/* ================== RESPONSIVE / MOBILE ================== */
@media (max-width: 768px) {
  .chat-app {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 20;
  }

  #burger-btn {
    display: block;
    font-size: 28px;
    background: none;
    border: none;
    color: #fff;
    margin-right: 12px;
    cursor: pointer;
  }

  .chat-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

html, body {
  height: 100%;
  overflow: hidden;
}

}





/* ================== BURGER ================== */
/* Cacher le burger par défaut sur PC */
#burger-btn {
  display: none; /* PC */
}

/* ================== SIDEBAR PC ================== */
.sidebar {
  width: 300px; /* un peu plus compact */
  max-height: 100vh; /* pas dépasser la fenêtre */
  overflow-y: auto; /* scroll si trop de conversations */
  border-right: 1px solid #2a2a2a;
  flex-direction: column;
  background: #1b1b1b;
}

/* chaque conversation plus compacte sur PC */
.conversation {
  padding: 10px 12px; /* moins large que mobile */
  border-bottom: 1px solid #222;
  font-size: 14px; /* texte plus petit */
}

.conv-avatar {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}




/* ================== RESPONSIVE MOBILE ================== */
@media (max-width: 768px) {
  #burger-btn {
    display: block; /* mobile seulement */
  }
   }

   /* FIX SCROLL CHAT – CRITIQUE */
.chat-messages {
  min-height: 0;
  overflow-y: auto;
 
  
}


@media (max-width: 768px) {
  .chat-messages {
    padding-bottom: 80px;
  }
}


   /* COTE MAGIC */


   /* glow subtil sur messages */
.chat-messages div.user {
  box-shadow: 0 0 8px #25d36688;
}

.chat-messages div.admin {
  box-shadow: 0 0 8px #55555588;
}

/* glow sur la sidebar et header */
.sidebar, .chat-header {
  box-shadow: 0 0 20px #1b1b1b inset, 0 0 10px #25d36622;
}



body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #1b1b1b, #222, #1a1a1a);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: -1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/*MESSAGE  POP*/
.chat-messages div {
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/*Cursor personnalisé + micro-hover*/
body {
  cursor: url('https://cur.cursors-4u.net/cursors/cur-12/cur1162.cur'), auto;
}

.conversation:hover {
  transform: translateX(5px);
  transition: transform 0.2s;
}


/* POINT NOTIFICATION 
.conversation.has-unread::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff1e1e; /* r
  display: inline-block;
  margin-left: 8px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.5); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.8; }
}
*/


.conversation.pulse {
    animation: pulseSidebar 4.5s ease-in-out infinite; /* pulsation infinie plus douce */
    border-left: 4px solid #ffcc00;
    box-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00; /* glow lumineux */
    transform: scale(1.02); /* léger effet zoom */
    background-color: rgba(255, 204, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.conversation.pulse:hover {
    transform: scale(1.05); /* boost au hover */
    box-shadow: 0 0 15px #ffdd33, 0 0 25px #ffdd33, 0 0 40px #ffdd33;
}

@keyframes pulseSidebar {
    0% {
        background-color: rgba(255, 204, 0, 0.0);
        transform: scale(1.0);
        box-shadow: 0 0 0 #ffcc00;
    }
    50% {
        background-color: rgba(255, 204, 0, 0.3);
        transform: scale(1.03);
        box-shadow: 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00;
    }
    100% {
        background-color: rgba(255, 204, 0, 0.0);
        transform: scale(1.0);
        box-shadow: 0 0 0 #ffcc00;
    }
}



/* ================== RESPONSIVE / MOBILE ================== */
@media (max-width: 768px) {
  .chat-app {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    max-width: 260px;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  #burger-btn {
    display: block;
  }

  .chat-area {
    flex: 1;
    width: 100%;
  }

  .chat-form {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 15;
  }

  .chat-messages {
    padding-bottom: 80px;
  }

  .conversation {
    padding: 10px;
    font-size: 14px;
  }

  .conv-avatar {
    width: 28px;
    height: 28px;
     }
}


.msg-time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}

.msg-status {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.8;
}



/* ================== SCROLL FLUIDE ================== */
.conversation-list,
.chat-messages {
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #25d36644 #111; /* thumb / track */
  -webkit-overflow-scrolling: touch; /* mobile inertie */
  overscroll-behavior: contain;  /* éviter le scroll parent */
}

/* Chrome / Edge / Safari */
.conversation-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 8px;
}

.conversation-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: #111;
}

.conversation-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background-color: #25d36688;
  border-radius: 4px;
  border: 2px solid #111;
}

/* ================== MESSAGE AUTOMATIQUE SCROLL ================== */
.chat-messages {
  scroll-behavior: smooth; /* smooth scroll */
}

@media (min-width: 769px) {
  #chat-user {
    display: none;
  }
}