initial files

public/styles/userNotification.css

@@ -0,0 +1,67 @@
+/* Bubble-Container */
+#notify-bubble {
+    position: absolute;
+    bottom: 125%;
+    right: 3px;
+    min-width: 200px;
+    max-height: 50vh;
+    width: max-content;   /* 🔑 wächst mit Inhalt */
+    max-width: 600px;      /* aber capped */
+    background: var(--theme-taskbar-tray-backcolor);
+    color: var(--theme-taskbar-tray-color);
+    border-color: var(--theme-taskbar-tray-border-color);
+    border-radius: 10px;
+    overflow-y: auto;      /* vertikal scrollen */
+    overflow-x: hidden;    /* horizontal verhindern */
+    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+    padding: 10px 10px 6px 10px;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(10px);
+    transition: all 0.25s ease;
+    z-index: 99999999;
+    text-align: end;
+    font-weight: normal;
+}
+
+/* Bubble-Items als Grid */
+.bubble-item {
+    display: grid;
+    grid-template-columns: minmax(0, auto) 250px;
+    gap: 10px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    /* cursor: pointer; */
+    align-items: center;
+    transition: transform 0.25s;
+
+}
+
+/* linke Spalte */
+.bubble-item > :nth-child(1) {
+    min-width: 0;          /* wichtig für Grid Shrink */
+    white-space: normal;   /* Text darf umbrechen */
+    overflow-wrap: normal; /* Wörter nur bei Bedarf umbrechen */
+    word-break: normal;    /* nicht mitten in Wörtern */
+    text-align: left;
+}
+
+/* rechte Spalte fix */
+.bubble-item > :nth-child(2) {
+    width: 250px;
+    height: 50px;
+    overflow: hidden;
+}
+
+/* hover Effekt */
+.bubble-item:hover {
+    background: rgba(64,64,64,0.4);
+    transform: scale(1.01);
+}
+
+/* Bubble sichtbar machen */
+.notify-button.active #notify-bubble {
+    pointer-events: auto;
+    opacity:1;
+    transform: translateY(0);
+}