* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── CSS variables – Light (default) ── */
:root {
    --bg: #f5f0e8;
    --bg-subtle: #ede8de;
    --border: #e0d8cc;
    --border-hover: #c8c0b4;
    --text: #1a1a1a;
    --text-secondary: #2a2a2a;
    --text-muted: #aaa;
    --text-faint: #ccc;
    --text-em: #666;
    --icon-btn: #aaa;
    --icon-btn-hover: #555;
    --primary-bg: #1a1a1a;
    --primary-bg-hover: #333;
    --primary-bg-active: #000;
    --primary-text: #f5f0e8;
    --secondary-color: #aaa;
    --scrollbar: #d8d0c4;
    --spinner-track: #e0d8cc;
    --spinner-head: #888;
    --error-bg: #fdf0f0;
    --error-border: #f0d8d8;
    --error-text: #c05050;
    --toast-bg: #1a1a1a;
    --toast-text: #f5f0e8;
    --code-bg: #ede8de;
    --code-text: #555;
    --pre-text: #444;
    --table-th: #ede8de;
    --link: #555;
    --link-hover: #111;
    --heading: #111;
    --strong: #111;
    --blockquote: #888;
    --brand: #f15b2f;
    --brand-hover: #d94e27;
    --brand-active: #bf4522;

    /* Typography — modular rem scale (~1.25); Sora for chrome/headings, system UI for body */
    --font-display: "Sora", system-ui, sans-serif;
    /* System sans for long reading — neutral and legible at small sizes */
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --lh-heading: 1.25;
    --lh-ui: 1.35;
    --lh-prose: 1.62;
    --lh-prose-dark: 1.7;

    /* Motion — main flow (summarize, stream, chat) */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-enter: 0.32s;
    --motion-tap: 0.14s;
    --motion-toast: 0.22s;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --bg: #1a1a1a;
    --bg-subtle: #252525;
    --border: #2e2e2e;
    --border-hover: #444;
    --text: #e8e3db;
    --text-secondary: #d0cbc3;
    --text-muted: #666;
    --text-faint: #444;
    --text-em: #999;
    --icon-btn: #555;
    --icon-btn-hover: #bbb;
    --primary-bg: #e8e3db;
    --primary-bg-hover: #ccc8c0;
    --primary-bg-active: #fff;
    --primary-text: #1a1a1a;
    --secondary-color: #555;
    --scrollbar: #333;
    --spinner-track: #2e2e2e;
    --spinner-head: #888;
    --error-bg: #2a1a1a;
    --error-border: #4a2a2a;
    --error-text: #e08080;
    --toast-bg: #e8e3db;
    --toast-text: #1a1a1a;
    --code-bg: #252525;
    --code-text: #aaa;
    --pre-text: #bbb;
    --table-th: #252525;
    --link: #aaa;
    --link-hover: #e8e3db;
    --heading: #e8e3db;
    --strong: #e8e3db;
    --blockquote: #666;
    --brand: #f15b2f;
    --brand-hover: #d94e27;
    --brand-active: #bf4522;
}

html {
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-kerning: normal;
    width: 400px;
    height: 560px;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    transition:
        background 0.15s,
        color 0.15s;
}

[data-theme="dark"] .result,
[data-theme="dark"] .streaming-content,
[data-theme="dark"] .chat-message.assistant,
[data-theme="dark"] .chat-message.user {
    line-height: 1.75;
}

[data-theme="dark"] .result p,
[data-theme="dark"] .streaming-content p,
[data-theme="dark"] .chat-message.assistant p,
[data-theme="dark"] .chat-message.user p {
    line-height: 1.75;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Header ── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.demo-reset-link {
    margin: 0;
    margin-inline-end: 4px;
    padding: 0 4px;
    border: none;
    background: none;
    font: inherit;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-em);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
    border-radius: 6px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color var(--motion-tap) var(--ease-out-quart);
}

.demo-reset-link:hover {
    color: var(--text);
}

.demo-reset-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.demo-reset-link:active {
    color: var(--brand);
}

.logo-mark {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-mark .brand-icon {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--brand);
    -webkit-mask: url("lightning.svg") center / contain no-repeat;
    mask: url("lightning.svg") center / contain no-repeat;
}

.brand-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: var(--lh-heading);
}

