/* ── VOCEED AI Chat — Frontend Widget ───────────────────────────────────── */

/* CSS variables are output inline by PHP (class-frontend.php) for dynamic colours */
:root {
  --vc-primary:    #63e6be;
  --vc-secondary:  #3b82f6;
  --vc-bg-dark:    #0b1220;
  --vc-bg-light:   #ffffff;
  --vc-txt-dark:   #e5e7eb;
  --vc-txt-light:  #1f2937;
  --vc-card-dark:  #0f172a;
  --vc-card-light: #f8fafc;
  --vc-border:     rgba(148,163,184,.2);
  --vc-muted:      #94a3b8;
  --vc-radius:     12px;
  --vc-radius-lg:  16px;
  --vc-shadow:     0 20px 60px rgba(0,0,0,.5);
}

/* ── Launcher button ────────────────────────────────────────────────────── */
#vc-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vc-primary);
  color: #0b1220;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(99,230,190,.35);
  transition: transform .2s, box-shadow .2s;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#vc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(99,230,190,.5);
}
#vc-launcher.vc-pos-bottom-left { right: auto; left: 24px; }
#vc-launcher-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Chat window ────────────────────────────────────────────────────────── */
#vc-chat-window {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 99999;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  border-radius: var(--vc-radius-lg);
  overflow: hidden;
  box-shadow: var(--vc-shadow);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  transform-origin: bottom right;
  animation: vcSlideUp .25s cubic-bezier(.16,1,.3,1) both;
}
#vc-chat-window.vc-pos-bottom-left {
  right: auto;
  left: 24px;
  transform-origin: bottom left;
}
#vc-chat-window.vc-hidden { display: none; }

@keyframes vcSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Dark / Light themes ────────────────────────────────────────────────── */
.vc-theme-dark {
  --vc-chat-bg:       var(--vc-bg-dark);
  --vc-chat-card:     var(--vc-card-dark);
  --vc-chat-surface:  #1e293b;
  --vc-chat-txt:      var(--vc-txt-dark);
  --vc-chat-muted:    #94a3b8;
  --vc-chat-border:   rgba(148,163,184,.15);
  --vc-user-bubble:   var(--vc-primary);
  --vc-user-txt:      #0b1220;
  --vc-bot-bubble:    #1e293b;
  --vc-bot-txt:       var(--vc-txt-dark);
  --vc-input-bg:      #0f172a;
}
.vc-theme-light {
  --vc-chat-bg:       #f1f5f9;
  --vc-chat-card:     #ffffff;
  --vc-chat-surface:  #f8fafc;
  --vc-chat-txt:      var(--vc-txt-light);
  --vc-chat-muted:    #6b7280;
  --vc-chat-border:   rgba(0,0,0,.1);
  --vc-user-bubble:   var(--vc-primary);
  --vc-user-txt:      #0b1220;
  --vc-bot-bubble:    #ffffff;
  --vc-bot-txt:       var(--vc-txt-light);
  --vc-input-bg:      #ffffff;
}

/* Apply theme to window */
#vc-chat-window { background: var(--vc-chat-bg); color: var(--vc-chat-txt); }

/* ── Header ─────────────────────────────────────────────────────────────── */
#vc-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--vc-chat-card);
  border-bottom: 1px solid var(--vc-chat-border);
  flex-shrink: 0;
}
#vc-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--vc-chat-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vc-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vc-header-info { flex: 1; min-width: 0; }
.vc-header-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--vc-chat-txt);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vc-status-dot {
  width: 7px; height: 7px;
  background: var(--vc-primary);
  border-radius: 50%;
  display: inline-block;
  animation: vcPulse 2s infinite;
}
@keyframes vcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.vc-header-sub { font-size: 11px; color: var(--vc-chat-muted); margin-top: 1px; }

.vc-header-actions { display: flex; gap: 4px; }
.vc-header-btn {
  background: none;
  border: none;
  color: var(--vc-chat-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: color .15s, background .15s;
}
.vc-header-btn:hover { color: var(--vc-chat-txt); background: var(--vc-chat-surface); }

.vc-theme-toggle {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--vc-chat-border);
}

/* ── Category picker ────────────────────────────────────────────────────── */
#vc-category-screen {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vc-cat-label {
  font-size: 13px;
  color: var(--vc-chat-muted);
  text-align: center;
}
.vc-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.vc-cat-btn {
  background: var(--vc-chat-card);
  border: 1px solid var(--vc-chat-border);
  color: var(--vc-chat-txt);
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
  font-family: inherit;
}
.vc-cat-btn:hover {
  border-color: var(--vc-primary);
  background: rgba(99,230,190,.06);
  transform: translateY(-1px);
}
.vc-cat-btn.active {
  border-color: var(--vc-primary);
  background: rgba(99,230,190,.12);
  color: var(--vc-primary);
}

/* Starter questions */
.vc-starters { display: flex; flex-direction: column; gap: 6px; }
.vc-starter-btn {
  background: var(--vc-chat-surface);
  border: 1px solid var(--vc-chat-border);
  color: var(--vc-chat-txt);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s;
  font-family: inherit;
}
.vc-starter-btn:hover { border-color: var(--vc-primary); color: var(--vc-primary); }

