/**
 * Site Notification Center presentation contract.
 *
 * Notification content is not a compact navigation icon: it must not inherit
 * the navbar's single-line labels, fixed-width forms or mobile span hiding.
 * Keep these rules scoped to the panel so the primary navbar stays unchanged.
 * This stylesheet loads after the shared theme bridge; the opaque themed
 * surface preserves contrast even when a busy page scrolls behind the panel.
 */
.tme-notifications { position: relative; }
.tme-notifications > summary { position: relative; cursor: pointer; list-style: none; }
.tme-notifications > summary::-webkit-details-marker { display: none; }
.notification-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--tms-bg, #06110d);
    border-radius: 999px;
    background: #b4143f;
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
}

.tme-notifications .notification-panel {
    --notification-secondary: #c5d0ca;
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    width: min(28rem, calc(100vw - 1rem));
    max-height: min(36rem, var(--notification-available-height, 75dvh));
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--tms-border, rgba(214, 175, 88, .32)) !important;
    border-radius: 1rem;
    background: var(--tms-surface-strong, #0d2a20) !important;
    color: var(--tms-text, #eef3f0);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}

.tme-notifications .notification-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--tms-border);
}

.tme-notifications .notification-panel > header > strong {
    min-width: 0;
    color: var(--tms-text, #eef3f0);
    font-size: 1rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tme-notifications .notification-panel .notification-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .375rem;
}

.tme-notifications .notification-panel form {
    width: auto;
    min-width: 0;
    margin: 0;
}

.tme-notifications .notification-panel > p {
    margin: 1rem 0 .25rem;
    color: var(--notification-secondary);
    font-size: .9375rem;
    line-height: 1.6;
}

.tme-notifications .notification-list {
    display: grid;
    /* Preserve natural message heights; overflow belongs to this list, not
       to shrinking grid tracks that clip long notification text. */
    grid-auto-rows: max-content;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: .625rem;
    margin-top: .75rem;
    padding: 0 .125rem .125rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.tme-notifications .notification-list:focus-visible {
    outline: 2px solid var(--tms-accent);
    outline-offset: -2px;
}

.tme-notifications .notification-item {
    --notification-status: #88b9ff;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--notification-status) 35%, transparent);
    border-radius: .875rem;
    background: color-mix(in srgb, var(--notification-status) 5%, var(--tms-surface-strong));
}

.tme-notifications .notification-item.notification-success { --notification-status: #65dda5; }
.tme-notifications .notification-item.notification-warning { --notification-status: #f4d078; }
.tme-notifications .notification-item.notification-critical { --notification-status: #ff809b; }

/* Read status is conveyed by the border/accent, never by fading the text. */
.tme-notifications .notification-item.read {
    opacity: 1;
    border-color: var(--tms-border);
    background: var(--tms-input-bg);
}

.tme-notifications .notification-item.unread {
    box-shadow: inset 3px 0 var(--notification-status);
}

.tme-notifications .notification-open {
    display: flex;
    flex: 1 1 0;
}

.tme-notifications .notification-open > button {
    display: flex !important;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .625rem !important;
    padding: .875rem .75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tms-text, #eef3f0) !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: start !important;
    text-transform: none;
    white-space: normal;
}

.tme-notifications .notification-open > button:hover {
    background: var(--tms-accent-soft, rgba(214, 175, 88, .1)) !important;
}

.tme-notifications .notification-open > button > i {
    flex: 0 0 auto;
    width: 1.25rem;
    margin-top: .1875rem;
    color: var(--notification-status);
    font-size: 1.125rem;
    line-height: 1.2;
    text-align: center;
}

.tme-notifications .notification-open > button > span {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    gap: .375rem;
    white-space: normal;
}

.tme-notifications .notification-open strong,
.tme-notifications .notification-open small {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    text-overflow: clip;
    unicode-bidi: plaintext;
}

.tme-notifications .notification-open strong {
    color: var(--tms-text, #eef3f0);
    font-size: .9375rem;
    font-weight: 750;
    line-height: 1.5;
}

.tme-notifications .notification-open small {
    color: var(--notification-secondary);
    font-size: .875rem;
    font-weight: 450;
    line-height: 1.65;
}

.tme-notifications .notification-archive {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: .5rem .375rem 0 0;
}

.tme-notifications .notification-panel .notification-archive button,
.tme-notifications .notification-panel > header button {
    display: inline-grid !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: .625rem !important;
    background: transparent !important;
    color: var(--notification-secondary) !important;
    font-size: 1.125rem;
    line-height: 1;
}

.tme-notifications .notification-panel .notification-archive button:hover,
.tme-notifications .notification-panel > header button:hover {
    background: var(--tms-accent-soft) !important;
    color: var(--tms-gold-strong) !important;
}

.tme-notifications .notification-panel button:focus-visible {
    outline: 2px solid var(--tms-gold-strong, #f0c96f);
    outline-offset: -3px;
}

.tme-notifications .notification-panel .notification-history-toggle {
    width: auto; min-width: 0; min-height: 34px; align-self: flex-start;
    margin-top: .5rem; padding: .35rem .6rem; font-size: .8rem; white-space: normal;
    border-color: var(--tms-border); color: var(--notification-secondary);
}
.tme-notifications .notification-panel .notification-history-note {
    margin: .5rem 0 0; font-size: .875rem; line-height: 1.5;
}
.tme-notifications .notification-retained-summary { display: grid; gap: .4rem; min-width: 0; padding: .8rem; }
.tme-notifications .notification-retained-summary strong,
.tme-notifications .notification-retained-summary small,
.tme-notifications .notification-retained-summary a { display: block; white-space: normal; overflow-wrap: anywhere; }
.tme-notifications .notification-retained-summary small { color: var(--notification-secondary); font-size: .875rem; line-height: 1.65; }
.tme-notifications .notification-retained-summary a { color: var(--tms-gold-strong); }

html[dir="rtl"] .tme-notifications .notification-open > button {
    text-align: right !important;
}

/* The settings catalog uses the same readable text hierarchy as the panel. */
.site-notification-group > header {
    flex-wrap: wrap;
    row-gap: .35rem;
}

.site-notification-group > header span,
.site-notification-group article strong {
    color: var(--tms-text, #eef3f0);
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.site-notification-group > header small,
.site-notification-group article small,
.site-notification-note {
    color: #c5d0ca;
    font-size: .875rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.site-notification-group article > span { gap: .2rem; }

@media (max-width: 767.98px) {
    .tme-notifications .notification-panel {
        position: fixed;
        top: calc(var(--tms-topbar-height, 106px) - .35rem);
        right: .5rem;
        left: .5rem;
        width: auto;
        padding: .75rem;
    }

    .tme-notifications .notification-panel .notification-archive button,
    .tme-notifications .notification-panel > header button {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-height: 420px) {
    .tme-notifications .notification-panel {
        padding: .5rem .75rem;
    }
    .tme-notifications .notification-panel > header { padding-bottom: .375rem; }
    .tme-notifications .notification-list { margin-top: .375rem; }
}