/* =============================================
   Agenic AI Chatbot
   ============================================= */

/* ── Design Tokens (Agenic Assist UI Library) ────────
 *
 * Dünner Alias-Layer auf tokens.css. Nichts hier definiert eigene
 * Roh-Werte – alle Farben/Spacings/Radien/Typografie kommen aus dem
 * globalen Token-System. Was hier lebt, sind nur:
 *   • Kurze Aliase, die den Code im Widget lesbarer machen
 *   • Wirklich komponenten-lokale Buckets (Button-Padding-Skala),
 *     deren Werte global wenig Sinn ergeben.
 *
 * Sobald ein Wert global gebraucht wird → in tokens.css verschieben.
 */

.ag-chatbot {
    /* Brand — direkt durchgereicht */
    --ag-teal:        var(--color-brand-primary);
    --ag-green:       var(--color-brand-secondary);
    --ag-mint:        var(--color-brand-mint);
    --ag-ink:         var(--color-brand-ink);
    --ag-ink-soft:    var(--color-brand-ink-soft);
    --ag-brand:       var(--gradient-brand-horizontal);
    --ag-brand-soft:  var(--gradient-brand-horizontal-soft);

    /* Foreground auf invertiertem/Glas-Hintergrund */
    --ag-fg:          var(--color-text-on-inverse);
    --ag-fg-muted:    var(--color-text-on-inverse-muted);
    --ag-fg-dim:      var(--color-text-on-inverse-dim);
    --ag-fg-faint:    var(--color-text-on-inverse-faint);

    /* Glas-Oberflächen */
    --ag-glass:         var(--color-surface-glass);
    --ag-glass-strong:  var(--color-surface-glass-mid);
    --ag-glass-bright:  var(--color-surface-glass-high);
    --ag-border:        var(--color-border-on-inverse);
    --ag-border-strong: var(--color-border-on-inverse-strong);

    /* Shapes */
    --ag-chatbot-radius-pill:    var(--radius-pill);
    --ag-chatbot-radius-card:    var(--radius-lg);
    --ag-chatbot-radius-input:   var(--radius-xl);
    --ag-chatbot-radius-surface: var(--radius-xl);

    /* Button-Größen-Buckets — semantisch, nicht ad-hoc.
       Padding/FS-Tupel statt mehrerer Einzel-Tokens, damit jeder Button
       genau ein Token konsumiert und es keine Drift gibt. */
    --agc-btn-pill-pad:    var(--space-3) var(--space-5);
    --agc-btn-pill-fs:     var(--fs-200);
    --agc-btn-chip-pad:    var(--space-2) var(--space-3);
    --agc-btn-chip-fs:     var(--fs-100);
    --agc-btn-icon-size:   var(--space-8);
    --agc-btn-icon-radius: var(--radius-md);

    /* Motion — vereinheitlicht alle Übergänge/Animationen */
    --ag-motion-fast: var(--motion-fast);
    --ag-motion-base: var(--motion-base);
    --ag-ease:        var(--ease-out);
}

/* ── Animations ────────────────────────────────── */

@keyframes ag-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-6px); }
}

@keyframes ag-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ag-slide-right {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ag-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ag-row-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Container ─────────────────────────────────── */

.ag-chatbot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 400px;
    padding: var(--ag-chatbot-padding, 28px) var(--ag-chatbot-padding, 28px)
             calc(var(--ag-chatbot-padding, 28px) + 4px);
    box-sizing: border-box;
    color: var(--ag-fg);
    gap: var(--space-4);

    /* Backdrop (opt-in via widget controls). Defaults transparent so the
       host page's gradient stays visible. */
    background-color: var(--ag-chatbot-bg, transparent);
    border-radius: var(--ag-chatbot-radius, 0);
    border: 1px solid var(--ag-chatbot-border, transparent);
    backdrop-filter: blur(var(--ag-chatbot-frost-blur, 0))
                     saturate(var(--ag-chatbot-frost-saturate, 1));
    -webkit-backdrop-filter: blur(var(--ag-chatbot-frost-blur, 0))
                             saturate(var(--ag-chatbot-frost-saturate, 1));
    isolation: isolate;
    overflow: hidden;
}

/* ── Header card ─────────────────────────────────
   Dark rounded band that groups the intro question with the input pill.
   Topographic deco lives in its top-right corner. */
/* Flush dark band: stretches to the chatbot container edges by undoing
   the container's padding on top/left/right. Bottom stays flush against
   the next sibling (input pill). */
.ag-chatbot__header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6) var(--space-5);
    margin:
        calc(var(--ag-chatbot-padding, 28px) * -1)
        calc(var(--ag-chatbot-padding, 28px) * -1)
        0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ag-ink) 55%, transparent) 0%,
            color-mix(in srgb, var(--ag-ink) 38%, transparent) 100%);
    border: none;
    border-bottom: 1px solid var(--ag-border);
    border-radius: 0;
    overflow: hidden;
    isolation: isolate;
    backdrop-filter: blur(var(--blur-glass-md)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--blur-glass-md)) saturate(1.1);
}

/* Deko-Linien deaktiviert */
.ag-chatbot__deco { display: none; }

.ag-chatbot__header > * { position: relative; z-index: 1; }

.ag-chatbot__deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    max-width: 420px;
    height: auto;
    color: var(--ag-fg-faint);
    pointer-events: none;
    z-index: 0;
    opacity: .85;
}

/* ── Avatar ────────────────────────────────────── */

.ag-chatbot__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ag-glass-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    flex-shrink: 0;
}
.ag-chatbot__avatar svg { width: 44px; height: 44px; }

/* ── Hero text ─────────────────────────────────── */

.ag-chatbot__hero {
    text-align: left;
    margin: 0;
    flex-shrink: 0;
    transition: opacity .35s, transform .35s, max-height .45s;
    max-width: 60%;
}
.ag-chatbot__hero.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    max-height: 0;
    margin: 0;
    overflow: hidden;
}

