.chat-container {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  height: 80vh;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fff;
  overflow: hidden;
}
.chat-header {
  background: #0d6efd;
  color: #fff;
  padding: 1rem;
  text-align: center;
  font-size: 1.25rem;
}
.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background: #e9ecef;
}
.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.message img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-right: .5rem;
}
.message .content {
  background: #232323;
  padding: .5rem 1rem;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  color: #fff;
}
.message .meta {
  font-size: .75rem;
  color: #fff;
  margin-bottom: .25rem;
}
.chat-input {
  display: flex;
  border-top: 1px solid #ddd;
}
.chat-input input {
  flex: 1;
  border: none;
  padding: 1rem;
  font-size: 1rem;
}
.chat-input button {
  border: none;
  background: #0d6efd;
  color: #fff;
  padding: 1rem 1.5rem;
  cursor: pointer;
}


/**/
 /* Chat toggle tab */
    #chat-toggle {
      position: fixed;
      bottom: 64px;
      left: 20px;
      background: #0c0c0c;
      color: #fff;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      z-index: 1000;
      transition: opacity 0.3s ease;
    }
    #chat-toggle.hidden { opacity: 0; pointer-events: none; }
    /* Popup chat window */
    #chat-popup {
      position: fixed;
      bottom: 47px;
      left: 20px;
      width: 320px;
      height: 400px;
      background: #fff;
      border: 1px solid #1e1e1e;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      transform: translateY(100%);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 999;
      scrollbar-color: #4b4947 #252525;
    }
    /* WebKit */
#chat-popup::-webkit-scrollbar { width:8px; height:8px; }
#chat-popup::-webkit-scrollbar-track { background:#4b4947; }
#chat-popup::-webkit-scrollbar-thumb { background:#4b4947; border-radius:4px; border:2px solid #4b4947; }
#chat-popup::-webkit-scrollbar-thumb:hover { background:#4b4947; }

    #chat-popup.open { transform: translateY(0); }
    /* Header with minimize */
    .popup-header {
      background: #16151a;
      color: #fff;
      padding: 0.75rem;
      text-align: center;
      font-weight: bold;
      position: relative;
    }
    .popup-header button.minimize {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
    }
    .status-bar {
      font-size: 0.875rem;
      margin-top: 0.25rem;
      color: #fff;
    }
    .status-bar span { font-weight: bold; margin-left: 0.5rem; }
    .popup-messages {
      flex: 1;
      padding: 0.5rem;
      overflow-y: auto;
      background: #181818;
    }
    .message {
      display: flex;
      align-items: flex-start;
      margin-bottom: 0.75rem;
      position: relative;
    }
    .message img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 0.5rem;
    }
    .message .content {
      flex: 1;
      background: #232323;
      padding: 0.5rem;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      color: #fff;
    }
    .message .meta {
      font-size: 0.75rem;
      color: #fff;
      margin-bottom: 0.25rem;
    }
    .message .meta .username-admin { color: #dc3545; }
    .delete-btn {
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      color: #dc3545;
      position: absolute;
      top: 4px;
      right: 4px;
    }
    .popup-input {
      display: flex;
      border-top: 1px solid #1e1e1e;
    }
    .popup-input button, #emoji-btn {
      border: none;
      background: #16151a;
      color: #fff;
      padding: 0 0.75rem;
      cursor: pointer;
    }
    .popup-input input {
      flex: 1;
      border: none;
      padding: 0.5rem;
      font-size: 1rem;
      background: #313131;
      color: #fff;
    }


     /* Ensure emoji picker appears above chat popup */
.emoji-picker,
    .emoji-picker__popover,
    .emoji-picker__wrapper,
    .emoji-picker__container {
     
      z-index: 10000 !important;
    }