/* 高清配图与原生产品界面。设备没有非等比 transform，手机始终保持 9:19.5。 */
.hd-photo { width:100%; background-image:var(--photo); background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#eef3fb; overflow:hidden; }
.industry-card .hd-photo { border-radius:7px; }
.client-card .hd-photo { border-radius:0; }
.strength-art .hd-photo { border-radius:12px; }
.comparison-visual, .architecture-visual { background-position:center; }
.hero-visual { width:100%; margin:0; }
.hero-main { gap:30px; }
.product-stage { width:100%; min-width:0; position:relative; padding:43px 7px 104px 0; isolation:isolate; }
.hero-desktop { position:relative; z-index:1; width:100%; }
.hero-phone { position:absolute; z-index:2; right:-13px; bottom:49px; width:clamp(140px,13.2vw,184px); aspect-ratio:9 / 19.5; }
.hero-phone > .ui-phone { position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto; }
.product-stage-label { display:flex; justify-content:center; align-items:center; gap:7px; position:absolute; bottom:15px; left:0; right:0; font-size:13px; color:#8290a7; }
.product-stage-label span { width:5px; height:5px; background:#7ca1ff; border-radius:50%; }
.ui-icon { width:18px; height:18px; flex-shrink:0; display:block; }
.ui-avatar { display:block; width:30px; height:30px; border-radius:7px; flex-shrink:0; background-image:var(--asset-portraits); background-size:300% 200%; background-repeat:no-repeat; background-color:#e8effa; }
.ui-desktop { background:#fff; border:1px solid #dbe3f0; border-radius:12px; overflow:hidden; box-shadow:0 22px 50px #18396216,0 3px 10px #20354c06; font-size:12px; line-height:1.5; text-align:left; color:#243149; }
.ui-window-bar { display:flex; align-items:center; justify-content:space-between; height:31px; padding:0 12px; background:#f5f7fb; border-bottom:1px solid #e5eaf1; font-size:11px; line-height:1; color:#66738b; }
.ui-window-dots { display:flex; gap:5px; }
.ui-window-dots i { width:6px; height:6px; background:#c6d2e6; border-radius:50%; }
.ui-window-dots i:first-child { background:#a7bce8; }
.ui-window-control { color:#a2adc0; font-size:10px; }
.ui-desktop-body { display:grid; grid-template-columns:42px 149px minmax(0,1fr); min-height:390px; }
.ui-rail { display:flex; align-items:center; flex-direction:column; gap:20px; padding:15px 6px; background:#27364d; color:#b3c1d9; }
.ui-logo { width:26px; height:26px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:7px; font:700 19px/1 Arial,sans-serif; margin-bottom:8px; }
.ui-rail-item { padding:5px; border-radius:5px; }
.ui-rail-item.active { color:#79a3ff; background:#ffffff10; }
.rail-bottom { margin-top:auto; }
.ui-conversations { background:#f8faff; border-right:1px solid #e8edf5; padding:15px 8px; }
.ui-list-title { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:650; padding:0 5px 11px; }
.ui-list-title .ui-icon { width:15px; height:15px; }
.ui-search, .ui-phone-search, .mini-search { display:flex; align-items:center; gap:5px; font-size:10px; color:#9aa6b9; background:#edf1f7; border-radius:5px; padding:6px 8px; margin-bottom:13px; }
.ui-search .ui-icon, .ui-phone-search .ui-icon, .mini-search .ui-icon { width:12px; height:12px; }
.ui-conversation { display:flex; align-items:center; gap:7px; position:relative; padding:10px 5px; border-radius:5px; line-height:1.5; overflow:hidden; }
.ui-conversation.is-selected { background:#e9f0ff; }
.ui-conversation > div { overflow:hidden; min-width:0; }
.ui-conversation strong { display:block; font-size:11px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:20px; }
.ui-conversation div > span { display:block; color:#8995aa; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.ui-conversation time { position:absolute; right:6px; top:11px; color:#98a3b5; font-size:8px; }
.ui-conversation .ui-avatar { width:27px; height:27px; border-radius:6px; }
.ui-chat { min-width:0; display:flex; flex-direction:column; background:#fbfcff; }
.ui-chat-title { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:14px 16px; border-bottom:1px solid #edf0f6; }
.ui-chat-title > div { flex:1; }
.ui-chat-title strong { font-size:13px; font-weight:650; display:block; }
.ui-chat-title div > span { display:block; font-size:10px; color:#92a0b5; margin-top:2px; }
.ui-chat-title > .ui-icon { width:16px; height:16px; color:#7b899f; }
.ui-messages { padding:12px 14px 16px; flex:1; display:flex; flex-direction:column; gap:11px; }
.ui-time { text-align:center; font-size:9px; color:#abb6c7; margin-bottom:2px; }
.ui-message { display:flex; gap:7px; align-items:flex-start; padding-right:32px; }
.ui-message.outgoing { justify-content:flex-end; padding:0 0 0 22px; }
.ui-message .ui-avatar { width:25px; height:25px; border-radius:6px; }
.ui-message > div { min-width:0; }
.ui-sender { display:block; font-size:9px; color:#94a0b3; margin-bottom:4px; }
.outgoing .ui-sender { text-align:right; }
.ui-message p { padding:8px 10px; border-radius:0 7px 7px 7px; background:#eef1f6; font-size:11px; line-height:1.6; color:#3e4a61; }
.outgoing p { background:#e3edff; border-radius:7px 0 7px 7px; color:#284c91; }
.ui-file-message { margin:-2px 30px 1px 32px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e3e9f3; border-radius:7px; background:#fff; }
.ui-file-message > .ui-icon { width:25px; height:29px; color:#4c79e7; }
.ui-file-message strong { font-size:10px; font-weight:550; display:block; }
.ui-file-message span { font-size:9px; color:#9aa5b7; }
.ui-compose { min-height:72px; background:#fff; border-top:1px solid #e7edf5; padding:10px 15px 12px; display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.ui-compose > div { width:100%; display:flex; gap:11px; color:#98a4b6; }
.ui-compose > div .ui-icon { width:14px; height:14px; }
.ui-compose > span { font-size:10px; color:#a9b3c3; }
.ui-compose .ui-send-label { color:#fff; background:var(--blue); padding:3px 14px; border-radius:4px; margin-left:auto; }
/* width 决定整台手机的尺寸，height 由 aspect-ratio 计算，防止被内容撑长。 */
.ui-phone { width:100%; height:auto; aspect-ratio:9 / 19.5; border:5px solid #202d42; border-radius:24px; background:#fff; padding:9px 8px 7px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 14px 30px #18314a22; text-align:left; color:#263147; line-height:1.4; }
.ui-phone-status { display:flex; align-items:center; justify-content:space-between; padding:0 5px; font-size:8px; font-weight:600; flex:0 0 14px; }
.ui-phone-status > span { color:#60708a; font-size:7px; }
.ui-phone-title { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; margin:12px 3px 9px; }
.ui-phone-title .ui-icon { width:13px; height:13px; }
.ui-phone-search { padding:5px; margin:0 2px 7px; font-size:8px; }
.ui-phone .ui-conversation { min-height:40px; padding:7px 3px; gap:6px; flex:0 1 43px; }
.ui-phone .ui-conversation strong { font-size:9px; }
.ui-phone .ui-conversation > div > span { font-size:8px; }
.ui-phone .ui-conversation time { font-size:7px; right:3px; top:9px; }
.ui-phone .ui-conversation .ui-avatar { width:24px; height:24px; }
.ui-tabbar { display:flex; justify-content:space-around; border-top:1px solid #edf1f6; padding:9px 0 1px; margin-top:auto; color:#a2adbd; font-size:7px; flex:0 0 35px; }
.ui-tabbar > span { display:flex; flex-direction:column; gap:3px; align-items:center; }
.ui-tabbar .ui-icon { width:14px; height:14px; }
.ui-tabbar > .active { color:var(--blue); }
.native-preview { width:100%; border:1px solid #dfe7f3; border-radius:11px; overflow:hidden; background:#fff; box-shadow:0 10px 24px #27509a0b; font-size:12px; line-height:1.5; color:#354560; text-align:left; }
.native-preview .ui-window-bar { height:25px; padding:0 9px; font-size:8px; }
.native-preview .ui-window-dots i { width:4px; height:4px; }
.native-preview .ui-window-control { font-size:8px; }
.mini-content { padding:13px 12px 11px; }
.mini-header { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:9px; }
.mini-header strong { font-size:13px; font-weight:650; }
.mini-header .ui-icon { width:13px; height:13px; color:#8c9ab0; }
.mini-subtitle { color:#9ba7b9; font-size:9px; margin-top:-4px; margin-bottom:13px; }
.mini-search { font-size:9px; padding:5px 6px; margin:0 0 4px; }
.native-preview .ui-conversation { padding:9px 2px; }
.native-preview .ui-conversation strong { font-size:10px; }
.native-preview .ui-conversation div > span { font-size:8px; }
.native-preview .ui-conversation .ui-avatar { width:26px; height:26px; }
.mini-bottom-icons { display:flex; align-items:center; gap:17px; color:#6488d5; margin-top:13px; padding-top:10px; border-top:1px solid #edf1f7; }
.mini-bottom-icons .ui-icon { width:14px; height:14px; }
.mini-bottom-icons > span { font-size:8px; margin-left:auto; color:#9ca8ba; }
.mini-profile { display:flex; gap:7px; align-items:center; margin-block:13px 10px; }
.mini-profile .ui-avatar { width:25px; height:25px; }
.mini-profile strong { display:block; font-size:10px; font-weight:550; }
.mini-profile div > span { display:block; color:#9aa7b9; font-size:8px; }
.mini-feed-photo { border-radius:6px; }
.mini-post { font-size:10px; color:#77869e; margin-top:10px; }
.mini-message { display:flex; align-items:flex-start; gap:6px; margin-top:12px; padding-right:14px; }
.mini-message .ui-avatar { width:23px; height:23px; }
.mini-message > span { font-size:10px; color:#56667f; padding:7px 8px; background:#f0f3f8; border-radius:0 6px 6px 6px; }
.mini-message.mine { justify-content:flex-end; padding:0 0 0 20px; }
.mini-message.mine > span { background:#e9f0ff; color:#4266ae; border-radius:6px 0 6px 6px; }
.mini-composer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #edf1f7; padding-top:13px; margin-top:17px; font-size:9px; color:#a3afc1; }
.mini-composer .ui-icon { width:13px; height:13px; color:var(--blue); }
.mini-attachment { display:flex; gap:7px; align-items:center; margin-top:12px; padding:9px; border:1px solid #e5ecf8; border-radius:5px; font-size:9px; }
.mini-attachment .ui-icon { width:19px; height:19px; color:#7393d9; }
.mini-ticket { padding:9px; background:#f6f9fe; margin-top:14px; display:flex; align-items:center; gap:5px; font-size:9px; }
.mini-ticket .ui-icon { width:13px; height:13px; }
.mini-ticket > span { margin-left:auto; font-size:8px; color:var(--blue); }
.mini-order { display:flex; gap:9px; align-items:center; border:1px solid #e8eef8; padding:9px; border-radius:7px; margin-block:11px 14px; }
.mini-order > .ui-icon { width:25px; height:25px; color:#527fde; }
.mini-order strong { display:block; font-size:10px; font-weight:600; }
.mini-order div > span { display:block; font-size:8px; color:#9aa7bd; margin-top:3px; }
.voice-people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px 5px; padding-block:9px; }
.voice-person { display:flex; flex-direction:column; align-items:center; gap:5px; }
.voice-person .ui-avatar { width:32px; height:32px; border-radius:50%; }
.voice-person small { font-size:8px; color:#8a99b1; }
.voice-wave { display:flex; justify-content:center; align-items:center; gap:4px; height:41px; margin-top:8px; }
.voice-wave i { width:2px; border-radius:2px; background:#779af0; }
.voice-mic { display:flex; align-items:center; justify-content:center; gap:6px; color:#7f95bc; font-size:8px; margin-top:7px; }
.voice-mic .ui-icon { width:14px; height:14px; }
.dating-photo { position:relative; border-radius:8px; overflow:hidden; aspect-ratio:1 / 1; margin-top:12px; }
.dating-photo > .ui-avatar { width:100%; height:100%; border-radius:0; }
.dating-photo > div { position:absolute; left:0; right:0; bottom:0; padding:7px 10px; background:#ffffffdc; backdrop-filter:blur(8px); }
.dating-photo strong { display:block; font-size:11px; }
.dating-photo div > span { color:#7b8ca6; display:block; font-size:8px; margin-top:3px; }
.dating-actions { display:flex; justify-content:center; gap:20px; margin-top:12px; }
.dating-actions > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#eef4ff; color:#6488d9; }
.dating-actions .ui-icon { width:14px; height:14px; }
.meeting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:12px; }
.meeting-tile { position:relative; aspect-ratio:1 / 1; overflow:hidden; border-radius:5px; }
.meeting-tile > .ui-avatar { width:100%; height:100%; border-radius:0; }
.meeting-tile > span:last-child { position:absolute; bottom:4px; left:4px; color:#fff; background:#21385377; border-radius:3px; padding:1px 4px; font-size:7px; }
.meeting-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:12px; color:#7293cd; }
.meeting-controls > .ui-icon { width:14px; height:14px; }
.meeting-controls > span { display:grid; place-items:center; width:30px; height:21px; border-radius:5px; background:#ec7281; color:#fff; }
.meeting-controls > span .ui-icon { width:12px; height:12px; }
.platform-native { width:100%; position:relative; padding:10px 21px 30px 0; }
.platform-native > .native-preview { width:94%; }
.platform-phone { position:absolute; right:0; bottom:7px; width:53%; background:#fff; border:3px solid #c2cfe2; border-radius:10px; padding:10px 6px; overflow:hidden; }
.platform-phone .mini-header strong { font-size:9px; }
.platform-phone .mini-header .ui-icon { width:10px; height:10px; }
.platform-phone .ui-conversation { padding:6px 2px; gap:3px; }
.platform-phone .ui-conversation .ui-avatar { width:17px; height:17px; border-radius:4px; }
.platform-phone .ui-conversation time { display:none; }
.platform-phone .ui-conversation strong { font-size:7px; padding:0; }
.platform-phone .ui-conversation div > span { font-size:6px; }
.version-art { padding:8px 0; }
.version-art .native-preview { align-self:center; }
.cta-native { width:100%; max-width:215px; max-height:180px; overflow:hidden; border-radius:11px; }
.cta-native .mini-content { padding-top:9px; }
.cta-native .meeting-grid { margin-top:6px; }
.cta-native .mini-subtitle { display:none; }
.cta-native .meeting-tile { aspect-ratio:1.3 / 1; }
@media (min-width:1600px) { .hero-visual { width:100%; margin:0; } }
@media (max-width:1200px) {
  .hero-visual { width:100%; margin:0; }
  .hero-main { gap:17px; }
  .ui-desktop-body { grid-template-columns:35px 119px minmax(0,1fr); }
  .ui-conversations { padding-inline:6px; }
  .ui-conversations .ui-avatar { width:23px; height:23px; }
  .ui-conversations .ui-conversation { gap:5px; }
  .ui-conversations .ui-conversation time { display:none; }
  .ui-conversations .ui-conversation strong { padding:0; font-size:10px; }
  .ui-messages { padding-inline:10px; }
  .ui-message { padding-right:14px; }
  .ui-message.outgoing { padding-left:10px; }
  .ui-message p { padding:7px; font-size:10px; }
  .ui-file-message { margin-right:3px; }
  .ui-phone .ui-conversation { flex-basis:35px; min-height:33px; }
  .ui-phone .ui-conversation:nth-last-of-type(2) { display:none; }
  .version-art { height:auto; max-height:none; width:78%; max-width:250px; overflow:visible; }
  .cta-native { display:none; }
}
@media (max-width:960px) {
  .hero-visual { width:min(700px,100%); margin:0 auto; }
  .product-stage { padding:25px 18px 105px 0; }
  .hero-phone { width:180px; right:2px; }
  .ui-desktop-body { grid-template-columns:42px 157px minmax(0,1fr); }
  .ui-messages { padding-inline:18px; }
  .ui-message p { font-size:12px; }
  .ui-conversations .ui-conversation strong { font-size:11px; }
  .ui-conversations .ui-conversation .ui-avatar { width:27px; height:27px; }
  .ui-phone .ui-conversation { flex-basis:42px; min-height:36px; }
  .ui-phone .ui-conversation:nth-last-of-type(2) { display:flex; }
  .strength-art .hd-photo { max-width:300px; margin-inline:auto; }
  .platform-native { max-width:255px; margin-inline:auto; }
}
@media (max-width:620px) {
  .hero-main { gap:0; }
  .hero-visual { width:100%; margin:0; }
  .product-stage { padding:19px 0 107px; }
  .hero-desktop { width:100%; }
  .hero-phone { width:136px; right:0; bottom:45px; }
  .ui-desktop-body { grid-template-columns:30px minmax(0,1fr); min-height:340px; }
  .ui-conversations { display:none; }
  .ui-rail { padding-inline:3px; gap:16px; }
  .ui-logo { width:22px; height:22px; font-size:16px; }
  .ui-rail .ui-icon { width:15px; height:15px; }
  .ui-messages { padding:11px 13px 17px; gap:11px; }
  .ui-message p { font-size:11px; padding:8px 9px; }
  .ui-message.outgoing { padding-right:22px; }
  .ui-chat-title { padding:12px 14px; }
  .ui-chat-title strong { font-size:12px; }
  .ui-file-message { max-width:190px; }
  .ui-phone { border-width:4px; border-radius:19px; padding:6px; }
  .ui-phone-title { margin:7px 3px; font-size:11px; }
  .ui-phone-status { flex-basis:11px; font-size:7px; }
  .ui-phone-search { margin-bottom:5px; font-size:7px; padding:4px; }
  .ui-phone-search .ui-icon { width:9px; height:9px; }
  .ui-phone .ui-conversation { min-height:31px; flex-basis:32px; padding:5px 2px; gap:4px; }
  .ui-phone .ui-conversation .ui-avatar { width:20px; height:20px; }
  .ui-phone .ui-conversation strong { font-size:8px; padding-right:10px; }
  .ui-phone .ui-conversation div > span { font-size:7px; margin-top:2px; }
  .ui-phone .ui-conversation time { display:none; }
  .ui-phone .ui-conversation:nth-last-of-type(2) { display:none; }
  .ui-tabbar { font-size:6px; padding-top:6px; flex-basis:29px; }
  .ui-tabbar .ui-icon { width:11px; height:11px; }
  .product-stage-label { bottom:15px; font-size:11px; }
  .version-art { width:78%; max-width:235px; height:auto; }
  .version-art .native-preview { max-height:none; }
  .cta-native { display:none; }
}