<script setup>
import { ref, computed } from 'vue'
import { Link } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import { useAuthStore } from '@/Stores/useAuthStore'

const auth   = useAuthStore()
const locale = computed(() => auth.locale)
const t      = (en, ar) => locale.value === 'ar' ? ar : en

const props = defineProps({
    asProvider: { type: Array, default: () => [] }, // matches where I am the freelancer
    asSeeker:   { type: Array, default: () => [] }, // matches where I sent interest
})

// ── Active tab ────────────────────────────────────────────────
const activeTab = ref(
    props.asProvider.length > 0 ? 'provider' : 'seeker'
)

// ── Local reactive copies ─────────────────────────────────────
const providerMatches = ref(props.asProvider.map(m => ({ ...m })))
const seekerMatches   = ref(props.asSeeker.map(m => ({ ...m })))

// ── Status helpers ────────────────────────────────────────────
function statusMeta(status) {
    const map = {
        pending:    { en: 'Pending',    ar: 'في الانتظار', color: '#F59E0B' },
        interested: { en: 'Interested', ar: 'مهتم',        color: '#378ADD' },
        declined:   { en: 'Declined',   ar: 'رفض',         color: '#EF4444' },
        connected:  { en: 'Connected',  ar: 'تم التواصل',  color: '#1D9E75' },
    }
    return map[status] ?? { en: status, ar: status, color: '#6B7280' }
}

function expLabel(val) {
    const map = {
        student: t('Student', 'طالب'),
        fresh:   t('Fresh Graduate', 'خريج جديد'),
        junior:  t('Junior', 'مبتدئ'),
        mid:     t('Mid-Level', 'متوسط'),
        senior:  t('Senior', 'خبير'),
    }
    return map[val] ?? val
}

// ── Provider actions: respond to a pending match ──────────────
const respondingId = ref(null)

async function respond(match, response) {
    respondingId.value = match.id
    try {
        const res = await fetch(route('member.freelance.respond', match.id), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ response }),
        })
        const data = await res.json()
        const idx = providerMatches.value.findIndex(m => m.id === match.id)
        if (idx !== -1) providerMatches.value[idx].status = data.status
    } finally {
        respondingId.value = null
    }
}

// ── Consent gate ──────────────────────────────────────────────
const consentMatchId  = ref(null)
const consentSide     = ref(null) // 'provider' | 'seeker'
const showConsentGate = ref(false)
const consentLoading  = ref(false)

function openConsent(match, side) {
    consentMatchId.value  = match.id
    consentSide.value     = side
    showConsentGate.value = true
}

async function confirmConsent() {
    consentLoading.value = true
    try {
        const res = await fetch(route('member.freelance.consent', consentMatchId.value), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
        })
        const data = await res.json()

        const list  = consentSide.value === 'provider' ? providerMatches : seekerMatches
        const idx   = list.value.findIndex(m => m.id === consentMatchId.value)
        if (idx !== -1) {
            list.value[idx].status = data.status
            if (consentSide.value === 'provider') {
                list.value[idx].provider_consented = true
            } else {
                list.value[idx].seeker_consented = true
            }
            if (data.contact_shared) {
                list.value[idx].contact = data.contact
            }
        }

        showConsentGate.value = false
        consentMatchId.value  = null
    } finally {
        consentLoading.value = false
    }
}

// ── Review flow ───────────────────────────────────────────────
const reviewMatchId  = ref(null)
const reviewRating   = ref(0)
const reviewComment  = ref('')
const reviewPosting  = ref(false)
const reviewPosted   = ref({}) // matchId → true

function openReview(matchId) {
    reviewMatchId.value = matchId
    reviewRating.value  = 0
    reviewComment.value = ''
}

async function submitReview() {
    if (!reviewRating.value) return
    reviewPosting.value = true
    try {
        await fetch(route('member.freelance.review', reviewMatchId.value), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({
                rating:  reviewRating.value,
                comment: reviewComment.value,
            }),
        })
        reviewPosted.value[reviewMatchId.value] = true
        reviewMatchId.value = null
    } finally {
        reviewPosting.value = false
    }
}

// ── Counts for tab badges ─────────────────────────────────────
const providerPending    = computed(() => providerMatches.value.filter(m => m.status === 'pending').length)
const seekerInterested   = computed(() => seekerMatches.value.filter(m => m.status === 'interested').length)
</script>

<template>
    <AppLayout>
        <div class="mm-page">

            <!-- Header -->
            <div class="mm-header">
                <Link :href="route('member.freelance.index')" class="mm-back">
                    ← {{ t('Help & Earn', 'المساعدة والكسب') }}
                </Link>
                <h1 class="mm-title">{{ t('My Matches', 'طلباتي') }}</h1>
                <p class="mm-subtitle">
                    {{ t(
                        'All your freelance interactions in one place — interests you sent and interests you received.',
                        'جميع تفاعلاتك المهنية في مكان واحد — الاهتمامات التي أرسلتها والتي تلقيتها.'
                    ) }}
                </p>
            </div>

            <!-- ── Tabs ───────────────────────────────────── -->
            <div class="mm-tabs">
                <button
                    class="mm-tab"
                    :class="{ 'mm-tab--active': activeTab === 'provider' }"
                    @click="activeTab = 'provider'"
                >
                    {{ t('Requests I Received', 'الطلبات التي تلقيتها') }}
                    <span v-if="providerPending" class="mm-tab-dot">{{ providerPending }}</span>
                </button>
                <button
                    class="mm-tab"
                    :class="{ 'mm-tab--active': activeTab === 'seeker' }"
                    @click="activeTab = 'seeker'"
                >
                    {{ t('Interests I Sent', 'الاهتمامات التي أرسلتها') }}
                    <span v-if="seekerInterested" class="mm-tab-dot mm-tab-dot--blue">{{ seekerInterested }}</span>
                </button>
            </div>

            <!-- ══════════════════════════════════════
                 PROVIDER TAB — I am the freelancer
            ══════════════════════════════════════ -->
            <div v-if="activeTab === 'provider'">

                <div v-if="!providerMatches.length" class="mm-empty">
                    <p class="mm-empty-icon">📭</p>
                    <p class="mm-empty-text">{{ t('No requests yet', 'لا طلبات بعد') }}</p>
                    <p class="mm-empty-sub">
                        {{ t(
                            'When a seeker sends you an interest, it will appear here.',
                            'عندما يرسل لك أحد الباحثين اهتمامه، سيظهر هنا.'
                        ) }}
                    </p>
                    <Link :href="route('member.freelance.profile.edit')" class="mm-empty-btn">
                        {{ t('Update my profile', 'تحديث ملفي') }}
                    </Link>
                </div>

                <div v-else class="mm-list">
                    <div
                        v-for="match in providerMatches"
                        :key="match.id"
                        class="mm-card"
                        :class="{
                            'mm-card--pending':   match.status === 'pending',
                            'mm-card--interested':match.status === 'interested',
                            'mm-card--connected': match.status === 'connected',
                            'mm-card--declined':  match.status === 'declined',
                        }"
                    >
                        <!-- Card header -->
                        <div class="mm-card-head">
                            <div class="mm-avatar">
                                {{ match.seeker_nickname?.charAt(0).toUpperCase() ?? '?' }}
                            </div>
                            <div class="mm-card-info">
                                <p class="mm-card-name">{{ match.seeker_nickname ?? t('Member', 'عضو') }}</p>
                                <p class="mm-card-time">{{ match.created_at_human }}</p>
                            </div>
                            <span
                                class="mm-status-badge"
                                :style="{
                                    background: statusMeta(match.status).color + '18',
                                    color:      statusMeta(match.status).color,
                                    borderColor:statusMeta(match.status).color + '44',
                                }"
                            >
                                {{ locale === 'ar' ? statusMeta(match.status).ar : statusMeta(match.status).en }}
                            </span>
                        </div>

                        <!-- Brief link if available -->
                        <div v-if="match.brief_title" class="mm-brief-ref">
                            <span class="mm-brief-label">{{ t('Brief:', 'الطلب:') }}</span>
                            <Link
                                :href="route('member.freelance.briefs.show', match.brief_id)"
                                class="mm-brief-link"
                            >{{ match.brief_title }}</Link>
                        </div>

                        <!-- Seeker message -->
                        <div v-if="match.seeker_message" class="mm-message">
                            <p class="mm-message-label">{{ t('Their message:', 'رسالتهم:') }}</p>
                            <p class="mm-message-text">{{ match.seeker_message }}</p>
                        </div>

                        <!-- Pending — respond buttons -->
                        <div v-if="match.status === 'pending'" class="mm-respond-row">
                            <button
                                class="mm-decline-btn"
                                :disabled="respondingId === match.id"
                                @click="respond(match, 'declined')"
                            >
                                {{ t('Not for me', 'لا يناسبني') }}
                            </button>
                            <button
                                class="mm-accept-btn"
                                :disabled="respondingId === match.id"
                                @click="respond(match, 'interested')"
                            >
                                {{ respondingId === match.id
                                    ? t('Saving…', 'جارٍ الحفظ…')
                                    : t('I am Interested', 'أنا مهتم') }}
                            </button>
                        </div>

                        <!-- Interested — consent needed from provider -->
                        <div
                            v-else-if="match.status === 'interested' && !match.provider_consented"
                            class="mm-consent-prompt"
                        >
                            <p class="mm-consent-text">
                                {{ t(
                                    'You expressed interest. Share your contact to connect.',
                                    'أبديت اهتمامك. شارك بياناتك للتواصل.'
                                ) }}
                            </p>
                            <button class="mm-consent-btn" @click="openConsent(match, 'provider')">
                                {{ t('Share My Contact', 'مشاركة بياناتي') }}
                            </button>
                        </div>

                        <!-- Interested — provider consented, waiting for seeker -->
                        <div
                            v-else-if="match.status === 'interested' && match.provider_consented"
                            class="mm-waiting"
                        >
                            ⏳ {{ t('Your contact is shared — waiting for the seeker to confirm.', 'تمت مشاركة بياناتك — في انتظار تأكيد الطرف الآخر.') }}
                        </div>

                        <!-- Connected — show contact + review option -->
                        <div v-else-if="match.status === 'connected'" class="mm-connected">
                            <div v-if="match.contact" class="mm-contact">
                                <p class="mm-contact-title">🎉 {{ t('Contact Shared', 'تم مشاركة الاتصال') }}</p>
                                <p><strong>{{ t('Name', 'الاسم') }}:</strong> {{ match.contact.name }}</p>
                                <p><strong>{{ t('Email', 'البريد') }}:</strong> {{ match.contact.email }}</p>
                                <p v-if="match.contact.phone"><strong>{{ t('Phone', 'الهاتف') }}:</strong> {{ match.contact.phone }}</p>
                            </div>
                            <!-- Leave a review -->
                            <div v-if="!reviewPosted[match.id] && !match.has_review" class="mm-review-prompt">
                                <button class="mm-review-open-btn" @click="openReview(match.id)">
                                    ★ {{ t('Leave a Review', 'اترك تقييماً') }}
                                </button>
                            </div>
                            <p v-else class="mm-reviewed">✓ {{ t('Review posted', 'تم نشر التقييم') }}</p>
                        </div>

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

            <!-- ══════════════════════════════════════
                 SEEKER TAB — I sent interest
            ══════════════════════════════════════ -->
            <div v-if="activeTab === 'seeker'">

                <div v-if="!seekerMatches.length" class="mm-empty">
                    <p class="mm-empty-icon">🔍</p>
                    <p class="mm-empty-text">{{ t('No interests sent yet', 'لم ترسل أي اهتمام بعد') }}</p>
                    <p class="mm-empty-sub">
                        {{ t(
                            'Browse freelancers and send interest to someone whose skills match what you need.',
                            'تصفح المستقلين وأرسل اهتمامك لمن تتطابق مهاراتهم مع احتياجاتك.'
                        ) }}
                    </p>
                    <Link :href="route('member.freelance.index')" class="mm-empty-btn">
                        {{ t('Browse Freelancers', 'تصفح المستقلين') }}
                    </Link>
                </div>

                <div v-else class="mm-list">
                    <div
                        v-for="match in seekerMatches"
                        :key="match.id"
                        class="mm-card"
                        :class="{
                            'mm-card--pending':    match.status === 'pending',
                            'mm-card--interested': match.status === 'interested',
                            'mm-card--connected':  match.status === 'connected',
                            'mm-card--declined':   match.status === 'declined',
                        }"
                    >
                        <!-- Card header -->
                        <div class="mm-card-head">
                            <div class="mm-avatar mm-avatar--teal">
                                {{ match.profile_nickname?.charAt(0).toUpperCase() ?? '?' }}
                            </div>
                            <div class="mm-card-info">
                                <p class="mm-card-name">{{ match.profile_nickname ?? t('Freelancer', 'مستقل') }}</p>
                                <p class="mm-card-sub">{{ match.profile_headline }}</p>
                                <p class="mm-card-time">{{ match.created_at_human }}</p>
                            </div>
                            <span
                                class="mm-status-badge"
                                :style="{
                                    background: statusMeta(match.status).color + '18',
                                    color:      statusMeta(match.status).color,
                                    borderColor:statusMeta(match.status).color + '44',
                                }"
                            >
                                {{ locale === 'ar' ? statusMeta(match.status).ar : statusMeta(match.status).en }}
                            </span>
                        </div>

                        <!-- LinkedIn trust signal -->
                        <div v-if="match.profile_linkedin" class="mm-linkedin-row">
                            <a
                                :href="route('member.share.external') + '?url=' + encodeURIComponent(match.profile_linkedin)"
                                target="_blank"
                                class="mm-linkedin-btn"
                            >in {{ t('View LinkedIn', 'عرض LinkedIn') }}</a>
                        </div>

                        <!-- My message to them -->
                        <div v-if="match.seeker_message" class="mm-message">
                            <p class="mm-message-label">{{ t('Your message:', 'رسالتك:') }}</p>
                            <p class="mm-message-text">{{ match.seeker_message }}</p>
                        </div>

                        <!-- Pending — waiting -->
                        <div v-if="match.status === 'pending'" class="mm-waiting">
                            ⏳ {{ t('Waiting for their response…', 'في انتظار ردهم…') }}
                        </div>

                        <!-- Interested — seeker needs to consent -->
                        <div
                            v-else-if="match.status === 'interested' && !match.seeker_consented"
                            class="mm-consent-prompt"
                        >
                            <p class="mm-consent-text">
                                {{ t(
                                    'They are interested! Share your contact to complete the connection.',
                                    'أبدوا اهتمامهم! شارك بياناتك لإتمام التواصل.'
                                ) }}
                            </p>
                            <button class="mm-consent-btn" @click="openConsent(match, 'seeker')">
                                {{ t('Share My Contact', 'مشاركة بياناتي') }}
                            </button>
                        </div>

                        <!-- Interested — seeker consented, waiting for provider -->
                        <div
                            v-else-if="match.status === 'interested' && match.seeker_consented"
                            class="mm-waiting"
                        >
                            ⏳ {{ t('Your contact is shared — waiting for their confirmation.', 'تمت مشاركة بياناتك — في انتظار تأكيدهم.') }}
                        </div>

                        <!-- Connected — contact info + review -->
                        <div v-else-if="match.status === 'connected'" class="mm-connected">
                            <div v-if="match.contact" class="mm-contact">
                                <p class="mm-contact-title">🎉 {{ t('Connected!', 'تم التواصل!') }}</p>
                                <p><strong>{{ t('Name', 'الاسم') }}:</strong> {{ match.contact.name }}</p>
                                <p><strong>{{ t('Email', 'البريد') }}:</strong> {{ match.contact.email }}</p>
                                <p v-if="match.contact.phone"><strong>{{ t('Phone', 'الهاتف') }}:</strong> {{ match.contact.phone }}</p>
                            </div>
                            <div v-if="!reviewPosted[match.id] && !match.has_review" class="mm-review-prompt">
                                <button class="mm-review-open-btn" @click="openReview(match.id)">
                                    ★ {{ t('Leave a Review', 'اترك تقييماً') }}
                                </button>
                            </div>
                            <p v-else class="mm-reviewed">✓ {{ t('Review posted', 'تم نشر التقييم') }}</p>
                        </div>

                        <!-- Declined -->
                        <div v-else-if="match.status === 'declined'" class="mm-declined-note">
                            {{ t(
                                'This freelancer is not available for this engagement.',
                                'هذا المستقل غير متاح لهذا التعاون.'
                            ) }}
                        </div>

                        <!-- View profile link -->
                        <Link
                            v-if="match.profile_id"
                            :href="route('member.freelance.profile.show', match.profile_id)"
                            class="mm-view-link"
                        >
                            {{ t('View full profile →', 'عرض الملف الكامل →') }}
                        </Link>

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

        </div><!-- end mm-page -->

        <!-- ── Review Modal ───────────────────────────── -->
        <Teleport to="body">
            <div v-if="reviewMatchId" class="rv-overlay" @click.self="reviewMatchId = null">
                <div class="rv-modal">
                    <h2 class="rv-title">{{ t('Leave a Review', 'اترك تقييماً') }}</h2>
                    <p class="rv-sub">
                        {{ t(
                            'Your review helps other members make informed decisions.',
                            'تقييمك يساعد الأعضاء الآخرين على اتخاذ قرارات مستنيرة.'
                        ) }}
                    </p>

                    <!-- Star picker -->
                    <div class="rv-stars">
                        <button
                            v-for="n in 5"
                            :key="n"
                            type="button"
                            class="rv-star-btn"
                            :class="{ 'rv-star-btn--filled': n <= reviewRating }"
                            @click="reviewRating = n"
                        >★</button>
                    </div>
                    <p class="rv-star-hint">
                        {{ reviewRating === 0 ? t('Tap to rate', 'اضغط للتقييم') :
                           reviewRating === 1 ? t('Poor', 'ضعيف') :
                           reviewRating === 2 ? t('Fair', 'مقبول') :
                           reviewRating === 3 ? t('Good', 'جيد') :
                           reviewRating === 4 ? t('Very Good', 'جيد جداً') :
                           t('Excellent', 'ممتاز') }}
                    </p>

                    <!-- Comment -->
                    <textarea
                        v-model="reviewComment"
                        class="rv-comment"
                        rows="4"
                        maxlength="500"
                        :placeholder="t('Share your experience (optional)…', 'شارك تجربتك (اختياري)…')"
                    ></textarea>

                    <div class="rv-actions">
                        <button class="rv-cancel" @click="reviewMatchId = null">
                            {{ t('Cancel', 'إلغاء') }}
                        </button>
                        <button
                            class="rv-submit"
                            :disabled="!reviewRating || reviewPosting"
                            @click="submitReview"
                        >
                            {{ reviewPosting ? t('Posting…', 'جارٍ النشر…') : t('Post Review', 'نشر التقييم') }}
                        </button>
                    </div>
                </div>
            </div>
        </Teleport>

        <!-- ── Consent Gate Modal ──────────────────────── -->
        <Teleport to="body">
            <div v-if="showConsentGate" class="cg-overlay" @click.self="showConsentGate = false">
                <div class="cg-modal">
                    <div class="cg-icon">🔓</div>
                    <h2 class="cg-title">{{ t('Share Your Contact Information', 'مشاركة معلومات الاتصال') }}</h2>
                    <p class="cg-body">
                        {{ t(
                            'You are about to share your name, email, and phone number. This action cannot be undone. Your contact information will be visible to the other party permanently.',
                            'أنت على وشك مشاركة اسمك وبريدك الإلكتروني ورقم هاتفك. لا يمكن التراجع عن هذا الإجراء. ستكون معلوماتك مرئية للطرف الآخر بشكل دائم.'
                        ) }}
                    </p>
                    <p class="cg-disclaimer">
                        {{ t(
                            'InPractice is not responsible for fees, payment, or quality of work. All arrangements are between you and the other party.',
                            'InPractice غير مسؤول عن الأتعاب أو الدفع أو جودة العمل. جميع الترتيبات بينك وبين الطرف الآخر.'
                        ) }}
                    </p>
                    <div class="cg-actions">
                        <button class="cg-cancel" @click="showConsentGate = false">
                            {{ t('Cancel', 'إلغاء') }}
                        </button>
                        <button
                            class="cg-confirm"
                            :disabled="consentLoading"
                            @click="confirmConsent"
                        >
                            {{ consentLoading
                                ? t('Processing…', 'جارٍ المعالجة…')
                                : t('Confirm & Connect', 'تأكيد والتواصل') }}
                        </button>
                    </div>
                </div>
            </div>
        </Teleport>

    </AppLayout>
</template>

<style scoped>
.mm-page { padding: 16px; max-width: 760px; margin: 0 auto; }

/* ── Header ─────────────────────────────────────── */
.mm-back     { font-size: 13px; color: var(--color-primary); text-decoration: none; display: inline-block; margin-bottom: 12px; }
.mm-title    { font-size: 22px; font-weight: 800; color: var(--color-text); margin: 0 0 6px; }
.mm-subtitle { font-size: 13px; color: var(--color-text-muted); margin: 0 0 20px; line-height: 1.6; }

/* ── Tabs ───────────────────────────────────────── */
.mm-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--color-border); margin-bottom: 20px; }
.mm-tab {
    padding: 10px 14px; font-size: 13px; font-weight: 600;
    color: var(--color-text-muted); background: transparent;
    border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    display: flex; align-items: center; gap: 7px; transition: color 0.15s;
}
.mm-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.mm-tab-dot {
    background: #F59E0B; color: #fff;
    border-radius: 10px; padding: 1px 7px;
    font-size: 11px; font-weight: 700;
}
.mm-tab-dot--blue { background: #378ADD; }

/* ── Empty ──────────────────────────────────────── */
.mm-empty      { text-align: center; padding: 48px 24px; }
.mm-empty-icon { font-size: 40px; margin-bottom: 12px; }
.mm-empty-text { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.mm-empty-sub  { font-size: 13px; color: var(--color-text-muted); margin-bottom: 20px; line-height: 1.6; }
.mm-empty-btn  {
    display: inline-block; padding: 10px 24px;
    background: var(--color-primary); color: #fff;
    border-radius: 10px; font-size: 14px; font-weight: 600;
    text-decoration: none;
}

/* ── Match list ─────────────────────────────────── */
.mm-list { display: flex; flex-direction: column; gap: 12px; }
.mm-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px; padding: 16px;
    border-inline-start: 4px solid var(--color-border);
    transition: border-color 0.15s;
}
.mm-card--pending    { border-inline-start-color: #F59E0B; }
.mm-card--interested { border-inline-start-color: #378ADD; }
.mm-card--connected  { border-inline-start-color: #1D9E75; }
.mm-card--declined   { border-inline-start-color: #EF444444; opacity: 0.7; }

/* Card head */
.mm-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mm-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-bg); color: var(--color-text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.mm-avatar--teal { background: #1D9E7522; color: #1D9E75; }
.mm-card-info { flex: 1; min-width: 0; }
.mm-card-name { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0 0 2px; }
.mm-card-sub  { font-size: 12px; color: var(--color-text-muted); margin: 0 0 2px; }
.mm-card-time { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.mm-status-badge {
    padding: 3px 9px; border-radius: 6px; border: 1px solid;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* Brief ref */
.mm-brief-ref  { font-size: 12px; margin-bottom: 10px; display: flex; gap: 6px; align-items: center; }
.mm-brief-label { color: var(--color-text-muted); }
.mm-brief-link  { color: var(--color-primary); text-decoration: none; font-weight: 600; }

/* LinkedIn */
.mm-linkedin-row { margin-bottom: 10px; }
.mm-linkedin-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #0077B5; color: #fff;
    padding: 4px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700; text-decoration: none;
}

/* Message */
.mm-message       { background: var(--color-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.mm-message-label { font-size: 11px; color: var(--color-text-muted); margin: 0 0 4px; font-weight: 700; }
.mm-message-text  { font-size: 13px; color: var(--color-text); margin: 0; line-height: 1.6; }

/* Respond row */
.mm-respond-row { display: flex; gap: 8px; margin-top: 4px; }
.mm-decline-btn {
    flex: 1; padding: 9px; background: transparent;
    border: 1px solid var(--color-border); border-radius: 8px;
    font-size: 13px; color: var(--color-text-muted); cursor: pointer;
}
.mm-accept-btn {
    flex: 2; padding: 9px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.mm-accept-btn:disabled, .mm-decline-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Consent prompt */
.mm-consent-prompt { margin-top: 4px; }
.mm-consent-text   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.5; }
.mm-consent-btn {
    width: 100%; padding: 10px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}

/* Waiting */
.mm-waiting { font-size: 12px; color: var(--color-text-muted); padding: 4px 0; }

/* Connected */
.mm-connected  { }
.mm-contact    { background: var(--color-bg); border: 1px solid #1D9E7544; border-radius: 10px; padding: 12px; font-size: 13px; color: var(--color-text); display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mm-contact-title { font-size: 13px; font-weight: 700; color: #1D9E75; margin: 0 0 6px; }

/* Review */
.mm-review-prompt  { }
.mm-review-open-btn {
    padding: 8px 16px; background: transparent;
    border: 1px solid #F59E0B44; color: #F59E0B;
    border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.mm-reviewed { font-size: 12px; color: #1D9E75; font-weight: 600; }

/* Declined */
.mm-declined-note { font-size: 12px; color: var(--color-text-muted); padding: 4px 0; }

/* View link */
.mm-view-link { display: inline-block; font-size: 12px; color: var(--color-primary); text-decoration: none; font-weight: 600; margin-top: 10px; }

/* ── Review modal ───────────────────────────────── */
.rv-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 9999; padding: 0 0 env(safe-area-inset-bottom);
}
.rv-modal {
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    padding: 28px 24px 32px; width: 100%; max-width: 500px;
}
.rv-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 6px; }
.rv-sub   { font-size: 13px; color: var(--color-text-muted); margin: 0 0 20px; }
.rv-stars { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.rv-star-btn {
    font-size: 36px; background: none; border: none;
    cursor: pointer; color: var(--color-border); transition: color 0.1s;
}
.rv-star-btn--filled { color: #F59E0B; }
.rv-star-hint { text-align: center; font-size: 13px; color: var(--color-text-muted); margin: 0 0 16px; height: 18px; }
.rv-comment {
    width: 100%; padding: 10px 12px; box-sizing: border-box;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 8px; font-size: 13px; color: var(--color-text);
    resize: vertical; margin-bottom: 16px;
}
.rv-comment::placeholder { color: var(--color-text-muted); }
.rv-actions { display: flex; gap: 10px; }
.rv-cancel {
    flex: 1; padding: 11px; background: transparent;
    border: 2px solid var(--color-border); border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--color-text-muted); cursor: pointer;
}
.rv-submit {
    flex: 2; padding: 11px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.rv-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Consent gate ───────────────────────────────── */
.cg-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 9999; padding: 0 0 env(safe-area-inset-bottom);
}
.cg-modal {
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    padding: 28px 24px 32px; width: 100%; max-width: 500px; text-align: center;
}
.cg-icon  { font-size: 40px; margin-bottom: 12px; }
.cg-title { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 12px; }
.cg-body  { font-size: 14px; color: var(--color-text); line-height: 1.7; margin: 0 0 12px; }
.cg-disclaimer {
    font-size: 11px; color: var(--color-text-muted); line-height: 1.6;
    margin: 0 0 20px; padding: 12px;
    background: var(--color-bg); border-radius: 8px;
}
.cg-actions { display: flex; gap: 10px; }
.cg-cancel {
    flex: 1; padding: 12px; background: transparent;
    border: 2px solid var(--color-border); border-radius: 12px;
    font-size: 14px; font-weight: 600; color: var(--color-text-muted); cursor: pointer;
}
.cg-confirm {
    flex: 2; padding: 12px;
    background: var(--color-primary); color: #fff;
    border: none; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.cg-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Desktop ────────────────────────────────────── */
@media (min-width: 768px) {
    .mm-page   { padding: 32px 24px; }
    .mm-title  { font-size: 26px; }
    .rv-overlay, .cg-overlay { align-items: center; }
    .rv-modal, .cg-modal     { border-radius: 20px; margin: 16px; }
}
</style>
