RED’S CSS Snippet

#red-chatbot-wrap {

  max-width: 720px;

  margin: 30px auto;

  font-family: Arial, sans-serif;

}

.red-chatbot-card {

  border: 1px solid #d1d5db;

  border-radius: 14px;

  overflow: hidden;

  background: #fff;

}

.red-chatbot-header {

  background: #0f172a;

  color: #fff;

  padding: 20px;

}

#red-chat-window {

  padding: 20px;

  height: 350px;

  overflow-y: auto;

  background: #f8fafc;

}

.red-message {

  margin-bottom: 12px;

  padding: 10px;

  border-radius: 10px;

  max-width: 80%;

}

.red-message.bot {

  background: #e2e8f0;

}

.red-message.user {

  background: #0f172a;

  color: #fff;

  margin-left: auto;

  text-align: right;

}

#red-quick-replies {

  padding: 10px;

}

.quick-btn {

  display: inline-block;

  margin: 5px;

  padding: 10px 14px;

  border-radius: 999px;

  border: 1px solid #cbd5e1;

  background: #f8fafc;

  cursor: pointer;

}

#red-user-form {

  display: flex;

  gap: 10px;

  padding: 10px;

}

#red-user-input {

  flex: 1;

  padding: 10px;

}

#red-user-form button {

  padding: 10px 16px;

  background: #0f172a;

  color: white;

  border: none;

}

.restart-btn {

  margin: 10px;

  padding: 10px;

  border: 1px solid #ccc;

  cursor: pointer;

}