:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  font-size: 18px;
  background: #17191e;
  color: #22252c;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 40px 7vw;
}
.chat {
  color-scheme: light;
  width: min(100%, 840px);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: min(780px, calc(100dvh - 80px));
}
header { flex-shrink: 0; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.conversation { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 24px; transition: opacity var(--clear-duration, 300ms) ease; }
.conversation.clearing { opacity: 0; }
footer { flex-shrink: 0; padding: 16px 24px; color: #737780; font-size: 14px; }
.user-message { margin: 24px 0 16px; padding: 12px 16px; background: #e6f2fc; width: fit-content; max-width: 100%; min-height: 48px; border-radius: 6px; overflow-wrap: anywhere; }
.user-message:first-child { margin-top: 0; }
.typing::after { content: "▎"; animation: blink 800ms steps(1) infinite; }
.status { margin: 0; color: #737780; font-size: 16px; }
.result { margin: 0 0 18px; animation: appear 350ms ease-out both; }
.result p { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; font-weight: 600; margin-bottom: 12px; }
th, td { text-align: left; padding: 12px 6px; border-bottom: 1px solid #e5e7eb; }
th { color: #737780; font-weight: 500; }
th.numeric, td.numeric { text-align: right; white-space: nowrap; }
.result-image { display: block; width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; }
.analysis, .ad-preview, .final-success { padding: 18px; border: 1px solid #dfe3e8; border-radius: 6px; }
.analysis { background: #f5f3ed; border-left: 3px solid #9b8a60; }
.analysis h2, .ad-preview h2 { margin: 0 0 16px; font-size: 18px; }
.analysis h3 { margin: 16px 0 6px; font-size: 16px; }
.analysis p, .ad-preview p { font-size: 16px; line-height: 1.5; }
.ad-preview { background: #fafbfc; }
.ad-preview .result-image { margin-bottom: 16px; width: 360px; }
.ad-preview p + p { margin-top: 10px; }
.success { color: #355c46; font-size: 16px; }
.final-success { background: #edf4ef; font-weight: 600; }
.ad-preview .ad-note { font-size: 14px; color: #355c46; }
.demo-error { color: #923c3c; }
.work-log { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #dfe3e8; font-size: 16px; line-height: 1.5; }
.work-log.pending { color: #737780; }
.work-log.completed { color: #355c46; border-left-color: #83aa92; }
.moderation-prompt { padding: 20px; background: #edf4ef; border: 1px solid #c8ded0; border-radius: 6px; }
.moderation-prompt h2 { margin: 0 0 12px; font-size: 20px; color: #355c46; }
.moderation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.moderation-actions button { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid #b9c8bf; border-radius: 6px; background: #fff; color: #355c46; opacity: 1; }
.moderation-actions button:first-child { background: #355c46; color: #fff; border-color: #355c46; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 600px) {
  main { padding: 20px 12px; }
  .chat { height: calc(100dvh - 40px); }
  .conversation { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .result, .typing::after { animation: none; }
  .conversation { transition: none; }
}