/* Top bar dropdowns: notifications, messages, friend requests
   (includes/navigations/load_*.php fill ul.sb-dd on click). One look for all
   three: a header with a count, a scrolling list of rows (picture, name, time,
   one line), unread rows tinted with a dot, and a footer link. Self-contained,
   so the older .dropdown-menu.extended rules in style.css / sb.css don't leak in. */
.dropdown-menu.extended.sb-dd {
    --dd-accent: var(--sb-accent, #0073b7);
    width: 380px !important; max-width: calc(100vw - 24px); padding: 0 !important; margin-top: 10px !important;
    border: 1px solid var(--sb-border, #e6e6e6) !important; border-radius: 16px !important; overflow: hidden;
    background: var(--sb-surface, #fff) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, .16) !important;
    list-style: none;
}
.sb-dd .notify-arrow { display: none !important; }
.sb-dd > li, .sb-dd .sb-dd-list > li { list-style: none; border: 0 !important; }

/* Header and footer */
.sb-dd .sb-dd-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px 10px !important;
}
.sb-dd .sb-dd-head b { font-size: 17px; font-weight: 700; color: var(--sb-text, #000); }
.sb-dd .sb-dd-count {
    font-size: 12px; font-weight: 600; color: var(--dd-accent); padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--dd-accent) 12%, transparent);
}
.sb-dd .sb-dd-foot { border-top: 1px solid var(--sb-border, #e6e6e6) !important; }
.sb-dd .sb-dd-foot a {
    display: block !important; padding: 11px 16px !important; text-align: center; font-size: 13.5px; font-weight: 600;
    color: var(--dd-accent) !important; background: none !important; border: 0 !important;
}
.sb-dd .sb-dd-foot a:hover { background: var(--sb-hover, #f2f3f5) !important; text-decoration: none; }

/* The list */
.sb-dd .sb-dd-list {
    max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain;
    padding: 0 6px 6px; margin: 0; display: flex; flex-direction: column; gap: 2px;
}
.sb-dd .sb-dd-section {
    padding: 12px 10px 4px !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sb-text-muted, rgba(0, 0, 0, .5));
}

/* A row (messages, friend requests) */
.sb-dd .sb-dd-row { position: relative; border-radius: 12px; }
.sb-dd .sb-dd-item {
    display: flex !important; align-items: center; gap: 12px; padding: 9px 10px !important; border-radius: 12px;
    color: var(--sb-text, #000) !important; text-decoration: none !important; cursor: pointer; background: none !important; border: 0 !important;
    white-space: normal !important; width: auto !important; float: none !important;
}
.sb-dd .sb-dd-row:hover .sb-dd-item, .sb-dd .sb-dd-item:focus-visible { background: var(--sb-hover, #f2f3f5) !important; outline: none; }
.sb-dd .sb-dd-av { flex: 0 0 48px; width: 48px !important; height: 48px !important; border-radius: 50% !important; object-fit: cover; display: block; }
.sb-dd .sb-dd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.sb-dd .sb-dd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.sb-dd .sb-dd-top b, .sb-dd .sb-dd-name {
    font-size: 14px; font-weight: 600; color: var(--sb-text, #000) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 !important; background: none !important; display: inline !important;
}
.sb-dd .sb-dd-top time { flex: 0 0 auto; font-size: 12px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }
.sb-dd .sb-dd-sub { font-size: 13px; color: var(--sb-text-muted, rgba(0, 0, 0, .55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-dd .is-unread .sb-dd-sub { color: var(--sb-text, #000); font-weight: 600; }
.sb-dd .sb-dd-badge {
    flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--dd-accent); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
}

/* Buttons (friend requests) */
.sb-dd .sb-dd-actions { display: flex; gap: 8px; margin-top: 6px; }
.sb-dd .sb-dd-btn {
    border: 0; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.2;
    background: var(--sb-surface-2, #f0f2f5); color: var(--sb-text, #000); transition: background .15s ease, filter .15s ease;
}
.sb-dd .sb-dd-actions .sb-dd-btn { flex: 1; }
.sb-dd .sb-dd-btn:hover { background: var(--sb-hover-strong, #e7e9ed); }
.sb-dd .sb-dd-btn.is-primary { background: var(--dd-accent); color: #fff; }
.sb-dd .sb-dd-btn.is-primary:hover { filter: brightness(1.08); background: var(--dd-accent); }
.sb-dd .sb-dd-btn.is-soft { flex: 0 0 auto; color: var(--dd-accent); background: color-mix(in srgb, var(--dd-accent) 12%, transparent); }
.sb-dd .sb-dd-btn.is-soft:hover { background: color-mix(in srgb, var(--dd-accent) 20%, transparent); }
.sb-dd .sb-dd-btn[disabled] { opacity: .6; cursor: default; }
.sb-dd .sb-dd-x {
    flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; cursor: pointer;
    color: var(--sb-text-muted, rgba(0, 0, 0, .5)); font-size: 15px; line-height: 28px; text-align: center; padding: 0;
}
.sb-dd .sb-dd-x:hover { background: var(--sb-hover-strong, #e7e9ed); color: var(--sb-text, #000); }
.sb-dd .sb-dd-btn:focus-visible, .sb-dd .sb-dd-x:focus-visible, .sb-dd .sb-dd-foot a:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; }

/* Notification rows: the stored HTML (a.notice-note > .photo, .subject > .from/.time, .message) */
.sb-dd .sb-notif-row { border-radius: 12px; position: relative; }
.sb-dd .sb-notif-row > a {
    display: grid !important; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px;
    align-items: center; padding: 9px 26px 9px 10px !important; border-radius: 12px; border: 0 !important;
    color: var(--sb-text, #000) !important; background: none !important; white-space: normal !important; text-decoration: none !important;
}
.sb-dd .sb-notif-row > a:hover { background: var(--sb-hover, #f2f3f5) !important; }
.sb-dd .sb-notif-row .photo { grid-row: 1 / span 2; float: none !important; margin: 0 !important; width: 48px !important; height: 48px; }
.sb-dd .sb-notif-row .photo img { width: 48px !important; height: 48px !important; border-radius: 50% !important; object-fit: cover; margin: 0 !important; }
.sb-dd .sb-notif-row .subject { display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 !important; min-width: 0; }
.sb-dd .sb-notif-row .from { font-size: 14px; font-weight: 600; color: var(--sb-text, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-dd .sb-notif-row .time { position: static !important; float: none !important; flex: 0 0 auto; font-size: 12px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }
.sb-dd .sb-notif-row .message {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; line-height: 1.35; color: var(--sb-text-soft, rgba(0, 0, 0, .75)); margin: 0 !important; white-space: normal !important;
}
.sb-dd .sb-notif-row.sb-notif-unread > a { background: color-mix(in srgb, var(--dd-accent) 8%, transparent) !important; }
.sb-dd .sb-notif-row.sb-notif-unread > a:hover { background: color-mix(in srgb, var(--dd-accent) 13%, transparent) !important; }
.sb-dd .sb-notif-row.sb-notif-unread::after,
.sb-dd .sb-dd-row.is-unread:not(.friend_request)::after {
    content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
    background: var(--dd-accent); pointer-events: none;
}
.sb-dd .sb-dd-row.is-unread .sb-dd-badge + * { display: none; }
.sb-dd .user_to_chat.is-unread::after { display: none; }

/* Empty */
.sb-dd .sb-dd-empty {
    display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 28px 24px 30px !important; text-align: center;
}
.sb-dd .sb-dd-empty.is-compact { padding: 14px 24px 16px !important; }
.sb-dd .sb-dd-empty i { font-size: 26px; color: var(--sb-text-muted, rgba(0, 0, 0, .45)); margin-bottom: 4px; }
.sb-dd .sb-dd-empty b { font-size: 14px; color: var(--sb-text, #000); }
.sb-dd .sb-dd-empty span { font-size: 13px; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }

/* Loading (the "Please wait…" row the nav scripts put in first) */
.sb-dd > li:only-child { padding: 18px !important; color: var(--sb-text-muted, rgba(0, 0, 0, .5)); }

/* Links inside a row (picture, name): not the old full-width menu links. */
.sb-dd .sb-dd-item > a, .sb-dd .sb-dd-name {
    flex: 0 0 auto; width: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: none !important; float: none !important; line-height: inherit !important;
}
.sb-dd .sb-dd-item > a { display: block !important; }
.sb-dd .sb-dd-name { display: block !important; max-width: 100%; }
.sb-dd .sb-dd-name:hover { text-decoration: underline; }
.sb-dd .sb-dd-list { overflow-x: hidden; }
.dropdown-menu.extended.sb-dd li .sb-dd-item > a,
.dropdown-menu.extended.sb-dd li a.sb-dd-name { padding: 0 !important; margin: 0 !important; text-indent: 0 !important; }
.sb-dd .sb-dd-list { scrollbar-width: thin; scrollbar-color: var(--sb-border-strong, #d8dce3) transparent; }
/* The old menu hover (a light grey flash with odd corners) stays out. */
.dropdown-menu.extended.sb-dd li a:hover { border-radius: 12px !important; color: inherit; }
.dropdown-menu.extended.sb-dd li .sb-dd-item > a:hover,
.dropdown-menu.extended.sb-dd li a.sb-dd-name:hover { background: none !important; }
.dropdown-menu.extended.sb-dd li.sb-notif-row > a:hover { background-color: var(--sb-hover, #f2f3f5) !important; }
.dropdown-menu.extended.sb-dd li.sb-notif-row.sb-notif-unread > a:hover { background-color: color-mix(in srgb, var(--dd-accent) 13%, transparent) !important; }
.dropdown-menu.extended.sb-dd li.sb-dd-foot a:hover { background-color: var(--sb-hover, #f2f3f5) !important; border-radius: 0 !important; }

/* Dark: the brand blue is too deep for text there; links take the theme's link blue. */
.dropdown-menu.extended.sb-dd { --dd-text-accent: var(--dd-accent); }
body.theme-dark .dropdown-menu.extended.sb-dd { --dd-text-accent: var(--sb-link, #4ea8ff); }
.sb-dd .sb-dd-count, .sb-dd .sb-dd-btn.is-soft { color: var(--dd-text-accent); }
body.theme-dark .dropdown-menu.extended.sb-dd li.sb-dd-foot a,
.dropdown-menu.extended.sb-dd li.sb-dd-foot a { color: var(--dd-text-accent) !important; }
body.theme-dark .dropdown-menu.extended.sb-dd li a.sb-dd-name,
body.theme-dark .dropdown-menu.extended.sb-dd li.sb-notif-row > a { color: var(--sb-text) !important; }
body.theme-dark .dropdown-menu.extended.sb-dd li .subject .time,
body.theme-dark .dropdown-menu.extended.sb-dd li .sb-dd-top time { color: var(--sb-text-muted) !important; }
body.theme-dark .dropdown-menu.extended.sb-dd li .message { color: var(--sb-text-soft, var(--sb-text)) !important; }
body.theme-dark .dropdown-menu.extended.sb-dd li.sb-notif-row.sb-notif-unread > a { background: color-mix(in srgb, var(--sb-link, #4ea8ff) 12%, transparent) !important; }