.chat-header {
      padding: 8px;
      border-bottom: 1px solid #111827;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      font-size: 12px;
    }

    .chat-message {
      margin-bottom: 6px;
    }

    .chat-user {
      font-weight: 600;
      margin-right: 4px;
    }

    .chat-input {
      border-top: 1px solid #111827;
      padding: 8px;
      display: flex;
      gap: 6px;
      position: relative;
    }

    .chat-input input {
      flex: 1;
      border-radius: 999px;
      border: 1px solid #374151;
      background: #020617;
      color: #f9fafb;
      padding: 6px 10px;
      font-size: 12px;
      outline: none;
    }
  
#chat-emoji-btn {
  border-radius: 999px;
  border: 1px solid #374151;
  background: #020617;
  color: #fbbf24;
  font-size: 16px;
  padding: 4px 8px;
  cursor: pointer;
}

#chat-emoji-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#chat-emoji-panel {
  position: absolute;
  right: 70px;   /* sits just left of Send button */
  bottom: 42px;  /* above the input bar */
  display: none; /* toggled via JS */
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #020617;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  z-index: 50;
  flex-wrap: wrap;
  gap: 4px;
}

#chat-emoji-panel button {
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  padding: 2px;
}

#chat-emoji-panel button:hover {
  transform: scale(1.15);
}


    /* Simple scrollbar tweaks */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background: #4b5563;
      border-radius: 999px;
    }
/* ---------------------------------------
 * EMOJI UPGRADE – DuellCast chat
 * -------------------------------------*/

/* Use system emoji fonts in chat */
.chat-messages {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI Emoji", "Apple Color Emoji", "Twemoji Mozilla",
               sans-serif;
}

/* Emoji-only messages = BIG and centered */
.chat-message.chat-emoji-only {
  text-align: center;
}

/* Make the emoji itself large */
.chat-message.chat-emoji-only span {
  font-size: 26px;
  line-height: 1.1;
}

/* Hide "User:" label when it's just emoji spam */
.chat-message.chat-emoji-only .chat-user {
  display: none;
}