/* Notification bell (top bar) and toasts (bottom left). */

.bell { position: relative; }
.icon-button { position: relative; }

.bell__badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--bg);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.bell__backdrop { position: fixed; inset: 0; z-index: 12; }

.bell__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: -48px;
    z-index: 13;
    width: min(380px, calc(100vw - 24px));
    max-height: min(520px, 75vh);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: 0 16px 48px rgb(0 0 0 / 30%);
    overflow: hidden;
    animation: shani-rise 0.18s ease;
}

.bell__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }

.bell__permission {
    margin: 10px 12px 0;
    padding: 10px 12px;
    border: 1px dashed var(--accent);
    border-radius: var(--radius-md);
    background: none;
    color: var(--ink-muted);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.bell__permission strong { color: var(--accent); }
.bell__empty { margin: 0; padding: 20px 16px; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.5; }

.bell__list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; }

.bell__item {
    position: relative;
    width: 100%;
    display: flex;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.bell__item:hover { background: var(--surface); }

.bell__item.is-unread::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--accent);
}

.bell__item img { width: 40px; height: 56px; flex: none; object-fit: cover; border-radius: 6px; }
.bell__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bell__text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell__text span { color: var(--ink-muted); font-size: var(--text-sm); }
.bell__text small { color: var(--ink-muted); font-size: 0.72rem; }
.bell__item:not(.is-unread) .bell__text { opacity: 0.7; }

/* Phones: the panel spans the screen under the top bar (hung on the bell it would stick out on the left), and long
   titles get two lines instead of being cut. The top bar's backdrop-filter makes it the box "fixed" refers to. */
@media (max-width: 640px) {
    .bell__panel { position: fixed; top: calc(100% + 6px); left: 12px; right: 12px; width: auto; max-height: 75vh; }
    .bell__text strong {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

.toasts {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    width: min(360px, calc(100vw - 40px));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 10px;
    border: 1px solid var(--accent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 12px 40px rgb(0 0 0 / 28%);
    pointer-events: auto;
    animation: shani-rise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.toast img { width: 40px; height: 56px; flex: none; object-fit: cover; border-radius: 6px; }
.toast__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast__text span { color: var(--ink-muted); font-size: var(--text-sm); }

.toast__close {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-muted);
    cursor: pointer;
}

.toast__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) {
    .bell__panel, .toast { animation: none; }
}