/*
 * Hard reset to prevent WordPress/theme h2 styles bleeding in.
 * (Themes set margin, padding, font-size, text-transform on h2 globally.)
 */
.ag-chatbot .ag-chatbot__greeting {
    all: unset;
    display: block;
    font-size: var(--fs-200);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ag-fg);
    margin: 0;
    max-width: 560px;
}
.ag-chatbot .ag-chatbot__subtitle {
    all: unset;
    display: block;
    font-size: var(--fs-150);
    line-height: 1.55;
    color: var(--ag-fg-dim);
    margin: 0;
    max-width: 480px;
}

/* ── Message stream ────────────────────────────── */

.ag-chatbot__messages {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    overflow-y: auto;
    padding-bottom: var(--space-3);
    min-height: 0;
}

/*
 * Empty state: messages area takes no space → suggestions sit
 * directly below the hero without a large gap.
 * JS adds/removes .is-empty on the chatbot root.
 */
.ag-chatbot.is-empty .ag-chatbot__messages {
    flex: 0 0 0;
    overflow: hidden;
    padding: 0;
}
.ag-chatbot:not(.is-empty) .ag-chatbot__messages {
    flex: 1;
    margin-bottom: var(--space-4);
}

/* ── TYPE: simple (chat bubble) ────────────────── */

.ag-chatbot__message {
    max-width: 80%;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--ag-chatbot-radius-pill);
    font-size: var(--fs-200);
    line-height: 1.5;
    word-break: break-word;
    animation: ag-fade-up .25s ease;
}
.ag-chatbot__message--bot {
    background: var(--ag-glass);
    backdrop-filter: blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
    border: 1px solid var(--ag-border);
    align-self: flex-start;
    color: var(--ag-fg);
    /* Tail corner: top-left squarer, like a speech bubble */
    border-top-left-radius: var(--radius-md);
}
.ag-chatbot__message--user {
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
    border: 1px solid var(--ag-border-strong);
    color: var(--ag-fg);
    align-self: flex-end;
    font-weight: var(--fw-medium);
    /* Tail corner: top-right squarer, like a speech bubble */
    border-top-right-radius: var(--radius-md);
}
.ag-chatbot__message--error {
    background: color-mix(in srgb, var(--color-feedback-danger) 22%, transparent);
    border-color: color-mix(in srgb, var(--color-feedback-danger) 45%, transparent);
}

/* Markdown-rendered rich message — clean typography, no bubble */
.ag-chatbot__message--rich {
    max-width: 100%;
    width: 100%;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--space-1) var(--space-1) var(--space-1);
    border-radius: 0;
    color: var(--ag-fg);
}
.ag-chatbot__message--rich .ag-md-h,
.ag-response__intro .ag-md-h {
    all: unset;
    display: block;
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    color: var(--ag-fg);
    /* Generous lead-in space, tight to the content that follows */
    margin: var(--space-8) 0 var(--space-2);
    letter-spacing: -.01em;
}
.ag-chatbot__message--rich .ag-md-h:first-child,
.ag-response__intro .ag-md-h:first-child { margin-top: 2px; }
.ag-chatbot__message--rich h4.ag-md-h,
.ag-response__intro h4.ag-md-h {
    font-size: var(--fs-200);
    color: var(--ag-fg-muted);
}
.ag-chatbot__message--rich .ag-md-p,
.ag-response__intro .ag-md-p {
    all: unset;
    display: block;
    font-size: var(--fs-200);
    line-height: 1.65;
    color: var(--ag-fg-muted);
    margin: 0 0 var(--space-1);
}
.ag-chatbot__message--rich .ag-md-list,
.ag-response__intro .ag-md-list {
    all: unset;
    display: block;
    margin: var(--space-1) 0 var(--space-2) 0;
    padding: 0;
    list-style: none;
}
.ag-chatbot__message--rich .ag-md-list li,
.ag-response__intro .ag-md-list li {
    position: relative;
    padding-left: var(--space-3);
    margin-bottom: var(--space-1);
    font-size: var(--fs-200);
    line-height: 1.55;
    color: var(--ag-fg);
}
.ag-chatbot__message--rich .ag-md-list li::before,
.ag-response__intro .ag-md-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--ag-fg-dim);
    font-size: var(--fs-300);
    line-height: 1.3;
}
.ag-chatbot__message--rich code {
    background: var(--ag-glass-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-1);
    font-family: monospace;
    font-size: var(--fs-150);
}

/* Typing / status pill — small left-aligned chip with rotating brand mark */
.ag-chatbot__message--typing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    max-width: 100%;
    width: auto;
    align-self: flex-start;
    background: var(--ag-glass-strong);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-chatbot-radius-pill);
    border-top-left-radius: var(--radius-md);
    font-size: var(--fs-150);
    line-height: 1.3;
}

.ag-typing__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ag-brand);
    color: var(--ag-fg);
    flex-shrink: 0;
    animation: ag-spin 1.6s linear infinite;
}
.ag-typing__dots::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
}
/* Hide legacy dot spans if still rendered */
.ag-chatbot__dot { display: none; }

/* Custom loading icon (widget setting) replaces the default spinner mark */
.ag-typing__dots--custom {
    background: none;
    animation: none;
}
.ag-typing__dots--custom::before { content: none; }
.ag-typing__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
.ag-typing__icon--spin-cw {
    animation: ag-spin var(--ag-chatbot-loading-spin-speed, 1.2s) linear infinite;
}
.ag-typing__icon--spin-ccw {
    animation: ag-spin-ccw var(--ag-chatbot-loading-spin-speed, 1.2s) linear infinite;
}

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

.ag-typing__phrase {
    margin: 0;
    font-size: var(--fs-100);
    color: var(--ag-fg-dim);
    line-height: 1.3;
    transition: opacity .22s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.ag-typing__phrase.is-fading { opacity: 0; }

/* ── Rich response wrapper ─────────────────────── */

.ag-response {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: ag-fade-up .3s ease;
}
.ag-response__intro {
    margin: 0;
    font-size: var(--fs-200);
    line-height: 1.65;
    color: var(--ag-fg);
    max-width: 640px;
}

/* ═══════════════════════════════════════════════
   TYPE: guide  (Stepper)
   Identity: structured, educational, progressive
   ═══════════════════════════════════════════════ */

.ag-guide {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 680px;
    width: 100%;
}

.ag-guide__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 var(--space-4);
    position: relative;
}

