<template>
  <div class="workflow-videos-page">
    <SidebarNav active="workflow-videos" />

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 顶部栏 -->
      <TopHeader :showPoints="false" :showAvatar="false">
        <template #left>
          <h2 class="page-title">{{ t('workflowVideo.title') }}</h2>
        </template>
      </TopHeader>

      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">{{ t('workflowVideo.heroTitle') }}</h1>
          <p class="hero-subtitle">{{ t('workflowVideo.heroSubtitle') }}</p>
          <div class="hero-stats">
            <div class="stat-item">
              <span class="stat-number">{{ videos.length }}</span>
              <span class="stat-label">{{ t('workflowVideo.totalVideos') }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">10+</span>
              <span class="stat-label">{{ t('workflowVideo.categories') }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">500+</span>
              <span class="stat-label">{{ t('workflowVideo.activeUsers') }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 视频网格区域 -->
      <section class="video-section">
        <!-- 加载中 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <p class="loading-text">{{ t('workflowVideo.loading') }}</p>
        </div>

        <!-- 空状态 -->
        <div v-else-if="videos.length === 0" class="empty-works">
          <div class="empty-icon">
            <PlayCircleOutlined style="font-size: 64px;" />
          </div>
          <h3 class="empty-title">{{ t('workflowVideo.noVideos') }}</h3>
          <p class="empty-description">{{ t('workflowVideo.noVideosDescription') }}</p>
        </div>

        <!-- 视频网格 -->
        <div v-else class="video-grid">
          <div
            class="video-card"
            v-for="video in videos"
            :key="video.id"
            @click="openVideoDetail(video)"
          >
            <div class="video-thumbnail">
              <div class="thumbnail-container">
                <img
                  v-if="video.thumbnailUrl"
                  :src="video.thumbnailUrl"
                  :alt="video.title"
                  class="video-cover"
                  @error="onImageError"
                />
                <video
                  v-else-if="video.videoUrl"
                  :src="video.videoUrl"
                  class="video-cover"
                  muted
                  preload="metadata"
                  @loadedmetadata="onVideoLoaded"
                ></video>
                <div v-else class="video-placeholder">
                  <PlayCircleOutlined style="font-size: 48px;" />
                </div>
                <!-- 播放按钮 -->
                <div class="play-button">
                  <div class="play-icon">
                    <PlayCircleOutlined style="font-size: 32px;" />
                  </div>
                </div>
              </div>
            </div>
            <div class="video-info">
              <h3 class="video-title">{{ video.title }}</h3>
              <div class="video-meta">
                <div class="author-info">
                  <div class="author-avatar">
                    <img src="/images/backgrounds/avatar-default.svg" alt="Author" />
                  </div>
                  <span class="author-name">{{ video.author || t('workflowVideo.defaultAuthor') }}</span>
                </div>
              </div>
              <div class="video-tags" v-if="video.tags">
                <span class="tag" v-for="tag in parseTags(video.tags)" :key="tag">{{ tag }}</span>
              </div>
              <div class="video-actions">
                <button class="action-btn primary w-full" @click.stop="openContactModal(video)">
                  {{ t('workflowVideo.contactAuthor') }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 联系作者弹窗 -->
      <a-modal
        v-model:open="contactModalVisible"
        :title="t('workflowVideo.contactAuthor')"
        width="400px"
        class="contact-modal"
        :footer="null"
        @cancel="contactModalVisible = false"
      >
        <div class="contact-wechat">
          <div class="wechat-qr" v-if="WECHAT_QR_CODE_URL">
            <img :src="WECHAT_QR_CODE_URL" alt="WeChat QR Code" class="qr-image" />
          </div>
          <div class="wechat-id" v-if="WECHAT_ID">
            <span class="wechat-label">微信号：</span>
            <span class="wechat-value">{{ WECHAT_ID }}</span>
            <button class="copy-btn" @click="copyWechatId">复制</button>
          </div>
          <p class="wechat-tip">请扫码或搜索微信号添加作者</p>
        </div>
      </a-modal>

      <!-- 视频详情弹窗 -->
      <a-modal
        v-model:open="detailVisible"
        :title="selectedVideo?.title"
        width="80%"
        class="video-detail-dialog"
        :mask-closable="true"
        :keyboard="true"
        :footer="null"
        :destroy-on-close="true"
      >
        <div class="detail-content" v-if="selectedVideo">
          <div class="detail-left">
            <video
              class="detail-video"
              :src="selectedVideo.videoUrl"
              :poster="selectedVideo.thumbnailUrl"
              controls
              autoplay
            >
              {{ t('workflowVideo.browserNotSupport') }}
            </video>
          </div>
          <div class="detail-right">
            <div class="video-header">
              <h3 class="video-title">{{ selectedVideo.title }}</h3>
              <div class="author-section">
                <div class="author-info">
                  <div class="author-avatar">
                    <img src="/images/backgrounds/avatar-default.svg" alt="Author" />
                  </div>
                  <div class="author-details">
                    <span class="author-name">{{ selectedVideo.author || t('workflowVideo.defaultAuthor') }}</span>
                    <span class="author-badge">{{ t('workflowVideo.expert') }}</span>
                  </div>
                </div>
                <button class="contact-btn" @click="openContactModal(selectedVideo)">
                  {{ t('workflowVideo.contactAuthor') }}
                </button>
              </div>
            </div>
            <div class="description-section" v-if="selectedVideo.description">
              <h4 class="section-title">{{ t('workflowVideo.description') }}</h4>
              <p class="description-text">{{ selectedVideo.description }}</p>
            </div>
            <div class="tags-section" v-if="selectedVideo.tags">
              <h4 class="section-title">{{ t('workflowVideo.tags') }}</h4>
              <div class="video-tags">
                <span class="tag" v-for="tag in parseTags(selectedVideo.tags)" :key="tag">{{ tag }}</span>
              </div>
            </div>
            <div class="metadata-section">
              <div class="metadata-item">
                <span class="metadata-label">{{ t('workflowVideo.publishTime') }}</span>
                <span class="metadata-value">{{ formatDate(selectedVideo.createdAt) }}</span>
              </div>
            </div>
            <div class="action-section">
              <button class="action-btn primary w-full" @click="openContactModal(selectedVideo)">
                {{ t('workflowVideo.purchaseWorkflow') }}
              </button>
            </div>
          </div>
        </div>
      </a-modal>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import { PlayCircleOutlined } from '@ant-design/icons-vue'
import SidebarNav from '@/components/SidebarNav.vue'
import TopHeader from '@/components/TopHeader.vue'
import { getActiveWorkflowVideos } from '@/api/workflowVideo'

const { t } = useI18n()

const videos = ref([])
const loading = ref(false)

// 详情弹窗
const detailVisible = ref(false)
const selectedVideo = ref(null)

// 作者微信联系方式（全局固定）
const WECHAT_ID = 'your_wechat_id'  // TODO: 替换为实际微信号
const WECHAT_QR_CODE_URL = ''  // TODO: 替换为实际二维码图片URL

// 联系作者弹窗
const contactModalVisible = ref(false)
const contactVideo = ref(null)

// 加载视频列表
const loadVideos = async () => {
  loading.value = true
  try {
    const response = await getActiveWorkflowVideos()
    if (response?.data?.success) {
      videos.value = response.data.data || []
    } else {
      console.error('获取视频列表失败:', response?.data?.message)
    }
  } catch (error) {
    console.error('加载视频列表失败:', error)
    message.error(t('workflowVideo.loadFailed'))
  } finally {
    loading.value = false
  }
}

// 打开视频详情
const openVideoDetail = (video) => {
  selectedVideo.value = video
  detailVisible.value = true
}

// 打开联系作者弹窗
const openContactModal = (video) => {
  contactVideo.value = video
  contactModalVisible.value = true
}

// 复制微信号
const copyWechatId = () => {
  navigator.clipboard.writeText(WECHAT_ID)
  message.success('微信号已复制')
}



// 解析标签字符串
const parseTags = (tags) => {
  if (!tags) return []
  return tags.split(',').map(t => t.trim()).filter(t => t)
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

// 视频加载后跳到首帧
const onVideoLoaded = (event) => {
  const video = event.target
  if (video && video.duration) {
    video.currentTime = 0.1
    video.pause()
  }
}

// 图片加载失败
const onImageError = (event) => {
  event.target.style.display = 'none'
}

onMounted(() => {
  loadVideos()
})
</script>

<style scoped>
.workflow-videos-page {
  width: 100vw;
  height: 100vh;
  background: #F8F7FF;
  color: #0F172A;
  display: flex;
  font-family: var(--font-sans);
  overflow: hidden;
  position: relative;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 浅色主题下覆盖 TopHeader 样式 */
:deep(.top-header) {
  height: 60px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
}

.page-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--color-text-primary);
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #F3F1FC, #EEF2FF);
  padding: var(--space-16) var(--space-8);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23000000" fill-opacity="0.03"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: #0F172A;
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: #475569;
  margin-bottom: var(--space-8);
  max-width: 600px;
}

.hero-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: #0F172A;
  margin-bottom: var(--space-1);
}

.stat-label {
  display: block;
  font-size: var(--text-sm);
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Video Section */
.video-section {
  flex: 1;
  padding: var(--space-8);
  overflow-y: auto;
  background: #F8F7FF;
}

.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  gap: var(--space-4);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.empty-works {
  text-align: center;
  padding: var(--space-20) var(--space-8);
  background: #FFFFFF;
  border-radius: var(--radius-2xl);
  border: 1px solid #E5E7EB;
  margin: var(--space-8) 0;
}

.empty-icon {
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.empty-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.empty-description {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  max-width: 400px;
  margin: 0 auto;
}

/* Video Grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-8);
}

/* Video Card */
.video-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-all);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.07);
  border-color: var(--color-primary);
}

.video-thumbnail {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.thumbnail-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-card:hover .video-cover {
  transform: scale(1.05);
}

.video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-hover);
  color: var(--color-text-tertiary);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  opacity: 0;
  transition: var(--transition-all);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.video-card:hover .play-button {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-duration {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(255, 255, 255, 0.9);
  color: #0F172A;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-info {
  padding: var(--space-4);
}

.video-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-snug);
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.author-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-hover);
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

.video-stats {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.view-count {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tag {
  padding: var(--space-1) var(--space-3);
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.video-actions {
  display: flex;
  gap: var(--space-2);
}

.action-btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.action-btn.primary {
  background: #7C3AED;
  color: #FFFFFF;
}

.action-btn.primary:hover {
  background: #6D28D9;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.action-btn.secondary {
  background: #F8F7FF;
  color: #475569;
  border: 1px solid #E5E7EB;
}

.action-btn.secondary:hover {
  background: #F3F1FC;
  transform: translateY(-1px);
  border-color: #7C3AED;
}

/* Detail Dialog */
:deep(.ant-modal.video-detail-dialog) {
  background: #FFFFFF !important;
  border-radius: var(--radius-2xl);
  border: 1px solid #E5E7EB;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

:deep(.ant-modal.video-detail-dialog .ant-modal-content) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

:deep(.ant-modal.video-detail-dialog .ant-modal-header) {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB;
  padding: var(--space-4) var(--space-6);
}

:deep(.ant-modal.video-detail-dialog .ant-modal-title) {
  color: #0F172A !important;
  font-weight: var(--font-semibold);
  font-size: var(--text-xl);
}

:deep(.ant-modal.video-detail-dialog .ant-modal-close) {
  color: #94A3B8 !important;
}

:deep(.ant-modal.video-detail-dialog .ant-modal-close:hover) {
  color: #475569 !important;
}

:deep(.ant-modal.video-detail-dialog .ant-modal-body) {
  background: transparent !important;
  padding: 0 !important;
}

.detail-content {
  display: flex;
  max-height: 80vh;
}

.detail-left {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F7FF;
  border-right: 1px solid #E5E7EB;
  min-width: 0;
  overflow: hidden;
}

.detail-video {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: transparent;
}

.detail-right {
  flex: 0 0 360px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  max-height: 80vh;
  background: #FFFFFF;
}

.video-header {
  margin-bottom: var(--space-4);
}

.author-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.author-badge {
  font-size: var(--text-xs);
  color: #10B981;
  font-weight: var(--font-medium);
  background: rgba(16, 185, 129, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  align-self: flex-start;
}

.contact-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: var(--transition-all);
}

.contact-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.section-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.description-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.metadata-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.metadata-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}

.metadata-label {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
}

.metadata-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.action-section {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}



/* Responsive */
@media (max-width: 1200px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  
  .detail-right {
    flex: 0 0 320px;
  }
}

@media (max-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
  }
  
  .hero-section {
    padding: var(--space-12) var(--space-6);
  }
  
  .hero-title {
    font-size: var(--text-3xl);
  }
  
  .hero-stats {
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }
  
  .detail-content {
    flex-direction: column;
  }
  
  .detail-right {
    flex: 1;
    border-top: 1px solid var(--color-border);
  }
}

@media (max-width: 768px) {
  .workflow-videos-page {
    flex-direction: column;
  }
  
  .video-section {
    padding: var(--space-4);
  }
  
  .video-grid {
    grid-template-columns: 1fr;
  }
  
  .video-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--text-2xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-base);
  }
  
  .detail-right {
    padding: var(--space-4);
  }
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Contact WeChat */
.contact-wechat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0;
  gap: var(--space-4);
}

.wechat-qr {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid #E5E7EB;
}

.wechat-qr.empty {
  background: #F8F7FF;
  color: #94A3B8;
  font-size: var(--text-sm);
}

.qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wechat-id {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
}

.wechat-label {
  color: #64748B;
  font-weight: var(--font-medium);
}

.wechat-value {
  color: #0F172A;
  font-weight: var(--font-semibold);
  user-select: all;
}

.copy-btn {
  padding: var(--space-1) var(--space-3);
  background: #7C3AED;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: var(--transition-all);
}

.copy-btn:hover {
  background: #6D28D9;
}

.wechat-tip {
  color: #94A3B8;
  font-size: var(--text-sm);
  margin: 0;
}

/* Contact Modal */
:deep(.ant-modal.contact-modal) {
  background: #FFFFFF !important;
  border-radius: var(--radius-2xl);
  border: 1px solid #E5E7EB;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

:deep(.ant-modal.contact-modal .ant-modal-content) {
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.ant-modal.contact-modal .ant-modal-header) {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB;
}

:deep(.ant-modal.contact-modal .ant-modal-title) {
  color: #0F172A !important;
  font-weight: var(--font-semibold);
}

:deep(.ant-modal.contact-modal .ant-modal-close) {
  color: #94A3B8 !important;
}

:deep(.ant-modal.contact-modal .ant-modal-close:hover) {
  color: #475569 !important;
}

:deep(.ant-modal.contact-modal .ant-modal-body) {
  background: transparent !important;
  color: #0F172A;
}

:deep(.ant-modal.contact-modal .ant-form-item-label label) {
  color: #475569 !important;
}

:deep(.ant-modal.contact-modal .ant-input) {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #0F172A !important;
}

:deep(.ant-modal.contact-modal .ant-input::placeholder) {
  color: #94A3B8 !important;
}

:deep(.ant-modal.contact-modal .ant-textarea) {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #0F172A !important;
}

:deep(.ant-modal.contact-modal .ant-textarea::placeholder) {
  color: #94A3B8 !important;
}

:deep(.ant-modal.contact-modal .ant-select-selector) {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  color: #0F172A !important;
}

:deep(.ant-modal.contact-modal .ant-select-arrow) {
  color: #94A3B8 !important;
}

:deep(.ant-modal.contact-modal .ant-modal-footer) {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB;
}

:deep(.ant-modal.contact-modal .ant-btn) {
  border-radius: var(--radius-lg);
}

:deep(.ant-modal.contact-modal .ant-btn-primary) {
  background: #7C3AED;
  border-color: #7C3AED;
  color: white;
}

:deep(.ant-modal.contact-modal .ant-btn-primary:hover) {
  background: #6D28D9;
  border-color: #6D28D9;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

:deep(.ant-modal.contact-modal .ant-btn-default) {
  background: #F8F7FF;
  border: 1px solid #E5E7EB;
  color: #475569;
}

:deep(.ant-modal.contact-modal .ant-btn-default:hover) {
  background: #F3F1FC;
  color: #0F172A;
  border-color: #7C3AED;
}

/* Modal masks */
.video-detail-dialog .ant-modal-wrap,
.video-detail-dialog .ant-modal-mask,
.contact-modal .ant-modal-wrap,
.contact-modal .ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
</style>