/*
 * AiSearch.css — "Die Wiki-KI fragen" (AiSearch.js), loaded while the AI is active.
 *
 *   .ai-hero    the AI-first hero on the home page (AiSearch::renderHero)
 *   .ask        the assistant panel on the right (chat style, one question
 *               at a time)
 *   .ask-fab    the floating button bottom right (only while the button next
 *               to the title is out of view)
 *   .wsp-ask    the "Die Wiki-KI fragen" row in the search overlay
 *
 * The AI is always marked as such: the "KI" badge next to its name, the
 * "KI-Assistent" subtitle, "KI-generiert" on every answer. Behnke blue and
 * the header gradient (behnke-ui.css) carry it.
 */

:root {
    --ai-ink:        #12202f;
    --ai-ink-2:      #4a5868;
    --ai-ink-3:      #5a6878;
    --ai-line:       #dce3ea;
    --ai-line-2:     #e8edf2;
    --ai-soft:       #f6f8fb;
    --ai-tint:       #e3eefa;
    --ai-tint-ink:   #0a4fa8;
    --ai-warn-bg:    #fff4ec;
    --ai-warn-line:  #f3c5a5;
    --ai-warn-ink:   #8a3a0c;
    --ai-brand:      var(--behnke-design, #0066cc);
    --ai-brand-grad: var(--behnke-gradient-connect, linear-gradient(135deg, #0b3d7a, #1a6bb5));
    --ask-width:     420px;
}

/* ── Shared bits: the mark, the "KI" badge, links, buttons ─────────── */

.ai-mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wk-r-m);
    background: var(--ai-brand-grad);
    color: #fff;
}
.ai-mark__logo { display: block; width: 66%; height: 66%; object-fit: contain; }
.ai-mark--sm   { width: 22px; height: 22px; border-radius: var(--wk-r-m); }
.ai-mark--xs   { width: 18px; height: 18px; border-radius: var(--wk-r-m); }

.ai-badge {
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--ai-tint);
    color: var(--ai-tint-ink);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.ai-privacy__link {
    color: var(--ai-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.ai-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ai-ink-3);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ai-linkbtn:hover { color: var(--ai-brand); }

.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--wk-r-m);
    background: var(--ai-brand-grad);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-btn:hover { filter: brightness(1.08); }

.ai-btn--ghost {
    min-height: 34px;
    padding: 0 0.85rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #33414f;
    font-weight: 500;
    font-size: 0.86rem;
}
.ai-btn--ghost:hover { filter: none; border-color: var(--ai-brand); color: var(--ai-brand); }

.ai-btn--soft {
    min-height: 34px;
    padding: 0 0.85rem;
    border: 1px solid #c9dbf2;
    background: #f5f9fe;
    color: var(--ai-tint-ink);
    font-size: 0.88rem;
}
.ai-btn--soft:hover { filter: none; border-color: var(--ai-brand); }

.ai-btn:focus-visible,
.ai-linkbtn:focus-visible,
.ask__close:focus-visible,
.ask__send:focus-visible,
.ask__ctx:focus-visible,
.ask__example:focus-visible,
.ask-a__tool:focus-visible,
.ask-fab:focus-visible,
.wsp-ask:focus-visible,
.ai-intent__ask:focus-visible,
.ai-fb-offer__btn:focus-visible {
    outline: 3px solid rgba(0, 102, 204, 0.4);
    outline-offset: 2px;
}

/* ── Hero (home page) ───────────────────────────────────────────────── */

.wiki-search--hero.ai-hero {
    width: 85%;
    max-width: none;
    gap: 0;
    margin: calc(1.5 * var(--behnke-basic, 16px)) auto calc(1 * var(--behnke-basic, 16px));
    text-align: center;
    color: var(--ai-ink);
}

.home-help:has(.ai-hero) .home-help__solve { width: 85%; }

.ai-hero__title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.ai-hero__sub {
    margin: 0.5rem auto 0;
    max-width: 36em;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ai-ink-2);
}

.ai-hero__form { margin: 1.2rem 0 0; text-align: left; }

