/* Keep the entire notice clear of the safe area so all four corners remain visible. */
#seafix-demo #sf-push {
  position:fixed; inset:calc(var(--sf-viewport-top,0px) + env(safe-area-inset-top,0px) + 8px) auto auto 50%;
  transform:translateX(-50%); width:min(480px,calc(100vw - 24px)); max-width:480px; margin:0;
  max-height:calc(var(--sf-viewport-height,100dvh) - env(safe-area-inset-top,0px) - 20px); overflow:hidden;
  z-index:90; grid-template-columns:minmax(0,1fr) 36px; align-items:center;
  gap:4px; padding:10px 10px 10px 14px;
  border:1px solid light-dark(#cfd0d6,#42434a); border-radius:16px;
  background:light-dark(#e3e4e9,#303138); color:var(--sf-text);
  box-shadow:0 8px 24px rgb(0 0 0 / .13); backdrop-filter:none; -webkit-backdrop-filter:none;
  animation:sf-notice-enter .24s ease-out both;
}
#seafix-demo #sf-push > .sf-push-open { grid-template-columns:32px minmax(0,1fr); align-items:center; justify-items:stretch; gap:10px; min-height:40px; padding:0; border-radius:7px; }
#seafix-demo #sf-push .sf-push-icon { --icon-size:23px; width:32px; height:32px; border-radius:9px; background:light-dark(#d5d6dc,#41424a); color:var(--sf-heading); }
#seafix-demo #sf-push .sf-push-icon svg { width:23px; height:23px; stroke-width:1.7; }
#seafix-demo #sf-push-title { display:block; font-size:13px; line-height:1.3; font-weight:650; }
#seafix-demo #sf-push-message { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; font-size:12px; line-height:1.4; }
#seafix-demo #sf-push-recipient { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* B2: a failed open is shown, not only read out. */
#seafix-demo #sf-push.is-failed #sf-push-recipient { position:static; width:auto; height:auto; margin:3px 0 0; overflow:visible; clip-path:none; white-space:normal; color:var(--sf-danger); font-size:12px; line-height:1.4; font-style:normal; font-weight:500; }
#seafix-demo #sf-push > #sf-push-dismiss { width:36px; height:44px; border:0; border-radius:8px; background:transparent; color:var(--sf-muted); }
#seafix-demo #sf-push > button:focus-visible { outline:2px solid var(--sf-text); outline-offset:3px; }
@keyframes sf-notice-enter { from { opacity:0; transform:translate(-50%,-110%); } to { opacity:1; transform:translate(-50%,0); } }
#seafix-demo .sf-mini-chat.has-unread .sf-mini-header { background:light-dark(#e7e8ed,#34353d); box-shadow:inset 0 3px light-dark(#444750,#b8bac4); }
#seafix-demo .sf-mini-chat.has-unread .sf-mini-person strong { font-weight:700; }
#seafix-demo .sf-sound-preview { display:inline-flex; align-items:center; gap:7px; margin:10px 0; padding:8px 12px; border:1px solid var(--sf-line); border-radius:10px; background:transparent; color:var(--sf-text); font:inherit; font-size:12px; cursor:pointer; }
#seafix-demo .sf-sound-preview svg { width:17px; height:17px; }
#seafix-demo .sf-announcement-fields { border:0; padding:0; margin:20px 0; min-width:0; display:grid; gap:14px; }
#seafix-demo .sf-announcement-fields label { display:grid; gap:7px; color:var(--sf-text); font-size:13px; }
#seafix-demo .sf-announcement-fields :is(input,textarea) { width:100%; box-sizing:border-box; min-width:0; padding:11px 13px; border:1px solid var(--sf-line); border-radius:10px; background:light-dark(#f5f5f7,#2e3036); color:var(--sf-text); font:inherit; line-height:1.5; }
#seafix-demo .sf-announcement-fields textarea { min-height:110px; resize:vertical; }
#seafix-demo .sf-announcement-fields h3 { margin:12px 0 0; font-size:15px; }
#seafix-demo .sf-announcement-current { margin-top:20px; padding:16px; border:1px solid var(--sf-line); border-radius:12px; }
#seafix-demo .sf-announcement-current :is(h3,p) { margin:0 0 8px; font-size:13px; }
#seafix-demo .sf-announcement-current p { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--sf-muted); line-height:1.5; }
#seafix-demo .sf-announcement-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
#seafix-demo #sf-update-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-width:480px; max-height:calc(100dvh - 32px); margin:auto; padding:28px; border:1px solid var(--sf-line); border-radius:22px; color:var(--sf-text); background:light-dark(#f5f5f7,#25262c); box-shadow:0 24px 90px rgb(0 0 0 / .23); }
#seafix-demo #sf-update-dialog::backdrop { background:rgb(15 17 23 / .35); backdrop-filter:blur(4px); }
#seafix-demo .sf-update-symbol { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:var(--sf-heading); background:light-dark(#e0e1e6,#383a42); }
#seafix-demo .sf-update-symbol svg { width:24px; height:24px; stroke-width:1.7; }
#seafix-demo #sf-update-heading { margin:16px 0 10px; font-size:23px; line-height:1.25; }
#seafix-demo #sf-update-copy { margin:0; color:var(--sf-muted); line-height:1.6; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
#seafix-demo #sf-update-dialog .sf-announcement-actions { margin-top:22px; }
#seafix-demo #sf-update-dialog .sf-primary-action { min-height:44px; background:light-dark(#191a1e,#ececf0); color:light-dark(#fff,#18191d); border-color:transparent; }
#seafix-demo #sf-update-status { margin:14px 0 0; line-height:1.5; font-size:12px; }
@media (prefers-reduced-motion:reduce) { #seafix-demo #sf-push { animation:none; } }
@media print { #seafix-demo :is(#sf-push,#sf-update-dialog) { display:none!important; } }

/* Compact two-line notices share the assigned-work title position. */
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) > .sf-screen-title { display:block; margin:0 0 12px; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) > .sf-screen-title p { margin:4px 0 0; line-height:1.45; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox { padding:0; border:0; border-radius:0; background:transparent; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-heading { gap:8px; margin:0 0 8px; padding-bottom:0; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-heading h3 { font-size:13px; font-weight:500; color:var(--sf-muted); }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-list { display:grid; gap:0; margin:0; max-height:none; overflow:visible; border-top:1px solid var(--sf-line); }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-item { box-sizing:border-box; display:grid; grid-template-columns:36px minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:2px 10px; width:100%; padding:9px 16px; border:0; border-bottom:1px solid var(--sf-line); border-radius:0; background:transparent; color:var(--sf-text); box-shadow:none; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-item.is-unread { background:light-dark(#e8ecea,#2b3430); border-color:var(--sf-line); box-shadow:inset 3px 0 light-dark(#748e80,#91ad9d); }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-item > svg { box-sizing:border-box; grid-column:1; grid-row:1 / span 2; align-self:center; width:32px!important; height:36px!important; padding:0; border-radius:0; background:transparent; color:var(--sf-heading); stroke-width:1.6; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-copy { display:contents; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-copy strong { grid-column:2 / -1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:550; line-height:1.45; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .is-unread .sf-notification-inbox-copy strong { font-weight:650; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-copy > span { grid-column:2; grid-row:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.5; color:var(--sf-muted); }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-copy time { grid-column:3; grid-row:2; justify-self:end; padding:1px 5px; border:1px solid light-dark(#dc9a5e,#c99666); border-radius:6px; color:light-dark(#a25a1d,#edbc90); font-size:10px; line-height:1.6; white-space:nowrap; font-variant-numeric:tabular-nums; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-copy .sf-notification-unread-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); }
#seafix-demo #sf-notification-more { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin:20px auto 0; padding:10px 22px; }
#seafix-demo #sf-notification-more[hidden] { display:none; }
#seafix-demo #sf-notification-more svg { width:18px; height:18px; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-list > p { padding:24px 20px; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) #sf-notification-inbox-message { margin:16px 20px; }
#seafix-demo .sf-notification-inbox-item:focus-visible { outline:2px solid var(--sf-heading); outline-offset:-3px; }
@media(max-width:999px) {
  #seafix-demo .sf-main:has(> .sf-notification-page:not([hidden])) { padding-inline:0; }
  #seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) { width:100%; max-width:none; margin:0; padding:0 0 20px; }
  #seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) > .sf-screen-title,
  #seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-inbox-heading { padding-inline:var(--sf-page-gutter,16px); }
}


#seafix-demo .sf-notification-group { min-width:0; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-group-summary { list-style:none; cursor:pointer; font:inherit; }
#seafix-demo .sf-notification-group-summary::-webkit-details-marker { display:none; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-group-summary strong { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#seafix-demo .sf-notification-group-chevron { flex:none; font-size:18px; line-height:1; transition:rotate .2s; }
#seafix-demo .sf-notification-group[open] .sf-notification-group-chevron { rotate:180deg; }
#seafix-demo .sf-notification-group-list { border-left:2px solid var(--sf-line); margin-left:31px; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-group-list .sf-notification-inbox-item { grid-template-columns:18px minmax(0,1fr) auto; padding-left:12px; }
#seafix-demo :is(.sf-screen.sf-notification-page,.sf-notification-popover) .sf-notification-group-list .sf-notification-inbox-item > svg { width:18px!important; height:28px!important; }
#seafix-demo .sf-notification-group-summary:focus-visible { outline:2px solid var(--sf-heading); outline-offset:-3px; }
@media(prefers-reduced-motion:reduce){#seafix-demo .sf-notification-group-chevron{transition:none;}}

/* A shared non-modal inbox anchored to the notification bell. */
@media screen {
 #seafix-demo #sf-notification-popover { box-sizing:border-box; position:fixed; z-index:80; display:flex; flex-direction:column; padding:0; border:1px solid var(--sf-line); border-radius:16px; background:light-dark(#f5f5f7,#25262c); color:var(--sf-text); box-shadow:0 12px 36px rgb(0 0 0 / .12); overflow:hidden; outline:none; }
 #seafix-demo #sf-notification-popover[hidden] { display:none; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-heading { flex:none; flex-wrap:wrap; gap:4px 16px; padding:12px 16px; margin:0; border-bottom:1px solid var(--sf-line); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-heading h3 { margin:0; color:var(--sf-heading); font-size:14px; font-weight:600; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all { min-height:28px; padding:0; color:var(--sf-muted); font-size:11px; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all:disabled { opacity:.55; cursor:default; text-decoration:none; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all svg { width:14px!important; height:14px!important; stroke-width:1.4; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; border-top:0; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item { grid-template-columns:24px minmax(0,1fr) auto; padding:8px 14px; gap:2px 10px; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item>svg { width:22px!important; height:26px!important; stroke-width:1.3; color:var(--sf-muted); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-copy strong { font-size:13px; font-weight:500; }
 #seafix-demo #sf-notification-popover .is-unread .sf-notification-inbox-copy strong { font-weight:600; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item.is-unread { background:light-dark(#e9ebee,#2e3037); box-shadow:inset 2px 0 light-dark(#9aa1ad,#858e9d); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item:is(:hover,:focus-visible) { background:light-dark(#e1e4e9,#363941); }
 #seafix-demo #sf-notification-popover .sf-notification-group-summary strong { display:block; position:relative; padding-right:18px; }
 #seafix-demo #sf-notification-popover .sf-notification-group-chevron { position:absolute; right:0; top:0; }
 #seafix-demo #sf-notification-popover .sf-notification-group-list { margin-left:25px; }
 #seafix-demo #sf-notification-popover #sf-notification-more { flex:none; width:auto; align-self:center; min-height:36px; margin:8px auto; padding:6px 16px; font-size:12px; }
 #seafix-demo #sf-notification-popover #sf-notification-inbox-message { flex:none; margin:8px 16px; }
}
@media print { #seafix-demo #sf-notification-popover { display:none!important; } }

/* The approved inbox on every screen: two-line rows and clear unread marks. */
#seafix-demo .sf-notification-day { display:none; }
@media screen {
 #seafix-demo #sf-notification-popover { border-radius:22px; background:light-dark(#f4f4f6,#202126); color:light-dark(#111215,#f4f4f6); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; box-shadow:0 10px 30px light-dark(#12151b18,#00000045); }
 #seafix-demo #sf-notification-popover .sf-notification-panel-heading { position:relative; flex:none; padding:23px 28px 9px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-title { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-right:65px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-title h3 { margin:0; color:var(--sf-heading); font-size:25px; line-height:1.2; letter-spacing:-.7px; font-weight:600; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-count { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--sf-muted); }
 #seafix-demo #sf-notification-popover .sf-notification-panel-count strong { color:var(--sf-heading); font-size:15px; font-weight:600; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-subline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-heading p { flex:1; min-width:0; margin:0; font-size:13px; line-height:1.45; color:var(--sf-muted); }
 #seafix-demo #sf-notification-popover .sf-notification-panel-art { position:absolute; right:27px; top:18px; color:var(--sf-muted); opacity:.12; transform:rotate(-12deg); pointer-events:none; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-art svg { width:42px!important; height:42px!important; stroke-width:1.3; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox { flex:1 1 auto; margin:0; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-heading { display:none; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-heading h3 { display:none; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all { display:inline-flex; align-items:center; flex:none; max-width:55%; gap:7px; min-height:28px; padding:4px 0; font-size:12px; text-align:right; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all svg { width:17px!important; height:17px!important; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-list { padding:7px 12px 0; gap:3px; }
 #seafix-demo #sf-notification-popover .sf-notification-day { display:block; color:var(--sf-muted); font-size:12px; line-height:1.4; font-weight:500; margin:8px 15px 3px; padding-top:10px; border-top:1px solid var(--sf-line); }
 #seafix-demo #sf-notification-popover .sf-notification-day:first-child { margin:0 12px 4px; padding:0 3px 11px; border-top:0; border-bottom:1px solid light-dark(#dedfe5,#3b3e47); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item { position:relative; grid-template-columns:26px minmax(0,1fr) auto; gap:3px 14px; padding:12px 15px; border:0; border-radius:12px; color:inherit; font-family:inherit; text-align:left; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item > svg { justify-self:center; width:23px!important; height:23px!important; stroke-width:1.6; color:inherit; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item[data-kind="drill"] > svg { color:light-dark(#ad4545,#e99797); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-copy strong { grid-column:2; grid-row:1; font-size:14px; line-height:1.35; font-weight:500; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-copy > span:not(.sf-notification-unread-label) { grid-column:2; grid-row:2; font-size:12px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:light-dark(#5a5f6b,#afb3bf); }
 #seafix-demo #sf-notification-popover .sf-notification-trailing { grid-column:3; grid-row:1 / span 2; align-self:center; display:flex; align-items:center; gap:11px; color:light-dark(#5a5f6b,#afb3bf); font-size:11px; white-space:nowrap; }
 #seafix-demo #sf-notification-popover .sf-notification-trailing time { padding:0; border:0; background:transparent; font-size:inherit; line-height:normal; }
 #seafix-demo #sf-notification-popover .sf-notification-state { width:7px; height:7px; border-radius:50%; background:transparent; }
 #seafix-demo #sf-notification-popover .sf-notification-trailing svg { width:14px!important; height:14px!important; stroke-width:1.6; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item.is-unread { background:light-dark(#e2e4e9,#383c45); box-shadow:none; }
 #seafix-demo #sf-notification-popover .is-unread .sf-notification-inbox-copy strong { font-weight:600; }
 #seafix-demo #sf-notification-popover .is-unread .sf-notification-state { background:light-dark(#343942,#e4e7ec); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item:is(:hover,:focus-visible) { background:light-dark(#11121504,#ffffff05); }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item.is-unread:is(:hover,:focus-visible) { background:light-dark(#dfe1e6,#3b3f48); }
 #seafix-demo #sf-notification-popover .sf-notification-group-summary strong { padding-right:0; }
 #seafix-demo #sf-notification-popover .sf-notification-group-chevron { display:none; }
 #seafix-demo #sf-notification-popover .sf-notification-group[open] > .sf-notification-group-summary .sf-notification-trailing svg { transform:rotate(90deg); }
 #seafix-demo #sf-notification-popover .sf-notification-group-list { border-left:1px solid var(--sf-line); margin:5px 0 8px 27px; }
 #seafix-demo #sf-notification-popover .sf-notification-group-list .sf-notification-inbox-item { grid-template-columns:18px minmax(0,1fr) auto; padding:12px; }
 #seafix-demo #sf-notification-popover #sf-notification-more { min-height:28px; margin:4px auto 0; padding:4px 10px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--sf-muted); font-size:12px; }
 #seafix-demo #sf-notification-popover #sf-notification-more svg { display:none; }
 #seafix-demo #sf-notification-popover #sf-notification-more:is(:hover,:focus-visible) { color:var(--sf-heading); text-decoration:underline; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:8px 27px 12px; color:var(--sf-muted); font-size:11px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-footer > span:first-child { display:flex; align-items:center; gap:6px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-footer svg { width:13px!important; height:13px!important; }
}

#seafix-demo #sf-notification-popover .sf-notification-panel-close { display:none; }
@media(max-width:999px) {
 #seafix-demo #sf-notification-popover { border-radius:18px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-heading { padding:18px 18px 7px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-title { gap:8px; padding-right:32px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-title h3 { font-size:22px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-art { display:none; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-close { position:absolute; top:10px; right:8px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:10px; background:transparent; color:var(--sf-muted); cursor:pointer; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-close svg { width:18px!important; height:18px!important; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-subline { gap:8px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-heading p { font-size:12px; }
 #seafix-demo #sf-notification-popover #sf-notification-read-all { min-height:44px; gap:5px; font-size:11px; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-list { max-height:none; padding:4px 8px 0; margin:0; }
 #seafix-demo #sf-notification-popover .sf-notification-inbox-item { min-height:52px; padding:10px; gap:3px 9px; }
 #seafix-demo #sf-notification-popover .sf-notification-trailing { gap:7px; }
 #seafix-demo #sf-notification-popover .sf-notification-panel-footer { padding:10px 18px max(12px,env(safe-area-inset-bottom,0px)); }
}

/* Copy and metadata have separate grid cells, including grouped notifications. */
#seafix-demo :is(.sf-screen.sf-notification-page,#sf-notification-popover) .sf-notification-inbox-item{grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
#seafix-demo :is(.sf-screen.sf-notification-page,#sf-notification-popover) .sf-notification-inbox-copy{display:flex;flex-direction:column;gap:4px;grid-column:2;grid-row:1;min-width:0}
#seafix-demo :is(.sf-screen.sf-notification-page,#sf-notification-popover) .sf-notification-inbox-copy :is(strong,span:not(.sf-notification-unread-label)){display:block;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;line-height:1.45;min-width:0}
#seafix-demo :is(.sf-screen.sf-notification-page,#sf-notification-popover) .sf-notification-trailing{grid-column:2;grid-row:2;justify-self:end;min-width:0;line-height:1.4}
#seafix-demo :is(.sf-screen.sf-notification-page,#sf-notification-popover) .sf-notification-inbox-copy time{align-self:flex-end;max-width:100%;white-space:normal}
#seafix-demo #sf-notification-popover .sf-notification-group-list .sf-notification-inbox-item{grid-template-columns:18px minmax(0,1fr)}

/* Device notifications off: categories have no effect, so they are dimmed and locked (fire drills stay active). */
#seafix-demo .sf-notification-categories.is-muted label.sf-dnd-switch{opacity:.45}

/* Status line at the top of Notifications (same look as the device permission note). */
#seafix-demo .sf-settings-page .sf-notification-permission.sf-notification-status{margin:0 2px 17px}

/* Paczka 3 (B7, L1, L3, L5) — zaakceptowane po makiecie 25.10.2026. */
#seafix-demo #sf-push.is-drill .sf-push-icon { color:var(--sf-danger); }
#seafix-demo #sf-notification-popover .sf-notification-inbox-list { grid-auto-rows:max-content; }
#seafix-demo #sf-notification-popover .sf-notification-inbox-item { grid-template-rows:auto auto!important; }
#seafix-demo #sf-notification-popover .sf-notification-inbox-item>.sf-notification-inbox-copy>strong { white-space:normal!important; text-overflow:clip!important; line-height:1.3!important; overflow:hidden!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; }
#seafix-demo #sf-notification-popover .sf-notification-inbox-copy .sf-notification-urgent { display:inline-block!important; width:auto!important; margin-right:6px; padding:1px 7px; border-radius:999px; background:var(--sf-danger-soft); color:var(--sf-danger); font-size:11px; font-weight:600; line-height:16px; vertical-align:1px; }
#seafix-demo #sf-notification-popover .sf-notification-inbox-item:not(.sf-notification-group-summary) .sf-notification-trailing svg { display:none; }
#seafix-demo #sf-notification-popover .sf-notification-group-chevron { display:none; }
@media (max-width:999px) {
  #seafix-demo #sf-notification-popover .sf-notification-panel-subline p { display:none; }
  #seafix-demo #sf-notification-popover .sf-notification-panel-subline { justify-content:flex-start; }
  #seafix-demo #sf-notification-popover #sf-notification-read-all { max-width:none; white-space:nowrap; text-align:left; }
}