/* Dinh dang chu, tin khan, SDT, ket ban, the NH, nhac hen, binh chon, ho so, quan ly nhom */

/* ================= Nhom 2 ================= */
.fmt-b { font-weight: 700; }
.fmt-i { font-style: italic; }
.fmt-u { text-decoration: underline; }
.fmt-s { text-decoration: line-through; }
.fmt-u.fmt-s { text-decoration: underline line-through; }
.fmt-big { font-size: 1.22em; }
.fmt-small { font-size: .85em; }
.msg-urgency { font-size: 11.5px; font-weight: 700; margin-bottom: 4px; }
.msg-urgency.u1 { color: #f27806; }
.msg-urgency.u2 { color: var(--danger); }
.msg.out .msg-urgency { color: #fff; }

.fmt-bar {
  display: flex; align-items: center; gap: 4px; margin: 0 16px 6px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); flex-shrink: 0; flex-wrap: wrap;
}
.fmt-bar button {
  min-width: 30px; height: 28px; border: none; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--text); font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.fmt-bar button:hover { background: var(--primary-soft); color: var(--primary); }
.fmt-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.fmt-hint { margin-left: auto; font-size: 11px; color: var(--muted); }
.fmt-preview {
  margin: 0 16px 6px; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; flex-shrink: 0;
}
.fmt-preview-label { font-size: 11px; color: var(--muted); margin-right: 6px; }
.urgency-chip {
  display: flex; align-items: center; gap: 8px; margin: 0 16px 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; flex-shrink: 0; align-self: flex-start;
}
.urgency-chip.u1 { background: var(--warning-soft); color: var(--warning); }
.urgency-chip.u2 { background: var(--danger-soft); color: var(--danger); }
.urgency-chip button { border: none; background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 12px; color: inherit; }
.toolbar-btn.active { background: var(--primary-soft); color: var(--primary); }

.x-modal { width: 460px; max-width: calc(100vw - 32px); }
.x-modal .field-label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: -6px; }
.x-row { display: flex; gap: 8px; }
.x-row > * { flex: 1; min-width: 0; }
.poll-opts { display: flex; flex-direction: column; gap: 6px; }
.poll-add { align-self: flex-start; }

.mini-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
#friend-req-btn { position: relative; }
.fr-item { cursor: default; }
.fr-body { flex: 1; min-width: 0; }
.fr-msg { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.phone-hit { align-items: center; }
.phone-hit-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.phone-hit-actions .small-btn { padding: 3px 9px; font-size: 11.5px; }

.info-extras { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.info-profile-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.info-profile-dl dt { color: var(--muted); }
.info-profile-dl dd { margin: 0; color: var(--text); word-break: break-word; }
.info-profile-dl dd.copyable { cursor: copy; color: var(--primary); font-weight: 600; }
.info-group-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.info-action-btn { align-self: flex-start; }
.info-rename-row { display: flex; gap: 6px; width: 100%; }
.info-rename-row input { flex: 1; min-width: 0; }
#info-members-list li { position: relative; }
.member-remove {
  margin-left: auto; border: none; background: transparent; color: var(--muted); cursor: pointer; width: 24px; height: 24px;
  border-radius: 50%; opacity: 0; flex-shrink: 0;
}
#info-members-list li:hover .member-remove { opacity: 1; }
.member-remove:hover { background: var(--danger-soft); color: var(--danger); }
.tag-import-btn { align-self: flex-start; }

.msg-generic-card { border-left: 3px solid var(--primary); padding: 2px 0 2px 10px; }
.mgc-title { font-weight: 600; }
.mgc-desc { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; }
.msg.out .msg-generic-card { border-left-color: #fff; }
.msg.out .mgc-desc { color: rgba(255, 255, 255, .85); }

/* chu mau tren bong bong xanh (tin gui di): nen trang de doc duoc */
.msg.out .fmt-color { background: rgba(255, 255, 255, .92); border-radius: 4px; padding: 0 3px; }