/* ─────────────────────────────────────────────────────────────────────────────
   Drachencup KI-Suche — Modal Styles v1.1
   Alle Größen in rem. Farben als CSS-Custom-Properties für einfache Anpassung.
   Keine Dekorations-Icons. WCAG 2.1 AA konform.
───────────────────────────────────────────────────────────────────────────── */

:root {
    --dcais-accent:       #c0270f;   /* Drachencup-Rot — Kontrast ≥ 4.5:1 auf Dunkel */
    --dcais-accent-hover: #9e1f0b;
    --dcais-accent-focus: #ff6b4a;   /* Heller für Focus-Ring auf dunklem BG */
    --dcais-bg:           #111111;
    --dcais-surface:      #1e1e1e;
    --dcais-surface-2:    #2a2a2a;
    --dcais-border:       #3a3a3a;   /* Feste Farbe statt rgba — besserer Kontrast */
    --dcais-text:         #f2f2f2;
    --dcais-text-muted:   #a0a0a0;   /* Kontrast ≥ 4.5:1 auf #111 */
    --dcais-radius:       0.75rem;
    --dcais-radius-sm:    0.375rem;
    --dcais-shadow:       0 1.5rem 4rem rgba(0, 0, 0, 0.8);
    --dcais-z:            99999;
    /* Fokus-Ring: gut sichtbar, kein outline:none */
    --dcais-focus-ring:   0 0 0 0.1875rem var(--dcais-accent-focus);
}

/* ── Theme-Override: CSS-Variablen im Modal-Scope zurücksetzen ──────────── */
/*
   Das AvaDa/Impreza-Theme setzt --inputs-background global auf Rot.
   Wir überschreiben alle relevanten Theme-Variablen direkt im Modal-Scope,
   damit keine !important-Kaskade nötig ist.
*/

#dcais-overlay,
#dcais-overlay * {
    --inputs-background:    var(--dcais-surface);
    --inputs-color:         var(--dcais-text);
    --inputs-border-color:  var(--dcais-border);
    --inputs-border-radius: var(--dcais-radius-sm);
    --inputs-height:        auto;
    --inputs-padding:       0;
    --inputs-font-size:     1rem;
    --inputs-font-weight:   400;
    --inputs-letter-spacing: 0;
    --inputs-text-transform: none;
}

/* Direkt auf dem Element: CSS-Variable auf dem Element selbst setzen
   hat immer Vorrang vor Vererbung aus :root oder body */
#dcais-overlay input[type=search].dcais-input {
    --inputs-background:   #1e1e1e;
    --inputs-text-color:   #f2f2f2;
    --inputs-border-color: #3a3a3a;
    --inputs-box-shadow:   none;
    --inputs-border-width: 0.0625rem;
    --inputs-border-radius: 0.375rem;
    background:    #1e1e1e !important;
    color:         #f2f2f2 !important;
    border:        0.0625rem solid #3a3a3a !important;
    border-radius: 0.375rem !important;
    box-shadow:    none !important;
    padding:       0.75rem 1rem !important;
    font-size:     1rem !important;
    min-height:    2.75rem !important;
    line-height:   normal !important;
}

#dcais-overlay input[type=search].dcais-input:focus {
    --inputs-background: #1e1e1e;
    background:   #1e1e1e !important;
    border-color: #ffffff !important;
    box-shadow:   0 0 0 0.1875rem rgba(255, 255, 255, 0.45) !important;
    outline:      none !important;
}

#dcais-overlay input[type=search].dcais-input::placeholder {
    color:   #a0a0a0 !important;
    opacity: 1 !important;
}

/* ── Screen-Reader-Only Utility ─────────────────────────────────────────── */

.dcais-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ── Trigger-Button: rund, schwebend, unten links ───────────────────────── */
/*
   Klassisches Chatbot-Pattern: runder Button mit Icon, Tooltip beim Hover.
   Hohe Spezifität gegen Theme-Overrides.
*/

#dcais-trigger.dcais-trigger,
button#dcais-trigger {
    position:        absolute !important;
    bottom:          1.75rem !important;
    left:            1.75rem !important;
    z-index:         9998 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           3.5rem !important;
    height:          3.5rem !important;
    padding:         0 !important;
    background:      #c0270f !important;
    border:          none !important;
    border-radius:   50% !important;
    cursor:          pointer !important;
    font-size:       1.75rem !important;
    line-height:     1 !important;
    /* Schatten */
    box-shadow:      0 0.25rem 1.25rem rgba(192, 39, 15, 0.5),
                     0 0.125rem 0.5rem rgba(0, 0, 0, 0.3) !important;
    /* Pulsierender Ring via outline-Animation */
    animation:       dcais-btn-pulse 2.5s ease-out infinite !important;
    transition:      transform 0.2s ease, box-shadow 0.2s ease !important;
    /* Font Awesome Icon ausblenden — wir nutzen nur Emoji */
    color:           transparent !important;
    text-indent:     -9999px !important;
    overflow:        hidden !important;
}

