/* ─── Admin Chatbot Widget ───────────────────────────────────────────────── */
/* Arabic-first, RTL layout, primary #1d4ed8, danger #dc2626               */

:root {
  --cb-primary: #1d4ed8;
  --cb-primary-hover: #1e40af;
  --cb-danger:  #dc2626;
  --cb-bg:      #ffffff;
  --cb-surface: #f8fafc;
  --cb-border:  #e2e8f0;
  --cb-text:    #0f172a;
  --cb-muted:   #64748b;
  --cb-radius:  12px;
  --cb-shadow:  0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
  --cb-z:       99999;
}

/* ── Floating toggle button ─────────────────────────────────────────────── */
#chatbot-toggle {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  z-index:         var(--cb-z);
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--cb-primary);
  color:           #fff;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(29,78,216,.45);
  transition:      background .2s, transform .15s;
  font-size:       24px;
  line-height:     1;
}
#chatbot-toggle:hover  { background: var(--cb-primary-hover); transform: scale(1.07); }
#chatbot-toggle:active { transform: scale(.95); }

/* Red badge (open fraud alerts) */
#chatbot-toggle .cb-badge {
  position:      absolute;
  top:           -4px;
  left:          -4px;
  background:    var(--cb-danger);
  color:         #fff;
  border-radius: 50%;
  min-width:     20px;
  height:        20px;
  font-size:     11px;
  font-weight:   700;
  display:       none;
  align-items:   center;
  justify-content: center;
  padding:       0 4px;
  line-height:   1;
}
#chatbot-toggle .cb-badge.visible { display: flex; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
#chatbot-panel {
  position:      fixed;
  bottom:        92px;
  right:         24px;
  z-index:       var(--cb-z);
  width:         380px;
  max-width:     calc(100vw - 32px);
  height:        520px;
  max-height:    calc(100vh - 120px);
  background:    var(--cb-bg);
  border:        1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow:    var(--cb-shadow);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  font-family:   'GE SS', 'Segoe UI', Tahoma, Arial, sans-serif;
  direction:     rtl;
  visibility:    hidden;
  opacity:       0;
  transform:     translateY(16px) scale(.97);
  transition:    opacity .2s, transform .2s, visibility .2s;
}
#chatbot-panel.open {
  visibility: visible;
  opacity:    1;
  transform:  translateY(0) scale(1);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cb-header {
  background:      var(--cb-primary);
  color:           #fff;
  padding:         12px 14px;
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-shrink:     0;
}
.cb-header-title {
  flex:        1;
  font-size:   15px;
  font-weight: 700;
}
.cb-header-subtitle {
  font-size:   11px;
  opacity:     .75;
}
.cb-close-btn {
  background:    transparent;
  border:        none;
  color:         #fff;
  font-size:     20px;
  cursor:        pointer;
  line-height:   1;
  padding:       2px 4px;
  border-radius: 4px;
  opacity:       .85;
}
.cb-close-btn:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* ── Fraud alert banner ──────────────────────────────────────────────────── */
#cb-fraud-banner {
  background:  #fef2f2;
  border-bottom: 2px solid var(--cb-danger);
  color:       var(--cb-danger);
  padding:     8px 14px;
  font-size:   13px;
  font-weight: 600;
  display:     none;
  gap:         6px;
  align-items: center;
  flex-shrink: 0;
}
#cb-fraud-banner.visible { display: flex; }
#cb-fraud-banner span { flex: 1; }

/* ── Conversation log ────────────────────────────────────────────────────── */
.cb-messages {
  flex:       1;
  overflow-y: auto;
  padding:    12px 14px;
  display:    flex;
  flex-direction: column;
  gap:        10px;
  scroll-behavior: smooth;
}
.cb-messages::-webkit-scrollbar { width: 4px; }
.cb-messages::-webkit-scrollbar-thumb { background: var(--cb-border); border-radius: 2px; }

