<script setup>
import { ref, computed } from 'vue'
import { Link, router } 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({
    brief:   { type: Object,  required: true },
    isOwner: { type: Boolean, default: false },
    matches: { type: Array,   default: () => [] }, // only populated for owner
})

// ── Hub color ─────────────────────────────────────────────────
const hubColors = { finance: '#1D9E75', marketing: '#378ADD', sales: '#D85A30' }
function hubColor(slug) { return hubColors[slug] ?? 'var(--color-primary)' }
const accentColor = computed(() => hubColor(props.brief.hub?.slug))

// ── Safe arrays ───────────────────────────────────────────────
const safeSkills = computed(() =>
    Array.isArray(props.brief.required_skills) ? props.brief.required_skills : []
)

// ── Status helpers ────────────────────────────────────────────
function statusLabel(status) {
    const map = {
        open:        { en: 'Open',        ar: 'مفتوح',    color: '#1D9E75' },
        in_progress: { en: 'In Progress', ar: 'جارٍ',     color: '#378ADD' },
        closed:      { en: 'Closed',      ar: 'مغلق',     color: '#6B7280' },
    }
    return map[status] ?? { en: status, ar: status, color: '#6B7280' }
}

function matchStatusLabel(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
}

function availLabel(val) {
    const map = {
        weekends:    t('Weekends', 'الإجازات'),
        evenings:    t('Evenings', 'المساءات'),
        full:        t('Fully Available', 'متفرغ كامل'),
        unavailable: t('Unavailable', 'غير متاح'),
    }
    return map[val] ?? val
}

// ── Close brief ───────────────────────────────────────────────
const closingBrief = ref(false)
const showCloseConfirm = ref(false)

function closeBrief() {
    closingBrief.value = true
    router.patch(route('member.freelance.briefs.close', props.brief.id), {}, {
        onFinish: () => {
            closingBrief.value  = false
            showCloseConfirm.value = false
        },
    })
}

// ── Owner: consent gate for a specific match ──────────────────
const consentMatchId  = ref(null)
const showConsentGate = ref(false)
const consentLoading  = ref(false)

// Local reactive copy of matches so UI updates without page reload
const localMatches = ref(props.matches.map(m => ({ ...m })))

