@plaso-infi/whiteboard-sdk 0.1.8 → 0.2.0

package/dist/cjs/index.css

@@ -4694,7 +4694,7 @@
   height: 20px;
 }
 .basic_14d8F .iconCon_WJO51 .floatIcon_20utB {
-  color: #d8d8d8;
+  color: #616371;
   width: 20px;
   height: 20px;
   cursor: pointer;
@@ -5039,1225 +5039,1230 @@
   transform: translateY(-6px);
 }
 
-.page-switcher_2kbRL {
-  width: 150px;
+.fontSizeSelect_mZrQe .rightOption_MD7Qa {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
-.page-switcher_2kbRL .arrow_YQx8_ {
-  width: 30px;
-  cursor: pointer;
-  opacity: 0.8;
+.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_ {
+  width: 100%;
+  padding: 0;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.page-switcher_2kbRL .arrow_YQx8_ span {
-  width: 0;
-  height: 0;
-  border-width: 0 6px 6px;
-  border-style: solid;
-  border-color: transparent transparent #050038;
+.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_.up_hkKvj {
+  align-items: flex-end;
+  padding-bottom: 2px;
 }
-.page-switcher_2kbRL .arrow_YQx8_.disabled_1EiYV {
-  opacity: 0.2;
-  cursor: default;
+.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_.down_3R-Xb {
+  align-items: flex-start;
+  padding-top: 2px;
 }
-.page-switcher_2kbRL .arrow_YQx8_.prev_2jL8B {
-  justify-content: flex-end;
-  padding-right: 8px;
+.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_ .icon_2ql7n {
+  width: 10px;
+  height: 10px;
+  font-size: 10px;
+  text-align: center;
+  -webkit-user-select: none;
+          user-select: none;
 }
-.page-switcher_2kbRL .arrow_YQx8_.prev_2jL8B span {
-  transform: rotate(-90deg);
+.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_:hover {
+  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+  background: initial;
 }
-.page-switcher_2kbRL .arrow_YQx8_.next_1b54R {
-  justify-content: flex-start;
-  padding-left: 8px;
+.fontSizeSelect_mZrQe .fontInputContainer_2wcNK {
+  height: 50px;
+  display: flex;
+  align-items: center;
 }
-.page-switcher_2kbRL .arrow_YQx8_.next_1b54R span {
-  transform: rotate(90deg);
+.dropdown_hGFBv {
+  z-index: 10;
 }
-.page-switcher_2kbRL .page_2b4WP {
-  width: 90px;
+.fontSizeViewPhoneContainer_2TUmu {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: space-between;
+  width: 92px;
+}
+.fontSizeViewPhoneContainer_2TUmu .fontSizeViewPhoneContainerText_ic4i9 {
+  flex-shrink: 0;
   font-size: 14px;
-  line-height: 50px;
-  text-align: center;
-  cursor: default;
-  vertical-align: middle;
-  color: #a4a4a4;
-  opacity: 0.8;
+  word-break: keep-all;
 }
-.page-switcher_2kbRL .page_2b4WP .current-page_tr-wQ,
-.page-switcher_2kbRL .page_2b4WP .page-total_BUC8w {
-  width: 35px;
-  padding: 0;
-  margin: 0;
-  height: 20px;
-  line-height: 20px;
-  display: inline-block;
-  border: 0px;
-  text-align: right;
+.disabled_1XQzF {
+  color: #dbdbde;
 }
-.page-switcher_2kbRL .page_2b4WP .current-page_tr-wQ {
-  color: #050038;
-  cursor: pointer;
-  font-weight: 600;
-  text-align: center;
+
+.rich_text_textarea_3xhNM {
+  position: absolute;
+  pointer-events: none;
+  opacity: 0;
+  overflow: hidden;
 }
-.page-switcher_2kbRL .page_2b4WP .page-total_BUC8w {
-  text-align: left;
+.add_anchor_3mHnl {
+  background-color: var(--upime-pane-bg);
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 400px;
+  min-height: 72px;
 }
-.pin-start-page_3-DLn {
+.add_anchor_3mHnl .add_input_n9bTK {
+  width: 296px;
+  min-height: 72px;
+  padding: 16px 0 16px 16px;
   position: relative;
-  color: #050038;
 }
-.pin-start-page_3-DLn .pin_3GJni {
-  font-size: 14px;
+.add_anchor_3mHnl .add_input_n9bTK input {
+  padding-right: 40px;
 }
-.pin-start-page_3-DLn .pinning-page_3oZPa {
-  min-width: 220px;
-  padding: 15px 0px;
+.add_btns_1-y9z {
+  position: absolute;
+  right: 0;
+  top: 0;
+  flex-shrink: 0;
+  display: flex;
+  height: 100%;
+  padding-right: 16px;
 }
-.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt {
-  justify-content: space-between;
-  min-width: 220px;
-  width: 100%;
-  height: 36px;
-  padding: 0 30px;
-  font-size: 13px;
-  cursor: pointer;
+.add_btns_1-y9z .btn_17KQi {
+  margin-top: 26px;
+  margin-bottom: 48px;
+  position: relative;
+  font-size: 14px;
+  color: #2E73E5;
   white-space: nowrap;
+  margin-left: 16px;
+  cursor: pointer;
 }
-.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt .hint_1pdGk {
-  color: #5f5c80;
-  padding-left: 8px;
-}
-.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt.disabled_1EiYV {
-  opacity: 0.2;
-  cursor: default;
-}
-.do-hovers .pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt:hover {
-  background-color: #f5f5f7;
+.add_btns_1-y9z .btn_17KQi.disable_3k8tZ {
+  color: #ABC7F5;
+  pointer-events: none;
 }
-.do-hovers .pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt.disabled_1EiYV:hover {
+.add_btns_1-y9z .btn_17KQi::before {
+  content: "";
   background: transparent;
+  position: absolute;
+  left: -10px;
+  top: -20px;
+  right: -10px;
+  bottom: -20px;
+  z-index: -1;
 }
-.pageExtractor_2hxe0 {
-  min-width: 478px;
-  height: 62px;
+.hover_anchor_2SjZq {
+  background-color: var(--upime-pane-bg);
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  position: absolute;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  padding: 12px 16px;
-  cursor: default;
-  white-space: nowrap;
 }
-.pageExtractor_2hxe0 .radioGroup_ta09k {
+.btn_wrapper_3GpT- {
+  flex-shrink: 0;
+  position: relative;
+  padding: 0 8px;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  min-width: 100px;
-  margin-left: 16px;
-  margin-right: 4px;
-}
-.pageExtractor_2hxe0 .radioGroup_ta09k .extractAllLabel_3ufYq {
-  min-width: 52px;
-  margin-right: 16px;
-}
-.pageExtractor_2hxe0 > input {
-  width: 200px;
-  padding: 6px 0 9px 14px;
-}
-.pageExtractor_2hxe0 > span {
-  line-height: 22px;
-  font-size: 14px;
-}
-.pageExtractor_2hxe0 .extractBtn_3LGZF {
-  height: 38px;
-  font-size: 15px;
-  text-align: center;
-  margin-left: 12px;
 }
-.paginatorRoot_2zLaL {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  height: 36px;
-  pointer-events: none;
+.switch_btn_group_16v5o::before {
+  content: "";
   position: absolute;
+  right: 0;
   top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: #dbdbde;
+}
+.edit_btn_group_24D_T::before {
+  content: "";
+  position: absolute;
   left: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: #dbdbde;
 }
-.paginatorRoot_2zLaL .widget_21_1j {
-  height: 32px;
-  min-width: 124px;
-  display: flex;
-  flex-direction: row;
-  background: rgba(0, 0, 0, 0.6);
+.edit_anchor_3rspJ {
+  background-color: var(--upime-pane-bg);
   border-radius: 4px;
-  pointer-events: auto;
-  padding: 2px;
-  justify-content: space-between;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  position: absolute;
+  padding: 20px 24px 24px;
 }
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ {
-  width: 28px;
-  height: 28px;
-  position: relative;
+.input_group_1HItO {
+  margin-top: 12px;
+  height: 36px;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-items: center;
 }
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ .left_1ojXV {
-  margin-left: 10px;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-right: 6px solid white;
-}
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ .right_x3hfc {
-  margin-left: 12px;
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid white;
-}
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV {
-  pointer-events: none;
+.input_group_1HItO .label_1HvdM {
+  width: 42px;
+  font-size: 14px;
+  height: 22px;
+  line-height: 22px;
+  color: var(--upime-main-text);
 }
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV .left_1ojXV {
-  border-right-color: rgba(255, 255, 255, 0.6);
+.input_group_1HItO .input_1reWF {
+  width: 306px;
+  height: 36px;
+  margin-left: 4px;
+  padding-left: 10px;
+  padding-right: 12px;
+  border-radius: 4px;
+  position: relative;
 }
-.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV .right_x3hfc {
-  border-left-color: rgba(255, 255, 255, 0.6);
+.input_group_1HItO .input_1reWF input {
+  padding-right: 40px;
 }
-.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo {
-  min-width: 64px;
+.edit_btns_2y480 {
+  margin-top: 35px;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 100%;
+  justify-content: flex-end;
 }
-.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo > span {
-  line-height: 28px;
-  height: 28px;
+.edit_btns_2y480 .button_BS8i7 {
+  width: 64px;
+  height: 32px;
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
-  white-space: pre;
-}
-.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo input {
-  width: 28px;
-  height: 28px;
+  line-height: 20px;
   border-radius: 2px;
-  color: white;
-  line-height: 28px;
-  font-size: 14px;
-  text-align: center;
-  background: transparent;
-  border: none;
-  margin-right: 2px;
 }
-.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo input:focus {
-  background: black;
+.edit_btns_2y480 .button_BS8i7:last-child {
+  margin-left: 12px;
 }
-.insertExcelChooseModalBox_1ojyh {
-  width: 480px;
-  height: 346px;
-  border-radius: 12px;
-  padding: 24px;
-  background-color: #fff;
+.mentionWrapper_3cWn1 {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.insertExcelChooseModalBox_1ojyh .titleRow_2LXkd {
-  font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 12px;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k {
-  margin-bottom: 24px;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- {
-  display: inline-block;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .bg_3p6EL {
-  width: 210px;
-  margin-bottom: 12px;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .btn_3isDD {
-  width: 100px;
-  height: 36px;
-  color: #fff;
-  font-size: 14px;
-  background-color: #2e73e5;
-  line-height: 36px;
-  text-align: center;
+  background-color: white;
+  width: 270px;
   border-radius: 4px;
-  margin: auto;
-  cursor: pointer;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .btn_3isDD:hover {
-  opacity: 0.7;
-}
-.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ-.first_3oz8Y {
-  margin-right: 12px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
 }
-.insertExcelChooseModalBox_1ojyh .descRow_1WJuM {
-  color: #616371;
+.mentionWrapper_3cWn1 .allmenberRow_3QlTz {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 38px;
+  padding-left: 16px;
+  cursor: pointer;
   font-size: 14px;
+  line-height: 22px;
 }
-.do-hovers .paginatorRoot_2zLaL .arrow_YQx8_:hover {
-  background: rgba(255, 255, 255, 0.1);
+.mentionWrapper_3cWn1 .allmenberRow_3QlTz.withBorder_3B8M8 {
+  border-bottom: 1px solid var(--upime-btn-bg-hover);
 }
-
-.webviewer_border_2EbXP {
-  position: absolute;
-  background-color: white;
+.mentionWrapper_3cWn1 .allmenberRow_3QlTz.selected_2_g7j {
+  color: var(--upime-active);
 }
-.webviewer_iframe_2xkBo {
-  pointer-events: all;
-  border: none;
-  outline: none;
-  margin: 0;
+.mentionContainer_UWTQf {
+  width: 100%;
+  max-height: 235px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-color: var(--upime-scrollbar-thumb) transparent;
+  scrollbar-width: thin;
 }
-.webviewer_iframe_2xkBo.no_pointer_event_35vfv {
-  pointer-events: none;
+.mentionContainer_UWTQf::-webkit-scrollbar {
+  width: 4px;
 }
-
-.extra_media_2NL2B {
-  position: absolute;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  z-index: 100;
+.mentionContainer_UWTQf::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: transparent;
 }
-.moveResizeArea_ViL91 {
-  position: relative;
-  width: 100%;
-  height: 100%;
+.mentionContainer_UWTQf::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: var(--upime-scrollbar-thumb);
+}
+.mentionContainer_UWTQf .list_AU6sH {
+  padding: 8px 0;
   display: flex;
   flex-direction: column;
 }
-.title_3VFGG {
-  width: 100%;
-  background-color: #F5F6F6;
-  flex-shrink: 0;
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding: 0 7px;
+  width: 100%;
+  height: 40px;
+  padding-left: 16px;
+  cursor: pointer;
 }
-.title_3VFGG .file_icon_35EgE {
-  font-size: 16px;
-  flex-shrink: 0;
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO.selected_2_g7j {
+  color: var(--upime-active);
 }
-.title_3VFGG .close_icon_3s7b0 {
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO.selected_2_g7j .info_2NULQ {
+  color: var(--upime-active) !important;
+}
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .avatar_3Cyd_ {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
   flex-shrink: 0;
-  font-size: 12px;
-  color: #0C1024;
-  cursor: pointer;
 }
-.title_3VFGG .name_2_K4Z {
-  width: 100%;
-  line-height: 14px;
-  font-size: 10px;
-  color: #0C1024;
-  margin-left: 8px;
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO > span {
+  font-size: 14px;
+  line-height: 22px;
+  display: inline-block;
   white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.content_j7Z8k {
-  width: 100%;
-}
-.content_j7Z8k.audio_2NVwZ {
-  background-color: #dee9f5;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
-.content_j7Z8k.video_at_K0 {
-  background-color: black;
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .userName_32xBe {
+  margin-left: 8px;
+  max-width: 68px;
 }
-.content_j7Z8k.video_at_K0 video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .info_2NULQ {
+  margin-left: 12px;
+  color: var(--upime-second-text);
+  max-width: 134px;
 }
-.resize_dom_fuoNI {
+.mentionCard_2VhGv {
   position: absolute;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-}
-.resize_dom_fuoNI.nw {
-  left: -10px;
-  top: -10px;
-  cursor: nw-resize;
+  background-color: white;
+  width: 270px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  padding: 12px;
 }
-.resize_dom_fuoNI.ne {
-  right: -10px;
-  top: -10px;
-  cursor: ne-resize;
+.mentionMask_23Ia7 {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: row;
 }
-.resize_dom_fuoNI.sw {
-  left: -10px;
-  bottom: -10px;
-  cursor: sw-resize;
+.mentionListPhoneWrapper_3nZor {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 20px 20px 0 0;
+  overflow: hidden;
+  background-color: white;
+  box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.05);
+  z-index: 26;
 }
-.resize_dom_fuoNI.se {
-  right: -10px;
-  bottom: -10px;
-  cursor: se-resize;
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv {
+  width: 100%;
+  max-height: 220px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 24px;
 }
-.media_ctrl_QzLfq {
-  position: absolute;
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   width: 100%;
-  bottom: 0;
-  pointer-events: auto;
+  cursor: pointer;
+  margin-bottom: 20px;
 }
-.media_ctrl_QzLfq.video_at_K0 {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO:last-child {
+  margin-bottom: 0;
 }
-.media_ctrl_QzLfq.audio_2NVwZ {
-  background: linear-gradient(to bottom, rgba(27, 37, 100, 0.03), rgba(22, 39, 89, 0.4));
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO.allMentionRow_2gvRf .avatar_3Cyd_ {
+  background-color: transparent;
+  background-color: initial;
 }
-.media_ctrl_QzLfq.fade_9jy4P {
-  opacity: 0;
-  transition: opacity 0.5s;
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO {
+  flex: 1;
+  margin-left: 12px;
+  overflow: hidden;
 }
-.media_ctrl_QzLfq .progress_1wktX {
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO .userName_32xBe {
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO .info_2NULQ {
+  color: var(--upime-second-text);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 4px;
+}
+.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .avatar_3Cyd_ {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob {
+  padding: 8px 12px;
+  height: 52px;
+  background-color: #ffffff;
+  border-top: 1px solid #e6e7e9;
+}
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES {
   width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  background-color: #f5f6f6;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  overflow: hidden;
 }
-.media_ctrl_QzLfq .time_2XeFt {
-  margin-left: 14px;
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .mentionIcon_Ftq9S {
+  color: #0c1024;
+  flex-shrink: 0;
 }
-.media_ctrl_QzLfq .play_btn_25Yr0,
-.media_ctrl_QzLfq .time_2XeFt,
-.media_ctrl_QzLfq .speed_1aDQR {
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .content_1PCvD {
+  position: relative;
+  height: 100%;
+  white-space: nowrap;
+}
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .cursor_2egYz {
+  height: 100%;
+  width: 1px;
+  background-color: #0c1024;
+  animation: blink_3OyGR 1s infinite;
   flex-shrink: 0;
 }
-.top_32dIx {
-  height: 22px;
-  padding: 2px 12px 0 18px;
+.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .fillIn_3Id91 {
+  flex: 1;
+}
+@keyframes blink_3OyGR {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.page-switcher_2kbRL {
+  width: 150px;
+}
+.page-switcher_2kbRL .arrow_YQx8_ {
+  width: 30px;
+  cursor: pointer;
+  opacity: 0.8;
+}
+.page-switcher_2kbRL .arrow_YQx8_ span {
+  width: 0;
+  height: 0;
+  border-width: 0 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent #050038;
+}
+.page-switcher_2kbRL .arrow_YQx8_.disabled_1EiYV {
+  opacity: 0.2;
+  cursor: default;
+}
+.page-switcher_2kbRL .arrow_YQx8_.prev_2jL8B {
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+.page-switcher_2kbRL .arrow_YQx8_.prev_2jL8B span {
+  transform: rotate(-90deg);
+}
+.page-switcher_2kbRL .arrow_YQx8_.next_1b54R {
+  justify-content: flex-start;
+  padding-left: 8px;
+}
+.page-switcher_2kbRL .arrow_YQx8_.next_1b54R span {
+  transform: rotate(90deg);
+}
+.page-switcher_2kbRL .page_2b4WP {
+  width: 90px;
+  font-size: 14px;
+  line-height: 50px;
+  text-align: center;
+  cursor: default;
+  vertical-align: middle;
+  color: #a4a4a4;
+  opacity: 0.8;
+}
+.page-switcher_2kbRL .page_2b4WP .current-page_tr-wQ,
+.page-switcher_2kbRL .page_2b4WP .page-total_BUC8w {
+  width: 35px;
+  padding: 0;
+  margin: 0;
+  height: 20px;
+  line-height: 20px;
+  display: inline-block;
+  border: 0px;
+  text-align: right;
+}
+.page-switcher_2kbRL .page_2b4WP .current-page_tr-wQ {
+  color: #050038;
+  cursor: pointer;
+  font-weight: 600;
+  text-align: center;
+}
+.page-switcher_2kbRL .page_2b4WP .page-total_BUC8w {
+  text-align: left;
+}
+.pin-start-page_3-DLn {
+  position: relative;
+  color: #050038;
+}
+.pin-start-page_3-DLn .pin_3GJni {
+  font-size: 14px;
+}
+.pin-start-page_3-DLn .pinning-page_3oZPa {
+  min-width: 220px;
+  padding: 15px 0px;
+}
+.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt {
+  justify-content: space-between;
+  min-width: 220px;
+  width: 100%;
+  height: 36px;
+  padding: 0 30px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt .hint_1pdGk {
+  color: #5f5c80;
+  padding-left: 8px;
+}
+.pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt.disabled_1EiYV {
+  opacity: 0.2;
+  cursor: default;
+}
+.do-hovers .pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt:hover {
+  background-color: #f5f5f7;
+}
+.do-hovers .pin-start-page_3-DLn .pinning-page_3oZPa .pinning-page-item_3b2Vt.disabled_1EiYV:hover {
+  background: transparent;
+}
+.pageExtractor_2hxe0 {
+  min-width: 478px;
+  height: 62px;
   display: flex;
   flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  cursor: default;
+  white-space: nowrap;
 }
-.bottom_2BM-L {
-  height: 28px;
-  padding: 0 8px 4px 8px;
+.pageExtractor_2hxe0 .radioGroup_ta09k {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  align-items: center;
+  min-width: 100px;
+  margin-left: 16px;
+  margin-right: 4px;
 }
-.bottom_left_1C2-w {
+.pageExtractor_2hxe0 .radioGroup_ta09k .extractAllLabel_3ufYq {
+  min-width: 52px;
+  margin-right: 16px;
+}
+.pageExtractor_2hxe0 > input {
+  width: 200px;
+  padding: 6px 0 9px 14px;
+}
+.pageExtractor_2hxe0 > span {
+  line-height: 22px;
+  font-size: 14px;
+}
+.pageExtractor_2hxe0 .extractBtn_3LGZF {
+  height: 38px;
+  font-size: 15px;
+  text-align: center;
+  margin-left: 12px;
+}
+.paginatorRoot_2zLaL {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  height: 36px;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
-.bottom_right_13CLS {
+.paginatorRoot_2zLaL .widget_21_1j {
+  height: 32px;
+  min-width: 124px;
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  pointer-events: auto;
+  padding: 2px;
+  justify-content: space-between;
 }
-
-.play_btn_3TPkC {
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ {
   width: 28px;
   height: 28px;
-  color: #ffffff;
-  cursor: pointer;
-}
-.play_btn_3TPkC .icon_30JMm {
-  font-size: 28px;
-}
-.mark_btn_3KmrI {
-  width: 24px;
-  height: 24px;
-  color: #ffffff;
+  position: relative;
   display: flex;
-  cursor: pointer;
+  flex-direction: column;
+  justify-content: center;
 }
-.mark_btn_3KmrI .icon_30JMm {
-  font-size: 19px;
-  margin: auto;
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ .left_1ojXV {
+  margin-left: 10px;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid white;
 }
-.mark_text_1UfBu {
-  margin-left: 2px;
-  color: #ffffff;
-  font-size: 12px;
-  line-height: 18px;
-  cursor: pointer;
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_ .right_x3hfc {
+  margin-left: 12px;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid white;
 }
-.progress_bar_SOwfp {
-  height: 20px;
-  position: relative;
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV {
+  pointer-events: none;
 }
-.progress_bar_SOwfp .bottom_layer_3eWcP {
-  position: absolute;
-  cursor: pointer;
-  touch-action: none;
-  width: 100%;
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV .left_1ojXV {
+  border-right-color: rgba(255, 255, 255, 0.6);
+}
+.paginatorRoot_2zLaL .widget_21_1j .arrow_YQx8_.disabled_1EiYV .right_x3hfc {
+  border-left-color: rgba(255, 255, 255, 0.6);
+}
+.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo {
+  min-width: 64px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   height: 100%;
 }
-.progress_bar_SOwfp .background_2LQ-_ {
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  background-color: rgba(255, 255, 255, 0.4);
-  border-radius: 4px;
-  top: 50%;
-  transform: translate(0, -50%);
+.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo > span {
+  line-height: 28px;
+  height: 28px;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  white-space: pre;
 }
-.progress_bar_SOwfp .top_layer_1T3NJ {
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  height: 4px;
-  width: 100%;
-  pointer-events: none;
+.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo input {
+  width: 28px;
+  height: 28px;
+  border-radius: 2px;
+  color: white;
+  line-height: 28px;
+  font-size: 14px;
+  text-align: center;
+  background: transparent;
+  border: none;
+  margin-right: 2px;
 }
-.progress_bar_SOwfp .content_1JKE5 {
-  height: 4px;
-  background-color: #ffffff;
-  border-radius: 4px;
+.paginatorRoot_2zLaL .widget_21_1j .paginator_1NoBo input:focus {
+  background: black;
 }
-.progress_bar_SOwfp .ball_2xt7a {
+.insertExcelChooseModalBox_1ojyh {
+  width: 480px;
+  height: 346px;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: #fff;
   position: absolute;
-  width: 14px;
-  height: 14px;
-  margin-top: -9px;
-  margin-left: -7px;
-  border-radius: 7px;
-  background-color: #2E73E5;
-  border: #ffffff 2px solid;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
-.progress_bar_SOwfp .point_3r1U1 {
+.insertExcelChooseModalBox_1ojyh .titleRow_2LXkd {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+.insertExcelChooseModalBox_1ojyh .titleRow_2LXkd > svg {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  margin-top: -7px;
-  margin-left: -5px;
-  pointer-events: auto;
+  right: 24px;
   cursor: pointer;
 }
-.progress_bar_SOwfp .point_3r1U1 .point_ball_y4q-p {
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  background-color: #05CAAE;
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k {
+  margin-bottom: 24px;
 }
-.progress_bar_SOwfp .mark_list_28Hix {
-  position: absolute;
-  left: 50%;
-  bottom: calc(100% + 16px);
-  transform: translate(-50%, 0);
-  width: 180px;
-  padding: 8px;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.8);
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- {
+  display: inline-block;
 }
-.progress_bar_SOwfp .mark_list_28Hix::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  margin-left: -5px;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid rgba(0, 0, 0, 0.8);
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .bg_3p6EL {
+  width: 210px;
+  margin-bottom: 12px;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH {
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .btn_3isDD {
+  width: 100px;
   height: 36px;
-  line-height: 18px;
-  color: #ffffff;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
+  color: #fff;
+  font-size: 14px;
+  background-color: #2e73e5;
+  line-height: 36px;
+  text-align: center;
+  border-radius: 4px;
+  margin: auto;
+  cursor: pointer;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH::before {
-  content: "";
-  width: 4px;
-  height: 4px;
-  border-radius: 2px;
-  background: #ffffff;
-  flex-shrink: 0;
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ- .btn_3isDD:hover {
+  opacity: 0.7;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH.isCurrent_2j-Lv {
-  color: #05CAAE;
+.insertExcelChooseModalBox_1ojyh .iconRow_1FN7k .item_3VxJ-.first_3oz8Y {
+  margin-right: 12px;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH.isCurrent_2j-Lv::before {
-  background: #05CAAE;
+.insertExcelChooseModalBox_1ojyh .descRow_1WJuM {
+  color: #616371;
+  font-size: 14px;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_info_1g5mA {
-  margin-left: 8px;
-  flex-grow: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.do-hovers .paginatorRoot_2zLaL .arrow_YQx8_:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232 {
-  width: 16px;
-  height: 16px;
-  margin-left: 8px;
-  flex-shrink: 0;
-  color: #D8D8D8;
+
+.webviewer_border_2EbXP {
+  position: absolute;
+  background-color: white;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232 .sdk-icon {
-  font-size: 16px;
+.webviewer_iframe_2xkBo {
+  pointer-events: all;
+  border: none;
+  outline: none;
+  margin: 0;
 }
-.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232:hover,
-.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232.focused_3C2yH {
-  color: #FE5250;
+.webviewer_iframe_2xkBo.no_pointer_event_35vfv {
+  pointer-events: none;
 }
-.time_info_3HKXz {
-  color: #ffffff;
-  width: 80px;
-  height: 18px;
-  text-align: right;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 18px;
+
+.extra_media_2NL2B {
+  position: absolute;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  z-index: 100;
 }
-.speed_btn_3MpEV {
+.moveResizeArea_ViL91 {
   position: relative;
-  width: 38px;
-  height: 24px;
-  font-size: 12px;
-  color: #ffffff;
-  cursor: pointer;
-}
-.speed_btn_3MpEV .current_speed_2z0MW {
   width: 100%;
   height: 100%;
-  border-radius: 2px;
-  text-align: center;
-  line-height: 24px;
-}
-.speed_btn_3MpEV .current_speed_2z0MW.active_23rIY {
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-.speed_btn_3MpEV .options_G6vQo {
-  position: absolute;
-  bottom: calc(100% + 22px);
-  left: 50%;
-  transform: translate(-50%, 0);
-  width: 72px;
-  padding: 4px 0;
-  border-radius: 4px;
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-.speed_btn_3MpEV .options_G6vQo .selected_145a8 {
-  color: #2e73e5;
+  display: flex;
+  flex-direction: column;
 }
-.speed_btn_3MpEV .options_G6vQo .option_1-8hR {
+.title_3VFGG {
   width: 100%;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
-}
-.fullscreen_34wG- {
-  width: 24px;
-  height: 24px;
-  color: #ffffff;
-  cursor: pointer;
+  background-color: #F5F6F6;
+  flex-shrink: 0;
   display: flex;
+  align-items: center;
+  padding: 0 7px;
 }
-.fullscreen_34wG- .icon_30JMm {
-  font-size: 18px;
-  margin: auto;
+.title_3VFGG .file_icon_35EgE {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.title_3VFGG .close_icon_3s7b0 {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: #0C1024;
+  cursor: pointer;
 }
-.hide_1wZ2I {
-  display: none;
+.title_3VFGG .name_2_K4Z {
+  width: 100%;
+  line-height: 14px;
+  font-size: 10px;
+  color: #0C1024;
+  margin-left: 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
-.more_btn_wrapper_1uhRn {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  color: #ffffff;
-  cursor: pointer;
+.content_j7Z8k {
+  width: 100%;
 }
-.more_btn_wrapper_1uhRn .more_icon_26j55 {
-  font-size: 18px;
-  margin: auto;
+.content_j7Z8k.audio_2NVwZ {
+  background-color: #dee9f5;
+  overflow: hidden;
 }
-.more_btn_wrapper_1uhRn .more_btn_1Z5gR {
+.content_j7Z8k.video_at_K0 {
+  background-color: black;
+}
+.content_j7Z8k.video_at_K0 video {
   width: 100%;
   height: 100%;
-  border-radius: 2px;
-  display: flex;
-}
-.more_btn_wrapper_1uhRn .more_btn_1Z5gR.active_23rIY {
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.4);
+  object-fit: contain;
 }
-.more_btn_wrapper_1uhRn .controls_39z-S {
+.resize_dom_fuoNI {
   position: absolute;
-  bottom: calc(100% + 22px);
-  right: 0;
-  width: 150px;
-  padding: 12px;
-  color: #ffffff;
-  background-color: rgba(0, 0, 0, 0.8);
-  border-radius: 4px;
-}
-.more_btn_wrapper_1uhRn .control_3TTsu {
+  width: 20px;
   height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.more_btn_wrapper_1uhRn .control_3TTsu:not(:first-child) {
-  margin-top: 12px;
-}
-.more_btn_wrapper_1uhRn .label_2dPac {
-  line-height: 20px;
-  color: #ffffff;
-  font-size: 12px;
+  background: transparent;
 }
-.more_btn_wrapper_1uhRn .switch_btn_3m_gk {
-  position: relative;
-  width: 28px;
-  height: 16px;
-  border-radius: 8px;
-  background-color: #616371;
+.resize_dom_fuoNI.nw {
+  left: -10px;
+  top: -10px;
+  cursor: nw-resize;
 }
-.more_btn_wrapper_1uhRn .switch_btn_3m_gk::before {
-  position: absolute;
-  content: "";
-  left: 2px;
-  top: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
-  background-color: #ffffff;
-  transition: left 0.2s;
+.resize_dom_fuoNI.ne {
+  right: -10px;
+  top: -10px;
+  cursor: ne-resize;
 }
-.more_btn_wrapper_1uhRn .switch_btn_3m_gk.on_2dmvz {
-  background-color: #2E73E5;
+.resize_dom_fuoNI.sw {
+  left: -10px;
+  bottom: -10px;
+  cursor: sw-resize;
 }
-.more_btn_wrapper_1uhRn .switch_btn_3m_gk.on_2dmvz::before {
-  left: 14px;
+.resize_dom_fuoNI.se {
+  right: -10px;
+  bottom: -10px;
+  cursor: se-resize;
 }
-
-.video_ctrl_2Awiu {
+.media_ctrl_QzLfq {
   position: absolute;
+  width: 100%;
+  bottom: 0;
   pointer-events: auto;
 }
-.video_ctrl_2Awiu.video_RPAE8 {
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.4));
+.media_ctrl_QzLfq.video_at_K0 {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 }
-.video_ctrl_2Awiu.audio_3n2NW {
+.media_ctrl_QzLfq.audio_2NVwZ {
   background: linear-gradient(to bottom, rgba(27, 37, 100, 0.03), rgba(22, 39, 89, 0.4));
 }
-.video_ctrl_2Awiu.fade_2n_7J {
+.media_ctrl_QzLfq.fade_9jy4P {
   opacity: 0;
   transition: opacity 0.5s;
 }
-.video_ctrl_2Awiu .progress_ca3-d {
+.media_ctrl_QzLfq .progress_1wktX {
   width: 100%;
 }
-.video_ctrl_2Awiu .time_1GAm4 {
+.media_ctrl_QzLfq .time_2XeFt {
   margin-left: 14px;
 }
-.video_ctrl_2Awiu .mark_btn_2-ocU {
-  margin-left: 10px;
-}
-.video_ctrl_2Awiu .fullscreen_EH_Dy {
-  margin-left: 8px;
-}
-.video_ctrl_2Awiu .play_btn_1RUCp,
-.video_ctrl_2Awiu .mark_btn_2-ocU,
-.video_ctrl_2Awiu .time_1GAm4,
-.video_ctrl_2Awiu .speed_ZL1_e,
-.video_ctrl_2Awiu .fullscreen_EH_Dy {
+.media_ctrl_QzLfq .play_btn_25Yr0,
+.media_ctrl_QzLfq .time_2XeFt,
+.media_ctrl_QzLfq .speed_1aDQR {
   flex-shrink: 0;
 }
-.simple_1Y0Zx {
-  display: flex;
-}
-.simple_1Y0Zx .play_btn_1RUCp {
-  margin: auto;
-}
-.top_3dmP5 {
+.top_32dIx {
   height: 22px;
   padding: 2px 12px 0 18px;
   display: flex;
   flex-direction: row;
 }
-.bottom_N6d_k {
+.bottom_2BM-L {
   height: 28px;
   padding: 0 8px 4px 8px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-.bottom_left_2nUj- {
+.bottom_left_1C2-w {
   display: flex;
   align-items: center;
 }
-.bottom_right_1F59L {
+.bottom_right_13CLS {
   display: flex;
   align-items: center;
 }
 
-.ratioBlock_2jjJB {
-  display: flex;
-  width: 53px;
-  height: 56px;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  margin: 4px 4px;
-  padding: 4px 4px;
+.play_btn_3TPkC {
+  width: 28px;
+  height: 28px;
+  color: #ffffff;
   cursor: pointer;
 }
-.ratioBlock_2jjJB span {
-  line-height: 18px;
-  font-size: 12px;
-  text-align: center;
-}
-.do-hovers .ratioBlock_2jjJB:hover {
-  background-color: var(--upime-btn-bg-hover);
-}
-.do-hovers .ratioBlock_2jjJB:hover svg {
-  color: var(--upime-active);
-}
-.frameTypeEditor_20mvL {
-  min-width: 74px;
-  font-size: 14px;
-  height: 50px;
-  text-align: center;
+.play_btn_3TPkC .icon_30JMm {
+  font-size: 28px;
 }
-.typeLabelContainer_2Y419 {
-  width: 100%;
-  height: 50px;
+.mark_btn_3KmrI {
+  width: 24px;
+  height: 24px;
+  color: #ffffff;
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.frameTypeLabel_Y-GNh {
-  height: 40px;
-  line-height: 40px;
-  min-width: 40px;
-  text-align: center;
-  padding: 0 5px;
+  cursor: pointer;
 }
-.do-hovers .frameTypeLabel_Y-GNh:hover {
-  background: var(--upime-btn-bg-hover);
+.mark_btn_3KmrI .icon_30JMm {
+  font-size: 19px;
+  margin: auto;
 }
-.ratiosPanel_3vWk_ {
-  padding: 8px 12px !important;
+.mark_text_1UfBu {
+  margin-left: 2px;
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
 }
-.ratiosPanel_3vWk_ {
-  width: 207px;
-  height: 148px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+.progress_bar_SOwfp {
+  height: 20px;
+  position: relative;
 }
-
-.fontSizeSelect_mZrQe .rightOption_MD7Qa {
-  display: flex;
-  flex-direction: column;
+.progress_bar_SOwfp .bottom_layer_3eWcP {
+  position: absolute;
+  cursor: pointer;
+  touch-action: none;
+  width: 100%;
   height: 100%;
 }
-.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_ {
+.progress_bar_SOwfp .background_2LQ-_ {
+  position: absolute;
   width: 100%;
-  padding: 0;
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  height: 4px;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  top: 50%;
+  transform: translate(0, -50%);
 }
-.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_.up_hkKvj {
-  align-items: flex-end;
-  padding-bottom: 2px;
+.progress_bar_SOwfp .top_layer_1T3NJ {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%);
+  height: 4px;
+  width: 100%;
+  pointer-events: none;
 }
-.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_.down_3R-Xb {
-  align-items: flex-start;
-  padding-top: 2px;
+.progress_bar_SOwfp .content_1JKE5 {
+  height: 4px;
+  background-color: #ffffff;
+  border-radius: 4px;
+}
+.progress_bar_SOwfp .ball_2xt7a {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin-top: -9px;
+  margin-left: -7px;
+  border-radius: 7px;
+  background-color: #2E73E5;
+  border: #ffffff 2px solid;
 }
-.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_ .icon_2ql7n {
+.progress_bar_SOwfp .point_3r1U1 {
+  position: absolute;
   width: 10px;
   height: 10px;
-  font-size: 10px;
-  text-align: center;
-  -webkit-user-select: none;
-          user-select: none;
+  margin-top: -7px;
+  margin-left: -5px;
+  pointer-events: auto;
+  cursor: pointer;
 }
-.fontSizeSelect_mZrQe .rightOption_MD7Qa .btn_mBY8_:hover {
-  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-  background: initial;
+.progress_bar_SOwfp .point_3r1U1 .point_ball_y4q-p {
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #05CAAE;
 }
-.fontSizeSelect_mZrQe .fontInputContainer_2wcNK {
-  height: 50px;
-  display: flex;
-  align-items: center;
+.progress_bar_SOwfp .mark_list_28Hix {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 16px);
+  transform: translate(-50%, 0);
+  width: 180px;
+  padding: 8px;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.8);
 }
-.dropdown_hGFBv {
-  z-index: 10;
+.progress_bar_SOwfp .mark_list_28Hix::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  margin-left: -5px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid rgba(0, 0, 0, 0.8);
 }
-.fontSizeViewPhoneContainer_2TUmu {
+.progress_bar_SOwfp .markpoint_item_2QjWH {
+  height: 36px;
+  line-height: 18px;
+  color: #ffffff;
+  font-size: 12px;
   display: flex;
   align-items: center;
-  flex-shrink: 0;
-  justify-content: space-between;
-  width: 92px;
 }
-.fontSizeViewPhoneContainer_2TUmu .fontSizeViewPhoneContainerText_ic4i9 {
+.progress_bar_SOwfp .markpoint_item_2QjWH::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background: #ffffff;
   flex-shrink: 0;
-  font-size: 14px;
-  word-break: keep-all;
 }
-.disabled_1XQzF {
-  color: #dbdbde;
+.progress_bar_SOwfp .markpoint_item_2QjWH.isCurrent_2j-Lv {
+  color: #05CAAE;
 }
-
-.rich_text_textarea_3xhNM {
-  position: absolute;
-  pointer-events: none;
-  opacity: 0;
+.progress_bar_SOwfp .markpoint_item_2QjWH.isCurrent_2j-Lv::before {
+  background: #05CAAE;
+}
+.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_info_1g5mA {
+  margin-left: 8px;
+  flex-grow: 1;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
-.add_anchor_3mHnl {
-  background-color: var(--upime-pane-bg);
-  border-radius: 4px;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
-  border-radius: 2px;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  width: 400px;
-  min-height: 72px;
+.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232 {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  flex-shrink: 0;
+  color: #D8D8D8;
 }
-.add_anchor_3mHnl .add_input_n9bTK {
-  width: 296px;
-  min-height: 72px;
-  padding: 16px 0 16px 16px;
-  position: relative;
+.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232 .sdk-icon {
+  font-size: 16px;
 }
-.add_anchor_3mHnl .add_input_n9bTK input {
-  padding-right: 40px;
+.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232:hover,
+.progress_bar_SOwfp .markpoint_item_2QjWH .markpoint_delete_1Y232.focused_3C2yH {
+  color: #FE5250;
 }
-.add_btns_1-y9z {
-  position: absolute;
-  right: 0;
-  top: 0;
-  flex-shrink: 0;
-  display: flex;
-  height: 100%;
-  padding-right: 16px;
+.time_info_3HKXz {
+  color: #ffffff;
+  width: 80px;
+  height: 18px;
+  text-align: right;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 18px;
 }
-.add_btns_1-y9z .btn_17KQi {
-  margin-top: 26px;
-  margin-bottom: 48px;
+.speed_btn_3MpEV {
   position: relative;
-  font-size: 14px;
-  color: #2E73E5;
-  white-space: nowrap;
-  margin-left: 16px;
+  width: 38px;
+  height: 24px;
+  font-size: 12px;
+  color: #ffffff;
   cursor: pointer;
 }
-.add_btns_1-y9z .btn_17KQi.disable_3k8tZ {
-  color: #ABC7F5;
-  pointer-events: none;
-}
-.add_btns_1-y9z .btn_17KQi::before {
-  content: "";
-  background: transparent;
-  position: absolute;
-  left: -10px;
-  top: -20px;
-  right: -10px;
-  bottom: -20px;
-  z-index: -1;
-}
-.hover_anchor_2SjZq {
-  background-color: var(--upime-pane-bg);
-  border-radius: 4px;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
-  position: absolute;
-  display: flex;
-  align-items: center;
+.speed_btn_3MpEV .current_speed_2z0MW {
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  text-align: center;
+  line-height: 24px;
 }
-.btn_wrapper_3GpT- {
-  flex-shrink: 0;
-  position: relative;
-  padding: 0 8px;
-  display: flex;
-  align-items: center;
+.speed_btn_3MpEV .current_speed_2z0MW.active_23rIY {
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.4);
 }
-.switch_btn_group_16v5o::before {
-  content: "";
+.speed_btn_3MpEV .options_G6vQo {
   position: absolute;
-  right: 0;
-  top: 0;
-  width: 1px;
-  height: 100%;
-  background-color: #dbdbde;
+  bottom: calc(100% + 22px);
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 72px;
+  padding: 4px 0;
+  border-radius: 4px;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.8);
 }
-.edit_btn_group_24D_T::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 1px;
-  height: 100%;
-  background-color: #dbdbde;
+.speed_btn_3MpEV .options_G6vQo .selected_145a8 {
+  color: #2e73e5;
 }
-.edit_anchor_3rspJ {
-  background-color: var(--upime-pane-bg);
-  border-radius: 4px;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
-  position: absolute;
-  padding: 20px 24px 24px;
+.speed_btn_3MpEV .options_G6vQo .option_1-8hR {
+  width: 100%;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
 }
-.input_group_1HItO {
-  margin-top: 12px;
-  height: 36px;
+.fullscreen_34wG- {
+  width: 24px;
+  height: 24px;
+  color: #ffffff;
+  cursor: pointer;
   display: flex;
-  align-items: center;
 }
-.input_group_1HItO .label_1HvdM {
-  width: 42px;
-  font-size: 14px;
-  height: 22px;
-  line-height: 22px;
-  color: var(--upime-main-text);
+.fullscreen_34wG- .icon_30JMm {
+  font-size: 18px;
+  margin: auto;
 }
-.input_group_1HItO .input_1reWF {
-  width: 306px;
-  height: 36px;
-  margin-left: 4px;
-  padding-left: 10px;
-  padding-right: 12px;
-  border-radius: 4px;
-  position: relative;
+.hide_1wZ2I {
+  display: none;
 }
-.input_group_1HItO .input_1reWF input {
-  padding-right: 40px;
+.more_btn_wrapper_1uhRn {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  color: #ffffff;
+  cursor: pointer;
 }
-.edit_btns_2y480 {
-  margin-top: 35px;
-  display: flex;
-  justify-content: flex-end;
+.more_btn_wrapper_1uhRn .more_icon_26j55 {
+  font-size: 18px;
+  margin: auto;
 }
-.edit_btns_2y480 .button_BS8i7 {
-  width: 64px;
-  height: 32px;
-  font-size: 14px;
-  line-height: 20px;
+.more_btn_wrapper_1uhRn .more_btn_1Z5gR {
+  width: 100%;
+  height: 100%;
   border-radius: 2px;
+  display: flex;
 }
-.edit_btns_2y480 .button_BS8i7:last-child {
-  margin-left: 12px;
+.more_btn_wrapper_1uhRn .more_btn_1Z5gR.active_23rIY {
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.4);
 }
-.mentionWrapper_3cWn1 {
+.more_btn_wrapper_1uhRn .controls_39z-S {
   position: absolute;
-  background-color: white;
-  width: 270px;
+  bottom: calc(100% + 22px);
+  right: 0;
+  width: 150px;
+  padding: 12px;
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.8);
   border-radius: 4px;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
 }
-.mentionWrapper_3cWn1 .allmenberRow_3QlTz {
+.more_btn_wrapper_1uhRn .control_3TTsu {
+  height: 20px;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  width: 100%;
-  height: 38px;
-  padding-left: 16px;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
+  justify-content: space-between;
 }
-.mentionWrapper_3cWn1 .allmenberRow_3QlTz.withBorder_3B8M8 {
-  border-bottom: 1px solid var(--upime-btn-bg-hover);
+.more_btn_wrapper_1uhRn .control_3TTsu:not(:first-child) {
+  margin-top: 12px;
 }
-.mentionWrapper_3cWn1 .allmenberRow_3QlTz.selected_2_g7j {
-  color: var(--upime-active);
+.more_btn_wrapper_1uhRn .label_2dPac {
+  line-height: 20px;
+  color: #ffffff;
+  font-size: 12px;
 }
-.mentionContainer_UWTQf {
-  width: 100%;
-  max-height: 235px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  scrollbar-color: var(--upime-scrollbar-thumb) transparent;
-  scrollbar-width: thin;
+.more_btn_wrapper_1uhRn .switch_btn_3m_gk {
+  position: relative;
+  width: 28px;
+  height: 16px;
+  border-radius: 8px;
+  background-color: #616371;
 }
-.mentionContainer_UWTQf::-webkit-scrollbar {
-  width: 4px;
+.more_btn_wrapper_1uhRn .switch_btn_3m_gk::before {
+  position: absolute;
+  content: "";
+  left: 2px;
+  top: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: #ffffff;
+  transition: left 0.2s;
 }
-.mentionContainer_UWTQf::-webkit-scrollbar-track {
-  border-radius: 5px;
-  background-color: transparent;
+.more_btn_wrapper_1uhRn .switch_btn_3m_gk.on_2dmvz {
+  background-color: #2E73E5;
 }
-.mentionContainer_UWTQf::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background-color: var(--upime-scrollbar-thumb);
+.more_btn_wrapper_1uhRn .switch_btn_3m_gk.on_2dmvz::before {
+  left: 14px;
 }
-.mentionContainer_UWTQf .list_AU6sH {
-  padding: 8px 0;
-  display: flex;
-  flex-direction: column;
+
+.video_ctrl_2Awiu {
+  position: absolute;
+  pointer-events: auto;
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  padding-left: 16px;
-  cursor: pointer;
+.video_ctrl_2Awiu.video_RPAE8 {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.4));
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO.selected_2_g7j {
-  color: var(--upime-active);
+.video_ctrl_2Awiu.audio_3n2NW {
+  background: linear-gradient(to bottom, rgba(27, 37, 100, 0.03), rgba(22, 39, 89, 0.4));
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO.selected_2_g7j .info_2NULQ {
-  color: var(--upime-active) !important;
+.video_ctrl_2Awiu.fade_2n_7J {
+  opacity: 0;
+  transition: opacity 0.5s;
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .avatar_3Cyd_ {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  flex-shrink: 0;
+.video_ctrl_2Awiu .progress_ca3-d {
+  width: 100%;
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO > span {
-  font-size: 14px;
-  line-height: 22px;
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.video_ctrl_2Awiu .time_1GAm4 {
+  margin-left: 14px;
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .userName_32xBe {
+.video_ctrl_2Awiu .mark_btn_2-ocU {
+  margin-left: 10px;
+}
+.video_ctrl_2Awiu .fullscreen_EH_Dy {
   margin-left: 8px;
-  max-width: 68px;
 }
-.mentionContainer_UWTQf .list_AU6sH .row_uxoqO .info_2NULQ {
-  margin-left: 12px;
-  color: var(--upime-second-text);
-  max-width: 134px;
+.video_ctrl_2Awiu .play_btn_1RUCp,
+.video_ctrl_2Awiu .mark_btn_2-ocU,
+.video_ctrl_2Awiu .time_1GAm4,
+.video_ctrl_2Awiu .speed_ZL1_e,
+.video_ctrl_2Awiu .fullscreen_EH_Dy {
+  flex-shrink: 0;
 }
-.mentionCard_2VhGv {
-  position: absolute;
-  background-color: white;
-  width: 270px;
-  border-radius: 4px;
-  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
-  padding: 12px;
+.simple_1Y0Zx {
+  display: flex;
 }
-.mentionMask_23Ia7 {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+.simple_1Y0Zx .play_btn_1RUCp {
+  margin: auto;
+}
+.top_3dmP5 {
+  height: 22px;
+  padding: 2px 12px 0 18px;
   display: flex;
   flex-direction: row;
 }
-.mentionListPhoneWrapper_3nZor {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 20px 20px 0 0;
-  overflow: hidden;
-  background-color: white;
-  box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.05);
-  z-index: 26;
+.bottom_N6d_k {
+  height: 28px;
+  padding: 0 8px 4px 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv {
-  width: 100%;
-  max-height: 220px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 24px;
+.bottom_left_2nUj- {
+  display: flex;
+  align-items: center;
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO {
+.bottom_right_1F59L {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  width: 100%;
+}
+
+.ratioBlock_2jjJB {
+  display: flex;
+  width: 53px;
+  height: 56px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px 4px;
+  padding: 4px 4px;
   cursor: pointer;
-  margin-bottom: 20px;
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO:last-child {
-  margin-bottom: 0;
+.ratioBlock_2jjJB span {
+  line-height: 18px;
+  font-size: 12px;
+  text-align: center;
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO.allMentionRow_2gvRf .avatar_3Cyd_ {
-  background-color: transparent;
-  background-color: initial;
+.do-hovers .ratioBlock_2jjJB:hover {
+  background-color: var(--upime-btn-bg-hover);
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO {
-  flex: 1;
-  margin-left: 12px;
-  overflow: hidden;
+.do-hovers .ratioBlock_2jjJB:hover svg {
+  color: var(--upime-active);
 }
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO .userName_32xBe {
+.frameTypeEditor_20mvL {
+  min-width: 74px;
   font-size: 14px;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .rest_GahhO .info_2NULQ {
-  color: var(--upime-second-text);
-  font-size: 12px;
-  line-height: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: 4px;
-}
-.mentionListPhoneWrapper_3nZor .mentionListPhoneList_273fv .row_uxoqO .avatar_3Cyd_ {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-}
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob {
-  padding: 8px 12px;
-  height: 52px;
-  background-color: #ffffff;
-  border-top: 1px solid #e6e7e9;
+  height: 50px;
+  text-align: center;
 }
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES {
+.typeLabelContainer_2Y419 {
   width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  background-color: #f5f6f6;
+  height: 50px;
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding: 8px 12px;
-  overflow: hidden;
-}
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .mentionIcon_Ftq9S {
-  color: #0c1024;
-  flex-shrink: 0;
 }
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .content_1PCvD {
-  position: relative;
-  height: 100%;
-  white-space: nowrap;
+.frameTypeLabel_Y-GNh {
+  height: 40px;
+  line-height: 40px;
+  min-width: 40px;
+  text-align: center;
+  padding: 0 5px;
 }
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .cursor_2egYz {
-  height: 100%;
-  width: 1px;
-  background-color: #0c1024;
-  animation: blink_3OyGR 1s infinite;
-  flex-shrink: 0;
+.do-hovers .frameTypeLabel_Y-GNh:hover {
+  background: var(--upime-btn-bg-hover);
 }
-.mentionListPhoneWrapper_3nZor .mentionInputContainer_1njob .mentionInputInner_3BYES .fillIn_3Id91 {
-  flex: 1;
+.ratiosPanel_3vWk_ {
+  padding: 8px 12px !important;
 }
-@keyframes blink_3OyGR {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0;
-  }
-  51% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-  }
+.ratiosPanel_3vWk_ {
+  width: 207px;
+  height: 148px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .scale-mode_3uUsR {
@@ -6469,6 +6474,19 @@
   max-height: 196px;
   overflow-y: auto;
   z-index: 1;
+  scrollbar-color: var(--upime-scrollbar-thumb) transparent;
+  scrollbar-width: thin;
+}
+.cardOptionContainer_2RMVH::-webkit-scrollbar {
+  width: 4px;
+}
+.cardOptionContainer_2RMVH::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: transparent;
+}
+.cardOptionContainer_2RMVH::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: var(--upime-scrollbar-thumb);
 }
 .cardOptionContainer_2RMVH .cardItem_1dDNK {
   height: 36px;
@@ -6479,6 +6497,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .cardOptionContainer_2RMVH .cardItem_1dDNK:hover {
   background-color: #f5f6f6;
@@ -7303,7 +7322,7 @@
   margin-right: 16px;
   width: 90px;
   min-height: 30px;
-  padding-top: 6px;
+  padding-top: 5px;
   display: flex;
   gap: 8px;
 }
@@ -7431,6 +7450,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  margin-left: 2px;
 }
 .colorSelectContainer_1BvyB:hover {
   background-color: #f5f6f6;
@@ -7681,24 +7701,56 @@
 .fileListWrapper_1obPo .addBtContainer_37NNN {
   display: flex;
   align-items: center;
-  height: 30px;
+  width: 100%;
+  height: 46px;
+  border-radius: 4px;
+  background-color: #f5f6f6;
+  border: 1px dashed #f5f6f6;
+  cursor: pointer;
+  gap: 2px;
+  padding: 10px 0 10px 16px;
+  transition: background 0.15s;
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN.active_2pgLf {
+  border: 1px dashed #2e73e5;
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN.padStyle_3XR7z {
+  justify-content: center;
+  padding: 10px 0 10px 0px;
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN.padStyle_3XR7z .addBt_1CTM4 {
+  padding: 0 0 0 2px;
 }
 .fileListWrapper_1obPo .addBtContainer_37NNN .addBt_1CTM4 {
-  height: 26px;
-  padding: 0 8px;
   display: flex;
   align-items: center;
-  gap: 4px;
   color: #2e73e5;
-  border-radius: 4px;
-  border: 1px solid #e6e7e9;
   width: fit-content;
-  cursor: pointer;
+  height: 100%;
+  padding: 0 8px 0 2px;
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN .addBt_1CTM4:hover {
+  color: #5798f2;
+}
+.fileListWrapper_1obPo .addBtContainer_37NNN .uploadTip_3lqgc {
+  line-height: 20px;
+  color: #91939c;
+  font-size: 14px;
 }
-.fileListWrapper_1obPo .addBtContainer_37NNN .addBt_1CTM4 .hiddenInput_3Sct_ {
+.fileListWrapper_1obPo .addBtContainer_37NNN .hiddenInput_3Sct_ {
   visibility: hidden;
   display: none;
 }
+.fileListWrapper_1obPo .addBtContainer_37NNN .outScreenInput_1Kuqv {
+  position: fixed;
+  left: -9999px;
+  top: -9999px;
+  width: 0;
+  height: 0;
+}
 .fileListWrapper_1obPo .fileListContainer_2nxU7 {
   margin-top: 8px;
 }
@@ -8033,6 +8085,12 @@
 .noDesktop_M0l6Z .iconCon_3t7-a:hover {
   background-color: rgba(0, 0, 0, 0.2);
 }
+.noDesktop_M0l6Z .addBtContainer_37NNN:hover {
+  background-color: #f5f6f6;
+}
+.noDesktop_M0l6Z .addBtContainer_37NNN .addBt_1CTM4:hover {
+  color: #2e73e5;
+}
 .phoneViewContainer_2q1mj {
   position: absolute;
   top: 0;
@@ -8127,11 +8185,17 @@
   border-bottom: 1px solid #e6e7e9;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: 0 24px 0 40px;
   font-size: 20px;
 }
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanHead_1yzm_ .kanbanTitleTip_2Hlqz {
+  font-size: 14px;
+  margin-left: 8px;
+  color: #616371;
+  transform: translateY(3px);
+}
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanHead_1yzm_ .guanbiButton_qncY9 {
+  margin-left: auto;
   cursor: pointer;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- {
@@ -8207,7 +8271,7 @@
   color: #2e73e5;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L {
-  padding: 20px 8px 24px 20px;
+  padding: 20px 8px 24px 0px;
   overflow: hidden;
   display: grid;
   grid-template-rows: 1fr 40px;
@@ -8221,6 +8285,7 @@
   scrollbar-color: var(--upime-scrollbar-thumb) transparent;
   scrollbar-width: thin;
   padding-right: 32px;
+  padding-left: 20px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1::-webkit-scrollbar {
   width: 4px;
@@ -8284,8 +8349,12 @@
   overflow: hidden;
   display: flex;
   padding-right: 12px;
-  border: 1px solid #e6e7e9;
+  border: 1px solid #ececee;
   border-radius: 4px;
+  background-color: white;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa.inputDisabled_1adbJ {
+  background-color: #f5f6f6;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa .input_129hJ {
   flex: 1;
@@ -8296,7 +8365,7 @@
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa .input_129hJ[disabled] {
   color: #c2c3c8;
-  background-color: white;
+  background-color: #f5f6f6;
   cursor: not-allowed;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa .input_129hJ::placeholder {
@@ -8311,6 +8380,7 @@
   gap: 8px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa .inputControl_2J0Ui .clearIcon_3vHa8 {
+  color: #c2c3c8;
   cursor: pointer;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .inputContainer_zn0oa.focus_1S-EU {
@@ -8333,21 +8403,57 @@
   height: 44px;
   border-radius: 4px;
   border: 1px solid #e6e7e9;
-  overflow: hidden;
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 8px;
   padding-right: 12px;
-  color: #c2c3c8;
+  color: #0c1024;
+  cursor: pointer;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC.selectorDisabled_24GQj {
   cursor: not-allowed;
+  background-color: #f5f6f6;
+  color: #c2c3c8;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .icon_1OLmf {
+  transform: rotate(270deg);
+  color: #616371;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .icon_1OLmf.open_3B38O {
+  transform: rotate(90deg);
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .icon_1OLmf svg {
+  display: block;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .okIcon_K1eLd {
+  color: var(--upime-active);
+  margin-left: auto;
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .selectOptionContainer_8Ikhs {
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: calc(100% + 4px);
+  padding: 8px 0;
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
+}
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .selectorContainer_u8YJC .selectOptionContainer_8Ikhs .selectOptionRow_1g45H {
+  width: 100%;
+  height: 40px;
+  background-color: #eaf1fc;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  color: #0c1024;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd {
   width: 100%;
-  border-radius: 4px;
-  background-color: #f5f6f6;
-  padding: 16px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY {
   margin-bottom: 10px;
@@ -8370,19 +8476,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-width: 1px;
-  border-style: solid;
   position: relative;
-}
-.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .colorSelector_3FyqL::after {
-  content: "";
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding-top: 2px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .opInputContainer_3F-t_ {
   border-radius: 4px;
@@ -8391,7 +8486,7 @@
   padding: 0 12px;
   color: #0c1024;
   flex: 1;
-  height: 40px;
+  height: 38px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .opInputContainer_3F-t_:focus {
   border: 1px solid #2e73e5;
@@ -8399,6 +8494,9 @@
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .opInputContainer_3F-t_::placeholder {
   color: #c2c3c8;
 }
+.kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .opInputContainer_3F-t_.opInputContainerDisabled_1eVB8 {
+  background-color: #f5f6f6;
+}
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .closeIcon_1TMcU {
   color: #979797;
   cursor: pointer;
@@ -8417,8 +8515,6 @@
   background-color: transparent;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .disabled_2JtvB .colorSelector_3FyqL {
-  opacity: 0.65;
-  cursor: default;
   cursor: not-allowed;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .kanbanMainContentScroll_2knc1 .kanbanMainContentProp_1Vcq9 .optionListContainer_3gQwd .opRow_8piVY .disabled_2JtvB .opInputContainer_3F-t_ {
@@ -8448,6 +8544,7 @@
   display: flex;
   align-items: center;
   gap: 16px;
+  padding-left: 16px;
 }
 .kanbanConfigWrapper_zrjFR .kanbanConfigContainer_2ZExP .kanbanMainContainer_fdqg- .kanbanMainContent_3PO_L .actionsList_DWeMJ .attrSaveBt_2XK0F {
   width: 72px;
@@ -8535,6 +8632,20 @@
   overflow: hidden;
   transform: translateY(4px);
 }
+.colorItem_1tyy8 {
+  position: relative;
+}
+.colorItem_1tyy8::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: white;
+  opacity: 0.3;
+  border-radius: 50%;
+}
 
 .element_name_39TT- {
   position: absolute;
@@ -8772,6 +8883,20 @@
   width: 100%;
   margin-top: 8px;
 }
+.addNewColContainer_2U3es .colorItem_3fT64 {
+  position: relative;
+}
+.addNewColContainer_2U3es .colorItem_3fT64::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: white;
+  opacity: 0.3;
+  border-radius: 50%;
+}
 .addNewColContainer_2U3es .addColActionList_2VRy5 {
   margin-top: 20px;
   display: flex;
@@ -9738,42 +9863,130 @@
   font-size: 14px;
   margin-top: 8px;
 }
-.modalBox_30MYB .actionsRow_1I17N {
+.modalBox_30MYB .actionsRow_1I17N {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 12px;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s {
+  padding: 0 20px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #ffffff;
+  border: 1px solid #e6e7e9;
+  outline: none;
+  color: #0c1024;
+  font-size: 16px;
+  cursor: pointer;
+  transition-property: background-color, color, border-color;
+  transition-duration: 0.2s;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s:hover {
+  border-color: #5798f2;
+  color: #5798f2;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s:active {
+  border-color: #1d56bf;
+  color: #1d56bf;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB {
+  background-color: #fe5250;
+  border: none;
+  color: white;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB:hover {
+  background-color: #ff7f78;
+}
+.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB:active {
+  background-color: #d9383b;
+}
+
+.option_list_2fVIE {
+  padding: 12px 16px;
+}
+.option_item_2NQRV {
+  width: 144px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+.option_item_2NQRV:not(:first-child) {
+  margin-top: 4px;
+}
+.option_item_2NQRV.active_1pwgj {
+  color: #2E73E5;
+}
+.option_icon_18fZs {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+.option_text_4J4Mz {
+  width: 100%;
+  margin-left: 8px;
+  font-size: 14px;
+  line-height: 20px;
+}
+.select_icon_2CJRU {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+.node_menu_2TnQY {
+  position: absolute;
+  padding: 16px 12px;
+  border-radius: 4px;
+}
+.node_menu_2TnQY .btn_group_3uY4M {
+  width: 198px;
+}
+.node_menu_2TnQY .btn_group_3uY4M:not(:first-child) {
+  margin-top: 16px;
+}
+.node_menu_2TnQY .type_3r3TJ {
+  height: 22px;
+  line-height: 22px;
+  padding-left: 12px;
+  font-size: 12px;
+  color: #91939C;
+  margin-bottom: 4px;
+}
+.node_menu_2TnQY .btns_3tk0H {
+  height: 30px;
   display: flex;
-  flex-direction: row-reverse;
-  gap: 12px;
+  align-items: center;
+  justify-content: space-around;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s {
-  padding: 0 20px;
-  height: 40px;
-  border-radius: 4px;
-  background-color: #ffffff;
-  border: 1px solid #e6e7e9;
-  outline: none;
-  color: #0c1024;
-  font-size: 16px;
+.node_menu_2TnQY .btn_1QjMZ {
+  color: #0C1024;
+  width: 30px;
+  height: 30px;
+  display: flex;
   cursor: pointer;
-  transition-property: background-color, color, border-color;
-  transition-duration: 0.2s;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s:hover {
-  border-color: #5798f2;
-  color: #5798f2;
+.node_menu_2TnQY .btn_1QjMZ .btn_icon_WL9f8 {
+  margin: auto;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s:active {
-  border-color: #1d56bf;
-  color: #1d56bf;
+.node_menu_2TnQY .btn_icon_WL9f8 {
+  font-size: 20px;
+  pointer-events: none;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB {
-  background-color: #fe5250;
-  border: none;
-  color: white;
+.node_menu_2TnQY .btn_bar_3nYM8 {
+  height: 36px;
+  color: #0C1024;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB:hover {
-  background-color: #ff7f78;
+.node_menu_2TnQY .btn_name_1sj6v {
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
 }
-.modalBox_30MYB .actionsRow_1I17N .actionBt_2Hy0s.primary_3uqhB:active {
-  background-color: #d9383b;
+.do-hovers .hover_style_3dBbz:hover {
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.06);
 }
 
 .insert_panel_muX5o {
@@ -10787,6 +11000,14 @@
   font-size: 12px;
   line-height: 18px;
 }
+.itemBlockRoot_7yXam .itemRoot_3oqAr .header_cIvPV .unread_2Qa3L {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background-color: #fe5250;
+  border-radius: 50%;
+  left: 6px;
+}
 .itemBlockRoot_7yXam .itemRoot_3oqAr .content_y-fPm {
   position: relative;
   margin: 0 16px 8px 16px;
@@ -10795,15 +11016,6 @@
   line-height: 22px;
   white-space: pre-line;
 }
-.itemBlockRoot_7yXam .itemRoot_3oqAr .content_y-fPm .unread_2Qa3L {
-  position: absolute;
-  width: 6px;
-  height: 6px;
-  background-color: #fe5250;
-  border-radius: 50%;
-  left: -9px;
-  top: 8px;
-}
 .itemBlockRoot_7yXam .collapseLabel_1KNsg {
   margin-left: 16px;
   cursor: pointer;
@@ -11347,13 +11559,226 @@
 .phoneModal_1Ar6S .imgContainer_1mue6 .placeholderImg_1GUUu {
   width: 110px;
 }
-.nickNameInput_RAs3H {
-  margin: 20px 0;
-  height: 44px;
+.nickNameInput_RAs3H {
+  margin: 20px 0;
+  height: 44px;
+}
+.noPermissionJoinBox_2qDRl {
+  width: 480px;
+  height: 170px;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.noPermissionJoinBox_2qDRl .headRow_2ZRHv {
+  margin-bottom: 50px;
+}
+.noPermissionJoinBox_2qDRl .headRow_2ZRHv > svg {
+  width: 28px;
+  height: 28px;
+  color: #ffa519;
+  margin-right: 12px;
+  position: relative;
+  top: 7px;
+}
+.noPermissionJoinBox_2qDRl .headRow_2ZRHv .wording_TcMYU {
+  font-weight: 500;
+  font-size: 20px;
+}
+.noPermissionJoinBox_2qDRl .actionRow_NMogH {
+  text-align: right;
+}
+.noPermissionJoinBox_2qDRl .actionRow_NMogH .btn_1fd3R {
+  display: inline-block;
+  padding: 8px 20px;
+  width: 104px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #2e73e5;
+  color: #fff;
+  cursor: pointer;
+}
+.noPermissionJoinBox_2qDRl .actionRow_NMogH .btn_1fd3R:hover {
+  opacity: 0.7;
+}
+.requestMediaBox_HOoWc {
+  width: 480px;
+  height: 170px;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.requestMediaBox_HOoWc .headRow_2ZRHv {
+  margin-bottom: 50px;
+}
+.requestMediaBox_HOoWc .headRow_2ZRHv > svg {
+  width: 28px;
+  height: 28px;
+  color: #ffa519;
+  margin-right: 12px;
+  position: relative;
+  top: 7px;
+}
+.requestMediaBox_HOoWc .headRow_2ZRHv .wording_TcMYU {
+  font-weight: 500;
+  font-size: 20px;
+}
+.requestMediaBox_HOoWc .actionRow_NMogH {
+  text-align: right;
+}
+.requestMediaBox_HOoWc .actionRow_NMogH .cancel_2SaBS {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border: 1px solid #e6e7e9;
+  border-radius: 4px;
+  display: inline-block;
+  font-size: 14px;
+  padding: 0 20px;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.requestMediaBox_HOoWc .actionRow_NMogH .cancel_2SaBS:hover {
+  opacity: 0.7;
+}
+.requestMediaBox_HOoWc .actionRow_NMogH .confirm_1c35u {
+  height: 40px;
+  line-height: 40px;
+  border-radius: 4px;
+  color: #fff;
+  background-color: #2e73e5;
+  text-align: center;
+  display: inline-block;
+  font-size: 14px;
+  padding: 0 20px;
+  cursor: pointer;
+}
+.requestMediaBox_HOoWc .actionRow_NMogH .confirm_1c35u:hover {
+  opacity: 0.7;
+}
+.outMeetingModalBox_24pEe {
+  width: 480px;
+  height: 170px;
+  border-radius: 12px;
+  padding: 24px;
+  padding-top: 30px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.outMeetingModalBox_24pEe .headRow_2ZRHv {
+  margin-bottom: 40px;
+}
+.outMeetingModalBox_24pEe .headRow_2ZRHv > svg {
+  width: 28px;
+  height: 28px;
+  color: #ffa519;
+  margin-right: 12px;
+  position: relative;
+  top: 7px;
+}
+.outMeetingModalBox_24pEe .headRow_2ZRHv .wording_TcMYU {
+  font-size: 16px;
+}
+.outMeetingModalBox_24pEe .actionRow_NMogH {
+  text-align: right;
+}
+.outMeetingModalBox_24pEe .actionRow_NMogH .btn_1fd3R {
+  display: inline-block;
+  padding: 8px 20px;
+  width: 104px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #2e73e5;
+  color: #fff;
+  cursor: pointer;
+}
+.outMeetingModalBox_24pEe .actionRow_NMogH .btn_1fd3R:hover {
+  opacity: 0.7;
+}
+.inRecordingDialogBox_1Rmfm,
+.endRecordingDialogBox_2Wz20 {
+  width: 380px;
+  height: 162px;
+  border-radius: 12px;
+  padding: 20px 24px;
+  padding-top: 15px;
+  background-color: #fff;
+  position: absolute;
+  top: 135px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.16);
+  pointer-events: auto;
+}
+.inRecordingDialogBox_1Rmfm .headerRow_2753X,
+.endRecordingDialogBox_2Wz20 .headerRow_2753X {
+  margin-bottom: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #0c1024;
+  text-align: left;
+}
+.inRecordingDialogBox_1Rmfm .headerRow_2753X > svg,
+.endRecordingDialogBox_2Wz20 .headerRow_2753X > svg {
+  margin-right: 8px;
+  position: relative;
+  top: 7px;
+  color: #2e73e5;
+}
+.inRecordingDialogBox_1Rmfm .bodyRow__0o5c,
+.endRecordingDialogBox_2Wz20 .bodyRow__0o5c {
+  padding-left: 33px;
+  font-size: 14px;
+  color: #616371;
+  margin-bottom: 16px;
+  text-align: left;
+}
+.inRecordingDialogBox_1Rmfm .footerRow_1VCfS,
+.endRecordingDialogBox_2Wz20 .footerRow_1VCfS {
+  display: flex;
+  justify-content: flex-end;
+}
+.inRecordingDialogBox_1Rmfm .footerRow_1VCfS .confirm_1c35u,
+.endRecordingDialogBox_2Wz20 .footerRow_1VCfS .confirm_1c35u {
+  min-width: 56px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #2e73e5;
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  padding: 5px 12px;
+  cursor: pointer;
+}
+.inRecordingDialogBox_1Rmfm .footerRow_1VCfS .confirm_1c35u:hover,
+.endRecordingDialogBox_2Wz20 .footerRow_1VCfS .confirm_1c35u:hover {
+  opacity: 0.7;
+}
+.inRecordingDialogBox_1Rmfm .footerRow_1VCfS .confirm_1c35u:active,
+.endRecordingDialogBox_2Wz20 .footerRow_1VCfS .confirm_1c35u:active {
+  opacity: 1;
+  background-color: #1d56bf;
+}
+.endRecordingDialogBox_2Wz20 {
+  height: 152px;
 }
-.noPermissionJoinBox_2qDRl {
+.endRecordingDialogBox_2Wz20 .bodyRow__0o5c {
+  padding-left: 0px;
+}
+.inRecordingFirstModalBox_3uFfF {
   width: 480px;
-  height: 170px;
+  height: 205px;
   border-radius: 12px;
   padding: 24px;
   background-color: #fff;
@@ -11362,135 +11787,174 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.noPermissionJoinBox_2qDRl .headRow_2ZRHv {
-  margin-bottom: 50px;
+.inRecordingFirstModalBox_3uFfF .headerRow_2753X {
+  margin-bottom: 8px;
+  font-size: 20px;
+  font-weight: 500;
 }
-.noPermissionJoinBox_2qDRl .headRow_2ZRHv > svg {
-  width: 28px;
-  height: 28px;
-  color: #ffa519;
+.inRecordingFirstModalBox_3uFfF .headerRow_2753X > svg {
   margin-right: 12px;
   position: relative;
-  top: 7px;
+  top: 4px;
+  color: #ffa519;
 }
-.noPermissionJoinBox_2qDRl .headRow_2ZRHv .wording_TcMYU {
-  font-weight: 500;
-  font-size: 20px;
+.inRecordingFirstModalBox_3uFfF .bodyRow__0o5c {
+  padding-left: 35px;
+  font-size: 14px;
+  margin-bottom: 24px;
 }
-.noPermissionJoinBox_2qDRl .actionRow_NMogH {
-  text-align: right;
+.inRecordingFirstModalBox_3uFfF .bodyRow__0o5c .text_1QVqg {
+  color: #616371;
+  margin-bottom: 8px;
 }
-.noPermissionJoinBox_2qDRl .actionRow_NMogH .btn_1fd3R {
-  display: inline-block;
+.inRecordingFirstModalBox_3uFfF .bodyRow__0o5c .reminder_1-FNE {
+  color: #0c1024;
+}
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS {
+  display: flex;
+  justify-content: flex-end;
+}
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .cancel_2SaBS {
+  min-width: 72px;
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #dbdbde;
+  background-color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-right: 12px;
   padding: 8px 20px;
-  width: 104px;
+  cursor: pointer;
+}
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .cancel_2SaBS:hover {
+  opacity: 0.7;
+  color: #2e73e5;
+  border-color: #2e73e5;
+}
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .cancel_2SaBS:active {
+  opacity: 1;
+  color: #1d56bf;
+  border-color: #1d56bf;
+}
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .confirm_1c35u {
+  min-width: 72px;
   height: 40px;
   border-radius: 4px;
   background-color: #2e73e5;
   color: #fff;
+  text-align: center;
+  font-size: 16px;
+  padding: 8px 20px;
   cursor: pointer;
 }
-.noPermissionJoinBox_2qDRl .actionRow_NMogH .btn_1fd3R:hover {
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .confirm_1c35u:hover {
   opacity: 0.7;
 }
-.requestMediaBox_HOoWc {
-  width: 480px;
-  height: 170px;
-  border-radius: 12px;
-  padding: 24px;
+.inRecordingFirstModalBox_3uFfF .footerRow_1VCfS .confirm_1c35u:active {
+  opacity: 1;
+  background-color: #1d56bf;
+}
+.inRecordingDialogBoxPhone_1StKI {
+  width: 359px;
+  height: 105px;
+  padding: 16px;
+  border-radius: 8px;
   background-color: #fff;
+  display: flex;
   position: absolute;
-  top: 50%;
+  top: 65px;
   left: 50%;
   transform: translate(-50%, -50%);
+  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.16);
+  pointer-events: auto;
 }
-.requestMediaBox_HOoWc .headRow_2ZRHv {
-  margin-bottom: 50px;
+.inRecordingDialogBoxPhone_1StKI .iconCol_1DVly {
+  width: 24px;
+  margin-right: 8px;
+  color: #2e73e5;
 }
-.requestMediaBox_HOoWc .headRow_2ZRHv > svg {
-  width: 28px;
-  height: 28px;
-  color: #ffa519;
+.inRecordingDialogBoxPhone_1StKI .contentCol_3Ex4j {
+  width: 203px;
   margin-right: 12px;
-  position: relative;
-  top: 7px;
-}
-.requestMediaBox_HOoWc .headRow_2ZRHv .wording_TcMYU {
-  font-weight: 500;
-  font-size: 20px;
 }
-.requestMediaBox_HOoWc .actionRow_NMogH {
-  text-align: right;
+.inRecordingDialogBoxPhone_1StKI .contentCol_3Ex4j > div:first-child {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
 }
-.requestMediaBox_HOoWc .actionRow_NMogH .cancel_2SaBS {
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  border: 1px solid #e6e7e9;
-  border-radius: 4px;
-  display: inline-block;
+.inRecordingDialogBoxPhone_1StKI .contentCol_3Ex4j > div:last-child {
   font-size: 14px;
-  padding: 0 20px;
-  margin-right: 12px;
-  cursor: pointer;
+  color: #616371;
 }
-.requestMediaBox_HOoWc .actionRow_NMogH .cancel_2SaBS:hover {
-  opacity: 0.7;
+.inRecordingDialogBoxPhone_1StKI .btnCol_1zhks {
+  align-self: center;
 }
-.requestMediaBox_HOoWc .actionRow_NMogH .confirm_1c35u {
-  height: 40px;
-  line-height: 40px;
+.inRecordingDialogBoxPhone_1StKI .btnCol_1zhks .confirm_1c35u {
+  min-width: 80px;
+  height: 32px;
   border-radius: 4px;
-  color: #fff;
   background-color: #2e73e5;
+  color: #fff;
   text-align: center;
-  display: inline-block;
   font-size: 14px;
-  padding: 0 20px;
+  padding: 5px 12px;
   cursor: pointer;
 }
-.requestMediaBox_HOoWc .actionRow_NMogH .confirm_1c35u:hover {
+.inRecordingDialogBoxPhone_1StKI .btnCol_1zhks .confirm_1c35u:hover {
   opacity: 0.7;
 }
-.outMeetingModalBox_24pEe {
-  width: 480px;
-  height: 170px;
-  border-radius: 12px;
-  padding: 24px;
-  padding-top: 30px;
+.inRecordingDialogBoxPhone_1StKI .btnCol_1zhks .confirm_1c35u:active {
+  opacity: 1;
+  background-color: #1d56bf;
+}
+.endRecordingDialogBoxPhone_157qn {
+  width: 359px;
+  height: 105px;
+  padding: 16px;
+  border-radius: 8px;
   background-color: #fff;
+  display: flex;
   position: absolute;
-  top: 50%;
+  top: 65px;
   left: 50%;
   transform: translate(-50%, -50%);
+  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.16);
+  pointer-events: auto;
 }
-.outMeetingModalBox_24pEe .headRow_2ZRHv {
-  margin-bottom: 40px;
-}
-.outMeetingModalBox_24pEe .headRow_2ZRHv > svg {
-  width: 28px;
-  height: 28px;
-  color: #ffa519;
+.endRecordingDialogBoxPhone_157qn .contentCol_3Ex4j {
+  width: 235px;
   margin-right: 12px;
-  position: relative;
-  top: 7px;
 }
-.outMeetingModalBox_24pEe .actionRow_NMogH {
-  text-align: right;
+.endRecordingDialogBoxPhone_157qn .contentCol_3Ex4j > div:first-child {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 5px;
 }
-.outMeetingModalBox_24pEe .actionRow_NMogH .btn_1fd3R {
-  display: inline-block;
-  padding: 8px 20px;
-  width: 104px;
-  height: 40px;
+.endRecordingDialogBoxPhone_157qn .contentCol_3Ex4j > div:last-child {
+  font-size: 14px;
+  color: #616371;
+}
+.endRecordingDialogBoxPhone_157qn .btnCol_1zhks {
+  align-self: center;
+}
+.endRecordingDialogBoxPhone_157qn .btnCol_1zhks .confirm_1c35u {
+  min-width: 80px;
+  height: 32px;
   border-radius: 4px;
   background-color: #2e73e5;
   color: #fff;
+  text-align: center;
+  font-size: 14px;
+  padding: 5px 12px;
   cursor: pointer;
 }
-.outMeetingModalBox_24pEe .actionRow_NMogH .btn_1fd3R:hover {
+.endRecordingDialogBoxPhone_157qn .btnCol_1zhks .confirm_1c35u:hover {
   opacity: 0.7;
 }
+.endRecordingDialogBoxPhone_157qn .btnCol_1zhks .confirm_1c35u:active {
+  opacity: 1;
+  background-color: #1d56bf;
+}
 
 .phoneModal_3GV2w {
   width: 278px;
@@ -11930,12 +12394,36 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.detailHeader_3WPRu .divideBar_SIa3i {
+  width: 340px;
+  height: 8px;
+  background-color: #f5f6f6;
+}
 .detailHeader_3WPRu .gengduo_1s9fD {
   position: absolute;
   top: 90px;
   right: 20px;
   cursor: pointer;
 }
+.detailBody_1gbNu .noContentBox_2GNb0 {
+  width: 300px;
+  height: 169px;
+  margin: 6px auto;
+  position: relative;
+  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.detailBody_1gbNu .noContentBox_2GNb0 > img {
+  width: 140px;
+  margin-bottom: 5px;
+}
+.detailBody_1gbNu .noContentBox_2GNb0 > span {
+  font-size: 14px;
+  color: #616371;
+}
 .detailBody_1gbNu .transitioning_RA1-t {
   width: 300px;
   height: 169px;
@@ -11969,17 +12457,17 @@
   margin: auto;
   top: 70px;
 }
-.detailBody_1gbNu .audioRoot_2OUiT {
+.detailBody_1gbNu .videoRoot_3aLGI {
   width: 300px;
   height: 169px;
   margin: 0px auto;
   display: flex;
   position: relative;
 }
-.detailBody_1gbNu .audioRoot_2OUiT audio {
+.detailBody_1gbNu .videoRoot_3aLGI audio {
   visibility: hidden;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .pan_1LkIl {
+.detailBody_1gbNu .videoRoot_3aLGI .pan_1LkIl {
   position: absolute;
   left: 36.5%;
   top: 16%;
@@ -11987,7 +12475,7 @@
   height: 110px;
   pointer-events: none;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .disk_3AvtH {
+.detailBody_1gbNu .videoRoot_3aLGI .disk_3AvtH {
   position: absolute;
   left: 41.2%;
   top: 32%;
@@ -11995,7 +12483,7 @@
   height: 56px;
   pointer-events: none;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .bar_n_qnp {
+.detailBody_1gbNu .videoRoot_3aLGI .bar_n_qnp {
   position: absolute;
   left: 67%;
   top: 29%;
@@ -12006,7 +12494,7 @@
   height: 51px;
   pointer-events: none;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX {
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX {
   position: absolute;
   left: 0;
   right: 0;
@@ -12014,32 +12502,143 @@
   height: 48px;
   background: linear-gradient(to bottom, rgba(27, 37, 100, 0.03), rgba(22, 39, 89, 0.4));
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX.fade_2honF {
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX.fade_2honF {
   opacity: 0;
   transition: opacity 0.5s;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX .top_q8j5x {
-  height: 20px;
-  padding: 2px 12px 0 18px;
-  display: flex;
-  flex-direction: row;
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX .top_q8j5x {
+  height: 20px;
+  padding: 2px 12px 0 18px;
+  display: flex;
+  flex-direction: row;
+}
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX .top_q8j5x .progress_3B7Ss {
+  flex: 1;
+}
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX .top_q8j5x .time_2_AWs {
+  margin-left: 14px;
+}
+.detailBody_1gbNu .videoRoot_3aLGI .audioCtrl_3rlGX .bottom_1sBX8 {
+  height: 28px;
+  padding: 0 8px 4px 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.detailBody_1gbNu .navBar_2me9x {
+  display: flex;
+  justify-content: space-between;
+  width: 300px;
+  margin: 8px auto;
+  height: 32px;
+  align-items: center;
+  position: relative;
+}
+.detailBody_1gbNu .navBar_2me9x .xiazaiIconBox_1rOmi {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+}
+.detailBody_1gbNu .navBar_2me9x .xiazaiIconBox_1rOmi.bg_3GbR_ {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.detailBody_1gbNu .navBar_2me9x .xiazaiIconBox_1rOmi > svg {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ {
+  cursor: pointer;
+  border-radius: 4px;
+  width: 110px;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_.bg_3GbR_ {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_.unclickable_3q8V6 {
+  pointer-events: none;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ > svg {
+  width: 8px;
+  height: 8px;
+  margin-left: 2px;
+  position: relative;
+  bottom: 2px;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ > svg.gray_3440t {
+  color: #c2c3c8;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9 {
+  position: absolute;
+  z-index: 1;
+  width: 136px;
+  max-height: 256px;
+  background-color: #fff;
+  padding: 8px 0;
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  margin-top: 8px;
+  text-align: left;
+  overflow: auto;
+  scrollbar-color: var(--upime-scrollbar-thumb) transparent;
+  scrollbar-width: thin;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9::-webkit-scrollbar {
+  width: 4px;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background-color: transparent;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: var(--upime-scrollbar-thumb);
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9 .videoItem_2FJGS {
+  height: 40px;
+  padding: 9px 16px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.detailBody_1gbNu .navBar_2me9x .selectBox_2SG4_ .videoNavListBox_tOwT9 .videoItem_2FJGS:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+}
+.detailBody_1gbNu .navBar_2me9x .xiazaiBox_2OGPT {
+  position: absolute;
+  z-index: 1;
+  width: 155px;
+  max-height: 96px;
+  background-color: #fff;
+  padding: 8px 0;
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  right: 0;
+  top: 35px;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX .top_q8j5x .progress_3B7Ss {
-  flex: 1;
+.detailBody_1gbNu .navBar_2me9x .xiazaiBox_2OGPT .xiazaiItem_WBfsI {
+  height: 40px;
+  padding: 9px 16px;
+  font-size: 14px;
+  line-height: 22px;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX .top_q8j5x .time_2_AWs {
-  margin-left: 14px;
+.detailBody_1gbNu .navBar_2me9x .xiazaiBox_2OGPT .xiazaiItem_WBfsI:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+  cursor: pointer;
 }
-.detailBody_1gbNu .audioRoot_2OUiT .audioCtrl_3rlGX .bottom_1sBX8 {
-  height: 28px;
-  padding: 0 8px 4px 8px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.detailBody_1gbNu .navBar_2me9x .xiazaiBox_2OGPT .xiazaiItem_WBfsI.disable_3jlK5 {
+  color: #c2c3c8;
 }
 .textContainer_1JELQ {
   position: relative;
-  height: calc(100% - 365px);
+  height: calc(100% - 420px);
 }
 .textContainer_1JELQ .audio2text_3UbiK {
   width: 300px;
@@ -12475,6 +13074,9 @@
   top: 50% !important;
   transform: translate(248px, -50%) !important;
 }
+.root_1Xg0h.hide_vbNDq {
+  visibility: hidden;
+}
 .container_1IWYf {
   display: flex;
   flex-direction: column;
@@ -12557,7 +13159,8 @@
   width: 60px;
   height: 60px;
 }
-.footer_3547E {
+.footer_3547E,
+.header_2erQi {
   position: absolute;
   width: 100%;
   bottom: 0px;
@@ -12567,7 +13170,8 @@
   justify-content: space-between;
   align-items: center;
 }
-.footer_3547E > span {
+.footer_3547E > span,
+.header_2erQi > span {
   max-width: 180px;
   height: 18px;
   font-size: 12px;
@@ -12578,6 +13182,43 @@
   overflow: hidden;
   margin-left: 8px;
 }
+.footer_3547E .shareIconBox_2jHFz,
+.header_2erQi .shareIconBox_2jHFz {
+  display: inline-block;
+  border-radius: 2px;
+  background-color: #00c78b;
+  margin-right: 4px;
+  width: 18px;
+  height: 18px;
+}
+.footer_3547E .shareIconBox_2jHFz > svg,
+.header_2erQi .shareIconBox_2jHFz > svg {
+  font-size: 14px;
+  margin-right: 4px;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+.header_2erQi {
+  height: 100%;
+  top: 16px;
+  align-items: flex-start;
+}
+.header_2erQi > span {
+  position: absolute;
+  font-size: 16px;
+  height: 24px;
+  max-width: 300px;
+}
+.header_2erQi > span > span {
+  position: relative;
+  bottom: 7px;
+}
+.header_2erQi .shareIconBox_2jHFz {
+  margin-left: 4px;
+  position: relative;
+  bottom: 7px;
+}
 .micIconContainer_31rri {
   height: 20px;
   width: 20px;
@@ -12597,6 +13238,56 @@
   width: 100%;
   height: 100%;
 }
+.coverContainer_3El0F {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(48, 52, 69, 0.9);
+  top: 0;
+}
+.coverContainer_3El0F .title_1Ow65 {
+  color: #fff;
+  text-align: center;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 30px;
+  margin-top: 22%;
+  margin-bottom: 4px;
+}
+.coverContainer_3El0F .subtitle_bbjxr {
+  color: #fff;
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+  margin-bottom: 40px;
+}
+.coverContainer_3El0F .actionRow_Ip0zs {
+  text-align: center;
+  color: #fff;
+}
+.coverContainer_3El0F .actionRow_Ip0zs .continueBtn_3BQis {
+  display: inline-block;
+  margin-right: 20px;
+  border-radius: 4px;
+  height: 36px;
+  text-align: center;
+  font-size: 14px;
+  padding: 7px 12px;
+  min-width: 72px;
+  cursor: pointer;
+  background-color: #2e73e5;
+}
+.coverContainer_3El0F .actionRow_Ip0zs .stopBtn_3hPDG {
+  display: inline-block;
+  border-radius: 4px;
+  height: 36px;
+  text-align: center;
+  font-size: 14px;
+  padding: 7px 12px;
+  min-width: 72px;
+  cursor: pointer;
+  border: 1px solid #DBDBDE;
+}
 .avatarContainer_ddIku {
   position: absolute;
   display: flex;
@@ -12650,44 +13341,270 @@
   top: 8px;
   right: 46px;
 }
+.maxIconCon_nHwM3 {
+  position: absolute;
+  top: 8px;
+  right: 85px;
+}
+.maxIconCon_nHwM3 svg {
+  width: 22px;
+  height: 22px;
+}
 .detachedContent_2zd4L {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.detachedContent_2zd4L svg {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 8px;
+  color: var(--upime-second-text);
+}
+.detachedContent_2zd4L span {
+  color: var(--upime-second-text);
+  line-height: 17px;
+  font-size: 12px;
+}
+.topLeftFloat_1mG7E {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  background: var(--upime-active);
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topLeftFloat_1mG7E svg {
+  width: 14px;
+  height: 14px;
+  color: white;
+}
+
+.moreCtrlBox_3H5ND {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.moreCtrlBox_3H5ND svg {
+  font-size: 24px;
+  margin-top: 5px;
+  width: 22px;
+  height: 22px;
+}
+.moreCtrlBox_3H5ND span {
+  line-height: 18px;
+  height: 18px;
+  font-size: 10px;
+  margin-top: 2px;
+  color: #303445;
+}
+.moreCtrlBox_3H5ND:hover {
+  background-color: var(--upime-btn-bg-hover);
+}
+.moreCtrlBox_3H5ND.miniMode_1ompl {
+  height: 24px;
+  width: 15px;
+  margin-left: 2px;
+  margin-right: 10px;
+}
+.moreCtrlBox_3H5ND.miniMode_1ompl > svg {
+  margin-top: 0;
+}
+.shareCtrlBox_2QMHf {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0 16px;
+}
+.shareCtrlBox_2QMHf svg {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+.shareCtrlBox_2QMHf span {
+  line-height: 18px;
+  height: 18px;
+  font-size: 14px;
+  margin-top: 2px;
+  color: #303445;
+}
+.shareCtrlBox_2QMHf .red_1MnrZ {
+  color: #fe5250;
+}
+.shareCtrlBox_2QMHf.disabled_3_fmK {
+  color: #c2c3c8;
+}
+.shareCtrlBox_2QMHf.disabled_3_fmK span {
+  color: #c2c3c8;
+}
+.shareCtrlBox_2QMHf:hover {
+  background-color: var(--upime-btn-bg-hover);
+}
+.panelRoot_2VoAv {
+  width: 168px;
+  max-height: 96px;
+  bottom: 60px;
+  top: auto;
+  top: initial;
+  padding: 8px 0px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+}
+.panelRoot_2VoAv .row_zfvlt {
+  width: 100%;
+}
+.panelRoot_2VoAv.miniMode_1ompl {
+  bottom: 34px;
+}
+.screenShareWidgetBox_3DBJ5 {
+  position: absolute;
+  bottom: 66px;
+  transform: translate(-50%);
+  left: 50%;
+  max-width: 190px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 6px 12px;
+  border: 1px solid #c2c3c8;
+  border-bottom: none;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.screenShareWidgetBox_3DBJ5 > svg {
+  color: #00c78b;
+  font-size: 14px;
+  margin-right: 4px;
+  position: relative;
+  top: 3px;
+}
+.screenShareWidgetBox_3DBJ5 .stopBox_1mTkG {
+  color: #fe5250;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.screenShareWidgetBox_3DBJ5.miniMode_1ompl {
+  bottom: 40px;
+}
+.screenShareWidgetBox_3DBJ5.phoneMode_3fKSg {
+  bottom: 59px;
+}
+.shareWarningModal_UVO8o {
+  width: 432px;
+  padding: 40px 24px;
+  padding-bottom: 24px;
+  border-radius: 12px;
+  background-color: #fff;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.shareWarningModal_UVO8o .wordingBox_21dBN {
+  display: flex;
+  margin-bottom: 24px;
+}
+.shareWarningModal_UVO8o .wordingBox_21dBN > svg {
+  color: #ffa519;
+  margin-right: 12px;
+  font-size: 28px;
+}
+.shareWarningModal_UVO8o .actionBtn_2cCU1 {
+  width: 104px;
+  border-radius: 4px;
+  text-align: center;
+  background-color: #2e73e5;
+  color: #fff;
+  line-height: 40px;
+  margin: auto;
+  margin-right: 0px;
+  cursor: pointer;
+  font-size: 16px;
+}
+.shareChangeModal_3rnvO,
+.permissionDenyModal_im1cP {
+  width: 432px;
+  padding: 24px;
+  border-radius: 12px;
+  background-color: #fff;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
-.detachedContent_2zd4L svg {
-  width: 36px;
-  height: 36px;
+.shareChangeModal_3rnvO .wordingBox_21dBN,
+.permissionDenyModal_im1cP .wordingBox_21dBN {
+  display: flex;
   margin-bottom: 8px;
-  color: var(--upime-second-text);
 }
-.detachedContent_2zd4L span {
-  color: var(--upime-second-text);
-  line-height: 17px;
-  font-size: 12px;
+.shareChangeModal_3rnvO .wordingBox_21dBN > svg,
+.permissionDenyModal_im1cP .wordingBox_21dBN > svg {
+  color: #ffa519;
+  margin-right: 12px;
+  font-size: 28px;
 }
-.topLeftFloat_1mG7E {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  background: var(--upime-active);
-  width: 20px;
-  height: 20px;
-  border-radius: 2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.shareChangeModal_3rnvO .wordingBox_21dBN > span,
+.permissionDenyModal_im1cP .wordingBox_21dBN > span {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
 }
-.topLeftFloat_1mG7E svg {
-  width: 14px;
-  height: 14px;
-  color: white;
+.shareChangeModal_3rnvO .subtitle_19eNG,
+.permissionDenyModal_im1cP .subtitle_19eNG {
+  font-size: 14px;
+  color: #616371;
+  margin-left: 36px;
+  margin-bottom: 24px;
+}
+.shareChangeModal_3rnvO .actionRow_2FRj9,
+.permissionDenyModal_im1cP .actionRow_2FRj9 {
+  text-align: right;
+}
+.shareChangeModal_3rnvO .actionRow_2FRj9 .cancel_ZRWbj,
+.permissionDenyModal_im1cP .actionRow_2FRj9 .cancel_ZRWbj {
+  min-width: 72px;
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #dbdbde;
+  text-align: center;
+  padding: 8px 20px;
+  display: inline-block;
+  margin-right: 12px;
+  cursor: pointer;
+}
+.shareChangeModal_3rnvO .actionRow_2FRj9 .confirm_tzeAF,
+.permissionDenyModal_im1cP .actionRow_2FRj9 .confirm_tzeAF {
+  min-width: 72px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #2e73e5;
+  padding: 8px 20px;
+  color: #fff;
+  display: inline-block;
+  cursor: pointer;
 }
 
 .root_3UKyn {
@@ -13090,6 +14007,12 @@
   align-items: center;
   cursor: pointer;
 }
+.toolbar_1Y3X_ .moreApps_4PfYv .moreAppBtnCon_38AtV.moreAppBtnConDisable_1bD2p {
+  pointer-events: none;
+}
+.toolbar_1Y3X_ .moreApps_4PfYv .moreAppBtnCon_38AtV.moreAppBtnConDisable_1bD2p > svg {
+  color: #D8D8D8 !important;
+}
 .toolbar_1Y3X_ .moreApps_4PfYv .moreAppBtnCon_38AtV > svg {
   color: var(--upime-main-text) !important;
 }
@@ -14632,24 +15555,28 @@
 .members_1g6ZC {
   display: flex;
   justify-content: space-around;
-  padding-left: 4px;
-  padding-right: 16px;
+  margin-left: 4px;
+  margin-right: 10px;
   transition: all 0.38s;
+  height: 100%;
+  position: relative;
 }
 .members_1g6ZC.none_1qr0Z {
-  padding-right: 0;
+  margin-right: 0;
 }
 .members_1g6ZC .member_1lOqZ {
   flex-grow: 0;
   flex-shrink: 1;
   min-width: 20px;
-  position: relative;
-}
-.members_1g6ZC .member_1lOqZ > * {
+  display: flex;
+  align-items: center;
   position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  top: 0;
+  bottom: 0;
+  transition: all 0.2s;
+}
+.members_1g6ZC .member_1lOqZ.animate_2EJ7i {
+  animation: showFromRight_3wrOK 0.2s ease-in-out;
 }
 .members_1g6ZC .member_1lOqZ.more_btn_1yvE6 {
   cursor: pointer;
@@ -14660,6 +15587,14 @@
   height: 34px;
   border: 2px solid white;
 }
+@keyframes showFromRight_3wrOK {
+  from {
+    left: var(--aniRight);
+  }
+  to {
+    left: 0;
+  }
+}
 .more_list_cI0aj,
 .self_info_3HiOQ,
 .follow_list_3iGI8 {
@@ -14739,7 +15674,7 @@
   margin-top: 16px;
   width: 100%;
   height: 1px;
-  background-color: #DBDBDE;
+  background-color: #dbdbde;
 }
 .self_info_3HiOQ .follow_me_btn_2KIVe {
   display: flex;
@@ -15237,6 +16172,15 @@
   position: relative;
   cursor: pointer;
 }
+.iconContainer_nKIMh.phone_Y15oY {
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  pointer-events: auto;
+}
+.iconContainer_nKIMh.phone_Y15oY > svg {
+  font-size: 18px;
+}
 .iconContainer_nKIMh.large_356V- {
   width: 44px !important;
   height: 44px !important;
@@ -15251,13 +16195,49 @@
   pointer-events: none;
   color: var(--upime-disable);
 }
+.inMeetingIconBox_1NODt {
+  width: 88px;
+  height: 42px;
+  border-radius: 999px;
+  background-color: #fff;
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: auto;
+  position: relative;
+}
+.inMeetingIconBox_1NODt .yinshipin_1repu {
+  width: 20px;
+  height: 20px;
+  color: #2e73e5;
+}
+.inMeetingIconBox_1NODt .divider_2XL3- {
+  width: 1px;
+  height: 20px;
+  background-color: #e6e7e9;
+  margin: 0 12px;
+}
+.inMeetingIconBox_1NODt::before {
+  content: "";
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--upime-active);
+  top: 5px;
+  left: 17px;
+}
+.inMeetingIconBox_1NODt.redDot_B-t28::before {
+  background-color: #FE5250;
+}
 .icon_1r2tg {
   margin: 0 8px;
 }
 .tingzhiIcon_1_vlb {
   color: #FE5250;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
 }
 .inMeeting_1Ev94::before {
   content: "";
@@ -15269,6 +16249,9 @@
   top: 6px;
   left: 16px;
 }
+.meetingRecording_2KG6D::before {
+  background-color: #fe5250;
+}
 .meetingsNumContainer_2T2V3 {
   border: 1px solid white;
   border-radius: 8px;
@@ -16854,7 +17837,7 @@
   bottom: 8px;
   display: flex;
   flex-direction: row;
-  height: 70px;
+  height: 60px;
   padding: 6px 12px 6px 0px;
   background-color: var(--upime-pane-bg);
   border-radius: 4px;
@@ -17028,6 +18011,7 @@
 .deviceCtrlRoot_231_v {
   display: flex;
   position: relative;
+  align-items: center;
 }
 .deviceCtrlRoot_231_v.disabled_2Y8oy {
   pointer-events: none;
@@ -17050,8 +18034,8 @@
   left: 30px;
 }
 .iconBox_23xDz {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17065,23 +18049,25 @@
 .iconBox_23xDz svg {
   font-size: 24px;
   margin-top: 5px;
+  width: 22px;
+  height: 22px;
 }
 .iconBox_23xDz .span_1UyaD {
   line-height: 18px;
   height: 18px;
-  font-size: 12px;
-  margin-top: 4px;
+  font-size: 10px;
+  margin-top: 2px;
   color: #303445;
 }
 .iconBox_23xDz .volume_25fkt {
   position: absolute;
-  bottom: 35px;
+  bottom: 30px;
   left: 50%;
   transform: translate(-50%);
   background: #05caae;
   transition: height 0.1s ease;
   border-radius: 4px;
-  width: 6px;
+  width: 4px;
 }
 .iconBox_23xDz .volume_25fkt.hide_2jds4 {
   display: none;
@@ -17324,14 +18310,13 @@
 }
 
 .iconBox_2k5ro {
-  min-width: 56px;
-  height: 56px;
+  min-width: 48px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-radius: 4px;
   cursor: pointer;
-  margin: 0 8px;
 }
 .iconBox_2k5ro.host_11RzI {
   min-width: 72px;
@@ -17339,12 +18324,14 @@
 .iconBox_2k5ro svg {
   font-size: 24px;
   margin-top: 5px;
+  width: 22px;
+  height: 22px;
 }
 .iconBox_2k5ro span {
   line-height: 18px;
   height: 18px;
-  font-size: 12px;
-  margin-top: 4px;
+  font-size: 10px;
+  margin-top: 2px;
   color: #303445;
   white-space: nowrap;
 }
@@ -17594,6 +18581,13 @@
   text-overflow: ellipsis;
   display: block;
 }
+.root_dZL59 .textBlock_2cgjN .name_2qIXx > svg {
+  font-size: 14px;
+  position: relative;
+  top: 3px;
+  color: #00c78b;
+  margin-right: 4px;
+}
 .root_dZL59 .textBlock_2cgjN .name_2qIXx em {
   font-style: inherit !important;
 }
@@ -17662,9 +18656,15 @@
 }
 .kickoutModalBox_2Lmr9 .title_1ADvG {
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   margin-bottom: 8px;
 }
+.kickoutModalBox_2Lmr9 .title_1ADvG > svg {
+  color: #fe5250;
+  position: relative;
+  top: 4px;
+  margin-right: 12px;
+}
 .kickoutModalBox_2Lmr9 .tip_YkChF {
   font-size: 14px;
   color: #616371;
@@ -17720,8 +18720,8 @@
   flex-grow: 1;
 }
 .iconBox_mLq0s {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17732,12 +18732,14 @@
 .iconBox_mLq0s svg {
   font-size: 24px;
   margin-top: 5px;
+  width: 22px;
+  height: 22px;
 }
 .iconBox_mLq0s span {
   line-height: 18px;
   height: 18px;
-  font-size: 12px;
-  margin-top: 4px;
+  font-size: 10px;
+  margin-top: 2px;
   color: #303445;
 }
 .iconBox_mLq0s.phone_1N_tw {
@@ -17802,7 +18804,7 @@
 
 .iconBox_2U1MR {
   width: 56px;
-  height: 56px;
+  height: 48px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -17815,34 +18817,159 @@
   height: 24px;
   margin-left: 12px;
 }
-.iconBox_2U1MR.mini_3ert9 svg {
-  font-size: 20px;
-  margin: auto;
+.iconBox_2U1MR.mini_3ert9 svg {
+  font-size: 20px;
+  margin: auto;
+}
+.iconBox_2U1MR.phoneItem_3j52G {
+  width: auto;
+  height: auto;
+}
+.iconBox_2U1MR.phoneItem_3j52G svg {
+  margin-top: 0;
+}
+.iconBox_2U1MR.landscape_3CRk1 {
+  flex-grow: 1;
+}
+.iconBox_2U1MR svg {
+  font-size: 22px;
+  margin-top: 5px;
+}
+.iconBox_2U1MR span {
+  line-height: 18px;
+  height: 18px;
+  font-size: 10px;
+  margin-top: 2px;
+  color: #303445;
+  white-space: nowrap;
+}
+.do-hovers .iconBox_2U1MR:hover {
+  background-color: var(--upime-btn-bg-hover);
+}
+
+.recordBox_1w_T6 {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 0 16px;
+}
+.recordBox_1w_T6 svg {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+.recordBox_1w_T6 .wording_3gEM0 {
+  line-height: 18px;
+  height: 18px;
+  font-size: 14px;
+  margin-top: 2px;
+  color: #303445;
+}
+.recordBox_1w_T6.phone__bEwN {
+  width: auto;
+  height: auto;
+}
+.recordBox_1w_T6.phone__bEwN svg {
+  margin-top: 0;
+}
+.recordBox_1w_T6:hover {
+  background-color: var(--upime-btn-bg-hover);
+}
+.recordConfirmModal_1bduL,
+.openAudioModal_1lZHw,
+.endRecordConfirmModal_3cpua {
+  width: 480px;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.recordConfirmModal_1bduL .headerRow_AuASu,
+.openAudioModal_1lZHw .headerRow_AuASu,
+.endRecordConfirmModal_3cpua .headerRow_AuASu {
+  margin-bottom: 8px;
+  font-size: 20px;
+  font-weight: 500;
+}
+.recordConfirmModal_1bduL .headerRow_AuASu > svg,
+.openAudioModal_1lZHw .headerRow_AuASu > svg,
+.endRecordConfirmModal_3cpua .headerRow_AuASu > svg {
+  margin-right: 12px;
+  position: relative;
+  top: 4px;
+  color: #ffa519;
+}
+.recordConfirmModal_1bduL .bodyRow_3KPZ0,
+.openAudioModal_1lZHw .bodyRow_3KPZ0,
+.endRecordConfirmModal_3cpua .bodyRow_3KPZ0 {
+  padding-left: 35px;
+  font-size: 14px;
+  color: #616371;
+  margin-bottom: 24px;
 }
-.iconBox_2U1MR.phoneItem_3j52G {
-  width: auto;
-  height: auto;
+.recordConfirmModal_1bduL .footerRow_2-U7l,
+.openAudioModal_1lZHw .footerRow_2-U7l,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l {
+  display: flex;
+  justify-content: flex-end;
 }
-.iconBox_2U1MR.phoneItem_3j52G svg {
-  margin-top: 0;
+.recordConfirmModal_1bduL .footerRow_2-U7l .cancel_30AJx,
+.openAudioModal_1lZHw .footerRow_2-U7l .cancel_30AJx,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .cancel_30AJx {
+  min-width: 72px;
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #dbdbde;
+  background-color: #fff;
+  text-align: center;
+  font-size: 16px;
+  margin-right: 12px;
+  padding: 8px 20px;
+  cursor: pointer;
 }
-.iconBox_2U1MR.landscape_3CRk1 {
-  flex-grow: 1;
+.recordConfirmModal_1bduL .footerRow_2-U7l .cancel_30AJx:hover,
+.openAudioModal_1lZHw .footerRow_2-U7l .cancel_30AJx:hover,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .cancel_30AJx:hover {
+  opacity: 0.7;
+  color: #2e73e5;
+  border-color: #2e73e5;
 }
-.iconBox_2U1MR svg {
-  font-size: 24px;
-  margin-top: 5px;
+.recordConfirmModal_1bduL .footerRow_2-U7l .cancel_30AJx:active,
+.openAudioModal_1lZHw .footerRow_2-U7l .cancel_30AJx:active,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .cancel_30AJx:active {
+  opacity: 1;
+  color: #1d56bf;
+  border-color: #1d56bf;
 }
-.iconBox_2U1MR span {
-  line-height: 18px;
-  height: 18px;
-  font-size: 12px;
-  margin-top: 4px;
-  color: #303445;
-  white-space: nowrap;
+.recordConfirmModal_1bduL .footerRow_2-U7l .confirm_2sdOo,
+.openAudioModal_1lZHw .footerRow_2-U7l .confirm_2sdOo,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .confirm_2sdOo {
+  min-width: 72px;
+  height: 40px;
+  border-radius: 4px;
+  background-color: #2e73e5;
+  color: #fff;
+  text-align: center;
+  font-size: 16px;
+  padding: 8px 20px;
+  cursor: pointer;
 }
-.do-hovers .iconBox_2U1MR:hover {
-  background-color: var(--upime-btn-bg-hover);
+.recordConfirmModal_1bduL .footerRow_2-U7l .confirm_2sdOo:hover,
+.openAudioModal_1lZHw .footerRow_2-U7l .confirm_2sdOo:hover,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .confirm_2sdOo:hover {
+  opacity: 0.7;
+}
+.recordConfirmModal_1bduL .footerRow_2-U7l .confirm_2sdOo:active,
+.openAudioModal_1lZHw .footerRow_2-U7l .confirm_2sdOo:active,
+.endRecordConfirmModal_3cpua .footerRow_2-U7l .confirm_2sdOo:active {
+  opacity: 1;
+  background-color: #1d56bf;
 }
 
 .drawerContainer_pkx_K {
@@ -19698,10 +20825,147 @@
   height: 42px !important;
 }
 
+.modal_u0yh4 {
+  pointer-events: auto;
+  padding: 0px;
+  margin: 0px;
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+}
+.modal_u0yh4 * {
+  box-sizing: border-box;
+}
+.modal_u0yh4 .mask_u0yh4 {
+  background-color: rgba(0, 0, 0, 0.45);
+  height: 100%;
+  width: 100%;
+}
+.modal_u0yh4 .modal_content_u0yh4 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  padding: 24px;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+}
+.modal_u0yh4 .modal_header_u0yh4 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal_u0yh4 .modal_header_u0yh4 .modal_title_u0yh4 {
+  height: 28px;
+  font-size: 20px;
+  line-height: 28px;
+  color: #0c1024;
+  font-weight: 600;
+}
+.modal_u0yh4 .modal_header_u0yh4 .modal_close_u0yh4 {
+  color: #979797;
+  cursor: pointer;
+  font-size: 20px;
+}
+.modal_u0yh4 .modal_header_u0yh4 .modal_close_u0yh4:hover {
+  color: #2e73e5;
+}
+.modal_u0yh4 .modal_header_u0yh4 .modal_close_u0yh4 .close_u0yh4 {
+  width: 1em;
+  height: 1em;
+}
+.modal_u0yh4 .modal_body_u0yh4 {
+  padding: 0;
+}
+
 .icon_fR41U {
   fill: currentColor;
 }
 
+.tipRoot_fR41U {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+}
+.tipRoot_fR41U .content_fR41U {
+  position: absolute;
+  padding: 8px;
+  background: black;
+  font-size: 12px;
+  line-height: 18px;
+  color: white;
+  max-width: 184px;
+  width: -moz-max-content;
+  width: max-content;
+  border-radius: 2px;
+  word-wrap: break-word;
+}
+.tipRoot_fR41U .content_fR41U::after {
+  content: ' ';
+  position: absolute;
+  display: block;
+  width: 8px;
+  height: 8px;
+  background: black;
+  z-index: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.tipRoot_fR41U .content_fR41U.top_fR41U {
+  left: 50%;
+  bottom: calc(100% + 12px);
+  transform: translate(-50%, 0);
+}
+.tipRoot_fR41U .content_fR41U.top_fR41U::after {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%) rotate(45deg);
+}
+.tipRoot_fR41U .content_fR41U.left_fR41U {
+  top: 50%;
+  right: calc(100% + 12px);
+  transform: translate(0, -50%);
+}
+.tipRoot_fR41U .content_fR41U.left_fR41U::after {
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%) rotate(45deg);
+}
+.tipRoot_fR41U .content_fR41U.right_fR41U {
+  top: 50%;
+  left: calc(100% + 12px);
+  transform: translate(0, -50%);
+}
+.tipRoot_fR41U .content_fR41U.right_fR41U::after {
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.tipRoot_fR41U .content_fR41U.bottom_fR41U {
+  top: calc(100% + 12px);
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.tipRoot_fR41U .content_fR41U.bottom_fR41U::after {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.tipRoot_fR41U .content_fR41U.leftBottom_fR41U {
+  top: calc(100% + 12px);
+}
+.tipRoot_fR41U .content_fR41U.leftBottom_fR41U::after {
+  top: 0;
+  left: 25%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
 .titleBar_fR41U {
   display: flex;
   align-items: center;
@@ -19806,78 +21070,3 @@
   width: 24px;
   height: 24px;
 }
-
-.tipRoot_fR41U {
-  position: fixed;
-  z-index: 1000;
-  pointer-events: none;
-}
-.tipRoot_fR41U .content_fR41U {
-  position: absolute;
-  padding: 6px 8px;
-  background: black;
-  font-size: 12px;
-  color: white;
-  max-width: 200px;
-  width: max-content;
-  border-radius: 4px;
-  word-wrap: break-word;
-}
-.tipRoot_fR41U .content_fR41U::after {
-  content: ' ';
-  position: absolute;
-  display: block;
-  width: 8px;
-  height: 8px;
-  background: black;
-  z-index: 0;
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-.tipRoot_fR41U .content_fR41U.top_fR41U {
-  left: 50%;
-  bottom: calc(100% + 12px);
-  transform: translate(-50%, 0);
-}
-.tipRoot_fR41U .content_fR41U.top_fR41U::after {
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 50%) rotate(45deg);
-}
-.tipRoot_fR41U .content_fR41U.left_fR41U {
-  top: 50%;
-  right: calc(100% + 12px);
-  transform: translate(0, -50%);
-}
-.tipRoot_fR41U .content_fR41U.left_fR41U::after {
-  top: 50%;
-  right: 0;
-  transform: translate(50%, -50%) rotate(45deg);
-}
-.tipRoot_fR41U .content_fR41U.right_fR41U {
-  top: 50%;
-  left: calc(100% + 12px);
-  transform: translate(0, -50%);
-}
-.tipRoot_fR41U .content_fR41U.right_fR41U::after {
-  top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-.tipRoot_fR41U .content_fR41U.bottom_fR41U {
-  top: calc(100% + 12px);
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-.tipRoot_fR41U .content_fR41U.bottom_fR41U::after {
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-.tipRoot_fR41U .content_fR41U.leftBottom_fR41U {
-  top: calc(100% + 12px);
-}
-.tipRoot_fR41U .content_fR41U.leftBottom_fR41U::after {
-  top: 0;
-  left: 25%;
-  transform: translate(-50%, -50%) rotate(45deg);
-}