/* Übergang & Ladeanimation der KI-Suche (Startseite -> Filterseite, KI-Tab).
   Optik angelehnt an KI-Übersichten: schimmernde Platzhalterzeilen während der
   Analyse, danach erscheinen die Antwortblöcke einzeln weich eingeblendet. */

/* Farbvariablen wie in filter-page.css/ai-search.css — diese Datei wird auch
   auf Seiten geladen, die nur eine der beiden mitbringt. */
:root {
    --hellblau: #EDF5FF;
    --dunkelblau: #2C5669;
    --mblau: #1A6D93;
    --morange: #FFC85E;
    --wblack: #1c1b1b;
}

/* ---------- Übergangs-Overlay (Startseite, bis die Zielseite steht) -------- */

.ai-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 32, 45, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: aiOverlayIn 0.25s ease both;
}

.ai-transition-card {
    width: min(560px, 100%);
    background: #ffffff;
    border-radius: 22px;
    padding: 1.7rem 1.8rem 1.5rem;
    box-shadow: 0 24px 60px rgba(15, 32, 45, 0.28);
    animation: aiCardIn 0.4s cubic-bezier(0.2, 0.8, 0.25, 1) both;
    text-align: left;
}

.ai-transition-query {
    display: block;
    margin: 0.1rem 0 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dunkelblau, #2C5669);
    line-height: 1.35;
}

.ai-transition-query::before {
    content: "„";
}

.ai-transition-query::after {
    content: "“";
}

/* ---------- Ladezustand: Kopfzeile, Platzhalterzeilen, Statuszeile --------- */

.ai-thinking {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-thinking-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mblau, #1A6D93);
    letter-spacing: 0.2px;
}

.ai-thinking-spark {
    font-size: 1.05rem;
    line-height: 1;
    animation: aiSpark 1.8s ease-in-out infinite;
}

.ai-thinking-bar {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: #E3EEF6;
    overflow: hidden;
}

.ai-thinking-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mblau, #1A6D93), var(--dorange, #FFB424));
    animation: aiBarSlide 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.ai-skel-lines {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.ai-skel-line {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        #E6F0F7 0%,
        #F7FBFE 42%,
        #E6F0F7 84%
    );
    background-size: 220% 100%;
    animation: aiShimmer 1.5s linear infinite;
}

.ai-skel-line.is-head {
    height: 16px;
    width: 46%;
    background: linear-gradient(90deg, #DDEAF5 0%, #F2F8FD 42%, #DDEAF5 84%);
    background-size: 220% 100%;
}

.ai-skel-line:nth-child(2) { width: 100%; }
.ai-skel-line:nth-child(3) { width: 94%; }
.ai-skel-line:nth-child(4) { width: 88%; }
.ai-skel-line:nth-child(5) { width: 62%; }
.ai-skel-line:nth-child(6) { width: 97%; }
.ai-skel-line:nth-child(7) { width: 73%; }

.ai-thinking-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: #5A7386;
}

.ai-thinking-status > span {
    animation: aiStatusIn 0.4s ease both;
}

.ai-thinking-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--dorange, #FFB424);
    animation: aiPulse 1.2s ease-in-out infinite;
}

/* Scrollziel beim Auto-Start aus der Startseiten-Suche: etwas Luft nach oben,
   damit die Karte nicht direkt unter der Kopfleiste klebt. */
.ki-main-content {
    scroll-margin-top: 90px;
}

