/* =======================================================
   Cool Chatbot Theme - Ice Blue
   Applies only color styles. Layout is handled in core CSS.
======================================================= */

/* === Toggle Button === */
#chat-toggle-button {
  background-color: #0077be;
  color: white;
}

#chat-toggle-button:hover {
  background-color: #00cfff;
}

#chat-toggle-button:hover::after {
  background: #0077be;
  color: #ffffff;
}

/* === Chat Widget === */
#chat-widget {
  background-color: #ffffff;
  border: 1px solid #00cfff;
}

/* === Header === */
.chat-header {
  background-color: #49ccec !important;
  color: white !important;
  padding: 12px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

/* === Message Area === */
#chat-box,
#chat-messages {
  background: #f9f9f9;
}

/* === Input === */
#chatbot-input-area {
  background: white;
  border-top: 1px solid #ccc;
}

#user-input {
  background: white;
  border: 1px solid #ccc;
  color: #333;
}

/* === Send Button === */
#chatbot-send {
  background: #0077be;
  color: white;
}

/* === Message Bubbles === */
.user-message {
  background-color: #dcf8c6;
  color: #000;
  align-self: flex-end;
  margin-left: auto;
}

.bot-message {
  background-color: #e9e9e9;
  color: #000;
  align-self: flex-start;
  margin-right: auto;
}

.bot-message.typing {
  font-style: italic;
  opacity: 0.6;
}