/* Article sidebar artwork and free-trial invitation. */
.banner .zt-ai-topic-banner { box-sizing: border-box; padding: 17px 16px; }
.zt-ai-topic-banner p { margin: 0; color: #fff; text-align: center; }
.zt-ai-topic-banner .zt-ai-topic-heading { font-size: 38px; font-weight: 700; line-height: 1.25; text-shadow: 0 3px 8px rgba(0,0,0,.16); }
.zt-ai-topic-heading strong { font-weight: 800; }
.zt-ai-topic-heading span { display: inline-block; }
.zt-ai-topic-banner .zt-ai-topic-subtitle { margin-top: 7px; font-size: 20px; line-height: 1.5; }
@media screen and (max-width: 768px) {
    .banner .zt-ai-topic-banner { height: auto; min-height: 200px; padding: 22px 16px; }
    .zt-ai-topic-banner .zt-ai-topic-heading { font-size: 28px; line-height: 1.45; }
    .zt-ai-topic-banner .zt-ai-topic-subtitle { font-size: 17px; }
    #content .main > div > h1 { line-height: 1.55; }
}
.side .zt-ai-banner {
    display: block;
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    overflow: hidden;
    background: #edf7ff;
}
.side .zt-ai-banner { border-radius: 12px; box-shadow: 0 8px 24px rgba(38, 92, 160, .09); }
.side .zt-ai-visual:focus-visible, .side .zt-ai-claim:focus-visible { outline: 3px solid #0052d9; outline-offset: -3px; }
.zt-ai-offer { position: relative; padding: 8px 16px 20px; background: linear-gradient(#edf7ff, #f7fbff); text-align: center; }
.zt-ai-offer p { margin: 0; padding: 0; text-indent: 0; }
.zt-ai-offer .zt-ai-promise { color: #405c7c; font-size: 15px; line-height: 1.6; }
.zt-ai-offer .zt-ai-trial { margin: 5px 0 14px; color: #142f53; font-size: 21px; font-weight: 700; line-height: 1.45; }
.side .zt-ai-offer .zt-ai-claim { display: block; margin: 0 8px; padding: 11px 12px; border-radius: 0; background: #cc0000; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; text-decoration: none; transition: background-color .2s ease; }
.side .zt-ai-offer .zt-ai-claim:hover { background: #b30000; color: #fff; }
.zt-ai-banner .zt-ai-art {
    display: block;
    position: relative;
    padding-top: 106.5%;
    overflow: hidden;
    background: url('/control/userInfo/images/ai-welcome/background.jpg') right center / 200% 100% no-repeat;
}
.side .zt-ai-banner img { position: absolute; width: 14%; height: auto; z-index: 1; transform: none; }
.side .zt-ai-banner .zt-ai-robot { left: 22%; top: auto; bottom: 23.5%; width: 46%; filter: drop-shadow(0 10px 10px rgba(0,82,217,.15)); }
.side .zt-ai-banner .zt-ai-baidu { left: 22%; top: 8%; --zt-icon-angle: -10deg; --zt-icon-duration: 4.4s; --zt-icon-delay: -0.4s; }
.side .zt-ai-banner .zt-ai-deepseek { left: 70%; top: 9%; --zt-icon-angle: 8deg; --zt-icon-duration: 4.8s; --zt-icon-delay: -2.1s; }
.side .zt-ai-banner .zt-ai-doubao { left: 76%; top: 34%; --zt-icon-angle: 8deg; --zt-icon-duration: 4.2s; --zt-icon-delay: -1.2s; }
.side .zt-ai-banner .zt-ai-qianwen { left: 74%; top: 59%; --zt-icon-angle: 10deg; --zt-icon-duration: 5s; --zt-icon-delay: -3.4s; }
.side .zt-ai-banner .zt-ai-yuanbao { left: 5%; top: 71%; width: 13%; --zt-icon-angle: -10deg; --zt-icon-duration: 4.6s; --zt-icon-delay: -2.7s; }
.side .zt-ai-banner .zt-ai-bing { left: 3%; top: 52%; width: 13%; --zt-icon-angle: -14deg; --zt-icon-duration: 5.2s; --zt-icon-delay: -0.8s; }
.side .zt-ai-banner .zt-ai-sogou { left: 46%; top: 9%; width: 12%; --zt-icon-angle: 4deg; --zt-icon-duration: 4s; --zt-icon-delay: -2.4s; }
.side .zt-ai-banner .zt-ai-360 { left: 6%; top: 34%; width: 13%; --zt-icon-angle: -8deg; --zt-icon-duration: 4.9s; --zt-icon-delay: -3.8s; }
.side .zt-ai-banner .zt-ai-art > img:not(.zt-ai-robot) {
    transform-origin: center;
    transform: rotate(var(--zt-icon-angle, 0deg));
    animation: zt-icon-breathe var(--zt-icon-duration, 4.6s) ease-in-out var(--zt-icon-delay, 0s) infinite;
}
@keyframes zt-icon-breathe {
    0%, 100% { transform: translateY(2px) rotate(var(--zt-icon-angle, 0deg)) scale(.96); }
    50% { transform: translateY(-3px) rotate(var(--zt-icon-angle, 0deg)) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .side .zt-ai-banner .zt-ai-art > img:not(.zt-ai-robot) { animation: none; }
}
