.conversation-head {
  position: relative;
  justify-content: center;
  padding: 0 64px;
}

.conversation-head > div { text-align: center; }

@media (max-width: 680px) {
  .conversation-head .back {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 36px;
    line-height: 1;
  }
}
.composer { position: relative; }
.composer > .mention-picker { position: absolute; z-index: 6; right: max(4%, 28px); bottom: calc(100% - 4px); width: min(300px, calc(100% - 56px)); max-height: min(42vh, 280px); overflow-y: auto; padding: 5px; border: 1px solid #d8d8d8; border-radius: 6px; background: #fff; box-shadow: 0 5px 18px #0002; }
.mention-picker button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 8px; border-radius: 4px; background: transparent; color: #333; text-align: left; }
.mention-picker button:hover, .mention-picker button.active { background: #edf7f1; }
.mention-picker button > span:last-child { display: grid; min-width: 0; gap: 2px; }
.mention-picker button b, .mention-picker button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-picker button small { color: #999; font-size: 11px; }
.mention-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 4px; background: #51a8dd; color: #fff; font-size: 13px; }
@media (max-width: 680px) {
  .composer > .mention-picker { right: 12px; width: min(300px, calc(100% - 24px)); max-height: min(42vh, 250px); }
}
.conversation-head { flex-shrink: 0; }
.conversation-head .conversation-title { min-width: 0; flex: 1; }
.conversation-title b, .conversation-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-jumps { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.conversation-jumps button { min-height: 36px; padding: 0 9px; border: 1px solid #c9d9d0; border-radius: 5px; background: #edf7f1; color: #087644; font-size: 12px; font-weight: 600; white-space: nowrap; }
.conversation-jumps button[data-jump-kind="mention"] { border-color: #d8d7ef; background: #f2f1fc; color: #5d4ba2; }
.conversation-jumps button[hidden] { display: none; }
.conversation-jumps button:focus-visible { outline: 2px solid #07894d; outline-offset: 2px; }
.message .mention-label { display: block; width: fit-content; margin-bottom: 4px; color: #6652a8; font-size: 11px; font-weight: 700; }
.message.mentioned > div { border-left: 3px solid #8c75c5; }
@media (max-width: 680px) {
  .conversation-head { gap: 7px; }
  .conversation-jumps { gap: 4px; }
  .conversation-jumps button { min-height: 38px; padding: 0 7px; font-size: 11px; }
}