/* ============================================================
   Uppy Cloud — Update Notifier Widget
   Bottom-right notification for frontend updates.
   ============================================================ */

#update-notifier-widget {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9999;
    width: 480px;
    background: var(--uppy-control, #F9F9F9);
    border: 1px solid var(--uppy-control-dark, #C3C3C3);
    border-bottom: none;
    box-shadow: 2px -2px 12px rgba(0, 0, 0, 0.16);
    overflow: visible;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.82rem;
    color: var(--uppy-control-text, #000);
    transform-origin: center center;
    will-change: transform, opacity, visibility;
    display: none;
    transform: perspective(1000px) scale(0.95) rotateX(10deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#update-notifier-widget.closed {
    display: none;
    transform: perspective(1000px) scale(0.95) rotateX(10deg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#update-notifier-widget.opening {
    display: block;
    transform: perspective(1000px) scale(1) rotateX(0deg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.42s ease;
}

#update-notifier-widget.open {
    display: block;
    transform: perspective(1000px) scale(1) rotateX(0deg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.42s ease;
}

#update-notifier-widget.closing {
    display: block;
    transform: perspective(1000px) scale(0.95) rotateX(5deg);
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: transform 0.24s ease-in, opacity 0.24s ease-in;
}

#update-notifier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--uppy-control-light, #F1F1F1);
    border-bottom: 1px solid var(--uppy-control-dark, #C3C3C3);
    cursor: default;
    user-select: none;
}

#update-notifier-title {
    flex: 1;
    font-weight: 600;
}

#update-notifier-close {
    background: none;
    border: none;
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.15s;
}

#update-notifier-close:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

#update-notifier-content {
    padding: 12px 10px;
    max-height: none;
    overflow-y: auto;
}

.update-info {
    font-weight: 600;
    color: var(--uppy-highlight, #46C5DB);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.update-changelog {
    color: var(--uppy-control-text, #666);
    line-height: 1.4;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

body.dark-theme #update-notifier-widget {
    background: var(--uppy-control-dark, #2a2a2a);
    border-color: var(--uppy-highlight, #46C5DB);
    color: var(--uppy-text, #fff);
}

body.dark-theme #update-notifier-header {
    background: linear-gradient(to bottom, var(--uppy-highlight, #46C5DB), var(--uppy-blue-dark, #00A8CC));
    color: white;
}

body.dark-theme .update-changelog {
    color: var(--uppy-text, #ccc);
}