/* Shared account notification design. Scoped to Mail's page and Send's mounted center. */
.notification-reference{--nr-bg:#f6f7fd;--nr-card:#fff;--nr-ink:#090e25;--nr-soft:#4a5a7d;--nr-line:#e4e8f5;--nr-accent:#0042ff;color:var(--nr-ink);background:var(--nr-bg);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.notification-reference *{box-sizing:border-box}.notification-reference [hidden]{display:none!important}
.notification-reference :is(a,button){text-decoration:none!important;font:inherit;cursor:pointer}
.notification-reference :is(a,button):focus-visible{outline:3px solid #8aabff;outline-offset:3px}
.notification-reference button:disabled{cursor:default;opacity:.5}
body.notification-reference{padding:16px 18px 28px;min-height:100dvh}
#senditto-platform-root .notification-reference.snc-page{padding:18px 24px 30px;max-width:1280px;margin:auto;color:var(--nr-ink);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.notification-reference .reference-header{height:auto;min-height:56px;border:0;padding:0;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;align-items:center;gap:8px;background:transparent;max-width:1240px;margin:0 auto}
.notification-reference .reference-header h1{font-size:19px;line-height:1.3;text-align:center;margin:0;font-weight:700}
.notification-reference .reference-header #back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d7dbe5;border-radius:50%;background:var(--nr-card);font-size:38px;line-height:1;color:var(--nr-ink);padding:0 0 5px;justify-self:start}
.notification-reference .reference-header .reference-help{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;border:1px solid #d7dbe5;border-radius:28px;background:var(--nr-card);color:var(--nr-accent);font-size:16px;font-weight:600;justify-self:end}
.notification-reference .reference-subtitle{margin:2px auto 18px;text-align:center;color:var(--nr-soft);font-size:13px;line-height:1.45;max-width:900px}
.notification-reference main,.notification-reference .snc-layout{display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1fr);gap:24px;align-items:start;border:0;max-width:1240px;height:auto;margin:0 auto}
.notification-reference aside,.notification-reference .snc-sidebar{display:flex;flex-direction:column;min-width:0;min-height:calc(100dvh - 150px);background:transparent;border:0;border-radius:0}
.notification-reference .reference-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;border:1px solid var(--nr-line);border-radius:17px;background:var(--nr-card);margin-bottom:12px;gap:2px}
.notification-reference .reference-tabs button{min-height:36px;border:0;border-radius:12px;padding:6px 3px;font-size:15px;line-height:1.3;background:transparent;color:var(--nr-ink);overflow-wrap:anywhere}
.notification-reference .reference-tabs [aria-selected=true]{background:var(--nr-accent);color:white}
.notification-reference .reference-read{display:flex;justify-content:flex-end;min-height:44px;align-items:center}
.notification-reference .reference-read button{min-height:44px;border:0;padding:8px 0;background:none;color:var(--nr-accent);font-size:13px}
.notification-reference #notification-panel[data-filter=activity]{padding-top:16px}
.notification-reference .reference-support-note{display:flex;align-items:center;gap:14px;padding:10px 12px;margin-bottom:16px;border:1px solid var(--nr-line);border-radius:17px;background:var(--nr-card)}
.notification-reference .reference-support-note svg{width:40px;height:40px;display:block}.notification-reference .reference-support-note p{padding-left:17px;margin:0;border-left:1px solid #cbd4ed;font-size:13px;line-height:1.45}
.notification-reference #notifications-list{display:block;overflow:visible;max-height:none;padding:0;flex:none}
.notification-reference .notification-group h2{font-size:20px;font-weight:700;line-height:1.3;margin:18px 0 10px;color:var(--nr-ink)}
.notification-reference .notification-group:first-child h2{margin-top:0}
.notification-reference .notification-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;flex:none;padding:10px 14px;min-height:72px;margin:0 0 7px;border:1px solid var(--nr-line);border-radius:18px;background:var(--nr-card);color:var(--nr-ink);box-shadow:0 3px 12px #263c6a04;line-height:1.35}
.notification-reference .notification-row:hover{filter:none;border-color:#afc1ed}.notification-reference .notification-row[aria-current=true]{background:var(--nr-card);border-color:var(--nr-accent)}
.notification-reference .notification-row>svg:first-child{width:44px;height:44px;flex:none;align-self:center}
.notification-reference .notification-row .copy{min-width:0;flex:1;overflow-wrap:anywhere}
.notification-reference .notification-row strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.notification-reference .notification-row small{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--nr-ink)}
.notification-reference .notification-row time{display:block;margin-top:3px;color:var(--nr-soft);font-size:13px;line-height:1.35}
.notification-reference .notification-row .unread-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--nr-accent)}
.notification-reference .notification-row .arrow{width:14px;height:14px;flex:none;color:var(--nr-ink)}
.notification-reference .reference-requests{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;margin-top:12px;padding:8px 14px;border:1px solid var(--nr-line);border-radius:18px;background:var(--nr-card);color:var(--nr-ink);text-align:left}
.notification-reference .reference-requests svg{width:36px;height:36px;display:block}.notification-reference .reference-requests strong{flex:1;font-size:15px;font-weight:600}.notification-reference .reference-requests>span:last-child{font-size:26px}
.notification-reference .reference-retention{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:10px;margin-top:auto;padding:24px 14px 0;border:0;color:var(--nr-soft);font-size:12px}
.notification-reference .reference-retention>svg{flex:none;margin-top:2px}.notification-reference .reference-retention p{margin:0;text-align:center;line-height:1.45;white-space:normal}
.notification-reference #list-status,.notification-reference [data-mark-error]{margin:0 0 12px;padding:14px;border:1px solid var(--nr-line);border-radius:18px;background:var(--nr-card);color:var(--nr-soft);font-size:14px;line-height:1.5}
.notification-reference #list-status:empty{display:none}.notification-reference [data-mark-error]{color:#b52c40}
.notification-reference #refresh{display:block;margin:0 auto 12px;min-height:44px}
.notification-reference #detail{height:auto;padding:0;overflow:visible;min-width:0}.notification-reference .notification-detail{max-width:none;color:var(--nr-ink);background:var(--nr-card);border-color:var(--nr-line)}
.notification-reference .empty{max-width:none;margin:0;padding:24px;background:var(--nr-card);border:1px solid var(--nr-line);border-radius:18px}
html[data-theme=dark] .notification-reference,.theme-dark .notification-reference{--nr-bg:#101d3a;--nr-card:#0c1730;--nr-ink:#e6ecfb;--nr-soft:#9fb0d0;--nr-line:#263654;--nr-accent:#4d7fff;color-scheme:dark}
@media(prefers-reduced-motion:reduce){.notification-reference *{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){
 #senditto-platform-root .notification-reference.snc-page{padding:8px 18px 24px}
 .notification-reference main,.notification-reference .snc-layout{display:block;max-width:600px}
 .notification-reference aside,.notification-reference .snc-sidebar{height:auto;min-height:calc(100dvh - 150px)}
 .notification-reference #detail{display:none;height:auto}
 .notification-reference.has-selection aside,.notification-reference.has-selection .snc-sidebar{display:none}
 .notification-reference.has-selection #detail{display:block}
 .notification-reference.has-selection .reference-subtitle{display:none}
 .notification-reference.has-selection .reference-header{margin-bottom:16px}
}
@media(max-width:359px){body.notification-reference{padding-inline:12px}.notification-reference .notification-row{gap:9px;padding-inline:10px}.notification-reference .notification-row>svg:first-child{width:38px;height:38px}.notification-reference .reference-subtitle{font-size:12px}}
/* Notification actions use the mailbox's coral circular delete control. */
.notification-reference .notification-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px;margin-bottom:4px}
.notification-reference .notification-actions>button,.notification-reference [data-load-more]{border:0;background:none;color:var(--nr-accent);padding:8px 0;min-height:44px;font-size:13px}
.notification-reference .notification-actions .reference-read{margin-left:auto}
.notification-reference [data-selection-count]{color:var(--nr-soft);font-size:13px;margin-left:auto}
.notification-reference [data-delete-selected]{display:grid;place-items:center;min-width:44px}
.notification-reference [data-load-more]{display:block;margin:12px auto 0;font-size:15px}
.notification-reference .notification-swipe{position:relative;margin-bottom:7px;isolation:isolate}
.notification-reference .notification-swipe .notification-row{position:relative;z-index:1;margin:0;touch-action:pan-y;transition:transform .42s cubic-bezier(.22,1,.36,1);will-change:auto}
.notification-reference .notification-swipe.dragging .notification-row{transition:none;will-change:transform}
.notification-reference .notification-delete{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:#ff5c4d;color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none}
.notification-reference .notification-swipe:is(.swiped,.dragging) .notification-delete{opacity:1;visibility:visible;pointer-events:auto}
.notification-reference .notification-check{width:22px;height:22px;border:1.5px solid var(--nr-soft);border-radius:50%;display:grid;place-items:center;flex:none;color:white;font-size:14px}
.notification-reference .notification-check.checked{background:var(--nr-accent);border-color:var(--nr-accent)}
@media(prefers-reduced-motion:reduce){.notification-reference .notification-swipe .notification-row{transition:none}}
/* Notification-only layout: edge-aligned swipe artwork and a pinned selection bar. */
.notification-reference .reference-header{position:sticky;top:var(--notification-shell-offset,0px);z-index:10;background:var(--nr-bg);margin-bottom:12px}
.notification-reference .notification-heading-bar{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:6px;background:var(--nr-bg)}
.notification-reference .notification-heading-bar>h2{font-size:20px;line-height:25px;margin:0 auto 0 0;white-space:nowrap}
.notification-reference .notification-heading-bar .notification-actions{min-height:48px;margin:0;gap:12px;flex-wrap:nowrap}
.notification-reference.is-selecting .notification-heading-bar{position:sticky;top:var(--notification-header-bottom,56px);z-index:6;box-shadow:0 5px 8px #263c6a08}
.notification-reference.is-selecting .notification-actions{width:100%}
.notification-reference.is-selecting [data-selection-count]{margin:0 auto 0 0}
.notification-reference .notification-swipe{margin-inline:-18px;padding-inline:18px}
.notification-reference .notification-delete{right:67px}
.notification-reference .notification-swipe::before,.notification-reference .notification-swipe::after{content:"";position:absolute;top:50%;transform:translateY(-50%);background:#ff5c4d;opacity:0;visibility:hidden;pointer-events:none}
.notification-reference .notification-swipe::before{width:7px;height:7px;border-radius:50%;right:56px}
.notification-reference .notification-swipe::after{width:56px;height:132px;right:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 132'%3E%3Cpath fill='%23ff5c4d' d='M0 66C28 63.5 48 13.32 56 1.32C78 43.362 78 88.638 56 130.68C48 118.68 28 68.5 0 66Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;}
.notification-reference .notification-swipe:is(.swiped,.dragging)::before,.notification-reference .notification-swipe:is(.swiped,.dragging)::after{opacity:1;visibility:visible}
@media(max-width:700px){.notification-reference .notification-heading-bar .notification-actions{gap:10px}.notification-reference .notification-actions>button,.notification-reference .reference-read button{font-size:12px}}