/* ============================================================
   AI 工具箱 — 深色沉浸式工作台
   主色沿用品牌红 #C8102E，避免通用紫蓝 AI 风
   ============================================================ */
.ai-tools-page { --at-accent:#C8102E; --at-accent-2:#ff5a3c; --at-bg:#0b0d12; --at-bg2:#10131b; --at-line:rgba(255,255,255,.09); --at-text:#e9ebf1; --at-muted:#9aa1b1; }
.ai-tools-page { background:var(--at-bg); color:var(--at-text); min-height:100vh; }
.ai-tools-page * { box-sizing:border-box; }
.ai-tools-page .at-hero { position:relative; padding:64px 0 30px; overflow:hidden; }
.ai-tools-page .at-hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(900px 420px at 18% -10%, rgba(200,16,46,.22), transparent 60%),
  radial-gradient(700px 380px at 92% 0%, rgba(255,90,60,.12), transparent 55%); pointer-events:none; }
.ai-tools-page .at-hero .container { position:relative; }
.ai-tools-page .at-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:2px; color:var(--at-accent-2); text-transform:uppercase; font-weight:700; margin-bottom:14px; }
.ai-tools-page .at-eyebrow::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--at-accent),var(--at-accent-2)); border-radius:2px; }
.ai-tools-page .at-hero h1 { font-size:42px; line-height:1.12; font-weight:850; letter-spacing:-1px; margin:0 0 12px; }
.ai-tools-page .at-hero h1 .grad { background:linear-gradient(100deg,#fff 10%,var(--at-accent-2) 55%,var(--at-accent) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ai-tools-page .at-hero p { color:var(--at-muted); font-size:15.5px; max-width:620px; line-height:1.7; margin:0; }

/* 顶部 Tab 切换 */
.at-tabs { display:flex; gap:8px; margin:30px 0 22px; flex-wrap:wrap; }
.at-tab { appearance:none; border:1px solid var(--at-line); background:rgba(255,255,255,.03); color:var(--at-muted); padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:600; cursor:pointer; transition:.18s; display:inline-flex; align-items:center; gap:8px; }
.at-tab:hover { color:var(--at-text); border-color:rgba(255,255,255,.2); }
.at-tab.active { color:#fff; background:linear-gradient(100deg,var(--at-accent),var(--at-accent-2)); border-color:transparent; box-shadow:0 8px 24px rgba(200,16,46,.32); }
.at-tab svg { width:17px; height:17px; }

/* 通用面板 */
.at-panel { display:none; }
.at-panel.active { display:block; animation:atfade .25s ease; }
@keyframes atfade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }

.at-bar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.at-field { display:flex; flex-direction:column; gap:6px; }
.at-field label { font-size:12px; color:var(--at-muted); letter-spacing:.3px; }
.at-select, .at-input, .at-textarea { background:rgba(255,255,255,.04); border:1px solid var(--at-line); color:var(--at-text); border-radius:11px; padding:10px 13px; font-size:14px; outline:none; transition:.15s; font-family:inherit; }
.at-select:focus, .at-input:focus, .at-textarea:focus { border-color:var(--at-accent); box-shadow:0 0 0 3px rgba(200,16,46,.18); }
.at-select { min-width:200px; cursor:pointer; }
.at-textarea { width:100%; min-height:96px; resize:vertical; line-height:1.6; }

/* 按钮 */
.at-btn { appearance:none; border:none; cursor:pointer; border-radius:11px; padding:11px 22px; font-size:14.5px; font-weight:700; color:#fff; background:linear-gradient(100deg,var(--at-accent),var(--at-accent-2)); transition:.18s; display:inline-flex; align-items:center; gap:8px; }
.at-btn:hover { filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 10px 26px rgba(200,16,46,.34); }
.at-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.at-btn.ghost { background:rgba(255,255,255,.05); border:1px solid var(--at-line); color:var(--at-text); }
.at-btn.ghost:hover { background:rgba(255,255,255,.1); box-shadow:none; }

/* 玻璃卡片 */
.at-card { background:rgba(255,255,255,.035); border:1px solid var(--at-line); border-radius:18px; backdrop-filter:blur(8px); }

/* ===== 对话 ===== */
.at-chat { display:flex; flex-direction:column; height:min(64vh,640px); }
.at-chat-thread { flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:16px; }
.at-chat-thread::-webkit-scrollbar { width:8px; } .at-chat-thread::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:8px; }
.at-msg { max-width:84%; padding:13px 16px; border-radius:16px; line-height:1.72; font-size:14.5px; white-space:pre-wrap; word-break:break-word; }
.at-msg.user { align-self:flex-end; background:linear-gradient(120deg,var(--at-accent),var(--at-accent-2)); color:#fff; border-bottom-right-radius:5px; }
.at-msg.bot { align-self:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--at-line); border-bottom-left-radius:5px; }
.at-msg .role { font-size:11px; color:var(--at-muted); margin-bottom:5px; letter-spacing:.5px; }
.at-welcome { margin:auto; text-align:center; color:var(--at-muted); max-width:440px; }
.at-welcome h3 { color:var(--at-text); font-size:19px; margin:0 0 8px; }
.at-welcome .chips { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.at-chip { border:1px solid var(--at-line); background:rgba(255,255,255,.04); color:var(--at-text); padding:9px 14px; border-radius:999px; font-size:13px; cursor:pointer; transition:.15s; }
.at-chip:hover { border-color:var(--at-accent); color:#fff; }
.at-typing { display:inline-flex; gap:4px; align-items:center; }
.at-typing i { width:6px; height:6px; border-radius:50%; background:var(--at-muted); animation:atblink 1s infinite; }
.at-typing i:nth-child(2){ animation-delay:.15s; } .at-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes atblink { 0%,100%{opacity:.25;} 50%{opacity:1;} }
.at-chat-input { border-top:1px solid var(--at-line); padding:14px 16px; display:flex; gap:12px; align-items:flex-end; }
.at-chat-input .at-textarea { min-height:46px; max-height:140px; flex:1; }

/* ===== 生图 ===== */
.at-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:18px; }
.at-thumb { position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--at-line); background:rgba(255,255,255,.03); aspect-ratio:1/1; }
.at-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.at-thumb .dl { position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:9px; padding:6px 10px; font-size:12px; cursor:pointer; text-decoration:none; }
.at-result-empty { color:var(--at-muted); padding:40px; text-align:center; border:1px dashed var(--at-line); border-radius:16px; margin-top:18px; }

/* ===== 生视频 ===== */
.at-video-stage { margin-top:18px; border:1px solid var(--at-line); border-radius:16px; padding:26px; min-height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; background:rgba(255,255,255,.03); }
.at-progress { width:100%; max-width:420px; height:9px; border-radius:9px; background:rgba(255,255,255,.08); overflow:hidden; }
.at-progress > i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--at-accent),var(--at-accent-2)); transition:width .4s; }
.at-video-stage video { width:100%; max-width:560px; border-radius:14px; outline:none; }

/* 状态徽标 */
.at-badge { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--at-line); color:var(--at-muted); }
.at-badge.ok { color:#46d39a; border-color:rgba(70,211,154,.4); }
.at-badge.warn { color:#ffb454; border-color:rgba(255,180,84,.4); }
.at-badge.err { color:#ff6b6b; border-color:rgba(255,107,107,.4); }

.at-error { color:#ff8d8d; background:rgba(255,90,90,.1); border:1px solid rgba(255,90,90,.3); padding:12px 14px; border-radius:12px; font-size:13.5px; margin-top:12px; }
.at-note { font-size:12.5px; color:var(--at-muted); margin-top:10px; line-height:1.6; }

@media (max-width:640px){
  .ai-tools-page .at-hero h1 { font-size:30px; }
  .at-msg { max-width:92%; }
}