/* ─── agent-trea.css · TraeWork 专属样式 ──────────────────────── */

.agent-page {
    --agent-accent: #4f46e5;
    --agent-accent-light: #eef2ff;
    --agent-accent-soft: #c7d2fe;
}

/* 产品主色覆盖 */
.agent-page .eyebrow,
.agent-page .section-header .eyebrow { color: var(--agent-accent); }
.agent-page .eyebrow-dot { background: var(--agent-accent); }
.agent-page .hero-content .eyebrow { background: var(--agent-accent-light); color: var(--agent-accent); }
.agent-page .feature-icon { background: var(--agent-accent-light); color: var(--agent-accent); }
.agent-page .feature-highlight { color: var(--agent-accent); }
.agent-page .step-code { color: var(--agent-accent); background: var(--agent-accent-light); }
.agent-page .case-tag { color: var(--agent-accent); background: var(--agent-accent-light); }

/* ─── 堆叠式 Hero ────────────────────────────────────────────── */
.agent-hero--stacked { padding-top: clamp(80px, 10vw, 120px); }

.agent-hero-center {
    max-width: 680px;
    margin: 0 auto var(--gap-xl);
    text-align: center;
}

.agent-hero-center .eyebrow {
    display: inline-flex;
    padding: 6px 16px;
    background: var(--agent-accent-light);
    color: var(--agent-accent);
    border-radius: var(--radius-full);
    margin-bottom: var(--gap-lg);
}

.agent-hero-center h1 { margin-bottom: var(--gap-lg); }
.agent-hero-center .lead { margin: 0 auto var(--gap-xl); text-align: center; max-width: 560px; }
.agent-hero-center .hero-cta { justify-content: center; }
.agent-hero-center .hero-apps { display: flex; flex-direction: column; align-items: center; }
.agent-hero-center .hero-apps-list { justify-content: center; }

.agent-hero-visual--wide { max-width: 100%; margin: 0 auto; }

/* showcase 通用 */
.agent-hero-visual { position: relative; }

.agent-showcase {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.agent-showcase__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.agent-showcase__head-title {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg-secondary);
}
.agent-showcase__head-dots { display: inline-flex; gap: 6px; }
.agent-showcase__head-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); display: block; }
.agent-showcase__head-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--agent-accent); }
.agent-showcase__head-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--agent-accent); animation: breathe 2s ease-in-out infinite; }

.agent-showcase__body { padding: 22px; }
.agent-showcase__title { font-size: 15px; font-weight: 600; color: var(--fg); }
.agent-showcase__sub { margin-top: 2px; margin-bottom: 18px; font-size: 13px; color: var(--fg-tertiary); }

/* showcase 双列布局 */
.agent-showcase__body--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
}

.agent-showcase__col { min-width: 0; }

.agent-showcase__list { display: flex; flex-direction: column; gap: 12px; }

.agent-showcase__row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-subtle); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.agent-showcase__row:hover { border-color: var(--agent-accent-soft); box-shadow: var(--shadow-sm); }
.agent-showcase__row-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--agent-accent-light); color: var(--agent-accent); }
.agent-showcase__row-icon svg { width: 18px; height: 18px; }
.agent-showcase__row-text { min-width: 0; }
.agent-showcase__row-text b { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
.agent-showcase__row-text small { font-size: 12px; color: var(--fg-tertiary); }
.agent-showcase__row-tag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-style: normal; color: var(--agent-accent); white-space: nowrap; }

.agent-showcase__foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface);
    font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary);
}
.agent-showcase__foot span { display: inline-flex; align-items: center; gap: 6px; }
.agent-showcase__foot i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; display: inline-block; }

