/* aichat.css — generated by aichat.py (internal default)
 *
 * All rules are scoped under .ai-chat-page so this snippet can be pasted into
 * a page that already has its own CSS without the two interfering. This is
 * scoping, not true isolation: for guaranteed isolation use an iframe or
 * Shadow DOM (which would defeat the copy-a-snippet goal).
 *
 * To customise the look, create aichat-template.css next to aichat.py and
 * re-run with --write-css overwrite; the template is copied verbatim.
 */

.ai-chat-page {
  width: 100%;
  --ai-bg: #f5f6f8;
  --ai-window: #ffffff;
  --ai-border: #e4e7ec;
  --ai-user-bubble: #2563eb;
  --ai-user-text: #ffffff;
  --ai-bot-bubble: #f1f3f5;
  --ai-bot-text: #1a1d21;
  --ai-role: #8a909a;
  --ai-code-bg: #1e2530;
  --ai-code-text: #e7ecf3;
  --ai-radius: 16px;
  --ai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
             Arial, sans-serif;
  --ai-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  background: var(--ai-bg);
  font-family: var(--ai-font);
  color: var(--ai-bot-text);
  line-height: 1.55;
}

.ai-chat-page *,
.ai-chat-page *::before,
.ai-chat-page *::after { box-sizing: border-box; }

.ai-chat-window {
  width: min(100%, 760px);
  max-width: 760px;
  background: var(--ai-window);
  border: 1.5px solid #9aa3b2;
  border-radius: var(--ai-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06),
              0 8px 24px rgba(16, 24, 40, 0.06);
}

.ai-chat-log {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.ai-chat-turn { display: flex; flex-direction: column; max-width: 85%; }
.ai-chat-turn--user { align-self: flex-end; align-items: flex-end; }
.ai-chat-turn--chatbot { align-self: flex-start; align-items: flex-start; }

.ai-chat-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ai-role);
  margin: 0 4px 4px;
}

.ai-chat-bubble {
  padding: 12px 16px;
  border-radius: var(--ai-radius);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.ai-chat-turn--user .ai-chat-bubble {
  background: var(--ai-user-bubble);
  color: var(--ai-user-text);
  border-bottom-right-radius: 4px;
}

.ai-chat-turn--chatbot .ai-chat-bubble {
  background: var(--ai-bot-bubble);
  color: var(--ai-bot-text);
  border-bottom-left-radius: 4px;
}

.ai-chat-bubble > :first-child { margin-top: 0; }
.ai-chat-bubble > :last-child { margin-bottom: 0; }
.ai-chat-bubble p { margin: 0 0 0.7em; }
.ai-chat-bubble h1,
.ai-chat-bubble h2,
.ai-chat-bubble h3,
.ai-chat-bubble h4 { margin: 0.6em 0 0.4em; line-height: 1.3; color: inherit; }
.ai-chat-bubble ul,
.ai-chat-bubble ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.ai-chat-bubble li { margin: 0.2em 0; }
.ai-chat-bubble a { color: inherit; text-decoration: underline; }
.ai-chat-turn--chatbot .ai-chat-bubble a { color: var(--ai-user-bubble); }

/* Inline code */
.ai-chat-bubble code {
  font-family: var(--ai-mono);
  font-size: 0.88em;
  background: rgba(135, 144, 154, 0.18);
  padding: 0.12em 0.36em;
  border-radius: 5px;
}
.ai-chat-turn--user .ai-chat-bubble code {
  background: rgba(255, 255, 255, 0.22);
}

/* Fenced code blocks: visible, escaped, scrollable */
.ai-chat-bubble pre {
  background: var(--ai-code-bg);
  color: var(--ai-code-text);
  padding: 14px 16px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 0.7em;
}
.ai-chat-bubble pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  color: inherit;
  white-space: pre;
}

.ai-chat-bubble table {
  border-collapse: collapse;
  margin: 0 0 0.7em;
  font-size: 0.92em;
}
.ai-chat-bubble th,
.ai-chat-bubble td {
  border: 1.5px solid #9aa3b2;
  padding: 6px 10px;
  text-align: left;
  color: inherit;
}

