<template>
  <Teleport to="body">
    <div v-if="visible" class="detail-dialog-mask" @click="handleClose">
      <div class="detail-dialog" @click.stop>
        <!-- 关闭按钮 -->
        <button class="detail-close-btn" @click="handleClose">
          X
        </button>

        <div v-if="loading" class="detail-loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <div v-else-if="workData" class="detail-content">
          <!-- 左侧视频/图片区域 -->
          <div class="detail-media">
            <img v-if="isImage(workData.resultUrl)" :src="workData.resultUrl" alt="作品" />
            <video v-else :src="workData.resultUrl" controls autoplay loop playsinline></video>
          </div>

          <!-- 右侧信息面板 -->
          <div class="detail-sidebar">
            <!-- 顶部操作栏 -->
            <div class="sidebar-header">
              <div class="author-section">
                <img class="author-avatar" :src="workData.author?.avatarUrl" alt="作者头像" />
                <span class="author-name">{{ workData.author?.nickname || '匿名' }}</span>
              </div>
            </div>

            <!-- 类型标签 -->
            <div class="sidebar-tabs">
              <div class="type-label">{{ getWorkType() }}</div>
            </div>

            <!-- 内容区域 -->
            <div class="sidebar-content">
              <!-- 标题 -->
              <h2 class="work-title">{{ workData.title || '无标题作品' }}</h2>

              <!-- 参考图区域（图生视频/图生图类型） -->
              <div class="reference-image-section" v-if="hasReferenceImage() && workData.imageUrl">
                <div class="section-header">
                  <span class="section-label">参考图</span>
                </div>
                <div class="reference-image-wrapper" @click="handlePreviewImage">
                  <img :src="workData.imageUrl" alt="参考图" class="reference-image" />
                  <div class="preview-hint">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
                    </svg>
                  </div>
                </div>
              </div>

              <!-- 提示词区域 -->
              <div class="prompt-section" v-if="workData.prompt">
                <div class="section-header">
                  <span class="section-label">提示词</span>
                  <button class="toggle-btn" @click="promptExpanded = !promptExpanded" :class="{ expanded: promptExpanded }">
                    <el-icon><ArrowDown /></el-icon>
                  </button>
                </div>
                <div class="prompt-content" :class="{ expanded: promptExpanded }">
                  {{ workData.prompt }}
                </div>
                <button class="copy-prompt-btn" @click="handleCopyPrompt" :disabled="copyLoading">
                  <svg v-if="!copied" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 1.5H3C2.17 1.5 1.5 2.17 1.5 3V9M4.5 4.5H11C11.83 4.5 12.5 5.17 12.5 6V12C12.5 12.83 11.83 13.5 11 13.5H4.5C3.67 13.5 3 12.83 3 12V6C3 5.17 3.67 4.5 4.5 4.5Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <svg v-else width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.5 3.5L5 10L2 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <span>{{ copied ? '已复制' : '复制' }}</span>
                </button>
              </div>

              <!-- 元数据信息 -->
              <div class="metadata-section">
                <div class="metadata-item">
                  <span class="meta-label">创建时间</span>
                  <span class="meta-value">{{ formatFullTime(workData.createTime) }}</span>
                </div>
                <div class="metadata-item" v-if="workData.workNo">
                  <span class="meta-label">作品ID</span>
                  <span class="meta-value">{{ workData.workNo }}</span>
                </div>
                <div class="metadata-item" v-if="workData.tags && workData.tags.length > 0">
                  <span class="meta-label">标签</span>
                  <div class="tags-list">
                    <span class="tag" v-for="(tag, idx) in workData.tags" :key="idx">#{{ tag }}</span>
                  </div>
                </div>
                <div class="metadata-item" v-if="workData.aspectRatio">
                  <span class="meta-label">宽高比</span>
                  <span class="meta-value">{{ workData.aspectRatio }}</span>
                </div>
                <div class="metadata-item">
                  <span class="meta-label">浏览量</span>
                  <span class="meta-value">{{ workData.viewCount || 0 }}</span>
                </div>
                <div class="metadata-item">
                  <span class="meta-label">点赞数</span>
                  <span class="meta-value">{{ workData.likeCount || 0 }}</span>
                </div>
              </div>
            </div>

            <!-- 底部操作按钮 -->
            <div class="sidebar-footer">
              <button class="action-btn primary" @click="handleMakeSame">
                <svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.61101 9.6016L5.62614 9.58705C6.40213 8.84062 7.63279 8.85257 8.39415 9.61392L8.4322 9.65197C9.19354 10.4133 9.18187 11.6512 8.40632 12.3981M2.51103 15.4968C1.73591 14.7217 1.73591 13.465 2.51103 12.6898L8.18934 7.01152C8.96447 6.23639 10.2212 6.2364 10.9963 7.01152C11.7714 7.78664 11.7714 9.04336 10.9963 9.81848L5.318 15.4968C4.54287 16.2719 3.28615 16.2719 2.51103 15.4968Z" stroke="currentColor" stroke-width="1.125" stroke-linecap="round"/>
                  <path d="M12.9373 1.5207C13.1306 0.998333 13.8694 0.998333 14.0627 1.5207L14.4171 2.47841C14.4779 2.64265 14.6074 2.77213 14.7716 2.8329L15.7293 3.18729C16.2517 3.38058 16.2517 4.11942 15.7293 4.31271L14.7716 4.6671C14.6074 4.72787 14.4779 4.85735 14.4171 5.02159L14.0627 5.9793C13.8694 6.50167 13.1306 6.50167 12.9373 5.9793L12.5829 5.02159C12.5221 4.85735 12.3926 4.72787 12.2284 4.6671L11.2707 4.31271C10.7483 4.11942 10.7483 3.38058 11.2707 3.18729L12.2284 2.8329C12.3926 2.77213 12.5221 2.64265 12.5829 2.47841L12.9373 1.5207Z" fill="currentColor"/>
                  <path d="M14.6483 7.70044C14.7691 7.37396 15.2309 7.37396 15.3517 7.70044L15.7504 8.77801C15.7884 8.88066 15.8693 8.96159 15.972 8.99957L17.0496 9.39831C17.376 9.51911 17.376 9.98089 17.0496 10.1017L15.972 10.5004C15.8693 10.5384 15.7884 10.6193 15.7504 10.722L15.3517 11.7996C15.2309 12.126 14.7691 12.126 14.6483 11.7996L14.2496 10.722C14.2116 10.6193 14.1307 10.5384 14.028 10.5004L12.9504 10.1017C12.624 9.98089 12.624 9.51911 12.9504 9.39831L14.028 8.99957C14.1307 8.96159 14.2116 8.88066 14.2496 8.77801L14.6483 7.70044Z" fill="currentColor"/>
                </svg>
                做同款
              </button>
              <button class="action-btn like" :class="{ liked: workData.isLiked }" @click="handleToggleLike">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.00065 2.6665C2.97561 2.6665 1.33398 4.30814 1.33398 6.33317C1.33398 9.99984 5.66732 13.3332 8.00065 14.1086C10.334 13.3332 14.6673 9.99984 14.6673 6.33317C14.6673 4.30814 13.0257 2.6665 11.0007 2.6665C9.76058 2.6665 8.66425 3.28214 8.00065 4.22444C7.33705 3.28214 6.24075 2.6665 5.00065 2.6665Z" :fill="workData.isLiked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                点赞
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <Teleport to="body">
      <div v-if="showImagePreview" class="image-preview-overlay" @click="showImagePreview = false">
        <div class="image-preview-container">
          <button class="preview-close-btn" @click="showImagePreview = false">
            X
          </button>
          <img :src="workData?.imageUrl" alt="预览" class="preview-image" @click.stop />
        </div>
      </div>
    </Teleport>
  </Teleport>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  workData: {
    type: Object,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'toggle-like', 'make-same'])

