/* AI Conversation Chat Styles
 * Used by AI::ConversationsController#show (Conversational AI Chat feature).
 * Class schema follows the Component Library chat primitives:
 *   .chat-main  .chat-thread  .msg.ai/.msg.me  .chat-hint
 *
 * Note: the P2 escape banner (`.escape-banner` / top-of-chat `.switch-link`)
 * was retired for the Web UI in #819 — the swap-to-guided-questions escape
 * is now an inline link in `.chat-hint` so Flow A and Flow B chats share
 * identical chrome. Component Library still documents `.escape-banner` for
 * surfaces that want it; the GTKY chat surface no longer renders one.
 */

/* ── Outer chat column ───────────────────────────────────────────────────────── */

.chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--bp-s-5) var(--bp-s-5) 0;
  gap: 0;
}

/* ── Chat thread (message list) ──────────────────────────────────────────────── */

.chat-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-3);
  padding: var(--bp-s-2) 0;
  scroll-behavior: smooth;
}

/* Chat bubbles — matches Component Library .msg.ai / .msg.me */
.msg {
  max-width: 80%;
  padding: var(--bp-s-3) var(--bp-s-4);
  font-size: 14.5px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  border-radius: var(--bp-r-lg);
}

.msg.ai {
  align-self: flex-start;
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule-soft);
  color: var(--bp-ink-2);
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm);
}

.msg.me {
  align-self: flex-end;
  background: var(--bp-accent);
  color: var(--bp-accent-ink);
  border-radius: var(--bp-r-lg) var(--bp-r-lg) var(--bp-r-sm) var(--bp-r-lg);
}

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: var(--bp-s-3) var(--bp-s-4);
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-ink-subtle);
  animation: typing-bounce 1.2s infinite;
}

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

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* ── Chat input form ─────────────────────────────────────────────────────────── */

.chat-input {
  display: flex;
  gap: var(--bp-s-2);
  align-items: flex-end;
  flex-shrink: 0;
  padding-top: var(--bp-s-4);
  border-top: 1px solid var(--bp-rule-soft);
  margin-top: var(--bp-s-4);
}

.chat-input__textarea {
  flex: 1;
  min-height: 44px;
  resize: none;
  line-height: 1.5;
}

/* ── Save-state hint ─────────────────────────────────────────────────────────── */

.chat-hint {
  display: flex;
  flex-direction: column;
  gap: var(--bp-s-2);
  padding: var(--bp-s-2) 0 var(--bp-s-4);
  font-size: 13px;
  color: var(--bp-ink-muted);
  font-family: var(--bp-mono-family);
  letter-spacing: 0.02em;
}

/* Action row — back-to-dashboard left, mode-switch right. */
.chat-hint__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bp-s-2) var(--bp-s-4);
}

/* Saving status sits centered on its own line below the action row.
 * `margin: 0` resets the default `<p>` spacing so the status hugs the
 * action row at the parent's gap distance. */
.chat-hint__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bp-s-2);
  margin: 0;
}

.chat-hint .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-accent);
  flex-shrink: 0;
}

/* Bottom-row affordances — back-to-dashboard (always present) and the
 * quiet inline escape (present in Flow A only). `justify-content:
 * space-between` on the parent pins back-link left and switch-link
 * right; the saving status sits between them on wide viewports and
 * wraps to its own line on narrow ones. */
.chat-hint__back-link,
.chat-hint__switch-link {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bp-dur-fast) var(--bp-easing);
}

.chat-hint__back-link {
  color: var(--bp-ink-muted);
}

.chat-hint__back-link:hover {
  color: var(--bp-ink);
}

.chat-hint__switch-link {
  color: var(--bp-accent);
}

.chat-hint__switch-link:hover {
  color: var(--bp-ink);
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chat-thread { scroll-behavior: auto; }
  .chat-typing span { animation: none; }
}

/* ── "What just happened" debug pane (epic #1144, PR 3 / #1147) ──────────────
 * Dev/staging-only diagnostics surfaced under the chat. The partial that
 * renders this is production-gated, so these rules never apply in prod. Kept
 * deliberately plain — a developer-facing readout, not a designed surface. */

.chat-debug-pane {
  margin-top: var(--bp-s-3);
  border: 1px dashed var(--bp-rule-soft);
  border-radius: var(--bp-r-sm);
  background: var(--bp-ink-subtle);
  font-size: 0.8rem;
}

.chat-debug-pane__summary {
  cursor: pointer;
  padding: var(--bp-s-2) var(--bp-s-3);
  color: var(--bp-ink-muted);
  font-weight: 600;
}

.chat-debug-pane__body {
  padding: 0 var(--bp-s-3) var(--bp-s-3);
  color: var(--bp-ink-2);
}

.chat-debug-pane__rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bp-s-1) var(--bp-s-3);
  margin: 0 0 var(--bp-s-2);
}

.chat-debug-pane__row {
  display: contents;
}

.chat-debug-pane__row dt {
  color: var(--bp-ink-muted);
}

.chat-debug-pane__row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.chat-debug-pane__label {
  margin: var(--bp-s-2) 0 var(--bp-s-1);
  color: var(--bp-ink-muted);
  font-weight: 600;
}

.chat-debug-pane__json {
  margin: 0;
  padding: var(--bp-s-2);
  background: var(--bp-surface);
  border: 1px solid var(--bp-rule-soft);
  border-radius: var(--bp-r-sm);
  overflow-x: auto;
  white-space: pre;
  font-size: 0.75rem;
}

.chat-debug-pane__empty {
  margin: 0;
  color: var(--bp-ink-muted);
  font-style: italic;
}