/* ============================================================ Look „Orbit" (24.09.2026) — Effekt-Ebene über dem normalen Look. Aktiv nur mit und nur im Chat-Bereich (body[data-nav="chats"]); look-orbit.js setzt das Attribut und zeichnet die Partikelkugel in #look-fx. Farben kommen ausschließlich aus --accent/--accent-2, also aus BRAND_ACCENT(_2) der Instanz. Ohne data-look="futur" ändert diese Datei nichts. Prototyp + Varianten: outputs/aios-chat-look/ (nur lokal, Mac Mini). ============================================================ */ #look-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; } [data-look="futur"] body[data-nav="chats"] #look-fx { display: block; } [data-look="futur"][data-theme="dark"] { --look-bg: #000; --glas: rgba(10, 13, 16, .52); --glas-stark: rgba(12, 16, 19, .72); --glas-rand: rgba(255, 255, 255, .09); --glas-licht: rgba(255, 255, 255, .16); --look-spitze: color-mix(in srgb, var(--accent-2) 55%, #fff); } [data-look="futur"][data-theme="light"] { --look-bg: #eef2f3; --glas: rgba(255, 255, 255, .55); --glas-stark: rgba(255, 255, 255, .76); --glas-rand: rgba(20, 40, 45, .10); --glas-licht: rgba(255, 255, 255, .95); --look-spitze: var(--accent-2); } /* Hintergrund frei machen, damit die Kugel (z-index -1) durchscheint. html behält die Grundfarbe, body wird durchsichtig. */ [data-look="futur"]:has(body[data-nav="chats"]) { background: var(--look-bg); } [data-look="futur"] body[data-nav="chats"] { background: transparent; } [data-look="futur"] body[data-nav="chats"] .header, [data-look="futur"] body[data-nav="chats"] .chat-tabs { background: transparent; } [data-look="futur"] body[data-nav="chats"] .header { backdrop-filter: none; -webkit-backdrop-filter: none; } [data-look="futur"] body[data-nav="chats"] .composer { background: transparent; } /* Seitenleiste und Rail: Glas */ [data-look="futur"] body[data-nav="chats"] .sidebar, [data-look="futur"] body[data-nav="chats"] .sb-rail { background: var(--glas); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-color: var(--glas-rand); } /* Nachrichten: halbdurchsichtig mit stehendem Glanzbogen. Bewusst ohne backdrop-filter: über der bewegten Kugel müsste der Grafikchip jede Blase in jedem Bild neu weichzeichnen. */ [data-look="futur"] body[data-nav="chats"] .msg.assistant .bubble { background: var(--glas-stark); border-color: var(--glas-rand); box-shadow: inset 0 1px 0 var(--glas-licht), 0 20px 50px -30px rgba(0, 0, 0, .6); } [data-look="futur"] body[data-nav="chats"] .msg.user .bubble { background: color-mix(in srgb, var(--accent) 12%, var(--glas-stark)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: inset 0 1px 0 var(--glas-licht); } [data-look="futur"] body[data-nav="chats"] .msg .bubble::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from 250deg, transparent 0 20deg, var(--glas-licht) 60deg, transparent 110deg 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Eingabefeld: ein Lichtpunkt läuft im Uhrzeigersinn um den Rand, 12 s je Runde, während AIOS antwortet 2,6 s. ::before ist die Linie, ::after derselbe Verlauf weichgezeichnet als Schein. */ @property --look-a { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes look-dreh { to { --look-a: 360deg; } } [data-look="futur"] body[data-nav="chats"] .compose-card { position: relative; overflow: visible; isolation: isolate; background: var(--glas-stark); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); border-color: var(--glas-rand); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .7); } .look-streamt[data-look="futur"] body[data-nav="chats"] .compose-card::before, .look-streamt[data-look="futur"] body[data-nav="chats"] .compose-card::after { animation-duration: 2.6s; } [data-look="futur"] body[data-nav="chats"] .compose-card:focus-within { border-color: color-mix(in srgb, var(--accent) 30%, var(--glas-rand)); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .7); } [data-look="futur"] body[data-nav="chats"] .compose-card::before, [data-look="futur"] body[data-nav="chats"] .compose-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--look-a), transparent 0deg 292deg, color-mix(in srgb, var(--accent) 60%, transparent) 322deg, var(--look-spitze) 345deg, #fff 351deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .5s; animation: look-dreh 12s linear infinite; } [data-look="futur"] body[data-nav="chats"] .compose-card::after { filter: blur(7px); opacity: .6; z-index: -1; padding: 3px; } [data-look="futur"] body[data-nav="chats"] .compose-card:focus-within::after { opacity: 1; } [data-look="futur"] body[data-nav="chats"] .compose-config .header-chips { border-bottom-color: var(--glas-rand); } [data-look="futur"] body[data-nav="chats"] .send-btn:not(:disabled) { background: radial-gradient(120% 120% at 30% 20%, var(--accent-2), var(--accent) 60%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 40%, transparent), 0 8px 26px -8px var(--accent-glow); } /* Leerer Chat: die Kugel ersetzt den Ring, „AIOS · Bereit" rückt darunter */ [data-look="futur"] body[data-nav="chats"] .jarvis::before, [data-look="futur"] body[data-nav="chats"] .jarvis-svg { visibility: hidden; } [data-look="futur"] body[data-nav="chats"] .jarvis-boot { inset: auto 0 -54px 0; flex-direction: row; gap: 12px; margin: 0 auto; width: max-content; padding: 8px 18px; border-radius: 99px; background: var(--glas); border: 1px solid var(--glas-rand); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-look="futur"] body[data-nav="chats"] .jarvis-name, [data-look="futur"] body[data-nav="chats"] .jarvis-sub { text-shadow: none; font-size: 12px; } /* Schalter-Zeichen: gedrückt = Effekte an */ .look-btn[aria-pressed="true"] { color: var(--accent); } @media (prefers-reduced-motion: reduce) { [data-look="futur"] body[data-nav="chats"] .compose-card::before, [data-look="futur"] body[data-nav="chats"] .compose-card::after { animation: none; } } /* Zwei Knöpfe mit margin-left:auto teilen sich sonst den freien Platz */ .hchip-theme.look-btn + .hchip-theme { margin-left: 0; } /* Handy: die Chip-Reihe klappt zu einem Chip zusammen. Effekte und Hell/Dunkel bleiben daneben stehen (seit 26.09.2026 beide, vorher nur Effekte), sonst gibt es ohne Rail keinen Weg dorthin. */ #header-chips > .hchip-theme.look-btn { display: inline-flex !important; }