/* Drachen-Emoji via ::before */
#dcais-trigger.dcais-trigger::before,
button#dcais-trigger::before {
    content:     '🐉';
    font-size:   1.625rem !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    display:     block !important;
    animation:   dcais-dragon-float 3s ease-in-out infinite !important;
}

/* Pulsierender Ring via ::after */
#dcais-trigger.dcais-trigger::after,
button#dcais-trigger::after {
    content:       '' !important;
    position:      absolute !important;
    inset:         -0.25rem !important;
    border-radius: 50% !important;
    border:        0.125rem solid rgba(192, 39, 15, 0.7) !important;
    animation:     dcais-ring-pulse 2.5s ease-out infinite !important;
    pointer-events: none !important;
}

@keyframes dcais-ring-pulse {
    0%   { transform: scale(1);    opacity: 0.9; }
    100% { transform: scale(1.6);  opacity: 0;   }
}

@keyframes dcais-dragon-float {
    0%, 100% { transform: translateY(0) rotate(0deg);   }
    50%       { transform: translateY(-0.2rem) rotate(5deg); }
}

@keyframes dcais-btn-pulse {
    0%, 100% { box-shadow: 0 0.25rem 1.25rem rgba(192, 39, 15, 0.5), 0 0.125rem 0.5rem rgba(0,0,0,0.3); }
    50%       { box-shadow: 0 0.25rem 2rem   rgba(192, 39, 15, 0.8), 0 0.125rem 0.5rem rgba(0,0,0,0.3); }
}

/* Hover: leicht größer, Ring stoppt */
#dcais-trigger.dcais-trigger:hover,
button#dcais-trigger:hover {
    transform:  scale(1.1) !important;
    animation:  none !important;
    box-shadow: 0 0.5rem 2rem rgba(192, 39, 15, 0.7),
                0 0.25rem 0.75rem rgba(0, 0, 0, 0.4) !important;
}

#dcais-trigger.dcais-trigger:hover::after,
button#dcais-trigger:hover::after {
    animation: none !important;
    opacity:   0 !important;
}

/* Fokus */
#dcais-trigger.dcais-trigger:focus-visible,
button#dcais-trigger:focus-visible {
    outline:        0.1875rem solid #ffffff !important;
    outline-offset: 0.25rem !important;
}

/* ── Tooltip: erscheint links neben dem Button beim Hover ── */

#dcais-trigger.dcais-trigger .dcais-tooltip,
button#dcais-trigger .dcais-tooltip {
    position:      absolute !important;
    left:          calc(100% + 0.75rem) !important;
    top:           50% !important;
    transform:     translateY(-50%) translateX(-0.5rem) !important;
    background:    #111111 !important;
    color:         #f2f2f2 !important;
    font-size:     0.875rem !important;
    font-weight:   600 !important;
    white-space:   nowrap !important;
    padding:       0.5rem 0.875rem !important;
    border-radius: 0.375rem !important;
    border:        0.0625rem solid #333 !important;
    box-shadow:    0 0.25rem 1rem rgba(0,0,0,0.4) !important;
    opacity:       0 !important;
    pointer-events: none !important;
    transition:    opacity 0.2s ease, transform 0.2s ease !important;
    text-indent:   0 !important;
    color:         #f2f2f2 !important;
}

/* Kleines Dreieck links am Tooltip */
#dcais-trigger.dcais-trigger .dcais-tooltip::before,
button#dcais-trigger .dcais-tooltip::before {
    content:      '' !important;
    position:     absolute !important;
    right:        100% !important;
    top:          50% !important;
    transform:    translateY(-50%) !important;
    border:       0.375rem solid transparent !important;
    border-right-color: #333 !important;
}

#dcais-trigger.dcais-trigger:hover .dcais-tooltip,
button#dcais-trigger:hover .dcais-tooltip {
    opacity:   1 !important;
    transform: translateY(-50%) translateX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    #dcais-trigger.dcais-trigger,
    button#dcais-trigger,
    #dcais-trigger.dcais-trigger::before,
    button#dcais-trigger::before,
    #dcais-trigger.dcais-trigger::after,
    button#dcais-trigger::after {
        animation: none !important;
    }
}

