/**
 * index_v2 页面布局样式
 *
 * 注意：CSS 变量、动画、通用组件样式已抽离到 ishowplay-design-system.css
 * 此文件只包含 index_v2 页面特定的布局和结构
 *
 * @version 2.0
 * @date 2025-10-28
 */

/* 只隐藏页脚，保留顶部导航和侧边栏显示 */
html body.index2-page .nova-footer {
    display: none;
}

body.index2-page .app-container {
    display: block;
}

body.index2-page .main-content {
    margin-left: 290px;
    padding: 0;
    width: calc(100% - 290px);
    min-height: 100vh;
    background: transparent;
}

.index2-root {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 96px 0 90px; /* 修改：72px (nav-actions) + 24px (间距) = 96px */
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: visible; /* 修復：允許子元素圓角完整顯示 */
}

/* 动态背景效果已移至 system-utilities.css 作为通用组件 */

.index2-shell {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box; /* 確保 padding 不會造成寬度溢出 */
}

.index2-shell::before {
    content: "";
    position: absolute;
    inset: 0; /* 修改：限制在容器內，配合 overflow:hidden 防止動畫溢出 */
    background: radial-gradient(120% 110% at 50% 45%, rgba(162, 196, 255, 0.24) 0%, rgba(72, 121, 255, 0.14) 34%, rgba(64, 210, 201, 0.12) 56%, rgba(12, 20, 38, 0) 80%);
    filter: blur(55px);
    opacity: var(--index2-shell-glow-opacity, 0.42);
    pointer-events: none;
    animation: shell-glide 24s ease-in-out infinite;
    mask-image: radial-gradient(60% 78% at 50% 46%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0) 88%);
    -webkit-mask-image: radial-gradient(60% 78% at 50% 46%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0) 88%);
    transition: opacity 0.6s ease;
    border-radius: 24px;
}

/* index2-aside 相关样式已移除，统一使用 header.php 中的侧边栏 */

.index2-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 38px;
    max-width: 100%; /* 防止子元素溢出父容器 */
    box-sizing: border-box; /* 確保尺寸計算正確 */
}

.index2-vision {
    background: var(--index2-surface);
    border-radius: 36px;
    border: 1px solid var(--index2-border);
    padding: 42px 44px 46px;
    box-shadow: var(--index2-shadow);
    backdrop-filter: blur(28px);
    position: relative;
    overflow: hidden;
}

.index2-vision::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 18%, rgba(110, 150, 255, 0.2), transparent 60%);
    pointer-events: none;
}

.vision-header {
    display: grid;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.vision-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(142, 169, 255, 0.3);
    background: rgba(142, 169, 255, 0.16);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--index2-text-primary);
    width: fit-content;
}

.vision-title {
    margin: 0;
    font-size: clamp(2.3rem, 3vw, 3.1rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--index2-text-primary);
}

.vision-lead {
    margin: 0;
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--index2-text-secondary);
}

.vision-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    position: relative;
    z-index: 1;
}

.vision-card {
    position: relative;
    border-radius: 28px;
    padding: 28px;
    background: rgba(19, 29, 56, 0.75);
    border: 1px solid rgba(142, 169, 255, 0.18);
    box-shadow: 0 28px 60px rgba(7, 12, 32, 0.45);
    backdrop-filter: blur(24px);
    display: grid;
    gap: 22px;
    transition: transform 0.45s cubic-bezier(0.21, 0.8, 0.32, 1), box-shadow 0.45s cubic-bezier(0.21, 0.8, 0.32, 1);
    overflow: hidden;
}

.vision-card::after {
    content: "";
    position: absolute;
    inset: -10%; /* 已修改：從 -20% 改為 -10%，減少外擴防止溢出 */
    background: radial-gradient(circle at top right, rgba(142, 169, 255, 0.22), transparent 58%);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.vision-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 36px 80px rgba(9, 14, 40, 0.55);
}

.vision-card:hover::after {
    opacity: 0.85;
}