/* Left track: circle + connector line */
.ag-guide__track {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ag-guide__node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ag-brand);
    color: var(--ag-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-150);
    font-weight: var(--fw-extrabold);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ag-teal) 20%, transparent);
}

.ag-guide__connector {
    width: 1.5px;
    flex: 1;
    min-height: 12px;
    background: linear-gradient(to bottom, var(--ag-glass-bright) 0%, var(--ag-glass) 100%);
    margin: var(--space-1) 0;
}
.ag-guide__item:last-child .ag-guide__connector { display: none; }

/* Right: step card */
.ag-guide__card {
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
    border: 1px solid var(--ag-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-200);
    line-height: 1.6;
    color: var(--ag-fg);
    margin-bottom: var(--space-2);
    animation: ag-slide-right .3s ease both;
    min-width: 0;
    overflow-wrap: break-word;
}
.ag-guide__item:nth-child(1) .ag-guide__card { animation-delay: .04s; }
.ag-guide__item:nth-child(2) .ag-guide__card { animation-delay: .10s; }
.ag-guide__item:nth-child(3) .ag-guide__card { animation-delay: .16s; }
.ag-guide__item:nth-child(4) .ag-guide__card { animation-delay: .22s; }
.ag-guide__item:nth-child(5) .ag-guide__card { animation-delay: .28s; }
.ag-guide__item:nth-child(6) .ag-guide__card { animation-delay: .34s; }
.ag-guide__item:nth-child(7) .ag-guide__card { animation-delay: .40s; }

/* ═══════════════════════════════════════════════
   TYPE: content-list  (Card Grid)
   Identity: editorial, discovery, image-led
   ═══════════════════════════════════════════════ */

.ag-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    width: 100%;
}

.ag-content-card {
    display: flex;
    flex-direction: column;
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    border: 1px solid var(--ag-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ag-fg);
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
    animation: ag-fade-up .35s ease both;
}
.ag-content-card:nth-child(1) { animation-delay: .05s; }
.ag-content-card:nth-child(2) { animation-delay: .11s; }
.ag-content-card:nth-child(3) { animation-delay: .17s; }
.ag-content-card:nth-child(4) { animation-delay: .23s; }
.ag-content-card:nth-child(5) { animation-delay: .29s; }
.ag-content-card:nth-child(6) { animation-delay: .35s; }

.ag-content-card:hover {
    background: var(--ag-glass-bright);
    border-color: var(--ag-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
}

/* Media area with gradient overlay */
.ag-content-card__media {
    position: relative;
    width: 100%;
    height: 150px;
    background: var(--ag-glass);
    overflow: hidden;
    flex-shrink: 0;
}
.ag-content-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ag-content-card:hover .ag-content-card__media img {
    transform: scale(1.04);
}
.ag-content-card__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.45) 100%);
}

/* Placeholder when no thumbnail */
.ag-content-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ag-content-card__media--placeholder svg {
    width: 32px; height: 32px;
    fill: var(--ag-fg-faint);
}

/* Badge over image */
.ag-content-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(var(--blur-glass-sm));
    -webkit-backdrop-filter: blur(var(--blur-glass-sm));
    color: var(--ag-fg);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    z-index: 1;
}
.ag-content-card__badge--download {
    background: rgba(200,140,0,.6);
    color: #fff8e0;
}
.ag-content-card__badge--objektkultur {
    background: rgba(34,139,74,.75);
    color: #e6f7ed;
}
.ag-content-card__badge--inway {
    background: rgba(30,95,175,.75);
    color: #dceeff;
}

/* Card body */
.ag-content-card__body {
    padding: var(--space-3) var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}
.ag-content-card__title {
    font-size: var(--fs-200);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    margin: 0;
    color: var(--ag-fg);
}
.ag-content-card__excerpt {
    font-size: var(--fs-100);
    line-height: 1.5;
    color: var(--ag-fg-muted);
    margin: 0;
    flex: 1;
}
.ag-content-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-2);
    font-size: var(--fs-100);
    color: var(--ag-fg-dim);
    gap: var(--space-1);
    transition: color .15s;
}
.ag-content-card:hover .ag-content-card__footer { color: var(--ag-fg); }
.ag-content-card__footer svg {
    width: 14px; height: 14px;
    fill: currentColor;
    transition: transform .15s;
}
.ag-content-card:hover .ag-content-card__footer svg { transform: translateX(2px); }

/* ═══════════════════════════════════════════════
   TYPE: cta  (Call-to-Action Card)
   Identity: glass, prominent border, urgent
   ═══════════════════════════════════════════════ */

/* Vertical layout — works with any content length */
.ag-cta-card {
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    animation: ag-scale-in .3s ease .08s both;
    box-sizing: border-box;
}

/* Top row: small icon + label */
.ag-cta-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ag-cta-card__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    background: var(--ag-glass-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ag-cta-card__icon svg { width: 15px; height: 15px; fill: #fff; }
.ag-cta-card__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-extrabold);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ag-fg-dim);
    margin: 0;
}

/* Body text — full width, supports markdown */
.ag-cta-card__content { width: 100%; }
.ag-cta-card__text {
    font-size: var(--fs-200);
    color: var(--ag-fg);
    margin: 0;
    line-height: 1.65;
}
/* Markdown inside CTA text */
.ag-cta-card__text .ag-md-h {
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    margin: var(--space-2) 0 var(--space-1);
    color: var(--ag-fg);
}
.ag-cta-card__text .ag-md-p { margin: 0 0 6px; }
.ag-cta-card__text .ag-md-p:last-child { margin-bottom: 0; }
.ag-cta-card__text .ag-md-list {
    margin: var(--space-1) 0 var(--space-1) var(--space-4);
    padding: 0;
}
.ag-cta-card__text .ag-md-list li { margin-bottom: 3px; }