/* 代码窗口 */
.agent-code-window { background: #0f172a; border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.agent-code-window__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #1e293b; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-mono); font-size: 12px; }
.agent-code-window__bar span { display: inline-flex; gap: 6px; }
.agent-code-window__bar span i { width: 10px; height: 10px; border-radius: 50%; background: #475569; display: block; }
.agent-code-window__bar span i:first-child { background: #ef4444; }
.agent-code-window__bar span i:nth-child(2) { background: #eab308; }
.agent-code-window__bar span i:nth-child(3) { background: #22c55e; }
.agent-code-window__bar em { color: #94a3b8; font-style: normal; }
.agent-code-window__pre { flex: 1; padding: 16px; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: #e2e8f0; white-space: pre; overflow-x: auto; }
.agent-code-key { color: #93c5fd; }
.agent-code-str { color: #86efac; }

@media (max-width: 720px) {
    .agent-showcase__body--grid { grid-template-columns: 1fr; }
}

/* ─── 4列紧凑 Features ───────────────────────────────────────── */
.agent-features-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
    margin-top: var(--gap-xl);
}

.agent-feature--compact {
    padding: 24px 20px;
}

.agent-feature--compact .feature-icon { width: 36px; height: 36px; margin-bottom: var(--gap-md); }
.agent-feature--compact .feature-icon svg { width: 18px; height: 18px; }
.agent-feature--compact h3 { font-size: 15px; }
.agent-feature--compact p { font-size: 13px; }

@media (max-width: 1000px) { .agent-features-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .agent-features-4col { grid-template-columns: 1fr; } }

/* ─── 横向时间线 Steps ───────────────────────────────────────── */
.agent-timeline {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: var(--gap-xl);
}

.agent-timeline__node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
}

.agent-timeline__num {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--agent-accent-light);
    color: var(--agent-accent);
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: var(--gap-md);
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 2px var(--agent-accent-soft);
    z-index: 1;
}

.agent-timeline__body {
    max-width: 280px;
}

.agent-timeline__body h3 { font-size: 16px; margin-bottom: var(--gap-sm); }
.agent-timeline__body p { font-size: 14px; color: var(--fg-secondary); line-height: 1.65; }

.agent-timeline__connector {
    flex: 0 0 40px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.agent-timeline__connector::before {
    content: '';
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--agent-accent-soft), var(--agent-accent-light));
    margin-top: -38px;
}

@media (max-width: 760px) {
    .agent-timeline { flex-direction: column; gap: var(--gap-md); }
    .agent-timeline__connector { display: none; }
}

/* ─── 2x2 大卡 Cases ─────────────────────────────────────────── */
.agent-cases-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
    margin-top: var(--gap-xl);
}

.agent-case--large {
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}

.agent-case--large::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, var(--agent-accent-light) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}

.agent-case--large .case-tag { font-size: 13px; margin-bottom: var(--gap-lg); }
.agent-case--large h3 { font-size: 20px; margin-bottom: var(--gap-sm); }
.agent-case--large p { font-size: 15px; line-height: 1.7; }

@media (max-width: 720px) { .agent-cases-2x2 { grid-template-columns: 1fr; } }

/* ─── Hero 主视频展示 ────────────────────────────────────────── */
.agent-showcase__body--video {
    position: relative;
    padding: 0;
    background: #0f172a;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.agent-showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agent-showcase-video__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0) 35%, rgba(15,23,42,0) 65%, rgba(15,23,42,0.45) 100%);
}

.agent-showcase-video__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.agent-showcase-video__modes {
    display: inline-flex;
    gap: 6px;
}

.agent-showcase-video__modes i {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: #f8fafc;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(79, 70, 229, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.agent-showcase-video__modes i:nth-child(2) { background: rgba(99, 102, 241, 0.85); }
.agent-showcase-video__modes i:nth-child(3) { background: rgba(168, 85, 247, 0.85); }

/* ─── 功能实机演示（3视频） ──────────────────────────────────── */
.agent-feature-videos {
    background: var(--bg-subtle);
}

.agent-videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg);
    margin-top: var(--gap-xl);
}

.agent-video-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.agent-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--agent-accent-soft);
}

.agent-video-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #0f172a;
    overflow: hidden;
}

.agent-video-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agent-video-card__index {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--agent-accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.agent-video-card__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.agent-video-card__body h3 {
    font-size: 17px;
    margin-bottom: 4px;
}

.agent-video-card__body p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--fg-secondary);
    margin-bottom: var(--gap-sm);
}

.agent-video-card__body .feature-highlight {
    margin-top: auto;
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--agent-accent-light);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 1000px) {
    .agent-videos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .agent-videos-grid { grid-template-columns: 1fr; }
    .agent-showcase-video__modes { display: none; }
}