.vision-card__badge {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(63, 109, 255, 0.9), rgba(87, 218, 204, 0.9));
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}

.vision-card__body {
    display: grid;
    gap: 12px;
}

.vision-card__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--index2-text-primary);
}

.vision-card__text {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--index2-text-secondary);
}

.vision-card__footer {
    display: grid;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--index2-text-secondary);
}

.vision-card__metric {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--index2-text-primary);
}

.vision-card__hint {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

.vision-card__action {
    justify-self: flex-start;
    margin-top: 4px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(142, 169, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--index2-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.vision-card__action:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(63, 109, 255, 0.32);
    background: rgba(255, 255, 255, 0.16);
}

.index2-console {
    background: var(--index2-surface);
    border-radius: 36px;
    border: 1px solid var(--index2-border);
    padding: 40px 46px;
    box-shadow: var(--index2-shadow);
    backdrop-filter: blur(26px);
}

.console-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.console-eyebrow {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--index2-text-muted);
}

.console-title {
    margin: 12px 0 0;
    font-size: 2.1rem;
    letter-spacing: -0.01em;
    color: var(--index2-text-primary);
}

.console-pills {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.console-pill {
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(63, 109, 255, 0.16);
    color: rgba(63, 109, 255, 0.72);
    background: rgba(63, 109, 255, 0.08);
    letter-spacing: 0.04em;
}

.console-pill--active {
    background: linear-gradient(135deg, rgba(63, 109, 255, 0.95), rgba(87, 218, 204, 0.9));
    color: var(--index2-white);
    border-color: transparent;
    box-shadow: 0 18px 44px rgba(63, 109, 255, 0.24);
}

.console-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
}

.console-primary {
    display: flex;
    flex-direction: column;
    gap: 22px;

    /* ========== 新增：視覺容器樣式 (2025-10-17) ========== */
    /* 與 index2-vision 保持一致的設計語言 */
    background: var(--index2-surface);
    border-radius: 28px;
    border: 1px solid var(--index2-border);
    padding: 24px;
    box-shadow: var(--index2-shadow);
    backdrop-filter: blur(26px);
    position: relative;
    overflow: hidden;
}

/* 添加微妙的背景光效 */
.console-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(110, 150, 255, 0.15), transparent 55%);
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

/* 確保內部元素在光效之上 */
.console-primary > * {
    position: relative;
    z-index: 1;
}

.console-surface {
    background: var(--index2-surface-strong);
    border-radius: 20px; /* 調整：從 28px 縮小到 20px，因為外層已有圓角 */
    border: 1px solid var(--index2-border-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    padding: 24px; /* 調整：從 26px 調整為 24px */
    display: flex;
    flex-direction: column;
    min-height: 560px;
    position: relative;
    overflow: visible; /* 修復：移除 hidden 以避免裁切子元素的圓角邊框 */
    z-index: 1; /* 確保在 console-primary/secondary 的 ::after 之上 */
}

/* 移除右側背景光效 - 2025-10-13 */
/*.console-surface::before {
    content: "";
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 20% 20%, rgba(168, 189, 255, 0.28), transparent 60%),
                radial-gradient(circle at 85% 70%, rgba(86, 248, 234, 0.18), transparent 65%);
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: index2-console-light 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}*/

/* 移除右側漸層光效 - 2025-10-13 */
/*.console-surface::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(142, 169, 255, 0.14), transparent 55%);
    opacity: 0.4;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}*/

.console-surface > * {
    position: relative;
    z-index: 1;
}

@keyframes index2-console-light {
    0%,
    100% {
        transform: translate3d(-4%, -3%, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate3d(4%, 6%, 0) scale(1.05);
        opacity: 0.75;
    }
}

.console-surface__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.surface-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--index2-text-muted);
}