/* Button */
.ag-cta-card__btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--agc-btn-pill-pad);
    background: var(--ag-glass-bright);
    border: 1px solid var(--ag-border-strong);
    color: var(--ag-fg);
    border-radius: var(--ag-chatbot-radius-pill);
    font-size: var(--agc-btn-pill-fs);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
    align-self: flex-start;
    white-space: nowrap;
    box-sizing: border-box;
}
.ag-cta-card__btn:hover { background: var(--ag-glass-bright); transform: translateX(2px); color: var(--ag-fg); }
.ag-cta-card__btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* Inline CTA pill (appended to other types) */
.ag-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: var(--ag-glass-bright);
    border: 1px solid var(--ag-border-strong);
    color: var(--ag-fg);
    border-radius: var(--ag-chatbot-radius-pill);
    font-size: var(--fs-200);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    align-self: flex-start;
    transition: background .15s, transform .15s;
    animation: ag-fade-up .3s ease .12s both;
}
.ag-cta-pill:hover { background: var(--ag-glass-bright); transform: translateY(-1px); color: var(--ag-fg); }
.ag-cta-pill svg { width: 15px; height: 15px; fill: currentColor; }

/* ═══════════════════════════════════════════════
   TYPE: comparison  (Table)
   Identity: analytical, structured, comparative
   ═══════════════════════════════════════════════ */

.ag-comparison {
    width: 100%;
}
.ag-comparison__scroll {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--ag-border);
    background: var(--ag-glass);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    -webkit-overflow-scrolling: touch;
}
.ag-comparison__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-200);
    min-width: 380px;
}

/* Header */
.ag-comparison__table thead tr {
    background: var(--ag-glass-strong);
}
.ag-comparison__table thead th {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--fw-bold);
    font-size: var(--fs-150);
    letter-spacing: .02em;
    color: var(--ag-fg);
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--ag-border);
}
.ag-comparison__table thead th:first-child {
    text-align: left;
    color: var(--ag-fg-dim);
    font-weight: var(--fw-medium);
    font-size: var(--fs-100);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Body rows */
.ag-comparison__table tbody tr {
    border-bottom: 1px solid var(--ag-border);
    animation: ag-row-in .3s ease both;
    transition: background .15s;
}
.ag-comparison__table tbody tr:nth-child(1) { animation-delay: .06s; }
.ag-comparison__table tbody tr:nth-child(2) { animation-delay: .11s; }
.ag-comparison__table tbody tr:nth-child(3) { animation-delay: .16s; }
.ag-comparison__table tbody tr:nth-child(4) { animation-delay: .21s; }
.ag-comparison__table tbody tr:nth-child(5) { animation-delay: .26s; }
.ag-comparison__table tbody tr:nth-child(6) { animation-delay: .31s; }
.ag-comparison__table tbody tr:nth-child(7) { animation-delay: .36s; }
.ag-comparison__table tbody tr:nth-child(8) { animation-delay: .41s; }
.ag-comparison__table tbody tr:last-child { border-bottom: none; }
.ag-comparison__table tbody tr:hover { background: var(--ag-glass); }

.ag-comparison__table td {
    padding: var(--space-3) var(--space-5);
    color: var(--ag-fg);
    text-align: center;
    vertical-align: middle;
    line-height: 1.45;
    font-size: var(--fs-200);
}
.ag-comparison__table td:first-child {
    text-align: left;
    color: var(--ag-fg-muted);
    font-weight: var(--fw-medium);
    font-size: var(--fs-150);
    border-right: 1px solid var(--ag-border);
    min-width: 140px;
}
.ag-comparison__table td:not(:first-child) {
    border-left: 1px solid var(--ag-border);
}

/* Value indicators */
.ag-comparison__val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-200);
    line-height: 1;
    font-weight: var(--fw-medium);
}
.ag-comparison__val--yes {
    color: #7fffa0;
}
.ag-comparison__val--no {
    color: rgba(255,110,100,.85);
}
.ag-comparison__val--partial {
    color: rgba(255,220,80,.85);
}

/* ═══════════════════════════════════════════════
   TYPE: topic-hub  (Categorized Directory)
   Identity: exploratory, organized, scannable
   ═══════════════════════════════════════════════ */

.ag-topic-hub {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 700px;
}

.ag-topic-category {
    background: var(--ag-glass);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    border: 1px solid var(--ag-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: ag-fade-up .35s ease both;
}
.ag-topic-category:nth-child(1) { animation-delay: .05s; }
.ag-topic-category:nth-child(2) { animation-delay: .13s; }
.ag-topic-category:nth-child(3) { animation-delay: .21s; }
.ag-topic-category:nth-child(4) { animation-delay: .29s; }

.ag-topic-category__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--ag-border);
    background: var(--ag-glass);
}
.ag-topic-category__icon {
    font-size: var(--fs-200);
    line-height: 1;
}
.ag-topic-category__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-extrabold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ag-fg-muted);
    margin: 0;
}
.ag-topic-category__count {
    margin-left: auto;
    font-size: var(--fs-100);
    color: var(--ag-fg-faint);
    font-weight: var(--fw-medium);
}

.ag-topic-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--ag-fg);
    border-bottom: 1px solid var(--ag-border);
    transition: background .15s;
}
.ag-topic-link:last-child { border-bottom: none; }
.ag-topic-link:hover { background: var(--ag-glass); }

.ag-topic-link__title {
    flex: 1;
    font-size: var(--fs-200);
    line-height: 1.4;
    color: var(--ag-fg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ag-topic-link__arrow {
    font-size: var(--fs-300);
    color: var(--ag-fg-faint);
    flex-shrink: 0;
    transition: color .15s, transform .15s;
    line-height: 1;
}
.ag-topic-link:hover .ag-topic-link__arrow {
    color: var(--ag-fg-muted);
    transform: translateX(3px);
}

/* ═══════════════════════════════════════════════
   TYPE: category-cards  (Categorized Card Shelves)
   Identity: organized discovery, image-led, browsable
   ═══════════════════════════════════════════════ */

.ag-catcards {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
}

.ag-catcards__section {
    animation: ag-fade-up .35s ease both;
}

/* Category header */
.ag-catcards__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
}

.ag-catcards__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-extrabold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ag-fg);
    position: relative;
    padding-left: var(--space-3);
}
.ag-catcards__label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--ag-glass-bright);
    border-radius: var(--radius-sm);
}

