/* =============================================================
   FLASHLAB CREATIVE — Chatbot Widget v2
   Premium SaaS-style · Glassmorphism · Dark & Light mode
   ============================================================= */

/* ── Root Variables ─────────────────────────────────────────── */
:root {
  --cb-z:      9999;
  --cb-radius: 20px;
  --cb-font:   'Outfit', 'Inter', sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   FLOATING BUTTON ROOT  (bottom-right corner)
───────────────────────────────────────────────────────────── */
/* Root is exactly the button size — button never moves */
#fl-chatbot-root {
  position:       fixed;
  bottom:         72px;
  right:          28px;
  z-index:        var(--cb-z);
  width:          60px;
  height:         60px;
  font-family:    var(--cb-font);
  pointer-events: none;
}
#fl-chatbot-root > * { pointer-events: all; }

/* ── Thinking bubble — floats above the button, grows to the left ── */
#fl-thinking-bubble {
  position:        absolute;
  bottom:          calc(100% + 10px);
  right:           0;
  background:      rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(12px);
  border:          1px solid rgba(168, 232, 50, 0.22);
  border-radius:   999px;
  padding:         8px 16px;
  font-size:       0.78rem;
  font-weight:     500;
  color:           rgba(240, 238, 232, 0.9);
  white-space:     nowrap;
  box-shadow:      0 8px 24px rgba(0,0,0,0.35);
  transition:      opacity 0.35s ease, transform 0.35s ease;
}
#fl-thinking-bubble.hidden {
  opacity:         0;
  transform:       translateY(8px) scale(0.95);
  pointer-events:  none;
}
.bubble-text              { transition: opacity 0.25s; }
.bubble-text.fade-out     { opacity: 0; }

[data-theme="light"] #fl-thinking-bubble {
  background:   rgba(255, 255, 255, 0.96);
  border-color: rgba(168, 232, 50, 0.35);
  color:        #0f172a;
  box-shadow:   0 8px 24px rgba(0,0,0,0.1);
}

/* ── Floating Robot Button ── */
#fl-robot-btn {
  position:      absolute;
  bottom:        0;
  right:         0;
  width:         60px;
  height:        60px;
  border-radius: 50%;
  border:        none;
  cursor:        pointer;
  background:    #a8e832;
  box-shadow:    0 4px 20px rgba(168,232,50,0.45), 0 8px 32px rgba(0,0,0,0.35);
  display:       flex;
  align-items:   center;
  justify-content: center;
  outline:       none;
  transition:    transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}

/* Spinning arc ring — only this rotates, button & emoji stay static */
#fl-robot-btn::after {
  content:        '';
  position:       absolute;
  inset:          -5px;
  border-radius:  50%;
  border:         3px solid transparent;
  border-top-color:    #ffffff;
  border-right-color:  rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  opacity:        0;
  pointer-events: none;
}
#fl-robot-btn.spinning::after {
  animation: cb-arc-spin 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cb-arc-spin {
  0%   { transform: rotate(0deg);   opacity: 0;   }
  8%   { opacity: 1;                              }
  85%  { opacity: 1;                              }
  100% { transform: rotate(360deg); opacity: 0;   }
}
#fl-robot-btn:hover {
  transform:  translateY(-4px) scale(1.08);
  box-shadow: 0 8px 28px rgba(245,109,67,0.55), 0 16px 48px rgba(0,0,0,0.35);
}
#fl-robot-btn.open {
  animation:     none;
  transform:     scale(0.92);
  box-shadow:    0 4px 16px rgba(245,109,67,0.35);
}
#fl-robot-btn .cb-robot-icon { display: flex; align-items: center; justify-content: center; }
#fl-robot-btn .cb-close-icon { display: none; font-size: 1.3rem; color: #fff; }
#fl-robot-btn.open .cb-robot-icon { display: none; }
#fl-robot-btn.open .cb-close-icon { display: flex; align-items: center; justify-content: center; }

.cb-robot-svg {
  font-size:     1.85rem;
  line-height:   1;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   MAIN CHAT PANEL  — fixed, centered below navbar
───────────────────────────────────────────────────────────── */
#fl-chatbox {
  position:        fixed;
  /* top / left / width / height are set by JS on first open */
  width:           min(720px, calc(100vw - 24px));
  height:          590px;
  min-width:       320px;
  min-height:      400px;
  max-width:       calc(100vw - 16px);
  max-height:      calc(100vh - 20px);
  z-index:         calc(var(--cb-z) - 1);

  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  border-radius:   var(--cb-radius);

  /* Glassmorphism — dark */
  background:      rgba(7, 9, 18, 0.86);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border:          1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.04),
    0 24px 60px  rgba(0,0,0,0.55),
    0 48px 100px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);

  opacity:         0;
  visibility:      hidden;
  pointer-events:  none;
  transform:       scale(0.97);
  transition:
    opacity   0.3s ease,
    visibility 0.3s,
    transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#fl-chatbox.open {
  opacity:        1;
  visibility:     visible;
  pointer-events: all;
  transform:      scale(1);
}

