/**
 * evobot index2 — newsec03 微信演示区 + 右侧场景菜单
 * 样式独立维护，资源使用 ../images-new/（相对本 CSS 文件）
 * 作用域：.section-newsec03，避免与全站其它区块类名冲突
 */

/* ----- 分栏与右侧菜单（底层整段背景图） -----
 * 须用 .section-newsec03.section-bg-img，否则 index2 里 .section-bg-img 的
 * background-position:center（垂直居中）会盖掉本段的 center top，顶上像有一条缝。
 */
.section-newsec03.section-bg-img {
    height: auto;
    min-height: 1044px;
    background-color: #040301;
    background-image: url('../images-new/newsec03.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 2632px 1044px;
    /*
     * 微信壳整体缩放：只改这个无单位数字（像素意图），
     * 会同时作用在占位宽度、占位高度与 transform:scale 上，保持比例一致。
     * 内部布局稿宽恒为 920px；例如 650 ≈ 0.71×稿，720 ≈ 0.78×稿。
     */
    --newsec03-wx-visual-px: 790;
}

.section-newsec03 .newsec03-split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    max-width: 1700px;
    margin: 0 auto;
    /* 与上一板块仍无缝；仅在本板块内为微信区+菜单留出距顶呼吸空间 */
    padding: 194px 20px 48px;
    box-sizing: border-box;
}

.section-newsec03 .newsec03-left .demo-content {
    margin-top: 0;
}

.section-newsec03 .newsec03-right {
    flex: 0 0 309px;
    width: 309px;
    min-height: 401px;
    box-sizing: border-box;
    background-image: url('../images-new/vline.png');
    background-repeat: repeat-y;
    background-position: calc(50% + 15px) top;
    /* vline 资源为 618 宽 @2x，按 1x 显示 */
    background-size: 309px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 0 24px;
    /* 位移 + 整体 0.9；原点在列顶居中，避免缩完后顶对齐跑位 */
    transform: translate(-10px, 10px) scale(0.9);
    transform-origin: top center;
}

.section-newsec03 .newsec03-vmenu-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 父级 scale(0.9)，间距按 /0.9 预补偿；57 相对原先 37 再 +20 */
    gap: calc(49px / 0.9);
    position: relative;
    z-index: 1;
    /* 仅菜单内容上移；vline 在父级 .newsec03-right 上不随子级位移 */
    transform: translateY(-10px);
}

.section-newsec03 .newsec03-vmenu-btn {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}

.section-newsec03 .newsec03-vmenu-btn:focus-visible {
    outline: 2px solid #2AB1F3;
    outline-offset: 2px;
}

.section-newsec03 .newsec03-vmenu-btn img {
    display: block;
    width: calc(309px * 0.9);
    max-width: calc(309px * 0.9);
    height: auto;
    transform-origin: center center;
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.2s ease;
}

@keyframes newsec03-vmenu-pop {
    0% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    40% {
        transform: scale(1.06);
        filter: brightness(1.12) drop-shadow(0 0 14px rgba(42, 177, 243, 0.55));
    }
    75% {
        transform: scale(0.97);
        filter: brightness(1.04) drop-shadow(0 0 6px rgba(42, 177, 243, 0.25));
    }
    100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
}

.section-newsec03 .newsec03-vmenu-btn.newsec03-vmenu-pulse img {
    animation: newsec03-vmenu-pop 0.48s cubic-bezier(0.33, 1.24, 0.64, 1) both;
}