.ag-catcards__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    background: var(--ag-glass-strong);
    border-radius: var(--ag-chatbot-radius-pill);
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    color: var(--ag-fg-dim);
}

/* Wrapping flex shelf – cards flow horizontally and wrap into next row */
.ag-catcards__shelf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ag-catcards__card {
    flex: 0 0 210px;
    width: 210px;
    animation: ag-fade-up .3s ease both;
}
.ag-catcards__card:nth-child(1) { animation-delay: .06s; }
.ag-catcards__card:nth-child(2) { animation-delay: .12s; }
.ag-catcards__card:nth-child(3) { animation-delay: .18s; }
.ag-catcards__card:nth-child(4) { animation-delay: .24s; }
.ag-catcards__card:nth-child(5) { animation-delay: .30s; }

@media (max-width: 480px) {
    .ag-catcards__card {
        flex: 0 0 150px;
        width: 150px;
    }
}

/* ── Suggestion pills ──────────────────────────── */

.ag-chatbot__suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-3) var(--space-2);
    margin: var(--space-2) 0 var(--space-5);
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
}

.ag-chatbot.is-empty .ag-chatbot__suggestions { margin-top: var(--space-6); }

/*
 * Suggestion-Chips kommen vollständig aus ui.css (.ag-chip.ag-chip--inverse).
 * Hier nur Layout-Anpassungen für den Compact-State.
 */
.ag-chatbot__suggestions.is-compact {
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

/* ── Input area ────────────────────────────────── */

/* ── Input pill (top of widget) ──────────────────
   Fully rounded glass pill with a thin outlined NE-arrow send button. */
.ag-chatbot__input-area {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 100%;
    background: var(--ag-glass);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--ag-chatbot-radius-pill);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
    box-sizing: border-box;
    flex-shrink: 0;
    transition: border-color .18s, background .18s;
    min-height: 52px;
}
.ag-chatbot__input-area:focus-within {
    border-color: var(--ag-border-strong);
    background: var(--ag-glass);
}
.ag-chatbot__input-area--top { margin-bottom: 0; }

/*
 * Position swap: while empty the input sits where it is in source order
 * (directly under the header). After the first message the chatbot becomes
 * `:not(.is-empty)` and the input moves to the bottom by means of CSS order,
 * so it "runs along" with the conversation.
 */
.ag-chatbot:not(.is-empty) .ag-chatbot__input-area {
    order: 80;
    margin-top: var(--space-1);
}
.ag-chatbot:not(.is-empty) .ag-chatbot__suggestions {
    order: 90;
    margin-top: var(--space-2);
}
.ag-chatbot:not(.is-empty) .ag-chatbot__disclaimer {
    order: 100;
}

.ag-chatbot__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ag-fg);
    font-size: var(--fs-200);
    font-family: inherit;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.6;
    padding: var(--space-1) 0;
    caret-color: var(--ag-mint);
}
.ag-chatbot__input::placeholder { color: var(--ag-fg-dim); }

/* Send button — gradient-filled circle, dark ink arrow */
.ag-chatbot__send {
    flex-shrink: 0;
    width: var(--agc-btn-icon-size); height: var(--agc-btn-icon-size);
    background: var(--ag-brand);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter var(--ag-motion-fast), transform var(--ag-motion-fast), box-shadow var(--ag-motion-base);
    padding: 0;
    color: var(--ag-ink);
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--ag-teal) 45%, transparent);
}
.ag-chatbot__send:hover  {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--ag-green) 55%, transparent);
}
.ag-chatbot__send:active { transform: scale(.92); }
.ag-chatbot__send:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.ag-chatbot__send svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════
   Related pages shelf (appended to all types)
   Identity: strong CTA, direct, high-contrast
   ═══════════════════════════════════════════════ */

.ag-related-shelf {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    animation: ag-fade-up .3s ease .1s both;
    padding: 0;
}

.ag-related-shelf__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-1);
    border-bottom: none;
    background: transparent;
}
.ag-related-shelf__icon svg {
    width: 13px;
    height: 13px;
    fill: var(--ag-fg-faint);
    display: block;
}
.ag-related-shelf__label {
    font-size: var(--fs-150);
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ag-fg-muted);
}

/* Horizontal scroll track */
.ag-related-shelf__track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: var(--space-1) var(--space-1) var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ag-fg-faint) transparent;
}
.ag-related-shelf__track::-webkit-scrollbar { height: 3px; }
.ag-related-shelf__track::-webkit-scrollbar-track { background: transparent; }
.ag-related-shelf__track::-webkit-scrollbar-thumb {
    background: var(--ag-glass-bright);
    border-radius: var(--radius-sm);
}

/* Individual related card */
.ag-related-card {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    background: var(--ag-ink);
    border: 1px solid var(--ag-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ag-fg);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    animation: ag-fade-up .3s ease both;
    box-shadow: 0 6px 18px -10px rgba(0,0,0,.45);
}
.ag-related-card:hover {
    transform: translateY(-3px);
    border-color: var(--ag-border);
    color: var(--ag-fg);
    box-shadow: 0 16px 32px -12px rgba(0,0,0,.55);
}

/* Thumbnail */
.ag-related-card__thumb {
    width: 100%;
    height: 132px;
    overflow: hidden;
    background: var(--ag-glass);
    flex-shrink: 0;
}
.ag-related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ag-related-card:hover .ag-related-card__thumb img {
    transform: scale(1.05);
}
.ag-related-card__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ag-related-card__thumb--empty svg {
    width: 28px;
    height: 28px;
    fill: var(--ag-fg-faint);
}

