/*
 * Modern answer presentation
 * Loaded after the legacy styles so the existing application and tool cards
 * keep their behavior while chat answers, price results and sources get a
 * calmer editorial layout.
 */

.chat-messages {
    max-width: 1040px;
    padding-top: 40px;
    padding-inline: clamp(20px, 4.5vw, 48px);
}

.message + .message {
    margin-top: 38px;
}

.message-user + .message-ai {
    margin-top: 30px;
}

.message-ai .message-text {
    max-width: 800px;
    font-size: 1.04rem;
    line-height: 1.72;
    letter-spacing: -0.008em;
}

.message-ai .message-text:has(.hw-card),
.message-ai .message-text:has(.hw-document),
.message-ai .message-text:has(.hw-tool-result) {
    max-width: 100%;
}

.message-content p {
    margin-bottom: 18px;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin-top: 26px;
    margin-bottom: 10px;
    letter-spacing: -0.025em;
}

.message-content h1 { font-size: 1.48rem; }
.message-content h2 { font-size: 1.28rem; }
.message-content h3 { font-size: 1.1rem; }

.message-content ul,
.message-content ol {
    margin: 10px 0 18px;
    padding-left: 24px;
}

.message-content li {
    margin-bottom: 7px;
    padding-left: 3px;
}

.message-actions {
    gap: 3px;
    margin-top: 12px;
}

.message-actions button,
.message-actions .msg-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #7c8799;
}

.message-actions button:hover,
.message-actions .msg-action-btn:hover {
    color: var(--text-primary);
    background: #f3f6f9;
}

sup.fn-ref {
    margin-inline: 1px;
}

sup.fn-ref a {
    color: var(--primary);
    text-decoration: none;
    border-radius: 4px;
}

sup.fn-ref a:hover,
sup.fn-ref a:focus-visible {
    color: var(--primary-hover);
    background: var(--primary-light);
    outline: none;
}

