/* ─────────────────────────────────────────────────────────────────────── SEKCE 8. REŽIM AI — Chetty (.pdu-ai-*) Tlačítko „Režim AI" u vyhledávání, výměna searchbaru, chat panel, landing, historie konverzací a fullscreen. Přesunuto ze style-pages.css 2026-07-09; veškeré AI (Chetty) CSS patří SEM (sections), nikdy do style-pages. STAV: NENASAZENO na LIVE — feature běží jen na TEST 785157. Master vypínač je v JS: sections/script-sections.js ř. 177 → var AI_ENABLED = (location.hostname.indexOf('785157') !== -1); Korekce 2026-07-29: dřívější text tvrdil „dormant, AI_ENABLED = false" — dnes už neplatí, je to hostname gate (LIVE vypnuto, TEST zapnuto). Až bude Chetty backend live: rozšířit gate na LIVE (+ odkomentovat sticky AI v internal-code/foot.js §7). CSS tu může zůstat načtené (neškodí). ─────────────────────────────────────────────────────────────────────── */ .search.pdu-ai-host{position:relative} .search.pdu-ai-host > .pdu-ai-desktop{position:absolute;right:100%;margin-right:10px;top:50%;transform:translateY(-50%);z-index:5} /* ── Placeholder pilulky od prvniho paintu (2026-08-21) ── CSS se nacita render-blocking v , JS az defer → pilulka drive pri kazdem loadu/prechodu kratce chybela a naskakovala (video user 21. 8.). ::before na .search vypada jako pilulka od prvniho paintu; mount() prida .search tridu .pdu-ai-host a tim placeholder zmizi → swap za zive tlacitko je neviditelny (stejne souradnice, absolute → zadny reflow). Gate vypinace pres :has(meta[pdu-ai-off]) — prohlizec bez :has() placeholder nema (= dosavadni chovani, zadna skoda). pointer-events:none — pred JS neni co otevrit. Metriky 1:1 s .pdu-ai-btn (vyska 38px, ikona 18 + gap 7, text 14/18). Desktop-only (≥48em) — mobilni pilulka ma dal fade pri prvnim mountu. */ @media (min-width:48em){ html:not(:has(meta[name="pdu-ai-off"])) .search:not(.pdu-ai-host){position:relative} html:not(:has(meta[name="pdu-ai-off"])) .search:not(.pdu-ai-host)::before{ content:"Režim AI"; position:absolute;right:100%;margin-right:10px;top:50%;transform:translateY(-50%);z-index:5; pointer-events:none; border-radius:999px;border:2px solid #1f9d57; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%231f9d57' d='M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8z'/%3E%3Cpath fill='%237bc043' d='M19 13l.8 2.4L22 16.2l-2.2.8L19 19.4l-.8-2.4L16 16.2l2.2-.8z'/%3E%3C/svg%3E") no-repeat 15px 50%/18px 18px; padding:8px 15px 8px 40px; font-weight:700;font-size:14px;line-height:18px;white-space:nowrap;color:#1f7a3c} } /* Mobilni placeholder — jen nova UMS hlavicka (trida ums_mobile_header_v1--on je v body ze serveru = platna od prvniho paintu). ::before flex kontejneru JE flex item → order:-1 = stejny slot jako .pdu-ai-mobile (ta ma na UMS order:-1, viz nize v sekci). Stara hlavicka bez ums tridy placeholder nema (= dosavadni chovani). */ @media (max-width:47.99em){ html:not(:has(meta[name="pdu-ai-off"])):not(:has(.pdu-ai-mobile)) body.ums_mobile_header_v1--on .responsive-tools::before{ content:"Režim AI"; order:-1;margin:0 6px 0 0;align-self:center;pointer-events:none; border-radius:999px;border:2px solid #1f9d57; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%231f9d57' d='M12 2l1.8 5.2L19 9l-5.2 1.8L12 16l-1.8-5.2L5 9l5.2-1.8z'/%3E%3Cpath fill='%237bc043' d='M19 13l.8 2.4L22 16.2l-2.2.8L19 19.4l-.8-2.4L16 16.2l2.2-.8z'/%3E%3C/svg%3E") no-repeat 9px 50%/15px 15px; padding:5px 9px 5px 28px; font-weight:700;font-size:12px;line-height:15px;white-space:nowrap;color:#1f7a3c} } @media (max-width:23.75em){ /* Shoptet reset = box-sizing:border-box → rozmery zadavat jako CELKOVY box (icon 15 + padding 12 + border 4 = 31), jinak se box srazi na width a ikona je mini. */ html:not(:has(meta[name="pdu-ai-off"])):not(:has(.pdu-ai-mobile)) body.ums_mobile_header_v1--on .responsive-tools::before{ content:"";box-sizing:border-box;width:31px;height:31px;padding:6px;background-position:50% 50%} } @media (min-width:62em){ html:not(:has(meta[name="pdu-ai-off"])) .search:not(.pdu-ai-host)::before{ transform:translateY(-50%) scale(.95);transform-origin:right center} } /* jemný nástup při PRVNÍM mountu (JS vklad ~DCL; absolute = žádný reflow, jen objevení). Třídu .pdu-ai-enter dává jen první mount — re-mounty po přepisu .search jsou bez ní (okamžité). Pozn.: .pdu-ai-btn má vlastní infinite pdu-ai-slide (gradient) → fade nutno KOMBINOVAT (vyšší specificita .pdu-ai-btn.pdu-ai-enter), jinak by slide fade přebil / fade zabil slide. */ @keyframes pdu-ai-fadein{from{opacity:0}to{opacity:1}} .pdu-ai-btn.pdu-ai-enter{animation:pdu-ai-slide 5s linear infinite,pdu-ai-fadein .22s ease-out} @media(prefers-reduced-motion:reduce){.pdu-ai-btn.pdu-ai-enter{animation:pdu-ai-slide 5s linear infinite}} .pdu-ai-mobile{display:none} @keyframes pdu-ai-slide{0%{background-position:0 50%}100%{background-position:200% 50%}} .pdu-ai-btn{position:relative;border:0;padding:2px;border-radius:999px;cursor:pointer;line-height:0; -webkit-appearance:none;appearance:none;font-family:inherit;-webkit-tap-highlight-color:transparent; background:linear-gradient(90deg,#1f9d57,#7bc043,#14b8a6,#7bc043,#1f9d57);background-size:220% 100%; animation:pdu-ai-slide 5s linear infinite} .pdu-ai-btn .pdu-ai-in{position:relative;display:flex;align-items:center;gap:7px;border-radius:999px; background:#fff;padding:8px 15px;overflow:hidden;line-height:1} .pdu-ai-btn:hover .pdu-ai-in{background:#f4faf6} .pdu-ai-btn .pdu-ai-glow{position:absolute;inset:-40%;opacity:0;transition:opacity .2s;pointer-events:none; background:radial-gradient(80px 80px at var(--mx,50%) var(--my,50%),rgba(31,157,87,.35),rgba(123,192,67,.25) 45%,transparent 72%)} .pdu-ai-btn:hover .pdu-ai-glow{opacity:1} .pdu-ai-btn .pdu-ai-txt{position:relative;z-index:1;display:flex;align-items:center;gap:7px; font-weight:700;font-size:14px;white-space:nowrap; background:linear-gradient(90deg,#1f9d57,#4aa82f,#14b8a6,#1f9d57);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; animation:pdu-ai-slide 5s linear infinite} .pdu-ai-btn .pdu-ai-ic{flex:0 0 auto} /* ZAPNUTO stav (.is-on) se nastavuje níž v sekci (blok „Jasně viditelný ZAPNUTO stav") — tady byly stejné vlastnosti se stejnou specificitou, tedy nikdy nevyhrály. Smazáno 2026-07-29. */ /* fallback: prohlížeč bez background-clip:text by měl neviditelný text → plná zelená */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .pdu-ai-btn .pdu-ai-txt{background:none;color:#1f7a3c;-webkit-text-fill-color:#1f7a3c;animation:none} } /* Desktop: pill o 5 % mensi (user 2026-08-10). Pozicni pravidlo vys ma transform:translateY(-50%) (vyssi specificita) -> scale nutno SLOZIT do stejneho transformu, jinak prohraje. */ @media (min-width:62em){.search.pdu-ai-host > .pdu-ai-btn.pdu-ai-desktop{transform:translateY(-50%) scale(.95);transform-origin:right center}} /* ── Výměna searchbaru: v AI režimu skryj nativní form a ukaž AI pole ── Tvar 1:1 s nativním (výška 36, radius 3, hranaté tlačítko 73×36) — jen zelený akcent. Nativní form ZŮSTÁVÁ v DOM (jen display:none) → fallback = okamžité přepnutí zpět. Scope jen desktop; na mobilu se místo výměny otevírá chat panel. */ .pdu-ai-field{display:none} @media (min-width:48em){ .pdu-ai-field{position:relative;width:100%;border-radius:3px;box-shadow:0 3px 9px rgba(0,0,0,.35)} body.pdu-ai-active .search > .search-form, body.pdu-ai-active .search > .js-search-main{display:none !important} body.pdu-ai-active .search .pdu-ai-field{display:block} .pdu-ai-field .pdu-ai-input{width:100%;height:36px;box-sizing:border-box; border:1px solid #1f9d57;border-radius:3px;padding:8px 84px 8px 12px; font-size:13px;font-family:inherit;color:#4d4d4d;background:#fff;outline:none} .pdu-ai-field .pdu-ai-input::placeholder{color:#6b776f} .pdu-ai-field .pdu-ai-input:focus{border-color:#14b8a6;box-shadow:0 0 0 2px rgba(31,157,87,.18)} .pdu-ai-field .pdu-ai-send{position:absolute;top:0;right:0;width:73px;height:36px;border:0;border-radius:0 3px 3px 0; cursor:pointer;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#f9f06a,#f2e11f);box-shadow:0 2px 5px rgba(0,0,0,.32)} .pdu-ai-field .pdu-ai-send svg path{fill:#25382e} .pdu-ai-field .pdu-ai-send:hover{filter:brightness(1.05)} } /* Spotlight: ztmav okolí, search řádek + panel nad tmou (header je static → čistý z-index) */ .pdu-ai-backdrop{display:none;position:fixed;inset:0;background:rgba(8,18,13,.5);z-index:8000; animation:pdu-ai-fade .18s ease-out} @keyframes pdu-ai-fade{from{opacity:0}to{opacity:1}} body.pdu-ai-active .pdu-ai-backdrop{display:block} body.pdu-ai-active .search{z-index:8500} body.pdu-ai-active .pdu-ai-mobile{position:relative;z-index:8500} /* Jasně viditelný ZAPNUTO stav: plný zelený pill, bílý text i ikona (vs. bílý pill = vypnuto) */ .pdu-ai-btn.is-on{box-shadow:0 0 0 3px rgba(31,157,87,.28)} .pdu-ai-btn.is-on .pdu-ai-in{background:linear-gradient(90deg,#1f9d57,#14b8a6)} .pdu-ai-btn.is-on .pdu-ai-txt{background:none;color:#fff;-webkit-text-fill-color:#fff;animation:none} .pdu-ai-btn.is-on .pdu-ai-ic path{fill:#fff} .pdu-ai-panel{display:none;position:absolute;z-index:9999;background:#fff;border:1px solid #cfe3d7; border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;max-width:calc(100vw - 24px)} body.pdu-ai-active .pdu-ai-panel{display:block} .pdu-ai-panel-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #eef3f0} .pdu-ai-panel-head b{color:#1f7a3c;font-size:14px} /* Zavreni panelu — VETSI a vyrazne (user 2026-08-10): kruhove tlacitko s pozadim, 36px dotykova plocha (mobil), tmavsi krizek nez ostatni ikony v hlavicce */ .pdu-ai-close{flex:0 0 auto;position:relative;border:0;width:40px;height:40px;font-size:24px;line-height:1;cursor:pointer;color:#1f5e3c;background:#eef4f0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;box-shadow:0 2px 6px rgba(0,0,0,.18)} .pdu-ai-close:hover{background:#dcebe1;color:#14432a} /* neviditelne rozsireni tap-targetu na 48px — stejne jako ✕ v mobilnim menu (sjednoceno) */ .pdu-ai-close::before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px} .pdu-ai-panel-body{padding:16px 14px;color:#3b4a41;font-size:14px;max-height:60vh;overflow:auto} .pdu-ai-panel-body .pdu-ai-sub{color:#6b776f;font-size:12.5px;margin-top:6px} /* Vlákno konverzace (bubliny) */ .pdu-ai-thread{display:flex;flex-direction:column;gap:8px} .pdu-ai-thread:empty{display:none} .pdu-ai-msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;word-wrap:break-word} .pdu-ai-msg-user{align-self:flex-end;background:#1f9d57;color:#fff;border-bottom-right-radius:4px} .pdu-ai-msg-ai{align-self:flex-start;background:#eef4f0;color:#25382e;border-bottom-left-radius:4px} .pdu-ai-msg-ai .pdu-ai-open-chetty{display:block;margin-top:8px;padding:7px 12px;border:0;border-radius:6px;background:#1f9d57;color:#fff;font-size:13px;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none} .pdu-ai-msg-ai .pdu-ai-open-chetty:hover{background:#187a45} .pdu-ai-msg-ai .pdu-ai-cartrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;animation:pduAiCartIn .25s ease-out} @keyframes pduAiCartIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .pdu-ai-msg-ai .pdu-ai-cart{display:inline-block;padding:10px 16px;border:0;border-radius:10px;background:linear-gradient(180deg,#22b06a,#1f9d57);color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(31,157,87,.28);-webkit-appearance:none;appearance:none} .pdu-ai-msg-ai .pdu-ai-cart:hover{background:#187a45} .pdu-ai-msg-ai .pdu-ai-cart:disabled{background:#9fb3a7;color:#eef4f0;cursor:default;box-shadow:none} .pdu-ai-msg-ai .pdu-ai-gotocart{display:inline-block;padding:9px 14px;border:1px solid #bcd9c6;border-radius:10px;background:#fff;color:#1f7a4d;font-size:13px;font-weight:600;text-decoration:none} .pdu-ai-msg-ai .pdu-ai-gotocart:hover{background:#eef7f1;text-decoration:none} .pdu-ai-msg-ai .pdu-ai-carterr{font-size:12px;color:#9a3b3b} /* Zpetna vazba pod AI odpovedi (palec nahoru/dolu) */ .pdu-ai-fb{display:flex;gap:10px;margin-top:6px;font-size:12px;color:#5c6f64;align-items:center} .pdu-ai-fb button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid #d5e3da;border-radius:8px;background:transparent;color:#5c6f64;cursor:pointer;-webkit-appearance:none;appearance:none} .pdu-ai-fb button:hover{background:#eef7f1;border-color:#1f9d57;color:#1f7a3c} .pdu-ai-fb svg{width:16px;height:16px;display:block} .pdu-ai-status{font-size:12px;font-style:italic;color:#5c6f64;margin-bottom:4px} .pdu-ai-msg-ai a{color:#1f7a3c;text-decoration:underline} /* Inline obrazky v odpovedi (18. 8.): obrazky v textu zustavaji povolene, ale misto celoplosnych fotek pres celou bublinu se kresli jako upravene nahledy - jednotna velikost, orez, radius, jemny stin. Vic obrazku vedle sebe se sklada do radky. */ .pdu-ai-img{display:inline-block;vertical-align:top;width:auto;max-width:min(46%,230px);max-height:150px;object-fit:cover;border-radius:10px;margin:4px 8px 4px 0;box-shadow:0 1px 4px rgba(0,0,0,.10)} .pdu-ai-callout{border-left:3px solid #1f9d57;background:#eef7f1;border-radius:0 8px 8px 0;padding:8px 12px;margin:8px 0;font-size:.95em} .pdu-ai-callout.is-warn{border-left-color:#f2b01e;background:#fdf6e3} .pdu-ai-card{border:1px solid #d9e5dc;border-radius:12px;padding:12px 14px;margin:10px 0;background:#fff;box-shadow:0 2px 10px rgba(20,60,40,.06)} .pdu-ai-card .pdu-ai-img{max-height:180px;margin:0 auto 6px} /* Karta z atributoveho tvaru [product-card title=... image=... url=... price=... badge=...] */ .pdu-ai-card.is-attr{display:flex;gap:12px;align-items:flex-start} .pdu-ai-cardimg{width:88px;height:88px;object-fit:contain;flex:0 0 auto;border-radius:8px;background:#f6f9f7} .pdu-ai-cardbody{display:flex;flex-direction:column;gap:2px;min-width:0} .pdu-ai-cardtitle{font-weight:600;color:#1f5e3c;text-decoration:none;line-height:1.35} a.pdu-ai-cardtitle:hover{text-decoration:underline} .pdu-ai-cardprice{font-weight:700;color:#25382e} .pdu-ai-cardbadge{align-self:flex-start;font-size:12px;line-height:1;padding:4px 8px;border-radius:999px;background:#e8f5ec;color:#1f7a4d} .pdu-ai-msg-ai a.pdu-ai-open-chetty{color:#fff;text-decoration:none;margin-top:8px;display:inline-block;padding:7px 12px;border-radius:6px;background:#1f9d57;font-size:13px;font-weight:600} /* STOP stav: tlačítko aktivní (zastaví generování), jemně červený podklad */ .pdu-ai-send.pdu-ai-stop,.pdu-ai-asksend.pdu-ai-stop{background:#fbe3df} /* Composer (vstupní řádek v panelu) — použije se hlavně na mobilu; na desktopu se píše do baru */ .pdu-ai-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 14px;border-top:1px solid #eef3f0;background:#fafdfb} .pdu-ai-composer .pdu-ai-ask{flex:1 1 auto;min-width:0;height:40px;min-height:40px;max-height:132px;box-sizing:border-box; border:1px solid #1f9d57;border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit;line-height:1.35; color:#25382e;background:#fff;outline:none;resize:none;overflow-y:auto} .pdu-ai-composer .pdu-ai-ask:focus{border-color:#14b8a6;box-shadow:0 0 0 2px rgba(31,157,87,.15)} .pdu-ai-composer .pdu-ai-asksend{flex:0 0 auto;width:44px;height:40px;border:0;border-radius:8px;cursor:pointer; display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f9f06a,#f2e11f); box-shadow:0 2px 5px rgba(0,0,0,.3)} .pdu-ai-composer .pdu-ai-asksend svg path{fill:#25382e} @media (min-width:48em){ .pdu-ai-panel .pdu-ai-composer{display:flex} } /* 29.7.: pole na psani i dole v dropdownu (user) */ @media (prefers-reduced-motion: reduce){ .pdu-ai-btn,.pdu-ai-btn .pdu-ai-txt{animation:none} .pdu-ai-backdrop{animation:none} } /* mobil: kompaktní pill vedle lupy (co nejmenší, ať se vejde na úzké telefony) */ @media (max-width:47.99em){ .pdu-ai-desktop{display:none} .pdu-ai-mobile{display:inline-block;vertical-align:middle;margin:0 0 0 6px} .pdu-ai-mobile .pdu-ai-in{padding:5px 9px;gap:4px} .pdu-ai-mobile .pdu-ai-txt{font-size:12px;gap:4px} .pdu-ai-mobile .pdu-ai-ic{width:15px;height:15px} } /* velmi úzké telefony (<380px): jen ikona, ať pill nikdy nepřeteče hlavičku */ @media (max-width:23.75em){ .pdu-ai-mobile .pdu-ai-txt > span{display:none} .pdu-ai-mobile .pdu-ai-in{padding:6px} } /* Shoptet nová mobilní hlavička (UMS mobile_header_v1, 2026-08): .responsive-tools je flex-end a lupa má nativní margin-right:95px = rezerva pro absolute košík (right:50) + hamburger (right:10). Pill vložený ZA lupu by se vyskládal do té rezervy a překryl se s košíkem i hamburgerem → order:-1 ho posadí PŘED lupu, rezerva zůstane volná. Na staré hlavičce se ums třída nevyskytuje → no-op. */ @media (max-width:47.99em){ body.ums_mobile_header_v1--on .pdu-ai-mobile{order:-1;margin:0 6px 0 0} } /* ≤380px: pill (jen ikona) by o ~7px nalézal na logo — nativní 95px rezerva má 13px vůli (košík reálně začíná až right:50 + 52px badge), takže 84px stačí a pill se posune doprava mimo logo; košík zůstává 2px za lupou. */ @media (max-width:23.75em){ body.ums_mobile_header_v1--on .responsive-tools > a[data-target="search"]{margin-right:84px} } /* mobil: fullscreen chat — vstupní pole DOLE (standard chatů), tlačítko odsazené */ @media (max-width:47.99em){ .pdu-ai-panel{border-radius:0;border-left:0;border-right:0;border-top:0;max-width:none; box-shadow:0 12px 26px rgba(0,0,0,.2);animation:pdu-ai-drop .2s ease-out} .pdu-ai-panel-head{padding:9px 14px} .pdu-ai-panel .pdu-ai-composer{display:flex;gap:12px} .pdu-ai-panel .pdu-ai-composer .pdu-ai-asksend{width:52px;border-radius:8px} .pdu-ai-panel-body{padding:12px 14px 16px} } /* tablet pásmo 768–991: desktopové chování, ale pill jen ikona NAPRAVO od searche (vlevo koliduje s logem — nález 24.7. @909px) */ @media (min-width:48em) and (max-width:61.99em){ /* kolecko s ikonou (user 2026-08-10) — kruh 36px uvnitr gradientniho ramecku; skryvat jen textovy span (ikona sedi UVNITR .pdu-ai-txt, display:none by ji vzal s sebou) */ .pdu-ai-desktop .pdu-ai-txt > span{display:none} .pdu-ai-desktop .pdu-ai-in{width:36px;height:36px;box-sizing:border-box;padding:0;justify-content:center} .search.pdu-ai-host > .pdu-ai-desktop{right:auto;left:100%;margin-right:0;margin-left:10px} } @keyframes pdu-ai-drop{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}} /* ── Režim AI: intro chips + fullscreen (desktop toggle, mobil vždy full) ── */ .pdu-ai-panel-head{gap:6px} .pdu-ai-panel-head b{margin-right:auto} .pdu-ai-fullbtn{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#5c6f64;padding:5px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:6px;-webkit-appearance:none;appearance:none} .pdu-ai-fullbtn:hover{background:#eef4f0;color:#1f7a3c} .pdu-ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .pdu-ai-chip{border:1px solid #bcd9c8;background:#fff;color:#1f7a3c;font-size:13px;padding:7px 12px;border-radius:999px;cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent} .pdu-ai-chip:hover{background:#eef4f0;border-color:#1f9d57} .pdu-ai-fchips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px} /* iOS v3: position:fixed = jediny spolehlivy zamek scrollu na iOS (overflow:hidden iOS pri focusu ignoruje a odscrolluje dokument -> stranka prosvitala pod panelem). Skok pozice se deje schovany za fullscreen panelem; navrat resi fullUnlock() v JS. */ body.pdu-ai-full{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;width:100%} /* klavesnice v10 (20. 8.): stranka se pod otevrenym chatem schova (odkryte pruhy pri panech jsou ciste bile; visibility drzi layout) a composer ma plynuly dojezd — WebKit posila jediny resize az po konci animace klavesnice. Padding okna zprav se NEanimuje (behem animace kazil mereni pozice composeru). */ @media(max-width:47.99em){ body.pdu-ai-full{background:#fff} body.pdu-ai-full .overall-wrapper{visibility:hidden} body.pdu-ai-full .pdu-ai-composer{transition:transform .2s ease-out} } body.pdu-ai-full .pdu-ai-panel{box-sizing:border-box} /* padding-bottom (klavesnice) nesmi zvetsit panel pres viewport */ body.pdu-ai-full [id^="heureka"],body.pdu-ai-full [id^="Heureka"]{display:none !important} /* Heureka badge má z-index na maximu — ve fullscreenu schovat */ body.pdu-ai-active.pdu-ai-full .pdu-ai-panel{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;width:auto;height:100%;max-width:none;border:0;border-radius:0;animation:none;z-index:2147483600} @supports (height:100dvh){body.pdu-ai-active.pdu-ai-full .pdu-ai-panel{height:100dvh}} body.pdu-ai-full .pdu-ai-panel .pdu-ai-composer{display:flex} body.pdu-ai-full .pdu-ai-panel-body{flex:1 1 auto;max-height:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} body.pdu-ai-full .pdu-ai-panel .pdu-ai-composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))} /* 29.7. Gemini look (user): ve fullscreen vlakne composer NEprilepeny dole — plovouci centrovany pill */ body.pdu-ai-full .pdu-ai-panel:not(.is-landing) .pdu-ai-composer{border-top:0;background:none;align-self:center;width:100%;max-width:720px;box-sizing:border-box;padding:6px 16px;margin-bottom:calc(18px + env(safe-area-inset-bottom, 0px))} body.pdu-ai-full .pdu-ai-panel:not(.is-landing) .pdu-ai-composer .pdu-ai-ask{border-radius:22px;background:#fff;box-shadow:0 6px 22px rgba(31,157,87,.16)} body.pdu-ai-full .pdu-ai-panel:not(.is-landing) .pdu-ai-composer .pdu-ai-asksend{border-radius:999px} @media (max-width:47.99em){ .pdu-ai-fullbtn{display:none} } @media (max-width:61.99em){ .pdu-ai-composer .pdu-ai-ask{font-size:16px} .pdu-ai-field .pdu-ai-input{font-size:16px} } /* ── Fáze 5: AI Landing (centrovaný vstup) + historie konverzací ── */ .pdu-ai-msg{border-radius:18px} .pdu-ai-chip{padding:9px 14px} .pdu-ai-landing{display:none;padding:22px 18px;text-align:center} .pdu-ai-panel.is-landing .pdu-ai-landing{display:block} .pdu-ai-panel.is-landing .pdu-ai-panel-body{display:none} .pdu-ai-land-ic svg{width:36px;height:36px} .pdu-ai-land-h{font-size:19px;font-weight:800;color:#25382e;margin:10px 0 6px} .pdu-ai-land-sub{font-size:13.5px;line-height:1.5;color:#5c6f64;max-width:430px;margin:0 auto} .pdu-ai-landing .pdu-ai-chips{justify-content:center;margin-top:16px} /* fullscreen landing: dvojice landing+composer vertikálně vycentrovaná auto marginy */ body.pdu-ai-full .pdu-ai-panel.is-landing .pdu-ai-landing{margin-top:auto;background:radial-gradient(ellipse at 50% 20%,rgba(31,157,87,.07),transparent 65%)} body.pdu-ai-full .pdu-ai-panel.is-landing .pdu-ai-composer{margin-bottom:auto;border-top:0;background:none;align-self:center;width:100%;max-width:620px;box-sizing:border-box} /* v10.10b (21. 8., video f-10/f-18): lista AutoFill (klic/karta/spendlik, ~50 px) lezi NAD klavesnici a prekryva, co je tesne pod caretem — iOS panuje jen ke caretu, o liste nic nehlasi (zadne API). Na landingu s klavesnici pole staticky zvedneme, aby se pod caret lista vesla; JS pri klavesnici prida tridu pdu-ai-kb-on. Bez listy vznikne 56px vzduch — prijatelne. Staticky transform nezaklada smycku (nic necte z viewportu) a vlaknovy rezim se nemeni. */ body.pdu-ai-full .pdu-ai-panel.is-landing.pdu-ai-kb-on .pdu-ai-composer{transform:translateY(-56px)} body.pdu-ai-full .pdu-ai-panel.is-landing .pdu-ai-composer .pdu-ai-ask{height:50px;min-height:50px;border-radius:26px;padding:14px 20px;box-shadow:0 6px 22px rgba(31,157,87,.18);overflow:hidden} body.pdu-ai-full .pdu-ai-panel.is-landing .pdu-ai-composer .pdu-ai-asksend{height:50px;width:56px;border-radius:999px} body.pdu-ai-full .pdu-ai-panel-body{padding:24px 16px} /* 29.7. Gemini layout (user): fullscreen = centrovany sloupec, vetsi pismo — ne roztazene pres celou sirku */ body.pdu-ai-full .pdu-ai-thread{max-width:820px;margin:0 auto;width:100%;box-sizing:border-box} /* v10.10a (21. 8., video f-19): kratke vlakno kotvit KE DNU okna zprav. V nativnim klavesnicovem rezimu (iOS caret-follow pan) je videt SPODNI pas okna — obsah usazeny nahore nechal pas bily, nez odpoved dorostla. Klasicky chat vzor: flex sloupec + margin-top:auto; u dlouheho obsahu se auto zhrouti na 0 a scroll funguje beze zmeny. Horizontalni centrovani drzi auto na bocich. */ body.pdu-ai-full .pdu-ai-panel-body{display:flex;flex-direction:column} body.pdu-ai-full .pdu-ai-thread{margin:auto auto 0} body.pdu-ai-full .pdu-ai-msg{font-size:15px;line-height:1.55;max-width:min(62ch,85%)} /* Tooltips ikon hlavicky (18. 8., namet uzivatele): jen desktop (hover), maly tmavy stitek pod tlacitkem; data-tip nastavuje JS. Na dotyku se nezobrazuje. */ @media (hover:hover){ .pdu-ai-panel-head [data-tip]{position:relative} .pdu-ai-panel-head [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;background:#243b2f;color:#fff;font-size:12px;font-weight:400;line-height:1.3;padding:5px 9px;border-radius:6px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s ease,transform .12s ease;pointer-events:none;z-index:10001} .pdu-ai-panel-head [data-tip]:hover::after,.pdu-ai-panel-head [data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:none} } @media (prefers-reduced-motion: reduce){.pdu-ai-panel-head [data-tip]::after{transition:none}} /* a11y (vlna 2, 18. 8.): vizualne skryty live region pro ohlaseni finalni odpovedi ctecce */ .pdu-ai-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} body.pdu-ai-full .pdu-ai-sub{max-width:820px;margin-left:auto;margin-right:auto} body.pdu-ai-full .pdu-ai-fchips{max-width:820px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box} .pdu-ai-fb button.is-sel{border-color:#1f9d57;background:#eef7f1;color:#1f9d57} .pdu-ai-fb button:disabled{opacity:.55;cursor:default} .pdu-ai-copyhelper{position:fixed;left:-9999px;top:0;opacity:0} /* hlavička: tlačítko historie */ .pdu-ai-head-logo{display:none} body.pdu-ai-full .pdu-ai-head-logo{display:block;height:30px;width:auto;flex:0 0 auto} body.pdu-ai-full .pdu-ai-head-rezim{display:none} .pdu-ai-newbtn{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#5c6f64;padding:2px 8px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;line-height:1;border-radius:6px;-webkit-appearance:none;appearance:none} .pdu-ai-newbtn:hover{background:#eef4f0;color:#1f7a3c} .pdu-ai-histbtn{flex:0 0 auto;border:0;background:none;cursor:pointer;color:#5c6f64;padding:5px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;line-height:0;border-radius:6px;-webkit-appearance:none;appearance:none} .pdu-ai-histbtn:hover{background:#eef4f0;color:#1f7a3c} /* vysouvací panel historie (overlay uvnitř panelu, mobil i desktop) */ .pdu-ai-hist{position:absolute;top:0;right:0;bottom:0;width:290px;max-width:85%;background:#fff;border-left:1px solid #eef3f0;box-shadow:-10px 0 26px rgba(0,0,0,.14);z-index:6;display:flex;flex-direction:column} .pdu-ai-hist[hidden]{display:none} .pdu-ai-hist-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid #eef3f0} .pdu-ai-hist-head b{color:#1f7a3c;font-size:14px} .pdu-ai-hist-close{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:#7a857e} .pdu-ai-hist-new{margin:10px 12px 6px;padding:9px 12px;border:1px dashed #1f9d57;border-radius:8px;background:#f3faf6;color:#1f7a3c;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px;-webkit-appearance:none;appearance:none} .pdu-ai-hist-new:hover{background:#e3f2e9} .pdu-ai-hist-list{flex:1 1 auto;overflow:auto;padding:4px 6px} .pdu-ai-hist-item{display:flex;align-items:center;gap:8px;padding:9px 8px;border-radius:8px;cursor:pointer} .pdu-ai-hist-item:hover{background:#eef4f0} .pdu-ai-hist-item.is-act{background:#e3f2e9} .pdu-ai-hist-t{flex:1 1 auto;min-width:0;font-size:13px;color:#25382e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left} .pdu-ai-hist-d{flex:0 0 auto;font-size:11px;color:#6b776f} .pdu-ai-hist-del{flex:0 0 auto;border:0;background:none;color:#b3beb7;font-size:16px;line-height:1;cursor:pointer;padding:2px 5px;-webkit-appearance:none;appearance:none} .pdu-ai-hist-del:hover{color:#c0392b} .pdu-ai-hist-clear{margin:8px 12px 12px;padding:8px;border:0;background:none;color:#6b776f;font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit;-webkit-appearance:none;appearance:none} .pdu-ai-hist-clear:hover{color:#c0392b} .pdu-ai-hist-empty{padding:14px;color:#6b776f;font-size:13px} .pdu-ai-stale{font-size:12px;font-style:italic;color:#6b776f;text-align:center;padding:2px 0 6px} .pdu-ai-newmsg{position:absolute;left:50%;transform:translateX(-50%);bottom:78px;z-index:4;border:1px solid #1f9d57;background:#fff;color:#1f7a3c;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.16);font-family:inherit;-webkit-appearance:none;appearance:none} .pdu-ai-newmsg:hover{background:#eef4f0} /* Audit 18. 8. (WIDGET-AUDIT): na mobilu vetsi pismo zprav a 44px dotykove cile (Apple HIG); pismo jen na telefonu, at desktopovy dropdown nenaroste. */ @media (max-width:47.99em){ .pdu-ai-panel-body{font-size:15px} .pdu-ai-msg{font-size:15px} .pdu-ai-chip{min-height:44px;display:inline-flex;align-items:center} .pdu-ai-newbtn,.pdu-ai-histbtn,.pdu-ai-close{min-width:44px;min-height:44px} .pdu-ai-fb button{width:40px;height:40px} } /* Zvetseni mobilniho UI (user 19. 8.: "je to malinke, ta historie atd"). Historie dosud nemela mobilni override vubec - jela v desktopovych velikostech (polozky 13px, datum 11px, krizek 16px s plochou 20x26). Sjednoceno s pismem zprav (15px) a dotykovymi cili 44px z auditu 18. 8. */ @media (max-width:47.99em){ /* panel historie: sirsi zasuvka a vetsi pismo */ .pdu-ai-hist{width:min(340px,88%);max-width:88%} .pdu-ai-hist-head{padding:13px 16px} .pdu-ai-hist-head b{font-size:16px} .pdu-ai-hist-close{font-size:26px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin-right:-8px} .pdu-ai-hist-new{margin:12px 12px 8px;padding:12px 14px;font-size:15px;border-radius:10px} .pdu-ai-hist-list{padding:6px 8px} .pdu-ai-hist-item{gap:10px;padding:12px 10px;border-radius:10px} .pdu-ai-hist-t{font-size:15px;line-height:1.35} .pdu-ai-hist-d{font-size:12.5px} .pdu-ai-hist-del{font-size:22px;padding:6px 8px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center} .pdu-ai-hist-clear{margin:10px 12px 14px;padding:10px;font-size:14px} .pdu-ai-hist-empty{padding:16px;font-size:15px} /* zpravy a landing o pul stupne vys */ body.pdu-ai-full .pdu-ai-msg{font-size:16px;line-height:1.6} .pdu-ai-land-h{font-size:22px;margin:12px 0 8px} .pdu-ai-land-sub{font-size:15px} .pdu-ai-chip{font-size:15px;padding:10px 16px} /* hlavicka: vetsi logo a titulek */ body.pdu-ai-full .pdu-ai-head-logo{height:34px} .pdu-ai-panel-head b{font-size:16px} }