/* ==========================================================================
   ChatBot Web — Widget Stylesheet (Mobile-First)
   Author: Roi Máximo | https://roimaximo.top
   ========================================================================== */

:root {
  --cbw-primary:    #6C63FF;
  --cbw-secondary:  #4CAF50;
  --cbw-btn-color:  #6C63FF;
  --cbw-btn-text:   #ffffff;
  --cbw-btn-size:   60px;
  --cbw-radius:     16px;
  --cbw-radius-msg: 12px;
  --cbw-shadow:     0 8px 32px rgba(0,0,0,.18);
  --cbw-font:       -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cbw-z:          999999;
  --cbw-white:      #ffffff;
  --cbw-gray-100:   #F5F5F5;
  --cbw-gray-200:   #E9ECEF;
  --cbw-gray-500:   #ADB5BD;
  --cbw-gray-700:   #495057;
  --cbw-user-bg:    var(--cbw-primary);
  --cbw-bot-bg:     #F1F0FF;
  --cbw-bot-color:  #1a1a2e;
  --cbw-win-h:      480px;
  --cbw-win-w:      360px;
}

#cbw-widget, #cbw-widget * { box-sizing: border-box; font-family: var(--cbw-font); -webkit-font-smoothing: antialiased; }

/* Widget container */
#cbw-widget { position:fixed; bottom:20px; right:20px; z-index:var(--cbw-z); display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
#cbw-widget.cbw-widget--left { right:auto; left:20px; align-items:flex-start; }

/* Toggle button */
.cbw-toggle-btn {
  width:var(--cbw-btn-size); height:var(--cbw-btn-size); border-radius:50%;
  background:var(--cbw-btn-color); color:var(--cbw-btn-text); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  position:relative; flex-shrink:0;
}
.cbw-toggle-btn:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(0,0,0,.3); }
.cbw-toggle-btn:active { transform:scale(.95); }
.cbw-toggle-btn__icon { display:flex; align-items:center; justify-content:center; }

.cbw-unread-badge {
  position:absolute; top:-4px; right:-4px; width:20px; height:20px;
  background:#F44336; color:#fff; border-radius:50%; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
  animation:cbwPulse 1.5s ease infinite;
}

@keyframes cbwPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* Chat window */
.cbw-chat-window {
  width:var(--cbw-win-w); max-width:calc(100vw - 24px);
  height:var(--cbw-win-h); max-height:calc(100vh - 120px);
  background:var(--cbw-white); border-radius:var(--cbw-radius); box-shadow:var(--cbw-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  animation:cbwSlideIn .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin:bottom right;
}
#cbw-widget.cbw-widget--left .cbw-chat-window { transform-origin:bottom left; }

@keyframes cbwSlideIn {
  from { opacity:0; transform:scale(.85) translateY(20px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}

/* Header */
.cbw-chat-header { background:linear-gradient(135deg,var(--cbw-primary),#9B59B6); padding:0 16px; height:64px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.cbw-chat-header__info { display:flex; align-items:center; gap:10px; }
.cbw-chat-header__avatar { width:38px; height:38px; background:rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; overflow:hidden; flex-shrink:0; }
.cbw-chat-header__avatar img { width:100%; height:100%; object-fit:cover; }
.cbw-chat-header__name { color:#fff; font-weight:700; font-size:.95rem; line-height:1.2; }
.cbw-chat-header__status { display:flex; align-items:center; gap:5px; }
.cbw-status-dot { width:8px; height:8px; background:#4AFF72; border-radius:50%; animation:cbwPulse 2s ease infinite; }
.cbw-chat-header__status span { color:rgba(255,255,255,.85); font-size:.75rem; }
.cbw-chat-header__close { background:rgba(255,255,255,.15); border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition:background .2s; flex-shrink:0; }
.cbw-chat-header__close:hover { background:rgba(255,255,255,.3); }

/* Messages */
.cbw-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.cbw-messages::-webkit-scrollbar { width:4px; }
.cbw-messages::-webkit-scrollbar-thumb { background:var(--cbw-gray-200); border-radius:4px; }

.cbw-message { display:flex; flex-direction:column; max-width:80%; animation:cbwFadeIn .25s ease; }
@keyframes cbwFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.cbw-message--bot  { align-self:flex-start; }
.cbw-message--user { align-self:flex-end; }
.cbw-message__bubble { padding:10px 14px; border-radius:var(--cbw-radius-msg); font-size:.875rem; line-height:1.55; word-break:break-word; }
.cbw-message--bot  .cbw-message__bubble { background:var(--cbw-bot-bg); color:var(--cbw-bot-color); border-bottom-left-radius:4px; }
.cbw-message--user .cbw-message__bubble { background:var(--cbw-user-bg); color:#fff; border-bottom-right-radius:4px; }
.cbw-message__time { font-size:.7rem; color:var(--cbw-gray-500); margin-top:4px; padding:0 4px; }
.cbw-message--user .cbw-message__time { text-align:right; }

/* Typing */
.cbw-typing-indicator { display:flex; align-items:center; gap:5px; padding:8px 16px; flex-shrink:0; }
.cbw-typing-indicator__dot { width:8px; height:8px; background:var(--cbw-gray-500); border-radius:50%; animation:cbwTyping 1.2s ease infinite; }
.cbw-typing-indicator__dot:nth-child(2) { animation-delay:.2s; }
.cbw-typing-indicator__dot:nth-child(3) { animation-delay:.4s; }
@keyframes cbwTyping { 0%,80%,100%{transform:scale(1);opacity:.5} 40%{transform:scale(1.3);opacity:1} }

/* Input area */
.cbw-input-area { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--cbw-gray-200); background:var(--cbw-white); flex-shrink:0; }
.cbw-message-input { flex:1; border:2px solid var(--cbw-gray-200); border-radius:22px; padding:10px 16px; font-size:.875rem; resize:none; outline:none; line-height:1.4; max-height:100px; overflow-y:auto; transition:border-color .2s; font-family:var(--cbw-font); color:var(--cbw-gray-700); }
.cbw-message-input:focus { border-color:var(--cbw-primary); }
.cbw-message-input::placeholder { color:var(--cbw-gray-500); }
.cbw-send-btn { width:40px; height:40px; background:var(--cbw-btn-color); color:var(--cbw-btn-text); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .2s,box-shadow .2s; }
.cbw-send-btn:hover  { transform:scale(1.08); box-shadow:0 3px 12px rgba(0,0,0,.2); }
.cbw-send-btn:active { transform:scale(.93); }
.cbw-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Footer */
.cbw-chat-footer { text-align:center; padding:4px 0 6px; background:var(--cbw-white); border-top:1px solid var(--cbw-gray-200); flex-shrink:0; }
.cbw-chat-footer a { font-size:.68rem; color:var(--cbw-gray-500); text-decoration:none; letter-spacing:.02em; }
.cbw-chat-footer a:hover { color:var(--cbw-primary); }

/* Responsive */
@media (max-width:480px) {
  :root { --cbw-win-w:calc(100vw - 24px); --cbw-win-h:70vh; --cbw-btn-size:54px; }
  #cbw-widget { bottom:16px; right:12px; }
  #cbw-widget.cbw-widget--left { left:12px; }
  .cbw-chat-window { max-height:calc(100vh - 100px); }
}
@media (min-width:768px) {
  :root { --cbw-win-w:380px; --cbw-win-h:520px; }
}
@media (min-width:1200px) {
  :root { --cbw-win-w:400px; --cbw-win-h:560px; }
}