/* =====================================================
   Block plates — ban (red) & suspicious activity (raspberry).
   Two surfaces: a centred modal (account ban) and an inline card (chat).
   Tokens echo the "Плашки блокировки" design reference.
   ===================================================== */
:root {
    --rvp-red:       #FF4438;
    --rvp-red-soft:  rgba(255, 68, 56, 0.12);
    --rvp-red-line:  rgba(255, 68, 56, 0.30);
    --rvp-red-glow:  rgba(255, 68, 56, 0.30);
    --rvp-red-txt:   #FF8077;

    --rvp-rasp:      #F0316B;
    --rvp-rasp-soft: rgba(240, 49, 107, 0.12);
    --rvp-rasp-line: rgba(240, 49, 107, 0.32);
    --rvp-rasp-glow: rgba(240, 49, 107, 0.30);
    --rvp-rasp-txt:  #FF7AA5;
}

/* ---------- shared bits ---------- */
.rvp-tile {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rvp-red-soft); border: 1px solid var(--rvp-red-line); color: var(--rvp-red-txt);
}
.rvp-tile svg { width: 28px; height: 28px; }
.susp > .rvp-tile, .rvp-modal-card.susp .rvp-tile {
    background: var(--rvp-rasp-soft); border-color: var(--rvp-rasp-line); color: var(--rvp-rasp-txt);
}
.rvp-h { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
.rvp-reason { font-size: 14px; color: var(--rv-text-muted, #8a8a96); line-height: 1.5; margin: 0 0 18px; }
.rvp-timer-lbl { font-size: 11px; color: var(--rv-text-muted, #8a8a96); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 9px; }
.rvp-perm { font-size: 13px; color: var(--rvp-red-txt); font-weight: 500; }
.rvp-modal-card.susp .rvp-perm { color: var(--rvp-rasp-txt); }

.rvp-segs { display: flex; gap: 7px; justify-content: center; }
.rvp-seg {
    min-width: 60px; padding: 11px 0; border-radius: 13px;
    background: var(--rv-bg-2, #18181c); border: 1px solid var(--rv-border-2, rgba(255,255,255,.08));
    font: 600 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rvp-red-txt);
    font-variant-numeric: tabular-nums;
}
.rvp-modal-card.susp .rvp-seg { color: var(--rvp-rasp-txt); }
.rvp-seg small { display: block; font-size: 9.5px; font-weight: 500; color: var(--rv-text-muted, #8a8a96); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- centred modal (account ban / suspicious) ---------- */
.rvp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s ease; }
.rvp-modal.open { opacity: 1; }
.rvp-modal-scrim { position: absolute; inset: 0; background: rgba(5,5,7,.66); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.rvp-modal-card {
    position: relative; width: 100%; max-width: 440px; padding: 32px 28px 28px; text-align: center; overflow: hidden;
    background: var(--rv-surface, #151517); border: 1px solid var(--rvp-red-line); border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px var(--rvp-red-soft) inset;
    transform: translateY(12px) scale(.98); transition: transform .22s ease;
}
.rvp-modal.open .rvp-modal-card { transform: none; }
.rvp-modal-card.susp { border-color: var(--rvp-rasp-line); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px var(--rvp-rasp-soft) inset; }
.rvp-modal-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #FF5A4E, var(--rvp-red)); }
.rvp-modal-card.susp::before { background: linear-gradient(90deg, #FF5A8C, var(--rvp-rasp)); }

/* ---------- inline card (chat block) ---------- */
.rvp-card {
    position: relative; display: flex; gap: 13px; align-items: flex-start;
    padding: 15px 17px; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--rvp-red-line); background: var(--rvp-red-soft);
}
.rvp-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--rvp-red), #C21E16); }
.rvp-card.susp { border-color: var(--rvp-rasp-line); background: var(--rvp-rasp-soft); }
.rvp-card.susp::before { background: linear-gradient(180deg, #FF5A8C, var(--rvp-rasp)); }
.rvp-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--rvp-red-soft); border: 1px solid var(--rvp-red-line); color: var(--rvp-red-txt); }
.rvp-card.susp .rvp-ic { background: var(--rvp-rasp-soft); border-color: var(--rvp-rasp-line); color: var(--rvp-rasp-txt); }
.rvp-ic svg { width: 19px; height: 19px; }
.rvp-c-body { min-width: 0; flex: 1; }
.rvp-c-title { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.rvp-c-reason { font-size: 12.8px; color: #c4c4cc; line-height: 1.5; margin: 0 0 8px; }
.rvp-c-timer { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e2e2e4; }
.rvp-c-timer b { color: var(--rvp-red-txt); font-weight: 600; }
.rvp-card.susp .rvp-c-timer b { color: var(--rvp-rasp-txt); }

@media (prefers-reduced-motion: reduce) {
    .rvp-modal, .rvp-modal-card { transition: none; }
}