/* ============================================================
   Fly GACA — Captain Adel chat (chat.html)
   Load order: tokens.css -> base.css -> chat.css
   ============================================================ */

.chat-main { padding-block: var(--space-6) var(--space-10); }

.chat {
  display: flex; flex-direction: column;
  height: calc(100dvh - 220px);
  min-height: 520px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* --- Header (co-brand) --- */
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border);
  background: var(--falcon-deep);
}
.chat-id { display: flex; align-items: center; gap: var(--space-3); }
.chat-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none;
  box-shadow: 0 0 22px rgba(74,156,184,0.20); }
.chat-id-text { display: flex; flex-direction: column; }
.chat-name { font-weight: var(--fw-bold); font-size: 1.05rem; }
.chat-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--text-dim);
}
.on-duty { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-cobrand .wordmark { font-size: 1.05rem; }

/* --- Conversation log --- */
.chat-log {
  flex: 1; overflow-y: auto;
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}

/* Welcome state */
.chat-welcome {
  margin: auto; text-align: center; max-width: 44ch;
  padding-block: var(--space-6);
}
.welcome-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  box-shadow: 0 0 34px rgba(74,156,184,0.22);
  margin-block-end: var(--space-4);
}
.chat-welcome h1 { font-size: 1.5rem; margin-block-end: var(--space-3); }
.chat-welcome p { color: var(--text-muted); font-size: var(--fs-base); }
.chat-suggest {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
  margin-block-start: var(--space-5);
}
.chat-suggest button {
  font-size: var(--fs-sm);
  padding: 0.5rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-pill);
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chat-suggest button:hover { border-color: var(--teal-bright); color: var(--text); }

/* --- Messages --- */
.msg { display: flex; gap: var(--space-3); max-width: 88%; }
.msg.user { margin-inline-start: auto; flex-direction: row-reverse; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.msg-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-base); line-height: var(--lh-body);
}
.msg.adel .msg-bubble {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-start-start-radius: var(--radius-sm);
}
.msg.user .msg-bubble {
  background: var(--falcon-teal);
  color: #fff;
  border-start-end-radius: var(--radius-sm);
}
.msg-bubble p { margin-block: 0; }
.msg-bubble p + p { margin-block-start: var(--space-3); }
.msg-bubble strong { font-weight: var(--fw-bold); }
.msg-bubble ul { list-style: disc; padding-inline-start: 1.3em; margin-block: var(--space-2) 0; }
.msg-bubble li { margin-block: 0.15rem; }
.msg-bubble a { color: var(--accent-bright); text-decoration: underline; }
.msg.user .msg-bubble a { color: #fff; }

/* Sources / citations under an answer */
.msg-sources {
  margin-block-start: var(--space-3); padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.msg-sources .src-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.msg-sources a { font-size: var(--fs-sm); color: var(--link); }

/* Typing indicator */
.msg.typing .msg-bubble { display: flex; gap: 5px; padding: 0.9rem 1rem; }
.msg.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim);
  animation: chat-bounce 1.2s infinite ease-in-out;
}
.msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.msg.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* --- Input --- */
.chat-input {
  border-block-start: 1px solid var(--border);
  background: var(--falcon-deep);
  padding: var(--space-4) var(--space-5);
}
.chat-form { display: flex; gap: var(--space-3); align-items: flex-end; }
.chat-form textarea {
  flex: 1; resize: none;
  background: var(--falcon-night);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 0.7rem 1rem;
  color: var(--text); font-family: var(--font-sans);
  line-height: 1.5; max-height: 160px;
}
.chat-form textarea::placeholder { color: var(--text-dim); }
.chat-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.chat-send {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  border: none; border-radius: 50%; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.chat-send:hover { background: var(--brand-hover); }
.chat-send:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-send svg { width: 19px; height: 19px; }
.chat-disclaimer {
  margin-block-start: var(--space-3);
  font-size: var(--fs-xs); color: var(--text-dim); text-align: center;
}

@media (max-width: 600px) {
  .chat { height: calc(100dvh - 188px); }
  .chat-cobrand { display: none; }
  .msg { max-width: 96%; }
}

/* --- Follow-up prompts re-surfaced under each answer --- */
.chat-followups {
  margin-block: var(--space-4) var(--space-2);
  padding-inline-start: 44px;
}
.chat-followups .cf-label {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-block-end: var(--space-2);
}
.chat-followups .chat-suggest {
  justify-content: flex-start;
  margin-block-start: 0;
}
@media (max-width: 600px) {
  .chat-followups { padding-inline-start: 0; }
}