/* ============================================
   NIRVAG — Chat Widget Styles
   Works with Tailwind CSS variable system
   ============================================ */

/* ── FAB ── */
.chat-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%;
  background: hsl(240 5.9% 10%); color: #fff; border: none;
  font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.dark .chat-fab { background: hsl(0 0% 98%); color: hsl(240 5.9% 10%); }
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); }
.chat-fab.active { transform: rotate(0deg); font-size: 1.2rem; }

/* ── Widget Container ── */
.chat-widget {
  position: fixed; bottom: 100px; right: 28px; z-index: 9999;
  width: 400px; height: 580px;
  background: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border, 240 5.9% 90%));
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  display: none; flex-direction: column;
  overflow: hidden;
  animation: chatSlideUp 0.3s ease;
}
.chat-widget.open { display: flex; }

@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Chat Header ── */
.chat-header {
  padding: 16px 20px; display: flex; align-items: center; gap: 12px;
  background: hsl(240 5.9% 10%); color: #fff; flex-shrink: 0;
}
.dark .chat-header { background: hsl(0 0% 98%); color: hsl(240 5.9% 10%); }
.chat-header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 0.9rem; overflow: hidden;
}
.dark .chat-header-avatar { background: rgba(0,0,0,0.1); }
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-header-info { flex: 1; }
.chat-header-name { font-weight: 700; font-size: 0.95rem; }
.chat-header-status { font-size: 0.72rem; opacity: 0.7; }

/* ── Pre-chat Form ── */
.chat-prechat {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 24px;
}
.chat-prechat h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; color: hsl(var(--foreground, 240 10% 3.9%)); }
.chat-prechat p { font-size: 0.85rem; color: hsl(var(--muted-foreground, 240 3.8% 46.1%)); margin-bottom: 24px; }

/* ── Form Inputs ── */
.form-group { margin-bottom: 16px; }
.form-label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 6px; color: hsl(var(--foreground, 240 10% 3.9%)); }
.form-input {
  width: 100%; padding: 10px 14px; font-size: 0.875rem;
  border: 1px solid hsl(var(--border, 240 5.9% 90%));
  border-radius: 8px; background: hsl(var(--background, 0 0% 100%));
  color: hsl(var(--foreground, 240 10% 3.9%));
  outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
.form-input:focus { border-color: hsl(var(--ring, 240 10% 3.9%)); box-shadow: 0 0 0 2px hsl(var(--ring, 240 10% 3.9%) / 0.1); }

/* ── Messages ── */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: hsl(var(--muted, 240 4.8% 95.9%) / 0.3);
}

.msg { display: flex; flex-direction: column; max-width: 85%; animation: msgFade 0.3s ease; }
.msg.user { align-self: flex-end; }
.msg.bot { align-self: flex-start; }

.msg-bubble {
  padding: 10px 14px; border-radius: 14px; font-size: 0.875rem; line-height: 1.5;
  word-wrap: break-word;
}
.msg.user .msg-bubble { background: hsl(240 5.9% 10%); color: #fff; border-bottom-right-radius: 4px; }
.dark .msg.user .msg-bubble { background: hsl(0 0% 98%); color: hsl(240 5.9% 10%); }
.msg.bot .msg-bubble {
  background: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border, 240 5.9% 90%));
  color: hsl(var(--foreground, 240 10% 3.9%));
  border-bottom-left-radius: 4px;
}

.msg-time { font-size: 0.68rem; color: hsl(var(--muted-foreground, 240 3.8% 46.1%)); margin-top: 4px; padding: 0 4px; }
.msg.user .msg-time { text-align: right; }

@keyframes msgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Typing Indicator ── */
.typing-indicator { display: flex; align-items: center; gap: 4px; padding: 12px 16px; }
.typing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: hsl(var(--muted-foreground, 240 3.8% 46.1%));
  animation: typingBounce 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ── Ticket Card ── */
.ticket-card-widget {
  background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 240 5.9% 90%));
  border-radius: 10px; padding: 12px 14px; margin-top: 8px;
}
.ticket-card-widget .tcw-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ticket-card-widget .tcw-title { font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
.ticket-card-widget .tcw-row { display: flex; justify-content: space-between; font-size: 0.78rem; padding: 3px 0; }
.ticket-card-widget .tcw-label { color: hsl(var(--muted-foreground, 240 3.8% 46.1%)); }
.ticket-card-widget .tcw-value { font-weight: 600; }

/* ── Input ── */
.chat-input-area {
  padding: 12px 16px; border-top: 1px solid hsl(var(--border, 240 5.9% 90%));
  display: flex; gap: 8px; align-items: center;
  background: hsl(var(--card, 0 0% 100%)); flex-shrink: 0;
}
.chat-input-area input {
  flex: 1; border: 1px solid hsl(var(--border, 240 5.9% 90%));
  border-radius: 8px; padding: 10px 14px; font-size: 0.875rem;
  background: hsl(var(--background, 0 0% 100%));
  color: hsl(var(--foreground, 240 10% 3.9%)); outline: none;
  font-family: inherit;
}
.chat-input-area input:focus { border-color: hsl(var(--ring, 240 10% 3.9%)); }
.chat-send {
  width: 40px; height: 40px; border-radius: 8px;
  background: hsl(240 5.9% 10%); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
}
.dark .chat-send { background: hsl(0 0% 98%); color: hsl(240 5.9% 10%); }
.chat-send:hover { opacity: 0.9; }
.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Start Chat Button ── */
.btn { cursor: pointer; font-family: inherit; }
.btn-primary {
  background: hsl(240 5.9% 10%); color: hsl(0 0% 98%);
  border: none; padding: 10px 16px; border-radius: 8px;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  transition: background 0.2s;
}
.dark .btn-primary { background: hsl(0 0% 98%); color: hsl(240 5.9% 10%); }
.btn-primary:hover { opacity: 0.9; }
.w-full { width: 100%; }

/* ── Badge helpers ── */
.badge {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 600;
}
.badge-primary { background: hsl(240 5.9% 10% / 0.1); color: hsl(240 5.9% 10%); }
.priority-critical, .priority-high { color: #dc2626; }
.priority-medium { color: #f59e0b; }
.priority-low { color: #22c55e; }
.status-open { background: #f3f4f6; color: #374151; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .chat-widget { width: calc(100vw - 24px); right: 12px; bottom: 80px; height: 70vh; }
  .chat-fab { bottom: 16px; right: 16px; }
}