.ai-card {
  max-width: 900px;
  margin: 0 auto;
}

.ai-messages {
  height: 490px;
  overflow: auto;
  padding: 28px;
  background: linear-gradient(145deg, #f8fbfa, #f2f6f5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-welcome {
  margin: auto;
  max-width: 390px;
  color: #85958f;
  line-height: 1.8;
  text-align: center;
}

.ai-welcome strong {
  display: block;
  margin-bottom: 7px;
  color: #3e5f56;
  font-size: 17px;
}

.ai-welcome p { margin: 0; font-size: 12px; }
.ai-message { max-width: 78%; display: flex; flex-direction: column; gap: 6px; }
.ai-message > span { color: #8b9995; font-size: 10px; font-weight: 600; }
.ai-message > div {
  padding: 12px 15px;
  border: 1px solid #dfe9e5;
  border-radius: 14px;
  background: #fff;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ai-message.user { align-self: flex-end; align-items: flex-end; }
.ai-message.user > div {
  border-color: var(--accent);
  border-bottom-right-radius: 4px;
  background: var(--accent);
  color: #fff;
}

.ai-message.assistant > div { border-bottom-left-radius: 4px; }
.ai-message small { color: #9aa7a2; font-size: 9px; }
.ai-form { display: flex; align-items: flex-end; gap: 12px; padding: 15px 17px; border-top: 1px solid var(--line); }
.ai-form textarea { min-height: 48px; max-height: 140px; resize: vertical; }
.ai-form .button { min-height: 48px; }
.ai-footnote { padding: 0 20px 14px; margin: 0 !important; }

@media (max-width: 720px) {
  .ai-messages { height: 56svh; min-height: 350px; padding: 18px 14px; }
  .ai-message { max-width: 88%; }
  .ai-form { gap: 8px; padding: 11px; }
  .ai-form .button { padding: 10px 13px; }
}