:root {
    --blue: #3390ec;
    --blue-dark: #2b7bcc;
    --green-out: #eeffde;
    --gray: #707579;
    --gray-light: #a9adb2;
    --light: #f4f4f5;
    --border: #dfe5ec;
    --danger: #e35a5a;
    --success: #4cb266;
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.06);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --avatar-palette: #ff8a5c, #ffbc42, #6fcf97, #56ccf2, #9b8cf2, #f2709c, #45c4b0, #f27059;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--font);
    color: #1c1c1e;
    -webkit-font-smoothing: antialiased;
}

body { display: flex; overflow: hidden; }

button { font-family: inherit; }
input, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
}

/* AVATARS — consistent color per user, generated from id */
.av {
    width: 54px; height: 54px; border-radius: 50%;
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 18px; flex-shrink: 0; object-fit: cover;
    user-select: none;
}
.av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* TOASTS — explicit error / success feedback */
#toastHost {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 5000; display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none;
}
.toast {
    background: #2c2c2e; color: white; padding: 10px 18px; border-radius: var(--radius-md);
    font-size: 14px; box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(10px);
    animation: toastIn 0.25s ease forwards, toastOut 0.25s ease forwards 2.6s;
    max-width: 320px; text-align: center;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

#pushBanner {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
    background: white; color: #1c1c1e; padding: 14px 16px; border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-soft);
    font-size: 14px; font-family: var(--font); border: 1px solid var(--border);
    max-width: 420px; margin: 0 auto; animation: toastIn 0.25s ease;
}
.push-banner-text { flex: 1; line-height: 1.3; }
.push-banner-btn {
    border: none; border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; font-family: inherit; flex-shrink: 0;
}
.push-banner-btn--primary { background: var(--blue); color: white; }
.push-banner-btn--primary:hover { background: var(--blue-dark); }
.push-banner-btn--ghost { background: transparent; color: var(--gray); font-weight: 500; padding: 8px 6px; }
.push-banner-btn--ghost:hover { color: #1c1c1e; }

@media (max-width: 480px) {
    #pushBanner { flex-wrap: wrap; }
    .push-banner-text { width: 100%; margin-bottom: 4px; }
}