/*
 * Maskot DJanalyzeru (robot DJ) - pravý dolní roh nad tlačítkem chatu DJ
 * Rezervace (#ai-widget-container: right 30px, bottom 30px, tlačítko 60 px,
 * okno chatu 350 x 500 px nad tlačítkem). Převzato z oddílu Maskot stylů
 * DJKatalogu, přebarveno na logo DJanalyzer (černá, bílá, #01ED5F).
 *
 * Kořen nepřijímá klik (pointer-events: none) - klikací je jen postava
 * a bublina, takže maskot nikdy neblokuje obsah stránky kolem sebe.
 */

.maskot {
    --maskot-w: 120px;
    --maskot-h: 150px;
    --maskot-right: 18px;
    --maskot-bottom: 92px;
    position: fixed;
    right: var(--maskot-right);
    bottom: var(--maskot-bottom);
    z-index: 9990;
    width: var(--maskot-w);
    height: var(--maskot-h);
    pointer-events: none;
    transition: right .35s ease, bottom .35s ease, opacity .25s ease, transform .25s ease;
}

.maskot[hidden] {
    display: none;
}

.maskot--mala {
    --maskot-w: 92px;
    --maskot-h: 115px;
}

.maskot__stage {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 18px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* spodek postavy se jemně vytratí do tlačítka chatu */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.maskot__stage:focus-visible {
    box-shadow: 0 0 0 2px #01ed5f;
}

.maskot__poster,
.maskot__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.maskot__canvas {
    opacity: 0;
    transition: opacity .3s ease;
}

.maskot.is-3d .maskot__canvas {
    opacity: 1;
}

.maskot.is-3d .maskot__poster {
    opacity: 0;
    transition: opacity .3s ease .1s;
}

/* jen tlačítko asistenta - postava není v rohu */
.maskot--tlacitko .maskot__stage {
    display: none;
}

/* při otevřeném chatu stojí robot vlevo od okna chatu (jen tam, kde se vejde;
   užší displej ho na místě schová - posunutý by vyjel z obrazovky a přestal
   by se vykreslovat i animovat) */
@media (min-width: 901px) {
    .maskot.is-chat {
        --maskot-right: 396px;
        --maskot-bottom: 30px;
    }
}

@media (max-width: 900px) {
    .maskot.is-chat {
        opacity: 0;
        transform: translateY(12px);
    }

    .maskot.is-chat .maskot__stage {
        pointer-events: none;
    }
}

/* telefon: postava trvale nestojí (zakrývala by obsah), vystoupí jen při
   gestu nebo tipu; jinak je robot jen v tlačítku chatu */
@media (max-width: 40rem) {
    .maskot {
        --maskot-w: 88px;
        --maskot-h: 110px;
        --maskot-right: 14px;
        --maskot-bottom: 86px;
        opacity: 0;
        transform: translateY(14px) scale(.92);
    }

    .maskot .maskot__stage {
        pointer-events: none;
    }

    .maskot.is-hraje,
    .maskot.is-mluvi {
        opacity: 1;
        transform: none;
    }

    .maskot.is-hraje .maskot__stage,
    .maskot.is-mluvi .maskot__stage {
        pointer-events: auto;
    }

    /* stránka mu vedle sebe nechala volné místo (data-maskot-misto, úvodní stránka:
       tlačítka hero vlevo, robot vpravo) - stojí tam, dokud se místo neodscrolluje */
    .maskot.is-misto {
        opacity: 1;
        transform: none;
    }

    .maskot.is-misto .maskot__stage {
        pointer-events: auto;
    }

    /* chat je na telefonu přes celou obrazovku - robot zůstává schovaný i při gestu */
    .maskot.is-chat.is-hraje,
    .maskot.is-chat.is-mluvi,
    .maskot.is-chat.is-misto {
        opacity: 0;
    }

    .maskot.is-chat .maskot__stage {
        pointer-events: none;
    }
}

/* ---------- bublina ---------- */

.maskot__bubble {
    position: absolute;
    right: calc(100% + 6px);
    bottom: 28px;
    width: max-content;
    max-width: min(270px, calc(100vw - var(--maskot-w) - 48px));
    padding: 12px 30px 15px 14px;
    background: #0b0c0d;
    color: #f4f6f7;
    border: 1px solid #01ed5f;
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 18px rgba(1, 237, 95, .16);
    font: 500 14px/1.45 Inter, system-ui, sans-serif;
    pointer-events: auto;
    animation: maskot-bubble-in .28s cubic-bezier(.2, .9, .3, 1.2);
}

.maskot__bubble[hidden] {
    display: none;
}

.maskot__text {
    margin: 0;
}

.maskot__btn {
    display: inline-flex;
    align-items: center;
    margin-top: 9px;
    padding: 6px 12px;
    border: 1px solid #01ed5f;
    border-radius: 999px;
    background: #01ed5f;
    color: #000;
    font: 600 13px/1.2 Inter, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.maskot__btn:hover,
.maskot__btn:focus-visible {
    background: #fff;
    border-color: #fff;
    outline: none;
}

.maskot__close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #9aa3a8;
    font: 18px/1 system-ui, sans-serif;
    cursor: pointer;
}

.maskot__close:hover,
.maskot__close:focus-visible {
    color: #fff;
    outline: none;
}

/* ubývající pruh: za jak dlouho bublina sama odejde */
.maskot__bar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
    background: rgba(1, 237, 95, .7);
    transform-origin: left center;
}