/* Shared answer surfaces match the chat and sidebar accent. */
:root {
    --output-accent: #1d6bf3;
    --output-accent-hover: #1859cf;
    --output-soft: #edf4ff;
    --output-line: var(--border-subtle, #e2e8f0);
    --output-muted: var(--text-tertiary, #64748b);
    --output-ink: var(--text-primary, #0f172a);
    --output-card: var(--bg-card, #fff);
    --output-surface: var(--bg-surface, #f8fafc);
}

/* Answer tables: full width, quiet row dividers and aligned values. */
.hw-answer-table {
    width: 100%;
    min-width: 0;
    margin: 24px 0;
    border: 1px solid var(--output-line);
    border-radius: 16px;
    background: var(--output-card);
    overflow: hidden;
    box-shadow: 0 2px 6px #19365804;
}
.hw-answer-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--output-line);
}
.hw-answer-table-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--output-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.hw-answer-table-label i { color: var(--output-accent); font-size: 14px; }
.hw-answer-table-count { flex: none; color: var(--output-muted); font-size: 12px; }
.hw-answer-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.hw-answer-table-scroll:focus-visible { outline: 2px solid var(--output-accent); outline-offset: -3px; }
.message-ai .message-text .hw-answer-table table {
    display: table;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0;
}
.message-ai .message-text .hw-answer-table :is(th, td) {
    padding: 15px 20px;
    min-width: 120px;
    max-width: 400px;
    border: 0;
    border-bottom: 1px solid var(--output-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}
.message-ai .message-text .hw-answer-table th {
    padding-block: 12px;
    color: var(--text-secondary, #334155);
    background: var(--output-surface);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.message-ai .message-text .hw-answer-table td { color: var(--text-secondary, #334155); }
.message-ai .message-text .hw-answer-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--output-surface) 55%, var(--output-card)); }
.message-ai .message-text .hw-answer-table tbody tr:hover td { background: var(--output-soft); }
.message-ai .message-text .hw-answer-table tr:last-child td { border-bottom: 0; }
.message-ai .message-text .hw-answer-table td:first-child { color: var(--output-ink); font-weight: 500; }
.message-ai .message-text .hw-answer-table .hw-answer-numeric {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.message-ai .message-text .hw-answer-table td.hw-answer-numeric { color: var(--output-ink); font-weight: 600; }
.message-ai .message-text .hw-answer-table caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Product gallery: image first, with simple captions directly in the answer. */
.hw-preis-panel {
    container: product-panel / inline-size;
    min-width: 0;
    max-width: 820px;
    margin-top: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.hw-preis-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(100%, 220px), calc((100% - 36px) / 3));
    grid-template-columns: none;
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 2px 0 8px;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #dedede transparent;
}
.hw-preis-grid::-webkit-scrollbar { height: 4px; }
.hw-preis-grid::-webkit-scrollbar-thumb { border-radius: 4px; background: #dedede; }
.hw-preis-grid:focus-visible { outline: 2px solid var(--output-accent); outline-offset: 3px; border-radius: 14px; }
.hw-preis-karte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--output-ink);
    text-decoration: none;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: none;
    transition: none;
}
.hw-preis-karte:hover { transform: none; border: 0; box-shadow: none; text-decoration: none; }
.hw-preis-karte:focus-visible { outline: 2px solid var(--output-accent); outline-offset: -2px; border-radius: 14px 14px 4px 4px; }
/* Product shots sit whole on white, as in the shop: "cover" cut off the
   article and pushed brand stamps from the image corners into view. */
.hw-preis-bild {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: none;
    margin: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
    overflow: hidden;
}
.hw-preis-karte:hover .hw-preis-bild { transform: none; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
.hw-preis-foto {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8%;
    object-fit: contain;
    mix-blend-mode: normal;
    transition: transform 220ms ease;
}
.hw-preis-karte:hover .hw-preis-foto { transform: scale(1.025); }
.hw-preis-platzhalter-box { display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #f3f3f3; color: #777; font-size: 12px; }
.hw-preis-bild-leer .hw-preis-platzhalter-box { display: flex; }
.hw-preis-platzhalter { color: #bababa; font-size: 30px; }
.hw-preis-body { display: flex; flex-direction: column; flex: none; gap: 4px; min-width: 0; padding: 10px 4px 0; }
.hw-preis-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; color: var(--output-ink); font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; overflow-wrap: anywhere; }
a.hw-preis-karte:hover .hw-preis-name { text-decoration: underline; text-underline-offset: 3px; }
.hw-preis-description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: #6b6b6b; font-size: 14px; line-height: 1.55; letter-spacing: 0; }
.hw-preis-pricing { display: inline; margin: 0; padding: 0; }
.hw-preis-betrag, .hw-preis-einheit, .hw-preis-sub { display: inline; margin: 0; padding: 0; color: inherit; font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: 0; }
.hw-preis-betrag { font-variant-numeric: tabular-nums; }
.hw-preis-zweit { margin: 0; color: #6b6b6b; font-size: 12px; line-height: 1.5; }
.hw-preis-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 3px; }
.hw-preis-meta:empty { display: none; }
.hw-preis-shop {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 3px 7px;
    border: 0;
    border-radius: 999px;
    background: #f3f3f3;
    color: #686868;
    box-shadow: none;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
}
.hw-preis-shop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-preis-shop img { flex: none; width: 12px; height: 12px; border-radius: 50%; object-fit: contain; }
.hw-preis-lager { display: inline; width: auto; margin: 0; padding: 0; background: transparent; color: #6b6b6b; font-size: 10px; font-weight: 400; line-height: 1.5; }
.hw-preis-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.hw-preis-hinweis { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #777; font-size: 11px; line-height: 1.5; }
.hw-preis-nav { display: inline-flex; flex: none; gap: 4px; }
.hw-preis-nav[hidden] { display: none; }
.hw-preis-nav-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f3f3; color: #555; cursor: pointer; transition: background 160ms ease; }
.hw-preis-nav-btn:hover:not(:disabled) { background: #e8e8e8; color: #222; }
.hw-preis-nav-btn:disabled { opacity: .35; cursor: default; }
.hw-preis-nav-btn:focus-visible { outline: 2px solid var(--output-accent); outline-offset: 2px; }
.hw-preis-panel-leer { margin-top: 18px; padding: 0; border: 0; background: transparent; }
.hw-preis-panel-leer .hw-preis-hinweis { display: flex; align-items: flex-start; gap: 8px; }
.hw-preis-hinweis-icon { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 0; background: transparent; color: #777; font-size: 12px; }
@container product-panel (max-width: 720px) {
    .hw-preis-grid { grid-auto-columns: calc((100% - 18px) / 2); }
}
@container product-panel (max-width: 480px) {
    .hw-preis-grid { grid-auto-columns: 82%; gap: 14px; }
    .hw-preis-nav-btn { width: 44px; height: 44px; }
}

/* Sources sit next to the text as small neutral labels. */
.message-ai .message-text sup.hw-inline-citation { position: static; top: auto; vertical-align: middle; margin-inline: 4px; font-size: 10px; line-height: 1; }
.message-ai .message-text a.hw-inline-source { display: inline-flex; align-items: center; vertical-align: middle; gap: 4px; max-width: 160px; padding: 3px 7px; border: 0; border-radius: 999px; background: #f3f3f3; color: #686868; font-size: 10px; font-weight: 400; line-height: 1.3; text-decoration: none; }
.message-ai .message-text a.hw-inline-source:hover { background: #e8e8e8; color: #222; }
.message-ai .message-text a.hw-inline-source:focus-visible { outline: 2px solid var(--output-accent); outline-offset: 2px; }
.hw-inline-source img { width: 12px; height: 12px; flex: none; border-radius: 50%; object-fit: contain; }
.hw-inline-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================================================
   WEB SOURCES — compact, quiet supporting material
   =================================================== */
.chat-sources-attachment { max-width: 820px; margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chat-sources-attachment:hover { border: 0; box-shadow: none; }
.chat-sources-header { margin-bottom: 8px; }
.chat-sources-title { gap: 6px; color: #737373; font-size: 11px; font-weight: 400; }
.chat-sources-title > i { display: none; }
.chat-sources-count { color: #737373; font-weight: 400; }
.chat-sources-toggle { padding: 4px 7px; border: 0; background: transparent; color: #737373; font-size: 10px; }
.chat-sources-toggle:hover { background: #f3f3f3; color: #333; }
.chat-sources-chips { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding: 0; }
.chat-source-chip { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 5px; width: auto; min-width: 0; max-width: 200px; min-height: 0; padding: 4px 8px; border: 0; border-radius: 999px; background: #f3f3f3; color: #686868; box-shadow: none; font-size: 10px; text-decoration: none; }
.chat-source-chip:hover { border: 0; background: #e8e8e8; color: #222; box-shadow: none; transform: none; }
.chat-source-chip:focus-visible { outline: 2px solid var(--output-accent); outline-offset: 2px; }
.chat-source-chip :is(.chat-source-chip-nr, .chat-source-chip-title, .chat-source-chip-ext) { display: none; }
.chat-source-chip-info { min-width: 0; }
.chat-source-chip-domain { color: inherit; font-size: 10px; font-weight: 400; line-height: 1.4; }
.chat-source-chip-favicon { width: 12px; height: 12px; border-radius: 50%; }
.chat-source-chip-nr { width: 21px; height: 21px; background: #f3f3f3; color: #686868; font-size: 10px; }

.chat-sources-details {
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e1e7ee;
}

.chat-sources-details[hidden] {
    display: none !important;
}

.chat-source-detail-item {
    gap: 10px;
    padding: 10px 11px;
    border-color: #e7ebf0;
    border-radius: 11px;
    background: #fff;
}

.chat-source-detail-item:hover {
    border-color: #cbd8e5;
    background: #f9fbfd;
}

.chat-source-detail-title {
    font-size: 0.8rem;
}

.chat-source-detail-snippet {
    color: #667085;
    font-size: 0.75rem;
    line-height: 1.48;
}

@media (max-width: 840px) {
    .chat-messages { padding-inline: 20px; }
}
@media (max-width: 600px) {
    .chat-messages { padding: 24px 14px 136px; }
    .message + .message { margin-top: 30px; }
    .message-ai .message-text { max-width: 100%; font-size: 1rem; line-height: 1.66; }
    .hw-answer-table { margin-block: 20px; border-radius: 13px; }
    .hw-answer-table-head { padding: 12px 14px; }
    .message-ai .message-text .hw-answer-table :is(th, td) { padding: 12px 14px; min-width: 110px; }
    .hw-preis-panel { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-preis-karte, .hw-preis-foto, .hw-preis-nav-btn { transition: none; }
    .hw-preis-grid { scroll-behavior: auto; }
    .hw-preis-karte:hover, .hw-preis-karte:hover .hw-preis-foto { transform: none; }
}
@media print {
    .hw-preis-panel { container-type: normal; }
    .hw-preis-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
    .hw-preis-karte { break-inside: avoid; }
    .hw-preis-nav { display: none; }
    .hw-answer-table, .hw-answer-table-scroll { overflow: visible; }
    .message-ai .message-text .hw-answer-table :is(th, td) { min-width: 0; white-space: normal; }
}