/* Messages on every office page (Messaging/MessagingDock.js): the top bar button and the slide-out panel. */
/* The header icon group (Templates/Site.Master): to the right of the search box, icons left to right. */
.siteHeaderIcons { float: right; display: flex; align-items: flex-start; margin-left: 4px; }
.siteHeaderIcons > div { float: none !important; }
.siteHeaderMessages { padding: 8px 15px 0 0; font-size: 1.6em; color: #dddddd; cursor: pointer; position: relative; }
.siteHeaderMessages:hover, .siteHeaderMessages.mc-dock-on { color: #ffffff; }
.mc-dock-badge { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 600;
                 line-height: 16px; text-align: center; background: #d9534f; color: #fff; border-radius: 8px; }
/* Messages covers the page below the top bar (top is set from the bar's height); the page underneath is untouched. */
.mc-dock { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; z-index: 1040; display: none; flex-direction: column; }
html.mc-dock-lock { overflow: hidden; }
.mc-dock .mc-dock-x { font-size: 28px; line-height: 1; padding: 0 8px; }
.mc-dock.mc-dock-open { display: flex; }
.mc-dock-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid #e0e0e0; background: #f4f6f8; }
.mc-dock-title { flex: 1; font-weight: 700; font-size: 14px; color: #333; }
.mc-dock-ico { border: none; background: none; color: #666; font-size: 15px; padding: 2px 8px; border-radius: 4px; cursor: pointer; text-decoration: none; }
.mc-dock-ico:hover { background: #e7ebef; color: #333; text-decoration: none; }
.mc-dock-body { flex: 1; min-height: 0; display: flex; }
.mc-dock-body > .mc { flex: 1; height: auto; border: none; border-radius: 0; min-height: 0; }
/* While Messages covers the page, the Feedback reply bubble (z-index 9000) would float over it; it is back once Messages closes. */
html.mc-dock-lock #fbBubble { display: none !important; }