[hidden] { display: none !important; }
.interactive-viewport { position: relative; }
.interactive-home, .interactive-shot, .profile-shot { container-type: inline-size; }
.image-hotspot, .hot-menu button { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; }
.image-hotspot:focus-visible, .hot-menu button:focus-visible { outline: 2px solid #007b85; outline-offset: -2px; background: #00bcb922; }
.home-plus { right: 2%; top: 3cqw; width: 13%; height: 10cqw; font-size: 7cqw; color: #111; }
.hot-menu { position: absolute; right: 2%; top: 16cqw; width: 38%; display: flex; flex-direction: column; background: #fff; border: 1px solid #00bf9b; border-radius: 2cqw; box-shadow: 0 8px 24px #0002; z-index: 8; }
.hot-menu button { position: relative; width: 100%; padding: 3.5cqw; text-align: left; font-size: 4cqw; color: #394655; }
.message-home-content { background: #fafbfd; min-height: 200cqw; }
.message-top { height: 16cqw; display: flex; align-items: center; justify-content: center; gap: 7cqw; padding-right: 12cqw; font-size: 3.8cqw; }
.message-top strong { border-bottom: 2px solid #00bf9b; padding-bottom: 1cqw; }
.message-top span { color: #989ba3; }
.mini-app-title { font-size: 3.3cqw; padding: 3cqw; margin: 0; }
.mini-app-row { display: flex; padding: 2cqw; gap: 3cqw; }
.mini-app-row > div { flex: 1; min-width: 0; text-align: center; }
.mini-app-row span { display: block; width: 11cqw; height: 11cqw; margin: auto; border-radius: 2cqw; background: url('./01-message-tab-menu-v12.png') var(--mini-x) -32.4cqw / 100cqw auto; }
.mini-app-row small { display: block; font-size: 2.7cqw; margin: 2cqw 0; }
.message-preview-row { display: flex; align-items: center; gap: 3cqw; padding: 3cqw; min-height: 15cqw; border-bottom: 1px solid #edf0f4; }
.message-preview-row > span { flex: 0 0 12cqw; height: 12cqw; border-radius: 50%; background: url('./01-message-tab-menu-v12.png') -4cqw var(--message-y) / 100cqw auto; }
.message-preview-row strong { font-size: 3.6cqw; }
.prototype-pane { position: relative; width: 100%; min-height: 100%; background: #f0f1f8; container-type: inline-size; overflow: hidden; }
.demo-header { display: flex; align-items: center; height: 16cqw; background: #fff; position: relative; padding: 0 3cqw; box-sizing: border-box; }
.demo-header button { width: 12cqw; height: 12cqw; border: 0; background: transparent; font-size: 10cqw; cursor: pointer; }
.demo-header strong { font-size: 4.7cqw; position: absolute; left: 15%; width: 70%; text-align: center; pointer-events: none; }
.lookup-form { padding: 28cqw 10cqw; display: grid; gap: 12cqw; }
.lookup-form input, .add-friend-id { font: inherit; border: 0; border-radius: 999px; background: #fff; color: #333; box-sizing: border-box; }
.lookup-form input { height: 12cqw; width: 100%; padding: 0 5cqw; font-size: 4cqw; }
.support-link { border: 0; background: transparent; color: #16bcd1; font-size: 3.8cqw; cursor: pointer; }
.primary-action { height: 12cqw; border: 0; border-radius: 999px; background: linear-gradient(90deg,#9ce5df,#32c8e8); color: #fff; font-size: 4.5cqw; cursor: pointer; }
.lookup-status { color: #56617c; font-size: 3.5cqw; margin: 0; }
.interactive-shot .image-back { left: 0; top: 14cqw; width: 17%; height: 11cqw; }
.invite-shot { overflow: hidden; }
.invite-shot > img { margin-top: -8.5%; }
.invite-shot .image-back { top: 4.5cqw; }
.lookup-scenarios { display: flex; gap: 2cqw; padding: 2cqw 3cqw; }
.lookup-scenarios button { flex: 1; padding: 1.5cqw; border: 1px solid #96cdd0; color: #187780; background: #fff; border-radius: 1.5cqw; font-size: 2.8cqw; cursor: pointer; }
.interactive-shot > .lookup-scenarios { position: absolute; top: 44cqw; left: 1%; right: 1%; padding: 0; z-index: 2; }
.lookup-dialog-overlay { position: absolute; inset: 0 0 auto; height: 177.78cqw; background: #0003; display: flex; align-items: center; justify-content: center; z-index: 20; }
.lookup-dialog { width: 74%; background: #f9f9fc; border-radius: 4cqw; overflow: hidden; }
.lookup-dialog p { text-align: center; margin: 0; padding: 6cqw 4cqw; color: #111; font-size: 3.6cqw; }
.lookup-dialog > div { display: flex; border-top: 1px solid #d4d4d8; }
.lookup-dialog button { flex: 1; border: 0; padding: 3cqw; font-size: 4.5cqw; color: #0786ff; background: transparent; cursor: pointer; }
.lookup-dialog button + button { border-left: 1px solid #d4d4d8; }
.add-friend-id { position: absolute; top: 35cqw; left: 16%; width: 66%; height: 8cqw; font-size: 3.1cqw; padding: 0 5cqw; background: #f4f6fb; }
.add-friend-search { top: 34cqw; right: 0; width: 16%; height: 11cqw; }
.add-friend-support { top: 15cqw; right: 0; width: 16%; height: 10cqw; }
.profile-back { left: 0; top: 13.5cqw; width: 32%; height: 12cqw; }
.profile-chat { left: 8.5%; top: 122cqw; width: 83%; height: 11.5cqw; }
.chat-pane { height: 100%; min-height: 177.78cqw; display: flex; flex-direction: column; background: #ececec; }
.chat-identity { background: #fff; margin: 0; padding: 0 0 3cqw; text-align: center; font-size: 3.4cqw; color: #767676; }
.chat-messages { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: flex-end; padding: 5cqw; gap: 3cqw; }
.outgoing-message { margin: 0; max-width: 80%; border-radius: 3cqw; background: #a1e8d4; color: #172d26; font-size: 4cqw; padding: 3cqw; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-compose { display: flex; gap: 2cqw; background: #fafafa; padding: 3cqw; position: sticky; bottom: 0; }
.chat-compose input { min-width: 0; flex: 1; border: 0; padding: 3cqw; border-radius: 2cqw; font-size: 3.8cqw; }
.chat-compose button { border: 0; border-radius: 2cqw; padding: 2cqw 3cqw; color: #fff; background: #0dbda9; cursor: pointer; }
.chat-compose button:disabled { background: #cacaca; cursor: default; }
.scan-pane { background: #050505; min-height: 177.78cqw; color: #fff; }
.scan-pane .demo-header { background: #050505; color: #fff; }
.scan-pane .demo-header button { color: #fff; }
.camera-view { position: relative; min-height: 161cqw; }
.camera-view.is-demo { background: repeating-linear-gradient(45deg,#111 0 24px,#161616 24px 48px); }
.scan-demo-note { color: #bbb; font-size: 3cqw; }
.conversation-search-shot { background: #fff; }
.conversation-search-form { position: absolute; top: 14.9cqw; left: 9%; width: 89%; height: 6cqw; margin: 0; }
.conversation-search-form input { width: 100%; height: 100%; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; background: #fff; font-size: 3.3cqw; color: #111; caret-color: #1689ff; }
.conversation-search-form input::placeholder { color: #c7c7c7; }
.conversation-search-form input:focus { outline: none; box-shadow: none; }
.conversation-search-back { left: 0; top: 0; width: 22%; height: 14cqw; }
.camera-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-guide { position: absolute; top: 28cqw; left: 20%; width: 60%; aspect-ratio: 1; border: 2px solid #1bc1cc; border-radius: 2cqw; box-shadow: 0 0 0 20cqw #0004; }
.camera-feedback { position: relative; padding: 105cqw 6cqw 5cqw; text-align: center; font-size: 3.6cqw; }
.camera-feedback button { padding: 3cqw; background: #12bac1; color: #fff; border: 0; border-radius: 2cqw; cursor: pointer; }
.scan-result { white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.contact-blank { position: absolute; top: var(--filter-top); left: 0; width: 100%; height: calc(100% - var(--filter-top)); background: #fff; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.contact-blank p { font-size: 3.8cqw; color: #949ca8; }
.contact-filters { z-index: 3; }
.contact-filters span { cursor: pointer; }
.contact-filters span:focus-visible { outline: 2px solid #007b85; outline-offset: 2px; }
.contact-hit { left: 0; width: 95%; height: 13cqw; }
.contact-panel { background: #ececec; }
.candidate-controls { display: flex; align-items: center; gap: 10px; }
.candidate-controls select { padding: 6px; border: 1px solid #b8dfe0; border-radius: 6px; }
.scenario-controls { background: #fff; border: 1px solid #dbe6ef; border-radius: 14px; padding: 14px; margin-top: 16px; color: #394655; font-size: 13px; }
.scenario-controls p { font-size: 12px; line-height: 1.7; }
.scenario-button-row { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.scenario-button-row span { min-width: 32px; }
.scenario-controls button { border: 1px solid #b8dfe0; border-radius: 6px; background: #fff; padding: 6px 8px; color: #187780; cursor: pointer; }
.scenario-button-row button { flex: 1; padding: 6px 2px; }
.scenario-controls button[aria-pressed="true"] { background: #00b99c; color: #fff; border-color: #00b99c; }
.scenario-controls:has(+ .screen-frame) { margin-bottom: 16px; }
.gesture-note { font-size: 12px; line-height: 1.7; color: #64748b; }
.interactive-viewport { touch-action: pan-y; }
.interactive-viewport.is-dragging { cursor: grabbing; user-select: none; }
.candidate-layout-module { container-type: inline-size; background: #fff; border: 1px solid #08c394; border-radius: 12px; padding: 12px 0; }
.candidate-layout-row { display: flex; }
.candidate-cell { flex: 1; display: flex; justify-content: center; }
.candidate-crop { width: 22cqw; height: 37cqw; background-image: url('./05-contact-tab-recommend-v5.png'); background-size: 100cqw auto; background-position: var(--crop-x) -26cqw; background-repeat: no-repeat; }
.add-friend-recommendations { position: absolute; top: 49cqw; left: 1.5%; width: 97%; min-height: 173cqw; background: #eef0f5; padding-top: 1cqw; box-sizing: border-box; }
.live-recommendation { container-type: inline-size; background: #fff8fa; border-radius: 2.5cqw; margin: 0 1cqw 3cqw; padding: 3cqw 0; }
.live-recommendation.streamer { background: #fffaf5; }
.recommendation-title { display: flex; align-items: center; gap: 2cqw; padding: 0 3cqw 4cqw; }
.recommendation-title strong { color: #202327; font-size: 3.8cqw; }
.recommendation-title small { color: #ff5587; font-size: 2.6cqw; }
.streamer .recommendation-title small { color: #ff8b25; }
.recommendation-title button { margin-left: auto; border: 0; padding: 0; background: transparent; font-size: 2.8cqw; color: #899096; cursor: pointer; }
.recommendation-title button:disabled { opacity: .6; cursor: default; }
.recommendation-row { display: flex; }
.recommendation-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.recommendation-avatar { width: 20cqw; height: 20cqw; border-radius: 50%; background-image: url('./02-add-friend-recommend-v3.png'); background-size: 100cqw auto; background-position: var(--avatar-x) var(--avatar-y); position: relative; }
.recommendation-avatar.is-live { outline: 1px solid #ff8b25; }
.live-tag { position: absolute; left: 0; top: 0; background: #ff8b25; color: #fff; border-radius: 1.5cqw; padding: .5cqw 1cqw; font-size: 2cqw; }
.native-ticker { top: auto; bottom: -1cqw; left: 0; width: 20cqw; height: 4cqw; font-size: 2.7cqw; }
.recommendation-name { font-size: 3.2cqw; margin: 3cqw 0 1cqw; color: #25262b; white-space: nowrap; }
.recommendation-heat { font-size: 2.8cqw; margin: 0 0 2cqw; }
.recommendation-chat { width: 17cqw; height: 6cqw; background: #fff; color: #ff5587; border: 1px solid #ff5587; border-radius: 999px; font-size: 3cqw; padding: 0; cursor: pointer; }
.streamer .recommendation-chat { border-color: #ff8b25; color: #ff8b25; }
.live-contact-home { container-type: inline-size; background: #fafbfd; min-height: 190cqw; position: relative; }
.contact-top { height: 16cqw; background: #fafbfd; display: flex; gap: 9cqw; align-items: center; justify-content: center; border-bottom: 1px solid #eceff2; position: sticky; top: 0; z-index: 5; }
.contact-top > span { font-size: 3.7cqw; color: #8e9299; }
.contact-top strong { font-size: 4.5cqw; border-bottom: 3px solid #00bf9b; padding-bottom: 1cqw; }
.contact-top button { position: absolute; right: 3%; border: 0; background: transparent; font-size: 7cqw; cursor: pointer; }
.contact-recommendations { padding: 3cqw 1cqw 0; }
.live-contact-filters { position: sticky; top: 16cqw; z-index: 4; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1.5cqw; padding: 2cqw; background: #fafbfd; }
.live-contact-filters button { border: 1px solid #00bf9b; color: #00b994; background: #fff; border-radius: 999px; height: 5.5cqw; padding: 0; font-size: 2.7cqw; cursor: pointer; }
.live-contact-filters .is-active { background: #00bf9b; color: #fff; }
.live-friend-list { padding-bottom: 8cqw; min-height: 174cqw; }
.live-friend-row { display: flex; align-items: center; border-bottom: 1px solid #edf0f4; min-height: 17cqw; padding: 0 3cqw; }
.friend-open { border: 0; background: transparent; padding: 0; display: flex; align-items: center; gap: 3cqw; flex: 1; min-width: 0; text-align: left; font-size: 3.2cqw; color: #282c30; cursor: pointer; }
.friend-open > span:last-child { overflow-wrap: anywhere; }
.friend-avatar { flex: 0 0 10cqw; height: 10cqw; border-radius: 50%; background-image: url('./02-add-friend-recommend-v3.png'); background-size: 50cqw auto; background-position: var(--avatar-x) var(--avatar-y); }
.original-friend-avatar { background-image: url('./05-contact-tab-recommend-v5.png'); background-size: 100cqw auto; background-position: -3.5cqw var(--friend-y); }
.friend-star { border: 0; background: transparent; color: #edaa26; font-size: 5cqw; padding: 1cqw; cursor: pointer; }
.live-empty { text-align: center; margin: 0; padding: 40cqw 4cqw; color: #949ca8; font-size: 4cqw; }
.demo-toast { position: sticky; bottom: 5cqw; width: max-content; max-width: 85%; margin: 0 auto; background: #24282ddd; color: #fff; border-radius: 2cqw; padding: 3cqw; font-size: 3.8cqw; }
.prototype-pane.chat-pane { height: 177.78cqw; min-height: 177.78cqw; }
.chat-messages { min-height: 0; }
.contact-quick-menu { position: absolute; top: 100%; right: 0; width: 38%; z-index: 8; display: flex; flex-direction: column; background: #fff; box-shadow: 0 5px 20px #0002; border: 1px solid #00bf9b; border-radius: 2cqw; }
.contact-quick-menu button { position: static; width: 100%; border: 0; background: transparent; padding: 3cqw 2cqw; text-align: left; font-size: 4cqw; color: #394655; cursor: pointer; }