/* ============================================================================
   DSGVO Highlighting Styles
   ============================================================================
   CSS für die visuelle Hervorhebung erkannter persönlicher Daten im Chat.

   Enthält:
   - Basis-Highlighting Styles
   - Typ-spezifische Farben (PERSON, EMAIL, PHONE, etc.)
   - Tooltip-Styles für Hover-Erklärungen
   - Reverse-Mapped Styles (aus LLM-Antwort wiederhergestellt)
   - Dark Mode Unterstützung
   ============================================================================ */

/* ================================ Basis Highlight ================================ */

.dsgvo-highlight {
    border-radius: 3px;
    padding: 0 3px;
    cursor: help;
    position: relative;
    display: inline;
    transition: all 0.2s ease;
}

/* ================================ Entitätstyp-spezifische Farben ================================ */

/* Personen - Blau */
.dsgvo-highlight-person {
    background-color: rgba(33, 150, 243, 0.15);
    border-bottom: 2px dotted #2196F3;
}

.dsgvo-highlight-person:hover {
    background-color: rgba(33, 150, 243, 0.25);
}

/* E-Mail - Grün */
.dsgvo-highlight-email {
    background-color: rgba(76, 175, 80, 0.15);
    border-bottom: 2px dotted #4CAF50;
}

.dsgvo-highlight-email:hover {
    background-color: rgba(76, 175, 80, 0.25);
}

/* Telefon - Violett */
.dsgvo-highlight-phone {
    background-color: rgba(156, 39, 176, 0.15);
    border-bottom: 2px dotted #9C27B0;
}

.dsgvo-highlight-phone:hover {
    background-color: rgba(156, 39, 176, 0.25);
}

/* IBAN - Orange */
.dsgvo-highlight-iban {
    background-color: rgba(255, 152, 0, 0.15);
    border-bottom: 2px dotted #FF9800;
}

.dsgvo-highlight-iban:hover {
    background-color: rgba(255, 152, 0, 0.25);
}

/* Kreditkarte - Rot */
.dsgvo-highlight-creditcard {
    background-color: rgba(244, 67, 54, 0.15);
    border-bottom: 2px dotted #F44336;
}

.dsgvo-highlight-creditcard:hover {
    background-color: rgba(244, 67, 54, 0.25);
}

/* Adresse - Teal */
.dsgvo-highlight-address {
    background-color: rgba(0, 150, 136, 0.15);
    border-bottom: 2px dotted #009688;
}

.dsgvo-highlight-address:hover {
    background-color: rgba(0, 150, 136, 0.25);
}

/* Straße - Cyan */
.dsgvo-highlight-street {
    background-color: rgba(0, 188, 212, 0.15);
    border-bottom: 2px dotted #00BCD4;
}

.dsgvo-highlight-street:hover {
    background-color: rgba(0, 188, 212, 0.25);
}

/* Stadt - Indigo */
.dsgvo-highlight-city {
    background-color: rgba(63, 81, 181, 0.15);
    border-bottom: 2px dotted #3F51B5;
}

.dsgvo-highlight-city:hover {
    background-color: rgba(63, 81, 181, 0.25);
}

/* Postleitzahl - Pink */
.dsgvo-highlight-postalcode {
    background-color: rgba(233, 30, 99, 0.15);
    border-bottom: 2px dotted #E91E63;
}

.dsgvo-highlight-postalcode:hover {
    background-color: rgba(233, 30, 99, 0.25);
}

/* Datum - Amber */
.dsgvo-highlight-date {
    background-color: rgba(255, 193, 7, 0.15);
    border-bottom: 2px dotted #FFC107;
}

.dsgvo-highlight-date:hover {
    background-color: rgba(255, 193, 7, 0.25);
}

/* Kennzeichen - Deep Orange */
.dsgvo-highlight-license {
    background-color: rgba(255, 87, 34, 0.15);
    border-bottom: 2px dotted #FF5722;
}

.dsgvo-highlight-license:hover {
    background-color: rgba(255, 87, 34, 0.25);
}

/* Ausweis/Passport - Brown */
.dsgvo-highlight-passport {
    background-color: rgba(121, 85, 72, 0.15);
    border-bottom: 2px dotted #795548;
}

.dsgvo-highlight-passport:hover {
    background-color: rgba(121, 85, 72, 0.25);
}

/* ================================ Reverse-Mapped (aus LLM-Antwort) ================================ */

/* Stil für Werte die aus Platzhaltern wiederhergestellt wurden
   Verwendet ähnliche Farbgebung wie User-Input-Highlighting für Konsistenz */
.dsgvo-reverse-mapped {
    background-color: rgba(33, 150, 243, 0.12);  /* Blau wie PERSON */
    border-bottom: 2px dotted #2196F3;
}

.dsgvo-reverse-mapped:hover {
    background-color: rgba(33, 150, 243, 0.22);
}

/* ================================ Tooltip Styles ================================ */

.dsgvo-highlight::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Tooltip Pfeil */
.dsgvo-highlight::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
    pointer-events: none;
}

/* Tooltip bei Hover anzeigen */
.dsgvo-highlight:hover::after,
.dsgvo-highlight:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Tooltip nach unten falls nicht genug Platz oben */
.dsgvo-highlight.tooltip-bottom::after {
    bottom: auto;
    top: calc(100% + 5px);
}

.dsgvo-highlight.tooltip-bottom::before {
    bottom: auto;
    top: 100%;
    border-top-color: transparent;
    border-bottom-color: #333;
}

/* ================================ Dark Mode Unterstützung ================================ */

/* Falls die App Dark Mode unterstützt */
@media (prefers-color-scheme: dark) {
    .dsgvo-highlight-person {
        background-color: rgba(33, 150, 243, 0.25);
    }

    .dsgvo-highlight-email {
        background-color: rgba(76, 175, 80, 0.25);
    }

    .dsgvo-highlight-phone {
        background-color: rgba(156, 39, 176, 0.25);
    }

    .dsgvo-highlight-iban {
        background-color: rgba(255, 152, 0, 0.25);
    }

    .dsgvo-highlight::after {
        background: #1a1a1a;
    }

    .dsgvo-highlight::before {
        border-top-color: #1a1a1a;
    }
}

/* Dark Mode mit CSS Klasse */
.dark-mode .dsgvo-highlight-person,
[data-theme="dark"] .dsgvo-highlight-person {
    background-color: rgba(33, 150, 243, 0.25);
}

.dark-mode .dsgvo-highlight-email,
[data-theme="dark"] .dsgvo-highlight-email {
    background-color: rgba(76, 175, 80, 0.25);
}

.dark-mode .dsgvo-highlight::after,
[data-theme="dark"] .dsgvo-highlight::after {
    background: #1a1a1a;
}

/* ================================ Responsive Anpassungen ================================ */

@media (max-width: 768px) {
    .dsgvo-highlight::after {
        font-size: 11px;
        padding: 4px 8px;
        max-width: 200px;
        white-space: normal;
        text-align: center;
    }
}

/* ================================ Animation für neue Highlights ================================ */

@keyframes dsgvo-highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

.dsgvo-highlight.new {
    animation: dsgvo-highlight-pulse 1s ease-out;
}

/* ================================ Print Styles ================================ */

@media print {
    .dsgvo-highlight {
        background-color: #f5f5f5 !important;
        border-bottom: 1px solid #999 !important;
        padding: 0 2px;
    }

    .dsgvo-highlight::after,
    .dsgvo-highlight::before {
        display: none !important;
    }
}