.rndoom-notification {
    box-sizing: border-box;
    background: #fff;
    color: #212529;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: .65rem .9rem;
    text-align: left;
    font-size: .9rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.rndoom-notification-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .3rem;
}

.rndoom-notification-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rndoom-notification-title:before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--rndoom-notification-color, #1BA1E2);
}

.rndoom-notification-date {
    font-size: .75rem;
    color: #888780;
}

.rndoom-notification a {
    color: #212529;
    text-decoration: underline;
}

/* login page: same card as the login form */
.task-login .rndoom-notification {
    width: 640px;
    max-width: 90%;
    margin: 0 auto 1rem;
    padding: 1rem 3rem;
    position: relative;
    top: 20vh; /* same offset as #login-form */
    box-shadow: 0 40px 80px -40px rgba(16,20,26,0.10);
}

/* keep the logo clear of the notice */
.task-login #layout-content:has(.rndoom-notification) #logo {
    top: 13vh;
}

/* above the message list: coloured rounded bar with a bell, full wrapped text */
#layout-list > .rndoom-notification {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    flex: 0 0 auto;
    margin: .5rem .5rem 0;
    padding: .55rem .85rem;
    border: 0;
    border-radius: 1rem;
    background: var(--rndoom-notification-color, #1BA1E2);
    color: #fff;
    font-size: .85rem;
    line-height: 1.35;
}

#layout-list > .rndoom-notification:before {
    content: "\f0f3";
    flex: none;
    margin-top: .1rem;
    font-family: 'Icons';
    font-weight: 900;
}

#layout-list > .rndoom-notification:has(+ #messagelist-content) {
    margin-bottom: .5rem;
}

#layout-list > .rndoom-notification .rndoom-notification-head {
    display: none;
}

#layout-list > .rndoom-notification .rndoom-notification-text {
    flex: 1;
    min-width: 0;
}

#layout-list > .rndoom-notification a {
    color: #fff;
}

/* Settings list icon (Font Awesome bell) */
.listing.iconized li.rndoom_notification > a:before {
    content: "\f0f3";
}

/* Settings: list of notices */
.rndoom-notification-list td.name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .5rem;
}

.rndoom-notification-list .rndoom-dot {
    flex: none;
    width: 1.1rem;
    text-align: center;
    font-family: 'Icons';
    font-style: normal;
    font-weight: 900;
    color: #2e9e4f;
}

.rndoom-notification-list .rndoom-dot:before {
    content: "\f00c";
}

.rndoom-notification-list .rndoom-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rndoom-notification-list .rndoom-meta {
    flex: 0 0 100%;
    padding-left: 1.6rem;
    font-size: .75rem;
    color: #888780;
}

.rndoom-notification-list tr.rndoom-off .rndoom-dot {
    color: #d93025;
}

.rndoom-notification-list tr.rndoom-off .rndoom-dot:before {
    content: "\f00d";
}

.rndoom-notification-list tr.rndoom-off .rndoom-name {
    color: #888780;
}

/* edit form */
.propform input[type=color]#rndoom_notification_color {
    width: 4rem;
    padding: .15rem;
    cursor: pointer;
}