/* ═══════════════════════════════════════════════════════════════
   AI MODAL — Theme-aware Redesign (Glass / White / Dark)
   ───────────────────────────────────────────────────────────────
   Die HTML-Struktur (ai_modal.php) und JS-Logik (ai_chat.js)
   bleiben unverändert. Nur Optik ist neu — modern, akzentuiert
   über var(--accent-blue), konsistent in allen drei Modi.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Overlay ────────────────────────────────────────────────── */
.ai-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.ai-modal-overlay.show { opacity: 1; }

@media (max-width: 600px) {
    .ai-modal-overlay { padding: 12px; }
    .ai-modal-card { max-height: 88vh; }
}

/* ─── Modal-Box ──────────────────────────────────────────────── */
.ai-modal-box {
    width: 100%;
    max-width: 560px;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ai-modal-overlay.show .ai-modal-box {
    transform: translateY(0) scale(1);
}

.ai-modal-card {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    border-radius: 22px;
    /* Glass-Default — White/Dark überschreiben unten.
       0.78 Opazität, damit Text knackig lesbar bleibt trotz
       dunklem Overlay drunter (rgba(0,0,0,0.45)). */
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow:
        0 24px 60px rgba(0,0,0,0.40),
        0 1px 0 rgba(255,255,255,0.45) inset;
    color: #1A1A2E;
}
[data-theme="white"] .ai-modal-card {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
[data-theme="dark"] .ai-modal-card {
    background: #1C2333;
    border-color: rgba(255,255,255,0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: #E8EAF0;
}

/* ─── Header ─────────────────────────────────────────────────── */
.ai-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-theme="dark"] .ai-modal-header { border-bottom-color: rgba(255,255,255,0.08); }

.ai-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-blue) 78%, white) 0%,
        var(--accent-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--accent-blue) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.30);
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

.ai-modal-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: inherit;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-modal-close {
    background: rgba(0,0,0,0.05);
    border: none;
    cursor: pointer;
    color: rgba(26,26,46,0.55);
    font-size: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.ai-modal-close:hover {
    background: rgba(0,0,0,0.10);
    color: rgba(26,26,46,0.85);
}
[data-theme="dark"] .ai-modal-close {
    background: rgba(255,255,255,0.06);
    color: rgba(232,234,240,0.55);
}
[data-theme="dark"] .ai-modal-close:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(232,234,240,0.85);
}

/* ─── Chat-Bereich ───────────────────────────────────────────── */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 240px;
    max-height: 480px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.ai-chat-messages::-webkit-scrollbar { width: 6px; }
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
[data-theme="dark"] .ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }

.ai-message { display: flex; }
.ai-message-user { justify-content: flex-end; }
.ai-message-bot  { justify-content: flex-start; }

.ai-message-bubble {
    max-width: 85%;
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: inherit;
    word-break: break-word;
}

/* User-Bubble: in accent-blue, rechts */
.ai-message-user .ai-message-bubble {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-blue) 80%, white) 0%,
        var(--accent-blue) 100%);
    color: #fff;
    border-bottom-right-radius: 5px;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-blue) 28%, transparent);
}

/* Bot-Bubble: zurückhaltend, themengerecht */
.ai-message-bot .ai-message-bubble {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.65);
    border-bottom-left-radius: 5px;
    color: #1A1A2E;
}
[data-theme="white"] .ai-message-bot .ai-message-bubble {
    background: #F2F4F8;
    border-color: rgba(0,0,0,0.06);
    color: #1A1A2E;
}
[data-theme="dark"] .ai-message-bot .ai-message-bubble {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: #E8EAF0;
}

