/* Echoes of Neverland — Ozzy-Widget V15.1 Nur äußere UI; ChatbotBuilder-Inhalte werden in deren Custom CSS gestaltet. Alle Regeln nur für #ozzy-widget bzw. den zugehörigen ChatbotBuilder-Root. */ #ozzy-widget { --ozzy-ease:cubic-bezier(.22,1,.32,1); } #ozzy-widget, #ozzy-widget * {box-sizing:border-box} #ozzy-widget { --figure-width:215px;--anchor-drop:39px; position:fixed;right:30px;bottom:24px;width:156px;height:48px; z-index:2147483000;overflow:visible;isolation:isolate; transition:width .85s var(--ozzy-ease),height .85s var(--ozzy-ease), transform .26s cubic-bezier(.2,.7,.25,1),opacity .20s ease; } #ozzy-widget.open { --figure-width:500px;--anchor-drop:72px; width:min(420px,calc(100vw - 60px));height:min(494px,65vh); } #ozzy-widget .ozzy-figure { position:absolute;width:var(--figure-width);height:auto;aspect-ratio:1077/720; left:50%;bottom:calc(100% - var(--anchor-drop)); transform:translateX(-50%);pointer-events:none;z-index:4; transition:width .95s var(--ozzy-ease),bottom .95s var(--ozzy-ease); } #ozzy-widget .ozzy-figure canvas, #ozzy-widget .ozzy-figure .ozzy-poster { position:absolute;inset:0;width:100%;height:100%;display:block; max-width:none;pointer-events:none; /* Kein zweiter CSS-Schlagschatten: der gemalte Originalschatten bleibt. */ -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.94) 86%,rgba(0,0,0,.65) 92%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.94) 86%,rgba(0,0,0,.65) 92%,transparent 100%); } #ozzy-widget .ozzy-figure canvas {z-index:2;} #ozzy-widget .ozzy-figure .ozzy-poster {z-index:1;} #ozzy-widget .ozzy-figure.sequence-ready .ozzy-poster {visibility:hidden;} #ozzy-widget .launcher, #ozzy-widget .chat-panel { position:absolute;inset:0;border:1px solid rgba(200,165,104,.65); background:linear-gradient(150deg,#252328,#15171b 80%); box-shadow:0 10px 40px #0009,inset 0 1px 0 rgba(240,203,152,.06); } #ozzy-widget .launcher { border-radius:999px;width:100%;height:100%;display:flex;align-items:center; justify-content:center;gap:9px;padding:12px 15px 10px; color:#efdcc1;font:400 20px/1.1 "Cormorant Garamond",Georgia,serif; letter-spacing:.02em;cursor:pointer;z-index:3;white-space:nowrap; transition:opacity .16s,visibility .16s,background .2s; } #ozzy-widget .launcher:hover { background:#302b28;box-shadow:0 7px 35px #000a,0 0 0 3px #b99b6721; } #ozzy-widget .launcher svg {width:14px;height:14px;stroke:#cfab75;flex:none} #ozzy-widget.open .launcher {opacity:0;visibility:hidden;pointer-events:none} #ozzy-widget .chat-panel { display:flex;flex-direction:column;overflow:hidden;visibility:hidden;opacity:0; border-radius:22px;background:#1b2027; box-shadow:0 35px 110px #000c,0 0 0 1px #0005,inset 0 1px 0 #dbc29c19; transform:translateY(19px) scale(.96);transform-origin:bottom right; transition:opacity .34s ease .06s,transform .75s var(--ozzy-ease),visibility 0s linear .75s; } #ozzy-widget.open .chat-panel { opacity:1;visibility:visible;transform:translateY(0) scale(1); transition:opacity .34s ease .08s,transform .75s var(--ozzy-ease),visibility 0s; } /* Native CBB mount: voller Bereich ohne eigenes Padding oder doppelte Header. */ #ozzy-widget #cbb-live-slot { position:absolute;inset:0;width:100%;height:100%;flex:none; margin:0;padding:0;border-radius:inherit;background:transparent; overflow:hidden;isolation:isolate;z-index:1; } #ozzy-widget #cbb-live-slot .cbb__chat_container { position:absolute!important;inset:0!important; width:100%!important;height:100%!important; max-width:none!important;max-height:none!important; min-width:0!important;min-height:0!important; margin:0!important;padding:0!important; border:0!important;border-radius:0!important; } /* Header entfernt ChatbotBuilder per Custom CSS; KEIN 94px-Crop mehr. So bleiben oberste Chatzeile und Welcome-Screen sichtbar. */ #ozzy-widget #cbb-live-slot .cbb__chat_container iframe.main-iframe { position:absolute!important;top:0!important;left:0!important; width:100%!important;height:100%!important; max-width:none!important;max-height:none!important; border:0!important; } #ozzy-widget .embed-loading { display:flex;align-items:center;justify-content:center;height:100%;padding:18px; text-align:center;font:13px/1.45 "DM Sans",Arial,sans-serif;color:#b8aa95; } #ozzy-widget #embed-status[hidden] {display:none!important} /* Anbieters eigener Launcher wird ausgeblendet, nicht die Anbieterkennung. */ #ozzy-widget .bot_cbb__btn, .cbb-livebot-root > .bot_cbb__btn, .cbb-livebot-root > .initializer_btn { display:none!important; } /* Einziger runder Close-Button AUSSERHALB rechts oben am Rahmen. all:unset verhindert, dass WP-Theme-Buttonstile ihn zu einem Ei verziehen. */ #ozzy-widget #ozzy-close { all:unset;box-sizing:border-box!important; position:absolute;top:-16px;right:-10px; width:34px!important;height:34px!important; min-width:34px!important;min-height:34px!important; max-width:34px!important;max-height:34px!important; padding:0!important;margin:0!important;aspect-ratio:1/1!important; display:grid!important;place-items:center!important; border-radius:50%!important;background:#191d23!important; border:1px solid rgba(190,154,100,.8)!important; color:#d9c3a2!important;box-shadow:0 5px 22px rgba(0,0,0,.5)!important; font:400 20px/1 "DM Sans",Arial,sans-serif!important; text-align:center!important;cursor:pointer!important;z-index:10; visibility:hidden;opacity:0;pointer-events:none;transform:scale(.95); transition:opacity .2s ease,transform .3s var(--ozzy-ease),visibility 0s linear .3s; } #ozzy-widget.open #ozzy-close { visibility:visible;opacity:1;pointer-events:auto;transform:scale(1); transition:opacity .2s ease .15s,transform .3s var(--ozzy-ease),visibility 0s; } #ozzy-widget #ozzy-close:hover, #ozzy-widget #ozzy-close:focus-visible { background:#312a25!important;color:#fff!important; } #ozzy-widget #ozzy-close:focus-visible {outline:2px solid #d3b384!important;outline-offset:2px!important;} @media (max-width:750px){ #ozzy-widget {right:18px;bottom:16px;--figure-width:215px;--anchor-drop:34px} #ozzy-widget.open { width:calc(100vw - 36px);height:min(490px,70svh); --figure-width:min(485px,126vw);--anchor-drop:clamp(54px,calc(17vw - 11px),74px); } #ozzy-widget #ozzy-close {top:-16px;right:-8px} } @media (max-height:660px){ #ozzy-widget.open {height:min(390px,70svh)} } @media (prefers-reduced-motion:reduce){ #ozzy-widget, #ozzy-widget .ozzy-figure, #ozzy-widget .chat-panel, #ozzy-widget .launcher, #ozzy-widget #ozzy-close {transition-duration:.01ms!important} } /* V14.2: Nur die ANGEZEIGTE Groesse vergroessert (Frame-Dateien bleiben 450x301px): Desktop geschlossen 215px / offen 500px; Mobil geschlossen 215px / offen bis 485px. Die Pfoten ruhen wieder am/leicht ueber dem oberen Fensterrand. */ /* V14: Rahmen und Ozzy an derselben Oberkante. Der externe X liegt frei außerhalb. */ #ozzy-widget .chat-panel {margin:0!important;padding:0!important;} #ozzy-widget .ozzy-figure {max-width:none!important;max-height:none!important;} #ozzy-widget #ozzy-close {line-height:1!important; overflow:hidden!important;} /* V14.3: CBB-eigenes mobiles Schliessen-X, falls im Eltern-DOM gerendert. Der ZURUECK-PFEIL .cbb-embed-back-btn wird ausdruecklich nicht beruehrt. */ #ozzy-widget button.cbb-mobile-screen-cross-icon, .cbb-livebot-root button.cbb-mobile-screen-cross-icon { display:none!important;visibility:hidden!important;pointer-events:none!important; } /* V15: Scroll-Komfort ausschließlich mobil und bei geschlossenem Chat. Der ganze Launcher inklusive des überstehenden Ozzy gleitet hinaus. */ @media (max-width:750px){ #ozzy-widget { transition:width .85s var(--ozzy-ease),height .85s var(--ozzy-ease), transform .26s cubic-bezier(.2,.7,.25,1),opacity .20s ease; will-change:transform; } #ozzy-widget:not(.open).ozzy-scroll-hidden { transform:translate3d(0,calc(100% + 190px),0); opacity:0; pointer-events:none; } } @media (prefers-reduced-motion:reduce){ #ozzy-widget {transition-duration:.01ms!important;} } /* Ein zweites X des Anbieters, falls außerhalb seines iframe erzeugt. .small-cross-icon ist laut CBB-Stylesheet das mobil eingeblendete X. */ #ozzy-widget .small-cross-icon, .cbb-livebot-root .small-cross-icon { display:none!important;visibility:hidden!important;pointer-events:none!important; } /* 15.2.0: Am Seitenende abtauchen, alle Breiten (ozzy-widget.js, checkPageEnd). Gleiche Bewegung wie mobil; transform/opacity stehen dafür jetzt auch im Grund-transition oben. */ #ozzy-widget:not(.open).ozzy-am-ende { transform:translate3d(0,calc(100% + 190px),0); opacity:0; pointer-events:none; } /* 15.3.0: Mobil ist der geschlossene Ozzy ein Drittel kleiner (Maxim 20.10.2026): Knopf 104 × 34 statt 156 × 48, Greif 143 statt 215 px. Das geöffnete Fenster bleibt unverändert. */ @media (max-width:750px){ #ozzy-widget:not(.open) { width:104px;height:34px;--figure-width:143px;--anchor-drop:23px; } #ozzy-widget:not(.open) .launcher { font-size:15px;gap:6px;padding:8px 11px 7px; } #ozzy-widget:not(.open) .launcher svg {width:11px;height:11px} }