.notice-dropdown{width:410px;max-width:calc(100vw - 24px);padding:0!important;overflow:hidden;border-radius:12px!important;box-shadow:0 12px 36px #0003}.notice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bs-border-color);background:var(--bs-body-bg)}.notice-heading strong{display:block;font-size:1rem}.notice-heading small{display:block;margin-top:3px;font-size:.75rem;color:var(--bs-secondary-color)}.notice-heading .btn{white-space:nowrap;text-decoration:none;font-size:.8rem;padding:4px}.notice-feed{max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain}.notice-item{display:flex;align-items:flex-start;gap:10px;padding:8px 14px;color:var(--bs-body-color)!important;text-decoration:none!important;border-bottom:1px solid var(--bs-border-color);background:var(--bs-body-bg);transition:background-color .12s}.notice-item.is-unread{background:rgba(var(--bs-primary-rgb),.07)}.notice-item:hover,.notice-item:focus-visible{background:rgba(var(--bs-primary-rgb),.14);outline-offset:-2px}.notice-icon{display:flex;align-items:center;justify-content:center;flex:0 0 30px;height:30px;border-radius:10px;font-size:1rem}.notice-icon.is-ticket{background:var(--bs-primary-bg-subtle);color:var(--bs-primary-text-emphasis)}.notice-icon.is-task{background:var(--bs-success-bg-subtle);color:var(--bs-success-text-emphasis)}.notice-content{flex:1;min-width:0}.notice-content strong{display:block;font-size:.82rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}.notice-description{display:none;margin-top:2px;font-size:.77rem;line-height:1.5;color:var(--bs-secondary-color)}.notice-content small{display:block;margin-top:3px;font-size:.71rem;color:var(--bs-secondary-color)}.notice-dot{flex:0 0 7px;height:7px;margin-top:8px;border-radius:50%;background:var(--bs-primary)}.notice-footer{padding:4px 12px;text-align:center;background:var(--bs-body-bg)}.notice-footer .text-danger{display:block;margin:4px 0;font-size:.75rem}.notice-empty{padding:30px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--bs-secondary-color);font-size:.85rem}

.notice-description.has-preview{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;margin-top:2px}

.notice-centre-card{width:100%;margin:0;overflow:hidden;border-radius:12px}
.notice-centre-card .notice-item{padding:10px 16px}
.notice-centre-card .notice-description.has-preview{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notice-centre-card .card-header,.notice-centre-card .card-footer{padding:12px 16px}

.notice-centre-card .card-header{display:flex!important;justify-content:space-between!important;align-items:center;gap:12px}.notice-centre-card .card-header::after{display:none}.notice-centre-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.notice-centre-footer .report-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.notice-centre-footer .report-page-ellipsis{padding:0 4px}@media(max-width:575.98px){.notice-centre-footer{justify-content:center}.notice-centre-footer>span{width:100%;text-align:center}.notice-centre-card .notice-item{padding:10px 12px}}

/* Anchor the phone message menu to the navbar, not the middle message icon. */
@media(max-width:575.98px){
 .app-header .navbar-nav,.app-header .chat-notice-nav{position:static!important}
 .app-header .chat-notice-menu{position:absolute!important;top:100%!important;left:8px!important;right:8px!important;bottom:auto!important;transform:none!important;width:auto!important;min-width:0!important;max-width:none!important;margin-top:4px!important;max-height:calc(100dvh - 80px);overflow-y:auto;overflow-x:hidden}
 .app-header .chat-notice-menu .dropdown-item{white-space:normal;overflow-wrap:anywhere}
}