/* Exact bell/list/center patterns: approved alerts-notifications.html §5, §10, §12. */
.work-notification-toggle {
    position: relative;
}

.work-notification-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 9px;
    background: var(--danger);
    color: var(--surface);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.work-notification-panel,
.work-notification-center {
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.work-notification-panel {
    width: 340px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 1px 3px rgb(31 23 38 / 12%);
}

.work-notification-center {
    width: min(100%, 460px);
}

.work-notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.work-notification-header form {
    margin: 0;
}

.work-notification-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand-purple);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 12px;
}

.work-notification-link:disabled {
    opacity: .5;
    cursor: default;
}

.work-notification-preview {
    max-height: 420px;
    overflow-y: auto;
}

.work-notification-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    text-align: start;
}

.work-notification-item:hover {
    background: var(--surface-muted);
}

.work-notification-item.is-unread {
    background: var(--notification-unread);
}

.work-notification-item.is-unread::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-lilac);
    margin-top: -3px;
}

.work-notification-chip {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--muted);
    display: grid;
    place-items: center;
    flex: none;
}

.work-notification-chip svg {
    width: 16px;
    height: 16px;
}

.work-notification-body {
    flex: 1;
    min-width: 0;
}

.work-notification-body b {
    display: block;
    font-size: 13px;
}

.work-notification-body p,
.work-notification-body time {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.work-notification-body time {
    display: block;
    direction: ltr;
    text-align: start;
}

.work-notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.work-notification-footer {
    padding: 8px 12px;
    text-align: center;
}

.work-notification-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.work-notification-tabs a {
    padding: 0 12px;
    min-height: 28px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}

.work-notification-tabs a[aria-current] {
    background: var(--brand-purple);
    color: var(--surface);
}

.work-notification-empty {
    text-align: center;
    padding: 24px 16px;
}

.work-notification-empty>svg {
    display: block;
    margin: 0 auto 8px;
    color: var(--muted);
}

.work-notification-empty b {
    display: block;
}

.work-notification-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

@media (max-width: 575.98px) {

    .work-notification-actions button,
    .work-notification-header button,
    .work-notification-footer a,
    .work-notification-tabs a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}