@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.moderator'; break;
        default:            $layout = 'layouts.member';
    }

    $meId        = auth()->id();

    $subject     = $message->subject ?? 'بدون موضوع';
    $senderName  = $message->sender->name ?? 'غير معروف';
    $senderEmail = $message->sender->email ?? '';
    $isUnread    = empty($message->read_at);
    $isImportant = (bool)($message->important ?? false);

    $avatarUrl = !empty($message->sender?->avatar)
        ? asset('storage/avatars/' . $message->sender->avatar)
        : null;

    $msgIsMine = (int)($message->sender_id ?? 0) === (int)$meId;
@endphp

@extends($layout)

@section('title', 'عرض الرسالة')

@section('content')
<div class="max-w-6xl mx-auto px-6 py-10 pb-24">

    {{-- ===== Header (رسمي + بسيط) ===== --}}
    <div class="pm-card mb-6 overflow-hidden">
        <div class="p-6 sm:p-7">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5">

                <div class="min-w-0">
                    <div class="flex items-center gap-2 text-xs font-extrabold text-slate-500 dark:text-white/55">
                        <a href="{{ route('simple-messages.inbox') }}" class="hover:text-slate-900 dark:hover:text-white transition">الوارد</a>
                        <span class="text-slate-300 dark:text-white/20">/</span>
                        <span class="text-slate-700 dark:text-white/80">عرض رسالة</span>
                        <span class="text-slate-300 dark:text-white/20">•</span>
                        <span class="pm-chip">#{{ $message->id }}</span>
                    </div>

                    <h1 class="mt-2 text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white truncate">
                        {{ $subject }}
                    </h1>

                    <div class="mt-3 flex flex-wrap items-center gap-2">
                        <span id="pm-status-chip" class="pm-chip {{ $isUnread ? 'pm-chip-new' : 'pm-chip-read' }}">
                            <i class="fa-solid {{ $isUnread ? 'fa-circle' : 'fa-circle-check' }}"></i>
                            {{ $isUnread ? 'جديد' : 'مقروء' }}
                        </span>

                        <span id="pm-important-chip" class="pm-chip {{ $isImportant ? 'pm-chip-important' : 'pm-chip-muted' }}">
                            <i class="fa-solid fa-star"></i>
                            {{ $isImportant ? 'مهم' : 'غير مهم' }}
                        </span>

                        <span class="pm-chip pm-chip-muted">
                            <i class="fa-solid fa-clock"></i>
                            {{ $message->created_at->diffForHumans() }}
                        </span>
                    </div>

                    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div class="pm-mini">
                            <div class="pm-mini-label">من</div>
                            <div class="pm-mini-value truncate">{{ $senderName }}</div>
                            <div class="pm-mini-sub truncate">{{ $senderEmail }}</div>
                        </div>
                        <div class="pm-mini">
                            <div class="pm-mini-label">إلى</div>
                            <div class="pm-mini-value">أنت</div>
                            <div class="pm-mini-sub">{{ $message->created_at->format('Y-m-d H:i') }}</div>
                        </div>
                    </div>
                </div>

                {{-- Actions --}}
                <div class="flex flex-wrap items-center gap-2 justify-end">
                    <a href="{{ route('simple-messages.inbox') }}" class="pm-btn pm-btn-ghost">
                        <i class="fa-solid fa-arrow-right"></i>
                        رجوع
                    </a>

                    <form action="{{ route('simple-messages.toggle-important', $message->id) }}" method="POST"
                          class="inline"
                          onsubmit="return pmConfirmSubmit(event,'تأكيد','هل تريد تغيير حالة (مهم) لهذه الرسالة؟');">
                        @csrf
                        <button type="submit" class="pm-btn {{ $isImportant ? 'pm-btn-amber' : 'pm-btn-soft' }}">
                            <i class="fa-solid fa-star"></i>
                            {{ $isImportant ? 'إزالة من المهم' : 'إضافة للمهم' }}
                        </button>
                    </form>

                    <form action="{{ route('simple-messages.archive', $message->id) }}" method="POST"
                          class="inline"
                          onsubmit="return pmConfirmSubmit(event,'تأكيد','هل تريد أرشفة هذه الرسالة؟');">
                        @csrf
                        <button type="submit" class="pm-btn pm-btn-soft">
                            <i class="fa-solid fa-box-archive"></i>
                            أرشفة
                        </button>
                    </form>

                    <form action="{{ route('simple-messages.delete', $message->id) }}" method="POST"
                          class="inline"
                          onsubmit="return pmConfirmSubmit(event,'تأكيد','هل أنت متأكد من حذف الرسالة؟ هذا الإجراء نهائي.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="pm-btn pm-btn-danger">
                            <i class="fa-solid fa-trash"></i>
                            حذف
                        </button>
                    </form>
                </div>

            </div>
        </div>
        <div class="h-1 bg-gradient-to-r from-emerald-500 via-teal-400 to-sky-500"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        {{-- ===== Sidebar (Desktop) ===== --}}
        <aside class="lg:col-span-3 space-y-6 hidden lg:block">

            <div class="pm-card p-5">
                <div class="flex items-center justify-between">
                    <h2 class="font-extrabold text-sm text-slate-900 dark:text-white">محادثات سريعة</h2>
                    <span class="text-[10px] font-extrabold text-slate-500 dark:text-white/55">تنقل</span>
                </div>

                <div class="mt-4 space-y-2">
                    <a href="{{ route('simple-messages.inbox') }}" class="pm-nav">
                        <i class="fa-solid fa-inbox text-emerald-600 dark:text-emerald-300"></i>
                        <span>الوارد</span>
                    </a>

                    <a href="{{ route('simple-messages.sent') }}" class="pm-nav">
                        <i class="fa-solid fa-paper-plane text-sky-600 dark:text-sky-300"></i>
                        <span>الصادر</span>
                    </a>

                    <a href="{{ route('simple-messages.important') }}" class="pm-nav">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>المهمة</span>
                    </a>

                    <a href="{{ route('simple-messages.archived') }}" class="pm-nav">
                        <i class="fa-solid fa-box-archive text-slate-500 dark:text-white/60"></i>
                        <span>المؤرشفة</span>
                    </a>
                </div>
            </div>

            <div class="pm-card p-5">
                <h3 class="font-extrabold text-sm text-slate-900 dark:text-white">معلومات المرسل</h3>

                <div class="mt-4 flex items-center gap-3">
                    <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center pm-avatar">
                        @if($avatarUrl)
                            <img src="{{ $avatarUrl }}" class="w-full h-full object-cover"
                                 onerror="this.src='/images/default-avatar.png'" alt="{{ $senderName }}">
                        @else
                            <span class="font-extrabold text-white text-lg">{{ mb_substr($senderName,0,1) }}</span>
                        @endif
                    </div>

                    <div class="min-w-0">
                        <div class="font-extrabold text-slate-900 dark:text-white truncate">{{ $senderName }}</div>
                        <div class="text-xs text-slate-500 dark:text-white/55 truncate" id="pm-sender-email">{{ $senderEmail }}</div>
                    </div>
                </div>

                <div class="mt-4 flex flex-wrap gap-2">
                    <button type="button" class="pm-btn pm-btn-xs pm-btn-soft"
                            onclick="pmCopyText('{{ addslashes($senderEmail) }}','تم نسخ بريد المرسل ✅')">
                        <i class="fa-regular fa-copy"></i> نسخ البريد
                    </button>
                    <button type="button" class="pm-btn pm-btn-xs pm-btn-soft"
                            onclick="pmCopyText('{{ addslashes($subject) }}','تم نسخ الموضوع ✅')">
                        <i class="fa-regular fa-copy"></i> نسخ الموضوع
                    </button>
                    <button type="button" class="pm-btn pm-btn-xs pm-btn-soft"
                            onclick="pmInsertText('#{{ $message->id }}','تم إدراج رقم الرسالة ✍️')">
                        <i class="fa-solid fa-hashtag"></i> إدراج رقم
                    </button>
                </div>
            </div>

        </aside>

        {{-- ===== Main ===== --}}
        <main class="lg:col-span-9 space-y-6">

            {{-- ===== Reply Composer (فوق — زي ما بدك) ===== --}}
            <div class="pm-card overflow-hidden">
                <div class="p-6 sm:p-7 border-b border-slate-200 dark:border-white/10">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">الرد</div>
                            <div class="mt-1 text-lg font-extrabold text-slate-900 dark:text-white">
                                رد سريع (خفيف ومرتب)
                            </div>
                            <div class="mt-1 text-sm text-slate-600 dark:text-white/60">
                                اختر قالب جاهز أو اكتب ردك مباشرة — وبعدين تحت بتلاقي سجل المحادثة كامل.
                            </div>
                        </div>

                        <button type="button"
                                class="pm-btn pm-btn-xs pm-btn-soft"
                                onclick="document.getElementById('pm-reply-body')?.focus()">
                            <i class="fa-solid fa-pen"></i> تركيز
                        </button>
                    </div>

                    {{-- Templates --}}
                    <div class="mt-4 flex flex-wrap gap-2">
                        <button type="button" class="pm-template" data-text="تم استلام رسالتكم، وسيتم مراجعتها والرد عليكم في أقرب وقت ممكن.">استلام + مراجعة</button>
                        <button type="button" class="pm-template" data-text="شكرًا لتواصلكم. يرجى تزويدنا بمزيد من التفاصيل/البيانات لإكمال المتابعة.">طلب تفاصيل</button>
                        <button type="button" class="pm-template" data-text="تمت معالجة الطلب بنجاح. في حال وجود أي ملاحظات إضافية يرجى إبلاغنا.">تم الحل</button>
                        <button type="button" class="pm-template" data-text="نعتذر عن أي إزعاج. سيتم العمل على الأمر ومتابعته بشكل عاجل.">اعتذار رسمي</button>
                    </div>
                </div>

                <div class="p-6 sm:p-7">
                    <form action="{{ route('simple-messages.reply', $message->id) }}" method="POST" class="space-y-4">
                        @csrf

                        <div>
                            <label class="block text-sm font-extrabold text-slate-900 dark:text-white mb-2">
                                نص الرد
                            </label>

                            {{-- ✅ FIX: old() الصحيح --}}
                            <textarea id="pm-reply-body"
                                      name="body"
                                      rows="3"
                                      placeholder="اكتب ردك هنا..."
                                      class="pm-textarea"
                                      required>{{ old('body') }}</textarea>

                            @error('body')
                                <div class="mt-2 text-sm font-bold text-rose-600 dark:text-rose-300">{{ $message }}</div>
                            @enderror

                            <div class="mt-2 flex items-center justify-between text-xs text-slate-500 dark:text-white/55">
                                <span>نصيحة: رد مختصر + واضح أفضل.</span>
                                <span><span id="pm-count">0</span> حرف</span>
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-2 justify-end">
                            <a href="{{ route('simple-messages.inbox') }}" class="pm-btn pm-btn-ghost">
                                إلغاء
                            </a>
                            <button type="submit" class="pm-btn pm-btn-primary">
                                <i class="fa-solid fa-paper-plane"></i>
                                إرسال الرد
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ===== Conversation Log (تحت) ===== --}}
            <div class="pm-card overflow-hidden">
                <div class="p-6 sm:p-7 border-b border-slate-200 dark:border-white/10 flex items-center justify-between">
                    <div>
                        <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">السجلات</div>
                        <div class="mt-1 text-lg font-extrabold text-slate-900 dark:text-white">
                            سجل المحادثة
                        </div>
                    </div>

                    <button type="button" class="pm-btn pm-btn-xs pm-btn-soft"
                            onclick="toggleLog()">
                        <i class="fa-solid fa-chevron-down" id="pm-log-icon"></i>
                        إظهار/إخفاء
                    </button>
                </div>

                <div id="pm-log" class="p-6 sm:p-7 space-y-4">

                    {{-- Original message bubble --}}
                    <div class="flex">
                        <div class="pm-bubble {{ $msgIsMine ? 'pm-bubble-out ml-auto' : 'pm-bubble-in mr-auto' }}">
                            <div class="pm-bubble-head">
                                <div class="flex items-center gap-2 min-w-0">
                                    <div class="w-9 h-9 rounded-full overflow-hidden flex items-center justify-center pm-avatar">
                                        @if($avatarUrl)
                                            <img src="{{ $avatarUrl }}" class="w-full h-full object-cover"
                                                 onerror="this.src='/images/default-avatar.png'" alt="{{ $senderName }}">
                                        @else
                                            <span class="font-extrabold text-white">{{ mb_substr($senderName,0,1) }}</span>
                                        @endif
                                    </div>

                                    <div class="min-w-0">
                                        <div class="pm-bubble-title truncate">
                                            {{ $msgIsMine ? 'أنت' : $senderName }}
                                        </div>
                                        <div class="pm-bubble-meta">
                                            {{ $message->created_at->format('Y-m-d H:i') }}
                                            @if($isUnread)
                                                <span class="pm-chip pm-chip-new ms-2">جديد</span>
                                            @else
                                                <span class="pm-chip pm-chip-read ms-2">مقروء</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="pm-bubble-body whitespace-pre-line">
                                {{ $message->body }}
                            </div>
                        </div>
                    </div>

                    {{-- Replies --}}
                    @if(($message->replies?->count() ?? 0) === 0)
                        <div class="pm-empty">
                            لا توجد ردود بعد على هذه الرسالة.
                        </div>
                    @else
                        @foreach($message->replies as $reply)
                            @php
                                $rName   = $reply->sender->name ?? 'عضو';
                                $rIsMine = (int)($reply->sender_id ?? 0) === (int)$meId;
                                $rIsNew  = (bool)($reply->is_new ?? false);
                                $rAvatar = !empty($reply->sender?->avatar) ? asset('storage/avatars/' . $reply->sender->avatar) : null;
                            @endphp

                            <div class="flex">
                                <div class="pm-bubble {{ $rIsMine ? 'pm-bubble-out ml-auto' : 'pm-bubble-in mr-auto' }}">
                                    <div class="pm-bubble-head">
                                        <div class="flex items-center gap-2 min-w-0">
                                            <div class="w-9 h-9 rounded-full overflow-hidden flex items-center justify-center pm-avatar">
                                                @if($rAvatar)
                                                    <img src="{{ $rAvatar }}" class="w-full h-full object-cover"
                                                         onerror="this.src='/images/default-avatar.png'" alt="{{ $rName }}">
                                                @else
                                                    <span class="font-extrabold text-white">{{ mb_substr($rName,0,1) }}</span>
                                                @endif
                                            </div>

                                            <div class="min-w-0">
                                                <div class="pm-bubble-title truncate">
                                                    {{ $rIsMine ? 'أنت' : $rName }}
                                                    @if($rIsNew)
                                                        <span class="pm-chip pm-chip-new ms-2">جديد</span>
                                                    @endif
                                                </div>
                                                <div class="pm-bubble-meta">
                                                    {{ optional($reply->created_at)->format('Y-m-d H:i') }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="pm-bubble-body whitespace-pre-line">
                                        {{ $reply->body }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                </div>
            </div>

        </main>
    </div>
</div>

{{-- ===== Confirm Modal ===== --}}
<div id="pm-confirm" class="fixed inset-0 z-[999] hidden">
    <div class="absolute inset-0 bg-black/60"></div>
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-md bg-white dark:bg-slate-900 rounded-3xl shadow-2xl border border-slate-200 dark:border-white/10 overflow-hidden">
            <div class="p-5 border-b border-slate-200 dark:border-white/10">
                <div class="flex items-start gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-rose-100 dark:bg-rose-900/30 text-rose-700 dark:text-rose-200 flex items-center justify-center">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                    </div>
                    <div class="min-w-0">
                        <div id="pm-confirm-title" class="font-extrabold text-slate-900 dark:text-white">تأكيد</div>
                        <div id="pm-confirm-text" class="text-sm text-slate-600 dark:text-white/60 mt-1">—</div>
                    </div>
                </div>
            </div>
            <div class="p-5 flex justify-end gap-3">
                <button type="button" id="pm-confirm-cancel" class="pm-btn pm-btn-ghost">إلغاء</button>
                <button type="button" id="pm-confirm-ok" class="pm-btn pm-btn-danger">متابعة</button>
            </div>
        </div>
    </div>
</div>

{{-- ===== Toasts ===== --}}
<div id="pm-toasts" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[1000] space-y-2 w-[92vw] sm:w-[420px]"></div>

<style>
/* ===== Cards ===== */
.pm-card{
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    border-radius: 1.75rem;
    box-shadow: 0 24px 60px rgba(2,6,23,.06);
}
.dark .pm-card{
    background: rgba(2,6,23,.55);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

/* Mini info blocks */
.pm-mini{
    border:1px solid rgba(226,232,240,.9);
    background: rgba(241,245,249,.55);
    border-radius: 1.25rem;
    padding: 12px 14px;
}
.dark .pm-mini{
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.10);
}
.pm-mini-label{ font-size:11px; font-weight:900; color: rgba(100,116,139,1); }
.dark .pm-mini-label{ color: rgba(255,255,255,.55); }
.pm-mini-value{ font-size:14px; font-weight:950; color:#0f172a; margin-top:2px; }
.dark .pm-mini-value{ color: rgba(255,255,255,.92); }
.pm-mini-sub{ font-size:12px; color: rgba(100,116,139,1); margin-top:2px; }
.dark .pm-mini-sub{ color: rgba(255,255,255,.55); }

/* ===== Buttons ===== */
.pm-btn{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.75rem 1rem; border-radius: 1rem;
    font-weight: 950; font-size:.9rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff; color:#0f172a;
    transition: all .15s ease;
}
.dark .pm-btn{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.10);
}
.pm-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(2,6,23,.08); }
.dark .pm-btn:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.25); }

.pm-btn-xs{ padding:.5rem .8rem; border-radius:.9rem; font-size:.78rem; }

.pm-btn-ghost{
    background: rgba(148,163,184,.10);
    border-color: rgba(148,163,184,.25);
}
.dark .pm-btn-ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.pm-btn-soft{
    background: rgba(226,232,240,.55);
    border-color: rgba(148,163,184,.30);
}
.dark .pm-btn-soft{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.pm-btn-primary{
    background: linear-gradient(90deg, rgba(16,185,129,1), rgba(56,189,248,1));
    border-color: rgba(16,185,129,.35);
    color:#fff;
}
.pm-btn-primary:hover{ filter: brightness(0.98); }

.pm-btn-danger{
    background: rgba(244,63,94,.10);
    border-color: rgba(244,63,94,.28);
    color: rgb(190,18,60);
}
.dark .pm-btn-danger{
    background: rgba(244,63,94,.16);
    border-color: rgba(244,63,94,.25);
    color: rgba(253,164,175,.95);
}

.pm-btn-amber{
    background: rgba(245,158,11,.12);
    border-color: rgba(245,158,11,.28);
    color: rgb(146,64,14);
}
.dark .pm-btn-amber{
    background: rgba(245,158,11,.16);
    border-color: rgba(245,158,11,.25);
    color: rgba(253,230,138,.95);
}

/* ===== Chips ===== */
.pm-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.25rem .65rem; border-radius:9999px;
    font-size:11px; font-weight:950;
    border:1px solid rgba(226,232,240,.9);
    background:#fff; color:#0f172a;
}
.dark .pm-chip{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }

.pm-chip-new{ background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.25); color: rgb(190,18,60); }
.dark .pm-chip-new{ background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.25); color: rgba(253,164,175,.95); }

.pm-chip-read{ background: rgba(100,116,139,.12); border-color: rgba(100,116,139,.25); color: rgb(51,65,85); }
.dark .pm-chip-read{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.75); }

.pm-chip-important{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: rgb(146,64,14); }
.dark .pm-chip-important{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.25); color: rgba(253,230,138,.95); }

.pm-chip-muted{ background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); color: rgb(51,65,85); }
.dark .pm-chip-muted{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.7); }

/* ===== Sidebar nav ===== */
.pm-nav{
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem;
    border-radius: 1.2rem;
    font-weight: 950;
    color:#0f172a;
    border:1px solid transparent;
    transition: all .15s ease;
}
.dark .pm-nav{ color: rgba(255,255,255,.85); }
.pm-nav:hover{
    background: rgba(148,163,184,.10);
    border-color: rgba(148,163,184,.20);
}
.dark .pm-nav:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}

/* ===== Textarea ===== */
.pm-textarea{
    width:100%;
    border-radius: 1.25rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: inset 0 2px 10px rgba(2,6,23,.06);
    outline: none;
    transition: all .15s ease;
}
.pm-textarea:focus{
    border-color: rgba(16,185,129,.55);
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dark .pm-textarea{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
}
.dark .pm-textarea:focus{
    box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

/* Templates */
.pm-template{
    border:1px solid rgba(226,232,240,.9);
    background: rgba(241,245,249,.75);
    color:#0f172a;
    padding:.45rem .75rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 950;
    transition: all .15s ease;
}
.pm-template:hover{
    transform: translateY(-1px);
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
}
.dark .pm-template{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
}

/* ===== Chat bubbles ===== */
.pm-avatar{ background: linear-gradient(135deg, rgba(16,185,129,1), rgba(59,130,246,1)); }

.pm-bubble{
    width: min(520px, 92%);
    border-radius: 1.5rem;
    border: 1px solid rgba(226,232,240,.9);
    overflow: hidden;
}
.dark .pm-bubble{ border-color: rgba(255,255,255,.10); }

.pm-bubble-in{
    background: rgba(241,245,249,.70);
    color:#0f172a;
}
.dark .pm-bubble-in{
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.90);
}

.pm-bubble-out{
    background: linear-gradient(90deg, rgba(16,185,129,1), rgba(56,189,248,1));
    color:#fff;
    border-color: rgba(16,185,129,.25);
}

.pm-bubble-head{
    padding: 12px 14px;
    border-bottom: 1px solid rgba(226,232,240,.9);
}
.pm-bubble-out .pm-bubble-head{ border-bottom-color: rgba(255,255,255,.18); }
.dark .pm-bubble-head{ border-bottom-color: rgba(255,255,255,.10); }

.pm-bubble-title{ font-weight: 950; font-size: 13px; }
.pm-bubble-meta{ font-size: 11px; font-weight: 800; opacity: .80; margin-top: 2px; }

.pm-bubble-body{
    padding: 14px;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 700;
}

/* Empty */
.pm-empty{
    padding: 14px;
    border-radius: 1.25rem;
    border:1px dashed rgba(148,163,184,.45);
    background: rgba(241,245,249,.45);
    color: rgba(100,116,139,1);
    font-weight: 900;
    font-size: 13px;
}
.dark .pm-empty{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.55);
}
</style>

<script>
/* ===== Confirm Modal ===== */
function pmConfirmSubmit(e, title, text){
    e.preventDefault();

    const modal  = document.getElementById('pm-confirm');
    const t      = document.getElementById('pm-confirm-title');
    const p      = document.getElementById('pm-confirm-text');
    const ok     = document.getElementById('pm-confirm-ok');
    const cancel = document.getElementById('pm-confirm-cancel');

    if(!modal || !t || !p || !ok || !cancel){
        if(window.confirm(text || 'هل أنت متأكد؟')) e.target.submit();
        return false;
    }

    t.textContent = title || 'تأكيد';
    p.textContent = text || 'هل أنت متأكد؟';
    modal.classList.remove('hidden');

    const cleanup = () => {
        modal.classList.add('hidden');
        ok.onclick = null;
        cancel.onclick = null;
    };

    ok.onclick = () => { cleanup(); e.target.submit(); };
    cancel.onclick = () => cleanup();

    return false;
}

/* ===== Log toggle ===== */
function toggleLog(){
    const log = document.getElementById('pm-log');
    const ic  = document.getElementById('pm-log-icon');
    if(!log) return;
    log.classList.toggle('hidden');
    ic?.classList.toggle('rotate-180');
}

/* ===== Toast ===== */
function pmToast(type, message){
    const box = document.getElementById('pm-toasts');
    if(!box) return;

    const styles = {
        success: 'background:#10b981;color:#fff;',
        error:   'background:#f43f5e;color:#fff;',
        info:    'background:#0f172a;color:#fff;'
    };
    const style = styles[type] || styles.info;

    const id = 't_' + Math.random().toString(16).slice(2);
    const el = document.createElement('div');
    el.id = id;
    el.setAttribute('style', style + 'padding:12px 14px;border-radius:18px;font-weight:900;box-shadow:0 20px 50px rgba(0,0,0,.12);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;');
    el.innerHTML = `
        <div style="font-size:13px;line-height:1.5;">${escapeHtml(message || '—')}</div>
        <button type="button" onclick="document.getElementById('${id}')?.remove()"
                style="font-weight:900;background:transparent;border:none;color:inherit;cursor:pointer;">✕</button>
    `;
    box.appendChild(el);
    setTimeout(() => document.getElementById(id)?.remove(), 3000);
}

/* ===== Copy ===== */
async function pmCopyText(text, successMsg){
    try{
        await navigator.clipboard.writeText(text || '');
        pmToast('success', successMsg || 'تم النسخ ✅');
    }catch(e){
        const ta = document.createElement('textarea');
        ta.value = text || '';
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        ta.remove();
        pmToast('success', successMsg || 'تم النسخ ✅');
    }
}

/* ===== Insert into textarea ===== */
function pmInsertText(text, toastMsg){
    const ta = document.getElementById('pm-reply-body');
    if(!ta) return;

    const insert = text || '';
    const start = ta.selectionStart || 0;
    const end   = ta.selectionEnd || 0;

    ta.value = ta.value.slice(0, start) + insert + ta.value.slice(end);
    ta.focus();
    ta.selectionStart = ta.selectionEnd = start + insert.length;

    pmToast('info', toastMsg || 'تم الإدراج ✍️');
    pmUpdateCount();
}

/* ===== Templates ===== */
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.pm-template').forEach(btn => {
        btn.addEventListener('click', () => {
            const txt = btn.getAttribute('data-text') || '';
            const ta = document.getElementById('pm-reply-body');
            if(!ta) return;
            ta.value = ta.value ? (ta.value.trim() + "\n\n" + txt) : txt;
            ta.focus();
            pmToast('info', 'تم إدراج قالب رد ✍️');
            pmUpdateCount();
        });
    });

    const ta = document.getElementById('pm-reply-body');
    ta?.addEventListener('input', pmUpdateCount);
    pmUpdateCount();
});

function pmUpdateCount(){
    const ta = document.getElementById('pm-reply-body');
    const c  = document.getElementById('pm-count');
    if(!ta || !c) return;
    c.textContent = String((ta.value || '').length);
}

/* ===== Utils ===== */
function escapeHtml(str){
    return (str ?? '').toString()
        .replaceAll('&','&amp;')
        .replaceAll('<','&lt;')
        .replaceAll('>','&gt;')
        .replaceAll('"','&quot;')
        .replaceAll("'",'&#039;');
}
</script>
@endsection