/* =========================================
   ZÁKLAD KONTEJNERU PRO NEZÁVISLÉ BUBLINY
   ========================================= */
.hw-mascot-instance {
    position: fixed;
    z-index: 999;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.hw-mascot-instance.visible { pointer-events: auto; }

/* POZICE */
.hw-mascot-instance.pos-bottom-right { bottom: -280px; right: 24px; align-items: flex-end; }
.hw-mascot-instance.pos-bottom-right.visible { bottom: 50px; }


.hw-mascot-instance.pos-bottom-left { bottom: -280px; left: 24px; align-items: flex-start; }
.hw-mascot-instance.pos-bottom-left.visible { bottom: 24px; }

.hw-mascot-instance.pos-top-right { top: -280px; right: 24px; align-items: flex-end; }
.hw-mascot-instance.pos-top-right.visible { top: 24px; }

.hw-mascot-instance.pos-top-left { top: -280px; left: 24px; align-items: flex-start; }
.hw-mascot-instance.pos-top-left.visible { top: 24px; }

/* =========================================
   BUBLINA A OBSAH
   ========================================= */
.hw-mascot-bubble {
    position: relative;
    max-width: 260px;
    padding: 14px 16px 12px;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    line-height: 1.45;
    backdrop-filter: blur(4px);
    background-color: var(--hw-bg);
    color: var(--hw-text);
    border: 1px solid var(--hw-border);
    font-family: var(--hw-font);
    font-size: var(--hw-font-size);
    opacity: var(--hw-opacity);
}
.hw-mascot-bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    /* Šipka automaticky jezdí nad hlavou maskota */
    right: auto;
    left: calc(var(--hw-avatar-pos, 80) * (100% - 90px) / 100 + 35px);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: inherit transparent transparent transparent;
}

/* =========================================
   ZAVÍRACÍ KŘÍŽEK (MODERNÍ)
   ========================================= */
.hw-mascot-close {
    position: absolute;
    top: 6px; 
    right: 6px;
    width: 24px; 
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    
    /* Přebírá barvu textu, ale je zprůhledněný, aby nerušil */
    color: var(--hw-text);
    opacity: 0.5;
    border-radius: 50%;
    
    /* Plynulost animací */
    transition: all 0.25s ease-in-out;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efekt po najetí myší (HOVER) */
.hw-mascot-close:hover {
    opacity: 1;
    background-color: rgba(255, 0, 0, 0.15); /* Jemný červený kruh na pozadí */
    color: #ff3333; /* Text zčervená */
    transform: scale(1.15) rotate(90deg); /* Zvětší se a efektně se otočí o 90 stupňů */
}

/* Badge (Odznak) */
.hw-badge {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    margin-bottom: 6px;
    border: 1px solid #800;
}

/* =========================================
   TLAČÍTKA
   ========================================= */
.hw-mascot-actions { 
    margin-top: 10px; 
    gap: 6px; 
    flex-wrap: wrap; 
}
.hw-mascot-instance .hw-btn {
    display: inline-block !important;
    padding: 6px 12px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: filter 0.15s, transform 0.15s;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: 1px solid transparent !important;
    background-color: var(--hw-btn-bg) !important;
    color: var(--hw-btn-color) !important;
    font-size: var(--hw-btn-size) !important;
    border-radius: var(--hw-btn-radius) !important;
}
.hw-mascot-instance .hw-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    color: var(--hw-btn-color) !important; 
    background-color: var(--hw-btn-bg) !important;
}
.hw-mascot-instance .hw-btn.secondary { 
    background-color: #444 !important; 
    color: #fff !important; 
}

/* =========================================
   AVATAR (Video i Obraz)
   ========================================= */
.hw-mascot-avatar {
    width: 100%;
    display: block;
}
.hw-mascot-avatar img, .hw-avatar-img, .hw-mascot-video-el {
    width: 90px;
    height: auto;
    display: block;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 95%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 95%);
    filter: contrast(110%);
    /* Plynulé posouvání avatara zleva doprava (0 - 100%) */
    margin-left: calc(var(--hw-avatar-pos, 80) * (100% - 90px) / 100);
}
.hw-default-avatar {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(2px 2px 0 #000);
}

/* =========================================
   TVARY (SHAPES)
   ========================================= */
.shape-win95 .hw-mascot-bubble {
    border: 2px solid var(--hw-border);
    border-top-color: #fff;
    border-left-color: #fff;
    border-bottom-color: #000;
    border-right-color: #000;
    border-radius: 0;
}

/* Vrácení starého křížku jen pro Win95 téma */
.shape-win95 .hw-mascot-close {
    top: 4px; 
    right: 4px;
    width: 18px; 
    height: 18px;
    background: silver;
    border: 1px solid #fff;
    border-bottom-color: #000;
    border-right-color: #000;
    font-size: 14px;
    opacity: 1;
    color: #000;
    border-radius: 0;
}
.shape-win95 .hw-mascot-close:hover {
    background: #dfdfdf;
    color: #000;
    transform: none; /* U starých oken rotaci nechceme */
}
.shape-win95 .hw-mascot-close:active {
    border: 1px solid #000;
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.hw-mascot-instance.shape-win95 .hw-btn {
    border: 1px solid #000 !important;
    border-top-color: #fff !important;
    border-left-color: #fff !important;
    border-radius: 0 !important;
}

.shape-modern .hw-mascot-bubble { border-radius: 16px; border-width: 2px; }
.shape-modern .hw-mascot-bubble::after { display: none; }

.shape-cyberpunk .hw-mascot-bubble {
    font-family: "Courier New", monospace !important;
    border-width: 2px;
    box-shadow: 0 0 12px var(--hw-border), inset 0 0 8px rgba(255,255,255,0.2);
}

/* =========================================
   ANIMACE A EFEKTY ZOBRAZENÍ
   ========================================= */
.hw-mascot-instance.attached { transition: opacity 0.55s, transform 0.55s; }
.hw-mascot-instance.anim-bounce { transition: all 0.55s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.hw-mascot-instance.anim-fade { transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0; }
.hw-mascot-instance.anim-fade.visible { opacity: 1; }

.hw-mascot-instance.anim-slide { transition: all 0.45s ease; }
.hw-mascot-instance.anim-slide.pos-bottom-right, .hw-mascot-instance.anim-slide.pos-bottom-left { transform: translateY(30px); }
.hw-mascot-instance.anim-slide.pos-bottom-right.visible, .hw-mascot-instance.anim-slide.pos-bottom-left.visible { transform: translateY(0); }

.hw-mascot-instance.anim-zoom { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s; transform: scale(0.6); opacity: 0; }
.hw-mascot-instance.anim-zoom.visible { transform: scale(1); opacity: 1; }

@media (max-width: 480px) {
    .hw-mascot-instance.pos-bottom-right, .hw-mascot-instance.pos-bottom-left,
    .hw-mascot-instance.pos-top-right, .hw-mascot-instance.pos-top-left {
        left: 12px; right: 12px; align-items: center;
    }
    .hw-mascot-bubble { max-width: 100%; }
}