/*
 * AiSearch.css — "Frag das Wiki" (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 "Frag das Wiki" 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: 8px;
    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: 6px; }
.ai-mark--xs   { width: 18px; height: 18px; border-radius: 5px; }

.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: 10px;
    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: 14px;
    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: 6px;
    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: 10px;
    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);
}

.ai-intent__ask {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    border: 1px solid var(--ai-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ai-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.ai-intent__ask: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: 9px; }
.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: 8px;
    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: 12px; }
.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: 10px;
    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: 10px;
    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: 14px 14px 4px 14px;
    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 14px 14px 14px;
    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: 999px;
    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: 10px;
    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: 5px; background: #f1f4f8; font-size: 0.9em; }
.ask-a__body pre { overflow-x: auto; padding: 0.7em 0.9em; border-radius: 10px; 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: 8px; }
.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: 999px;
    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: 5px;
    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: 6px;
    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: 999px;
    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: 10px;
    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: 14px;
    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: 10px;
    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 .ask__foot { display: none; }
.ask--support .ask__body { padding: 0; gap: 0; background: #fff; align-items: stretch; }

.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); }

.ask__frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    background: #fff;
}

/* ── 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: 999px;
    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: 999px; }
.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: 10px 10px 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: 5px;
    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: 10px;
    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; }
}