function openConsentGate(matchId) {
    consentMatchId.value  = matchId
    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()

        // Update the local match record
        const idx = localMatches.value.findIndex(m => m.id === consentMatchId.value)
        if (idx !== -1) {
            localMatches.value[idx].status           = data.status
            localMatches.value[idx].seeker_consented = true
            if (data.contact_shared) {
                localMatches.value[idx].contact = data.contact
            }
        }

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

// How many interested matches are there?
const interestedCount = computed(() =>
    localMatches.value.filter(m => m.status === 'interested').length
)
const pendingCount = computed(() =>
    localMatches.value.filter(m => m.status === 'pending').length
)
</script>

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

            <!-- Back -->
            <Link :href="route('member.freelance.index')" class="bs-back">
                ← {{ t('Help & Earn', 'المساعدة والكسب') }}
            </Link>

            <div class="bs-layout">

                <!-- ════════════════════════════════════════
                     MAIN CONTENT
                ════════════════════════════════════════ -->
                <div class="bs-main">

                    <!-- ── Brief header card ───────────── -->
                    <div class="bs-header-card">
                        <div class="bs-hub-stripe" :style="{ background: accentColor }"></div>
                        <div class="bs-header-body">

                            <!-- Hub + status row -->
                            <div class="bs-meta-row">
                                <span
                                    class="bs-hub-badge"
                                    :style="{ color: accentColor, borderColor: accentColor + '44' }"
                                >
                                    {{ locale === 'ar' ? brief.hub?.name_ar : brief.hub?.name_en }}
                                </span>
                                <span
                                    class="bs-status-badge"
                                    :style="{
                                        background: statusLabel(brief.status).color + '1A',
                                        color: statusLabel(brief.status).color,
                                        borderColor: statusLabel(brief.status).color + '44'
                                    }"
                                >
                                    {{ locale === 'ar'
                                        ? statusLabel(brief.status).ar
                                        : statusLabel(brief.status).en }}
                                </span>
                                <span class="bs-posted-at">{{ brief.created_at_human }}</span>
                            </div>

                            <!-- Title -->
                            <h1 class="bs-title">{{ brief.title }}</h1>

                            <!-- Meta chips -->
                            <div class="bs-chips">
                                <span v-if="brief.duration_estimate" class="bs-chip">
                                    ⏱ {{ brief.duration_estimate }}
                                </span>
                                <span v-if="brief.timeline" class="bs-chip">
                                    📅 {{ brief.timeline }}
                                </span>
                                <span v-if="brief.budget_range" class="bs-chip bs-chip--budget">
                                    💰 {{ brief.budget_range }}
                                </span>
                                <span v-if="brief.preferred_sector" class="bs-chip">
                                    🏭 {{ brief.preferred_sector }}
                                </span>
                            </div>

                        </div>
                    </div>

                    <!-- ── Description ─────────────────── -->
                    <div class="bs-section">
                        <h2 class="bs-section-title">{{ t('What They Need', 'ما يحتاجه') }}</h2>
                        <p class="bs-description">{{ brief.description }}</p>
                    </div>

                    <!-- ── Required Skills ─────────────── -->
                    <div v-if="safeSkills.length" class="bs-section">
                        <h2 class="bs-section-title">{{ t('Skills Required', 'المهارات المطلوبة') }}</h2>
                        <div class="bs-skills">
                            <span
                                v-for="(skill, i) in safeSkills"
                                :key="i"
                                class="bs-skill-tag"
                                :style="{ borderColor: accentColor + '55', color: accentColor }"
                            >{{ skill }}</span>
                        </div>
                    </div>

                    <!-- ── Owner: Matches panel ─────────── -->
                    <div v-if="isOwner" class="bs-section bs-matches-section">
                        <div class="bs-matches-header">
                            <h2 class="bs-section-title">
                                {{ t('Responses', 'الردود') }}
                                <span class="bs-match-count">{{ localMatches.length }}</span>
                            </h2>
                            <div class="bs-match-summary" v-if="localMatches.length">
                                <span v-if="interestedCount" class="bs-summary-chip bs-summary-chip--interested">
                                    {{ interestedCount }} {{ t('interested', 'مهتم') }}
                                </span>
                                <span v-if="pendingCount" class="bs-summary-chip bs-summary-chip--pending">
                                    {{ pendingCount }} {{ t('pending', 'في الانتظار') }}
                                </span>
                            </div>
                        </div>

                        <!-- No responses yet -->
                        <div v-if="!localMatches.length" class="bs-empty-matches">
                            <p class="bs-empty-icon">📭</p>
                            <p class="bs-empty-text">{{ t('No responses yet', 'لا ردود بعد') }}</p>
                            <p class="bs-empty-sub">
                                {{ t(
                                    'Freelancers who are interested in your brief will appear here.',
                                    'سيظهر هنا المستقلون المهتمون بطلبك.'
                                ) }}
                            </p>
                        </div>

                        <!-- Match cards -->
                        <div v-else class="bs-match-list">
                            <div
                                v-for="match in localMatches"
                                :key="match.id"
                                class="bs-match-card"
                                :class="{ 'bs-match-card--interested': match.status === 'interested',
                                          'bs-match-card--connected':  match.status === 'connected' }"
                            >
                                <!-- Match header row -->
                                <div class="bs-match-head">
                                    <!-- Avatar -->
                                    <div
                                        class="bs-match-avatar"
                                        :style="{
                                            background: accentColor + '22',
                                            color: accentColor
                                        }"
                                    >
                                        {{ match.profile?.user_nickname?.charAt(0).toUpperCase() ?? '?' }}
                                    </div>

                                    <div class="bs-match-info">
                                        <p class="bs-match-nickname">{{ match.profile?.user_nickname ?? t('Member', 'عضو') }}</p>
                                        <p class="bs-match-exp">{{ expLabel(match.profile?.experience) }}</p>
                                    </div>

                                    <!-- Status badge -->
                                    <span
                                        class="bs-match-status"
                                        :style="{
                                            background: matchStatusLabel(match.status).color + '18',
                                            color: matchStatusLabel(match.status).color,
                                            borderColor: matchStatusLabel(match.status).color + '44',
                                        }"
                                    >
                                        {{ locale === 'ar'
                                            ? matchStatusLabel(match.status).ar
                                            : matchStatusLabel(match.status).en }}
                                    </span>
                                </div>

                                <!-- Profile quick info -->
                                <div class="bs-match-meta">
                                    <span class="bs-match-chip">{{ availLabel(match.profile?.availability) }}</span>
                                    <span v-if="match.profile?.rating > 0" class="bs-match-chip">
                                        ★ {{ match.profile?.rating }} ({{ match.profile?.reviews }})
                                    </span>
                                    <!-- LinkedIn trust signal -->
                                    <a
                                        v-if="match.profile?.linkedin_url"
                                        :href="route('member.share.external') + '?url=' + encodeURIComponent(match.profile.linkedin_url)"
                                        target="_blank"
                                        class="bs-linkedin-pill"
                                        @click.stop
                                    >in LinkedIn</a>
                                </div>

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

                                <!-- Connected — show contact info -->
                                <div v-if="match.status === 'connected' && match.contact" class="bs-contact-revealed">
                                    <p class="bs-contact-title">🎉 {{ t('Contact Shared', 'تم مشاركة الاتصال') }}</p>
                                    <div class="bs-contact-info">
                                        <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>

                                <!-- Interested — seeker needs to consent -->
                                <div
                                    v-else-if="match.status === 'interested' && !match.seeker_consented"
                                    class="bs-consent-prompt"
                                >
                                    <p class="bs-consent-prompt-text">
                                        {{ t(
                                            'This freelancer is interested. Share your contact to connect.',
                                            'هذا المستقل مهتم. شارك بياناتك للتواصل.'
                                        ) }}
                                    </p>
                                    <button
                                        class="bs-consent-btn"
                                        @click="openConsentGate(match.id)"
                                    >
                                        {{ t('Share My Contact', 'مشاركة بياناتي') }}
                                    </button>
                                </div>

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

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

                    <!-- ── Disclaimer (always visible) ─── -->
                    <div class="bs-disclaimer">
                        <span>ℹ️</span>
                        {{ t(
                            'InPractice connects professionals only. We are not responsible for fees, payment, or quality of work delivered. All arrangements are between you and the other party.',
                            'InPractice تربط المهنيين فقط. لسنا مسؤولين عن الأتعاب أو الدفع أو جودة العمل المنجز. جميع الترتيبات بينك وبين الطرف الآخر.'
                        ) }}
                    </div>

                </div><!-- end bs-main -->

                <!-- ════════════════════════════════════════
                     SIDEBAR
                ════════════════════════════════════════ -->
                <div class="bs-sidebar">

                    <!-- Owner sidebar -->
                    <div v-if="isOwner" class="bs-sidebar-card">
                        <p class="bs-sidebar-title">{{ t('Your Brief', 'طلبك') }}</p>

                        <div class="bs-sidebar-stats">
                            <div class="bs-stat">
                                <span class="bs-stat-num">{{ localMatches.length }}</span>
                                <span class="bs-stat-label">{{ t('Responses', 'ردود') }}</span>
                            </div>
                            <div class="bs-stat">
                                <span class="bs-stat-num" :style="{ color: '#1D9E75' }">{{ interestedCount }}</span>
                                <span class="bs-stat-label">{{ t('Interested', 'مهتمون') }}</span>
                            </div>
                        </div>

                        <!-- Close brief -->
                        <div v-if="brief.status === 'open'">
                            <button
                                v-if="!showCloseConfirm"
                                class="bs-close-btn"
                                @click="showCloseConfirm = true"
                            >
                                {{ t('Close Brief', 'إغلاق الطلب') }}
                            </button>
                            <div v-else class="bs-close-confirm">
                                <p class="bs-close-confirm-text">
                                    {{ t('Close this brief? No new responses will be accepted.', 'إغلاق هذا الطلب؟ لن يُقبل أي رد جديد.') }}
                                </p>
                                <div class="bs-close-confirm-actions">
                                    <button class="bs-close-cancel" @click="showCloseConfirm = false">
                                        {{ t('Cancel', 'إلغاء') }}
                                    </button>
                                    <button
                                        class="bs-close-confirm-btn"
                                        :disabled="closingBrief"
                                        @click="closeBrief"
                                    >
                                        {{ closingBrief ? t('Closing…', 'جارٍ الإغلاق…') : t('Confirm Close', 'تأكيد الإغلاق') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div v-else class="bs-closed-notice">
                            {{ t('This brief is closed.', 'هذا الطلب مغلق.') }}
                        </div>

                        <Link :href="route('member.freelance.index')" class="bs-sidebar-link">
                            ← {{ t('Back to Help & Earn', 'العودة إلى المساعدة والكسب') }}
                        </Link>
                    </div>

                    <!-- Visitor sidebar — brief is open -->
                    <div v-else-if="brief.status === 'open'" class="bs-sidebar-card">
                        <p class="bs-sidebar-title">{{ t('Are you the right fit?', 'هل أنت المناسب؟') }}</p>
                        <p class="bs-sidebar-sub">
                            {{ t(
                                'If your skills match what they need, go to your freelance profile and express interest.',
                                'إذا كانت مهاراتك تتطابق مع احتياجاتهم، اذهب إلى ملفك المهني وأبدِ اهتمامك.'
                            ) }}
                        </p>
                        <Link
                            :href="route('member.freelance.index')"
                            class="bs-sidebar-btn bs-sidebar-btn--primary"
                        >
                            {{ t('Browse Freelancers', 'تصفح المستقلين') }}
                        </Link>
                        <Link
                            :href="route('member.freelance.profile.create')"
                            class="bs-sidebar-btn"
                        >
                            {{ t('Create My Profile', 'إنشاء ملفي الشخصي') }}
                        </Link>
                    </div>

                    <!-- Visitor sidebar — brief is closed -->
                    <div v-else class="bs-sidebar-card bs-sidebar-card--closed">
                        <p class="bs-sidebar-icon">🔒</p>
                        <p class="bs-sidebar-title">{{ t('This brief is closed', 'هذا الطلب مغلق') }}</p>
                        <p class="bs-sidebar-sub">
                            {{ t('The poster is no longer accepting responses.', 'لم يعد صاحب الطلب يقبل الردود.') }}
                        </p>
                        <Link :href="route('member.freelance.index')" class="bs-sidebar-btn bs-sidebar-btn--primary">
                            {{ t('Browse Open Briefs', 'تصفح الطلبات المفتوحة') }}
                        </Link>
                    </div>

                </div><!-- end bs-sidebar -->

            </div><!-- end bs-layout -->

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

        <!-- ════════════════════════════════════════
             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 with this freelancer. This action cannot be undone. Your contact information will be visible to them 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>
.bs-page { padding: 16px; }
.bs-back { font-size: 13px; color: var(--color-primary); text-decoration: none; display: inline-block; margin-bottom: 16px; }

/* ── Layout ─────────────────────────────────────── */
.bs-layout { display: flex; flex-direction: column; gap: 16px; }

/* ── Header card ────────────────────────────────── */
.bs-header-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.bs-hub-stripe  { height: 5px; }
.bs-header-body { padding: 16px; }

.bs-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.bs-hub-badge {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
}
.bs-status-badge {
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
}
.bs-posted-at { font-size: 11px; color: var(--color-text-muted); margin-inline-start: auto; }

.bs-title { font-size: 20px; font-weight: 800; color: var(--color-text); margin: 0 0 12px; line-height: 1.3; }

.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-chip {
    padding: 4px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.bs-chip--budget {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: 700;
}

/* ── Sections ───────────────────────────────────── */
.bs-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}
.bs-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs-description { font-size: 13px; color: var(--color-text); line-height: 1.7; margin: 0; white-space: pre-wrap; }

/* ── Skills ─────────────────────────────────────── */
.bs-skills    { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-skill-tag {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
}

/* ── Matches section ────────────────────────────── */
.bs-matches-section { }
.bs-matches-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bs-matches-header .bs-section-title { margin-bottom: 0; }
.bs-match-count {
    background: var(--color-bg);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
}
.bs-match-summary { display: flex; gap: 6px; margin-inline-start: auto; }
.bs-summary-chip {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.bs-summary-chip--interested { background: #378ADD22; color: #378ADD; }
.bs-summary-chip--pending    { background: #F59E0B22; color: #F59E0B; }

/* ── Empty matches ──────────────────────────────── */
.bs-empty-matches { text-align: center; padding: 32px 16px; }
.bs-empty-icon    { font-size: 36px; margin-bottom: 10px; }
.bs-empty-text    { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.bs-empty-sub     { font-size: 12px; color: var(--color-text-muted); margin: 0; line-height: 1.6; }

/* ── Match cards ────────────────────────────────── */
.bs-match-list { display: flex; flex-direction: column; gap: 12px; }
.bs-match-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 14px;
    transition: border-color 0.15s;
}
.bs-match-card--interested { border-color: #378ADD44; }
.bs-match-card--connected  { border-color: #1D9E7544; }

.bs-match-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bs-match-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.bs-match-info    { flex: 1; min-width: 0; }
.bs-match-nickname { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }
.bs-match-exp      { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.bs-match-status {
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.bs-match-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bs-match-chip {
    padding: 3px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}
.bs-linkedin-pill {
    padding: 3px 8px;
    background: #0077B5;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.bs-view-profile {
    display: inline-block;
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Contact revealed */
.bs-contact-revealed {
    background: var(--color-surface);
    border: 1px solid #1D9E7544;
    border-radius: 10px;
    padding: 12px;
}
.bs-contact-title { font-size: 13px; font-weight: 700; color: #1D9E75; margin: 0 0 8px; }
.bs-contact-info  { font-size: 13px; color: var(--color-text); display: flex; flex-direction: column; gap: 5px; }

/* Consent prompt */
.bs-consent-prompt { margin-top: 4px; }
.bs-consent-prompt-text {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0 0 8px;
    line-height: 1.5;
}
.bs-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 */
.bs-waiting-text { font-size: 12px; color: var(--color-text-muted); margin: 4px 0 0; }

/* ── Disclaimer ─────────────────────────────────── */
.bs-disclaimer {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ── Sidebar ────────────────────────────────────── */
.bs-sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}
.bs-sidebar-card--closed { text-align: center; }
.bs-sidebar-icon  { font-size: 32px; margin-bottom: 8px; }
.bs-sidebar-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.bs-sidebar-sub   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 14px; line-height: 1.6; }
.bs-sidebar-link  { display: block; font-size: 13px; color: var(--color-primary); text-decoration: none; margin-top: 12px; }

.bs-sidebar-btn {
    display: block;
    padding: 10px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    margin-bottom: 8px;
}
.bs-sidebar-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Stats strip */
.bs-sidebar-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.bs-stat {
    flex: 1;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.bs-stat-num   { display: block; font-size: 24px; font-weight: 800; color: var(--color-text); }
.bs-stat-label { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* Close brief */
.bs-close-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #EF444444;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #EF4444;
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.15s;
}
.bs-close-btn:hover { background: #EF444411; }
.bs-close-confirm { background: var(--color-bg); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.bs-close-confirm-text { font-size: 12px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.5; }
.bs-close-confirm-actions { display: flex; gap: 8px; }
.bs-close-cancel {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
}
.bs-close-confirm-btn {
    flex: 1;
    padding: 8px;
    background: #EF4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.bs-close-confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bs-closed-notice { font-size: 12px; color: var(--color-text-muted); padding: 8px 0; margin-bottom: 8px; }

/* ── 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) {
    .bs-page    { padding: 24px; }
    .bs-layout  { flex-direction: row; align-items: flex-start; gap: 24px; }
    .bs-main    { flex: 1; min-width: 0; }
    .bs-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 80px; }
    .bs-title   { font-size: 24px; }
    .cg-overlay { align-items: center; }
    .cg-modal   { border-radius: 20px; margin: 16px; }
}
</style>