.section-newsec03 .newsec03-vmenu-btn:hover:not(.newsec03-vmenu-pulse) img {
    transform: scale(1.045);
    filter: drop-shadow(0 0 10px rgba(42, 177, 243, 0.38)) brightness(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .section-newsec03 .newsec03-vmenu-btn.newsec03-vmenu-pulse img {
        animation: none;
    }
    .section-newsec03 .newsec03-vmenu-btn img {
        transition: none;
    }
    .section-newsec03 .newsec03-vmenu-btn:hover img {
        transform: none;
        filter: none;
    }
}

/* 微信壳：底图 2760×2881，逻辑框 920×(920×2881/2760)；缩放见上 --newsec03-wx-visual-px */
.section-newsec03 .newsec03-wx-wrap {
    width: calc(var(--newsec03-wx-visual-px) * 1px);
    height: calc(2881 * var(--newsec03-wx-visual-px) / 2760 * 1px);
    margin: 0 auto;
    position: relative;
    flex-shrink: 0;
    transform: translateX(20px);
}

/* ----- 微信 mock（由 product.css 迁移，路径改为 images-new） ----- */
.section-newsec03 .wx-mock {
    position: relative;
    width: 920px;
    height: calc(920 * 2881 / 2760 * 1px);
    margin: 0;
    transform: scale(calc(var(--newsec03-wx-visual-px) / 920));
    transform-origin: top left;
    background-image: url('../images-new/chatwxbg@3x.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --title-center-x: 535px;
    --title-width: 360px;
    /* 标题文字相对标题块左缘右移（改这里即可，勿用子项 margin，易被 flex 居中吃掉观感） */
    --ov-title-text-nudge: 80px;
}

.section-newsec03 .ov {
    position: absolute;
}

.section-newsec03 .ov-avatar-left {
    left: 18px;
    top: 22px;
}

.section-newsec03 .ov-avatar-left img {
    width: 51.6px;
    height: 51.6px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section-newsec03 .ov-avatar-right {
    right: 771px;
    top: 94px;
}

.section-newsec03 .ov-avatar-right img {
    width: 54px;
    height: 54px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.section-newsec03 .ov-title {
    top: 24px;
    left: calc(var(--title-center-x) - var(--title-width) / 2 - 50px);
    max-width: calc(var(--title-width) + 90px + var(--ov-title-text-nudge));
    width: max-content;
    transform: none;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: var(--ov-title-text-nudge);
    box-sizing: border-box;
    pointer-events: none;
}

.section-newsec03 .ov-title-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-newsec03 .ov-title .ov-title-qwei {
    display: block;
    /* @3x 123px：先 /3 再减半 → /6 */
    width: calc(123px / 6);
    height: auto;
    flex-shrink: 0;
}

.section-newsec03 .ov-listitem {
    left: 160px;
    top: 102px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.section-newsec03 .ov-listitem-subtext {
    left: 160px;
    top: 124px;
    font-size: 12px;
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}

.section-newsec03 .wx-mock .three-dot-hotspot {
    position: absolute;
    top: 18px;
    right: 32px;
    width: 50px;
    height: 50px;
    border: none;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.section-newsec03 .wx-mock .member-popover {
    position: absolute;
    top: 52px;
    right: 16px;
    width: 230px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px;
    z-index: 10;
}

.section-newsec03 .wx-mock .member-popover.hidden {
    display: none;
}

.section-newsec03 .wx-mock .member-popover .member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    cursor: pointer;
}

.section-newsec03 .wx-mock .member-popover .member-item:hover {
    background: rgba(42, 177, 243, 0.08);
}

.section-newsec03 .wx-mock .member-popover .member-item img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

.section-newsec03 .wx-mock .member-popover .member-item .name {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.section-newsec03 .wx-mock .member-popover .member-item .role {
    font-size: 12px;
    color: #666;
}

.section-newsec03 .chat-container {
    position: absolute;
    top: 76px;
    bottom: 22px;
    left: 364px;
    width: 550px;
    height: auto;
    /* 左右略收（比 24px 稍松一点） */
    padding: 14px 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* MD 注入：按阶段分块（右侧菜单滚动定位） */
.section-newsec03 .wx-chat-stage {
    padding-bottom: 8px;
}

.section-newsec03 .wx-chat-end-spacer {
    pointer-events: none;
}

.section-newsec03 .wx-callout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 18px 0;
}

.section-newsec03 .wx-callout-inner {
    width: 100%;
    border: 2px solid #e53935;
    border-radius: 10px;
    padding: 10px 8px;
    background: rgba(229, 57, 53, 0.06);
    box-sizing: border-box;
}

.section-newsec03 .wx-callout-caption {
    font-size: 17px;
    line-height: 1.5;
    color: #b71c1c;
    padding: 0 2px;
    margin-bottom: 2px;
}

.section-newsec03 .bubble .wx-inline-img {
    display: block;
    max-width: 220px;
    height: auto;
    border-radius: 6px;
    margin-top: 8px;
}

.section-newsec03 .msg-right .bubble .wx-inline-img {
    margin-top: 8px;
}

.section-newsec03 .chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    max-width: calc(85% - 12px);
}

.section-newsec03 .chat-msg .avatar {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    flex: 0 0 38px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section-newsec03 .msg-left .avatar {
    margin-right: 2px;
}

.section-newsec03 .msg-right .avatar {
    margin-left: 2px;
}

.section-newsec03 .msg-time {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin: 15px 0;
}

.section-newsec03 .msg-left {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-left: 6px;
}

.section-newsec03 .msg-left .bubble {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
    font-size: 18px;
    color: #333;
    line-height: 1.5;
}

.section-newsec03 .msg-left .bubble::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 10px;
    border-top: 8px solid transparent;
    border-right: 10px solid #fff;
    border-bottom: 8px solid transparent;
}

.section-newsec03 .msg-right {
    margin-left: auto;
    margin-right: 6px;
    justify-content: flex-end;
}

.section-newsec03 .msg-right .bubble {
    background-color: #95EC69;
    border-radius: 8px;
    padding: 12px 15px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
    font-size: 18px;
    color: #333;
    line-height: 1.5;
}

.section-newsec03 .msg-right .bubble::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 10px;
    border-top: 8px solid transparent;
    border-left: 10px solid #95EC69;
    border-bottom: 8px solid transparent;
}

/* index2 为 PC 主布局；微信区已用 newsec03-wx-wrap 固定占位 + scale，不再单独做窄屏 padding-bottom 比例 */

/* ----- 气泡内 Markdown / 卡片（后续接流式回复时可沿用） ----- */
.section-newsec03 .bubble.thinking {
    color: #888;
    font-style: italic;
}

.section-newsec03 .msg-left .bubble ul,
.section-newsec03 .msg-left .bubble ol {
    padding-left: 5px;
    margin: 8px 12px 8px 12px;
}

.section-newsec03 .msg-left .bubble li {
    margin: 4px 0;
}

.section-newsec03 .msg-left .bubble table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.section-newsec03 .msg-left .bubble table th,
.section-newsec03 .msg-left .bubble table td {
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    text-align: left;
}

.section-newsec03 .msg-left .bubble blockquote {
    margin: 8px 0;
    padding-left: 10px;
    border-left: 3px solid #e5e7eb;
    color: #555;
}

.section-newsec03 .msg-left .bubble code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 90%;
}

.section-newsec03 .msg-left .bubble pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 12px 14px;
    border-radius: 8px;
    overflow: auto;
    line-height: 1.6;
    font-size: 13px;
    margin: 10px 0;
}

.section-newsec03 .msg-left .bubble pre code {
    background: transparent;
    padding: 0;
}

.section-newsec03 .msg-left .bubble p {
    margin: 8px 0;
}

.section-newsec03 .msg-left .bubble hr,
.section-newsec03 .msg-right .bubble hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 12px 0;
    height: 0;
}

/* 整图假小程序卡片（@miniprogram-image），便于用设计稿截图替换 */
.section-newsec03 .bubble .wx-miniprogram-fake {
    display: block;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    line-height: 0;
}

.section-newsec03 .bubble .wx-miniprogram-fake img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.section-newsec03 .bubble .wx-card {
    display: flex;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
}

.section-newsec03 .bubble .wx-card .thumb {
    width: 88px;
    height: 88px;
    object-fit: cover;
    flex: 0 0 88px;
    margin: 10px 0 10px 10px;
    background: #f3f4f6;
}

.section-newsec03 .bubble .wx-card .meta {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.section-newsec03 .bubble .wx-card .meta .title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.section-newsec03 .bubble .wx-card .meta .summary {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

.section-newsec03 .bubble .wx-card .meta .source {
    font-size: 12px;
    color: #0b7bb9;
}

.section-newsec03 .suggested-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.section-newsec03 .msg-left .suggested-list {
    flex-basis: 100%;
    margin-left: 48px;
}

.section-newsec03 .suggested-btn {
    border: 1px solid #d0e7f7;
    background: #f3fbff;
    color: #0b7bb9;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

.section-newsec03 .suggested-btn:hover {
    background: #e8f6ff;
    border-color: #b8def3;
}

.section-newsec03 .suggested-global {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.section-newsec03 .suggested-global .label {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.section-newsec03 .suggested-inline-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.section-newsec03 .suggested-inline-list::-webkit-scrollbar {
    display: none;
}

.section-newsec03 .suggested-inline-list.dragging {
    cursor: grabbing;
    user-select: none;
}

.section-newsec03 .suggested-chip {
    border: 1px solid #d0e7f7;
    background: #f3fbff;
    color: #0b7bb9;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex: 0 0 auto;
    user-select: none;
}

.section-newsec03 .suggested-chip:hover {
    background: #e8f6ff;
    border-color: #b8def3;
}

.section-newsec03 .suggested-fixed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 38px;
    height: 44px;
}

.section-newsec03 .suggested-fixed .label {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}

@keyframes newsec03-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-newsec03 .chat-msg.anim-in {
    animation: newsec03-fadeInUp 220ms ease-out both;
}

/* @ 提及下拉（若后续接入输入联想） */
.section-newsec03 .mention-popover {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px;
    width: 190px;
    max-height: 240px;
    overflow-y: auto;
}

.section-newsec03 .mention-popover.hidden {
    display: none;
}

.section-newsec03 .mention-popover .mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.section-newsec03 .mention-popover .mention-item:hover,
.section-newsec03 .mention-popover .mention-item.active {
    background: rgba(42, 177, 243, 0.08);
}

.section-newsec03 .mention-popover .mention-item img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

.section-newsec03 .mention-popover .mention-item .name {
    font-size: 13px;
    color: #333;
    font-weight: 600;
}

.section-newsec03 .mention-popover .mention-item .role {
    font-size: 12px;
    color: #666;
}