html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* Outbox "Generating…" placeholder card — a quick pop-in when it first appears
   (on "+ New post"), then it settles and the robot keeps its thinking animation. */
@keyframes pa-thinking-in {
    0%   { opacity: 0; transform: scale(0.6) translateY(10px); }
    60%  { opacity: 1; transform: scale(1.06); }
    100% { transform: scale(1); }
}

.pa-thinking-card {
    animation: pa-thinking-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── /docs prose ───────────────────────────────────────────────────────────────
   Documentation articles are written as plain HTML (h2/p/ul/table) inside a .pa-docs
   wrapper instead of a MudText per paragraph: two dozen articles of prose are far easier
   to write and review as markup, and one stylesheet keeps them typographically identical.
   Tokens mirror the MudBlazor theme in Routes.razor (navy #1B2A4A, teal #2A9D8F, gold
   #E9C46A, 12px radius, Inter). */
.pa-docs { font-size: 1.02rem; line-height: 1.75; color: #1F2937; }
.pa-docs h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 8px; color: #1B2A4A; }
.pa-docs h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.2px; margin: 40px 0 12px; color: #1B2A4A; }
.pa-docs h3 { font-size: 1.08rem; font-weight: 650; margin: 28px 0 8px; color: #1B2A4A; }
.pa-docs p { margin: 0 0 16px; }
.pa-docs ul, .pa-docs ol { margin: 0 0 16px; padding-left: 26px; }
.pa-docs li { margin-bottom: 6px; }
.pa-docs li > ul, .pa-docs li > ol { margin-top: 6px; margin-bottom: 0; }
.pa-docs a { color: #2A9D8F; text-decoration: none; }
.pa-docs a:hover { text-decoration: underline; }
.pa-docs strong { font-weight: 650; color: #111827; }
.pa-docs code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: #EEF0F6; padding: 1px 6px; border-radius: 6px; }
.pa-docs table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.95rem; }
.pa-docs th, .pa-docs td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #E0E4ED; }
.pa-docs th { font-weight: 650; color: #1B2A4A; background: #F5F6FA; }
.pa-docs .pa-docs-lede { font-size: 1.15rem; color: #4B5563; margin: 0 0 28px; }
.pa-docs .pa-docs-table-wrap { overflow-x: auto; }
/* Callouts: note (neutral), tip (teal), example pair (good vs weak answer). */
.pa-docs .pa-callout { border-left: 4px solid #1B2A4A; background: #F5F6FA; border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 20px; }
.pa-docs .pa-callout p:last-child { margin-bottom: 0; }
.pa-docs .pa-callout-tip { border-left-color: #2A9D8F; background: #EEF8F6; }
.pa-docs .pa-callout-warn { border-left-color: #E9C46A; background: #FBF6E8; }
.pa-docs .pa-example { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 20px; }
@media (min-width: 760px) { .pa-docs .pa-example { grid-template-columns: 1fr 1fr; } }
.pa-docs .pa-example > div { border: 1px solid #E0E4ED; border-radius: 12px; padding: 14px 16px; background: #FFFFFF; }
.pa-docs .pa-example .pa-example-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.pa-docs .pa-example .pa-example-good .pa-example-label { color: #2A9D8F; }
.pa-docs .pa-example .pa-example-weak .pa-example-label { color: #9CA3AF; }
.pa-docs .pa-example blockquote { margin: 0; font-style: italic; color: #374151; }
.pa-docs .pa-example p.pa-example-why { margin: 10px 0 0; font-size: 0.9rem; color: #6B7280; }
/* Sidebar */
.pa-docs-nav a { display: block; padding: 5px 10px; border-radius: 8px; color: #374151; font-size: 0.92rem; text-decoration: none; }
.pa-docs-nav a:hover { background: #EEF0F6; }
.pa-docs-nav a.active { background: #1B2A4A; color: #FFFFFF; font-weight: 600; }
.pa-docs-nav .pa-docs-nav-section { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; margin: 18px 10px 6px; }
.pa-docs-nav .pa-docs-nav-section:first-child { margin-top: 0; }