/* ---------- ВИДЕО: единая плитка-превью ---------- */
.msg-video-tile{
    position:relative; display:block;
    width:260px; height:260px; max-width:100%;
    border-radius:12px; overflow:hidden;
    background:#111 center/cover no-repeat;
    margin:3px 0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
@media (max-width:768px){ .msg-video-tile{ width:230px; height:230px; } }

.msg-video-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%;
    background:rgba(0,0,0,.45); color:#fff;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px);
    pointer-events:none;
}
.msg-video-dur{
    position:absolute; right:8px; bottom:6px;
    padding:2px 7px; border-radius:8px;
    background:rgba(0,0,0,.55); color:#fff;
    font-size:12px; font-weight:600; line-height:1.3;
    pointer-events:none;
}

/* ---------- АУДИО / ГОЛОСОВЫЕ (Telegram-стиль) ---------- */
.msg-audio{
    display:flex; align-items:center; gap:10px;
    margin:3px 0; padding:4px 10px 4px 4px;
    min-width:230px; max-width:300px;
}
.voice-play-btn{
    width:44px; height:44px; border-radius:50%; border:none; flex-shrink:0;
    background:#3390ec; color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .1s, background .2s;
    -webkit-tap-highlight-color:transparent;
}
.voice-play-btn:active{ transform:scale(.92); }
.message-bubble.outgoing .voice-play-btn{ background:#4faf4f; }
body.dark .message-bubble.outgoing .voice-play-btn{ background:#3d8b46; }

.voice-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }

.voice-wave{
    display:flex; align-items:center; gap:2px;
    height:20px; cursor:pointer;
}
.voice-wave span{
    flex:1 1 0; max-width:4px; min-height:2px;
    border-radius:2px;
    background:rgba(112,117,121,.4);
    transition:background .12s;
}
.message-bubble.outgoing .voice-wave span{ background:rgba(88,140,84,.4); }
.voice-wave span.on{ background:#3390ec; }
.message-bubble.outgoing .voice-wave span.on{ background:#4faf4f; }
body.dark .message-bubble.outgoing .voice-wave span.on{ background:#58c065; }

.voice-time{ font-size:12px; color:#8b959e; user-select:none; }
.message-bubble.outgoing .voice-time{ color:#6c9a63; }
body.dark .message-bubble.incoming .voice-time{ color:#9fb0c0; }
body.dark .message-bubble.outgoing .voice-time{ color:#7fa96a; }

.voice-audio-el{ display:none; }

@media (max-width:768px){
    .msg-audio{ min-width:200px; max-width:100%; }
    .voice-play-btn{ width:42px; height:42px; }
}

/* ---------- СТИКЕРЫ ---------- */
.msg-sticker{ width:148px; height:148px; object-fit:contain; display:block; }
.message-bubble.sticker-bubble{
    background:transparent !important;
    box-shadow:none !important;
    padding:2px 4px 20px !important;
    min-width:0 !important;
}
.message-bubble.sticker-bubble .msg-meta{ color:#8b959e !important; }

/* ---------- ПОДПИСЬ К МЕДИА ---------- */
.msg-caption{ margin-top:4px; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- ЗАПИСЬ ГОЛОСОВОГО ---------- */
#voice-rec-bar{
    display:flex; align-items:center; gap:10px;
    padding:7px 10px; background:#f0f6fc; border-radius:10px;
    border-left:3px solid #e53935; margin-bottom:6px;
}
body.dark #voice-rec-bar{ background:#1f2733; }
.voice-dot{
    width:10px; height:10px; border-radius:50%; background:#e53935;
    animation:voiceBlink .9s ease-in-out infinite;
}
@keyframes voiceBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }
.voice-time{ font-size:14px; font-weight:600; min-width:42px; }
.voice-hint{ flex:1; font-size:12px; color:#8b959e; }
.voice-btn{
    width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
    font-size:15px; display:flex; align-items:center; justify-content:center;
}
.voice-cancel{ background:#ffe3e3; color:#e53935; }
.voice-send{ background:#3390ec; color:#fff; }

/* ---------- ПАНЕЛЬ СТИКЕРОВ ---------- */
.sticker-content{ width:420px; max-width:calc(100vw - 32px); }
.sticker-tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; }
.sticker-tabs button{
    flex:none; border:none; cursor:pointer; padding:6px 12px; border-radius:14px;
    background:#f0f6fc; color:#3390ec; font-size:13px; white-space:nowrap;
}
.sticker-tabs button.active{ background:#3390ec; color:#fff; }
body.dark .sticker-tabs button{ background:#26262b; color:#8ecbff; }
.sticker-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px;
    max-height:46vh; overflow-y:auto; padding:6px 2px; margin-bottom:10px;
}
.sticker-item{
    width:100%; aspect-ratio:1/1; object-fit:contain; cursor:pointer;
    border-radius:10px; padding:4px; transition:background .15s, transform .1s;
}
.sticker-item:hover{ background:#f0f6fc; }
.sticker-item:active{ transform:scale(.92); }
body.dark .sticker-item:hover{ background:#26262b; }

/* ---------- СТИКЕРЫ: контейнер (поддержка tgs/Lottie) ---------- */
.msg-sticker{
    width:148px; height:148px; display:flex;
    align-items:center; justify-content:center;
    overflow:hidden; line-height:0;
}
.msg-sticker img, .msg-sticker svg, .msg-sticker canvas{
    width:100% !important; height:100% !important; object-fit:contain;
}
.sticker-item{ line-height:0; }
.sticker-item img, .sticker-item svg{
    width:100%; height:100%; object-fit:contain;
}

/* ---------- КРУПНЫЕ ЭМОДЗИ (сообщение только из смайликов) ---------- */
.message-bubble.emoji-only{
    background:transparent !important;
    box-shadow:none !important;
    padding:2px 6px 22px !important;
    min-width:0 !important;
}
.message-bubble.emoji-only .message-content{
    line-height:1.05;
    white-space:pre-wrap;
    overflow-wrap:normal;
}
.message-bubble.emoji-only.emoji-1 .message-content{ font-size:64px; }
.message-bubble.emoji-only.emoji-2 .message-content{ font-size:56px; }
.message-bubble.emoji-only.emoji-3 .message-content{ font-size:48px; }
.message-bubble.emoji-only.emoji-4 .message-content{ font-size:42px; }
.message-bubble.emoji-only.emoji-5 .message-content{ font-size:38px; }
.message-bubble.emoji-only.emoji-6 .message-content{ font-size:34px; }
.message-bubble.emoji-only .msg-meta{ color:#8b959e !important; }
body.dark .message-bubble.emoji-only .msg-meta{ color:#9fb0c0 !important; }

/* ---------- ССЫЛКИ В СООБЩЕНИЯХ ---------- */
.msg-link{
    color:#2481cc;
    text-decoration:underline;
    text-underline-offset:2px;
    overflow-wrap:anywhere;
    cursor:pointer;
}
.message-bubble.outgoing .msg-link{ color:#1d7a43; }
body.dark .message-bubble .msg-link{ color:#8ecbff; }
body.dark .message-bubble.outgoing .msg-link{ color:#9fdcb4; }
.msg-link:active{ opacity:.7; }