zwischenstand

frontend/src/lib/components/chatbotDemo/InputRow.svelte

@@ -96,6 +96,8 @@
 </div>
 
 <style lang="less">
+    @import "../../assets/css/variables.less";
+
     .input-row {
         width: 100%;
         display: flex;
@@ -107,32 +109,56 @@
         .quick-actions {
             width: 100%;
             display: grid;
-            gap: 0.65rem;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            padding: 0px 0.6rem;
-            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 0.9rem;
+            padding: 0 0.6rem;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 
             .quick-chip {
                 display: inline-flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: flex-start;
-                padding: 0.65rem 0.95rem;
+                padding: 0.9rem 1.15rem;
                 border-radius: 4px;
-                background: var(--bg-200);
-                color: white;
-                border: 1px solid var(--bg-100);
+                position: relative;
+                overflow: hidden;
+                background:
+                    radial-gradient(140% 160% at 15% -10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.88) 55%),
+                    rgba(13, 12, 12, 0.82);
+                color: var(--neutral-white);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                box-shadow:
+                    0 18px 36px rgba(0, 0, 0, 0.4),
+                    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+                backdrop-filter: blur(12px);
                 cursor: pointer;
-                gap: 0.25rem;
+                gap: 0.35rem;
                 transition:
-                    background 0.3s ease,
-                    transform 0.3s ease;
+                    transform 0.3s ease,
+                    box-shadow 0.3s ease,
+                    border-color 0.3s ease;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    inset: 0;
+                    border-radius: inherit;
+                    background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 60%);
+                    opacity: 0;
+                    transition: opacity 0.3s ease;
+                    pointer-events: none;
+                }
 
                 &:hover:not(:disabled) {
-                    background: var(--bg-100);
-                    border: 1px solid var(--bg-200);
-                    transform: translateY(-1px);
+                    transform: translateY(-4px);
+                    box-shadow:
+                        0 24px 48px rgba(0, 0, 0, 0.5),
+                        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+                    border-color: rgba(173, 81, 76, 0.55);
+
+                    &::after {
+                        opacity: 1;
+                    }
                 }
 
                 &:disabled {
@@ -141,15 +167,16 @@
                 }
 
                 .title {
-                    font-size: 0.8rem;
-                    letter-spacing: 0.01em;
-                    opacity: 0.8;
+                    font-size: 0.78rem;
+                    letter-spacing: 0.08em;
+                    text-transform: uppercase;
+                    color: rgba(255, 255, 255, 0.7);
                 }
 
                 .highlight {
-                    font-size: 0.95rem;
+                    font-size: 1rem;
                     font-weight: 600;
-                    color: var(--neutral-white);
+                    color: var(--text-200);
                     text-transform: capitalize;
                 }
             }