/* @🍮 */
/* ==========================================
   @🍮 虚拟手机系统专属样式结界
   ========================================== */
.vp-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index:300; display:none; align-items:center; justify-content:center; backdrop-filter: blur(5px); }
.vp-modal.visible { display:flex; }
.vp-container { width: 320px; height: 600px; max-height: 85vh; background: #000; border-radius: 35px; border: 10px solid #222; box-shadow: 0 15px 35px rgba(0,0,0,0.4); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.vp-screen { position: absolute; top:0; left:0; width:100%; height:100%; background: #f0f0f0; display:none; flex-direction:column; }
.vp-screen.active { display:flex; animation: vpFadeIn 0.2s ease-out; }
@keyframes vpFadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
.vp-close-area { position: absolute; top: 10px; right: 20px; z-index: 301; color: white; font-size: 30px; cursor: pointer; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.vp-home-bg { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); flex-grow:1; display:flex; flex-direction:column; align-items:center; padding-top: 50px; }
.vp-time { font-size: 48px; color: white; font-weight: 300; margin-bottom: 30px; }
.vp-app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; padding: 0 10px; }
.vp-app-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.vp-app-logo { width: 50px; height: 50px; border-radius: 12px; background: #07c160; color: white; display:flex; align-items:center; justify-content:center; font-size: 20px; font-weight: bold; }
.vp-app-name { font-size: 11px; color: white; }

.vp-header { height: 50px; background: #ededed; display:flex; align-items:center; justify-content:space-between; padding: 0 10px; border-bottom: 1px solid #ddd; flex-shrink:0; }
.vp-back { font-size: 24px; color: #333; cursor:pointer; background:none; border:none; padding:0 10px; }
.vp-title { font-size: 16px; font-weight: 600; color: #333; }
.vp-regen-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 5px; }

.vp-list-content { flex-grow:1; overflow-y:auto; background:#fff; }
.vp-list-item { display:flex; padding: 12px 15px; border-bottom: 1px solid #f5f5f5; cursor:pointer; align-items:center; gap: 12px; }
.vp-list-item:hover { background: #f9f9f9; }
.vp-list-avatar { width: 45px; height: 45px; border-radius: 8px; object-fit: cover; background: #eee; flex-shrink:0; }
.vp-list-info { flex-grow:1; overflow:hidden; display:flex; flex-direction:column; gap:4px; }
.vp-list-name { font-size: 15px; color: #333; font-weight: 500; display:flex; align-items:center; }
.vp-list-msg { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vp-chat-content { flex-grow:1; overflow-y:auto; background:#f5f5f5; padding: 15px 10px; display:flex; flex-direction:column; gap: 15px; }
.vp-chat-bubble { display:flex; max-width: 85%; }
.vp-chat-bubble.other { align-self: flex-start; flex-direction: row; }
.vp-chat-bubble.self { align-self: flex-end; flex-direction: row-reverse; }
.vp-chat-avatar { width: 35px; height: 35px; border-radius: 6px; object-fit: cover; background: #eee; flex-shrink: 0; }
.vp-chat-text { padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.vp-chat-bubble.other .vp-chat-text { background: #fff; color: #333; margin-left: 10px; border: 1px solid #ebebeb; }
.vp-chat-bubble.self .vp-chat-text { background: #95ec69; color: #333; margin-right: 10px; }

.vp-browser-search-bar { padding: 10px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink:0; }
.vp-browser-search-box { background: #f0f0f0; border-radius: 20px; padding: 8px 15px; color: #888; font-size: 13px; text-align: center; }
.vp-browser-item { display:flex; flex-direction:column; padding: 12px 15px; border-bottom: 1px solid #f5f5f5; cursor:pointer; gap: 4px; }
.vp-browser-item:hover { background: #f9f9f9; }
.vp-browser-item-title { font-size: 15px; color: #333; font-weight: 500; }
.vp-browser-item-url { font-size: 11px; color: #1e88e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-browser-content-area { flex-grow:1; overflow-y:auto; background:#fff; padding: 15px; display:flex; flex-direction:column; gap: 10px; }
.vp-browser-page-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 5px; }
.vp-browser-page-body { font-size: 14px; color: #444; line-height: 1.6; word-wrap: break-word; }

img.vp-app-logo { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; background: transparent; border: none; padding:0; display:block; }
.vp-browser-page-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 12px; line-height: 1.4; }
.vp-browser-page-body { font-size: 14px; color: #444; line-height: 1.7; word-wrap: break-word; text-align: justify; margin-bottom: 20px; }
.vp-browser-page-body p { margin-bottom: 10px; }
.vp-browser-divider { height: 1px; background: #eee; margin: 20px -15px 15px -15px; }
.vp-browser-comments-title { font-size: 15px; font-weight: bold; color: #333; margin-bottom: 15px; border-left: 3px solid var(--primary-color); padding-left: 8px; }
.vp-comment-item { display: flex; gap: 10px; margin-bottom: 18px; }
.vp-comment-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eee; flex-shrink: 0; }
.vp-comment-main { flex-grow: 1; border-bottom: 1px solid #f9f9f9; padding-bottom: 15px; }
.vp-comment-item:last-child .vp-comment-main { border-bottom: none; }
.vp-comment-name { font-size: 13px; color: #1e88e5; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.vp-comment-op-tag { font-size: 10px; color: white; background: var(--primary-color); padding: 1px 4px; border-radius: 4px; margin-left: 5px; font-weight: normal; }
.vp-comment-text { font-size: 14px; color: #333; margin-top: 5px; line-height: 1.5; word-wrap: break-word; }
.vp-comment-actions { font-size: 11px; color: #aaa; display: flex; gap: 15px; margin-top: 8px; align-items: center; }
.vp-comment-likes { display: flex; align-items: center; gap: 4px; color: #888; }
.vp-comment-reply-box { background: #f5f5f5; padding: 10px; border-radius: 6px; margin-top: 10px; }
.vp-reply-item { font-size: 13px; color: #444; margin-bottom: 6px; line-height: 1.5; }
.vp-reply-item:last-child { margin-bottom: 0; }

/* @🍮 虚拟手机 - 行程系统 */
.vp-schedule-content-area { flex-grow:1; overflow-y:auto; background:#f9f9f9; padding: 20px 15px; }
.vp-schedule-item { display: flex; align-items: stretch; margin-bottom: 0; }
.vp-schedule-left { width: 55px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.vp-schedule-time { font-size: 13px; font-weight: bold; color: var(--primary-color); margin-bottom: 5px; }
.vp-schedule-node { width: 12px; height: 12px; border-radius: 50%; background: var(--primary-color); border: 3px solid #ffe4ef; z-index: 2; box-sizing: content-box;}
.vp-schedule-line { width: 2px; background: #eee; flex-grow: 1; margin-top: -2px; margin-bottom: -2px; }
.vp-schedule-item:last-child .vp-schedule-line { display: none; }
.vp-schedule-right { flex-grow: 1; padding-left: 10px; padding-bottom: 25px; }
.vp-schedule-card { background: #fff; border-radius: 12px; padding: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.vp-schedule-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 8px; }
.vp-schedule-desc { font-size: 13px; color: #666; line-height: 1.6; word-wrap: break-word; }
body.global-dark-mode .vp-schedule-content-area { background: #1a1a1a; }
body.global-dark-mode .vp-schedule-line { background: #333; }
body.global-dark-mode .vp-schedule-node { border-color: #333; background: #555; }
body.global-dark-mode .vp-schedule-card { background: #2a2a2a; color: #e0e0e0; border: 1px solid #333; box-shadow: none; }
body.global-dark-mode .vp-schedule-title { color: #e0e0e0; }
body.global-dark-mode .vp-schedule-desc { color: #aaa; }


/* @🍮 虚拟手机 - 购物 APP 专属样式 */
.vp-shopping-content-area { flex-grow:1; overflow-y:auto; background:#f5f5f5; padding: 10px; padding-bottom: 60px; position:relative; }
.vp-shopping-tab-bar { position:absolute; bottom:0; left:0; width:100%; height:50px; background:#fff; border-top:1px solid #eee; display:flex; z-index:5; }
.vp-shopping-tab { flex:1; display:flex; align-items:center; justify-content:center; font-size:14px; color:#888; font-weight:500; cursor:pointer; transition:color 0.2s; }
.vp-shopping-tab.active { color:var(--primary-color); font-weight:bold; }

/* 商品列表双列网格 */
.vp-shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vp-shop-item { background:#fff; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.vp-shop-item-img { width:100%; aspect-ratio:1/1; background:#eee; object-fit:cover; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:12px; overflow-y:auto; padding:8px; box-sizing:border-box; }
.vp-shop-item-img::-webkit-scrollbar { display:none; }
.vp-shop-item-info { padding:8px; display:flex; flex-direction:column; gap:4px; }
.vp-shop-item-title { font-size:12px; color:#333; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vp-shop-item-price { font-size:15px; color:#ff4d4f; font-weight:bold; }
.vp-shop-item-status { font-size:10px; color:#aaa; }

/* 购物车/购买 列表单列 */
.vp-shop-list { display:flex; flex-direction:column; gap:10px; }
.vp-shop-list-item { background:#fff; border-radius:10px; padding:10px; display:flex; gap:10px; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.vp-shop-list-img { width:80px; height:80px; border-radius:8px; background:#eee; object-fit:cover; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:11px; overflow-y:auto; padding:6px; box-sizing:border-box; }
.vp-shop-list-img::-webkit-scrollbar { display:none; }
.vp-shop-list-info { flex-grow:1; display:flex; flex-direction:column; justify-content:space-between; }
.vp-shop-list-title { font-size:13px; color:#333; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vp-shop-list-bottom { display:flex; justify-content:space-between; align-items:flex-end; }
.vp-shop-list-price { font-size:16px; color:#ff4d4f; font-weight:bold; }
.vp-shop-list-status { font-size:11px; color:#fff; background:var(--primary-color); padding:2px 6px; border-radius:4px; }

/* 个人主页 "我" */
.vp-shop-me-header { display:flex; align-items:center; gap:15px; padding:15px; background:#fff; border-radius:10px; margin-bottom:15px; }
.vp-shop-me-avatar { width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid #ffe4ef; }
.vp-shop-me-info { flex-grow:1; }
.vp-shop-me-name { font-size:16px; font-weight:bold; color:#333; margin-bottom:4px; }
.vp-shop-me-addr { font-size:11px; color:#888; line-height:1.4; }

.vp-shop-me-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; background:#fff; padding:15px; border-radius:10px; margin-bottom:15px; }
.vp-shop-me-btn { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.vp-shop-me-btn-icon { width:28px; height:28px; border-radius:50%; background:#f5f5f5; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--primary-color); }
.vp-shop-me-btn-text { font-size:11px; color:#555; text-align:center; }

.vp-shop-me-list { background:#fff; border-radius:10px; overflow:hidden; }
.vp-shop-me-list-item { padding:12px 15px; border-bottom:1px solid #f9f9f9; font-size:13px; color:#333; display:flex; justify-content:space-between; cursor:pointer; }
.vp-shop-me-list-item:active { background:#f5f5f5; }
.vp-shop-me-list-item::after { content:'›'; color:#ccc; font-size:16px; }

/* 详情卡片 (心得/物流/评价) */
.vp-shop-detail-card { background:#fff; padding:15px; border-radius:12px; margin-bottom:15px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.vp-shop-thought-text { font-size:14px; color:#444; line-height:1.6; word-wrap:break-word; }

.vp-logistics-timeline { display:flex; flex-direction:column; padding-left:10px; margin-top:10px; }
.vp-logistics-item { display:flex; position:relative; padding-bottom:20px; }
.vp-logistics-item::before { content:''; position:absolute; left:-19px; top:4px; width:10px; height:10px; border-radius:50%; background:#ccc; z-index:2; border:2px solid #fff; }
.vp-logistics-item::after { content:''; position:absolute; left:-15px; top:10px; width:2px; height:100%; background:#eee; z-index:1; }
.vp-logistics-item:last-child::after { display:none; }
.vp-logistics-item.latest::before { background:var(--primary-color); box-shadow:0 0 0 3px #ffe4ef; }
.vp-logistics-item-content { margin-left:10px; display:flex; flex-direction:column; gap:4px; }
.vp-logistics-desc { font-size:13px; color:#333; line-height:1.4; }
.vp-logistics-item.latest .vp-logistics-desc { color:var(--primary-color); font-weight:bold; }
.vp-logistics-time { font-size:11px; color:#999; }

.vp-review-item { border-bottom:1px solid #eee; padding-bottom:15px; margin-bottom:15px; }
.vp-review-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.vp-review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.vp-review-title { font-size:13px; font-weight:bold; color:#333; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vp-review-score { color:#ff9800; font-size:12px; }
.vp-review-content { font-size:13px; color:#555; line-height:1.5; }

.vp-shop-detail-img { width:60px; height:60px; background:#eee; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#ccc; flex-shrink:0; overflow-y:auto; padding:4px; box-sizing:border-box; }
.vp-shop-detail-img::-webkit-scrollbar { display:none; }