.ai-layout { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.ai-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px; background: var(--surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.ai-head h2 { margin: 0; font-size: 16px; color: var(--text-strong); }
.ai-head .spacer { flex: 1; }
.ai-model-tag { font-size: 12px; color: var(--muted); }
.ai-model-tag code {
  background: var(--surface-3); padding: 1px 6px; border-radius: 4px;
  font-size: 12px; color: var(--text);
}

.ai-warning {
  margin: 12px 24px 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(242, 63, 67, 0.12);
  box-shadow: inset 0 0 0 1px var(--danger);
  font-size: 13px; color: #ff9093;
}

.ai-messages {
  flex: 1; overflow-y: auto;
  padding: 20px 24px 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.ai-messages > :first-child { margin-top: auto; }

.ai-empty {
  align-self: center; max-width: 460px; text-align: center;
  color: var(--muted); padding: 40px 20px;
}
.ai-empty h3 { margin: 0 0 8px; color: var(--text-strong); font-size: 17px; }
.ai-empty p { margin: 0; font-size: 14px; line-height: 1.6; }

.ai-msg { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 760px; }
.ai-msg.mine { align-self: flex-end; align-items: flex-end; }
.ai-who { font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 4px; }

/* pre-wrap keeps the model's paragraphs and lists readable without parsing
   markdown; the tags hug their content so the indentation of this template
   never becomes blank lines. */
.ai-bubble {
  background: var(--surface-2); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.ai-msg.mine .ai-bubble { background: var(--accent); color: #fff; }
.ai-bubble .stamp { font-size: 11px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.ai-msg.mine .ai-bubble .stamp { color: rgba(255, 255, 255, 0.7); }

.ai-bubble.thinking { display: flex; gap: 5px; padding: 14px 14px; }
.ai-bubble.thinking span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: ai-blink 1.2s infinite ease-in-out;
}
.ai-bubble.thinking span:nth-child(2) { animation-delay: 0.2s; }
.ai-bubble.thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.ai-error {
  align-self: flex-start; max-width: 760px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(242, 63, 67, 0.12);
  box-shadow: inset 0 0 0 1px var(--danger);
  font-size: 13px; color: #ff9093;
}

.ai-composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 24px 16px; background: var(--bg);
}
.ai-composer textarea {
  flex: 1; resize: none; max-height: 160px; min-height: 42px;
  background: var(--surface-2); border-radius: var(--radius);
}

/* What it has been taught, above the conversation it applies to. */
.ai-lessons {
  padding: 12px 20px; background: var(--bg-deep);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.ai-lessons[hidden] { display: none; }
.ai-lessons-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ai-lessons-hint code {
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: #a5b0ff;
}
.lesson-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lesson {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13px; line-height: 1.45;
}
.lesson.empty { color: var(--muted); font-style: italic; }
.lesson-rule { flex: 1; color: var(--text); }

/* The receipt for a lesson: the rule as it was written down, not as it was typed. */
.ai-learned {
  align-self: center; max-width: 80%;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: var(--radius);
  background: rgba(35, 165, 90, 0.12);
  box-shadow: inset 0 0 0 1px rgba(35, 165, 90, 0.35);
}
.learned-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #5fd894;
}
.learned-rule { font-size: 14px; color: var(--text-strong); line-height: 1.5; }
.learned-note { font-size: 11px; color: var(--muted); }