Initialer Laravel Commit für BetiX

resources/js/pages/Admin/ChatReportShow.vue

@@ -0,0 +1,761 @@
+<script setup lang="ts">
+import { Head, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import CasinoAdminLayout from '@/layouts/admin/CasinoAdminLayout.vue';
+import {
+    ArrowLeft, Flag, Hash, Clock, CheckCircle2, XCircle,
+    Ban, MessageSquareOff, AlertTriangle, History,
+    Calendar, Mail, Shield, Gavel, Loader2, ChevronRight,
+    UserRound, ShieldAlert, Star, Crown, ArrowRight
+} from 'lucide-vue-next';
+
+interface Restriction {
+    id: number;
+    type: 'chat_ban' | 'account_ban';
+    reason: string | null;
+    active: boolean;
+    starts_at: string | null;
+    ends_at: string | null;
+    created_at: string;
+}
+
+interface UserProfile {
+    id: number;
+    username: string;
+    email: string;
+    avatar: string | null;
+    avatar_url: string | null;
+    role: string;
+    vip_level: number;
+    is_banned: boolean;
+    created_at: string;
+    restrictions?: Restriction[];
+}
+
+interface ContextMsg {
+    id: string | number;
+    message: string;
+    user: { id: number; username: string };
+    created_at: string;
+}
+
+interface Report {
+    id: number;
+    reporter_id: number;
+    message_id: string;
+    message_text: string;
+    sender_id: number | null;
+    sender_username: string | null;
+    reason: string | null;
+    context_messages: ContextMsg[] | null;
+    status: 'pending' | 'reviewed' | 'dismissed';
+    admin_note: string | null;
+    created_at: string;
+}
+
+const props = defineProps<{
+    report: Report;
+    senderUser: UserProfile | null;
+    reporterUser: UserProfile | null;
+    flash?: string | null;
+}>();
+
+// ── Restriction management ────────────────────────────────────
+const extendHours = ref<Record<number, number>>({});
+const flashMsg = ref(props.flash || '');
+
+function liftRestriction(id: number) {
+    router.post(`/admin/restrictions/${id}/lift`, {}, {
+        preserveScroll: true,
+        onSuccess: () => { flashMsg.value = 'Sperre wurde aufgehoben.'; },
+    });
+}
+function extendRestriction(id: number) {
+    const h = extendHours.value[id];
+    if (!h || h < 1) return;
+    router.post(`/admin/restrictions/${id}/extend`, { hours: h }, {
+        preserveScroll: true,
+        onSuccess: () => { flashMsg.value = `Sperre um ${h}h verlängert.`; extendHours.value[id] = 0; },
+    });
+}
+
+// ── Punishment ────────────────────────────────────────────────
+const punishType   = ref<'chat_ban' | 'account_ban'>('chat_ban');
+const punishReason = ref('');
+const punishHours  = ref<number | null>(null);
+const submitting   = ref(false);
+
+const chatTemplates = [
+    { label: '1 Tag',    hours: 24,   reason: 'Spam' },
+    { label: '3 Tage',   hours: 72,   reason: 'Beleidigung' },
+    { label: '7 Tage',   hours: 168,  reason: 'Belästigung' },
+    { label: '30 Tage',  hours: 720,  reason: 'Schwerer Verstoß' },
+    { label: 'Permanent',hours: null,  reason: 'Dauerhafter Ausschluss' },
+];
+const banTemplates = [
+    { label: '1 Tag',    hours: 24,   reason: 'Betrug / Scam' },
+    { label: '7 Tage',   hours: 168,  reason: 'Schwerer Verstoß' },
+    { label: '30 Tage',  hours: 720,  reason: 'Wiederholte Verstöße' },
+    { label: 'Permanent',hours: null,  reason: 'Dauerhafter Ausschluss' },
+];
+
+function applyTemplate(reason: string, hours: number | null) {
+    punishReason.value = reason;
+    punishHours.value  = hours;
+}
+
+function submitPunish() {
+    if (!punishReason.value || submitting.value) return;
+    submitting.value = true;
+    router.post(`/admin/reports/chat/${props.report.id}/punish`, {
+        type: punishType.value, reason: punishReason.value, hours: punishHours.value,
+    }, {
+        preserveScroll: true,
+        onSuccess: () => { flashMsg.value = 'Strafe erfolgreich verhängt!'; },
+        onFinish:  () => { submitting.value = false; },
+    });
+}
+
+function updateStatus(status: string) {
+    router.post(`/admin/reports/chat/${props.report.id}`, { status }, { preserveScroll: true });
+}
+
+// ── Helpers ───────────────────────────────────────────────────
+const statusMeta: Record<string, { color: string; bg: string; border: string; label: string }> = {
+    pending:   { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)', border: 'rgba(245,158,11,0.35)', label: 'Ausstehend' },
+    reviewed:  { color: '#22c55e', bg: 'rgba(34,197,94,0.12)',  border: 'rgba(34,197,94,0.35)',  label: 'Bearbeitet' },
+    dismissed: { color: '#6b7280', bg: 'rgba(107,114,128,0.1)', border: 'rgba(107,114,128,0.3)', label: 'Abgelehnt'  },
+};
+const reasonLabels: Record<string, string> = {
+    spam:'Spam', beleidigung:'Beleidigung', belaestigung:'Belästigung', betrug:'Betrug', sonstiges:'Sonstiges',
+};
+function rl(r: string | null) { return r ? (reasonLabels[r] ?? r) : null; }
+
+function avUrl(u: UserProfile | null) { return u?.avatar_url || u?.avatar || null; }
+function ini(name?: string | null)    { return (name || '?')[0].toUpperCase(); }
+
+function fmt(d: string | null) {
+    if (!d) return '–';
+    return new Date(d).toLocaleString('de-DE', { day:'2-digit', month:'2-digit', year:'2-digit', hour:'2-digit', minute:'2-digit' });
+}
+function fmtDur(h: number | null) {
+    if (h === null) return 'Permanent';
+    if (h < 24) return `${h}h`;
+    return `${h/24}d`;
+}
+function timeLeft(d: string | null) {
+    if (!d) return 'Permanent';
+    const ms = new Date(d).getTime() - Date.now();
+    if (ms <= 0) return 'Abgelaufen';
+    const days = Math.floor(ms / 86400000);
+    const hrs  = Math.floor((ms % 86400000) / 3600000);
+    return days > 0 ? `${days}T ${hrs}h` : `${hrs}h`;
+}
+
+function activeR(u: UserProfile | null) {
+    return (u?.restrictions ?? []).filter(r => r.active && (!r.ends_at || new Date(r.ends_at) > new Date()));
+}
+function allR(u: UserProfile | null) { return u?.restrictions ?? []; }
+</script>
+
+<template>
+    <CasinoAdminLayout>
+        <Head :title="`Case #${report.id}`" />
+        <template #title>
+            <div class="pt">
+                <a href="/admin/reports/chat" class="back"><ArrowLeft :size="14" /> Chat Reports</a>
+                <span class="ptdiv">/</span>
+                <span class="pt-case"><Hash :size="12" />{{ report.id }}</span>
+                <span class="status-chip" :style="{ color: statusMeta[report.status].color, background: statusMeta[report.status].bg, borderColor: statusMeta[report.status].border }">
+                    {{ statusMeta[report.status].label }}
+                </span>
+            </div>
+        </template>
+
+        <!-- Flash banner -->
+        <transition name="fade">
+            <div v-if="flashMsg" class="flash">
+                <CheckCircle2 :size="15" />
+                <span>{{ flashMsg }}</span>
+                <button @click="flashMsg = ''"><XCircle :size="14" /></button>
+            </div>
+        </transition>
+
+        <!-- Case summary bar -->
+        <div class="summary-bar">
+            <div class="sb-item">
+                <span class="sb-label">Melder</span>
+                <span class="sb-val blue">@{{ reporterUser?.username || '–' }}</span>
+            </div>
+            <ArrowRight :size="14" class="sb-arrow" />
+            <div class="sb-item">
+                <span class="sb-label">Gemeldet</span>
+                <span class="sb-val pink">@{{ senderUser?.username || report.sender_username || '–' }}</span>
+            </div>
+            <div class="sb-sep" />
+            <div class="sb-item" v-if="rl(report.reason)">
+                <span class="sb-label">Grund</span>
+                <span class="sb-val"><Flag :size="11" /> {{ rl(report.reason) }}</span>
+            </div>
+            <div class="sb-item">
+                <span class="sb-label">Datum</span>
+                <span class="sb-val">{{ fmt(report.created_at) }}</span>
+            </div>
+            <div class="sb-item">
+                <span class="sb-label">Msg-ID</span>
+                <span class="sb-val mono">#{{ report.message_id }}</span>
+            </div>
+            <!-- Quick status -->
+            <div class="sb-status-btns">
+                <button :class="['ssb', { active: report.status === 'reviewed' }]" @click="updateStatus('reviewed')">
+                    <CheckCircle2 :size="12" /> Erledigt
+                </button>
+                <button :class="['ssb dismiss', { active: report.status === 'dismissed' }]" @click="updateStatus('dismissed')">
+                    <XCircle :size="12" /> Ablehnen
+                </button>
+            </div>
+        </div>
+
+        <!-- Main grid -->
+        <div class="main-grid">
+
+            <!-- ══ LEFT col ══════════════════════════════════════ -->
+            <div class="col-left">
+
+                <!-- Reporter -->
+                <div class="user-card blue-top">
+                    <div class="uc-label blue"><UserRound :size="10" /> Melder</div>
+                    <div class="uc-row">
+                        <div class="uc-av blue">
+                            <img v-if="avUrl(reporterUser)" :src="avUrl(reporterUser)!" />
+                            <span v-else>{{ ini(reporterUser?.username) }}</span>
+                        </div>
+                        <div class="uc-info">
+                            <div class="uc-name">@{{ reporterUser?.username || '–' }}</div>
+                            <div class="uc-email"><Mail :size="9" /> {{ reporterUser?.email || '–' }}</div>
+                            <div class="uc-since"><Calendar :size="9" /> seit {{ reporterUser?.created_at ? new Date(reporterUser.created_at).toLocaleDateString('de-DE') : '–' }}</div>
+                        </div>
+                        <a v-if="reporterUser" :href="`/admin/users/${reporterUser.id}`" class="uc-open" title="Profil öffnen"><ChevronRight :size="14" /></a>
+                    </div>
+                    <div class="uc-badges">
+                        <span class="badge role"><Crown :size="8" /> {{ reporterUser?.role || 'user' }}</span>
+                        <span v-if="reporterUser?.vip_level && reporterUser.vip_level > 0" class="badge vip"><Star :size="8" /> VIP {{ reporterUser.vip_level }}</span>
+                        <span v-if="reporterUser?.is_banned" class="badge banned"><Ban :size="8" /> Gebannt</span>
+                        <span v-if="activeR(reporterUser).some(r => r.type==='chat_ban')" class="badge cbanned"><MessageSquareOff :size="8" /> Chat-Bann</span>
+                    </div>
+                    <!-- Mini restriction history -->
+                    <div v-if="allR(reporterUser).length" class="mini-hist">
+                        <div class="mh-title"><History :size="9" /> Historie <span class="mh-count">{{ allR(reporterUser).length }}</span></div>
+                        <div v-for="r in allR(reporterUser).slice(0,3)" :key="r.id" class="mh-row" :class="{ active: r.active }">
+                            <span class="mh-type" :class="r.type==='chat_ban'?'chat':'ban'">{{ r.type==='chat_ban'?'Chat':'Acc' }}</span>
+                            <span class="mh-reason">{{ r.reason || '–' }}</span>
+                            <span v-if="r.active" class="mh-live">●</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Divider -->
+                <div class="reported-divider"><Flag :size="11" class="df" /> hat gemeldet</div>
+
+                <!-- Reported / Sender -->
+                <div class="user-card pink-top">
+                    <div class="uc-label pink"><ShieldAlert :size="10" /> Gemeldet</div>
+                    <div class="uc-row">
+                        <div class="uc-av pink">
+                            <img v-if="avUrl(senderUser)" :src="avUrl(senderUser)!" />
+                            <span v-else>{{ ini(senderUser?.username ?? report.sender_username) }}</span>
+                        </div>
+                        <div class="uc-info">
+                            <div class="uc-name">@{{ senderUser?.username || report.sender_username || '–' }}</div>
+                            <div class="uc-email"><Mail :size="9" /> {{ senderUser?.email || `ID: ${report.sender_id || '–'}` }}</div>
+                            <div v-if="senderUser" class="uc-since"><Calendar :size="9" /> seit {{ new Date(senderUser.created_at).toLocaleDateString('de-DE') }}</div>
+                        </div>
+                        <a v-if="senderUser" :href="`/admin/users/${senderUser.id}`" class="uc-open" title="Profil öffnen"><ChevronRight :size="14" /></a>
+                    </div>
+                    <div class="uc-badges">
+                        <span v-if="senderUser" class="badge role"><Crown :size="8" /> {{ senderUser.role }}</span>
+                        <span v-if="senderUser?.vip_level && senderUser.vip_level > 0" class="badge vip"><Star :size="8" /> VIP {{ senderUser.vip_level }}</span>
+                        <span v-if="senderUser?.is_banned" class="badge banned"><Ban :size="8" /> Gebannt</span>
+                        <span v-if="activeR(senderUser).some(r => r.type==='chat_ban')" class="badge cbanned"><MessageSquareOff :size="8" /> Chat-Bann</span>
+                    </div>
+
+                    <!-- Active restrictions alert -->
+                    <div v-if="activeR(senderUser).length" class="active-alert">
+                        <AlertTriangle :size="13" />
+                        <div>
+                            <div class="aa-title">{{ activeR(senderUser).length }} aktive Sperre(n)</div>
+                            <div class="aa-list">
+                                <div v-for="r in activeR(senderUser)" :key="r.id" class="aa-row">
+                                    <span class="mh-type" :class="r.type==='chat_ban'?'chat':'ban'">{{ r.type==='chat_ban'?'Chat-Bann':'Acc-Bann' }}</span>
+                                    <span class="aa-until">{{ r.ends_at ? timeLeft(r.ends_at) : 'Permanent' }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Full restriction history with lift/extend -->
+                    <div v-if="allR(senderUser).length" class="restrict-hist">
+                        <div class="mh-title"><History :size="9" /> Sperr-Historie <span class="mh-count">{{ allR(senderUser).length }}</span></div>
+                        <div v-for="r in allR(senderUser)" :key="r.id" class="rh-item" :class="{ active: r.active }">
+                            <div class="rh-row">
+                                <span class="mh-type" :class="r.type==='chat_ban'?'chat':'ban'">{{ r.type==='chat_ban'?'Chat':'Acc' }}</span>
+                                <span class="rh-reason">{{ r.reason || '–' }}</span>
+                                <span v-if="r.active" class="mh-live">AKTIV</span>
+                                <span class="rh-date">{{ fmt(r.created_at) }}</span>
+                            </div>
+                            <div v-if="r.ends_at || r.active" class="rh-until">
+                                <Clock :size="9" />
+                                {{ r.ends_at ? fmt(r.ends_at) : 'Permanent' }}
+                                <span v-if="r.active && r.ends_at" class="rh-left">{{ timeLeft(r.ends_at) }}</span>
+                            </div>
+                            <div v-if="r.active" class="rh-actions">
+                                <button class="rha lift" @click="liftRestriction(r.id)">
+                                    <CheckCircle2 :size="10" /> Aufheben
+                                </button>
+                                <div class="rha-extend">
+                                    <input v-model.number="extendHours[r.id]" type="number" min="1" placeholder="Std." class="rha-input" />
+                                    <button class="rha extend" @click="extendRestriction(r.id)">
+                                        <Clock :size="10" /> Verlängern
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="no-hist">Keine Sperr-Historie</div>
+                </div>
+            </div>
+
+            <!-- ══ CENTER: Chat timeline ══════════════════════════ -->
+            <div class="col-center">
+                <div class="ct-head">
+                    <MessageSquareOff :size="15" class="ct-icon" />
+                    <span>Chat-Kontext</span>
+                    <span class="ct-sub">{{ (report.context_messages?.length ?? 0) + 1 }} Nachrichten</span>
+                </div>
+
+                <div class="timeline">
+                    <div v-if="!report.context_messages?.length && !report.message_text" class="tl-empty">
+                        Kein Kontext gespeichert.
+                    </div>
+
+                    <!-- Context messages -->
+                    <div
+                        v-for="cm in report.context_messages"
+                        :key="cm.id"
+                        class="tl-msg"
+                        :class="{
+                            'by-sender':   cm.user?.id === report.sender_id,
+                            'by-reporter': cm.user?.id === report.reporter_id,
+                        }"
+                    >
+                        <div class="tl-av" :class="{ 'av-s': cm.user?.id === report.sender_id, 'av-r': cm.user?.id === report.reporter_id }">
+                            {{ ini(cm.user?.username) }}
+                        </div>
+                        <div class="tl-body">
+                            <div class="tl-meta">
+                                <span class="tl-user">@{{ cm.user?.username || '?' }}</span>
+                                <span class="tl-ts">{{ fmt(cm.created_at) }}</span>
+                            </div>
+                            <div class="tl-text">{{ cm.message }}</div>
+                        </div>
+                    </div>
+
+                    <!-- ★ Reported message ★ -->
+                    <div class="tl-msg reported">
+                        <div class="rep-flag"><Flag :size="10" /></div>
+                        <div class="tl-av av-s av-rep">{{ ini(report.sender_username) }}</div>
+                        <div class="tl-body">
+                            <div class="tl-meta">
+                                <span class="tl-user rep-user">@{{ report.sender_username || '?' }}</span>
+                                <span class="rep-badge"><Flag :size="9" /> Gemeldet</span>
+                                <span v-if="rl(report.reason)" class="reason-badge">{{ rl(report.reason) }}</span>
+                                <span class="tl-ts">{{ fmt(report.created_at) }}</span>
+                            </div>
+                            <div class="tl-text rep-text">{{ report.message_text }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- ══ RIGHT: Punishment ══════════════════════════════ -->
+            <div class="col-right">
+                <div class="pun-head">
+                    <Gavel :size="15" class="pun-icon" />
+                    <span>Strafe verhängen</span>
+                    <span class="ct-sub" v-if="senderUser">@{{ senderUser.username }}</span>
+                    <span class="ct-sub warn" v-else>Kein Nutzer verknüpft</span>
+                </div>
+
+                <div class="pun-form" :class="{ locked: !senderUser }">
+                    <!-- Type toggle -->
+                    <div class="type-row">
+                        <button :class="['type-btn', { on: punishType==='chat_ban' }]" @click="punishType='chat_ban'">
+                            <MessageSquareOff :size="12" /> Chat-Bann
+                        </button>
+                        <button :class="['type-btn ban', { on: punishType==='account_ban' }]" @click="punishType='account_ban'">
+                            <Ban :size="12" /> Account-Bann
+                        </button>
+                    </div>
+
+                    <!-- Templates -->
+                    <div class="tpl-block">
+                        <div class="tpl-label">Schnell-Vorlagen</div>
+                        <div class="tpl-list">
+                            <button
+                                v-for="t in (punishType==='chat_ban' ? chatTemplates : banTemplates)"
+                                :key="t.label"
+                                class="tpl-btn"
+                                :class="{ on: punishReason===t.reason && punishHours===t.hours, ban: punishType==='account_ban' }"
+                                @click="applyTemplate(t.reason, t.hours)"
+                            >
+                                <span class="tpl-name">{{ t.label }}</span>
+                                <span class="tpl-dur">{{ fmtDur(t.hours) }}</span>
+                                <span class="tpl-reason">{{ t.reason }}</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="or-line"><span>oder anpassen</span></div>
+
+                    <!-- Custom -->
+                    <div class="custom-block">
+                        <label class="fl">
+                            <span><Clock :size="10" /> Dauer (Stunden)</span>
+                            <input v-model.number="punishHours" type="number" min="1" placeholder="leer = permanent" class="fi" />
+                        </label>
+                        <label class="fl">
+                            <span><Shield :size="10" /> Grund</span>
+                            <textarea v-model="punishReason" rows="2" placeholder="Begründung..." class="fi ta"></textarea>
+                        </label>
+
+                        <!-- Preview -->
+                        <div v-if="punishReason" class="pun-preview">
+                            <span class="pp-type" :class="punishType==='account_ban'?'ban':'chat'">
+                                {{ punishType==='chat_ban' ? 'Chat-Bann' : 'Account-Bann' }}
+                            </span>
+                            <span class="pp-dur">{{ fmtDur(punishHours) }}</span>
+                            <span v-if="punishHours" class="pp-until">
+                                bis {{ new Date(Date.now() + (punishHours??0)*3600000).toLocaleDateString('de-DE') }}
+                            </span>
+                        </div>
+
+                        <button
+                            class="pun-btn"
+                            :class="{ ban: punishType==='account_ban' }"
+                            :disabled="!punishReason || !senderUser || submitting"
+                            @click="submitPunish"
+                        >
+                            <Loader2 v-if="submitting" :size="13" class="spin" />
+                            <Ban v-else-if="punishType==='account_ban'" :size="13" />
+                            <MessageSquareOff v-else :size="13" />
+                            {{ punishType==='chat_ban' ? 'Chat-Bann verhängen' : 'Account sperren' }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </div><!-- /main-grid -->
+    </CasinoAdminLayout>
+</template>
+
+<style scoped>
+/* ─ Page title ─ */
+.pt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
+.back { display:flex; align-items:center; gap:4px; color:#555; font-size:12px; text-decoration:none; }
+.back:hover { color:#ccc; }
+.ptdiv { color:#2a2a2a; }
+.pt-case { display:flex; align-items:center; gap:3px; font-weight:800; color:#fff; font-size:14px; }
+.status-chip {
+    font-size:10px; font-weight:800; padding:3px 10px; border-radius:20px;
+    border:1px solid; text-transform:uppercase; letter-spacing:.5px;
+}
+
+/* ─ Flash ─ */
+.flash {
+    display:flex; align-items:center; gap:8px; margin-bottom:16px;
+    background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3);
+    color:#22c55e; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600;
+}
+.flash button { margin-left:auto; background:none; border:none; color:inherit; cursor:pointer; display:flex; }
+.fade-enter-active,.fade-leave-active { transition:opacity .3s; }
+.fade-enter-from,.fade-leave-to { opacity:0; }
+
+/* ─ Summary bar ─ */
+.summary-bar {
+    display:flex; align-items:center; gap:0; flex-wrap:wrap;
+    background:#111113; border:1px solid #1e1e21; border-radius:12px;
+    padding:12px 18px; margin-bottom:18px; gap:16px;
+}
+.sb-item { display:flex; flex-direction:column; gap:2px; }
+.sb-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#444; }
+.sb-val { font-size:12px; font-weight:700; color:#ccc; display:flex; align-items:center; gap:4px; }
+.sb-val.blue { color:#60a5fa; }
+.sb-val.pink { color:#f472b6; }
+.sb-val.mono { font-family:monospace; color:#666; font-size:11px; }
+.sb-arrow { color:#333; flex-shrink:0; }
+.sb-sep { width:1px; height:28px; background:#1e1e21; }
+.sb-status-btns { margin-left:auto; display:flex; gap:6px; }
+.ssb {
+    display:flex; align-items:center; gap:5px; padding:6px 12px;
+    border-radius:7px; border:1px solid #252528; background:#161618;
+    color:#555; font-size:11px; font-weight:700; cursor:pointer; transition:.15s;
+}
+.ssb:hover { border-color:#3a3a3f; color:#aaa; }
+.ssb.active,.ssb:hover.active { border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.08); color:#22c55e; }
+.ssb.dismiss.active { border-color:rgba(107,114,128,0.4); background:rgba(107,114,128,0.08); color:#6b7280; }
+
+/* ─ Main grid ─ */
+.main-grid {
+    display:grid;
+    grid-template-columns: 270px 1fr 290px;
+    gap:16px;
+    align-items:start;
+}
+@media(max-width:1300px){ .main-grid { grid-template-columns: 250px 1fr 270px; } }
+@media(max-width:1000px){ .main-grid { grid-template-columns:1fr; } }
+
+/* ─ User cards ─ */
+.col-left { display:flex; flex-direction:column; gap:8px; }
+.user-card {
+    background:#111113; border:1px solid #1e1e21; border-radius:12px; padding:14px;
+    display:flex; flex-direction:column; gap:9px; position:relative;
+}
+.blue-top { border-top:2px solid #3b82f6; }
+.pink-top { border-top:2px solid #df006a; }
+
+.uc-label {
+    font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
+    display:flex; align-items:center; gap:3px; padding:2px 8px; border-radius:20px;
+    width:fit-content; border:1px solid;
+}
+.uc-label.blue { color:#3b82f6; background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.2); }
+.uc-label.pink { color:#df006a; background:rgba(223,0,106,.08); border-color:rgba(223,0,106,.2); }
+
+.uc-row { display:flex; align-items:center; gap:10px; }
+.uc-av {
+    width:40px; height:40px; border-radius:10px; flex-shrink:0;
+    display:flex; align-items:center; justify-content:center;
+    font-size:16px; font-weight:900; overflow:hidden;
+}
+.uc-av img { width:100%; height:100%; object-fit:cover; }
+.uc-av.blue { background:rgba(59,130,246,.15); color:#3b82f6; }
+.uc-av.pink { background:rgba(223,0,106,.15); color:#df006a; }
+.uc-info { flex:1; min-width:0; }
+.uc-name  { font-size:13px; font-weight:800; color:#e0e0e0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uc-email, .uc-since { display:flex; align-items:center; gap:4px; font-size:10px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.uc-open {
+    color:#666; background:#161618; border:1px solid #252528; border-radius:7px;
+    padding:5px; display:flex; cursor:pointer; text-decoration:none; transition:.15s; flex-shrink:0;
+}
+.uc-open:hover { color:#ccc; border-color:#3a3a3f; }
+
+.uc-badges { display:flex; gap:5px; flex-wrap:wrap; }
+.badge {
+    display:flex; align-items:center; gap:3px;
+    font-size:9px; font-weight:800; padding:2px 6px; border-radius:5px; border:1px solid;
+    text-transform:uppercase;
+}
+.badge.role    { color:#555;   border-color:#252528; background:#161618; }
+.badge.vip     { color:#fcd34d; border-color:rgba(252,211,77,.25); background:rgba(252,211,77,.06); }
+.badge.banned  { color:#ef4444; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.08); }
+.badge.cbanned { color:#f97316; border-color:rgba(249,115,22,.3); background:rgba(249,115,22,.08); }
+
+/* Mini history (reporter) */
+.mini-hist { border-top:1px solid #1a1a1c; padding-top:8px; }
+.mh-title { display:flex; align-items:center; gap:4px; font-size:9px; font-weight:700; text-transform:uppercase; color:#444; letter-spacing:.5px; margin-bottom:5px; }
+.mh-count { margin-left:auto; background:#1a1a1c; border:1px solid #252528; border-radius:8px; padding:0 5px; color:#666; font-size:9px; }
+.mh-row { display:flex; align-items:center; gap:6px; padding:4px 7px; border-radius:5px; background:#0e0e10; border:1px solid #1a1a1c; margin-bottom:3px; font-size:10px; }
+.mh-row.active { border-color:rgba(239,68,68,.2); background:rgba(239,68,68,.04); }
+.mh-type { font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; }
+.mh-type.chat { color:#f97316; background:rgba(249,115,22,.1); }
+.mh-type.ban  { color:#ef4444; background:rgba(239,68,68,.1); }
+.mh-reason { flex:1; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.mh-live { color:#ef4444; font-size:12px; }
+
+/* Active alert */
+.active-alert {
+    display:flex; align-items:flex-start; gap:8px;
+    background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2);
+    border-radius:8px; padding:8px 10px; color:#ef4444; font-size:12px; font-weight:600;
+}
+.aa-title { font-size:11px; font-weight:700; color:#ef4444; margin-bottom:4px; }
+.aa-list { display:flex; flex-direction:column; gap:3px; }
+.aa-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
+.aa-until { font-size:10px; color:#888; font-weight:500; }
+
+/* Full restriction history (sender) */
+.restrict-hist { border-top:1px solid #1a1a1c; padding-top:8px; }
+.rh-item {
+    border:1px solid #1a1a1c; border-radius:8px; padding:7px 9px;
+    margin-bottom:5px; display:flex; flex-direction:column; gap:4px;
+    background:#0e0e10;
+}
+.rh-item.active { border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.03); }
+.rh-row { display:flex; align-items:center; gap:6px; font-size:11px; }
+.rh-reason { flex:1; color:#777; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.rh-date   { color:#444; font-size:10px; white-space:nowrap; }
+.rh-until  { display:flex; align-items:center; gap:4px; font-size:10px; color:#555; }
+.rh-left   { color:#f97316; font-weight:700; margin-left:4px; }
+.rh-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.rha {
+    display:flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
+    padding:3px 9px; border-radius:5px; border:1px solid; cursor:pointer; transition:.15s;
+}
+.rha.lift { color:#22c55e; border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.07); }
+.rha.lift:hover { background:rgba(34,197,94,.14); }
+.rha.extend { color:#f59e0b; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.07); }
+.rha.extend:hover { background:rgba(245,158,11,.14); }
+.rha-extend { display:flex; align-items:center; gap:4px; }
+.rha-input {
+    width:56px; padding:3px 7px; background:#0d0d0f;
+    border:1px solid #252528; color:#ccc; border-radius:5px; font-size:10px;
+}
+.no-hist { font-size:11px; color:#333; font-style:italic; border-top:1px solid #1a1a1c; padding-top:8px; }
+
+/* Divider */
+.reported-divider {
+    display:flex; align-items:center; justify-content:center; gap:6px;
+    color:#3a3a3f; font-size:11px; font-weight:700;
+}
+.df { color:#df006a; }
+
+/* ─ Chat timeline ─ */
+.col-center { min-width:0; }
+.ct-head {
+    display:flex; align-items:center; gap:7px; margin-bottom:12px;
+    font-size:13px; font-weight:800; color:#e0e0e0;
+}
+.ct-icon { color:#df006a; }
+.ct-sub { font-size:11px; font-weight:400; color:#555; margin-left:2px; }
+.ct-sub.warn { color:#ef4444; }
+
+.timeline {
+    background:#0c0c0e; border:1px solid #1a1a1c; border-radius:12px; overflow:hidden;
+}
+.tl-empty { padding:40px; text-align:center; color:#3a3a3f; font-size:13px; }
+
+.tl-msg {
+    display:flex; align-items:flex-start; gap:10px;
+    padding:10px 14px; border-bottom:1px solid #111113; transition:background .1s;
+}
+.tl-msg:last-child { border-bottom:none; }
+.tl-msg:hover { background:rgba(255,255,255,.015); }
+.tl-msg.by-sender   { background:rgba(223,0,106,.03); }
+.tl-msg.by-reporter { background:rgba(59,130,246,.03); }
+
+.tl-av {
+    width:28px; height:28px; border-radius:7px; flex-shrink:0;
+    display:flex; align-items:center; justify-content:center;
+    font-size:11px; font-weight:800; background:#1a1a1c; color:#555;
+}
+.tl-av.av-s { background:rgba(223,0,106,.15); color:#df006a; }
+.tl-av.av-r { background:rgba(59,130,246,.15); color:#3b82f6; }
+.tl-av.av-rep { box-shadow:0 0 0 2px rgba(223,0,106,.45); }
+
+.tl-body { flex:1; min-width:0; }
+.tl-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
+.tl-user { font-size:11px; font-weight:700; color:#888; }
+.tl-ts   { font-size:10px; color:#3a3a3f; margin-left:auto; }
+.tl-text { font-size:13px; color:#bbb; line-height:1.45; word-break:break-word; }
+
+/* Reported msg */
+.tl-msg.reported {
+    background:rgba(223,0,106,.06) !important;
+    border-left:3px solid #df006a;
+    padding-left:11px;
+    position:relative;
+}
+.rep-flag {
+    position:absolute; left:-1px; top:8px;
+    width:18px; height:18px; background:#df006a; color:#fff;
+    border-radius:50%; display:flex; align-items:center; justify-content:center;
+}
+.rep-user { color:#f472b6 !important; }
+.rep-badge {
+    display:flex; align-items:center; gap:3px;
+    font-size:9px; font-weight:800; color:#df006a;
+    background:rgba(223,0,106,.1); border:1px solid rgba(223,0,106,.25);
+    padding:1px 6px; border-radius:4px; text-transform:uppercase;
+}
+.reason-badge {
+    font-size:9px; font-weight:700; color:#f59e0b;
+    background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
+    padding:1px 6px; border-radius:4px;
+}
+.rep-text { color:#fff !important; font-weight:500; }
+
+/* ─ Punishment panel ─ */
+.col-right { min-width:0; }
+.pun-head {
+    display:flex; align-items:center; gap:7px; margin-bottom:14px;
+    font-size:13px; font-weight:800; color:#e0e0e0;
+}
+.pun-icon { color:#f59e0b; }
+
+.pun-form { display:flex; flex-direction:column; gap:14px; }
+.pun-form.locked { opacity:.45; pointer-events:none; }
+
+.type-row { display:flex; gap:8px; }
+.type-btn {
+    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
+    font-size:12px; font-weight:700; padding:9px; border-radius:9px;
+    border:1px solid #252528; background:#111113; color:#555; cursor:pointer; transition:.15s;
+}
+.type-btn.on { border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.1); color:#f97316; }
+.type-btn.ban.on { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.1); color:#ef4444; }
+
+.tpl-block { display:flex; flex-direction:column; gap:6px; }
+.tpl-label { font-size:10px; font-weight:700; text-transform:uppercase; color:#444; letter-spacing:.5px; }
+.tpl-list  { display:flex; flex-direction:column; gap:4px; }
+.tpl-btn {
+    display:grid; grid-template-columns:auto 1fr auto;
+    align-items:center; gap:6px; padding:8px 11px;
+    border-radius:8px; border:1px solid #1a1a1c; background:#0e0e10;
+    cursor:pointer; transition:.15s; text-align:left;
+}
+.tpl-btn:hover { border-color:#252528; background:#111113; }
+.tpl-btn.on { border-color:rgba(249,115,22,.35); background:rgba(249,115,22,.07); }
+.tpl-btn.ban.on { border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.07); }
+.tpl-name { font-size:12px; font-weight:700; color:#ccc; }
+.tpl-dur  { font-size:10px; font-weight:700; color:#666; background:#161618; border:1px solid #252528; padding:1px 7px; border-radius:5px; justify-self:end; }
+.tpl-reason { grid-column:1/-1; font-size:10px; color:#555; }
+
+.or-line {
+    text-align:center; color:#2a2a2a; font-size:10px; font-weight:600;
+    position:relative;
+}
+.or-line span { position:relative; z-index:1; background:#0f0f11; padding:0 10px; }
+.or-line::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#1a1a1c; }
+
+.custom-block { display:flex; flex-direction:column; gap:10px; }
+.fl { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:600; color:#555; }
+.fl span { display:flex; align-items:center; gap:4px; }
+.fi {
+    background:#0c0c0e; border:1px solid #1e1e21; color:#ccc;
+    padding:8px 11px; border-radius:8px; font-size:13px; width:100%; box-sizing:border-box;
+}
+.fi:focus { outline:none; border-color:rgba(223,0,106,.3); }
+.ta { resize:none; }
+
+.pun-preview {
+    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
+    background:#0c0c0e; border:1px solid #1e1e21; border-radius:8px; padding:8px 11px; font-size:11px;
+}
+.pp-type { font-weight:800; padding:2px 8px; border-radius:5px; }
+.pp-type.chat { color:#f97316; background:rgba(249,115,22,.1); }
+.pp-type.ban  { color:#ef4444; background:rgba(239,68,68,.1); }
+.pp-dur   { font-weight:700; color:#888; }
+.pp-until { color:#555; font-size:10px; margin-left:auto; }
+
+.pun-btn {
+    display:flex; align-items:center; justify-content:center; gap:7px;
+    width:100%; padding:11px; border-radius:10px; border:none; cursor:pointer;
+    font-size:13px; font-weight:800; color:#fff; transition:.2s;
+    background:linear-gradient(135deg,#f97316,#ea580c);
+}
+.pun-btn.ban { background:linear-gradient(135deg,#ef4444,#dc2626); }
+.pun-btn:hover:not(:disabled) { filter:brightness(1.1); }
+.pun-btn:disabled { opacity:.4; cursor:not-allowed; }
+.spin { animation:spin .8s linear infinite; }
+@keyframes spin { to { transform:rotate(360deg); } }
+</style>