.ai-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 56px;
    box-sizing: border-box;
    padding: 0 0.4rem 0 1.1rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: var(--wk-r-l);
    box-shadow: 0 1px 2px rgba(18, 32, 47, 0.05), 0 6px 18px rgba(18, 32, 47, 0.06);
    cursor: text;
    transition: border-color 0.15s;
}
.ai-field:hover { border-color: var(--ai-brand); }

.ai-field__icon { display: flex; color: var(--ai-ink-3); }

/* Beats the sidebar's white-on-dark .wiki-search-input. */
.ai-field .ai-field__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--ai-ink);
    font: inherit;
    font-size: 1.08rem;
    cursor: text;
}
.ai-field .ai-field__input::placeholder { color: #6b7888; }
.ai-field .ai-field__input::-webkit-search-cancel-button { display: none; }

.ai-field__kbd {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-m);
    color: var(--ai-ink-3);
    font: 600 0.75rem/20px inherit;
    text-align: center;
}

.ai-field__submit {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: var(--wk-r-m);
    background: var(--ai-brand);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.ai-field__submit:hover { filter: brightness(0.92); }

.wiki-search--ai.wiki-search--promote .wiki-search-input { animation: none; }
.wiki-search--ai.wiki-search--promote .ai-field { animation: wiki-search-pulse 1.6s ease-out 0.4s 1; }

/* Under the hero field: the assistant, one click away. */
.ai-intent {
    margin: 0.8rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ai-ink-3);
}

/* The assistant is a solid brand block: the second way in, equal to the search. */
.ai-intent__ask {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
    border: 0;
    border-radius: var(--wk-r-m);
    background: var(--wk-accent-fill, var(--ai-brand));
    color: #fff;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--wk-dur-1, 0.15s);
}
.ai-intent__ask:hover { filter: brightness(1.12); }
.ai-intent__ask .ai-badge { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Example questions: one click asks the assistant. */
.ai-examples {
    margin: 0.7rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.5rem;
    font-size: 0.85rem;
}
.ai-examples__label { color: var(--ai-ink-3); }
.ai-example {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-s);
    background: #fff;
    color: var(--ai-ink);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--wk-dur-1, 0.15s), color var(--wk-dur-1, 0.15s);
}
.ai-example:hover { border-color: var(--ai-brand); color: var(--ai-brand); }

/* ── Panel ──────────────────────────────────────────────────────────── */

.ask {
    position: fixed;
    /* Right under the header bar (measured by AiSearch.js), so it never
       covers the panel head. */
    top: var(--ask-top, 0px);
    right: 0;
    bottom: 0;
    /* Above the header bar: should the measured offset ever be off, the
       panel covers the bar rather than the bar covering the panel. */
    z-index: 10000;
    width: var(--ask-width);
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--ai-line);
    box-shadow: -12px 0 40px rgba(8, 20, 40, 0.12);
    color: var(--ai-ink);
    font-size: 0.95rem;
    text-align: left;
    animation: ask-in 0.18s ease-out;
}
.ask[hidden] { display: none; }

@keyframes ask-in { from { transform: translateX(16px); opacity: 0; } }

/* On wide screens the page makes room instead of hiding under the panel. */
@media (min-width: 1200px) {
    html.ask-open:not(.ask-wide) .wiki-main { padding-right: calc(var(--ask-width) + var(--behnke-basic, 16px)); }
}

/* Wide mode: more room for long answers, the text in a centred column.
   The page stays where it is underneath. */
.ask--wide {
    width: min(880px, calc(100vw - 32px));
    box-shadow: -24px 0 80px rgba(8, 20, 40, 0.22);
}
.ask--wide .ask__body { align-items: center; padding: 24px; }
.ask--wide .ask-item,
.ask--wide .ask__intro,
.ask--wide .ask__switch,
.ask--wide .ask__foot > * { width: 100%; max-width: 720px; }
.ask--wide .ask__foot { display: flex; flex-direction: column; align-items: center; }
.ask--wide .ask__ctx { align-self: center; width: auto; }
.ask--wide .ask-a__body { font-size: 0.98rem; }

