/* =========================================================
   九秋生图 — 自定义样式
   配色：ink（墨黑）+ gold（金点缀 #D4AF37）
   ========================================================= */

body {
  background-color: #f8fafc;
  color: #334155;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 装饰性背景（点阵 + 柔光斑） */
.bg-pattern {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
}
.bg-gradient-blob {
  position: fixed; top: -20%; left: -10%; width: 60%; height: 60%; z-index: -1;
  /* 金色柔光，呼应 Logo */
  background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, rgba(248,250,252,0) 70%);
  border-radius: 50%;
  filter: blur(60px);
}

/* Panel 切换 */
.panel { display: none; }
.panel.active { display: block; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* 自定义滚动条（浅色主题） */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 聊天气泡 */
.msg-bubble {
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.msg-user .msg-bubble {
  /* ink 渐变 + 金色描边感 */
  background: linear-gradient(135deg, #0f172a, #020617);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.msg-bot .msg-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-bottom-left-radius: 4px;
}

/* 透明图的棋盘背景 */
.checkerboard {
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #ffffff;
}

/* details 隐藏默认三角 */
details > summary::-webkit-details-marker { display: none; }

/* 聊天空状态 */
#chat:empty::before {
  content: "在下方输入 Prompt 发起生图请求 ✨";
  margin: auto;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
}
#chat-edit:empty::before {
  content: "上传一张参考图，然后输入编辑指令 ✨";
  margin: auto;
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 拖拽区高亮 */
.drop-zone-active {
  border-color: #D4AF37 !important;
  background-color: rgba(212, 175, 55, 0.05) !important;
}

/* segmented 按钮激活态 */
.seg-btn.active {
  background-color: #0f172a;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #D4AF37;
}

/* 动画（slideUp / fadeIn 由 Tailwind config 提供关键帧别名，此处补键盘） */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}