.msgr-panel { height: min(calc(100dvh - var(--sp-500) * 2), 820px); }
.msgr-panel > .panel-body {
  padding: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.msgr {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.msgr-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: var(--bw) solid var(--line);
}
.msgr-side-head {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  padding: var(--sp-150);
}
.msgr-search { flex: 1; min-width: 0; }
.msgr-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-025);
  padding: 0 var(--sp-100) var(--sp-150);
}
.msgr-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-150);
  width: 100%;
  padding: var(--sp-100) var(--sp-150);
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .msgr-row:hover { background: var(--a-200); } }
.msgr-row.on { background: var(--acc-weak); }
.msgr-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-500);
  height: var(--sp-500);
  border-radius: var(--r-full);
  background: var(--avatar-fill, var(--field2));
  color: var(--avatar-ink, var(--ink2));
  font-weight: var(--fw-semi);
  font-size: var(--fs-s);
}
.msgr-avatar.sys { background: var(--acc-weak); color: var(--acc-ink); }
/* 15.1070: Echo's chat — its mark on a quiet ground */
.msgr-avatar.echo-face { background: var(--a-100); }
.msgr-avatar { overflow: hidden; }
.msgr-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.msgr-avatar.brand { background: var(--field2); }
.msgr-avatar.brand > img { object-fit: contain; transform: scale(.72); }
.msgr-avatar.group { border-radius: 30%; }
.msgr-avatar.emoji { font-size: calc(var(--sp-500) * 0.55); line-height: 1; }
.msgr-avatar.big.emoji { font-size: calc(var(--sp-600) * 0.55); }
.msgr-avatar.huge.emoji { font-size: calc(var(--sp-600) * 1.1); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-blue   { background: var(--avatar-bg-blue); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-green  { background: var(--avatar-bg-green); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-orange { background: var(--avatar-bg-orange); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-red    { background: var(--avatar-bg-red); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-violet { background: var(--avatar-bg-violet); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-cyan   { background: var(--avatar-bg-cyan); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-pink   { background: var(--avatar-bg-pink); }
:is(.msgr-avatar, .msgr-bg-swatch).bg-indigo { background: var(--avatar-bg-indigo); }
.msgr-gset-avatar { display: flex; justify-content: center; padding: var(--sp-100) 0 var(--sp-150); }
.msgr-gset-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-100);
  margin-bottom: var(--sp-200);
  padding: var(--sp-150);
  border-radius: var(--r-l);
  background: var(--field2);
}
.msgr-bg-swatch {
  width: var(--sp-400);
  height: var(--sp-400);
  padding: 0;
  border: calc(var(--bw) * 2) solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
}
.msgr-bg-swatch.on { border-color: var(--ink); }
.msgr-gset-emoji {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sp-500), 1fr));
  gap: var(--sp-050);
  width: 100%;
  max-height: calc(var(--sp-500) * 5);
  overflow-y: auto;
}
.msgr-gset-emo {
  height: var(--sp-500);
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  font-size: calc(var(--sp-500) * 0.55);
  cursor: pointer;
}
@media (hover: hover) { .msgr-gset-emo:hover { background: var(--a-200); } }
.msgr-gset-about { resize: vertical; min-height: calc(var(--h-field) * 2); }
.msgr-group-acts { justify-content: center; gap: var(--sp-150); margin-bottom: var(--sp-300); }
.msgr-avatar.huge { width: calc(var(--sp-600) * 2); height: calc(var(--sp-600) * 2); font-size: var(--fs-l); }
.msgr-row-main { display: flex; flex-direction: column; min-width: 0; }
.msgr-row-title { font-weight: var(--fw-med); }
.msgr-row-text { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.msgr-row-text > svg { vertical-align: -2px; margin-right: var(--sp-050); color: var(--acc-ink); }
.msgr-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-050);
}
.msgr-row-time { font-size: var(--fs-xs); color: var(--ink3); }
.msgr-row-pin { display: inline-flex; color: var(--ink3); }
.msgr-unread {
  min-width: var(--sp-250);
  height: var(--sp-250);
  padding: 0 var(--sp-075);
  border-radius: var(--r-full);
  background: var(--acc);
  color: var(--acc-fg);
  font-size: var(--fs-xs);
  display: inline-block;
  text-align: center;
}
.msgr-section {
  padding: var(--sp-150) var(--sp-150) var(--sp-050);
  font-size: var(--fs-s);
  color: var(--ink3);
}

.msgr-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.msgr-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-150);
  padding: var(--sp-150) var(--sp-200);
  border-bottom: var(--bw) solid var(--line);
}
.msgr-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-150);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.msgr-head-main:disabled { cursor: default; }
.msgr-head-text { display: flex; flex-direction: column; min-width: 0; }
.msgr-head-avatar { flex: none; display: inline-flex; }
.msgr-pcard-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-050);
  padding: var(--sp-100) 0 var(--sp-200);
  text-align: center;
}
.msgr-pcard-head > .msgr-avatar { margin-bottom: var(--sp-100); }
.msgr-pcard-name { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.msgr-pcard-sub { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.msgr-pcard-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-100);
  padding-bottom: var(--sp-200);
}
.msgr-pcard-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-050);
  min-width: calc(var(--sp-600) * 1.6);
  padding: var(--sp-100) var(--sp-150);
  border: 0;
  border-radius: var(--r-l);
  background: var(--field2);
  color: var(--acc-ink);
  font: inherit;
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) { .msgr-pcard-act:hover { background: var(--a-200); } }
.msgr-pcard-act-ic { display: grid; place-items: center; }
.msgr-pcard-info {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-200);
  border-radius: var(--r-l);
  background: var(--field2);
}
.msgr-pcard-row { padding: var(--sp-100) var(--sp-200); }
.msgr-pcard-row + .msgr-pcard-row { border-top: var(--bw) solid var(--line); }
.msgr-pcard-val { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }

.msgr-main { overflow: clip; }
.msgr-info {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-top: var(--bw) solid var(--line);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-fold) var(--ease-out), visibility 0s linear var(--dur-fold);
}
.msgr-info.open {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path var(--dur-fold) var(--ease-out);
}
.msgr-info-body {
  position: relative;
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-300) var(--sp-200);
}
.msgr-info-close { position: absolute; top: var(--sp-150); right: var(--sp-200); }
.msgr-info-card {
  max-width: 420px; margin-inline: auto;
  transform: translateY(calc(-1 * var(--sp-400)));
  transition: transform var(--dur-fold) var(--ease-out);
}
.msgr-info.open .msgr-info-card { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .msgr-info, .msgr-info.open, .msgr-info-card { transition: none; }
}
.msgr-pcard-cap { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.msgr-title { font-weight: var(--fw-semi); }
.msgr-subtitle { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.msgr-back { display: none; }
.msgr-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-075);
  padding: var(--sp-200);
  background: var(--bg);
}
.msgr-day { align-self: center; margin: var(--sp-100) 0; }
.msgr-day > span {
  display: inline-block;
  padding: var(--sp-025) var(--sp-150);
  border-radius: var(--r-full);
  background: var(--field2);
  font-size: var(--fs-xs);
  color: var(--ink3);
}
.msgr-msg {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  border-radius: var(--r);
  touch-action: pan-y;
}
.msgr-msg.mine { justify-content: flex-end; }
.msgr-msg.mine > .msgr-reply-btn { order: 0; }
.msgr-msg.mine > .msgr-bubble { order: 1; }
.msgr.selecting .msgr-msg { cursor: pointer; }
.msgr-msg.picked, .msgr-msg.flash { background: var(--a-200); }
.msgr-reply-btn { flex: none; opacity: 0; }
@media (hover: hover) {
  .msgr-msg:hover .msgr-reply-btn { opacity: 1; }
}
@media (hover: none) { .msgr-reply-btn { display: none; } }
.msgr.selecting .msgr-reply-btn { display: none; }
.msgr-swipe-sign {
  position: absolute;
  right: var(--sp-100);
  top: 50%;
  display: inline-flex;
  margin-top: calc(var(--sp-100) * -1);
  opacity: 0;
  color: var(--acc-ink);
  pointer-events: none;
}
.msgr-selbar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  padding: 0 var(--sp-200);
  background: var(--card);
}
.msgr-selbar > .bulk-bar { flex: 1 1 auto; min-width: 0; margin: 0; }
.msgr-fwd {
  display: flex;
  align-items: center;
  gap: var(--sp-050);
  min-width: 0;
  font-size: var(--fs-s);
  color: var(--acc-ink);
}
.msgr-rq {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  min-width: 0;
  padding: var(--sp-050) var(--sp-100) var(--sp-050) var(--sp-200);
  border: 0;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.msgr-rq::before {
  content: "";
  position: absolute;
  left: var(--sp-075);
  top: var(--sp-050);
  bottom: var(--sp-050);
  width: calc(var(--bw) * 2);
  border-radius: var(--r-full);
  background: var(--acc);
}
.msgr-rq.gone { cursor: default; }
.msgr-rq-thumb {
  flex: none;
  width: var(--sp-500);
  height: var(--sp-500);
  object-fit: cover;
  border-radius: var(--r-xs);
}
.msgr-rq-main { display: flex; flex-direction: column; min-width: 0; }
.msgr-rq-author { font-size: var(--fs-s); font-weight: var(--fw-semi); color: var(--acc-ink); }
.msgr-rq-text { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink2); }
.msgr-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-075);
  min-width: var(--sp-600);
  max-width: min(560px, 80%);
  padding: var(--sp-100) var(--sp-150) var(--sp-250);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
}
.msgr-msg.mine .msgr-bubble { background: var(--acc-weak); border-color: transparent; }
.msgr-author { font-size: var(--fs-s); font-weight: var(--fw-semi); color: var(--acc-ink); }
button.msgr-author {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.msgr-words { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.msgr-inline-link { color: var(--acc-ink); text-decoration: none; }
.msgr-words strong { font-weight: var(--fw-semi); }
.msgr-code, .msgr-pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--field2);
  border-radius: var(--r-xs);
}
.msgr-code { padding: 0 var(--sp-050); }
.msgr-pre {
  margin: 0;
  padding: var(--sp-100) var(--sp-150);
  white-space: pre-wrap;
  overflow-x: auto;
  border-radius: var(--r-s);
}
.msgr-spoiler {
  border-radius: var(--r-xs);
  background: var(--ink3);
  color: transparent;
  cursor: pointer;
  transition: color var(--dur-s, 160ms), background var(--dur-s, 160ms);
}
.msgr-spoiler > * { visibility: hidden; }
.msgr-spoiler.shown { background: none; color: inherit; cursor: auto; }
.msgr-spoiler.shown > * { visibility: visible; }
.msgr-md-quote {
  margin: 0;
  padding-left: var(--sp-100);
  border-left: calc(var(--bw) * 2) solid var(--acc);
  color: var(--ink2);
}
@media (hover: hover) { .msgr-inline-link:hover { text-decoration: underline; } }
.msgr-attached { display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0; }
.msgr-shots { display: flex; flex-direction: column; gap: var(--sp-100); }
.msgr-shots img { display: block; max-width: 100%; border-radius: var(--r); }
.msgr-time {
  position: absolute;
  right: var(--sp-150);
  bottom: var(--sp-050);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-075);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--ink3);
}
.msgr-bubble:has(> .msgr-album + .msgr-time) { padding-bottom: var(--sp-150); }
.msgr-bubble:has(> .msgr-album + .msgr-time) > .msgr-time {
  right: calc(var(--sp-150) + var(--sp-100));
  bottom: calc(var(--sp-150) + var(--sp-100));
  padding: 0 var(--sp-075);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ink-on-light) 55%, transparent);
  color: var(--ink-on-dark);
}
.msgr-deleted { font-style: italic; color: var(--ink3); }
.msgr-pinbar {
  display: flex;
  align-items: center;
  gap: var(--sp-150);
  width: 100%;
  min-height: var(--h-field);
  padding: var(--sp-075) var(--sp-200);
  border: 0;
  border-bottom: var(--bw) solid var(--line);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.msgr-pinbar-marks {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--bw) * 2);
  align-self: stretch;
  width: calc(var(--bw) * 2);
}
.msgr-pinbar-marks > span { flex: 1; border-radius: var(--r-full); background: var(--a-300, var(--line)); }
.msgr-pinbar-marks > span.on { background: var(--acc); }
.msgr-pinbar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msgr-pinbar-title { font-size: var(--fs-s); line-height: var(--lh-s); font-weight: var(--fw-semi);
                     color: var(--acc-ink); }