.ask__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 14px 14px 12px 16px;
    border-bottom: 1px solid var(--ai-line-2);
}
.ask__mark { width: 34px; height: 34px; border-radius: var(--wk-r-m); }
.ask__titles { flex: 1 1 auto; min-width: 0; }
.ask__title { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; font-weight: 700; }
.ask__sub { margin-top: 2px; font-size: 0.76rem; color: var(--ai-ink-3); }

.ask__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--wk-r-m);
    background: transparent;
    color: var(--ai-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ask__close:hover { background: #f2f5f9; color: var(--ai-ink); }

.ask__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
    overscroll-behavior: contain;
}

/* Welcome / switched off / empty */
.ask__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.ask__intro--welcome { margin-top: auto; margin-bottom: auto; }
.ask__intro-mark { width: 44px; height: 44px; border-radius: var(--wk-r-l); }
.ask__intro-title { margin: 0.2rem 0 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ask__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ai-ink-2); }
.ask__pending {
    margin: 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--wk-r-m);
    background: #fff;
    border: 1px solid var(--ai-line);
    font-size: 0.88rem;
    color: var(--ai-ink-2);
}
.ask__pending strong { color: var(--ai-ink); }

.ask__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }

.ask__examples { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; margin-top: 0.2rem; }
.ask__example {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-m);
    background: #fff;
    color: var(--ai-ink);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.ask__example svg { flex: 0 0 auto; color: var(--ai-brand); }
.ask__example:hover { border-color: var(--ai-brand); }

.ask__switch { margin-top: auto; text-align: center; }

/* One question and its answer */
.ask-item { display: flex; flex-direction: column; gap: 8px; }