const userStore = useUserStore()

// UI状态
const promptExpanded = ref(false)
const copied = ref(false)
const copyLoading = ref(false)
const showImagePreview = ref(false)

// 判断是否为图片
const isImage = (url) => {
  if (!url) return false
  return /\.(jpg|jpeg|png|webp|gif)$/i.test(url)
}

// 格式化时间
const formatTime = (t) => {
  if (!t) return ''
  const d = new Date(t)
  return d.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
}

// 格式化完整时间
const formatFullTime = (t) => {
  if (!t) return ''
  const d = new Date(t)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hour = String(d.getHours()).padStart(2, '0')
  const minute = String(d.getMinutes()).padStart(2, '0')
  return `${year}/${month}/${day} ${hour}:${minute}`
}

// 获取作品类型
const getWorkType = () => {
  if (!props.workData) return '未知类型'
  
  const taskType = props.workData.taskType
  
  // 类型映射
  const typeMap = {
    'text_to_image': '文生图',
    'image_to_image': '图生图',
    'text_to_video': '文生视频',
    'image_to_video': '图生视频',
    'storyboard_video': '分镜视频',
    'storyboard_to_video': '分镜视频'
  }
  
  return typeMap[taskType] || taskType || '未知类型'
}

// 判断是否需要显示参考图（图生视频、图生图类型）
const hasReferenceImage = () => {
  if (!props.workData) return false
  const taskType = props.workData.taskType
  return taskType === 'image_to_video' || taskType === 'image_to_image'
}

