/* /css/speech-bubble.css */

.speech-bubble-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    pointer-events: none; /* KORREKTUR v94: Verhindert, dass das Backdrop Klicks blockiert */
}

.speech-bubble {
    position: fixed;
    z-index: 200;
    background-color: #1e293b; /* slate-800 */
    color: #cbd5e1; /* slate-300 */
    padding: 1rem;
    border-radius: 0.75rem; /* 12px */
    border: 1px solid #334155; /* slate-700 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    /* Standard-Transform-Origin, wird per JS überschrieben */
    transform-origin: top center; 
}

.speech-bubble.visible {
    opacity: 1;
    transform: scale(1);
}

.speech-bubble-content {
    font-size: 0.95rem;
    line-height: 1.5;
}

.speech-bubble-content p {
    margin: 0;
}

.speech-bubble-content strong {
    color: #f59e0b; /* amber-500 */
}

/* --- Pfeil-Styling --- */
.speech-bubble::before, .speech-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Pfeil unten (Standard) */
.speech-bubble.arrow-bottom::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 12px 0 12px;
    border-color: #334155 transparent transparent transparent;
}
.speech-bubble.arrow-bottom::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0 10px;
    border-color: #1e293b transparent transparent transparent;
    margin-top: -2px; /* Überlappung für saubere Kante */
}

/* Pfeil oben */
.speech-bubble.arrow-top::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent #334155 transparent;
}
.speech-bubble.arrow-top::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #1e293b transparent;
    margin-bottom: -2px;
}

/* Pfeil rechts */
.speech-bubble.arrow-right::before {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #334155;
}
.speech-bubble.arrow-right::after {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #1e293b;
    margin-left: -2px;
}

/* Pfeil links */
.speech-bubble.arrow-left::before {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 12px 12px 12px 0;
    border-color: transparent #334155 transparent transparent;
}
.speech-bubble.arrow-left::after {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border-width: 10px 10px 10px 0;
    border-color: transparent #1e293b transparent transparent;
    margin-right: -2px;
}

/* --- Spezifisches Styling für Menüs in der Bubble --- */
.speech-bubble.user-menu {
    padding: 0.5rem;
    min-width: 200px;
}