/* Success-Variant (nach Diagramm-Erstellung) */
.ai-message-success .ai-message-bubble {
    background: color-mix(in srgb, var(--accent-green, #34C759) 18%, white);
    border-color: color-mix(in srgb, var(--accent-green, #34C759) 35%, transparent);
    color: #1A4B25;
}
[data-theme="dark"] .ai-message-success .ai-message-bubble {
    background: color-mix(in srgb, var(--accent-green, #34C759) 20%, #1C2333);
    border-color: color-mix(in srgb, var(--accent-green, #34C759) 35%, transparent);
    color: #B8F5C6;
}

.ai-message-bubble strong { font-weight: 700; }
.ai-message-bubble em { font-style: normal; opacity: 0.7; font-size: 12.5px; }

/* ─── Typing-Indicator ───────────────────────────────────────── */
.ai-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 14px 18px;
}
.ai-typing span {
    width: 7px;
    height: 7px;
    background: rgba(26,26,46,0.45);
    border-radius: 50%;
    animation: ai-bounce 1.2s infinite ease-in-out;
}
[data-theme="dark"] .ai-typing span { background: rgba(232,234,240,0.50); }
.ai-typing span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ai-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.45; }
    40%           { transform: scale(1.0); opacity: 1; }
}

/* ─── Input-Area ─────────────────────────────────────────────── */
.ai-input-area {
    padding: 14px 18px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-theme="dark"] .ai-input-area { border-top-color: rgba(255,255,255,0.08); }

.ai-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.ai-textarea {
    flex: 1;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 13.5px;
    font-family: inherit;
    color: inherit;
    outline: none;
    resize: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    line-height: 1.5;
    box-sizing: border-box;
}
.ai-textarea:focus {
    border-color: var(--accent-blue);
    background: rgba(255,255,255,0.75);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}
.ai-textarea::placeholder { color: rgba(26,26,46,0.40); }
.ai-textarea:disabled { opacity: 0.55; cursor: not-allowed; }

[data-theme="white"] .ai-textarea {
    background: #F7F9FC;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="white"] .ai-textarea:focus { background: #fff; }

[data-theme="dark"] .ai-textarea {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    color: #E8EAF0;
}
[data-theme="dark"] .ai-textarea:focus {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .ai-textarea::placeholder { color: rgba(232,234,240,0.40); }

/* Send-Button */
.ai-send-btn {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-blue) 80%, white) 0%,
        var(--accent-blue) 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.18s, filter 0.15s;
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent-blue) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.ai-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.ai-send-btn:active:not(:disabled) {
    transform: scale(0.96);
    filter: brightness(0.92);
}
.ai-send-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.ai-send-btn svg {
    width: 18px;
    height: 18px;
    fill: white;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* ─── Nav-Button (Desktop-Header) ─────────────────────────────
   "✦ KI-Diagramm" — moderner, accent-blue-getrieben.
   Funktioniert in Glass / White / Dark. */
.nav-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px 8px 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-blue) 82%, white) 0%,
        var(--accent-blue) 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.18s;
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent-blue) 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
    white-space: nowrap;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.nav-ai-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--accent-blue) 40%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.30);
}
.nav-ai-btn:active {
    transform: translateY(0) scale(0.97);
    filter: brightness(0.94);
}
.nav-ai-btn span:first-child {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

/* ════════════════════════════════════════════════════════════════
   MIC-BUTTON (Spracheingabe)
   ────────────────────────────────────────────────────────────────
   Sitzt zwischen Textarea und Send-Button. Gleicher Größenstandard
   wie der Send-Button. Idle-Look: dezent neutral. Recording-Look:
   roter Akzent mit Puls-Animation.
   ════════════════════════════════════════════════════════════════ */
.ai-mic-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.ai-mic-btn:hover:not(.is-recording) {
    background: rgba(0,0,0,0.10);
    color: rgba(26,26,46,0.90);
}
.ai-mic-btn:active { transform: scale(0.94); }

[data-theme="dark"] .ai-mic-btn {
    background: rgba(255,255,255,0.06);
    color: rgba(232,234,240,0.65);
}
[data-theme="dark"] .ai-mic-btn:hover:not(.is-recording) {
    background: rgba(255,255,255,0.12);
    color: rgba(232,234,240,0.90);
}

.ai-mic-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.ai-mic-btn .ai-mic-icon       { display: block; }
.ai-mic-btn .ai-mic-stop-icon  { display: none;  }

/* ── Recording-State: rot + Puls ──────────────────────────────── */
.ai-mic-btn.is-recording {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-red, #ff3b30) 82%, white) 0%,
        var(--accent-red, #ff3b30) 100%);
    color: #fff;
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--accent-red, #ff3b30) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.ai-mic-btn.is-recording .ai-mic-icon      { display: none; }
.ai-mic-btn.is-recording .ai-mic-stop-icon { display: block; }
.ai-mic-btn.is-recording svg {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}

/* Pulsierender Ring um den Button während Aufnahme */
.ai-mic-pulse {
    display: none;
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid var(--accent-red, #ff3b30);
    opacity: 0.7;
    pointer-events: none;
    animation: aiMicPulse 1.4s ease-out infinite;
}
.ai-mic-btn.is-recording .ai-mic-pulse { display: block; }
@keyframes aiMicPulse {
    0%   { transform: scale(0.92); opacity: 0.70; }
    70%  { transform: scale(1.18); opacity: 0;    }
    100% { transform: scale(1.18); opacity: 0;    }
}

/* ── Hint-Text (Statusanzeige unter dem Eingabefeld) ──────────── */
.ai-mic-hint {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(26,26,46,0.65);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    letter-spacing: 0.1px;
    min-height: 16px;
}
[data-theme="dark"] .ai-mic-hint { color: rgba(232,234,240,0.65); }

.ai-mic-hint::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ai-mic-hint-recording {
    color: var(--accent-red, #ff3b30);
}
.ai-mic-hint-recording::before {
    background: var(--accent-red, #ff3b30);
    animation: aiMicBlink 1s ease-in-out infinite;
}
@keyframes aiMicBlink {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.25; }
}
.ai-mic-hint-error {
    color: var(--accent-red, #ff3b30);
}
.ai-mic-hint-error::before { display: none; }

/* Info-State des Hints (z.B. "Mikrofon wird vorbereitet…") */
.ai-mic-hint-info {
    color: rgba(26,26,46,0.70);
}
[data-theme="dark"] .ai-mic-hint-info { color: rgba(232,234,240,0.70); }
.ai-mic-hint-info::before {
    background: rgba(26,26,46,0.55);
    animation: aiMicBlink 1.2s ease-in-out infinite;
}
[data-theme="dark"] .ai-mic-hint-info::before {
    background: rgba(232,234,240,0.55);
}

/* ════════════════════════════════════════════════════════════════
   KI-QUOTA: Counter-Banner + Lock-Box im Modal
   ────────────────────────────────────────────────────────────────
   Wird vom JS direkt vor .ai-input-area eingehängt. Counter-Variante
   ist eine dezente Pille; Locked-Variante ist eine größere Box mit
   Schloss-Icon + Reset-Info + sanfter Upgrade-CTA.
   ════════════════════════════════════════════════════════════════ */
.ai-quota-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(107, 92, 255, 0.07);
    border: 1px solid rgba(107, 92, 255, 0.16);
    font-size: 12px;
    color: rgba(26,26,46,0.75);
}
[data-theme="dark"] .ai-quota-info {
    background: rgba(107, 92, 255, 0.14);
    border-color: rgba(107, 92, 255, 0.28);
    color: rgba(232,234,240,0.85);
}
.ai-quota-info-icon {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.ai-quota-info-text { line-height: 1.35; }
.ai-quota-info-text strong { font-weight: 700; }
.ai-quota-info-sep {
    margin: 0 6px;
    opacity: 0.5;
}

/* Locked-Variante — wird statt des Counters gezeigt, wenn used >= limit */
.ai-quota-locked {
    display: flex;
    gap: 14px;
    margin: 6px 24px 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px dashed rgba(245, 158, 11, 0.45);
}
[data-theme="dark"] .ai-quota-locked {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.45);
}
.ai-quota-locked-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .ai-quota-locked-icon {
    background: rgba(251, 191, 36, 0.20);
    color: #fbbf24;
}
.ai-quota-locked-body { flex: 1; min-width: 0; }
.ai-quota-locked-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 3px;
}
[data-theme="dark"] .ai-quota-locked-title { color: #e8eaf0; }
.ai-quota-locked-text {
    font-size: 12.5px;
    color: rgba(26,26,46,0.72);
    line-height: 1.4;
}
[data-theme="dark"] .ai-quota-locked-text { color: rgba(232,234,240,0.72); }
.ai-quota-locked-text strong { font-weight: 700; }
.ai-quota-locked-cta {
    display: inline-block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-blue);
    text-decoration: none;
    letter-spacing: 0.1px;
}
.ai-quota-locked-cta:hover { text-decoration: underline; }

/* Wenn Modal gesperrt ist, Textarea/Sendebutton optisch zurücknehmen */
.ai-modal-locked #ai-user-input {
    opacity: 0.55;
    cursor: not-allowed;
}
.ai-modal-locked #ai-send-btn,
.ai-modal-locked #ai-mic-btn {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Header-Button: Lock-Variante wenn Monats-Quota erschöpft ───
   Bleibt klickbar (öffnet das Modal mit Lock-Screen), aber visuell
   wird klar, dass aktuell nichts geht. Dezent grau-gold statt blau. */
.nav-ai-btn.nav-ai-btn-quota-exhausted {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.78) 0%,
        rgba(217, 119, 6,  0.85) 100%);
    box-shadow:
        0 4px 14px rgba(245, 158, 11, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.25);
    /* Schloss-Indikator als kleines Overlay-Pill rechts vom Text */
    position: relative;
    padding-right: 28px;
}
.nav-ai-btn.nav-ai-btn-quota-exhausted::after {
    content: '';
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>") center/contain no-repeat;
}
.nav-ai-btn.nav-ai-btn-quota-exhausted:hover {
    filter: brightness(1.04);
}

@media (max-width: 600px) {
    .ai-quota-info,
    .ai-quota-locked { margin-left: 14px; margin-right: 14px; }
}

/* ════════════════════════════════════════════════════════════════
   ANHÄNGE — Paperclip-Button + Chip-Liste
   ────────────────────────────────────────────────────────────────
   Der Paperclip sitzt links vom Textarea (vor Mic + Send).
   Chips erscheinen über der .ai-input-row, sobald Dateien gewählt
   wurden — mit Icon, Name, Größe, Remove-X.
   ════════════════════════════════════════════════════════════════ */

.ai-attach-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.ai-attach-btn:hover:not(:disabled) {
    background: rgba(0,0,0,0.10);
    color: rgba(26,26,46,0.90);
}
.ai-attach-btn:active:not(:disabled) { transform: scale(0.94); }
.ai-attach-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ai-attach-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
}
[data-theme="dark"] .ai-attach-btn {
    background: rgba(255,255,255,0.06);
    color: rgba(232,234,240,0.65);
}
[data-theme="dark"] .ai-attach-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
    color: rgba(232,234,240,0.90);
}