.surface-title {
    margin: 10px 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.surface-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    padding: 10px 16px;
    border: 1px solid rgba(142, 169, 255, 0.26);
    background: rgba(33, 53, 104, 0.82);
    color: var(--index2-text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.surface-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(9, 13, 30, 0.45);
}

.surface-cta svg {
    width: 18px;
    height: 18px;
}

.console-surface__body {
    flex: 1;
    margin-top: 22px;
    border-radius: 20px;
    border: 1px solid rgba(142, 169, 255, 0.18);
    background: rgba(23, 36, 74, 0.82);
    backdrop-filter: blur(18px);
    padding: 0;
    display: flex;
    overflow: visible; /* 修復：允許內部元素圓角完整顯示 */
}

#nlp-container {
    flex: 1;
    display: flex;
    width: 100%; /* 填滿寬度 */
}

.chat-wrapper {
    width: 100%; /* 填滿父容器 nlp-container */
    display: flex;
    flex-direction: column;
}

.chat-container {
    flex: 1; /* 填滿父容器 chat-wrapper */
    position: relative; /* 為絕對定位的子元素提供參考點 */
}

.console-surface__footnote {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(28, 43, 86, 0.85);
    border: 1px solid rgba(142, 169, 255, 0.18);
    color: var(--index2-text-secondary);
    font-size: 0.85rem;
}

.index2-theme-switch {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 28px;
}

.theme-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 22px 12px 68px;
    border-radius: 999px;
    border: 1px solid rgba(142, 169, 255, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(231, 240, 255, 0.9));
    box-shadow: 0 24px 50px rgba(120, 146, 255, 0.18);
    color: var(--index2-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 32px 60px rgba(120, 146, 255, 0.2);
}

.theme-toggle-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(120, 146, 255, 0.25), 0 24px 50px rgba(120, 146, 255, 0.18);
}

.theme-toggle-btn .toggle-handle {
    position: absolute;
    left: 6px;
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7aa5ff, #5be6d4);
    box-shadow: 0 18px 30px rgba(90, 140, 255, 0.35);
    transform: translateY(-50%);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.3s ease;
}

.theme-toggle-btn .toggle-icon {
    font-size: 1.15rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-btn .toggle-icon--moon {
    opacity: 0;
    transform: translateY(6px);
}

.theme-toggle-btn .toggle-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.theme-toggle-btn .toggle-text strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: inherit;
}