.maskot__bar.is-drzi {
    background: #6f787d;
}

@media (max-width: 40rem) {
    .maskot__bubble {
        position: fixed;
        right: 14px;
        left: auto;
        bottom: calc(var(--maskot-bottom) + var(--maskot-h) + 4px);
        max-width: calc(100vw - 28px);
        border-radius: 14px 14px 4px 14px;
    }
}

/* tablet na šířku na úvodní stránce: vlevo od robota jsou tlačítka hero (data-maskot-misto,
   hp-sections.css), bublina proto jde nad robota, aby je nezakryla */
@media (min-width: 900px) and (min-height: 500px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    body:has([data-maskot-misto]) .maskot__bubble {
        right: 0;
        bottom: calc(100% + 8px);
    }
}

@keyframes maskot-bubble-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.96);
    }
}

/* ---------- rámeček kolem prvku, na který maskot ukazuje ---------- */

.maskot-ring {
    position: fixed;
    z-index: 9989;
    border: 2px solid #01ed5f;
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(1, 237, 95, .18), 0 0 24px rgba(1, 237, 95, .35);
    pointer-events: none;
    opacity: 0;
}

.maskot-ring.is-on {
    animation: maskot-ring 3.6s ease forwards;
}

@keyframes maskot-ring {
    0% { opacity: 0; transform: scale(1.06); }
    10% { opacity: 1; transform: scale(1); }
    25% { box-shadow: 0 0 0 7px rgba(1, 237, 95, .1), 0 0 30px rgba(1, 237, 95, .45); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- avatar robota v tlačítku chatu DJ Rezervace ---------- */

#ai-widget-container .ai-chat-btn.has-maskot {
    background: #000 !important;
    border: 2px solid #01ed5f;
    box-shadow: 0 4px 20px rgba(1, 237, 95, .35) !important;
    overflow: hidden;
}

#ai-widget-container .ai-chat-btn.has-maskot .maskot-btn-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ikona bubliny ustoupí avataru; křížek při otevřeném chatu zůstává */
#ai-widget-container .ai-chat-btn.has-maskot .fa-comment-dots {
    opacity: 0;
}

#ai-widget-container .ai-chat-btn.has-maskot .fa-times {
    position: relative;
    z-index: 1;
    color: #01ed5f !important;
}

#ai-widget-container .ai-chat-window.open ~ .ai-chat-btn.has-maskot .maskot-btn-avatar {
    opacity: .25;
}

#ai-widget-container .ai-chat-header .has-maskot {
    position: relative;
    overflow: hidden;
    background: #000 !important;
    border: 1px solid #01ed5f;
}

#ai-widget-container .ai-chat-header .has-maskot .fa-robot {
    opacity: 0;
}

#ai-widget-container .ai-chat-header .maskot-head-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- ukázka (?maskot=ukazka) ---------- */

.maskot-demo {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 9991;
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100vh - 120px);
    overflow: auto;
    padding: 14px;
    background: rgba(8, 9, 10, .96);
    border: 1px solid #23272b;
    border-radius: 12px;
    color: #f2f4f5;
    font: 13px/1.4 Inter, system-ui, sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.maskot-demo h2 {
    margin: 0 0 4px;
    font-size: 15px;
}

.maskot-demo h3 {
    margin: 10px 0 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa3a8;
}

.maskot-demo__info {
    margin: 0;
    color: #01ed5f;
}

.maskot-demo__row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.maskot-demo__row button {
    padding: 5px 10px;
    border: 1px solid #2c3135;
    border-radius: 999px;
    background: #15181b;
    color: #f2f4f5;
    font: inherit;
    cursor: pointer;
}

.maskot-demo__row button:hover,
.maskot-demo__row button:focus-visible {
    border-color: #01ed5f;
    outline: none;
}

@media (max-width: 40rem) {
    .maskot-demo {
        bottom: auto;
        top: 70px;
        max-height: 45vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maskot,
    .maskot__canvas,
    .maskot__poster,
    .maskot__bubble {
        transition: none;
        animation: none;
    }

    .maskot-ring.is-on {
        animation: none;
        opacity: 1;
    }
}