/* M222: only injected when W_MESSAGES_V2=1. Existing chat actions stay untouched. */
.m222 { min-width:0; }
.m222 .m222-head { display:flex; align-items:center; flex-wrap:wrap; gap:10px; justify-content:space-between; }
.m222 .m222-head h1 { margin-right:auto; }
.m222 .m222-issue { min-height:44px; padding:9px 14px; border:1px solid var(--line2); border-radius:14px;
  background:var(--panel); color:var(--text); font-weight:650; font-size:13px; white-space:normal; }
.m222 .m222-issue:hover, .m222 .m222-issue:focus-visible { border-color:var(--coral); }
.m222-list { display:grid; gap:8px; list-style:none; margin:14px 0; padding:0; min-width:0; }
.m222-item { min-width:0; }
.m222 .m222-row, .m222 .m222-invite { display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center; gap:10px; padding:13px 12px; border:1px solid var(--line); border-radius:17px;
  background:var(--panel); color:var(--text); min-height:72px; width:100%; min-width:0; text-align:left; }
.m222 .m222-row:focus-visible, .m222 .m222-invite button:focus-visible { outline:3px solid var(--coral); outline-offset:2px; }
.m222 .m222-row:hover { border-color:var(--line2); }
.m222 .m222-row.unread { border-color:var(--soft-line); background:linear-gradient(100deg,var(--soft),var(--panel) 70%); }
.m222 .m222-row .me-av, .m222 .m222-avatar { width:44px; height:44px; min-width:44px; border-radius:15px;
  display:grid; place-items:center; background:var(--soft); border:1px solid var(--soft-line);
  color:var(--coral); font-weight:750; font-size:15px; }
.m222 .m222-row .tc-main, .m222 .m222-invite > div { min-width:0; }
.m222 .m222-row .tc-main b, .m222 .m222-invite b { display:block; font-size:15px; line-height:1.4;
  overflow-wrap:anywhere; }
.m222 .m222-row .tc-main small { display:block; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.6; }
.m222 .m222-side, .m222 .tc-side { min-width:34px; max-width:88px; text-align:right;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.m222 .m222-side small, .m222 .tc-side small { white-space:nowrap; font-size:11px; }
.m222 .m222-invite { box-shadow:none; }
.m222 .m222-invite .btn { min-height:44px; padding:8px 12px; white-space:normal; overflow-wrap:anywhere; }
.m222 .m222-invite .sub { overflow-wrap:anywhere; }
.m222 .m222-empty { margin:10px 0; padding:12px; border:1px dashed var(--line2); border-radius:14px;
  background:transparent; color:var(--muted); font-size:12px; }
.m222 .m222-empty .actions .btn { min-height:44px; }
.m222 .m222-note { margin-top:16px; font-size:11px; line-height:1.5; color:var(--muted); }
.m222 .m222-trainer-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; font-size:12px; }
@media(max-width:390px) {
  .m222 .m222-head h1 { font-size:24px; }
  .m222 .m222-row, .m222 .m222-invite { grid-template-columns:40px minmax(0,1fr) auto; gap:8px; padding:12px 9px; }
  .m222 .m222-row .me-av, .m222 .m222-avatar { min-width:40px; width:40px; height:40px; }
  .m222 .m222-invite .btn { max-width:86px; }
  .m222 .m222-side, .m222 .tc-side { max-width:70px; }
}
@media(prefers-reduced-motion:reduce){ .m222 * { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