/* ── Chip-Liste oberhalb der Input-Row ─────────────────────────── */
.ai-attachments-list {
    display: none;       /* via JS auf flex gesetzt, wenn nicht leer */
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px 10px;
    margin-top: -4px;
}

.ai-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px 5px 9px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    animation: aiChipPop 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes aiChipPop {
    from { opacity: 0; transform: translateY(-2px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-attachment-chip-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.ai-attachment-chip-name {
    font-weight: 600;
    color: rgba(26,26,46,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ai-attachment-chip-size {
    color: rgba(26,26,46,0.50);
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
.ai-attachment-chip-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.60);
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.ai-attachment-chip-remove:hover {
    background: rgba(255, 59, 48, 0.18);
    color: var(--accent-red, #ff3b30);
}
[data-theme="white"] .ai-attachment-chip {
    background: #FFFFFF;
    border-color: rgba(0,0,0,0.10);
}
[data-theme="dark"] .ai-attachment-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .ai-attachment-chip-name {
    color: rgba(232,234,240,0.85);
}
[data-theme="dark"] .ai-attachment-chip-size {
    color: rgba(232,234,240,0.50);
}
[data-theme="dark"] .ai-attachment-chip-remove {
    background: rgba(255,255,255,0.10);
    color: rgba(232,234,240,0.65);
}
[data-theme="dark"] .ai-attachment-chip-remove:hover {
    background: rgba(255, 100, 90, 0.22);
    color: rgba(255, 130, 120, 0.95);
}

/* ── Anhänge in der gesendeten User-Bubble (kompakte Chips) ───── */
.ai-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255,255,255,0.30);
}
.ai-bubble-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    max-width: 100%;
}
.ai-bubble-attachment-icon  { font-size: 12px; line-height: 1; }
.ai-bubble-attachment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Typing-Indicator mit Text (für "Lese Anhänge…") ───────────
   WICHTIG: Diese Variante trägt NICHT die .ai-typing-Klasse, weil
   sonst `.ai-typing span { width:7px; … }` auch den Hint-Text-Span
   als 7px-Dot rendert → Text wickelt sich vertikal.
   Wir definieren hier die Dot-Styles eigenständig, scoped auf
   `.ai-typing-dots > span`, damit kein Bleed nach außen passiert. */
.ai-typing-with-hint {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
    width: auto;
    max-width: 100%;
}
.ai-typing-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
}
.ai-typing-dots > span {
    width: 7px;
    height: 7px;
    background: rgba(26,26,46,0.45);
    border-radius: 50%;
    animation: ai-bounce 1.2s infinite ease-in-out;
    display: inline-block;
    flex-shrink: 0;
}
[data-theme="dark"] .ai-typing-dots > span { background: rgba(232,234,240,0.50); }
.ai-typing-dots > span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dots > span:nth-child(3) { animation-delay: 0.36s; }
.ai-typing-hint-text {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(26,26,46,0.70);
    letter-spacing: 0.1px;
    white-space: nowrap;
    display: inline-block;
    width: auto;
    background: transparent;
    border-radius: 0;
    line-height: 1.2;
}
[data-theme="dark"] .ai-typing-hint-text { color: rgba(232,234,240,0.75); }

@media (max-width: 600px) {
    .ai-attachments-list { padding: 0 14px 8px; }
    .ai-attachment-chip-name { max-width: 140px; }
    .ai-attach-btn { width: 38px; height: 38px; }
    .ai-attach-btn svg { width: 18px; height: 18px; }
}