/* ── AI智能体 ── */
.agent { background: #fff; padding: 0 0 80px; overflow: hidden; }

@media (max-width: 768px) { .agent { padding: 0 0 56px; } }
@media (max-width: 480px) { .agent { padding: 0 0 44px; } }
.agent .container { max-width: 1600px; }
.agent .section-title h2 { color: #111; }
.agent .section-title p { color: #777; }
.agent .section-title h2::after { background: #f5a623; }

/* 左右分栏 */
.agent-layout {
    display: flex;
    gap: 60px;
    align-items: stretch;
    min-height: 600px;
}

/* ── 左侧：智能体卡片散点区 ── */
.agent-left {
    flex: 1;
    min-width: 0;
    position: relative;
}
.agent-cards {
    position: relative;
    width: 100%;
    height: 560px;
}

/* 单个卡片 */
.agent-card {
    position: absolute;
    background: #FAFAFA;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    will-change: transform, opacity;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.agent-card:hover {
    background: #FFFBF0;
    border-color: rgba(245,166,35,0.4);
    z-index: 10;
    box-shadow: 0 8px 32px rgba(245,166,35,0.15);
}
.agent-card.active {
    background: #FFFBF0;
    border-color: #f5a623;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(245,166,35,0.2);
}

.agent-card-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFBF0;
    border-radius: 8px;
}
.agent-card-text h4 {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    margin: 0;
}
.agent-card-text p {
    font-size: 10px;
    color: #999;
    line-height: 1.3;
    margin: 2px 0 0;
}

/* 漂浮动画 */
@keyframes floatCard {
    0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)); }
    50%      { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 8px)); }
}
.agent-card { animation: floatCard var(--float-dur, 5s) ease-in-out infinite; animation-delay: var(--float-delay, 0s); }

/* ── 右侧：手机样机展示区 ── */
.agent-right {
    width: 560px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.phone-stage {
    position: relative;
    width: 100%;
    height: 560px;
    perspective: 1200px;
    overflow: visible;
}

/* 手机外壳 */
.phone-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .6s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
}
.phone-wrapper[data-phone="0"] { transform: translate(-120%, -50%) rotateY(14deg) scale(.85); z-index: 1; }
.phone-wrapper[data-phone="1"] { transform: translate(-50%, -50%) rotateY(0deg) scale(1); z-index: 3; }
.phone-wrapper[data-phone="2"] { transform: translate(20%, -50%) rotateY(-14deg) scale(.85); z-index: 1; }


.phone-frame {
    width: 250px;
    height: 500px;
    border-radius: 32px;
    background: #fff;
    border: 3px solid #e0e0e0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}
.phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 刘海 */
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 14px;
    background: #4d4d4d;
    border-radius: 0 0 16px 16px;
    z-index: 2;
}

/* ── 响应式 ── */
@media (max-width: 1024px) {
    .agent-layout { flex-direction: column-reverse; }
    .agent-right { width: 100%; }
    .phone-stage { height: 400px; }
    .agent-cards { height: 480px; }
}
@media (max-width: 768px) {
    .agent-cards { height: 400px; }
    .phone-frame { width: 170px; height: 340px; border-radius: 24px; }
    .phone-wrapper[data-phone="0"] { transform: translate(-120%, -50%) rotateY(10deg) scale(.72); }
    .phone-wrapper[data-phone="2"] { transform: translate(20%, -50%) rotateY(-10deg) scale(.72); }
    .agent-card { padding: 10px 12px; gap: 8px; }
    .agent-card-icon { width: 30px; height: 30px; font-size: 18px; border-radius: 8px; }
    .agent-card-text h4 { font-size: 12px; }
    .agent-card-text p { display: none; }
}

/* 手机竖屏（中等）— 散点改为标签流布局，用 !important 覆盖 JS 内联样式 */
@media (max-width: 600px) {
    .agent-layout { min-height: 0; gap: 0; }
    .agent-left { overflow: hidden; }
    /* 关键：覆盖 JS 内联的 position/left/top，转为 flex-wrap 标签云 */
    .agent-cards {
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0 20px;
        position: static;
    }
    .agent-card {
        position: static !important;
        left: auto !important;
        top: auto !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        flex: 0 0 auto;
        padding: 8px 12px;
        gap: 7px;
        white-space: nowrap;
    }
    .agent-card-icon { width: 26px; height: 26px; font-size: 15px; }
    .agent-card-text p { display: none; }
    .phone-stage { height: 340px; }
    .phone-frame { width: 150px; height: 300px; border-radius: 22px; }
}

/* 主流 iPhone（390px）/ 小屏安卓 */
@media (max-width: 390px) {
    .agent-card { padding: 7px 10px; gap: 5px; }
    .agent-card-icon { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
    .agent-card-text h4 { font-size: 11px; }
    .phone-frame { width: 130px; height: 260px; border-radius: 20px; }
    .phone-stage { height: 290px; }
    .phone-wrapper[data-phone="0"] { transform: translate(-118%, -50%) rotateY(8deg) scale(.65); }
    .phone-wrapper[data-phone="2"] { transform: translate(18%, -50%) rotateY(-8deg) scale(.65); }
}