/**
 * chat-media.css
 * Styling tambahan untuk fitur media pada halaman Messages/Chat
 */

/* Toolbar icon di atas input chat */
.chat-input-area .tool-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-input-area .tool-btn:hover {
    background: var(--hover-bg, rgba(29,155,240,0.1));
}

/* Panel GIF */
#chat-gif-panel,
#chat-emoji-panel {
    background: var(--bg-body);
}

/* GIF result grid item hover */
#chat-gif-results img:hover {
    opacity: 0.8;
    transform: scale(1.03);
    transition: all 0.15s;
}

/* Chat bubble: pesan dengan media saja (tanpa teks) */
.chat-bubble:empty {
    display: none;
}

/* Preview media sebelum kirim */
#chat-media-preview {
    background: var(--bg-card, var(--bg-body));
}

/* Wrapper & elemen media di bubble pesan */
.chat-media-wrap {
    margin-top: 4px;
}
.chat-msg-img {
    max-width: 220px;
    max-height: 200px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: var(--hover-bg, rgba(0,0,0,0.05));
    min-width: 60px;
    min-height: 60px;
}
.chat-msg-vid {
    max-width: 220px;
    border-radius: 10px;
    display: block;
}

/* Chat message row - ensure proper width */
.chat-msg-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.chat-msg-row.mine {
    align-items: flex-end;
}
.chat-msg-row.theirs {
    align-items: flex-start;
}
.chat-msg-inner {
    max-width: 85%;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    width: auto;
}

/* Tombol hapus pesan (hanya muncul saat hover) */
.chat-msg-inner .chat-msg-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
    align-self: center;
}
.chat-msg-row:hover .chat-msg-delete-btn {
    opacity: 1;
}
.chat-msg-delete-btn:hover {
    color: #f04444;
    background: var(--hover-bg, rgba(240,68,68,0.1));
}