#tab-chat {
  height: calc(100vh - var(--header-h) - 36px);
  min-height: 420px;
  display: flex;
}
#chatRoot.chat-shell {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 280px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
}
.chat-list, .chat-thread, .chat-side {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-list, .chat-side { background: var(--card); }
.chat-list { border-right: 1px solid var(--line); }
.chat-side { border-left: 1px solid var(--line); }
.chat-list-head, .chat-thread-head, .chat-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  min-height: 52px;
}
.chat-side-head { flex-wrap: wrap; }
.chat-thread-head { flex-wrap: nowrap; }
.chat-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.chat-head-title strong, .chat-head-title .chat-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-head-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chat-more { position: relative; }
.chat-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.chat-more-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-more-menu button:hover { background: rgba(78, 115, 223, 0.12); }
.chat-more-menu[hidden] { display: none !important; }
.chat-thread-search { position: relative; padding: 8px 12px 0; }
.chat-thread-search .search { width: 100%; }
.chat-thread-hits {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 4px);
  z-index: 6;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.chat-thread-hits button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-thread-hits button:hover { background: rgba(78, 115, 223, 0.12); }
.chat-thread-hits span, .chat-thread-hits .chat-meta {
  color: var(--muted);
  font-size: 12px;
}
.chat-attach-wrap { position: relative; flex: 0 0 auto; }
.chat-attach-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  min-width: 140px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.chat-attach-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.chat-attach-menu button:hover { background: rgba(78, 115, 223, 0.12); }
.chat-media-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chat-media-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(78, 115, 223, 0.08);
}
.chat-media-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-side-link {
  display: block;
  margin: 6px 0;
  color: var(--primary);
  font-size: 13px;
  word-break: break-all;
}
.chat-inline-link { color: var(--primary); }
.chat-msg.is-mine .chat-inline-link { color: #fff; }
.chat-list-head strong, .chat-thread-head strong { font-size: 15px; font-weight: 700; }
.chat-list-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
}
.chat-list-actions .btn-primary,
.chat-list-actions .btn-ghost,
.chat-composer .btn-primary,
.chat-thread-head .btn-ghost,
.chat-side .btn-ghost {
  margin-top: 0;
  height: var(--ctrl-h);
  padding: 0 12px;
  gap: 6px;
  border-radius: var(--ctrl-radius);
}
.chat-list-actions .btn-primary,
.chat-list-actions .btn-ghost { flex: 1; }
.chat-list-actions .btn-ghost,
.chat-composer .chat-icon-btn {
  background: var(--card);
  color: var(--text);
  border-color: var(--ctrl-border);
}
.chat-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ctrl-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.chat-icon-btn svg,
.chat-list-actions svg,
.chat-composer .btn-primary svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.chat-icon-btn:hover { background: rgba(78, 115, 223, 0.08); color: var(--text); }
.chat-icon-btn.on {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(78, 115, 223, 0.12);
}
.chat-grow { flex: 1; min-width: 0; }
.chat-search-wrap { padding: 10px 12px 0; }
.chat-search-wrap .search { width: 100%; }
.chat-filters { display: flex; gap: 6px; padding: 8px 12px; }
.chat-filters button, .chat-mini {
  border: 1px solid var(--ctrl-border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-filters button.on, .chat-mini.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chat-hint {
  margin: 0 12px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(78, 115, 223, 0.12);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.chat-list-body, .chat-messages, .chat-side-body { flex: 1; overflow: auto; }
.chat-row, .chat-hit {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 10px 12px;
  cursor: pointer;
}
.chat-row:hover, .chat-hit:hover { background: rgba(0, 0, 0, 0.04); }
.chat-row.on { background: rgba(78, 115, 223, 0.12); }
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.chat-row-main, .chat-hit-main { min-width: 0; flex: 1; }
.chat-row-top, .chat-hit-top { display: flex; gap: 8px; align-items: baseline; }
.chat-row-top strong, .chat-hit-top strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.chat-time, .chat-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.chat-preview {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.chat-unread {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger, #f1416c);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-pin { color: var(--primary); font-size: 11px; }
.chat-empty { padding: 28px 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.chat-section-label {
  padding: 8px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-thread { background: var(--page); }
.chat-messages { padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.chat-cards {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 10px 14px 0;
}
.chat-card {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.chat-card strong {
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-card .btn-ghost { height: 28px; margin-top: 2px; }
.chat-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 14px 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(78, 115, 223, 0.1);
}
.chat-pin-jump {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.chat-pin-jump span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.chat-mention {
  color: var(--primary);
  font-weight: 700;
}
.chat-msg.is-mine .chat-mention { color: #fff; text-decoration: underline; }
.chat-mention-pop {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 64px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.chat-mention-pop button {
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 8px 10px;
  cursor: pointer;
}
.chat-mention-pop button:hover { background: rgba(78, 115, 223, 0.12); }
.chat-thread { position: relative; }
#chatRoot.is-drop .chat-composer { outline: 2px dashed var(--primary); outline-offset: -4px; }
.chat-day {
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 11px;
}
.chat-author {
  margin: 0 2px 3px;
  font-size: 12px;
  font-weight: 700;
}
.chat-msg.is-mine .chat-author { text-align: right; }
.chat-peer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 0 14px;
}
.chat-peer .chat-avatar { width: 72px; height: 72px; font-size: 22px; }
.chat-peer-name { margin-top: 10px; font-size: 16px; font-weight: 700; }
.chat-peer .btn-primary { margin-top: 12px; }
.chat-peer-data {
  width: 100%;
  margin: 14px 0 0;
  text-align: left;
}
.chat-peer-data dt {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-peer-data dd { margin: 2px 0 0; font-size: 13px; word-break: break-word; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(78%, 640px); }
.chat-msg-row { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.chat-msg.is-mine .chat-msg-main { align-items: flex-end; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-system { align-self: center; max-width: 90%; align-items: center; }
.chat-bubble {
  position: relative;
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(24, 28, 50, 0.06), 0 6px 16px rgba(76, 87, 125, 0.08);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.chat-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #fff transparent transparent;
}
.chat-msg.is-mine .chat-bubble {
  border-radius: 16px 4px 16px 16px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(78, 115, 223, 0.28);
}
.chat-msg.is-mine .chat-bubble::before {
  left: auto;
  right: -6px;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent transparent var(--primary);
}
.chat-msg.is-system .chat-bubble {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 8px;
}
.chat-msg.is-system .chat-bubble::before { display: none; }
.chat-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: -2px 0 6px;
  padding: 4px 8px;
  border-left: 3px solid currentColor;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 12px;
  opacity: 0.92;
}
.chat-quote span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-msg.is-mine .chat-quote { background: rgba(255, 255, 255, 0.16); }
.chat-attachs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.chat-msg.is-mine .chat-attachs { align-items: flex-end; }
.chat-shot { display: block; line-height: 0; }
.chat-img {
  display: block;
  width: 240px;
  max-width: 100%;
  max-height: 240px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(76, 87, 125, 0.12);
}
.chat-react-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reaction {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 1px 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-reaction.on { border-color: var(--primary); background: rgba(78, 115, 223, 0.16); }
.chat-receipt { letter-spacing: -1px; }
.chat-msg.is-hit .chat-bubble { box-shadow: 0 0 0 2px var(--primary); }
.chat-msg.is-failed .chat-bubble { outline: 1px solid var(--danger, #f1416c); }
.chat-msg-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; color: var(--muted); font-size: 11px; }
.chat-msg-actions { display: flex; gap: 8px; }
.chat-msg-actions button, .chat-linkish {
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.chat-msg.is-mine .chat-msg-meta { color: var(--muted); }
.chat-file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(280px, 100%);
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(24, 28, 50, 0.04);
  color: var(--text);
  text-decoration: none;
}
.chat-file-ext {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-file-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.chat-file-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.chat-file-body span { color: var(--muted); font-size: 12px; }
.chat-file-dl {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--muted);
}
.chat-file-dl svg { width: 18px; height: 18px; display: block; margin: 5px auto; }
.chat-file:hover { border-color: rgba(78, 115, 223, 0.45); }
.chat-older, .chat-compose-err { color: var(--muted); font-size: 12px; text-align: center; }
.chat-compose-err { color: var(--danger, #f1416c); text-align: left; padding: 0 2px 4px; }
.chat-typing {
  padding: 0 16px 6px;
  color: var(--muted);
  font-size: 12px;
}
.chat-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
  padding: 6px 8px;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: rgba(78, 115, 223, 0.1);
  font-size: 12px;
}
.chat-reply div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chat-reply span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.chat-composer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.chat-emoji-wrap { position: relative; flex: 0 0 auto; }
.chat-emoji-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  width: 280px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.chat-emoji-pop button {
  border: 0;
  background: transparent;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat-emoji-pop button:hover { background: rgba(78, 115, 223, 0.12); }
.chat-composer textarea {
  flex: 1 1 180px;
  min-height: 42px;
  max-height: 140px;
  resize: vertical;
  border: 1px solid var(--ctrl-border);
  border-radius: 18px;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--card);
}
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chat-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(78, 115, 223, 0.12);
  font-size: 12px;
}
.chat-side-body { padding: 12px 14px 18px; }
.chat-side h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chat-person { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.chat-person-name { font-size: 13px; font-weight: 600; }
.chat-person-job { font-size: 12px; color: var(--muted); }
.chat-side-actions, .chat-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.chat-link-row button.link { flex: 1; text-align: left; }
.chat-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 13px; }
.chat-field .search { width: 100%; }
.chat-field textarea.search {
  display: block;
  width: 100%;
  height: var(--ctrl-h);
  min-height: var(--ctrl-h);
  padding: 8px 12px 4px;
  line-height: 18px;
  resize: vertical;
}
.chat-pick { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.chat-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.chat-edit textarea {
  width: 100%;
  min-height: 64px;
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--ctrl-border);
  border-radius: 8px;
  padding: 8px;
}
.chat-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f1416c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-composer[hidden],
.chat-reply[hidden],
.chat-typing[hidden],
.chat-cards[hidden],
.chat-pinned[hidden],
.chat-emoji-pop[hidden],
.chat-mention-pop[hidden],
.chat-thread-search[hidden],
.chat-thread-hits[hidden],
.chat-attach-menu[hidden],
.chat-hint[hidden],
.chat-compose-err[hidden],
.chat-toast[hidden],
.chat-nav-badge[hidden],
.chat-back[hidden] {
  display: none !important;
}
.chat-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.chat-toast strong { display: block; margin-bottom: 2px; }
.chat-toast span { color: var(--muted); font-size: 13px; }
.chat-back { display: none; }
html[data-color-scheme="dark"] .chat-row:hover,
html[data-color-scheme="dark"] .chat-hit:hover { background: rgba(255, 255, 255, 0.06); }
html[data-color-scheme="dark"] .chat-bubble { background: #243044; }
html[data-color-scheme="dark"] .chat-bubble::before { border-color: transparent #243044 transparent transparent; }
html[data-color-scheme="dark"] .chat-msg.is-mine .chat-bubble { background: var(--primary); }
html[data-color-scheme="dark"] .chat-msg.is-mine .chat-bubble::before { border-color: transparent transparent transparent var(--primary); }
html[data-color-scheme="dark"] .chat-file { background: #1e293b; }
@media (max-width: 980px) {
  #chatRoot.chat-shell { grid-template-columns: 1fr; }
  #chatRoot .chat-side { display: none; }
  #chatRoot.is-side { grid-template-columns: 1fr; }
  #chatRoot.is-side .chat-list, #chatRoot.is-side .chat-thread { display: none; }
  #chatRoot.is-side .chat-side { display: flex; }
  #chatRoot.is-thread .chat-list { display: none; }
  #chatRoot:not(.is-thread):not(.is-side) .chat-thread,
  #chatRoot:not(.is-thread):not(.is-side) .chat-side { display: none; }
  .chat-back { display: inline-flex; }
}