/* Neue Runde im Chat-Verlauf weich einblenden statt hart anspringen */
.ki-msg-group {
    animation: aiCardIn 0.42s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

/* ---------- Antwort: Blöcke erscheinen nacheinander weich ------------------ */

.ai-answer > * {
    animation: aiBlockIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.ai-answer.is-streaming > *:last-child::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.15em;
    background: var(--mblau, #1A6D93);
    animation: aiCaret 1.05s steps(2, start) infinite;
}

.ai-answer-enter {
    animation: aiBlockIn 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* ---------- Transparenzhinweis zu KI-Inhalten (Art. 50 EU AI Act) ---------- */

.ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.75rem 0.3rem 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6B7F8C;
}

.ai-disclaimer > span {
    flex-shrink: 0;
    line-height: 1.4;
}

/* ---------- Datenschutzhinweis vor der ersten Chat-Eingabe ---------------- */

/* Gleiche Tonlage wie der Transparenzhinweis, aber vor der Eingabe statt
   darunter: Wer tippt, soll vorher wissen, wohin der Text geht. */
.ai-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.6rem 0.3rem 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--navtext-leise, #5d7684);
}

/* Nur das Schloss-Zeichen bleibt starr — der Text daneben darf umbrechen. */
.ai-privacy-note > span:first-child {
    flex-shrink: 0;
    line-height: 1.4;
}

.ai-privacy-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-privacy-note a:hover {
    color: var(--mblau, #1A6D93);
}

/* Im Hero der Startseite liegt der Hinweis über dem Kopfbild: Er bleibt in der
   Spalte der Suchpille und bekommt eine helle Unterlage, damit er unabhängig
   vom Bildausschnitt lesbar ist. */
.headerfront .ai-privacy-note {
    max-width: 480px;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    gap: 0.3rem;
    font-size: 0.62rem;
    line-height: 1.3;
}

/* ---------- Keyframes ----------------------------------------------------- */

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

@keyframes aiCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes aiShimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

@keyframes aiBarSlide {
    from { transform: translateX(-105%); }
    to   { transform: translateX(255%); }
}

@keyframes aiSpark {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50%      { opacity: 0.65; transform: scale(1.18) rotate(12deg); }
}

@keyframes aiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

@keyframes aiStatusIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes aiBlockIn {
    from { opacity: 0; transform: translateY(7px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes aiCaret {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Bewegungsarme Darstellung: Inhalte bleiben, nur ohne Animation */
@media (prefers-reduced-motion: reduce) {
    .ai-transition-overlay,
    .ai-transition-card,
    .ki-msg-group,
    .ai-thinking-spark,
    .ai-thinking-dot,
    .ai-skel-line,
    .ai-answer > *,
    .ai-answer-enter,
    .ai-thinking-status > span {
        animation: none;
    }
    .ai-thinking-bar::after {
        width: 100%;
        animation: none;
    }
    .ai-answer.is-streaming > *:last-child::after {
        animation: none;
    }
}

/* ---------- Kurskarten in der KI-Antwort ---------------------------------- */
/* Die KI nennt in ihrer Antwort nur die URL ([[KURS: …]]); Bild, Titel, Preis
   und Zertifikat kommen aus den Seitendaten. Aufbau und Optik folgen den
   Kurskarten der Listenseiten (.headerbox in filter-page.css/company.css),
   damit ein Kurs überall gleich aussieht: Logo links, rechts Titel, Anbieter,
   Eckdaten mit Icons und die Begründung. Liegt in ai-loader.css, weil
   Startseite, KI-Suche und Filterseiten dieselbe Karte zeigen. */

.ki-answer-cards {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1.1rem 0 1.4rem;
}

.ki-answer-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem;
    background: #ffffff;
    border: 2px solid var(--hellblau, #EDF5FF);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    color: var(--wblack, #1c1b1b) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ki-answer-card:hover {
    border-color: var(--dunkelblau, #2C5669);
    box-shadow: 0 6px 22px rgba(26, 109, 147, 0.16);
    transform: translateY(-2px);
}

/* Anbieterlogo wie in der Listenkarte: 100 px breite Spalte, Bild eingepasst */
.ki-answer-card-media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100px;
    min-height: 70px;
}

.ki-answer-card-media img {
    display: block;
    width: 100%;
    max-width: 100px;
    max-height: 96px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.ki-answer-card-fallback {
    font-size: 2rem;
    line-height: 1;
}

.ki-answer-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.ki-answer-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mblau, #1A6D93);
}

.ki-answer-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
}

.ki-answer-card-provider {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wblack, #1c1b1b);
}

/* Inhaltsart als Chip — wie der Kategorie-Chip (.catdesign) der Listenkarten */
.ki-answer-card-kind {
    background: var(--morange, #FFC85E);
    color: #000000;
    border-radius: 10px;
    padding: 3px 10px;
    font-size: 12px;
}

/* Eckdatenzeile mit denselben Icons wie .flexinfosfilter auf den Listenseiten */
.ki-answer-card-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 1rem;
    font-weight: bold;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.ki-answer-card-fact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ki-answer-card-fact img {
    width: 34px;
    height: auto;
    flex-shrink: 0;
}

.ki-answer-card-reason {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
    margin-top: 0.2rem;
}

@media (max-width: 600px) {
    .ki-answer-card {
        align-items: flex-start;
        gap: 0.8rem;
    }
    .ki-answer-card-media {
        width: 68px;
        min-height: 0;
    }
    .ki-answer-card-title {
        font-size: 1.05rem;
        word-break: break-word;
    }
}


/* ---------- Typografie der KI-Antwort ------------------------------------ */
/* Gilt für jede KI-Antwort: Startseite, KI-Suche und die KI-Karten der
   Filterseiten. Stand früher in ai-search.css — die ist auf den Filterseiten
   nicht geladen, weshalb Links und Vorschaubilder dort ungestylt blieben. */

/* Ratgeber-Typografie in der KI-Antwort */
.ai-search-msg-ai p {
    margin: 0 0 0.7rem;
}

.ai-search-msg-ai h3 {
    margin: 1rem 0 0.4rem;
    font-size: 1.05rem;
    color: var(--dunkelblau);
}

.ai-search-msg-ai h3:first-child {
    margin-top: 0;
}

.ai-search-msg-ai ul,
.ai-search-msg-ai ol {
    margin: 0 0 0.7rem;
    padding-left: 1.3rem;
}

.ai-search-msg-ai li {
    margin-bottom: 0.45rem;
}

.ai-search-msg-ai > :last-child {
    margin-bottom: 0;
}

.ai-search-msg-ai a {
    color: var(--mblau);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-search-msg-ai a:hover {
    color: var(--dunkelblau);
}

/* Anbieter-Logo vor Kurstiteln in Liste & Tabelle (wie in den Weiterbildungslisten) */
.ai-search-msg-ai .inline-course-img {
    display: inline-block;
    vertical-align: middle;
    height: 26px;
    width: auto;
    max-width: 56px;
    object-fit: contain;
    border-radius: 4px;
    margin-right: 6px;
    background: #ffffff;
    padding: 1px 4px;
    border: 1px solid #E2E8F0;
}

/* Vergleichstabelle wie in den Weiterbildungslisten */
.ai-search-msg-ai .ki-table-wrapper {
    margin: 1.2rem 0 0.8rem 0;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #ffffff;
}

.ai-search-msg-ai .ki-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

.ai-search-msg-ai .ki-comparison-table th {
    background: #F8FAFC;
    color: var(--dunkelblau);
    font-weight: 700;
    padding: 10px 14px;
    border-bottom: 2px solid #E2E8F0;
}

.ai-search-msg-ai .ki-comparison-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    vertical-align: middle;
}

.ai-search-msg-ai .ki-comparison-table tr:last-child td {
    border-bottom: none;
}

/* Pfade und Feldnamen, die die KI in Backticks setzt */
.ai-answer code,
.ai-search-msg-ai code,
.ki-card-body code {
    background: #F1F5F9;
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 0.88em;
    word-break: break-word;
}