.logo-text {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--icon-btn);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition:
        color var(--motion-tap) var(--ease-out-quart),
        transform var(--motion-tap) var(--ease-out-quart);
    flex-shrink: 0;
}

.icon-btn:hover {
    color: var(--icon-btn-hover);
    transform: scale(1.06);
}

.icon-btn:active {
    transform: scale(0.96);
}

/* ── Content area ── */
.content-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
    /* Isolate layout inside the transcript pane from the rest of the flex column. */
    contain: layout;
}

.content-container::-webkit-scrollbar {
    width: 3px;
}
.content-container::-webkit-scrollbar-track {
    background: transparent;
}
.content-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 3px;
}

/* ── Initial state ── */
.initial-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 4px;
    gap: 8px;
}

.initial-state.hidden {
    display: none;
}

.initial-state:not(.hidden) .initial-icon {
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.04s both;
}

.initial-state:not(.hidden) .initial-title {
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.1s both;
}

.initial-state:not(.hidden) .initial-sub {
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) 0.16s both;
}

.initial-icon {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
}

.initial-icon .brand-icon {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--brand);
    -webkit-mask: url("lightning.svg") center / contain no-repeat;
    mask: url("lightning.svg") center / contain no-repeat;
}

.initial-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
    color: var(--text);
}

.initial-sub {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    max-width: 38ch;
}

/* ── Loading ── */
.loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--spinner-track);
    border-top-color: var(--spinner-head);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Result ── */
.result {
    /* Summary body — same stack/size as chat Q&A */
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 72ch;
}

.result.hidden {
    display: none;
}

/* ── Truncation Warning ── */
.truncation-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0;
    line-height: var(--lh-ui);
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
}

.truncation-warning svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Markdown ── */
.result > * + * {
    margin-top: 10px;
}

.result > *:first-child {
    margin-top: 0;
}

.result h1,
.result h2,
.result h3,
.result h4,
.result h5,
.result h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--heading);
    line-height: var(--lh-heading);
}

.result h1 {
    font-size: var(--text-base);
    margin-top: 1rem;
}
.result h2 {
    font-size: var(--text-md);
    margin-top: 0.875rem;
}
.result h3 {
    font-size: var(--text-sm);
    margin-top: 0.75rem;
}
.result h4,
.result h5,
.result h6 {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.625rem;
}

.result p {
    line-height: inherit;
}
.result p + p {
    margin-top: 6px;
}

.result ul,
.result ol {
    padding-left: 18px;
}

.result li {
    line-height: 1.6;
}
.result li + li {
    margin-top: 2px;
}
.result li::marker {
    color: var(--text-faint);
}

.result strong {
    font-weight: 600;
    color: var(--strong);
}
.result em {
    font-style: italic;
    color: var(--text-em);
}

.result code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--code-text);
}

.result pre {
    background: var(--code-bg);
    padding: 10px 12px;
    border-radius: 5px;
    overflow-x: auto;
}

.result pre code {
    background: transparent;
    padding: 0;
    color: var(--pre-text);
}

.result blockquote {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--blockquote);
    font-style: italic;
}

.result blockquote + blockquote {
    margin-top: 6px;
}

.result a {
    color: var(--link);
    text-decoration: underline;
}
.result a:hover {
    color: var(--brand);
}

.result hr {
    border: none;
    border-top: 1px solid var(--border);
}

.result table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.result th,
.result td {
    border: 1px solid var(--border);
    padding: 5px 9px;
    text-align: left;
}

.result th {
    background: var(--table-th);
    font-weight: 600;
}

/* Streaming content - match .result styling for consistency */
.streaming-content {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 72ch;
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
}

.streaming-content > * + * {
    margin-top: 10px;
}

.streaming-content > *:first-child {
    margin-top: 0;
}

/* Loading placeholder before first token */
.streaming-placeholder {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.streaming-placeholder .pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: pulse-dot 1.4s ease-in-out infinite;
}

