.composer { position: relative; }
.composer-controls select[hidden] { display: none; }
.mention-open { background: #e8f2ec; color: var(--green); padding: 6px 10px; border-radius: 7px; }
.mention-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.mention-selected:empty { display: none; }
.mention-chip { display: inline-flex; gap: 6px; padding: 4px 8px; background: #edf5ef; color: var(--green); border-radius: 6px; font-size: 12px; }
.mention-chip small { color: var(--muted); }
.mention-popup { position: absolute; bottom: calc(100% + 5px); left: 12px; width: min(420px, calc(100% - 24px));
  max-height: 300px; overflow-y: auto; padding: 7px; background: white; border: 1px solid #dce5df;
  border-radius: 12px; box-shadow: 0 8px 28px #263d3629; z-index: 5; }
.mention-popup[hidden] { display: none; }
.mention-heading { padding: 8px; font-size: 13px; color: var(--ink); }
.mention-heading small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.mention-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 7px; text-align: left; }
.mention-option.active, .mention-option:hover { background: #eaf3ed; }
.mention-option span:not(.avatar) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-option small { color: var(--muted); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.room-face { position: relative; display: inline-flex; flex: 0 0 auto; }
.notice-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 10px; background: #ef4b55; color: white; font-size: 10px; line-height: 17px; font-style: normal; vertical-align: middle; }
.notice-badge[hidden] { display: none; }
.room-face > .notice-badge { position: absolute; top: -5px; right: -7px; }
.rail-btn { position: relative; }
.rail-btn .notice-badge { position: absolute; top: 4px; right: 3px; }
.mention-unread, .new-friend-flag { color: #df4650; font-style: normal; }
.new-friend-flag { display: block; font-size: 11px; margin-bottom: 3px; }
@media (max-width: 700px) {
  .mention-popup { max-height: 240px; }
  .mention-heading small { font-size: 10px; }
  .mention-open { font-size: 12px; white-space: nowrap; }
  .composer-controls { flex-wrap: wrap; gap: 6px; }
  .composer-controls > span { white-space: nowrap; font-size: 11px; }
}