@media (max-width: 40rem) {
    #dcais-trigger.dcais-trigger,
    button#dcais-trigger {
        bottom: 1.25rem !important;
        left:   1.25rem !important;
        width:  3rem !important;
        height: 3rem !important;
    }
    /* Tooltip auf Mobile unter dem Button */
    #dcais-trigger.dcais-trigger .dcais-tooltip,
    button#dcais-trigger .dcais-tooltip {
        left:      50% !important;
        top:       calc(100% + 0.625rem) !important;
        transform: translateX(-50%) translateY(-0.5rem) !important;
        font-size: 0.8125rem !important;
    }
    #dcais-trigger.dcais-trigger:hover .dcais-tooltip,
    button#dcais-trigger:hover .dcais-tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }
    #dcais-trigger.dcais-trigger .dcais-tooltip::before,
    button#dcais-trigger .dcais-tooltip::before {
        right:        auto !important;
        bottom:       100% !important;
        top:          auto !important;
        left:         50% !important;
        transform:    translateX(-50%) !important;
        border-right-color: transparent !important;
        border-bottom-color: #333 !important;
    }
}

/* ── Overlay ────────────────────────────────────────────────────────────── */

.dcais-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.8);
    z-index:         var(--dcais-z);
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding:         5vh 1rem 2rem;
    /* Kein backdrop-filter — Barrierefreiheit: kann Motion verursachen */
}

.dcais-overlay[hidden] {
    display: none;
}

/* ── Modal-Box ──────────────────────────────────────────────────────────── */

.dcais-modal {
    position:       relative;
    width:          100%;
    max-width:      42rem;
    background:     var(--dcais-bg);
    border:         0.0625rem solid var(--dcais-border);
    border-radius:  var(--dcais-radius);
    box-shadow:     var(--dcais-shadow);
    padding:        2rem 2rem 1.5rem;
    max-height:     90vh;
    overflow-y:     auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dcais-surface-2) transparent;
}

/* Animationen nur wenn kein reduce-motion */
@media (prefers-reduced-motion: no-preference) {
    .dcais-overlay { animation: dcais-fade-in 0.18s ease; }
    .dcais-modal   { animation: dcais-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
}

@keyframes dcais-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dcais-slide-up {
    from { transform: translateY(1.25rem); opacity: 0; }
    to   { transform: translateY(0);       opacity: 1; }
}

/* ── Schließen-Button ───────────────────────────────────────────────────── */

.dcais-close {
    position:      absolute;
    top:           1rem;
    right:         1rem;
    padding:       0.375rem 0.75rem;
    background:    var(--dcais-surface);
    border:        0.0625rem solid var(--dcais-border);
    border-radius: var(--dcais-radius-sm);
    color:         var(--dcais-text-muted);
    font-size:     0.8125rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    color 0.15s, background 0.15s;
    /* Mindest-Touch-Target: 44×44px — Padding ergänzt Höhe */
    min-height:    2.25rem;
}

.dcais-close:hover {
    color:       var(--dcais-text);
    background:  var(--dcais-surface-2);
}

.dcais-close:focus-visible {
    outline:        0.1875rem solid var(--dcais-accent-focus);
    outline-offset: 0.125rem;
    color:          var(--dcais-text);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.dcais-header {
    text-align:    center;
    margin-bottom: 1.5rem;
    padding-right: 4rem; /* Platz für Schließen-Button */
}

.dcais-title {
    font-size:   1.375rem;
    font-weight: 700;
    color:       var(--dcais-text);
    margin:      0 0 0.375rem;
    line-height: 1.2;
}

.dcais-subtitle {
    font-size: 0.875rem;
    color:     var(--dcais-text-muted);
    margin:    0;
}

/* ── Label + Suchfeld ───────────────────────────────────────────────────── */

.dcais-input-wrap {
    margin-bottom: 0.5rem;
}

.dcais-input-label {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--dcais-text);
    margin-bottom: 0.375rem;
}

.dcais-input-row {
    display: flex;
    gap:     0.5rem;
}

.dcais-input {
    flex:               1 !important;
    padding:            0.75rem 1rem !important;
    background:         var(--dcais-surface) !important;
    border:             0.0625rem solid var(--dcais-border) !important;
    border-radius:      var(--dcais-radius-sm) !important;
    color:              var(--dcais-text) !important;
    font-size:          1rem !important;
    outline:            none !important;
    transition:         border-color 0.15s !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    min-height:         2.75rem !important;
    /* Theme-Overrides zurücksetzen */
    box-shadow:         none !important;
}

.dcais-input::placeholder {
    color: var(--dcais-text-muted);
}

.dcais-input:focus {
    border-color: #ffffff !important;
    box-shadow:   0 0 0 0.1875rem rgba(255, 255, 255, 0.5) !important;
    outline:      none !important;
}

.dcais-input::-webkit-search-cancel-button {
    display: none;
}

.dcais-submit {
    flex-shrink:  0 !important;
    /* Position/Layout-Overrides gegen us-btn-style_2 */
    position:     static !important;
    display:      inline-block !important;
    min-height:   2.75rem !important;
    min-width:    5rem !important;
    cursor:       pointer !important;
    transition:   background 0.15s, box-shadow 0.15s;
}

.dcais-submit:hover:not(:disabled) {
    background: var(--dcais-accent-hover);
}

.dcais-submit:focus-visible {
    outline:        0.1875rem solid var(--dcais-accent-focus);
    outline-offset: 0.125rem;
}

.dcais-submit:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* ── Loading ────────────────────────────────────────────────────────────── */

.dcais-loading {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    padding:     1.25rem 0;
    color:       var(--dcais-text-muted);
    font-size:   0.9375rem;
}

.dcais-loading[hidden] { display: none; }

.dcais-spinner {
    width:        1.25rem;
    height:       1.25rem;
    border:       0.125rem solid var(--dcais-border);
    border-top-color: var(--dcais-accent-focus);
    border-radius: 50%;
    flex-shrink:  0;
}

@media (prefers-reduced-motion: no-preference) {
    .dcais-spinner {
        animation: dcais-spin 0.7s linear infinite;
    }
}

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

/* ── Ergebnisse ─────────────────────────────────────────────────────────── */

.dcais-results[hidden] { display: none; }

/* KI-Zusammenfassung */
.dcais-summary-wrap {
    background:    var(--dcais-surface);
    border:        0.0625rem solid var(--dcais-border);
    border-left:   0.25rem solid var(--dcais-accent);
    border-radius: var(--dcais-radius-sm);
    padding:       1rem 1.125rem;
    margin-top:    1.25rem;
}

.dcais-summary-wrap[hidden] { display: none; }

.dcais-summary-label {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--dcais-accent-focus); /* heller = besserer Kontrast */
    margin:         0 0 0.5rem;
}

