/** * Kinma AI search pill — shared KI active state + busy morph (pill → circle + spinner). * Used by Stammbaum (.tree-search-wrapper.kinma-ai-search-pill), Galerie and Geschichten * (.gallery-bottom-search-pill.kinma-ai-search-pill), Chat-Verlauf (#chatDesktopConversationSearch.kinma-ai-search-pill). * Mobile: .mobile-bottom-nav-search-pill ist von den globalen --ai-busy-Maßen/__inner-Sofortblend ausgenommen — Morph in mobile-bottom-nav.css. * Chat: .chat-composer-history-search-dock--kinma-ai-busy blendet den Schließen-Kreis aus (utility-islands.js); * Morph + Expansion von der Mitte: chat-enhancements.css (Grid-Spalte + max-width-Transition). Load before page-specific CSS. * * KI-Start-Lupe (.kinma-ai-search-pill__start-btn): bei --ai-active oder --ai-busy ausgeblendet (Framework-Block „KI-Suche läuft“). * Stammbaum zusätzlich .tree-search-wrapper--ai-active per JS. Ohne KI-Modus: Sichtbarkeit nur bei Text (update*SearchAiMatchBtnVisibility). * * Such-Dock: zwei runde Seiten-Buttons in Höhe der Pille — assets/css/gallery.css * (.gallery-bottom-search-dock, --kinma-ai-search-dock-side-size). */ /* --------------------------------------------------------------------------- * Unteres Such-Dock: einheitlicher Abstand (Insel-Position + Scroll-Einzug). * * --kinma-mobile-bottom-nav-band: wie body padding-bottom / .gallery-container bottom * --kinma-bottom-search-dock-above-nav-gap: Luft zwischen Dock und oberer Kante der Bottom-Nav * --kinma-bottom-search-dock-viewport-edge: Desktop (volle Höhe): Dock knapp über dem Bildschirmrand * * anchor-gap = CSS bottom der Insel (vom passenden Bezug: Viewport bei fixed, Container bei absolute). * --------------------------------------------------------------------------- */ :root { /* Etwas niedriger seit Bottom-Nav-Insel ≈54px statt 60px (+ gleiches Row-Padding) */ --kinma-mobile-bottom-nav-band: 82px; /* Tighter stack: dock näher an der Nav / am unteren Rand */ --kinma-bottom-search-dock-above-nav-gap: 6px; --kinma-bottom-search-dock-viewport-edge: 12px; --kinma-bottom-search-dock-anchor-gap: calc( var(--kinma-bottom-search-dock-viewport-edge) + env(safe-area-inset-bottom, 0px) ); --kinma-bottom-search-dock-stack-pad-y: 10px; --kinma-bottom-search-dock-pill-h: var(--kinma-ai-search-dock-side-size, 54px); --kinma-bottom-search-dock-content-breathing: 12px; --kinma-bottom-search-dock-extra-rows: 0px; --kinma-bottom-search-dock-content-inset: calc( var(--kinma-bottom-search-dock-anchor-gap) + var(--kinma-bottom-search-dock-stack-pad-y) + var(--kinma-bottom-search-dock-pill-h) + var(--kinma-bottom-search-dock-content-breathing) + var(--kinma-bottom-search-dock-extra-rows) ); } /* Kompakte Top/Bottom-Nav (mobile-top-nav.css): gleiches Band wie body padding-bottom */ @media (max-width: 400px) { :root { --kinma-mobile-bottom-nav-band: 78px; } } /* Mobile/Tablet: kein zweites Desktop-Such-Dock (Filter + Pille + Add) — Suche nur in der Bottom-Nav */ @media (max-width: 1024px) { .gallery-bottom-search-dock, body.page-stories .gallery-bottom-search-dock.stories-bottom-search-dock { display: none !important; } } @media (max-width: 768px) { /* Geschichten: fixed zur Viewport — ein Band Nav + kleine Lücke (kein doppeltes safe nötig) */ body.page-stories { --kinma-bottom-search-dock-anchor-gap: calc( var(--kinma-mobile-bottom-nav-band) + var(--kinma-bottom-search-dock-above-nav-gap) + env(safe-area-inset-bottom, 0px) ); } } @media (min-width: 769px) { body.page-gallery { --kinma-bottom-search-dock-extra-rows: 52px; } } @keyframes kinma-ai-search-pill-bar-gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* KI-Start-Lupe: padding- + border-layer — explizit zwei Positionen, sonst bleibt der Rand-Verlauf in manchen Engines statisch */ @keyframes kinma-ai-search-pill-start-btn-border-gradient-flow { 0% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } 100% { background-position: 0 0, 0% 50%; } } @keyframes kinma-ai-search-pill-busy-spin { to { transform: rotate(360deg); } } /* Mobile Lupe (KI aktiv, Suche zu): Schatten wechselt Pastell-RGB wie KI-Pille — kein separater Blur-Bloom nötig */ @keyframes kinma-mb-search-ai-btn-rgb-shadow { 0%, 100% { box-shadow: 0 2px 12px rgba(129, 140, 248, 0.32), 0 10px 26px rgba(167, 139, 250, 0.22), 0 0 22px 8px rgba(165, 180, 252, 0.38); } 25% { box-shadow: 0 2px 12px rgba(236, 72, 153, 0.28), 0 10px 26px rgba(249, 168, 212, 0.2), 0 0 22px 8px rgba(251, 182, 206, 0.34); } 50% { box-shadow: 0 2px 12px rgba(34, 211, 238, 0.28), 0 10px 26px rgba(125, 211, 252, 0.2), 0 0 22px 8px rgba(125, 211, 252, 0.32); } 75% { box-shadow: 0 2px 12px rgba(34, 197, 94, 0.26), 0 10px 26px rgba(167, 243, 208, 0.17), 0 0 22px 8px rgba(167, 243, 208, 0.3); } } @keyframes kinma-mb-search-ai-island-rgb-shadow { 0%, 100% { box-shadow: 0 3px 14px rgba(129, 140, 248, 0.32), 0 12px 32px rgba(167, 139, 250, 0.22), 0 0 28px 10px rgba(165, 180, 252, 0.42); } 25% { box-shadow: 0 3px 14px rgba(236, 72, 153, 0.28), 0 12px 32px rgba(249, 168, 212, 0.2), 0 0 28px 10px rgba(251, 182, 206, 0.38); } 50% { box-shadow: 0 3px 14px rgba(34, 211, 238, 0.28), 0 12px 32px rgba(125, 211, 252, 0.2), 0 0 28px 10px rgba(125, 211, 252, 0.36); } 75% { box-shadow: 0 3px 14px rgba(34, 197, 94, 0.26), 0 12px 32px rgba(167, 243, 208, 0.17), 0 0 28px 10px rgba(167, 243, 208, 0.34); } } @keyframes kinma-mb-search-ai-icon-pastel-flow { 0%, 100% { color: #c4cbf5; stroke: #c4cbf5; } 25% { color: #e8c4dc; stroke: #e8c4dc; } 50% { color: #b8dff0; stroke: #b8dff0; } 75% { color: #c0e8d2; stroke: #c0e8d2; } } /* SVG- am Ring: gleiche Pastell-RGB-Zyklen wie .mobile-bottom-nav-search-btn-icon (fill statt stroke) */ @keyframes kinma-mb-search-ai-ring-text-pastel-flow { 0%, 100% { fill: #c4cbf5; } 25% { fill: #e8c4dc; } 50% { fill: #b8dff0; } 75% { fill: #c0e8d2; } } /* Viewport-Kanten: einheitliche Streifenbreite --kinma-ai-edge-depth (statisch, keine Größen-Idle-Animation). */ @property --kinma-ai-pill-glow-1 { syntax: ''; inherits: false; initial-value: 16px; } @property --kinma-ai-pill-glow-2 { syntax: ''; inherits: false; initial-value: 14px; } @property --kinma-ai-pill-glow-3 { syntax: ''; inherits: false; initial-value: 12px; } @keyframes kinma-ai-pill-glow-idle { 0%, 100% { --kinma-ai-pill-glow-1: 14px; --kinma-ai-pill-glow-2: 18px; --kinma-ai-pill-glow-3: 11px; } 33% { --kinma-ai-pill-glow-1: 22px; --kinma-ai-pill-glow-2: 12px; --kinma-ai-pill-glow-3: 16px; } 66% { --kinma-ai-pill-glow-1: 16px; --kinma-ai-pill-glow-2: 22px; --kinma-ai-pill-glow-3: 13px; } } /* Leichter Puls der Kantenschicht (nur Opazität — gleiche Pastell-Palette wie die KI-Pille) */ @keyframes kinma-ai-viewport-edge-pulse { 0%, 100% { opacity: 0.62; } 50% { opacity: 0.92; } } /* Sanfter Farbumlauf wie bei der KI-Pille (Pastell-RGB), ohne die Kanten optisch zu verlängern */ @keyframes kinma-ai-viewport-edge-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } } /** * KI-Modus: Pastell-Schimmer nur in einem schmalen Streifen am Rand (kurz, nicht über die ganze Kante gezogen). * pointer-events: none. * * Galerie/Seiten: body::after z-index 15 — unter linker Nav, Tooltips und höheren Islands. * Stammbaum: eigener Layer in .tree-container (siehe unten), damit der Schimmer über Karten, aber unter Rand-UI liegt. * * Galerie (.gallery-container z-index 1) und Geschichten (Vollflächen-.stories-menu-container) bekommen den * gleichen Effekt per ::before auf dem jeweiligen Container — sonst würde body::after die ganze Seite überdecken. * * Stammbaum: Kantenschimmer in .tree-container::before (nicht body::after — würde hinter der weißen Vollfläche unsichtbar). * z-index über Baumkarten/Clustern (≤50), unter .tree-zoom-bar-edge (100) und unter fixierter UI (Suchleiste, Nav, Minimap). * Bei KI: #treeFamilyNameIslandGroup position:fixed + hoher z-index, damit die „Familie“-Box über dem Kantenschimmer liegt * (Desktop + Mobil, inkl. tree-mobile.css z-index !important). */ /* Galerie: wie Stammbaum per body::after (über .gallery-container z-index 1), damit Kantenschimmer sichtbar bleibt — nicht .gallery-container::before hinter .gallery-body */ body:not(.page-stories):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active)::after, body:not(.page-stories):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active)::after { content: ''; position: fixed; inset: 0; width: 100vw; max-width: 100%; height: 100vh; height: 100dvh; pointer-events: none; z-index: 15; box-sizing: border-box; --kinma-ai-edge-depth: 24px; background: linear-gradient(to bottom, rgba(165, 180, 252, 0.58), rgba(165, 180, 252, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(249, 168, 212, 0.52), rgba(249, 168, 212, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(56, 189, 248, 0.5), rgba(56, 189, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.55), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; filter: hue-rotate(0deg); animation: kinma-ai-viewport-edge-pulse 6s ease-in-out infinite, kinma-ai-viewport-edge-hue 14s linear infinite; } body:not(.page-stories):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) #treeFamilyNameIslandGroup, body:not(.page-stories):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) #treeFamilyNameIslandGroup { position: fixed !important; z-index: 10050 !important; } /* * Stammbaum: body::after lag hinter .tree-container (weiße Vollfläche verdeckt den Schimmer). * Kantenschimmer als .tree-container::before mit positivem z-index (über Karten, unter Zoom-Streifen am Rand). * body::after auf der Baumseite aus (kein doppelter Layer). */ body:not(.page-stories):has(.tree-container):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active)::after, body:not(.page-stories):has(.tree-container):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active)::after { display: none !important; } body:not(.page-stories):has(.tree-container):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .tree-container, body:not(.page-stories):has(.tree-container):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .tree-container { z-index: 2; } body:not(.page-stories):has(.tree-container):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .tree-container::before, body:not(.page-stories):has(.tree-container):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .tree-container::before { content: ''; position: absolute; inset: 0; pointer-events: none; /* Über Person-/Cluster-Layern (≤50), unter .tree-zoom-bar-edge (100) */ z-index: 90; box-sizing: border-box; --kinma-ai-edge-depth: 24px; background: linear-gradient(to bottom, rgba(165, 180, 252, 0.58), rgba(165, 180, 252, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(249, 168, 212, 0.52), rgba(249, 168, 212, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(56, 189, 248, 0.5), rgba(56, 189, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.55), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; filter: hue-rotate(0deg); animation: kinma-ai-viewport-edge-pulse 6s ease-in-out infinite, kinma-ai-viewport-edge-hue 14s linear infinite; } body.dark-mode:not(.page-stories):has(.tree-container):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .tree-container::before, body.dark-mode:not(.page-stories):has(.tree-container):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .tree-container::before { background: linear-gradient(to bottom, rgba(129, 140, 248, 0.44), rgba(129, 140, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(244, 114, 182, 0.4), rgba(244, 114, 182, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(34, 211, 238, 0.38), rgba(34, 211, 238, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; } body.dark-mode:not(.page-stories):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active)::after, body.dark-mode:not(.page-stories):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active)::after { background: linear-gradient(to bottom, rgba(129, 140, 248, 0.44), rgba(129, 140, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(244, 114, 182, 0.4), rgba(244, 114, 182, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(34, 211, 238, 0.38), rgba(34, 211, 238, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; } /* Geschichten: Vollflächen-Scroll-Container — gleicher Effekt wie Galerie */ body.page-stories:has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .stories-menu-container::before, body.page-stories:has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .stories-menu-container::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; box-sizing: border-box; --kinma-ai-edge-depth: 24px; background: linear-gradient(to bottom, rgba(165, 180, 252, 0.58), rgba(165, 180, 252, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(249, 168, 212, 0.52), rgba(249, 168, 212, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(56, 189, 248, 0.5), rgba(56, 189, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.55), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; filter: hue-rotate(0deg); animation: kinma-ai-viewport-edge-pulse 6s ease-in-out infinite, kinma-ai-viewport-edge-hue 14s linear infinite; } body.dark-mode.page-stories:has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .stories-menu-container::before, body.dark-mode.page-stories:has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .stories-menu-container::before { background: linear-gradient(to bottom, rgba(129, 140, 248, 0.44), rgba(129, 140, 248, 0) var(--kinma-ai-edge-depth)) 0 0 / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to top, rgba(244, 114, 182, 0.4), rgba(244, 114, 182, 0) var(--kinma-ai-edge-depth)) 0 100% / 100% var(--kinma-ai-edge-depth) no-repeat, linear-gradient(to right, rgba(34, 211, 238, 0.38), rgba(34, 211, 238, 0) var(--kinma-ai-edge-depth)) 0 0 / var(--kinma-ai-edge-depth) 100% no-repeat, linear-gradient(to left, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0) var(--kinma-ai-edge-depth)) 100% 0 / var(--kinma-ai-edge-depth) 100% no-repeat; } body.page-stories:has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .stories-menu-content, body.page-stories:has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .stories-menu-content { z-index: 1; } /* Stammbaum: Außen-Schatten wie .gallery-bottom-search-pill */ .tree-search-wrapper.kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-active):not(.kinma-ai-search-pill--ai-busy) { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); } body.dark-mode .tree-search-wrapper.kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-active):not(.kinma-ai-search-pill--ai-busy) { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* KI-Konversationsliste: gleiche Framework-Pille wie Familien-Kontakte (chat-content-area.css) */ .chat-popup .chat-ai-conversations-search-wrap { align-items: center; } .chat-popup.ai-mode .chat-popup-content-wrapper #chatViewSplit .chat-contacts-toolbar .chat-ai-conversations-search-pill.chat-contacts-search-pill { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; } .kinma-ai-search-pill__search-icon { flex-shrink: 0; width: 20px; height: 20px; margin-right: 2px; color: #64748b; pointer-events: none; } body.dark-mode .kinma-ai-search-pill__search-icon { color: #94a3b8; } /* * Galerie & Geschichten: im Dock wächst die Pille per Flex ohne feste Breite → width bleibt „auto“, * dann springt der Wechsel zu 54px. Explizite 100%-Breite (des Flex-Rests) erlaubt dieselbe * Morph-Animation wie am Stammbaum (width/max-width interpolieren). */ .kinma-ai-search-pill.gallery-bottom-search-pill:not(.kinma-ai-search-pill--ai-busy) { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; } /* Explizit Galerie/Geschichten: sonst setzt .gallery-bottom-search-pill { background } den KI-Verlauf außer Kraft */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy) { border: 3px solid transparent; isolation: isolate; /* Mit ::before (border-radius 9999px); sonst wirkt background-clip/border-box am äußeren Wrapper kantig (z. B. Chat-Verlauf) */ border-radius: 9999px; /* Galerie: sonst schneidet .gallery-bottom-search-pill { overflow: hidden } den RGB-Halo ab */ overflow: visible; box-shadow: 0 1px 8px rgba(26, 26, 26, 0.06), 0 0 0 1px rgba(129, 140, 248, 0.15); /* Pastell nur am Rand — Innenfläche bleibt weiß (.kinma-ai-search-pill__inner) */ background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box; background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-size: auto, 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; } /* Animierter Pastell-RGB-Außen-Schein (gleicher Verlauf + background-position wie die Pille) */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { content: ''; position: absolute; inset: -11px; border-radius: 9999px; z-index: 0; pointer-events: none; background: linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ); background-size: 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; filter: blur(14px); opacity: 0.62; } /* * Mobile Bottom-Nav: breite Pille — symmetrischer Halo (gleiches inset ringsum + moderater Blur), * damit RGB oben/unten nicht dicker wirkt als an den schmalen Rundungen. */ .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { inset: -10px; filter: blur(11px); opacity: 0.54; } /* Wie tree.css --tree-search-pad-y am Stammbaum: Außen 4px für RGB-Rand. Galerie/Geschichten: hier padding am Pill-Element. */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy):not(.tree-search-wrapper) { padding: 0; box-sizing: border-box; } /* KI aktiv: feste Innenhöhe (Stammbaum, Galerie, Geschichten) — keine Sprünge bei Bewertungs-UI */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner { position: relative; z-index: 1; min-height: 44px; max-height: 44px; align-self: center; overflow: hidden; box-sizing: border-box; } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), body.dark-mode .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), body.dark-mode #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy) { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(129, 140, 248, 0.35); } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, body.dark-mode .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, body.dark-mode #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { opacity: 0.52; filter: blur(16px); } body.dark-mode .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { inset: -10px; filter: blur(11px); opacity: 0.5; } /* * Mobile Bottom-Nav KI-Pille: globales .kinma-ai-search-pill__inner hat min/max-height 44px + align-self:center — * bei voller mobiler Bottom-Nav-Zeilenhöhe und padding:0 am Pill wirkt der RGB-Rand oben/unten breiter als an den Seiten. * Mit kinma padding:4px am Pill füllt die Innenfläche die Höhe (stretch) → gleichmäßiger Abstand weiß ↔ Pastell. */ .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner { min-height: 0; max-height: none; align-self: stretch; flex: 1 1 auto; } /* * Mobile Suchmodus + KI: Schließen-Kreis wie Lupe (KI aktiv, Suche zu) — animierter Pastell-RGB-Rand + weicher ::before-Halo. */ #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island { overflow: visible; z-index: 6; } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close { position: relative; z-index: 1; isolation: isolate; overflow: visible; color: #1a1a1a; border: 3px solid transparent !important; border-radius: 9999px; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box !important; background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important; background-size: auto, 320% 100% !important; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite, kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; box-shadow: none !important; } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close svg { stroke: currentColor; color: inherit; } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; z-index: -1; pointer-events: none; background: linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ); background-size: 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; filter: blur(11px); opacity: 0.54; } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close:hover, #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close:focus-visible { background-image: linear-gradient(#f1f5f9, #f1f5f9) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box !important; background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important; background-size: auto, 320% 100% !important; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite, kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; } body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close { color: #1a1a1a; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box !important; background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important; background-size: auto, 320% 100% !important; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite, kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; box-shadow: none !important; } body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close::before { opacity: 0.5; filter: blur(11px); } body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close:hover, body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close:focus-visible { background-image: linear-gradient(#f1f5f9, #f1f5f9) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box !important; background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important; background-size: auto, 320% 100% !important; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite, kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; } /* * KI-Lupe (Suche zu): Pastell-RGB als Ring per Padding (Verlauf auf der Insel, schwarze Lupe deckt die Mitte ab). * Zuverlässiger als background-clip border-box auf WebKit (sonst oft nur „weißer“ Rand). */ #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island { position: relative; isolation: isolate; overflow: visible; z-index: 6; outline: none !important; border: none !important; padding: 6px !important; box-sizing: border-box !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; box-shadow: none; /* Verlauf auf ::after (eigene Animation) — zuverlässiger als background-position auf der Insel in WebKit */ animation: kinma-mb-search-ai-island-rgb-shadow 12s linear infinite; color: #f8fafc !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):not( :has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) ) .mobile-bottom-nav-search-island::after { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none; background: linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ); background-repeat: no-repeat; background-size: 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn { position: relative; z-index: 1; isolation: isolate; overflow: visible; outline: none !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border: none !important; border-radius: 50% !important; background: #1a1a1a !important; background-image: none !important; animation: none !important; box-shadow: none; color: #f8fafc !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon { animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite; color: #c4cbf5; stroke: #c4cbf5; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn:hover, #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn:focus-visible { background: rgba(255, 255, 255, 0.09) !important; background-image: none !important; animation: none !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn::before { content: none !important; display: none !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn-ring-chars text, #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text { /* kein !important auf fill — sonst blockiert es die Keyframe-Farbwechsel */ fill: #c4cbf5; animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important; } /* * KI-Request läuft (Wrap --ai-busy): weiße Insel + RGB-Lupe (größerer Kreis, weniger weißer Rand); Insel-Schatten = RGB-Keyframes. */ #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) { outline: none !important; border: none !important; background: #ffffff !important; background-image: none !important; animation: kinma-mb-search-ai-island-rgb-shadow 12s linear infinite !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn { position: relative; flex: 0 0 auto !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; outline: none !important; border: none !important; background: #1a1a1a !important; background-image: none !important; box-shadow: none; animation: kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; color: #f8fafc !important; isolation: isolate !important; z-index: 1 !important; overflow: visible !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon { animation: kinma-mb-search-ai-icon-pastel-flow 3s linear infinite; color: #c4cbf5; stroke: #c4cbf5; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn-ring-chars text, #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn-ring .mobile-bottom-nav-search-btn-ring-text { fill: #c4cbf5; animation: kinma-mb-search-ai-ring-text-pastel-flow 3s linear infinite !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn:hover, #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn:focus-visible { background: #171717 !important; background-image: none !important; animation: kinma-mb-search-ai-btn-rgb-shadow 12s linear infinite !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn::before { content: '' !important; display: block !important; position: absolute; inset: -6px; border-radius: 50%; z-index: -1; pointer-events: none; background: linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ); background-size: 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 3s linear infinite; } body.dark-mode #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island { animation: kinma-mb-search-ai-island-rgb-shadow 12s linear infinite; } body.dark-mode #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):not( :has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) ) .mobile-bottom-nav-search-island::after { animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active .kinma-ai-search-pill__inner { background: rgba(255, 255, 255, 0.97); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); } /* * KI-Busy (Lade-Kreis): Pille + Außen-Schein = gleicher Pastell-RGB-Verlauf + kinma-ai-search-pill-bar-gradient-flow * wie bei der Pille mit Treffern; kein rein violetter Box-Shadow-Stack mehr. */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy, .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy, #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy, .tree-search-wrapper.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy, .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy { overflow: visible !important; isolation: isolate; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy { border: 3px solid transparent; box-shadow: 0 1px 8px rgba(26, 26, 26, 0.06), 0 0 0 1px rgba(129, 140, 248, 0.14); background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ) border-box; background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-size: auto, 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; } /* Animierter RGB-Außen-Schein (wie .kinma-ai-search-pill--ai-active:not(.ai-busy)::before) */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, .tree-search-wrapper.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; z-index: 0; pointer-events: none; background: linear-gradient( 90deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3, #e0f2fe, #e0e7ff ); background-size: 320% 100%; animation: kinma-ai-search-pill-bar-gradient-flow 12s linear infinite; filter: blur(14px); opacity: 0.62; } .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { inset: -11px; filter: blur(12px); opacity: 0.58; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy:hover { box-shadow: 0 1px 10px rgba(26, 26, 26, 0.08), 0 0 0 1px rgba(129, 140, 248, 0.2); } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(129, 140, 248, 0.28); } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, body.dark-mode .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, body.dark-mode #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, body.dark-mode .tree-search-wrapper.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { opacity: 0.52; filter: blur(16px); } body.dark-mode .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { inset: -11px; filter: blur(12px); opacity: 0.52; } /* * Busy-Kreis (54px, flex-basis): Desktop-Docks + Chat — nicht die Mobile-Bottom-Nav-Pille (.mobile-bottom-nav-search-pill): * dort steuern mobile-bottom-nav.css + kinma-mb-ai-pill-inner-morph-fade die Pille↔Kreis-Transition (60px, max-width). */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy:not(.mobile-bottom-nav-search-pill) { flex: 0 0 54px !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px; min-height: 54px; align-items: center; justify-content: center; border-radius: 50%; padding: 0; overflow: hidden; box-sizing: border-box; /* Flex-Zeile (z. B. Chat-Verlauf): Kreis nicht am linken Rand — Stammbaum setzt .tree-search-wrapper margin 0 und zentriert per compose */ margin-inline: auto; } /* Chat-Verlaufssuche: Morph-Zentrierung + Expansion von der Mitte → chat-enhancements.css (Grid, max-width). */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy:not(.mobile-bottom-nav-search-pill) .kinma-ai-search-pill__inner { visibility: hidden; position: absolute; inset: 0; width: auto; height: auto; max-width: none; flex: none; min-width: 0; opacity: 0; overflow: hidden; pointer-events: none; } /* * Mobile-Bottom-Nav-Suchpille: von den globalen --ai-busy-Maßen (oben) ausgenommen — dort fehlte border-radius: 50%, * sonst wirkt die KI-Ladefläche trotz Spinner eckig (RGB-Hintergrund / Box). */ .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-busy { border-radius: 50%; } .kinma-ai-search-pill .kinma-ai-search-pill__busy-layer { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; z-index: 6; border-radius: 50%; pointer-events: none; background: transparent; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer { display: flex; pointer-events: auto; overflow: hidden; } /* Über animiertem RGB + äußerem ::before-Halo — verhindert falsches Unterliegen in manchen Stacks */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer { z-index: 12; isolation: isolate; } /* * Lade-Ring: einfarbig (Indigo) — nicht der RGB-Verlauf der Pille; der Pastell-RGB-Hintergrund bleibt am Pill-Element + ::before. */ .kinma-ai-search-pill .kinma-ai-search-pill__busy-spinner { position: relative; z-index: 1; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(79, 70, 229, 0.22); border-top-color: #4f46e5; background: none; animation: kinma-ai-search-pill-busy-spin 0.7s linear infinite; pointer-events: none; flex-shrink: 0; transition: none; } .kinma-ai-search-pill .kinma-ai-search-pill__busy-cancel { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #1a1a1a; cursor: pointer; opacity: 0; pointer-events: none; transition: none; -webkit-tap-highlight-color: transparent; } .kinma-ai-search-pill .kinma-ai-search-pill__busy-cancel svg { display: block; width: 22px; height: 22px; flex-shrink: 0; transform: translate(-1px, -1px); } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy:hover .kinma-ai-search-pill__busy-cancel { opacity: 1; pointer-events: auto; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy:hover .kinma-ai-search-pill__busy-spinner { opacity: 0.35; } /* * Touch / grober Zeiger: weiße Scheibe unter Spinner — Pastell-RGB nur am äußeren Pill-Rand + ::before-Halo. */ @media (hover: none), (pointer: coarse) { .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer { z-index: 12; isolation: isolate; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; z-index: 0; pointer-events: none; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.95); } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-cancel { opacity: 1; pointer-events: auto; background: transparent; color: #1a1a1a; z-index: 3; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-cancel svg { width: 24px; height: 24px; filter: drop-shadow(0 0 0.5px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.85)) drop-shadow(0 1px 2px rgba(26, 26, 26, 0.3)); } .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-spinner { opacity: 1; z-index: 2; width: 34px; height: 34px; border-width: 3.5px; } } body.dark-mode .kinma-ai-search-pill .kinma-ai-search-pill__busy-spinner { border-color: rgba(129, 140, 248, 0.28); border-top-color: #a5b4fc; } body.dark-mode .kinma-ai-search-pill .kinma-ai-search-pill__busy-cancel { background: rgba(30, 30, 30, 0.94); color: #e2e8f0; } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy:hover .kinma-ai-search-pill__busy-cancel { background: rgba(26, 26, 26, 0.96); color: #f1f5f9; } @media (hover: none), (pointer: coarse) { body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-cancel { background: transparent; color: #f1f5f9; } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-cancel svg { filter: drop-shadow(0 0 1px rgba(26, 26, 26, 0.9)) drop-shadow(0 0 3px rgba(26, 26, 26, 0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer::before { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9); } } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active .gallery-desktop-search-input, .kinma-ai-search-pill.kinma-ai-search-pill--ai-active .tree-search-input { color: #1e1b4b; } /* Rechte Gruppe in der Pille (Bewertung + ggf. weitere Aktionen) — Stammbaum, Galerie, Geschichten */ .kinma-ai-search-pill__inner-right { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; padding-left: 4px; padding-right: 2px; pointer-events: auto; } .tree-search-inner-right .kinma-ai-search-pill__rating, .kinma-ai-search-pill__inner-right .kinma-ai-search-pill__rating { display: flex; flex-direction: row; align-items: center; flex-shrink: 0; } .kinma-ai-search-pill__rating[hidden] { display: none !important; } .kinma-ai-search-pill__rating-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-shrink: 0; margin: 0; position: relative; z-index: 2; } .kinma-ai-search-pill__rating-sublabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kinma-ai-search-pill__rating-buttons { display: flex; gap: 4px; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 4; } .kinma-ai-search-pill__rating-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 9999px; box-sizing: border-box; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .kinma-ai-search-pill__rating-btn--up { background: transparent; border-color: transparent; color: #16a34a; } .kinma-ai-search-pill__rating-btn--down { background: transparent; border-color: transparent; color: #dc2626; } /* * Desktop (echtes Hover): weißer Innenbereich der Pille färbt sich mit — keine Kreis-Hintergründe an den Daumen-Buttons. * Touch / hover: none: nur Klassen per JS nach Bestätigung (kinma-ai-search-rating.js), siehe __inner--rating-surface-*. */ @media (hover: hover) { /* Nicht nur --ai-active: Chat u. a. können nach Suche --ai-active behalten oder weglassen; Daumen-Hover gilt nur ohne Busy. */ .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy):has(.kinma-ai-search-pill__rating-btn--up:hover:not(:disabled)) .kinma-ai-search-pill__inner { background: rgba(220, 252, 231, 0.97); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28); } .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy):has(.kinma-ai-search-pill__rating-btn--down:hover:not(:disabled)) .kinma-ai-search-pill__inner { background: rgba(254, 226, 226, 0.97); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35); } body.dark-mode .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy):has(.kinma-ai-search-pill__rating-btn--up:hover:not(:disabled)) .kinma-ai-search-pill__inner { background: rgba(20, 83, 45, 0.55); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.28); } body.dark-mode .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy):has(.kinma-ai-search-pill__rating-btn--down:hover:not(:disabled)) .kinma-ai-search-pill__inner { background: rgba(127, 29, 29, 0.45); box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.3); } } /* * Nach Bestätigung (kinma-ai-search-rating.js: __inner--rating-surface-*): gesamte Eingabefläche in Daumen-Farbe. * Ohne Zwang zu --ai-active, damit es nach KI-Lauf konsistent bleibt; nicht bei --ai-busy (Ladekreis). */ .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner.kinma-ai-search-pill__inner--rating-surface-up { background: rgba(220, 252, 231, 0.97); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28); } .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner.kinma-ai-search-pill__inner--rating-surface-down { background: rgba(254, 226, 226, 0.97); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35); } body.dark-mode .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner.kinma-ai-search-pill__inner--rating-surface-up { background: rgba(20, 83, 45, 0.55); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.28); } body.dark-mode .kinma-ai-search-pill:not(.kinma-ai-search-pill--ai-busy) .kinma-ai-search-pill__inner.kinma-ai-search-pill__inner--rating-surface-down { background: rgba(127, 29, 29, 0.45); box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.3); } .kinma-ai-search-pill__rating-btn:focus { outline: none; } .kinma-ai-search-pill__rating-btn--up:focus-visible { outline: 2px solid rgba(22, 163, 74, 0.55); outline-offset: 2px; } .kinma-ai-search-pill__rating-btn--down:focus-visible { outline: 2px solid rgba(220, 38, 38, 0.5); outline-offset: 2px; } .kinma-ai-search-pill__rating-btn:disabled { cursor: default; transform: none; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-buttons { pointer-events: none; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-sublabel { display: none; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-actions { flex-shrink: 0; min-height: 0; align-items: center; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-buttons { justify-content: center; width: auto; } /* Gewählt: kein Kreis-Hintergrund — nur gefülltes Icon in Akzentfarbe */ .kinma-ai-search-pill__rating-btn--chosen.kinma-ai-search-pill__rating-btn--up { background: transparent !important; border-color: transparent !important; color: #16a34a !important; opacity: 1; box-shadow: none !important; } .kinma-ai-search-pill__rating-btn--chosen.kinma-ai-search-pill__rating-btn--down { background: transparent !important; border-color: transparent !important; color: #dc2626 !important; opacity: 1; box-shadow: none !important; } .kinma-ai-search-pill__rating-btn--chosen svg path { fill: currentColor; stroke: none; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-btn--chosen:disabled { opacity: 1 !important; } .kinma-ai-search-pill__rating--voted .kinma-ai-search-pill__rating-btn:not(.kinma-ai-search-pill__rating-btn--chosen) { background: transparent !important; border-color: transparent !important; color: #94a3b8 !important; opacity: 0.38; } /* * KI-Suche läuft oder KI-Modus aktiv: KI-Start-Lupe (.kinma-ai-search-pill__start-btn) nicht anzeigen — * einheitlich für Stammbaum, Galerie, Media, Geschichten, Mobile-Nav, Chat-Composer (keine zweite Start-Aktion). */ .kinma-ai-search-pill.kinma-ai-search-pill--ai-active .kinma-ai-search-pill__start-btn, .kinma-ai-search-pill.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__start-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; width: 0 !important; height: 0 !important; min-width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: none !important; box-shadow: none !important; } /* Einwilligung vor dem Senden der Bewertung */ .kinma-ai-search-feedback-consent[hidden] { display: none !important; } .kinma-ai-search-feedback-consent { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-sizing: border-box; pointer-events: none; } .kinma-ai-search-feedback-consent__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.42); backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05); pointer-events: auto; cursor: pointer; } .kinma-ai-search-feedback-consent__panel { position: relative; z-index: 1; width: min(440px, calc(100vw - 32px)); max-width: 100%; max-height: min(520px, calc(100dvh - 32px)); display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 16px; background: #ffffff; box-shadow: 0 24px 64px rgba(26, 26, 26, 0.22), 0 0 0 1px rgba(148, 163, 184, 0.2); border: 1px solid rgba(148, 163, 184, 0.35); pointer-events: auto; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; } .kinma-ai-search-feedback-consent__title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: #1a1a1a; line-height: 1.35; } .kinma-ai-search-feedback-consent__body { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.5; color: #1a1a1a; } .kinma-ai-search-feedback-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 0; padding-top: 0; } .kinma-ai-search-feedback-consent__btn { font: inherit; font-size: 0.875rem; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .kinma-ai-search-feedback-consent__btn--secondary { background: #f1f5f9; border-color: #cbd5e1; color: #1a1a1a; } .kinma-ai-search-feedback-consent__btn--secondary:hover { background: #e2e8f0; } .kinma-ai-search-feedback-consent__btn--primary { background: #4f46e5; border-color: #4338ca; color: #ffffff; } .kinma-ai-search-feedback-consent__btn--primary:hover { background: #4338ca; } body.kinma-ai-search-feedback-consent-open { overflow: hidden; } body.dark-mode .kinma-ai-search-feedback-consent__panel { background: #1a1a1a; border-color: rgba(148, 163, 184, 0.25); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.12); } body.dark-mode .kinma-ai-search-feedback-consent__title { color: #f1f5f9; } body.dark-mode .kinma-ai-search-feedback-consent__body { color: #94a3b8; } body.dark-mode .kinma-ai-search-feedback-consent__btn--secondary { background: #1a1a1a; border-color: #1a1a1a; color: #e2e8f0; } body.dark-mode .kinma-ai-search-feedback-consent__btn--secondary:hover { background: #1a1a1a; } @media (prefers-reduced-motion: reduce) { .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy), .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy, .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy:hover { animation: none; --kinma-ai-pill-glow-1: 17px; --kinma-ai-pill-glow-2: 17px; --kinma-ai-pill-glow-3: 15px; border: 3px solid transparent; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3) border-box; background-origin: padding-box, border-box; background-clip: padding-box, border-box; background-size: auto, 100% 100%; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before, #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { animation: none; filter: blur(12px); background: linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3); background-size: 100% 100%; } .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, .gallery-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, #stories-bottom-search-pill.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before, .tree-search-wrapper.kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { animation: none; filter: blur(12px); background: linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3); background-size: 100% 100%; } .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active:not(.kinma-ai-search-pill--ai-busy)::before { inset: -10px; filter: blur(11px); } .mobile-bottom-nav.is-search-mode .mobile-bottom-nav-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy::before { inset: -11px; filter: blur(12px); } .kinma-ai-search-pill .kinma-ai-search-pill__busy-spinner { animation: none; border: 3px solid rgba(79, 70, 229, 0.35); border-top-color: #4338ca; opacity: 1; } body.dark-mode .kinma-ai-search-pill .kinma-ai-search-pill__busy-spinner { border-color: rgba(129, 140, 248, 0.35); border-top-color: #818cf8; } @media (hover: none), (pointer: coarse) { .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer::before { animation: none; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.95); } body.dark-mode .kinma-ai-search-pill.kinma-ai-search-pill--ai-active.kinma-ai-search-pill--ai-busy .kinma-ai-search-pill__busy-layer::before { animation: none; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9); } } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close { animation: none !important; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3) border-box !important; background-size: auto, 100% 100% !important; box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.35), 0 4px 14px rgba(129, 140, 248, 0.22) !important; } #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close::before { animation: none; filter: blur(11px); opacity: 0.55; background: linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3); background-size: 100% 100%; } body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close { background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(120deg, #6366f1, #a855f7, #ec4899) border-box !important; background-size: auto, 100% 100% !important; box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.35), 0 4px 14px rgba(99, 102, 241, 0.22) !important; } body.dark-mode #mobile-bottom-nav.is-search-mode:has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-close::before { opacity: 0.42; filter: blur(11px); background: linear-gradient(120deg, #6366f1, #a855f7, #ec4899); background-size: 100% 100%; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-island { animation: none !important; outline: none !important; border: none !important; padding: 6px !important; box-sizing: border-box !important; background-color: transparent !important; background-image: none !important; color: #f8fafc !important; box-shadow: 0 2px 12px rgba(129, 140, 248, 0.2), 0 10px 28px rgba(167, 139, 250, 0.13) !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):not( :has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) ) .mobile-bottom-nav-search-island::after { animation: none !important; background: linear-gradient( 120deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe, #d1fae5, #fef9c3 ); background-size: 100% 100%; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) { animation: none !important; outline: none !important; border: none !important; background: #ffffff !important; background-image: none !important; box-shadow: 0 2px 12px rgba(129, 140, 248, 0.18), 0 10px 28px rgba(167, 139, 250, 0.12) !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn { animation: none !important; flex: 0 0 auto !important; width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; outline: none !important; border: none !important; background: #1a1a1a !important; background-image: none !important; color: #f8fafc !important; box-shadow: 0 2px 10px rgba(129, 140, 248, 0.22), 0 8px 22px rgba(167, 139, 250, 0.14) !important; } body.dark-mode #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn { box-shadow: 0 2px 10px rgba(129, 140, 248, 0.2), 0 8px 22px rgba(167, 139, 250, 0.12) !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn::before { animation: none !important; filter: none; opacity: 1; inset: -6px; background: linear-gradient(120deg, #e0e7ff, #ede9fe, #fce7f3, #e0f2fe); background-size: 100% 100%; } body.dark-mode #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn::before { opacity: 1; filter: none; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn { animation: none !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border: none !important; background: #1a1a1a !important; background-image: none !important; color: #f8fafc !important; box-shadow: none !important; } /* Pastell-Ring auf der Insel; Lupe schwarz — auch mit Pending-Text am Rand */ #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active):not( :has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search-input-wrap--ai-busy) ) .mobile-bottom-nav-search-island:has(.mobile-bottom-nav-search-btn.has-pending-search) .mobile-bottom-nav-search-btn { border: none !important; background: #1a1a1a !important; background-image: none !important; box-shadow: none !important; color: #f8fafc !important; } #mobile-bottom-nav:not(.is-search-mode):has(#mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .mobile-bottom-nav-search-btn .mobile-bottom-nav-search-btn-icon { animation: none; color: #f8fafc !important; stroke: #f8fafc; } body:not(.page-stories):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active)::after, body:not(.page-stories):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active)::after, body:not(.page-stories):has(.tree-container):has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .tree-container::before, body:not(.page-stories):has(.tree-container):has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .tree-container::before, body.page-stories:has(.kinma-ai-search-pill.kinma-ai-search-pill--ai-active) .stories-menu-container::before, body.page-stories:has(.mobile-bottom-nav-search-input-wrap.mobile-bottom-nav-search--ai-active) .stories-menu-container::before { animation: none; filter: none; opacity: 0.82; --kinma-ai-edge-depth: 24px; } .kinma-ai-search-feedback-consent__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(26, 26, 26, 0.58); } } /* ============================================================================= * KI-Start-Lupe (Lupe + optional Label): Stammbaum + Galerie/Media/Geschichten-Desktop. * Feste Pill-Rundung (border-radius nicht animieren), overflow:visible (RGB box-shadow + Ring); Label-Reveal per .kinma-ai-search-pill__start-btn-label overflow. * ============================================================================= */ @keyframes kinma-ai-search-pill__start-btn-glow-soft { /* Pastell-RGB wie kinma_ai_search_pill_loupe_svg (SMIL stop-color / 3s) — Ring + weicher Schein gleiche Tonalität */ 0%, 100% { box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.95), 0 1px 5px rgba(165, 180, 252, 0.45), 0 0 10px 3px rgba(196, 181, 253, 0.42), 0 0 7px 2px rgba(249, 168, 212, 0.32); } 12.5% { box-shadow: 0 0 0 2px rgba(249, 168, 212, 0.95), 0 1px 5px rgba(249, 168, 212, 0.48), 0 0 10px 3px rgba(253, 224, 200, 0.38), 0 0 7px 2px rgba(196, 181, 253, 0.34); } 25% { box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.95), 0 1px 5px rgba(134, 239, 172, 0.5), 0 0 10px 3px rgba(147, 197, 253, 0.4), 0 0 7px 2px rgba(253, 224, 200, 0.32); } 37.5% { box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.95), 0 1px 5px rgba(147, 197, 253, 0.48), 0 0 10px 3px rgba(165, 180, 252, 0.4), 0 0 7px 2px rgba(134, 239, 172, 0.34); } 50% { box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.95), 0 1px 5px rgba(196, 181, 253, 0.48), 0 0 10px 3px rgba(249, 168, 212, 0.38), 0 0 7px 2px rgba(252, 211, 77, 0.34); } 62.5% { box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.95), 0 1px 5px rgba(252, 211, 77, 0.5), 0 0 10px 3px rgba(249, 168, 212, 0.36), 0 0 7px 2px rgba(196, 181, 253, 0.34); } 75% { box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.95), 0 1px 5px rgba(165, 180, 252, 0.46), 0 0 10px 3px rgba(134, 239, 172, 0.38), 0 0 7px 2px rgba(147, 197, 253, 0.34); } 87.5% { box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.95), 0 1px 5px rgba(196, 181, 253, 0.46), 0 0 10px 3px rgba(249, 168, 212, 0.4), 0 0 7px 2px rgba(165, 180, 252, 0.34); } } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ) { position: relative; box-sizing: border-box; isolation: isolate; border-radius: 9999px; outline: none; -webkit-appearance: none; appearance: none; border: 4px solid transparent !important; min-width: 2.25rem; min-height: 2.25rem; height: 2.25rem; width: auto; max-width: 2.25rem; padding: 0; margin: 0; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; /* Kein gap im Ruhezustand: sonst wirkt die Lupe neben max-width:0-Label unsymmetrisch */ gap: 0; overflow: visible; cursor: pointer; line-height: 0; font: inherit; -webkit-tap-highlight-color: transparent; /* Außenring + RGB-Schein: Pastell wie SMIL-Lupe (kinma_ai_search_pill_loupe_svg) */ box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.95), 0 1px 5px rgba(165, 180, 252, 0.45), 0 0 10px 3px rgba(196, 181, 253, 0.42), 0 0 7px 2px rgba(249, 168, 212, 0.32); background-color: transparent; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #a5b4fc, #c4b5fd, #f9a8d4, #86efac, #93c5fd, #fcd34d, #a5b4fc, #f9a8d4 ) border-box; background-origin: padding-box, border-box; background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box; background-size: auto, 320% 100%; /* Glow + Rand + SVG-Lupe: gleicher 3s-Takt (SMIL dur="3s" in kinma_ai_search_pill_loupe_svg) */ animation: kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite, kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite; transition: max-width 0.52s cubic-bezier(0.22, 1, 0.36, 1), padding 0.38s cubic-bezier(0.22, 1, 0.36, 1), gap 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; } /* Hover/Focus: gleicher Verlauf am Rand + Pastell-Schatten-RGB (auch ohne Desktop-@media) */ button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { animation: kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite, kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ) > svg { flex-shrink: 0; display: block; width: 22px; height: 22px; pointer-events: none; } /* Text: immer Verlauf wie Lupe-SVG (kein „Schwarz“ beim Unhover — fill bleibt transparent) */ .kinma-ai-search-pill__start-btn-label { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; box-sizing: border-box; margin: 0; padding: 0; /* Flex-Mindestbreite sonst = Text-Mincontent trotz max-width:0 → Lupe wirkt nach links versetzt */ min-width: 0; flex: 0 1 0%; max-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.02em; line-height: 1.15; pointer-events: none; vertical-align: middle; background-image: linear-gradient( 135deg, #a5b4fc 0%, #c4b5fd 22%, #f9a8d4 42%, #fcd34d 52%, #86efac 64%, #93c5fd 80%, #a5b4fc 100% ); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: kinma-ai-search-pill-bar-gradient-flow 3s linear infinite; transition: max-width 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.14s; } .kinma-ai-search-pill__start-btn-char { display: inline-block; opacity: 0; transition: opacity 0.06s linear; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):not(:hover):not(:focus-visible) .kinma-ai-search-pill__start-btn-char { opacity: 0; transition-delay: calc((var(--kinma-ai-char-count, 8) - 1 - var(--kinma-ai-char, 0)) * 0.045s); } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover .kinma-ai-search-pill__start-btn-char, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible .kinma-ai-search-pill__start-btn-char { opacity: 1; transition-delay: calc(var(--kinma-ai-char, 0) * 0.065s); } body.dark-mode button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ) { animation: kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite, kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite; box-shadow: 0 0 0 2px rgba(165, 180, 252, 0.88), 0 1px 6px rgba(0, 0, 0, 0.55), 0 0 10px 3px rgba(196, 181, 253, 0.38), 0 0 7px 2px rgba(249, 168, 212, 0.3); background-image: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient( 90deg, #a5b4fc, #c4b5fd, #f9a8d4, #86efac, #93c5fd, #fcd34d, #a5b4fc, #f9a8d4 ) border-box; -webkit-background-clip: padding-box, border-box; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 2px; } body.dark-mode button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { outline-color: rgba(165, 180, 252, 0.75); } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ) { max-width: 2.25rem; justify-content: center; padding: 0; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):not(:hover):not(:focus-visible) .kinma-ai-search-pill__start-btn-label { max-width: 0; transition-delay: 0.22s; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { max-width: 11.5rem; justify-content: flex-start; padding: 0 0.65rem 0 0.48rem; gap: 0.46rem; /* Animation kommt aus globalem :hover/:focus-visible oben (3s Verlauf + Glow) */ } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover .kinma-ai-search-pill__start-btn-label, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible .kinma-ai-search-pill__start-btn-label { max-width: 9rem; flex: 0 1 auto; transition-delay: 0s; } } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) and (prefers-reduced-motion: reduce) { button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { animation: none; box-shadow: 0 1px 6px rgba(129, 140, 248, 0.22), 0 0 8px 3px rgba(165, 180, 252, 0.22); } body.dark-mode button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover, body.dark-mode button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible { animation: none; } button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):hover .kinma-ai-search-pill__start-btn-label, button.kinma-ai-search-pill__start-btn:not([hidden]):not(:disabled):not(.tree-search-ai-match-btn--busy):not( .mobile-bottom-nav-tree-ai-match-btn--busy ):focus-visible .kinma-ai-search-pill__start-btn-label { animation: none; } } /* Galerie/Media: ältere Dock-Regeln mit border:none überschreiben, wenn KI-Lupe sichtbar */ .gallery-bottom-search-pill .gallery-desktop-search-inner button.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible { display: inline-flex !important; border: 4px solid transparent !important; background-color: transparent !important; background-image: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient( 90deg, #a5b4fc, #c4b5fd, #f9a8d4, #86efac, #93c5fd, #fcd34d, #a5b4fc, #f9a8d4 ) border-box !important; background-origin: padding-box, border-box; background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box; background-size: auto, 320% 100%; animation: kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite, kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important; } body.dark-mode .gallery-bottom-search-pill .gallery-desktop-search-inner button.kinma-ai-search-pill__start-btn.mobile-bottom-nav-tree-ai-match-btn--visible { background-image: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient( 90deg, #a5b4fc, #c4b5fd, #f9a8d4, #86efac, #93c5fd, #fcd34d, #a5b4fc, #f9a8d4 ) border-box !important; background-clip: padding-box, border-box; -webkit-background-clip: padding-box, border-box; animation: kinma-ai-search-pill__start-btn-glow-soft 3s linear infinite, kinma-ai-search-pill-start-btn-border-gradient-flow 3s linear infinite !important; }