/* ===========================================================================
   Сообщения: переписка, вложения и движущиеся смайлики.
   Отдельный файл, чтобы не зависеть от стилей комнаты митинга.
   =========================================================================== */

.dm-screen{height:100%; display:flex; flex-direction:column; gap:12px; overflow:hidden}

.dm-feed{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px; padding:4px 2px 8px;
}

/* --------------------------------- сообщение --------------------------------- */
.dm-feed .msg{display:flex; flex-direction:column; align-items:flex-start; max-width:82%}
.dm-feed .msg.me{align-self:flex-end; align-items:flex-end}
.dm-feed .msg .mh{display:flex; gap:7px; align-items:baseline; margin:0 4px 3px}
.dm-feed .msg .mh b{font-size:12.5px; font-weight:750}
.dm-feed .msg .mh i{font-size:11px; opacity:.6; font-style:normal}
.dm-feed .msg .mb{
  font-size:15.5px; padding:10px 14px; border-radius:18px; border-top-left-radius:6px;
  background:var(--glass, rgba(255,255,255,.12)); border:1px solid var(--glass-line);
  white-space:pre-wrap; word-break:break-word;
}
.dm-feed .msg.me .mb{
  border-top-left-radius:18px; border-top-right-radius:6px;
  background:var(--olive, #585A43); color:var(--cream, #EDEBD6); border-color:transparent;
}
/* Смайлик и медиа — без «пузыря»: рамка вокруг картинки только мешает. */
.dm-feed .msg.plain .mb{background:none; border:none; padding:0}

.dm-media{
  max-width:100%; max-height:52vh; border-radius:18px; display:block;
  background:rgba(0,0,0,.15);
}
.dm-audio{width:min(280px,72vw); height:40px}
.dm-note{align-self:center; font-size:12.5px; opacity:.7}

/* --------------------------------- поле ввода --------------------------------- */
.dm-composer{
  flex:0 0 auto; padding:10px; display:flex; flex-direction:column; gap:10px;
  border-radius:22px; margin-bottom:calc(4px + var(--safe-b, 0px));
}
.dm-tools{display:flex; gap:8px; justify-content:space-around}
.dm-tool{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--glass-line);
  background:var(--field, rgba(255,255,255,.09));
  color:inherit; cursor:pointer; font-family:inherit;
}
.dm-tool:active{transform:scale(.92)}
.dm-send-row{display:flex; gap:8px; align-items:center}
.dm-input{
  flex:1; min-width:0; padding:12px 15px; font:inherit; font-size:16px;
  border-radius:16px; border:1px solid var(--glass-line);
  background:var(--field, rgba(255,255,255,.09)); color:inherit;
}
.dm-input:focus{outline:2px solid var(--olive, #585A43); outline-offset:1px}
.dm-send{
  width:46px; height:46px; flex:0 0 auto; border-radius:16px; border:none; cursor:pointer;
  display:grid; place-items:center; background:var(--olive, #585A43);
  color:var(--cream, #EDEBD6); font-family:inherit;
}
.dm-send:active{transform:scale(.94)}

/* ------------------------------- запись ------------------------------- */
.dm-rec-preview{width:100%; border-radius:18px; background:#000; aspect-ratio:4/3; object-fit:cover; transform:scaleX(-1)}
.dm-rec-dot{
  width:60px; height:60px; border-radius:50%; margin:6px auto;
  background:#C2604F; animation:recpulse 1.2s ease-in-out infinite;
}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(194,96,79,.55)}50%{box-shadow:0 0 0 16px rgba(194,96,79,0)}}

/* --------------------------- движущиеся смайлики --------------------------- */
.sticker-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.sticker-btn{
  aspect-ratio:1; border-radius:16px; border:1px solid var(--glass-line);
  background:var(--field, rgba(255,255,255,.08)); cursor:pointer;
  display:grid; place-items:center; font-family:inherit;
}
.sticker-btn:active{transform:scale(.94)}
.sticker{font-size:30px; line-height:1; display:inline-block; will-change:transform}
.dm-sticker .sticker{font-size:56px}

.anim-beat{animation:st-beat 1s ease-in-out infinite}
.anim-tada{animation:st-tada 1.4s ease-in-out infinite}
.anim-shake{animation:st-shake .9s ease-in-out infinite}
.anim-pop{animation:st-pop 1.2s ease-in-out infinite}
.anim-clap{animation:st-clap .6s ease-in-out infinite}
.anim-flame{animation:st-flame .7s ease-in-out infinite}
.anim-bow{animation:st-bow 1.6s ease-in-out infinite}
.anim-spin{animation:st-spin 2.4s linear infinite}
.anim-tilt{animation:st-tilt 1.8s ease-in-out infinite}
.anim-wave{animation:st-wave 1s ease-in-out infinite}
.anim-float{animation:st-float 2.2s ease-in-out infinite}
.anim-fly{animation:st-fly 1.8s ease-in-out infinite}

@keyframes st-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.22)}40%{transform:scale(1)}60%{transform:scale(1.14)}}
@keyframes st-tada{0%,100%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.92) rotate(-6deg)}30%,50%,70%{transform:scale(1.14) rotate(6deg)}40%,60%{transform:scale(1.14) rotate(-6deg)}}
@keyframes st-shake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-7deg)}75%{transform:translateX(3px) rotate(7deg)}}
@keyframes st-pop{0%,100%{transform:scale(1)}45%{transform:scale(1.3)}}
@keyframes st-clap{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.08)}}
@keyframes st-flame{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.16) translateY(-4px)}}
@keyframes st-bow{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(-8deg)}}
@keyframes st-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes st-tilt{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes st-wave{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes st-fly{0%{transform:translate(-4px,4px) rotate(-8deg)}100%{transform:translate(6px,-8px) rotate(-2deg)}}

/* Кому движение мешает — смайлик остаётся, но стоит на месте. */
@media (prefers-reduced-motion: reduce){
  .sticker{animation:none !important}
  .dm-rec-dot{animation:none !important}
}