@media (max-width: 520px) {
  .ai-chat-turn { max-width: 100%; }
  .ai-chat-log { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-page * { animation: none !important; transition: none !important; }
}

/* scoped Markdown isolation */

.ai-chat-page .ai-chat-bubble p { margin: 0 0 0.7em; color: inherit; }
.ai-chat-page .ai-chat-bubble h1,
.ai-chat-page .ai-chat-bubble h2,
.ai-chat-page .ai-chat-bubble h3,
.ai-chat-page .ai-chat-bubble h4,
.ai-chat-page .ai-chat-bubble h5,
.ai-chat-page .ai-chat-bubble h6 { margin: 0.6em 0 0.4em; line-height: 1.3; color: inherit; font-weight: 700; }
.ai-chat-page .ai-chat-bubble h1 { font-size: 1.45em; }
.ai-chat-page .ai-chat-bubble h2 { font-size: 1.3em; }
.ai-chat-page .ai-chat-bubble h3 { font-size: 1.15em; }
.ai-chat-page .ai-chat-bubble h4,
.ai-chat-page .ai-chat-bubble h5,
.ai-chat-page .ai-chat-bubble h6 { font-size: 1em; }
.ai-chat-page .ai-chat-bubble strong,
.ai-chat-page .ai-chat-bubble b { color: inherit; font-weight: 700; }
.ai-chat-page .ai-chat-bubble em,
.ai-chat-page .ai-chat-bubble i { color: inherit; font-style: italic; }
.ai-chat-page .ai-chat-bubble ul,
.ai-chat-page .ai-chat-bubble ol { margin: 0 0 0.7em; padding-left: 1.4em; color: inherit; }
.ai-chat-page .ai-chat-bubble ul { list-style-type: disc; }
.ai-chat-page .ai-chat-bubble ol { list-style-type: decimal; }
.ai-chat-page .ai-chat-bubble li { display: list-item; margin: 0.2em 0; padding-left: 0; color: inherit; }
.ai-chat-page .ai-chat-bubble li::marker { color: inherit; }
.ai-chat-page .ai-chat-bubble blockquote { margin: 0 0 0.7em; padding: 0.65em 0.85em; border-left: 4px solid #9aa3b2; background: rgba(0,0,0,0.04); color: inherit; }
.ai-chat-page .ai-chat-bubble blockquote > :first-child { margin-top: 0; }
.ai-chat-page .ai-chat-bubble blockquote > :last-child { margin-bottom: 0; }
.ai-chat-page .ai-chat-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.ai-chat-page .ai-chat-turn--chatbot .ai-chat-bubble a,
.ai-chat-page .ai-chat-chatbot .ai-chat-bubble a { color: #2563eb; }
.ai-chat-page .ai-chat-bubble code { font-family: var(--ai-mono, "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace); font-size: 0.88em; background: rgba(135,144,154,0.18); color: inherit; padding: 0.12em 0.36em; border-radius: 5px; }
.ai-chat-page .ai-chat-turn--user .ai-chat-bubble code,
.ai-chat-page .ai-chat-user .ai-chat-bubble code { background: rgba(255,255,255,0.22); }
.ai-chat-page .ai-chat-bubble pre { background: var(--ai-code-bg, #111827); color: var(--ai-code-text, #f9fafb); padding: 14px 16px; border-radius: 10px; overflow-x: auto; margin: 0 0 0.7em; font-family: var(--ai-mono, "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace); }
.ai-chat-page .ai-chat-bubble pre code { background: none; padding: 0; font-size: 0.88em; color: inherit; white-space: pre; }
.ai-chat-page .ai-chat-bubble table { border-collapse: collapse; width: 100%; margin: 0 0 0.9em; font-size: 0.92em; color: inherit; }
.ai-chat-page .ai-chat-bubble thead,
.ai-chat-page .ai-chat-bubble tbody,
.ai-chat-page .ai-chat-bubble tr { color: inherit; }
.ai-chat-page .ai-chat-bubble th,
.ai-chat-page .ai-chat-bubble td { border: 1.5px solid #9aa3b2; padding: 6px 8px; text-align: left; vertical-align: top; color: inherit; }
.ai-chat-page .ai-chat-bubble th { background: rgba(0,0,0,0.04); font-weight: 700; }
.ai-chat-page .ai-chat-bubble img { max-width: 100%; height: auto; border-radius: 8px; margin: 0 0 0.7em; }

/* Compatibility aliases for online-generated class names and embedded centring. */
.ai-chat-page .ai-chat-window { margin-inline: auto; margin-block: 0; }
.ai-chat-page .ai-chat-user { align-self: flex-end; align-items: flex-end; justify-self: end; }
.ai-chat-page .ai-chat-chatbot { align-self: flex-start; align-items: flex-start; justify-self: start; }
.ai-chat-page .ai-chat-turn--user,
.ai-chat-page .ai-chat-user { max-width: 85%; }
.ai-chat-page .ai-chat-turn--chatbot,
.ai-chat-page .ai-chat-chatbot { max-width: 85%; }
.ai-chat-page .ai-chat-user .ai-chat-bubble {
  background: var(--ai-user-bubble, #e7f0ff);
  color: var(--ai-user-text, inherit);
  border-bottom-right-radius: 4px;
}
.ai-chat-page .ai-chat-chatbot .ai-chat-bubble {
  background: var(--ai-bot-bubble, #f4f6f9);
  color: var(--ai-bot-text, inherit);
  border-bottom-left-radius: 4px;
}
.ai-chat-page .ai-chat-turn--user .ai-chat-bubble {
  background: var(--ai-user-bubble, #e7f0ff);
  color: var(--ai-user-text, inherit);
}
.ai-chat-page .ai-chat-turn--chatbot .ai-chat-bubble {
  background: var(--ai-bot-bubble, #f4f6f9);
  color: var(--ai-bot-text, inherit);
}
@media (max-width: 520px) {
  .ai-chat-page .ai-chat-turn,
  .ai-chat-page .ai-chat-turn--user,
  .ai-chat-page .ai-chat-user,
  .ai-chat-page .ai-chat-turn--chatbot,
  .ai-chat-page .ai-chat-chatbot { max-width: 100%; }
}