/* Shared navigation skin: the live player and editor preview use this same component. */
.play-page .modern-tabs,.wx-preview-app .modern-tabs{
  min-height:calc(68px + max(10px,env(safe-area-inset-bottom)));
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:#f8fbff;
  border-top:1px solid #d9e6f5;
}
.play-page .modern-tabs button,.wx-preview-app .modern-tabs button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:4px 0;
  border:0;
  background:transparent!important;
  color:#7894b7;
  font-size:var(--player-text-caption,16px);
}
.play-page .modern-tabs button b,.wx-preview-app .modern-tabs button b{font-size:var(--player-text-caption,16px);font-weight:400}
.play-page .modern-tabs button.active,.wx-preview-app .modern-tabs button.active{color:#3389ed}
.play-page .modern-tab-icon,.wx-preview-app .modern-tab-icon{
  position:relative;
  display:block;
  width:25px;
  height:22px;
  background-color:currentColor;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.play-page .modern-tab-icon:before,.play-page .modern-tab-icon:after,
.wx-preview-app .modern-tab-icon:before,.wx-preview-app .modern-tab-icon:after{content:none}
.play-page .chat-tab-icon,.wx-preview-app .chat-tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-7l-6 4v-4H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm0 2v11h3v2l3-2h8V5z'/%3E%3Ccircle cx='8' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='10.5' r='1'/%3E%3Ccircle cx='16' cy='10.5' r='1'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-7l-6 4v-4H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm0 2v11h3v2l3-2h8V5z'/%3E%3Ccircle cx='8' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='10.5' r='1'/%3E%3Ccircle cx='16' cy='10.5' r='1'/%3E%3C/svg%3E");
}
.play-page .contact-tab-icon,.wx-preview-app .contact-tab-icon{background-color:transparent;-webkit-mask:none;mask:none}
.play-page .contact-tab-icon svg,.wx-preview-app .contact-tab-icon svg{display:block;width:24px;height:24px}
.play-page .discover-tab-icon,.wx-preview-app .discover-tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M2 14.5c5.5-5.3 13.4-8.2 18.5-6.2 1.2.5 1.7 1.2 1.1 2-.7 1-3.2 2.1-6 2.7 2.4-1.2 3.7-2.2 3.4-2.7-.7-1.1-7.3.3-12.2 3.4-2.4 1.5-4 3.1-3.4 3.8.4.6 2.3.3 4.7-.7-3.2 1.8-6.1 2.4-7 1.3-.8-1 .9-3.9 4-6.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Cpath d='M2 14.5c5.5-5.3 13.4-8.2 18.5-6.2 1.2.5 1.7 1.2 1.1 2-.7 1-3.2 2.1-6 2.7 2.4-1.2 3.7-2.2 3.4-2.7-.7-1.1-7.3.3-12.2 3.4-2.4 1.5-4 3.1-3.4 3.8.4.6 2.3.3 4.7-.7-3.2 1.8-6.1 2.4-7 1.3-.8-1 .9-3.9 4-6.4z'/%3E%3C/svg%3E");
}
.play-page .me-tab-icon,.wx-preview-app .me-tab-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 11c5 0 9 2.7 9 6v3H3v-3c0-3.3 4-6 9-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 11c5 0 9 2.7 9 6v3H3v-3c0-3.3 4-6 9-6z'/%3E%3C/svg%3E");
}
.wx-preview-app .modern-tabs[hidden]{display:none!important}

/* Match the editor's static shell to the live player's blue visual theme. */
.wx-preview-app{background:#edf5ff;color:#193553}
.wx-preview-app .wx-shell-header{background:#f8fbff;border-color:#d9e6f5;color:#183452}
.wx-preview-app .wx-shell-header button{color:#3389ed}
.wx-preview-app .wx-shell-header button:hover{background:#edf5ff}
.wx-preview-app .wx-shell-content{background:#edf5ff}
.wx-preview-app .wx-chat-list,.wx-preview-app .wx-contact-list,.wx-preview-app .wx-contact-shortcuts{background:#fff}
.wx-preview-app .wx-chat-row,.wx-preview-app .wx-contact-list button,.wx-preview-app .wx-contact-shortcuts>div{border-color:#e2edf8}
.wx-preview-app .wx-chat-row:hover,.wx-preview-app .wx-contact-list button:hover{background:#f3f8ff}
.wx-preview-app .wx-chat-copy b,.wx-preview-app .wx-contact-shortcuts span,.wx-preview-app .wx-contact-list b{color:#193553}
.wx-preview-app .wx-chat-copy small,.wx-preview-app .wx-chat-row time,.wx-preview-app .wx-section-letter{color:#7588a0}
.wx-preview-app .wx-shell-empty{color:#7588a0}
.wx-preview-app .wx-me-page,.wx-preview-app .wx-discover-page{background:#edf5ff}
.wx-preview-app .wx-me-card,.wx-preview-app .wx-setting-groups section,.wx-preview-app .wx-discover-style-sample{background:#fff;border-color:#deebf8}
.wx-preview-app .wx-me-card b,.wx-preview-app .wx-discover-style-sample{color:#193553}
.wx-preview-app .wx-me-card small{color:#7588a0}
.wx-preview-app .wx-setting-groups{background:#edf5ff}
.wx-preview-app .wx-setting-groups button{background:#fff;border-color:#e2edf8;color:#193553}
.wx-preview-app .wx-setting-groups button:hover{background:#f3f8ff}
.wx-preview-app .wx-setting-groups button em,.wx-preview-app .wx-me-card em{color:#8aa0ba}
.wx-preview-app .wx-setting-groups button i,.wx-preview-app .wx-discover-style-sample i{color:#3389ed}
.wx-preview-app .bubble,.wx-preview-app .msg .bubble{background:#fff;border-color:#e0ebf7;box-shadow:0 2px 8px #234a7210}
.wx-preview-app .self .bubble{background:#dceeff}
.wx-preview-app .wx-shell-composer{background:#f8fbff;border-color:#d9e6f5}
.wx-preview-app .wx-shell-composer input{background:#f2f7ff;border-color:#dce8f6;color:#193553}
.wx-preview-app .wx-shell-composer .wx-composer-voice{border-color:#3389ed;color:#3389ed}
.wx-preview-app .wx-shell-composer .wx-composer-send.has-text{background:#3389ed;color:#fff}