/* Reuse the existing account area, not a new banner above the message list. */
.user-area{min-width:0;flex-shrink:0}
.user-identity{min-width:0;line-height:1.35}
.user-identity #user-name{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-expiry{display:flex;flex-direction:column;gap:1px;margin-top:2px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.user-expiry #user-expiry-remaining{color:var(--qq-blue)}
.user-expiry.expiring #user-expiry-remaining{color:var(--danger);font-weight:600}
@media(max-width:760px){
 .topbar:has(.user-expiry:not([hidden])){padding-left:10px;padding-right:10px;gap:6px}
 .topbar:has(.user-expiry:not([hidden])) .user-area{gap:6px}
 .topbar:has(.user-expiry:not([hidden])) #user-avatar{display:none}
 .user-identity #user-name{max-width:160px}
}
@media(max-width:420px){
 .topbar:has(.user-expiry:not([hidden])) .brand-mark{display:none}
 .topbar:has(.user-expiry:not([hidden])) .brand{font-size:14px}
}
@media(max-height:540px){
 .topbar:has(.user-expiry:not([hidden])) #user-name{display:none}
}