/* A quiet inbox, with one marker for unseen updates or a pending action. */
#requests-panel{display:none!important}
.notification-bell{position:relative;display:grid;place-items:center;flex-shrink:0;width:50px;height:50px;border:1px solid #91b5a733;border-radius:50%;background:#c9e8dd0a;color:#cce3db;box-shadow:inset 0 1px #ffffff18;cursor:pointer}
#notification-dot{position:absolute;right:10px;top:9px;width:8px;height:8px;border-radius:50%;background:#ff554f;box-shadow:0 0 0 3px #23372f}#notification-dot[hidden]{display:none}
body #notifications,body #request-detail{width:430px;max-width:calc(100% - 24px);padding:24px;border-radius:28px;max-height:85dvh;overscroll-behavior:contain}
body #notifications{margin:100px 24px auto auto}
.notification-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.notification-heading h2{font-size:24px;letter-spacing:-.7px}.notification-heading p{font-size:12px;color:#9eb7ad;line-height:1.5;margin:6px 0 0}.notification-heading .close{flex-shrink:0}
#notifications-read{border:0;background:none;padding:14px 0 10px;font-size:12px;color:#aed9c8;text-align:left;min-height:44px}
.notification-item{display:flex;width:100%;text-align:left;align-items:center;gap:13px;padding:18px 0;background:transparent;border:0;border-bottom:1px solid #9bb8ac20;border-radius:0}
.notification-item:last-child{border-bottom:0}.notification-symbol{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;background:#c4dfd30d;color:#b5d0c5;font-size:21px}.notification-symbol.is-complete{background:#82c4a716;color:#a1d8bc}
.notification-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}.notification-copy strong{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.notification-state{font-size:11px;color:#adcbbf}.notification-meta{font-size:12px;color:#8fa89d}.notification-unread{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#ff625c}
.notification-empty{text-align:center;padding:42px 14px}.notification-empty-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:50%;background:#a6d3bb12;color:#abd3bb;font-size:24px}.notification-empty h3{font-size:17px;font-weight:600;margin:0}.notification-empty p{font-size:13px;line-height:1.7;color:#9eb7ad;max-width:260px;margin:10px auto 0}
.request-status{display:inline-block;margin:14px 0 0;padding:7px 11px;border-radius:20px;background:#bed8cb0d;color:#b9d2c6;font-size:12px}.request-status.is-complete{color:#a9d7b8;background:#8ac19e14}.request-facts{margin:14px 0 24px}.request-team-title{font-size:13px;font-weight:600;margin:0 0 10px}.request-person{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13px}.request-person>span:last-child{margin-left:auto;font-size:11px;color:#9fb1a8}.request-person>span.confirmed{color:#a0d8b8}.request-avatar{width:32px;height:32px;display:grid;place-items:center;background:#cce4d70b;border-radius:50%}.request-person strong{font-weight:500}.request-confirm{margin-top:10px;min-height:48px}.request-feedback{font-size:13px;color:#a0d8b8}.request-feedback:empty{display:none}.notification-demo{font-size:10px;color:#93a99e;text-align:center;margin:18px 0 0}
html[data-theme="light"] .notification-bell{background:#ffffff80;color:#365d4d;border-color:#fff}html[data-theme="light"] #notification-dot{box-shadow:0 0 0 3px #eff5f1}
html[data-theme="light"] :is(.notification-heading p,.notification-meta,.notification-empty p,.notification-demo,.request-person>span:last-child){color:#5f7a6d}html[data-theme="light"] :is(#notifications-read,.notification-state,.request-status,.request-person>span.confirmed,.request-feedback){color:#35674e}html[data-theme="light"] :is(.notification-symbol,.notification-empty-icon){background:#40745c0d;color:#40745c}html[data-theme="light"] .request-status{background:#40745c0d}
@media(max-width:700px){.page-header .header-actions{flex-direction:row}.header-actions .notification-bell{order:2}.header-actions .appearance-toggle{order:3}.header-actions #add{order:1}body #notifications{margin:auto 0 0;width:100%;max-width:100%;border-radius:28px 28px 0 0;padding:24px 22px max(24px,env(safe-area-inset-bottom));max-height:85dvh}#notifications::before{content:'';display:block;width:34px;height:4px;border-radius:4px;background:#9db5a344;margin:-12px auto 22px}}
@media(prefers-reduced-motion:no-preference){.notification-bell,.notification-item{transition:background .2s,transform .2s}.notification-bell:hover{background:#91b5a712}.notification-bell:active{transform:scale(.94)}.notification-item:active{transform:scale(.985)}body #notifications[open],body #request-detail[open]{animation:notification-enter .36s cubic-bezier(.2,.8,.2,1)}@keyframes notification-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}}
@media(prefers-reduced-motion:reduce){body #notifications,body #request-detail{animation:none;transition:none}}

/* iOS-style tactile bell response, synchronized with the brand jump. */
.notification-bell{overflow:visible;isolation:isolate;transition:transform .34s cubic-bezier(.2,.8,.2,1),background .34s ease,border-color .34s ease,box-shadow .34s ease,color .34s ease}
.notification-bell::before{content:"";position:absolute;z-index:-1;inset:4px;border-radius:inherit;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.24),transparent 58%);opacity:0;transform:scale(.82);transition:opacity .34s ease,transform .48s cubic-bezier(.16,1,.3,1)}
.notification-bell:hover{background:rgba(145,181,167,.12);border-color:rgba(177,217,201,.3);color:#e0f0e9;box-shadow:inset 0 1px rgba(255,255,255,.16),0 10px 26px rgba(0,0,0,.13);transform:translateY(-2px) scale(1.025)}
.notification-bell:hover::before{opacity:1;transform:scale(1)}
html[data-theme="light"] .notification-bell:hover{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.96);color:#2f5b49;box-shadow:inset 0 1px #fff,0 10px 26px rgba(43,83,66,.12)}
@media(prefers-reduced-motion:no-preference){
  .notification-bell:hover svg,.notification-bell.is-brand-ringing svg{transform-origin:50% 13%;animation:notification-bell-ring .82s cubic-bezier(.22,.75,.18,1) both}
  .notification-bell.is-brand-ringing{animation:notification-bell-shell .82s cubic-bezier(.22,.75,.18,1) both}
  .notification-bell.is-brand-ringing #notification-dot{animation:notification-dot-pulse .82s cubic-bezier(.22,.75,.18,1) both}
  @keyframes notification-bell-ring{0%,100%{transform:rotate(0)}16%{transform:rotate(13deg)}32%{transform:rotate(-11deg)}48%{transform:rotate(8deg)}64%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
  @keyframes notification-bell-shell{0%,100%{transform:translateY(0) scale(1)}36%{transform:translateY(-1px) scale(1.025)}72%{transform:translateY(0) scale(.995)}}
  @keyframes notification-dot-pulse{0%,100%{transform:scale(1)}38%{transform:scale(1.3);box-shadow:0 0 0 5px rgba(255,85,79,.14)}70%{transform:scale(.94)}}
}

/* Read notification dismiss */
.notification-item{
  position:relative;
}

.notification-dismiss{
  position:absolute;
  top:9px;
  right:1px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#ff6b66;
  background:#ff625c0d;
  border:1px solid #ff625c18;
  font-size:18px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  opacity:.72;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
}

.notification-item:has(.notification-dismiss) .notification-copy{
  padding-right:30px;
}

.notification-dismiss:hover{
  opacity:1;
  background:#ff625c18;
  border-color:#ff625c30;
}

.notification-dismiss:focus-visible{
  outline:2px solid #ff777066;
  outline-offset:2px;
}

html[data-theme="light"] .notification-dismiss{
  color:#d94b47;
  background:#d94b4709;
  border-color:#d94b4718;
}

html[data-theme="light"] .notification-dismiss:hover{
  background:#d94b4715;
  border-color:#d94b472c;
}

@media(prefers-reduced-motion:no-preference){
  .notification-dismiss{
    transition:
      transform .28s cubic-bezier(.32,.72,0,1),
      opacity .22s ease,
      background .22s ease,
      border-color .22s ease;
  }

  .notification-dismiss:hover{
    transform:scale(1.06);
  }

  .notification-dismiss:active{
    transform:scale(.82);
    transition-duration:.12s;
  }
}

@media(prefers-reduced-motion:reduce){
  .notification-dismiss{
    transition:none;
  }
}

.notification-heading-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.notification-heading-actions #notifications-read{padding:0;max-width:90px;text-align:center;line-height:1.4}
#notifications-read:disabled{opacity:.45;cursor:default}
body #push-notification-detail{width:430px;max-width:calc(100% - 24px);padding:24px;border-radius:28px;max-height:85dvh}
#push-notification-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
#push-notification-open{display:inline-block;margin-top:12px;text-decoration:none}

/* Read-all stays visibly tactile even when the action immediately disables it. */
#notifications-read{padding:10px 12px;border:1px solid #91b5a733;border-radius:14px;background:#91b5a70d;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
#notifications-read:disabled{opacity:.5;cursor:default}
#notifications-read.is-read-complete{opacity:1;background:#82c4a724;border-color:#82c4a766;color:#a1d8bc}
#notifications-read:focus-visible{outline:2px solid #82c4a7;outline-offset:3px}
@media(hover:hover){#notifications-read:hover:not(:disabled){background:#91b5a726;border-color:#91b5a766;box-shadow:0 5px 16px #00000012;transform:translateY(-1px)}}
#notifications-read:active:not(:disabled){background:#91b5a73b;transform:scale(.95);box-shadow:inset 0 2px 6px #00000014}
html[data-theme="light"] #notifications-read.is-read-complete{background:#dceee3;border-color:#91b5a7;color:#315e4b}
.push-notification-actions{display:flex;gap:10px;margin-top:24px}.push-notification-actions button{flex:1;min-height:44px;font:inherit;font-size:14px;cursor:pointer}
#push-notification-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
@media(prefers-reduced-motion:no-preference){#notifications-read.is-read-complete{animation:notifications-read-confirm .38s cubic-bezier(.2,.8,.2,1)}@keyframes notifications-read-confirm{0%{transform:scale(.95)}55%{transform:scale(1.045)}100%{transform:scale(1)}}}
@media(prefers-reduced-motion:reduce){#notifications-read{transition:none;animation:none}#notifications-read:hover,#notifications-read:active{transform:none}}

/* Keep the heading outside the scrolling inbox and pointer feedback transient. */
body #notifications[open]{display:flex;flex-direction:column;overflow:hidden}
body #notifications:focus{outline:none}
.notification-heading{flex-shrink:0;min-width:0}
.notification-heading>div:first-child{min-width:0}
.notification-heading h2{overflow-wrap:anywhere}
.notification-heading-actions #notifications-read{padding:8px 10px;max-width:none;white-space:normal}
#notification-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:12px;padding:4px}
.notification-item{cursor:pointer;-webkit-tap-highlight-color:transparent}
.notification-meta{line-height:1.5;overflow-wrap:anywhere}
body .notification-item:focus:not(:focus-visible){outline:none}
body .notification-item:focus-visible{outline:2px solid #82c4a7;outline-offset:-2px;border-radius:12px}
@media(hover:hover) and (pointer:fine){.notification-item:hover{background:#91b5a712}}
.notification-item:active{background:#91b5a726}
@media(max-width:700px){
  .notification-heading{flex-direction:column;gap:12px}
  .notification-heading-actions{width:100%;justify-content:space-between}
  .notification-heading-actions #notifications-read{text-align:left}
  .notification-heading .close{min-width:36px;min-height:36px}
  body #push-notification-detail{padding:24px 22px;max-height:85dvh}
}