.msgr-pinbar-text { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink2); }
.msgr-pinbar-all { flex: none; }
.msgr-audio { width: 260px; max-width: 100%; }
.msgr-link {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  min-width: 0;
  color: var(--acc-ink);
  text-decoration: none;
}
.msgr-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-150);
  min-width: 0;
  max-width: 320px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.msgr-doc-sign {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-500);
  height: var(--sp-500);
  border-radius: var(--r-full);
  background: var(--acc);
  color: var(--acc-fg);
}
.msgr-doc-main { display: flex; flex-direction: column; min-width: 0; }
.msgr-doc-name { font-weight: var(--fw-med); }
.msgr-doc-meta { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
@media (hover: hover) { .msgr-doc:hover .msgr-doc-name { color: var(--acc-ink); } }

.msgr-post-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-050);
  width: min(520px, 85%);
}
.msgr-post-wrap > .msgr-post { max-width: none; }
.msgr-post-from { display: flex; align-items: center; gap: var(--sp-100);
                  color: var(--notice-tint, var(--acc-ink)); }
.msgr-post-mark { font-weight: var(--fw-reg); color: var(--danger-ink); }
.msgr-post-mark.soft { color: var(--ink3); }
.msgr-post-title { font-weight: var(--fw-semi); }
.msgr-post-rule { height: var(--bw); background: var(--line); }
.msgr-post-polls { display: flex; flex-direction: column; gap: var(--sp-100); }
.msgr-album {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-050);
}
.msgr-album[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.msgr-album[data-n="3"] > :first-child { grid-column: 1 / -1; }
.msgr-album > img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--r-s);
}
.msgr-album[data-n="1"] > img { height: auto; object-fit: contain; }
.msgr-media-album { width: 360px; max-width: 100%; }
.msgr-bubble:has(> .msgr-media-album) { width: min-content; }
.msgr-shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: var(--field2);
  overflow: hidden;
  cursor: var(--cur-zoom);
}
.msgr-shot > img, .msgr-shot > video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
}
.msgr-album[data-n="1"] .msgr-shot > :is(img, video) { height: auto; object-fit: contain; }
.msgr-shot-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: var(--sp-500);
  height: var(--sp-500);
  margin: auto;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ink-on-light) 55%, transparent);
  color: var(--ink-on-dark);
}
.msgr-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-050);
}
.msgr-key { width: 100%; justify-content: center; }
.msgr-views {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-025);
}

