/* ========================================================================= AURI in der Optik der Agenten-Leiste (Vorlage ) ========================================================================= Mert, 15.08.2026: "bau das rein ich will dieses design" - und auf die Rueckfrage, wie weit: "ddesign und optik". Also NUR das Aussehen. AURIs Technik bleibt unberuehrt: der Agent ist ein 503-KB-React-Bundle aus dem Astro-Quellprojekt, und das ist tabu. Diese Datei legt sich als Schicht darueber, genau wie es auri-voice-sci-fi.css schon tut - keine Zeile im Bundle wird angefasst, und wer sie entfernt, hat wieder den alten Stand. Die Struktur passte auffallend gut: was die Vorlage als eine Zeile aus Bild, Name, Zustand und Knoepfen baut, hat AURI bereits - .aura-head mit .aura-av, .aura-hi (darin Name und Zustand) und den .aura-hbtn. Uebertragen werden deshalb die Merkmale, die den Look der Vorlage ausmachen: 1. ECKIGES BILD statt Kreis (rounded-xl). Das ist das auffaelligste Zeichen der Vorlage - ein runder Avatar liest sich als Person, ein gerundetes Quadrat als Anwendung. 2. KEIN RAHMEN, nur eine Lichtkante aus dem Schatten. Rahmen und Lichtsaum nebeneinander sehen aus wie zwei Raender. 3. Knoepfe als FLAECHEN ohne Rand, die erst beim Zeigen aufleuchten. 4. Das Eingabefeld TRANSPARENT im Kasten stehend statt als eigener Kasten mit Rahmen. 5. Name klein und fest, Zustand darunter gedaempft. Die Regeln haengen NICHT an #auri. Nachgemessen: das Panel liegt gar nicht darin, sondern in einem daneben - mit #auri davor griff keine einzige Regel, auch nicht mit !important, weil der Selektor schlicht nicht passte. Die .aura-*-Klassen gehoeren ohnehin nur AURI. Bewusst NICHT uebernommen: die Kuerzel-Kaestchen (V/C) an den Modus-Knoepfen. Die tragen dort bereits den Flow-Effekt aus Baustein 5 (.au-flow mit eigenen Pseudo-Elementen); ein weiteres ::after haette sich damit gebissen. Der Nutzen waere ohnehin gering - AURIs Modi wechselt man mit der Maus, nicht im Blindflug. ========================================================================= */ /* --- Der Kasten --------------------------------------------------------- padding auf 8px wie in der Vorlage, damit Kopf, Modi und Eingabe als EIN Block sitzen statt randlos aneinanderzustossen. */ .aura-panel { padding: 8px !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .07) !important; } /* --- Die Zeile: Bild, Name, Zustand, Knoepfe ---------------------------- */ .aura-head { padding: 0 !important; gap: 12px !important; border-bottom: 0 !important; } .aura-av { width: 36px !important; height: 36px !important; border-radius: 11px !important; /* das eckige Bild der Vorlage */ flex: none; } .aura-av img, .aura-av canvas, .aura-av svg { border-radius: 11px !important; } .aura-hi { min-width: 0; } .aura-hi b { display: block; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aura-hi span { display: block; margin-top: 5px; font-size: 12.5px !important; line-height: 1 !important; color: rgba(255, 255, 255, .55) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Kopfknoepfe: Flaeche statt Kreis mit Rand -------------------------- */ .aura-hbtn { width: 36px !important; height: 36px !important; border-radius: 9px !important; background: transparent !important; border: 0 !important; color: rgba(255, 255, 255, .62) !important; transition: background .16s ease, color .16s ease !important; } .aura-hbtn:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; } /* --- Die Modi: dieselbe Knopfform, Markierung ueber die Flaeche --------- Der aktive Modus stand auf rotem Vollton. In der Sprache der Vorlage markiert nicht die Farbe, sondern die aufgehellte Flaeche - der rote Vollton wuerde neben den ruhigen Knoepfen daneben schreien. Der Akzent bleibt trotzdem: er wandert in die Schrift. */ .aura-modes { display: flex !important; gap: 6px !important; padding: 8px 0 0 !important; border: 0 !important; } .aura-mode { flex: 1; height: 36px !important; border-radius: 9px !important; background: transparent !important; border: 0 !important; color: rgba(255, 255, 255, .62) !important; font-size: 13.5px !important; font-weight: 600 !important; transition: background .16s ease, color .16s ease !important; } .aura-mode:hover { background: rgba(255, 255, 255, .07) !important; } .aura-mode.aura-active { background: rgba(255, 255, 255, .1) !important; color: #fff !important; } /* --- Die Eingabe: im Kasten stehend, nicht als eigener Kasten ----------- */ .aura-in { padding: 8px 0 0 !important; background: transparent !important; border: 0 !important; border-top: 0 !important; } .aura-in input, .aura-in textarea { background: transparent !important; border: 0 !important; border-radius: 9px !important; color: #fff !important; font-size: 14px !important; padding: 8px !important; } .aura-in input::placeholder, .aura-in textarea::placeholder { color: rgba(255, 255, 255, .35) !important; } .aura-in input:focus-visible, .aura-in textarea:focus-visible { outline: 2px solid var(--au-acc, #E5142A); outline-offset: 1px; } /* Der Sendeknopf traegt als einziger Farbe - er ist die Handlung. */ .aura-btn.aura-send { width: 36px !important; height: 36px !important; border-radius: 9px !important; border: 0 !important; background: var(--au-acc, #E5142A) !important; color: #fff !important; } .aura-btn.aura-send:disabled { background: rgba(255, 255, 255, .1) !important; color: rgba(255, 255, 255, .4) !important; } /* --- Vorschlags-Chips: gleiche Rundung wie die Knoepfe ------------------ */ .aura-chip { border-radius: 9px !important; border: 0 !important; background: rgba(255, 255, 255, .07) !important; } .aura-chip:hover { background: rgba(255, 255, 255, .12) !important; } @media (prefers-reduced-motion: reduce) { .aura-hbtn, .aura-mode { transition: none !important; } }