#office-notification-bell{position:relative;margin:0;width:44px;height:44px;min-height:44px;padding:10px;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.office-bell-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 15%}
/* The bell is an inline SVG; the other social icons use a masked ::after layer. */
html[data-theme] #office-notification-bell::after,#office-notification-bell::after{content:none;display:none}
#office-notification-bell{--icon-accent:#f51fa6}
.office-bell-icon{filter:var(--utility-icon-shadow);transition:stroke .18s ease}
html[data-theme=night] #office-notification-bell{--icon-accent:#f51fa6}
html[data-theme=night] #office-notification-bell.has-unread{color:var(--icon-accent)}
@media(hover:hover) and (pointer:fine){html[data-theme] #office-notification-bell:hover .office-bell-icon{stroke:var(--icon-accent)}}
.office-bell-dot{display:none;position:absolute;right:9px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--icon-accent);box-shadow:0 0 8px color-mix(in srgb,var(--icon-accent) 50%,transparent)}
#office-notification-bell.has-unread{color:var(--icon-accent)}.has-unread .office-bell-dot{display:block}
.is-arriving .office-bell-icon{animation:office-bell-ring 1s ease-in-out 3}
.is-reminding .office-bell-icon{animation:office-bell-ring 1s ease-in-out 1}
@keyframes office-bell-ring{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-10deg) scale(.95)}40%{transform:rotate(9deg) scale(1.04)}60%{transform:rotate(-7deg) scale(.97)}80%{transform:rotate(4deg) scale(1.02)}}
.office-bell-progress{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;pointer-events:none}.office-bell-progress circle{fill:none;stroke:var(--icon-accent);stroke-width:2;stroke-dasharray:132;stroke-dashoffset:132}.is-holding .office-bell-progress{opacity:1}.is-holding .office-bell-progress circle{animation:office-bell-hold 5s linear forwards}@keyframes office-bell-hold{to{stroke-dashoffset:0}}

/* Independent web adaptation of GNOME Adwaita's documented UI colors and structure.
   References: https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/css-variables.html
   Native GTK/libadwaita code and assets are not bundled. */
:is(#office-notifications,.office-mail-ghost){
 --mail-window:#fafafb;--mail-view:#fff;--mail-header:#fff;--mail-sidebar:#f1f1f3;
 --mail-text:#303035;--mail-muted:#66666c;--mail-line:#0000001f;--mail-hover:#0000000b;
 --mail-accent:#3584e4;--mail-selection:#3584e422;--mail-selected-text:#0461be;
 padding:0;width:min(900px,calc(100vw - 32px));margin:auto;max-height:calc(100dvh - 48px);
 border:1px solid var(--mail-line);border-radius:14px;background:var(--mail-window);color:var(--mail-text);
 box-shadow:0 16px 48px #0004,0 1px 4px #0003;overflow:auto;font:14px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-theme=night] :is(#office-notifications,.office-mail-ghost){
 --mail-window:#222226;--mail-view:#1d1d20;--mail-header:#2e2e32;--mail-sidebar:#28282c;
 --mail-text:#fafafa;--mail-muted:#b8b8bc;--mail-line:#ffffff1f;--mail-hover:#ffffff0d;
 --mail-selection:#3584e43b;--mail-selected-text:#81d0ff;
}
/* Keep Adwaita's structure while sharing the visitor's live theme palette. */
html:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight],[data-mail-custom-text]) :is(#office-notifications,.office-mail-ghost){
 --mail-window:var(--custom-modal-color);--mail-view:var(--custom-modal-fill);
 --mail-header:var(--custom-control-background);
 --mail-sidebar:color-mix(in srgb,var(--custom-modal-color) 94%,var(--custom-modal-ink));
 --mail-text:var(--custom-modal-ink);--mail-muted:var(--custom-modal-muted);
 --mail-line:color-mix(in srgb,var(--custom-modal-line) 45%,transparent);
 --mail-hover:color-mix(in srgb,var(--custom-modal-ink) 9%,transparent);
 --mail-accent:var(--theme-top-icon-highlight,#3584e4);
 --mail-selection:color-mix(in srgb,var(--mail-accent) 18%,var(--mail-view));
 --mail-selected-text:var(--mail-text);
}
#office-notifications::backdrop{background:#0005}
:is(#office-notifications,.office-mail-ghost) .office-mail-titlebar{
 position:sticky;top:0;z-index:1;height:54px;display:flex;align-items:center;justify-content:center;
 padding:0 56px;background:var(--mail-header);color:var(--mail-text);border-bottom:1px solid var(--mail-line);font-weight:700;
}
.office-mail-window-controls{position:absolute;right:12px;top:12px;display:flex}
:is(#office-notifications,.office-mail-ghost) header .office-mail-close{
 display:grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:7px;
 border:0;border-radius:50%;background:var(--mail-hover);color:var(--mail-text);box-shadow:none;
}
:is(#office-notifications,.office-mail-ghost) header .office-mail-close:hover{background:var(--mail-line)}
.office-mail-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
:is(#office-notifications,.office-mail-ghost) button:focus-visible{outline:2px solid var(--mail-accent);outline-offset:-3px}
.office-mail-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--mail-window);border-bottom:1px solid var(--mail-line);font-weight:600}
.office-mail-toolbar small{font-size:12px;font-weight:400;color:var(--mail-muted)}
.office-mail-layout{display:grid;grid-template-columns:180px 1fr;min-height:340px}
.office-mail-layout aside{padding:22px 12px;background:var(--mail-sidebar);border-right:1px solid var(--mail-line);font-size:12px;color:var(--mail-muted)}
.office-mail-layout aside strong{padding:0 10px;font-weight:600}
.office-mail-folder{display:block;margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--mail-selection);color:var(--mail-selected-text);font-size:14px;font-weight:600}
.office-inbox-body{padding:0;min-width:0;background:var(--mail-view)}
.office-inbox-empty{text-align:center;margin:130px 16px;color:var(--mail-muted)}
.office-inbox-message{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:16px 24px;border:0;border-bottom:1px solid var(--mail-line);border-radius:0;background:var(--mail-selection);color:var(--mail-text);text-align:left;box-shadow:none;font:inherit}
.office-inbox-message:hover{background:color-mix(in srgb,var(--mail-accent) 20%,var(--mail-view))}
.office-inbox-message strong{font-weight:700}.office-inbox-message small{font-size:12px;color:var(--mail-muted)}
.office-mail-letter[hidden]{display:none}
.office-mail-envelope{padding:20px 28px;border-bottom:1px solid var(--mail-line)}
.office-mail-envelope h2{font:700 19px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;margin:0 0 12px}
.office-mail-envelope p{font-size:12px;color:var(--mail-muted);margin:0}
.office-mail-text{padding:8px 28px 20px;font:14px/1.65 system-ui,-apple-system,'Segoe UI',sans-serif}
.office-mail-text kbd{border:1px solid var(--mail-line);border-radius:4px;padding:1px 5px;background:var(--mail-window);font-size:12px;color:var(--mail-text)}
.office-inbox-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body[data-research-lab=active] #office-notification-bell{display:none}
@media(max-width:600px){.office-mail-layout{grid-template-columns:1fr}.office-mail-layout aside{display:none}.office-mail-envelope{padding:18px 20px}.office-mail-text{padding:4px 20px 16px}}
@media(prefers-reduced-motion:reduce){.is-arriving .office-bell-icon,.is-reminding .office-bell-icon{animation:none}}
.office-mail-genie{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:visible;pointer-events:none}.office-mail-genie::backdrop{background:transparent}.office-mail-genie-slice{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;will-change:transform;pointer-events:none}.office-mail-ghost{pointer-events:none}



