/*
 * A chat with an analyst (Kiln/UI/DescribeView.swift, ChatPanel): who's talking at the top, the conversation kept
 * scrolled to its latest line, question cards under the messages that asked them, and the box to type in at the foot.
 */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; background: var(--paper); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); min-height: 46px; }
.chat-head-title { font-size: 14px; font-weight: 600; }
.chat-head-state { font-size: 13px; color: var(--accent-text); }

.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
@media (max-width: 1099px) {
  .chat-scroll { max-height: 62vh; max-height: 62dvh; min-height: 220px; }
}

.messages { list-style: none; display: flex; flex-direction: column; gap: 16px; }

.message { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.message-text { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.message-text p + p { margin-top: 0.7em; }
.message-text ul, .message-text ol { padding-left: 1.3em; margin: 0.4em 0; }
.message-text code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 4px; border-radius: 4px; background: var(--inset); }

/* The person's own words, in a jade bubble on the right. */
.message--owner { align-items: flex-end; padding-left: 48px; }
.message--owner .message-text {
  padding: 9px 13px;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border-radius: 14px 14px 4px 14px;
}
.message-author { font-size: 12px; color: var(--ink-soft); }

/* The analyst's words, plain, on the left. */
.message--analyst { padding-right: 12px; }

/* Something that happened to the feature, in a capsule across the middle. */
.message--event { align-items: center; }
.message--event .message-text {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 5px 12px; border-radius: 999px;
  background: var(--inset); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: center;
}
.message--event svg { width: 11px; height: 11px; flex: none; }

/* Three dots that rise in turn while the analyst is thinking (TypingDots). */
.typing { display: inline-flex; align-items: center; gap: 4px; height: 18px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: typing 1.2s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 0.9; }
}

/* When Claude didn't answer: a card in plain words, with Claude Code's own words behind Details (TroubleCard). */
.trouble {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent);
  background: color-mix(in srgb, var(--alert) 6%, var(--card));
  font-size: 14px;
}
.trouble-title { font-weight: 600; color: var(--alert); display: flex; align-items: center; gap: 7px; }
.trouble-title svg { width: 15px; height: 15px; }
.trouble details { font-size: 13px; color: var(--ink-soft); }
.trouble summary { cursor: pointer; }

/* A question from the analyst, with its options as buttons; the recommended one is marked (QuestionCard). */
.question-card {
  --tint: var(--wait);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 14px 18px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--tint) 40%, transparent);
  background: color-mix(in srgb, var(--tint) 6%, var(--card));
  overflow: hidden;
}
.question-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tint); }
.question-card--answered { --tint: var(--pass); border-color: var(--rule); background: var(--card); }
.question-text { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.question-why { font-size: 13px; color: var(--ink-soft); }
.question-answer { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; font-weight: 500; }
.question-answer svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--pass); }

.options { display: flex; flex-direction: column; gap: 6px; }
.options form { margin: 0; }
.option {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--rule); border-radius: 9px;
  background: color-mix(in srgb, var(--inset) 60%, transparent);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.option--recommended { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.option:hover:not([disabled]) { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.option[disabled] { cursor: default; opacity: 0.6; }
.option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-label { font-size: 13.5px; font-weight: 600; }
.option-detail { font-size: 12.5px; color: var(--ink-soft); }

/* Where the person types to the analyst (ChatComposer). */
.composer { padding: 12px 14px 14px; border-top: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.composer form { margin: 0; }
.composer-box {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 8px 8px 12px; border-radius: 14px;
  border: 1px solid var(--rule); background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.composer-input {
  flex: 1 1 auto; min-width: 0; min-height: 26px; max-height: 168px;
  padding: 4px 0; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.45;
}
.composer-input::placeholder { color: var(--ink-soft); opacity: 0.85; }
/* A phone zooms into a box under 16px; a desktop has room for the placeholder on one line at 15. */
@media (min-width: 900px) and (hover: hover) {
  .composer-input { font-size: 15px; }
  .composer-send { padding-inline: 12px; }
}
.composer-input:focus-visible { outline: 0; }
.composer-send { min-height: 34px; padding: 5px 14px; }
.composer-hint { font-size: 12px; color: var(--ink-soft); padding-left: 4px; }
.composer-notice { font-size: 13px; font-weight: 500; color: var(--alert); padding-left: 4px; }
.composer-notice:empty { display: none; }
.composer-thinking { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--accent-text); padding-left: 4px; }
.composer[data-state="thinking"] .composer-thinking { display: inline-flex; }
.composer[data-state="thinking"] .composer-hint { display: none; }
.composer-input:disabled { cursor: not-allowed; }
.composer-closed { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 13.5px; background: var(--paper); }
.composer-closed svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* Ideas to start from when the chat is empty (Starters). */
.starters { display: flex; flex-direction: column; gap: 8px; }