/* ============================================================
   SHIELD Chatbot — chat.css
   Dark cybersecurity aesthetic · Mobile-first
   ============================================================ */

:root {
  --bg:         #07080d;
  --surface:    #0d1117;
  --surface2:   #111820;
  --border:     #1a2535;
  --border2:    #243040;
  --accent:     #00d4ff;
  --accent2:    #0070ff;
  --success:    #00e676;
  --warning:    #ffb300;
  --danger:     #ff4444;
  --text:       #dce8f0;
  --text2:      #8da0b0;
  --user-bg:    #0b1325;
  --user-bdr:   #1c2e50;
  --bot-bg:     #0b1a0e;
  --bot-bdr:    #1a3a1a;
  --mono:       'JetBrains Mono', 'Courier New', monospace;
  --sans:       'Syne', system-ui, sans-serif;
  --radius:     8px;
  --shadow:     0 4px 24px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}
.header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: .3;
}

.logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.logo-mark {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px; font-weight: 800;
  color: #000;
}
.logo strong { color: var(--accent); }
.logo-text { display: none; }
@media (min-width: 480px) { .logo-text { display: block; } }

.status-pill {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .62rem;
  color: var(--text2);
  margin-left: auto;
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 5px var(--success);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-family: var(--mono); font-size: .65rem;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
  transition: all .2s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-cta {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #000; font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: .72rem; font-family: var(--mono);
  text-decoration: none; letter-spacing: .06em;
  transition: opacity .2s;
  white-space: nowrap;
}
.btn-cta:hover { opacity: .85; }

/* ── Chip bar ─────────────────────────────────────────────── */
.chip-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 16px;
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
}
.chip-bar::-webkit-scrollbar { display: none; }

.chip {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: 4px 12px;
  border-radius: 20px;
  font-family: var(--mono); font-size: .67rem;
  cursor: pointer; white-space: nowrap;
  transition: all .18s;
  user-select: none;
}
.chip:hover, .chip:focus {
  border-color: var(--accent); color: var(--accent);
  background: rgba(0,212,255,.06);
}
.chip.sm { font-size: .64rem; padding: 3px 10px; }

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

/* Welcome card */
.welcome-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 28px 24px;
  max-width: 520px;
  align-self: center;
  text-align: center;
  margin-top: 16px;
}
.wc-icon { font-size: 2.4rem; margin-bottom: 10px; }
.welcome-card h2 { font-size: 1.15rem; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.welcome-card p { font-size: .82rem; color: var(--text2); line-height: 1.7; margin-bottom: 16px; }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Message rows */
.msg { display: flex; gap: 10px; animation: fadeUp .22s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg.user { flex-direction: row-reverse; align-self: flex-end; max-width: 85%; }
.msg.bot  { align-self: flex-start; max-width: 88%; }

.avatar {
  width: 28px; height: 28px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  flex-shrink: 0; margin-top: 2px;
}
.msg.user .avatar { background: #0d1535; border: 1px solid #2a3a70; color: #8899ee; }
.msg.bot  .avatar { background: #0b2010; border: 1px solid var(--success); color: var(--success); }

.msg-body { display: flex; flex-direction: column; gap: 2px; }

.intent-tag {
  font-family: var(--mono); font-size: .58rem;
  padding: 2px 7px; border-radius: 3px;
  background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.2);
  color: var(--accent); text-transform: uppercase; letter-spacing: .1em;
  align-self: flex-start; margin-bottom: 2px;
}

.bubble {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: .86rem; line-height: 1.62;
}
.msg.user .bubble {
  background: var(--user-bg); border: 1px solid var(--user-bdr);
  border-bottom-right-radius: 2px; color: #b8d0f0;
}
.msg.bot .bubble {
  background: var(--bot-bg); border: 1px solid var(--bot-bdr);
  border-bottom-left-radius: 2px; color: var(--text);
}

/* Bubble content formatting */
.bubble strong { color: var(--accent); font-weight: 600; }
.bubble em { color: var(--text2); font-style: italic; }
.bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.bubble a:hover { opacity: .8; }
.bubble ul { padding-left: 1.2em; margin: 6px 0; }
.bubble li { margin: 3px 0; }
.bubble br { line-height: 1.2; }

.bubble .ans-table {
  width: 100%; border-collapse: collapse; font-size: .78rem; margin: 8px 0;
}
.bubble .ans-table th,
.bubble .ans-table td {
  border: 1px solid var(--border2); padding: 5px 10px; text-align: left;
}
.bubble .ans-table th { background: rgba(0,212,255,.06); color: var(--accent); }

/* Feedback row */
.feedback-row {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
}
.ts { font-family: var(--mono); font-size: .6rem; color: var(--text2); }
.fb-btn {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; opacity: .4; transition: opacity .2s;
  padding: 0 2px;
}
.fb-btn:hover { opacity: 1; }
.fb-btn.active { opacity: 1; }

/* Typing indicator */
.typing-bubble {
  background: var(--bot-bg); border: 1px solid var(--bot-bdr);
  border-bottom-left-radius: 2px;
  padding: 12px 16px; border-radius: var(--radius);
  display: flex; gap: 4px; align-items: center;
}
.td { width: 5px; height: 5px; border-radius: 50%; background: var(--success); opacity:.35; animation: tb 1.2s infinite; }
.td:nth-child(2){animation-delay:.2s} .td:nth-child(3){animation-delay:.4s}
@keyframes tb { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-5px);opacity:1} }

/* ── Input area ───────────────────────────────────────────── */
.input-area {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 12px 16px; flex-shrink: 0;
}
.input-row { display: flex; gap: 8px; align-items: flex-end; max-width: 860px; margin: 0 auto; }
.input-wrap { flex: 1; position: relative; }

textarea {
  width: 100%;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--sans); font-size: .86rem;
  padding: 10px 38px 10px 14px;
  resize: none; outline: none;
  min-height: 44px; max-height: 130px;
  overflow-y: auto; line-height: 1.5;
  transition: border-color .2s;
}
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--text2); }
textarea::-webkit-scrollbar { width: 3px; }

.char-count {
  position: absolute; right: 10px; bottom: 8px;
  font-family: var(--mono); font-size: .58rem;
  color: var(--text2); pointer-events: none;
}
.char-count.warn { color: var(--warning); }

.send-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border: none; border-radius: var(--radius);
  color: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.send-btn svg { width: 18px; height: 18px; }
.send-btn:hover { transform: scale(1.04); box-shadow: 0 0 16px rgba(0,212,255,.3); }
.send-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.footer-note {
  text-align: center;
  font-family: var(--mono); font-size: .6rem;
  color: var(--text2); margin-top: 6px;
}
.footer-note a { color: var(--accent); text-decoration: none; }
.footer-note a:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────── */
@media (min-width: 640px) {
  .header { padding: 0 28px; }
  .chip-bar { padding: 8px 24px; }
  .messages { padding: 20px 24px; }
  .input-area { padding: 14px 24px; }
  html { font-size: 16px; }
}

/* Mono utility */
.mono { font-family: var(--mono); }