/* iMens Chat-Medien: view-once 'Peek' + Blur-Teaser (additiv, dark). */

.chat-hhmedia { max-width: 240px; }

/* verstecktes File-Input hart ausblenden (main.css input-Regel ueberschreibt hidden) */
#hh-media-file { display: none !important; }

/* ---- Upload-Buttons im Foto-Panel ---- */
.hh-media-bar {
    display: flex; gap: 8px; padding: 8px 6px 4px; flex-wrap: wrap;
}
.hh-media-btn {
    appearance: none !important; -webkit-appearance: none !important;
    display: inline-flex; align-items: center; gap: 6px;
    background: #1d1d20; color: #e9e9ee;
    border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
    padding: 7px 13px; font-size: 12px; cursor: pointer;
    width: auto !important;
}
.hh-media-btn:hover { border-color: #e0163a; color: #fff; }
.hh-media-btn i { color: #e0163a; }

/* ============================ PEEK ============================ */
.hh-peek {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center;
    width: 220px; min-height: 130px; padding: 18px 14px;
    border-radius: 14px; color: #e9e9ee;
    background: linear-gradient(160deg, #232327, #17171a);
    border: 1px solid rgba(255,255,255,.10);
}
.hh-peek i { font-size: 26px; color: #e0163a; }
.hh-peek span { font-weight: 600; font-size: 13px; }
.hh-peek small { font-size: 11px; opacity: .6; }

.hh-peek-open { cursor: pointer; }
.hh-peek-open:hover { border-color: #e0163a; }

.hh-peek-spent { opacity: .72; }
.hh-peek-spent i { color: #8a8a90; }

.hh-peek-out { position: relative; padding: 8px; }
.hh-peek-out .hh-peek-thumb {
    width: 100%; border-radius: 10px; overflow: hidden;
    filter: blur(9px) brightness(.7); transform: scale(1.02);
}
.hh-peek-out .hh-peek-thumb img { width: 100%; display: block; }
.hh-peek-out .hh-peek-info {
    margin-top: 8px; font-size: 12px; opacity: .85;
}
.hh-peek-out .hh-peek-info i { font-size: 12px; margin-right: 4px; }
.hh-peek-out.seen .hh-peek-info { color: #5bd66f; }
.hh-peek-out.seen .hh-peek-info i { color: #5bd66f; }

/* ============================ BLUR ============================ */
.hh-blur { position: relative; width: 220px; border-radius: 14px; overflow: hidden; }
.hh-blur-img {
    width: 220px; height: 220px; object-fit: cover; display: block;
    filter: blur(3px) brightness(.85);
}
.hh-blur-empty {
    background: repeating-linear-gradient(45deg, #222, #222 8px, #1a1a1d 8px, #1a1a1d 16px);
}
.hh-blur-veil {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    background: rgba(10,10,12,.42);
    backdrop-filter: blur(4px);
    color: #fff;
}
.hh-blur-veil > i { font-size: 24px; color: #fff; }
.hh-blur-veil small { font-size: 11px; opacity: .8; padding: 0 12px; }
.hh-blur-unlock {
    appearance: none !important; -webkit-appearance: none !important;
    background: #e0163a; color: #fff; border: 0; border-radius: 999px;
    padding: 8px 18px; font-weight: 700; font-size: 13px; cursor: pointer;
    width: auto !important;
}
.hh-blur-unlock:hover { background: #f01d44; }

.hh-blur-out {
    display: flex; align-items: center; gap: 8px;
    width: 220px; padding: 16px; color: #e9e9ee;
    background: linear-gradient(160deg, #232327, #17171a);
    border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
}
.hh-blur-out i { color: #e0163a; }

.hh-blur-open img { width: 220px; height: 220px; object-fit: cover; display: block; border-radius: 14px; }
.hh-blur-badge {
    position: absolute; left: 8px; bottom: 8px;
    background: rgba(10,10,12,.7); color: #5bd66f;
    font-size: 11px; padding: 3px 9px; border-radius: 999px;
}
.hh-blur-badge i { margin-right: 3px; }