<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>
