/* ======================
   PAINTING NOTIFICATION
   ====================== */
.painting-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--warm-white);
    border-bottom: 1px solid var(--warm-grey);
    z-index: var(--z-notification);
    transform: translateY(-100%);
    transition: transform var(--duration-medium) ease;
    font-family: 'Cormorant', Georgia, serif;
    font-size: var(--text-body);
    font-style: italic;
    color: var(--text-primary);
    letter-spacing: var(--ls-caption);
}

.painting-notification.visible {
    transform: translateY(0);
}

.painting-notification-btn {
    font-family: 'Cormorant', Georgia, serif;
    font-size: var(--text-button);
    font-weight: 300;
    letter-spacing: var(--ls-button);
    text-transform: lowercase;
    background: none;
    border: 1px solid var(--accent);
    color: var(--text-primary);
    padding: 0.3rem var(--space-md);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}

@media (hover: hover) {
    .painting-notification-btn:hover {
        background: var(--accent);
        color: var(--warm-white);
    }
}

.painting-notification-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-body);
    padding: 0 var(--space-2xs);
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--duration-fast) ease;
}

@media (hover: hover) {
    .painting-notification-dismiss:hover {
        opacity: 1;
    }
}

/* Live viewer overlay */
.paint-live-overlay .paint-overlay-content {
    background: var(--warm-white);
}

#liveCanvas {
    position: absolute;
    inset: 0;
}

.paint-flag-btn {
    font-family: 'Cormorant', Georgia, serif;
    font-size: var(--text-button);
    font-weight: 300;
    letter-spacing: var(--ls-button);
    text-transform: lowercase;
    background: none;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 0.4rem var(--space-md);
    cursor: pointer;
    transition: all var(--duration-normal) ease;
}

@media (hover: hover) {
    .paint-flag-btn:hover {
        border-color: var(--error);
        color: var(--error);
    }
}