.office-mail-back{border:1px solid var(--mail-line);border-radius:7px;background:var(--mail-view);color:var(--mail-text);padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}.office-mail-back[hidden]{display:none}.office-mail-folder{width:100%;border:0;text-align:left;cursor:pointer;font-family:inherit}.office-mail-back:focus-visible,.office-mail-folder:focus-visible,.office-inbox-message:focus-visible{outline:2px solid var(--mail-accent);outline-offset:-3px}.office-inbox-message{background:var(--mail-view)}.office-inbox-message.is-unread{background:var(--mail-selection)}

/* Mail controls keep their own theme ink, including on hover. */
:is(#office-notifications,.office-mail-ghost) button{font-family:inherit;cursor:pointer}
:is(#office-notifications,.office-mail-ghost) .office-inbox-message,:is(#office-notifications,.office-mail-ghost) .office-inbox-message:is(:hover,:focus-visible){color:var(--mail-text)}
:is(#office-notifications,.office-mail-ghost) .office-inbox-message .office-mail-subject{color:var(--mail-text)}
.office-inbox-row{display:flex;align-items:stretch;border-bottom:1px solid var(--mail-line)}.office-inbox-row .office-inbox-message{flex:1;min-width:0;border-bottom:0;flex-direction:row;gap:14px;padding:16px 18px}.office-mail-summary{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}.office-mail-state{flex:none;margin-top:3px}.office-mail-state-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.office-inbox-message:not(.is-unread) strong{font-weight:500}.office-mail-subject{font-weight:inherit}.office-inbox-message.is-unread .office-mail-subject{font-weight:600}
:is(#office-notifications,.office-mail-ghost) .office-mail-row-archive{width:44px;flex:none;border:0;background:var(--mail-view);color:var(--mail-text);font-size:20px}.office-mail-row-archive:hover{background:var(--mail-selection)}
.office-mail-actions{display:flex;gap:8px;flex-wrap:wrap}.office-mail-actions button,.office-mail-search input,.office-mail-search select{border:1px solid var(--mail-line);border-radius:7px;background:var(--mail-view);color:var(--mail-text);padding:7px 10px;font:inherit;font-size:12px}.office-mail-actions button:hover,.office-mail-back:hover{background:var(--mail-selection);color:var(--mail-text)}.office-mail-toolbar{gap:10px;flex-wrap:wrap}.office-mail-search{display:flex;gap:10px;padding:10px 20px;border-bottom:1px solid var(--mail-line);background:var(--mail-window)}.office-mail-search input{min-width:0;flex:1}.office-mail-search input::placeholder{color:var(--mail-muted)}.office-mail-search select{max-width:145px}.office-mail-actions[hidden],.office-mail-search[hidden]{display:none}
:is(#office-notifications,.office-mail-ghost) .office-mail-folder{background:transparent;color:var(--mail-text)}:is(#office-notifications,.office-mail-ghost) .office-mail-folder[aria-current="page"],:is(#office-notifications,.office-mail-ghost) .office-mail-folder:hover{background:var(--mail-selection);color:var(--mail-text)}.office-mail-folder small{float:right;color:var(--mail-muted);font-size:12px}
@media(max-width:600px){.office-mail-layout aside{display:flex;gap:8px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--mail-line)}.office-mail-layout aside>strong{display:none}.office-mail-folder{margin:0}.office-mail-toolbar{padding:10px 14px}.office-mail-search{padding:10px 12px}}

.office-mail-kind{display:inline-block;margin-top:10px;padding:3px 8px;border:1px solid var(--mail-line);border-radius:20px;font-size:11px;color:var(--mail-text);background:var(--mail-selection)}

@media(max-width:600px){.office-mail-layout{grid-template-rows:auto 1fr}.office-mail-layout aside{align-items:center}.office-mail-layout aside .office-mail-folder{height:auto;min-height:40px}}

/* One shared glass surface; nested panes must not paint it opaque again. */
html :is(#office-notifications,.office-mail-ghost){--mail-glass-highlight:color-mix(in srgb,var(--mail-accent) 18%,transparent)}
html .office-mail-ghost{background:var(--modal-glass-glare),var(--modal-glass-surface);border-color:var(--modal-glass-rim)}
html :is(#office-notifications,.office-mail-ghost) :is(.office-mail-titlebar,.office-mail-toolbar,.office-mail-search,.office-inbox-body,.office-inbox-message,.office-mail-row-archive){background:transparent}
html :is(#office-notifications,.office-mail-ghost) .office-mail-layout aside{background:color-mix(in srgb,var(--mail-sidebar) var(--drawer-layer-opacity,33.333333%),transparent)}
html :is(#office-notifications,.office-mail-ghost) :is(.office-inbox-message.is-unread,.office-inbox-message:hover,.office-mail-folder[aria-current="page"],.office-mail-folder:hover,.office-mail-row-archive:hover,.office-mail-kind){background:var(--mail-glass-highlight);color:var(--mail-text)}
html :is(#office-notifications,.office-mail-ghost) :is(.office-mail-back,.office-mail-actions button,.office-mail-search input,.office-mail-search select,.office-mail-text kbd){background:color-mix(in srgb,var(--mail-view) var(--drawer-layer-opacity,33.333333%),transparent);color:var(--mail-text)}
html :is(#office-notifications,.office-mail-ghost) :is(.office-mail-back:hover,.office-mail-actions button:hover){background:var(--mail-glass-highlight)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html .office-mail-ghost{background:var(--modal-glass-fallback)}}
@media(prefers-reduced-transparency:reduce){html .office-mail-ghost{background:var(--modal-glass-fallback)}html :is(#office-notifications,.office-mail-ghost) .office-mail-layout aside{background:var(--mail-sidebar)}}

/* Reading pane uses the same fill as the Settings section buttons. */
html :is(#office-notifications,.office-mail-ghost){--mail-message-fill:var(--settings-fill,#ffffff88)}
html[data-custom-modal] :is(#office-notifications,.office-mail-ghost){--mail-message-fill:var(--custom-modal-fill)}
html :is(#office-notifications,.office-mail-ghost) .office-inbox-body{background:var(--mail-message-fill)}

@media(prefers-reduced-transparency:reduce){html:not([data-custom-modal]) :is(#office-notifications,.office-mail-ghost) .office-inbox-body{background:var(--settings-bg)}}

/* Pink is Default’s specialty accent; other palettes use their shared highlight. */
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]):not([data-theme-icons="off"]) #office-notification-bell{--icon-accent:var(--theme-top-icon-highlight,#f51fa6)!important}

/* Only themed resting bells use the accent; Default matches the neutral utility glyphs. */
html[data-theme]:is([data-custom-background],[data-custom-modal],[data-custom-modal-highlight]):not([data-theme-icons="off"]) #office-notification-bell{color:var(--icon-accent)}
html[data-theme]:not([data-custom-background]):not([data-custom-modal]):not([data-custom-modal-highlight]) #office-notification-bell:not(.has-unread){color:var(--custom-control-ink,#191b1c)}
html[data-theme] #office-notification-bell:is(:focus-visible,.is-icon-tapped,.is-holding) .office-bell-icon{stroke:var(--icon-accent)}
html[data-theme][data-theme-icons="off"] #office-notification-bell{--icon-accent:#f51fa6!important}
html[data-theme][data-theme-icons="off"] #office-notification-bell:not(.has-unread){color:var(--default-icon-ink)}