/* ── Reset & Base ─────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────── */
header {
  background: #1e293b;
  padding: 14px 24px;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

header h1 {
  font-size: 18px;
  font-weight: 600;
  color: #f8fafc;
}

header .subtitle {
  font-size: 13px;
  color: #94a3b8;
}

.badge {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-weight: 500;
}

.badge.connecting { background: #ca8a04; color: #fff; }
.badge.online     { background: #059669; color: #fff; }
.badge.offline    { background: #dc2626; color: #fff; }

/* ── Messages Area ───────────────────────────────────────── */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

/* ── Message Bubbles ─────────────────────────────────────── */
.msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.65;
  font-size: 14px;
  word-wrap: break-word;
  animation: fadeIn 0.2s ease-out;
}

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

.msg.user {
  align-self: flex-end;
  background: #3b82f6;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.bot {
  align-self: flex-start;
  background: #1e293b;
  border: 1px solid #334155;
  border-bottom-left-radius: 4px;
}

.msg.bot h2 { font-size: 15px; margin: 14px 0 6px; color: #60a5fa; }
.msg.bot h3 { font-size: 14px; margin: 12px 0 4px; color: #93c5fd; }
.msg.bot h4 { font-size: 13px; margin: 10px 0 4px; color: #bfdbfe; }
.msg.bot p  { margin: 6px 0; }

.msg.bot ul,
.msg.bot ol {
  margin: 6px 0 6px 20px;
}

.msg.bot li { margin: 3px 0; }

.msg.bot code {
  background: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

.msg.bot strong { color: #f1f5f9; }
.msg.bot em     { color: #cbd5e1; }

/* ── Citations ───────────────────────────────────────────── */
.citations {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #334155;
  font-size: 12px;
  color: #94a3b8;
}

.citations .label {
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.citation-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 8px 3px 0;
}

.citation-item a {
  color: #60a5fa;
  text-decoration: none;
}

.citation-item a:hover {
  text-decoration: underline;
}

.citation-item .score {
  color: #64748b;
  font-size: 11px;
}

/* ── Metadata ────────────────────────────────────────────── */
.meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.meta span {
  background: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Typing Indicator ────────────────────────────────────── */
.typing {
  align-self: flex-start;
  color: #94a3b8;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.2s ease-out;
}

.dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: blink 1.4s infinite both;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}

/* ── Input Area ──────────────────────────────────────────── */
#input-area {
  background: #1e293b;
  padding: 16px 24px;
  border-top: 1px solid #334155;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;
}

#question {
  flex: 1;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  max-height: 140px;
  transition: border-color 0.2s;
}

#question:focus {
  border-color: #3b82f6;
}

#question::placeholder {
  color: #64748b;
}

#send {
  background: #3b82f6;
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

#send:hover {
  background: #2563eb;
}

#send:disabled {
  background: #475569;
  cursor: not-allowed;
}

/* ── Typewriter Cursor ────────────────────────────────────── */
.cursor {
  display: inline-block;
  color: #60a5fa;
  animation: cursorBlink 0.7s step-end infinite;
  font-weight: 300;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typewriter-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Error Message ───────────────────────────────────────── */
.msg.error {
  align-self: flex-start;
  background: #7f1d1d;
  border: 1px solid #991b1b;
  color: #fecaca;
  border-bottom-left-radius: 4px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  header { padding: 12px 16px; }
  #messages { padding: 16px; }
  #input-area { padding: 12px 16px; }
  .msg { max-width: 92%; }
}