/* Glassmorphism — light */
[data-theme="light"] #fl-chatbox {
  background:   rgba(248, 250, 255, 0.9);
  border-color: rgba(0,0,0,0.07);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.05),
    0 24px 60px  rgba(0,0,0,0.1),
    0 48px 100px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ── Header ── */
.cb-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 18px;
  border-bottom:   1px solid rgba(255,255,255,0.06);
  background:      rgba(255,255,255,0.025);
  flex-shrink:     0;
  cursor:          grab;
  user-select:     none;
}
.cb-header.dragging { cursor: grabbing; }
[data-theme="light"] .cb-header {
  border-bottom-color: rgba(0,0,0,0.07);
  background:          rgba(0,0,0,0.01);
}

/* ── Resize Handles ── */
.cb-resize-handle {
  position:   absolute;
  z-index:    100;
  background: transparent;
}
.cb-resize-n  { top: 0;    left: 14px; right: 14px; height: 6px; cursor: n-resize; }
.cb-resize-s  { bottom: 0; left: 14px; right: 14px; height: 6px; cursor: s-resize; }
.cb-resize-e  { right: 0;  top: 14px; bottom: 14px; width: 6px;  cursor: e-resize; }
.cb-resize-w  { left: 0;   top: 14px; bottom: 14px; width: 6px;  cursor: w-resize; }
.cb-resize-ne { top: 0;    right: 0;  width: 14px; height: 14px; cursor: ne-resize; }
.cb-resize-nw { top: 0;    left: 0;   width: 14px; height: 14px; cursor: nw-resize; }
.cb-resize-se { bottom: 0; right: 0;  width: 14px; height: 14px; cursor: se-resize; }
.cb-resize-sw { bottom: 0; left: 0;   width: 14px; height: 14px; cursor: sw-resize; }

/* Subtle SE corner grip dots */
.cb-resize-se::after {
  content:       '';
  position:      absolute;
  bottom:        4px;
  right:         4px;
  width:         10px;
  height:        10px;
  border-right:  2px solid rgba(255,255,255,0.18);
  border-bottom: 2px solid rgba(255,255,255,0.18);
  border-radius: 0 0 3px 0;
}
[data-theme="light"] .cb-resize-se::after {
  border-color: rgba(0,0,0,0.15);
}

.cb-header-left  { display: flex; align-items: center; gap: 12px; }
.cb-header-actions { display: flex; align-items: center; gap: 4px; }

.cb-header-avatar {
  width:         52px;
  height:        52px;
  border-radius: 16px;
  background:    linear-gradient(145deg, #16a34a 0%, #ea7c1a 60%, #f97316 100%);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.7rem;
  flex-shrink:   0;
  box-shadow:    0 4px 16px rgba(249,115,22,0.35), 0 0 0 1px rgba(255,255,255,0.08);
}

.cb-header-name {
  font-size:      1.1rem;
  font-weight:    800;
  letter-spacing: 0.2px;
  color:          var(--text, #f0eee8);
  line-height:    1.2;
}
[data-theme="light"] .cb-header-name { color: #0f172a; }

.cb-header-status {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   0.76rem;
  color:       var(--muted, #888);
  margin-top:  3px;
  font-weight: 500;
}
.cb-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: cb-pulse-dot 2.2s ease-in-out infinite;
}
@keyframes cb-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(34,197,94,0.6); }
  50%       { box-shadow: 0 0 0 5px rgba(34,197,94,0);   }
}

/* Icon buttons (clear / minimize / close) */
.cb-icon-btn {
  width:           32px;
  height:          32px;
  border-radius:   8px;
  border:          none;
  background:      transparent;
  color:           var(--muted, #888);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.92rem;
  transition:      background 0.2s, color 0.2s, transform 0.15s;
}
.cb-icon-btn:hover {
  background: rgba(255,255,255,0.09);
  color:      var(--text, #f0eee8);
  transform:  scale(1.1);
}
[data-theme="light"] .cb-icon-btn:hover {
  background: rgba(0,0,0,0.06);
  color:      #0f172a;
}
.cb-icon-btn.danger:hover {
  background: rgba(239,68,68,0.14);
  color:      #ef4444;
}

/* ── Messages Area ── */
.cb-messages {
  flex:             1;
  overflow-y:       auto;
  padding:          18px 18px 8px;
  display:          flex;
  flex-direction:   column;
  gap:              4px;
  scroll-behavior:  smooth;
}
.cb-messages::-webkit-scrollbar       { width: 4px; }
.cb-messages::-webkit-scrollbar-track { background: transparent; }
.cb-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.09); border-radius: 99px; }
[data-theme="light"] .cb-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }

/* Welcome screen */
.cb-welcome {
  text-align:  center;
  padding:     20px 12px 12px;
  animation:   cb-fade-up 0.4s ease;
}
.cb-welcome-emoji { font-size: 2.6rem; margin-bottom: 10px; line-height: 1; }
.cb-welcome h4 {
  font-size:   1.08rem;
  font-weight: 700;
  color:       var(--text, #f0eee8);
  margin-bottom: 6px;
}
[data-theme="light"] .cb-welcome h4 { color: #0f172a; }
.cb-welcome p {
  font-size:  0.82rem;
  color:      var(--muted, #888);
  line-height: 1.65;
  max-width:  380px;
  margin:     0 auto 14px;
}

/* Quick chips */
.cb-chips {
  display:         flex;
  flex-wrap:       wrap;
  gap:             6px;
  justify-content: center;
  margin-top:      4px;
}
.cb-chip {
  background:    rgba(168,232,50,0.07);
  border:        1px solid rgba(168,232,50,0.2);
  color:         #a8e832;
  padding:       5px 13px;
  border-radius: 999px;
  font-size:     0.74rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.2s;
  font-family:   var(--cb-font);
}
.cb-chip:hover {
  background: rgba(168,232,50,0.14);
  border-color: rgba(168,232,50,0.45);
  transform:  translateY(-1px);
}

/* Date divider */
.cb-date-divider {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      8px 0;
  font-size:   0.68rem;
  color:       var(--muted, #888);
  opacity:     0.6;
}
.cb-date-divider::before,
.cb-date-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: rgba(255,255,255,0.07);
}
[data-theme="light"] .cb-date-divider::before,
[data-theme="light"] .cb-date-divider::after { background: rgba(0,0,0,0.08); }

/* Message wrapper */
.cb-msg {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  max-width:      85%;
  animation:      cb-msg-in 0.28s cubic-bezier(0.34,1.2,0.64,1);
}
.cb-msg.bot  { align-self: flex-start; align-items: flex-start; }
.cb-msg.user { align-self: flex-end;   align-items: flex-end;   }

@keyframes cb-msg-in {
  from { opacity:0; transform: translateY(10px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)    scale(1);    }
}

.cb-msg-row { display: flex; align-items: flex-end; gap: 8px; }
.cb-msg.user .cb-msg-row { flex-direction: row-reverse; }

/* Mini avatar beside bot bubble */
.cb-msg-avatar {
  width:           28px;
  height:          28px;
  border-radius:   8px;
  background:      linear-gradient(145deg, #16a34a 0%, #ea7c1a 60%, #f97316 100%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  flex-shrink:     0;
  margin-bottom:   2px;
}

/* Bubbles */
.cb-msg-bubble {
  padding:  11px 14px;
  font-size: 0.875rem;
  line-height: 1.68;
  position: relative;
  word-break: break-word;
}
.cb-msg.bot .cb-msg-bubble {
  background:    rgba(255,255,255,0.055);
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 4px 16px 16px 16px;
  color:         var(--text, #f0eee8);
}
[data-theme="light"] .cb-msg.bot .cb-msg-bubble {
  background:    rgba(0,0,0,0.04);
  border-color:  rgba(0,0,0,0.08);
  color:         #0f172a;
}
.cb-msg.user .cb-msg-bubble {
  background:    linear-gradient(135deg, var(--accent2, #F56D43) 0%, #d94f2e 100%);
  border:        none;
  border-radius: 16px 4px 16px 16px;
  color:         #fff;
}

/* Copy button (appears on hover) */
.cb-copy-btn {
  position:        absolute;
  top:             6px;
  right:           6px;
  width:           22px;
  height:          22px;
  border:          none;
  background:      rgba(255,255,255,0.1);
  border-radius:   5px;
  color:           rgba(255,255,255,0.5);
  font-size:       0.65rem;
  cursor:          pointer;
  display:         none;
  align-items:     center;
  justify-content: center;
  transition:      all 0.2s;
}
.cb-msg-bubble:hover .cb-copy-btn { display: flex; }
.cb-copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.cb-copy-btn.copied { color: #a8e832; }

/* Timestamp */
.cb-msg-time {
  font-size:   0.64rem;
  color:       rgba(255,255,255,0.22);
  padding:     0 2px;
  user-select: none;
}
[data-theme="light"] .cb-msg-time { color: rgba(0,0,0,0.28); }

/* Typing indicator */
.cb-typing {
  display:     flex;
  align-items: center;
  gap:         8px;
  align-self:  flex-start;
  animation:   cb-msg-in 0.25s ease;
}
.cb-typing-dots {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    rgba(255,255,255,0.055);
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 4px 16px 16px 16px;
  padding:       12px 16px;
}
[data-theme="light"] .cb-typing-dots {
  background:   rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.cb-typing-dots span {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--muted, #888);
  animation:     cb-bounce 1.4s ease-in-out infinite;
}
.cb-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.cb-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cb-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.45; }
  40%           { transform: translateY(-6px); opacity: 1;    }
}

/* ── Input Area ── */
.cb-input-area {
  padding:       12px 18px 14px;
  border-top:    1px solid rgba(255,255,255,0.06);
  background:    rgba(255,255,255,0.015);
  flex-shrink:   0;
}
[data-theme="light"] .cb-input-area {
  border-top-color: rgba(0,0,0,0.07);
  background:       rgba(0,0,0,0.01);
}

.cb-input-row {
  display:       flex;
  align-items:   flex-end;
  gap:           10px;
  background:    rgba(255,255,255,0.055);
  border:        1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding:       8px 10px 8px 14px;
  transition:    border-color 0.2s, background 0.2s;
}
.cb-input-row:focus-within {
  border-color: rgba(168,232,50,0.38);
  background:   rgba(255,255,255,0.07);
}
[data-theme="light"] .cb-input-row {
  background:   rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .cb-input-row:focus-within {
  border-color: rgba(168,232,50,0.5);
  background:   rgba(255,255,255,0.85);
}

#fl-chat-input {
  flex:        1;
  background:  none;
  border:      none;
  outline:     none;
  color:       var(--text, #f0eee8);
  font-family: var(--cb-font);
  font-size:   0.875rem;
  line-height: 1.55;
  resize:      none;
  max-height:  100px;
  padding:     4px 0;
}
[data-theme="light"] #fl-chat-input { color: #0f172a; }
#fl-chat-input::placeholder { color: var(--muted, #888); opacity: 0.7; }

/* ── Mode Switcher Dropdown ── */
.cb-mode-select {
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color:         var(--text, #f0eee8);
  font-family:   var(--cb-font);
  font-size:     0.72rem;
  font-weight:   500;
  padding:       0 10px;
  height:        34px;
  cursor:        pointer;
  outline:       none;
  flex-shrink:   0;
  transition:    border-color 0.2s, background 0.2s;
  appearance:    none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.cb-mode-select:hover  { border-color: rgba(168,232,50,0.3); background-color: rgba(255,255,255,0.09); }
.cb-mode-select:focus  { border-color: rgba(168,232,50,0.4); }
.cb-mode-select option { background: #0f1117; color: #f0eee8; }

[data-theme="light"] .cb-mode-select {
  background-color: rgba(0,0,0,0.05);
  border-color:     rgba(0,0,0,0.12);
  color:            #0f172a;
}
[data-theme="light"] .cb-mode-select option { background: #fff; color: #0f172a; }

#fl-send-btn {
  width:         34px;
  height:        34px;
  border-radius: 10px;
  border:        none;
  background:    var(--accent2, #F56D43);
  color:         #fff;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.95rem;
  flex-shrink:   0;
  transition:    transform 0.2s, opacity 0.2s, box-shadow 0.2s;
  box-shadow:    0 2px 10px rgba(245,109,67,0.35);
}
#fl-send-btn:hover {
  transform:  scale(1.1);
  box-shadow: 0 4px 16px rgba(245,109,67,0.5);
}
#fl-send-btn:disabled {
  opacity:   0.4;
  cursor:    not-allowed;
  transform: none;
  box-shadow: none;
}

.cb-footer-note {
  text-align:  center;
  font-size:   0.66rem;
  color:       rgba(255,255,255,0.18);
  margin-top:  9px;
  user-select: none;
}
[data-theme="light"] .cb-footer-note { color: rgba(0,0,0,0.22); }
.cb-footer-note a { color: inherit; text-decoration: underline; }
.cb-footer-note a:hover { color: #a8e832; }
.cb-footer-note strong { font-weight: 600; }

/* ── Animations ── */
@keyframes cb-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cb-msg { max-width: 92%; }
}

@media (max-width: 480px) {
  /* On very small screens: panel fills width, anchored at bottom */
  #fl-chatbox {
    border-radius: 20px 20px 0 0;
    max-width: 100vw;
    max-height: calc(100vh - 60px);
    transform: scale(0.98) translateY(8px);
  }
  #fl-chatbox.open {
    transform: scale(1) translateY(0);
  }
  /* Hide resize handles on small screens — not practical */
  .cb-resize-handle { display: none; }
  #fl-robot-btn {
    width:     52px;
    height:    52px;
    font-size: 1.5rem;
  }
  #fl-chatbot-root {
    bottom: 64px;
    right:  16px;
    width:  52px;
    height: 52px;
  }
}