/* The bell's messages dropdown. White panel, neutral surfaces, burgundy for what's new. */
.inbox{position:relative}
.inbox-trigger{position:relative}
.inbox[open]>.inbox-trigger{background:var(--surface-selected,#ededed)}
.inbox-badge{position:absolute;top:-4px;right:-5px;min-width:18px;height:18px;padding:0 5px;border:2px solid #fff;border-radius:999px;background:#79546b;color:#fff;font:600 10px/14px 'DM Sans',sans-serif;text-align:center}
.inbox-panel.nav-dropdown{right:-8px;left:auto;width:400px;max-width:calc(100vw - 32px);padding:0;overflow:hidden;background:#fff;border-color:var(--ds-panel-border,#e4e4e4);box-shadow:0 24px 70px #2424241f,0 4px 14px #2424240f}
.inbox-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid #efefef}
.inbox-head h2{margin:0;font-size:16px}
.inbox-head span{font-size:11px;color:var(--muted)}
.inbox-list{max-height:min(460px,calc(100dvh - 210px));overflow:auto;padding:4px 8px 8px}
.inbox-group h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 10px 4px;font:600 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.inbox-group h3 span{font-weight:500;letter-spacing:.04em;text-transform:none;color:#79546b}
.inbox-item{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px;border-radius:14px;text-align:left;transition:background .15s}
.inbox-item:hover,.inbox-item:focus-visible{background:#f7f7f7}
.inbox-icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #eeeeee;border-radius:10px;background:#f7f7f7}
.inbox-icon svg{width:16px;height:16px}
.inbox-copy{display:grid;gap:2px;min-width:0;flex:1}
.inbox-copy strong{font-size:12.5px;font-weight:550;line-height:1.4}
.inbox-copy small{font-size:11px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.inbox-item.is-new .inbox-copy strong{color:#481729}
.inbox-new{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin-top:2px;padding:2px 8px 2px 7px;border-radius:999px;background:#ededed;font-size:10px;font-weight:600;color:#481729}
.inbox-new:before{content:'';width:6px;height:6px;border-radius:50%;background:#79546b}
.inbox-empty{margin:0;padding:30px 18px;text-align:center;font-size:12px;color:var(--muted)}
.inbox-empty strong{display:block;margin-bottom:4px;font-size:13px;color:var(--ink)}
.inbox-all{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid #efefef;font-size:12px}
.inbox-all svg{width:16px;height:16px}
.inbox-all:hover{background:#f7f7f7}
/* On phones the dropdown spans the header instead of hanging off the bell. */
@media(max-width:640px){
 .inbox{position:static}
 .inbox-panel.nav-dropdown{position:absolute;top:calc(100% + 6px);left:12px;right:12px;width:auto;max-width:none}
 .inbox-list{max-height:calc(100dvh - 190px)}
}

/* Like the orb menu: the panel pours out of the bell as a growing circle, and back in on close.
   Defaults match the bell's usual spot; opening measures the real position. */
.inbox-panel.nav-dropdown{--pour-x:calc(100% - 27px)} /* The circle itself is animated from src/pour.js. */
.inbox-panel:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--pour-x) 0,#79546b2e,transparent 62%)}
.inbox[open] .inbox-panel:before{animation:inbox-wash .53s ease-out both}
@keyframes inbox-wash{from{opacity:1}to{opacity:0}}
.inbox-head,.inbox-list,.inbox-all{position:relative}
/* Each row fades in as the circle's edge reaches it (timed in src/pour.js). */
.inbox[open] .inbox-reveal{animation:inbox-rise var(--pour-length,300ms) var(--pour-delay,0ms) cubic-bezier(.25,.6,.3,1) both}
.inbox.closing .inbox-reveal{animation:none}
@keyframes inbox-rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* The bell rings as it opens and pulses as it takes the panel back. */
.inbox[open]:not(.closing)>.inbox-trigger>svg{transform-origin:50% 12%;animation:bell-ring .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes bell-ring{0%,100%{rotate:0deg}20%{rotate:16deg}40%{rotate:-12deg}60%{rotate:7deg}80%{rotate:-3deg}}
.inbox-trigger.absorb{animation:bell-absorb .32s cubic-bezier(.2,.8,.2,1)}
@keyframes bell-absorb{40%{scale:1.15}100%{scale:1}}
@media(max-width:640px){.inbox-panel.nav-dropdown{--pour-x:calc(100% - 71px)}}
@media(prefers-reduced-motion:reduce){
 .inbox[open] .inbox-panel,.inbox[open] .inbox-reveal{animation:inbox-fade .15s both}
 @keyframes inbox-fade{from{opacity:0}to{opacity:1}}
 .inbox[open] .inbox-panel:before,.inbox[open]>.inbox-trigger>svg,.inbox-trigger.absorb{animation:none}
}