/**
 * @file style.css
 * @description 国内大厂级 AI 工作台与苹果毛玻璃融合交互样式表
 * 参考字节跳动 Coze、通义千问、Kimi 设计语言：宽屏自适应、单行防折行、弥散投影与影院级媒体卡片
 * 编码规范：统一使用 UTF-8，全中文细粒度注释
 */

/* -------------------------------------------------------------
 * 1. 全局变量与设计令牌 (Design Tokens)
 * ----------------------------------------------------------- */
:root {
  /* 主题色系：科技深蓝 + 晶莹纯白 */
  --brand-blue: #0284c7;
  --brand-blue-hover: #0369a1;
  --brand-gradient: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  
  /* 免费状态翠绿 */
  --free-green: #10b981;
  /* 付费状态琥珀金 */
  --paid-amber: #f59e0b;

  /* 大厂级毛玻璃背景与内发光边框 */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.75);
  --panel-border: rgba(226, 232, 240, 0.85);

  /* 柔和弥散阴影 */
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 12px 32px -4px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

/* -------------------------------------------------------------
 * 2. 基础重置与高质感流体微光背景
 * ----------------------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8fafc;
  background-image: 
    radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.06) 0px, transparent 40%),
    radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 40%),
    radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.04) 0px, transparent 40%),
    radial-gradient(at 0% 100%, rgba(99, 102, 241, 0.05) 0px, transparent 40%);
  background-attachment: fixed;
  color: #0f172a;
}

/* -------------------------------------------------------------
 * 3. 核心布局卡片与毛玻璃类 (大厂工作台规范)
 * ----------------------------------------------------------- */
/* 导航栏毛玻璃 */
.navbar-glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

/* 现代化工作台卡片 */
.workbench-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-card);
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.workbench-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(203, 213, 225, 0.9);
}

/* 次级柔和面板 */
.subtle-panel {
  background: rgba(248, 250, 252, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 1rem;
}

/* -------------------------------------------------------------
 * 4. 强制防折行与自适应胶囊 Tab
 * ----------------------------------------------------------- */
.nowrap-tab {
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* 激活的导航胶囊 */
.nav-tab-active {
  background: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------
 * 5. 免费/付费对比标签（大厂微光徽章）
 * ----------------------------------------------------------- */
.badge-free {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-paid {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-category {
  background: rgba(2, 132, 199, 0.08);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.2);
}

/* -------------------------------------------------------------
 * 6. 视频实验室媒体播放器与渲染光晕
 * ----------------------------------------------------------- */
.video-player-container {
  background: #020617;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(2, 6, 23, 0.4);
  position: relative;
}

.video-player-container video {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #000;
}

/* 动态进度波纹 */
@keyframes shimmerPulse {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-bar {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.2) 0%, rgba(2, 132, 199, 0.8) 50%, rgba(2, 132, 199, 0.2) 100%);
  background-size: 200% 100%;
  animation: shimmerPulse 2s infinite linear;
}

/* -------------------------------------------------------------
 * 7. 滚动条美化 (符合大厂细腻规范)
 * ----------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

/* -------------------------------------------------------------
 * 8. 代码高亮与打字机光标
 * ----------------------------------------------------------- */
.typing-cursor::after {
  content: "▋";
  animation: cursorBlink 0.85s infinite;
  color: #0284c7;
  margin-left: 2px;
}

/* -------------------------------------------------------------
 * 9. 移动端工作台适配
 * ----------------------------------------------------------- */
@media (max-width: 767px) {
  /* 移动设备没有稳定的 fixed 背景渲染，改为普通滚动避免掉帧 */
  body {
    background-attachment: scroll;
  }

  /* 小屏卡片减少圆角和内边距，给表单与媒体预览留出更多可用宽度 */
  .workbench-card {
    border-radius: 1rem;
  }

  /* 触屏设备始终显示历史删除操作，避免 hover 不存在导致无法操作 */
  .image-history-item button,
  .video-history-item button,
  .chat-session-item button {
    opacity: 1;
  }

  /* 防止超长模型名、任务 ID 撑破横向布局 */
  .font-mono {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 639px) {
  /* 窄屏视频播放器降低最小高度，减少首次进入页面的无效空白 */
  .video-player-container video {
    max-height: 360px;
  }

  /* 图片与视频舞台中的操作按钮允许平铺换行 */
  #image-stage-container > div,
  #video-stage-container > div {
    max-width: 100%;
  }
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}