/* Общий колокольчик обеих оболочек; список открывается только по запросу. */
.site-message-menu { position: relative; order: 5; flex: 0 0 auto; }
.site-message-toggle { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; list-style: none; transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease); }
.site-message-toggle::-webkit-details-marker { display: none; }
.site-message-toggle::marker { content: ""; }
.site-message-toggle:hover, .site-message-menu[open] .site-message-toggle { border-color: var(--accent); background: var(--surface-strong); }
.site-message-toggle:active { transform: scale(.96); }
.site-message-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.site-message-badge { position: absolute; top: -7px; right: -7px; display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border: 2px solid var(--page); border-radius: 999px; color: #fff; background: #D92D3A; box-shadow: 0 2px 8px rgba(133, 15, 25, .35); font-size: .67rem; font-weight: 800; line-height: 1; }
.site-message-panel { position: absolute; z-index: 12; top: calc(100% + 11px); right: 0; width: min(370px, calc(100vw - 24px)); max-height: min(72vh, 520px); overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 18px 54px rgba(9, 29, 20, .22); backdrop-filter: blur(22px); }
.site-message-panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: .7rem; }
.site-message-panel-heading h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.site-message-panel-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .83rem; }
.site-message-empty { margin: .7rem 0 1rem; padding: 1rem .3rem; color: var(--muted); text-align: center; }
.site-message-preview-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.site-message-preview { border-radius: 12px; }
.site-message-preview.is-unread { background: var(--surface-strong); }
.site-message-preview a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .62rem; border-radius: inherit; color: var(--text); }
.site-message-preview a:hover { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.site-message-type-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--accent-strong); background: var(--surface); font-size: .82rem; font-weight: 850; }
.site-message-type-icon.kind-warning { color: var(--warning); }
.site-message-type-icon.kind-important { color: var(--danger); }
.site-message-preview-copy { display: grid; min-width: 0; gap: .15rem; }
.site-message-preview-copy strong, .site-message-preview-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-message-preview-copy strong { font-size: .85rem; }
.site-message-preview.is-unread .site-message-preview-copy strong { font-weight: 800; }
.site-message-preview-copy > span { color: var(--muted); font-size: .76rem; }
.site-message-preview time { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.site-message-panel-actions { display: grid; gap: .25rem; margin-top: .65rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.site-message-all-link, .site-message-read-all { display: block; width: 100%; padding: .55rem .65rem; border: 0; border-radius: 10px; color: var(--accent-strong); background: transparent; font: inherit; font-size: .85rem; font-weight: 750; text-align: left; cursor: pointer; }
.site-message-all-link:hover, .site-message-read-all:hover { background: var(--surface-strong); }
.site-message-panel-actions form { margin: 0; }

/* Цвета новой оболочки берутся из её палитры. Красный счётчик сохраняет смысл уведомления. */
[data-shell="v3"] .site-message-menu { --accent: var(--green); --accent-strong: var(--green); --surface-strong: var(--soft); --page: var(--paper); --warning: var(--ink); order: 0; }
[data-shell="v3"] .site-message-toggle { width: 44px; height: 44px; border-radius: 50%; }
[data-shell="v3"] .site-message-panel { background: var(--surface); line-height: 1.5; }
[data-shell="v3"] .site-message-panel a { text-decoration: none; }
[data-shell="v3"] .site-message-panel-heading h2 { color: var(--ink); }
[data-shell="v3"] .site-message-preview.is-unread .site-message-preview-copy > span,
[data-shell="v3"] .site-message-preview.is-unread time { color: var(--text); }
[data-shell="v3"] .site-message-panel-actions button { min-height: 44px; }

@media (max-width: 640px) {
    .site-message-menu { position: static; }
    .site-message-panel { position: absolute; top: calc(100% + 8px); right: 12px; left: auto; width: min(370px, calc(100vw - 24px)); max-height: min(72vh, 520px); }
    [data-shell="v3"] .site-message-panel { position: fixed; top: 76px; right: 12px; }
    [data-shell="v3"] .header-actions { gap: 8px; }
    [data-shell="v3"] .site-message-preview a { grid-template-columns: 28px minmax(0, 1fr); }
    [data-shell="v3"] .site-message-preview time { grid-column: 2; }
}
@media (max-width: 359px) {
    [data-shell="v3"] .header-inner { gap: 8px; }
    [data-shell="v3"] .wordmark { gap: 5px; font-size: 22px; }
    [data-shell="v3"] .wordmark img { width: 24px; height: 28px; }
    [data-shell="v3"] .menu-toggle { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-message-toggle { transition: none; }
}