/* ============================================
   H1 — Чат в сайдбаре (mchat)
   ============================================ */


/* ═══ Новая структура чата ═══ */
#people {
  display: flex;
  flex-direction: column;
  max-height: 600px;
  overflow: hidden;
}

#people .mchat-form {
  order: 1;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  border-top: none;
}

#people .mchat-online-bar {
  order: 2;
  flex-shrink: 0;
}

#people .ps-chat-body {
  order: 3;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  scroll-behavior: smooth;
}
.mchat-msg__text img {
    width: -webkit-fill-available;
}
#people .ps-chat-body::-webkit-scrollbar { width: 6px; }
#people .ps-chat-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 3px;
}
@keyframes mchatHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(91,111,214,.7); }
  50%  { box-shadow: 0 0 0 8px rgba(91,111,214,.2); }
  100% { box-shadow: 0 0 0 0 rgba(91,111,214,0); }
}
/* ═══ Группа по дате ═══ */
.mchat__date {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted, #888);
  margin: 14px 0 8px;
  position: relative;
}
.mchat__date::before,
.mchat__date::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border, rgba(255,255,255,.08));
}
.mchat__date::before { left: 8px; }
.mchat__date::after { right: 8px; }
.mchat__date span {
  background: var(--bg-surface, #1a1a1f);
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

/* ═══ Сообщение ═══ */
.mchat-msg {
  display: flex;
  gap: 8px; position: relative;
  align-items: flex-end;
  max-width: 88%;
  animation: mchatIn .2s ease;
}
.mchat-msg__more {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;              /* ⚡ скрыта по умолчанию */
  transition: opacity .15s, background .15s, transform .15s;
  z-index: 2;
}

/* ⚡ При hover на сообщение — показываем */
.mchat-msg:hover .mchat-msg__more {
  opacity: 1;
}

/* ⚡ Для своих сообщений — другое положение (слева) */
.mchat-msg--mine .mchat-msg__more {
  right: auto;
  left: 6px;
}

.mchat-msg__more:hover {
  background: var(--accent, #5b6fd6);
  transform: scale(1.1);
}

.mchat-msg__more:active {
  transform: scale(.95);
}

/* ⚡ На мобильных — всегда видна (для тача) */
@media (max-width: 768px) {
  .mchat-msg__more {
    opacity: .7;
  }
}
@keyframes mchatIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mchat-msg--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.mchat-msg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .15s;
  border: 2px solid transparent;
}
.mchat-msg__avatar:hover {
  transform: scale(1.1);
  border-color: var(--accent, #5b6fd6);
}

.mchat-msg__body {
  background: var(--bg-elevated, #2a2a30);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
  min-width: 0;
  max-width: 100%;
}
.mchat-msg--mine .mchat-msg__body {
  background: var(--accent-grad, linear-gradient(135deg, #5b6fd6, #4b7bec));
  border-radius: 14px 14px 4px 14px;
  color: #fff;
}

.mchat-msg__name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent, #5b6fd6);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mchat-msg--mine .mchat-msg__name {
  color: rgba(255,255,255,.85);
}
.mchat-msg__online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.mchat-msg__text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-primary, #fff);
  word-wrap: break-word;
}
.mchat-msg--mine .mchat-msg__text {
  color: #fff;
}

.mchat-msg__time {
  font-size: 10px;
  color: var(--text-muted, #888);
  margin-top: 4px;
  text-align: right;
}
.mchat-msg--mine .mchat-msg__time {
  color: rgba(255,255,255,.7);
}

/* ═══ Reply ═══ */
.mchat-msg__reply {
  background: rgba(0,0,0,.2);
  border-left: 3px solid var(--accent, #5b6fd6);
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 11.5px;
  cursor: pointer;
}
.mchat-msg--mine .mchat-msg__reply {
  background: rgba(255,255,255,.15);
  border-color: #fff;
}
.mchat-msg__reply b {
  display: block;
  font-weight: 700;
  color: var(--accent, #5b6fd6);
}
.mchat-msg--mine .mchat-msg__reply b {
  color: #fff;
}
.mchat-msg__reply span {
  color: var(--text-muted, #888);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mchat-msg--mine .mchat-msg__reply span {
  color: rgba(255,255,255,.8);
}

/* ═══ Реакции ═══ */
.mchat-msg__reactions {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.mchat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: .15s;
}
.mchat-reaction:hover {
  background: rgba(255,255,255,.15);
}
.mchat-reaction--mine {
  background: rgba(91,111,214,.3);
  border-color: var(--accent, #5b6fd6);
}
.mchat-reaction span {
  font-size: 10.5px;
  color: var(--text-muted, #888);
}
.mchat-msg--mine .mchat-reaction {
  background: rgba(255,255,255,.2);
}
.mchat-msg--mine .mchat-reaction span {
  color: rgba(255,255,255,.85);
}

/* ═══ Индикатор "печатает" ═══ */
.mchat-typing {
  display: inline-flex;
  gap: 3px;
  padding: 6px 12px;
  background: var(--bg-elevated, #2a2a30);
  border-radius: 14px;
  margin-left: 40px;
  align-self: flex-start;
  width: fit-content;
}
.mchat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #888);
  animation: mchatTyping 1.4s infinite;
}
.mchat-typing span:nth-child(2) { animation-delay: .2s; }
.mchat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mchatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ═══ Форма ввода ═══ */
.mchat-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "tools tools tools"
    ". input send";
  gap: 6px;
  padding: 8px 10px;
}

.mchat-form__tools {
  grid-area: tools;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mchat-form__input {
  grid-area: input;
  min-width: 0;
}

.mchat-form__send {
  grid-area: send;
}

.mchat-form__tools {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.mchat-form__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: .15s;
}
.mchat-form__btn:hover {
  background: var(--bg-elevated, #2a2a30);
  color: var(--text-primary, #fff);
}

.mchat-form__input {
  flex: 1;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 12px;
  background: var(--bg-elevated, #2a2a30);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 18px;
  color: var(--text-primary, #fff);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  resize: none;
  transition: .15s;
}
.mchat-form__input:focus {
  border-color: var(--accent, #5b6fd6);
}
.mchat-form__input::placeholder {
  color: var(--text-muted, #888);
}

.mchat-form__send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent-grad, linear-gradient(135deg, #5b6fd6, #4b7bec));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: .15s;
  flex-shrink: 0;
}
.mchat-form__send:hover { opacity: .9; transform: scale(1.05); }
.mchat-form__send:disabled { opacity: .5; cursor: not-allowed; }

/* ═══ Панель смайлов ═══ */
.mchat-smiles {
  position: absolute;
  bottom: 45%;
  left: 10px;
  right: 10px;
  background: var(--bg-surface, #1a1a1f);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.3);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.mchat-smiles.open { display: block; }

.mchat-smiles__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.mchat-smiles__item {
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: .1s;
}
.mchat-smiles__item:hover {
  background: var(--bg-elevated, #2a2a30);
  transform: scale(1.15);
}

/* ═══ Reply-превью над формой ═══ */
.mchat-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated, #2a2a30);
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  border-left: 3px solid var(--accent, #5b6fd6);
}
.mchat-reply-preview__body {
  flex: 1;
  min-width: 0;
}
.mchat-reply-preview__body b {
  display: block;
  font-size: 11px;
  color: var(--accent, #5b6fd6);
}
.mchat-reply-preview__body span {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mchat-reply-preview__close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
}
.mchat-reply-preview__close:hover {
  background: rgba(255,255,255,.1);
}

/* ═══ Онлайн в шапке ═══ */
.mchat-online-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-surface, #1a1a1f);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  font-size: 11.5px;
  color: var(--text-muted, #888);
}
.mchat-online-bar__avatars {
  display: flex;
}
.mchat-online-bar__avatars img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface, #1a1a1f);
  margin-left: -6px;
  object-fit: cover;
}
.mchat-online-bar__avatars img:first-child {
  margin-left: 0;
}

/* ═══ Меню сообщения (long-press) ═══ */
.mchat-actions {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.mchat-actions.open { display: flex; }

.mchat-actions__sheet {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface, #1a1a1f);
  border-radius: 20px 20px 0 0;
  padding: 8px 0 20px;
  animation: mchatSheetUp .25s ease;
}
@keyframes mchatSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.mchat-actions__emojis {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  overflow-x: auto;
}
.mchat-actions__emoji {
  width: 40px;
  height: 40px;
  background: var(--bg-elevated, #2a2a30);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.mchat-actions__emoji:hover { transform: scale(1.15); }

.mchat-actions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: var(--text-primary, #fff);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.mchat-actions__item:hover {
  background: var(--bg-elevated, #2a2a30);
}
.mchat-actions__item--danger {
  color: #ef4444;
}

/* ═══ Цвета текста (uColor) ═══ */
.mchat-msg__text span[class*="u"] {
  font-weight: inherit !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

.mchat-msg__text .u1,  .mchat-msg__text .uAd { color: #e74c3c !important; }
.mchat-msg__text .u2  { color: #e67e22 !important; }
.mchat-msg__text .u3  { color: #f1c40f !important; }
.mchat-msg__text .u4  { color: #2ecc71 !important; }
.mchat-msg__text .u5  { color: #3498db !important; }
.mchat-msg__text .u6  { color: #9b59b6 !important; }
.mchat-msg__text .u7  { color: #e91e63 !important; }
.mchat-msg__text .u8  { color: #00bcd4 !important; }
.mchat-msg__text .u9  { color: #ff5722 !important; }
.mchat-msg__text .u10 { color: #4caf50 !important; }
.mchat-msg__text .u11 { color: #03a9f4 !important; }
.mchat-msg__text .u12 { color: #673ab7 !important; }
.mchat-msg__text .u13 { color: #f44336 !important; }
.mchat-msg__text .u14 { color: #ff9800 !important; }
.mchat-msg__text .u15 { color: #ffeb3b !important; }
.mchat-msg__text .u16 { color: #8bc34a !important; }
.mchat-msg__text .u17 { color: #00acc1 !important; }
.mchat-msg__text .u18 { color: #3f51b5 !important; }
.mchat-msg__text .u19 { color: #c0392b !important; }
.mchat-msg__text .u20 { color: #f39c12 !important; }
/* ═══ Скрываем старую форму uCoz ═══ */
#people #paper-cont {
  display: none !important;
}

#people .mchat-form:not(#mc-form) {
  display: none !important;
}
#people #name-cit,
#people .mchat-send,
#people button[onclick*="mchat"],
#people .ps-chat-send {
  display: none !important;
}
/* ═══ Скрываем старую форму uCoz ═══ */
#people .h1-wall__input-row,
#people #paper-cont,
#people .ps-chat-form,
#people .mchat-form:not(#mc-form) {
  display: none !important;
}

/* ═══ uColor — плашки как в стене ═══ */
.mchat-msg__text .uAd {
  margin: 4px 0;
  padding: 12px 8px;
  border-radius: 8px;
  font-weight: 600;
  color: #ffffff !important;
  text-align: center;
  font-size: 14px;
  background-size: cover !important;
  background-position: center !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Убираем старые конфликты */
.mchat-msg__text .uAd.u1  { background-image: linear-gradient(45deg, #e74c3c 0%, #c0392b 100%) !important; }
.mchat-msg__text .uAd.u2  { background-image: linear-gradient(45deg, #fc36fd 0%, #5d3fda 100%) !important; }
.mchat-msg__text .uAd.u3  { background-image: linear-gradient(45deg, #f1c40f 0%, #f39c12 100%) !important; }
.mchat-msg__text .uAd.u4  { background-image: linear-gradient(45deg, #2ecc71 0%, #27ae60 100%) !important; }
.mchat-msg__text .uAd.u5  { background-image: linear-gradient(45deg, #3498db 0%, #2980b9 100%) !important; }
.mchat-msg__text .uAd.u6  { background-image: linear-gradient(45deg, #9b59b6 0%, #8e44ad 100%) !important; }
.mchat-msg__text .uAd.u7  { background-image: linear-gradient(45deg, #e91e63 0%, #c2185b 100%) !important; }
.mchat-msg__text .uAd.u8  { background-image: linear-gradient(45deg, #00bcd4 0%, #0097a7 100%) !important; }
.mchat-msg__text .uAd.u9  { background-image: linear-gradient(45deg, #ff5722 0%, #d84315 100%) !important; }
.mchat-msg__text .uAd.u10 { background-image: linear-gradient(45deg, #4caf50 0%, #388e3c 100%) !important; }
.mchat-msg__text .uAd.u11 { background-image: linear-gradient(45deg, #03a9f4 0%, #0288d1 100%) !important; }
.mchat-msg__text .uAd.u12 { background-image: linear-gradient(45deg, #673ab7 0%, #512da8 100%) !important; }
.mchat-msg__text .uAd.u13 { background-image: linear-gradient(45deg, #f44336 0%, #c62828 100%) !important; }
.mchat-msg__text .uAd.u14 { background-image: linear-gradient(45deg, #ff9800 0%, #ef6c00 100%) !important; }
.mchat-msg__text .uAd.u15 { background-image: linear-gradient(45deg, #ffeb3b 0%, #fbc02d 100%) !important; }
.mchat-msg__text .uAd.u16 { background-image: linear-gradient(45deg, #8bc34a 0%, #689f38 100%) !important; }
.mchat-msg__text .uAd.u17 { background-image: linear-gradient(45deg, #00acc1 0%, #00838f 100%) !important; }
.mchat-msg__text .uAd.u18 { background-image: linear-gradient(45deg, #3f51b5 0%, #303f9f 100%) !important; }
.mchat-msg__text .uAd.u19 { background-image: linear-gradient(45deg, #c0392b 0%, #8e2a22 100%) !important; }
.mchat-msg__text .uAd.u20 { background-image: linear-gradient(45deg, #f39c12 0%, #d35400 100%) !important; }

/* ═══ Палитра цветов ═══ */
.mchat-colors__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.mchat-colors__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.mchat-color {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.mchat-color:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}

.mchat-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent, #5b6fd6);
}

.mchat-color--none {
  background: var(--bg-elevated, #2a2a30);
  border: 1px dashed var(--border, rgba(255,255,255,.2));
}