.ask-q { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ask-q__text {
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-radius: var(--wk-r-l) var(--wk-r-l) 4px var(--wk-r-l);
    background: var(--ai-tint);
    color: var(--ai-ink);
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ask-q__ctx { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--ai-ink-3); }

.ask-a {
    padding: 12px 14px;
    border: 1px solid var(--ai-line);
    border-radius: 4px var(--wk-r-l) var(--wk-r-l) var(--wk-r-l);
    background: #fff;
}
.ask-a__head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.ask-a__name { font-weight: 700; }
.ask-a__gen {
    padding: 1px 6px;
    border: 1px solid #b9cde6;
    border-radius: var(--wk-r-s);
    color: var(--ai-tint-ink);
    font-size: 0.68rem;
    font-weight: 600;
}
.ask-a__status { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--ai-ink-2); }
.ask-a__msg {
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--wk-r-m);
    background: var(--ai-soft);
    color: var(--ai-ink-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.ask-a__body {
    margin-top: 0.55rem;
    font-size: 0.93rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.ask-a__body > :first-child { margin-top: 0; }
.ask-a__body > :last-child { margin-bottom: 0; }
.ask-a__body p { margin: 0 0 0.65em; }
.ask-a__body ul,
.ask-a__body ol { margin: 0 0 0.65em; padding-left: 1.3em; }
.ask-a__body li + li { margin-top: 0.3em; }
.ask-a__body h1,
.ask-a__body h2,
.ask-a__body h3,
.ask-a__body h4 { margin: 0.9em 0 0.3em; font-size: 0.95rem; font-weight: 700; }
.ask-a__body a { color: var(--ai-brand); }
.ask-a__body code { padding: 0.1em 0.35em; border-radius: var(--wk-r-m); background: #f1f4f8; font-size: 0.9em; }
.ask-a__body pre { overflow-x: auto; padding: 0.7em 0.9em; border-radius: var(--wk-r-m); background: #f1f4f8; }
.ask-a__body pre code { padding: 0; background: none; }
.ask-a__body table { display: block; overflow-x: auto; border-collapse: collapse; }
.ask-a__body th,
.ask-a__body td { padding: 0.3em 0.55em; border: 1px solid var(--ai-line); }

/* Steps as a checklist to tick off while working */
.ask-a__body ol.ai-checklist { list-style: none; padding-left: 0; }
.ai-checklist > li { position: relative; padding: 0.4em 0.5em 0.4em 2em; border-radius: var(--wk-r-m); }
.ai-checklist > li + li { margin-top: 0.2em; }
.ai-checklist > li:hover { background: var(--ai-soft); }
.ai-check {
    position: absolute;
    left: 0.5em;
    top: 0.58em;
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--ai-brand);
    cursor: pointer;
}
.ai-checklist > li.is-done { color: var(--ai-ink-3); text-decoration: line-through; text-decoration-color: rgba(90, 104, 120, 0.5); }

.ai-caret {
    display: inline-block;
    width: 0.5em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -0.15em;
    border-radius: 2px;
    background: var(--ai-brand);
    animation: ai-caret 1s steps(1) infinite;
}

/* Progress: queued → wiki searched → writing */
.ai-steps {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: #33414f;
}
.ai-step { display: flex; align-items: center; gap: 0.35rem; }
.ai-step__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eef1f5;
    color: var(--ai-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-step__dot i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ai-step.is-done .ai-step__dot { background: var(--ai-tint); color: var(--ai-brand); }
.ai-step.is-active { color: var(--ai-tint-ink); font-weight: 600; }
.ai-step.is-active .ai-step__dot { background: var(--ai-brand); color: #fff; animation: ai-pulse 1.4s ease-out infinite; }
.ai-step-line { width: 14px; height: 2px; border-radius: 2px; background: #d5e2f2; }

/* Sources */
.ai-sources { margin-top: 0.8rem; }
.ai-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ai-ink-3);
}
.ai-sources__list { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ai-source {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-s);
    background: var(--ai-soft);
    color: var(--ai-ink);
    font-size: 0.8rem;
    text-decoration: none;
}
.ai-source:hover { border-color: var(--ai-brand); background: #fff; color: var(--ai-ink); }
.ai-source__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18em; }
.ai-source__kind { color: var(--ai-ink-3); font-size: 0.7rem; font-weight: 700; }
.ai-num {
    flex: 0 0 auto;
    min-width: 17px;
    height: 17px;
    box-sizing: border-box;
    padding: 0 4px;
    border-radius: var(--wk-r-m);
    background: var(--ai-tint);
    color: var(--ai-tint-ink);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ask-a__tools { margin-top: 0.6rem; display: flex; gap: 0.3rem; }
.ask-a__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--wk-r-m);
    background: transparent;
    color: var(--ai-ink-3);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.ask-a__tool:hover { background: #f2f5f9; color: var(--ai-ink); }

/* Foot: context, input, the note with privacy and the way to a person */
.ask__foot {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--ai-line-2);
    background: #fff;
}

.ask__ctx {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 3px 10px;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-s);
    background: #fff;
    color: var(--ai-ink-2);
    font: inherit;
    font-size: 0.76rem;
    cursor: pointer;
}
.ask__ctx[hidden] { display: none; }
.ask__ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask__ctx.is-on { border-color: #b9cde6; background: var(--ai-tint); color: var(--ai-tint-ink); }

.ask__warn {
    margin: 0 0 8px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--ai-warn-line);
    border-radius: var(--wk-r-m);
    background: var(--ai-warn-bg);
    color: var(--ai-warn-ink);
    font-size: 0.84rem;
    line-height: 1.45;
}
.ask__warn[hidden] { display: none; }

.ask__form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
    padding: 6px 6px 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--wk-r-l);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ask__form:focus-within { border-color: var(--ai-brand); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.14); }

.ask__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 24px;
    max-height: 140px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--ai-ink);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}
.ask__input:disabled { cursor: not-allowed; }

.ask__send {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--wk-r-m);
    background: var(--ai-brand-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ask__input:disabled + .ask__send { opacity: 0.4; cursor: not-allowed; }

.ask__note {
    margin: 8px 2px 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--ai-ink-3);
}
.ask__note a { color: var(--ai-ink-2); }
.ask__human { display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; }

