/* ───────────────────────────────────────────────────────────────────────────
   Antah Coach UI — v2
   Refined dark theme with WYSA-style quick-reply buttons, mode selector,
   farewell card, and smooth micro-interactions.
   Font: 'DM Sans' (loaded via Google Fonts link in index.html)
─────────────────────────────────────────────────────────────────────────── */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --bg:           #0a0f1e;
  --surface:      #111827;
  --surface-2:    #1a2236;
  --border:       rgba(255,255,255,0.10);
  --border-focus: rgba(99,179,237,0.50);

  --user-bubble:  #1e3a5f;
  --ai-bubble:    #111827;

  --text:         #e2e8f4;
  --text-muted:   rgba(226,232,244,0.55);
  --text-dim:     rgba(226,232,244,0.35);

  --accent:       #38bdf8;   /* sky-400 */
  --accent-dark:  #0ea5e9;
  --teal:         #0d9488;
  --teal-hover:   #0f766e;

  --sugg-bg:      rgba(14,165,233,0.10);
  --sugg-border:  rgba(14,165,233,0.28);
  --sugg-hover:   rgba(14,165,233,0.22);

  --mode-bg:      rgba(255,255,255,0.04);
  --mode-hover:   rgba(255,255,255,0.08);
  --mode-border:  rgba(255,255,255,0.12);

  --radius-lg:    18px;
  --radius-md:    14px;
  --radius-sm:    10px;

  --font: 'DM Sans', 'Segoe UI', system-ui, Arial, sans-serif;
}

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

html { height: 100%; }

body {
  font-family: var(--font);
  font-size:   15px;
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  /* Subtle grid texture */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(56,189,248,0.06) 0%, transparent 70%);
}

/* ── Outer wrapper ───────────────────────────────────────────────────────── */
.wrap {
  max-width:      820px;
  width:          100%;
  margin:         0 auto;
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  padding:        16px 16px 12px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         12px 16px;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   var(--radius-lg);
  flex-shrink:     0;
}

.brand {
  font-weight:    700;
  font-size:      15px;
  letter-spacing: .3px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.brand::before {
  content:       '✦';
  color:         var(--accent);
  font-size:     11px;
}

.status {
  font-size:  12px;
  color:      var(--text-muted);
  transition: color .3s;
}
.status-thinking { color: var(--accent); }
.status-error    { color: #f87171; }
.status-complete { color: #34d399; }

/* ── Chat area ───────────────────────────────────────────────────────────── */
.chat {
  flex:          1;
  margin:        14px 0;
  padding:       16px 12px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y:    auto;
  display:       flex;
  flex-direction: column;
  gap:           2px;
  scroll-behavior: smooth;
  /* Subtle inner glow at top */
  box-shadow: inset 0 8px 24px rgba(0,0,0,0.18);
}

/* Thin custom scrollbar */
.chat::-webkit-scrollbar       { width: 4px; }
.chat::-webkit-scrollbar-track { background: transparent; }
.chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }

/* ── Chat bubbles ─────────────────────────────────────────────────────────── */
.bubble {
  max-width:   78%;
  padding:     11px 15px;
  border-radius: 18px;
  line-height: 1.5;
  white-space: pre-wrap;
  font-size:   14.5px;
  animation:   popIn .22s cubic-bezier(.34,1.36,.64,1) both;
  margin:      4px 0;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.94) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.bubble.user {
  margin-left:      auto;
  background:       var(--user-bubble);
  border-bottom-right-radius: 5px;
  color:            var(--text);
}

.bubble.ai {
  margin-right:     auto;
  background:       var(--ai-bubble);
  border:           1px solid var(--border);
  border-bottom-left-radius: 5px;
  color:            var(--text);
}

.bubble.error {
  border-color: rgba(248,113,113,.4);
  color:        #fca5a5;
}

/* ── Suggested reply buttons (WYSA-style chips) ──────────────────────────── */
.suggestions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin:     8px 0 4px 2px;
  animation:  fadeUp .28s ease both;
}

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

.suggestion-btn {
  padding:       8px 15px;
  border-radius: 99px;
  border:        1px solid var(--sugg-border);
  background:    var(--sugg-bg);
  color:         var(--accent);
  font-family:   var(--font);
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background .18s, border-color .18s, transform .15s;
  line-height:   1.3;
  text-align:    left;
}
.suggestion-btn:hover {
  background:  var(--sugg-hover);
  border-color: var(--accent);
  transform:   translateY(-1px);
}
.suggestion-btn:active {
  transform: translateY(0);
}

/* ── Mode selector (coaching vs consulting) ──────────────────────────────── */
.mode-selector {
  margin:        10px 0 6px;
  animation:     fadeUp .3s ease both;
}

.mode-label {
  font-size:     13px;
  color:         var(--text-muted);
  margin-bottom: 10px;
  padding-left:  2px;
}

.mode-buttons {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

.mode-btn {
  flex:          1;
  min-width:     180px;
  padding:       14px 16px;
  border-radius: var(--radius-md);
  border:        1px solid var(--mode-border);
  background:    var(--mode-bg);
  color:         var(--text);
  font-family:   var(--font);
  cursor:        pointer;
  text-align:    left;
  display:       flex;
  flex-direction: column;
  gap:           4px;
  transition:    background .18s, border-color .2s, transform .15s;
}
.mode-btn:hover {
  background:   var(--mode-hover);
  border-color: var(--accent);
  transform:    translateY(-2px);
}

.mode-icon  { font-size: 22px; margin-bottom: 2px; }
.mode-title { font-size: 14px; font-weight: 600; }
.mode-desc  { font-size: 12px; color: var(--text-muted); }

/* ── Farewell / session summary card ─────────────────────────────────────── */
.farewell-card {
  border:        1px solid rgba(52,211,153,0.28);
  background:    rgba(52,211,153,0.06);
  border-radius: var(--radius-md);
  padding:       20px;
  margin:        12px 0 6px;
  text-align:    center;
  animation:     popIn .3s cubic-bezier(.34,1.26,.64,1) both;
}

.farewell-icon {
  font-size:     32px;
  margin-bottom: 10px;
}

.farewell-body {
  font-size:     14.5px;
  line-height:   1.6;
  color:         var(--text);
  white-space:   pre-wrap;
  margin-bottom: 16px;
}

.farewell-reset {
  padding:       9px 20px;
  border-radius: 99px;
  border:        1px solid rgba(52,211,153,0.35);
  background:    rgba(52,211,153,0.12);
  color:         #34d399;
  font-family:   var(--font);
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .18s;
}
.farewell-reset:hover {
  background: rgba(52,211,153,0.22);
}

/* ── Composer (input row) ─────────────────────────────────────────────────── */
.composer {
  display:    flex;
  gap:        10px;
  flex-shrink: 0;
}

#msg {
  flex:          1;
  padding:       13px 16px;
  border-radius: var(--radius-md);
  border:        1px solid var(--border);
  background:    var(--surface-2);
  color:         var(--text);
  font-family:   var(--font);
  font-size:     14.5px;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
}
#msg::placeholder { color: var(--text-dim); }
#msg:focus {
  border-color: var(--border-focus);
  box-shadow:   0 0 0 3px rgba(99,179,237,0.08);
}

#send {
  padding:       12px 20px;
  border-radius: var(--radius-md);
  border:        none;
  background:    var(--teal);
  color:         #fff;
  font-family:   var(--font);
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  transition:    background .18s, transform .15s;
  white-space:   nowrap;
}
#send:hover:not(:disabled) {
  background: var(--teal-hover);
  transform:  translateY(-1px);
}
#send:active:not(:disabled) { transform: translateY(0); }
#send:disabled { opacity: .42; cursor: not-allowed; }

/* ── Hint bar ─────────────────────────────────────────────────────────────── */
.hint {
  margin-top: 10px;
  font-size:  12px;
  color:      var(--text-muted);
  display:    none;
}
code {
  background:    rgba(255,255,255,.08);
  padding:       2px 7px;
  border-radius: 6px;
  font-size:     11.5px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .wrap    { padding: 10px 10px 8px; }
  .bubble  { max-width: 90%; font-size: 14px; }
  .mode-buttons { flex-direction: column; }
  .mode-btn { min-width: 0; }
  #send    { padding: 12px 14px; font-size: 13px; }
}