.msgr-pending {
  display: flex;
  flex-direction: column;
  gap: var(--sp-150);
  padding: var(--sp-200) var(--sp-200) 0;
  border-top: var(--bw) solid var(--line);
}
.msgr-main:has(> .msgr-pending:not(.hidden)) > .msgr-compose { border-top: 0; }
.msgr-undo { position: relative; z-index: 3; height: 0; margin-inline: var(--sp-200); }
.msgr-undo > .undo-bar {
  position: absolute;
  bottom: var(--sp-150);
  left: 0;
  right: 0;
  margin-inline: auto;
}
.msgr-cards-row { display: flex; align-items: flex-start; gap: var(--sp-100); }
.msgr-cards { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sp-150); }
.msgr-cards-menu { flex: none; }
.msgr-card-wrap { position: relative; flex: 0 1 280px; min-width: 200px; max-width: 100%; }
.msgr-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-150);
  width: 100%;
  padding: var(--sp-150) var(--sp-500) var(--sp-150) var(--sp-150);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-l);
  background: var(--card);
  color: inherit;
  text-align: left;
  overflow: hidden;
}
button.msgr-card { cursor: var(--cur-zoom); }
.msgr-card-thumb, .msgr-card-sign {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sp-600);
  height: var(--sp-600);
  border-radius: calc(var(--r-l) - var(--sp-150));
  overflow: hidden;
}
.msgr-card-sign { background: var(--acc-weak); color: var(--acc-ink); }
.msgr-card-thumb > img, .msgr-card-thumb > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msgr-card-main { display: flex; flex-direction: column; min-width: 0; }
.msgr-card-name { font-weight: var(--fw-med); }
.msgr-card-meta { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3); }
.msgr-card.error .msgr-card-meta { color: var(--danger-ink); }
.msgr-card-bar {
  position: absolute;
  left: var(--sp-150);
  right: var(--sp-150);
  bottom: var(--sp-050);
  height: var(--sp-025);
  border-radius: var(--r-full);
  background: var(--a-200);
  overflow: hidden;
}
.msgr-card-bar > span { display: block; height: 100%; background: var(--acc); }
.msgr-card-x { position: absolute; top: var(--sp-100); right: var(--sp-100); }
.msgr-drop {
  position: absolute;
  inset: var(--sp-150);
  z-index: 2;
  display: grid;
  place-items: center;
  border: calc(var(--bw) * 2) dashed var(--acc);
  border-radius: var(--r-l);
  background: var(--card);
  pointer-events: none;
}
.msgr-drop-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-100);
  color: var(--acc-ink);
  text-align: center;
}
.msgr-drop-title { font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-semi); }
.msgr-drop-note { font-size: var(--fs-s); color: var(--ink3); }
.msgr-chip { display: inline-flex; align-items: center; gap: var(--sp-075); max-width: 100%; }
.msgr-pend {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-150);
  width: 100%;
  min-width: 0;
  padding: var(--sp-050) var(--sp-050) var(--sp-050) var(--sp-200);
}
.msgr-pend::before {
  content: "";
  position: absolute;
  left: var(--sp-050);
  top: var(--sp-050);
  bottom: var(--sp-050);
  width: calc(var(--bw) * 2);
  border-radius: var(--r-full);
  background: var(--acc);
}
.msgr-pend-sign { flex: none; display: grid; place-items: center; color: var(--acc-ink); }
.msgr-pend > .msgr-doc-main { flex: 1; }
.msgr-pend .msgr-doc-name { color: var(--acc-ink); }
.msgr-letter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-100);
  padding: var(--sp-200) var(--sp-200) 0;
  border-top: var(--bw) solid var(--line);
}
.msgr-main:has(> .msgr-pending:not(.hidden)) > .msgr-letter-bar {
  border-top: 0;
  padding-top: var(--sp-150);
}
.msgr-main:has(> .msgr-letter-bar:not(.hidden)) > .msgr-compose { border-top: 0; }
.msgr-opt-label { color: var(--ink3); }
.msgr-compose {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-100);
  padding: var(--sp-150) var(--sp-200);
  border-top: var(--bw) solid var(--line);
}
.msgr-text {
  flex: 1;
  min-width: 0;
  height: var(--h-field);
  min-height: var(--h-field);
  max-height: 160px;
  padding-block: calc((var(--h-field) - var(--lh)) / 2 - var(--bw));
  resize: none;
}
.msgr-send, .msgr-attach, .msgr-new {
  flex: none;
  width: var(--h-field);
  height: var(--h-field);
  padding: 0;
  justify-content: center;
}
.msgr-send {
  display: inline-grid; place-items: center;
  overflow: hidden;
  border: 0; border-radius: var(--r-full);
  background: var(--acc-solid); color: #fff;
  cursor: pointer;
  transition: width var(--dur-fold) var(--ease-out), margin var(--dur-fold) var(--ease-out),
    opacity var(--dur-fold) var(--ease-out), transform var(--dur-fold) var(--ease-out);
}
@media (hover: hover) { .msgr-send:not(.idle):not(:disabled):hover { filter: brightness(1.08); } }
.msgr-send.idle {
  width: 0; margin-left: calc(-1 * var(--sp-100));
  opacity: 0; transform: scale(.4);
  pointer-events: none;
}
.msgr-send:disabled { opacity: .6; }
[data-motion="calm"] .msgr-send { transition: none; }
@media (prefers-reduced-motion: reduce) { .msgr-send { transition: none; } }
.msgr-closed {
  padding: var(--sp-150) var(--sp-200);
  border-top: var(--bw) solid var(--line);
  font-size: var(--fs-s);
  color: var(--ink3);
  text-align: center;
}
.msgr-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink3);
}
.msgr:not(.has-chat) :is(.msgr-head, .msgr-feed, .msgr-pending, .msgr-letter-bar, .msgr-compose,
                         .msgr-closed) {
  display: none;
}

