/* 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: 500px;      /* 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: 6px 6px 0px 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all var(--times-transition-transform) 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: 5px;
    padding: 3px 6px;
    border-radius: 6px;
    /* cursor: pointer; */
    align-items: center;
    transition: transform var(--times-transition-transform);

}

/* 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: var(--theme-accent-hover-backcolor);
    color: var(--theme-accent-hover-color);
    border-color: var(--theme-accent-hover-border-color);
    transform: scale(1.01);
}

/* Bubble sichtbar machen */
.notify-button.active #notify-bubble {
    pointer-events: auto;
    opacity:1;
    transform: translateY(0);
}