/* Bubble base */
.cb-bubble {
  max-width:     82%;
  padding:       9px 13px;
  border-radius: 12px;
  font-size:     14px;
  line-height:   1.55;
  word-break:    break-word;
  white-space:   pre-wrap;
}
.cb-bubble.user {
  background:   var(--cb-primary);
  color:        #fff;
  align-self:   flex-start;   /* start = right in RTL */
  border-bottom-right-radius: 3px;
}
.cb-bubble.assistant {
  background:   var(--cb-surface);
  color:        var(--cb-text);
  align-self:   flex-end;     /* end = left in RTL */
  border:       1px solid var(--cb-border);
  border-bottom-left-radius: 3px;
}
.cb-bubble.system-msg {
  align-self:   center;
  background:   transparent;
  color:        var(--cb-muted);
  font-size:    12px;
  font-style:   italic;
  max-width:    100%;
  text-align:   center;
  padding:      2px 0;
}
/* Typing indicator */
.cb-typing span {
  display:       inline-block;
  width:         7px;
  height:        7px;
  margin:        0 2px;
  border-radius: 50%;
  background:    var(--cb-muted);
  animation:     cbBounce 1.2s infinite;
}
.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cbBounce {
  0%,80%,100% { transform: translateY(0); }
  40%         { transform: translateY(-6px); }
}

/* ── Input row ───────────────────────────────────────────────────────────── */
.cb-input-row {
  display:     flex;
  align-items: flex-end;
  gap:         6px;
  padding:     10px 12px;
  border-top:  1px solid var(--cb-border);
  flex-shrink: 0;
  background:  var(--cb-bg);
}
#cb-text-input {
  flex:          1;
  min-height:    36px;
  max-height:    100px;
  padding:       8px 10px;
  border:        1px solid var(--cb-border);
  border-radius: 8px;
  font-size:     14px;
  font-family:   inherit;
  resize:        none;
  direction:     rtl;
  color:         var(--cb-text);
  background:    var(--cb-surface);
  outline:       none;
  transition:    border-color .15s;
  line-height:   1.4;
}
#cb-text-input:focus { border-color: var(--cb-primary); background: #fff; }
#cb-text-input::placeholder { color: var(--cb-muted); }

/* Icon buttons in input row */
.cb-icon-btn {
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   8px;
  border:          1px solid var(--cb-border);
  background:      var(--cb-surface);
  color:           var(--cb-muted);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       17px;
  transition:      background .15s, color .15s, border-color .15s;
}
.cb-icon-btn:hover   { background: #eff6ff; color: var(--cb-primary); border-color: var(--cb-primary); }
.cb-icon-btn.active  { background: var(--cb-primary); color: #fff; border-color: var(--cb-primary); }
.cb-icon-btn.danger  { background: #fef2f2; color: var(--cb-danger); border-color: var(--cb-danger); }

/* Send button */
#cb-send-btn {
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  border-radius:   8px;
  border:          none;
  background:      var(--cb-primary);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       17px;
  transition:      background .15s;
}
#cb-send-btn:hover   { background: var(--cb-primary-hover); }
#cb-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Footer note ─────────────────────────────────────────────────────────── */
.cb-footer {
  text-align:  center;
  font-size:   10px;
  color:       var(--cb-muted);
  padding:     4px 0 6px;
  flex-shrink: 0;
}

/* ── Action confirmation ────────────────────────────────────────────────── */
.cb-action-confirm {
  background: #fffbeb !important;
  border: 1px solid #f59e0b !important;
  border-radius: 10px;
  padding: 12px !important;
}
.cb-confirm-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.cb-confirm-yes {
  background: #16a34a;
  color: #fff;
}
.cb-confirm-yes:hover { background: #15803d; }
.cb-confirm-no {
  background: #dc2626;
  color: #fff;
}
.cb-confirm-no:hover { background: #b91c1c; }
.cb-confirm-btn:disabled {
  cursor: not-allowed;
}

/* ── Responsive (narrow screens) ─────────────────────────────────────────── */
@media (max-width: 420px) {
  #chatbot-panel { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
  #chatbot-toggle { right: 12px; bottom: 12px; }
}