/** =============================================================== */
/** chatroom */

body:has(#app) {
  background: transparent;
}

#app .v-application {
  background: transparent;
}

/* chat room header */
#app .embed-header {
  background: black;
  display: none;
}

/* chatroom page content */
#app .embed-chat-container {
  background: transparent;
  background: rgba(255, 255, 255, 0.5);
}

/* chatroom body */
#app .embed-content {
  background: transparent;
  height: 100%;
}

/* chatroom message part */
#app .embed-messages {
  background: transparent;
  padding: 16px 16px;
  padding-bottom: 48px;
  row-gap: 0px;
}

#app .message-avatar {
  display: none;
}

/* Override the original message box dimensions */
#app .bot-message-content,
#app .bot-message,
#app .own-message-container > div,
#app .own-message,
#app .system-message,
#app .message-card {
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
}

/* message box background */
#app .message-card,
#app .system-message {
  border: none;
  background: rgba(0, 0, 0, 0.4) !important;
  max-width: 100% !important;
  color: white !important;
}

/* bot username text */
#app .bot-message-content .username {
  color: black !important;
  font-size: 15px !important;
  line-height: 1.25;
}

/* user username text */
#app .message-card.own-message .username {
  color: #ea1520 !important;
  font-size: 15px !important;
  line-height: 1.25;
}

#app .message-content-other {
  color: #fff !important;
}

#app .message-content-admin {
  color: #fff !important;
}

/* Outer container for the bottom user input area (wrapper of the whole input section) */
#app .message-input-container {
  color: white;
  background: transparent;
  padding: 5px 5px 6px;
  border: none;
}

/* Input field container  */
#app .message-input-container .v-card-text {
  padding: 0px !important;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

/* input bottom line and  onfocus input bottom line */
#app .message-input-container .v-input .v-field__outline::before,
#app .message-input-container .v-input .v-field__outline::after {
  border: none;
  display: none;
}

/* input overlay */
#app .message-input-container .v-input .v-field__overlay {
  background: transparent;
}

/* input */
#app .message-input-container input {
  min-height: 40px;
  padding: 10px 0px 10px 15px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: normal;
}

/* btn send container */
#app .message-input-container .v-btn:has(.mdi-send) {
  margin-left: 0px !important;
  order: 1;
}

/* btn-send */
#app .message-input-container .v-btn[aria-label*="Send"],
#app .message-input-container .v-btn .mdi-send {
  color: #ea1520;
  font-size: 24px;
}

/* btn upload container */
#app .message-input-container .v-btn:has(.mdi-upload) {
  order: 2;
  margin-left: 0px !important;
  margin-right: 10px;
}

/* btn-upload */
#app .message-input-container .v-btn[aria-label*="Upload"],
#app .message-input-container .v-btn .mdi-upload {
  color: #ea1520;
  font-size: 24px;
}
/** =============================================================== */
/* testing */
#BOX1_WRAP{
 width: 100%;
}