/* ── Messages area ──────────────────────────────────────────────────────── */
#vc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
#vc-messages::-webkit-scrollbar { width: 4px; }
#vc-messages::-webkit-scrollbar-thumb { background: var(--vc-chat-border); border-radius: 4px; }

/* Message bubbles */
.vc-msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
  animation: vcFadeIn .2s ease both;
}
@keyframes vcFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.vc-msg--user {
  flex-direction: row-reverse;
}
.vc-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--vc-chat-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--vc-chat-muted);
}
.vc-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vc-msg-body { max-width: 78%; display: flex; flex-direction: column; gap: 4px; }
.vc-msg--user .vc-msg-body { align-items: flex-end; }

.vc-bubble {
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}
.vc-msg--bot  .vc-bubble { background: var(--vc-bot-bubble); color: var(--vc-bot-txt); border-bottom-left-radius: 4px; }
.vc-msg--user .vc-bubble { background: var(--vc-user-bubble); color: var(--vc-user-txt); border-bottom-right-radius: 4px; }

/* Markdown-like formatting inside bubbles */
.vc-bubble strong { font-weight: 600; }
.vc-bubble em { font-style: italic; }
.vc-bubble blockquote {
  border-left: 3px solid var(--vc-primary);
  margin: 8px 0 0;
  padding: 6px 10px;
  color: var(--vc-chat-muted);
  font-size: 12px;
  background: rgba(99,230,190,.05);
  border-radius: 0 6px 6px 0;
}
.vc-bubble ul, .vc-bubble ol { padding-left: 16px; margin: 6px 0; }
.vc-bubble li { margin: 2px 0; }
.vc-bubble p  { margin: 4px 0; }
.vc-bubble p:first-child { margin-top: 0; }
.vc-bubble p:last-child  { margin-bottom: 0; }
.vc-bubble a  { color: var(--vc-primary); text-decoration: underline; }
.vc-msg--user .vc-bubble a { color: #0b1220; }

/* Disclosure tag (📚 ⚠️) */
.vc-disclosure {
  font-size: 11px;
  color: var(--vc-chat-muted);
  padding-left: 2px;
  margin-top: 2px;
}
.vc-msg-time { font-size: 10px; color: var(--vc-chat-muted); }

/* ── Typing indicator ───────────────────────────────────────────────────── */
#vc-typing {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
}
#vc-typing.show { display: flex; }
.vc-typing-dots {
  background: var(--vc-bot-bubble);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.vc-dot {
  width: 6px; height: 6px;
  background: var(--vc-chat-muted);
  border-radius: 50%;
  animation: vcBounce 1.2s infinite;
}
.vc-dot:nth-child(2) { animation-delay: .2s; }
.vc-dot:nth-child(3) { animation-delay: .4s; }
@keyframes vcBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* ── Related links ──────────────────────────────────────────────────────── */
.vc-related-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.vc-related-label { font-size: 11px; color: var(--vc-chat-muted); }
.vc-related-link {
  font-size: 12px;
  color: var(--vc-primary);
  text-decoration: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vc-related-link:hover { text-decoration: underline; }

/* ── CTA button ─────────────────────────────────────────────────────────── */
.vc-cta-row { margin-top: 8px; }
.vc-cta-btn {
  display: inline-block;
  background: var(--vc-secondary);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.vc-cta-btn:hover { background: #2563eb; color: #fff; }

/* ── Input area ─────────────────────────────────────────────────────────── */
#vc-input-area {
  padding: 12px 14px;
  background: var(--vc-chat-card);
  border-top: 1px solid var(--vc-chat-border);
  flex-shrink: 0;
}
.vc-category-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--vc-chat-muted);
}
.vc-cat-chip {
  background: rgba(99,230,190,.12);
  color: var(--vc-primary);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 500;
}
.vc-change-cat {
  background: none;
  border: none;
  color: var(--vc-chat-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
  margin-left: auto;
}
.vc-change-cat:hover { color: var(--vc-chat-txt); }

.vc-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
#vc-input {
  flex: 1;
  background: var(--vc-input-bg);
  border: 1px solid var(--vc-chat-border);
  color: var(--vc-chat-txt);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  resize: none;
  min-height: 38px;
  max-height: 100px;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color .15s;
  outline: none;
}
#vc-input::placeholder { color: var(--vc-chat-muted); }
#vc-input:focus { border-color: var(--vc-primary); }

#vc-send {
  background: var(--vc-primary);
  color: #0b1220;
  border: none;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
#vc-send:hover  { background: #4dd9a7; transform: scale(1.05); }
#vc-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
#vc-send svg { width: 16px; height: 16px; }

/* ── Error message ──────────────────────────────────────────────────────── */
.vc-error-bubble {
  background: rgba(251,113,133,.1);
  border: 1px solid rgba(251,113,133,.3);
  color: #fb7185;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
}

/* ── Mobile responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #vc-chat-window {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 90vh;
    max-height: 90vh;
    border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0;
    transform-origin: bottom center;
  }
  #vc-launcher { bottom: 16px; right: 16px; }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
.vc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}