.dcais-summary {
    font-size:   0.9375rem;
    color:       var(--dcais-text);
    line-height: 1.6;
    margin:      0;
}

/* Ergebnis-Links */
.dcais-links-wrap {
    margin-top: 1.25rem;
}

.dcais-links-wrap[hidden] { display: none; }

.dcais-links-label {
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--dcais-text-muted);
    margin:         0 0 0.625rem;
}

.dcais-links {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0.5rem;
}

.dcais-links li {
    margin: 0;
}

.dcais-links a {
    display:         block;
    padding:         0.75rem 1rem;
    background:      var(--dcais-surface);
    border:          0.0625rem solid var(--dcais-border);
    border-radius:   var(--dcais-radius-sm);
    text-decoration: none;
    transition:      border-color 0.15s, background 0.15s;
    /* Mindest-Touch-Target */
    min-height:      2.75rem;
}

.dcais-links a:hover {
    border-color: var(--dcais-accent-focus);
    background:   var(--dcais-surface-2);
}

.dcais-links a:focus-visible {
    outline:        0.1875rem solid var(--dcais-accent-focus);
    outline-offset: 0.125rem;
    border-color:   var(--dcais-accent-focus);
}

.dcais-link-title {
    display:       block;
    font-size:     0.9375rem;
    font-weight:   600;
    color:         var(--dcais-text);
    margin-bottom: 0.2rem;
}

.dcais-link-excerpt {
    display:              block;
    font-size:            0.8125rem;
    color:                var(--dcais-text-muted);
    line-height:          1.45;
    /* Auf 2 Zeilen begrenzen */
    display:              -webkit-box;
    -webkit-line-clamp:   2;
    -webkit-box-orient:   vertical;
    overflow:             hidden;
}

/* ── Fehlermeldung ──────────────────────────────────────────────────────── */

.dcais-error {
    margin-top:    1rem;
    padding:       0.75rem 1rem;
    background:    rgba(192, 39, 15, 0.12);
    border:        0.0625rem solid rgba(255, 107, 74, 0.4);
    border-radius: var(--dcais-radius-sm);
    color:         #ffb3a0; /* Kontrast ≥ 4.5:1 auf dunklem BG */
    font-size:     0.9375rem;
}

.dcais-error[hidden] { display: none; }

/* ── Footer-Hinweis ─────────────────────────────────────────────────────── */

.dcais-footer-note {
    margin-top:  1.5rem;
    font-size:   0.75rem;
    color:       var(--dcais-text-muted);
    text-align:  center;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
    .dcais-overlay {
        padding:    0;
        align-items: flex-end;
    }

    .dcais-modal {
        padding:       1.25rem;
        border-radius: var(--dcais-radius) var(--dcais-radius) 0 0;
        max-height:    90vh;
    }

    .dcais-header {
        padding-right: 5rem;
    }

    .dcais-title {
        font-size: 1.125rem;
    }
}

/* ── High-contrast mode ─────────────────────────────────────────────────── */

@media (forced-colors: active) {
    .dcais-input,
    .dcais-submit,
    .dcais-close,
    .dcais-links a {
        border: 0.125rem solid ButtonText;
    }
}