#announcements-open{position:relative;inset:auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;padding:0;margin:0;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass);box-shadow:inset 0 1px 0 #ffffff38,0 2px 8px #17223505;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--muted);line-height:1}
#announcements-open[hidden]{display:none!important}
#announcements-open.has-unread:after{content:'';position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
#announcements-open .shell-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:0}
#announcements-open svg{display:block;width:20px;height:20px;flex:none}
#announcements-dialog{position:fixed;inset:auto;margin:0;width:390px;max-width:calc(100vw - 24px);max-height:min(620px,80dvh);padding:0;border:1px solid var(--glass-border);border-radius:22px;color:var(--ink);box-shadow:0 16px 50px #0002;overflow:hidden;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
#announcements-dialog::backdrop{background:rgba(25,30,40,.08);backdrop-filter:none}
#announcements-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
#announcements-dialog header h2{margin:0;font-size:17px;flex:1}
.announcement-scroll{padding:0 20px 20px;overflow:auto;max-height:calc(min(620px,80dvh) - 72px);overscroll-behavior:contain}
.announcement-row{display:block;text-align:left;width:100%;padding:17px 0;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;cursor:pointer}
.announcement-row strong{display:block;font-size:15px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.announcement-row small,.announcement-date{display:block;color:var(--muted);font-size:11px;margin:7px 0}
.announcement-row p{font-size:12px;line-height:1.7;color:var(--muted);margin:7px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.announcement-row.is-unread strong:before{content:'';display:inline-block;vertical-align:middle;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px}
.announcement-row .announcement-pin{font-size:10px;color:var(--accent);margin-right:6px}
.announcement-cover{width:100%;max-height:190px;object-fit:cover;border-radius:12px;margin-bottom:14px}
.announcement-detail h3{font-size:21px;line-height:1.5;margin:8px 0;overflow-wrap:anywhere}
.announcement-body{line-height:1.85;font-size:14px;overflow-wrap:anywhere}.announcement-body img{max-width:100%;height:auto}.announcement-body a{color:var(--accent)}.announcement-body table{display:block;max-width:100%;overflow:auto}.announcement-body pre{white-space:pre-wrap}
.announcement-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px}.announcement-pages button{border:0;background:none;color:var(--ink);padding:8px}.announcement-pages button:disabled{opacity:.4}
.announcement-empty{padding:25px 0;color:var(--muted);font-size:13px;text-align:center}
.announcement-detail>.button{margin-top:18px}
@media(max-width:800px){#announcements-open{flex:0 0 40px;width:40px;height:40px;inset:auto}.top-actions:has(#announcements-open:not([hidden])) .search{min-width:0;width:auto;flex:1}.top-actions:has(#announcements-open:not([hidden])) .search input{min-width:0;width:100%}#announcements-dialog{left:12px!important;right:12px;bottom:auto;width:auto;max-width:none;max-height:min(70dvh,var(--announcement-room,70dvh));border-radius:20px}#announcements-dialog header{padding:12px 16px 6px;gap:8px}#announcements-dialog header h2{font-size:16px}.announcement-scroll{max-height:calc(min(70dvh,var(--announcement-room,70dvh)) - 60px);padding:0 18px 14px}.announcement-row{padding:12px 0}.announcement-row:last-child{border-bottom:0}.announcement-row p{margin-top:5px}}

/* Unread announcement expands in the same row; the search field yields space. */
#announcements-open{flex-basis:40px;border-radius:22px;overflow:hidden;transition:flex-basis .28s ease,width .28s ease,background-color .2s ease,color .2s ease}
#announcements-open .shell-icon{flex:none}
#announcements-open .announcement-trigger-label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:600;line-height:20px;transition:max-width .28s ease,opacity .2s ease,margin-left .28s ease}
#announcements-open.is-expanded{flex-basis:112px;width:112px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--glass));border-color:color-mix(in srgb,var(--accent) 25%,var(--glass-border))}
#announcements-open.is-expanded .announcement-trigger-label{max-width:60px;opacity:1;margin-left:7px}
#announcements-open.has-unread:after{display:none}
.top-actions:has(#announcements-open:not([hidden])) .search{min-width:0}
html[data-motion=off] #announcements-open,html[data-motion=off] #announcements-open .announcement-trigger-label{transition:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion=force]) #announcements-open,html:not([data-motion=force]) #announcements-open .announcement-trigger-label{transition:none}}

@keyframes announcement-breathe{0%,100%{background-color:color-mix(in srgb,var(--accent) 10%,var(--glass))}50%{background-color:color-mix(in srgb,var(--accent) 22%,var(--glass))}}
@keyframes announcement-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
#announcements-open.announcement-attention{animation:announcement-breathe 2s ease-in-out .3s 3}
#announcements-open.announcement-attention .shell-icon{animation:announcement-sway .65s ease-in-out .3s 2;transform-origin:50% 65%}
html[data-motion=off] #announcements-open,html[data-motion=off] #announcements-open .shell-icon{animation:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=force]) #announcements-open,html:not([data-motion=force]) #announcements-open .shell-icon{animation:none!important}}
