/* Zuno 0.32 */
.acc-uname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-uname small { flex-basis: 100%; }
.un-dlg { max-width: 440px; }
.un-in { display: flex; align-items: center; border-radius: 10px; background: var(--input); border: 1px solid var(--border); padding-left: 10px; }
.un-in span { color: var(--muted); font-weight: 700; }
.un-in input { border: 0 !important; background: none !important; flex: 1; }
.un-st { display: block; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.un-st.good { color: #4bd185; }
.un-st.bad { color: #fa777c; }
.un-confirm { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; margin: 4px 0 12px; border-radius: 14px; background: var(--sidebar); box-shadow: inset 0 0 0 1px var(--border); text-align: center; }
.un-confirm b { font-size: 26px; color: var(--header); letter-spacing: .02em; word-break: break-all; font-family: ui-monospace, monospace; }
.menu.menu-over { position: fixed; }

/* Phones: tapping a message counts as "hovering" it, which showed its time squeezed into the
   narrow space next to the bubble, on top of the text. Touch screens don't show it. */
@media (hover: none), (max-width: 700px) {
  .msg:not(.head):hover .hover-time, .msg .hover-time { display: none !important; }
}

/* The role picker card in chat: even spacing, and emoji sit on the text's centre line. */
.msg .role-picker { width: auto; max-height: none; display: block; padding: 12px 14px; }
.rpk-title, .rpk-opt { display: inline-flex; align-items: center; gap: 6px; }
.rpk-title { display: flex; }
.rpk-title img.twemoji, .rpk-opt img.twemoji, .rpk-e img.twemoji { vertical-align: middle !important; }
.rpk-e { display: inline-flex; align-items: center; }

/* Closet: favorite and staff delete */
.cm-fav { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; font-weight: 700; }
.cm-fav span { font-size: 11.5px; }
.cm-fav.on { color: #ff5f8f; }
.cm-fav:hover { background: rgba(0, 0, 0, .75); }
.cm-fav.pop { animation: like-pop .45s var(--spring); }
.cm-card .cm-moves { right: auto; left: 16px; top: 46px; }
.cm-card .cm-wearing ~ .cm-moves { top: 46px; }
.cm-staff-del { color: #fa777c !important; padding: 0; align-self: center; }

/* @everyone / @here: a clear yellow for everyone, the sender too */
.msg.mentioned.ping-all { background: rgba(240, 178, 50, .14); box-shadow: inset 3px 0 0 var(--yellow); }
.msg.mentioned.ping-all:hover { background: rgba(240, 178, 50, .19); }
html[data-msgstyle="bubbles"] .msg.mentioned.ping-all .content { box-shadow: inset 0 0 0 2px var(--yellow); background: color-mix(in srgb, var(--yellow) 18%, var(--bubble-them)); }
html[data-msgstyle="bubbles"] .msg.mentioned.ping-all.mine .content { background: color-mix(in srgb, var(--yellow) 22%, var(--bubble-me, var(--accent))); }

/* Long custom statuses show in full on the profile (they were cut off with "…" at 210px) */
.pcard .pc-bubble { align-items: flex-start; max-width: min(100%, 320px); }
.pcard .pc-bubble::before { top: 13px; margin-top: -5px; }
.pcard .pc-bubble .pc-cs-text { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; overflow-wrap: anywhere; }
.pcard .pc-bubble .pc-cs-emoji { line-height: 1.2; }

/* Profile background, its shade and the profile effect follow the card's scroll (set by zuno32.js) */
.pcard > .pc-bg, .pcard > .pfx, .pcard.has-bg::after { translate: 0 var(--pcy, 0px); }