.rlcore-chat-wrapper{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* Panel */
.rlcore-chat-box{
  display: none;
  width: 340px;
  max-width: calc(100vw - 60px);
  background: var(--rlcore-panel-bg, #ffffff);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--rlcore-radius, 18px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

/* When open, show the chat panel */
.rlcore-chat-wrapper.is-open .rlcore-chat-box{
  display: block;
}

/* Header */
.rlcore-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: var(--rlcore-header-bg, #00c53e);
  color: var(--rlcore-header-text, #ffffff);
}
.rlcore-chat-title{ font-weight: 700; }
.rlcore-chat-avatar-wrap{ margin-left: 10px; display:flex; align-items:center; }
.rlcore-chat-avatar{ width: 28px; height: 28px; border-radius: 999px; object-fit: cover; display:block; }

.rlcore-chat-messages{
  padding: 12px;
  height: 280px;
  overflow:auto;
  background: var(--rlcore-chat-bg, #f8faf9);
}
.rlcore-chat-typing{
  padding: 0 12px 10px;
  color:#5f6368;
  font-size: 12px;
  background: var(--rlcore-chat-bg, #f8faf9);
}

.rlcore-chat-form{
  display:flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: var(--rlcore-panel-bg, #ffffff);
}
.rlcore-chat-input{
  flex:1;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.16);
  border-radius: calc(var(--rlcore-radius, 18px) - 6px);
}
.rlcore-chat-input::placeholder{ color: var(--rlcore-placeholder, #6b7280); }

.rlcore-chat-button{
  padding:10px 12px;
  border-radius: calc(var(--rlcore-radius, 18px) - 6px);
  background: var(--rlcore-button-bg, #00c53e);
  color: var(--rlcore-button-text, #ffffff);
  border:0;
  font-weight:700;
  cursor:pointer;
}

/* Toggle is ALWAYS stationary bottom-right because wrapper is fixed */
.rlcore-chat-toggle{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border:0;
  cursor:pointer;
  background: var(--rlcore-button-bg, #00c53e);
  color: var(--rlcore-button-text, #ffffff);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}
.rlcore-chat-toggle-icon{ font-size: 22px; line-height: 1; }

/* Messages */
.rlcore-chat-msg{ display:flex; margin: 8px 0; }
.rlcore-chat-msg--user{ justify-content:flex-end; }
.rlcore-chat-bubble{
  max-width: 80%;
  padding: 10px 12px;
  border-radius: calc(var(--rlcore-radius, 18px) - 4px);
  border: 1px solid rgba(0,0,0,.08);
  background: var(--rlcore-assistant-bubble, #ffffff);
  color: var(--rlcore-assistant-text, #111827);
}
.rlcore-chat-msg--user .rlcore-chat-bubble{
  background: var(--rlcore-user-bubble, rgba(0,197,62,.12));
  border-color: rgba(0,197,62,.22);
  color: var(--rlcore-user-text, #111827);
}

/* greeting message (first assistant bubble) */
.rlcore-chat-msg--assistant:first-child .rlcore-chat-bubble{
  color: var(--rlcore-greeting-text, #111827);
}

.rlcore-chat-wrapper--messenger .rlcore-chat-header{ background:#111827; color:#fff; }
.rlcore-chat-wrapper--messenger .rlcore-chat-toggle{ background:#111827; }