/* Card body — dark brand band */
.ag-related-card__body {
    padding: var(--space-3) var(--space-3) var(--space-3);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-2);
    flex: 1;
    background: var(--ag-ink);
    color: var(--ag-fg);
    position: relative;
}

.ag-related-card__title {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--ag-fg);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ag-related-card__cta {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ag-glass);
    color: var(--ag-fg-muted);
    transition: background .15s, color .15s, transform .15s;
    font-size: 0;
}
.ag-related-card:hover .ag-related-card__cta {
    background: var(--ag-brand);
    color: var(--ag-ink);
    transform: translateX(2px);
}
.ag-related-card__cta svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════
   Link preview panel (split view)
   ═══════════════════════════════════════════════ */

/* Page push when panel is open */
html.ag-preview-active {
    padding-right: var(--ag-preview-width, 50vw);
    transition: padding-right .4s cubic-bezier(.4,0,.2,1);
    box-sizing: border-box;
}
html.ag-preview-fullscreen {
    padding-right: 0 !important;
}

/* Panel */
.ag-preview-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--ag-preview-width, 50vw);
    height: 100dvh;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -6px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
    border-left: 1px solid rgba(0,0,0,.08);
}
.ag-preview-panel.is-open {
    transform: translateX(0);
}
.ag-preview-panel.is-fullscreen {
    width: 100vw;
}

/* Top bar */
.ag-preview-panel__bar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: #f7f7f8;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
    height: 52px;
    box-sizing: border-box;
}

.ag-preview-panel__url {
    flex: 1;
    font-size: var(--fs-100);
    color: #555;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ag-preview-panel__btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--agc-btn-icon-size);
    height: var(--agc-btn-icon-size);
    border-radius: var(--agc-btn-icon-radius);
    cursor: pointer;
    color: #666;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    text-decoration: none;
    box-sizing: border-box;
}
.ag-preview-panel__btn:hover {
    background: #ebebeb;
    color: #1a1a1a;
}
.ag-preview-panel__btn--close:hover {
    background: #fee2e2;
    color: #dc2626;
}
.ag-preview-panel__btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    display: block;
}

/* Loader */
.ag-preview-panel__loader {
    position: absolute;
    inset: 52px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: #f7f7f8;
    transition: opacity .2s;
    z-index: 1;
}
.ag-preview-panel__loader.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.ag-preview-panel__loader p {
    font-size: var(--fs-150);
    color: #888;
    margin: 0;
}
.ag-preview-panel__spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid #e0e0e0;
    border-top-color: #4a9e6b;
    border-radius: 50%;
    animation: ag-spin .7s linear infinite;
}

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

/* iframe */
.ag-preview-panel__frame {
    flex: 1;
    border: none;
    width: 100%;
    display: block;
}

/* Mobile: full-height sheet from bottom instead of side panel */
@media (max-width: 768px) {
    html.ag-preview-active {
        padding-right: 0;
        padding-bottom: 65vh;
    }
    html.ag-preview-fullscreen {
        padding-bottom: 0 !important;
    }
    .ag-preview-panel {
        width: 100vw;
        height: 65vh;
        top: auto;
        bottom: 0;
        transform: translateY(100%);
        border-left: none;
        border-top: 1px solid rgba(0,0,0,.1);
        box-shadow: 0 -6px 40px rgba(0,0,0,.15);
        /* iOS Notch / Home Indicator */
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ag-preview-panel.is-open { transform: translateY(0); }
    .ag-preview-panel.is-fullscreen {
        height: 100dvh;
        top: 0;
        padding-bottom: 0;
    }
    .ag-preview-panel__loader { inset: 52px 0 0; }
    .ag-preview-panel__bar {
        padding-left: max(var(--space-3), env(safe-area-inset-left));
        padding-right: max(var(--space-3), env(safe-area-inset-right));
    }
}

/* ═══════════════════════════════════════════════
   Contact Form (inline CTA)
   ═══════════════════════════════════════════════ */

@keyframes ag-form-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.ag-contact-form {
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-lg));
    -webkit-backdrop-filter: blur(var(--blur-glass-lg));
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin-top: var(--space-3);
    animation: ag-form-in .38s cubic-bezier(.22,1,.36,1) both;
    position: relative;
    box-sizing: border-box;
}

.ag-contact-form__heading {
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    color: var(--ag-fg);
    margin: 0;
    letter-spacing: -.02em;
}

.ag-contact-form__sub {
    font-size: var(--fs-150);
    color: var(--ag-fg-dim);
    margin: -6px 0 0;
    line-height: 1.5;
}

.ag-contact-form__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ag-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ag-contact-form__label {
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ag-fg-dim);
}

.ag-contact-form__input {
    background: var(--ag-glass);
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--ag-fg);
    font-size: var(--fs-200);
    font-family: inherit;
    outline: none;
    transition: border-color .15s, background .15s;
    width: 100%;
    box-sizing: border-box;
}
.ag-contact-form__input::placeholder {
    color: var(--ag-fg-faint);
}
.ag-contact-form__input:focus {
    border-color: var(--ag-border-strong);
    background: var(--ag-glass-strong);
}

.ag-contact-form__textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.55;
}

.ag-contact-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-100);
    color: var(--ag-fg-dim);
    line-height: 1.55;
    cursor: pointer;
}

.ag-contact-form__checkbox {
    flex-shrink: 0;
    margin-top: var(--space-1);
    accent-color: var(--ag-fg-muted);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.ag-contact-form__error {
    display: none;
    font-size: var(--fs-150);
    color: rgba(255,160,140,.95);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: rgba(220,60,40,.15);
    border-radius: var(--radius-md);
    border: 1px solid rgba(220,60,40,.28);
    line-height: 1.45;
}

.ag-contact-form__submit {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--agc-btn-pill-pad);
    background: var(--ag-glass-bright);
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--ag-chatbot-radius-pill);
    color: var(--ag-fg);
    font-size: var(--agc-btn-pill-fs);
    font-weight: var(--fw-semibold);
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .15s, opacity .15s;
    align-self: flex-start;
    box-sizing: border-box;
    white-space: nowrap;
}
.ag-contact-form__submit:hover:not(:disabled) {
    background: var(--ag-glass-bright);
    transform: translateX(2px);
}
.ag-contact-form__submit:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}
.ag-contact-form__submit svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Success state */
.ag-contact-form--success {
    align-items: center;
    padding: var(--space-8) var(--space-6);
}