.msgr-people {
  display: flex;
  flex-direction: column;
  gap: var(--sp-025);
  max-height: 50vh;
  margin-top: var(--sp-150);
  overflow-y: auto;
}
.msgr-group-name { display: flex; align-items: center; gap: var(--sp-200); }
.msgr-group-name > .input { flex: 1; min-width: 0; }
.msgr-avatar.big { width: var(--sp-600); height: var(--sp-600); }
.msgr-picked { display: flex; flex-wrap: wrap; gap: var(--sp-075); margin-top: var(--sp-150); }
.msgr-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-150);
  padding: var(--sp-100) var(--sp-150);
  border-radius: var(--r);
  cursor: pointer;
}
@media (hover: hover) { .msgr-person:hover { background: var(--a-200); } }

.msgr-find { display: none; }
.msgr.narrow {
  --msgr-narrow-w: calc(var(--sp-500) + 2 * var(--sp-150) + 2 * var(--sp-100));
  grid-template-columns: var(--msgr-narrow-w) minmax(0, 1fr);
}
.msgr.narrow > .msgr-main { grid-column: 2; position: relative; }
.msgr.narrow > .msgr-main::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--ink-on-light) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fold) var(--ease-out);
}
.msgr.narrow.list-open > .msgr-main::after { opacity: 1; pointer-events: auto; }
[data-motion="calm"] .msgr.narrow > .msgr-main::after { transition: none; }
.msgr.narrow > .msgr-side {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  width: var(--msgr-narrow-w);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 0 0 transparent;
  transition: width var(--dur-fold) var(--ease-out), box-shadow var(--dur-fold) var(--ease-out);
}
[data-motion="calm"] .msgr.narrow > .msgr-side { transition: none; }
@media (prefers-reduced-motion: reduce) { .msgr.narrow > .msgr-side { transition: none; } }
.msgr.narrow.has-chat:not(.list-open) .msgr-side-head { justify-content: center; padding-inline: 0; }
.msgr.narrow.has-chat:not(.list-open) :is(.msgr-search, .msgr-new, .msgr-section, .msgr-row-main, .msgr-row-time, .msgr-row-pin) {
  display: none;
}
.msgr.narrow.has-chat:not(.list-open) .msgr-find { display: inline-grid; }
.msgr.narrow.has-chat:not(.list-open) .msgr-row {
  position: relative;
  grid-template-columns: auto;
  justify-content: center;
}
.msgr.narrow.has-chat:not(.list-open) .msgr-row-side {
  position: absolute;
  top: var(--sp-050);
  right: var(--sp-050);
}
.msgr.narrow.has-chat:not(.list-open) .msgr-list > .empty-state { display: none; }
.msgr.narrow.has-chat:not(.list-open) .msgr-side > .msgr-undo > .undo-bar { right: auto; width: 300px; }
.msgr.narrow:not(.has-chat) > .msgr-side { width: 100%; }
.msgr.narrow:not(.has-chat) > .msgr-main { visibility: hidden; }
.msgr.narrow.list-open > .msgr-side {
  width: min(320px, 100%);
  box-shadow: var(--sh-overlay);
}
.msgr.narrow.list-open > .msgr-side .msgr-row { min-width: 296px; }
.msgr.narrow.list-open > .msgr-side :is(.msgr-search, .msgr-new, .msgr-section, .msgr-row-main, .msgr-row-time) {
  transition: opacity var(--dur-fold) var(--ease-out);
}
@starting-style {
  .msgr.narrow.list-open > .msgr-side :is(.msgr-search, .msgr-new, .msgr-section, .msgr-row-main, .msgr-row-time) {
    opacity: 0;
  }
}

html[data-mob] .msgr { grid-template-columns: minmax(0, 1fr); }
html[data-mob] .msgr.has-chat .msgr-side { display: none; }
html[data-mob] .msgr:not(.has-chat) .msgr-main { display: none; }
html[data-mob] .msgr-back { display: inline-grid; }
html[data-mob] .msgr-bubble { max-width: 85%; }
html[data-mob] .msgr-card-wrap { flex-basis: 100%; }
html[data-mob] .msgr-letter-bar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: var(--sp-100);
}
html[data-mob] .msgr-main:has(> .msgr-letter-bar:not(.hidden)) > .msgr-compose {
  padding-top: var(--sp-100);
}
html[data-mob] .msgr-letter-bar > * { flex: none; }

/* The section «Сообщения» fills its screen edge to edge, as Telegram's window (15.983, 25.10: «скругление фона в
   сообщениях и в целом отступы от интерфейсов давай уберём, расширим так сказать окно сообщений»): no margins, no
   rounding, no frame — the list and the chat meet the header and the side menu by their lines */
.screen.msgr-host { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.screen.msgr-host > .msgr {
  height: var(--screen-room);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card);
  overflow: hidden;
}