/* ==========================================================================
   JurisMind · KI-Tutor ("Lexi fragen")
   - .ai-ask-btn   leuchtende "KI fragen"-Pille an der Oberkante des
                   ausgewählten Knotens (liegt im #nodesLayer, skaliert/
                   verschiebt sich mit der Map)
   - .ai-chat-panel Chat-Fenster (rechts, mobil als Bottom-Sheet)
   - .ai-chats-card Profil-Karte "Meine KI-Chats"
   Dunkles Theme: body.glass-theme
   ========================================================================== */

:root {
    /* Haus-Verlauf für die KI: Blauviolett → Violett-Pink. */
    --ai-violet: #445ff2;
    --ai-pink: #cb50f7;
    --ai-grad: linear-gradient(135deg, #445ff2 0%, #cb50f7 100%);
    --ai-grad-h: linear-gradient(90deg, #445ff2, #cb50f7);
    /* Verlaufs-SCHRIFT (background-clip: text) — im Dark Mode aufgehellt,
       weil #445ff2 auf dunklem Grund kaum lesbar ist. Flächen (Orb, Buttons,
       Balken) behalten dagegen die kräftigen Originaltöne. */
    --ai-grad-text: linear-gradient(90deg, #445ff2, #cb50f7);
    --ai-glow-pink: rgba(203, 80, 247, 0.45);
    --ai-glow-violet: rgba(68, 95, 242, 0.45);
}

body.glass-theme {
    --ai-grad-text: linear-gradient(90deg, #8fa3ff, #e3a2ff);
}

/* ---------- "AI fragen"-Pill am Knoten -----------------------------------
   Leuchtende Pille (kleiner Orb + Label), die auf der Oberkante des Knotens
   rechts aufsitzt. Verankert über right/top (app.js setzt right = -x, die
   .nodes-layer ist 0px breit) — die rechte Kante liegt damit fest, und
   das ausklappende Label wächst von selbst nach links. Ein translate(-100%)
   auf left täte das nicht: WebKit löst das Prozent-Translate während der
   Breiten-Transition nicht pro Frame neu auf, die Pille wuchs erst nach
   rechts und sprang dann. Bewusst NICHT frei über dem Knoten: Geschwister-
   knoten liegen nur ~10px auseinander, ein großer Button darüber verdeckte
   den Nachbarn. */
.ai-ask-btn {
    position: absolute;
    z-index: 62;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 19px;
    padding: 0 7px 0 2px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(203, 80, 247, 0.35);
    box-shadow: 0 4px 12px rgba(68, 95, 242, 0.25), 0 0 0 0 var(--ai-glow-pink);
    cursor: pointer;
    font-family: inherit;
    opacity: 0;
    transform: translateY(-50%) translateY(6px) scale(0.85);
    transform-origin: right center;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    animation: ai-pill-glow 2.6s ease-in-out infinite;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.ai-ask-btn.visible {
    opacity: 1;
    transform: translateY(-50%) translateY(0) scale(1);
}

/* Am Knoten kompakt: nur der Orb sitzt oben rechts, das Label klappt erst
   beim Hover/Fokus aus (max-width-Übergang). Die Auswahl-Pille war mit
   Text bei jeder Auswahl zu markant. Reader-/Gesetzesmodal-Pille (--reader)
   behält das Label — dort steht sie frei über dem Text. */
.ai-ask-btn:not(.ai-ask-btn--reader) {
    gap: 0;
    padding: 0 2px;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease, gap 0.25s ease, padding 0.25s ease;
}

.ai-ask-btn:not(.ai-ask-btn--reader) .ai-ask-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.ai-ask-btn:not(.ai-ask-btn--reader):hover,
.ai-ask-btn:not(.ai-ask-btn--reader):focus-visible {
    gap: 4px;
    padding-right: 7px;
}

.ai-ask-btn:not(.ai-ask-btn--reader):hover .ai-ask-label,
.ai-ask-btn:not(.ai-ask-btn--reader):focus-visible .ai-ask-label {
    max-width: 80px;
    opacity: 1;
}

.ai-ask-btn.visible:hover {
    transform: translateY(-50%) translateY(-1px) scale(1.06);
    border-color: rgba(203, 80, 247, 0.7);
}

.ai-ask-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #cb50f7;
}

.ai-ask-orb {
    position: relative;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ai-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 7px rgba(203, 80, 247, 0.4);
}

/* Lichtring — Inline-SVG (Vektor, bleibt beim Zoomen scharf).
   Der Effekt entsteht aus ZWEI überlagerten Bewegungen mit verschiedenen
   Laufzeiten: das SVG dreht gleichmäßig (1,9 s), während die Strichlänge
   des Bogens ein- und ausatmet (2,6 s, ease-in-out). Dadurch rast der
   Kopf des Bogens davon, das Ende bleibt zurück — und holt am Ende des
   Zyklus wieder auf ("fliegen zusammen"). Weil sich die Laufzeiten nicht
   glatt teilen, wiederholt sich das Bild nie exakt. */
.ai-ask-ring {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    overflow: visible;
    pointer-events: none;
    animation: ai-ring-spin 1.9s linear infinite;
    transform-origin: 50% 50%;
}

.ai-ring-arc {
    transform-origin: 50% 50%;
    animation: ai-ring-dash 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.ai-ring-track {
    opacity: 0.9;
}

body.glass-theme .ai-ring-track {
    stroke: rgba(255, 255, 255, 0.16);
}

/* Glanzlicht. Geometrisch sitzt das Icon exakt mittig im Orb (per Messung
   bestätigt); der frühere Glanz bei 32% 26% (oben links) lag aber über der
   linken Ikon-Hälfte und hellte sie gegen den weißen Icon-Fill fast bis zur
   Unsichtbarkeit auf — die rechte Hälfte blieb dagegen kontrastreich vor dem
   satten Verlauf. Das erzeugte optisch den Eindruck, das Icon säße unten
   rechts. Jetzt horizontal zentriert (nur noch oben/unten asymmetrisch, wie
   ein klassischer Glossy-Sphere-Highlight) und schwächer/enger, damit er
   nicht mehr über die Icon-Fläche reicht. */
.ai-ask-orb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.4), transparent 42%);
    pointer-events: none;
}

/* Microchip-Icon (CSS-Mask, weiß) — Größe je Kontext überschrieben.
   display:block + feste Maße, damit die Maske exakt im Orb zentriert sitzt
   (als Inline-Element würde die Zeilenhöhe den Sitz verschieben). Das
   SVG selbst ist bereits symmetrisch im 640er-viewBox zentriert.
   Der Schlagschatten ist bewusst dunkel statt weiß: ein weißer Glow auf dem
   weißen Icon-Fill verschwindet dort, wo der Glanzlicht-Highlight (oben)
   den Hintergrund ohnehin schon aufhellt — der dunkle Kontur hält das Icon
   überall gleich lesbar, unabhängig vom Untergrund. */
.ai-ask-icon {
    display: block;
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    background: #fff;
    -webkit-mask: url('/images/icons/microchip.svg') center / contain no-repeat;
    mask: url('/images/icons/microchip.svg') center / contain no-repeat;
    filter: drop-shadow(0 1px 1.5px rgba(20, 10, 50, 0.35));
}

.ai-ask-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    background: var(--ai-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body.glass-theme .ai-ask-btn {
    background: rgba(20, 18, 28, 0.97);
    border-color: rgba(203, 80, 247, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 0 var(--ai-glow-pink);
}

@keyframes ai-pill-glow {
    0%, 100% { box-shadow: 0 4px 12px rgba(68, 95, 242, 0.25), 0 0 0 0 var(--ai-glow-pink); }
    50%      { box-shadow: 0 5px 15px rgba(203, 80, 247, 0.34), 0 0 0 5px rgba(203, 80, 247, 0); }
}

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

/* Kopf des Bogens = -dashoffset + Strichlänge, Ende = -dashoffset.
   0 %  → winziger Punkt
   50 % → Strich auf 62 % Umfang gewachsen (Kopf ist weit voraus)
   100 % → Strich wieder minimal, Ende hat den Kopf eingeholt; Offset -100
   entspricht wieder 0, deshalb läuft die Schleife nahtlos. */
@keyframes ai-ring-dash {
    0%   { stroke-dasharray: 3 100; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 62 100; stroke-dashoffset: -14; }
    100% { stroke-dasharray: 3 100; stroke-dashoffset: -100; }
}

@media (hover: none) {
    .ai-ask-btn { height: 23px; padding-right: 9px; gap: 5px; }
    .ai-ask-orb { width: 18px; height: 18px; }
    .ai-ask-btn .ai-ask-icon { width: 12px; height: 12px; }
    .ai-ask-label { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-ask-btn, .ai-ask-ring, .ai-ring-arc { animation: none; }
    .ai-ring-arc { stroke-dasharray: 58 100; }
    .ai-ask-btn { transition: opacity 0.2s ease; }
}

/* ---------- Menüpunkt "KI-Chat" im Optionen-Menü ------------------------
   Gleiche Ein-/Ausklapp-Mechanik wie Lernmodus / Nur Fälle / Dark mode
   (Regeln + Keyframes in style.css, Abschnitt .bottom-right-dock). Sitzt
   zwischen Lernmodus und Nur Fälle; Staffelung entsprechend dazwischen. */
.floating-controls .ai-chat-container {
    display: none;
}

.bottom-right-dock.is-open .ai-chat-container {
    display: flex;
    animation: mode-option-in 0.13s cubic-bezier(0.22, 1.1, 0.36, 1) both;
    animation-delay: 0.045s;
}

.bottom-right-dock.is-closing .ai-chat-container {
    display: flex;
    pointer-events: none;
    animation: mode-option-out 0.16s ease both;
    animation-delay: 0.075s;
}

/* Testphase / Gast ohne Freischaltung: Eintrag komplett weg */
.floating-controls .ai-chat-container.ai-disabled {
    display: none !important;
}

i.toggle-icon.fa-microchip {
    -webkit-mask-image: url('images/icons/microchip.svg');
    mask-image: url('images/icons/microchip.svg');
}

.ai-chat-btn .toggle-icon {
    background: var(--ai-grad);
}

.ai-chat-btn:hover {
    border-color: rgba(203, 80, 247, 0.45);
    box-shadow: 0 6px 18px rgba(203, 80, 247, 0.18);
}

.ai-chat-btn.active {
    background: linear-gradient(135deg, rgba(68, 95, 242, 0.14), rgba(203, 80, 247, 0.14));
    border-color: rgba(203, 80, 247, 0.55);
    color: #9333ea;
}

body.glass-theme .ai-chat-btn.active {
    background: rgba(203, 80, 247, 0.18);
    border-color: rgba(244, 114, 182, 0.55);
    color: #ebd0ff;
}

/* ---------- Chat-Panel --------------------------------------------------- */
.ai-chat-panel {
    position: fixed;
    top: calc(var(--toolbar-height, 56px) + 16px);
    right: 16px;
    bottom: 16px;
    width: min(440px, calc(100vw - 32px));
    z-index: 10100;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(68, 95, 242, 0.28);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    color: var(--slate-800, #1e293b);
    font-family: var(--font-family, 'Red Hat Text', system-ui, sans-serif);
    transform: translateX(calc(100% + 40px));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s linear 0.45s;
    overflow: hidden;
}

.ai-chat-panel.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s;
}

.ai-chat-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ai-grad-h);
    z-index: 2;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.ai-chat-header-orb {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ai-grad);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(203, 80, 247, 0.35);
}

.ai-chat-header-orb .ai-ask-icon {
    width: 18px;
    height: 18px;
    filter: none;
}

.ai-chat-title {
    flex: 1;
    min-width: 0;
}

.ai-chat-title strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: var(--ai-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-chat-title small {
    display: block;
    font-size: 11px;
    color: var(--slate-500, #64748b);
    margin-top: 1px;
}

.ai-quota-pill {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-600, #4f46e5);
    white-space: nowrap;
}

.ai-quota-pill.warn {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
}

.ai-quota-pill.blocked {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}

.ai-icon-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--slate-500, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.ai-icon-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-600, #4f46e5);
}

.ai-icon-btn.active {
    background: rgba(68, 95, 242, 0.16);
    color: #445ff2;
}

.ai-icon-btn .ai-icon {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--ai-icon) center / contain no-repeat;
    mask: var(--ai-icon) center / contain no-repeat;
}

/* Kontext-Chips: Map › Pfad › Knoten */
.ai-chat-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 11px;
}

.ai-chip {
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.1);
    color: var(--slate-600, #475569);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chip.current {
    background: var(--ai-grad);
    color: #fff;
    box-shadow: 0 3px 10px rgba(203, 80, 247, 0.3);
}

.ai-chip-sep {
    color: var(--slate-400, #94a3b8);
    font-weight: 700;
}

/* Nachrichten */
.ai-chat-body {
    position: relative;
    flex: 1;
    min-height: 0;
}

.ai-chat-messages,
.ai-chat-history {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.ai-chat-history { display: none; }
.ai-chat-panel.show-history .ai-chat-history { display: flex; }
.ai-chat-panel.show-history .ai-chat-messages { display: none; }

/* ---------- Lexi (Bot) ----------------------------------------------------
   Liegt unten im Chat-Body über den Nachrichten. Drei Bewegungen, sauber
   getrennt, damit sie sich nicht überschreiben:
     .ai-bot        → Einflug/Abtauchen (CSS-Transition, translateY)
     .ai-bot-dodge  → Ausweichen (kleiner translate-Schritt in alle
                      Richtungen; per JS bei mouseenter/mousemove gesetzt,
                      zurück nach kurzer Zeit)
     .ai-bot-img    → dauerhaftes Auf-und-Ab (Keyframe) */
.ai-bot {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 112px;
    z-index: 3;
    pointer-events: auto;
    opacity: 0;
    transform: translate(-50%, 140%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
}

.ai-bot.in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ai-bot.out {
    opacity: 0;
    transform: translate(-50%, 140%);
    transition: transform 0.5s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.3s ease 0.15s;
    pointer-events: none;
}

.ai-bot.missing { display: none; }

/* Kleiner Ausweichschritt in alle Richtungen; bewusst langsam und ohne
   Überschwingen — die Rückkehr (transform: '') läuft über dieselbe Kurve. */
.ai-bot-dodge {
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ai-bot-img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(68, 95, 242, 0.35));
    animation: ai-bot-float 3.2s ease-in-out infinite;
}

/* Schweben: Auf-und-Ab mit minimalem Kippen, Schatten atmet mit */
@keyframes ai-bot-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); filter: drop-shadow(0 10px 18px rgba(68, 95, 242, 0.35)); }
    50%      { transform: translateY(-9px) rotate(1.2deg); filter: drop-shadow(0 18px 22px rgba(68, 95, 242, 0.22)); }
}

/* Platz für Lexi, damit die letzte Nachricht nicht unter ihm liegt */
.ai-chat-messages::after {
    content: '';
    flex-shrink: 0;
    height: 0;
    transition: height 0.4s ease;
}

.ai-chat-panel.bot-visible .ai-chat-messages::after {
    height: 96px;
}

body.glass-theme .ai-bot-img {
    filter: drop-shadow(0 10px 20px rgba(203, 80, 247, 0.4));
}

@media (max-width: 640px) {
    .ai-bot { width: 92px; }
    .ai-chat-panel.bot-visible .ai-chat-messages::after { height: 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-bot-img { animation: none; }
    .ai-bot, .ai-bot.out { transition: opacity 0.2s ease; }
}

.ai-msg {
    position: relative;
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    animation: ai-msg-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-msg.user {
    align-self: flex-end;
    background: var(--grad-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    color: #fff;
    border-bottom-right-radius: 6px;
    white-space: pre-wrap;
}

.ai-msg.model {
    align-self: flex-start;
    background: rgba(241, 245, 249, 0.95);
    color: var(--slate-800, #1e293b);
    border-bottom-left-radius: 6px;
    padding-left: 18px;
}

.ai-msg.model::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--ai-grad);
}

.ai-msg.model p { margin: 0 0 6px; }
.ai-msg.model p:last-child { margin-bottom: 0; }
.ai-msg.model ul { margin: 4px 0 6px; padding-left: 18px; }
.ai-msg.model li { margin: 2px 0; }
.ai-msg.model strong { font-weight: 700; }

.ai-msg.model.typing-cursor {
    white-space: pre-wrap;
    cursor: pointer;
}

.ai-msg.model.typing-cursor::after {
    content: '▍';
    display: inline-block;
    margin-left: 1px;
    color: #cb50f7;
    animation: ai-cursor 0.9s steps(2, start) infinite;
}

.ai-msg.system {
    align-self: center;
    max-width: 100%;
    font-size: 12px;
    color: var(--slate-500, #64748b);
    background: transparent;
    text-align: center;
    padding: 2px 8px;
}

.ai-msg.error {
    align-self: flex-start;
    background: rgba(254, 242, 242, 0.95);
    color: #991b1b;
    border: 1px solid rgba(252, 165, 165, 0.6);
}

.ai-retry-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 0;
    background: var(--ai-grad);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(203, 80, 247, 0.3);
}

.ai-law-link {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--primary-600, #4f46e5);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ai-law-link:hover { color: #cb50f7; }

/* Tipp-Indikator: Punkte-Blase + grauer Wartetext daneben */
.ai-typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
}

.ai-typing-dots {
    flex-shrink: 0;
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    border-radius: 16px;
    border-bottom-left-radius: 6px;
    background: rgba(241, 245, 249, 0.95);
}

.ai-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ai-grad);
    animation: ai-bounce 1.1s ease-in-out infinite;
}

.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Wechselt alle paar Sekunden ("Denke nach …" → "Gleich fertig …");
   .swap blendet den alten Text kurz aus, bevor der neue gesetzt wird. */
.ai-typing-note {
    font-size: 12px;
    line-height: 1.3;
    color: var(--slate-500, #64748b);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.ai-typing-note.swap { opacity: 0; }

/* Begrüßung + Startfragen */
.ai-welcome {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 0;
}

.ai-welcome-text {
    font-size: 13px;
    color: var(--slate-600, #475569);
    line-height: 1.5;
}

.ai-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ai-suggest button {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(68, 95, 242, 0.35);
    background: rgba(68, 95, 242, 0.06);
    color: #445ff2;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-suggest button:hover {
    background: var(--ai-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(203, 80, 247, 0.3);
}

/* Upgrade-/Limit-Hinweis */
.ai-upgrade-cta {
    align-self: stretch;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(68, 95, 242, 0.1), rgba(203, 80, 247, 0.12));
    border: 1px dashed rgba(203, 80, 247, 0.45);
    font-size: 13px;
    line-height: 1.5;
    color: var(--slate-700, #334155);
}

.ai-upgrade-cta strong { color: #9333ea; }

.ai-upgrade-cta a {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ai-grad);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(203, 80, 247, 0.3);
}

/* Verlauf */
.ai-history-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400, #94a3b8);
    margin: 4px 0 2px;
}

.ai-history-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ai-history-item:hover {
    border-color: rgba(203, 80, 247, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(68, 95, 242, 0.15);
}

.ai-history-item.active {
    border-color: #cb50f7;
    background: rgba(203, 80, 247, 0.06);
}

.ai-history-item strong {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-history-item small {
    font-size: 11px;
    color: var(--slate-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-history-empty {
    font-size: 13px;
    color: var(--slate-500, #64748b);
    text-align: center;
    padding: 20px 10px;
}

/* Eingabe */
.ai-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.5);
}

.ai-chat-input textarea {
    flex: 1;
    min-height: 42px;
    max-height: 140px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ai-chat-input textarea:focus {
    border-color: rgba(203, 80, 247, 0.7);
    box-shadow: 0 0 0 3px rgba(203, 80, 247, 0.15);
}

.ai-chat-input textarea:disabled {
    opacity: 0.6;
}

.ai-send-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--ai-grad);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(203, 80, 247, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ai-send-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 8px 20px rgba(68, 95, 242, 0.45);
}

.ai-send-btn:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

.ai-send-btn .ai-icon {
    width: 17px;
    height: 17px;
    background: #fff;
    -webkit-mask: url('/images/icons/paper-plane.svg') center / contain no-repeat;
    mask: url('/images/icons/paper-plane.svg') center / contain no-repeat;
}

.ai-chat-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px 8px;
    font-size: 10.5px;
    color: var(--slate-400, #94a3b8);
}

.ai-chat-foot .over { color: #b91c1c; font-weight: 700; }

/* Animationen */
@keyframes ai-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes ai-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%           { transform: translateY(-5px); opacity: 1; }
}

@keyframes ai-cursor {
    to { opacity: 0; }
}

/* Mobil: Bottom-Sheet */
@media (max-width: 640px) {
    .ai-chat-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 82vh;
        height: 82dvh;
        border-radius: 22px 22px 0 0;
        transform: translateY(105%);
    }

    .ai-chat-panel.open { transform: none; }
}

/* Dunkles Theme */
body.glass-theme .ai-chat-panel {
    background: rgba(20, 18, 28, 0.92);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    color: #e2e8f0;
}

body.glass-theme .ai-chat-header,
body.glass-theme .ai-chat-context,
body.glass-theme .ai-chat-input {
    border-color: rgba(255, 255, 255, 0.12);
}

body.glass-theme .ai-chat-input { background: rgba(10, 9, 14, 0.35); }
body.glass-theme .ai-chat-title small,
body.glass-theme .ai-chat-foot,
body.glass-theme .ai-history-item small,
body.glass-theme .ai-history-empty,
body.glass-theme .ai-msg.system { color: rgba(226, 232, 240, 0.6); }
body.glass-theme .ai-chip { background: rgba(255, 255, 255, 0.1); color: rgba(226, 232, 240, 0.85); }
body.glass-theme .ai-msg.model,
body.glass-theme .ai-typing-dots { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
body.glass-theme .ai-msg.error { background: rgba(127, 29, 29, 0.35); color: #fecaca; border-color: rgba(248, 113, 113, 0.4); }
body.glass-theme .ai-welcome-text { color: rgba(226, 232, 240, 0.75); }
body.glass-theme .ai-suggest button { background: rgba(68, 95, 242, 0.15); color: #dccbff; border-color: rgba(203, 80, 247, 0.4); }
body.glass-theme .ai-upgrade-cta { color: #e2e8f0; }
body.glass-theme .ai-upgrade-cta strong { color: #e3a2ff; }
body.glass-theme .ai-history-item { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
body.glass-theme .ai-chat-input textarea { background: rgba(10, 9, 14, 0.6); border-color: rgba(255, 255, 255, 0.18); color: #f1f5f9; }
body.glass-theme .ai-icon-btn { color: rgba(226, 232, 240, 0.7); }
body.glass-theme .ai-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
body.glass-theme .ai-law-link { color: #9fb0ff; }
body.glass-theme .ai-law-link:hover { color: #e3a2ff; }
body.glass-theme .ai-quota-pill { background: rgba(143, 163, 255, 0.2); color: #c3ceff; }
body.glass-theme .ai-quota-pill.warn { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }
body.glass-theme .ai-quota-pill.blocked { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }

/* ---------- Profil: "Meine KI-Chats" ------------------------------------ */
.ai-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.ai-stat {
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(68, 95, 242, 0.08), rgba(203, 80, 247, 0.1));
    border: 1px solid rgba(203, 80, 247, 0.18);
}

.ai-stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    background: var(--ai-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-stat span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
}

.ai-months {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 54px;
    margin: 0 0 16px;
}

.ai-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--slate-500, #64748b);
}

.ai-month i {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 4px 4px 2px 2px;
    background: var(--ai-grad);
    opacity: 0.85;
}

.ai-chat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-chat-item {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.ai-chat-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

.ai-chat-item-head:hover { background: rgba(68, 95, 242, 0.05); }

.ai-chat-item-gem {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ai-grad);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-item-gem .ai-ask-icon { width: 14px; height: 14px; filter: none; }

/* Button "Meine KI-Chats" + Popup mit der Chat-Liste */
.ai-chats-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ai-grad) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(203, 80, 247, 0.3);
}

.ai-chats-open-btn .ai-ask-icon { width: 15px; height: 15px; filter: none; }

.ai-chats-count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.ai-chats-count:empty { display: none; }

.ai-chats-modal-content {
    max-width: 640px;
    max-height: 88vh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 28px 24px 24px;
}

.ai-chats-modal-content h2,
.ai-chats-modal-content > p {
    flex-shrink: 0;
}

/* Die Liste scrollt innerhalb des Popups; die Karten dürfen dabei NICHT
   schrumpfen (Flex-Kinder würden sonst auf die Listenhöhe gestaucht). */
.ai-chats-modal-content .ai-chat-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.ai-chat-list .ai-chat-item {
    flex-shrink: 0;
}

.ai-chat-item-body .ai-msg {
    max-width: 100%;
}

.ai-chat-item-text { flex: 1; min-width: 0; }

.ai-chat-item-text strong {
    display: block;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-item-text small {
    display: block;
    font-size: 0.75rem;
    color: var(--slate-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chat-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ai-chat-item-actions a,
.ai-chat-item-actions button {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: var(--slate-600, #475569);
    cursor: pointer;
    text-decoration: none;
}

.ai-chat-item-actions a:hover { color: var(--primary-600, #4f46e5); border-color: var(--primary-300, #a5b4fc); }
.ai-chat-item-actions button.danger:hover { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }

.ai-chat-item-body {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.8);
}

.ai-chat-item.open .ai-chat-item-body { display: flex; }

.ai-chat-item-body .ai-msg { animation: none; }

.ai-chats-empty {
    font-size: 0.92rem;
    color: var(--slate-500, #64748b);
    line-height: 1.5;
}

/* ---------- Gesetzes-Reader (reader.html) --------------------------------
   Pille "Lexi fragen" über der Textauswahl: gleiche Optik wie am Knoten,
   aber fixed positioniert (left/top = Mitte über dem Auswahl-Rechteck) und
   etwas größer — sie schwebt über Fließtext statt in der dichten Map. */
.ai-ask-btn--reader {
    position: fixed;
    z-index: 10120; /* über dem Chat-Panel (10100), unter Header-Dropdowns */
    height: 25px;
    padding: 0 10px 0 3px;
    gap: 6px;
    transform: translate(-50%, -100%) translateY(6px) scale(0.85);
    transform-origin: center bottom;
}

.ai-ask-btn--reader.visible {
    transform: translate(-50%, -100%) translateY(0) scale(1);
}

.ai-ask-btn--reader.visible:hover {
    transform: translate(-50%, -100%) translateY(-1px) scale(1.05);
    border-color: rgba(203, 80, 247, 0.7);
}

/* Variante im Gesetzesmodal der App (app.js, Auswahl in #lawModalBody):
   muss über dem Modal-Overlay (10150) liegen. */
.ai-ask-btn--law {
    z-index: 10160;
}

/* Auswahl direkt unter dem Header: Pille klappt UNTER die Markierung */
.ai-ask-btn--reader.below,
.ai-ask-btn--reader.below.visible {
    transform: translate(-50%, 0) scale(1);
    transform-origin: center top;
}

.ai-ask-btn--reader.below:not(.visible) {
    transform: translate(-50%, 0) translateY(-6px) scale(0.85);
}

.ai-ask-btn--reader .ai-ask-orb {
    width: 19px;
    height: 19px;
}

.ai-ask-btn--reader .ai-ask-icon {
    width: 12px;
    height: 12px;
}

.ai-ask-btn--reader .ai-ask-label {
    font-size: 11px;
}

/* Sidebar-Button "KI-Chat" (über Dark mode): Label im KI-Verlauf */
.ai-chat-bookmark .toggle-text {
    background: var(--ai-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 600;
}

.ai-chat-bookmark .toggle-icon {
    background: var(--ai-grad);
}

/* §-Link in einer Lexi-Antwort geklickt → Zielnorm kurz hervorheben */
.reader-para-flash {
    animation: reader-para-flash 1.6s ease-out;
    border-radius: 12px;
}

@keyframes reader-para-flash {
    0%   { background: rgba(203, 80, 247, 0.18); box-shadow: 0 0 0 6px rgba(203, 80, 247, 0.18); }
    100% { background: transparent; box-shadow: 0 0 0 6px transparent; }
}