/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* ===== CHATBOT WIDGET ===== */
#brl-chat-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1A5276, #1D9E75);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(26,82,118,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform 0.2s, box-shadow 0.2s;
}
#brl-chat-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(26,82,118,0.5);
}
#brl-chat-btn svg {
  width: 26px;
  height: 26px;
  fill: white;
}
#brl-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #E74C3C;
  color: white;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}
#brl-chat-window {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 360px;
  height: 500px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  display: none;
  flex-direction: column;
  z-index: 9998;
  overflow: hidden;
  font-family: Arial, sans-serif;
  border: 1px solid #e0e0e0;
}
#brl-chat-window.open {
  display: flex;
  animation: brl-slide-up 0.25s ease;
}
@keyframes brl-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
#brl-chat-header {
  background: linear-gradient(135deg, #1A5276, #1D9E75);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#brl-chat-header-icon {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#brl-chat-header-icon svg {
  width: 18px;
  height: 18px;
  fill: white;
}
#brl-chat-header-text {
  flex: 1;
}
#brl-chat-header-text h3 {
  margin: 0;
  color: white;
  font-size: 14px;
  font-weight: 600;
}
#brl-chat-header-text p {
  margin: 0;
  color: rgba(255,255,255,0.8);
  font-size: 11px;
}
#brl-chat-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  opacity: 0.8;
  padding: 0;
}
#brl-chat-close:hover { opacity: 1; }
#brl-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8f9fa;
}
.brl-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}
.brl-msg.bot {
  background: white;
  color: #2c3e50;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.brl-msg.user {
  background: linear-gradient(135deg, #1A5276, #1D9E75);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.brl-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 10px 13px;
  background: white;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.brl-typing span {
  width: 7px;
  height: 7px;
  background: #1D9E75;
  border-radius: 50%;
  animation: brl-bounce 1.2s infinite;
}
.brl-typing span:nth-child(2) { animation-delay: 0.2s; }
.brl-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes brl-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}
#brl-chat-input-area {
  padding: 12px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 8px;
  background: white;
}
#brl-chat-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 22px;
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
  font-family: Arial, sans-serif;
  resize: none;
  line-height: 1.4;
  max-height: 80px;
  overflow-y: auto;
}
#brl-chat-input:focus {
  border-color: #1D9E75;
  box-shadow: 0 0 0 2px rgba(29,158,117,0.15);
}
#brl-chat-send {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #1A5276, #1D9E75);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
  align-self: flex-end;
}
#brl-chat-send:hover { opacity: 0.85; }
#brl-chat-send svg {
  width: 16px;
  height: 16px;
  fill: white;
  margin-left: 2px;
}
#brl-chat-footer {
  text-align: center;
  font-size: 10px;
  color: #aaa;
  padding: 4px 0 8px;
  background: white;
}