.streaming-placeholder .pulse-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.streaming-placeholder .pulse-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse-dot {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Footer ── */
.footer {
    display: flex;
    padding: 11px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    align-items: center;
}

.footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--motion-tap) var(--ease-out-quart),
        color var(--motion-tap) var(--ease-out-quart),
        border-color var(--motion-tap) var(--ease-out-quart),
        transform var(--motion-tap) var(--ease-out-quart);
    border: 1px solid var(--border);
    flex: 1;
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.footer-btn:hover:not(:disabled) {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.footer-btn:active:not(:disabled) {
    background: var(--bg-subtle);
    transform: translateY(0) scale(0.985);
}
.footer-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.footer-btn.primary {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    font-weight: 500;
}

.footer-btn.primary:hover:not(:disabled) {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.footer-btn.primary:active:not(:disabled) {
    background: var(--brand-active);
    border-color: var(--brand-active);
    color: #fff;
    transform: translateY(0) scale(0.985);
}

.footer-btn:focus-visible,
.chat-send-btn:focus-visible,
.icon-btn:focus-visible,
.suggestion-btn:focus-visible,
.copy-summary-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

/* ── Error ── */
.error-message {
    font-family: var(--font-body);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    padding: 11px 14px;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: var(--lh-ui);
    white-space: pre-wrap;
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
}

/* ── PDF Error ── */
.pdf-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
    gap: 12px;
}

.pdf-error-icon {
    font-size: 3rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.pdf-error-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
}

.pdf-error-message {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    max-width: 280px;
}

/* ── Unsupported extraction (YouTube, streaming, Bluesky, email UIs, etc.) ── */
.youtube-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px 20px;
    gap: 12px;
}

.youtube-error-icon {
    font-size: 3rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.youtube-error-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
}

.youtube-error-message {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: var(--lh-ui);
    letter-spacing: 0;
    max-width: 280px;
}

/* ── Toast ── */
.toast {
    position: fixed;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--toast-bg);
    color: var(--toast-text);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    z-index: 100;
    white-space: nowrap;
    animation: toast-in var(--motion-toast) var(--ease-out-quart) both;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Chat ── */
.chat-container {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-container:not(.hidden) .chat-input-wrap {
    animation: barRise var(--motion-enter) var(--ease-out-quart) both;
}

.chat-container.hidden {
    display: none;
}

/* Chat suggestions */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.suggestion-btn {
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color var(--motion-tap) var(--ease-out-quart),
        color var(--motion-tap) var(--ease-out-quart),
        background var(--motion-tap) var(--ease-out-quart),
        transform var(--motion-tap) var(--ease-out-quart);
    white-space: nowrap;
    animation: chipIn var(--motion-enter) var(--ease-out-quart) both;
}

.suggestion-btn:nth-child(1) {
    animation-delay: 0.04s;
}
.suggestion-btn:nth-child(2) {
    animation-delay: 0.1s;
}
.suggestion-btn:nth-child(3) {
    animation-delay: 0.16s;
}
.suggestion-btn:nth-child(4) {
    animation-delay: 0.22s;
}

.suggestion-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--bg);
    transform: translateY(-1px);
}

.suggestion-btn:active {
    transform: translateY(0) scale(0.97);
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes barRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Suggestion skeleton placeholder */
.suggestion-skeleton {
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    width: 120px;
    height: 24px;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* Chat messages are rendered inside .result, sharing the same scroll */
.chat-divider {
    margin: 20px 0 16px 0;
    border: none;
    border-top: 1px solid var(--border);
    animation: dividerIn var(--motion-enter) var(--ease-out-quart) both;
}

@keyframes dividerIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Entrance only on new user bubbles — assistant streams in place (no post-stream rebuild). */
.chat-message + .chat-message {
    margin-top: 14px;
}

/* User messages — same body type as summary / assistant (Sora only in headings via markdown) */
.chat-message.user {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    background: var(--primary-bg);
    color: var(--primary-text);
    padding: 10px 14px;
    border-radius: 12px;
    border-bottom-right-radius: 4px;
    /* Shrink-wrap short questions; cap width when text is long or multi-line. */
    width: fit-content;
    max-width: 85%;
    margin-left: auto;
    transform-origin: center right;
    animation: bubbleIn var(--motion-enter) var(--ease-out-quint) both;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: translateX(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Assistant messages — match summary `.result` prose */
.chat-message.assistant {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 72ch;
}

.chat-message.assistant.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.chat-message.assistant.error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    padding: 10px 14px;
    border-radius: 6px;
    white-space: pre-wrap;
}

.chat-spinner {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--spinner-track);
    border-top-color: var(--spinner-head);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* Chat message markdown (assistant uses same styles as .result) */
.chat-message.assistant > * + * {
    margin-top: 10px;
}

.chat-message.assistant h1,
.chat-message.assistant h2,
.chat-message.assistant h3,
.chat-message.assistant h4,
.chat-message.assistant h5,
.chat-message.assistant h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--heading);
    line-height: var(--lh-heading);
}

.chat-message.assistant h1 {
    font-size: var(--text-base);
    margin-top: 1rem;
}
.chat-message.assistant h2 {
    font-size: var(--text-md);
    margin-top: 0.875rem;
}
.chat-message.assistant h3 {
    font-size: var(--text-sm);
    margin-top: 0.75rem;
}

.chat-message.assistant p {
    line-height: inherit;
}

.chat-message.assistant p + p {
    margin-top: 6px;
}

.chat-message.assistant ul,
.chat-message.assistant ol {
    padding-left: 18px;
}

.chat-message.assistant li {
    line-height: 1.6;
}

.chat-message.assistant li + li {
    margin-top: 2px;
}

.chat-message.assistant strong {
    font-weight: 600;
    color: var(--strong);
}

.chat-message.assistant code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--code-text);
}

