.composer {
  flex-wrap: wrap;
}

.composer-format-toolbar {
  display: flex;
  order: -1;
  flex: 0 0 100%;
  align-items: center;
  gap: 0.3rem;
  padding: 0 4.8rem 0.15rem 0;
}

.composer-format-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 0.45rem;
  border: 1px solid #cddbe8;
  border-radius: 7px;
  background: #f1f7fd;
  color: #2f5f8b;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.composer-format-btn:hover,
.composer-format-btn:focus-visible {
  background: #dfeeff;
  border-color: #8eb6dd;
}

.composer-format-btn.bold {
  font-weight: 800;
}

.composer-format-btn.italic {
  font-style: italic;
}

.composer-format-btn.strike {
  text-decoration: line-through;
}

.composer-format-btn.code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
}

.bubble-text code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  padding: 0.08rem 0.3rem;
  border-radius: 4px;
  background: rgba(15, 35, 55, 0.1);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

.bubble-text .message-list-item {
  display: inline;
}

.message-list-bullet {
  display: inline-block;
  margin-left: 0.4rem;
  font-weight: 700;
}

@media (max-width: 920px) {
  .composer-format-toolbar {
    padding-right: 0;
    overflow-x: auto;
  }
}