.ag-contact-form__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.ag-contact-form__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    background: rgba(80,200,120,.2);
    border: 2px solid rgba(80,200,120,.45);
    border-radius: 50%;
    font-size: var(--fs-600);
    color: rgba(140,255,175,.95);
    animation: ag-scale-in .35s ease both;
}

.ag-contact-form__success p {
    font-size: var(--fs-200);
    color: var(--ag-fg);
    margin: 0;
    line-height: 1.6;
    max-width: 340px;
}

@media (max-width: 580px) {
    .ag-contact-form {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }
}

/* ═══════════════════════════════════════════════
   Contact CTA banner (appended after every response)
   Identity: subtle, inline, non-intrusive nudge
   ═══════════════════════════════════════════════ */

.ag-contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    background: var(--ag-glass-strong);
    backdrop-filter: blur(var(--blur-glass-md));
    -webkit-backdrop-filter: blur(var(--blur-glass-md));
    border: 1px solid var(--ag-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    width: 100%;
    box-sizing: border-box;
    animation: ag-fade-up .32s ease .05s both;
    flex-wrap: wrap;
}

.ag-contact-cta__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 0;
}

.ag-contact-cta__headline {
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    color: var(--ag-fg);
    margin: 0;
    line-height: 1.35;
    letter-spacing: -.01em;
    transition: opacity .25s;
}

.ag-contact-cta--loading .ag-contact-cta__headline,
.ag-contact-cta--loading .ag-contact-cta__subline {
    opacity: .55;
}

.ag-contact-cta__subline {
    font-size: var(--fs-200);
    color: var(--ag-fg-dim);
    margin: 0;
    line-height: 1.5;
}

