/* Notifications, alerts and direct messages. */
.nav a{flex:1 1 0;min-width:0;width:auto}
.navitem .badge{left:50%;right:auto;margin-left:5px}
.inboxtop{gap:12px;flex:none}.inboxtop .title{margin-right:auto}
.inboxtop .seg{flex:none}.seg .tabcount{display:inline-block;min-width:16px;margin-left:6px;padding:0 4px;border-radius:99px;background:var(--sig);color:var(--sig-ink);font:600 10px/16px var(--ui);text-align:center}
.notes{display:flex;flex-direction:column;gap:8px}.notehead{display:flex;justify-content:flex-end;font-size:13px}.notehead:empty{display:none}
.noteitem{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--s1);transition:border-color .15s}
.noteitem:hover{border-color:var(--line2)}.noteitem.unread{border-color:color-mix(in srgb,var(--sig) 38%,var(--line));background:color-mix(in srgb,var(--sig) 6%,var(--s1))}
.notetext{font-size:14px;overflow-wrap:anywhere}.notetext b{font-weight:600}
.notepreview{font-size:13px;color:var(--m);margin:3px 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.notedot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}.unread .notedot{background:var(--sig)}
.alertoffer{align-items:center;flex-wrap:wrap;margin-bottom:4px}.alertoffer .grow{flex:1 1 160px}
.dmx{width:32px;height:32px;display:grid;place-items:center;background:none;border:0;color:var(--m);border-radius:8px}.dmx:hover{color:var(--t);background:rgba(255,255,255,.08)}
.kinds{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kindrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;min-height:52px;background:var(--s1);cursor:pointer}.kindrow+.kindrow{border-top:1px solid var(--line)}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;border-radius:99px;background:var(--s3);border:1px solid var(--line2);position:relative;cursor:pointer;transition:background .15s}
.switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--t);transition:transform .15s}
.switch:checked{background:var(--sig)}.switch:checked:after{transform:translateX(18px);background:var(--sig-ink)}
.dmlist{display:flex;flex-direction:column;gap:6px}
.dmrow{display:flex;gap:12px;align-items:center;padding:11px;border-radius:14px;border:1px solid transparent}.dmrow:hover{background:var(--s1)}.dmrow.on{background:var(--s2);border-color:var(--line)}
.dmrowtop,.dmrowlast{display:flex;align-items:center;justify-content:space-between;gap:10px}.dmrowtop b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrowtop .meta{flex:none}.dmrowlast{margin-top:2px}.dmrowlast .meta{font-size:13px;flex:1;min-width:0}.dmrowlast .badge{flex:none;margin:0}.dmrow.unread .dmrowlast .meta{color:var(--t)}
.dmthread{flex:1;min-height:0;height:100%;display:flex;flex-direction:column}
.dmhead{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:10px;border-bottom:1px solid var(--line)}
.dmwho{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.dmwho b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmbody{flex:1;min-height:0;position:relative;display:flex}
.dmscroll{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;padding:14px 16px;-webkit-overflow-scrolling:touch}
.dmscroll:before{content:"";margin-top:auto}.dmolder{align-self:center;margin-bottom:12px;flex:none}.dmolder[hidden]{display:none}
.dmmsgs{display:flex;flex-direction:column;gap:7px}.dmmsgs+.dmmsgs{margin-top:7px}.dmmsgs:empty{display:none}
.dmmsg{display:flex;flex-direction:column;align-items:flex-start;max-width:min(78%,480px)}
.dmmsg.mine{align-self:flex-end;align-items:flex-end}.dmmsg .bub{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:14px 14px 14px 4px}
.dmmsg.mine .bub{background:var(--sig);color:var(--sig-ink);border-radius:14px 14px 4px 14px}
.dmmsg.waiting .bub{opacity:.65}.dmtime{align-self:center;margin:8px 0 3px}
.dmseen{font-size:11px;color:var(--m);margin-top:3px}
.dmfail{font-size:12px;color:var(--red);margin-top:4px;text-align:right}.dmfail .link{font-size:12px}
.dmjump{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);box-shadow:0 8px 24px #000a}.dmjump[hidden]{display:none}
.dmstatus{flex:none;padding:6px 16px;text-align:center;font-size:12px;color:var(--m);background:var(--s1);border-top:1px solid var(--line)}.dmstatus[hidden]{display:none}
.dmfoot{flex:none}.dmfoot .input{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.dmnote{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom));font-size:13px;color:var(--m);text-align:center;border-top:1px solid var(--line)}
.tile .dmnote,.pad>.dmnote{border:1px solid var(--line);border-radius:14px;background:var(--s1)}
.dmpanes{flex:1;min-height:0;display:flex;border-top:1px solid var(--line)}
.dmpanes .dmlist{width:330px;flex:none;overflow-y:auto;padding:10px;border-right:1px solid var(--line)}
.dmright{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
/* The navigation bar already says Inbox, so on narrow phones the tabs get the room. */
@media (max-width:389px){.inboxtop{gap:8px}.inboxtop .title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.inboxtop .seg{margin-right:auto}.inboxtop .seg b{padding:7px 11px}}
@media (max-width:359px){.dmmsg{max-width:88%}}
@media (prefers-reduced-motion:reduce){.switch,.switch:after,.noteitem{transition:none}}
@media (max-width:899px){.proactions:has([data-message]) .sharelabel{display:none}.proactions:has([data-message]){gap:6px}.proactions:has([data-message]) .btn{padding:0 12px}}