/* notif-panel.css 20261104h: approved "grouped-original" notifications panel (Today/Earlier).
   Separate file, loaded after style.css; touches only #social-activity / #social-activity2.
   Tip: smaller caret (~14px) centered on the bell via --mt-notif-cx. */
#social-activity-stream .activity-group{padding:5px 10px 4px;font-size:9pt;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;line-height:normal;color:#44535a;background:#E9F7FF;border-top:1px solid #DDE1E4;cursor:default}
#social-activity-stream .activity-group:first-child{border-top:0}
#social-activity-stream .activity-group+.activity{border-top:1px solid #DDE1E4}
#social-activity-stream .activity .activity-remove{right:9px!important;top:5px!important}
#social-activity .activity > div,#social-activity2 .activity > div{padding-right:26px!important}

@media screen and (min-width:768px){
 /* 20261104g: CSS triangle tip above panel top (flush outside edge, no white outline); width 360px unchanged */
 html body #social-activity,html body #social-activity2{width:360px!important;max-width:min(360px,calc(100vw - 20px))!important;border-radius:0 0 15px 15px}
 #social-activity .social-activity-header,#social-activity2 .social-activity-header{padding:3px 10px 4px 10px;font-size:16px}
 #social-activity .social-activity-title,#social-activity2 .social-activity-title,#social-activity .mark-as-read,#social-activity2 .mark-as-read{font-size:16px}
 #social-activity #social-activity-stream,#social-activity2 #social-activity-stream{max-height:440px}
 #social-activity-stream .activity{font-size:11pt}
 #social-activity .activity > div,#social-activity2 .activity > div{padding:19px 26px 19px 46px!important;line-height:18px}
 #social-activity .activity-text > .user-image-notification,#social-activity2 .activity-text > .user-image-notification{left:7px;top:11px;width:34px;height:34px}
 #social-activity .activity-data-text,#social-activity2 .activity-data-text,#social-activity .activity-text a,#social-activity2 .activity-text a{font-size:11pt}
 #social-activity .activity-data-text,#social-activity2 .activity-data-text{max-width:none}
 #social-activity-stream .activity-time,#social-activity .activity-text > .activity-time,#social-activity2 .activity-text > .activity-time{font-size:11pt}
 #social-activity .activity-remove,#social-activity2 .activity-remove{font-size:12pt}
 #social-activity::after,#social-activity2::after{content:"";position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #398fc6;background:none;transform:none;box-shadow:none;border-radius:0;top:-7px;left:var(--mt-notif-cx,20px);margin-left:-7px;pointer-events:none;z-index:5}
}

@media screen and (max-width:767px){
 /* 20261104f: fixed under bell; gutters; list scrolls; tip seamless; tighter rows; page scroll lock */
 html.mt-notif-open,html.mt-notif-open body{overflow:hidden!important}
 html body #social-activity,html body #social-activity2,header div#personal-block #social-activity{position:fixed!important;left:8px!important;right:8px!important;top:var(--mt-notif-top,64px)!important;width:auto!important;max-width:calc(100vw - 16px)!important;box-sizing:border-box!important;z-index:4200!important}
 #social-activity .social-activity-header,#social-activity2 .social-activity-header{padding:10px 14px!important;font-size:17px;min-height:0}
 #social-activity .social-activity-title,#social-activity2 .social-activity-title{font-size:17px}
 #social-activity .mark-as-read,#social-activity2 .mark-as-read{font-size:15px;padding:6px 0}
 #social-activity #social-activity-stream,#social-activity2 #social-activity-stream{max-height:calc(100vh - var(--mt-notif-top,64px) - 16px);max-height:calc(100dvh - var(--mt-notif-top,64px) - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
 #social-activity-stream .activity-group{padding:8px 14px;font-size:12px}
 #social-activity .activity > div,#social-activity2 .activity > div{padding:6px 48px 6px 64px!important;line-height:21px;min-height:48px}
 #social-activity .activity-text > .user-image-notification,#social-activity2 .activity-text > .user-image-notification,#social-activity .user-image-notification,#social-activity2 .user-image-notification{left:12px;top:14px;width:42px;height:42px;background-size:cover}
 #social-activity .activity-text a,#social-activity2 .activity-text a,#social-activity .activity-data-text,#social-activity2 .activity-data-text{font-size:16px}
 #social-activity .activity-data-text,#social-activity2 .activity-data-text{max-width:none}
 #social-activity-stream .activity .activity-time{font-size:14px;display:block;margin-top:4px}
 #social-activity-stream .activity .activity-remove{right:2px!important;top:4px!important;width:44px;height:44px;line-height:44px;text-align:center;font-size:20px}
 /* tip: small CSS triangle (same as desktop), flush to header blue, points at bell */
 #social-activity::after,#social-activity2::after{content:"";position:absolute;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #398fc6;background:none;transform:none;box-shadow:none;border-radius:0;top:-7px;left:var(--mt-notif-cx,50%);margin-left:-7px;pointer-events:none;z-index:5}
}

/* bubble tail host: overflow visible so tip can sit above top edge; --mt-notif-cx set by notif-panel.js */
html body #social-activity,html body #social-activity2{overflow:visible!important}
#social-activity #social-activity-stream,#social-activity2 #social-activity-stream{border-radius:0 0 14px 14px}