{"id":104,"date":"2026-08-18T20:37:34","date_gmt":"2026-08-18T20:37:34","guid":{"rendered":"https:\/\/katarinabaginova.com\/?page_id=104"},"modified":"2026-08-21T09:58:04","modified_gmt":"2026-08-21T09:58:04","slug":"demo-chat","status":"publish","type":"page","link":"https:\/\/katarinabaginova.com\/sk\/demo-chat","title":{"rendered":"Demo chat"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background hundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:0px;--awb-padding-right:0px;--awb-padding-bottom:0px;--awb-padding-left:0px;--awb-margin-top:0px;--awb-margin-bottom:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"width:104% !important;max-width:104% !important;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><!-- ============================================================\n     KB EDUCATION \u2014 demo_chat_mockup.html (interactive chat demo)\n     For Avada \"Code Block\" element.\n     Header lives in kb-mockup_header.html, footer lives in\n     kb-mockup_footer.html (both separate Code Blocks \u2014 this\n     file covers the main content + interactive script only).\n\n     FIXED: shadow-xs (7 occurrences) is a Tailwind v4 class name\n     that doesn't exist in v3 \u2014 this project is pinned to v3.4.19,\n     so these silently rendered with NO shadow at all. Replaced\n     with shadow-sm, the correct v3 equivalent (same visual value).\n\n     Custom JS renamed to kb- prefix per project convention:\n       startScenario -> kbStartScenario\n       sceneriosData -> kbScenariosData (also fixes a typo in\n       the original variable name: \"scenerios\" -> \"scenarios\")\n\n     Custom CSS-dependent classes renamed to kb- prefix:\n       typing-indicator -> kb-typing-indicator (CSS already\n         exists in kb-custom-css-master.css from the sticky-header\n         work \u2014 already defined and ready to use, no action needed)\n       chat-bubble-enter -> kb-chat-bubble-enter (NEW \u2014 needs CSS,\n         see kb-mockup-extra-css.css)\n       chat-scroll -> kb-chat-scroll (NEW \u2014 needs CSS, see\n         kb-mockup-extra-css.css)\n       temp-typing -> kb-temp-typing (JS-only marker class, no\n         CSS needed, renamed for consistency)\n\n     TODO before go-live: (resolved) katarina_portrait_real.jpg\n     now points to \/wp-content\/uploads\/2026\/08\/KatarinaBaginova.jpeg\n\n     Note: the online-status dot on the avatar still uses stock\n     Tailwind bg-green-500 (not brand-green) \u2014 left as-is since\n     a green \"online\" dot is a universal, expected UX convention\n     regardless of brand palette (different from the payment\n     \"success\" badge case). Flagging in case you'd rather match\n     brand-green for full consistency.\n     ============================================================ -->\n\n<div class=\"kb-mockup-page bg-brand-beige text-brand-navy font-sans selection:bg-brand-gold selection:text-brand-navy min-h-screen flex flex-col justify-between antialiased\">\n\n\n    <!-- HEADER \/ NAVIGATION -->\n  <!-- Header lives in kb-mockup_header.html (separate Code Block above this one) -->\n<!-- MAIN CONTENT AREA -->\n    <main class=\"flex-1 py-10 md:py-14 px-4 sm:px-6 flex flex-col items-center justify-start\">\n        <div class=\"max-w-3xl w-full space-y-8 text-center\">\n\n            <!-- INTRO HEADINGS POD\u013dA ZADANIA -->\n            <div class=\"space-y-3\">\n                <h1 class=\"font-serif text-3xl md:text-5xl text-brand-navy font-normal leading-tight\">\n                    Pozrite si <span class=\"italic text-brand-gold font-normal\">uk\u00e1\u017eky rozhovorov<\/span>\n                <\/h1>\n                <p class=\"text-xs md:text-sm text-brand-slate font-normal max-w-xl mx-auto leading-relaxed\">\n                    Vyberte si jednu z typick\u00fdch situ\u00e1ci\u00ed a pozrite sa, ako v\u00e1s @Katar\u00ednaPriTebe v re\u00e1lnom \u010dase vr\u00e1ti k rozvahe, porozumeniu a pokojnej komunik\u00e1cii.\n                <\/p>\n            <\/div>\n\n            <!-- SCENARIO SWITCHER TABS -->\n            <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 max-w-2xl mx-auto text-left\">\n                <!-- SCENARIO 1 -->\n                <button onclick=\"kbStartScenario(1)\" id=\"tab-btn-1\" class=\"scenario-btn p-3.5 rounded-2xl border-2 transition-all duration-300 flex items-center gap-3 bg-brand-gold text-brand-navyDark border-brand-gold shadow-md\">\n                    <span class=\"text-2xl shrink-0\">\ud83e\ude99<\/span>\n                    <div class=\"flex flex-col\">\n                        <span class=\"font-bold text-xs leading-tight\">Komunika\u010dn\u00fd ping-pong<\/span>\n                        <span class=\"text-[11px] opacity-85 leading-tight mt-0.5\">Kopec riadu v kuchyni<\/span>\n                    <\/div>\n                <\/button>\n\n                <!-- SCENARIO 2 -->\n                <button onclick=\"kbStartScenario(2)\" id=\"tab-btn-2\" class=\"scenario-btn p-3.5 rounded-2xl border-2 transition-all duration-300 flex items-center gap-3 bg-white text-brand-navy border-brand-border hover:border-brand-gold\/60 shadow-sm\">\n                    <span class=\"text-2xl shrink-0\">\ud83d\udeaa<\/span>\n                    <div class=\"flex flex-col\">\n                        <span class=\"font-bold text-xs leading-tight\">Odchod z miestnosti<\/span>\n                        <span class=\"text-[11px] text-brand-slate leading-tight mt-0.5\">Man\u017eel buchol dverami<\/span>\n                    <\/div>\n                <\/button>\n\n                <!-- SCENARIO 3 -->\n                <button onclick=\"kbStartScenario(3)\" id=\"tab-btn-3\" class=\"scenario-btn p-3.5 rounded-2xl border-2 transition-all duration-300 flex items-center gap-3 bg-white text-brand-navy border-brand-border hover:border-brand-gold\/60 shadow-sm\">\n                    <span class=\"text-2xl shrink-0\">\ud83d\udd11<\/span>\n                    <div class=\"flex flex-col\">\n                        <span class=\"font-bold text-xs leading-tight\">Konflikt s pubertiakom<\/span>\n                        <span class=\"text-[11px] text-brand-slate leading-tight mt-0.5\">Neskor\u00fd pr\u00edchod domov<\/span>\n                    <\/div>\n                <\/button>\n            <\/div>\n\n            <!-- REALISTIC MOBILE PHONE FRAME MOCKUP (AVADA DESIGN) -->\n            <div class=\"relative mx-auto max-w-[430px] w-full pt-2\">\n                <!-- Phone Bezel Body -->\n                <div class=\"relative bg-brand-navyDark text-white rounded-[48px] p-3.5 shadow-2xl border-4 border-brand-navy\/40 ring-1 ring-black\/30\">\n                    <!-- Top Dynamic Island \/ Speaker Bar -->\n                    <div class=\"absolute top-5 left-1\/2 -translate-x-1\/2 w-28 h-4 bg-black\/90 rounded-full z-20 flex items-center justify-center space-x-2\">\n                        <span class=\"w-2.5 h-2.5 rounded-full bg-[#111]\"><\/span>\n                        <span class=\"w-2 h-2 rounded-full bg-blue-900\/60\"><\/span>\n                    <\/div>\n\n                    <!-- Inner Phone Screen Area -->\n                    <div class=\"bg-[#f7f5f0] text-brand-navy rounded-[38px] overflow-hidden flex flex-col h-[560px] pt-5 border border-white\/10 shadow-inner\" >\n                        <!-- Screen Header -->\n                        <div class=\"bg-brand-navy text-white px-5 py-3.5 flex items-center justify-between border-b border-brand-border\/20 shadow-sm shrink-0\">\n                            <div class=\"flex items-center space-x-3\">\n                                <div class=\"relative w-10 h-10 rounded-full overflow-hidden border-2 border-brand-gold shrink-0 shadow-md\">\n                                    <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/08\/KatarinaBaginova.jpeg\" alt=\"Katar\u00edna Baginov\u00e1 MCC\" class=\"w-full h-full object-cover\" style=\"width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; object-fit: cover !important;\">\n                                    <span class=\"absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full\"><\/span>\n                                <\/div>\n                                <div class=\"text-left\">\n                                    <span class=\"text-sm font-bold text-white tracking-tight block\">@Katar\u00ednaPriTebe<\/span>\n                                    <span id=\"typing-status\" class=\"text-[11px] text-brand-gold block font-medium\">Akt\u00edvna<\/span>\n                                <\/div>\n                            <\/div>\n                            <span class=\"text-xs text-white\/60 font-serif italic\">ICF MCC<\/span>\n                        <\/div>\n\n                        <!-- Chat Messages Window -->\n                        <div id=\"chat-box\" class=\"kb-chat-scroll flex-1 p-4 overflow-y-auto space-y-3.5 bg-[#f7f5f0] text-left text-xs\">\n                            <!-- Dynamicky naplnen\u00e9 cez JS -->\n                        <\/div>\n\n                        <!-- Bottom Telegram Input Bar -->\n                        <div class=\"bg-white px-4 py-3 border-t border-brand-border\/60 flex items-center space-x-2 shrink-0\">\n                            <div class=\"w-8 h-8 rounded-full bg-brand-beige flex items-center justify-center text-brand-slate text-sm\">\ud83d\udcce<\/div>\n                            <div class=\"flex-1 bg-brand-beige text-brand-slate text-xs px-4 py-2 rounded-full border border-brand-border\/60 text-left truncate\">\n                                Tvoja vedom\u00e1 pauza...\n                            <\/div>\n                            <div class=\"w-8 h-8 rounded-full bg-brand-gold text-brand-navy flex items-center justify-center font-bold text-xs shadow-sm\">\n                                \u2794\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Phone Bottom Home Indicator Bar -->\n                    <div class=\"w-32 h-1 bg-white\/40 rounded-full mx-auto my-2.5\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- BOTTOM CTA TO LANDING PAGE \/ PRICING -->\n            <div class=\"pt-4 pb-2\">\n                <a href=\"\/sk\/#cennik\" class=\"inline-flex items-center justify-center px-10 py-4 text-xs uppercase tracking-widest font-black bg-brand-gold text-brand-navy hover:bg-brand-navy hover:text-white transition-all duration-300 rounded-xl shadow-lg shadow-brand-gold\/20\">\n                    Vybra\u0165 si program sprev\u00e1dzania \u2794\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/main>\n\n    <!-- FOOTER -->\n  <!-- Footer lives in kb-mockup_footer.html (separate Code Block below this one) -->\n<!-- JAVASCRIPT: EXACT UNTOUCHED DIALOGUES -->\n    <script>\n        \/\/ --- OFICI\u00c1LNA DATAB\u00c1ZA SCEN\u00c1ROV (100 % PRESN\u00c9 ZNENIE) ---\n        const kbScenariosData = {\n            1: [\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Vyto\u010dilo ma to a m\u00e1m nutkanie nahnevane za\u00fato\u010di\u0165!' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Em\u00f3cia hnevu pr\u00edde sama, nep\u00fdta si dovolenie. Je re\u00e1lna, t\u00e1 sa ovplyvni\u0165 ned\u00e1. M\u00f4\u017eem v\u0161ak ovplyvni\u0165 to, \u010do s \u0148ou urob\u00edm. Ako sa zachov\u00e1m a kv\u00f4li \u010domu, kv\u00f4li komu sa chcem zachova\u0165 inak. Sk\u00f4r ne\u017e urob\u00ed\u0161 \u010doko\u013evek, zastav sa na chv\u00ed\u013eu. \u010co presne \u0165a vyto\u010dilo najviac - \u017ee ten riad tam le\u017e\u00ed, alebo \u017ee si op\u00e4\u0165 t\u00e1, ktor\u00e1 to mus\u00ed rie\u0161i\u0165?' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'To druh\u00e9. M\u00e1m pocit, \u017ee som nevidite\u013en\u00e1. \u017de sa to odo m\u0148a o\u010dak\u00e1va automaticky.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'To je d\u00f4le\u017eit\u00e9 uvedomenie. Ke\u010f sa c\u00edti\u0161 nevidite\u013en\u00e1, \u010do by potrebovala t\u00e1 \u010das\u0165 teba, ktor\u00e1 to teraz nesie?' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Chcem, aby si to v\u0161imol s\u00e1m. Bez toho, aby som musela nie\u010do hovori\u0165.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Hm, nu\u017e to \u010do urobia in\u00ed m\u00e1me v ruk\u00e1ch na 0,0%. To, \u010do sa rozhodneme urobi\u0165 my, to je u\u017e nie\u010do celkom in\u00e9. \u010co mysl\u00ed\u0161, \u010do by sa muselo sta\u0165, aby si to povedala - nie s hnevom, ale tak, aby si zv\u00fd\u0161ila pravdepodobnos\u0165, \u017ee \u0165a bude po\u010d\u00fava\u0165?' \n                }\n            ],\n            2: [\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Man\u017eel po h\u00e1dke buchol dverami a odi\u0161iel do ved\u013eaj\u0161ej izby. Stra\u0161ne ma vyt\u00e1\u010da to ticho, chcem \u00eds\u0165 za n\u00edm a vyrie\u0161i\u0165 to!' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'T\u00e1 t\u00fa\u017eba \u00eds\u0165 za n\u00edm a vyrie\u0161i\u0165 to hne\u010f je pochopite\u013en\u00e1. Ale sk\u00fas sa na chv\u00ed\u013eu zastavi\u0165 - \u010do si mysl\u00ed\u0161, \u017ee sa teraz deje v jeho hlave?' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Neviem. Asi je nahnevan\u00fd, mo\u017eno urazen\u00fd.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Ke\u010f buchol dverami a odi\u0161iel, je mo\u017en\u00e9, \u017ee potrebuje priestor, aby sa jeho em\u00f3cie upokojili - nie preto, \u017ee mu na tom nez\u00e1le\u017e\u00ed, ale pr\u00e1ve preto, \u017ee mu na tom a na tebe z\u00e1le\u017e\u00ed. \u010co by sa stalo, keby si mu ten priestor dala a potom, ke\u010f obaja budete pokojnej\u0161\u00ed, i\u0161la za n\u00edm s ot\u00e1zkou: Ak sa \u0165a m\u00f4\u017eem op\u00fdta\u0165, nad \u010d\u00edm prem\u00fd\u0161\u013ea\u0161? A ak m\u00f4\u017ee\u0161 bu\u010f trpezliv\u00e1, po\u010dkaj na odpove\u010f, nech by to trvalo akoko\u013evek dlho.' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'To by mi nenapadlo. V\u017edy m\u00e1m pocit, \u017ee ticho znamen\u00e1, \u017ee mu na mne nez\u00e1le\u017e\u00ed.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: '\u010co ak je to mo\u017eno inak? \u010co ak ticho niekedy znamen\u00e1 nie\u010do celkom in\u00e9 - \u010do ak je to mo\u017eno jeho sp\u00f4sob, ako sa chr\u00e1ni\u0165 pred t\u00fdm, aby nepovedal nie\u010do, \u010do by nesk\u00f4r \u013eutoval? \u010co ak?' \n                }\n            ],\n            3: [\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Dc\u00e9ra pri\u0161la neskoro domov, treskla dverami a odvrkla, nech ju nech\u00e1m na pokoji. M\u00e1m chu\u0165 jej da\u0165 obrovsk\u00fd trest!' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Tvoj impulz je \u00faplne prirodzen\u00fd - pri\u0161la neskoro e\u0161te sa spr\u00e1va odmietavo a ty si cel\u00fd ve\u010der \u010dakala. Je za t\u00fdm strach, hnev, alebo oboje?' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Oboje. B\u00e1la som sa o \u0148u a teraz ma ignoruje, akoby som bola ni\u010d.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Trest v tejto chv\u00edli by mohol zatvori\u0165 dvere k rozhovoru, ktor\u00fd by ste zjavne potrebovali. Nie teraz, ke\u010f s\u00fa em\u00f3cie na vrchole - ale nesk\u00f4r, ke\u010f sa obe upokoj\u00edte. A potom sk\u00fas nepoveda\u0165 \"pre\u010do si pri\u0161la neskoro\" ale nie\u010do ako: \"\u010co sa dnes ve\u010der dialo, \u010do \u0165a tak rozhodilo?\" Dc\u00e9ra, ktor\u00e1 tresne dverami, v\u00e4\u010d\u0161inou nesie nie\u010do ove\u013ea v\u00e4\u010d\u0161ie, ako len neskor\u00fd pr\u00edchod.' \n                },\n                { \n                    sender: 'user', \n                    name: 'Klientka',\n                    text: 'Ani ma nenapadlo, \u017ee by mohlo \u00eds\u0165 o nie\u010do in\u00e9.' \n                },\n                { \n                    sender: 'buddy', \n                    name: 'Katar\u00ednaPriTebe',\n                    text: 'Pr\u00e1ve to je ten posun - od reakcie na spr\u00e1vanie, k z\u00e1ujmu o \u010dloveka, na ktorom mi z\u00e1le\u017e\u00ed. M\u00f4\u017ee\u0161 tak zisti\u0165 \u010do bolo skuto\u010dne za jej spr\u00e1van\u00edm. \u010co by ti pomohlo, aby si to ticho vydr\u017eala dnes ve\u010der a otvorila rozhovor zajtra?' \n                }\n            ]\n        };\n\n        let currentTimeout = null;\n\n        function kbStartScenario(id) {\n            \/\/ Prepnutie vizu\u00e1lu akt\u00edvneho tla\u010didla\n            [1, 2, 3].forEach(i => {\n                const btn = document.getElementById(`tab-btn-${i}`);\n                if (i === id) {\n                    btn.className = \"scenario-btn p-3.5 rounded-2xl border-2 transition-all duration-300 flex items-center gap-3 bg-brand-gold text-brand-navyDark border-brand-gold shadow-md\";\n                    btn.querySelector('.text-brand-slate')?.classList.replace('text-brand-slate', 'opacity-85');\n                } else {\n                    btn.className = \"scenario-btn p-3.5 rounded-2xl border-2 transition-all duration-300 flex items-center gap-3 bg-white text-brand-navy border-brand-border hover:border-brand-gold\/60 shadow-sm\";\n                    btn.querySelector('.opacity-85')?.classList.replace('opacity-85', 'text-brand-slate');\n                }\n            });\n\n            const chatBox = document.getElementById('chat-box');\n            const typingStatus = document.getElementById('typing-status');\n            chatBox.innerHTML = ''; \/\/ Vy\u010distenie chatu\n            \n            if (currentTimeout) {\n                clearTimeout(currentTimeout);\n            }\n\n            const messages = kbScenariosData[id];\n            let msgIndex = 0;\n\n            function showNextMessage() {\n                if (msgIndex >= messages.length) {\n                    typingStatus.innerText = 'Akt\u00edvna';\n                    return;\n                }\n\n                const currentMsg = messages[msgIndex];\n                \n                if (currentMsg.sender === 'user') {\n                    \/\/ Pou\u017e\u00edvate\u013esk\u00e1 spr\u00e1va sa zobraz\u00ed\n                    typingStatus.innerText = 'Akt\u00edvna';\n                    const msgDiv = document.createElement('div');\n                    msgDiv.className = 'kb-chat-bubble-enter max-w-[85%] p-3.5 rounded-2xl bg-brand-navy text-white self-end ml-auto rounded-br-sm text-[13px] leading-relaxed shadow-sm';\n                    msgDiv.innerHTML = `<span class=\"block text-[10px] uppercase tracking-wider font-bold text-white\/60 mb-0.5\">${currentMsg.name}<\/span>${currentMsg.text}`;\n                    chatBox.appendChild(msgDiv);\n                    chatBox.scrollTop = chatBox.scrollHeight;\n                    msgIndex++;\n                    currentTimeout = setTimeout(showNextMessage, 1000);\n                } else {\n                    \/\/ Zobrazenie indik\u00e1tora p\u00edsania u sprievodkyne\n                    typingStatus.innerText = 'P\u00ed\u0161e...';\n                    const typingDiv = document.createElement('div');\n                    typingDiv.className = 'kb-chat-bubble-enter kb-temp-typing max-w-[85%] p-3 rounded-2xl bg-white border border-brand-border self-start mr-auto rounded-bl-sm text-brand-slate shadow-sm';\n                    typingDiv.innerHTML = '<div class=\"kb-typing-indicator flex items-center space-x-1 py-1 px-2\"><span class=\"w-1.5 h-1.5 rounded-full bg-brand-gold\"><\/span><span class=\"w-1.5 h-1.5 rounded-full bg-brand-gold\"><\/span><span class=\"w-1.5 h-1.5 rounded-full bg-brand-gold\"><\/span><\/div>';\n                    chatBox.appendChild(typingDiv);\n                    chatBox.scrollTop = chatBox.scrollHeight;\n\n                    currentTimeout = setTimeout(() => {\n                        \/\/ Odstr\u00e1nenie indik\u00e1tora p\u00edsania\n                        const temp = document.querySelector('.kb-temp-typing');\n                        if (temp) temp.remove();\n\n                        \/\/ Skuto\u010dn\u00e9 zobrazenie spr\u00e1vy sprievodkyne\n                        const msgDiv = document.createElement('div');\n                        msgDiv.className = 'kb-chat-bubble-enter max-w-[90%] p-3.5 rounded-2xl bg-white text-brand-navy border-l-4 border-l-brand-gold border-t border-r border-b border-brand-border self-start mr-auto rounded-bl-sm text-[13px] leading-relaxed shadow-sm';\n                        \n                        msgDiv.innerHTML = `<span class=\"block text-[10px] uppercase tracking-wider font-bold text-brand-goldDark mb-1\">${currentMsg.name}<\/span>${currentMsg.text}`;\n                        chatBox.appendChild(msgDiv);\n                        chatBox.scrollTop = chatBox.scrollHeight;\n                        \n                        msgIndex++;\n                        currentTimeout = setTimeout(showNextMessage, 1500);\n                    }, 1400); \/\/ Simulovan\u00e9 trojbodkov\u00e9 blikanie na 1.4 sekundy\n                }\n            }\n\n            showNextMessage();\n        }\n\n        \/\/ Spustenie prv\u00e9ho scen\u00e1ra pri na\u010d\u00edtan\u00ed\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            kbStartScenario(1);\n        });\n    <\/script>\n\n<\/div><!-- \/.kb-mockup-page --><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-104","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Demo chat - Katar\u00edna Baginov\u00e1<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/katarinabaginova.com\/sk\/demo-chat\" \/>\n<meta property=\"og:locale\" content=\"sk_SK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Demo chat - Katar\u00edna Baginov\u00e1\" \/>\n<meta property=\"og:url\" content=\"https:\/\/katarinabaginova.com\/sk\/demo-chat\" \/>\n<meta property=\"og:site_name\" content=\"Katar\u00edna Baginov\u00e1\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-21T09:58:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Predpokladan\u00fd \u010das \u010d\u00edtania\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 min\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/demo-chat\",\"url\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/demo-chat\",\"name\":\"Demo chat - Katar\u00edna Baginov\u00e1\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#website\"},\"datePublished\":\"2026-08-18T20:37:34+00:00\",\"dateModified\":\"2026-08-21T09:58:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/demo-chat#breadcrumb\"},\"inLanguage\":\"sk-SK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/demo-chat\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/demo-chat#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Domovsk\u00e1 str\u00e1nka\",\"item\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Demo chat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#website\",\"url\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/\",\"name\":\"Katar\u00edna Baginov\u00e1\",\"description\":\"Digit\u00e1lna partnerka v prem\u00fd\u0161\u013ean\u00ed\",\"publisher\":{\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sk-SK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#organization\",\"name\":\"Katar\u00edna Baginov\u00e1\",\"url\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/katarinabaginova.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/icf_mcc_badge.png\",\"contentUrl\":\"https:\\\/\\\/katarinabaginova.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/icf_mcc_badge.png\",\"width\":897,\"height\":897,\"caption\":\"Katar\u00edna Baginov\u00e1\"},\"image\":{\"@id\":\"https:\\\/\\\/katarinabaginova.com\\\/sk\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Demo chat - Katar\u00edna Baginov\u00e1","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/katarinabaginova.com\/sk\/demo-chat","og_locale":"sk_SK","og_type":"article","og_title":"Demo chat - Katar\u00edna Baginov\u00e1","og_url":"https:\/\/katarinabaginova.com\/sk\/demo-chat","og_site_name":"Katar\u00edna Baginov\u00e1","article_modified_time":"2026-08-21T09:58:04+00:00","twitter_card":"summary_large_image","twitter_misc":{"Predpokladan\u00fd \u010das \u010d\u00edtania":"7 min\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/katarinabaginova.com\/sk\/demo-chat","url":"https:\/\/katarinabaginova.com\/sk\/demo-chat","name":"Demo chat - Katar\u00edna Baginov\u00e1","isPartOf":{"@id":"https:\/\/katarinabaginova.com\/sk\/#website"},"datePublished":"2026-08-18T20:37:34+00:00","dateModified":"2026-08-21T09:58:04+00:00","breadcrumb":{"@id":"https:\/\/katarinabaginova.com\/sk\/demo-chat#breadcrumb"},"inLanguage":"sk-SK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/katarinabaginova.com\/sk\/demo-chat"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/katarinabaginova.com\/sk\/demo-chat#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Domovsk\u00e1 str\u00e1nka","item":"https:\/\/katarinabaginova.com\/sk"},{"@type":"ListItem","position":2,"name":"Demo chat"}]},{"@type":"WebSite","@id":"https:\/\/katarinabaginova.com\/sk\/#website","url":"https:\/\/katarinabaginova.com\/sk\/","name":"Katar\u00edna Baginov\u00e1","description":"Digit\u00e1lna partnerka v prem\u00fd\u0161\u013ean\u00ed","publisher":{"@id":"https:\/\/katarinabaginova.com\/sk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/katarinabaginova.com\/sk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sk-SK"},{"@type":"Organization","@id":"https:\/\/katarinabaginova.com\/sk\/#organization","name":"Katar\u00edna Baginov\u00e1","url":"https:\/\/katarinabaginova.com\/sk\/","logo":{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/katarinabaginova.com\/sk\/#\/schema\/logo\/image\/","url":"https:\/\/katarinabaginova.com\/wp-content\/uploads\/2026\/08\/icf_mcc_badge.png","contentUrl":"https:\/\/katarinabaginova.com\/wp-content\/uploads\/2026\/08\/icf_mcc_badge.png","width":897,"height":897,"caption":"Katar\u00edna Baginov\u00e1"},"image":{"@id":"https:\/\/katarinabaginova.com\/sk\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/pages\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":8,"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":165,"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/pages\/104\/revisions\/165"}],"wp:attachment":[{"href":"https:\/\/katarinabaginova.com\/sk\/wp-json\/wp\/v2\/media?parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}