.chat-message.assistant pre {
    background: var(--code-bg);
    padding: 10px 12px;
    border-radius: 5px;
    overflow-x: auto;
}

.chat-message.assistant pre code {
    background: transparent;
    padding: 0;
    color: var(--pre-text);
}

.chat-message.assistant blockquote {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--blockquote);
    font-style: italic;
}

.chat-message.assistant a {
    color: var(--link);
    text-decoration: underline;
}

.chat-message.assistant a:hover {
    color: var(--brand);
}

/* User message markdown */
.chat-message.user p {
    margin: 0;
}

.chat-message.user p + p {
    margin-top: 4px;
}

.chat-message.user strong {
    font-weight: 600;
}

.chat-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    /* Match `.result` summary body — same face as the page text above */
    font-family: var(--font-body);
    font-size: var(--text-md);
    outline: none;
    transition:
        border-color var(--motion-tap) var(--ease-out-quart),
        box-shadow var(--motion-tap) var(--ease-out-quart);
}

.chat-input:focus,
.chat-input:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--motion-tap) var(--ease-out-quart),
        transform var(--motion-tap) var(--ease-out-quart),
        opacity var(--motion-tap) var(--ease-out-quart);
    flex-shrink: 0;
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--brand-hover);
    transform: scale(1.05);
}

.chat-send-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chat-send-btn.stop-streaming {
    background: var(--icon-btn-hover);
}

.chat-send-btn.stop-streaming:hover:not(:disabled) {
    background: var(--text-em);
    transform: scale(1.05);
}

/* Summary action buttons container */
.summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* Copy/regenerate button under summary */
.copy-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color var(--motion-tap) var(--ease-out-quart),
        color var(--motion-tap) var(--ease-out-quart),
        background var(--motion-tap) var(--ease-out-quart),
        transform var(--motion-tap) var(--ease-out-quart);
    animation: fadeUp var(--motion-enter) var(--ease-out-quart) both;
}

.summary-actions .copy-summary-btn:nth-child(2) {
    animation-delay: 0.06s;
}

.copy-summary-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.copy-summary-btn:active {
    transform: translateY(0) scale(0.98);
}

.copy-summary-btn.copied {
    color: var(--text);
    border-color: var(--border-hover);
}

/* ── Reduced motion: keep feedback, drop travel / spin ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-enter: 0.01ms;
        --motion-tap: 0.01ms;
        --motion-toast: 0.01ms;
    }

    .spinner,
    .chat-spinner {
        animation: none;
        border-top-color: var(--spinner-head);
        opacity: 0.88;
    }

    .streaming-placeholder .pulse-dot {
        animation: none;
        opacity: 0.55;
    }

    .suggestion-skeleton {
        animation: none;
        opacity: 0.55;
    }

    .footer-btn:hover:not(:disabled),
    .footer-btn:active:not(:disabled),
    .suggestion-btn:hover,
    .suggestion-btn:active,
    .copy-summary-btn:hover,
    .copy-summary-btn:active,
    .icon-btn:hover,
    .icon-btn:active,
    .chat-send-btn:hover:not(:disabled),
    .chat-send-btn:active:not(:disabled) {
        transform: none;
    }
}