// 预览参考图
const handlePreviewImage = () => {
  showImagePreview.value = true
}

// 关闭弹窗
const handleClose = () => {
  copied.value = false
  emit('close')
}

// 复制提示词
const handleCopyPrompt = async () => {
  // 检查用户是否登录
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再复制提示词')
    userStore.setShowLoginModal(true)
    return
  }

  if (!props.workData?.prompt) {
    ElMessage.error('提示词为空')
    return
  }

  if (copyLoading.value) return

  copyLoading.value = true

  try {
    // 使用现代剪贴板 API
    if (navigator.clipboard && navigator.clipboard.writeText) {
      await navigator.clipboard.writeText(props.workData.prompt)
    } else {
      // 降级方案：使用传统方法
      const textarea = document.createElement('textarea')
      textarea.value = props.workData.prompt
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand('copy')
      document.body.removeChild(textarea)
    }

    copied.value = true
    ElMessage.success('提示词已复制到剪贴板')

    // 3秒后重置复制状态
    setTimeout(() => {
      copied.value = false
    }, 3000)
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败，请重试')
  } finally {
    copyLoading.value = false
  }
}

// 切换点赞
const handleToggleLike = () => {
  emit('toggle-like')
}

// 做同款
const handleMakeSame = () => {
  emit('make-same')
}

// 监听弹窗关闭，重置状态
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    copied.value = false
  }
})
</script>

<style scoped>
/* 详情弹窗样式 */
.detail-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.detail-dialog {
  position: relative;
  background: #000;
  width: 90vw;
  max-width: 1400px;
  height: 600px;
  max-height: 600px;
  border-radius: 12px;
  overflow: hidden;
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(36, 41, 51, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1000;
}

.detail-close-btn:hover {
  background: rgba(36, 41, 51, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #94a3b8;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(148, 163, 184, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr minmax(420px, 600px);
  gap: 0;
  height: 600px;
  width: 100%;
}

.detail-media {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.detail-media img,
.detail-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 右侧信息面板 */
.detail-sidebar {
  background: #242933;
  display: flex;
  flex-direction: column;
  height: 600px;
  overflow: hidden;
}

/* 顶部操作栏 */
.sidebar-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.author-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.author-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* 类型标签 */
.sidebar-tabs {
  display: flex;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.type-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  padding: 6px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 6px;
}

/* 内容区域 */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sidebar-content::-webkit-scrollbar {
  width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 标题 */
.work-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* 提示词区域 */
.prompt-section {
  margin-bottom: 20px;
}

/* 参考图区域 */
.reference-image-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toggle-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.toggle-btn .el-icon {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  font-size: 16px;
}

.toggle-btn.expanded .el-icon {
  transform: rotate(180deg);
}

.prompt-content {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  word-wrap: break-word;
}

.prompt-content.expanded {
  max-height: none;
}

.copy-prompt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.copy-prompt-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.copy-prompt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 参考图样式 */
.reference-image-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.reference-image-wrapper:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
}

.reference-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.reference-image :deep(.el-image__inner) {
  object-fit: contain;
}

/* 预览提示图标 */
.preview-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.preview-hint svg {
  width: 14px;
  height: 14px;
  color: #fff;
}

.reference-image-wrapper:hover .preview-hint {
  opacity: 1;
}

/* 图片预览弹窗 */
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}

.image-preview-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.preview-close-btn {
  position: absolute;
  top: -50px;
  right: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}

.preview-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.preview-close-btn svg {
  width: 20px;
  height: 20px;
}

/* 元数据信息 */
.metadata-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metadata-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.meta-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  min-width: 80px;
}

.meta-value {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
  word-break: break-all;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tag {
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 底部操作按钮 */
.sidebar-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-btn.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  flex: 2;
}

.action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.action-btn.like {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn.like:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.action-btn.like.liked {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.3);
}

.action-btn.like.liked:hover {
  background: rgba(248, 113, 113, 0.2);
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .detail-dialog {
    width: 95vw;
    height: auto;
    max-height: 90vh;
  }

  .detail-content {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 90vh;
  }

  .detail-sidebar {
    height: auto;
    max-height: 400px;
  }

  .detail-media {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .detail-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .detail-content {
    height: 100vh;
    max-height: 100vh;
  }

  .detail-media {
    height: 50vh;
  }

  .detail-sidebar {
    height: 50vh;
    max-height: 50vh;
  }

  .sidebar-header {
    padding: 16px 20px;
  }

  .sidebar-tabs {
    padding: 0 20px;
  }

  .sidebar-content {
    padding: 16px 20px;
  }

  .sidebar-footer {
    padding: 12px 20px;
  }

  .detail-close-btn {
    width: 40px;
    height: 40px;
    top: 16px;
    right: 16px;
  }
}
</style>

