/* ============================================================
   klammi.css — Tutorial-Maskottchen Styles (v0.9.4.7b)
   Office 95 Paper-Look für Sprechblase
   ============================================================ */

.klammi-root {
    position: fixed;
    right: 20px;
    bottom: 48px;
    z-index: 9400;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.klammi-root.klammi-hidden { display: none; }

/* ==== Video ========================================================= */

.klammi-video-wrap {
    width: 160px;
    height: 160px;
    pointer-events: auto;
    position: relative;
    /* v0.9.4.7d: Green-screen chromakey gibt jetzt saubere harte Kanten.
       Nur noch einen dezenten drop-shadow fuer Tiefe, keine Kanten-Verdichtung mehr noetig. */
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.35));
    /* v0.9.4.7e: Idle-Animation fuer mehr Dynamik zusaetzlich zum Video-Loop.
       Sanftes Schweben (translateY) + minimales Wackeln (rotate). */
    animation: klammi-idle-float 3.2s ease-in-out infinite;
    transform-origin: center bottom;
    cursor: pointer; /* Ctrl+Click-Hinweis */
}

.klammi-video {
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    object-fit: contain;
}

/* ==== Office-95-Style Sprechblase =================================== */

/*
 * Look & Feel: "Assistant Notes" aus Office 95 — gelbliches Papier,
 * feine horizontale Linien wie Notizblock, 2px solide dunkle Border,
 * Tahoma/MS Sans Serif Typo, 11px (Win95 Standard).
 */
.klammi-bubble {
    position: relative;
    /* Cream-yellow Papier aehnlich Win95-Tooltip-Gelb (#ffffe1) aber etwas waermer */
    background-color: #fff8c4;
    /* Horizontale Linien wie Notizblock */
    background-image:
        linear-gradient(to bottom,
            transparent 0,
            transparent 17px,
            rgba(110, 90, 30, 0.18) 17px,
            rgba(110, 90, 30, 0.18) 18px
        );
    background-size: 100% 18px;
    background-position: 0 6px;

    border: 2px solid #3a2e10;
    border-radius: 2px;  /* Office 95 Design: fast rechteckig */
    padding: 10px 30px 10px 14px;
    max-width: 340px;
    min-width: 220px;

    /* Originale Windows-95-Systemschrift */
    font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, "Segoe UI", sans-serif;
    font-size: 11px;
    line-height: 1.55;
    color: #1a1405;
    /* Harte, offset-Shadow wie ein liegender Notizzettel */
    box-shadow: 3px 3px 0 rgba(0,0,0,0.28), 6px 6px 14px rgba(0,0,0,0.15);
    pointer-events: auto;
    align-self: flex-start;
    transform: translateY(-10px);
    /* Leichte Drehung wie ein angeklebter Zettel */
    transform: translateY(-10px) rotate(-0.6deg);
}

/* Roter linker Rand wie bei Notizbloecken */
.klammi-bubble .klammi-bubble-inner {
    position: relative;
    white-space: pre-wrap;
    padding-left: 14px;
    border-left: 1px solid rgba(200, 50, 30, 0.45);
}

/* Schwanz/Pfeil zeigt nach rechts-unten auf Klammi */
.klammi-bubble::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: 28px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: #3a2e10;
    border-right: 0;
}
.klammi-bubble::before {
    content: "";
    position: absolute;
    right: -11px;
    bottom: 30px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-color: #fff8c4;
    border-right: 0;
    z-index: 1;
}

.klammi-bubble-text { }

/* Blinkender Caret */
.klammi-caret {
    display: inline-block;
    color: #3a2e10;
    font-weight: bold;
    margin-left: 1px;
    animation: klammi-blink 1s steps(2, start) infinite;
}
.klammi-caret.klammi-caret-done { display: none; }
@keyframes klammi-blink { 50% { opacity: 0; } }

/* Skip-Button im Win95-Style */
.klammi-skip {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    background: #c0c0c0;
    box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 #808080;
    color: #000;
    cursor: pointer;
    font-size: 11px;
    line-height: 14px;
    padding: 0;
    border-radius: 0;
    font-family: "MS Sans Serif", Tahoma, sans-serif;
    font-weight: bold;
}
.klammi-skip:active {
    box-shadow:
        inset -1px -1px 0 #fff,
        inset 1px 1px 0 #808080;
}
.klammi-skip:hover { background: #d4d0c8; }

/* ==== Auftritt-/Abgangs-Animationen ================================= */

.klammi-root.klammi-entering .klammi-video-wrap {
    animation: klammi-pop-in 0.5s cubic-bezier(.2,1.1,.3,1.2) both;
}
.klammi-root.klammi-entering .klammi-bubble {
    animation: klammi-bubble-in 0.55s cubic-bezier(.2,1.1,.3,1.2) both;
    animation-delay: 0.15s;
}
@keyframes klammi-pop-in {
    0%   { transform: translateY(60px) scale(0.4); opacity: 0; }
    70%  { transform: translateY(-4px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes klammi-bubble-in {
    0%   { transform: translateY(-10px) translateX(-12px) scale(0.7) rotate(-2deg); opacity: 0; }
    70%  { transform: translateY(-10px) translateX(2px) scale(1.03) rotate(-0.3deg); opacity: 1; }
    100% { transform: translateY(-10px) translateX(0) scale(1) rotate(-0.6deg); opacity: 1; }
}

.klammi-root.klammi-leaving .klammi-video-wrap {
    animation: klammi-pop-out 0.45s ease-in both;
}
.klammi-root.klammi-leaving .klammi-bubble {
    animation: klammi-bubble-out 0.35s ease-in both;
}
@keyframes klammi-pop-out {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(40px) scale(0.6); opacity: 0; }
}
@keyframes klammi-bubble-out {
    0%   { transform: translateY(-10px) scale(1) rotate(-0.6deg); opacity: 1; }
    100% { transform: translateY(-10px) scale(0.8) rotate(-2deg); opacity: 0; }
}

/* v0.9.4.7e: Idle-Float-Animation — laeuft dauerhaft waehrend Klammi sichtbar ist.
   Sanfte Bewegung, damit nicht nur Lippen/Mund sich bewegen, sondern auch der Koerper
   ein wenig atmet/schwebt. NICHT zu stark, damit es nicht cartoony-uebertrieben wirkt. */
@keyframes klammi-idle-float {
    0%   { transform: translateY(0)    rotate(0deg);   }
    25%  { transform: translateY(-3px) rotate(0.8deg); }
    50%  { transform: translateY(-1px) rotate(0deg);   }
    75%  { transform: translateY(-4px) rotate(-0.6deg);}
    100% { transform: translateY(0)    rotate(0deg);   }
}

/* Hinweis: die bestehenden Regeln .klammi-root.klammi-entering .klammi-video-wrap
   und .klammi-root.klammi-leaving .klammi-video-wrap haben hoehere Spezifitaet
   und ueberschreiben die idle-float-Animation waehrend Pop-In/Out automatisch. */

/* Mobile / kleine Screens */
@media (max-width: 900px) {
    .klammi-video-wrap { width: 120px; height: 120px; }
    .klammi-bubble { max-width: 260px; font-size: 10px; }
}