.messages{flex:1;overflow:auto;padding:18px 20px 90px;background:#0f1822}
.date-divider,.new-divider{margin:16px auto;display:table;background:#233242;color:#d4deea;padding:6px 12px;border-radius:999px;font-size:13px}
.new-divider{background:#2a4055;color:#8fd0ff}
.msg-row{display:flex;margin:8px 0}
.msg-row.in{justify-content:flex-start}
.msg-row.out{justify-content:flex-end}
.msg{max-width:72%;min-width:0;border-radius:18px;padding:10px 12px 20px;position:relative;word-wrap:break-word}
.msg.in{background:var(--bubble-in)}
.msg.out{background:var(--bubble-out)}
.reply-box{background:rgba(255,255,255,.06);border-left:3px solid #73c05d;border-radius:10px;padding:6px 8px;margin-bottom:8px;font-size:13px;cursor:pointer}
.reply-author{color:#89d16f;font-weight:600}
.msg-time{position:absolute;right:10px;bottom:5px;font-size:12px;color:#bfd0e1;display:flex;align-items:center;gap:5px}
.status-read{color:#7dc4ff}
.reactions{position:absolute;right:8px;bottom:-14px;display:flex;gap:4px;background:#1b2a39;border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:4px 6px;box-shadow:var(--shadow);font-size:14px;cursor:pointer}
.msg .big-emoji{font-size:128px;line-height:1}
.msg .mid-emoji{font-size:64px;line-height:1.1}
.attach-grid{
  display:grid;gap:3px;margin:4px 0;
  max-width:420px;       /* ширина "альбома" */
}
.attach-grid:has(> *:only-child)      { grid-template-columns:1fr }
.attach-grid:has(> *:nth-child(2):last-child) { grid-template-columns:1fr 1fr }
.attach-grid:has(> *:nth-child(3):last-child) { grid-template-columns:1fr 1fr 1fr }
.attach-grid:has(> *:nth-child(4))    { grid-template-columns:1fr 1fr }
/* для одиночного фото — более компактно */
.attach-grid:has(> *:only-child) .attach-photo img,
.attach-grid:has(> *:only-child) .attach-video{
  max-height:380px;max-width:100%;object-fit:contain;
}

.attach-photo{border-radius:10px;overflow:hidden;cursor:pointer;background:#0f1822}
.attach-photo img{width:100%;height:100%;max-height:320px;object-fit:cover;display:block}

.attach-video{width:100%;max-height:320px;border-radius:10px;background:#000;display:block}

.voice-wave{flex:1;height:22px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.22) 0 2%, transparent 2% 4%, rgba(255,255,255,.16) 4% 6%, transparent 6% 8%, rgba(255,255,255,.22) 8% 10%, transparent 10% 12%, rgba(255,255,255,.18) 12% 14%, transparent 14% 16%);background-size:22px 100%}

.reactions span{padding:2px 8px;border-radius:999px;background:#243747;cursor:pointer}

.spoiler{background:#243747;color:#243747;border-radius:4px;padding:0 4px;cursor:pointer}
.spoiler.open{color:inherit;background:transparent}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(0,0,0,.25);padding:0 4px;border-radius:4px}
.msg img.e{width:22px;height:22px;vertical-align:-5px}
.big-emoji img.e{width:128px;height:128px}
.mid-emoji  img.e{width:64px;height:64px}
.emoji-grid.webp span img{width:28px;height:28px;display:block}
/* реакции */
.reactions span img.r, .ctx-menu .reacts span img.r { width:22px; height:22px; vertical-align:-5px; }
.react-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.react-row img.r{width:24px;height:24px}

.rx-ava{width:18px;height:18px;border-radius:50%;vertical-align:-4px;margin-left:2px;object-fit:cover}
.reactions span{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#243747;cursor:pointer}
.reactions span.on{background:#3a6ea5;color:#fff}
.reactions span img.r{width:18px;height:18px;vertical-align:-4px}
.react-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.04)}
.react-row img.r{width:24px;height:24px}

.mi-section{padding:8px 10px 4px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.mi-reactor{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px}
.mi-reactor img.r{width:24px;height:24px}
.mi-reactor:hover{background:#243747}
.mi-ava{width:22px;height:22px;border-radius:50%;object-fit:cover}
.mi-name{color:#e4edf7}
.ctx-menu{max-width:280px}

.ctx-menu .reacts span{cursor:pointer;padding:4px;border-radius:8px}
.ctx-menu .reacts span:hover{background:#243747}
/* Музыкальный и голосовой плеер внутри сообщения */
.music-list{display:flex;flex-direction:column;gap:4px;min-width:0}

.music-item,
.voice-player{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:10px;
  background:rgba(255,255,255,.04);
  min-width:0;max-width:100%;
  overflow:hidden;
}
.voice-player .voice-play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:#55a9f8;color:#fff;display:grid;place-items:center;cursor:pointer}
.voice-player .voice-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.voice-player .voice-body > *{min-width:0}
.voice-player .audio-title{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;font-size:13px;
}
.voice-player .voice-seek{width:100%;accent-color:var(--accent);height:3px;margin:0}
.voice-player .voice-meta{
  display:flex;justify-content:space-between;gap:8px;
  font-size:12px;color:#c3d2df;min-width:0;
}
.voice-player .voice-label,
.voice-player .voice-time{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0;
}
.voice-player .voice-time{text-align:right;flex:0 0 auto}
.voice-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.voice-seek{width:100%;accent-color:var(--accent);height:4px;margin:0}
.voice-meta{display:flex;justify-content:space-between;font-size:12px;color:#c3d2df}
.voice-play{cursor:pointer;width:42px;height:42px;border-radius:50%;background:#55a9f8;color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.video-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;
  display:grid;place-items:center;
}
.video-overlay .video-wrap{position:relative;width:min(92vw,900px)}
.video-overlay video{
  max-width:92vw;max-height:86vh;
  width:auto;height:auto;border-radius:14px;background:#000;
}
.video-overlay .video-close,
.video-overlay .video-full{
  position:fixed;top:14px;
  background:rgba(255,255,255,.18);border:none;color:#fff;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
}
.video-overlay .video-close{right:16px}
.video-overlay .video-full {right:68px}
.video-overlay .video-full svg{transform:rotate(45deg)}

.video-overlay.fullscreen{position:fixed;inset:0;background:#000;z-index:200;display:grid;place-items:center}
.video-overlay.fullscreen video{width:100vw;height:100vh;object-fit:contain;background:#000}
.video-overlay.fullscreen .video-close{
  position:fixed;top:14px;right:16px;background:rgba(255,255,255,.18);
  border:none;color:#fff;width:42px;height:42px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;z-index:201
}



.forwarded{display:flex;gap:6px;font-size:12px;color:#73b9ff;margin-bottom:6px}
.fwd-label{color:#73b9ff}
.msg blockquote.quote{
  margin:4px 0;padding:6px 10px;
  border-left:3px solid #8ad36b;background:rgba(138,211,107,.10);
  color:#dfe7ee;border-radius:0 10px 10px 0;font-style:italic;
  transition:background .15s;
}
.msg blockquote.quote:hover{background:rgba(138,211,107,.20)}
.msg blockquote.quote b{color:#8ad36b;font-style:normal;margin-right:6px}
/* звонки */
.call-msg{display:inline-flex;align-items:center;gap:8px;padding:4px 4px 4px 0;cursor:pointer}
.call-msg .call-ico{width:28px;height:28px;border-radius:50%;background:rgba(94,168,255,.15);display:grid;place-items:center}
.call-msg .call-ico svg{width:16px;height:16px;color:var(--accent)}
.call-msg .call-label{color:#cfe0ee}
/* video */
.attach-video-wrap{position:relative;cursor:pointer;border-radius:10px;overflow:hidden;background:#000}
.attach-video-wrap video{width:100%;max-height:320px;display:block}
.attach-video-wrap .attach-play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.3)
}
.attach-play span{
  width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);
  color:#fff;font-size:26px;display:grid;place-items:center;
}
/* выделение сообщений */
.msg-row.selected .msg{outline:2px solid var(--accent);outline-offset:2px}
.selection-bar{
  position:absolute;top:0;left:0;right:0;height:56px;
  background:#1a2733;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 12px;z-index:50;
}
.selection-bar button{
  background:none;border:none;color:#fff;cursor:pointer;width:36px;height:36px;
  display:grid;place-items:center;border-radius:8px;
}
.selection-bar button:hover{background:rgba(255,255,255,.06)}
.selection-bar .sel-count{flex:1;color:#e6edf3}
/* видео сообщения */
.video-msg{
  position:relative;
  width:220px;height:220px;
  border-radius:50%;overflow:hidden;
  background:#000;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  flex:0 0 auto;
}
.video-msg video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.video-msg .vm-overlay{
  position:absolute;inset:0;
  background:radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events:none;
}
.video-msg .vm-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.video-msg .vm-play::before{
  content:'';
  display:block;width:0;height:0;
  border-left:18px solid #fff;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:4px;
}
.video-msg .vm-duration{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  padding:3px 10px;border-radius:999px;
  background:rgba(0,0,0,.7);color:#fff;font-size:11px;
  white-space:nowrap;
}
/* кнопка скрулл сообщения */
.scroll-bottom{
  position:absolute;right:16px;bottom:90px;z-index:10;
  width:44px;height:44px;border-radius:50%;
  background:#243747;color:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow);
}
.scroll-bottom.hidden{display:none}
.scroll-bottom svg{transform:rotate(-90deg);width:20px;height:20px}
.sb-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--accent);color:#fff;border-radius:999px;
  font-size:11px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;
}

.msg.flash{
  animation: msg-flash 2.4s ease-out;
}
@keyframes msg-flash{
  0%, 30%{ box-shadow:0 0 0 3px rgba(94,168,255,.7), 0 0 22px rgba(94,168,255,.35) }
  100%   { box-shadow:0 0 0 0 rgba(94,168,255,0) }
}

.msg-row{position:relative}
.msg-row .msg{will-change:transform}

.swipe-reply-hint{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .12s;
  z-index:1;
}
.swipe-reply-hint::before{
  content:'';width:20px;height:20px;display:block;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 17l-5-5 5-5M4 12h10a6 6 0 016 6v2'/></svg>");
  background-repeat:no-repeat;background-position:center;
}