.ag-contact-cta__btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--agc-btn-pill-pad);
    background: var(--ag-glass-bright);
    border: 1px solid var(--ag-border-strong);
    color: var(--ag-fg);
    border-radius: var(--ag-chatbot-radius-pill);
    font-size: var(--agc-btn-pill-fs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ag-contact-cta__btn:hover {
    background: var(--ag-glass-bright);
    transform: translateX(2px);
    color: var(--ag-fg);
}
.ag-contact-cta__btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Contact form inside the CTA banner */
.ag-contact-cta .ag-contact-form {
    margin-top: var(--space-2);
    width: 100%;
    flex-basis: 100%;
}

/* Vertikal stapeln, sobald der Button den Text sonst auf wenige Zeichen
   pro Zeile quetschen würde. */
@media (max-width: 640px) {
    .ag-contact-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .ag-contact-cta__btn {
        align-self: stretch;
        justify-content: center;
    }
}

/* ── Disclaimer ────────────────────────────────── */

.ag-chatbot__disclaimer {
    font-size: var(--fs-100);
    color: var(--ag-fg-faint);
    text-align: center;
    margin: var(--space-1) 0 0;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* ── Responsive ────────────────────────────────── */

/* ── Tablet (max 1024px) ────────────────────────── */
@media (max-width: 1024px) {
    .ag-chatbot__messages {
        max-width: 100%;
    }
    .ag-chatbot__input-area {
        max-width: 100%;
    }
    .ag-chatbot__suggestions {
        max-width: 90%;
    }
}

/* ── Phablet / Large Mobile (max 768px) ─────────── */
@media (max-width: 768px) {
    /* Padding über die Variable steuern, damit die negativen Margins des
       Header-Bandes synchron bleiben und nicht über die overflow-Kante ragen. */
    .ag-chatbot {
        --ag-chatbot-padding: var(--space-4);
        min-height: 300px;
    }
    .ag-chatbot__header {
        padding: var(--space-4) var(--space-5);
    }
    .ag-chatbot__suggestions {
        max-width: 100%;
    }
    .ag-chatbot__hero {
        max-width: 100%;
    }
    .ag-chatbot__deco {
        width: 70%;
        opacity: .6;
    }
    .ag-guide {
        max-width: 100%;
    }
    .ag-topic-hub {
        max-width: 100%;
    }
    .ag-response__intro {
        max-width: 100%;
    }
}

/* ── Mobile (max 640px) ─────────────────────────── */
@media (max-width: 640px) {
    .ag-chatbot {
        --ag-chatbot-padding: var(--space-3);
    }
    .ag-chatbot__header {
        padding: var(--space-4);
    }

    .ag-chatbot__avatar {
        width: 60px;
        height: 60px;
        margin-bottom: var(--space-4);
    }
    .ag-chatbot__avatar svg {
        width: 36px;
        height: 36px;
    }

    .ag-chatbot .ag-chatbot__greeting {
        font-size: clamp(var(--fs-300), 5vw, var(--fs-500));
    }

    /* Dichteres Chip-Layout: kleinere Chips + engere Abstände, damit die
       langen Labels nicht je eine eigene Zeile beanspruchen. */
    .ag-chatbot__suggestions {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
    .ag-chatbot__suggestions .ag-chip {
        --chip-px: var(--space-3);
        --chip-py: var(--space-1);
    }

    .ag-chatbot__messages {
        gap: var(--space-3);
    }

    .ag-chatbot__message {
        max-width: 92%;
        font-size: var(--fs-200);
    }
    .ag-chatbot__message--rich {
        max-width: 100%;
    }

    .ag-chatbot__input-area {
        padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
        min-height: 48px;
    }
    .ag-chatbot__input {
        font-size: 16px; /* Verhindert Auto-Zoom auf iOS */
    }
    .ag-chatbot__send {
        width: 40px;
        height: 40px;
    }

    .ag-content-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ag-cta-card {
        padding: var(--space-4) var(--space-4) var(--space-4);
    }
    .ag-cta-card__btn {
        align-self: stretch;
        justify-content: center;
    }

    .ag-contact-form {
        max-width: 100%;
    }
    .ag-contact-form__submit {
        align-self: stretch;
        justify-content: center;
    }

    .ag-catcards__card {
        flex: 0 0 170px;
        width: 170px;
    }

    .ag-related-card {
        flex: 0 0 160px;
    }
}

/* ── Small Mobile (max 480px) ───────────────────── */
@media (max-width: 480px) {
    .ag-chatbot {
        --ag-chatbot-padding: var(--space-3);
        gap: var(--space-3);
    }

    .ag-chatbot__messages {
        gap: var(--space-3);
    }

    .ag-chatbot__message {
        max-width: 96%;
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-200);
    }

    .ag-chatbot__suggestions {
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }
    .ag-guide__item {
        grid-template-columns: 32px 1fr;
        gap: 0 var(--space-3);
    }
    .ag-guide__node {
        width: 30px;
        height: 30px;
        font-size: var(--fs-100);
    }

    .ag-catcards__card {
        flex: 0 0 150px;
        width: 150px;
    }

    .ag-related-card {
        flex: 0 0 145px;
    }
    .ag-related-card__thumb {
        height: 90px;
    }
}

/* ── Extra Small Mobile (max 420px) ────────────── */
@media (max-width: 420px) {
    .ag-content-grid {
        grid-template-columns: 1fr;
    }

    .ag-chatbot__input {
        font-size: var(--fs-300);
    }

    .ag-catcards__shelf {
        gap: var(--space-2);
    }
    .ag-catcards__card {
        flex: 1 1 calc(50% - 4px);
        width: auto;
        min-width: 130px;
    }
}

/* ── Accessibility: Reduced Motion ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .ag-chatbot__message,
    .ag-response,
    .ag-content-card,
    .ag-guide__card,
    .ag-cta-card,
    .ag-related-shelf,
    .ag-contact-form,
    .ag-topic-category,
    .ag-catcards__card {
        animation: none !important;
        transition: none !important;
    }
    .ag-chatbot__dot,
    .ag-typing__icon--spin-cw,
    .ag-typing__icon--spin-ccw {
        animation: none !important;
    }
    .ag-preview-panel {
        transition: none !important;
    }
    html.ag-preview-active {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════
   Chat-state utility classes
   In Elementor: Advanced → CSS-Klassen
   ═══════════════════════════════════════════════ */

/* Sichtbar sobald Chat gestartet wurde */
.ag_chatStarted-visible {
    display: none !important;
}
body.ag-chat-active .ag_chatStarted-visible {
    display: block !important;
}

/* Versteckt sobald Chat gestartet wurde */
body.ag-chat-active .ag_chatStarted-hidden {
    display: none !important;
}

/* ── Response rating ─────────────────────────────── */

.ag-rating {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1);
    animation: ag-fade-up .25s ease both;
}

.ag-rating__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ag-rating__label {
    font-size: var(--fs-100);
    color: var(--ag-fg-dim);
    margin-right: var(--space-1);
    transition: color .2s;
}

.ag-rating.is-positive .ag-rating__label,
.ag-rating.is-negative .ag-rating__label {
    color: var(--ag-fg-muted);
}

/*
 * Rating-Thumbs nutzen .ag-chip.ag-chip--inverse.ag-chip--icon-only aus ui.css.
 * Nur die Feedback-Färbung (positiv / negativ) ist rating-spezifisch und
 * lebt hier — via Parent-State (.ag-rating.is-positive) und data-vote.
 */
.ag-rating .ag-chip[data-vote] svg {
    pointer-events: none;
}

.ag-rating.is-positive .ag-chip[data-vote="up"].is-active {
    --chip-bg:     color-mix(in srgb, var(--color-feedback-success) 35%, transparent);
    --chip-border: var(--color-feedback-success);
    --chip-text:   color-mix(in srgb, var(--color-feedback-success) 60%, white);
    opacity: 1;
}

.ag-rating.is-negative .ag-chip[data-vote="down"].is-active {
    --chip-bg:     color-mix(in srgb, var(--color-feedback-danger) 25%, transparent);
    --chip-border: var(--color-feedback-danger);
    --chip-text:   color-mix(in srgb, var(--color-feedback-danger) 55%, white);
    opacity: 1;
}

/* Feedback input (visible after 👎) */

.ag-rating__feedback {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    animation: ag-fade-up .2s ease both;
}

.ag-rating__feedback.is-visible {
    display: flex;
}

.ag-rating__textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--ag-glass);
    border: 1px solid rgba(198,40,40,.4);
    border-radius: var(--radius-md);
    color: var(--ag-fg);
    font-size: var(--fs-150);
    line-height: 1.5;
    padding: var(--space-2) var(--space-3);
    resize: none;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}

.ag-rating__textarea::placeholder {
    color: var(--ag-fg-faint);
}

.ag-rating__textarea:focus {
    border-color: rgba(239,83,80,.7);
    background: var(--ag-glass-strong);
}

.ag-rating__fb-actions {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-3);
}

/* Secondary (Glas) statt Brand/Gradient — neutraler Abschluss nach 👎 */
.ag-rating__send {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--ag-border-strong);
    background: var(--ag-glass-bright);
    color: var(--ag-fg);
    font-size: var(--fs-100);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.ag-rating__send:hover:not(:disabled) {
    background: var(--ag-glass-strong);
    border-color: var(--ag-border-strong);
}

.ag-rating__send:disabled {
    opacity: .5;
    cursor: default;
}

.ag-rating__skip {
    background: none;
    border: none;
    color: var(--ag-fg-faint);
    font-size: var(--fs-100);
    cursor: pointer;
    padding: var(--space-1) var(--space-1);
    transition: color .15s;
}

.ag-rating__skip:hover:not(:disabled) {
    color: var(--ag-fg-muted);
}

.ag-rating__skip:disabled {
    opacity: .4;
    cursor: default;
}