.theme-toggle-btn .toggle-text span {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(22, 29, 60, 0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.theme-toggle-btn.is-dark {
    border-color: rgba(108, 134, 255, 0.38);
    background: linear-gradient(140deg, rgba(17, 27, 58, 0.96), rgba(31, 46, 80, 0.92));
    box-shadow: 0 26px 68px rgba(12, 20, 46, 0.55);
    color: #e9eeff;
}

.theme-toggle-btn.is-dark .toggle-handle {
    transform: translate(56px, -50%);
    background: linear-gradient(135deg, #3f62ff, #32d7c9);
    box-shadow: 0 20px 36px rgba(37, 73, 200, 0.45);
}

.theme-toggle-btn.is-dark .toggle-icon--sun {
    opacity: 0;
    transform: translateY(-6px);
}

.theme-toggle-btn.is-dark .toggle-icon--moon {
    opacity: 1;
    transform: translateY(0);
}

.theme-toggle-btn.is-dark .toggle-text span {
    color: rgba(204, 216, 255, 0.72);
}

html[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(108, 134, 255, 0.38);
    background: linear-gradient(140deg, rgba(17, 27, 58, 0.96), rgba(31, 46, 80, 0.92));
    box-shadow: 0 26px 68px rgba(12, 20, 46, 0.55);
    color: #e9eeff;
}

html[data-theme="dark"] .theme-toggle-btn .toggle-handle {
    transform: translate(56px, -50%);
    background: linear-gradient(135deg, #3f62ff, #32d7c9);
    box-shadow: 0 20px 36px rgba(37, 73, 200, 0.45);
}

html[data-theme="dark"] .theme-toggle-btn .toggle-icon--sun {
    opacity: 0;
    transform: translateY(-6px);
}

html[data-theme="dark"] .theme-toggle-btn .toggle-icon--moon {
    opacity: 1;
    transform: translateY(0);
}

html[data-theme="dark"] .theme-toggle-btn .toggle-text span {
    color: rgba(204, 216, 255, 0.72);
}

/* Light Mode Overrides -------------------------------------------------- */
html:not([data-theme="dark"]) body.index2-page {
    --index2-background: #f6f8ff;
    --index2-surface: rgba(255, 255, 255, 0.92);
    --index2-surface-strong: rgba(255, 255, 255, 0.97);
    --index2-border: rgba(120, 138, 255, 0.22);
    --index2-border-strong: rgba(120, 138, 255, 0.32);
    --index2-shadow: 0 48px 120px rgba(133, 144, 255, 0.16);
    --index2-text-primary: #111633;
    --index2-text-secondary: rgba(22, 29, 60, 0.68);
    --index2-text-muted: rgba(22, 29, 60, 0.4);
    --index2-accent: #4e6dff;
    --index2-accent-soft: rgba(78, 109, 255, 0.15);
    --index2-teal: #39cdc2;
    --index2-amber: #ffb347;
    --index2-shell-glow-opacity: 0.52;
}

html:not([data-theme="dark"]) body.index2-page {
    background: var(--index2-background);
    color: var(--index2-text-primary);
}

html:not([data-theme="dark"]) body.index2-page .index2-vision,
html:not([data-theme="dark"]) body.index2-page .index2-console {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(142, 160, 255, 0.22);
    box-shadow: 0 48px 120px rgba(138, 156, 255, 0.15);
}

html:not([data-theme="dark"]) body.index2-page .vision-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(140, 158, 255, 0.18);
    box-shadow: 0 28px 70px rgba(138, 156, 255, 0.18);
}

html:not([data-theme="dark"]) body.index2-page .vision-card::after {
    opacity: 0.45;
}

html:not([data-theme="dark"]) body.index2-page .vision-card__text,
html:not([data-theme="dark"]) body.index2-page .vision-card__footer {
    color: rgba(22, 29, 60, 0.68);
}

html:not([data-theme="dark"]) body.index2-page .vision-card__metric {
    color: rgba(17, 22, 51, 0.92);
}

html:not([data-theme="dark"]) body.index2-page .vision-card__action {
    border: 1px solid rgba(124, 142, 255, 0.3);
    background: rgba(237, 242, 255, 0.92);
    color: rgba(17, 22, 51, 0.92);
    box-shadow: 0 18px 44px rgba(140, 158, 255, 0.18);
}

html:not([data-theme="dark"]) body.index2-page .vision-card__action:hover {
    box-shadow: 0 24px 54px rgba(140, 158, 255, 0.2);
    background: rgba(222, 231, 255, 0.94);
}

/* ========== Light Mode：console-primary 容器樣式 (2025-10-17) ========== */
html:not([data-theme="dark"]) body.index2-page .console-primary {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(142, 160, 255, 0.22);
    box-shadow: 0 28px 70px rgba(138, 156, 255, 0.15);
}

html:not([data-theme="dark"]) body.index2-page .console-primary::after {
    opacity: 0.4;
}

html:not([data-theme="dark"]) body.index2-page .console-surface {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(142, 160, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 40px 120px rgba(135, 150, 255, 0.16);
}

/* 移除 Light Mode 右側背景光效 - 2025-10-13 */
/*html:not([data-theme="dark"]) body.index2-page .console-surface::before {
    background: radial-gradient(circle at 20% 18%, rgba(142, 168, 255, 0.25), transparent 58%),
                radial-gradient(circle at 82% 72%, rgba(137, 229, 220, 0.2), transparent 60%);
    opacity: 0.75;
}

html:not([data-theme="dark"]) body.index2-page .console-surface::after {
    background: linear-gradient(135deg, rgba(160, 182, 255, 0.22), transparent 55%);
    opacity: 0.55;
}*/

html:not([data-theme="dark"]) body.index2-page .console-surface__body {
    border-color: rgba(142, 160, 255, 0.22);
    background: rgba(244, 247, 255, 0.92);
}

html:not([data-theme="dark"]) body.index2-page .console-surface__footnote {
    background: rgba(230, 239, 255, 0.88);
    border: 1px solid rgba(130, 148, 255, 0.2);
    color: var(--index2-text-secondary);
}

html:not([data-theme="dark"]) body.index2-page .surface-cta {
    border: 1px solid rgba(124, 142, 255, 0.3);
    background: rgba(237, 242, 255, 0.92);
    color: var(--index2-text-primary);
    box-shadow: 0 18px 44px rgba(140, 158, 255, 0.16);
}

html:not([data-theme="dark"]) body.index2-page .surface-cta:hover {
    box-shadow: 0 26px 60px rgba(138, 156, 255, 0.18);
}


html:not([data-theme="dark"]) body.index2-page,
html:not([data-theme="dark"]) body.index2-page h1,
html:not([data-theme="dark"]) body.index2-page h2,
html:not([data-theme="dark"]) body.index2-page h3,
html:not([data-theme="dark"]) body.index2-page h4,
html:not([data-theme="dark"]) body.index2-page h5,
html:not([data-theme="dark"]) body.index2-page h6,
html:not([data-theme="dark"]) body.index2-page p,
html:not([data-theme="dark"]) body.index2-page li,
html:not([data-theme="dark"]) body.index2-page span,
html:not([data-theme="dark"]) body.index2-page label,
html:not([data-theme="dark"]) body.index2-page button,
html:not([data-theme="dark"]) body.index2-page a {
    color: var(--index2-text-primary);
}

html:not([data-theme="dark"]) body.index2-page .intro-subtitle,
html:not([data-theme="dark"]) body.index2-page .metric-desc {
    color: var(--index2-text-secondary);
}

html:not([data-theme="dark"]) body.index2-page .status-desc,
html:not([data-theme="dark"]) body.index2-page .menu-desc,
html:not([data-theme="dark"]) body.index2-page .theme-toggle-btn .toggle-text span {
    color: var(--index2-text-muted);
}

@media (max-width: 1280px) {
    .index2-shell {
        width: min(94vw, 1240px);
    }
}

@media (max-width: 1080px) {
    .index2-vision,
    .index2-console {
        padding: 32px;
    }

    .console-body {
        grid-template-columns: 1fr;
    }

    .console-primary {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .index2-vision {
        padding: 28px;
    }

    .vision-title {
        font-size: clamp(2.05rem, 4.5vw, 2.7rem);
    }

    .vision-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 640px) {
    .index2-root {
        padding: 20px 0 40px; /* RWD 优化：减少顶部间距 */
    }

    .index2-shell {
        width: calc(100vw - 36px);
    }

    .index2-vision,
    .index2-console {
        padding: 24px;
        border-radius: 28px;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .console-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .console-pills {
        width: 100%;
    }

    .console-surface {
        min-height: 460px;
    }
}

/* ==================== Mobile Responsive Fixes (< 768px) ==================== */
/* 修復：當側邊欄隱藏時，main-content 需要填滿全寬 - 2025-10-17 */
@media (max-width: 768px) {
    /* 🔴 CRITICAL FIX: 移除 main-content 的側邊欄間距，讓內容填滿全寬 */
    html body.index2-page .main-content {
        margin-left: 0;
        width: 100%;
        padding: 0;
    }

    /* 統一根容器 padding - 確保與 nav-actions 有適當間距 */
    .index2-root {
        padding: 20px 0 40px; /* RWD 优化：减少顶部间距 */
        min-height: calc(100vh + 80px); /* 修復滑動彈回：確保內容高度足夠 */
        padding-bottom: 120px; /* 修復滑動彈回：增加底部間距 */
    }

    /* Shell 調整為全寬 */
    html body.index2-page .index2-shell {
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
    }

    /* Vision 和 Console 間距縮小 */
    .index2-content {
        gap: 24px;
    }

    /* Vision 標題縮小 - 使用 clamp 動態縮放 */
    .vision-title {
        font-size: clamp(1.8rem, 5vw, 2.3rem);
    }

    .vision-lead {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Console 標題縮小 */
    .console-title {
        font-size: 1.6rem;
    }

    /* Console Pills 縮小 */
    .console-pill {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    /* 觸控目標最小化為 44px (Apple Human Interface Guidelines) */
    .vision-card__action,
    .surface-cta {
        min-height: 44px;
        padding: 12px 18px;
    }

    /* ========== 修復：Prompt 對齊問題 (2025-10-17) ========== */
    /* 確保 Console 的 padding 完全對稱，避免 prompt 往右偏 */
    html body.index2-page .index2-console {
        padding: 16px;
    }

    /* 縮小 Console Surface 的 padding，與外層保持一致 */
    html body.index2-page .console-surface {
        padding: 16px;
    }

    /* ========== Content First: 隱藏 Vision Deck (2025-10-17) ========== */
    /* 手機版直接顯示核心功能，遵循 Apple 的 Content First 原則 */
    html body.index2-page .index2-vision {
        display: none;
    }

    /* 移除 Vision 和 Console 之間的 gap（因為 Vision 已隱藏） */
    html body.index2-page .index2-content {
        gap: 0;
    }

    /* Console 成為首屏主角，移除上方間距 */
    html body.index2-page .index2-console {
        margin-top: 0;
        padding-bottom: 100px; /* 修復滑動彈回：為 console 添加底部間距 */
    }

    /* ========== RWD：console-primary 手機版適配 (2025-10-17) ========== */
    html body.index2-page .console-primary {
        padding: 16px;
        border-radius: 20px;
    }

    /* ========== 修復：RWD 模式下侧边栏历史对话显示问题 (2025-10-17) ========== */
    /* RWD 模式：侧边栏打开时，强制显示历史对话（覆盖 collapsed 状态） */
    /* 增加选择器优先级以确保覆盖 .sidebar.collapsed .chat-history */
    html body .sidebar.user-logged-in.open .chat-history {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* RWD 模式：侧边栏打开时，强制显示历史对话文字（覆盖 collapsed 状态） */
    html body .sidebar.user-logged-in.open .history-text,
    html body .sidebar.user-logged-in.open .history-time {
        display: block;
    }

    /* ========== 移动端性能优化：优化 backdrop-filter (2025-10-31) ========== */
    /* 解决滚动卡顿问题：减少 backdrop-filter 的使用和强度 */

    /* 优化主要区域的 backdrop-filter */
    html body.index2-page .index2-vision,
    html body.index2-page .index2-console,
    html body.index2-page .console-primary {
        backdrop-filter: blur(10px); /* 从 26-28px 降到 10px */
        -webkit-backdrop-filter: blur(10px);
    }

    /* 移除嵌套的 backdrop-filter，使用纯色背景替代 */
    html body.index2-page .vision-card,
    html body.index2-page .console-surface,
    html body.index2-page .console-surface__body {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(19, 29, 56, 0.92); /* 使用纯色替代模糊效果 */
        transform: translateZ(0); /* GPU 加速 */
    }

    /* ========== iOS Safari 滚动优化 (2025-10-31) ========== */
    /* 修复滚动到底部时的抖动问题 */

    /* 使用 -webkit-fill-available 替代 100vh，避免 Safari 地址栏导致的高度变化 */
    html body.index2-page .main-content {
        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS Safari 优化 */
    }

    html body.index2-page .index2-root {
        min-height: 100vh;
        min-height: -webkit-fill-available; /* iOS Safari 优化 */
    }

    /* 控制橡皮筋效果，防止抖动 */
    html,
    body {
        overscroll-behavior-y: none; /* 禁用过度滚动，配合内容高度修复 */
        -webkit-overflow-scrolling: touch; /* 启用流畅滚动 */
    }

    /* 确保内容容器不会超出视口 */
    html body.index2-page .index2-shell {
        max-height: none; /* 移除最大高度限制 */
    }

    /* 优化 fixed 元素的性能 */
    html body.index2-page .dynamic-backdrop {
        will-change: auto; /* 移除 will-change，减少重绘 */
    }
}

/* ==================== Extra Small Mobile (< 480px) ==================== */
@media (max-width: 480px) {
    .index2-root {
        padding: 20px 0 40px; /* RWD 优化：减少顶部间距 */
    }

    .index2-shell {
        padding: 0 12px;
    }

    .vision-chip {
        font-size: 0.7rem;
        padding: 7px 14px;
    }

    .vision-title {
        font-size: clamp(1.5rem, 6vw, 1.8rem);
    }

    .vision-lead {
        font-size: 0.88rem;
    }

    .console-title {
        font-size: 1.4rem;
    }

    /* 更緊湊的間距 */
    .index2-vision,
    .index2-console {
        padding: 20px;
    }
}

/* ===== ChatGPT Input Container Override ===== */
/* 修復：讓 chatgpt-input-container 在 console-surface 內自然流動，不覆蓋父容器 */
body.index2-page .console-surface .chatgpt-input-container {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    max-width: 100%;
    width: 100%;
    flex: 1; /* 填滿父容器高度 */
    padding: 0;
    z-index: 1;
    display: flex;
    align-items: center; /* 垂直置中內容 */
}

body.index2-page .console-surface .chatgpt-input-container.centered {
    position: static;
    transform: none;
}

body.index2-page .console-surface .chatgpt-input-container.bottom {
    position: relative;
    transform: none;
    bottom: auto;
}

/* 讓 chatgpt-input-box 也填滿父容器高度和寬度 */
body.index2-page .console-surface .chatgpt-input-box {
    height: 100%;
    width: 100%; /* 強制填滿容器寬度 */
    box-sizing: border-box;
    padding: 0; /* 移除 padding 讓內部元素填滿全寬 */
    position: relative; /* 為絕對定位的子元素提供參考點 */
}

/* 讓 chatgpt-input-card 保持間距 */
body.index2-page .console-surface .chatgpt-input-card {
    padding: 16px; /* 將 padding 從 input-box 移到這裡 */
}

/* 將平台圓形頭像移出 flex 流，絕對定位到 chatgpt-input-container 上方 */
body.index2-page .console-surface .selected-platform-avatars {
    position: absolute;
    right: 0;
    top: -45px;
    width: auto;
    z-index: 10;
}

/* 產品縮圖：在 chatgpt-actions-row 和 chatgpt-input-hints 之間正常流動 */
body.index2-page .console-surface .selected-product-thumbnails {
    position: relative;
    width: auto;
    max-width: 200px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* 社群平台圖示定位到右上角 */
body.index2-page .console-surface .social-connect-icons,
body.index2-page .console-surface .selected-platforms-display,
body.index2-page .console-surface .social-platform-badges {
    position: absolute;
    right: 16px;
    top: 16px;
    width: auto;
    z-index: 10;
}

/* ========== 側邊欄收合時 index2-shell 置中 (2025-10-18) ========== */
/* 當側邊欄收合時，讓 .index2-root 和 .index2-shell 完全置中 */
body.index2-page .app-container.sidebar-collapsed .index2-root {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    padding: 96px 0 90px;  /* 保持與正常狀態一致的頂部距離，避免往上移動 */
}

body.index2-page .app-container.sidebar-collapsed .index2-shell {
    margin: 0 auto;
}
body.index2-page .app-container.sidebar-collapsed .main-content {
    margin-left: 0;
    width: 100%;
}

/* ========== 隱藏 index_2.php 的 Mario 雲朵 (2025-10-18) ========== */
html body.index2-page .mario-clouds {
    display: none;
}

/* ========== Dark Mode 文字顏色修正 (2025-10-21) ========== */
/* 針對 dark mode 加深「思考中...」文字顏色，提升可讀性 */
html[data-theme="dark"] body.index2-page .typing-text {
    color: #9a9a9a;
}