/* Lightweight toast / message styles for temporary UI messages
   Used by profile-edit.js (showMessage), voting-system.js (showVoteMessage)
   and the new window.showMessages helper.
*/
:root {
    --toast-bg-success: #e6ffef;
    --toast-border-success: #55c38a;
    --toast-text-success: #066237;
    --toast-bg-error: #fff0f0;
    --toast-border-error: #e05555;
    --toast-text-error: #7a1515;
    --toast-z: 9999;
}

.temp-message,
.message-popup {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 220px;
    max-width: 90vw;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    font-size: 0.95rem;
    line-height: 1.2;
    z-index: var(--toast-z);
    opacity: 0;
    pointer-events: none;
    transition: transform 260ms ease, opacity 260ms ease;
}

.temp-message.show,
.message-popup.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.temp-message.success { background: var(--toast-bg-success); border: 1px solid var(--toast-border-success); color: var(--toast-text-success); }
.temp-message.error { background: var(--toast-bg-error); border: 1px solid var(--toast-border-error); color: var(--toast-text-error); }

.message-popup { padding: 0.5rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; border-radius: 10px; }
.message-popup.success { background: linear-gradient(180deg, var(--toast-bg-success), #f7fff8); border: 1px solid var(--toast-border-success); color: var(--toast-text-success); }
.message-popup.error { background: linear-gradient(180deg, var(--toast-bg-error), #fff7f7); border: 1px solid var(--toast-border-error); color: var(--toast-text-error); }
.message-popup .message-inner { display:flex; align-items:center; gap:0.6rem; }
.message-popup .vote-result-icon { font-size:1.1rem; }
.message-popup.slide-out { transform: translateX(-50%) translateY(-12px); opacity: 0; }

/* Position newer toasts slightly higher so multiple can stack visually */
body .temp-message:nth-last-child(1) { bottom: 18vh; }
body .temp-message:nth-last-child(2) { bottom: 16vh; }
body .temp-message:nth-last-child(3) { bottom: 14vh; }

/* Fallback for very small viewports */
@media (max-width:420px) {
    .temp-message, .message-popup { left: 6vw; transform: none; right: 6vw; }
}