/* ── Support ticket inside the panel ("Mit einem Menschen sprechen") ── */

.ask__support-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--ai-line-2);
    background: #f8fafc;
}
.ask__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: var(--ai-brand);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}
.ask__back svg { transform: rotate(180deg); }
.ask__back:focus-visible { outline: 3px solid rgba(0, 102, 204, 0.4); outline-offset: 2px; }
.ask__support-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ai-ink-2); }
.ask__support-title strong { color: var(--ai-ink); }

/* ── Floating button ────────────────────────────────────────────────── */
/* Above the accessibility trigger (bottom 20 px) and the "to top" button
   (bottom 76 px), both 48 px tall — the latter shows up exactly when this
   one does, after scrolling down. */

.ask-fab {
    position: fixed;
    right: 20px;
    bottom: 132px;
    z-index: 1800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 0.85rem 0 0.4rem;
    border: 0;
    border-radius: var(--wk-r-s);
    background: var(--ai-brand-grad);
    color: #fff;
    box-shadow: 0 10px 28px rgba(8, 40, 90, 0.35);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    animation: ask-fab-in 0.18s ease-out;
}
.ask-fab[hidden] { display: none; }
.ask-fab:hover { filter: brightness(1.08); }
.ask-fab .ai-mark { background: rgba(255, 255, 255, 0.18); width: 32px; height: 32px; border-radius: var(--wk-r-s); }
.ask-fab .ai-badge { background: rgba(255, 255, 255, 0.2); color: #fff; }

@keyframes ask-fab-in { from { transform: translateY(8px); opacity: 0; } }

/* ── The bottom-right buttons make way for the open panel ──────────── */
/* Accessibility, "to top", cookie settings and quick access move to the
   left of the panel (and further in wide mode) instead of hiding under it.
   On phones the panel fills the screen and they are hidden (below). */

html.ask-open        { --ask-shift: var(--ask-width); }
html.ask-open.ask-wide { --ask-shift: min(880px, calc(100vw - 32px)); }

.ax-trigger,
.scroll-to-top,
.ax-panel,
.cookie-trigger,
.wiki-quick-access { transition: right 0.18s ease; }

@media (min-width: 701px) {
    html.ask-open .ax-trigger,
    html.ask-open .scroll-to-top     { right: calc(20px + var(--ask-shift)); }
    html.ask-open .ax-panel          { right: calc(16px + var(--ask-shift)); }
    html.ask-open .cookie-trigger    { right: calc(76px + var(--ask-shift)); }
    html.ask-open .wiki-quick-access { right: calc(132px + var(--ask-shift)); }
}

/* Phones: the panel is full screen — the buttons go away entirely, also for
   keyboard and screen readers, and come back when it closes. */
@media (max-width: 700px) {
    html.ask-open .ax-trigger,
    html.ask-open .scroll-to-top,
    html.ask-open .ax-panel,
    html.ask-open .cookie-trigger,
    html.ask-open .wiki-quick-access,
    html.ask-open .wiki-feedback-dock { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-trigger,
    .scroll-to-top,
    .ax-panel,
    .cookie-trigger,
    .wiki-quick-access { transition: none; }
}

/* ── Row in the search overlay ──────────────────────────────────────── */

.wsp-ask {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 4px;
    padding: 10px;
    border: 0;
    border-bottom: 1px solid var(--ai-line-2);
    border-radius: var(--wk-r-m) var(--wk-r-m) 0 0;
    background: transparent;
    color: var(--ai-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.wsp-ask:hover,
.wsp-ask.is-question { background: #f2f6fc; }
.wsp-ask__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wsp-ask__title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ai-brand); }
.wsp-ask__q { font-size: 0.86rem; color: var(--ai-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-ask__kbd {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-m);
    background: #fff;
    color: var(--ai-ink-3);
    font-size: 0.72rem;
    font-weight: 600;
}

/* ── After "Nein, nicht hilfreich" (WikiFeedback.js) ────────────────── */

.ai-fb-offer { margin: 0 0 0.8rem; }
.ai-fb-offer__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #c9dbf2;
    border-radius: var(--wk-r-m);
    background: #f5f9fe;
    color: var(--ai-tint-ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.ai-fb-offer__btn:hover { border-color: var(--ai-brand); }

/* ── Motion, phone, print ───────────────────────────────────────────── */

@keyframes ai-pulse { from { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.45); } to { box-shadow: 0 0 0 8px rgba(0, 102, 204, 0); } }
@keyframes ai-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ask,
    .ask-fab,
    .ai-step.is-active .ai-step__dot,
    .ai-caret,
    .wiki-search--ai.wiki-search--promote .ai-field { animation: none; }
}

@media (max-width: 700px) {
    .wiki-search--hero.ai-hero,
    .home-help:has(.ai-hero) .home-help__solve { width: 100%; }
    .ai-field { height: 52px; padding-left: 0.9rem; }
    .ai-field__kbd { display: none; }
    .ask,
    .ask--wide { width: 100vw; border-left: 0; }
    .ask__wide { display: none; }
    .ask-fab { padding: 0 6px; }
    .ask-fab__label,
    .ask-fab .ai-badge { display: none; }
}

@media print {
    .ask,
    .ask-fab { display: none !important; }
}

/* ── The chat inside the search window ──────────────────────────────── */

.ask.ask--docked {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: none;
    animation: none;
}

/* The tabs of the window name the assistant; its own head is not needed. */
.ask--docked .ask__head { display: none; }

/* Questions are solid brand bubbles: the chat reads as a conversation. */
.ask-q__text {
    background: var(--wk-accent-fill, var(--ai-brand));
    color: #fff;
}

/* ── Ways in (the assistant stays opt-in: each of these only opens the chat, whose first screen asks) ── */

/* Nothing found: the assistant's row becomes the main action of the window. */
.wsp__panel.is-nohits .wsp__ai { padding: 12px 16px 0; }
.wsp__panel.is-nohits .wsp-ask {
    background: var(--wk-accent-fill, var(--ai-brand));
    border-color: transparent;
    color: #fff;
}
.wsp__panel.is-nohits .wsp-ask * { color: inherit; }

/* The consent screen: four short points instead of a block of text. */
.ask__points { margin: 0.2rem 0 0.1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.ask__points li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.45; color: var(--ai-ink-2); }
.ask__points li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--ai-brand); }

/* End of an article: a question right where it comes up. */
.ai-foot {
    padding: 14px 16px;
    border: 1px solid var(--ai-line);
    border-left: 4px solid var(--ai-brand);
    border-radius: var(--wk-r-m);
    background: #fff;
}
.ai-foot__head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ai-ink); }
.ai-foot__title { min-width: 0; }
.ai-foot__form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.ai-foot__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    padding: 0 0.8rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--wk-r-m);
    font: inherit;
    color: var(--ai-ink);
}
.ai-foot__input:focus { outline: 2px solid var(--ai-brand); outline-offset: 1px; }
.ai-foot__btn {
    flex: 0 0 auto;
    padding: 0 1.1rem;
    border: 0;
    border-radius: var(--wk-r-m);
    background: var(--wk-accent-fill, var(--ai-brand));
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ai-foot__btn:hover { filter: brightness(1.12); }

/* ── Ticket as a conversation ("Mit einem Menschen sprechen") ───────── */

.ask-q__text { white-space: pre-wrap; }
.tk-say { margin: 0.45rem 0 0; font-size: 0.93rem; line-height: 1.55; color: var(--ai-ink); }
.tk-actions { display: flex; flex-direction: column; gap: 0.6rem; }

.tk-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ai-line);
    border-radius: var(--wk-r-m);
    background: #fff;
    font-size: 0.88rem;
}
.tk-summary dt { color: var(--ai-ink-3); font-weight: 600; }
.tk-summary dd { margin: 0; color: var(--ai-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.tk-privacy a { color: var(--ai-brand); }

/* The solved human check lives here, out of sight (it needs to stay in the page to run). */
.ask__hc-form { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }