/* ===== 建筑生成器 - iOS 毛玻璃风格 =====
   独立样式文件，不污染主站 style.css
   核心观感：深色流动彩光基底 + 高斯模糊玻璃面板 + 柔光呼吸
   关键：流动彩光画在 body.aib-mode 上（最外层），玻璃面板的
   backdrop-filter 直接磨 body 背景，最稳，不受层叠上下文影响
*/

/* ===== 页面切换丝滑过渡（淡入淡出，所有栏目通用） ===== */
#app {
    transition: opacity 0.25s ease, transform 0.25s ease;
}
#app.page-fading-out {
    opacity: 0;
    transform: translateY(8px);
}
#app.page-fading-in {
    animation: page-fade-in 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 页面容器：透明背景，让 body 的流动彩光透出
   玻璃面板和导航栏都磨 body 同一彩光，整站统一高级
   关键：不设 isolation/z-index/transform/filter/will-change，避免创建合成层破坏采样 */
.aib-page {
    min-height: calc(100vh - 120px);
    padding: 10px 20px 20px;
    box-sizing: border-box;
    color: #e8eef5;
    position: relative;
    background: transparent;
}
/* aib-bg-flow 动画由 body.aib-mode 使用（整站背景流动） */
@keyframes aib-bg-flow {
    0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
    33%      { background-position: 30% 20%, 70% 30%, 70% 70%, 30% 70%, 0 0; }
    66%      { background-position: 10% 40%, 80% 20%, 90% 60%, 20% 80%, 0 0; }
}
/* 页面内容提到彩带之上 */
.aib-page > * { position: relative; z-index: 1; }

/* 中央穿行的额外流动彩带（纯装饰，置于玻璃面板之下） */
.aib-flow-extra {
    position: absolute;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,150,210,0.32), rgba(90,110,160,0.2) 45%, transparent 72%);
    filter: blur(80px);
    opacity: 0.6;
    top: 15%; left: 35%;
    pointer-events: none;
    z-index: 0;
    animation: aib-flow-c 30s ease-in-out infinite;
}
/* 第二条彩带：暖色调，错峰流动，丰富层次 */
.aib-flow-extra-2 {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(200,150,170,0.28), rgba(160,120,150,0.18) 45%, transparent 72%);
    top: 55%; left: 55%;
    opacity: 0.55;
    animation: aib-flow-c-2 36s ease-in-out infinite;
}
@keyframes aib-flow-c {
    0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
    25%      { transform: translate(-180px,-60px) scale(1.25) rotate(90deg); }
    50%      { transform: translate(120px,100px) scale(0.85) rotate(180deg); }
    75%      { transform: translate(-60px,-150px) scale(1.1) rotate(270deg); }
}
@keyframes aib-flow-c-2 {
    0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
    25%      { transform: translate(140px,80px) scale(1.15) rotate(-90deg); }
    50%      { transform: translate(-100px,-120px) scale(0.9) rotate(-180deg); }
    75%      { transform: translate(80px,-60px) scale(1.2) rotate(-270deg); }
}

/* 玻璃面板基类：iOS 真磨砂质感
   - 半透明白雾底 + 强模糊 + 高饱和（磨出色彩）
   - 多层柔光高光（顶部白边 + 内层光晕）
   - 缓慢呼吸柔光（外层光晕明暗脉动，清晰可见）
   关键：不设 z-index，避免创建层叠上下文破坏 backdrop-filter 采样 */
.aib-glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.16) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 22px;
    box-shadow:
        0 12px 36px rgba(0,0,0,0.4),
        0 2px 8px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(0,0,0,0.12);
    position: relative;
    /* 呼吸柔光：外层白色光晕明暗脉动，像 iOS 控制中心那种柔和呼吸感 */
    animation: aib-glass-breathe 6s ease-in-out infinite;
}
@keyframes aib-glass-breathe {
    0%, 100% {
        box-shadow:
            0 12px 36px rgba(0,0,0,0.4),
            0 2px 8px rgba(0,0,0,0.2),
            inset 0 1px 0 rgba(255,255,255,0.32),
            inset 0 -1px 0 rgba(0,0,0,0.12),
            0 0 0 0 rgba(255,255,255,0);
    }
    50% {
        box-shadow:
            0 16px 44px rgba(0,0,0,0.45),
            0 2px 12px rgba(0,0,0,0.25),
            inset 0 1px 0 rgba(255,255,255,0.45),
            inset 0 -1px 0 rgba(0,0,0,0.18),
            0 0 60px 4px rgba(255,255,255,0.08);
    }
}

/* 主体两栏布局 */
.aib-layout {
    /* position: static（默认），不创建层叠上下文，让 .aib-glass 的 backdrop-filter 能采样到 .aib-page 背景 */
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    height: calc(100vh - 150px);
}

/* ===== 左栏：对话面板 ===== */
.aib-chat {
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: hidden;
}
.aib-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.3px;
    /* 去掉彩虹流光，纯白净标题，更高级不 AI */
}
.aib-subtitle {
    font-size: 12px;
    color: rgba(232,238,245,0.55);
    margin-bottom: 14px;
}
.aib-history {
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aib-history::-webkit-scrollbar { width: 6px; }
.aib-history::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.aib-msg {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    /* QQ 风格：消息整条显示，不内部滚动 */
}
.aib-msg-user {
    background: linear-gradient(135deg, rgba(200,205,220,0.28), rgba(200,205,220,0.12));
    border: 1px solid rgba(200,205,220,0.32);
    align-self: flex-end;
    max-width: 92%;
}
.aib-msg-ai {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    align-self: flex-start;
    max-width: 92%;
    color: rgba(232,238,245,0.82);
}
.aib-msg-err {
    background: rgba(211,48,48,0.18);
    border: 1px solid rgba(211,48,48,0.4);
    color: #ffb3b3;
}

.aib-input-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aib-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 140px;
    resize: vertical;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e8eef5;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.aib-textarea:focus {
    outline: none;
    border-color: rgba(212,160,90,0.6);
    box-shadow: 0 0 0 3px rgba(212,160,90,0.15);
}
.aib-textarea::placeholder { color: rgba(232,238,245,0.35); }

.aib-btn-row { display: flex; gap: 10px; }
.aib-btn {
    flex: 1;
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    color: #fff;
}
.aib-btn-primary {
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.1));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.aib-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.16));
    box-shadow: 0 6px 22px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4);
}
.aib-btn-ghost {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    flex: 0 0 auto;
    padding: 11px 14px;
}
.aib-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.aib-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.aib-btn-stop {
    background: linear-gradient(135deg, #D43030, #FFAA00);
}
/* 导出建筑按钮：毛玻璃 + 暖金高光，区别于生成按钮，提示可导出 */
.aib-btn-export {
    background: linear-gradient(135deg, rgba(255,220,160,0.32), rgba(255,200,120,0.18));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,220,160,0.45);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255,180,80,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
    animation: aib-export-pulse 2.4s ease-in-out infinite;
}
.aib-btn-export:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(255,220,160,0.42), rgba(255,200,120,0.28));
    box-shadow: 0 6px 22px rgba(255,180,80,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
}
@keyframes aib-export-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(255,180,80,0.25), inset 0 1px 0 rgba(255,255,255,0.35); }
    50%      { box-shadow: 0 4px 22px rgba(255,180,80,0.45), inset 0 1px 0 rgba(255,255,255,0.45); }
}

.aib-status {
    font-size: 12px;
    color: rgba(232,238,245,0.5);
    text-align: center;
    min-height: 16px;
}
.aib-status .aib-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #C8CDD7;
    margin-right: 6px;
    animation: aib-pulse 1.2s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes aib-pulse {
    0%,100% { opacity: 0.3; transform: scale(0.8); }
    50%     { opacity: 1; transform: scale(1.2); }
}

/* 快捷示例（轮播容器） */
.aib-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 30px;
    transition: opacity 0.25s ease;
}
.aib-examples.aib-fading { opacity: 0; }
.aib-chip {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(232,238,245,0.7);
    cursor: pointer;
    transition: all 0.15s;
    animation: aib-chip-in 0.4s ease both;
}
@keyframes aib-chip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* chip 错峰浮入 */
.aib-chip:nth-child(1) { animation-delay: 0.00s; }
.aib-chip:nth-child(2) { animation-delay: 0.04s; }
.aib-chip:nth-child(3) { animation-delay: 0.08s; }
.aib-chip:nth-child(4) { animation-delay: 0.12s; }
.aib-chip:nth-child(5) { animation-delay: 0.16s; }
.aib-chip:nth-child(6) { animation-delay: 0.20s; }
.aib-chip:nth-child(7) { animation-delay: 0.24s; }
.aib-chip:nth-child(8) { animation-delay: 0.28s; }
.aib-chip:hover {
    background: rgba(91,124,250,0.2);
    border-color: rgba(91,124,250,0.5);
    color: #fff;
    transform: translateY(-2px);
}

/* ===== 右栏：3D 预览 ===== */
.aib-view {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.aib-view-bar {
    position: absolute;
    top: 14px; left: 14px; right: 14px;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
.aib-view-bar > * { pointer-events: auto; }
.aib-view-info {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 999px;
    color: rgba(232,238,245,0.8);
}
.aib-view-actions { display: flex; gap: 8px; }
.aib-icon-btn {
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8eef5;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.aib-icon-btn:hover { background: rgba(212,160,90,0.25); border-color: rgba(212,160,90,0.5); }
.aib-icon-btn.off { opacity: 0.55; }

.aib-canvas-wrap {
    flex: 1;
    position: relative;
}
#aib-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 18px;
}

/* 预览关闭时的占位 */
.aib-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(232,238,245,0.4);
    pointer-events: none;
}
.aib-placeholder-icon {
    font-size: 56px;
    filter: grayscale(0.3);
}
.aib-placeholder-text { font-size: 14px; text-align: center; line-height: 1.7; }

/* 底部统计条 */
.aib-stats {
    position: absolute;
    bottom: 14px; left: 14px; right: 14px;
    z-index: 5;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    pointer-events: none;
}
.aib-stat {
    padding: 5px 11px;
    font-size: 11px;
    border-radius: 8px;
    color: rgba(232,238,245,0.75);
}
.aib-stat b { color: #C8CDD7; font-weight: 600; }

/* 加载遮罩 */
.aib-loading-mask {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15,20,25,0.55);
    backdrop-filter: blur(6px);
    border-radius: 18px;
}
.aib-loading-mask.show { display: flex; }
.aib-spinner {
    width: 44px; height: 44px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: #C8CDD7;
    border-radius: 50%;
    animation: aib-spin 0.9s linear infinite;
}
@keyframes aib-spin { to { transform: rotate(360deg); } }

/* ===== 导出弹窗（仿 iOS 毛玻璃） ===== */
.aib-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.aib-modal-mask.show {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.aib-modal-card {
    width: 380px;
    max-width: calc(100vw - 40px);
    padding: 24px;
    border-radius: 24px;
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: opacity 0.3s cubic-bezier(0.22,0.61,0.36,1), transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
}
.aib-modal-mask.show .aib-modal-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.aib-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
}
.aib-modal-info {
    font-size: 12px;
    color: rgba(232,238,245,0.6);
    text-align: center;
    margin-bottom: 20px;
}
.aib-modal-field { margin-bottom: 16px; }
.aib-modal-label {
    display: block;
    font-size: 12px;
    color: rgba(232,238,245,0.6);
    margin-bottom: 8px;
}
.aib-modal-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e8eef5;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.aib-modal-input:focus {
    outline: none;
    border-color: rgba(200,205,220,0.6);
    box-shadow: 0 0 0 3px rgba(200,205,220,0.15);
}
.aib-modal-formats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.aib-modal-fmt {
    padding: 12px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e8eef5;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.aib-modal-fmt:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
}
.aib-modal-fmt.active {
    background: rgba(200,205,220,0.25);
    border-color: rgba(200,205,220,0.6);
    box-shadow: 0 0 0 2px rgba(200,205,220,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}
.aib-modal-fmt-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.aib-modal-fmt-desc {
    font-size: 10px;
    color: rgba(232,238,245,0.5);
}
.aib-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

/* 响应式：窄屏单栏 */
@media (max-width: 900px) {
    .aib-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .aib-chat { height: 420px; }
    .aib-view { height: 420px; }
}

/* ===== 进入建筑生成器栏目：整站 iOS 毛玻璃深色高级风 ===== */
/* 全局过渡：body / 导航栏 / 页脚 / 链接 切换时丝滑渐变
   时长 0.8s，避免从主站亮色切深色时颜色"眨眼"跳变 */
body {
    transition: background-color 0.8s ease, background-image 0.8s ease,
                color 0.8s ease;
}
body .navbar,
body .footer,
body .nav-link,
body .nav-title {
    transition: background 0.8s ease, background-image 0.8s ease,
                border-color 0.8s ease, box-shadow 0.8s ease,
                backdrop-filter 0.8s ease, color 0.8s ease, text-shadow 0.8s ease;
}
/* body：清掉主站 fixed 壁纸 + 噪点 ::before，换深色流动彩光基底
   （整站背景也高级，导航栏 backdrop-filter 磨这一层） */
body.aib-mode {
    background-color: #06070b !important;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(120,150,210,0.35), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(160,130,200,0.3), transparent 42%),
        radial-gradient(circle at 75% 85%, rgba(100,170,200,0.3), transparent 42%),
        radial-gradient(circle at 20% 80%, rgba(200,150,170,0.28), transparent 44%),
        linear-gradient(160deg, #04050a 0%, #080912 50%, #06070d 100%) !important;
    background-size: 180% 180%, 200% 200%, 190% 190%, 210% 210%, 100% 100% !important;
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    animation: aib-bg-flow 28s ease-in-out infinite !important;
    color: #e8eef5 !important;
}
body.aib-mode::before {
    content: none !important;
    display: none !important;
}
/* #app.main-content 默认 max-width:1200px + z-index:1，限制 .aib-page 宽度，
   解除让 AI 页面铺满，背景彩光不被层叠上下文困住 */
body.aib-mode .main-content {
    max-width: none !important;
    padding: 0 !important;
    z-index: auto !important;
    background: transparent !important;
}
/* 导航栏：深色毛玻璃条，磨 body 的流动彩光 */
body.aib-mode .navbar {
    background: linear-gradient(180deg, rgba(20,24,36,0.72) 0%, rgba(14,17,28,0.68) 100%) !important;
    background-image: none !important;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
body.aib-mode .nav-title {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(200,210,230,0.5) !important;
}
/* 普通导航链接：深色底上的浅色玻璃按钮 */
body.aib-mode .nav-link {
    color: rgba(232,238,245,0.82) !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
    text-shadow: none !important;
}
body.aib-mode .nav-link:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
body.aib-mode .nav-link.active {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.28) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* 页脚：深色毛玻璃，匹配整体风格 */
body.aib-mode .footer {
    background: linear-gradient(180deg, transparent 0%, rgba(8,10,16,0.6) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: rgba(232,238,245,0.6) !important;
}

/* 页面内容无进场动画（避免颜色跳变"眨眼"感），
   仅保留背景流动动画 aib-bg-flow（在文件顶部 .aib-page 中已定义） */

/* ===== 首页 AI 建筑生成器卡片：深色毛玻璃 + 强氛围灯（醒目不浅） ===== */
/* 深色玻璃底，磨出后面壁纸的模糊色彩，强对比让卡片跳出来 */
.tool-card-aib {
    background: linear-gradient(135deg, rgba(38,44,64,0.82) 0%, rgba(22,27,42,0.88) 50%, rgba(32,38,56,0.84) 100%) !important;
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 18px !important;
    box-shadow:
        0 10px 36px rgba(0,0,0,0.45),
        0 2px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
    /* 不跨列，只增高，让卡片更长不突兀 */
    min-height: 220px;
    padding: 30px 24px !important;
    /* 氛围灯呼吸（强） */
    animation: aib-card-breathe 4.5s ease-in-out infinite;
}
/* AI 卡片内部布局：横向排列图标与文字，更大气 */
.tool-card-aib .tool-card-icon {
    font-size: 52px !important;
    margin-bottom: 18px !important;
}
.tool-card-aib .tool-card-title {
    font-size: 15px !important;
    margin-bottom: 10px !important;
}
.tool-card-aib .tool-card-desc {
    font-size: 14px !important;
    line-height: 1.8 !important;
}
/* 卡片内部文字配色（深色玻璃底用浅色文字） */
.tool-card-aib .tool-card-title { color: #fff !important; text-shadow: 0 0 16px rgba(200,210,230,0.6); }
.tool-card-aib .tool-card-desc { color: rgba(255,255,255,0.82) !important; }
.tool-card-aib .tool-card-icon {
    color: #fff !important;
    text-shadow: 0 0 18px rgba(255,255,255,0.7), 0 0 36px rgba(200,210,230,0.5);
}
.tool-card-aib .tool-tag {
    background: rgba(255,255,255,0.16) !important;
    color: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.26) !important;
}
/* 卡片内部流动彩光层（深色底上更明显） */
.tool-card-aib::before {
    content: '';
    position: absolute;
    top: -30%; left: -20%;
    width: 90%; height: 70%;
    background: radial-gradient(ellipse at center, rgba(180,195,225,0.45), rgba(150,165,195,0.25) 45%, transparent 72%);
    filter: blur(28px);
    pointer-events: none;
    animation: aib-card-glow 7s ease-in-out infinite;
    z-index: 0;
}
/* 卡片底部强氛围光带 */
.tool-card-aib::after {
    content: '';
    position: absolute;
    bottom: -45%; left: -25%;
    width: 150%; height: 85%;
    background: radial-gradient(ellipse at center, rgba(200,210,230,0.5), rgba(160,175,200,0.3) 40%, transparent 70%);
    filter: blur(34px);
    pointer-events: none;
    animation: aib-card-glow 8s ease-in-out infinite reverse;
    z-index: 0;
}
/* 卡片内容提到光层之上 */
.tool-card-aib > * { position: relative; z-index: 1; }
@keyframes aib-card-breathe {
    0%, 100% {
        box-shadow:
            0 10px 36px rgba(0,0,0,0.45),
            0 2px 10px rgba(0,0,0,0.3),
            inset 0 1px 0 rgba(255,255,255,0.28),
            0 0 0 0 rgba(200,210,230,0);
    }
    50% {
        box-shadow:
            0 14px 44px rgba(0,0,0,0.5),
            0 2px 14px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.42),
            0 0 44px 4px rgba(200,210,230,0.3);
    }
}
@keyframes aib-card-glow {
    0%, 100% { transform: translate(0,0) scale(1); opacity: 0.75; }
    33%      { transform: translate(24px,-12px) scale(1.12); opacity: 1; }
    66%      { transform: translate(-18px,10px) scale(0.95); opacity: 0.85; }
}
/* hover 增强 */
.tool-card-aib:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(255,255,255,0.4) !important;
    box-shadow:
        0 18px 52px rgba(0,0,0,0.5),
        0 2px 16px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 0 60px 6px rgba(200,210,230,0.38) !important;
}

/* ===== 顶部导航栏“AI建筑生成器”链接：常驻显眼（毛玻璃 + 发光呼吸） ===== */
/* 其他导航链接保持主站石头方块风格，仅此链接特殊 */
.nav-link-aib {
    background: linear-gradient(135deg, rgba(38,44,64,0.7), rgba(22,27,42,0.6)) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(200,210,230,0.7) !important;
    box-shadow:
        0 2px 12px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
    animation: nav-aib-breathe 3.5s ease-in-out infinite;
    position: relative;
}
.nav-link-aib:hover {
    background: linear-gradient(135deg, rgba(50,58,80,0.8), rgba(30,36,54,0.7)) !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow:
        0 4px 18px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 22px 2px rgba(200,210,230,0.4) !important;
    color: #fff !important;
}
/* 当前在 AI 栏目时（同时有 active），保持显眼玻璃风格而非变回绿色 */
.nav-link-aib.active {
    background: linear-gradient(135deg, rgba(58,66,90,0.85), rgba(34,40,60,0.78)) !important;
    border-color: rgba(255,255,255,0.5) !important;
    color: #fff !important;
    box-shadow:
        0 2px 14px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 0 26px 3px rgba(200,210,230,0.45) !important;
}
@keyframes nav-aib-breathe {
    0%, 100% {
        box-shadow:
            0 2px 12px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.25),
            0 0 0 0 rgba(200,210,230,0);
    }
    50% {
        box-shadow:
            0 2px 16px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.32),
            0 0 18px 2px rgba(200,210,230,0.35);
    }
}
