/**
* =====================================
* 隐藏滚动条，保留滚动能力
**/

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*
   * 关掉触摸点击高亮（20260822-wap-01 遮罩残留修复）。
   *
   * Chrome/移动端触摸点击默认在被点元素上画一层灰蓝色 tap-highlight。业务卡片
   * （红包/福袋/红包游戏）点击后是异步开窗（先 await 会员校验再 setState），开窗
   * 瞬间消息行所在的合成层（translate3d）发生层树变动，高亮层经常来不及淡出甚至
   * 卡死在屏上——表现为：弹窗下半部压着一块「正好对应刚点的那张卡片」的灰紫/蓝色
   * 方块，或背后被点的卡片带着一层与相邻卡不同色的遮罩，直到下一次触摸才消失。
   * 该高亮由浏览器合成器绘制，不在 DOM 里，前端只能整体禁用。
   */
  -webkit-tap-highlight-color: transparent;
}

/*
 * App 内所有展示文字统一不可选中，避免长按时出现浏览器原生蓝色选区和系统菜单。
 * 输入与可编辑区域必须保留选区能力，否则会影响光标移动、改字和粘贴。
 */
html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable]:not([contenteditable="false"]),
[contenteditable]:not([contenteditable="false"]) * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/*
 * iOS Safari 可能仍会把历史缓存或第三方内容里的纯数字包装成系统数据检测链接。
 * 与 head 中的 format-detection 配合，确保群号、金额、人数等数字保持原有文字样式。
 */
a[x-apple-data-detectors],
a[x-apple-data-detectors-type] {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Native desktop only. A wide browser window still uses the original WAP UI. */
html.wk-desktop {
  height: 100%;
  background: #f4f6fa;
  --wk-page-header-height: 1.706667rem;
}

.wk-desktop body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wk-desktop #root { width: 100%; height: 100%; overflow: hidden; }
.wk-desktop *, .wk-desktop *::before, .wk-desktop *::after { box-sizing: border-box; }
.wk-desktop button, .wk-desktop input, .wk-desktop textarea { font-family: inherit; }
.wk-desktop button:focus-visible { outline: 0.053333rem solid #4a7af5; outline-offset: 0.08rem; }

/* Lists and messages have independent scrolling, rather than a page scrollbar. */
.wk-desktop * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.wk-desktop ::-webkit-scrollbar { display: block; width: 0.16rem; height: 0.16rem; }
.wk-desktop ::-webkit-scrollbar-thumb { border-radius: 0.213333rem; background: #cbd5e1; }
.wk-desktop ::-webkit-scrollbar-track { background: transparent; }

.wk-desktop .wk-layout {
  --wk-desktop-nav-width: 2.026667rem;
  --wk-desktop-list-width: 8rem;
  flex-direction: row;
  background: #fff;
}

.wk-desktop .wk-layout-tab {
  order: 0;
  width: var(--wk-desktop-nav-width);
  height: 100%;
  flex: 0 0 var(--wk-desktop-nav-width);
  z-index: 1;
}

.wk-desktop .wk-layout-content {
  order: 1;
  flex: 1 1;
  min-width: 0;
  width: auto;
  height: 100%;
  position: relative;
}

.wk-desktop .wk-layout-content-left {
  width: var(--wk-desktop-list-width);
  flex: 0 0 var(--wk-desktop-list-width);
  min-width: 0;
  border-right: 0.026667rem solid #e5eaf2;
  background: #fff;
}

html.wk-desktop .wk-layout-content .wk-layout-content-right {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  flex: 1 1;
  height: 100%;
  z-index: 20;
  transform: none;
  transition: none;
  background: #f4f6fa;
}

.wk-desktop .wk-layout-expanded .wk-layout-content-left {
  width: 100%;
  flex: 1 1;
  border-right: 0;
}

.wk-desktop .wk-layout-expanded .wk-layout-content-right { display: none; }
.wk-desktop .wk-viewqueue-view { transition: none; }

.wk-desktop .wk-main-tab {
  border: 0;
  border-right: 0.026667rem solid #e5eaf2;
  background: linear-gradient(180deg, #f4f7ff 0%, #fafbfe 65%, #f5f7fb 100%);
}

.wk-desktop .wk-main-tab-content { display: flex; align-items: center; flex-direction: column; padding: 0.64rem 0.213333rem 0.48rem; }
.wk-desktop .wk-main-desktop-profile { display: block; flex: 0 0 auto; width: 1.066667rem; height: 1.066667rem; margin: 0 0 0.666667rem; padding: 0; border: 0; border-radius: 0.32rem; overflow: hidden; background: #e8effe; cursor: pointer; }
.wk-desktop .wk-main-desktop-profile img { display: block; width: 1.066667rem; height: 1.066667rem; object-fit: cover; border-radius: 0.32rem; }
.wk-desktop .wk-main-tab-content ul { flex-direction: column; flex: 0 0 auto; height: auto; gap: 0.24rem; padding: 0; margin: 0; list-style: none; }
.wk-desktop .wk-main-tab-content .wk-main-tab-item { flex: 0 0 1.653333rem; width: 1.6rem; min-height: 1.653333rem; gap: 0.16rem; border-radius: 0.32rem; color: #686a8a; font-size: 0.32rem; transition: background .15s, color .15s; }
.wk-desktop .wk-main-tab-item:hover { background: #e8effe; }
.wk-desktop .wk-main-tab-item.selected { background: #fff; color: #4a7af5; box-shadow: 0 0.08rem 0.32rem rgb(74 122 245 / 9%); }
.wk-desktop .wk-main-tab-item.selected .wk-main-tab-icon { animation: none; }
.wk-desktop .wk-main-tab-icon { height: 0.693333rem; flex-basis: 0.693333rem; }
.wk-desktop .wk-main-tab-img { max-width: 0.666667rem; max-height: 0.666667rem; }
.wk-desktop .wk-main-desktop-label { margin-top: auto; padding-top: 0.533333rem; color: #a6aec0; font-size: 0.266667rem; letter-spacing: 0.026667rem; }

.wk-desktop .wk-chat-empty { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 0.853333rem; background: #f7f9fc; }
.wk-desktop .wk-chat-empty > img { display: block; width: min(6.933333rem, 60%); height: auto; max-height: 40%; opacity: .85; }
.wk-desktop .wk-desktop-empty-copy { margin-top: 0.426667rem; text-align: center; }
.wk-desktop .wk-desktop-empty-copy h2 { margin: 0 0 0.24rem; font-size: 0.506667rem; font-weight: 600; color: #536584; }
.wk-desktop .wk-desktop-empty-copy p { margin: 0; color: #9a9bb1; font-size: 0.346667rem; line-height: 1.6; }

.wk-desktop .wk-page-header { height: 1.706667rem; padding: 0 0.586667rem; border-bottom-color: #edf1f8; }
.wk-desktop .wk-page-header-title { font-size: 0.453333rem; font-weight: 600; color: #1e293b; }

@media (max-width: 1100px) {
  .wk-desktop .wk-layout { --wk-desktop-list-width: 7.466667rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-desktop .wk-main-tab-item { transition: none; }
}

/* Desktop presentation only. WAP keeps its existing full-page / bottom-sheet UI. */

/* The balance rule dialog is rendered by the middle-column view (not a portal).
 * Raise that column only while its window-wide mask is mounted; otherwise the
 * isolated left route would put the centered dialog behind the right pane. */
html.wk-desktop .wk-layout-content-left:has(.wk-audit-mask) {
  position: relative;
  z-index: 30;
}

/* The balance summary lives in a narrow desktop menu column. Money gets its
 * own line and full width; never squeeze it beside an action or truncate it. */
html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-hero {
  gap: 0.213333rem;
  padding: 0.373333rem 0.426667rem 0.32rem;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-hero-bottom {
  flex-direction: column;
  align-items: stretch;
  gap: 0.186667rem;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-hero-amount {
  flex: 0 0 auto;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-hero-more {
  align-self: flex-end;
  min-height: 0.586667rem;
  padding-bottom: 0;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status {
  padding: 0.32rem 0.426667rem 0.373333rem;
  gap: 0.266667rem;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-stats {
  flex-direction: column;
  align-items: stretch;
  gap: 0.213333rem;
  padding: 0;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-stat {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.28rem minmax(0, 1fr);
  align-items: start;
  grid-gap: 0.213333rem;
  gap: 0.213333rem;
  width: 100%;
  text-align: left;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-label {
  order: -1;
  padding-top: 0.053333rem;
  line-height: 0.533333rem;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-value {
  height: auto;
  min-height: 0.64rem;
  justify-content: flex-end;
  overflow: visible;
  white-space: normal;
  font-size: 0.373333rem;
  line-height: 0.64rem;
  text-align: right;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-value-text {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 0.64rem;
}

html.wk-desktop .wk-meinfo-center .wk-audit-card .wk-audit-status-sep {
  display: none;
}

/* Business forms and secondary details keep their existing route / back behavior,
 * but are presented over the whole desktop window instead of stretching a phone
 * page across the chat column. Desktop WKLayout removes transformed ancestors so
 * these fixed layers, and the nested ModalPortal layers, use the window bounds. */
html.wk-desktop .wk-viewqueue-view:has(> :is(
  .wk-redpacket-create,
  .wk-luckybag-create-page,
  .wk-rpg,
  .wk-rpd,
  .wk-avatarpicker,
  .wk-myrec-rp-detail
)) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.64rem;
  background: rgba(17, 29, 48, 0.36);
}

html.wk-desktop :is(
  .wk-redpacket-create,
  .wk-luckybag-create-page,
  .wk-rpg,
  .wk-rpd,
  .wk-avatarpicker,
  .wk-myrec-rp-detail
) {
  position: relative;
  inset: auto;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  width: 13.866667rem;
  max-width: 100%;
  height: min(19.733333rem, 100%);
  max-height: 100%;
  border-radius: 0.48rem;
  box-shadow: 0 0.64rem 1.866667rem rgba(15, 23, 42, 0.24);
}

html.wk-desktop :is(.wk-redpacket-create, .wk-rpg) {
  --wk-rp-gutter: 0.64rem;
  --rpg-gutter: 0.64rem;
}

html.wk-desktop .wk-rpd {
  --wk-rpd-gutter: 0.533333rem;
  width: 12.266667rem;
  height: min(17.706667rem, 100%);
}

html.wk-desktop .wk-luckybag-create-form {
  padding-right: 0.64rem;
  padding-left: 0.64rem;
}

html.wk-desktop .wk-luckybag-create-hero {
  padding-right: 0.826667rem;
  padding-left: 0.826667rem;
}

/* Keep the settlement buttons visible while the form scrolls, including in a
 * short window. The mobile absolute footer / safe-area spacer is not needed. */
html.wk-desktop .wk-luckybag-create-scroll,
html.wk-desktop .wk-luckybag-create-page.is-keyboard-open .wk-luckybag-create-scroll {
  padding-bottom: 0;
}

html.wk-desktop .wk-luckybag-create-footer {
  position: relative;
  inset: auto;
  flex: 0 0 1.973333rem;
  height: 1.973333rem;
  min-height: 1.973333rem;
  padding: 0.293333rem 0.64rem;
}

html.wk-desktop .wk-rp-footer {
  height: 1.973333rem;
  padding-bottom: 0;
}

/* Existing message modals stay rooted in ModalPortal. Bound every scrollable
 * shell by the available window, rather than a mobile viewport aspect ratio. */
html.wk-desktop :is(
  .wk-redpacket-mask,
  .wk-luckybag-mask,
  .wk-rpg-mask,
  .wk-rpg-dialog-mask,
  .wk-business-failure-mask,
  .wk-audit-mask
) {
  box-sizing: border-box;
  padding: 0.64rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html.wk-desktop .wk-luckybag-mask.join-mask {
  align-items: center;
  background: rgba(17, 29, 48, 0.36);
}

html.wk-desktop .wk-luckybag-join {
  flex: 0 1 auto;
  width: 11.2rem;
  max-width: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 0.48rem;
  border-radius: 0.586667rem;
  box-shadow: 0 0.64rem 1.6rem rgba(15, 23, 42, 0.24);
  animation-name: wk-desktop-dialog-in;
}

html.wk-desktop .wk-luckybag-mask.join-mask.is-closing .wk-luckybag-join {
  animation-name: wk-desktop-dialog-out;
}

html.wk-desktop .wk-rpg-modal {
  width: 10.666667rem;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.48rem;
  box-shadow: 0 0.64rem 1.6rem rgba(15, 23, 42, 0.24);
}

html.wk-desktop .wk-rpg-modal-body {
  overscroll-behavior: contain;
}

html.wk-desktop .wk-rpg-detail-modal {
  width: 12.266667rem;
  height: 16.533333rem;
}

html.wk-desktop .wk-luckybag-detail-wrap {
  width: min(9.333333rem, calc(100vw - 1.28rem), calc((100vh - 1.92rem) * 0.6286837));
}

html.wk-desktop .wk-luckybag-result-notice-wrap {
  width: min(8.8rem, calc(100vw - 1.28rem), calc((100vh - 1.28rem) * 0.6226415));
}

html.wk-desktop :is(.wk-rpg-dialog, .wk-business-failure-dialog, .wk-luckybag-success, .wk-audit-dialog) {
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

/* “More phrases” is a desktop dialog, not a full-width bottom sheet. */
html.wk-desktop .wk-accessorydrawer-mask {
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.64rem;
}

html.wk-desktop .wk-accessorydrawer-panel {
  width: 11.2rem;
  max-width: 100%;
  max-height: min(14.4rem, 100%);
  padding: 0.533333rem 0.533333rem 0.426667rem;
  border-radius: 0.48rem;
  box-shadow: 0 0.64rem 1.6rem rgba(15, 23, 42, 0.24);
  animation-name: wk-desktop-dialog-in;
}

html.wk-desktop .wk-accessorydrawer-mask.is-closing .wk-accessorydrawer-panel {
  animation-name: wk-desktop-dialog-out;
}

/* Record lists remain in the right column. Limit their reading width without
 * limiting the header / scroll viewport, so wide and short windows both work. */
html.wk-desktop .wk-myrec:not(.wk-myrec-rp-detail) .wk-myrec-content {
  padding: 0.533333rem max(0.64rem, calc((100% - 19.2rem) / 2)) 0.746667rem;
}

html.wk-desktop .wk-myrec-tabs {
  width: min(19.2rem, calc(100% - 1.28rem));
  margin: 0.533333rem auto 0;
}

html.wk-desktop .wk-audit-content {
  --wk-audit-content-pad-top: 0.533333rem;
  padding: var(--wk-audit-content-pad-top) max(0.64rem, calc((100% - 19.2rem) / 2)) 0.746667rem;
}

html.wk-desktop .wk-audit-tabs {
  width: min(19.2rem, calc(100% - 1.28rem));
  margin: 0.533333rem auto 0;
}

html.wk-desktop .wk-myrec-rp-detail {
  --wk-myrec-rp-width: 100%;
  width: 14.933333rem;
}

html.wk-desktop .wk-myrec-rp-content {
  padding: 0.533333rem 0.64rem 0.746667rem;
}

/* The desktop avatar dialog uses six regular columns, rather than growing the
 * avatar tiles with the whole screen. Header and save action stay in flex flow. */
html.wk-desktop .wk-avatarpicker {
  width: 17.6rem;
  height: min(18.666667rem, 100%);
}

html.wk-desktop .wk-avatarpicker-main {
  gap: 0.533333rem;
  padding: 0.48rem 0.64rem 0.64rem;
}

html.wk-desktop .wk-avatarpicker-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.373333rem 0.48rem;
}

html.wk-desktop .wk-avatarpicker-footer {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  padding: 0.373333rem 0.64rem 0.533333rem;
}

html.wk-desktop .wk-avatarpicker-save {
  height: 1.226667rem;
  border-radius: 0.32rem;
  box-shadow: none;
}

html.wk-desktop .wk-avatarpicker-scroll::after,
html.wk-desktop .wk-avatarpicker-rotate {
  display: none;
}

/* Override the phone-wide hidden-scrollbar rule only for desktop panels. */
html.wk-desktop :is(
  .wk-rp-scroll,
  .wk-luckybag-create-scroll,
  .wk-rpg-body,
  .wk-rpg-modal-body,
  .wk-rpg-list-viewport,
  .wk-rpd-list,
  .wk-luckybag-join,
  .wk-avatarpicker-scroll,
  .wk-myrec-content,
  .wk-myrec-rp-content
) {
  scrollbar-width: thin;
  scrollbar-color: #cbd3e1 transparent;
}

html.wk-desktop :is(
  .wk-rp-scroll,
  .wk-luckybag-create-scroll,
  .wk-rpg-body,
  .wk-rpg-modal-body,
  .wk-rpg-list-viewport,
  .wk-rpd-list,
  .wk-luckybag-join,
  .wk-avatarpicker-scroll,
  .wk-myrec-content,
  .wk-myrec-rp-content
)::-webkit-scrollbar {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
}

html.wk-desktop :is(
  .wk-rp-scroll,
  .wk-luckybag-create-scroll,
  .wk-rpg-body,
  .wk-rpg-modal-body,
  .wk-rpg-list-viewport,
  .wk-rpd-list,
  .wk-luckybag-join,
  .wk-avatarpicker-scroll,
  .wk-myrec-content,
  .wk-myrec-rp-content
)::-webkit-scrollbar-thumb {
  border-radius: 0.16rem;
  background: #cbd3e1;
}

@keyframes wk-desktop-dialog-in {
  from { opacity: 0; transform: translateY(0.266667rem) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wk-desktop-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(0.213333rem) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  html.wk-desktop .wk-luckybag-join,
  html.wk-desktop .wk-accessorydrawer-panel {
    animation-duration: 1ms;
  }
}


:root {
    /* 输入行 38px + 上下内边距 16px + 顶部分隔线 1px。 */
    --wk-conversation-inputbar: 1.466667rem;
    --wk-conversation-footer: var(--wk-conversation-inputbar);
    --wk-conversation-chatplus-panel: 5.706667rem;
    --wk-conversation-input-row-gap: 0.213333rem;
    /* 短语胶囊 28px + 与输入行的间距 6px，不额外预留空白。 */
    --wk-conversation-shortcutbar: 0.906667rem;
    --wk-height-conversation-replyview: 1.333333rem;
}

.wk-conversation {
    /* Resolve on the conversation, where the composer supplies its measured height.
       Inheriting the value computed on :root otherwise keeps the mobile 55px. */
    --wk-conversation-footer: var(--wk-conversation-inputbar);
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #eef5fb;
    background-size: 4.8rem auto;
}

.wk-conversation-locate-loading {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.12);
    touch-action: none;
}

.wk-conversation-locate-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
    padding: 0.64rem 0.746667rem;
    border-radius: 0.32rem;
    background: #fff;
    color: #253344;
    font-size: 0.373333rem;
}

.wk-conversation-first-load {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    color: #8090a5;
    font-size: 0.373333rem;
    pointer-events: none;
}

.wk-conversation-first-load button {
    pointer-events: auto;
    padding: 0.213333rem 0.426667rem;
    border: 0;
    border-radius: 0.213333rem;
    color: #4b72ff;
    background: #fff;
    cursor: pointer;
}

.wk-conversation-chatplus-open {
    /* 输入行下方补齐短语行已有的间距；面板仍抵消容器底部的 8px 内边距。 */
    --wk-conversation-footer: calc(var(--wk-conversation-inputbar) + var(--wk-conversation-chatplus-panel) + var(--wk-conversation-input-row-gap) - 0.213333rem);
}

/* 上下间距属于输入行，面板本身不增加外部留白。 */
.wk-conversation-chatplus-open .wk-messageinput-inputbox,
.wk-conversation-chatplus-open .wk-messageinput-bar,
.wk-conversation-chatplus-open .wk-shortcutonly-bar {
    margin-bottom: 0.213333rem;
    margin-bottom: var(--wk-conversation-input-row-gap);
}

.wk-conversation-chatplus-open .wk-messageinput-input {
    /* 去掉 inline-block 的基线空隙，让输入框与工具栏真正垂直居中。 */
    display: block;
}

/* 群短语：短语条撑高 footer，仅当短语条可见时门控（同上一条 wk-conversation-chatplus-open 范式）。
   不叠加会让短语行把消息列表底部顶掉 --wk-conversation-shortcutbar 那么高。 */
.wk-conversation-shortcutbar-open {
    --wk-conversation-input-row-gap: 0.16rem;
    --wk-conversation-footer: calc(var(--wk-conversation-inputbar) + var(--wk-conversation-shortcutbar, 0px));
}

/* ★ 两个 class 可同时挂上（例：短语条自带的「更多短语」箭头会打开 AccessoryDrawer，
   经 onAccessoryPanelVisibleChange 冒泡挂上 chatplus-open，此时短语条仍常驻显示，
   shortcutbar-open 也仍挂着）。上面两条单 class 规则特异性相同（0,1,0），同时命中时
   按源码顺序取胜、互相顶替，而不是叠加。这条组合选择器特异性更高（0,2,0），
   确保抽屉/加号面板高度与短语条常驻高度同时生效。 */
.wk-conversation-chatplus-open.wk-conversation-shortcutbar-open {
    --wk-conversation-footer: calc(var(--wk-conversation-inputbar) + var(--wk-conversation-chatplus-panel) + var(--wk-conversation-shortcutbar, 0px) + var(--wk-conversation-input-row-gap) - 0.213333rem);
}

/* 系统账号是纯通知会话：不保留输入栏占位，让消息区一直铺到底部。 */
.wk-conversation.wk-conversation-system-channel {
    --wk-conversation-footer: 0px;
}


.wk-conversation-hasreply {

}


.wk-conversation-content {
    width: 100%;
    height: calc(100% - 1.466667rem);
    height: calc(100% - var(--wk-conversation-footer));
    position: relative;
    transition: height 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms ease-out;
    background-color: rgba(239, 246, 252, 0.84);
}

body[theme-mode=dark] .wk-conversation-content {
    background-color: var(--wk-color-secondary-2);
}

.wk-conversation-hasreply .wk-conversation-content {
    height: calc(100% - 1.466667rem - 1.333333rem);
    height: calc(100% - var(--wk-conversation-footer) - var(--wk-height-conversation-replyview));
}


.wk-conversation-messages {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* 与 iOS 公屏一致：消息列表上下各保留 8px，最后一条不会贴住输入区。 */
    padding: 0.213333rem 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wk-conversation-messages-has-pinned {
    padding-top: 1.386667rem;
}

/* 福袋悬浮活动条（Components/LuckybagActivityBar）：8px 顶距 + 条高 + 10px 与首条消息的间距
   （稿上内容区 padding 8px 14px 0、gap 10px）；置顶条同时存在时再加置顶条的 44px */
.wk-conversation-messages-has-luckybagbar {
    padding-top: calc(0.213333rem + 1.76rem + 0.266667rem);
    padding-top: calc(0.213333rem + 66px + 0.266667rem);
    padding-top: calc(0.213333rem + var(--wk-luckybag-bar, 66px) + 0.266667rem);
}

.wk-conversation-messages-has-pinned.wk-conversation-messages-has-luckybagbar {
    padding-top: calc(1.173333rem + 0.213333rem + 1.76rem + 0.266667rem);
    padding-top: calc(1.173333rem + 0.213333rem + 66px + 0.266667rem);
    padding-top: calc(1.173333rem + 0.213333rem + var(--wk-luckybag-bar, 66px) + 0.266667rem);
}

.wk-conversation-virtual-list {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 历史 loading 跟随消息流滚动；固定占位，图标显隐不能在惯性/回弹中改变 Header 高度。 */
.wk-conversation-history-loading {
    width: 100%;
    height: 0.533333rem;
    height: var(--wk-history-loading-height, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.wk-conversation-history-loading-icon {
    display: block;
    width: 0.533333rem;
    height: 0.533333rem;
    color: #8c96a5;
}

.wk-conversation-history-loading-tick {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .15;
    animation: wk-history-loading-tick 1.2s linear infinite;
}

@keyframes wk-history-loading-tick {
    from { opacity: 1; }
    to { opacity: .15; }
}

body[theme-mode=dark] .wk-conversation-history-loading-icon {
    color: #b1bccf;
}

@media (prefers-reduced-motion: reduce) {
    .wk-conversation-history-loading-tick {
        animation: none;
        opacity: .65;
    }
}

.wk-virtual-message-preview {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    pointer-events: none;
}

.wk-virtual-message-preview-content {
    flex-shrink: 0;
    box-sizing: border-box;
    padding-bottom: 0.213333rem;
}

.wk-virtual-message-footer {
    height: 0.213333rem;
}

/* 相邻 margin 原本会折叠，转成行内 padding 供 Virtuoso 测量，不叠加两次组间距。 */
.wk-virtual-message-row > .wk-message-item {
    margin-top: 0;
    margin-bottom: 0;
}

.wk-virtual-message-gap-small { padding-top: 0.16rem; }
.wk-virtual-message-gap-large { padding-top: 0.32rem; }
.wk-virtual-message-tail-small { padding-bottom: 0.16rem; }
.wk-virtual-message-tail-large { padding-bottom: 0.32rem; }

/* 顶/底留白作为可测量 Header/Footer，不能算到虚拟滚动视口的 padding 中。 */
.wk-conversation-messages.wk-conversation-virtual-scroller {
    padding: 0;
    overflow-anchor: none;
}

/* 历史前插只平移消息行，不平移整个列表，以免扩大 iOS 的 scrollable overflow。
   裁剪发生在整张列表（含虚拟留白）上，不能裁剪单个气泡，否则入屏会被截断。 */
.wk-conversation-message-list.wk-history-preserving {
    overflow: hidden;
    overflow: clip;
}

.wk-history-preserving > [data-message-key] {
    transform: translate3d(0, 0px, 0);
    transform: translate3d(0, var(--wk-history-shift, 0px), 0);
}

.wk-virtual-message-header {
    /* 合并原来的顶部留白与 32px loading 行，整体减半，图标在整个区域内居中。
       置顶公告单独占位；图标显隐不改变这里的尺寸。 */
    --wk-history-loading-height: 0.533333rem; /* (8px + 32px) / 2 */
    padding-top: 0;
}

.wk-virtual-message-header.wk-conversation-messages-has-pinned {
    padding-top: 1.173333rem;
}

.wk-virtual-message-header.wk-conversation-messages-has-luckybagbar {
    --wk-history-loading-height: calc((0.213333rem + var(--wk-luckybag-bar, 66px) + 0.266667rem + 0.853333rem) / 2);
}

.wk-virtual-message-header.wk-conversation-messages-has-pinned.wk-conversation-messages-has-luckybagbar {
    padding-top: 1.173333rem;
}

.wk-conversation-pinned-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    height: 1.173333rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: #F1F6FF;
    border-bottom: 0.026667rem solid #DAE6F8;
}

.wk-conversation-pinned-message-main {
    min-width: 0;
    flex: 1 1;
    display: flex;
    height: 1.173333rem;
    align-items: center;
    gap: 0.266667rem;
    padding: 0 0.266667rem 0 0.373333rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.wk-conversation-pinned-message-main:disabled {
    cursor: default;
}

.wk-conversation-pinned-message-icon {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.506667rem;
    line-height: 0.72rem;
    transform: rotate(-12deg);
}

.wk-conversation-pinned-message-text {
    min-width: 0;
    flex: 1 1;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
    font-weight: 400;
    color: #61718A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-conversation-pinned-message-view {
    flex: 0 0 auto;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
    font-weight: 400;
    color: #087DF2;
    white-space: nowrap;
}

.wk-conversation-pinned-message-close {
    width: 0.906667rem;
    height: 1.173333rem;
    flex: 0 0 0.906667rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    background: transparent;
    color: #A3B0C5;
    cursor: pointer;
    padding: 0;
}

.wk-conversation-pinned-message-close svg {
    width: 0.373333rem;
    height: 0.373333rem;
}

.wk-conversation-pinned-message-close:hover {
    color: #71809A;
}

body[theme-mode=dark] .wk-conversation-pinned-message {
    background: #252E3D;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body[theme-mode=dark] .wk-conversation-pinned-message-text,
body[theme-mode=dark] .wk-conversation-pinned-message-close {
    color: #a3adbd;
}

.wk-conversation-messages::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.wk-message-item {
    width: 100%;
    display: flex;
    position: relative;
    margin-top: 0;
    margin-bottom: 0.16rem;
}

/* 仅实时追加到已满公屏底部的消息使用；动画挂整行，首条头像/昵称与连续气泡同步位移。 */
.wk-message-item-entering {
    animation: wk-message-item-entering 460ms cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform, opacity;
}

/* 发起页退场前既不显示也不占高度，防止旧公屏提前被整张卡片顶上去。 */
.wk-message-item-entry-pending {
    display: none;
}

.wk-message-item-business-entering {
    animation: wk-message-item-business-entering 460ms cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform, opacity;
}

@keyframes wk-message-item-entering {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wk-message-item-business-entering {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wk-message-item-entering {
        animation-duration: 1ms;
        animation-timing-function: linear;
    }
    .wk-message-item-business-entering {
        animation-duration: 1ms;
        animation-timing-function: linear;
    }
}

.wk-message-item-group-start {
    margin-top: 0.32rem;
}

.wk-message-item-group-end {
    margin-bottom: 0.32rem;
}

.wk-message-item-notice {
    margin-bottom: 0.16rem;
}

/* 日期时间线与“以上为历史消息”属于段落分隔，使用消息间距的较大档。 */
.wk-message-item-separator {
    margin-top: 0.32rem;
    margin-bottom: 0.32rem;
}

.wk-conversation-dragover .wk-message-item {
    pointer-events:none;
}

.wk-conversation-footer {
    width: 100%;
    min-height: 1.466667rem;
    min-height: var(--wk-conversation-footer);
    height: auto;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
    z-index: 20;
    background-color: #fff;
    border-top: 0.026667rem solid #edf0f5;
    transition: min-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}



.wk-conversation-footer-content {
    width: 100%;
    height: auto;
}

.wk-conversation-composer[hidden] {
    /* Keep normal input/shortcut geometry while authority is unknown or blocked.
       Controls remain hidden, disabled and aria-hidden; draft owners stay mounted. */
    display: block;
    visibility: hidden;
    pointer-events: none;
}

.wk-conversation-composer[hidden] .wk-chatplus-drawer,
.wk-conversation-composer[hidden] .wk-stickerpanel {
    /* These panels are closed by the disabled composer. Do not reserve their
       animated exit height underneath the fixed status overlay. */
    display: none;
}

.wk-conversation-group-send-state {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 1.44rem;
    padding: 0.32rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.213333rem;
    color: #8a97aa;
    background: #f5f6f8;
    font-size: 0.346667rem;
    text-align: center;
}

.wk-conversation-group-send-state button {
    border: 0;
    padding: 0.106667rem 0.213333rem;
    background: transparent;
    color: #3078ff;
    cursor: pointer;
}

.wk-conversation-hasreply .wk-conversation-group-send-state {
    /* Retain the reply draft's geometry while blocked, but cover its empty
       placeholder together with the composer instead of exposing a white strip. */
    top: calc(0px - 1.333333rem);
    top: calc(0px - var(--wk-height-conversation-replyview));
}

.wk-conversation-blacklist-bar {
    min-height: 1.013333rem;
    margin: 0.213333rem 0.32rem;
    padding: 0 0.426667rem;
    border-radius: 0.16rem;
    background: #f0f2f5;
    color: #8a97aa;
    font-size: 0.373333rem;
    font-weight: 500;
    line-height: 1.013333rem;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.wk-conversation-blacklist-bar:hover {
    background: #e6e9ef;
    color: #667085;
}

.wk-conversation-blacklist-bar-loading {
    opacity: 0.72;
    cursor: default;
}

body[theme-mode=dark] .wk-conversation-blacklist-bar {
    background: rgba(255, 255, 255, 0.08);
    color: #a3adbd;
}

body[theme-mode=dark] .wk-conversation-blacklist-bar:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #d0d5dd;
}

.wk-conversation-chattoolbars {
    height: 100%;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 0.106667rem;
    padding: 0;
    list-style: none;
   
}

.wk-conversation-chattoolbars-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}



.wk-conversation-content-fileupload-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 0.4rem;

}

.wk-conversation-content-fileupload-mask-content {
    width: 100%;
    height: 100%;
    border: 0.026667rem dashed #999;
    border-radius: 0.106667rem;
    background-color: rgb(255, 255, 255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.426667rem;
    font-weight: 500;
    padding: 0.533333rem;

}

.wk-replyview {
    width: 100%;
    height: 100%;
    display: flex;
}

.wk-replyview-content {
    width: calc(100% - 2.133333rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 0.4rem;
    color: var(--wk-color-font-tip);
}

.wk-replyview-content-msg {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-replyview-content-first {
    width: 100%;
    margin-top: 0.053333rem;
}

.wk-replyview-content-second {
    margin-top: 0.053333rem;
}

.wk-replyview-content-userinfo {
    display: flex;
}

.wk-replyview-content-userinfo-name {
    display: flex;
    align-items: center;
    margin-left: 0.133333rem;
}

.wk-conversation-topview {
    transform: translate3d(0, 100%, 0);
    transition: transform var(--wk-layer-transition);
    background-color: white;
}

body[theme-mode=dark] .wk-conversation-topview {
    background-color: var(--wk-color-secondary);
}

.wk-conversation-hasreply .wk-conversation-topview {
    transform: translate3d(0,  0, 0);
    height: 1.333333rem;
    height: var(--wk-height-conversation-replyview);
    box-shadow: 0.128rem -0.085333rem 0.341333rem 0.8px rgb(114 114 114 / 5%);
    border-left: none;
}

.wk-conversation-hasreply .wk-messageinput-box {
    box-shadow:none;
}

.wk-replyview-close {
    height: 100%;
    padding: 0px 0.533333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--wk-line);
    cursor: pointer;
}



.wk-conversationpositionview {
    position: absolute;
    bottom: 0.213333rem;
    right: 0.426667rem;
    z-index: 3;
}

.wk-conversationpositionview ul {
    margin-bottom: 0px;
}

.wk-conversationpositionview-item {
    position: relative;
    width: 1.066667rem;
    height: 1.066667rem;
    border-radius: 50%;
    background-color: white;
    border: 0.026667rem solid rgba(18, 27, 46, .04);
    box-shadow: 0 0.053333rem 0.266667rem rgba(18, 27, 46, .14);
    color: #4f70f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: scale(0.5,0.5);
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1),opacity .2s ease;
    opacity: 0;
    pointer-events: none;
}

.wk-conversation-scroll-down-icon {
    width: 0.64rem;
    height: 0.64rem;
}

body[theme-mode=dark] .wk-conversationpositionview-item  {
    background-color: var(--wk-color-secondary);
    box-shadow: 0 0.026667rem 0.053333rem rgba(0,0,0,0.5);
}


.wk-conversationpositionview-item.wk-reveale {
    transform: scale(1,1);
    opacity: 1;
    pointer-events: all;
}

.wk-conversationpositionview-item i {
    font-size: 0.746667rem;
}

.icon-arrow-down::before {
    content: "";
}

.wk-conversationpositionview-item .wk-conversation-unread-count {
    min-width: 0.64rem;
    height: 0.64rem;
    padding: 0 0.192rem;
    border-radius: 0.32rem;
    font-size: 0.373333rem;
    line-height: 0.64rem;
    font-weight: 500;
    text-align: center;
    position: absolute;
    top: -0.128rem;
    right: -0.128rem;
    background: red;
    color: #fff;
    pointer-events: none;
}

.wk-conversationpositionview ul li {
    margin-top: 0.32rem;
}

.wk-conversationpositionview-item .wk-conversation-scroll-unread-count {
    top: -0.133333rem;
    right: -0.133333rem;
    min-width: 0.533333rem;
    height: 0.533333rem;
    padding: 0 0.106667rem;
    border: 0.053333rem solid #fff;
    border-radius: 0.266667rem;
    box-sizing: border-box;
    background: #ff4d4f;
    font-size: 0.293333rem;
    line-height: 0.426667rem;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

body[theme-mode=dark] .wk-conversationpositionview-item .wk-conversation-scroll-unread-count {
    border-color: var(--wk-color-secondary);
}

.wk-message-item-reminder {
    /* 与 iOS 一致：定位后保持高亮 1.2s，再用 0.2s 淡出。
       生命周期动画挂在消息行上，结束后由组件清理 locateRemind。 */
    animation: wk-message-item-reminder-lifecycle 1.4s linear;
}

.wk-message-item-reminder .wk-message-base-bubble-box.textBubble .wk-message-base-bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 0.053333rem rgba(74, 122, 245, 0.92),
        0 0.213333rem 0.48rem rgba(74, 122, 245, 0.24);
    pointer-events: none;
    animation: wk-message-item-reminder-fade 1.4s ease-out both;
}

.wk-message-item-reminder .wk-message-base-bubble-box.textBubble.send .wk-message-base-bubble::after {
    box-shadow:
        inset 0 0 0 0.053333rem #fff,
        0 0.213333rem 0.48rem rgba(74, 122, 245, 0.24);
}

@keyframes wk-message-item-reminder-lifecycle {
    from, to { opacity: 1; }
}

@keyframes wk-message-item-reminder-fade {
    0%, 85.714% { opacity: 1; }
    100% { opacity: 0; }
}

/* Desktop keeps a fixed-scale, tiled background instead of stretching the phone artwork. */
.wk-desktop .wk-conversation {
    --wk-width-max-message: 13.866667rem;
    --wk-message-edge-gap: 0.746667rem;
    min-width: 0;
    min-height: 0;
}

.wk-desktop .wk-conversation-content {
    background-size: 10rem 21.653333rem !important;
    background-position: top left !important;
    background-repeat: repeat !important;
    transition: none;
}

.wk-desktop .wk-conversation-messages,
.wk-desktop .wk-virtual-message-preview {
    /* The entry preview and live scroller must use the same content width. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.wk-desktop .wk-conversation-messages::-webkit-scrollbar {
    display: block;
    width: 0.16rem;
}

.wk-desktop .wk-conversation-messages::-webkit-scrollbar-thumb {
    border: 0.026667rem solid transparent;
    border-radius: 0.133333rem;
    background: #cbd5e1;
    background-clip: padding-box;
}

.wk-desktop .wk-message-base-box {
    max-width: calc(100% - 0.746667rem);
}

.wk-desktop .wk-conversation-footer {
    border-top-color: #dce4f0;
    background: #f8faff;
    box-shadow: 0 -0.133333rem 0.48rem rgba(38, 65, 112, 0.06);
    transition: none;
}

.wk-desktop body[theme-mode=dark] .wk-conversation-footer {
    border-top-color: rgba(148, 163, 184, 0.2);
    background: var(--wk-color-secondary);
    box-shadow: 0 -0.133333rem 0.48rem rgba(0, 0, 0, 0.16);
}

/* A routine permission refresh must not flash a solid placeholder over the composer. */
.wk-desktop .wk-conversation-send-pending .wk-conversation-composer[hidden] {
    visibility: visible;
}

.wk-desktop .wk-conversation-send-pending .wk-conversation-group-send-state {
    background: transparent;
}

.wk-desktop .wk-conversation-send-pending .wk-conversation-group-send-state > span {
    position: absolute;
    width: 0.026667rem;
    height: 0.026667rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Desktop accessory panels float above the footer instead of pushing the transcript. */
.wk-desktop .wk-conversation-chatplus-open {
    --wk-conversation-footer: var(--wk-conversation-inputbar);
}

.wk-desktop .wk-conversation-chatplus-open.wk-conversation-shortcutbar-open {
    --wk-conversation-footer: calc(var(--wk-conversation-inputbar) + var(--wk-conversation-shortcutbar, 0px));
}

.wk-desktop .wk-conversation-chatplus-open .wk-messageinput-inputbox,
.wk-desktop .wk-conversation-chatplus-open .wk-messageinput-bar,
.wk-desktop .wk-conversation-chatplus-open .wk-shortcutonly-bar {
    margin-bottom: 0;
}




.wk-messageinput-box {
    background: #fff;
    width: 100%;
    min-height: 1.44rem;
    height: auto;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    /* 多行输入时，发送/表情/加号始终相对输入框整体上下居中。 */
    align-items: center;
    align-content: flex-start;
    -moz-column-gap: 0.213333rem;
         column-gap: 0.213333rem;
    row-gap: 0;
    padding: 0.213333rem 0.32rem;
    box-sizing: border-box;
    box-shadow: none;
    border-left: none;
}

.wk-messageinput-box-top {
    order: 0;
    flex: 0 0 100%;
    width: 100%;
}

body[theme-mode=dark] .wk-messageinput-box {
    background-color: var(--wk-color-secondary);
}

/* .wk-messageinput-box:hover {
     box-shadow: 0 0 10px rgb(0 0 0 / 15%)
} */

.wk-messageinput-inputbox {
    order: 1;
    flex: 1 1;
    min-width: 0;
    min-height: 0.853333rem;
    max-height: 2.56rem;
    width: auto;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
}

.wk-messageinput-input {
    min-height: 0.853333rem;
    max-height: 2.56rem;
    width: 100%;
    border: none;
    color: #333;
    font-size: 0.346667rem;
    line-height: 0.48rem;
    /* 仅承载普通 textarea，不再挂提及候选列表或高亮层。 */
    overflow: visible;
    display: inline-block;
    -webkit-user-modify: read-write-plaintext-only;
    outline: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wk-messageinput-input::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body[theme-mode=dark] .wk-messageinput-input {
    color: white;
}

.wk-messageinput-input textarea {
    outline: none;
    border: none;
}

/* 输入框内的一键清空按钮：只在有内容时挂载，不额外挤占工具栏宽度。 */
.wk-messageinput-clear {
    position: absolute;
    top: 50%;
    right: 0.133333rem;
    z-index: 3;
    width: 0.48rem;
    height: 0.48rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wk-messageinput-clear svg {
    width: 0.266667rem;
    height: 0.266667rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.wk-messageinput-clear:hover,
.wk-messageinput-clear:active {
    background: rgba(0, 0, 0, 0.5);
}

body[theme-mode=dark] .wk-messageinput-clear {
    background: rgba(0, 0, 0, 0.48);
}

.wk-messageinput-input:empty:before {
        content: attr(data-placeholder);
        position: absolute;
        color: #8a97aa;
}

.wk-messageinput-bar {
    order: 2;
    height: 1.013333rem;
    width: auto;
    flex: 0 0 auto;
    display: flex;
    top: 0px;
}

.wk-messageinput-tabs {
    height: 100%;
    width: 50%;
}

.wk-messageinput-toolbar {
    height: 100%;
    width: auto;
    display: flex;
    justify-content: space-between;
}

.wk-messageinput-actionbox {
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-left: 0;
}

.wk-messageinput-actionitem {
    width: 0.8rem;
    height: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 0.8rem;
}

.wk-messageinput-sendbtn {
    height: 0.8rem;
    width: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 50%;
    color: #98a1ad;
    cursor: pointer;
}

.wk-messageinput-hasValue {
    background-color: transparent;
    color: #1890ff;
    color: var(--wk-color-primary, #1890ff);
}

.wk-messageinput-sendbtn svg {
    width: 0.586667rem;
    height: 0.586667rem;
    color: currentColor;
}

/* send.png 作为 mask 使用，颜色跟随按钮：空输入灰、有内容主题蓝。 */
.wk-messageinput-send-icon {
    width: 0.426667rem;
    height: 0.426667rem;
    display: block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.wk-chat-toolbar-icon {
    width: 0.586667rem;
    height: 0.586667rem;
    display: block;
    color: #98a1ad;
}

/* 表情包 / ＋ 面板打开后保持主题蓝；按下瞬间也给出同色反馈。 */
.wk-messageinput-box-sticker-panel-open .wk-stickertoolbar .wk-chat-toolbar-icon,
.wk-messageinput-box-group-panel-open .wk-imagetoolbar .wk-chat-toolbar-icon,
.wk-stickertoolbar:active .wk-chat-toolbar-icon,
.wk-imagetoolbar-content:active .wk-chat-toolbar-icon {
    color: #1890ff;
    color: var(--wk-color-primary, #1890ff);
}


.wk-messageinput-member {
    height: 100%;
    width: 100%;
    padding: 0 0.426667rem;
    align-items: center;
    box-sizing: border-box;
    display: flex;
}

.wk-messageinput-iconbox {
    margin-right: 0.213333rem;
}

.wk-messageinput-icon {
    width: 0.533333rem;
    height: 0.533333rem;
    border-radius: 0.08rem;
}

.wk-messageinput-selected {
    color: #fff;
    /* background-color: #1264a3; */
}

.wk-messageinput-header {
}

/* 群短语条：横向滚动常用短语胶囊 + 右端「更多」开 AccessoryDrawer。order:0，与可选的
   wk-messageinput-box-top 同层——topView 目前无调用方，不冲突（source order 决定同 order 下的先后）。 */
.wk-shortcutbar {
    order: 0;
    flex: 0 0 100%;
    width: 100%;
    min-height: 0.906667rem;
    min-height: var(--wk-conversation-shortcutbar, 34px);
    display: flex;
    align-items: center;
    gap: 0.16rem;
    padding-bottom: 0.16rem;
    box-sizing: border-box;
}

.wk-shortcutbar-scroll {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.16rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wk-shortcutbar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.wk-shortcutbar-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 4.266667rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.133333rem 0.32rem;
    border: 0;
    border-radius: 0.373333rem;
    background-color: #f1f5f9;
    color: #384860;
    font-size: 0.32rem;
    line-height: 0.48rem;
    cursor: pointer;
}

.wk-shortcutbar-pill:hover {
    background-color: #e6ebf1;
}

.wk-shortcutbar-pill:disabled {
    opacity: 0.5;
    cursor: default;
}

body[theme-mode=dark] .wk-shortcutbar-pill {
    background-color: var(--wk-color-secondary-2);
    color: var(--wk-text-item);
}

/* 短语行右端「更多」按钮（2026-09-09 设计变更：由 › 箭头图标改为文字胶囊）。
   Figma「10-02快捷聊天 / 群管理-01」4295:29519：32×17、圆角 4、底 slate/400 #94a3b8、
   白字 12px/16.5px。★ 比左侧短语胶囊(14px 圆角)明显小一号且是深底白字，是稿里刻意的区分。
   ★ 它在 .wk-shortcutbar-scroll **外面**，短语横向滚动时它固定在右端不动。 */
.wk-shortcutbar-more-slot {
    /* 与下方最右侧“＋”按钮共用同一条 30px 中轴，避免视觉上向左偏。 */
    width: 0.8rem;
    height: 0.746667rem;
    flex: 0 0 0.8rem;
    display: grid;
    place-items: center;
}

.wk-shortcutbar-more {
    flex: 0 0 auto;
    min-width: 0.853333rem;
    height: 0.48rem;
    padding: 0 0.106667rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0.106667rem;
    background-color: #94a3b8;
    color: #fff;
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    /* 居中于「短语滚动区右缘 → 屏幕右缘」的完整预留区域（含父级右内边距）。 */
    transform: translateX(0.053333rem);
}

.wk-shortcutbar-more:hover {
    background-color: #7f8ea6;
}

.wk-shortcutbar-more:disabled {
    opacity: 0.5;
    cursor: default;
}

.wk-messageinput-reply {
    margin: 0.266667rem 0.266667rem 0px 0.266667rem;
    background-color: #f5f6f7;
    display: flex;
    color: #8f959e;
    align-items: center;
}

.wk-messageinput-closeicon {
    margin: 0px 0.16rem;
    cursor: pointer;
}

.wk-messageinput-replycontent {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 0.586667rem;
}

.wk-messageinput-input__control {
    min-height: 0.853333rem !important;
    max-height: 2.56rem !important;
    background-color: #f1f5f9;
    border-radius: 0.08rem;
    color: #1f2937;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.373333rem;
    font-weight: normal;
}

/* 给右侧清空按钮留出文字安全区。 */
.wk-messageinput-input__input {
    padding-right: 0.773333rem !important;
}

.wk-messageinput-input__input {
    display: block;
    width: 100%;
    min-height: 0.853333rem !important;
    max-height: 2.453333rem !important;
    margin: 0;
    padding: 0.16rem 0.266667rem;
    resize: none;
    background: transparent;
    font: inherit;
    color: #1f2937;
    line-height: 0.533333rem;
    overflow-y: auto !important;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wk-messageinput-input__input::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body[theme-mode=dark]  .wk-messageinput-input__control {
    background-color: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-messageinput-input__input {
    color: white;
}

.wk-messageinput-send-label,
.wk-messageinput-keyboard-hint {
    display: none;
}

/* Desktop composition area: tools above the draft, explicit send action below. */
.wk-desktop .wk-messageinput-box {
    min-height: 3.946667rem;
    padding: 0.213333rem 0.533333rem 1.173333rem;
    align-items: flex-start;
    -moz-column-gap: 0;
         column-gap: 0;
    background: #f8faff;
}

.wk-desktop .wk-messageinput-bar {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    height: 0.853333rem;
}

.wk-desktop .wk-messageinput-inputbox {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    min-height: 1.706667rem;
    max-height: 3.413333rem;
    border-radius: 0.266667rem;
    background: #fff;
    box-shadow: inset 0 0 0 0.026667rem #dce4f0;
}

.wk-desktop .wk-messageinput-inputbox:focus-within {
    box-shadow: inset 0 0 0 0.026667rem #7198f8, 0 0 0 0.08rem rgba(74, 122, 245, 0.07);
}

.wk-desktop .wk-messageinput-input {
    display: block;
    min-height: 1.706667rem;
    max-height: 3.413333rem;
    font-size: 0.373333rem;
}

.wk-desktop .wk-messageinput-input__control {
    min-height: 1.706667rem !important;
    max-height: 3.413333rem !important;
    background: transparent;
}

.wk-desktop .wk-messageinput-input__input {
    min-height: 1.706667rem !important;
    max-height: 3.413333rem !important;
    padding: 0.16rem 0.32rem;
    font-size: 0.373333rem;
    line-height: 0.586667rem;
}

.wk-desktop .wk-messageinput-actionbox {
    gap: 0.16rem;
}

.wk-desktop .wk-messageinput-senditem {
    position: absolute;
    right: 0.533333rem;
    bottom: 0.266667rem;
    width: 2.133333rem;
    height: 0.853333rem;
    z-index: 2;
}

.wk-desktop .wk-messageinput-sendbtn {
    width: 2.133333rem;
    height: 0.853333rem;
    border-radius: 0.213333rem;
    color: #fff;
    background: #b8c8ef;
    font-size: 0.373333rem;
}

.wk-desktop .wk-messageinput-hasValue {
    background: #4a7af5;
}

.wk-desktop .wk-messageinput-hasValue:hover {
    background: #2563eb;
}

.wk-desktop .wk-messageinput-sendbtn:focus-visible {
    outline: 0.053333rem solid #4a7af5;
    outline-offset: 0.053333rem;
}

.wk-desktop .wk-messageinput-send-icon {
    display: none;
}

.wk-desktop .wk-messageinput-send-label {
    display: inline;
}

.wk-desktop .wk-messageinput-keyboard-hint {
    position: absolute;
    right: 3.04rem;
    bottom: 0.48rem;
    display: block;
    color: #9ca3af;
    font-size: 0.32rem;
    line-height: 0.426667rem;
    pointer-events: none;
}

.wk-desktop .wk-messageinput-clear {
    right: 0.266667rem;
    top: 0.426667rem;
    transform: none;
}

.wk-desktop .wk-shortcutbar-pill {
    border-radius: 0.16rem;
}

.wk-desktop body[theme-mode=dark] .wk-messageinput-box {
    background: var(--wk-color-secondary);
}

.wk-desktop body[theme-mode=dark] .wk-messageinput-inputbox {
    background: var(--wk-color-secondary-2);
    box-shadow: inset 0 0 0 0.026667rem rgba(148, 163, 184, 0.24);
}

.wk-desktop body[theme-mode=dark] .wk-messageinput-input__control {
    background: transparent;
}

.wk-desktop body[theme-mode=dark] .wk-messageinput-inputbox:focus-within {
    box-shadow: inset 0 0 0 0.026667rem #7198f8, 0 0 0 0.08rem rgba(74, 122, 245, 0.12);
}

/* Inline mobile panels become anchored popovers; they never resize the desktop draft. */
.wk-desktop .wk-messageinput-box .wk-stickerpanel,
.wk-desktop .wk-shortcutonly .wk-stickerpanel,
.wk-desktop .wk-messageinput-box .wk-chatplus-drawer,
.wk-desktop .wk-shortcutonly .wk-chatplus-drawer {
    position: absolute;
    right: 0.32rem;
    bottom: calc(100% + 0.213333rem);
    z-index: 40;
    flex: none;
    width: 10.133333rem;
    max-width: calc(100% - 0.64rem);
    height: 0;
    margin: 0;
    border-radius: 0.32rem;
    box-shadow: 0 0.32rem 0.96rem rgba(15, 23, 42, .18);
    visibility: hidden;
    transition: none;
}

.wk-desktop .wk-messageinput-box .wk-chatplus-drawer,
.wk-desktop .wk-shortcutonly .wk-chatplus-drawer {
    width: 11.2rem;
}

.wk-desktop .wk-messageinput-box .wk-stickerpanel-open,
.wk-desktop .wk-shortcutonly .wk-stickerpanel-open,
.wk-desktop .wk-messageinput-box .wk-chatplus-drawer-open,
.wk-desktop .wk-shortcutonly .wk-chatplus-drawer-open {
    height: 5.706667rem;
    height: var(--wk-conversation-chatplus-panel, 214px);
    max-height: calc(100vh - 7.2rem);
    visibility: visible;
}

.wk-desktop .wk-stickerpanel-body,
.wk-desktop .wk-chatplus-panel {
    height: 100%;
    min-height: 0;
    transform: none;
    transition: none;
}

/* shadow */
/* sizing */
/* spacing */
body, :host {
  --semi-transition_duration-slowest:0ms;
  --semi-transition_duration-slower:0ms;
  --semi-transition_duration-slow:0ms;
  --semi-transition_duration-normal:0ms;
  --semi-transition_duration-fast:0ms;
  --semi-transition_duration-faster:0ms;
  --semi-transition_duration-fastest:0ms;
  --semi-transition_duration-none:0ms;
  --semi-transition_function-linear:linear;
  --semi-transition_function-ease:ease;
  --semi-transition_function-easeIn:ease-in;
  --semi-transition_function-easeOut:ease-out;
  --semi-transition_function-easeInIOut:ease-in-out;
  --semi-transition_delay-none: 0ms;
  --semi-transition_delay-slowest:0ms;
  --semi-transition_delay-slower:0ms;
  --semi-transition_delay-slow:0ms;
  --semi-transition_delay-normal:0ms;
  --semi-transition_delay-fast:0ms;
  --semi-transition_delay-faster:0ms;
  --semi-transition_delay-fastest:0ms;
  --semi-transform_scale-none:scale(1,1);
  --semi-transform_scale-small:scale(1,1);
  --semi-transform_scale-medium:scale(1,1);
  --semi-transform_scale-large:scale(1,1);
  --semi-transform-rotate-none:rotate(0deg);
  --semi-transform_rotate-clockwise90deg:rotate(90deg);
  --semi-transform_rotate-clockwise180deg:rotate(180deg);
  --semi-transform_rotate-clockwise270deg:rotate(270deg);
  --semi-transform_rotate-clockwise360deg:rotate(360deg);
  --semi-transform_rotate-anticlockwise90deg:rotate(-90deg);
  --semi-transform_rotate-anticlockwise180deg:rotate(-180deg);
  --semi-transform_rotate-anticlockwise270deg:rotate(-270deg);
  --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
}

body, body .semi-always-light, :host, :host .semi-always-light {
  --semi-amber-0: 254,251,235;
  --semi-amber-1: 252,245,206;
  --semi-amber-2: 249,232,158;
  --semi-amber-3: 246,216,111;
  --semi-amber-4: 243,198,65;
  --semi-amber-5: 240,177,20;
  --semi-amber-6: 200,138,15;
  --semi-amber-7: 160,102,10;
  --semi-amber-8: 120,70,6;
  --semi-amber-9: 80,43,3;
  --semi-black: 0,0,0;
  --semi-blue-0: 234,245,255;
  --semi-blue-1: 203,231,254;
  --semi-blue-2: 152,205,253;
  --semi-blue-3: 101,178,252;
  --semi-blue-4: 50,149,251;
  --semi-blue-5: 0,100,250;
  --semi-blue-6: 0,98,214;
  --semi-blue-7: 0,79,179;
  --semi-blue-8: 0,61,143;
  --semi-blue-9: 0,44,107;
  --semi-cyan-0: 229,247,248;
  --semi-cyan-1: 194,239,240;
  --semi-cyan-2: 138,221,226;
  --semi-cyan-3: 88,203,211;
  --semi-cyan-4: 44,184,197;
  --semi-cyan-5: 5,164,182;
  --semi-cyan-6: 3,134,152;
  --semi-cyan-7: 1,105,121;
  --semi-cyan-8: 0,77,91;
  --semi-cyan-9: 0,50,61;
  --semi-green-0: 236,247,236;
  --semi-green-1: 208,240,209;
  --semi-green-2: 164,224,167;
  --semi-green-3: 125,209,130;
  --semi-green-4: 90,194,98;
  --semi-green-5: 59,179,70;
  --semi-green-6: 48,149,59;
  --semi-green-7: 37,119,47;
  --semi-green-8: 27,89,36;
  --semi-green-9: 17,60,24;
  --semi-grey-0: 249,249,249;
  --semi-grey-1: 230,232,234;
  --semi-grey-2: 198,202,205;
  --semi-grey-3: 167,171,176;
  --semi-grey-4: 136,141,146;
  --semi-grey-5: 107,112,117;
  --semi-grey-6: 85,91,97;
  --semi-grey-7: 65,70,76;
  --semi-grey-8: 46,50,56;
  --semi-grey-9: 28,31,35;
  --semi-indigo-0: 236,239,248;
  --semi-indigo-1: 209,216,240;
  --semi-indigo-2: 167,179,225;
  --semi-indigo-3: 128,144,211;
  --semi-indigo-4: 94,111,196;
  --semi-indigo-5: 63,81,181;
  --semi-indigo-6: 51,66,161;
  --semi-indigo-7: 40,52,140;
  --semi-indigo-8: 31,40,120;
  --semi-indigo-9: 23,29,99;
  --semi-light-blue-0: 233,247,253;
  --semi-light-blue-1: 201,236,252;
  --semi-light-blue-2: 149,216,248;
  --semi-light-blue-3: 98,195,245;
  --semi-light-blue-4: 48,172,241;
  --semi-light-blue-5: 0,149,238;
  --semi-light-blue-6: 0,123,202;
  --semi-light-blue-7: 0,99,167;
  --semi-light-blue-8: 0,75,131;
  --semi-light-blue-9: 0,53,95;
  --semi-light-green-0: 243,248,236;
  --semi-light-green-1: 227,240,208;
  --semi-light-green-2: 200,226,165;
  --semi-light-green-3: 173,211,126;
  --semi-light-green-4: 147,197,91;
  --semi-light-green-5: 123,182,60;
  --semi-light-green-6: 100,152,48;
  --semi-light-green-7: 78,121,38;
  --semi-light-green-8: 57,91,27;
  --semi-light-green-9: 37,61,18;
  --semi-lime-0: 242,250,230;
  --semi-lime-1: 227,246,197;
  --semi-lime-2: 203,237,142;
  --semi-lime-3: 183,227,91;
  --semi-lime-4: 167,218,44;
  --semi-lime-5: 155,209,0;
  --semi-lime-6: 126,174,0;
  --semi-lime-7: 99,139,0;
  --semi-lime-8: 72,104,0;
  --semi-lime-9: 47,70,0;
  --semi-orange-0: 255,248,234;
  --semi-orange-1: 254,238,204;
  --semi-orange-2: 254,217,152;
  --semi-orange-3: 253,193,101;
  --semi-orange-4: 253,166,51;
  --semi-orange-5: 252,136,0;
  --semi-orange-6: 210,103,0;
  --semi-orange-7: 168,74,0;
  --semi-orange-8: 126,49,0;
  --semi-orange-9: 84,29,0;
  --semi-pink-0: 253,236,239;
  --semi-pink-1: 251,207,216;
  --semi-pink-2: 246,160,181;
  --semi-pink-3: 242,115,150;
  --semi-pink-4: 237,72,123;
  --semi-pink-5: 233,30,99;
  --semi-pink-6: 197,19,86;
  --semi-pink-7: 162,11,72;
  --semi-pink-8: 126,5,58;
  --semi-pink-9: 90,1,43;
  --semi-purple-0: 247,233,247;
  --semi-purple-1: 239,202,240;
  --semi-purple-2: 221,155,224;
  --semi-purple-3: 201,111,209;
  --semi-purple-4: 180,73,194;
  --semi-purple-5: 158,40,179;
  --semi-purple-6: 135,30,158;
  --semi-purple-7: 113,22,138;
  --semi-purple-8: 92,15,117;
  --semi-purple-9: 73,10,97;
  --semi-red-0: 254,242,237;
  --semi-red-1: 254,221,210;
  --semi-red-2: 253,183,165;
  --semi-red-3: 251,144,120;
  --semi-red-4: 250,102,76;
  --semi-red-5: 249,57,32;
  --semi-red-6: 213,37,21;
  --semi-red-7: 178,20,12;
  --semi-red-8: 142,8,5;
  --semi-red-9: 106,1,3;
  --semi-teal-0: 228,247,244;
  --semi-teal-1: 192,240,232;
  --semi-teal-2: 135,224,211;
  --semi-teal-3: 84,209,193;
  --semi-teal-4: 39,194,176;
  --semi-teal-5: 0,179,161;
  --semi-teal-6: 0,149,137;
  --semi-teal-7: 0,119,111;
  --semi-teal-8: 0,89,85;
  --semi-teal-9: 0,60,58;
  --semi-violet-0: 243,237,249;
  --semi-violet-1: 226,209,244;
  --semi-violet-2: 196,167,233;
  --semi-violet-3: 166,127,221;
  --semi-violet-4: 136,91,210;
  --semi-violet-5: 106,58,199;
  --semi-violet-6: 87,47,179;
  --semi-violet-7: 70,37,158;
  --semi-violet-8: 54,28,138;
  --semi-violet-9: 40,20,117;
  --semi-white: 255,255,255;
  --semi-yellow-0: 255,253,234;
  --semi-yellow-1: 254,251,203;
  --semi-yellow-2: 253,243,152;
  --semi-yellow-3: 252,232,101;
  --semi-yellow-4: 251,218,50;
  --semi-yellow-5: 250,200,0;
  --semi-yellow-6: 208,170,0;
  --semi-yellow-7: 167,139,0;
  --semi-yellow-8: 125,106,0;
  --semi-yellow-9: 83,72,0;
}

body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
  --semi-red-0: 108,9,11;
  --semi-red-1: 144,17,16;
  --semi-red-2: 180,32,25;
  --semi-red-3: 215,51,36;
  --semi-red-4: 251,73,50;
  --semi-red-5: 252,114,90;
  --semi-red-6: 253,153,131;
  --semi-red-7: 253,190,172;
  --semi-red-8: 254,224,213;
  --semi-red-9: 255,243,239;
  --semi-pink-0: 92,7,48;
  --semi-pink-1: 128,14,65;
  --semi-pink-2: 164,23,81;
  --semi-pink-3: 199,34,97;
  --semi-pink-4: 235,47,113;
  --semi-pink-5: 239,86,134;
  --semi-pink-6: 243,126,159;
  --semi-pink-7: 247,168,188;
  --semi-pink-8: 251,211,220;
  --semi-pink-9: 253,238,241;
  --semi-purple-0: 74,16,97;
  --semi-purple-1: 94,23,118;
  --semi-purple-2: 115,31,138;
  --semi-purple-3: 137,40,159;
  --semi-purple-4: 160,51,179;
  --semi-purple-5: 181,83,194;
  --semi-purple-6: 202,120,209;
  --semi-purple-7: 221,160,225;
  --semi-purple-8: 239,206,240;
  --semi-purple-9: 247,235,247;
  --semi-violet-0: 64,27,119;
  --semi-violet-1: 76,36,140;
  --semi-violet-2: 88,46,160;
  --semi-violet-3: 100,57,181;
  --semi-violet-4: 114,70,201;
  --semi-violet-5: 136,101,212;
  --semi-violet-6: 162,136,223;
  --semi-violet-7: 190,173,233;
  --semi-violet-8: 221,212,244;
  --semi-violet-9: 241,238,250;
  --semi-indigo-0: 23,30,101;
  --semi-indigo-1: 32,41,122;
  --semi-indigo-2: 41,54,142;
  --semi-indigo-3: 52,68,163;
  --semi-indigo-4: 64,83,183;
  --semi-indigo-5: 95,113,197;
  --semi-indigo-6: 129,145,212;
  --semi-indigo-7: 167,180,226;
  --semi-indigo-8: 209,216,241;
  --semi-indigo-9: 237,239,248;
  --semi-blue-0: 5,49,112;
  --semi-blue-1: 10,70,148;
  --semi-blue-2: 19,92,184;
  --semi-blue-3: 29,117,219;
  --semi-blue-4: 41,144,255;
  --semi-blue-5: 84,169,255;
  --semi-blue-6: 127,193,255;
  --semi-blue-7: 169,215,255;
  --semi-blue-8: 212,236,255;
  --semi-blue-9: 239,248,255;
  --semi-light-blue-0: 0,55,97;
  --semi-light-blue-1: 0,77,133;
  --semi-light-blue-2: 3,102,169;
  --semi-light-blue-3: 10,129,204;
  --semi-light-blue-4: 19,159,240;
  --semi-light-blue-5: 64,180,243;
  --semi-light-blue-6: 110,200,246;
  --semi-light-blue-7: 157,220,249;
  --semi-light-blue-8: 206,238,252;
  --semi-light-blue-9: 235,248,254;
  --semi-cyan-0: 4,52,61;
  --semi-cyan-1: 7,79,92;
  --semi-cyan-2: 10,108,123;
  --semi-cyan-3: 14,137,153;
  --semi-cyan-4: 19,168,184;
  --semi-cyan-5: 56,187,198;
  --semi-cyan-6: 98,205,212;
  --semi-cyan-7: 145,223,227;
  --semi-cyan-8: 198,239,241;
  --semi-cyan-9: 231,247,248;
  --semi-teal-0: 2,60,57;
  --semi-teal-1: 4,90,85;
  --semi-teal-2: 7,119,111;
  --semi-teal-3: 10,149,136;
  --semi-teal-4: 14,179,161;
  --semi-teal-5: 51,194,176;
  --semi-teal-6: 94,209,193;
  --semi-teal-7: 142,225,211;
  --semi-teal-8: 196,240,232;
  --semi-teal-9: 230,247,244;
  --semi-green-0: 18,60,25;
  --semi-green-1: 28,90,37;
  --semi-green-2: 39,119,49;
  --semi-green-3: 50,149,61;
  --semi-green-4: 62,179,73;
  --semi-green-5: 93,194,100;
  --semi-green-6: 127,209,132;
  --semi-green-7: 166,225,168;
  --semi-green-8: 208,240,209;
  --semi-green-9: 236,247,236;
  --semi-light-green-0: 38,61,19;
  --semi-light-green-1: 59,92,29;
  --semi-light-green-2: 81,123,40;
  --semi-light-green-3: 103,153,52;
  --semi-light-green-4: 127,184,64;
  --semi-light-green-5: 151,198,95;
  --semi-light-green-6: 176,212,129;
  --semi-light-green-7: 201,227,167;
  --semi-light-green-8: 228,241,209;
  --semi-light-green-9: 243,248,237;
  --semi-lime-0: 49,70,3;
  --semi-lime-1: 75,105,5;
  --semi-lime-2: 103,141,9;
  --semi-lime-3: 132,176,12;
  --semi-lime-4: 162,211,17;
  --semi-lime-5: 174,220,58;
  --semi-lime-6: 189,229,102;
  --semi-lime-7: 207,237,150;
  --semi-lime-8: 229,246,201;
  --semi-lime-9: 243,251,233;
  --semi-yellow-0: 84,73,3;
  --semi-yellow-1: 126,108,6;
  --semi-yellow-2: 168,142,10;
  --semi-yellow-3: 210,175,15;
  --semi-yellow-4: 252,206,20;
  --semi-yellow-5: 253,222,67;
  --semi-yellow-6: 253,235,113;
  --semi-yellow-7: 254,245,160;
  --semi-yellow-8: 254,251,208;
  --semi-yellow-9: 255,254,236;
  --semi-amber-0: 81,46,9;
  --semi-amber-1: 121,75,15;
  --semi-amber-2: 161,107,22;
  --semi-amber-3: 202,143,30;
  --semi-amber-4: 242,183,38;
  --semi-amber-5: 245,202,80;
  --semi-amber-6: 247,219,122;
  --semi-amber-7: 250,234,166;
  --semi-amber-8: 252,246,210;
  --semi-amber-9: 254,251,237;
  --semi-orange-0: 85,31,3;
  --semi-orange-1: 128,53,6;
  --semi-orange-2: 170,80,10;
  --semi-orange-3: 213,111,15;
  --semi-orange-4: 255,146,20;
  --semi-orange-5: 255,174,67;
  --semi-orange-6: 255,199,114;
  --semi-orange-7: 255,221,161;
  --semi-orange-8: 255,239,208;
  --semi-orange-9: 255,249,237;
  --semi-grey-0: 28,31,35;
  --semi-grey-1: 46,50,56;
  --semi-grey-2: 65,70,76;
  --semi-grey-3: 85,91,97;
  --semi-grey-4: 107,112,117;
  --semi-grey-5: 136,141,146;
  --semi-grey-6: 167,171,176;
  --semi-grey-7: 198,202,205;
  --semi-grey-8: 230,232,234;
  --semi-grey-9: 249,249,249;
  --semi-white: 255, 255, 255;
  --semi-black: 0, 0, 0;
}

body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --semi-color-white: rgba(var(--semi-white), 1);
  --semi-color-black: rgba(var(--semi-black), 1);
  --semi-color-primary: rgba(var(--semi-blue-5), 1);
  --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
  --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
  --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
  --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
  --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1);
  --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1);
  --semi-color-default: rgba(var(--semi-grey-0), 1);
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
  --semi-color-info: rgba(var(--semi-blue-5), 1);
  --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-info-active: rgba(var(--semi-blue-7), 1);
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
  --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
  --semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
  --semi-color-success: rgba(var(--semi-green-5), 1);
  --semi-color-success-hover: rgba(var(--semi-green-6), 1);
  --semi-color-success-active: rgba(var(--semi-green-7), 1);
  --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
  --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
  --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
  --semi-color-success-light-active: rgba(var(--semi-green-2), 1);
  --semi-color-danger: rgba(var(--semi-red-5), 1);
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
  --semi-color-danger-active: rgba(var(--semi-red-7), 1);
  --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
  --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
  --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
  --semi-color-warning: rgba(var(--semi-orange-5), 1);
  --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
  --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
  --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
  --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
  --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
  --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
  --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
  --semi-color-shadow: rgba(var(--semi-black), .04);
  --semi-color-link: rgba(var(--semi-blue-5), 1);
  --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-link-active: rgba(var(--semi-blue-7), 1);
  --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
  --semi-color-border: rgba(var(--semi-grey-9), .08);
  --semi-color-nav-bg: rgba(var(--semi-white), 1);
  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
  --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
  --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
  --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
  --semi-color-bg-0: rgba(var(--semi-white), 1);
  --semi-color-bg-1: rgba(var(--semi-white), 1);
  --semi-color-bg-2: rgba(var(--semi-white), 1);
  --semi-color-bg-3: rgba(var(--semi-white), 1);
  --semi-color-bg-4: rgba(var(--semi-white), 1);
  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
  --semi-color-text-1: rgba(var(--semi-grey-9), .8);
  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
  --semi-color-text-3: rgba(var(--semi-grey-9), .35);
  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
  --semi-border-radius-extra-small: 3px;
  --semi-border-radius-small: 3px;
  --semi-border-radius-medium: 6px;
  --semi-border-radius-large: 12px;
  --semi-border-radius-circle: 50%;
  --semi-border-radius-full: 9999px;
  --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
  --semi-color-highlight: rgba(var(--semi-black), 1);
  --semi-color-data-0: rgba(87, 105, 255, 1);
  --semi-color-data-1: rgba(142, 212, 231, 1);
  --semi-color-data-2: rgba(245, 135, 0, 1);
  --semi-color-data-3: rgba(220, 183, 252, 1);
  --semi-color-data-4: rgba(74, 156, 247, 1);
  --semi-color-data-5: rgba(243, 204, 53, 1);
  --semi-color-data-6: rgba(254, 128, 144, 1);
  --semi-color-data-7: rgba(139, 215, 210, 1);
  --semi-color-data-8: rgba(131, 176, 35, 1);
  --semi-color-data-9: rgba(233, 165, 229, 1);
  --semi-color-data-10: rgba(48, 167, 206, 1);
  --semi-color-data-11: rgba(249, 192, 100, 1);
  --semi-color-data-12: rgba(177, 113, 249, 1);
  --semi-color-data-13: rgba(119, 182, 249, 1);
  --semi-color-data-14: rgba(200, 143, 2, 1);
  --semi-color-data-15: rgba(255, 170, 178, 1);
  --semi-color-data-16: rgba(51, 176, 171, 1);
  --semi-color-data-17: rgba(182, 215, 129, 1);
  --semi-color-data-18: rgba(212, 88, 212, 1);
  --semi-color-data-19: rgba(188, 198, 255, 1);
}

body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --semi-color-white: rgba(228, 231, 245, 1);
  --semi-color-black: rgba(var(--semi-black), 1);
  --semi-color-primary: rgba(var(--semi-blue-5), 1);
  --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
  --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
  --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
  --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
  --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2);
  --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3);
  --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4);
  --semi-color-default: rgba(var(--semi-grey-0), 1);
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
  --semi-color-info: rgba(var(--semi-blue-5), 1);
  --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-info-active: rgba(var(--semi-blue-7), 1);
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-info-light-default: rgba(var(--semi-blue-5), .2);
  --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3);
  --semi-color-info-light-active: rgba(var(--semi-blue-5), .4);
  --semi-color-success: rgba(var(--semi-green-5), 1);
  --semi-color-success-hover: rgba(var(--semi-green-6), 1);
  --semi-color-success-active: rgba(var(--semi-green-7), 1);
  --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
  --semi-color-success-light-default: rgba(var(--semi-green-5), .2);
  --semi-color-success-light-hover: rgba(var(--semi-green-5), .3);
  --semi-color-success-light-active: rgba(var(--semi-green-5), .4);
  --semi-color-danger: rgba(var(--semi-red-5), 1);
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
  --semi-color-danger-active: rgba(var(--semi-red-7), 1);
  --semi-color-danger-light-default: rgba(var(--semi-red-5), .2);
  --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3);
  --semi-color-danger-light-active: rgba(var(--semi-red-5), .4);
  --semi-color-warning: rgba(var(--semi-orange-5), 1);
  --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
  --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
  --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2);
  --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3);
  --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4);
  --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
  --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
  --semi-color-link: rgba(var(--semi-blue-5), 1);
  --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-link-active: rgba(var(--semi-blue-7), 1);
  --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
  --semi-color-nav-bg: rgba(35, 36, 41, 1);
  --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
  --semi-color-fill-0: rgba(var(--semi-white), .12);
  --semi-color-fill-1: rgba(var(--semi-white), .16);
  --semi-color-fill-2: rgba(var(--semi-white), .20);
  --semi-color-border: rgba(var(--semi-white), .08);
  --semi-color-shadow: rgba(var(--semi-black), .04);
  --semi-color-bg-0: rgba(22, 22, 26, 1);
  --semi-color-bg-1: rgba(35, 36, 41, 1);
  --semi-color-bg-2: rgba(53, 54, 60, 1);
  --semi-color-bg-3: rgba(67, 68, 74, 1);
  --semi-color-bg-4: rgba(79, 81, 89, 1);
  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
  --semi-color-text-1: rgba(var(--semi-grey-9), .8);
  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
  --semi-color-text-3: rgba(var(--semi-grey-9), .35);
  --semi-border-radius-extra-small: 3px;
  --semi-border-radius-small: 3px;
  --semi-border-radius-medium: 6px;
  --semi-border-radius-large: 12px;
  --semi-border-radius-circle: 50%;
  --semi-border-radius-full: 9999px;
  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
  --semi-color-highlight: rgba(var(--semi-white), 1);
  --semi-color-data-0: rgba(94, 109, 194, 1);
  --semi-color-data-1: rgba(8, 104, 120, 1);
  --semi-color-data-2: rgba(250, 173, 63, 1);
  --semi-color-data-3: rgba(76, 43, 156, 1);
  --semi-color-data-4: rgba(16, 125, 248, 1);
  --semi-color-data-5: rgba(248, 202, 16, 1);
  --semi-color-data-6: rgba(195, 30, 87, 1);
  --semi-color-data-7: rgba(5, 119, 115, 1);
  --semi-color-data-8: rgba(154, 207, 13, 1);
  --semi-color-data-9: rgba(117, 29, 138, 1);
  --semi-color-data-10: rgba(16, 162, 180, 1);
  --semi-color-data-11: rgba(208, 110, 11, 1);
  --semi-color-data-12: rgba(113, 66, 197, 1);
  --semi-color-data-13: rgba(7, 100, 212, 1);
  --semi-color-data-14: rgba(251, 232, 110, 1);
  --semi-color-data-15: rgba(160, 19, 73, 1);
  --semi-color-data-16: rgba(11, 179, 167, 1);
  --semi-color-data-17: rgba(98, 138, 6, 1);
  --semi-color-data-18: rgba(162, 48, 179, 1);
  --semi-color-data-19: rgba(40, 51, 138, 1);
}

.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}
.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: transparent;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
  background: var(--semi-color-fill-2);
}
.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
  background: var(--semi-color-fill-1);
}
/* shadow */
/* sizing */
/* spacing */
.semi-button-split {
  display: inline-block;
}
.semi-button-split .semi-button {
  border-radius: 0;
  margin-right: 1px;
}
.semi-button-split .semi-button-first {
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-button-split .semi-button-last {
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
  margin-right: 0;
  margin-right: initial;
}
.semi-button-split:hover .semi-button-borderless:active {
  background-color: var(--semi-color-fill-1);
}

.semi-button {
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0 transparent solid;
  border-radius: var(--semi-border-radius-small);
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 600;
  outline: none;
  vertical-align: middle;
  white-space: nowrap;
}
.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-button-content {
  display: flex;
  align-items: center;
}
.semi-button-danger {
  background-color: var(--semi-color-danger);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-danger-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-danger-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-danger-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-danger:hover {
  background-color: var(--semi-color-danger-hover);
}
.semi-button-danger:active {
  background-color: var(--semi-color-danger-active);
}
.semi-button-danger.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-danger);
}
.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
  color: var(--semi-color-danger);
}
.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
  outline: 2px solid var(--semi-color-danger-light-active);
}
.semi-button-warning {
  background-color: var(--semi-color-warning);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-warning-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-warning-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-warning-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-warning:hover {
  background-color: var(--semi-color-warning-hover);
}
.semi-button-warning:active {
  background-color: var(--semi-color-warning-active);
}
.semi-button-warning.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-warning);
}
.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
  color: var(--semi-color-warning);
}
.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
  outline: 2px solid var(--semi-color-warning-light-active);
}
.semi-button-tertiary {
  background-color: var(--semi-color-tertiary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-tertiary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-tertiary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-tertiary-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-tertiary:hover {
  background-color: var(--semi-color-tertiary-hover);
}
.semi-button-tertiary:active {
  background-color: var(--semi-color-tertiary-active);
}
.semi-button-tertiary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
  color: var(--semi-color-text-1);
}
.semi-button-primary {
  background-color: var(--semi-color-primary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-primary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-primary-disabled.semi-button-light {
  background: var(--semi-color-fill-0);
}
.semi-button-primary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
  background-color: var(--semi-color-primary-hover);
}
.semi-button-primary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
  background-color: var(--semi-color-primary-active);
}
.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
  color: var(--semi-color-primary);
}
.semi-button-secondary {
  background-color: var(--semi-color-secondary);
  outline-color: var(--semi-color-secondary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-secondary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-secondary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-secondary-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-secondary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-secondary:hover {
  background-color: var(--semi-color-secondary-hover);
}
.semi-button-secondary:active {
  background-color: var(--semi-color-secondary-active);
}
.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
  color: var(--semi-color-secondary);
}
.semi-button-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
  color: var(--semi-color-disabled-text);
}
.semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
  color: var(--semi-color-disabled-text);
}
.semi-button-borderless {
  background-color: transparent;
  border: 0 transparent solid;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-borderless:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-0);
  border: 0 transparent solid;
}
.semi-button-borderless:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-1);
  border: 0 transparent solid;
}
.semi-button-outline {
  background-color: transparent;
}
.semi-button-outline:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-0);
}
.semi-button-outline:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-1);
}
.semi-button-light {
  background-color: var(--semi-color-fill-0);
  border: 0 transparent solid;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-light:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-1);
  border: 0 transparent solid;
}
.semi-button-light:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-2);
  border: 0 transparent solid;
}
.semi-button-size-small {
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-size-large {
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.semi-button-block {
  width: 100%;
}
.semi-button-group {
  display: flex;
  flex-wrap: wrap;
}
.semi-button-group > .semi-button {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button:first-child {
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-button-group > .semi-button:last-child {
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-button-group > .semi-button-outline:not(:last-child) {
  border-right-color: transparent;
  margin-right: -1px;
}
.semi-button-group-line {
  display: inline-flex;
  align-items: center;
  background-color: var(--semi-color-border);
}
.semi-button-group-line-primary {
  background-color: var(--semi-color-primary);
}
.semi-button-group-line-secondary {
  background-color: var(--semi-color-secondary);
}
.semi-button-group-line-tertiary {
  background-color: var(--semi-color-tertiary);
}
.semi-button-group-line-warning {
  background-color: var(--semi-color-warning);
}
.semi-button-group-line-danger {
  background-color: var(--semi-color-danger);
}
.semi-button-group-line-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-group-line-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-group-line-borderless {
  background-color: transparent;
}
.semi-button-group-line::before {
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: var(--semi-color-border);
}

.semi-rtl .semi-button,
.semi-portal-rtl .semi-button {
  direction: rtl;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-small,
.semi-portal-rtl .semi-button-size-small {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-large,
.semi-portal-rtl .semi-button-size-large {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group,
.semi-portal-rtl .semi-button-group {
  direction: rtl;
}
.semi-rtl .semi-button-group > .semi-button,
.semi-portal-rtl .semi-button-group > .semi-button {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button:first-child,
.semi-portal-rtl .semi-button-group > .semi-button:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
  border-left: 1px var(--semi-color-border) solid;
  border-right: 0;
}
.semi-rtl .semi-button-group > .semi-button:last-child,
.semi-portal-rtl .semi-button-group > .semi-button:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-content-left,
.semi-portal-rtl .semi-button-content-left {
  margin-left: 8px;
  margin-right: 0;
}
.semi-rtl .semi-button-content-right,
.semi-portal-rtl .semi-button-content-right {
  margin-right: 8px;
  margin-left: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-button.semi-button-with-icon {
  display: inline-flex;
  align-items: center;
}
.semi-button.semi-button-with-icon .semi-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.semi-button.semi-button-loading {
  pointer-events: none;
  cursor: not-allowed;
}
.semi-button.semi-button-loading .semi-button-content > svg {
  width: 16px;
  height: 16px;
  animation: 0.6s linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
}
.semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  justify-content: center;
  align-items: center;
}
.semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.semi-button-content-left {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.semi-button-content-right {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.semi-rtl .semi-button,
.semi-portal-rtl .semi-button {
  direction: rtl;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-small,
.semi-portal-rtl .semi-button-size-small {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-large,
.semi-portal-rtl .semi-button-size-large {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group,
.semi-portal-rtl .semi-button-group {
  direction: rtl;
}
.semi-rtl .semi-button-group > .semi-button,
.semi-portal-rtl .semi-button-group > .semi-button {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button:first-child,
.semi-portal-rtl .semi-button-group > .semi-button:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
  border-left: 1px var(--semi-color-border) solid;
  border-right: 0;
}
.semi-rtl .semi-button-group > .semi-button:last-child,
.semi-portal-rtl .semi-button-group > .semi-button:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-content-left,
.semi-portal-rtl .semi-button-content-left {
  margin-left: 8px;
  margin-right: 0;
}
.semi-rtl .semi-button-content-right,
.semi-portal-rtl .semi-button-content-right {
  margin-right: 8px;
  margin-left: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-icon {
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  text-rendering: optimizeLegibility;
  fill: currentColor;
}

.semi-icon-extra-small {
  font-size: 8px;
}

.semi-icon-small {
  font-size: 12px;
}

.semi-icon-default {
  font-size: 16px;
}

.semi-icon-large {
  font-size: 20px;
}

.semi-icon-extra-large {
  font-size: 24px;
}

.semi-icon-spinning {
  animation: 0.6s linear infinite semi-icon-animation-rotate;
  animation-fill-mode: forwards;
}

@keyframes semi-icon-animation-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* shadow */
/* sizing */
/* spacing */
.semi-checkbox {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.semi-checkbox input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.semi-checkbox-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.semi-checkbox-addon {
  display: flex;
  flex: 1 1;
  align-items: center;
  color: var(--semi-color-text-0);
  line-height: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
}
.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  box-shadow: none;
}
.semi-checkbox:active .semi-checkbox-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  box-shadow: none;
}
.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
  background: var(--semi-color-disabled-fill);
  box-shadow: inset 0 0 0 1px var(--semi-color-border);
}
.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-disabled);
  box-shadow: none;
}
.semi-checkbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 16px;
  height: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.semi-checkbox-inner-display {
  box-sizing: border-box;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  background: transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-inner-display .semi-icon {
  font-size: 16px;
}
.semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary);
  color: var(--semi-color-white);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-inner-checked > .semi-checkbox-addon {
  color: var(--semi-color-text-0);
}
.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
}
.semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  box-shadow: none;
  color: var(--semi-color-white);
}
.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  border-color: var(--semi-color-primary-hover);
  color: var(--semi-color-white);
}
.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox:active .semi-checkbox-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
  box-shadow: none;
}
.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
}
.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox-cardType {
  flex-wrap: nowrap;
  align-items: flex-start;
  border-radius: 3px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
}
.semi-checkbox-cardType .semi-checkbox-inner {
  position: relative;
  flex-shrink: 0;
}
.semi-checkbox-cardType .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
  opacity: 0;
  width: 0;
}
.semi-checkbox-cardType .semi-checkbox-addon {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-0);
}
.semi-checkbox-cardType .semi-checkbox-extra {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-2);
}
.semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
  margin-top: 0;
}
.semi-checkbox-cardType:hover {
  background: var(--semi-color-fill-0);
}
.semi-checkbox-cardType:active {
  background: var(--semi-color-fill-1);
}
.semi-checkbox-cardType_checked {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary);
}
.semi-checkbox-cardType_checked:hover {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary-hover);
}
.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  box-shadow: none;
}
.semi-checkbox-cardType_checked:active {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary-active);
}
.semi-checkbox-cardType_disabled:active {
  background: transparent;
}
.semi-checkbox-cardType_disabled:hover {
  background: transparent;
}
.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary-disabled);
}
.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  box-shadow: none;
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary);
  color: var(--semi-color-white);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover {
  background: var(--semi-color-primary-hover);
  border-color: var(--semi-color-primary-hover);
  color: var(--semi-color-white);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon {
  color: var(--semi-color-text-0);
}
.semi-checkbox-disabled {
  cursor: not-allowed;
}
.semi-checkbox-disabled .semi-checkbox-inner {
  cursor: not-allowed;
}
.semi-checkbox-disabled .semi-checkbox-inner-display {
  color: var(--semi-color-white);
  background: var(--semi-color-disabled-fill);
  box-shadow: inset 0 0 0 1px var(--semi-color-border);
}
.semi-checkbox-disabled .semi-checkbox-inner-display:hover {
  color: var(--semi-color-white);
  background: transparent;
}
.semi-checkbox-disabled .semi-checkbox-inner-checked {
  color: var(--semi-color-white);
}
.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  opacity: 0.75;
  background: var(--semi-color-primary-disabled);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
}
.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover {
  color: var(--semi-color-white);
  background: var(--semi-color-primary-disabled);
}
.semi-checkbox-disabled .semi-checkbox-addon {
  color: var(--semi-color-disabled-text);
}
.semi-checkbox-disabled .semi-checkbox-extra {
  color: var(--semi-color-disabled-text);
}
.semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  opacity: 0.75;
  background: var(--semi-color-primary-disabled);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
  color: var(--semi-color-white);
}
.semi-checkbox-extra {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 100%;
  box-sizing: border-box;
  color: var(--semi-color-text-2);
}
.semi-checkbox-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-checkbox-focus-border {
  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
}

.semi-checkboxGroup {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
}
.semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
  margin-bottom: 16px;
}
.semi-checkboxGroup-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.semi-checkboxGroup-horizontal .semi-checkbox {
  display: inline-flex;
}
.semi-checkboxGroup-vertical {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.semi-checkboxGroup-vertical-cardType {
  row-gap: 16px;
}
.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
  -moz-column-gap: 0;
       column-gap: 0;
}

.semi-rtl .semi-checkbox,
.semi-portal-rtl .semi-checkbox {
  direction: rtl;
}
.semi-rtl .semi-checkbox input[type=checkbox],
.semi-portal-rtl .semi-checkbox input[type=checkbox] {
  left: auto;
  right: 0;
}
.semi-rtl .semi-checkboxGroup,
.semi-portal-rtl .semi-checkboxGroup {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-modal {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  margin: 80px auto;
  color: var(--semi-color-text-0);
}
.semi-modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: var(--semi-color-overlay-bg);
  height: 100%;
  z-index: 1000;
}
.semi-modal-mask-hidden {
  display: none;
}
.semi-modal-icon-wrapper {
  display: inline-flex;
  margin-right: 12px;
  width: 24px;
}
.semi-modal-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.semi-modal-wrap-center {
  display: flex;
  align-items: center;
}
.semi-modal-title {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}
.semi-modal-content {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  background-color: var(--semi-color-bg-2);
  border: 1px solid var(--semi-color-border);
  border-radius: var(--semi-border-radius-large);
  padding: 0 24px;
  background-clip: padding-box;
  overflow: hidden;
  box-shadow: var(--semi-shadow-elevated);
}
.semi-modal-footerfill {
  display: flex;
}
.semi-modal-content-fullScreen {
  border-radius: 0;
  border: none;
  top: 0px;
}
.semi-modal-header {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
  padding: 0 0;
  font-size: 14px;
  font-weight: 600;
  background-color: transparent;
  color: var(--semi-color-text-0);
  border-bottom: 0 solid transparent;
}
.semi-modal-body-wrapper {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
}
.semi-modal-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}
.semi-modal-withIcon {
  margin-left: 36px;
}
.semi-modal-footer {
  margin: 24px 0;
  padding: 0 0;
  text-align: right;
  border-radius: 0 0 5px 5px;
  border-top: 0 solid transparent;
  background-color: transparent;
}
.semi-modal-footer .semi-button {
  margin-left: 12px;
  margin-right: 0;
}
.semi-modal-confirm .semi-modal-header {
  margin-bottom: 8px;
}
.semi-modal-confirm-icon-wrapper {
  display: inline-flex;
  margin-right: 12px;
  width: 24px;
}
.semi-modal-confirm-icon {
  display: inline-flex;
  color: var(--semi-color-primary);
}
.semi-modal-info-icon {
  color: var(--semi-color-info);
}
.semi-modal-success-icon {
  color: var(--semi-color-success);
}
.semi-modal-error-icon {
  color: var(--semi-color-danger);
}
.semi-modal-warning-icon {
  color: var(--semi-color-warning);
}
.semi-modal-small {
  width: 448px;
}
.semi-modal-medium {
  width: 684px;
}
.semi-modal-large {
  width: 920px;
}
.semi-modal-full-width {
  width: calc(100vw - 64px);
}

.semi-modal-centered {
  margin: 0 auto;
}

.semi-modal-popup .semi-modal-mask,
.semi-modal-popup .semi-modal-wrap {
  position: absolute;
  overflow: hidden;
}

.semi-modal-fixed .semi-modal-mask,
.semi-modal-fixed .semi-modal-wrap {
  position: fixed;
  overflow: hidden;
}

.semi-modal-displayNone {
  display: none;
}

.semi-modal-content-animate-show {
  animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-content-animate-hide {
  animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-mask-animate-show {
  animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-mask-animate-hide {
  animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

@keyframes semi-modal-content-keyframe-show {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes semi-modal-content-keyframe-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes semi-modal-mask-keyframe-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes semi-modal-mask-keyframe-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.semi-modal-rtl {
  direction: rtl;
}
.semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper {
  margin-right: 0;
  margin-left: 12px;
}
.semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon {
  margin-left: 0;
  margin-right: 36px;
}
.semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer {
  text-align: left;
}
.semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button {
  margin-left: 0;
  margin-right: 12px;
}
.semi-modal-confirm-rtl {
  direction: rtl;
}
.semi-modal-confirm .semi-modal-confirm-rtl .semi-button {
  margin-left: 0;
  margin-right: 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-portal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.semi-portal-inner {
  position: absolute;
  background-color: transparent;
  min-width: -moz-max-content;
  min-width: max-content;
}
/* shadow */
/* sizing */
/* spacing */
.semi-typography {
  color: var(--semi-color-text-0);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-typography.semi-typography-secondary {
  color: var(--semi-color-text-1);
}
.semi-typography.semi-typography-tertiary {
  color: var(--semi-color-text-2);
}
.semi-typography.semi-typography-quaternary {
  color: var(--semi-color-text-3);
}
.semi-typography.semi-typography-warning {
  color: var(--semi-color-warning);
}
.semi-typography.semi-typography-success {
  color: var(--semi-color-success);
}
.semi-typography.semi-typography-danger {
  color: var(--semi-color-danger);
}
.semi-typography.semi-typography-link {
  color: var(--semi-color-link);
  font-weight: 600;
}
.semi-typography.semi-typography-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-typography.semi-typography-disabled.semi-typography-link {
  color: var(--semi-color-link);
}
.semi-typography-icon {
  margin-right: 4px;
  vertical-align: middle;
  color: inherit;
}
.semi-typography-small {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.semi-typography-small.semi-typography-paragraph {
  font-weight: 400;
}
.semi-typography code {
  border: 1px solid var(--semi-color-border);
  border-radius: 2px;
  color: var(--semi-color-text-2);
  background-color: var(--semi-color-fill-1);
  padding: 2px 4px;
}
.semi-typography mark {
  background-color: var(--semi-color-primary-light-default);
}
.semi-typography u {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.semi-typography del {
  text-decoration: line-through;
}
.semi-typography strong {
  font-weight: 600;
}
.semi-typography a {
  display: inline;
  color: var(--semi-color-link);
  cursor: pointer;
  text-decoration: none;
}
.semi-typography a:visited {
  color: var(--semi-color-link-visited);
}
.semi-typography a:hover {
  color: var(--semi-color-link-hover);
}
.semi-typography a:active {
  color: var(--semi-color-link-active);
}
.semi-typography a .semi-typography-link-underline:hover {
  border-bottom: 1px solid var(--semi-color-link-hover);
  margin-bottom: -1px;
}
.semi-typography a .semi-typography-link-underline:active {
  border-bottom: 1px solid var(--semi-color-link-active);
  margin-bottom: -1px;
}
.semi-typography-ellipsis-single-line {
  overflow: hidden;
}
.semi-typography-ellipsis-multiple-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text {
  display: -webkit-inline-box;
}
.semi-typography-ellipsis-overflow-ellipsis {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}
.semi-typography-ellipsis-expand {
  display: inline;
  margin-left: 8px;
}
.semi-typography-action-copy {
  display: inline-flex;
  vertical-align: middle;
  padding: 0;
  margin-left: 4px;
}
.semi-typography a.semi-typography-action-copy-icon {
  display: inline-flex;
}
.semi-typography-action-copied {
  display: inline-flex;
  padding: 0;
  margin-left: 4px;
  color: var(--semi-color-text-2);
}
.semi-typography-action-copied .semi-icon {
  vertical-align: middle;
  color: var(--semi-color-success);
}
.semi-typography-paragraph {
  margin: 0;
}

h1.semi-typography,
.semi-typography-h1.semi-typography {
  font-size: 32px;
  line-height: 44px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h1.semi-typography.semi-typography-h1-weight-light,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-light {
  font-weight: 200;
}
h1.semi-typography.semi-typography-h1-weight-regular,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-regular {
  font-weight: 400;
}
h1.semi-typography.semi-typography-h1-weight-medium,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-medium {
  font-weight: 500;
}
h1.semi-typography.semi-typography-h1-weight-semibold,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-semibold {
  font-weight: 600;
}
h1.semi-typography.semi-typography-h1-weight-bold,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-bold {
  font-weight: 700;
}

h2.semi-typography,
.semi-typography-h2.semi-typography {
  font-size: 28px;
  line-height: 40px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h2.semi-typography.semi-typography-h2-weight-light,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-light {
  font-weight: 200;
}
h2.semi-typography.semi-typography-h2-weight-regular,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-regular {
  font-weight: 400;
}
h2.semi-typography.semi-typography-h2-weight-medium,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-medium {
  font-weight: 500;
}
h2.semi-typography.semi-typography-h2-weight-semibold,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-semibold {
  font-weight: 600;
}
h2.semi-typography.semi-typography-h2-weight-bold,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-bold {
  font-weight: 700;
}

h3.semi-typography,
.semi-typography-h3.semi-typography {
  font-size: 24px;
  line-height: 32px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h3.semi-typography.semi-typography-h3-weight-light,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-light {
  font-weight: 200;
}
h3.semi-typography.semi-typography-h3-weight-regular,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-regular {
  font-weight: 400;
}
h3.semi-typography.semi-typography-h3-weight-medium,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-medium {
  font-weight: 500;
}
h3.semi-typography.semi-typography-h3-weight-semibold,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-semibold {
  font-weight: 600;
}
h3.semi-typography.semi-typography-h3-weight-bold,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-bold {
  font-weight: 700;
}

h4.semi-typography,
.semi-typography-h4.semi-typography {
  font-size: 20px;
  line-height: 28px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h4.semi-typography.semi-typography-h4-weight-light,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-light {
  font-weight: 200;
}
h4.semi-typography.semi-typography-h4-weight-regular,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-regular {
  font-weight: 400;
}
h4.semi-typography.semi-typography-h4-weight-medium,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-medium {
  font-weight: 500;
}
h4.semi-typography.semi-typography-h4-weight-semibold,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-semibold {
  font-weight: 600;
}
h4.semi-typography.semi-typography-h4-weight-bold,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-bold {
  font-weight: 700;
}

h5.semi-typography,
.semi-typography-h5.semi-typography {
  font-size: 18px;
  line-height: 24px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h5.semi-typography.semi-typography-h5-weight-light,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-light {
  font-weight: 200;
}
h5.semi-typography.semi-typography-h5-weight-regular,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-regular {
  font-weight: 400;
}
h5.semi-typography.semi-typography-h5-weight-medium,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-medium {
  font-weight: 500;
}
h5.semi-typography.semi-typography-h5-weight-semibold,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-semibold {
  font-weight: 600;
}
h5.semi-typography.semi-typography-h5-weight-bold,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-bold {
  font-weight: 700;
}

h6.semi-typography,
.semi-typography-h6.semi-typography {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h6.semi-typography.semi-typography-h6-weight-light,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-light {
  font-weight: 200;
}
h6.semi-typography.semi-typography-h6-weight-regular,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-regular {
  font-weight: 400;
}
h6.semi-typography.semi-typography-h6-weight-medium,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-medium {
  font-weight: 500;
}
h6.semi-typography.semi-typography-h6-weight-semibold,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-semibold {
  font-weight: 600;
}
h6.semi-typography.semi-typography-h6-weight-bold,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-bold {
  font-weight: 700;
}

p.semi-typography-extended,
.semi-typography-paragraph.semi-typography-extended {
  line-height: 24px;
  font-weight: 400;
}

.semi-rtl .semi-typography,
.semi-portal-rtl .semi-typography {
  direction: rtl;
}
.semi-rtl .semi-typography-link a,
.semi-rtl .semi-typography a,
.semi-portal-rtl .semi-typography-link a,
.semi-portal-rtl .semi-typography a {
  display: inline-block;
}
.semi-rtl .semi-typography-icon,
.semi-portal-rtl .semi-typography-icon {
  margin-right: auto;
  margin-left: 4px;
}
.semi-rtl .semi-typography-ellipsis-expand,
.semi-portal-rtl .semi-typography-ellipsis-expand {
  margin-left: auto;
}
.semi-rtl .semi-typography-action-copy,
.semi-portal-rtl .semi-typography-action-copy {
  margin-left: auto;
  margin-right: 4px;
}
.semi-rtl .semi-typography-action-copied,
.semi-portal-rtl .semi-typography-action-copied {
  margin-left: auto;
  margin-right: 4px;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-tooltip-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  50% {
    opacity: 1;
  }
}
@keyframes semi-tooltip-bounceIn {
  from {
    opacity: 0;
    transform: scale(0.6, 0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.01, 1.01);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
@keyframes semi-tooltip-zoomOut {
  from {
    opacity: 1;
  }
  60% {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 0;
  }
}
.semi-tooltip-wrapper {
  position: relative;
  background-color: rgba(var(--semi-grey-7), 1);
  color: var(--semi-color-bg-0);
  border-radius: var(--semi-border-radius-medium);
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  font-size: 14px;
  left: 0;
  top: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
  max-width: 240px;
}
.semi-tooltip-wrapper-show {
  opacity: 1;
}
.semi-tooltip-content {
  min-width: 0;
}
.semi-tooltip-trigger {
  display: inline-block;
  width: auto;
  height: auto;
}
.semi-tooltip-with-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.semi-tooltip-animation-show {
  animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}
.semi-tooltip-animation-hide {
  animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}

.semi-tooltip-wrapper .semi-tooltip-icon-arrow {
  height: 7px;
  width: 24px;
  position: absolute;
  color: rgba(var(--semi-grey-7), 1);
}
.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
}
.semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow {
  bottom: -6px;
  left: 6px;
}
.semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow {
  bottom: -6px;
  right: 6px;
}
.semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  top: 5px;
}
.semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}
.semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  bottom: 5px;
}
.semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  top: 5px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  bottom: 5px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow {
  top: -6px;
  left: 6px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow {
  right: 6px;
  top: -6px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow {
  min-width: 36px;
}

.semi-rtl .semi-tooltip-wrapper,
.semi-portal-rtl .semi-tooltip-wrapper {
  direction: rtl;
  padding-right: 12px;
  padding-left: 12px;
  left: auto;
  right: 0;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-popover-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  50% {
    opacity: 1;
  }
}
@keyframes semi-popover-zoomOut {
  from {
    opacity: 1;
  }
  60% {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 0;
  }
}
.semi-popover-wrapper {
  position: relative;
  background-color: var(--semi-color-bg-3);
  box-shadow: var(--semi-shadow-elevated);
  z-index: 1030;
  border-radius: var(--semi-border-radius-medium);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
}
.semi-popover-wrapper-show {
  opacity: 1;
}
.semi-popover-trigger {
  display: inline-block;
  width: auto;
  height: auto;
}
.semi-popover-title {
  padding: 8px;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-popover-confirm {
  position: absolute;
}
.semi-popover-with-arrow {
  padding: 12px;
  box-sizing: border-box;
}
.semi-popover-animation-show {
  animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}
.semi-popover-animation-hide {
  animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}

.semi-popover-wrapper .semi-popover-icon-arrow {
  height: 8px;
  width: 24px;
  position: absolute;
  color: inherit;
}
.semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow {
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;
}
.semi-popover-wrapper[x-placement=top].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow {
  bottom: -7px;
  left: 6px;
}
.semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow {
  bottom: -7px;
  right: 6px;
}
.semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  top: 6px;
}
.semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
}
.semi-popover-wrapper[x-placement=left].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  bottom: 6px;
}
.semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  top: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.semi-popover-wrapper[x-placement=right].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  bottom: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow {
  top: -7px;
  left: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow {
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow {
  right: 6px;
  top: -7px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow {
  min-width: 36px;
}

.semi-popover.semi-popover-rtl {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-input-active {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.97);
  }
}
@keyframes semi-input-inactive {
  from {
    transform: scale(0.97);
  }
  to {
    transform: scale(1);
  }
}
.semi-input {
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}

.semi-input-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--semi-color-fill-0);
  border: 1px transparent solid;
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  outline: none;
  cursor: text;
  box-sizing: border-box;
  color: var(--semi-color-text-0);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-input-wrapper-default {
  height: 32px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}
.semi-input-wrapper-small {
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 22px;
}
.semi-input-wrapper-large {
  height: 40px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 38px;
}
.semi-input-wrapper:hover {
  background-color: var(--semi-color-fill-1);
  border-color: transparent;
}
.semi-input-wrapper-focus {
  background-color: var(--semi-color-fill-0);
  border: var(--semi-color-focus-border) solid 1px;
}
.semi-input-wrapper-focus:hover {
  background-color: var(--semi-color-fill-0);
  border-color: var(--semi-color-focus-border);
}
.semi-input-wrapper-focus:active {
  background-color: var(--semi-color-fill-2);
  border-color: var(--semi-color-focus-border);
}
.semi-input-wrapper.semi-input-readonly {
  cursor: default;
}
.semi-input-wrapper-error {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper-error:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper-error.semi-input-wrapper-focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper-error:active {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper-warning {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper-warning:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper-warning.semi-input-wrapper-focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper-warning:active {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper__with-prefix {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper__with-prefix .semi-input {
  padding-left: 0;
}
.semi-input-wrapper__with-suffix {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper__with-suffix .semi-input {
  padding-right: 0;
}
.semi-input-wrapper-clearable, .semi-input-wrapper-modebtn {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper-hidden {
  border: none;
}
.semi-input-wrapper .semi-icon {
  color: var(--semi-color-text-2);
}
.semi-input-wrapper .semi-input-clearbtn,
.semi-input-wrapper .semi-input-modebtn {
  color: var(--semi-color-primary-hover);
}
.semi-input-wrapper .semi-input-clearbtn > svg,
.semi-input-wrapper .semi-input-modebtn > svg {
  pointer-events: none;
}
.semi-input-wrapper .semi-input-clearbtn:hover,
.semi-input-wrapper .semi-input-modebtn:hover {
  cursor: pointer;
}
.semi-input-wrapper .semi-input-clearbtn:hover .semi-icon,
.semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
  color: var(--semi-color-primary-hover);
}
.semi-input-wrapper .semi-input-clearbtn:focus-visible,
.semi-input-wrapper .semi-input-modebtn:focus-visible {
  border-radius: var(--semi-border-radius-small);
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
  min-width: 24px;
  justify-content: flex-end;
}
.semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn {
  min-width: 16px;
  justify-content: center;
}
.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) {
  border-right-style: none;
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover {
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus {
  border: 1px transparent solid;
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
  background-color: var(--semi-color-fill-0);
  border: 1px transparent solid;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
  background-color: var(--semi-color-fill-1);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
  border: 1px var(--semi-color-focus-border) solid;
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
  box-sizing: border-box;
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
  border: 1px var(--semi-color-focus-border) solid;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) {
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
  border: 1px var(--semi-color-focus-border) solid;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
  background-color: var(--semi-color-fill-2);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
  background-color: var(--semi-color-fill-2);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error {
  border-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
  background-color: var(--semi-color-danger-light-active);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
  background-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning {
  border-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
  background-color: var(--semi-color-warning-light-active);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
  background-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: var(--semi-color-disabled-fill);
  -webkit-text-fill-color: var(--semi-color-disabled-text);
}
.semi-input-wrapper-disabled:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-wrapper-disabled .semi-input-append,
.semi-input-wrapper-disabled .semi-input-prepend,
.semi-input-wrapper-disabled .semi-input-suffix,
.semi-input-wrapper-disabled .semi-input-prefix,
.semi-input-wrapper-disabled .semi-icon {
  color: var(--semi-color-disabled-text);
}

.semi-input {
  border: none;
  outline: none;
  width: 100%;
  color: inherit;
  padding-left: 12px;
  padding-right: 12px;
  background-color: transparent;
  box-sizing: border-box;
}
.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
  display: none;
}
.semi-input[type=search]::-webkit-search-cancel-button {
  display: none;
}
.semi-input::-moz-placeholder {
  color: var(--semi-color-text-2);
}
.semi-input::placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-large {
  height: 38px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 38px;
}
.semi-input-small {
  height: 22px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 22px;
}
.semi-input-default {
  height: 30px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}
.semi-input-disabled {
  cursor: not-allowed;
  color: inherit;
}
.semi-input-inset-label {
  margin-right: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-text-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.semi-input-prefix, .semi-input-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-input-prefix-text, .semi-input-suffix-text {
  margin: 0 12px;
  color: var(--semi-color-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.semi-input-prefix-icon, .semi-input-suffix-icon {
  color: var(--semi-color-text-2);
  margin: 0 8px;
}
.semi-input-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-input-clearbtn, .semi-input-modebtn {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  min-width: 32px;
}
.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text {
  margin-left: 0;
}
.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: 0;
}
.semi-input-suffix-hidden {
  display: none;
}
.semi-input-prepend, .semi-input-append {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-text-2);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}
.semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text {
  padding: 0 12px;
}
.semi-input-append {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left: 1px transparent solid;
}
.semi-input-prepend {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
  border-right: 1px transparent solid;
}
.semi-input-disabled::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-disabled::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-group {
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.semi-input-group .semi-select,
.semi-input-group .semi-tagInput,
.semi-input-group .semi-cascader,
.semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
  border-radius: 0;
}
.semi-input-group .semi-select:first-child,
.semi-input-group .semi-tagInput:first-child,
.semi-input-group .semi-cascader:first-child,
.semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-group .semi-select:last-child,
.semi-input-group .semi-tagInput:last-child,
.semi-input-group .semi-cascader:last-child,
.semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-group .semi-select:not(:last-child),
.semi-input-group .semi-tagInput:not(:last-child),
.semi-input-group .semi-cascader:not(:last-child),
.semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
  position: relative;
}
.semi-input-group .semi-select:not(:last-child)::after,
.semi-input-group .semi-tagInput:not(:last-child)::after,
.semi-input-group .semi-cascader:not(:last-child)::after,
.semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  content: "";
  background-color: var(--semi-color-border);
  width: 1px;
  position: absolute;
  right: -1px;
  top: 1px;
  bottom: 1px;
}
.semi-input-group .semi-select {
  overflow-y: visible;
}
.semi-input-group .semi-input-number .semi-input-wrapper,
.semi-input-group .semi-input-number .semi-datepicker-range-input,
.semi-input-group .semi-datepicker .semi-input-wrapper,
.semi-input-group .semi-datepicker .semi-datepicker-range-input,
.semi-input-group .semi-timepicker .semi-input-wrapper,
.semi-input-group .semi-timepicker .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete .semi-input-wrapper,
.semi-input-group .semi-autocomplete .semi-datepicker-range-input {
  border-radius: 0;
}
.semi-input-group .semi-input-number:first-child .semi-input-wrapper,
.semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
.semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
.semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
.semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
.semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-group .semi-input-number:last-child .semi-input-wrapper,
.semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
.semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
.semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
.semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
.semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-group .semi-input-number:not(:last-child),
.semi-input-group .semi-datepicker:not(:last-child),
.semi-input-group .semi-timepicker:not(:last-child),
.semi-input-group .semi-autocomplete:not(:last-child) {
  position: relative;
}
.semi-input-group .semi-input-number:not(:last-child)::after,
.semi-input-group .semi-datepicker:not(:last-child)::after,
.semi-input-group .semi-timepicker:not(:last-child)::after,
.semi-input-group .semi-autocomplete:not(:last-child)::after {
  content: "";
  background-color: var(--semi-color-border);
  width: 1px;
  position: absolute;
  right: -1px;
  top: 1px;
  bottom: 1px;
}
.semi-input-group-wrapper-with-top-label {
  margin-top: 16px;
  margin-bottom: 16px;
}
.semi-input-group-wrapper-with-top-label .semi-input-group {
  display: flex;
}
.semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field {
  margin-top: 0;
  margin-bottom: 0;
}

.semi-input-only_border {
  background: transparent;
  border-color: var(--semi-color-border);
}
.semi-input-only_border:hover {
  background: transparent;
  border-color: var(--semi-color-border);
}
.semi-input-only_border:focus-within {
  background: transparent;
}

.semi-input-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-input-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
  border-color: var(--semi-color-danger);
}
.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
  border-color: var(--semi-color-warning);
}

.semi-rtl .semi-input-wrapper,
.semi-portal-rtl .semi-input-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-wrapper__with-prefix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-input-wrapper__with-suffix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
  padding-right: auto;
  padding-left: 0;
}
.semi-rtl .semi-input,
.semi-portal-rtl .semi-input {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-input-inset-label,
.semi-portal-rtl .semi-input-inset-label {
  margin-right: auto;
  margin-left: 12px;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-append,
.semi-portal-rtl .semi-input-append {
  border-left: 0;
  border-right: 1px transparent solid;
}
.semi-rtl .semi-input-prepend,
.semi-portal-rtl .semi-input-prepend {
  border-right: 0;
  border-left: 1px transparent solid;
}
.semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-textarea-wrapper,
.semi-portal-rtl .semi-input-textarea-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-textarea-counter,
.semi-portal-rtl .semi-input-textarea-counter {
  text-align: left;
}
.semi-rtl .semi-input-textarea-showClear,
.semi-portal-rtl .semi-input-textarea-showClear {
  padding-right: 0;
  padding-left: 36px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-input-textarea-wrapper {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  border: 1px transparent solid;
  border-radius: var(--semi-border-radius-small);
  vertical-align: bottom;
  background-color: var(--semi-color-fill-0);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-input-textarea-wrapper:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-fill-0);
  border: 1px var(--semi-color-focus-border) solid;
}
.semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
  background-color: var(--semi-color-fill-0);
}
.semi-input-textarea-wrapper:active {
  background-color: var(--semi-color-fill-2);
}
.semi-input-textarea-wrapper .semi-input-clearbtn {
  position: absolute;
  top: 0;
  min-width: 24px;
  color: var(--semi-color-text-2);
  right: 4px;
  height: 32px;
}
.semi-input-textarea-wrapper .semi-input-clearbtn > svg {
  pointer-events: none;
}
.semi-input-textarea-wrapper .semi-input-clearbtn:hover {
  cursor: pointer;
}
.semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon {
  color: var(--semi-color-primary-hover);
}
.semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
  visibility: hidden;
}
.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-textarea-wrapper-disabled::-moz-placeholder, .semi-input-textarea-wrapper-readonly::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-wrapper-readonly {
  cursor: text;
}
.semi-input-textarea-wrapper-error {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-textarea-wrapper-error:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-wrapper-error:active {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-wrapper-warning {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-textarea-wrapper-warning:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-textarea-wrapper-warning:active {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}

.semi-input-textarea {
  position: relative;
  resize: none;
  padding: 5px 12px;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: transparent;
  border: 0 solid transparent;
  vertical-align: bottom;
  width: 100%;
  outline: none;
  cursor: text;
  box-sizing: border-box;
  color: var(--semi-color-text-0);
}
.semi-input-textarea:hover {
  border-color: transparent;
}
.semi-input-textarea::-moz-placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-textarea::placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-textarea-showClear {
  padding-right: 36px;
}
.semi-input-textarea-disabled, .semi-input-textarea-readonly {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
  background-color: transparent;
}
.semi-input-textarea-disabled::-moz-placeholder, .semi-input-textarea-readonly::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-readonly {
  cursor: text;
}
.semi-input-textarea-autosize {
  overflow: hidden;
}
.semi-input-textarea-counter {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 12px 5px 12px;
  min-height: 24px;
  text-align: right;
  color: var(--semi-color-text-2);
}
.semi-input-textarea-counter-exceed {
  color: var(--semi-color-danger);
}

.semi-input-textarea-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-input-textarea-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
  border-color: var(--semi-color-warning);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
  color: var(--semi-color-danger);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
  color: var(--semi-color-warning);
}

.semi-rtl .semi-input-wrapper,
.semi-portal-rtl .semi-input-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-wrapper__with-prefix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-input-wrapper__with-suffix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
  padding-right: auto;
  padding-left: 0;
}
.semi-rtl .semi-input,
.semi-portal-rtl .semi-input {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-input-inset-label,
.semi-portal-rtl .semi-input-inset-label {
  margin-right: auto;
  margin-left: 12px;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-append,
.semi-portal-rtl .semi-input-append {
  border-left: 0;
  border-right: 1px transparent solid;
}
.semi-rtl .semi-input-prepend,
.semi-portal-rtl .semi-input-prepend {
  border-right: 0;
  border-left: 1px transparent solid;
}
.semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-textarea-wrapper,
.semi-portal-rtl .semi-input-textarea-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-textarea-counter,
.semi-portal-rtl .semi-input-textarea-counter {
  text-align: left;
}
.semi-rtl .semi-input-textarea-showClear,
.semi-portal-rtl .semi-input-textarea-showClear {
  padding-right: 0;
  padding-left: 36px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-notification-wrapper {
  position: fixed;
}

.semi-notification-list {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 1010;
  pointer-events: none;
}
.semi-notification-list[placement=topRight] {
  right: 0;
  top: 0;
}
.semi-notification-list[placement=top] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.semi-notification-list[placement=topLeft] {
  left: 0;
  top: 0;
}
.semi-notification-list[placement=bottom] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.semi-notification-list[placement=bottomRight] {
  bottom: 0;
  right: 0;
}
.semi-notification-list[placement=bottomLeft] {
  bottom: 0;
  left: 0;
}

.semi-notification-notice {
  box-shadow: var(--semi-shadow-elevated);
  border-radius: var(--semi-border-radius-medium);
  padding-top: 16px;
  padding-right: 12px;
  padding-bottom: 16px;
  padding-left: 20px;
  margin: 20px;
  width: auto;
  min-width: 320px;
  background-color: var(--semi-color-bg-3);
  position: relative;
  display: flex;
  pointer-events: auto;
}
.semi-notification-notice-icon {
  width: 24px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  margin-right: 12px;
}
.semi-notification-notice-info {
  color: var(--semi-color-info);
}
.semi-notification-notice-warning {
  color: var(--semi-color-warning);
}
.semi-notification-notice-error {
  color: var(--semi-color-danger);
}
.semi-notification-notice-success {
  color: var(--semi-color-success);
}
.semi-notification-notice-light.semi-notification-notice-warning {
  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-warning);
}
.semi-notification-notice-light.semi-notification-notice-success {
  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-success);
}
.semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-info);
}
.semi-notification-notice-light.semi-notification-notice-error {
  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-danger);
}
.semi-notification-notice-title {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--semi-color-text-0);
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-notification-notice-inner {
  display: flex;
  width: 100%;
  min-width: 0;
}
.semi-notification-notice-content-wrapper {
  flex: 1 1 auto;
  margin-right: 8px;
  min-width: 0;
}
.semi-notification-notice-content {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--semi-color-text-1);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-notification-notice-icon-close {
  height: 24px;
}
.semi-notification-notice-icon-close .semi-icon-close {
  color: var(--semi-color-text-2);
}
.semi-notification-notice-controls {
  display: flex;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.semi-notification-notice-detail {
  text-align: center;
  flex-grow: 1;
}
.semi-notification-notice-later {
  text-align: center;
  flex-grow: 1;
}
@keyframes semi-notification-slideShow_top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes semi-notification-slideHide_top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes semi-notification-slideShow_topLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_topLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes semi-notification-slideShow_topRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_topRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes semi-notification-slideShow_bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes semi-notification-slideHide_bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes semi-notification-slideShow_bottomLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_bottomLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes semi-notification-slideShow_bottomRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_bottomRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
.semi-notification-notice-animation-show_top {
  animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_top {
  animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_topLeft {
  animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_topLeft {
  animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_topRight {
  animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_topRight {
  animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottom {
  animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottom {
  animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottomLeft {
  animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottomLeft {
  animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottomRight {
  animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottomRight {
  animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}

.semi-notification-notice.semi-notification-notice-rtl {
  padding-right: 20px;
  padding-left: 12px;
}
.semi-notification-notice-rtl {
  direction: rtl;
}
.semi-notification-notice-rtl .semi-notification-notice-icon {
  margin-right: 12px;
}
.semi-notification-notice-rtl .semi-notification-notice-content-wrapper {
  margin-right: 8px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-spin {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}
@keyframes semi-animation-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.semi-spin-wrapper {
  text-align: center;
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
  top: 50%;
  color: var(--semi-color-primary);
}
.semi-spin-wrapper > svg {
  display: inline;
  animation: 600ms linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
  vertical-align: top;
  width: 20px;
  height: 20px;
}
.semi-spin-animate {
  display: inline-flex;
  animation: 1600ms linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
}
.semi-spin-children {
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-spin-block {
  display: block;
}
.semi-spin-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.semi-spin-block .semi-spin-wrapper {
  display: block;
}
.semi-spin-block.semi-spin {
  height: auto;
  width: auto;
}
.semi-spin-hidden::after {
  content: none;
}
.semi-spin-hidden > .semi-spin-children {
  opacity: 1;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}

.semi-spin-small {
  width: 14px;
  height: 14px;
}
.semi-spin-small > .semi-spin-wrapper svg {
  width: 14px;
  height: 14px;
}

.semi-spin-middle {
  width: 20px;
  height: 20px;
}
.semi-spin-middle > .semi-spin-wrapper svg {
  width: 20px;
  height: 20px;
}

.semi-spin-large {
  width: 32px;
  height: 32px;
}
.semi-spin-large > .semi-spin-wrapper svg {
  width: 32px;
  height: 32px;
}

.semi-spin-container {
  overflow: hidden;
}

.semi-rtl .semi-spin,
.semi-portal-rtl .semi-spin {
  direction: rtl;
}
.semi-rtl .semi-spin-container,
.semi-portal-rtl .semi-spin-container {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-switch {
  box-sizing: border-box;
  display: inline-block;
  border-radius: 12px;
  border: 1px transparent solid;
  position: relative;
  cursor: pointer;
  background-color: var(--semi-color-fill-0);
  transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  width: 40px;
  height: 24px;
}
.semi-switch:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-switch:active {
  border: 1px var(--semi-color-fill-2) solid;
}
.semi-switch:active .semi-switch-knob {
  width: 24px;
}
.semi-switch-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-switch-checked {
  background-color: var(--semi-color-success);
}
.semi-switch-checked:hover {
  background-color: var(--semi-color-success-hover);
}
.semi-switch-checked .semi-switch-knob {
  transform: translateX(18px);
}
.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(12px);
}
.semi-switch-active {
  background-color: var(--semi-color-success-active);
}
.semi-switch-disabled {
  cursor: not-allowed;
  background-color: transparent;
  border: 1px var(--semi-color-border) solid;
}
.semi-switch-disabled:hover {
  background-color: transparent;
}
.semi-switch-disabled:active {
  background-color: transparent;
}
.semi-switch-disabled:active .semi-switch-knob {
  width: 18px;
}
.semi-switch-disabled .semi-switch-knob {
  cursor: not-allowed;
  box-shadow: none;
  border: 1px var(--semi-color-border) solid;
}
.semi-switch-disabled .semi-switch-native-control {
  pointer-events: none;
  cursor: not-allowed;
}
.semi-switch-disabled.semi-switch-checked {
  border-color: transparent;
  background-color: var(--semi-color-success-disabled);
}
.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(18px);
}
.semi-switch-disabled.semi-switch-checked .semi-switch-knob {
  box-shadow: none;
  border: none;
}
.semi-switch-knob {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border-radius: 9px;
  background-color: rgba(var(--semi-white), 1);
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: auto;
  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
  width: 18px;
  height: 18px;
  top: 2px;
  transform: translateX(2px);
}
.semi-switch-native-control {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: inherit;
  pointer-events: auto;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.semi-switch-native-control[type=checkbox] {
  width: inherit;
  height: inherit;
}
.semi-switch-checked-text, .semi-switch-unchecked-text {
  position: absolute;
  font-size: 12px;
  height: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-switch-checked-text {
  color: var(--semi-color-white);
}
.semi-switch-unchecked-text {
  color: var(--semi-color-text-2);
  right: 0;
}
.semi-switch-loading {
  display: inline-flex;
  align-items: center;
  background-color: var(--semi-color-fill-1);
}
.semi-switch-loading-spin .semi-spin-wrapper {
  display: inline-flex;
  align-items: center;
  color: var(--semi-color-white);
}

.semi-switch-loading .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 18px;
  height: 18px;
}
.semi-switch-loading.semi-switch-checked {
  background-color: var(--semi-color-success-hover);
}
.semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(16px);
}

.semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 10px;
  height: 10px;
}
.semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(10px);
}

.semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 28px;
  height: 28px;
}
.semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(22px);
}

.semi-switch-disabled.semi-switch-checked {
  background-color: var(--semi-color-success-disabled);
}

.semi-switch-large {
  width: 54px;
  height: 32px;
  border-radius: 16px;
}
.semi-switch-large .semi-switch-knob {
  width: 24px;
  height: 24px;
  top: 3px;
  border-radius: 12px;
  transform: translateX(3px);
}
.semi-switch-large.semi-switch-checked .semi-switch-knob {
  transform: translateX(26px);
}
.semi-switch-large.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(16px);
}
.semi-switch-large:active .semi-switch-knob {
  width: 34px;
}
.semi-switch-large .semi-switch-checked-text,
.semi-switch-large .semi-switch-unchecked-text {
  width: 26px;
  font-size: 14px;
}

.semi-switch-small {
  width: 26px;
  height: 16px;
  border-radius: 8px;
}
.semi-switch-small .semi-switch-knob {
  width: 12px;
  height: 12px;
  top: 1px;
  border-radius: 6px;
  transform: translateX(1px);
}
.semi-switch-small.semi-switch-checked .semi-switch-knob {
  transform: translateX(11px);
}
.semi-switch-small.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(9px);
}
.semi-switch-small:active .semi-switch-knob {
  width: 14px;
}

.semi-form .semi-switch-native-control {
  width: 100%;
  height: 100%;
}

.semi-rtl .semi-switch,
.semi-portal-rtl .semi-switch {
  direction: rtl;
}
.semi-rtl .semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-checked .semi-switch-knob {
  transform: translateX(-18px);
}
.semi-rtl .semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-12px);
}
.semi-rtl .semi-switch-knob,
.semi-portal-rtl .semi-switch-knob {
  right: 0;
  left: auto;
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-native-control,
.semi-portal-rtl .semi-switch-native-control {
  right: 0;
}
.semi-rtl .semi-switch-unchecked-text,
.semi-portal-rtl .semi-switch-unchecked-text {
  left: 0;
}
.semi-rtl .semi-switch-loading .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-16px);
}
.semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-10px);
}
.semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-22px);
}
.semi-rtl .semi-switch-large .semi-switch-knob,
.semi-portal-rtl .semi-switch-large .semi-switch-knob {
  transform: translateX(-3px);
}
.semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob {
  transform: translateX(-26px);
}
.semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-16px);
}
.semi-rtl .semi-switch-small .semi-switch-knob,
.semi-portal-rtl .semi-switch-small .semi-switch-knob {
  transform: translateX(-1px);
}
.semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob {
  transform: translateX(-11px);
}
.semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-9px);
}
/* shadow */
/* sizing */
/* spacing */
.semi-tabs {
  box-sizing: border-box;
  position: relative;
}
.semi-tabs-left {
  display: flex;
  flex-direction: row;
}
.semi-tabs-bar {
  position: relative;
  white-space: nowrap;
  outline: none;
}
.semi-tabs-bar-left {
  display: flex;
  flex-direction: column;
}
.semi-tabs-bar-extra {
  padding: 0px 5px;
}
.semi-tabs-bar-more-trigger {
  display: inline-block;
  cursor: pointer;
  color: var(--semi-color-text-2);
}
.semi-tabs-bar-more-trigger-content {
  display: flex;
  align-content: center;
}
.semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 8px;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.semi-tabs-bar-more-trigger-line {
  padding: 16px 4px 14px 4px;
}
.semi-tabs-bar-more-trigger-card {
  padding: 8px 12px;
}
.semi-tabs-bar-more-trigger-button {
  padding: 8px 12px;
}
.semi-tabs-bar .semi-tabs-tab {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: block;
  float: left;
  font-weight: 400;
  color: var(--semi-color-text-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  position: relative;
  margin-right: 8px;
  top: 3px;
  color: var(--semi-color-text-2);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
  margin-right: 0;
  font-size: 14px;
  color: var(--semi-color-text-2);
  margin-left: 10px;
  cursor: pointer;
}
.semi-tabs-bar .semi-tabs-tab:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:active {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
  cursor: default;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-primary);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
  color: var(--semi-color-text-1);
}
.semi-tabs-bar .semi-tabs-tab-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-tabs-bar .semi-tabs-tab-disabled:hover {
  color: var(--semi-color-disabled-text);
  border-bottom: none;
}
.semi-tabs-tab-single.semi-tabs-tab {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  font-weight: 400;
  color: var(--semi-color-text-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  position: relative;
  margin-right: 8px;
  top: 3px;
  color: var(--semi-color-text-2);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
  margin-right: 0;
  font-size: 14px;
  color: var(--semi-color-text-2);
  margin-left: 10px;
  cursor: pointer;
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close.semi-icon-close:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab:active {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
  cursor: default;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-primary);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
  color: var(--semi-color-text-1);
}
.semi-tabs-tab-single.semi-tabs-tab-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
  color: var(--semi-color-disabled-text);
  border-bottom: none;
}
.semi-tabs-bar-collapse,
.semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
  display: flex;
  align-items: center;
}
.semi-tabs-bar-collapse .semi-overflow-list {
  flex: 1 1;
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
  width: 0;
  height: 0;
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled {
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover {
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
  margin-right: 4px;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
  color: var(--semi-color-primary);
  padding: 8px;
  border: 0px solid transparent;
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
  margin-left: 4px;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
  color: var(--semi-color-primary);
  padding: 8px;
  border: 0px solid transparent;
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-dropdown {
  max-height: 300px;
  overflow-y: auto;
}
.semi-tabs-bar:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}
.semi-tabs-bar-line.semi-tabs-bar-top {
  border-bottom: 1px solid var(--semi-color-border);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
  padding: 16px 4px 14px 4px;
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  border-bottom: 2px solid transparent;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
  border-bottom: 2px solid var(--semi-color-fill-0);
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
  border-bottom: 2px solid var(--semi-color-fill-1);
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 24px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
  padding: 8px 4px 6px 4px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
  padding: 12px 4px 10px 4px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
  border-bottom: 2px solid var(--semi-color-primary);
}
.semi-tabs-bar-line.semi-tabs-bar-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
  padding: 12px;
  border-left: 2px solid transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: 2px solid var(--semi-color-fill-0);
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
  border-left: 2px solid var(--semi-color-fill-1);
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small {
  padding: 6px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium {
  padding: 10px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  border-left: 2px solid var(--semi-color-primary);
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-line .semi-tabs-bar-extra {
  height: 50px;
  line-height: 50px;
}
.semi-tabs-bar-line .semi-tabs-bar-line-extra-small {
  height: 36px;
  line-height: 36px;
}
.semi-tabs-bar-card.semi-tabs-bar-top::before {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid var(--semi-color-border);
  content: "";
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover {
  border-bottom: none;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 8px;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover {
  padding: 8px 12px 7px 12px;
  border: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-bg-1);
  background: transparent;
}
.semi-tabs-bar-card.semi-tabs-bar-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-right: none;
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
  margin-bottom: 8px;
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
  content: " ";
  width: 1px;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  background: var(--semi-color-bg-1);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  padding: 8px 12px;
  border: 1px solid var(--semi-color-border);
  border-right: none;
  background: transparent;
}
.semi-tabs-bar-card .semi-tabs-tab {
  padding: 8px 12px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-card .semi-tabs-tab:hover {
  background: var(--semi-color-fill-0);
}
.semi-tabs-bar-card .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-card .semi-tabs-tab:active {
  background: var(--semi-color-fill-1);
}
.semi-tabs-bar-button {
  border: none;
}
.semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
  margin-bottom: 8px;
}
.semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 8px;
}
.semi-tabs-bar-button .semi-tabs-tab {
  padding: 8px 12px;
  border-radius: var(--semi-border-radius-small);
  color: var(--semi-color-text-2);
  border: none;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-button .semi-tabs-tab:hover {
  border: none;
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-bar-button .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-button .semi-tabs-tab:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
  color: var(--semi-color-primary);
  border: none;
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-slash .semi-tabs-tab {
  padding: 12px 0px;
}
.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
  margin-right: 16px;
}
.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
  content: "";
  margin-left: 16px;
  display: inline-block;
  height: 14px;
  width: 8px;
  margin-top: 3px;
  margin-bottom: 3px;
  vertical-align: bottom;
  background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), var(--semi-color-text-2) 50%, transparent calc(50% + 1px), transparent 100%);
}
.semi-tabs-content {
  width: 100%;
  padding: 5px 0;
}
.semi-tabs-content-left {
  height: 100%;
  padding: 0 5px;
}
.semi-tabs-pane {
  width: 100%;
  overflow: hidden;
  color: var(--semi-color-text-0);
}
.semi-tabs-pane:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
  display: none;
}
@keyframes semi-tabs-panel-keyframe-leftShow {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-rightShow {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-topShow {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-bottomShow {
  0% {
    transform: translateY(-60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.semi-tabs-pane-animate-leftShow {
  animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-rightShow {
  animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-topShow {
  animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-bottomShow {
  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
  font-size: 14px;
  padding: 16px 4px 14px 4px;
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  border-bottom: 2px solid transparent;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
  border-bottom: 2px solid var(--semi-color-fill-0);
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
  border-bottom: 2px solid var(--semi-color-fill-1);
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
  font-size: 14px;
  padding: 8px 4px 6px 4px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
  font-size: 14px;
  padding: 12px 4px 10px 4px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
  border-bottom: 2px solid var(--semi-color-primary);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
  padding: 12px;
  border-left: 2px solid transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
  border-left: 2px solid var(--semi-color-fill-0);
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
  border-left: 2px solid var(--semi-color-fill-1);
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
  padding: 6px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
  padding: 10px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
  border-left: 2px solid var(--semi-color-primary);
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
  border-bottom: none;
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
  padding: 8px 12px 7px 12px;
  border: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-bg-1);
  background: transparent;
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
  border-right: none;
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
  content: " ";
  width: 1px;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  background: var(--semi-color-bg-1);
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
  padding: 8px 12px;
  border: 1px solid var(--semi-color-border);
  border-right: none;
  background: transparent;
}
.semi-tabs-tab-card.semi-tabs-tab {
  padding: 8px 12px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-tab-card.semi-tabs-tab:hover {
  background: var(--semi-color-fill-0);
}
.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-card.semi-tabs-tab:active {
  background: var(--semi-color-fill-1);
}
.semi-tabs-tab-button {
  border: none;
}
.semi-tabs-tab-button.semi-tabs-tab {
  padding: 8px 12px;
  border-radius: var(--semi-border-radius-small);
  color: var(--semi-color-text-2);
  border: none;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-tab-button.semi-tabs-tab:hover {
  border: none;
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-button.semi-tabs-tab:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
  color: var(--semi-color-primary);
  border: none;
  background-color: var(--semi-color-primary-light-default);
}

.semi-rtl .semi-tabs,
.semi-portal-rtl .semi-tabs {
  direction: rtl;
}
.semi-rtl .semi-tabs-bar .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab {
  float: right;
}
.semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon,
.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
  margin-right: 0;
  margin-left: 4px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
  margin-left: 0;
  margin-right: 4px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left {
  transform: scaleX(-1);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 0;
  margin-left: 24px;
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
  border-left: 0;
  border-right: 2px solid transparent;
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: 0;
  border-right: 2px solid var(--semi-color-fill-0);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
  border-left: 0;
  border-right: 2px solid var(--semi-color-fill-1);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  border-left: 0;
  border-right: 2px solid var(--semi-color-primary);
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-left: 0;
  margin-right: 8px;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
  border: 1px solid transparent;
  border-left: none;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: none;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: auto;
  margin-left: 8px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-overflow-list {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}
.semi-overflow-list-spacer {
  flex-shrink: 1;
  width: 1px;
}
.semi-overflow-list-scroll-wrapper {
  display: flex;
  flex: 1 1;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

.semi-rtl .semi-overflow-list,
.semi-portal-rtl .semi-overflow-list {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-dropdown {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-dropdown-wrapper {
  overflow-y: auto;
  box-shadow: var(--semi-shadow-elevated);
  position: relative;
  z-index: 1050;
  border-radius: var(--semi-border-radius-medium);
  background: var(--semi-color-bg-3);
  opacity: 0;
}
.semi-dropdown-wrapper-show {
  opacity: 1;
}
.semi-dropdown-trigger {
  display: inline-block;
}
.semi-dropdown-menu {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.semi-dropdown-title {
  color: var(--semi-color-text-2);
  padding-top: 8px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: default;
}
.semi-dropdown-title-withTick {
  padding-left: 31px;
}
.semi-dropdown-item {
  padding: 8px 16px;
  color: var(--semi-color-text-0);
  max-width: 280px;
  display: flex;
  align-items: center;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
}
.semi-dropdown-item-hover {
  background-color: var(--semi-color-fill-0);
}
.semi-dropdown-item:not(.semi-dropdown-item-active):hover {
  background-color: var(--semi-color-fill-0);
  cursor: pointer;
}
.semi-dropdown-item:not(.semi-dropdown-item-active):active {
  background-color: var(--semi-color-fill-1);
}
.semi-dropdown-item:focus-visible {
  background-color: var(--semi-color-fill-0);
  outline: 0;
}
.semi-dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.semi-dropdown-item-danger {
  color: var(--semi-color-danger);
}
.semi-dropdown-item-secondary {
  color: var(--semi-color-secondary);
}
.semi-dropdown-item-warning {
  color: var(--semi-color-warning);
}
.semi-dropdown-item-tertiary {
  color: var(--semi-color-tertiary);
}
.semi-dropdown-item-primary {
  color: var(--semi-color-primary);
}
.semi-dropdown-item-withTick {
  padding-left: 12px;
}
.semi-dropdown-item > .semi-icon {
  flex-shrink: 0;
  margin-right: 9px;
  font-size: 12px;
}
.semi-dropdown-item-active {
  font-weight: 600;
}
.semi-dropdown-item.semi-dropdown-item-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active {
  cursor: not-allowed;
  background-color: transparent;
}
.semi-dropdown-divider {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  clear: both;
  background: var(--semi-color-border);
  margin: 4px 0;
}

.semi-rtl .semi-dropdown-wrapper,
.semi-portal-rtl .semi-dropdown-wrapper {
  direction: rtl;
}
.semi-rtl .semi-dropdown-title-withTick,
.semi-portal-rtl .semi-dropdown-title-withTick {
  padding-left: 0;
  padding-right: 31px;
}
.semi-rtl .semi-dropdown-item-withTick,
.semi-portal-rtl .semi-dropdown-item-withTick {
  padding-left: auto;
  padding-right: 12px;
}
.semi-rtl .semi-dropdown-item > .semi-icon,
.semi-portal-rtl .semi-dropdown-item > .semi-icon {
  margin-right: 0;
  margin-left: 9px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-toast {
  pointer-events: none;
}
.semi-toast-wrapper {
  position: fixed;
  height: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1010;
}
.semi-toast-wrapper .semi-toast-innerWrapper {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
}
.semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
  perspective: none;
  perspective: initial;
  perspective-origin: center center;
}
.semi-toast-zero-height-wrapper {
  transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2);
  perspective-origin: center 280px;
  perspective: 280px;
  height: 0;
  overflow: visible;
}
.semi-toast-content {
  pointer-events: all;
  box-shadow: var(--semi-shadow-elevated);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--semi-color-bg-3);
  border-radius: var(--semi-border-radius-medium);
  padding: 12px 8px 12px 8px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  margin: 12px;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-toast-content .semi-toast-close-button {
  margin-top: -2px;
  height: 20px;
}
.semi-toast-content .semi-toast-content-text {
  margin-left: 12px;
  margin-right: 12px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-toast-light.semi-toast-warning .semi-toast-content {
  background-color: var(--semi-color-warning-light-default);
  border: 1px solid var(--semi-color-warning);
}
.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
  color: var(--semi-color-warning);
}
.semi-toast-light.semi-toast-success .semi-toast-content {
  background-color: var(--semi-color-success-light-default);
  border: 1px solid var(--semi-color-success);
}
.semi-toast-light.semi-toast-success .semi-toast-icon-success {
  color: var(--semi-color-success);
}
.semi-toast-light.semi-toast-info .semi-toast-content {
  background-color: var(--semi-color-info-light-default);
  border: 1px solid var(--semi-color-info);
}
.semi-toast-light.semi-toast-info .semi-toast-icon-info {
  color: var(--semi-color-info);
}
.semi-toast-light.semi-toast-error .semi-toast-content {
  background-color: var(--semi-color-danger-light-default);
  border: 1px solid var(--semi-color-danger);
}
.semi-toast-light.semi-toast-error .semi-toast-icon-error {
  color: var(--semi-color-danger);
}
.semi-toast .semi-toast-icon-warning {
  color: var(--semi-color-warning);
}
.semi-toast .semi-toast-icon-success {
  color: var(--semi-color-success);
}
.semi-toast .semi-toast-icon-info {
  color: var(--semi-color-info);
}
.semi-toast .semi-toast-icon-error {
  color: var(--semi-color-danger);
}
.semi-toast-animation-show {
  animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
  animation-fill-mode: forwards;
}
.semi-toast-animation-hide {
  animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
  animation-fill-mode: forwards;
}
@keyframes semi-toast-keyframe-toast-show {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes semi-toast-keyframe-toast-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.semi-toast-rtl {
  direction: rtl;
}
.semi-toast-rtl .semi-toast-content .semi-toast-content-text {
  text-align: right;
  margin-left: 12px;
  margin-right: 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-collapsible-transition {
  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
/* shadow */
/* sizing */
/* spacing */
.semi-tree-search-wrapper {
  padding: 8px 12px;
}

.semi-tree-wrapper {
  display: flex;
  flex-direction: column;
}

.semi-tree-option-list {
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  flex: 1 1;
  padding: 8px 0;
}
.semi-tree-option-list ul,
.semi-tree-option-list li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.semi-tree-option-list li.semi-tree-option {
  box-sizing: border-box;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
}
.semi-tree-option-list li > .semi-tree-option-label {
  list-style-type: none;
  padding: 0;
}
.semi-tree-option-list .semi-tree-option-expand-icon,
.semi-tree-option-list .semi-tree-option-empty-icon {
  box-sizing: border-box;
  width: 12px;
  color: var(--semi-color-text-2);
  margin-right: 8px;
  display: flex;
  flex-shrink: 0;
}
.semi-tree-option-list .semi-tree-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-break: break-word;
  color: var(--semi-color-text-0);
  position: relative;
}
.semi-tree-option-list .semi-tree-option-label {
  display: flex;
  align-items: center;
}
.semi-tree-option-list .semi-tree-option-label > .semi-icon {
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-label .semi-checkbox {
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-label-text {
  display: block;
  flex: 1 1;
}
.semi-tree-option-list .semi-tree-option-ellipsis .semi-tree-option-label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semi-tree-option-list .semi-tree-option-label-text,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon {
  border-radius: var(--semi-border-radius-small);
}
.semi-tree-option-list .semi-tree-option-label-text:hover,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-tree-option-list .semi-tree-option-label-text:active,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tree-option-list .semi-tree-option-item-icon {
  color: var(--semi-color-text-2);
}
.semi-tree-option-list .semi-tree-option-active .semi-tree-option-label-text {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-active:hover, .semi-tree-option-list .semi-tree-option-active:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
  transform: rotate(270deg);
}
.semi-tree-option-list .semi-tree-option-highlight {
  font-weight: 600;
  color: var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-hidden {
  display: none;
}
.semi-tree-option-list .semi-tree-option-disabled .semi-tree-option-label {
  color: var(--semi-color-disabled-text);
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable, .semi-tree-option-list .semi-tree-option-draggable {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.semi-tree-option-list .semi-tree-option-draggable {
  box-sizing: border-box;
  border-left: 2px solid transparent;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label {
  border-top: 2px transparent solid;
  border-bottom: 2px transparent solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-top {
  border-top: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom {
  border-bottom: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-indent .semi-tree-option-indent-unit:before {
  top: 0px;
  bottom: 0px;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-switcher-leaf-line::before {
  top: 0px;
  bottom: 0px;
}
.semi-tree-option-list .semi-tree-option-draggable.semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
  height: 50%;
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top {
  border-top: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-bottom {
  border-bottom: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable {
  border: 2px solid var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable .semi-tree-option-label, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable .semi-tree-option-label {
  border-top: 0;
  border-bottom: 0;
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable + .semi-tree-option-selected::after, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable + .semi-tree-option-selected::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  bottom: 0;
  right: -1px;
  border-top: 2px solid var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-indent {
  align-self: stretch;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tree-option-list .semi-tree-option-indent-unit {
  display: inline-block;
  width: 20px;
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit {
  position: relative;
  height: 100%;
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit::before {
  position: absolute;
  top: -4px;
  inset-inline-start: 6px;
  bottom: -4px;
  border-inline-end: 1px solid var(--semi-color-text-3);
  content: "";
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit-end::before {
  display: none;
}
.semi-tree-option-list .semi-tree-option-switcher {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 12px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line {
  z-index: 1;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line::before {
  position: absolute;
  top: -4px;
  inset-inline-start: 6px;
  bottom: -4px;
  border-inline-end: 1px solid var(--semi-color-text-3);
  content: "";
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line::after {
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 50%;
  border-bottom: 1px solid var(--semi-color-text-3);
  content: "";
  margin-inline-start: 1px;
}
.semi-tree-option-list .semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
  height: calc(50% + 4px);
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option {
  padding-top: 0px;
  padding-bottom: 0px;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label {
  padding: 2px 0;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected {
  background-color: transparent;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-1 {
  padding-left: 8px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-2 {
  padding-left: 28px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-3 {
  padding-left: 48px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-4 {
  padding-left: 68px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-5 {
  padding-left: 88px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-6 {
  padding-left: 108px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-7 {
  padding-left: 128px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-8 {
  padding-left: 148px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-9 {
  padding-left: 168px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-10 {
  padding-left: 188px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-11 {
  padding-left: 208px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-12 {
  padding-left: 228px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-13 {
  padding-left: 248px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-14 {
  padding-left: 268px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-15 {
  padding-left: 288px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-16 {
  padding-left: 308px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-17 {
  padding-left: 328px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-18 {
  padding-left: 348px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-19 {
  padding-left: 368px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-20 {
  padding-left: 388px;
}
.semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option-label-empty {
  padding-left: 0;
  justify-content: center;
  color: var(--semi-color-disabled-text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: not-allowed;
}
.semi-tree-option-list .semi-checkboxGroup-vertical {
  row-gap: 0;
}

.semi-tree-option-list-block .semi-tree-option:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-tree-option-list-block .semi-tree-option:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tree-option-list-block .semi-tree-option-label {
  flex: 1 1;
}
.semi-tree-option-list-block .semi-tree-option-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-active:hover, .semi-tree-option-list-block .semi-tree-option-active:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-active .semi-tree-option-label-text {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-expand-icon {
  flex-shrink: 0;
  box-sizing: content-box;
}
.semi-tree-option-list-block .semi-tree-option-expand-icon:hover {
  color: var(--semi-color-text-0);
}
.semi-tree-option-list-block .semi-tree-option-expand-icon:active {
  color: var(--semi-color-black);
}
.semi-tree-option-list-block .semi-tree-option-spin-icon {
  display: flex;
  line-height: 0;
  color: var(--semi-color-primary);
}
.semi-tree-option-list-block .semi-tree-option-spin-icon svg {
  width: 12px;
  height: 12px;
}
.semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:active {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-checkbox-addon {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected:hover, .semi-tree-option-list-block .semi-tree-option-selected:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-label-text,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon {
  padding: 0;
  border-radius: var(--semi-border-radius-small);
}
.semi-tree-option-list-block .semi-tree-option-label-text:hover,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:hover {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-label-text:active,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:active {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-label-text {
  width: 0;
}
.semi-tree-option-list-block .semi-tree-option-empty:hover, .semi-tree-option-list-block .semi-tree-option-empty:active {
  background-color: transparent;
}

.semi-rtl .semi-tree,
.semi-popover-rtl .semi-tree {
  direction: rtl;
}
.semi-rtl .semi-tree-wrapper,
.semi-popover-rtl .semi-tree-wrapper {
  direction: rtl;
}
.semi-rtl .semi-tree-option-list,
.semi-popover-rtl .semi-tree-option-list {
  direction: rtl;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-expand-icon,
.semi-rtl .semi-tree-option-list .semi-tree-option-empty-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-expand-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-empty-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option {
  padding-left: 0;
  padding-right: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
  transform: rotate(90deg);
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
  padding-left: 0;
  padding-right: 8px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
  padding-left: 0;
  padding-right: 28px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
  padding-left: 0;
  padding-right: 48px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
  padding-left: 0;
  padding-right: 68px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
  padding-left: 0;
  padding-right: 88px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
  padding-left: 0;
  padding-right: 108px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
  padding-left: 0;
  padding-right: 128px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
  padding-left: 0;
  padding-right: 148px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
  padding-left: 0;
  padding-right: 168px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
  padding-left: 0;
  padding-right: 188px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
  padding-left: 0;
  padding-right: 208px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
  padding-left: 0;
  padding-right: 228px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
  padding-left: 0;
  padding-right: 248px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
  padding-left: 0;
  padding-right: 268px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
  padding-left: 0;
  padding-right: 288px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
  padding-left: 0;
  padding-right: 308px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
  padding-left: 0;
  padding-right: 328px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
  padding-left: 0;
  padding-right: 348px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
  padding-left: 0;
  padding-right: 368px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
  padding-left: 0;
  padding-right: 388px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label-empty,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label-empty {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-switcher,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-switcher {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list-block,
.semi-popover-rtl .semi-tree-option-list-block {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-divider {
  margin: 1px 0px 1px 0px;
  border-bottom: 1px solid var(--semi-color-border);
  color: var(--semi-color-text-0);
  box-sizing: border-box;
}
.semi-divider-dashed {
  border-bottom-style: dashed;
}
.semi-divider-horizontal {
  width: 100%;
  display: flex;
}
.semi-divider-vertical {
  border-bottom: 0;
  display: inline-block;
  margin: 0px 1px 0px 1px;
  border-left: 1px solid var(--semi-color-border);
  height: 20px;
  vertical-align: middle;
}
.semi-divider-with-text {
  display: flex;
  border-bottom: 0;
  white-space: nowrap;
  align-items: center;
}
.semi-divider-with-text .semi-divider_inner-text {
  font-weight: 600;
  padding: 0px 8px 0px 8px;
  display: inline-block;
}
.semi-divider-with-text::before, .semi-divider-with-text::after {
  content: "";
  width: 50%;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-divider-with-text-left::before {
  width: 40px;
}
.semi-divider-with-text-left::after {
  flex: 1 1;
}
.semi-divider-with-text-right::before {
  flex: 1 1;
}
.semi-divider-with-text-right::after {
  width: 40px;
}

.semi-divider-dashed::before, .semi-divider-dashed::after {
  border-bottom: 1px dashed var(--semi-color-border);
}

.semi-divider-vertical.semi-divider-dashed {
  border-left: 1px dashed var(--semi-color-border);
}
/* shadow */
/* sizing */
/* spacing */
.semi-slider {
  padding: 0px 13px;
  margin: 0px;
}
.semi-slider-wrapper {
  box-sizing: border-box;
  position: relative;
  height: 32px;
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}
.semi-slider-rail {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: absolute;
  height: 4px;
  cursor: pointer;
  touch-action: none;
  background-color: var(--semi-color-fill-0);
  width: 100%;
  border-radius: var(--semi-border-radius-small);
  top: 14px;
}
.semi-slider-handle {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  touch-action: none;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  background-color: var(--semi-color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.semi-slider-handle:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-slider-handle-dot {
  background: var(--semi-color-primary);
  width: 4px;
  height: 4px;
  border-radius: var(--semi-border-radius-circle);
}
.semi-slider-handle:hover {
  background-color: var(--semi-color-white);
}
.semi-slider-handle-clicked {
  border: solid 1px var(--semi-color-focus-border);
  cursor: grabbing;
}
.semi-slider-track {
  height: 4px;
  background: var(--semi-color-primary);
  border-radius: var(--semi-border-radius-small);
  position: absolute;
  cursor: pointer;
  top: 14px;
}
.semi-slider-tooltip {
  position: absolute;
  top: -40px;
}
.semi-slider-dots {
  width: 100%;
  background: transparent;
}
.semi-slider-dot {
  position: absolute;
  top: 14px;
  width: 4px;
  height: 4px;
  background-color: var(--semi-color-white);
  border-radius: 50%;
  cursor: pointer;
  transform: translateX(0px);
}
.semi-slider-dot-active {
  background-color: var(--semi-color-white);
}
.semi-slider-marks {
  position: absolute;
  top: 23px;
  left: 0px;
  width: 100%;
  font-size: 14px;
}
.semi-slider-mark {
  position: absolute;
  display: inline-block;
  color: var(--semi-color-text-2);
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, 0);
}
.semi-slider-marks-reverse {
  position: absolute;
  top: 23px;
  left: 0px;
  width: 100%;
  font-size: 14px;
}
.semi-slider-mark-reverse {
  position: absolute;
  display: inline-block;
  color: var(--semi-color-text-2);
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, 0) rotate(-180deg);
}
.semi-slider-boundary {
  position: relative;
  font-size: 12px;
  color: var(--semi-color-text-0);
  visibility: hidden;
  top: 30px;
}
.semi-slider-boundary span {
  position: absolute;
  display: inline-block;
}
.semi-slider-boundary-min {
  left: 0px;
}
.semi-slider-boundary-max {
  right: 0px;
}
.semi-slider-boundary-show {
  visibility: visible;
}

.semi-slider-vertical-wrapper {
  width: 4px;
  height: 100%;
}
.semi-slider-vertical-wrapper .semi-slider-track {
  width: 4px;
}
.semi-slider-vertical-wrapper .semi-slider-marks {
  height: 100%;
  margin-top: -30px;
  margin-left: 29px;
}
.semi-slider-vertical-wrapper .semi-slider-marks-reverse {
  height: 100%;
  margin-top: -30px;
  margin-left: -26px;
}
.semi-slider-vertical-wrapper .semi-slider-rail {
  width: 4px;
  height: 100%;
  top: 0px;
}
.semi-slider-vertical-wrapper .semi-slider-handle {
  margin-top: 0px;
  margin-left: -10px;
  transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px);
}
.semi-slider-vertical-wrapper .semi-slider-dot {
  transform: translateY(0px);
}

.semi-slider-disabled {
  cursor: not-allowed;
}
.semi-slider-disabled .semi-slider-handle {
  cursor: not-allowed;
  box-shadow: none;
  border: 1px var(--semi-color-border) solid;
}
.semi-slider-disabled .semi-slider-handle:hover {
  background-color: var(--semi-color-white);
}
.semi-slider-disabled .semi-slider-rail {
  cursor: not-allowed;
}
.semi-slider-disabled .semi-slider-track {
  cursor: not-allowed;
  background-color: var(--semi-color-primary-disabled);
}
.semi-slider-disabled .semi-slider-dot {
  cursor: not-allowed;
  background-color: var(--semi-color-white);
  border-color: var(--semi-color-white);
  box-shadow: none;
}

.semi-slider-handle-tooltip {
  text-align: center;
}

.semi-slider-reverse {
  transform: rotate(180deg);
}
/* shadow */
/* sizing */
/* spacing */
.semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
}
.semi-skeleton-avatar-circle {
  border-radius: 50%;
}
.semi-skeleton-avatar-extra-extra-small {
  width: 20px;
  height: 20px;
}
.semi-skeleton-avatar-extra-small {
  width: 24px;
  height: 24px;
}
.semi-skeleton-avatar-medium {
  width: 48px;
  height: 48px;
}
.semi-skeleton-avatar-small {
  width: 32px;
  height: 32px;
}
.semi-skeleton-avatar-large {
  width: 72px;
  height: 72px;
}
.semi-skeleton-avatar-extra-large {
  width: 128px;
  height: 128px;
}
.semi-skeleton-paragraph {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.semi-skeleton-paragraph li {
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  height: 16px;
  margin-bottom: 10px;
}
.semi-skeleton-paragraph li:last-child {
  width: 60%;
  margin-bottom: 0;
}
.semi-skeleton-paragraph li:first-child {
  width: 100%;
}
.semi-skeleton-title {
  width: 100%;
  height: 24px;
}
.semi-skeleton-button {
  width: 115px;
  height: 32px;
}
.semi-skeleton-image {
  width: 100%;
  height: 100%;
}
.semi-skeleton-active .semi-skeleton-avatar,
.semi-skeleton-active .semi-skeleton-image,
.semi-skeleton-active .semi-skeleton-title,
.semi-skeleton-active .semi-skeleton-button,
.semi-skeleton-active .semi-skeleton-paragraph li {
  background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
  background-size: 400% 100%;
  animation: 1400ms skeleton-loading ease infinite;
  animation-fill-mode: forwards;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.semi-rtl .semi-skeleton,
.semi-portal-rtl .semi-skeleton {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-image {
  border-radius: var(--semi-border-radius-small);
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.semi-image-img {
  vertical-align: top;
  border-radius: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-image-img-preview {
  cursor: zoom-in;
}
.semi-image-img-error {
  opacity: 0;
}
.semi-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.semi-image-status {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--semi-border-radius-small);
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-disabled-text);
}

.semi-image-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1070;
  background-color: var(--semi-color-overlay-bg);
  transition: opacity 500ms;
  overflow: hidden;
}
.semi-image-preview-popup {
  position: absolute;
}
.semi-image-preview .semi-image-preview-hide {
  opacity: 0;
}
.semi-image-preview-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  color: var(--semi-color-white);
}
.semi-image-preview-prev {
  left: 24px;
}
.semi-image-preview-next {
  right: 24px;
}
.semi-image-preview-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-white);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 1;
  pointer-events: none;
}
.semi-image-preview-header-title {
  flex: 1 1;
}
.semi-image-preview-header-close {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: auto;
}
.semi-image-preview-header-close:hover {
  background-color: rgba(0, 0, 0, 0.75);
}
.semi-image-preview-footer {
  display: flex;
  align-items: center;
}
.semi-image-preview-footer-content {
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: var(--semi-border-radius-medium);
  height: 48px;
}
.semi-image-preview-footer-wrapper {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
}
.semi-image-preview-footer-page {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--semi-color-white);
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 12px;
}
.semi-image-preview-footer .semi-icon {
  color: var(--semi-color-white);
  cursor: pointer;
}
.semi-image-preview-footer-gap {
  margin-left: 16px;
}
.semi-image-preview-footer .semi-slider {
  width: 132px;
  padding: 0 16px;
}
.semi-image-preview-footer .semi-slider .semi-slider-rail {
  color: var(--semi-color-white);
  height: 2px;
}
.semi-image-preview-footer .semi-slider .semi-slider-track {
  height: 2px;
}
.semi-image-preview-footer .semi-slider .semi-slider-handle {
  width: 16px;
  height: 16px;
  margin-top: 8px;
  box-sizing: border-box;
}
.semi-image-preview-footer .semi-divider {
  background: rgba(255, 255, 255, 0.5);
  margin: 0 16px;
}
.semi-image-preview-footer .semi-image-preview-footer-disabled {
  color: rgba(249, 249, 249, 0.35);
  cursor: default;
  pointer-events: none;
}
.semi-image-preview-image {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-image-preview-image-img {
  position: absolute;
  transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
  z-index: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-image-preview-image-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.semi-image-preview-image-spin .semi-spin-wrapper {
  color: #ccc;
}
@keyframes spinner {
  to {
    transform: var(--semi-transform_rotate-clockwise360deg);
  }
}

img[src=""], img:not([src]) {
  opacity: 0;
}

.semi-rtl .semi-image-preview,
.semi-portal-rtl .semi-image-preview {
  direction: rtl;
}
.semi-rtl .semi-image-preview-group,
.semi-portal-rtl .semi-image-preview-group {
  direction: rtl;
}
.semi-rtl .semi-image-preview-prev,
.semi-portal-rtl .semi-image-preview-prev {
  right: 24px;
  left: auto;
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-next,
.semi-portal-rtl .semi-image-preview-next {
  left: 24px;
  right: auto;
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-footer-page,
.semi-portal-rtl .semi-image-preview-footer-page {
  display: flex;
  direction: rtl;
}
.semi-rtl .semi-image-preview-footer-gap,
.semi-portal-rtl .semi-image-preview-footer-gap {
  margin-right: 16px;
  margin-left: 0;
}
.semi-rtl .semi-image-preview-footer .semi-icon-chevron_left,
.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_left {
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-footer .semi-icon-chevron_right,
.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_right {
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.wk-business-toast {
  margin-top: -0.586667rem;
}

.wk-business-toast .semi-toast-content {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wk-business-toast .semi-toast-content-text {
  margin: 0;
  max-width: none !important;
}

.wk-business-toast-message {
  box-sizing: border-box;
  min-height: 1.173333rem;
  max-width: min(8.533333rem, calc(100vw - 1.28rem));
  padding: 0.266667rem 0.48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.213333rem;
  background: rgba(20, 20, 20, 0.92);
  box-shadow: 0 0.16rem 0.533333rem rgba(0, 0, 0, 0.22);
  color: #fff;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.373333rem;
  font-weight: 400;
  line-height: 0.586667rem;
  text-align: center;
  overflow-wrap: anywhere;
  -webkit-backdrop-filter: blur(0.16rem);
  backdrop-filter: blur(0.16rem);
}

.wk-chatplus-drawer {
    order: 3;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% + 0.64rem);
    width: calc(100% + 0.64rem);
    height: 0;
    margin: 0 -0.32rem;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    pointer-events: none;
    transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
    contain: paint;
    will-change: height;
}

.wk-chatplus-drawer-open {
    height: var(--wk-conversation-chatplus-panel);
    /* 抵消父级底部的 8px 内边距，让面板贴底。 */
    margin-bottom: -0.213333rem;
    pointer-events: auto;
}

.wk-chatplus-panel {
    width: 100%;
    height: var(--wk-conversation-chatplus-panel);
    padding: 0.373333rem 0.213333rem 0.32rem;
    box-sizing: border-box;
    background: #fff;
    transform: translate3d(0, 100%, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.wk-chatplus-drawer-open .wk-chatplus-panel {
    transform: translate3d(0, 0, 0);
}

body[theme-mode=dark] .wk-chatplus-drawer,
body[theme-mode=dark] .wk-chatplus-panel {
    background: var(--wk-color-secondary);
}

.wk-chatplus-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(1.173333rem, 1fr));
    grid-template-rows: repeat(2, minmax(2.026667rem, 1fr));
    grid-column-gap: 0.16rem;
    -moz-column-gap: 0.16rem;
         column-gap: 0.16rem;
    grid-row-gap: 0.213333rem;
    row-gap: 0.213333rem;
}

.wk-chatplus-item {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    color: #27364f;
    font: inherit;
}

.wk-chatplus-item:hover .wk-chatplus-item-icon {
    transform: translateY(-0.026667rem);
}

.wk-chatplus-item-icon {
    width: 1.493333rem;
    height: 1.493333rem;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    transition: transform 0.16s ease;
}

.wk-chatplus-item-title {
    max-width: 100%;
    margin-top: 0.133333rem;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
    color: #27364f;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[theme-mode=dark] .wk-chatplus-item-title {
    color: var(--wk-text-item);
}

.wk-chatplus-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.266667rem;
    font-size: 0.346667rem;
    color: #8a97aa;
}

.wk-chatplus-empty-icon {
    display: block;
    color: #b4bcc8;
}

@media (max-width: 420px) {
    .wk-chatplus-panel {
        padding-left: 0.106667rem;
        padding-right: 0.106667rem;
    }

    .wk-chatplus-item-icon {
        width: 1.386667rem;
        height: 1.386667rem;
    }

    .wk-chatplus-item-title {
        font-size: 0.346667rem;
    }
}

/* 定位锚点：只用来 closest() 找视图层，绝不能占位、绝不能影响布局 */
.wk-modal-anchor {
  display: none;
}

/*
 * 弹窗宿主节点（每个 ModalPortal 实例一个，挂在 `.wk-viewqueue-view` 末尾）。
 *
 * · position:fixed + z-index → 自成层叠上下文，压住聊天页里所有浮层
 *   （会话头 40 / 右键菜单 98~103 / 表情面板 999 / 输入框联想 9999）。
 * · 它自己**不带 transform**，所以内部遮罩的 `position: fixed` 仍以视口
 *   （准确说是 `.wk-layout-content-right`）为包含块 —— 这正是要修的那件事，别加 transform。
 * · 内部各遮罩原有的 z-index（红包 2000 / 福袋 1000 / 游戏 1000、弹层 1100）
 *   收进本上下文后仍按原相对次序生效，无需改动。
 * · 仅 global 跨页阻断提示使用 body 宿主；普通业务弹窗仍留在自己的视图层，
 *   保持「打开规则页后规则页覆盖原弹窗」的行为。
 */
.wk-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.wk-business-failure-mask,
.wk-business-failure-mask *,
.wk-business-failure-mask *::before,
.wk-business-failure-mask *::after {
  box-sizing: border-box;
}

.wk-business-failure-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.64rem;
  background: rgba(0, 0, 0, 0.45);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  animation: wk-business-failure-mask-in 180ms ease-out both;
}

.wk-business-failure-dialog {
  width: 8.106667rem;
  max-width: 100%;
  overflow: hidden;
  padding: 0.64rem 0.533333rem 0.426667rem;
  border-radius: 0.373333rem;
  background: #fff;
  animation: wk-business-failure-dialog-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.wk-business-failure-title,
.wk-business-failure-reason {
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.wk-business-failure-title {
  color: #202a3c;
  font-size: 0.426667rem;
  font-weight: 600;
  line-height: 0.64rem;
}

.wk-business-failure-reason {
  color: #8a93a3;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.533333rem;
}

.wk-business-failure-actions {
  display: flex;
  width: 100%;
  padding-top: 0.533333rem;
}

.wk-business-failure-actions button {
  width: 100%;
  min-width: 0;
  height: 1.12rem;
  padding: 0 0.32rem;
  border: 0;
  border-radius: 0.266667rem;
  background: linear-gradient(125.32deg, #f0564a 0%, #d63035 51%, #c92528 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.533333rem;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wk-business-failure-actions button:active {
  opacity: 0.78;
}

.wk-business-failure-mask.is-closing {
  pointer-events: none;
  animation: wk-business-failure-mask-out 180ms ease-in both;
}

.wk-business-failure-mask.is-closing .wk-business-failure-dialog {
  animation: wk-business-failure-dialog-out 180ms ease-in both;
}

@keyframes wk-business-failure-mask-in {
  from { background: rgba(0, 0, 0, 0); }
  to { background: rgba(0, 0, 0, 0.45); }
}

@keyframes wk-business-failure-mask-out {
  from { background: rgba(0, 0, 0, 0.45); }
  to { background: rgba(0, 0, 0, 0); }
}

@keyframes wk-business-failure-dialog-in {
  from { opacity: 0; transform: translateY(0.213333rem) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wk-business-failure-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(0.133333rem) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-business-failure-mask,
  .wk-business-failure-dialog,
  .wk-business-failure-mask.is-closing,
  .wk-business-failure-mask.is-closing .wk-business-failure-dialog {
    animation-duration: 1ms;
  }
}

:root {
    --wk-page-header-height: 1.44rem;
    --wk-page-header-icon-color: #0d1217;
}

.wk-page-header {
    flex: 0 0 1.44rem;
    flex: 0 0 var(--wk-page-header-height);
    width: 100%;
    height: 1.44rem;
    height: var(--wk-page-header-height);
    box-sizing: border-box;
    padding: 0 0.4rem;
    display: grid;
    grid-template-columns: minmax(1.066667rem, 1fr) minmax(0, auto) minmax(1.066667rem, 1fr);
    align-items: center;
    grid-gap: 0;
    gap: 0;
    background: #fff;
    border-bottom: 0.026667rem solid #edf0f5;
    position: relative;
    z-index: 2;
}

.wk-page-header-leading,
.wk-page-header-action {
    display: flex;
    align-items: center;
    min-width: 0;
}

.wk-page-header-action {
    justify-content: flex-end;
}

.wk-page-header-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: #101010;
    font-size: 0.426667rem;
    font-weight: 500;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
    letter-spacing: normal;
    line-height: 1.4;
}

.wk-page-header-back,
.wk-page-header-action-button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.533333rem;
    height: 1.12rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #0d1217;
    color: var(--wk-page-header-icon-color);
    cursor: pointer;
}

/*
 * 返回箭头仍停在原来的 (25px, 27px) 视觉中心，只把命中区域从 20×42 扩成
 * 50×54：左右负 margin 抵消新增宽度，所以标题、头像和右侧操作都不会位移。
 */
.wk-page-header-back {
    width: 1.333333rem;
    height: 1.44rem;
    height: var(--wk-page-header-height);
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.wk-page-back-icon {
    flex-shrink: 0;
    display: block;
    box-sizing: border-box;
    width: 0.346667rem;
    height: 0.346667rem;
    border-left: 0.045333rem solid currentColor;
    border-bottom: 0.045333rem solid currentColor;
    border-radius: 0.026667rem;
    background-color: transparent;
    transform: rotate(45deg);
    color: #0d1217;
    color: var(--wk-page-header-icon-color);
}

.wk-page-header-action-button img {
    width: 0.48rem;
    height: 0.48rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-page-header-back:active,
.wk-page-header-action-button:active {
    opacity: 0.6;
}

body[theme-mode=dark] {
    --wk-page-header-icon-color: #fff;
}

body[theme-mode=dark] .wk-page-header {
    background: var(--wk-color-secondary);
    border-bottom-color: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-page-header-title {
    color: #fff;
}

/* ============================================================================
 * 群管理发红包整页
 * 视觉来源：Figma「6红包功能 / 群管理-发红包」node 2462-31139
 * 切图来源：node 2462-32650 → ../../assets/redpacket/
 *
 * 设计稿是 375px 移动整页（Header / Banner / 滚动主体 / 底部结算栏），本页照搬这四段。
 * 页面挂在 `WKApp.routeRight` 栈上（`.wk-viewqueue-view` 是 absolute inset:0），故根节点
 * 取 100%×100% 填满即可，不要再设 max-width/max-height/圆角——那是浮层时代的残留。
 * 主体上移 28px 压住 banner 下沿，与设计稿 Main top=140 一致。
 *
 * 本仓是移动端单栏布局（`.wk-layout-content-right` fixed inset:0），宽屏下整页会被拉宽，
 * 故左右留白用 `--wk-rp-gutter` 兜底：窄屏＝设计稿的 16px，宽屏自动把内容收进 480px 居中。
 * ========================================================================== */

/* 仓内无全局 border-box 复位；设计稿的高度都是含边框内边距的外框尺寸，故在本组件子树内约束 */
.wk-redpacket-create,
.wk-redpacket-create *,
.wk-redpacket-create *::before,
.wk-redpacket-create *::after {
  box-sizing: border-box;
}

.wk-redpacket-create {
  /* 窄屏取设计稿的 16px；宽屏把内容收进 480px 居中，避免整页被拉成一条 */
  --wk-rp-gutter: max(0.426667rem, calc((100% - 12.8rem) / 2));

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8fb;
  color: #202a3c;
  font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, Arial, sans-serif;
}

/* ---- Header ---- */
/* 返回：栈式导航退回聊天页。设计稿右上角的 ✕ 不渲染，理由见 index.tsx 文件头 */

/* ---- Banner + 表单滚动层（与发福袋页一致，banner 不再固定在表单上方） ---- */
.wk-rp-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ---- Banner ---- */
.wk-rp-banner {
  position: relative;
  height: 3.253333rem;
  /* 设计稿 banner 左右 23px、主体 16px，两者差 7px —— 宽屏下跟着 gutter 一起收 */
  padding: 0.586667rem calc(var(--wk-rp-gutter) + 0.186667rem) 0;
  overflow: hidden;
  background-image: linear-gradient(143.05deg, #fb7964 0%, #ed554d 57%, #d83c43 100%);
}
/* 右上角装饰圆环 */
.wk-rp-banner-ring {
  position: absolute;
  right: -2.16rem;
  top: -5.226667rem;
  width: 8rem;
  height: 8rem;
  border: 0.026667rem solid rgba(255, 236, 201, 0.38);
  border-radius: 4rem;
  box-shadow: 0 0 0 0.826667rem rgba(255, 255, 255, 0.05), 0 0 0 1.653333rem rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
/* 「发财」水印（设计稿 375 宽下距右 9px，锚右边而非左边，随页宽自适应） */
.wk-rp-banner-watermark {
  position: absolute;
  right: 0.24rem;
  top: 0.533333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.12rem;
  height: 3.973333rem;
  pointer-events: none;
}
.wk-rp-banner-watermark span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.56rem;
  height: 2.986667rem;
  border: 0.053333rem solid rgba(255, 235, 198, 0.2);
  border-radius: 0.693333rem;
  transform: rotate(14deg);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 2.08rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 230, 181, 0.2);
}
.wk-rp-banner-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  font-size: 0.32rem;
  letter-spacing: 0.04rem;
  color: #ffe6bb;
}
.wk-rp-banner-rule {
  width: 0.453333rem;
  height: 0.026667rem;
  background: #ffe6bb;
}
.wk-rp-banner-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.106667rem;
}
.wk-rp-banner-heading {
  font-size: 0.746667rem;
  font-weight: 600;
  letter-spacing: 0.98px;
  color: #fff;
  text-shadow: 0 0.053333rem 0.213333rem rgba(121, 16, 25, 0.2);
}
.wk-rp-banner-online {
  display: flex;
  align-items: center;
  gap: 0.186667rem;
  height: 0.8rem;
  padding: 0 0.266667rem;
  border: 0.026667rem solid rgba(255, 255, 255, 0.17);
  border-radius: 0.533333rem;
  background: rgba(99, 13, 19, 0.2);
  backdrop-filter: blur(0.106667rem);
  -webkit-backdrop-filter: blur(0.106667rem);
  font-size: 0.32rem;
  color: #fff8ed;
  white-space: nowrap;
}
.wk-rp-banner-online-dot {
  width: 0.186667rem;
  height: 0.186667rem;
  border-radius: 50%;
  background: #62e497;
  box-shadow: 0 0 0 0.08rem rgba(98, 228, 151, 0.16);
}

/* ---- 主体滚动区 ---- */
.wk-rp-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.533333rem;
  margin-top: -0.746667rem;
  padding: 0 var(--wk-rp-gutter) 0.426667rem;
}
.wk-rp-group {
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}
.wk-rp-group-wide {
  gap: 0.533333rem;
}
.wk-rp-section {
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}
.wk-rp-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.wk-rp-section-head-baseline {
  align-items: baseline;
}
.wk-rp-section-title {
  font-size: 0.373333rem;
  font-weight: 500;
  color: #202b3c;
}
.wk-rp-section-title-lg {
  font-size: 0.4rem;
}
.wk-rp-section-hint {
  font-size: 0.32rem;
  color: #8390a4;
}

/* ---- 红包类型切换 ---- */
.wk-rp-tablist {
  display: flex;
  gap: 0.133333rem;
  padding: 0.133333rem;
  border-radius: 0.373333rem;
  background: #fff;
  box-shadow: 0 0.266667rem 0.32rem rgba(222, 64, 56, 0.08);
}
.wk-rp-tab {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.2rem;
  border: 0.026667rem solid transparent;
  border-radius: 0.266667rem;
  background: #fff;
  font-size: 0.4rem;
  font-weight: 600;
  color: #6e7788;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.wk-rp-tab.active {
  border-color: #f2c1bc;
  background-image: linear-gradient(133.75deg, #fff4ef 0%, #fffafa 100%);
  box-shadow: inset 0 0 0 0.053333rem rgba(234, 70, 62, 0.05);
  font-weight: 500;
  color: #c92528;
}

/* ---- 金额 / 个数卡片 ---- */
.wk-rp-card {
  padding: 0 0.373333rem;
  border: 0.026667rem solid rgba(229, 233, 239, 0.9);
  border-radius: 0.32rem;
  background: #fff;
  box-shadow: 0 0.266667rem 0.346667rem rgba(45, 54, 75, 0.04);
}
.wk-rp-field {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  height: 1.44rem;
}
.wk-rp-field-divided {
  border-top: 0.026667rem solid #eff1f4;
}
.wk-rp-field-icon {
  display: block;
  flex-shrink: 0;
  width: 0.746667rem;
  height: 0.746667rem;
  border-radius: 0.16rem;
}
.wk-rp-field-label {
  flex-shrink: 0;
  font-size: 0.373333rem;
  font-weight: 500;
  color: #202a3c;
}
.wk-rp-field-input {
  flex: 1 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  font-family: inherit;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.026667rem;
  color: #202a3c;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wk-rp-field-input::-moz-placeholder {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #afb7c5;
}
.wk-rp-field-input::placeholder {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #afb7c5;
}
.wk-rp-field-unit {
  flex-shrink: 0;
  font-size: 0.4rem;
  font-weight: 500;
  color: #202a3c;
}

/* ---- 当前类型提示条 ---- */
.wk-rp-note {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  min-height: 0.746667rem;
  padding: 0.106667rem 0.32rem;
  border: 0.026667rem solid #f1e8de;
  border-radius: 0.213333rem;
  background-image: linear-gradient(to right, #fffaf3, #fff);
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #788395;
}
.wk-rp-note-dot {
  flex-shrink: 0;
  width: 0.133333rem;
  height: 0.133333rem;
  border-radius: 0.053333rem;
  background: #f2ad42;
  box-shadow: 0 0 0 0.053333rem rgba(255, 141, 40, 0.13);
}
.wk-rp-note em {
  font-style: normal;
  font-weight: 600;
  color: #cb3633;
}

/* ---- 单行输入卡片（红包标题） ---- */
.wk-rp-input-card {
  display: flex;
  align-items: center;
  height: 1.44rem;
  padding: 0 0.32rem;
  border: 0.026667rem solid #e7ebf1;
  border-radius: 0.32rem;
  background: #fff;
  box-shadow: 0 0.213333rem 0.32rem rgba(45, 54, 75, 0.04);
}
.wk-rp-input {
  flex: 1 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.426667rem;
  font-weight: 500;
  color: #202a3c;
}
.wk-rp-input::-moz-placeholder {
  font-weight: 400;
  color: #afb7c5;
}
.wk-rp-input::placeholder {
  font-weight: 400;
  color: #afb7c5;
}

/* ---- 平台彩金余额 ---- */
.wk-rp-balance {
  min-width: 0;
  max-width: 72%;
  display: flex;
  align-items: baseline;
  gap: 0.16rem;
}
.wk-rp-balance-label { flex: 0 0 auto; }
.wk-rp-balance-value { flex: 0 1 auto; }
.wk-rp-balance-dot {
  align-self: center;
  width: 0.133333rem;
  height: 0.133333rem;
  border-radius: 0.053333rem;
  background: #56c986;
  box-shadow: 0 0 0 0.053333rem rgba(86, 201, 134, 0.13);
}
.wk-rp-balance-label {
  font-size: 0.32rem;
  color: #8390a4;
}
.wk-rp-balance-value {
  min-width: 0;
  overflow: hidden;
  font-size: 0.373333rem;
  font-weight: 800;
  color: #202a3c;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-rp-balance-value.is-long { font-size: 0.32rem; }
.wk-rp-balance-value.is-xlong { font-size: 0.266667rem; letter-spacing: -0.2px; }
/* ---- 打码倍数 ---- */
.wk-rp-multi-card {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  height: 1.493333rem;
  padding: 0 0.32rem;
  border: 0.026667rem solid rgba(229, 233, 239, 0.9);
  border-radius: 0.32rem;
  background: #fff;
  box-shadow: 0 0.266667rem 0.346667rem rgba(45, 54, 75, 0.04);
}
.wk-rp-multi-label {
  flex-shrink: 0;
  padding: 0.053333rem 0.106667rem;
  font-size: 0.373333rem;
  font-weight: 500;
  letter-spacing: 0.053333rem;
  color: #202a3c;
}
.wk-rp-multi-unit {
  flex-shrink: 0;
  font-size: 0.373333rem;
  font-weight: 600;
  color: #202a3c;
}
/* 放在 .wk-rp-input 之后，同特异性靠源码顺序覆盖字号/对齐 */
.wk-rp-input-num {
  text-align: right;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.18px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* 空值时让输入框本身也使用占位符字号，避免小号 0 落在 18px 输入行盒的基线上而视觉偏下。 */
.wk-rp-input-num:-moz-placeholder-shown {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
}
.wk-rp-input-num:placeholder-shown {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
}
.wk-rp-input-num::-moz-placeholder {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #afb7c5;
}
.wk-rp-input-num::placeholder {
  font-size: 0.373333rem;
  font-weight: 400;
  letter-spacing: 0;
  color: #afb7c5;
}
.wk-rp-tips {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}
/* 切图是 12.02px 的矢量本体，设计稿外框 14.42px——用 padding 还原「外框 14 / 内容 12」的比例 */
.wk-rp-tips img {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 0.373333rem;
  height: 0.373333rem;
  padding: 0.026667rem;
}
.wk-rp-tips span {
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #8d97a7;
}

/* ---- 底部结算栏 ---- */
.wk-rp-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.346667rem;
  /* 整页贴底，给 iOS home indicator 让出安全区（浮层时代不需要） */
  height: calc(1.946667rem + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--wk-rp-gutter) env(safe-area-inset-bottom, 0px);
  border-top: 0.026667rem solid #edf0f4;
  background: #fff;
  box-shadow: 0 -0.186667rem 0.266667rem rgba(37, 46, 64, 0.07);
}
.wk-redpacket-create.is-keyboard-open .wk-rp-footer {
  height: 1.946667rem;
  padding-bottom: 0;
}
.wk-rp-total {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.746667rem;
  font-weight: 900;
  color: #1f2937;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wk-rp-total.is-long { font-size: 0.613333rem; }
.wk-rp-total.is-xlong { font-size: 0.48rem; letter-spacing: -0.3px; }
.wk-rp-submit {
  flex-shrink: 0;
  width: 4.533333rem;
  height: 1.28rem;
  border: none;
  border-radius: 0.32rem;
  background-image: linear-gradient(103.31deg, #ef5048 42.07%, #d93e43 96.87%);
  font-family: inherit;
  font-size: 0.426667rem;
  font-weight: 600;
  letter-spacing: 0.0328rem;
  color: #fff;
  cursor: pointer;
}
.wk-rp-submit:disabled {
  background-image: none;
  background-color: #c7cbd2;
  cursor: not-allowed;
}

/* ---- 工具栏按钮 ---- */
.wk-redpacket-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.533333rem;
  padding: 0 0.106667rem;
}
.wk-redpacket-toolbar-btn img {
  width: 0.586667rem;
  height: 0.586667rem;
}

/* ============================================================================
 * 红包游戏（8-0x）—— 发起页 / 玩法规则页 / 下注弹窗 / 详情弹窗 / 共用弹层
 *
 * 视觉来源：Figma「聊天APP-新」file BtCfrFupk64KxOdoXhzfEr
 *   8-01 发起与规则 3212-57818（切图 3212-57800）
 *   8-02 聊天入口与卡片 3257-82382（切图 3244-81372，卡片样式在 Messages/Rpgame）
 *   8-03 下注弹窗 3212-58604（切图 3212-57812）
 *   8-04 详情弹窗 3212-58974（切图 3212-57815）
 *   ⚠️ 2026-08-20 重读：设计把这四段整体重建过，旧的 2896-90xx / 2621-49xxx 节点
 *      在文件里已经不存在（MCP 直接报 node not found），别再照旧 ID 去对稿。
 *
 * ★★ 形态分两种，别记混（PM 2026-08-13 定）★★
 *   · 8-01 发起、玩法规则 ＝ **整屏页面**（带导航条），挂 `WKApp.routeRight` 栈；
 *   · 8-03 下注、8-04 详情 ＝ **聊天页之上的居中弹窗**（340 宽 + 45% 黑遮罩）。
 *
 * ★★ 主题色（2026-08-20 按新稿更新）★★
 *   底色仍是本功能专属的奶油底 #FFFBEE（与群红包 6-0x 的冷灰底 #F7F8FB 一眼可分），
 *   但红渐变已被设计统一成 #F0564A → #D63035 51% → #C92528、红底金字统一成 #FFE6BB，
 *   **不要**再用旧稿那套更深的 #E5231A / #FFE283。
 *   中性文本、涨跌语义色、风险告知红跨功能一致，不参与换色。
 * ========================================================================== */

.wk-rpg,
.wk-rpg *,
.wk-rpg *::before,
.wk-rpg *::after,
.wk-rpg-mask,
.wk-rpg-mask *,
.wk-rpg-mask *::before,
.wk-rpg-mask *::after,
.wk-rpg-dialog-mask,
.wk-rpg-dialog-mask *,
.wk-rpg-dialog-mask *::before,
.wk-rpg-dialog-mask *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 设计 token
 * 页面与弹窗可能是互不相连的树；共用确认层也会在福袋页独立使用，
 * 每种根节点都挂一份变量，不依赖红包游戏页面作为祖先。
 * ------------------------------------------------------------------------- */

.wk-rpg,
.wk-rpg-mask,
.wk-rpg-dialog-mask {
  /* 品牌 */
  --rpg-page-bg: #fffbee;
  --rpg-gold: #ffe6bb;
  --rpg-accent: #b91c1c;
  /* 发起页「查看玩法规则」用的是比 accent 略偏红的一档，稿上就是两个值 */
  --rpg-link: #b9232a;
  --rpg-brand-grad: linear-gradient(125.76deg, #f0564a 0%, #d63035 51%, #c92528 100%);
  --rpg-modal-grad: linear-gradient(117.35deg, #f0564a 0%, #d63035 51%, #c92528 100%);
  --rpg-btn-grad: linear-gradient(129.69deg, #f0564a 0%, #d63035 51%, #c92528 100%);
  /* 整页底部主按钮禁用底色（与发红包页同一枚）；弹窗内按钮禁用改用 opacity .5，见 .wk-rpg-btn */
  --rpg-btn-disabled: #c7cbd2;
  /* 红底上的装饰环：描边 + 两层白色外扩阴影，做出同心波纹 */
  --rpg-ring-bd: rgba(255, 236, 201, 0.38);

  /* 容器 */
  --rpg-card-bd: rgba(240, 226, 194, 0.9);
  --rpg-line: #f5ead3;
  --rpg-radius: 0.32rem;
  --rpg-radius-lg: 0.373333rem;

  /* 中性文本（跨功能一致，不换色） */
  --rpg-t1: #202a3c;
  --rpg-t2: #5a6377;
  --rpg-t3: #8a93a3;
  --rpg-t4: #b6bcc8;

  /* 状态成功、正盈利均用绿色；亏损红、打平中性 */
  --rpg-up: #2fa15b;
  --rpg-profit-up: #2fa15b;
  --rpg-down: #e0483a;
  --rpg-wait: #c98a25;
  --rpg-risk-bg: #fdecea;
  --rpg-risk-fg: #c0392b;

  /* 交付说明第五节指定的 fallback 链：PingFang SC → Noto Sans SC → 系统无衬线。
     设计稿标注的 Noto Sans SC Black/Bold 在本仓退到 PingFang SC 的对应字重——
     仓内不引 webfont（与群红包 6-0x 同款取舍）。 */
  --rpg-font: "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ============================================================================
 * 一、整页外壳（发起页 / 玩法规则页共用）
 * 页面挂在 routeRight 栈上（`.wk-viewqueue-view` 是 absolute inset:0），
 * 故根节点取 100%×100% 填满即可。宽屏下整页会被拉宽，左右留白用 `--rpg-gutter`
 * 兜底：窄屏＝设计稿的 16px，宽屏自动把内容收进 480px 居中（与发红包页同款）。
 * ========================================================================== */

.wk-rpg {
  --rpg-gutter: max(0.426667rem, calc((100% - 12.8rem) / 2));

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--rpg-page-bg);
  color: var(--rpg-t1);
  font-family: var(--rpg-font);
}

/* ---- 滚动区 ---- */

.wk-rpg-body {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ---- banner（122 高红渐变 + 装饰）---- */

.wk-rpg-banner {
  position: relative;
  height: 3.253333rem;
  /* 设计稿 banner 内边距 23，比 Main 的 16 多 7 —— 文案比卡片再内缩一点 */
  padding: 0.586667rem calc(var(--rpg-gutter) + 0.186667rem) 0;
  overflow: hidden;
  background: var(--rpg-brand-grad);
}

/*
 * 装饰牌 / 装饰环：设计稿是两个矢量件，这里用纯 CSS 复刻——
 * 两件都是「圆角描边框 ＋ 一个半透明大字」「一个描边圆 ＋ 两层外扩白影」，
 * CSS 能 1:1 还原且随页宽自适应，位图拉伸反而会糊。
 * 「红包」二字稿上是 Songti SC Black，仓内不引 webfont，退到系统宋体族；
 * 它是 20% 不透明度的背景装饰，字形差异肉眼不可辨。
 */
.wk-rpg-banner-plate {
  position: absolute;
  /* 稿上 375 宽时 left 173.6 + 宽 192.47 = 距右 9px —— 锚右边，随页宽自适应 */
  right: 0.24rem;
  top: 0.533333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.12rem;
  height: 3.973333rem;
  pointer-events: none;
}

.wk-rpg-banner-plate::after {
  content: "红包";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.56rem;
  height: 2.986667rem;
  border: 0.053333rem solid rgba(255, 235, 198, 0.2);
  border-radius: 0.693333rem;
  transform: rotate(14deg);
  font-family: "Songti SC", "STSong", "SimSun", serif;
  font-size: 2.08rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 230, 181, 0.2);
}

.wk-rpg-banner-ring {
  position: absolute;
  right: -2.16rem;
  top: -5.226667rem;
  width: 8rem;
  height: 8rem;
  border: 0.026667rem solid var(--rpg-ring-bd);
  border-radius: 50%;
  box-shadow: 0 0 0 0.826667rem rgba(255, 255, 255, 0.05), 0 0 0 1.653333rem rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.wk-rpg-banner-kicker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  font-size: 0.32rem;
  letter-spacing: 0.04rem;
  color: #ffe6bb;
}

.wk-rpg-banner-kicker::before {
  content: "";
  flex: none;
  width: 0.453333rem;
  height: 0.026667rem;
  background: #ffe6bb;
}

.wk-rpg-banner-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.32rem;
  margin-top: 0.106667rem;
}

.wk-rpg-banner-title {
  font-size: 0.746667rem;
  font-weight: 600;
  line-height: 0.906667rem;
  letter-spacing: 0.98px;
  color: var(--rpg-gold);
  text-shadow: 0 0.053333rem 0.213333rem rgba(121, 16, 25, 0.2);
  white-space: nowrap;
}

.wk-rpg-online {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.186667rem;
  padding: 0.213333rem 0.266667rem;
  border: 0.026667rem solid rgba(255, 255, 255, 0.17);
  border-radius: 0.533333rem;
  background: rgba(99, 13, 19, 0.2);
  backdrop-filter: blur(0.106667rem);
  -webkit-backdrop-filter: blur(0.106667rem);
  font-size: 0.32rem;
  color: #fff8ed;
  white-space: nowrap;
}

.wk-rpg-online::before {
  content: "";
  flex: none;
  width: 0.186667rem;
  height: 0.186667rem;
  border-radius: 50%;
  background: #62e497;
  box-shadow: 0 0 0 0.08rem rgba(98, 228, 151, 0.16);
}

/* ---- Main：上移 28 压住 banner 下沿（设计稿 Main y=140、banner 到 168）---- */

.wk-rpg-main {
  position: relative;
  z-index: 1;
  margin-top: -0.746667rem;
  padding: 0 var(--rpg-gutter) 0.426667rem;
  display: flex;
  flex-direction: column;
  gap: 0.373333rem;
}

/* ---- 白卡 + 表单行（表单卡 / 局况卡同款）---- */

.wk-rpg-card {
  display: flex;
  flex-direction: column;
  padding: 0 0.32rem;
  border: 0.026667rem solid var(--rpg-card-bd);
  border-radius: var(--rpg-radius);
  background: #fff;
}

.wk-rpg-row {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  padding: 0.453333rem 0;
  border-bottom: 0.026667rem solid var(--rpg-line);
}

.wk-rpg-row:last-child {
  border-bottom: 0;
}

.wk-rpg-row-label {
  flex: none;
  width: auto;
  font-size: 0.373333rem;
  font-weight: 500;
  color: var(--rpg-t1);
  white-space: nowrap;
}

/* 局况卡（只读）的标签走次级色，与可编辑的表单卡区分 */
.wk-rpg-card.is-readonly .wk-rpg-row-label {
  color: #4d596b;
}

.wk-rpg-row-unit {
  flex: none;
  font-size: 0.373333rem;
  font-weight: 500;
  color: var(--rpg-t1);
}

.wk-rpg-row-value {
  flex: 1 1;
  min-width: 0;
  text-align: right;
  font-size: 0.426667rem;
  font-weight: 800;
  color: var(--rpg-t1);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-rpg-row-value.is-long { font-size: 0.373333rem; }
.wk-rpg-row-value.is-xlong { font-size: 0.32rem; letter-spacing: -0.2px; }

/* 「游戏标题」那一行的值是文字不是数字，稿上仍是 14/Medium —— 不跟着数字列加粗放大 */
.wk-rpg-row-value.is-text {
  font-size: 0.373333rem;
  font-weight: 500;
  font-feature-settings: normal;
  font-variant-numeric: normal;
}

/* 输入框做成「右对齐行内值」的样子——设计稿未填写态就是同位置的占位文案 */
.wk-rpg-row input.wk-rpg-row-value {
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

/* 占位文案是区间提示（`5 - 500`）而不是数字本身，退回常规字号字重才不挤 */
.wk-rpg-row input.wk-rpg-row-value::-moz-placeholder {
  color: var(--rpg-t4);
  font-size: 0.373333rem;
  font-weight: 400;
}
.wk-rpg-row input.wk-rpg-row-value::placeholder {
  color: var(--rpg-t4);
  font-size: 0.373333rem;
  font-weight: 400;
}

/* ---- 提示条（发起即投入：暖白渐变 + 琥珀点）---- */

.wk-rpg-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  padding: 0.133333rem 0.32rem;
  border: 0.026667rem solid #f1e8de;
  border-radius: 0.213333rem;
  background: linear-gradient(90deg, #fffbed 0%, #fff 100%);
  font-size: 0.32rem;
  line-height: 0.453333rem;
  color: #6e5b44;
}

.wk-rpg-tip::before {
  content: "";
  flex: none;
  width: 0.128rem;
  height: 0.128rem;
  margin-top: 0.16rem;
  border-radius: 0.064rem;
  background: #f2ad42;
  box-shadow: 0 0 0 0.053333rem rgba(255, 141, 40, 0.13);
}

/* ---- 提示/余额不足（红底告警条，与下注弹窗的风险告知同款视觉）---- */

.wk-rpg-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  padding: 0.133333rem 0.373333rem;
  border-radius: 0.213333rem;
  background: var(--rpg-risk-bg);
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: var(--rpg-risk-fg);
}

.wk-rpg-alert::before {
  content: "";
  flex: none;
  width: 0.128rem;
  height: 0.128rem;
  margin-top: 0.176rem;
  border-radius: 0.064rem;
  background: var(--rpg-down);
  box-shadow: 0 0 0 0.053333rem rgba(224, 72, 58, 0.13);
}

/* ---- 固定说明（本玩法用户自付、发起人也掏钱、可能亏——掏钱前必须看得到）---- */

.wk-rpg-notes {
  display: flex;
  flex-direction: column;
  gap: 0.106667rem;
  padding: 0.213333rem 0.32rem;
  border-radius: 0.213333rem;
  background: #fff3e0;
  font-size: 0.32rem;
  line-height: 0.533333rem;
  color: #8a4b1c;
}

/* ---- 查看玩法规则 ---- */

.wk-rpg-ruleslink {
  align-self: flex-end;
  display: flex;
  align-items: center;
  height: 0.586667rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.346667rem;
  font-weight: 400;
  color: var(--rpg-link);
  cursor: pointer;
}

/* 稿上的箭头是 12×12 盒子里一枚 8.485px 的方角旋转 -45°（与群红包详情同款做法） */
.wk-rpg-ruleslink::after {
  content: "";
  box-sizing: border-box;
  width: 0.226267rem;
  height: 0.226267rem;
  margin: 0 0.046933rem;
  border-right: 0.041147rem solid currentColor;
  border-bottom: 0.041147rem solid currentColor;
  transform: rotate(-45deg);
}

.wk-rpg-ruleslink:active {
  opacity: 0.6;
}

/* ---- 底部操作区（73 高，左「本次投入」右主按钮 170×48）---- */

.wk-rpg-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.346667rem;
  padding: 0.32rem var(--rpg-gutter);
  border-top: 0.026667rem solid #f1e6d0;
  background: #fff;
  box-shadow: 0 -0.186667rem 0.533333rem 0 rgba(37, 46, 64, 0.07);
}

.wk-rpg-footer-cost {
  flex: 1 1;
  min-width: 0;
}

.wk-rpg-footer-cost-label {
  font-size: 0.32rem;
  color: var(--rpg-t3);
}

.wk-rpg-footer-cost-value {
  font-size: 0.746667rem;
  font-weight: 900;
  line-height: 0.906667rem;
  color: #1f2937;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-rpg-footer-cost-value.is-long { font-size: 0.613333rem; }
.wk-rpg-footer-cost-value.is-xlong { font-size: 0.48rem; letter-spacing: -0.3px; }

.wk-rpg-footer-btn {
  flex: none;
  width: 4.533333rem;
  height: 1.28rem;
  border: 0;
  border-radius: var(--rpg-radius);
  background: var(--rpg-btn-grad);
  color: #fff;
  font-family: inherit;
  font-size: 0.426667rem;
  font-weight: 700;
  cursor: pointer;
}

.wk-rpg-footer-btn:active {
  opacity: 0.6;
}

.wk-rpg-footer-btn:disabled {
  background: var(--rpg-btn-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* ============================================================================
 * 二、玩法规则页（整页）
 * ========================================================================== */

.wk-rpg-rules {
  padding: 0.426667rem var(--rpg-gutter);
}

.wk-rpg-rules-card {
  padding: 0 0.373333rem;
  border: 0.026667rem solid var(--rpg-card-bd);
  border-radius: var(--rpg-radius);
  background: #fff;
}

.wk-rpg-rules-sec {
  padding: 0.48rem 0;
  border-bottom: 0.026667rem solid var(--rpg-line);
}

.wk-rpg-rules-sec:last-child {
  border-bottom: 0;
}

.wk-rpg-rules-h {
  display: flex;
  align-items: center;
  gap: 0.186667rem;
  margin-bottom: 0.213333rem;
  font-size: 0.373333rem;
  font-weight: 500;
  color: var(--rpg-t1);
}

.wk-rpg-rules-h::before {
  content: "";
  flex: none;
  width: 0.08rem;
  height: 0.373333rem;
  border-radius: 0.053333rem;
  background: #e5231a;
}

.wk-rpg-rules-p {
  margin: 0;
  font-size: 0.32rem;
  line-height: 0.586667rem;
  color: var(--rpg-t2);
}

/* 运营配了外链就整页开 iframe（无外链时走上面的内置文案） */
.wk-rpg-rules-frame {
  flex: 1 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #fff;
}

/* ============================================================================
 * 三、弹窗外壳（下注 8-03 / 详情 8-04）
 * 设计稿画的是 375×812 里的绝对坐标，Web 端视口高度不定 → 一律视口居中，
 * 并给 max-height 让长名单在弹窗内滚（与群红包抢红包弹窗同款取舍）。
 * ========================================================================== */

.wk-rpg-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.426667rem;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--rpg-font);
  animation: wk-rpg-mask-in 180ms ease-out;
}

.wk-rpg-mask.is-closing {
  pointer-events: none;
  animation: wk-rpg-mask-out 200ms ease-in forwards;
}

.wk-rpg-modal {
  display: flex;
  flex-direction: column;
  width: 9.066667rem;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--rpg-radius-lg);
  background: #fff;
  color: var(--rpg-t1);
  transform-origin: center;
  will-change: transform, opacity;
  animation: wk-rpg-modal-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wk-rpg-mask.is-closing .wk-rpg-modal {
  animation: wk-rpg-modal-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes wk-rpg-mask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-rpg-mask-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wk-rpg-modal-in { from { opacity: 0; transform: translateY(0.373333rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wk-rpg-modal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(0.266667rem) scale(.99); } }

.wk-rpg-modal-head {
  position: relative;
  flex-shrink: 0;
  background: var(--rpg-modal-grad);
}

.wk-rpg-modal-body {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.426667rem;
  background: #fff;
}

/* 下注态按 Figma 3212:58721 的 340×477 外框；开奖详情仍使用自己的 578px 外框。 */
.wk-rpg-bet-modal {
  height: 12.72rem;
}

/* 无状态提示时折叠该行及一段 12px 间距，避免按钮下方出现空白带。 */
.wk-rpg-bet-modal.is-status-empty {
  height: 11.92rem;
}

.wk-rpg-bet-modal > .wk-rpg-modal-body {
  flex: 1 1 8.613333rem;
  height: 8.613333rem;
  justify-content: flex-start;
  gap: 0.32rem;
}

.wk-rpg-bet-modal.is-status-empty > .wk-rpg-modal-body {
  flex-basis: 7.813333rem;
  height: 7.813333rem;
}

/* 关闭按钮：28×28 命中区，图标 20×20 白色（压在红头部上） */
.wk-rpg-modal-close {
  flex: none;
  width: 0.746667rem;
  height: 0.746667rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-rpg-modal-close:active {
  opacity: 0.6;
}

.wk-rpg-modal-close img {
  width: 0.533333rem;
  height: 0.533333rem;
  display: block;
}

/* ---- 下注弹窗头部（居中：标题 / 距开奖 / 大倒计时 / 统计行）---- */

.wk-rpg-bet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.106667rem;
  padding: 0.426667rem;
  overflow: hidden;
  text-align: center;
  flex: 0 0 4.106667rem;
  height: 4.106667rem;
}

/*
 * 头部两枚装饰环（右上大、左下小），与整页 banner 同一套「描边圆 + 两层外扩白影」。
 * 左下那枚在稿上按 340 宽给的是 right:270 —— 这里换算成 left:-118，弹窗窄一点也不会漂。
 */
.wk-rpg-bet-head::before,
.wk-rpg-bet-head::after {
  content: "";
  position: absolute;
  width: 5.013333rem;
  height: 5.013333rem;
  border: 0.026667rem solid var(--rpg-ring-bd);
  border-radius: 50%;
  box-shadow: 0 0 0 0.506667rem rgba(255, 255, 255, 0.05), 0 0 0 1.04rem rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.wk-rpg-bet-head::before {
  right: -2.613333rem;
  top: -2.72rem;
}

.wk-rpg-bet-head::after {
  left: -3.146667rem;
  top: 2.32rem;
}

/* 绝对定位的装饰环会盖住普通流内容，正文四行统一抬到环之上 */
.wk-rpg-bet-title,
.wk-rpg-bet-kicker,
.wk-rpg-bet-countdown,
.wk-rpg-bet-stat {
  position: relative;
}

.wk-rpg-bet-head .wk-rpg-modal-close {
  position: absolute;
  z-index: 1;
  top: 0.266667rem;
  right: 0.373333rem;
}

.wk-rpg-bet-title {
  max-width: 6.613333rem;
  font-size: 0.506667rem;
  font-weight: 700;
  line-height: 0.613333rem;
  color: var(--rpg-gold);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-rpg-bet-kicker {
  font-size: 0.373333rem;
  color: #fff;
}

.wk-rpg-bet-countdown {
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.146667rem;
  color: var(--rpg-gold);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-rpg-bet-stat {
  font-size: 0.373333rem;
  color: #fff;
}

/* ---- 奖池卡 ---- */

.wk-rpg-pool {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.266667rem;
  padding: 0.373333rem 0.426667rem;
  border: 0.026667rem solid var(--rpg-card-bd);
  border-radius: var(--rpg-radius);
  background: #fff;
}

.wk-rpg-bet-modal .wk-rpg-pool {
  height: 1.52rem;
}

.wk-rpg-pool-label {
  flex: none;
  font-size: 0.373333rem;
  font-weight: 500;
  color: var(--rpg-t2);
}

.wk-rpg-pool-value {
  display: flex;
  align-items: baseline;
  gap: 0.08rem;
  min-width: 0;
}

.wk-rpg-pool-value b {
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 0.773333rem;
  color: #202b3c;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-rpg-pool-value b.is-long { font-size: 0.533333rem; }
.wk-rpg-pool-value b.is-xlong { font-size: 0.426667rem; letter-spacing: -0.25px; }

.wk-rpg-pool-value span {
  flex: none;
  font-size: 0.373333rem;
  font-weight: 500;
  color: var(--rpg-t3);
}

/* ---- 信息行组（服务费率 / 我的余额）---- */

.wk-rpg-kvs {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  /* dl 自带 margin:1em 0，不清掉会在弹窗里多出两条 ~13px 的空隙 */
  margin: 0;
  font-size: 0.32rem;
}

.wk-rpg-bet-modal .wk-rpg-kvs {
  height: auto;
  justify-content: flex-start;
}

.wk-rpg-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.266667rem;
}

.wk-rpg-kv dt {
  margin: 0;
  font-weight: 500;
  color: var(--rpg-t3);
}

.wk-rpg-kv dd {
  margin: 0;
  font-size: 0.373333rem;
  font-weight: 700;
  color: var(--rpg-t2);
}
.wk-rpg-kv dd.is-long { font-size: 0.32rem; }
.wk-rpg-kv dd.is-xlong { font-size: 0.266667rem; letter-spacing: -0.2px; }

/* 设计稿中费率值为 12px，余额值为 14px。 */
.wk-rpg-kv:first-child dd {
  font-size: 0.32rem;
}

/* ---- 常驻风险告知（PRD 02 硬要求：下注按钮上方常驻，不可折叠、不可省）---- */

.wk-rpg-risk {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  padding: 0.106667rem 0.213333rem;
  border-radius: 0.213333rem;
  background: var(--rpg-risk-bg);
  font-size: 0.32rem;
  line-height: 0.533333rem;
  color: var(--rpg-risk-fg);
}

.wk-rpg-bet-modal .wk-rpg-risk {
  height: 1.28rem;
}

.wk-rpg-risk::before {
  content: "";
  flex: none;
  width: 0.128rem;
  height: 0.128rem;
  margin-top: 0.202667rem;
  border-radius: 0.064rem;
  background: var(--rpg-down);
  box-shadow: 0 0 0 0.053333rem rgba(224, 72, 58, 0.13);
}

/* ---- 主按钮（弹窗内通栏）---- */

.wk-rpg-btn {
  flex: none;
  width: 100%;
  padding: 0.346667rem 0;
  border: 0;
  border-radius: var(--rpg-radius);
  background: var(--rpg-btn-grad);
  color: #fff;
  font-family: inherit;
  font-size: 0.426667rem;
  font-weight: 700;
  cursor: pointer;
}

.wk-rpg-bet-modal .wk-rpg-btn {
  height: 1.28rem;
  padding: 0;
}

.wk-rpg-btn:active {
  opacity: 0.6;
}

.wk-rpg-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---- 状态提示（按钮下方一行）---- */

.wk-rpg-status {
  flex: none;
  margin: -0.053333rem 0;
  font-size: 0.32rem;
  line-height: 0.48rem;
  text-align: center;
  color: #8a4b1c;
}

.wk-rpg-bet-modal .wk-rpg-status {
  height: 0.48rem;
  flex: 0 0 0.48rem;
  margin: 0;
  line-height: 0.48rem;
}

.wk-rpg-status.is-empty {
  display: none;
}

.wk-rpg-bet-modal .wk-rpg-modal-link {
  height: 0.453333rem;
  flex: 0 0 0.453333rem;
}

/* 首屏 detail 尚未返回时仍占用奖池/信息/风险三块的真实尺寸，杜绝短弹窗闪一下。 */
.wk-rpg-bet-loading-pool {
  height: 1.52rem;
  flex: 0 0 1.52rem;
}

.wk-rpg-bet-loading-kvs {
  height: 1.066667rem;
  flex: 0 0 1.066667rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wk-rpg-bet-loading-kvs .wk-rpg-skel {
  width: 100%;
  height: 0.346667rem;
}

.wk-rpg-bet-loading-risk {
  height: 1.28rem;
  flex: 0 0 1.28rem;
}

/* 参与成功走涨色；其余状态（即将开奖/余额不足/人数已满/失败）走暖褐 */
.wk-rpg-status.is-ok {
  color: var(--rpg-up);
}

/* ---- 弹窗底部文字入口 ---- */

.wk-rpg-modal-link {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.32rem;
  font-weight: 500;
  text-align: center;
  color: var(--rpg-t3);
  cursor: pointer;
}

/* 8×8 盒子里一枚 5.657px 的方角旋转 -45°（比发起页那颗小一档，稿上就是两个尺寸） */
.wk-rpg-modal-link::after {
  content: "";
  box-sizing: border-box;
  width: 0.150853rem;
  height: 0.150853rem;
  margin: 0 0.0312rem;
  border-right: 0.02744rem solid currentColor;
  border-bottom: 0.02744rem solid currentColor;
  transform: rotate(-45deg);
}

.wk-rpg-modal-link:active {
  opacity: 0.6;
}

/* 兜底下注入口 / 加载更多：强调色，稿上这一档不带箭头 */
.wk-rpg-modal-link.is-accent {
  font-size: 0.32rem;
  font-weight: 500;
  color: var(--rpg-accent);
}

.wk-rpg-modal-link.is-accent::after {
  content: none;
}

/* ============================================================================
 * 四、详情弹窗（8-04）
 * ========================================================================== */

.wk-rpg-detail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 2.213333rem;
  gap: 0.16rem;
  padding: 0.373333rem 0.426667rem 0.48rem;
  overflow: hidden;
}

/* iOS 固定为 header 83 + body 495；骨架和真实内容只替换内部，不重算外壳高度。 */
.wk-rpg-detail-modal {
  height: 15.413333rem;
}

.wk-rpg-detail-body {
  flex: 1 1 13.2rem;
  height: 13.2rem;
}

/* 与下注弹窗同款装饰环，稿上尺寸小一档（158 / 118） */
.wk-rpg-detail-head::before,
.wk-rpg-detail-head::after {
  content: "";
  position: absolute;
  border: 0.026667rem solid var(--rpg-ring-bd);
  border-radius: 50%;
  pointer-events: none;
}

.wk-rpg-detail-head::before {
  right: -2.213333rem;
  top: -2.32rem;
  width: 4.213333rem;
  height: 4.213333rem;
  box-shadow: 0 0 0 0.426667rem rgba(255, 255, 255, 0.05), 0 0 0 0.88rem rgba(255, 255, 255, 0.04);
}

.wk-rpg-detail-head::after {
  /* 稿上按 340 宽给的是 right:272 —— 换算成 left:-50，弹窗窄一点也不会漂 */
  left: -1.333333rem;
  top: 1.173333rem;
  width: 3.146667rem;
  height: 3.146667rem;
  box-shadow: 0 0 0 0.32rem rgba(255, 255, 255, 0.05), 0 0 0 0.666667rem rgba(255, 255, 255, 0.04);
}

.wk-rpg-detail-titlerow,
.wk-rpg-detail-sub {
  position: relative;
}

.wk-rpg-detail-titlerow {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 左右两侧同宽 52，标题才能真正居中 */
.wk-rpg-detail-titlerow-side {
  flex: none;
  display: flex;
  align-items: center;
  width: 1.386667rem;
  height: 0.746667rem;
}

.wk-rpg-detail-titlerow-side.is-right {
  justify-content: flex-end;
}

.wk-rpg-detail-title {
  flex: 1 1;
  min-width: 0;
  text-align: center;
  font-size: 0.506667rem;
  font-weight: 700;
  line-height: 0.746667rem;
  color: var(--rpg-gold);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-rpg-detail-sub {
  width: 100%;
  text-align: center;
  font-size: 0.32rem;
  color: #fff;
}

/* 规则 chip（详情弹窗左上角）——普通参与者看「可能亏损」说明的入口之一 */
.wk-rpg-chip {
  padding: 0.106667rem 0.266667rem;
  border: 0;
  border-radius: 0.16rem;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: inherit;
  font-size: 0.32rem;
  line-height: 1.4;
  cursor: pointer;
}

.wk-rpg-chip:active {
  opacity: 0.6;
}

.wk-rpg-detail-sender {
  flex: none;
  min-height: 0.453333rem;
  display: flex;
  align-items: center;
  font-size: 0.32rem;
  color: var(--rpg-t3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- 我的战绩卡 ---- */

.wk-rpg-score {
  flex: none;
  height: 2.933333rem;
  overflow: hidden;
  padding: 0 0.373333rem;
  border: 0;
  border-radius: var(--rpg-radius);
  background: #fff;
  box-shadow: inset 0 0 0 0.026667rem var(--rpg-card-bd);
}

.wk-rpg-score-cols {
  height: 1.92rem;
  display: flex;
  align-items: stretch;
  padding: 0.373333rem 0;
}

.wk-rpg-score-col {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.106667rem;
  margin: 0; /* 同 .wk-rpg-kvs：清掉 dl 默认 margin */
  text-align: center;
}

.wk-rpg-score-col dt {
  margin: 0;
  font-size: 0.32rem;
  color: var(--rpg-t3);
}

.wk-rpg-score-col dd {
  margin: 0;
  width: 100%;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.48rem;
  font-weight: 900;
  font-stretch: condensed;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.15px;
  line-height: 0.586667rem;
  color: #202b3c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-rpg-score-col dd.is-long {
  font-size: 0.4rem;
  letter-spacing: -0.35px;
}

.wk-rpg-score-col dd.is-xlong {
  font-size: 0.346667rem;
  letter-spacing: -0.5px;
}

/* 「等待开奖」是文字不是数字，降一档字号并走等待色 */
.wk-rpg-score-col dd.is-wait {
  font-size: 0.426667rem;
  color: var(--rpg-wait);
}

.wk-rpg-score-col dd.is-muted {
  font-size: 0.426667rem;
  color: var(--rpg-t3);
}

.wk-rpg-score-sep {
  flex: none;
  align-self: center;
  width: 0.026667rem;
  height: 0.8rem;
  background: var(--rpg-line);
}

/* 入账状态 / 下注中说明：卡片底部一行，前置状态点 */
.wk-rpg-score-foot {
  height: 0.986667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  padding: 0;
  border-top: 0.026667rem solid var(--rpg-line);
  font-size: 0.32rem;
  line-height: 0.453333rem;
  text-align: center;
  color: var(--rpg-t2);
}

.wk-rpg-score-foot::before {
  content: "";
  flex: none;
  width: 0.128rem;
  height: 0.128rem;
  margin-top: 0;
  border-radius: 0.064rem;
  background: #56c986;
  box-shadow: 0 0 0 0.053333rem rgba(86, 201, 134, 0.13);
}

/* 未入账 / 下注中：等待色 */
.wk-rpg-score-foot.is-wait::before {
  background: var(--rpg-wait);
  box-shadow: 0 0 0 0.053333rem rgba(201, 138, 37, 0.13);
}

.wk-rpg-score-foot.is-plain::before {
  display: none;
}

/* ---- 参与名单 ---- */

.wk-rpg-listhead {
  flex: none;
  height: 0.56rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.266667rem;
}

.wk-rpg-listhead-title {
  font-size: 0.4rem;
  font-weight: 500;
  color: #202b3c;
}

.wk-rpg-listhead-count {
  font-size: 0.32rem;
  color: var(--rpg-t3);
}

.wk-rpg-list {
  flex: none;
  height: 7.44rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0.373333rem;
  border: 0;
  border-radius: var(--rpg-radius);
  background: #fff;
  box-shadow: inset 0 0 0 0.026667rem var(--rpg-card-bd);
}

.wk-rpg-list-row {
  flex: none;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.05fr);
  grid-column-gap: 0.106667rem;
  -moz-column-gap: 0.106667rem;
       column-gap: 0.106667rem;
  align-items: center;
  border-bottom: 0.026667rem solid var(--rpg-line);
}

.wk-rpg-list-row:last-child {
  border-bottom: 0;
}

.wk-rpg-list-row.is-head {
  height: 1.04rem;
  padding: 0;
  font-size: 0.32rem;
  color: var(--rpg-t3);
}

.wk-rpg-list-row.is-item {
  height: 1.066667rem;
  padding: 0;
  font-size: 0.346667rem;
}

.wk-rpg-list-viewport {
  height: 6.4rem;
  flex: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.wk-rpg-list-viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.wk-rpg-list-loading {
  height: 1.066667rem;
  display: grid;
  place-items: center;
  color: var(--rpg-t3);
  font-size: 0.32rem;
}

.wk-rpg-list-user {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-rpg-list-row.is-item .wk-rpg-list-user {
  font-size: 0.373333rem;
  color: #202b3c;
}

.wk-rpg-list-bet,
.wk-rpg-list-win,
.wk-rpg-list-profit {
  width: auto;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-rpg-list-row.is-item .wk-rpg-list-bet,
.wk-rpg-list-row.is-item .wk-rpg-list-win,
.wk-rpg-list-row.is-item .wk-rpg-list-profit {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.346667rem;
  font-weight: 700;
  font-stretch: condensed;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.15px;
}

.wk-rpg-list-row.is-item .is-long {
  font-size: 0.32rem;
  letter-spacing: -0.35px;
}

.wk-rpg-list-row.is-item .is-xlong {
  font-size: 0.293333rem;
  letter-spacing: -0.5px;
}

.wk-rpg-list-row.is-item .wk-rpg-list-bet {
  color: var(--rpg-t3);
}

.wk-rpg-list-row.is-item .wk-rpg-list-win {
  color: var(--rpg-t2);
}

.wk-rpg-list-row.is-item .wk-rpg-list-profit {
  font-weight: 700;
}

/* 盈亏：正涨色、负跌色、**0 走中性**（并进涨色会把「打平」显示成「赚了」） */
.wk-rpg-up {
  color: var(--rpg-profit-up);
}

.wk-rpg-down {
  color: var(--rpg-down);
}

.wk-rpg-flat {
  color: #202b3c;
}

/* 战绩区 dd 的基础色选择器更具体，语义色必须同级覆盖。 */
.wk-rpg-score-col dd.wk-rpg-up {
  color: var(--rpg-profit-up);
}

.wk-rpg-score-col dd.wk-rpg-down {
  color: var(--rpg-down);
}

.wk-rpg-score-col dd.wk-rpg-flat {
  color: #202b3c;
}

/* 名单空态 / 未开奖占位 */
.wk-rpg-list-empty {
  flex: none;
  height: 7.44rem;
  display: grid;
  place-items: center;
  padding: 0 0.373333rem;
  border: 0;
  border-radius: var(--rpg-radius);
  background: #fff;
  box-shadow: inset 0 0 0 0.026667rem var(--rpg-card-bd);
  font-size: 0.32rem;
  text-align: center;
  color: var(--rpg-t2);
}

/* 未开奖那条占位文案上下更紧一点（设计稿 py 30 vs 空态 34） */
.wk-rpg-list-empty.is-pending {
  padding: 0 0.373333rem;
}

/* ---- 加载骨架 ---- */

.wk-rpg-skel {
  border-radius: 0.106667rem;
  background: var(--rpg-line);
}

.wk-rpg-skel.is-block {
  border-radius: var(--rpg-radius);
}

/* 头部里的骨架条压在红底上，用白色半透明 */
.wk-rpg-skel.on-brand {
  background: rgba(255, 255, 255, 0.3);
}

.wk-rpg-skel.on-brand.is-sub {
  background: rgba(255, 255, 255, 0.22);
}

/* ============================================================================
 * 五、共用弹层（二次确认 / 发起失败 / 加载失败）
 * z-index 高于弹窗遮罩：详情弹窗的加载失败弹层要压在弹窗之上。
 * ========================================================================== */

.wk-rpg-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.64rem;
  background: rgba(0, 0, 0, 0.45);
  font-family: var(--rpg-font);
}

.wk-rpg-dialog {
  width: 7.466667rem;
  max-width: 100%;
  padding: 0.64rem 0.533333rem 0.426667rem;
  border-radius: var(--rpg-radius-lg);
  background: #fff;
}

/* 双按钮的确认弹层比单按钮宽一档（设计稿 304 vs 280） */
.wk-rpg-dialog.is-wide {
  width: 8.106667rem;
}

.wk-rpg-dialog-title {
  font-size: 0.426667rem;
  font-weight: 500;
  line-height: 0.64rem;
  text-align: center;
  color: var(--rpg-t1);
}

.wk-rpg-dialog-desc {
  font-size: 0.32rem;
  line-height: 0.533333rem;
  text-align: center;
  color: var(--rpg-t3);
}

.wk-rpg-dialog-btns {
  display: flex;
  gap: 0.266667rem;
  padding-top: 0.533333rem;
}

.wk-rpg-dialog-btn {
  flex: 1 1;
  min-width: 0;
  padding: 0.293333rem 0;
  border: 0;
  border-radius: 0.266667rem;
  background: var(--rpg-btn-grad);
  color: #fff;
  font-family: inherit;
  font-size: 0.373333rem;
  font-weight: 500;
  cursor: pointer;
}

.wk-rpg-dialog-btn:active {
  opacity: 0.6;
}

.wk-rpg-dialog-btn.is-ghost {
  background: #f2f4f7;
  color: var(--rpg-t2);
}

.wk-luckybag-create-page {
  --luckybag-create-btn-grad: linear-gradient(90deg,#ffc34c,#f68b23);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #faf6ef;
  color: #222;
  font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", -apple-system, sans-serif;
}

.wk-luckybag-create-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(2.586667rem + env(safe-area-inset-bottom));
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.wk-luckybag-create-hero {
  height: 3.253333rem;
  padding: 0.586667rem 0.613333rem 0;
  box-sizing: border-box;
  background-color: #f7c766;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.wk-luckybag-create-hero-en {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  color: #ed9133;
  font-size: 0.32rem;
  font-weight: 400;
  letter-spacing: 0.0448rem;
  line-height: 0.453333rem;
}

.wk-luckybag-create-hero-en::before {
  width: 0.453333rem;
  height: 0.026667rem;
  flex: 0 0 0.453333rem;
  background: #ed9133;
  content: "";
}

.wk-luckybag-create-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
  margin-top: 0.106667rem;
}

.wk-luckybag-create-hero-main > strong {
  min-width: 0;
  overflow: hidden;
  color: #814100;
  font-size: 0.746667rem;
  font-weight: 600;
  letter-spacing: .98px;
  line-height: 1.066667rem;
  text-overflow: ellipsis;
  text-shadow: 0 0.053333rem 0.4rem rgba(255,255,255,.3);
  white-space: nowrap;
}

.wk-luckybag-create-hero-main > span {
  height: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.186667rem;
  flex: 0 0 auto;
  padding: 0 0.266667rem;
  box-sizing: border-box;
  border: 0.026667rem solid #f8c56a;
  border-radius: 26.64rem;
  background: rgba(99,13,19,.2);
  color: #fff8ed;
  font-size: 0.32rem;
  font-weight: 400;
  white-space: nowrap;
}

.wk-luckybag-create-hero-main > span i {
  width: 0.186667rem;
  height: 0.186667rem;
  display: block;
  border-radius: 50%;
  background: #62e497;
  box-shadow: 0 0 0 0.08rem rgba(98,228,151,.16);
}

.wk-luckybag-create-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.426667rem;
  margin-top: -0.8rem;
  padding: 0 0.426667rem 0.64rem;
}

.wk-luckybag-create-summary {
  height: 1.36rem;
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  padding: 0 0.373333rem;
  box-sizing: border-box;
  border: 0.026667rem solid #f4deb0;
  border-radius: 0.32rem;
  background: #fffaf0;
}

.wk-luckybag-create-summary-icon {
  width: 0.746667rem;
  height: 0.746667rem;
  flex: 0 0 0.746667rem;
  display: grid;
  place-items: center;
  border-radius: 0.213333rem;
  background: #ffecc0;
  color: #e6801a;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 0.453333rem;
  line-height: 1;
}

.wk-luckybag-create-summary > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.133333rem;
}

.wk-luckybag-create-summary b {
  color: #60430e;
  font-size: 0.346667rem;
  font-weight: 600;
  line-height: 0.426667rem;
}

.wk-luckybag-create-summary span {
  overflow: hidden;
  color: #958978;
  font-size: 0.32rem;
  font-weight: 400;
  line-height: 0.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-luckybag-create-card,
.wk-luckybag-create-title-field,
.wk-luckybag-create-countdown-card {
  overflow: hidden;
  box-sizing: border-box;
  border: 0.026667rem solid #ffe0d6;
  border-radius: 0.373333rem;
  background: #fff;
  box-shadow: 0 0.106667rem 0.533333rem rgba(160,58,39,.08);
}

.wk-luckybag-create-title-field,
.wk-luckybag-create-countdown-card { border-color: #fbe5c7; }

.wk-luckybag-create-row {
  height: 1.386667rem;
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  padding: 0 0.373333rem;
  box-sizing: border-box;
}

.wk-luckybag-create-row > b {
  width: 1.973333rem;
  flex: 0 0 1.973333rem;
  color: #333;
  font-size: 0.373333rem;
  font-weight: 500;
}

.wk-luckybag-create-row label {
  min-width: 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.266667rem;
}

.wk-luckybag-create-row input,
.wk-luckybag-create-countdown-card input,
.wk-luckybag-create-title-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1f2937;
  font-family: inherit;
  font-size: 0.426667rem;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-luckybag-create-row input { width: 100%; text-align: right; }

.wk-luckybag-create-row input::-moz-placeholder, .wk-luckybag-create-countdown-card input::-moz-placeholder, .wk-luckybag-create-title-field input::-moz-placeholder {
  color: #999;
  font-weight: 400;
  opacity: 1;
}

.wk-luckybag-create-row input::placeholder,
.wk-luckybag-create-countdown-card input::placeholder,
.wk-luckybag-create-title-field input::placeholder {
  color: #999;
  font-weight: 400;
  opacity: 1;
}

.wk-luckybag-create-row em,
.wk-luckybag-create-countdown-card em {
  flex: 0 0 auto;
  color: #333;
  font-size: 0.373333rem;
  font-style: normal;
  font-weight: 500;
}

.wk-luckybag-create-divider { height: 0.026667rem; margin-left: 0.373333rem; background: #f1efed; }
.wk-luckybag-create-section { display: flex; flex-direction: column; gap: 0.213333rem; }

.wk-luckybag-create-section-head,
.wk-luckybag-create-bonus-head {
  min-height: 0.586667rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.32rem;
}

.wk-luckybag-create-section-head > b,
.wk-luckybag-create-bonus-head > b { color: #222; font-size: 0.426667rem; font-weight: 600; }
.wk-luckybag-create-section-head > span { color: #999; font-size: 0.32rem; font-weight: 400; }

.wk-luckybag-create-title-field { height: 1.28rem; display: flex; align-items: center; padding: 0 0.373333rem; }
.wk-luckybag-create-title-field input { width: 100%; font-weight: 600; text-align: left; }

.wk-luckybag-create-countdown-card {
  min-height: 1.92rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.213333rem;
  padding: 0.266667rem 0.373333rem;
}

.wk-luckybag-create-countdown-card > b { color: #999; font-size: 0.346667rem; font-weight: 600; }
.wk-luckybag-create-countdown-card label { display: flex; align-items: center; gap: 0.16rem; }
.wk-luckybag-create-countdown-card input { flex: 1 1; text-align: left; }

.wk-luckybag-create-bonus { gap: 0.266667rem; }
.wk-luckybag-create-bonus-head { min-height: 0.64rem; }

.wk-luckybag-create-bonus-head > span {
  min-width: 0;
  max-width: 72%;
  display: flex;
  align-items: center;
  gap: 0.133333rem;
  color: #999;
  font-size: 0.32rem;
  white-space: nowrap;
}

.wk-luckybag-create-bonus-head > span i { width: 0.186667rem; height: 0.186667rem; flex: 0 0 0.186667rem; border-radius: 50%; background: #40d07a; }
.wk-luckybag-create-bonus-head > span strong { min-width:0; overflow:hidden; color:#222; font-size:0.373333rem; font-weight:600; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }
.wk-luckybag-create-bonus-head > span strong.is-long { font-size:0.32rem; }
.wk-luckybag-create-bonus-head > span strong.is-xlong { font-size:0.266667rem; letter-spacing:-.2px; }
.wk-luckybag-create-subtitle { padding: 0 0.053333rem; color: #222; font-size: 0.373333rem; font-weight: 600; }

.wk-luckybag-create-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  color: #999;
  font-size: 0.32rem;
  line-height: 1.45;
}

.wk-luckybag-create-tip i {
  width: 0.346667rem;
  height: 0.346667rem;
  flex: 0 0 0.346667rem;
  display: grid;
  place-items: center;
  margin-top: 0.026667rem;
  border: 0.026667rem solid #f58f24;
  border-radius: 50%;
  color: #f58f24;
  font: 0.24rem/1 serif;
}

.wk-luckybag-create-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(1.946667rem + env(safe-area-inset-bottom));
  min-height: 1.946667rem;
  display: flex;
  align-items: flex-start;
  gap: 0.346667rem;
  padding: 0.293333rem 0.426667rem calc(0.293333rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
  border-top: 0.026667rem solid #eee0db;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -0.186667rem 1.066667rem rgba(84,32,22,.08);
}

.wk-luckybag-create-footer > div {
  min-width: 0;
  min-height: 1.36rem;
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.wk-luckybag-create-footer span { color: #999; font-size: 0.32rem; }

.wk-luckybag-create-footer strong {
  overflow: hidden;
  color: #222;
  font-family: "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.746667rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 0.906667rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-luckybag-create-footer strong.is-long { font-size:0.613333rem; }
.wk-luckybag-create-footer strong.is-xlong { font-size:0.48rem; letter-spacing:-.3px; }

.wk-luckybag-create-footer button {
  width: 4.533333rem;
  height: 1.28rem;
  flex: 0 0 4.533333rem;
  border: 0;
  border-radius: 0.32rem;
  background: var(--luckybag-create-btn-grad);
  color: #fff;
  font-size: 0.426667rem;
  font-weight: 700;
  cursor: pointer;
}

.wk-luckybag-create-footer button:disabled { background: #ccc; cursor: default; }

/* 复用红包游戏的确认布局，但确定按钮沿用福袋黄色主题；取消按钮保持灰色。 */
.wk-luckybag-create-page .wk-rpg-dialog-mask {
  --rpg-btn-grad: var(--luckybag-create-btn-grad);
}

.wk-luckybag-create-page.is-keyboard-open .wk-luckybag-create-scroll {
  padding-bottom: 2.586667rem;
}

.wk-luckybag-create-page.is-keyboard-open .wk-luckybag-create-footer {
  height: 1.946667rem;
  padding-bottom: 0.293333rem;
}

@media (max-width: 360px) {
  .wk-luckybag-create-hero { padding-right: 0.48rem; padding-left: 0.48rem; }
  .wk-luckybag-create-hero-main > strong { font-size: 0.666667rem; }
  .wk-luckybag-create-hero-main > span { padding: 0 0.213333rem; font-size: 0.293333rem; }
  .wk-luckybag-create-footer button { width: 4.053333rem; flex-basis: 4.053333rem; }
}

/*
 * 快捷短语面板（覆盖式底部浮出）。
 * 视觉来源：Figma「10-2快捷聊天」node 3322-129930（面板 375x417，约屏高一半）。
 * 行为依据：PRD 09.群短语功能/04.客户端短语面板 §三。
 *
 * ★ 本文件不再有「内联撑高抽屉」那套（order / height 变量 / translateY）——
 *   面板已改为经 ModalPortal 传送到会话层的浮层，不占输入区的 flex 流。
 */

/* 遮罩：铺满 .wk-modal-layer（它自身是 fixed inset:0），点击关闭 */
.wk-accessorydrawer-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(9, 20, 43, 0.45);
    animation: wk-accessorydrawer-fade 180ms ease-out;
}

@keyframes wk-accessorydrawer-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wk-accessorydrawer-mask.is-closing {
    pointer-events: none;
    animation: wk-accessorydrawer-fade-out 200ms ease-in forwards;
}

@keyframes wk-accessorydrawer-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.wk-accessorydrawer-panel {
    width: 100%;
    /* 7 条 × 39px + 6 个 8px 间距，再加标题、提示与上下留白。 */
    max-height: min(calc(11.066667rem + env(safe-area-inset-bottom, 0px)), calc(100vh - 0.426667rem));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.426667rem 0.426667rem 0.32rem;
    /* 安全区：稿上底部那条 Home Indicator 的位置 */
    padding-bottom: calc(0.32rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    /* 稿上是 28.846px @375 宽，即 30px */
    border-radius: 0.8rem 0.8rem 0 0;
    box-shadow: 0 -0.266667rem 0.533333rem rgba(22, 48, 88, 0.12);
    animation: wk-accessorydrawer-rise 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wk-accessorydrawer-rise {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.wk-accessorydrawer-mask.is-closing .wk-accessorydrawer-panel {
    animation: wk-accessorydrawer-fall 240ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes wk-accessorydrawer-fall {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 102%, 0); }
}

body[theme-mode=dark] .wk-accessorydrawer-panel {
    background: var(--wk-color-secondary);
}

/* header：标题相对整个面板居中，关闭按钮独立固定在右侧 */
.wk-accessorydrawer-header {
    position: relative;
    min-height: 0.746667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.266667rem;
}

.wk-accessorydrawer-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.wk-accessorydrawer-title {
    font-size: 0.426667rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.22px;
    color: #07183f;
}

body[theme-mode=dark] .wk-accessorydrawer-title {
    color: var(--wk-text-item);
}

.wk-accessorydrawer-close {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.746667rem;
    height: 0.746667rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #07183f;
    cursor: pointer;
    flex-shrink: 0;
    transform: translateY(-50%);
}

.wk-accessorydrawer-close:hover {
    background: #f0f1f3;
}

body[theme-mode=dark] .wk-accessorydrawer-close {
    color: var(--wk-text-item);
}

body[theme-mode=dark] .wk-accessorydrawer-close:hover {
    background: var(--wk-color-secondary-2);
}

/* 列表：面板内唯一的滚动层（flex:1 + min-height:0 才能真正让它滚而不是撑破面板） */
.wk-accessorydrawer-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 8.56rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.213333rem;
}

/* 列表项：稿上是「白底 + 0.8px 淡边框 + 10px 圆角」的通栏行 */
.wk-accessorydrawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.213333rem;
    width: 100%;
    min-height: 1.04rem;
    flex-shrink: 0;
    text-align: left;
    padding: 0.16rem 0.32rem;
    border: 0.8px solid #e1e5ee;
    border-radius: 0.266667rem;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 0.32rem;
    font-weight: 500;
    color: #142042;
    box-sizing: border-box;
    transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}

.wk-accessorydrawer-item:hover {
    border-color: #cdd6e6;
}

/*
 * 按压态 = 稿上第一行那个「选中」样式（蓝渐变底 + 蓝边 + 蓝字 + 右侧对勾）。
 *
 * ⚠️ 刻意偏离稿子一处：稿上该行字号 14px/Semibold、其余 12px/Medium。
 *    这里**只换颜色与字重，不换字号** —— 一步交互下这个态只在手指按住那一瞬出现，
 *    字号 12→14 会让整行高度跳一下，比不还原更难受。
 */
.wk-accessorydrawer-item:active {
    background: linear-gradient(to right, #f2f7ff, #f8faff);
    border-color: #a8c7ff;
    color: #1671f9;
    font-weight: 600;
}

body[theme-mode=dark] .wk-accessorydrawer-item {
    background: var(--wk-color-secondary-2);
    border-color: transparent;
    color: var(--wk-text-item);
}

.wk-accessorydrawer-item-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 对勾：常驻 DOM，只有按压态显形 */
.wk-accessorydrawer-item-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.48rem;
    height: 0.48rem;
    flex-shrink: 0;
    color: #1671f9;
    opacity: 0;
    transition: opacity 120ms linear;
}

.wk-accessorydrawer-item:active .wk-accessorydrawer-item-check {
    opacity: 1;
}

/* 「点击发送」——说明文案，不是按钮 */
.wk-accessorydrawer-hint {
    flex-shrink: 0;
    margin-top: 0.266667rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    color: #9aa5ba;
}

.wk-accessorydrawer-empty {
    padding: 0.853333rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.346667rem;
    color: #8a97aa;
}

/* 群表情包面板。
   规格来自 Figma「10-01自定义表情包」6 屏实测（B 表 #6）：
     网格 50×50、5 列、内边距 16、列距 23；底部系列切换栏 48 高、tab 36×36、封面缩略 26×26、横向滚动

   ★★ 形态：撑高，不是浮层（设计 §2.2）★★
   照 Components/AccessoryDrawer/index.css 与 Components/GroupChatActions/index.css 的同一套机制：
   自身高度 0 → var(--wk-conversation-chatplus-panel)，占独立 flex order，**不是 position:fixed**。
   order 取 5：3 是「+」面板（chatplus 抽屉）、4 是短语抽屉（AccessoryDrawer），互不占位。

   ★ 高度**读共享变量而不是硬编 197px**（设计 §2.3 的 DOM 草图里写的 197 是估算值）：
     footer 的撑高是 `--wk-conversation-footer = calc(54px + var(--wk-conversation-chatplus-panel))`
     （Conversation/index.css），面板自己定一个不一样的高度就会要么溢出、要么留一条空缝。
     AccessoryDrawer 的 CSS 顶部注释也明确论证过「两个面板必须用同一个变量而不是两份可能失步的常量」。
     实际落地即 214px：网格区拿到 214-48=166px（可见约 2 行 50px 网格 + 部分第三行，纵向滚动）。 */

.wk-stickerpanel {
    order: 5;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(100% + 0.64rem);
    width: calc(100% + 0.64rem);
    height: 0;
    margin: 0 -0.32rem;
    box-sizing: border-box;
    background: #F5F6F8;
    overflow: hidden;
    pointer-events: none;
    transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1);
    contain: paint;
    will-change: height;
}

.wk-stickerpanel-open {
    height: 5.706667rem;
    height: var(--wk-conversation-chatplus-panel, 214px);
    /* 抵消父级底部的 8px 内边距，让面板贴底。 */
    margin-bottom: -0.213333rem;
    pointer-events: auto;
}

.wk-stickerpanel-body {
    width: 100%;
    height: 5.706667rem;
    height: var(--wk-conversation-chatplus-panel, 214px);
    box-sizing: border-box;
    border-top: 0.026667rem solid #E4E6EB;
    background: #F5F6F8;
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 100%, 0);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.wk-stickerpanel-open .wk-stickerpanel-body {
    transform: translate3d(0, 0, 0);
}

body[theme-mode=dark] .wk-stickerpanel,
body[theme-mode=dark] .wk-stickerpanel-body {
    background: var(--wk-color-secondary);
}

.wk-stickerpanel-content {
    flex: 1 1;
    min-height: 0; /* flex 子项默认 min-height:auto，不写这条内容会把切换栏顶出面板 */
    overflow-x: hidden;
    overflow-y: auto;
    animation: wkStickerSeriesEnter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 只过渡内容，不改变面板高度；切换系列时由新的内容容器重新播放。 */
@keyframes wkStickerSeriesEnter {
    from {
        opacity: 0.4;
        transform: translate3d(0, 0.16rem, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.wk-stickerpanel-grid {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    list-style: none;
    margin: 0;
    padding: 0.426667rem;
    box-sizing: border-box;
    display: grid;
    /* ★ 固定 5 列而不是 auto-fill：面板宽度会随窗口变，auto-fill 会在宽度跨过阈值时改变列数，
       表情位置跟着跳。5 列是 Figma 定稿口径。 */
    grid-template-columns: repeat(5, 1.333333rem);
    grid-column-gap: 0.613333rem;
    -moz-column-gap: 0.613333rem;
         column-gap: 0.613333rem;
    grid-row-gap: 0.426667rem;
    row-gap: 0.426667rem;
    justify-content: center;
}

.wk-stickerpanel-cell {
    width: 1.333333rem;
    height: 1.333333rem;
}

.wk-stickerpanel-item {
    width: 1.333333rem;
    height: 1.333333rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: block;
}

.wk-stickerpanel-item img {
    width: 1.333333rem;
    height: 1.333333rem;
    /* contain：素材长宽比不完全一致（实测有 240×240 也有 200×180），cover 会裁掉边缘内容 */
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    -webkit-user-drag: none;
}

/* 图片尚未就绪时白底占位；成功后透明，保持原素材的透明边缘。 */
.wk-stickerpanel-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0.16rem;
}

.wk-stickerpanel-media[data-state="loading"],
.wk-stickerpanel-media[data-state="error"] {
    background: #fff;
}

.wk-stickerpanel-media[data-state="loading"] img,
.wk-stickerpanel-media[data-state="error"] img {
    visibility: hidden;
}

.wk-stickerpanel-loading,
.wk-stickerpanel-image-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #9aa5b5;
}

.wk-stickerpanel-loading svg,
.wk-stickerpanel-image-error svg {
    width: 0.533333rem;
    height: 0.533333rem;
}

.wk-stickerpanel-loading-tick {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.25;
    animation: wkStickerLoadingTick 1.2s linear infinite;
}

.wk-stickerpanel-image-error svg {
    stroke: currentColor;
    stroke-width: 1.5;
}

@keyframes wkStickerLoadingTick {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
}

.wk-stickerpanel-skeleton {
    position: relative;
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 0.16rem;
    background: #fff;
}

/* 空态 / 失败态文案 */
.wk-stickerpanel-tip {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.213333rem;
    font-size: 0.346667rem;
    color: #8a97aa;
}

.wk-stickerpanel-retry {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.346667rem;
    cursor: pointer;
    color: #1890ff;
    color: var(--wk-color-primary, #1890ff);
}

/* 底部系列切换栏 */
.wk-stickerpanel-tabs {
    width: 100%;
    height: 1.28rem;
    background: #EDEFF3;
    flex-shrink: 0;
    padding-left: 0.32rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.213333rem;
    overflow-x: auto;
    overflow-y: hidden;
}

body[theme-mode=dark] .wk-stickerpanel-tabs {
    background: var(--wk-color-secondary);
}

.wk-stickerpanel-tab {
    width: 0.96rem;
    height: 0.96rem;
    padding: 0;
    border: 0;
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.16rem;
    cursor: pointer;
    transition: background-color 180ms ease, border-radius 180ms ease;
}

.wk-stickerpanel-tab img {
    width: 0.693333rem;
    height: 0.693333rem;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-user-drag: none;
}

.wk-stickerpanel-tab .wk-stickerpanel-media {
    width: 0.693333rem;
    height: 0.693333rem;
}

.wk-stickerpanel-tab .wk-stickerpanel-loading svg,
.wk-stickerpanel-tab .wk-stickerpanel-image-error svg {
    width: 0.426667rem;
    height: 0.426667rem;
}

.wk-stickerpanel-tab-selected {
    background-color: #fff;
    border-radius: 0.213333rem;
}

body[theme-mode=dark] .wk-stickerpanel-tab-selected {
    background-color: var(--wk-color-secondary-2);
}

@media (prefers-reduced-motion: reduce) {
    .wk-stickerpanel-content {
        animation: none;
    }

    .wk-stickerpanel-tab {
        transition: none;
    }

    .wk-stickerpanel-loading-tick {
        animation: none;
    }
}

/* 工具栏笑脸按钮（面板本体不在这里，见 index.tsx 的 StickerToolbar 注释） */
.wk-stickertoolbar {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0.133333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}



.wk-contextmenus {
    position: fixed;
    top: 2.666667rem;
    left: 0px;
    background-color: white;
    z-index: 99;

    box-shadow: 0 0.106667rem 0.213333rem 0.053333rem rgba(114,114,114,0.25098);
    border-radius: 0.32rem;
    transform: scale(0.5);
    transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1),transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important;

    visibility: hidden;
    padding: 0.266667rem 0px;

    min-width: 2.133333rem;
}

body[theme-mode=dark]  .wk-contextmenus {
    background-color: var(--wk-color-secondary);
    box-shadow: 0 0.106667rem 0.213333rem 0.053333rem rgba(0,0,0,0.6);
}

.wk-contextmenus-open {
    transform: scale(1);
    visibility: visible;
}

.wk-contextmenus ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.wk-contextmenus li {
    height: 1.066667rem;
    display: flex;
    align-items: center;
    gap: 0.213333rem;
    padding: 0.266667rem;
    cursor: pointer;
}

body[theme-mode=dark]  .wk-contextmenus li {
    color: white;
}

.wk-contextmenus li:hover {
    background-color: #eee;
}

body[theme-mode=dark] .wk-contextmenus li:hover {
    background-color: var(--wk-color-secondary-2);
}

.wk-contextmenus-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    visibility: hidden;
    z-index: 98;
}

.wk-contextmenus-message {
    z-index: 103;
    min-width: 4.4rem;
    padding: 0.373333rem;
    border-radius: 0.586667rem;
    border: 0.026667rem solid rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 0.48rem 1.2rem rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(0.533333rem) saturate(180%);
    -webkit-backdrop-filter: blur(0.533333rem) saturate(180%);
    transform: scale(0);
    transition: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.wk-contextmenus-message.wk-contextmenus-open { transform: scale(1); }

.wk-contextmenus-message ul {
    width: 100%;
}

.wk-contextmenus-message li {
    height: 1.173333rem;
    min-width: 3.146667rem;
    padding: 0 0.32rem;
    border-radius: 0.32rem;
    color: #162033;
    font-size: 0.426667rem;
    line-height: 1;
}

.wk-contextmenus-message li:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

.wk-contextmenus-message .wk-contextmenus-item-icon {
    width: 0.586667rem;
    height: 0.586667rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 0.586667rem;
    color: #162033;
    font-size: 0.533333rem;
}

.wk-contextmenus-message-mask {
    z-index: 98;
    pointer-events: auto;
    touch-action: none;
    overscroll-behavior: none;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(0.373333rem);
    -webkit-backdrop-filter: blur(0.373333rem);
}

/* 虚拟滚动 / iOS 滚动合成层内的 z-index 无法越过毛玻璃遮罩。
   仅把选中消息的静态展示放在遮罩之上，其余公屏仍保持模糊。 */
.wk-contextmenus-message-preview {
    position: fixed;
    z-index: 102;
    pointer-events: none;
}

body[theme-mode=dark] .wk-contextmenus-message {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(38, 45, 58, 0.72);
}

body[theme-mode=dark] .wk-contextmenus-message li,
body[theme-mode=dark] .wk-contextmenus-message .wk-contextmenus-item-icon {
    color: #fff;
}

body[theme-mode=dark] .wk-contextmenus-message li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.wk-avatar {
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 40%;
}
:root {
    --wk-width-max-message: 7.36rem;
    --wk-message-edge-gap: 0.373333rem;
    --wk-business-result-card-width: 7.253333rem;
}

.wk-message-base {
    width: 100%;
    height: 100%;
    display: flex;
    margin-bottom: 0;
}

/* 消息复制统一走长按菜单，禁止浏览器自身的文字选择与 iOS 系统长按菜单。 */
.wk-message-base,
.wk-message-base * {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-touch-callout: none;
}

.wk-message-base-context-selected {
    position: relative;
    z-index: 102;
}

.wk-message-base-check-open {

}

.wk-message-base-send, .wk-message-base-recv {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}


.wk-message-base-send {
    align-items: flex-end;
    margin-right: 0.373333rem;
    margin-right: var(--wk-message-edge-gap);
}

.wk-message-base-recv {
    margin-left: 0.373333rem;
    margin-left: var(--wk-message-edge-gap);
    transform: translate3d(0, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-message-base-check-open .wk-message-base-recv {
    transform: translate3d(0.8rem, 0, 0);
}

.senderName {
    color: rgba(9,30,66,.74);
    font-size: 0.32rem;
    font-weight: 400;
    /* text-transform: capitalize; */
    padding-bottom: 0.026667rem;
}

.senderAvatar {
    width: 1.066667rem;
    height: 1.066667rem;
    position: absolute;
    left: 0;
    top: 0;
}

/* 群聊首条还包含发送者名称行，头像应和整条消息顶部对齐，而不是只对齐气泡。 */
.senderAvatar-with-header {
    top: -0.693333rem;
}

.senderAvatar img {
    display: block;
    width: 1.066667rem;
    height: 1.066667rem;
    border-radius: 0.16rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-message-base-box {
    display: flex;
    align-items: center;
    position: relative;
}

.wk-message-base-send .wk-message-base-box {
    flex-direction: row-reverse;
    justify-content: center;
    margin-left: 0px;
    margin-right: 0;
}

.wk-message-base-send .senderName {
    padding-right: 1.093333rem;
}

.wk-message-base-recv .senderName {
    padding-left: 1.093333rem;
}

.wk-message-base-send .senderAvatar {
    display: none;
    text-align: center;
}

.wk-message-base-bubble-box {
    display: flex;
    position: relative;
}

.wk-message-base-bubble-box.send {
    padding-right: 0.235093rem;
}

.wk-message-media-loading {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.213333rem);
    width: 0.48rem;
    height: 0.48rem;
    box-sizing: border-box;
    border: 0.053333rem solid rgba(148, 163, 184, 0.3);
    border-top-color: #7f8da3;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: wk-message-media-loading-spin 0.72s linear infinite;
    pointer-events: none;
}

@keyframes wk-message-media-loading-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.wk-message-base-bubble-box.recv {
    margin-left: 1.28rem;
}

.wk-message-base-bubble {
    color: rgba(9,30,66,.87);
    display: flex;
    /* margin-bottom: 4px; */
    padding: 0.213333rem 0.32rem;
    position: relative;
    word-wrap: break-word;
    max-width: 7.36rem;
    max-width: var(--wk-width-max-message);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0.026667rem 0.053333rem rgba(55, 65, 81, 0.08);
    font-size: 0.373333rem;
}

.wk-message-base-bubble-box.hide .wk-message-base-bubble {
    padding: 0px;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
}

body[theme-mode=dark] .wk-message-base-bubble {
    box-shadow: none;
}

.wk-message-base-bubble-box.send .wk-message-base-bubble {
    background-color: #3f7cff ;
    border-radius: 0.32rem 0.32rem 0 0.32rem;
    color: white;
    box-shadow: none;
}

.wk-message-base-bubble-box.recv .wk-message-base-bubble {
    border-radius: 0 0.32rem 0.32rem 0.32rem;
    background-color: white ;
    color: #1f2937;
}

body[theme-mode=dark] .wk-message-base-bubble-box.recv .wk-message-base-bubble  {
    color: white;
}

body[theme-mode=dark] .wk-message-base-bubble-box.recv .wk-message-base-bubble {
    background-color: var(--wk-color-secondary);
}

/* 普通消息始终只保留一个方向直角，不再按首条/中间/末条改变圆角。 */
.wk-message-base-bubble-box.textBubble.send .wk-message-base-bubble,
.wk-message-base-bubble-box.voiceBubble.send .wk-message-base-bubble {
    border-radius: 0.32rem 0.32rem 0 0.32rem;
}

.wk-message-base-bubble-box.textBubble.recv .wk-message-base-bubble,
.wk-message-base-bubble-box.voiceBubble.recv .wk-message-base-bubble {
    border-radius: 0 0.32rem 0.32rem 0.32rem;
}

.wk-message-base-bubble-box.hide .wk-message-base-bubble {
    background-color: transparent !important;
    box-shadow: none;
}


.svgAppendix {
    display: none !important;
    overflow: hidden;
    position: absolute;
    width: 0.24rem;
    height: 0.48rem;
    font-size: 0.426667rem !important;
    bottom: -0.026667rem;
}


.wk-message-base-bubble-box.send .svgAppendix {
    right: 0;
}

.wk-message-base-bubble-box.recv .svgAppendix {
    left: -0.221867rem;
}

.wk-message-base-bubble-box.send .svgAppendix .corner {
    fill: #3f7cff;
}

.wk-message-base-bubble-box.recv .svgAppendix .corner {
    fill: white;
}

.wk-message-base-context-selected .wk-message-base-bubble {
    /* 高亮描边不能参与盒子尺寸计算，否则长按弹出菜单时会触发文字重新换行。 */
    outline: 0.026667rem solid rgba(255, 255, 255, 0.48);
    outline-offset: -0.026667rem;
    box-shadow: 0 0.373333rem 0.853333rem rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(0.48rem) saturate(170%);
    -webkit-backdrop-filter: blur(0.48rem) saturate(170%);
}

.wk-message-base-context-selected .wk-message-base-bubble-box.send .wk-message-base-bubble {
    background: #3f7cff !important;
}

.wk-message-base-context-selected .wk-message-base-bubble-box.recv .wk-message-base-bubble {
    background: #fff !important;
}

.wk-message-base-context-selected .wk-message-base-bubble-box.send .svgAppendix .corner {
    fill: #3f7cff;
}

.wk-message-base-context-selected .wk-message-base-bubble-box.recv .svgAppendix .corner {
    fill: #fff;
}


body[theme-mode=dark] .wk-message-base-bubble-box.recv .svgAppendix .corner  {
    fill: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-message-base-context-selected .wk-message-base-bubble-box.recv .wk-message-base-bubble {
    background: var(--wk-color-secondary) !important;
}

body[theme-mode=dark] .wk-message-base-context-selected .wk-message-base-bubble-box.recv .svgAppendix .corner {
    fill: var(--wk-color-secondary);
}

/* 表情及失效占位长按后仍保持透明，不套用普通消息的选中气泡底色。 */
.wk-message-base-context-selected .wk-message-base-bubble-box.stickerBox.hide .wk-message-base-bubble,
body[theme-mode=dark] .wk-message-base-context-selected .wk-message-base-bubble-box.stickerBox.hide .wk-message-base-bubble {
    background: transparent !important;
    outline: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.wk-message-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0.32rem;
}

.wk-message-media-meta {
    position: absolute;
    left: 0.186667rem;
    bottom: 0.133333rem;
    z-index: 3;
    pointer-events: none;
}

.wk-message-media-meta-send {
    right: 0.186667rem;
    left: auto;
}

.wk-message-media-meta .messageMeta {
    width: auto;
    min-height: 0;
    margin: 0;
    color: #fff;
    text-shadow: 0 0.026667rem 0.106667rem rgba(0, 0, 0, 0.72);
}

.wk-message-media-meta .messageTime {
    margin: 0;
    color: #fff !important;
}

/* .wk-message-base-recv .wk-message-base-bubble {
    margin-left: 5px;
    background-color: #bedbf5;
}

.wk-message-base-send .wk-message-base-bubble {
    margin-right: 5px;
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0,0,0,.12);
    color: rgba(9,30,66,.87) !important;
    border-radius: 20px 4px 8px 20px;
}*/



.messageNameBox {
    display: flex;
    margin-bottom: 0.026667rem;
}

.wk-message-base-send .messageNameBox {
    flex-direction: row-reverse;
    justify-content: end;
}

.wk-message-base-recv .messageNameBox {
    flex-direction: row;
}

/*.messageTime {
    color: rgba(9,30,66,.74);
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    display: none;
}

.wk-message-base-send:hover .messageTime {
    display: block;
}

.wk-message-base-recv:hover .messageTime {
    display: block;
}

.wk-message-base-recv .messageTime {
    margin-left: 8px;
}

.wk-message-base-send .messageTime {
    margin-right: 8px;
}*/



.wk-message-base-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popupMenusContaner {
    display: none;
}

.wk-message-base-box:hover .popupMenusContaner {
    display: block;
}


.wk-message-base-checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translate3d(-0.266667rem, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-message-base-check-open {
    cursor: pointer;
}

.wk-message-base-check-open .wk-message-base-checkBox{
    transform: translate3d(0.666667rem, 0, 0);
   
}

.wk-message-base-checkBox .wk-check {
    position: absolute;
    bottom: 0.266667rem;
}

.wk-message-base-send .checkBox {
    left: auto;
    right: -0.8rem;
}


.wk-message-base-send .wk-message-base-box.checked {
    margin-left: 0;
    margin-right: 0.8rem;
}

.wk-message-base-recv .wk-message-base-box.checked .senderAvatar {
    left: -0.8rem;
}

.replyBox {
    width: 100%;
}

.reply {
    position: relative;
    color: #666;
    font-size: 0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.32rem;
    margin-bottom: 0.106667rem;
    max-width: 100%;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.reply::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.053333rem;
    height: 100%;
    border-radius: 1.333333rem;
    background-color: var(--wk-color-theme);
}

.messageMeta {
    position: static;
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-end;
    width: 100%;
    line-height: 1;
    min-height: 0.373333rem;
    margin-top: 0.106667rem;
    margin-left: 0;
    margin-right: 0;
}

.wk-message-base-bubble-box.send .messageMeta {
    top: 0;
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}

.messageTime {
    margin-inline-end: 0.08rem;
    font-size: 0.293333rem;
    font-weight: 500;
    white-space: nowrap;
}

.wk-message-base-bubble-box.recv .messageTime {
    color: rgba(148, 163, 184, 0.92);
}

.wk-message-base-bubble-box.recv .messageMeta {
    justify-content: flex-start;
}

.wk-message-base-bubble-box.send .messageTime {
    color: rgba(255, 255, 255, 0.86);
}

.wk-message-base-bubble-box.textBubble.recv .messageMeta {
    justify-content: flex-start;
}

.wk-message-base-bubble-box.textBubble.send .messageMeta {
    justify-content: flex-end;
}

.wk-message-sender-header {
    height: 0.586667rem;
    margin-left: 1.28rem;
    margin-bottom: 0.106667rem;
    display: flex;
    align-items: center;
    gap: 0.16rem;
    overflow: hidden;
}

.wk-message-sender-name {
    display: block;
    min-width: 0;
    max-width: 6.08rem;
    flex: 0 1 auto;
    color: #6B778C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.32rem;
    line-height: 0.48rem;
    font-weight: 400;
}

.wk-message-sender-role {
    flex: 0 0 auto;
    padding: 0.053333rem 0.16rem;
    border: 0.026667rem solid #CBE4FF;
    border-radius: 0.133333rem;
    color: #147FE8;
    background: #E9F3FF;
    font-size: 0.32rem;
    line-height: 0.426667rem;
    font-weight: 600;
    white-space: nowrap;
}

.wk-message-sender-time,
.wk-message-sender-time-separator {
    flex: 0 0 auto;
    color: #8c9bb1;
    font-size: 0.32rem;
    line-height: 0.48rem;
    font-weight: 400;
    white-space: nowrap;
}

.wk-message-sender-time {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.icon-message-pending::before {
    content: "";
    position: absolute;
    bottom: -0.106667rem;
}

.messageStatus {
    width: 0.507733rem;
    height: 0.507733rem;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    margin-left: -0.08rem;
    font-size: 0.506667rem;
    border-radius: 0.266667rem;
}

.wk-message-base-bubble-box.send .messageStatus {
    width: 0.373333rem;
    height: 0.373333rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-left: 0;
    font-size: 0.373333rem;
}

.wk-message-base-bubble-box.send .icon-message-pending::before {
    position: static;
    bottom: auto;
    display: block;
    line-height: 1;
}

.wk-message-send-failed {
    display: inline-flex;
    max-width: calc(100% - 0.24rem);
    align-items: center;
    gap: 0.186667rem;
    margin-top: 0.16rem;
    margin-right: 0.24rem;
    padding: 0;
    border: 0;
    outline: none;
    color: #ff4d24;
    background: transparent;
    font: inherit;
    font-size: 0.346667rem;
    line-height: 0.586667rem;
    white-space: normal;
    text-align: left;
    cursor: pointer;
}

.wk-message-send-failed > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wk-message-send-failed:hover,
.wk-message-send-failed:focus-visible {
    color: #e93612;
}

.wk-message-send-failed:focus-visible {
    border-radius: 0.106667rem;
    box-shadow: 0 0 0 0.053333rem rgba(255, 77, 36, 0.2);
}

.wk-message-send-failed-icon {
    display: inline-flex;
    width: 0.533333rem;
    height: 0.533333rem;
    flex: 0 0 0.533333rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: #ff4d24;
    font-size: 0.373333rem;
    font-weight: 700;
    line-height: 1;
}

.wk-message-send-failed:hover .wk-message-send-failed-icon,
.wk-message-send-failed:focus-visible .wk-message-send-failed-icon {
    background: #e93612;
}


.wk-check {
    cursor: pointer;
}
/* 群表情包消息气泡（1103）——规格按 Figma「10-01自定义表情包」6 屏实测（B 表 #5）：
   100×100、圆角、**无气泡底色**，时间戳在图片下方右对齐。
   ★ 旧系统的 140×140 已作废，不要照旧系统抄。 */

.wk-sticker-message {
    display: inline-flex;
    flex-direction: column;
    width: 2.666667rem;
    line-height: 0;
}

.wk-sticker-message-img {
    width: 2.666667rem;
    height: 2.666667rem;
    border-radius: 0.213333rem;
    /* contain 而非 cover：表情素材长宽比不完全一致（实测有 240×240 也有 200×180），
       cover 会裁掉边缘内容。 */
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

.wk-sticker-message-meta {
    position: static;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    min-height: 0.373333rem;
    margin-top: 0.106667rem;
    pointer-events: none;
}

/* 两个方向同一口径，并覆盖普通收到消息的左对齐规则；不影响普通图片/视频浮层。 */
.wk-message-base-bubble-box .wk-sticker-message .wk-sticker-message-meta .messageMeta {
    justify-content: flex-end;
    width: 100%;
    margin: 0;
}

.wk-message-base-bubble-box .wk-sticker-message .wk-sticker-message-meta .messageTime,
.wk-message-base-bubble-box .wk-sticker-message .wk-sticker-message-meta .messageStatus {
    color: #8a97aa;
}

.wk-sticker-message-meta .messageTime {
    margin-inline-end: 0;
    line-height: 0.373333rem;
}

/* 与图片等大，加载失败后保持消息和下方时间的位置，与 iOS 的虚线占位一致。 */
.wk-sticker-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 2.666667rem;
    height: 2.666667rem;
    border: 0.026667rem dashed #d5dde8;
    border-radius: 0.213333rem;
    color: #bcc7d5;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
}

/*
 * 受限成员输入区（阶段B）。
 *
 * ★ 容器必须与 `.wk-messageinput-box` 同构：内联撑高的表情包面板（StickerPanel）用
 *   `order: 5` + `flex: 0 0 calc(100% + 24px)` + `margin: 0 -12px` 出血到两侧边缘，
 *   这套写法依赖父级是「flex-wrap + padding: 8px 12px」的容器。换个容器它就会错位。
 */
.wk-shortcutonly {
    background: #fff;
    width: 100%;
    min-height: 1.44rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    align-content: flex-start;
    -moz-column-gap: 0.213333rem;
         column-gap: 0.213333rem;
    row-gap: 0;
    padding: 0.213333rem 0.32rem;
    box-sizing: border-box;
    position: relative;
}

body[theme-mode=dark] .wk-shortcutonly {
    background: var(--wk-color-secondary);
}

/* 只读条整行：灰底字段 + 三个图示（图示在字段外侧，与正常输入条同构），order 1 排在短语行（order 0）之后 */
.wk-shortcutonly-bar {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    min-height: 1.013333rem;
    display: flex;
    align-items: center;
    gap: 0.213333rem;
    box-sizing: border-box;
}

/* 灰底字段：替代输入框的那一块，与输入框同高（38px ≈ 输入框行高） */
.wk-shortcutonly-field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 1.013333rem;
    display: flex;
    align-items: center;
    gap: 0.213333rem;
    padding: 0 0.266667rem;
    border-radius: 0.213333rem;
    background: #f5f6f7;
    box-sizing: border-box;
}

body[theme-mode=dark] .wk-shortcutonly-field {
    background: var(--wk-color-secondary-2);
}

.wk-shortcutonly-lock {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #8a97aa;
}

/* 提示文案：占满中间，长文案省略而不是把入口挤走 */
.wk-shortcutonly-tip {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.346667rem;
    color: #8a97aa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 入口按钮（表情包 / ＋）：只读条自己的一部分，不会被任何遮罩盖住 */
.wk-shortcutonly-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.746667rem;
    height: 0.746667rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5c6b84;
    cursor: pointer;
    flex-shrink: 0;
}

.wk-shortcutonly-entry:hover {
    background: #e8ebef;
}

.wk-shortcutonly-entry.is-active,
.wk-shortcutonly-entry:active {
    color: #1890ff;
    color: var(--wk-color-primary, #1890ff);
}

/* 发送图示：形用 send.png mask，色跟工具栏图标灰 #98a1ad；只读态不可点 */
.wk-shortcutonly-send {
    cursor: default;
    pointer-events: none;
}

.wk-shortcutonly-send:hover {
    background: transparent;
}

.wk-shortcutonly-send-icon {
    width: 0.48rem;
    height: 0.48rem;
    display: block;
    background-color: #98a1ad;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body[theme-mode=dark] .wk-shortcutonly-entry {
    color: var(--wk-text-item);
}

body[theme-mode=dark] .wk-shortcutonly-entry:hover {
    background: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-shortcutonly-send:hover {
    background: transparent;
}

/*
 * 彩金稽核（用户端）：「我」页余额卡片 + 稽核明细页（列表 / 详情）。
 *
 * 纯 CSS，类名前缀 wk-audit-*。度量与配色照 Pages/MyRecords/index.css 抄改
 * （唯一滚动容器 .wk-audit-content、行 .wk-audit-row、详情行 .wk-audit-detail-row 都同源），
 * 卡片则贴 Components/MeInfo 的「我」页底色，入口在那里、视觉必须连续。
 *
 * ★ 暗色分支是硬要求：本文件所有可见元素在末尾 body[theme-mode=dark] 段里都有对应覆盖。
 * ★ ⛔ 不新增色 token：进度条填充复用主题蓝 var(--wk-color-theme)、底槽复用既有分割线色。
 * ★ 进度条是纯 CSS（外层固定高 4px + 内层 width 百分比），不引入任何图表库。
 */

/* ======================================================================
 * ① 「我」页余额卡片（AuditBalanceCard，挂在 hero 与菜单列表之间）
 * ==================================================================== */

.wk-audit-card {
  width: auto;
  box-sizing: border-box;
  margin: 0 0.4rem 0.32rem;
  border-radius: 0.32rem;
  background: #ffffff;
  box-shadow: 0 0.213333rem 0.56rem rgba(31, 79, 148, 0.14);
  color: #111827;
  overflow: hidden;
}

/* 首次加载的灰条骨架：高度与最终态一致，避免下方菜单列表跳动 */
.wk-audit-card-skeleton {
  height: 4rem;
  border-radius: 0.32rem;
  background: linear-gradient(90deg, #eef2f7 25%, #f6f9fc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: wk-audit-skeleton 1.4s ease infinite;
}

@keyframes wk-audit-skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ---- 蓝色余额区（设计稿「余额摘要」）：文字全白 ---- */
.wk-audit-hero {
  display: flex;
  flex-direction: column;
  gap: 0.053333rem;
  padding: 0.213333rem 0.426667rem 0.16rem;
  /* 设计稿是三层渐变叠加，取其主观感受（浅→深蓝，165°），⛔ 不引入新色 token */
  background: linear-gradient(165deg, #6fa8ff 0%, #5d9eff 40%, #488aff 100%);
  color: #ffffff;
}

.wk-audit-hero-top,
.wk-audit-hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.32rem;
}

.wk-audit-hero-label {
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  opacity: 0.92;
}

/* 盾牌徽章：纯装饰，⛔ 不给 cursor / 不做 button */
.wk-audit-hero-badge {
  width: 0.4rem;
  height: 0.48rem;
  flex: 0 0 auto;
  display: block;
}

.wk-audit-hero-amount {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.746667rem;
  font-weight: 800;
  line-height: 0.906667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wk-audit-hero-amount.is-long {
  font-size: 0.64rem;
  line-height: 0.8rem;
}

.wk-audit-hero-amount.is-extra-long {
  font-size: 0.533333rem;
  line-height: 0.72rem;
  letter-spacing: -0.2px;
}

.wk-audit-hero-amount.is-ultra-long {
  font-size: 0.426667rem;
  line-height: 0.64rem;
  letter-spacing: -0.3px;
}

.wk-audit-hero-cny {
  margin-right: 0.106667rem;
  font-size: 0.586667rem;
  font-style: normal;
  font-weight: 700;
}

.wk-audit-hero-amount.is-long .wk-audit-hero-cny {
  font-size: 0.533333rem;
}

.wk-audit-hero-amount.is-extra-long .wk-audit-hero-cny,
.wk-audit-hero-amount.is-ultra-long .wk-audit-hero-cny {
  font-size: 0.453333rem;
}

.wk-audit-hero-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.106667rem;
  border: 0;
  padding: 0 0 0.08rem;
  background: transparent;
  color: #ffffff;
  opacity: 0.94;
  cursor: pointer;
  font: inherit;
  font-size: 0.32rem;
  line-height: 0.533333rem;
  white-space: nowrap;
}

/* 通用小箭头（旋转边框，与设计稿 Border:css-transform 同做法）；.gray 是列表行右侧那颗 */
.wk-audit-chevron {
  width: 0.16rem;
  height: 0.16rem;
  flex: 0 0 auto;
  display: inline-block;
  border-right: 0.026667rem solid currentColor;
  border-bottom: 0.026667rem solid currentColor;
  transform: rotate(-45deg);
}

.wk-audit-chevron.gray {
  width: 0.186667rem;
  height: 0.186667rem;
  margin-left: 0.16rem;
  border-color: #aab1bb;
  border-width: 0.032rem;
}

/* ---- 「余额状态」块：卡内下段 / 稽核明细页顶部独立白卡（.wk-audit-status-card） ---- */
.wk-audit-status {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  box-sizing: border-box;
  padding: 0.32rem 0.426667rem 0.16rem;
}

.wk-audit-status-card {
  margin-bottom: 0.266667rem;
  border-radius: 0.32rem;
  padding: 0.266667rem 0.426667rem 0.16rem;
  background: #ffffff;
  box-shadow: 0 0 0.186667rem rgba(31, 79, 148, 0.06);
}

.wk-audit-status-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.213333rem;
}

.wk-audit-status-title {
  color: #14243d;
  font-size: 0.36rem;
  font-weight: 700;
  line-height: 0.56rem;
}

/* 「ⓘ 打码规则」胶囊：唯一的规则入口 */
.wk-audit-rule-pill {
  height: 0.56rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.053333rem;
  border: 0;
  border-radius: 0.16rem;
  padding: 0 0.106667rem;
  background: #fbf2cb;
  color: #c8811a;
  cursor: pointer;
  font: inherit;
  font-size: 0.32rem;
  line-height: 0.56rem;
  white-space: nowrap;
}

.wk-audit-rule-icon {
  width: 0.32rem;
  height: 0.32rem;
  display: block;
}

.wk-audit-status-stats {
  display: flex;
  align-items: center;
  padding: 0.106667rem 0;
}

.wk-audit-status-stat {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.053333rem;
  text-align: center;
}

.wk-audit-status-value {
  width: 100%;
  min-width: 0;
  height: 0.586667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #14243d;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 0.586667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wk-audit-status-value-text {
  display: block;
  flex: 0 0 auto;
  line-height: 1;
  white-space: nowrap;
}

.wk-audit-status-label {
  color: #7d8fa8;
  font-size: 0.32rem;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-audit-status-sep {
  width: 0.026667rem;
  height: 0.8rem;
  flex: 0 0 0.026667rem;
  background: #edf1f8;
}

/* ---- 「打码规则」弹窗（页内 fixed 遮罩 + 居中卡，与 Pages/Luckybag 的 mask 同做法） ---- */
.wk-audit-mask {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  animation: 90ms wk-audit-modal-mask-show cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.wk-audit-dialog {
  width: 7.466667rem;
  max-width: calc(100vw - 1.28rem);
  box-sizing: border-box;
  border-radius: 0.373333rem;
  padding: 0.426667rem 0.533333rem;
  background: #ffffff;
  text-align: center;
  transform-origin: center;
  animation: 120ms wk-audit-modal-content-show cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.wk-audit-mask.is-closing {
  animation: 90ms wk-audit-modal-mask-hide cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.wk-audit-mask.is-closing .wk-audit-dialog {
  animation: 120ms wk-audit-modal-content-hide cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes wk-audit-modal-mask-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes wk-audit-modal-content-show {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wk-audit-modal-mask-hide {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes wk-audit-modal-content-hide {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.7);
  }
}

.wk-audit-dialog-title {
  color: #202a3c;
  font-size: 0.426667rem;
  font-weight: 500;
  line-height: 0.64rem;
}

.wk-audit-dialog-body {
  margin-top: 0.266667rem;
  color: #676e76;
  font-size: 0.346667rem;
  line-height: 0.533333rem;
  word-break: break-all;
}

.wk-audit-dialog-btn {
  width: 100%;
  margin-top: 0.533333rem;
  border: 0;
  border-radius: 0.266667rem;
  padding: 0.293333rem 0;
  background: var(--wk-color-theme);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.373333rem;
  line-height: 0.48rem;
}

/* ======================================================================
 * ② R3 提示（未打满就下分）—— 详情页提示行；弹窗与它共用同一条文案常量
 * ==================================================================== */

/* 详情页提示行：ⓘ + 文案（弹窗正文同一常量） */
.wk-audit-tiprow {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
  margin: 0.266667rem 0.053333rem 0;
}

.wk-audit-tiprow-icon {
  width: 0.293333rem;
  height: 0.293333rem;
  flex: 0 0 auto;
  margin-top: 0.106667rem;
}

.wk-audit-tiprow-text {
  min-width: 0;
  color: #8d97a7;
  font-size: 0.32rem;
  line-height: 0.48rem;
  word-break: break-all;
}

/* ======================================================================
 * ③ 页面骨架（列表页 / 详情页共用）
 * ==================================================================== */

.wk-audit {
  /* 内容区上内边距 & 下拉指示条高度：.wk-audit-pull-tip 的负 top 靠这两个值算，别就地写死 */
  --wk-audit-content-pad-top: 0.32rem;
  --wk-audit-pull-tip-height: 0.906667rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f7fb;
  color: #111827;
}

/* 刷新键只有**详情页**用（列表页是下拉刷新），删了详情页 header 右上角会散架 */
/* 页签（全部 / 进行中 / 已完成） */
.wk-audit-tabs {
  width: calc(100% - 0.853333rem);
  height: 1.28rem;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0.32rem 0.426667rem 0;
  border-radius: 0.266667rem;
  padding: 0.16rem;
  background-color: rgba(74, 122, 245, 0.08);
  overflow: hidden;
}

.wk-audit-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.16rem;
  bottom: 0.16rem;
  left: 0.16rem;
  width: calc((100% - 0.32rem) / 3);
  box-sizing: border-box;
  border: 0.026667rem solid #e7e7ef;
  border-radius: 0.213333rem;
  background-color: var(--wk-color-theme);
  box-shadow: 0 0.026667rem 0.053333rem rgba(65, 65, 85, 0.07);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}

.wk-audit-tabs[data-selected-index="1"]::before {
  transform: translateX(100%);
}

.wk-audit-tabs[data-selected-index="2"]::before {
  transform: translateX(200%);
}

.wk-audit-tab {
  flex: 1 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 0.96rem;
  border: 0;
  border-radius: 0.213333rem;
  padding: 0 0.106667rem;
  background-color: transparent;
  color: var(--wk-color-theme);
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.96rem;
  text-align: center;
  cursor: pointer;
  transition: color 180ms ease, transform 120ms ease;
}

.wk-audit-tab.selected {
  color: #ffffff;
}

.wk-audit-tab:active {
  transform: scale(0.96);
}

/* 唯一滚动容器 */
.wk-audit-content {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  /* 到边不把滚动传给外层（聊天壳层），也压掉整页橡皮筋 —— 下拉刷新要独占这段位移 */
  overscroll-behavior-y: contain;
  padding: var(--wk-audit-content-pad-top) 0.426667rem 0.533333rem;
  scrollbar-width: none;
}

.wk-audit-content::-webkit-scrollbar {
  display: none;
}

/* ---------------- 下拉刷新 ---------------- */

.wk-audit-pullbox {
  position: relative;
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/*
 * 指示条藏在滚动区裁切线**以上**，位移多少露多少。
 * ★ 负 top 必须是「自身高度 + 内容区上内边距」：overflow 裁的是 padding box，
 *   只减自身高度会让静止时有 12px 露在页签下方。
 * ★ pointer-events:none —— 它盖在列表上方，绝不能吃掉行的点击。
 */
.wk-audit-pull-tip {
  height: var(--wk-audit-pull-tip-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--wk-audit-pull-tip-height) + var(--wk-audit-content-pad-top)));
  color: #9aa3b2;
  font-size: 0.32rem;
  line-height: var(--wk-audit-pull-tip-height);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wk-audit-loading {
  min-height: 4.266667rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-audit-error {
  margin-bottom: 0.266667rem;
  border-radius: 0.266667rem;
  padding: 0.266667rem 0.373333rem;
  background: rgba(240, 68, 56, 0.08);
  color: #d92d20;
  font-size: 0.346667rem;
  line-height: 0.533333rem;
  text-align: center;
  word-break: break-all;
}

.wk-audit-empty {
  min-height: 5.866667rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.373333rem;
  color: #c2cad8;
}

.wk-audit-empty-icon {
  width: 1.706667rem;
  height: 1.706667rem;
  display: block;
  color: inherit;
}

.wk-audit-empty-text {
  color: #9aa3b2;
  font-size: 0.373333rem;
  line-height: 0.533333rem;
}

/*
 * 明细列表空态（Figma 11稽核明细-03 `4400:16433`）：上 50 / 下 100 内边距，
 * 缺省图固定 220×258，与文案间距 15；文案 14px Medium #666。
 * ★ 与标题行的 10px 间距由 .wk-audit-section 的下外边距给，这里不再加。
 */
.wk-audit-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.333333rem 0.266667rem 2.666667rem;
}

.wk-audit-list-empty-img {
  width: 5.866667rem;
  height: 6.88rem;
  display: block;
}

.wk-audit-list-empty-text {
  color: #666;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.373333rem;
}

.wk-audit-more {
  width: 100%;
  height: 1.066667rem;
  display: block;
  margin-top: 0.32rem;
  border: 0;
  border-radius: 0.266667rem;
  padding: 0;
  background: rgba(74, 122, 245, 0.06);
  color: var(--wk-color-theme);
  font: inherit;
  font-size: 0.346667rem;
  line-height: 1.066667rem;
  text-align: center;
  cursor: pointer;
}

/* ======================================================================
 * ④ 列表页：汇总条 + 小票行
 * ==================================================================== */

/* 区块头：标题 + 右侧静态说明（不是排序控件，见 sectionNote 注释） */
.wk-audit-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
  margin: 0 0 0.266667rem;
  padding-top: 0.053333rem;
}

.wk-audit-section-title {
  color: #1d2b45;
  font-size: 0.373333rem;
  font-weight: 600;
  line-height: 0.533333rem;
}

/* 排序控件：文字按钮（Figma 11-01「按发放时间 ↓」），点击切换 ↓/↑ */
.wk-audit-section-order {
  flex: 0 0 auto;
  border: 0;
  padding: 0.053333rem 0 0.053333rem 0.213333rem;
  background: transparent;
  color: #6c7e99;
  cursor: pointer;
  font: inherit;
  font-size: 0.32rem;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-audit-list {
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}

.wk-audit-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 0.32rem;
  padding: 0.266667rem;
  background: #ffffff;
  box-shadow: 0 0.106667rem 0.186667rem rgba(31, 79, 148, 0.06);
  color: #111827;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-audit-row-title {
  color: #1d2b45;
  font-size: 0.373333rem;
  font-weight: 600;
  line-height: 0.533333rem;
  word-break: break-all;
}

.wk-audit-row-mid {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
}

.wk-audit-row-side {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  padding-top: 0.026667rem;
}

.wk-audit-row-meta {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}

.wk-audit-row-time,
.wk-audit-row-no {
  color: #8a96a8;
  font-size: 0.32rem;
  line-height: 0.453333rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-audit-row-time {
  white-space: nowrap;
}

.wk-audit-row-no-status {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
}

.wk-audit-row-no {
  display: inline-flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 0.106667rem;
  white-space: nowrap;
  overflow: hidden;
}

.wk-audit-row-no-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.wk-audit-row-no-value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 来源标签（群红包 / 群福袋 / 其它）：设计稿只给了红包档的红系渐变，其余按同规则推 */
.wk-audit-row-tag {
  flex: 0 0 auto;
  border-radius: 0.16rem;
  padding: 0.08rem 0.213333rem;
  font-size: 0.293333rem;
  font-weight: 500;
  line-height: 0.4rem;
  white-space: nowrap;
}

.wk-audit-row-tag.rp {
  background: linear-gradient(163deg, #fff0e9 0%, #ffe2d7 100%);
  color: #c84c45;
}

.wk-audit-row-tag.lb {
  background: linear-gradient(163deg, #fff6e3 0%, #ffecc9 100%);
  color: #c8811a;
}

.wk-audit-row-tag.other {
  background: rgba(74, 122, 245, 0.1);
  color: var(--wk-color-theme);
}

.wk-audit-row-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.wk-audit-row-endcol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.08rem;
}

.wk-audit-row-amount {
  display: block;
  max-width: 4rem;
  overflow: hidden;
  color: #316fe7;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 0.586667rem;
  letter-spacing: 0.026667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-audit-row-amount.is-long {
  font-size: 0.426667rem;
  letter-spacing: 0.4px;
}

.wk-audit-row-amount.is-xlong {
  font-size: 0.373333rem;
  letter-spacing: 0;
}

/* 状态标签：进行中橙系胶囊（设计稿「打码中」），其余中性 */
.wk-audit-row-status {
  border-radius: 0.16rem;
  padding: 0.08rem 0.213333rem;
  font-size: 0.293333rem;
  font-weight: 500;
  line-height: 0.4rem;
  white-space: nowrap;
}

.wk-audit-row-status.open {
  background: #fff4df;
  color: #e69024;
}

.wk-audit-row-status.done {
  background: #f1f3f7;
  color: var(--wk-color-font-tip);
}

.wk-audit-row-status.is-long {
  padding-right: 0.16rem;
  padding-left: 0.16rem;
  font-size: 0.24rem;
  letter-spacing: -0.1px;
}

/* 详情页「状态」行用的胶囊圆角更大（设计稿 rounded 19px） */
.wk-audit-row-status.pill {
  border-radius: 26.64rem;
  padding: 0.16rem 0.266667rem;
  font-size: 0.32rem;
  font-weight: 600;
}

.wk-audit-row-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
  padding-top: 0.106667rem;
}

.wk-audit-row-progress-label {
  color: #7d899b;
  font-size: 0.306667rem;
  line-height: 0.426667rem;
}

.wk-audit-row-progress-text {
  min-width: 0;
  overflow: hidden;
  flex: 0 0 auto;
  color: #7d899b;
  font-size: 0.32rem;
  font-weight: 600;
  line-height: 0.426667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- 进度条（纯 CSS，无图表库） ---------------- */

.wk-audit-progress {
  width: 100%;
  min-width: 0;
  height: 0.133333rem;
  display: block;
  border-radius: 26.64rem;
  background: #edf1f7;
  overflow: hidden;
}

/* 填充改为设计稿的橙色渐变（Tulip Tree #F0A43C 系）；⛔ 不新增 token，直接写色值 */
.wk-audit-progress-fill {
  height: 100%;
  display: block;
  border-radius: 26.64rem;
  background: linear-gradient(90deg, #f0a634 0%, #f3c25b 100%);
}

/* ======================================================================
 * ⑤ 详情页：小票头 + 台账流水
 * ==================================================================== */

/* 头卡：还需打码 + 状态胶囊 + 说明 + 进度 */
.wk-audit-dhead {
  display: flex;
  flex-direction: column;
  gap: 0.053333rem;
  box-sizing: border-box;
  margin-bottom: 0.266667rem;
  border-radius: 0.32rem;
  padding: 0.213333rem 0.266667rem 0.266667rem;
  background: #ffffff;
  box-shadow: 0 0.106667rem 0.186667rem rgba(31, 79, 148, 0.06);
}

.wk-audit-dhead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.213333rem;
}

.wk-audit-dhead-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.053333rem;
}

.wk-audit-dhead-title {
  display: flex;
  align-items: center;
  gap: 0.106667rem;
  color: #1d2b45;
  font-size: 0.426667rem;
  font-weight: 600;
  line-height: 0.586667rem;
}

.wk-audit-dhead-amount {
  font-size: 0.48rem;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wk-audit-dhead-amount.is-long { font-size: 0.4rem; }
.wk-audit-dhead-amount.is-xlong { font-size: 0.32rem; letter-spacing: -.2px; }

.wk-audit-dhead-sub {
  color: #78859a;
  font-size: 0.32rem;
  line-height: 0.48rem;
}

.wk-audit-dhead-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.106667rem;
  border-radius: 26.64rem;
  padding: 0.106667rem 0.213333rem 0.106667rem 0.16rem;
  background: #fff2dd;
  color: #c67a13;
  font-size: 0.32rem;
  font-weight: 600;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-audit-dhead-pill.done {
  background: #f1f3f7;
  color: var(--wk-color-font-tip);
}

.wk-audit-dhead-dot {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 0.08rem;
  background: currentColor;
  box-shadow: 0 0 0 0.066667rem rgba(255, 141, 40, 0.2);
}

.wk-audit-dhead-pill.done .wk-audit-dhead-dot {
  box-shadow: none;
}

/* 键值表 */
.wk-audit-detail-card {
  width: 100%;
  box-sizing: border-box;
  border: 0.026667rem solid #edf0f4;
  border-radius: 0.426667rem;
  padding: 0 0.32rem;
  background: #ffffff;
  box-shadow: 0 0.186667rem 0.533333rem rgba(46, 56, 78, 0.04);
}

.wk-audit-detail-row {
  min-height: 1.066667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.32rem;
  padding: 0.266667rem 0;
  box-sizing: border-box;
}

.wk-audit-detail-label {
  flex: 0 0 auto;
  color: #788293;
  font-size: 0.32rem;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-audit-detail-value {
  min-width: 0;
  color: #283143;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.533333rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}

.wk-audit-detail-value.num {
  color: #30394a;
  font-weight: 800;
}

.wk-audit-detail-value.amount {
  color: #316fe7;
  font-size: 0.426667rem;
  font-weight: 800;
  letter-spacing: 0.026667rem;
}
.wk-audit-detail-value.amount.is-long,
.wk-audit-detail-value.warn.is-long { font-size: 0.346667rem; letter-spacing: .25px; }
.wk-audit-detail-value.amount.is-xlong,
.wk-audit-detail-value.warn.is-xlong { font-size: 0.293333rem; letter-spacing: -.2px; }

.wk-audit-detail-value.warn {
  color: #ca8018;
}

.wk-audit-detail-source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.106667rem;
}

.wk-audit-detail-source-text {
  min-width: 0;
  font-size: 0.346667rem;
}

.wk-audit-detail-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wk-audit-detail-backbtn {
  min-width: 3.2rem;
  height: 1.013333rem;
  margin-top: 0.106667rem;
  border: 0;
  border-radius: 26.64rem;
  padding: 0 0.48rem;
  background: var(--wk-color-theme);
  color: #ffffff;
  font: inherit;
  font-size: 0.373333rem;
  line-height: 1.013333rem;
  cursor: pointer;
}

/* 台账流水：时间线（左轨圆点 + 虚线，右侧时间） */
.wk-audit-logs-title {
  margin: 0.32rem 0 0.266667rem;
  color: #1d2b45;
  font-size: 0.373333rem;
  font-weight: 600;
  line-height: 0.533333rem;
}

.wk-audit-logs {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 0.4rem;
  padding: 0.053333rem 0.373333rem;
  background: #ffffff;
}

.wk-audit-log {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.266667rem;
  padding: 0.16rem 0;
}

.wk-audit-log:not(:last-child)::after {
  height: 0.026667rem;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0.613333rem;
  background: #edf0f5;
}

.wk-audit-log-rail {
  position: relative;
  width: 0.346667rem;
  flex: 0 0 0.346667rem;
  align-self: stretch;
}

.wk-audit-log-dot {
  position: absolute;
  top: 0.106667rem;
  left: 0.053333rem;
  width: 0.213333rem;
  height: 0.213333rem;
  border-radius: 0.106667rem;
  background: #4388f7;
}

.wk-audit-log-dot.blue {
  background: #4388f7;
}

.wk-audit-log-dot.warm {
  background: #ff8b2b;
}

.wk-audit-log-dot.success {
  background: #2eae74;
}

.wk-audit-log-dot.danger {
  background: #df554a;
}

/* 轨道虚线：从圆点下方一直画到行底，最后一行不画 */
.wk-audit-log-rail::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: -0.16rem;
  left: 0.146667rem;
  border-left: 0.026667rem dashed #d7e2ef;
}

.wk-audit-log:last-child .wk-audit-log-rail::after {
  display: none;
}

.wk-audit-log-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.106667rem;
}

.wk-audit-log-event {
  color: #1d2b45;
  font-size: 0.36rem;
  font-weight: 600;
  line-height: 0.48rem;
  word-break: break-all;
}

/* 关联单号 + 增量（客服串账用；单号与 bill_info.order_num 同值） */
.wk-audit-log-ref {
  color: #8b96a8;
  font-size: 0.32rem;
  line-height: 0.453333rem;
  word-break: break-all;
}

.wk-audit-log-time {
  flex: 0 0 auto;
  color: #8b96a8;
  font-size: 0.32rem;
  line-height: 0.48rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ======================================================================
 * ⑥ 暗色分支（body[theme-mode=dark]）—— 与 MeInfo / MyRecords 同一套底色
 * ==================================================================== */

body[theme-mode="dark"] .wk-audit-card,
body[theme-mode="dark"] .wk-audit-status-card,
body[theme-mode="dark"] .wk-audit-row,
body[theme-mode="dark"] .wk-audit-dhead,
body[theme-mode="dark"] .wk-audit-detail-card,
body[theme-mode="dark"] .wk-audit-logs,
body[theme-mode="dark"] .wk-audit-dialog {
  background: var(--wk-color-secondary);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #ffffff;
}

/* 蓝色余额区暗色下保持渐变（本来就是深色底、白字），只把卡片外壳换底 */
body[theme-mode="dark"] .wk-audit-card-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.06) 63%
  );
  background-size: 400% 100%;
}

body[theme-mode="dark"] .wk-audit-status-label,
body[theme-mode="dark"] .wk-audit-section-order,
body[theme-mode="dark"] .wk-audit-row-time,
body[theme-mode="dark"] .wk-audit-row-no,
body[theme-mode="dark"] .wk-audit-row-progress-label,
body[theme-mode="dark"] .wk-audit-row-progress-text,
body[theme-mode="dark"] .wk-audit-dhead-sub,
body[theme-mode="dark"] .wk-audit-detail-label,
body[theme-mode="dark"] .wk-audit-log-time,
body[theme-mode="dark"] .wk-audit-log-ref,
body[theme-mode="dark"] .wk-audit-tiprow-text,
body[theme-mode="dark"] .wk-audit-dialog-body {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-audit-status-title,
body[theme-mode="dark"] .wk-audit-status-value,
body[theme-mode="dark"] .wk-audit-section-title,
body[theme-mode="dark"] .wk-audit-row-title,
body[theme-mode="dark"] .wk-audit-dhead-title,
body[theme-mode="dark"] .wk-audit-detail-value,
body[theme-mode="dark"] .wk-audit-log-event,
body[theme-mode="dark"] .wk-audit-logs-title,
body[theme-mode="dark"] .wk-audit-dialog-title {
  color: #ffffff;
}

body[theme-mode="dark"] .wk-audit-status-sep,
body[theme-mode="dark"] .wk-audit-log {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

body[theme-mode="dark"] .wk-audit-status-sep {
  background: rgba(255, 255, 255, 0.1);
}

body[theme-mode="dark"] .wk-audit-row-status.done,
body[theme-mode="dark"] .wk-audit-dhead-pill.done {
  background: rgba(255, 255, 255, 0.08);
}

body[theme-mode="dark"] .wk-audit {
  background: var(--wk-color-secondary-2);
  color: #ffffff;
}

body[theme-mode="dark"] .wk-audit-pull-tip {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-audit-tabs {
  background-color: rgba(74, 122, 245, 0.16);
}

body[theme-mode="dark"] .wk-audit-tabs::before {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .wk-audit-tabs::before,
  .wk-audit-tab {
    transition: none;
  }

  .wk-audit-mask,
  .wk-audit-dialog {
    animation: none;
  }
}

body[theme-mode="dark"] .wk-audit-error {
  background: rgba(240, 68, 56, 0.16);
  color: #ff9c94;
}

body[theme-mode="dark"] .wk-audit-empty {
  color: rgba(255, 255, 255, 0.28);
}

body[theme-mode="dark"] .wk-audit-empty-text,
body[theme-mode="dark"] .wk-audit-list-empty-text {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-audit-chevron.gray {
  border-color: rgba(255, 255, 255, 0.32);
}

body[theme-mode="dark"] .wk-audit-more {
  background: rgba(74, 122, 245, 0.16);
}

/* 进度条底槽在暗色下要能与填充分辨 */
body[theme-mode="dark"] .wk-audit-progress {
  background: rgba(255, 255, 255, 0.14);
}

/*
 * 用户记录（红包 / 福袋 / 红包游戏，列表 + 详情共 6 页）。
 *
 * 纯 CSS，类名前缀 wk-myrec-*。骨架与配色对齐 Components/MeInfo 的 MeSettings（入口从「我」进来，
 * 视觉必须连续）；Tab 沿用 apps/web Pages/Hall 的 .wk-hall-segmented 范式。
 *
 * ★ 暗色分支是硬要求：MeInfo 全量适配过，记录页从它进来，不适配会突兀。
 *   本文件所有可见元素都在文件末尾的 body[theme-mode=dark] 段里有对应覆盖。
 */

.wk-myrec {
  /* 内容区上内边距 & 下拉指示条高度：.wk-myrec-pull-tip 的负 top 要靠这两个值算，别就地写死 */
  --wk-myrec-content-pad-top: 0.32rem;
  --wk-myrec-pull-tip-height: 0.906667rem;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f7fb;
  color: #111827;
}

/* ---------------- Tab（仅红包记录页） ---------------- */

.wk-myrec-tabs {
  width: calc(100% - 0.853333rem);
  height: 1.28rem;
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0.32rem 0.426667rem 0;
  border-radius: 0.266667rem;
  padding: 0.16rem;
  background-color: rgba(74, 122, 245, 0.08);
  overflow: hidden;
}

.wk-myrec-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.16rem;
  bottom: 0.16rem;
  left: 0.16rem;
  width: calc((100% - 0.32rem) / 3);
  box-sizing: border-box;
  border: 0.026667rem solid #e7e7ef;
  border-radius: 0.213333rem;
  background-color: var(--wk-color-theme);
  box-shadow: 0 0.026667rem 0.053333rem rgba(65, 65, 85, 0.07);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}

.wk-myrec-tabs[data-selected-index="1"]::before {
  transform: translateX(100%);
}

.wk-myrec-tabs[data-selected-index="2"]::before {
  transform: translateX(200%);
}

.wk-myrec-tab {
  flex: 1 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 0.96rem;
  border: 0;
  border-radius: 0.213333rem;
  padding: 0 0.106667rem;
  background-color: transparent;
  color: var(--wk-color-theme);
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.96rem;
  text-align: center;
  cursor: pointer;
  transition: color 180ms ease, transform 120ms ease;
}

.wk-myrec-tab.selected {
  color: #ffffff;
}

.wk-myrec-tab:active {
  transform: scale(0.96);
}

/* ---------------- 内容区 ---------------- */

.wk-myrec-content {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  /* 到边不把滚动传给外层（聊天壳层），也压掉浏览器自带的整页橡皮筋 —— 下拉刷新要独占这段位移 */
  overscroll-behavior-y: contain;
  padding: var(--wk-myrec-content-pad-top) 0.426667rem 0.533333rem;
  scrollbar-width: none;
}

.wk-myrec-content::-webkit-scrollbar {
  display: none;
}

/* ---------------- 下拉刷新（20260815-wap-04，替代已撤掉的 header 刷新键） ---------------- */

/*
 * 位移容器：整块内容随手指下移。用 transform 不用撑高度 —— 撑高度每帧都要让几十行列表
 * 重排，wap 上会掉帧。跟手阶段由 JS 内联 `transition:none` 盖掉这条过渡，松手回弹才用它。
 */
.wk-myrec-pullbox {
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/*
 * 指示条：藏在滚动区裁切线**以上**，位移多少露多少，收起时天然不可见。
 *
 * ★ 负 top 必须是「自身高度 **+ 内容区上内边距**」：overflow 裁的是 **padding box**，
 *   padding-top 那 12px 仍在可视范围内 —— 只减自身高度的话，静止时指示条会有 12px
 *   露在 Tab 条下方（实测踩过）。两个值都在 .wk-myrec 上定义，改一处即可。
 * ★ pointer-events:none —— 它盖在列表上方，绝不能吃掉行的点击。
 */
.wk-myrec-pull-tip {
  height: var(--wk-myrec-pull-tip-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--wk-myrec-pull-tip-height) + var(--wk-myrec-content-pad-top)));
  color: #9aa3b2;
  font-size: 0.32rem;
  line-height: var(--wk-myrec-pull-tip-height);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wk-myrec-loading {
  min-height: 4.266667rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-myrec-error {
  margin-bottom: 0.266667rem;
  border-radius: 0.266667rem;
  padding: 0.266667rem 0.373333rem;
  background: rgba(240, 68, 56, 0.08);
  color: #d92d20;
  font-size: 0.346667rem;
  line-height: 0.533333rem;
  text-align: center;
  word-break: break-all;
}

/* ---------------- 空态 ---------------- */

.wk-myrec-empty {
  min-height: 5.866667rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
}

.wk-myrec-empty.is-fill {
  min-height: 0;
  flex: 1 1 auto;
}

.wk-myrec-empty-image {
  width: min(6.026667rem, 70vw);
  height: auto;
  display: block;
}

.wk-myrec-empty-text {
  color: #666666;
  font-size: 0.4rem;
  line-height: 0.586667rem;
}

/* ---------------- 列表 ---------------- */

.wk-myrec-list {
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}

/* 福袋 / 红包游戏记录：Figma 新版双行 item。 */
.wk-myrec-award-row {
  width: 100%;
  min-height: 1.76rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0.373333rem;
  padding: 0.266667rem 0.293333rem 0.266667rem 0.32rem;
  background: #ffffff;
  box-shadow: 0 0.213333rem 0.48rem rgba(38, 72, 116, 0.04);
  color: #202a3c;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-myrec-award-row-icon {
  width: 0.693333rem;
  height: 0.693333rem;
  flex: 0 0 0.693333rem;
  position: relative;
  border-radius: 0.186667rem;
  background: #eaf2ff;
}

.wk-myrec-award-row-icon::before {
  width: 0.32rem;
  height: 0.32rem;
  box-sizing: border-box;
  border: 0.032rem solid #4b80e8;
  border-radius: 0.066667rem;
  content: "";
  position: absolute;
  left: 0.186667rem;
  top: 0.186667rem;
}

.wk-myrec-award-row-icon::after {
  width: 0.16rem;
  height: 0.16rem;
  content: "";
  position: absolute;
  left: 0.266667rem;
  top: 0.266667rem;
  background:
    linear-gradient(#4b80e8, #4b80e8) center / 0.032rem 0.16rem no-repeat,
    linear-gradient(#4b80e8, #4b80e8) center / 0.16rem 0.032rem no-repeat;
}

.wk-myrec-award-row-icon.is-group {
  background: #ffede8;
}

.wk-myrec-award-row-icon.is-group::before {
  border-color: #df554a;
}

.wk-myrec-award-row-icon.is-group::after {
  background:
    linear-gradient(#df554a, #df554a) center / 0.032rem 0.16rem no-repeat,
    linear-gradient(#df554a, #df554a) center / 0.16rem 0.032rem no-repeat;
}

.wk-myrec-award-row-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.106667rem;
  margin-left: 0.426667rem;
}

.wk-myrec-award-row-title {
  overflow: hidden;
  color: #202a3c;
  font-size: 0.373333rem;
  font-weight: 400;
  line-height: 0.586667rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-myrec-award-row-time {
  overflow: hidden;
  color: #8d99ad;
  font-size: 0.346667rem;
  line-height: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-myrec-award-row-end {
  max-width: 42%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.026667rem;
  margin-left: 0.213333rem;
}

.wk-myrec-award-row-amount {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--wk-color-theme);
  font-size: 0.426667rem;
  font-weight: 700;
  line-height: 0.586667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-myrec-award-row-amount.is-long {
  font-size: 0.373333rem;
  letter-spacing: -0.1px;
}

.wk-myrec-award-row-amount.is-xlong {
  font-size: 0.32rem;
  letter-spacing: -0.2px;
}

.wk-myrec-award-row-hint {
  color: var(--wk-color-font-tip);
  font-size: 0.266667rem;
  line-height: 0.373333rem;
  white-space: nowrap;
}

.wk-myrec-award-row-arrow {
  width: 0.186667rem;
  height: 0.186667rem;
  flex: 0 0 0.186667rem;
  box-sizing: border-box;
  margin-left: 0.213333rem;
  border-top: 0.04rem solid #aab4c3;
  border-right: 0.04rem solid #aab4c3;
  transform: rotate(45deg);
}

.wk-myrec-redpacket-row {
  min-height: 1.866667rem;
}

.wk-myrec-redpacket-row-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.106667rem;
}

.wk-myrec-redpacket-row-tag {
  flex: 0 0 auto;
  border-radius: 0.186667rem;
  padding: 0.026667rem 0.186667rem;
  font-size: 0.346667rem;
  font-weight: 400;
  line-height: 0.506667rem;
  white-space: nowrap;
}

.wk-myrec-redpacket-row-tag.is-group {
  background: #ffe4dc;
  color: #df554a;
}

.wk-myrec-redpacket-row-tag.is-system {
  background: #e7f0ff;
  color: #3979ed;
}

.wk-myrec-more {
  width: 100%;
  height: 1.066667rem;
  display: block;
  margin-top: 0.32rem;
  border: 0;
  border-radius: 0.266667rem;
  padding: 0;
  background: rgba(74, 122, 245, 0.06);
  color: var(--wk-color-theme);
  font: inherit;
  font-size: 0.346667rem;
  line-height: 1.066667rem;
  text-align: center;
  cursor: pointer;
}

/* ---------------- 详情 ---------------- */

.wk-myrec-detail-card {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.32rem;
  padding: 0.106667rem 0.426667rem;
  background: #ffffff;
  box-shadow: 0 0.213333rem 0.48rem rgba(38, 72, 116, 0.04);
}

.wk-myrec-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.426667rem;
  padding: 0.373333rem 0;
  border-bottom: 0.026667rem solid var(--wk-line-color);
}

.wk-myrec-detail-row:last-child {
  border-bottom: 0;
}

.wk-myrec-detail-label {
  flex: 0 0 auto;
  color: #6b7280;
  font-size: 0.373333rem;
  line-height: 0.586667rem;
  white-space: nowrap;
}

.wk-myrec-detail-value-box {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.053333rem;
}

.wk-myrec-detail-value {
  color: #111827;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.586667rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}

/* 金额（彩金/参与金额）统一蓝色 */
.wk-myrec-detail-value.amount {
  color: var(--wk-color-theme);
  font-weight: 700;
}
.wk-myrec-detail-value.amount.is-long,
.wk-myrec-detail-value.profit.is-long { font-size: 0.32rem; }
.wk-myrec-detail-value.amount.is-xlong,
.wk-myrec-detail-value.profit.is-xlong { font-size: 0.266667rem; letter-spacing: -0.2px; }

/* 盈亏三色：正绿 / 负红 / 零中性（0 单独走中性，不能并进涨色） */
.wk-myrec-detail-value.profit {
  font-weight: 700;
}

.wk-myrec-detail-value.profit.up {
  color: #12b76a;
}

.wk-myrec-detail-value.profit.down {
  color: #f04438;
}

.wk-myrec-detail-value.profit.flat {
  color: #111827;
}

.wk-myrec-detail-hint {
  color: var(--wk-color-font-tip);
  font-size: 0.293333rem;
  line-height: 0.426667rem;
  text-align: right;
}

.wk-myrec-detail-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wk-myrec-detail-backbtn {
  min-width: 3.2rem;
  height: 1.013333rem;
  margin-top: 0.106667rem;
  border: 0;
  border-radius: 26.64rem;
  padding: 0 0.48rem;
  background: var(--wk-color-theme);
  color: #ffffff;
  font: inherit;
  font-size: 0.373333rem;
  line-height: 1.013333rem;
  cursor: pointer;
}

/* ---------------- 红包 / 福袋 / 红包游戏详情（同一套紧凑卡片设计） ---------------- */

.wk-myrec-rp-detail {
  --wk-myrec-rp-width: min(12.8rem, 100%);
  background: #f7f8fb;
  color: #202a3c;
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue",
    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.wk-myrec-rp-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.266667rem 0.32rem 0.906667rem;
  box-sizing: border-box;
  scrollbar-width: none;
}

.wk-myrec-rp-content::-webkit-scrollbar {
  display: none;
}

.wk-myrec-rp-content .wk-myrec-loading,
.wk-myrec-rp-content .wk-myrec-detail-fail {
  width: var(--wk-myrec-rp-width);
  margin: 0 auto;
}

.wk-myrec-rp-ready {
  width: var(--wk-myrec-rp-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.533333rem;
}

.wk-myrec-rp-section,
.wk-myrec-rp-rules {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}

.wk-myrec-rp-section-title {
  width: 100%;
  min-height: 0.48rem;
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  padding: 0.053333rem 0;
  box-sizing: border-box;
  color: #596375;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.373333rem;
}

.wk-myrec-rp-section-title span {
  flex: 0 0 auto;
}

.wk-myrec-rp-section-title i {
  flex: 1 1 auto;
  min-width: 0.026667rem;
  height: 0.026667rem;
  background: #e5e8ee;
}

.wk-myrec-rp-card {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border: 0.026667rem solid #edf0f4;
  border-radius: 0.426667rem;
  background: #ffffff;
  box-shadow: 0 0.186667rem 0.533333rem rgba(46, 56, 78, 0.04);
}

.wk-myrec-rp-row {
  width: 100%;
  min-height: 1.44rem;
  display: grid;
  grid-template-columns: 0.693333rem 2.666667rem minmax(0, 1fr);
  align-items: center;
  grid-column-gap: 0.213333rem;
  -moz-column-gap: 0.213333rem;
       column-gap: 0.213333rem;
  padding: 0.373333rem 0.32rem;
  box-sizing: border-box;
}

.wk-myrec-rp-icon {
  width: 0.693333rem;
  height: 0.693333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.16rem;
}

.wk-myrec-rp-icon.is-red {
  background: #fff1ec;
}

.wk-myrec-rp-icon.is-blue {
  background: #edf4ff;
}

.wk-myrec-rp-icon.is-gold {
  background: #fff6df;
}

.wk-myrec-rp-icon img {
  display: block;
  width: 0.426667rem;
  height: 0.426667rem;
}

.wk-myrec-rp-label {
  min-width: 0;
  color: #788293;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-myrec-rp-value {
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 0.133333rem);
  min-width: 0;
  margin-left: 0.133333rem;
  justify-self: end;
  overflow: hidden;
  color: #283143;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.56rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-myrec-rp-value-text-box {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.wk-myrec-rp-value-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-myrec-rp-value-hint {
  display: block;
  color: #98a1ae;
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
  font-size: 0.293333rem;
  font-weight: 400;
  line-height: 0.4rem;
  letter-spacing: 0;
}

.wk-myrec-rp-value.is-time {
  color: #30394a;
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-myrec-rp-value.is-amount {
  color: #316fe7;
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 0.426667rem;
  font-weight: 900;
  letter-spacing: 0.04rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-myrec-rp-value.is-profit {
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 0.426667rem;
  font-weight: 900;
  letter-spacing: 0.04rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.wk-myrec-rp-value.is-profit.up {
  color: #12b76a;
}

.wk-myrec-rp-value.is-profit.down {
  color: #f04438;
}

.wk-myrec-rp-value.is-profit.flat {
  color: #283143;
}

.wk-myrec-rp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 0.64rem;
  padding: 0 0.266667rem;
  border-radius: 26.64rem;
  background: #fff2ee;
  color: #c84c45;
  font-size: 0.32rem;
  font-weight: 600;
  line-height: 0.64rem;
}

.wk-myrec-rp-note {
  width: 100%;
  min-height: 0.613333rem;
  display: flex;
  align-items: center;
  gap: 0.213333rem;
  padding: 0.053333rem 0;
  box-sizing: border-box;
  color: #98a1ae;
  font-size: 0.32rem;
  line-height: 0.506667rem;
}

.wk-myrec-rp-note img {
  flex: 0 0 0.373333rem;
  display: block;
  width: 0.373333rem;
  height: 0.373333rem;
}

/* ======================================================================
 * 暗色分支（body[theme-mode=dark]）—— 与 MeInfo/MeSettings 同一套底色
 * ==================================================================== */

body[theme-mode="dark"] .wk-myrec {
  background: var(--wk-color-secondary-2);
  color: #ffffff;
}

body[theme-mode="dark"] .wk-myrec-pull-tip {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-myrec-tabs {
  background-color: rgba(74, 122, 245, 0.16);
}

body[theme-mode="dark"] .wk-myrec-tabs::before {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .wk-myrec-tabs::before,
  .wk-myrec-tab {
    transition: none;
  }
}

body[theme-mode="dark"] .wk-myrec-error {
  background: rgba(240, 68, 56, 0.16);
  color: #ff9c94;
}

body[theme-mode="dark"] .wk-myrec-empty-text {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-myrec-award-row,
body[theme-mode="dark"] .wk-myrec-detail-card {
  background: var(--wk-color-secondary);
  box-shadow: none;
  color: #ffffff;
}

body[theme-mode="dark"] .wk-myrec-award-row-title,
body[theme-mode="dark"] .wk-myrec-detail-value,
body[theme-mode="dark"] .wk-myrec-detail-value.profit.flat {
  color: #ffffff;
}

body[theme-mode="dark"] .wk-myrec-award-row-time,
body[theme-mode="dark"] .wk-myrec-detail-label {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-myrec-award-row-icon {
  background: rgba(74, 128, 232, 0.18);
}

body[theme-mode="dark"] .wk-myrec-award-row-icon.is-group {
  background: rgba(223, 85, 74, 0.2);
}

body[theme-mode="dark"] .wk-myrec-award-row-arrow {
  border-color: rgba(255, 255, 255, 0.32);
}

body[theme-mode="dark"] .wk-myrec-redpacket-row-tag.is-group {
  background: rgba(223, 85, 74, 0.2);
}

body[theme-mode="dark"] .wk-myrec-redpacket-row-tag.is-system {
  background: rgba(74, 128, 232, 0.2);
}

body[theme-mode="dark"] .wk-myrec-more {
  background: rgba(74, 122, 245, 0.16);
}

body[theme-mode="dark"] .wk-myrec-detail-value.profit.up {
  color: #3ddc97;
}

body[theme-mode="dark"] .wk-myrec-detail-value.profit.down {
  color: #ff7a70;
}

body[theme-mode="dark"] .wk-myrec-rp-detail {
  background: var(--wk-color-secondary-2);
}

body[theme-mode="dark"] .wk-myrec-rp-card {
  background: var(--wk-color-secondary);
}

body[theme-mode="dark"] .wk-myrec-rp-value,
body[theme-mode="dark"] .wk-myrec-rp-value.is-time {
  color: #ffffff;
}

body[theme-mode="dark"] .wk-myrec-rp-section-title,
body[theme-mode="dark"] .wk-myrec-rp-label,
body[theme-mode="dark"] .wk-myrec-rp-note {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-myrec-rp-section-title i {
  background: rgba(255, 255, 255, 0.12);
}

body[theme-mode="dark"] .wk-myrec-rp-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body[theme-mode="dark"] .wk-myrec-rp-value.is-amount {
  color: #78a4ff;
}

body[theme-mode="dark"] .wk-myrec-rp-value.is-profit.up {
  color: #3ddc97;
}

body[theme-mode="dark"] .wk-myrec-rp-value.is-profit.down {
  color: #ff7a70;
}

body[theme-mode="dark"] .wk-myrec-rp-value.is-profit.flat {
  color: #ffffff;
}

.wk-business-card-pending {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  background: rgba(22, 29, 42, 0.42);
  cursor: default;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(0.026667rem);
  backdrop-filter: blur(0.026667rem);
}

.wk-business-card-pending > span {
  width: 0.746667rem;
  height: 0.746667rem;
  box-sizing: border-box;
  border: 0.08rem solid rgba(255, 255, 255, 0.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wk-business-card-pending-spin 0.72s linear infinite;
}

@keyframes wk-business-card-pending-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-business-card-pending > span {
    animation-duration: 1.4s;
  }
}

.wk-message-luckybag { width:-moz-max-content; width:max-content; max-width:7.626667rem; color:#332923; cursor:default; }
.wk-message-luckybag.scene-result { width:var(--wk-business-result-card-width); display:flex; flex-direction:column; align-items:center; }
.wk-message-luckybag-card { position:relative; width:5.28rem; height:5.706667rem; box-sizing:border-box; overflow:hidden; border:0; border-radius:0.32rem; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:100% 100%; color:#fff; box-shadow:0 0.2564rem 0.615387rem rgba(164,17,27,.13); cursor:pointer; font-family:"PingFang SC","Helvetica Neue","Microsoft YaHei",-apple-system,sans-serif; }
.wk-message-luckybag-countdown { position:absolute; top:0.213333rem; right:0.266667rem; width:-moz-max-content; width:max-content; min-width:0; height:0.506667rem; display:flex; align-items:center; justify-content:center; gap:0.106667rem; padding:0.053333rem 0.16rem; box-sizing:border-box; border:.6px solid #f9d57d; border-radius:1.6rem; background:#fff; color:#da2428; font-family:"SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:0.32rem; line-height:1; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; letter-spacing:-.15px; }
.wk-message-luckybag-countdown img { width:0.32rem; height:0.32rem; flex:0 0 0.32rem; display:block; }
.wk-message-luckybag-countdown > span { display:block; white-space:nowrap; }
.wk-message-luckybag-status { position:absolute; top:0.213333rem; right:0.266667rem; min-width:1.28rem; height:0.506667rem; display:flex; align-items:center; justify-content:center; padding:0 0.186667rem; box-sizing:border-box; border:.6px solid #f9d57d; border-radius:1.6rem; background:#fff; color:#da2428; font-size:0.293333rem; font-weight:500; line-height:1; white-space:nowrap; }
.wk-message-luckybag-title { position:absolute; top:2.986667rem; right:0.133333rem; left:0.133333rem; overflow:hidden; color:#fff; font-size:0.48rem; font-weight:600; line-height:normal; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.wk-message-luckybag-amount { position:absolute; top:3.653333rem; right:0.133333rem; left:0.133333rem; height:0.906667rem; display:flex; align-items:flex-end; justify-content:center; gap:0.106667rem; color:transparent; background-image:linear-gradient(180deg,#fcf5de 23.635%,#ffc74f 116.3%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wk-message-luckybag-amount strong { font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif; font-size:0.746667rem; font-weight:800; line-height:1.202; letter-spacing:.28px; white-space:nowrap; }
.wk-message-luckybag-amount span { width:0.533333rem; height:0.746667rem; display:flex; align-items:center; font-size:0.426667rem; font-weight:600; line-height:1.202; }
.wk-message-luckybag-amount.is-long strong { font-size:0.613333rem; }
.wk-message-luckybag-amount.is-xlong strong { font-size:0.506667rem; }
.wk-message-luckybag-action { position:absolute; bottom:0.32rem; left:50%; width:3.253333rem; height:0.693333rem; display:grid; place-items:center; box-sizing:border-box; border-radius:26.64rem; background:linear-gradient(180deg,#ffe694,#ffc74f); color:#a61917; font-size:0.373333rem; font-weight:600; letter-spacing:.14px; box-shadow:0 0.128213rem 0.15384rem rgba(111,8,11,.23),inset 0 -0.026667rem 0.058667rem #feaf21,inset 0 .962px 0 #fff9d3; transform:translateX(-50%); }

.wk-message-luckybag-result { width:var(--wk-business-result-card-width); overflow:hidden; border:.9px solid #ede8e2; border-radius:0.266667rem; background:#fff; box-shadow:0 0.213333rem 0.853333rem rgba(85,58,41,.12); cursor:pointer; font-family:"PingFang SC","Helvetica Neue","Microsoft YaHei",-apple-system,sans-serif; }

.wk-message-luckybag-result-banner { height:2.08rem; display:flex; align-items:center; gap:0.266667rem; padding:0 0.32rem; box-sizing:border-box; background-color:#f8b537; background-position:center; background-size:cover; color:#fff; }
.wk-message-luckybag-result-banner img { width:1.12rem; height:1.12rem; flex:0 0 1.12rem; -o-object-fit:contain; object-fit:contain; }
.wk-message-luckybag-result-banner div { min-width:0; display:flex; flex-direction:column; gap:0.106667rem; }
.wk-message-luckybag-result-banner strong { overflow:hidden; font-size:0.48rem; font-weight:600; letter-spacing:.35px; text-overflow:ellipsis; white-space:nowrap; }
.wk-message-luckybag-result-banner span { overflow:hidden; color:#fff; font-size:0.293333rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.wk-message-luckybag-result-table { padding:0.266667rem 0.373333rem; }
.wk-message-luckybag-result-table.has-more { padding-bottom:0.106667rem; }
.wk-message-luckybag-result-head, .wk-message-luckybag-result-row { display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; padding:0; box-sizing:border-box; }
.wk-message-luckybag-result-head { height:0.693333rem; border-bottom:.9px solid #f1efec; color:#8b6e4d; font-size:0.32rem; font-weight:400; }
.wk-message-luckybag-result-head span:last-child, .wk-message-luckybag-result-row b { text-align:right; }
.wk-message-luckybag-result-body { height:1.12rem; height:var(--wk-luckybag-result-body-height,42px); overflow:hidden; }
.wk-message-luckybag-result-row { height:0.666667rem; border-bottom:.9px solid #f1efec; color:#1f2833; font-size:0.32rem; font-weight:400; }
.wk-message-luckybag-result-row:last-child { border-bottom:0; }
.wk-message-luckybag-result-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-message-luckybag-result-row b { color:#f13b31; font-weight:400; line-height:1; white-space:nowrap; }
.wk-message-luckybag-result-row b strong { font-size:0.346667rem; font-weight:600; letter-spacing:0.026667rem; }
.wk-message-luckybag-result-row b em { margin-left:0.026667rem; font-size:0.266667rem; font-style:normal; }
.wk-message-luckybag-result-empty { height:100%; display:grid; place-items:center; box-sizing:border-box; border-bottom:.9px solid #f1efec; color:#9d8f7e; font-size:0.32rem; }
.wk-message-luckybag-result-more { height:0.8rem; display:flex; align-items:center; justify-content:center; gap:0.106667rem; box-sizing:border-box; color:#8a7151; font-size:0.32rem; font-weight:400; transform:translateY(-0.026667rem); }
.wk-message-luckybag-result-more i { font-size:0.373333rem; font-style:normal; line-height:1; }

.wk-message-base-force-avatar { margin-bottom:0.213333rem; }
.wk-message-luckybag.scene-win { width:7.253333rem; overflow:hidden; box-sizing:border-box; border:0.026667rem solid #edd196; border-radius:0.32rem; background:#fffdf7; }
.wk-message-luckybag-win { display:flex; flex-direction:column; gap:0.16rem; padding-bottom:0.266667rem; box-sizing:border-box; cursor:pointer; font-family:"PingFang SC","Helvetica Neue","Microsoft YaHei",-apple-system,sans-serif; }
.wk-message-luckybag-win-banner { width:100%; height:3.68rem; min-height:3.68rem; display:flex; flex-direction:column; align-items:flex-start; padding:0.266667rem 0.32rem 0; box-sizing:border-box; overflow:hidden; background-color:#ffc13f; background-position:center; background-repeat:no-repeat; background-size:100% 100%; }
.wk-message-luckybag-win-kicker { height:0.453333rem; display:flex; align-items:center; justify-content:flex-start; gap:0.16rem; color:#d74b00; font-size:0.32rem; font-weight:500; line-height:0.453333rem; letter-spacing:0.0448rem; white-space:nowrap; }
.wk-message-luckybag-win-kicker i { width:0.453333rem; height:0.026667rem; flex:0 0 auto; background:#d74b00; opacity:.5; }
.wk-message-luckybag-win-title { height:0.586667rem; margin-top:0.08rem; color:#814100; font-size:0.426667rem; font-weight:600; line-height:0.586667rem; letter-spacing:.976px; white-space:nowrap; }
.wk-message-luckybag-win-context { width:100%; display:flex; flex-direction:column; align-items:flex-start; margin-top:0.053333rem; color:#794b00; font-size:0.373333rem; font-weight:500; line-height:0.586667rem; }
.wk-message-luckybag-win-context span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-message-luckybag-win-amount { width:100%; height:0.906667rem; display:flex; align-items:baseline; justify-content:flex-start; gap:0.106667rem; margin-top:0.026667rem; color:#6e4f2a; white-space:nowrap; }
.wk-message-luckybag-win-amount span { font-size:0.373333rem; font-weight:600; line-height:0.533333rem; }
.wk-message-luckybag-win-amount strong { min-width:0; color:#ed190f; font-family:"Akrobat","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; font-size:0.746667rem; font-weight:900; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; line-height:0.906667rem; letter-spacing:.38px; }
.wk-message-luckybag-win-amount strong.is-long { font-size:0.613333rem; }
.wk-message-luckybag-win-amount strong.is-xlong { font-size:0.506667rem; letter-spacing:-.2px; }
.wk-message-luckybag-win-info { min-height:0; display:flex; flex-direction:column; gap:0.213333rem; padding:0 0.32rem; box-sizing:border-box; }
.wk-message-luckybag-win-tip { display:flex; flex-direction:column; gap:0.16rem; color:#948a7d; font-size:0.32rem; font-weight:500; line-height:0.453333rem; white-space:nowrap; }
.wk-message-luckybag-win-tip.is-long { font-size:0.293333rem; }
.wk-message-luckybag-win-tip.is-xlong { font-size:0.266667rem; letter-spacing:-.1px; }
.wk-message-luckybag-win-tip i { width:100%; height:0.026667rem; flex:0 0 auto; background:#ede3cf; }
.wk-message-luckybag-win-footer { height:0.453333rem; display:flex; align-items:center; justify-content:space-between; color:#994021; font-size:0.32rem; }
.wk-message-luckybag-win-footer > span { display:flex; align-items:center; gap:0.106667rem; font-weight:600; line-height:0.453333rem; white-space:nowrap; }
.wk-message-luckybag-win-footer > span i { width:0.186667rem; height:0.186667rem; box-sizing:border-box; border-top:0.026667rem solid currentColor; border-right:0.026667rem solid currentColor; transform:rotate(45deg); }
.wk-message-luckybag-win-footer .messageMeta { width:auto; height:0.48rem; min-height:0; align-self:center; margin:0; line-height:0.48rem; }
.wk-message-luckybag-win-footer .messageTime { margin:0; color:#8f8a80 !important; font-size:0.32rem; font-weight:700; line-height:0.48rem; }

.wk-luckybag-mask { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:rgba(0,0,0,.45); color:#332923; cursor:default; }
.wk-luckybag-mask.join-mask { align-items:flex-end; background:rgba(0,0,0,.28); animation:wk-luckybag-mask-in .2s ease-out; }
.wk-luckybag-mask.join-mask.success-mask { align-items:center; background:rgba(0,0,0,.45); }
.wk-luckybag-mask.join-mask.is-closing { pointer-events:none; animation:wk-luckybag-mask-out .22s ease-in forwards; }
.wk-luckybag-join { position:relative; width:min(100%,11.466667rem); overflow:hidden; padding:0.746667rem 0 calc(0.293333rem + env(safe-area-inset-bottom)); box-sizing:border-box; border-radius:0.533333rem 0.533333rem 0 0; background:#fffaf0; box-shadow:0 -0.266667rem 1.493333rem rgba(28,35,46,.18); text-align:center; animation:wk-luckybag-sheet-in .3s cubic-bezier(.22,.82,.22,1); }
.wk-luckybag-mask.join-mask.is-closing .wk-luckybag-join { animation:wk-luckybag-sheet-out .26s cubic-bezier(.4,0,1,1) forwards; }
.wk-luckybag-join::before { position:absolute; top:-1.466667rem; right:-0.88rem; width:5.013333rem; height:5.013333rem; border:.85px solid rgba(199,134,27,.18); border-radius:50%; box-shadow:0 0 0 0.746667rem rgba(234,177,65,.06),0 0 0 1.466667rem rgba(234,177,65,.06); content:""; pointer-events:none; }
.wk-luckybag-join > * { position:relative; z-index:1; }
.wk-luckybag-join-head { height:0.906667rem; display:flex; align-items:center; padding:0 0.693333rem; }
.wk-luckybag-join h2 { min-width:0; margin:0; overflow:hidden; color:#3e321b; font-size:0.586667rem; font-weight:600; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.wk-luckybag-join-close { position:absolute; top:-0.213333rem; right:0.4rem; width:0.906667rem; height:0.906667rem; display:grid; place-items:center; padding:0 0 0.053333rem; border:0; background:transparent; color:#8f7955; font-size:0.72rem; font-weight:300; line-height:1; cursor:pointer; }
.wk-luckybag-join-countdown { height:1.866667rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.053333rem; margin:0.32rem 0; }
.wk-luckybag-join-countdown span { color:#8f7955; font-size:0.373333rem; font-weight:500; }
.wk-luckybag-join-countdown strong { height:1.333333rem; display:flex; align-items:center; color:#d96c36; font-family:"SF Pro Rounded","Helvetica Neue",Arial,sans-serif; font-size:1.12rem; font-weight:800; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; letter-spacing:0.026667rem; }
.wk-luckybag-join-countdown.drawn strong { height:1.866667rem; color:#d24e48; font-size:0.853333rem; font-weight:700; }
.wk-luckybag-join-stat { height:2.08rem; display:flex; flex-direction:column; justify-content:center; gap:0.32rem; margin:0 0.586667rem 0.32rem; padding:0.266667rem 0.426667rem; box-sizing:border-box; border:0.026667rem solid rgba(235,207,153,.52); border-radius:0.32rem; background:rgba(255,255,255,.7); box-shadow:0 0.128rem 0.613333rem rgba(239,165,60,.08); }
.wk-luckybag-join-stat-amount { display:flex; align-items:baseline; justify-content:center; gap:0.186667rem; color:#273042; white-space:nowrap; }
.wk-luckybag-join-stat-amount span { font-size:0.533333rem; font-weight:600; }
.wk-luckybag-join-stat-amount strong { max-width:48%; overflow:hidden; color:#d24e48; font-family:"Arial Narrow","Roboto Condensed","SF Pro Rounded","Helvetica Neue",Arial,sans-serif; font-size:0.72rem; font-weight:800; letter-spacing:.38px; text-overflow:ellipsis; }
.wk-luckybag-join-stat-amount strong.is-long { font-size:0.586667rem; }
.wk-luckybag-join-stat-amount strong.is-xlong { font-size:0.453333rem; letter-spacing:-.25px; }
.wk-luckybag-join-stat-meta { display:flex; align-items:center; justify-content:center; gap:0.346667rem; color:#b7642a; font-size:0.373333rem; }
.wk-luckybag-join-stat-meta i { width:0.026667rem; height:0.36rem; background:#dbb17e; }
.wk-luckybag-join-btn { width:calc(100% - 1.173333rem); height:1.44rem; margin:0 0.586667rem; border:0; border-radius:0.32rem; background:linear-gradient(135deg,#f4c553,#e79b23); color:#fff; font-size:0.48rem; font-weight:600; letter-spacing:0.0368rem; box-shadow:0 0.256rem 0.464rem rgba(217,145,25,.22); cursor:pointer; }
.wk-luckybag-join-btn:disabled { opacity:.5; cursor:default; }
.wk-luckybag-join-tip { margin:0.346667rem 0.586667rem 0; color:#f25643; font-size:0.306667rem; }
.wk-luckybag-join-foot { min-height:0.373333rem; display:flex; align-items:center; justify-content:center; gap:0.053333rem; margin-top:0.346667rem; color:#9b896e; font-size:0.306667rem; }
.wk-luckybag-join-foot i { width:0.32rem; height:0.32rem; display:grid; place-items:center; box-sizing:border-box; border:0.026667rem solid currentColor; border-radius:50%; font:0.24rem/1 serif; }

.wk-luckybag-success { width:min(8.8rem,calc(100% - 1.706667rem)); padding:0.666667rem 0.586667rem 0.533333rem; box-sizing:border-box; border-radius:0.373333rem; background:#fff; color:#273042; text-align:center; box-shadow:0 0.266667rem 1.066667rem rgba(0,0,0,.16); animation:wk-luckybag-dialog-in .25s cubic-bezier(.22,.82,.22,1); }
.wk-luckybag-mask.join-mask.is-closing .wk-luckybag-success { animation:wk-luckybag-dialog-out .22s ease-in forwards; }
.wk-luckybag-success h3 { margin:0; font-size:0.48rem; font-weight:500; }
.wk-luckybag-success p { margin:0.32rem 0 0; font-size:0.453333rem; font-weight:400; }
.wk-luckybag-success button { width:100%; height:1.386667rem; margin-top:0.64rem; border:0; border-radius:0.32rem; background:linear-gradient(90deg,#ffc34c,#f68b23); color:#fff; font-size:0.48rem; font-weight:600; letter-spacing:0.026667rem; cursor:pointer; }
@keyframes wk-luckybag-sheet-in { from { transform:translateY(102%); } to { transform:translateY(0); } }
@keyframes wk-luckybag-sheet-out { from { transform:translateY(0); } to { transform:translateY(102%); } }
@keyframes wk-luckybag-mask-in { from { opacity:0; } to { opacity:1; } }
@keyframes wk-luckybag-mask-out { from { opacity:1; } to { opacity:0; } }
@keyframes wk-luckybag-dialog-in { from { opacity:0; transform:translateY(0.373333rem) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes wk-luckybag-dialog-out { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(0.373333rem) scale(.96); } }

.wk-luckybag-mask.detail-mask { background:rgba(0,0,0,.28); animation:wk-luckybag-mask-in .2s ease-out; }
.wk-luckybag-mask.detail-mask.is-closing { pointer-events:none; animation:wk-luckybag-mask-out .2s ease-in forwards; }
.wk-luckybag-detail-wrap { container-type:inline-size; width:min(9.333333rem,calc(100vw - 0.853333rem),calc((100vh - 1.44rem) * .6286837)); display:flex; flex-direction:column; align-items:center; gap:2.285714cqw; transform-origin:center; will-change:transform,opacity; animation:wk-luckybag-detail-in .28s cubic-bezier(.22,1,.36,1); }
.wk-luckybag-mask.detail-mask.is-closing .wk-luckybag-detail-wrap { animation:wk-luckybag-detail-out .2s cubic-bezier(.4,0,1,1) forwards; }
@keyframes wk-luckybag-detail-in { from { opacity:0; transform:translateY(0.426667rem) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes wk-luckybag-detail-out { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(0.32rem) scale(.98); } }
.wk-luckybag-mask.result-notice-mask { background:rgba(0,0,0,.62); }
.wk-luckybag-result-notice-wrap { container-type:inline-size; width:min(8.8rem,calc(100vw - 1.28rem),calc((100vh - 0.426667rem) * .6226415)); display:flex; flex-direction:column; align-items:center; gap:4.848485cqw; }
.wk-luckybag-detail { position:relative; width:100%; aspect-ratio:320/509; min-height:0; flex:0 0 auto; box-sizing:border-box; background-position:center; background-repeat:no-repeat; background-size:100% 100%; filter:drop-shadow(0 3.428571cqw 5.142857cqw rgba(0,0,0,.26)); }
.wk-luckybag-detail h2 { position:absolute; top:8.285714cqw; right:0; left:0; margin:0; color:transparent; background:linear-gradient(180deg,#feeebd 0%,#fdcc5a 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:9.142857cqw; font-weight:900; line-height:1.2; text-align:center; filter:drop-shadow(0 .571429cqw 0 rgba(118,19,10,.52)); }
.wk-luckybag-detail-summary { position:absolute; top:30.857143cqw; right:0; left:0; min-height:5.142857cqw; display:flex; align-items:center; justify-content:center; gap:2.857143cqw; margin:0; color:#7e2312; font-size:4.285714cqw; font-weight:500; line-height:1.2; text-align:center; white-space:nowrap; }
.wk-luckybag-detail-summary i { width:6.857143cqw; height:.285714cqw; flex:0 0 auto; background:rgba(211,123,92,.5); }
.wk-luckybag-detail-summary strong { font-weight:900; }
.wk-luckybag-detail-table { position:absolute; top:41.428571cqw; left:50%; width:90.857143cqw; height:111.428571cqw; display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; border:.285714cqw solid #efbea1; border-radius:2.857143cqw; background:rgba(255,255,255,.72); transform:translateX(-50%); }
.wk-luckybag-detail-table-head { height:11.142857cqw; min-height:11.142857cqw; display:grid; grid-template-columns:minmax(0,1fr) 33.142857cqw; grid-column-gap:2.285714cqw; -moz-column-gap:2.285714cqw; column-gap:2.285714cqw; align-items:center; padding:0 4cqw; box-sizing:border-box; color:#7e2312; font-size:4.285714cqw; font-weight:700; }
.wk-luckybag-detail-table-head::after { position:absolute; top:11.142857cqw; right:2.285714cqw; left:2.285714cqw; height:.285714cqw; background:#f0d2bf; content:""; }
.wk-luckybag-detail-table.has-join .wk-luckybag-detail-table-head::after { top:24.857143cqw; }
.wk-luckybag-detail-table-head span:last-child, .wk-luckybag-detail-item b { text-align:right; }
.wk-luckybag-detail-list { position:relative; flex:1 1; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.wk-luckybag-detail-item { position:relative; height:10.571429cqw; min-height:10.571429cqw; display:grid; grid-template-columns:minmax(0,1fr) 33.142857cqw; grid-column-gap:2.285714cqw; -moz-column-gap:2.285714cqw; column-gap:2.285714cqw; align-items:center; padding:0 4cqw; box-sizing:border-box; color:#2b2725; font-size:4.285714cqw; font-weight:600; }
.wk-luckybag-detail-item:nth-child(even) { background:rgba(253,243,231,.82); }
.wk-luckybag-detail-item::after { position:absolute; right:2.285714cqw; bottom:0; left:2.285714cqw; height:.285714cqw; background:rgba(242,222,209,.72); content:""; }
.wk-luckybag-detail-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-luckybag-detail-item b { min-width:0; display:flex; align-items:baseline; justify-content:flex-end; gap:1.714286cqw; color:#2b2725; font-weight:700; white-space:nowrap; }
.wk-luckybag-detail-item b strong { min-width:0; overflow:hidden; font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif; text-overflow:ellipsis; }
.wk-luckybag-detail-item b em { color:#8e847e; font-size:4cqw; font-style:normal; font-weight:500; }
.wk-luckybag-detail-join { width:calc(100% - 8cqw); height:9.714286cqw; min-height:9.714286cqw; margin:2.285714cqw 4cqw 1.714286cqw; padding:0; border:0; border-radius:26.64rem; background:linear-gradient(90deg,#ffa441,#e75238); color:#fff; font-size:4cqw; font-weight:600; cursor:pointer; }
.wk-luckybag-detail-empty, .wk-luckybag-detail-error { height:100%; display:flex; align-items:center; justify-content:center; padding:0 5.142857cqw; box-sizing:border-box; color:#ab8565; font-size:4.285714cqw; font-weight:600; text-align:center; }
.wk-luckybag-detail-loading { position:absolute; top:50%; left:50%; width:5.714286cqw; height:5.714286cqw; margin:-2.857143cqw; box-sizing:border-box; border:.571429cqw solid rgba(212,79,54,.22); border-top-color:#d44f36; border-radius:50%; animation:wk-luckybag-spin .75s linear infinite; }
.wk-luckybag-detail-more-loading { position:sticky; bottom:2.285714cqw; width:9.714286cqw; height:6.285714cqw; display:grid; place-items:center; margin:-6.285714cqw auto 0; border-radius:26.64rem; background:rgba(255,250,244,.84); -webkit-backdrop-filter:blur(0.16rem); backdrop-filter:blur(0.16rem); }
.wk-luckybag-detail-more-loading i { width:3.714286cqw; height:3.714286cqw; box-sizing:border-box; border:.428571cqw solid rgba(212,79,54,.22); border-top-color:#d44f36; border-radius:50%; animation:wk-luckybag-spin .75s linear infinite; }
.wk-luckybag-detail-wrap .wk-luckybag-round-close { width:8.571429cqw; height:8.571429cqw; flex:0 0 8.571429cqw; padding:0 0 .571429cqw; border:.571429cqw solid #ffe8a4; background:transparent; color:#ffe8a4; font-size:4.857143cqw; font-weight:600; }
@keyframes wk-luckybag-spin { to { transform:rotate(360deg); } }
.wk-luckybag-round-close { width:1.12rem; height:1.12rem; flex:0 0 1.12rem; display:grid; place-items:center; padding:0 0 0.08rem; border:0.026667rem solid rgba(255,255,255,.78); border-radius:50%; background:rgba(0,0,0,.2); color:#fff; font-size:0.773333rem; font-weight:200; line-height:1; cursor:pointer; }

.wk-luckybag-result-notice { position:relative; width:100%; aspect-ratio:330/488; flex:0 0 auto; overflow:hidden; box-sizing:border-box; border-radius:9.090909cqw; background-position:center; background-repeat:no-repeat; background-size:100% 100%; color:#feefcc; text-align:center; box-shadow:0 3.030303cqw 5.454545cqw rgba(0,0,0,.28); animation:wk-luckybag-dialog-in .28s cubic-bezier(.22,.82,.22,1); }
.wk-luckybag-result-notice h2 { position:absolute; top:8.939394cqw; left:50%; width:72.727273cqw; height:10.909091cqw; display:flex; align-items:center; justify-content:center; margin:0; color:transparent; background:linear-gradient(180deg,#feeebd,#fdcc5a); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:9.090909cqw; font-weight:700; letter-spacing:.30303cqw; line-height:10.909091cqw; filter:drop-shadow(0 .606061cqw .30303cqw #b41003); transform:translateX(-50%); white-space:nowrap; }
.wk-luckybag-result-notice > p { position:absolute; top:90.757576cqw; left:50%; width:75.757576cqw; height:9.090909cqw; display:flex; align-items:center; justify-content:center; margin:0; overflow:hidden; color:#feefcc; font-size:6.060606cqw; font-weight:700; letter-spacing:.30303cqw; line-height:9.090909cqw; text-overflow:ellipsis; filter:drop-shadow(0 .909091cqw .454545cqw #920b00); transform:translateX(-50%); white-space:nowrap; }
.wk-luckybag-result-amount { position:absolute; top:100.30303cqw; left:50%; width:75.757576cqw; height:15.151515cqw; display:flex; align-items:baseline; justify-content:center; gap:2.424242cqw; color:transparent; background:linear-gradient(180deg,#feeebd,#fdcc5a); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 .909091cqw .454545cqw #920b00); transform:translateX(-50%); white-space:nowrap; }
.wk-luckybag-result-amount strong { flex:0 1 auto; min-width:0; font-family:"SF Pro Rounded","Helvetica Neue",Arial,sans-serif; font-size:12.121212cqw; font-weight:900; font-feature-settings:"tnum"; font-variant-numeric:tabular-nums; line-height:15.151515cqw; }
.wk-luckybag-result-amount span { font-size:7.272727cqw; font-weight:700; line-height:12cqw; }
.wk-luckybag-result-again { position:absolute; top:97.424242cqw; left:50%; width:75.757576cqw; height:12.121212cqw; display:flex; align-items:center; justify-content:center; color:#feefcc; font-size:9.69697cqw; font-weight:700; letter-spacing:.30303cqw; line-height:12.121212cqw; filter:drop-shadow(0 .909091cqw .454545cqw #920b00); transform:translateX(-50%); white-space:nowrap; }
.wk-luckybag-result-actions { position:absolute; top:118.181818cqw; left:50%; width:75.757576cqw; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); }
.wk-luckybag-result-actions.has-require-bet { top:115.454545cqw; }
.wk-luckybag-result-require-bet { width:100%; height:4.848485cqw; display:flex; align-items:center; justify-content:center; margin:0 0 1.515152cqw; color:#f2ebe3; font-size:min(0.32rem,3.636364cqw); font-weight:400; line-height:4.848485cqw; white-space:nowrap; filter:drop-shadow(0 .454545cqw .30303cqw rgba(146,11,0,.72)); }
.wk-luckybag-result-require-bet.is-long { font-size:min(0.293333rem,3.333333cqw); }
.wk-luckybag-result-require-bet.is-xlong { font-size:min(0.266667rem,3.030303cqw); letter-spacing:-.05cqw; }
.wk-luckybag-result-records { width:61.212121cqw; height:13.939394cqw; flex:0 0 13.939394cqw; display:grid; place-items:center; margin:0 0 3.333333cqw; padding:0; border:0; border-radius:26.64rem; background:linear-gradient(180deg,#fbe7ae,#ec9843); color:#ad170a; font-size:6.060606cqw; font-weight:600; letter-spacing:.419576cqw; box-shadow:0 2.913636cqw 5.243636cqw rgba(217,145,25,.22); cursor:pointer; }
/* 中奖弹窗操作区止于背景图内侧底线（330px 基准距底部约 13px）。 */
.wk-luckybag-result-notice.won .wk-luckybag-result-actions { bottom:3.939394cqw; }
.wk-luckybag-result-notice.won .wk-luckybag-result-records { margin-bottom:0; }
.wk-luckybag-result-detail { width:65.454545cqw; height:6.666667cqw; flex:0 0 6.666667cqw; display:flex; align-items:center; justify-content:center; gap:2.424242cqw; padding:0; border:0; background:transparent; color:#feefcc; font-size:4.242424cqw; font-weight:500; filter:drop-shadow(0 .909091cqw .454545cqw #920b00); cursor:pointer; }
/* 有/无打码提示分别保留各自的顶部位置，详情行填满按钮底部到底线的剩余空间并居中。 */
.wk-luckybag-result-notice.won .wk-luckybag-result-detail { height:auto; min-height:0; flex:1 1; }
.wk-luckybag-result-detail span { font-size:5.151515cqw; font-weight:700; line-height:1; }
.wk-luckybag-result-notice-wrap .wk-luckybag-round-close { width:7.878788cqw; height:7.878788cqw; flex:0 0 7.878788cqw; padding:0; border:0; background:transparent; font-size:0; }
.wk-luckybag-result-close img { width:100%; height:100%; display:block; -o-object-fit:contain; object-fit:contain; pointer-events:none; }

/*
 * 群聊顶部未开奖/开奖未满 24 小时的福袋悬浮活动条（沿用 Figma 3161-61771 的四格布局）。
 * 稿上：内容区 padding 8px 14px 0、gap 10px；活动条容器宽 347、padding 2px 0、gap 2px、圆角 12；
 *       内层列 row、gap 4.81px，正好排 4 个；单个胶囊 padding 2px 4px 1px、底色 #E6EAF1、圆角 8、
 *       阴影 0 3px 12px rgba(50,70,99,.1)。
 * 消息列表的顶部留白（.wk-conversation-messages-has-luckybagbar）与这里的 --wk-luckybag-bar 联动，
 * 改高度两边一起改。
 */
:root {
    --wk-luckybag-bar: 1.76rem;
    --wk-luckybag-bar-gap: 0.128267rem;
}

.wk-luckybag-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 24; /* 低于置顶条（25），高于消息列表 */
    padding: 0.213333rem 0.373333rem 0;
    box-sizing: border-box;
    pointer-events: none; /* 容器透明；胶囊之间的空隙照常把触摸交给下面的消息列表 */
}

/* 置顶条存在时排在它下方（置顶条高 50px，见 Conversation/index.css） */
.wk-luckybag-bar-below-pinned {
    top: 1.333333rem;
}

.wk-luckybag-bar-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.128267rem;
    gap: var(--wk-luckybag-bar-gap);
    width: 100%;
    max-width: 9.253333rem;
    height: 1.76rem;
    height: var(--wk-luckybag-bar);
    padding: 0.053333rem 0;
    border-radius: 0.32rem;
    box-sizing: border-box;
}

/* 胶囊统一预留 HH:MM:SS 的宽度，不随时间格式或开奖状态变化，也不拉伸填满容器。 */
.wk-luckybag-bar-slot {
    flex: 0 0 auto;
    min-width: 0;
    pointer-events: auto;
}

.wk-luckybag-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(1.76rem - 0.106667rem);
    height: calc(66px - 0.106667rem);
    height: calc(var(--wk-luckybag-bar) - 0.106667rem);
    width: 1.493333rem; /* 预留 48px 内容宽度，容纳 HH:MM:SS；两侧 padding 各 4px。 */
    padding: 0.053333rem 0.106667rem 0.026667rem;
    box-sizing: border-box;
    background: #e6eaf1;
    border-radius: 0.213333rem;
    box-shadow: 0 0.08rem 0.32rem rgba(50, 70, 99, 0.1);
    cursor: pointer;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.wk-luckybag-bar-item:active {
    filter: brightness(0.96);
}

.wk-luckybag-bar-item-icon {
    width: 0.96rem;
    height: 0.96rem;
    flex: 0 0 0.96rem;
    -o-object-fit: contain;
       object-fit: contain;
    pointer-events: none;
}

/* 状态徽标压在图标底部（稿上徽标顶边 31px，图标高 36px） */
.wk-luckybag-bar-item-status {
    margin-top: -0.133333rem;
    padding: 0 0.106667rem;
    border-radius: 0.106667rem;
    font-size: 0.266667rem;
    line-height: 0.373333rem;
    white-space: nowrap;
    background: #e9f3ff;
    color: #147fe8;
}

.wk-luckybag-bar-item.is-joined .wk-luckybag-bar-item-status {
    background: #f9f2df;
    color: #864800;
}

.wk-luckybag-bar-item.is-drawn .wk-luckybag-bar-item-status {
    background: #fae5e3;
    color: #d24e48;
}

.wk-luckybag-bar-item-time {
    margin-top: 0.053333rem;
    font-size: 0.266667rem;
    line-height: 0.32rem;
    color: #8c9bb1;
    white-space: nowrap;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

body[theme-mode=dark] .wk-luckybag-bar-item {
    background: rgba(38, 45, 58, 0.92);
    box-shadow: 0 0.08rem 0.32rem rgba(0, 0, 0, 0.3);
}

body[theme-mode=dark] .wk-luckybag-bar-item-time {
    color: #a3adbd;
}

/* ============================================================================
 * 群红包·领取详情页
 * 视觉来源：Figma「6-03红包详情」node 2607-20568（切图 node 2621-20905）
 *
 * 设计稿是 375 移动整页：白色导航条 → 220 高红色 hero → 提示条 → 领取记录标题行 →
 * 记录卡片。除 hero 固定 220 外，卡片吃掉剩余高度并在内部滚动（设计稿卡片本身就是
 * overflow-y:auto），触底翻页。
 *
 * 页面挂在 `WKApp.routeRight` 栈上（`.wk-viewqueue-view` 是 absolute inset:0），
 * 故根节点取 100%×100% 填满即可。宽屏下整页会被拉宽，左右留白用 `--wk-rpd-gutter`
 * 兜底：窄屏＝设计稿的 16px，宽屏自动把内容收进 480px 居中（与发红包页同款）。
 *
 * 设计稿右上角的 `✕` 不渲染：本页是栈式导航的一层，返回箭头即全部退出语义，两个按钮
 * 行为完全相同属冗余（与 Pages/Redpacket、Pages/MyRecords 同款取舍）。刷新按钮因此
 * 顶到最右，保持设计稿 14px 的右边距。
 * ========================================================================== */

.wk-rpd,
.wk-rpd *,
.wk-rpd *::before,
.wk-rpd *::after {
  box-sizing: border-box;
}

.wk-rpd {
  --wk-rpd-gutter: max(0.426667rem, calc((100% - 12.8rem) / 2));

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f7f8fb;
  color: #202a3c;
  /* 交付说明第五节指定的 fallback 链：PingFang SC → Noto Sans SC → 系统无衬线 */
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ---- 导航条 ---- */

.wk-rpd-header-refresh.is-loading img {
  animation: wk-rpd-spin 0.8s linear infinite;
}
@keyframes wk-rpd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- 红包头部 ---- */

.wk-rpd-hero {
  position: relative;
  flex-shrink: 0;
  height: 5.866667rem;
  overflow: hidden;
  background-image: linear-gradient(156.15deg, #fb7964 14.28%, #ed554d 54.96%, #d83c43 85.65%);
}
/* 设计稿的两枚装饰圆环是 1px 描边的正圆，用边框实现，省两张切图 */
.wk-rpd-hero-ring {
  position: absolute;
  border: 0.026667rem solid rgba(255, 236, 201, 0.38);
  border-radius: 50%;
  pointer-events: none;
}
.wk-rpd-hero-ring-a {
  left: 6.266667rem;
  top: -4rem;
  width: 8rem;
  height: 8rem;
}
.wk-rpd-hero-ring-b {
  left: -2.4rem;
  top: 2.933333rem;
  width: 5.866667rem;
  height: 5.866667rem;
}
/* 宽屏下 hero 被拉宽，圆环按设计稿贴 375 画板的左右两侧走 */
@media (min-width: 376px) {
  .wk-rpd-hero-ring-a {
    left: auto;
    right: -4.266667rem;
  }
}

.wk-rpd-hero-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.213333rem;
  padding: 0.48rem 0.426667rem 0;
}
.wk-rpd-avatar {
  display: block;
  width: 1.706667rem;
  height: 1.706667rem;
  border-radius: 0.314133rem;
  background: #fff2d1;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0.093333rem 0.218667rem 0 rgba(35, 55, 93, 0.07);
}
.wk-rpd-sender {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  max-width: 100%;
}
.wk-rpd-sender-name {
  overflow: hidden;
  font-size: 0.373333rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 类型徽标：设计稿在本页单独重画过（圆角 8、渐变略深于弹窗那枚），故用 CSS 直出不引切图 */
.wk-rpd-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.746667rem;
  height: 0.746667rem;
  border-radius: 0.213333rem;
  background-image: linear-gradient(143deg, #f9ae4b 14.28%, #f39f3f 85.65%);
  font-size: 0.346667rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.wk-rpd-hero-title {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.346667rem;
  line-height: 0.426667rem;
  color: #fff2c5;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-rpd-amount {
  display: flex;
  align-items: baseline;
  gap: 0.16rem;
  padding-top: 0.16rem;
  max-width: 100%;
}
.wk-rpd-amount-label,
.wk-rpd-amount-unit {
  flex-shrink: 0;
  font-size: 0.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff8ed;
}
.wk-rpd-amount-value {
  overflow: hidden;
  font-size: 1.066667rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 设计稿样例 1000.234（8 位）；金额上不封顶，位数多了按档缩字 */
.wk-rpd-amount-value.is-long {
  font-size: 0.853333rem;
}
.wk-rpd-amount-value.is-xlong {
  font-size: 0.693333rem;
}
.wk-rpd-soldout {
  padding-top: 0.32rem;
  font-size: 0.693333rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.026667rem;
  color: #fff;
}
.wk-rpd-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.053333rem;
}
.wk-rpd-expired-title {
  margin: 0;
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
  font-size: 0.586667rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.026667rem;
  color: #fff;
}
.wk-rpd-expired-refund {
  display: flex;
  max-width: 100%;
  align-items: flex-end;
  justify-content: center;
  gap: 0.053333rem;
  font-size: 0.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff8ed;
  white-space: nowrap;
}
.wk-rpd-expired-refund strong {
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 0.693333rem;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  text-overflow: ellipsis;
  transform: translateY(0.053333rem);
}
.wk-rpd-expired-refund strong.is-long {
  font-size: 0.586667rem;
}
.wk-rpd-expired-refund strong.is-xlong {
  font-size: 0.48rem;
}

/* ---- 主体 ---- */

.wk-rpd-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.373333rem;
  padding: 0.373333rem var(--wk-rpd-gutter) 0.426667rem;
}

/* 提示条 */
.wk-rpd-tip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  min-height: 0.746667rem;
  padding: 0.106667rem 0.32rem;
  border: 0.026667rem solid #f1e8de;
  border-radius: 0.213333rem;
  background-image: linear-gradient(90deg, #fffaf3 0%, #fff 100%);
  font-size: 0.32rem;
  line-height: 1.2;
  color: #788395;
}
.wk-rpd-tip-dot {
  flex-shrink: 0;
  width: 0.133333rem;
  height: 0.133333rem;
  border-radius: 0.064rem;
  background: #f2ad42;
  box-shadow: 0 0 0 0.053333rem rgba(255, 141, 40, 0.13);
}
.wk-rpd-tip-received .wk-rpd-tip-dot {
  background: #35c759;
  box-shadow: 0 0 0 0.053333rem rgba(53, 199, 89, 0.13);
}
.wk-rpd-tip em {
  font-style: normal;
  color: #cb3633;
}

/* 领取记录标题行 */
.wk-rpd-stat {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.213333rem;
  min-height: 0.48rem;
}
.wk-rpd-stat-title {
  flex-shrink: 0;
  font-size: 0.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: #202b3c;
}
.wk-rpd-stat-sum {
  flex: 1 1;
  min-width: 0;
  font-size: 0.32rem;
  line-height: 1.2;
  text-align: right;
  color: #8390a4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.wk-rpd-stat-sum.is-million {
  font-size: 0.293333rem;
  letter-spacing: -0.1px;
}
.wk-rpd-stat-received {
  color: #202b3c;
}
.wk-rpd-stat-sum.is-ten-million {
  font-size: 0.266667rem;
  letter-spacing: -0.15px;
}
.wk-rpd-stat-sum.is-hundred-million {
  font-size: 0.24rem;
  letter-spacing: -0.2px;
}

/* 记录卡片随内容增高，最多展示 7 条；超过后由内部列表滚动并触发分页。
 * 小屏仍允许卡片收缩，避免内容越出视口。 */
.wk-rpd-card {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 11.2rem; /* 表头 40 + 7 × 54 + 边框 */
  display: flex;
  flex-direction: column;
  padding: 0 0.373333rem;
  overflow: hidden;
  border: 0.026667rem solid rgba(229, 233, 239, 0.9);
  border-radius: 0.373333rem;
  background: #fff;
  box-shadow: 0 0.266667rem 0.346667rem 0 rgba(45, 54, 75, 0.04);
}
.wk-rpd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.8rem minmax(0, 1fr);
  align-items: center;
  flex-shrink: 0;
  border-bottom: 0.026667rem solid #eff1f4;
}
.wk-rpd-row-head {
  height: 1.066667rem;
  font-size: 0.346667rem;
  font-weight: 500;
  color: #8390a4;
}
.wk-rpd-row-item {
  height: 1.44rem;
}
.wk-rpd-row-item:last-child {
  border-bottom: 0;
}
/* 两侧等宽，让领取时间整列始终落在卡片正中；用户靠左、金额靠右。 */
.wk-rpd-col-user {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-rpd-col-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.053333rem;
  text-align: center;
}
.wk-rpd-col-amount {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.053333rem;
  min-width: 0;
}
.wk-rpd-row-item .wk-rpd-col-user {
  font-size: 0.373333rem;
  font-weight: 500;
  color: #202a3c;
}
.wk-rpd-col-time-date {
  font-size: 0.346667rem;
  color: #202a3c;
}
.wk-rpd-col-time-clock {
  font-size: 0.293333rem;
  color: #8390a4;
}
.wk-rpd-col-amount-value {
  min-width: 0;
  overflow: hidden;
  font-size: 0.48rem;
  font-weight: 700;
  color: #202a3c;
  font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wk-rpd-col-amount-value.is-hundred-thousand {
  font-size: 0.4rem;
}
.wk-rpd-col-amount-value.is-million {
  font-size: 0.373333rem;
  letter-spacing: -0.1px;
}
.wk-rpd-col-amount-value.is-ten-million {
  font-size: 0.346667rem;
  letter-spacing: -0.2px;
}
.wk-rpd-col-amount-value.is-hundred-million {
  font-size: 0.32rem;
  letter-spacing: -0.25px;
}
.wk-rpd-col-amount-unit {
  flex: 0 0 auto;
  font-size: 0.32rem;
  color: #202a3c;
}

.wk-rpd-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 10.08rem; /* 7 条记录 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wk-rpd-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.866667rem;
  font-size: 0.373333rem;
  color: #8390a4;
}
/* 翻页时的局部转圈（FD-18） */
.wk-rpd-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0;
}

/* ============================================================================
 * 群红包：消息卡片 + 抢红包/结果弹窗
 *
 * 视觉来源：Figma「6-02红包入口」node 2603-70882（切图 node 2603-70883 → ../../assets/redpacket/）
 *   1抢红包入口1/2 → 卡片可领态 / 已领态
 *   2抢红包        → 封面（未开）
 *   3已派完-未抢到 / 4已领取过红包 → 结果·失败（浅色信封）
 *   5已抢到        → 结果·成功（开封信封 + 光晕纸屑）
 *
 * 布局取自设计稿的 375×812 画板，弹窗按「切图坐标系」摆位——
 * 即以整张信封切图的左上角为原点，省掉一层画板换算：
 *   - 未开/失败态切图 286×381，画板 (44,175) 处落图（信封本体 280×375 在图内 (3,3)）
 *   - 成功态切图 375×481，画板 (0,76) 处落图
 * 下方 ✕ 在画板 y=584.94，两种切图底边分别是 556 / 557，故统一取 28px 间距（差 <1px）。
 *
 * 「查看领取详情」跳到整页 `Pages/Redpacket/detail`（Figma「6-03红包详情」node 2607-20568），
 * 本文件不再有详情弹窗样式。
 * ========================================================================== */

.wk-message-redpacket,
.wk-message-redpacket *,
.wk-redpacket-mask,
.wk-redpacket-mask * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- 消息卡片 */

.wk-message-redpacket {
  position: relative;
  width: 7.253333rem;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  /* 设计稿画的是「我发出」的红包：右下角贴气泡尾巴不倒角，收到的镜像过来 */
  border-radius: 0.266667rem 0.266667rem 0 0.266667rem;
  font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, Arial, sans-serif;
}
.wk-message-redpacket.recv {
  border-radius: 0 0.266667rem 0.266667rem 0.266667rem;
}

.wk-message-redpacket-main {
  display: flex;
  align-items: center;
  gap: 0.426667rem;
  height: 1.92rem;
  padding: 0 0.373333rem;
  background: #f96855;
}
.wk-message-redpacket-icon {
  display: block;
  flex-shrink: 0;
  width: 0.906667rem;
  height: 1.12rem;
}
.wk-message-redpacket-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.053333rem;
  color: #fff;
  line-height: 0.533333rem;
}
.wk-message-redpacket-title {
  font-size: 0.426667rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-message-redpacket-state {
  font-size: 0.32rem;
}

.wk-message-redpacket-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.666667rem;
  padding: 0 0.426667rem;
  background: #fff;
  font-size: 0.32rem;
  line-height: 0.426667rem;
}
.wk-message-redpacket-bottom-flag {
  color: #8e8e93;
}
.wk-message-redpacket-bottom-time {
  display: flex;
  align-items: center;
  height: 100%;
  color: #d0d1db;
}
.wk-message-redpacket-bottom-time .messageMeta {
  width: auto;
  min-height: 0;
  margin: 0;
  align-self: center;
  line-height: 0.426667rem;
}
.wk-message-redpacket-bottom-time .messageTime {
  margin-inline-end: 0;
  line-height: 0.426667rem;
}

/* 已领取 / 已领完 / 已过期共用设计稿的压白蒙层 */
.wk-message-redpacket.is-void::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.92rem;
  border-radius: inherit inherit 0 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* ------------------------------------------------------------ 弹窗：外壳 */

.wk-redpacket-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
  font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, Arial, sans-serif;
  animation: wk-redpacket-mask-in 180ms ease-out;
}

.wk-redpacket-mask.is-closing {
  pointer-events: none;
  animation: wk-redpacket-mask-out 200ms ease-in forwards;
}

.wk-redpacket-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center;
  will-change: translate, opacity;
  animation: wk-redpacket-dialog-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wk-redpacket-mask.is-closing .wk-redpacket-dialog {
  animation: wk-redpacket-dialog-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes wk-redpacket-mask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-redpacket-mask-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wk-redpacket-dialog-in { from { opacity: 0; translate: 0 0.426667rem; } to { opacity: 1; translate: 0 0; } }
@keyframes wk-redpacket-dialog-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 0.32rem; } }
/* 设计稿按 375×812 画板给的是绝对坐标，Web 端视口高度不定，故改为整体居中。
 * 但成功态切图在信封上方多带了 88px 透明光晕，直接居中会让信封在「封面→已抢到」
 * 之间往下跳 43.5px——用负外边距把这份透明高度抵掉，三态信封落点保持一致。 */
.wk-redpacket-dialog.is-ok {
  margin-top: -2.32rem;
}
/* 设计稿按 375×812 画板出图，窄屏/矮窗口整体缩一档，别让信封被裁 */
@media (max-width: 374px) {
  .wk-redpacket-dialog {
    transform: scale(0.9);
  }
}
@media (max-height: 620px) {
  .wk-redpacket-dialog {
    transform: scale(0.82);
  }
}

/* 信封舞台：尺寸＝切图尺寸，内部元素一律按切图坐标绝对定位 */
.wk-redpacket-stage {
  position: relative;
  flex-shrink: 0;
  width: 7.626667rem;
  height: 10.16rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wk-redpacket-stage.is-cover {
  background-image: url(../../static/media/bg_envelope_closed.2cbcf582d2652ba2f5c5.png);
}
.wk-redpacket-stage.is-fail {
  background-image: url(../../static/media/bg_envelope_empty.50fd7e6d13747c0e75cf.png);
}
.wk-redpacket-stage.is-ok {
  width: 10rem;
  height: 12.826667rem;
  background-image: url(../../static/media/bg_envelope_opened.cff9a299feda323d1724.png);
}

.wk-redpacket-close {
  flex-shrink: 0;
  width: 0.64rem;
  height: 0.64rem;
  margin-top: 0.746667rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.wk-redpacket-close img {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
}

/* ------------------------------------------------------- 弹窗：正文与状态 */

/* 三态共用一副骨架，只有落点和三个间距不同（对应设计稿三个「头像区域」自动布局） */
.wk-redpacket-body {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wk-rpk-gap-body);
  text-align: center;
}
.is-cover .wk-redpacket-body {
  top: 0.746667rem;
  --wk-rpk-gap-body: 0.293333rem;
  --wk-rpk-gap-sender: 0.293333rem;
}
.is-fail .wk-redpacket-body {
  top: 1.44rem;
  --wk-rpk-gap-body: 0.64rem;
  --wk-rpk-gap-sender: 0.293333rem;
  --wk-rpk-gap-main: 1.333333rem;
}
.is-ok .wk-redpacket-body {
  top: 2.933333rem;
  --wk-rpk-gap-body: 0.32rem;
  --wk-rpk-gap-sender: 0.16rem;
  --wk-rpk-gap-main: 2.986667rem;
}

.wk-redpacket-sender {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wk-rpk-gap-sender);
}
.wk-redpacket-avatar {
  display: block;
  width: 1.706667rem;
  height: 1.706667rem;
  border-radius: 0.314133rem;
  background: #fff2d1;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0.093333rem 0.218667rem 0 rgba(35, 55, 93, 0.07);
}
.wk-redpacket-sender-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.266667rem;
  max-width: 5.76rem;
}
.wk-redpacket-sender-name {
  overflow: hidden;
  font-size: 0.373333rem;
  font-weight: 500;
  letter-spacing: 0.14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1e293b;
}
/* 未开态压在红信封上，昵称转白 */
.is-cover .wk-redpacket-sender-name {
  color: #fff;
}
.wk-redpacket-sender-badge {
  display: block;
  flex-shrink: 0;
  width: 0.746667rem;
  height: 0.746667rem;
}

.wk-redpacket-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wk-rpk-gap-main);
  width: 100%;
}

/* 渐变字：background-clip 之后 text-shadow 会盖在渐变上方，故投影一律走 drop-shadow */
.wk-redpacket-title,
.wk-redpacket-result,
.wk-redpacket-congrats,
.wk-redpacket-amount,
.wk-redpacket-amount-unit {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 未开态：红包标题 */
.wk-redpacket-title {
  max-width: 6.933333rem;
  font-size: 0.746667rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
  background-image: linear-gradient(180deg, #fff 3.27%, #fff0b8 103.94%);
  filter: drop-shadow(0 0.026667rem 0.053333rem #ec3807);
}

/* 10 字降一档；历史/服务端标题超过现行上限时继续缩小，始终给信封两侧留安全边距。 */
.wk-redpacket-title.is-compact,
.wk-redpacket-title.is-tight,
.wk-redpacket-title.is-minimum {
  max-width: 6.4rem;
  white-space: nowrap;
  word-break: normal;
}
.wk-redpacket-title.is-compact {
  font-size: 0.64rem;
}
.wk-redpacket-title.is-tight {
  font-size: 0.56rem;
}
.wk-redpacket-title.is-minimum {
  overflow: hidden;
  font-size: 0.48rem;
  text-overflow: ellipsis;
}

/* 未开态：开 */
.wk-redpacket-open {
  position: absolute;
  left: 2.4rem;
  top: 5.253333rem;
  width: 2.826667rem;
  height: 2.826667rem;
  padding: 0;
  border: 0;
  background: url(../../static/media/btn_open.0e9a737ae4414d222844.png) no-repeat center / contain;
  cursor: pointer;
}
.wk-redpacket-open.is-loading {
  cursor: default;
  pointer-events: none;
  animation: wk-redpacket-open-pulse 0.9s ease-in-out infinite;
}
@keyframes wk-redpacket-open-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* 失败态：手慢了 / 已领取过红包 / 服务端错误文案 */
.wk-redpacket-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 5.76rem;
  /* 设计稿的文案块固定 70 高、内容居中：一行（已领取过红包）与两行（手慢了/红包派完了）
     下方的「查看领取详情」都落在同一位置。行高取 1.35 让换行后的两行正好填满 70。 */
  min-height: 1.866667rem;
  font-size: 0.693333rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
  background-image: linear-gradient(180deg, #fb5d47 3.27%, #f4192a 103.94%);
  filter: drop-shadow(0 0.026667rem 0.053333rem #fff);
}
/* 设计稿只画了 3~5 字的短文案，服务端错误文案更长时降档，避免撑破信封 */
.wk-redpacket-result.is-long {
  font-size: 0.533333rem;
}
.wk-redpacket-result.is-xlong {
  font-size: 0.426667rem;
}

/* 成功态：恭喜获得 + 金额 */
.wk-redpacket-awardbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.wk-redpacket-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.053333rem;
  height: 2.026667rem;
  transform: translateY(-0.213333rem);
}
.wk-redpacket-congrats {
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  background-image: linear-gradient(180deg, #fb5d47 3.27%, #f4192a 103.94%);
  filter: drop-shadow(0 0.026667rem 0.053333rem #fff);
}
.wk-redpacket-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.106667rem;
  filter: drop-shadow(0 0.026667rem 0.053333rem #fff);
}
.wk-redpacket-main:not(.has-require-bet) .wk-redpacket-amount-row {
  transform: translateY(0.16rem);
}
.wk-redpacket-amount {
  /* 设计稿用 Akrobat ExtraBold（窄体数字），仓内不引 webfont，退到系统无衬线粗体 */
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 1.013333rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.38px;
  background-image: linear-gradient(180deg, #fb5d47 3.27%, #f4192a 103.94%);
}
/* 设计稿样例是 1000.234；金额上不封顶，位数多了按档缩字，别撑出信封纸 */
.wk-redpacket-amount.is-long {
  font-size: 0.8rem;
}
.wk-redpacket-amount.is-xlong {
  font-size: 0.64rem;
}
.wk-redpacket-amount-unit {
  font-size: 0.533333rem;
  font-weight: 600;
  line-height: 1.2;
  background-image: linear-gradient(180deg, #fb5d47 3.27%, #f4192a 103.94%);
}

/* 只有本次领取成功且服务端返回正数 require_bet 时，才展示彩金打码提示。 */
.wk-redpacket-require-bet {
  flex-shrink: 0;
  width: 6.613333rem;
  min-height: 0.426667rem;
  margin-top: -0.16rem;
  color: #633613;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.426667rem;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0.026667rem 0.053333rem #fff;
}
.wk-redpacket-require-bet.is-long {
  font-size: 0.293333rem;
}
.wk-redpacket-require-bet.is-xlong {
  font-size: 0.266667rem;
  letter-spacing: -0.1px;
}
.is-ok .wk-redpacket-main {
  --wk-rpk-gap-main: 3.226667rem;
}
.is-ok .wk-redpacket-main.has-require-bet {
  --wk-rpk-gap-main: 2.96rem;
}

/* 查看领取详情 */
.wk-redpacket-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.213333rem;
  height: 0.586667rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  color: #633613;
  text-shadow: 0 0.026667rem 0.053333rem #fff;
}
.is-ok .wk-redpacket-more {
  color: #fff0e5;
  text-shadow: 0 0.026667rem 0.053333rem #aa2f00;
}
/* 设计稿的箭头是 12×12 盒子里一枚 8.49px 的方角旋转 45°，盒子尺寸参与行内排布 */
.wk-redpacket-more i {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 0.32rem;
  height: 0.32rem;
}
.wk-redpacket-more i::before {
  content: "";
  width: 0.2264rem;
  height: 0.2264rem;
  border-right: 0.041067rem solid currentColor;
  border-bottom: 0.041067rem solid currentColor;
  transform: rotate(-45deg);
}

/* ============================================================================
 * 群红包游戏消息卡片（1101，两个 scene：game 进行中 / result 已开奖）
 *
 * 视觉来源：Figma「8-02红包游戏-聊天入口与卡片」node 3257-82382
 *   进行中 3257-83780 / 已开奖 3257-85096，切图 node 3244-81372
 *   （`视觉区` 3266-62335 → rpgame_card_art.png；`投` 3266-62368 的导出带方底，改用 CSS 复刻）
 *   ⚠️ 2026-08-20 重读：设计把 8-0x 四段整体重建过，旧的 2896-9021 / 2621-49267 已不存在。
 *
 * 卡片 198×220（旧稿是 232×199，新稿改窄改高）：
 *   上半 175 是视觉区 —— 一整张切图（红渐变底 + 元宝桶已烘进图里），
 *   文字与徽标全部绝对定位压在图上；下半 45 是白底信息区。
 *   两态共用同一张切图：进行中挂「投」金币钮，已开奖换成印章 + 整卡灰蒙层。
 * ========================================================================== */

.wk-message-rpgame,
.wk-message-rpgame *,
.wk-message-rpgame *::before,
.wk-message-rpgame *::after {
  box-sizing: border-box;
}

.wk-message-rpgame {
  position: relative;
  width: 5.28rem;
  border: 0.026667rem solid #f0e2c2;
  border-radius: 0.373333rem;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ---- 视觉区 ---- */

.wk-message-rpgame-art {
  position: relative;
  height: 4.666667rem;
  overflow: hidden;
  /* 切图带自己的红渐变；这一层只是图未加载完时的兜底底色 */
  background: linear-gradient(116deg, #e5231a 0%, #d41a0f 57%, #b81205 100%);
}

/* 切图就是 198×175 的等比图，cover 后与卡片同框 */
.wk-message-rpgame-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

/* 已开奖：整张卡压一层灰蒙层降饱和（进行中不压） */
.wk-message-rpgame-veil {
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  opacity: 0.2;
  pointer-events: none;
}

/* 左上角徽标：进行中＝倒计时，已开奖＝「已结束」 */
.wk-message-rpgame-badge {
  position: absolute;
  top: 0.213333rem;
  left: 0.213333rem;
  padding: 0.08rem 0.213333rem;
  border-radius: 0.266667rem;
  background: #fff5e5;
  font-size: 0.293333rem;
  font-weight: 500;
  line-height: 0.4rem;
  color: #b91c1c;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 倒计时走完（结果卡还没到）/ 已结束：文案换掉，配色退到暖褐 */
.wk-message-rpgame-badge.finished,
.wk-message-rpgame-badge.is-over {
  font-weight: 600;
  color: #8a4b1c;
}

/*
 * 金额牌：宽度由「文字实际宽度 + 左右各 12px」自然撑开，最大 180px。
 * 金额长度分档只调整字号，不改变 padding，因此所有金额的左右留白始终一致。
 * ★ 底板与金额是**兄弟**、共用同一个矩形 —— 底板要 mix-blend-multiply 才能吃到桶身的纹理，
 *   金额若当子元素会被一起混色成暗红，渐变金字就没了。
 */
.wk-message-rpgame-amount-wrap {
  position: absolute;
  left: 50%;
  top: 2.613333rem;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 0.48rem);
  height: 0.906667rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.wk-message-rpgame-plate {
  position: absolute;
  inset: 0;
  border: 0.6px solid #ffe6b9;
  border-radius: 0.32rem;
  background: rgba(117, 2, 0, 0.8);
  mix-blend-mode: multiply;
}

.wk-message-rpgame-amount {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  height: 100%;
  padding: 0 0.32rem;
  overflow: hidden;
}

.wk-message-rpgame-amount-text {
  display: inline-block;
  flex: none;
  /* 设计稿用 Akrobat ExtraBold（窄体数字），仓内不引 webfont，退到系统无衬线粗体 */
  font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  font-size: 0.746667rem;
  font-weight: 800;
  line-height: 1.202;
  letter-spacing: 0.28px;
  white-space: nowrap;
  background-image: linear-gradient(180deg, #fcf5de 23.635%, #ffc74f 116.3%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/*
 * 「投」金币钮（进行中）：40×39.3 落在视觉区底沿之上。
 * ⚠️ 切图区那枚 `投`（3266-62368）导出带一整块不透明方底（FD-24），拿来即用会在卡上糊一个方块，
 *   已按稿上的矢量参数用 CSS 复刻（外圆渐变 + 内圆 #D9792F 描边 + 红字），与下面的印章同款做法。
 */
.wk-message-rpgame-go {
  position: absolute;
  left: 2.16rem;
  top: 3.573333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.066667rem;
  height: 1.048rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #fcf4e4 0%, #face91 63%);
  pointer-events: none;
}

.wk-message-rpgame-go span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.944rem;
  height: 0.928rem;
  border: 0.63px solid #d9792f;
  border-radius: 50%;
  background: linear-gradient(180deg, #fcf4e4 0%, #face91 70%);
  font-size: 0.602667rem;
  font-weight: 800;
  line-height: 1.202;
  letter-spacing: 0.23px;
  color: #c3251a;
  text-shadow: 0 0.7px 0 rgba(249, 249, 249, 0.8);
}

/* 「已开奖」印章（已开奖）：双层金边胶囊，稿上是矢量不是切图，CSS 复刻 */
.wk-message-rpgame-stamp {
  position: absolute;
  left: 1.6rem;
  top: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.08rem;
  height: 0.96rem;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #fcf4e4 0%, #f2cd9b 100%);
  pointer-events: none;
}

.wk-message-rpgame-stamp span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.893333rem;
  height: 0.773333rem;
  border: 0.75px solid #d9792f;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #fcf4e4 0%, #f2cd9b 100%);
  box-shadow: 0 0 0 0.75px rgba(249, 249, 249, 0.8);
  font-size: 0.453333rem;
  font-weight: 800;
  line-height: 1.202;
  white-space: nowrap;
  color: #c3251a;
  text-shadow: 0 0.75px 0 rgba(249, 249, 249, 0.8);
}

/* ---- 信息区 ---- */

.wk-message-rpgame-info {
  display: flex;
  flex-direction: column;
  gap: 0.053333rem;
  padding: 0.106667rem 0.32rem;
}

.wk-message-rpgame-title {
  font-size: 0.373333rem;
  font-weight: 600;
  line-height: 0.533333rem;
  color: #202a3c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wk-message-rpgame-sub {
  display: flex;
  align-items: center;
  gap: 0.213333rem;
  font-size: 0.293333rem;
  line-height: 0.4rem;
  white-space: nowrap;
}

.wk-message-rpgame-sub-text {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #8a93a3;
}

/* 规则入口：普通参与者看到「可能亏损」说明的唯一路径，别为了简洁把它去掉 */
.wk-message-rpgame-sub-rules {
  flex: none;
  color: #b91c1c;
  cursor: pointer;
}

.wk-message-rpgame-sub-rules:active {
  opacity: 0.6;
}

/* ============================================================================
 * 红包游戏结果推送卡片（Figma node 3888-76594 / iOS RpgameResultMessageCard）
 * ========================================================================== */

.wk-message-rpgame-result,
.wk-message-rpgame-result *,
.wk-message-rpgame-result *::before,
.wk-message-rpgame-result *::after {
  box-sizing: border-box;
}

.wk-message-rpgame-result {
  --wk-rpgame-result-row-height: 0.8rem;
  width: var(--wk-business-result-card-width);
  overflow: hidden;
  border: 0.9px solid #efd7bb;
  border-radius: 0.266667rem;
  background: #fff;
  box-shadow: 0 0.213333rem 0.853333rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-family: "PingFang SC", "Noto Sans SC", "Helvetica Neue", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

.wk-message-rpgame-result-banner {
  height: 2.346667rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.133333rem;
  padding: 0 0.32rem 0 1.92rem;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.wk-message-rpgame-result-banner strong,
.wk-message-rpgame-result-banner span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-message-rpgame-result-banner strong {
  font-size: 0.48rem;
  font-weight: 600;
  line-height: 0.64rem;
  letter-spacing: 0.3px;
}

.wk-message-rpgame-result-banner span {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.293333rem;
  font-weight: 400;
  line-height: 0.4rem;
}

.wk-message-rpgame-result-table {
  /* 最后一行已自带文字留白；不再为可选的“查看更多”重复预留底部空间。 */
  padding: 0.213333rem 0.32rem 0;
}

.wk-message-rpgame-result-head,
.wk-message-rpgame-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.wk-message-rpgame-result-head {
  height: 0.746667rem;
  border-bottom: 0.8px solid #f4e0c2;
  color: #917048;
  font-size: 0.32rem;
  font-weight: 400;
}

.wk-message-rpgame-result-head span:last-child,
.wk-message-rpgame-result-row b {
  text-align: right;
}

.wk-message-rpgame-result-body {
  --wk-rpgame-result-body-height: 1.226667rem;
  height: var(--wk-rpgame-result-body-height);
  overflow: hidden;
}

.wk-message-rpgame-result-row {
  height: var(--wk-rpgame-result-row-height);
  border-bottom: 0.8px solid #f4e0c2;
  color: #1f2833;
  font-size: 0.32rem;
  font-weight: 600;
}

.wk-message-rpgame-result-row:last-child {
  border-bottom: 0;
}

.wk-message-rpgame-result-row span,
.wk-message-rpgame-result-row b {
  min-width: 0;
  overflow: hidden;
  line-height: 0.426667rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-message-rpgame-result-row b {
  color: #f13b31;
  font-weight: 600;
}

.wk-message-rpgame-result-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: #8f99aa;
  font-size: 0.32rem;
  font-weight: 400;
}

.wk-message-rpgame-result-more {
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.106667rem;
  color: #bd684b;
  font-size: 0.32rem;
  font-weight: 400;
}

.wk-message-rpgame-result-more i {
  font-size: 0.32rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}



.wk-message-time-box {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-message-time {
    color: #7b8798;
    padding: 0.08rem 0.266667rem;
    white-space: nowrap;
    width: auto;
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.426667rem;
    border-radius: 0.266667rem;
    background-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0.026667rem 0.026667rem rgba(31, 41, 55, 0.05);
}
body[theme-mode=dark] .wk-message-time  {
    color: #999;
}

.wk-message-time-line1 {
    display: none;
}

.wk-message-time-line2 {
    display: none;
}



.wk-message-split-box {
    width: 85%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: table;
}

.wk-message-split-content {
    color: rgba(9,30,66,.74);
    padding: 0.133333rem 0.213333rem 0;
    white-space: nowrap;
    width: auto;
    font-size: 0.32rem;
    font-weight: 600;
}

.wk-message-split-line1 {
    background-image: linear-gradient(360deg,transparent,rgba(9,30,66,.12));
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.026667rem;
    top: 0.346667rem;
    width: 50%;
    display: table-cell;
    position: relative;
}

.wk-message-split-line2 {
    background-image: linear-gradient(360deg,rgba(9,30,66,.12),transparent);
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0.026667rem;
    top: 0.346667rem;
    width: 50%;
    display: table-cell;
    position: relative;
}

:root {
    --wk-height-viewqueueheader: var(--wk-page-header-height);
}

.wk-viewqueueheader-content-action {
    display: flex;
    align-items: center;
}


.wk-mergeforwardmessagelist {
    width: 100%;
    height: 100%;
}

.wk-mergeforwardmessagelist-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-mergeforwardmessagelist-content-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-mergeforwardmessagelist-content-msgs {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.wk-mergeforwardmessagelist-content-msg {
    display: flex;
    width: 100%;
    padding: 0.4rem;
    background-color: var(--wk-color-item);
}

.wk-mergeforwardmessagelist-content-msg-info {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.wk-mergeforwardmessagelist-content-msg-info-first {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0px 0.4rem;

}

.wk-mergeforwardmessagelist-content-msg-info-first-name {
    font-size: 0.373333rem;
    color: #999;
}

.wk-mergeforwardmessagelist-content-msg-info-first-time {
    font-size: 0.32rem;
    color: #999;
}

.wk-mergeforwardmessagelist-content-msg-info-second-msgcontent {
    padding: 0px 0.4rem;
    margin-top: 0.133333rem;
}


.wk-mergeforwards {
    width: 8rem;
    background-color: var(--wk-message-item);
    border-radius: 0.213333rem;
    cursor: pointer;
}



.wk-mergeforwards-content {
    padding: 0.266667rem 0.266667rem 0px 0.266667rem;
    color: black;

}

.wk-mergeforwards-content-title {
    font-size: 0.4rem;
    font-weight: 500;
    color: var(--wk-message-color);
}

.wk-mergeforwards-content-items {
    padding-bottom: 0.133333rem;
}

.wk-mergeforwards-content-items .wk-mergeforwards-content-item {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.346667rem;
    color: #999 !important;
}

.wk-mergeforwards-content-tip {
    display: flex;
    justify-content: space-between;
    color: #999 !important;
    font-size: 0.346667rem;
    padding: 0.053333rem 0px;
}

.wk-mergeforwards-content-tip p {
    margin-bottom: 0px;
}

.wk-mergeforwards-content-tip p:last-child {
    margin-top: -0.106667rem;
}

.wk-mergeforwards-content-line {
    width: 100%;
    background-color: var(--wk-line-color);
    height: 0.026667rem;
}
.wk-conversationlist {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-y: contain;
    background-color: #f8f9fc;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

.wk-conversationlist::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.wk-conversationlist-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.213333rem;
    color: #8b95aa;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
}

.wk-conversationlist-empty-icon {
    width: 0.96rem;
    height: 0.96rem;
    color: #a8b1c2;
}

.wk-conversationlist-item {
    --wk-conversationlist-row-background: #f8f9fc;
    position: relative;
    width: 100%;
    height: 1.76rem;
    padding: 0;
    overflow: hidden;
    /* hidden 仍允许焦点触发横向滚动；会话行只裁剪侧滑内容，不应成为滚动容器。 */
    overflow: clip;
    box-sizing: border-box;
    background-color: #f8f9fc;
    cursor: pointer;
}

.wk-conversationlist-item-top {
    --wk-conversationlist-row-background: #f3f3f3;
    background-color: #f3f3f3;
}

.wk-conversationlist-item-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 0.293333rem;
    box-sizing: border-box;
    background-color: inherit;
    transition: transform 380ms cubic-bezier(0.25, 1, 0.5, 1), background-color 100ms ease;
    touch-action: pan-y;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

.wk-conversationlist-item-content::after {
    content: "";
    position: absolute;
    right: 0.293333rem;
    bottom: 0;
    left: 0.293333rem;
    height: 0.026667rem;
    background-color: #eceff5;
    pointer-events: none;
}

.wk-conversationlist-item-top .wk-conversationlist-item-content::after {
    background-color: #dce3ef;
}

.wk-conversationlist-item-swipe-active .wk-conversationlist-item-content {
    --wk-conversationlist-row-background: #f8f9fc;
    background-color: #f8f9fc;
}

.wk-conversationlist-item-content-swiping {
    transition: none;
}

.wk-conversationlist-item-content:active {
    --wk-conversationlist-row-background: #e5e5ea;
    border-radius: 0.266667rem;
    background-color: #e5e5ea;
}

.wk-conversationlist-item-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
    width: 5.76rem;
    height: 1.76rem;
    overflow: hidden;
    pointer-events: none;
    transition: transform 380ms cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.wk-conversationlist-item-swipe-active .wk-conversationlist-item-actions {
    pointer-events: auto;
}

.wk-conversationlist-item-actions-swiping,
.wk-conversationlist-item-actions-swiping .wk-conversationlist-action {
    transition: none;
}

.wk-conversationlist-action {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 1.92rem;
    height: 1.76rem;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.48rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: transform 380ms cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.wk-conversationlist-action-top {
    background-color: #00b824;
}

.wk-conversationlist-action-mute {
    background-color: #ff9f24;
}

.wk-conversationlist-action-delete {
    background-color: #e5232a;
}

.wk-conversationlist-action-icon {
    display: block;
    width: 0.693333rem;
    height: 0.693333rem;
    margin-bottom: 0.026667rem;
    -o-object-fit: contain;
       object-fit: contain;
    flex: 0 0 0.693333rem;
}

.wk-conversationlist-action span {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.wk-conversationlist-item-left {
    display: flex;
    width: 1.52rem;
    flex: 0 0 1.52rem;
    align-items: center;
    justify-content: flex-start;
}

.wk-conversationlist-item-avatar-box {
    position: relative;
    width: 1.173333rem;
    height: 1.173333rem;
}

.wk-conversationlist-item-avatar-box .wk-avatar {
    display: block;
    width: 1.173333rem;
    height: 1.173333rem;
    border-radius: 0.213333rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conversationlist-item-right {
    display: flex;
    width: calc(100% - 1.52rem);
    height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 0.266667rem 0;
    overflow: hidden;
    box-sizing: border-box;
}

.wk-conversationlist-item-right-private {
    gap: 0.133333rem;
}

.wk-conversationlist-item-right-first-line,
.wk-conversationlist-item-right-second-line {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
}

.wk-conversationlist-item-right-private .wk-conversationlist-item-right-first-line {
    height: 0.613333rem;
    flex: 0 0 0.613333rem;
}

.wk-conversationlist-item-right-private .wk-conversationlist-item-right-second-line {
    height: 0.533333rem;
    flex: 0 0 0.533333rem;
    transform: translateY(-0.053333rem);
}

.wk-conversationlist-item-name {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    overflow: hidden;
}

.wk-conversationlist-item-name h3 {
    width: auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #1f2937;
    font-size: 0.373333rem;
    font-weight: 500;
    line-height: 0.48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-conversationlist-item-identity {
    display: block;
    width: 0.48rem;
    height: 0.48rem;
    margin-left: 0.053333rem;
    flex: 0 0 0.48rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-conversationlist-top-status {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 0.4rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-conversationlist-mute-status {
    display: block;
    width: 0.293333rem;
    height: 0.32rem;
    margin-left: 0.213333rem;
    flex: 0 0 0.293333rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-conversationlist-item-time {
    display: flex;
    padding-left: 0.213333rem;
    margin-left: auto;
    flex: 0 0 auto;
    align-items: center;
    color: #687394;
    font-size: 0.32rem;
    font-weight: 400;
    line-height: 0.48rem;
    white-space: nowrap;
}

.wk-conversationlist-item-sender {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    color: #9aa3b7;
    margin-right: 0.026667rem;
    vertical-align: bottom;
}

.wk-conversationlist-item-sender-name {
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
}

.wk-conversationlist-item-sender-separator {
    flex: 0 0 auto;
}

.wk-conversationlist-item-lastmsg {
    min-width: 0;
    min-height: 0.4rem;
    flex: 1 1 auto;
    overflow: hidden;
    color: #9aa3b7;
    font-size: 0.346667rem;
    font-weight: 400;
    line-height: 0.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-conversationlist-item-right-private .wk-conversationlist-item-lastmsg {
    min-height: 0.533333rem;
    line-height: 0.533333rem;
}

.wk-conversationlist-media-preview {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.106667rem;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
}

.wk-conversationlist-media-thumb {
    position: relative;
    display: inline-flex;
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 0.4rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.08rem;
    background: #dce5f1;
    color: #7f8da5;
}

.wk-conversationlist-media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conversationlist-media-fallback {
    width: 0.32rem;
    height: 0.32rem;
}

.wk-conversationlist-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.32rem;
    height: 0.32rem;
    transform: translate(-50%, -50%);
}

.wk-conversationlist-media-play::after {
    content: "";
    position: absolute;
    top: 0.053333rem;
    left: 0.106667rem;
    border-top: 0.106667rem solid transparent;
    border-bottom: 0.106667rem solid transparent;
    border-left: 0.16rem solid #fff;
    filter: drop-shadow(0 0 0.026667rem rgb(0 0 0 / 70%));
}

.wk-conversationlist-draft-label,
.wk-conversationlist-send-failed {
    color: #ef3e49;
}

.wk-conversationlist-business-label {
    /* 全角左括号的字面左留白较大；向左悬挂后，括号笔画与上方标题文字光学对齐。 */
    display: inline-block;
    margin-left: -0.186667rem;
    color: #9aa3b7;
}

.wk-conversationlist-business-label-unread {
    color: #ef3e49;
}

.wk-conversationlist-send-pending {
    color: #4a7af5;
}

.wk-typing {
    display: inline-flex;
    height: 0.426667rem;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.16rem;
    color: #5b6473;
}

.wk-typing-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-typing-selected {
    color: #687394;
}

.wk-typing-capsule {
    width: 0.666667rem;
    height: 0.426667rem;
    display: inline-flex;
    flex: 0 0 0.666667rem;
    align-items: center;
    justify-content: center;
    gap: 0.085333rem;
    box-sizing: border-box;
    border: 0.030667rem solid rgba(91, 100, 115, .78);
    border-radius: 26.64rem;
    background: rgba(91, 100, 115, .16);
}

.wk-typing-capsule i {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    background: currentColor;
    animation: wk-conversation-list-typing 1.05s ease-in-out infinite;
}

.wk-typing-capsule i:nth-child(2) { animation-delay: .14s; }
.wk-typing-capsule i:nth-child(3) { animation-delay: .28s; }

@keyframes wk-conversation-list-typing {
    0%, 60%, 100% { transform: translateY(0.026667rem); opacity: .45; }
    30% { transform: translateY(-0.034667rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-typing-capsule i {
        animation: none;
        opacity: .72;
    }
}

.wk-mention,
.wk-reminder {
    color: #ef3e49;
}

.wk-conversationlist-item-reddot {
    display: flex;
    min-width: 0.586667rem;
    margin-left: 0.213333rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.106667rem;
}

.wk-conversationlist-unread {
    display: flex;
    width: 0.586667rem;
    height: 0.586667rem;
    border-radius: 50%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background-color: #ff3b30;
    color: #fff;
    font-size: 0.266667rem;
    font-weight: 700;
    line-height: 0.586667rem;
    white-space: nowrap;
}

.wk-conversationlist-unread-overflow {
    font-size: 0.213333rem;
    letter-spacing: -0.4px;
}

.wk-conversationlist-unread-muted {
    background-color: #c8c8c8;
}

body[theme-mode=dark] .wk-conversationlist,
body[theme-mode=dark] .wk-conversationlist-item {
    --wk-conversationlist-row-background: var(--wk-color-secondary-2);
    background-color: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-conversationlist-item-top {
    --wk-conversationlist-row-background: var(--wk-color-secondary);
    background-color: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-conversationlist-item-swipe-active .wk-conversationlist-item-content {
    --wk-conversationlist-row-background: var(--wk-color-secondary-2);
    background-color: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-conversationlist-item-name h3 {
    color: #fff;
}

body[theme-mode=dark] .wk-conversationlist-item-content::after {
    background-color: rgba(255, 255, 255, 0.08);
}

body[theme-mode=dark] .wk-conversationlist-empty {
    color: rgba(255, 255, 255, 0.55);
}

.wk-desktop .wk-conversationlist {
    padding: 0 0.16rem 0.32rem;
    background: #fff;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #d8dfeb transparent;
}

.wk-desktop .wk-conversationlist::-webkit-scrollbar {
    display: block;
    width: 0.133333rem;
}

.wk-desktop .wk-conversationlist::-webkit-scrollbar-thumb {
    background: #d8dfeb;
    border-radius: 0.08rem;
}

.wk-desktop .wk-conversationlist-item {
    --wk-conversationlist-row-background: #fff;
    border-radius: 0.266667rem;
    background: #fff;
    margin-bottom: 0.053333rem;
}

.wk-desktop .wk-conversationlist-item-top {
    --wk-conversationlist-row-background: #f7f9fd;
    background: #f7f9fd;
}

.wk-desktop .wk-conversationlist-item-content {
    border-radius: 0.266667rem;
    padding: 0 0.266667rem;
}

.wk-desktop .wk-conversationlist-item-content::after {
    display: none;
}

.wk-desktop .wk-conversationlist-item-content:hover {
    --wk-conversationlist-row-background: #f2f6ff;
    background: #f2f6ff;
}

.wk-desktop .wk-conversationlist-item-content.wk-conversationlist-item-selected {
    --wk-conversationlist-row-background: #e8effe;
    background: #e8effe;
}

.wk-desktop .wk-conversationlist-item-name h3 {
    font-size: 0.4rem;
    color: #1e293b;
}

.wk-desktop .wk-conversationlist-item-time,
.wk-desktop .wk-conversationlist-item-lastmsg,
.wk-desktop .wk-conversationlist-item-sender {
    color: #9a9bb1;
    font-size: 0.32rem;
}

.wk-desktop .wk-conversationlist-unread {
    width: 0.48rem;
    height: 0.48rem;
    font-size: 0.266667rem;
    line-height: 0.48rem;
}

.wk-page-error-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.64rem;
    color: #666;
    font-size: 0.373333rem;
    text-align: center;
}

.wk-chat {
    --wk-height-chat-conversation-header: var(--wk-page-header-height);
    width: 100%;
    height: 100%;
    background-color: #f8f9fc;
}

.wk-chat-content {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #f8f9fc;
}

.wk-chat-content-left {
    width: 100%;
    height: 100%;
}

.wk-chat-search {
    height: 1.546667rem;
    width: 100%;
    padding: 0 0.373333rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

.wk-chat-search-add {
    width: 0.986667rem;
    height: 0.986667rem;
    margin-left: auto;
    padding: 0;
    cursor: pointer;
    color: #111827;
    align-items: center;
    justify-content: center;
}

.wk-chat-header-icon {
    width: 0.586667rem;
    height: 0.586667rem;
    display: block;
    flex: 0 0 0.586667rem;
}

.wk-chat-header-plus-icon {
    width: 0.666667rem;
    height: 0.666667rem;
    flex-basis: 0.666667rem;
}

.wk-chat-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 0.906667rem;
    width: 1.973333rem;
    margin-left: auto;
    padding: 0 0.053333rem;
    border: 0.026667rem solid #cfd5e3;
    border-radius: 26.64rem;
    background-color: #fff;
    position: relative;
}

.wk-chat-mobile-actions::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.186667rem;
    bottom: 0.186667rem;
    width: 0.026667rem;
    background-color: #d7deeb;
    transform: translateX(-0.5px);
    pointer-events: none;
}

body[theme-mode=dark] .wk-chat-search-add  {
    color: white;
}

.wk-chat-title {
    position: absolute;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.16rem;
    color: #1f293b;
    font-size: 0.453333rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.wk-chat-title-loading {
    width: 0.373333rem;
    height: 0.373333rem;
    border: 0.04rem solid rgba(31, 41, 59, 0.24);
    border-top-color: #1f293b;
    border-radius: 50%;
    box-sizing: border-box;
    animation: wk-chat-title-loading-spin 700ms linear infinite;
}

@keyframes wk-chat-title-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

body[theme-mode=dark] .wk-chat-title {
    color: white;
}

.wk-chat-conversation-list {
    width: 100%;
    height: calc(100% - 1.546667rem);
    position: relative;
    background-color: #f8f9fc;
}

.wk-chat-conversation-list-empty-state .wk-conversationlist-empty {
    display: none;
}

.wk-chat-empty-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: 6.933333rem;
    max-width: calc(100% - 1.706667rem);
    flex-direction: column;
    gap: 0.8rem;
    transform: translate(-50%, -50%);
}

.wk-chat-empty-action {
    width: 100%;
    height: 1.226667rem;
    padding: 0 0.533333rem;
    border: 0;
    border-radius: 0.32rem;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
    font-size: 0.426667rem;
    font-weight: 500;
    line-height: 0.586667rem;
    letter-spacing: -0.408px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.wk-chat-empty-action-hall {
    color: #4a7af5;
    background: rgba(74, 122, 245, 0.15);
}

.wk-chat-empty-action-code {
    color: #fff;
    background: #4a7af5;
}

.wk-chat-empty-action:active {
    opacity: 0.82;
}

.wk-chat-content-right {
    -webkit-touch-callout: none;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    z-index: 20;
    background-color: #fff;
    transform: translate3d(0, 0, 0);
    transition: transform var(--wk-layer-transition);
    overflow: hidden;
}

.wk-chat-search-button {
    display: none !important;
}

.wk-chat-mobile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.56rem;
    height: 0.56rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
}
.wk-chat-mobile-action .wk-chat-header-icon {
    width: 0.586667rem;
    height: 0.586667rem;
    flex-basis: 0.586667rem;
}
.wk-chat-mobile-action-refresh>span {
    width: 0.48rem;
    height: 0.48rem;
}
.wk-chat-mobile-action-refresh svg {
    width: 0.48rem;
    height: 0.48rem;
}
.wk-chat-mobile-action-close {
    margin-left: 0.026667rem;
    background-color: #253047;
    color: #fff;
}

.wk-chat-content:not(.wk-conversation-open) .wk-chat-content-right {
    transform: translate3d(100vw, 0, 0);
}

.wk-chat-content-chat {
    width: 100%;
    height: 100%;
    transition: width 150ms ease-in-out 0s;
}

.wk-chat-channelsetting-drawer-mask {
    position: absolute;
    inset: 0;
    z-index: 55;
    background: rgba(15, 23, 42, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.wk-chat-channelsetting-drawer-mask-open {
    opacity: 1;
    pointer-events: auto;
}

.wk-chat-channelsetting-drawer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background-color: #F0F0F3;
    transform: translate3d(100%, 0, 0);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    overflow: hidden;
}

.wk-chat-channelsetting-drawer-open {
    transform: translate3d(0, 0, 0);
}

body[theme-mode=dark] .wk-chat-channelsetting-drawer {
    background-color: var(--wk-color-secondary);
}

.wk-chat-conversation {
    width: 100%;
    height: calc(100% - var(--wk-height-chat-conversation-header));
}

.wk-chat-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-chat-empty img {
    height: 9.066667rem;
    transform: scale(1.14);
}

.wk-chat-conversation-header {
    height: var(--wk-height-chat-conversation-header);
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 0;
    box-shadow: none;
    z-index: 40;
    padding: 0.16rem 0.4rem;
    position: relative;
    cursor: default;
    box-sizing: border-box;
}

body[theme-mode=dark] .wk-chat-conversation-header {
    background-color: var(--wk-color-secondary);
}

.wk-chat-conversation-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.wk-chat-conversation-header-back {
    /* 视觉中心不动：按钮从 header 左缘开始扩到 50×54，负 margin 让后面的头像仍在原位。 */
    width: 1.333333rem;
    height: var(--wk-height-chat-conversation-header);
    display: flex !important;
    position: relative;
    justify-content: center;
    align-items: center;
    flex: 0 0 1.333333rem;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0d1217;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.wk-chat-conversation-header-channel {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 0.32rem;
}

.wk-chat-conversation-header-channel-avatar img {
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 0.16rem;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-chat-conversation-header-channel-avatar {
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 1.12rem;
}

.wk-chat-conversation-header-channel-info {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-left: 0.426667rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
}

.wk-chat-conversation-header-channel-info-name {
    display: flex;
    align-items: center;
    gap: 0.053333rem;
    width: 100%;
    height: 0.533333rem;
    /* 15 个全宽中文字符在标准移动端头部可完整显示；更长内容才省略。 */
    font-size: 0.413333rem;
    font-weight: 500;
    line-height: 0.533333rem;
    color: #0d1217;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 0.533333rem;
}

.wk-chat-conversation-header-channel-info-name > span {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-chat-conversation-header-identity {
    width: 0.48rem;
    height: 0.48rem;
    flex: 0 0 0.48rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-chat-conversation-header-channel-info-tip {
    width: 100%;
    height: 0.4rem;
    color: #7b828b;
    font-size: 0.32rem;
    line-height: 0.4rem;
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 0.4rem;
}

.wk-chat-conversation-header-status,
.wk-chat-conversation-header-typing {
    display: inline-flex;
    height: 0.4rem;
    min-width: 0;
    align-items: center;
}

.wk-chat-conversation-header-status {
    gap: 0.133333rem;
}

.wk-chat-conversation-header-online-dot {
    width: 0.16rem;
    height: 0.16rem;
    flex: 0 0 0.16rem;
    border-radius: 50%;
    background: #35c759;
}

.wk-chat-conversation-header-typing {
    gap: 0.106667rem;
    color: #5b6473;
    font-weight: 500;
}

.wk-chat-conversation-header-typing > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-chat-typing-capsule {
    width: 0.613333rem;
    height: 0.4rem;
    display: inline-flex;
    flex: 0 0 0.613333rem;
    align-items: center;
    justify-content: center;
    gap: 0.053333rem;
    border: 0.030667rem solid rgba(91, 100, 115, .78);
    border-radius: 26.64rem;
    background: rgba(91, 100, 115, .16);
}

.wk-chat-typing-capsule i {
    width: 0.074667rem;
    height: 0.074667rem;
    border-radius: 50%;
    background: currentColor;
    animation: wk-chat-header-typing 1.05s ease-in-out infinite;
}

.wk-chat-typing-capsule i:nth-child(2) { animation-delay: .14s; }
.wk-chat-typing-capsule i:nth-child(3) { animation-delay: .28s; }

@keyframes wk-chat-header-typing {
    0%, 60%, 100% { transform: translateY(0.026667rem); opacity: .45; }
    30% { transform: translateY(-0.034667rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wk-chat-typing-capsule i {
        animation: none;
        opacity: .72;
    }
}

body[theme-mode=dark] .wk-chat-conversation-header-channel-info-name  {
    color: white;
}

body[theme-mode=dark] .wk-chat-conversation-header-channel-info-tip.wk-state-offline {
    color: rgba(255, 255, 255, 0.55);
}

.wk-chat-conversation-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-width: 0;
}

.wk-chat-conversation-header-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: #0d1217;
}

.wk-chat-conversation-header-right-item {
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.533333rem;
    height: 1.12rem;
    flex: 0 0 0.533333rem;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.wk-chat-conversation-header-right-item svg {
    width: 0.533333rem;
    height: 0.533333rem;
}

.wk-chat-conversation-header-more-icon {
    color: #0d1217;
    fill: currentColor;
}

.wk-chat-conversation-header-right-item:last-child {
    margin-right: 0px;
}

.wk-chat-conversation-header-setting {
    display: flex;
    align-items: center;
}

.wk-chat-conversation-list-loading {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.wk-chat-conversation-header-right-item {
    position: relative;
}

.wk-conversation-header-mask {
    background-color: rgb(0,0,0,0.0);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    border-radius: 100%;
}

.wk-conversation-header-mask:hover {
    background-color: rgb(0,0,0,0.1);
}

/* Installed desktop client: the route queue owns the right pane, not the viewport. */
.wk-desktop .wk-chat,
.wk-desktop .wk-chat-content,
.wk-desktop .wk-chat-content-left {
    min-width: 0;
    min-height: 0;
    background: #fff;
}

.wk-desktop .wk-chat-search {
    height: 2.56rem;
    padding: 0.48rem 0.426667rem 0.32rem;
    align-items: flex-start;
    box-sizing: border-box;
}

.wk-desktop .wk-chat-title {
    position: static;
    transform: none;
    font-size: 0.48rem;
    line-height: 0.586667rem;
    color: #1e293b;
}

.wk-desktop .wk-chat-mobile-actions {
    display: none;
}

.wk-desktop .wk-chat-search-button {
    position: absolute;
    top: 1.333333rem;
    right: 0.426667rem;
    left: 0.426667rem;
    display: flex !important;
    align-items: center;
    gap: 0.213333rem;
    height: 0.906667rem;
    padding: 0 0.266667rem;
    border: 0;
    border-radius: 0.213333rem;
    color: #9a9bb1;
    background: #f4f6fa;
    font: inherit;
    font-size: 0.32rem;
    cursor: pointer;
}

.wk-desktop .wk-chat-search-button .semi-icon {
    font-size: 0.426667rem;
}

.wk-desktop .wk-chat-search-button:hover {
    background: #e8effe;
}

.wk-desktop .wk-chat-search-button:focus-visible {
    outline: 0.053333rem solid #4a7af5;
    outline-offset: 0.053333rem;
}

.wk-desktop .wk-chat-conversation-list {
    height: calc(100% - 2.56rem);
    background: #fff;
}

.wk-desktop .wk-chat-content-right {
    --wk-height-chat-conversation-header: 1.706667rem;
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
    transition: none;
}

.wk-desktop .wk-chat-content:not(.wk-conversation-open) .wk-chat-content-right {
    transform: none;
}

.wk-desktop .wk-chat-content-chat {
    min-width: 0;
    min-height: 0;
}

.wk-desktop .wk-chat-conversation-header {
    padding: 0 0.533333rem 0 0.64rem;
    border-bottom: 0.026667rem solid #edf1f8;
}

.wk-desktop .wk-chat-conversation-header-back {
    display: none !important;
}

.wk-desktop .wk-chat-conversation-header-channel {
    margin-left: 0;
}

.wk-desktop .wk-chat-conversation-header-channel-avatar,
.wk-desktop .wk-chat-conversation-header-channel-avatar img {
    width: 1.066667rem;
    height: 1.066667rem;
    flex-basis: 1.066667rem;
    border-radius: 0.213333rem;
}

.wk-desktop .wk-chat-conversation-header-channel-info {
    margin-left: 0.32rem;
}

.wk-desktop .wk-chat-conversation-header-channel-info-name {
    height: 0.586667rem;
    flex-basis: 0.586667rem;
    font-size: 0.453333rem;
    line-height: 0.586667rem;
    font-weight: 600;
    color: #1e293b;
}

.wk-desktop .wk-chat-conversation-header-channel-info-tip {
    margin-top: 0.053333rem;
    color: #9a9bb1;
}

.wk-desktop .wk-chat-conversation-header-right-item {
    width: 0.96rem;
    height: 0.96rem;
    flex-basis: 0.96rem;
    border-radius: 0.213333rem;
}

.wk-desktop .wk-chat-conversation-header-right-item:hover {
    background: #f4f6fa;
}

.wk-desktop .wk-chat-channelsetting-drawer-mask {
    background: rgba(15, 23, 42, 0.12);
    transition: none;
}

.wk-desktop .wk-chat-channelsetting-drawer {
    width: 9.6rem;
    max-width: 100%;
    transform: none;
    transition: none;
    will-change: auto;
    box-shadow: -0.266667rem 0 0.8rem rgba(15, 23, 42, 0.12);
}

.wk-desktop .wk-chat-channelsetting-drawer .wk-channelsetting {
    --wk-channelsetting-header: 1.706667rem;
    background: #f4f6fa;
}

.wk-desktop .wk-chat-channelsetting-drawer .wk-channelsetting-header {
    border-bottom: 0.026667rem solid #edf1f8;
    background: #fff;
    box-sizing: border-box;
}

.wk-desktop .wk-chat-channelsetting-drawer .wk-channelsetting-content {
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.wk-desktop .wk-chat-empty {
    flex-direction: column;
    background: #f4f6fa;
}

.wk-desktop .wk-chat-empty img {
    width: min(7.466667rem, 48%);
    height: auto;
    max-height: 45%;
    transform: none;
    opacity: .8;
}

.wk-desktop .wk-desktop-search-modal .semi-modal-wrap {
    display: flex;
    align-items: center;
}

.wk-desktop .wk-desktop-search-modal .semi-modal {
    width: 19.2rem !important;
    max-width: calc(100vw - 2.133333rem);
    margin: 1.28rem auto;
}

.wk-desktop .wk-desktop-search-modal .semi-modal-content {
    max-height: calc(100vh - 2.56rem);
    border-radius: 0.426667rem;
}

.wk-desktop .wk-desktop-search-modal .semi-modal-body-wrapper {
    min-height: 0;
    overflow-y: auto;
}

.wk-desktop .wk-desktop-search-modal .semi-modal-body {
    min-width: 0;
    max-height: calc(100vh - 2.56rem);
}

.wk-desktop .wk-desktop-search-modal .wk-tab-all,
.wk-desktop .wk-desktop-search-modal .wk-tab-contacts,
.wk-desktop .wk-desktop-search-modal .wk-tab-group,
.wk-desktop .wk-desktop-search-modal .wk-tab-file {
    height: min(50vh, 12.8rem);
    max-height: calc(100vh - 7.04rem);
}

.wk-sections {
  padding: 0.533333rem 0.4rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.wk-section {
  display: flex;
  flex-direction: column;
}

.wk-section + .wk-section {
  margin-top: 0.213333rem;
}

/* 底部按钮区与上方列表的间距（设计稿：列表 py-20 + auto layout gap-30 = 50px）。
   必须写成同等权重才能盖住上面的相邻兄弟规则 */
.wk-section + .wk-section.wk-section-buttons {
  margin-top: 1.12rem;
}

/* 每一行即一张卡片（设计稿：白底 + 12 圆角 + 8px 间距） */
.wk-section-rows {
  display: flex;
  flex-direction: column;
  gap: 0.213333rem;
}

.wk-section-row {
  background-color: #fff;
  border-radius: 0.32rem;
  overflow: hidden;
}

body[theme-mode=dark] .wk-section-row {
  background-color: var(--wk-color-secondary-2);
}

.wk-section-title {
  padding: 0.133333rem 0.4rem;
  color: var( --wk-color-font-tip);
  font-size: 0.346667rem;
}

.wk-section-subtitle {
  padding: 0.133333rem 0.4rem;
  color: var( --wk-color-font-tip);
  font-size: 0.346667rem;
}

/* 底部按钮区：透明底、上间距 60、按钮间距 20 */
.wk-section.wk-section-buttons {
  margin-top: 1.12rem;
  margin-bottom: 1.066667rem;
}

.wk-section-buttons .wk-section-rows {
  gap: 0.533333rem;
}

.wk-section-buttons .wk-section-row,
body[theme-mode=dark] .wk-section-buttons .wk-section-row {
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
}



:root {
    --wk-channelsetting-header: 1.493333rem;
}

.wk-channelsetting {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-channelsetting-header {
    width: 100%;
    height: 1.493333rem;
    height: var(--wk-channelsetting-header);
    padding: 0.213333rem 0.346667rem;
    display: flex;
    align-items: center;
}

.wk-channelsetting-close {
    width: 1.173333rem;
    height: 1.173333rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-channelsetting-close:hover {
    background-color: rgb(112,117,121,0.08);
}

.wk-channelsetting-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-channelsetting-close-icon,.wk-channelsetting-close-icon::before,.wk-channelsetting-close-icon::after {
    width: 0.48rem;
    height: 0.053333rem;
    border-radius: 0.053333rem;
    background-color: rgb(112,117,121);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-channelsetting-close-icon::before {
    transform: rotate(90deg);
}

.wk-channelsetting-close-icon::before ,.wk-channelsetting-close-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}

.wk-state-back {
    transform: rotate(180deg);
}

.wk-state-back::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.16rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.16rem);
}




.wk-channelsetting-box {
    width: 100%;
    height: calc(100% - 1.493333rem);
    height: calc(100% - var(--wk-channelsetting-header));
    overflow: hidden;
    position: relative;
}

.wk-channelsetting-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 1.066667rem;
}

.wk-channelsetting-content .wk-list-item {
    min-height: 1.493333rem;
    padding: 0 0.426667rem;
}

.wk-channelsetting-content .wk-list-item-icon {
    width: 0.746667rem;
    height: 0.746667rem;
    flex-basis: 0.746667rem;
}

.wk-channelsetting-content .wk-list-item-title {
    font-size: 0.4rem;
}

.wk-channelsetting-content .wk-list-item-detail {
    margin-top: 0.08rem;
    font-size: 0.346667rem;
}

.wk-channelsetting-content .wk-list-item-subtitle {
    font-size: 0.426667rem;
}

.wk-channelsetting-content .wk-list-item-muliteline {
    height: auto;
    padding: 0;
    gap: 0;
    justify-content: flex-start;
}

.wk-channelsetting-content .wk-list-item-muliteline-header {
    min-height: 1.493333rem;
}

.wk-channelsetting-content .wk-list-item-subtitle-muliteline {
    padding: 0;
}

.wk-channelsetting-content .wk-list-item-arrow {
    width: 0.266667rem;
    height: 0.266667rem;
    flex-basis: 0.266667rem;
    border-width: 0.053333rem;
}

.wk-channelsetting-channel-info {
    display: flex;
    align-items: center;
    padding: 0.4rem;
    background-color: white;

}

.wk-channelsetting-avatar {
    /* 高宽比率 */
    width: 1.706667rem;
    height: 1.706667rem;
    position: relative;
}

.wk-channelsetting-avatar img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
}

.wk-channelsetting-name {
    color: var(--wk-color-theme);
    font-size: 0.426667rem;
    font-weight: 600;
    margin-left: 0.266667rem;
    font-weight: 13.333333rem;
}


.wk-channelsetting-header-title-box {
    color: #999;
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1 1;
}

.wk-channelsetting-header-title-box-open {

}

.wk-channelsetting-header-title {
    font-size: 0.48rem;
    font-weight: 500;
    margin-left: 0.586667rem;
    color: black;
}

.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title{
    display: none;
}

.wk-channelsetting-header-title-route {
    font-size: 0.48rem;
    font-weight: 500;
    margin-left: 0.586667rem;
    color: black;
    position: absolute;

    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
    width: 6.4rem;

}

.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title-route {
    transform: translate3d(0, 0, 0);
}



.wk-channelsetting-route {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    position: absolute;
    top: 0px;
    overflow: hidden;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-channelsetting-route-open {
    transform: translate3d(0, 0, 0);
}

.wk-channelsetting-route-content {
    width: 100%;
    height: 100%;
}

.wk-channelsetting-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-channelsetting-header-right-view-open {
    opacity: 1;
}

.wk-channelsetting-content-loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.266667rem;
}

.wk-channelmanage {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}


.wk-route {
    width: 100%;
    height: 100%;
    --wk-height-route-header: var(--wk-page-header-height);
    overflow: hidden;
    background-color: #F0F0F3;
}

body[theme-mode=dark] .wk-route {
    background-color: var(--wk-color-secondary);
}

.wk-route-box {
    width: 100%;
    height: calc(100% - var(--wk-height-route-header) + 0.026667rem);
    margin-top: -0.026667rem;
    position: relative;
    background-color: #F0F0F3;
}

.wk-route-content {
    width: 100%;
    height: 100%;
    background-color: #F0F0F3;
    position: relative;
    /* opacity: 1; */
    /* transition: opacity 150ms ease-in 0s; */
}

.wk-route-content-route {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translate3d(100vw, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-route-content-next {
   width: 100%;
   height: 100%;
   background-color: #F0F0F3;
   overflow: auto;
   /* transition: opacity 350ms ease-in 0s; */
}

body[theme-mode=dark] .wk-route-box,
body[theme-mode=dark] .wk-route-content,
body[theme-mode=dark] .wk-route-content-next {
    background-color: var(--wk-color-secondary);
}

.wk-route-content-route-open .wk-route-content {
    /* opacity: 0; */
}

.wk-route-content-route-open .wk-route-content-route {
    transform: translate3d(0, 0, 0);
}

.wk-route-content-route-open .wk-route-content-next {
    /* opacity: 1; */
}


.wk-viewqueue {
    width: 100%;
    height: 100%;
    position: relative;
}

.wk-viewqueue-route {
    width: 100%;
    height: 100%;
    position: relative;
}

.wk-viewqueue-view{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--wk-color-secondary);
    transition: transform var(--wk-layer-transition);
    overflow: hidden;
    /*
     * 每一层封闭自己的层叠上下文 —— 否则「栈顶在最上面」这条不成立。
     *
     * 非栈顶的层是 z-index:auto，不创建层叠上下文，层内那些高 z-index 的定位元素会直接
     * 跨层参与外层比较，把 z-index:10 的栈顶层压在下面。聊天页就是重灾区：
     * wk-chat-content-right(20) / wk-conversation-footer(20) / 会话头(40) /
     * 右键菜单(98~103) / 表情面板与多选面板(999) 全都 > 10。
     * 实测症状：从聊天页 push 出的整页确实在 DOM 里、尺寸位置也对，但整个聊天 UI 盖在它上面
     * （elementFromPoint 打到的是消息气泡），看起来就像「点了没反应」。
     *
     * 用 isolation 而不是把 #wk-viewqueue-view-last 的 z-index 提到某个大数：后者是魔数，
     * 将来页面内部塞个更高 z-index 的浮层就会再被越过。isolation 不改任何几何，只把绘制
     * 顺序关进本层；`.wk-layout-content-right` 已有 transform，层内 position:fixed 的
     * 包含块不受影响。
     */
    isolation: isolate;
}

#wk-viewqueue-view-last {
    z-index: 10;
}

.wk-viewqueue-view-in {

    animation: routeAnimationIn 0.25s;
    -webkit-animation: routeAnimationIn 0.25s; /* Safari 与 Chrome */
}

.wk-viewqueue-view-out {
    animation: routeAnimationOut 0.5s;
    -webkit-animation: routeAnimationOut 0.5s; /* Safari 与 Chrome */
}

@keyframes routeAnimationOut {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100vw, 0, 0);
    }
}

@keyframes routeAnimationIn {
    from {
        transform: translate3d(100vw, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}


.wk-item-contacts {
    display: flex;
    align-items: center;
    padding: 0.266667rem;
    border-radius: 0.106667rem;
    cursor: pointer;

}

.wk-item-contacts:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-contacts:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-contacts-name {
    margin-left: 0.4rem;
    color: var(--wk-text-item);
    font-size: 0.373333rem;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-contacts-name {
    color: white;
}


mark {
    background-color: transparent; /* 移除默认背景色 */
    color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}

.wk-item-group {
    display: flex;
    align-items: center;
    padding: 0.266667rem;
    border-radius: 0.106667rem;
    cursor: pointer;
}


body[theme-mode=dark] .wk-item-group:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-group:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

.wk-item-group-name {
    margin-left: 0.4rem;
    color: #333;
    font-size: 0.373333rem;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-group-name {
    color: white;
}






.wk-item-message {
    display: flex;
    align-items: center;
    padding: 0.266667rem;
    border-radius: 0.106667rem;
    cursor: pointer;

}

.wk-item-message:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-message:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-message-content {
    display: grid;
    grid-template-columns: 1fr; /* 两列，左边自适应，右边自动宽度 */
    grid-template-rows: auto auto; /* 两行 */
    grid-gap: 0px;
    gap: 0px; 
    min-width: 5.333333rem;
    max-width: 11.2rem;

}

.wk-item-message-name {
    margin-left: 0.4rem;
    color: #333;
    font-size: 0.373333rem;
    font-weight: 500;
    grid-column: 1 / 2; /* 第一列 */
    grid-row: 1 / 2; /* 第一行 */
}

body[theme-mode=dark] .wk-item-message-name {
    color: white;
}


.wk-item-message-digest {
    margin-left: 0.4rem;
    color: #999;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
}

mark {
    background-color: transparent; /* 移除默认背景色 */
    color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}


.wk-tab-all {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
}

.wk-tab-contacts {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
}


.wk-tab-group {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
}


.wk-item-file-icon {
    width: 1.12rem;
    height: 1.12rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-item-file {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; /* 两行 */
    grid-gap: 0px;
    gap: 0px;
    padding: 0.266667rem;
    border-radius: 0.106667rem;
}

.wk-item-file:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-file:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}


.wk-item-file-icon {
    grid-column: 1 / 2; /* 第一列 */
    grid-row: 1 / 3; /* 第一行 */
}

.wk-item-file-name {
    grid-column: 2 / 3; /* 第二列 */
    grid-row: 1 / 2; /* 第一行 */
    margin-left: 0.4rem;
    color: var(--wk-text-item);
    font-size: 0.373333rem;
    font-weight: 500;
}

.wk-item-file-desc {
    grid-row: 2 / 3; /* 第二行 */
    grid-column: 2 / 3; /* 第二列 */
    display: flex;
    margin-left: 0.4rem;
    color: #666;
    font-size: 0.32rem;
    align-items: center;
}

.wk-item-file-line {
    width: 0.026667rem;
    height: 0.213333rem;
    background-color: #666;
    margin-top: 0.266667rem;
    margin-bottom: 0.266667rem;
    margin: 0.106667rem;
}
.wk-tab-file {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
    cursor: pointer;
}
@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}



 :root {
    --wk-color-theme: #4A7AF5;
    --wk-color-secondary: rgba(246, 246, 246);
    --wk-color-secondary-2:  rgba(246, 246, 246);
    --wk-color-hover: #eee;
    /* 提示类型的字体颜色 */
    --wk-color-font-tip: rgb(170,170,170);
    --wk-width-layout-content-left: 8rem;
    --wk-wdith-conversation-list: var(--wk-width-layout-content-left);
    /* --wk-height-chat-search: 65px; */
    --wk-height-chat-search: 1.706667rem;
    --wk-height-chat-conversation-header: 1.706667rem;
    --wk-wdith-chat-channelsetting: 9.066667rem;
    --wk-layer-transition: 300ms cubic-bezier(0.33,1,0.68,1);
    --wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    --wk-line: 0.026667rem solid #eee;
    --wk-line-color:  #eee;

    --wk-color-item: white;
    --wk-text-item:  rgba(9,30,66,.87);

    --wk-message-item: white;
    --wk-message-color: #0F0F0F;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body[theme-mode=dark] {
    --wk-color-secondary: #0F0F0F;
    --wk-color-secondary-2: rgb(33,33,33);
    --wk-line: 0.026667rem solid rgb(255,255,255,0.1);
    --wk-line-color: rgb(255,255,255,0.1);
    --wk-color-item: rgb(33,33,33);
    --wk-text-item: white;
    color: white !important;

    --wk-message-item: #0F0F0F;
    --wk-message-color: white;

    --semi-color-primary: #4A7AF5;
    --semi-color-primary-hover: rgba(74, 122, 245, 0.85);
    --semi-color-primary-active: #3F68D1;

  }

  /* ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
  } */

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html {
    height: 100%;
    box-sizing: border-box;
}
  
  body {
    height: 100%;
    margin: 0;
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Cantarell,sans-serif; */
    font-family: "Roboto",-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Helvetica Neue",sans-serif;
    /* Override amfe-flexible's DPR-based inline body size; layout scaling is driven by the root rem. */
    font-size: 0.373333rem !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var( --background-color);
    color: rgba(9,30,66,.87) ;

    --semi-color-primary: #4A7AF5;
    --semi-color-primary-hover: rgba(74, 122, 245, 0.85);
    --semi-color-primary-active: #3F68D1;
  }

  div {
    outline:none; /** 让div没有焦点边框 不加这个 第一次打开Modal会聚焦**/
  }
  
  #root {
    height: 100%;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
  
  
  .page {
    width: 100%;
    height: 100%;
    background-color: rgb(236, 239, 243);
  }
  
  .pageContent {
    padding: 0px 1.066667rem;
    overflow-y: auto;
  }
  
    .pageContent.space {
        padding-top: 1.066667rem;
        width: 100%;
        height: 100%;
    }
  
  @font-face {
    font-family: "icomoon";
    src: url(../../static/media/icomoon.536087723585cc76b849.woff2);
  }
  
  [class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  
  ul {
      list-style-type: none;
      margin-block-start: 0px;
      margin-block-end: 0px;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 0px;
  }
  


  .wk-loading {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.4rem 0px;
  }

  .wk-text-oneline {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[theme-mode=dark] .semi-badge-count {
    color: white;
  }



.wk-list-item {
    width: 100%;
    min-height: 1.386667rem;
    padding: 0 0.426667rem;
    gap: 0.213333rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    justify-content: space-between;
    box-sizing: border-box;
}

.wk-list-item:hover {
    background-color: #FAFAFB;
}

body[theme-mode=dark] .wk-list-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* 不可点击的行（不传 onClick）：无手型、无 hover */
.wk-list-item-static,
.wk-list-item-static:hover,
body[theme-mode=dark] .wk-list-item-static:hover {
    cursor: default;
    background-color: transparent;
}


.wk-list-item-ripple {
    position: relative;
    overflow: hidden;
}


.wk-list-item-ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .7s, opacity .5s;
}

.wk-list-item-ripple:active:after {
    transform: scale(0, 0);
    opacity: .7;
    transition: 0s;
}

.wk-list-item-icon {
    width: 0.693333rem;
    height: 0.693333rem;
    border-radius: 0.213333rem;
    flex: 0 0 0.693333rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-list-item-main {
    flex: 1 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wk-list-item-title {
    font-size: 0.373333rem;
    font-weight: 400;
    line-height: 0.586667rem;
    letter-spacing: -0.43px;
    color: #000;
    flex-shrink: 0;
    white-space: nowrap;
}


body[theme-mode=dark] .wk-list-item-title{
    color: white;
}

/* 标题下方的说明文字 */
.wk-list-item-detail {
    font-size: 0.32rem;
    line-height: 0.48rem;
    letter-spacing: -0.08px;
    color: #A1A1AA;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wk-list-item-action {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0;
    margin-left: auto;
}

.wk-list-item-subtitle {
    flex: 1 1;
    min-width: 0;
    margin-left: 0;
    font-size: 0.373333rem;
    line-height: 0.586667rem;
    letter-spacing: -0.43px;
    color: rgba(60, 60, 67, 0.6);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[theme-mode=dark] .wk-list-item-subtitle {
    color: var(--wk-color-font-tip);
}

.wk-list-item-subtitle-oneline {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
}

/* 多行行（群公告）：标题行 + 下方整段正文 */
.wk-list-item-muliteline {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

.wk-list-item-muliteline.wk-list-item-ripple:active::after {
    opacity: 0;
}

.wk-list-item-muliteline-header {
    display: flex;
    align-items: center;
    gap: 0.213333rem;
    min-height: 1.386667rem;
    padding: 0 0.426667rem;
    box-sizing: border-box;
}

.wk-list-item-muliteline-header .wk-list-item-title {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-list-item-subtitle-muliteline-body {
    position: relative;
    min-height: 2.88rem;
    padding: 0 0.213333rem 0.213333rem 0.32rem;
    box-sizing: border-box;
}

.wk-list-item-subtitle-muliteline {
    position: relative;
    font-size: 0.32rem;
    line-height: 0.48rem;
    color: #A1A1AA;
    white-space:  pre-line;
    word-wrap:break-word;
}

.wk-list-item-subtitle-muliteline-collapsed {
    display: -webkit-box;
    max-height: 2.88rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.wk-list-item-subtitle-toggle {
    display: flex;
    align-items: center;
    gap: 0.106667rem;
    margin: 0.106667rem 0.106667rem 0 auto;
    padding: 0.053333rem 0;
    border: 0;
    color: #4A7AF5;
    font-size: 0.32rem;
    line-height: 0.48rem;
    background: transparent;
    cursor: pointer;
}

.wk-list-item-subtitle-toggle-arrow {
    width: 0.16rem;
    height: 0.16rem;
    border-right: 0.04rem solid currentColor;
    border-bottom: 0.04rem solid currentColor;
    transform: translateY(-0.053333rem) rotate(45deg);
}

.wk-list-item-subtitle-toggle-expanded .wk-list-item-subtitle-toggle-arrow {
    transform: translateY(0.053333rem) rotate(225deg);
}

/* 右箭头 */
.wk-list-item-arrow {
    width: 0.213333rem;
    height: 0.213333rem;
    margin-right: 0;
    border-right: 0.042667rem solid #C4C4C6;
    border-top: 0.042667rem solid #C4C4C6;
    transform: rotate(45deg);
    flex: 0 0 0.213333rem;
}

.wk-list-item-action-icon {
    width: 0.64rem;
    height: 0.64rem;
    flex: 0 0 0.64rem;
    -o-object-fit: contain;
       object-fit: contain;
}

/* 开关（设计稿：轨道 57x26，滑块 33x22，开 #00CA48 / 关 #C4C5C7） */
.wk-list-item-switch .semi-switch {
    width: 1.52rem;
    height: 0.693333rem;
    border-radius: 1.6rem;
    border: none;
    background-color: #C4C5C7;
}

.wk-list-item-switch .semi-switch:hover {
    background-color: #C4C5C7;
}

.wk-list-item-switch .semi-switch-checked,
.wk-list-item-switch .semi-switch-checked:hover,
.wk-list-item-switch .semi-switch-active {
    background-color: #00CA48;
}

.wk-list-item-switch .semi-switch-knob,
.wk-list-item-switch .semi-switch:active .semi-switch-knob {
    width: 0.88rem;
    height: 0.586667rem;
    top: 0.053333rem;
    left: 0.053333rem;
    border-radius: 1.6rem;
    box-shadow: none;
    transform: translateX(0);
}

.wk-list-item-switch .semi-switch-checked .semi-switch-knob,
.wk-list-item-switch .semi-switch-checked:active .semi-switch-knob {
    transform: translateX(0.533333rem);
}

/* 底部按钮 */
.wk-list-item-button-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    background: transparent;
}

.wk-list-item-button {
    /* 设计稿按钮宽 259 / 页面宽 375 ≈ 列表容器(345)的 75% */
    width: 6.906667rem;
    max-width: 100%;
    height: 1.226667rem;
    border-radius: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.426667rem;
    font-weight: 500;
    letter-spacing: -0.408px;
    cursor: pointer;
    background-color: #4A7AF5;
    color: #fff;
}

.wk-list-item-button-warn {
    background-color: rgba(74, 122, 245, 0.15);
    color: #4A7AF5;
}

.wk-list-item-tip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wk-color-font-tip);
    font-size: 0.346667rem;

}


.wk-inputedit {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0.746667rem 0.4rem 0;
    box-sizing: border-box;
    background-color: #F0F0F3;
}

.wk-inputedit-title {
    display: flex;
    align-items: center;
    height: 0.64rem;
    margin-bottom: 0.4rem;
    color: #1f2937;
    font-size: 0.453333rem;
    font-weight: 600;
    line-height: 0.64rem;
}

.wk-inputedit-title::before {
    content: "";
    display: block;
    width: 0.08rem;
    height: 0.586667rem;
    margin-right: 0.213333rem;
    border-radius: 0.053333rem;
    background-color: #4A7AF5;
}

.wk-inputedit-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 5.973333rem;
    border: 0.026667rem solid #dfe3ea;
    border-radius: 0.32rem;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.wk-inputedit .semi-input-textarea-wrapper {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    overflow: hidden;
}

.wk-inputedit .semi-input-textarea-wrapper:hover,
.wk-inputedit .semi-input-textarea-wrapper:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.wk-inputedit-field:hover,
.wk-inputedit-field:focus-within {
    border-color: #dfe3ea;
}

.wk-inputedit .semi-input-textarea {
    flex: 0 0 auto;
    min-height: 0;
    color: #1f2937;
    font-size: 0.373333rem;
    line-height: 0.586667rem;
    background-color: transparent;
}

.wk-inputedit .semi-input-textarea::-moz-placeholder {
    color: #8a97aa;
}

.wk-inputedit .semi-input-textarea::placeholder {
    color: #8a97aa;
}

.wk-inputedit .semi-input-textarea {
    padding: 0.48rem 0.48rem 0;
    resize: none;
}

.wk-inputedit-wrap .semi-input-textarea-wrapper {
    flex: 0 0 5.76rem;
    height: 5.76rem;
    min-height: 5.76rem;
    max-height: 5.76rem;
}

.wk-inputedit-wrap .semi-input-textarea,
.wk-inputedit-single .semi-input-textarea {
    flex: 1 1 auto;
    height: auto;
    overflow-y: auto;
}

.wk-inputedit-tools {
    display: flex;
    flex: 0 0 1.066667rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.213333rem;
    width: 100%;
    min-height: 1.066667rem;
    padding: 0.213333rem 0.48rem;
    box-sizing: border-box;
}

.wk-inputedit-clear {
    display: flex;
    width: 0.64rem;
    height: 0.64rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    outline: none;
    color: #8b8d91;
    background: transparent;
    cursor: pointer;
}

.wk-inputedit-clear svg {
    display: block;
    width: 0.533333rem;
    height: 0.533333rem;
}

.wk-inputedit-clear circle {
    fill: currentColor;
}

.wk-inputedit-clear path {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
}

.wk-inputedit-counter {
    color: var(--semi-color-text-2);
    font-size: 0.32rem;
    line-height: 0.426667rem;
    white-space: nowrap;
}

.wk-inputedit-counter.is-exceeded {
    color: #ff4d4f;
}

.wk-inputedit-placeholder {
    display: flex;
    align-items: center;
    margin: 0.4rem 0 0 0;
    color: #ff4d4f;
    font-size: 0.373333rem;
    line-height: 0.533333rem;
}

.wk-inputedit-placeholder::before {
    content: "!";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.373333rem;
    height: 0.373333rem;
    margin-right: 0.053333rem;
    border: 0.026667rem solid #ff4d4f;
    border-radius: 50%;
    font-size: 0.266667rem;
    line-height: 1;
}

.wk-inputedit-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.2rem;
    max-width: calc(100% - 1.706667rem);
    height: 1.386667rem;
    margin: 3.093333rem auto 0;
    padding: 0;
    border-radius: 0.32rem;
    font-size: 0.453333rem;
    font-weight: 600;
    text-align: center;
    background-color: #4A7AF5;
}

.wk-inputedit-submit .semi-button-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.wk-inputedit-submit-label {
    display: block;
}

.wk-inputedit-submit-spinner {
    position: absolute;
    left: calc(50% - 1.013333rem);
    width: 0.373333rem;
    height: 0.373333rem;
    border: 0.053333rem solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    animation: wk-inputedit-submit-spin 0.6s linear infinite;
}

@keyframes wk-inputedit-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.wk-inputedit-submit.semi-button-disabled,
.wk-inputedit-submit.semi-button-disabled:hover,
.wk-inputedit-submit[disabled],
.wk-inputedit-submit[disabled]:hover {
    opacity: 1;
    color: #fff;
    background-color: #9CB8FA;
}

.wk-inputedit-submit:not(.semi-button-disabled):not([disabled]):hover {
    background-color: #3F68D1;
}

body[theme-mode=dark] .wk-inputedit-field {
    border-color: var(--wk-line-color);
    background-color: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-inputedit .semi-input-textarea-wrapper {
    background-color: transparent;
}

body[theme-mode=dark] .wk-inputedit {
    background-color: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-inputedit-title {
    color: #fff;
}

body[theme-mode=dark] .wk-inputedit .semi-input-textarea {
    color: #fff;
}




.wk-conversationselect {
    max-height: 16rem;
    overflow: hidden;
}

.wk-conversationselect-content {
    display: flex;
    padding: 0.266667rem 0.266667rem 0.266667rem 0px;
    cursor: pointer;
    align-items: center;
}

.wk-conversationselect-content-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.706667rem;
    width: 100%;
    background: var(--wk-color-secondary);
    font-weight: bold;
    font-size: 0.453333rem;
}

.wk-conversationselect-content-searchBox {
    display: flex;
    align-items: center;
    width: 100%;
    height: 1.52rem;
    padding-left: 0.533333rem;
    flex-wrap: wrap;
    overflow: auto;
    max-height: 10.666667rem;
}

.wk-conversationselect-content-selectedChannel {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}

.wk-conversationselect-content-selectedAvatar {
    padding: 0.053333rem;
    cursor: pointer;
}


.wk-conversationselect-content-searchContent {
    display: flex;
    min-width: 5.333333rem;
    height: 1.333333rem;
}

.wk-conversationselect-content-searchContent input {
    flex: 1 1;
    height: 0.853333rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    background-color: transparent;
    color: #1f2329;
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

.wk-conversationselect-content-searchIcon {
    display: flex;
    align-items: center;
}

.wk-conversationselect-content-searchInput {
    margin-left: 0.266667rem;
    max-width: 2.666667rem;
}

.wk-conversationselect-content-box {
    padding: 0px 0.533333rem;
    max-height: 10.666667rem;
    overflow: auto;
}


.wk-conversationselect-content-header {
    background: var(--wk-color-secondary);
    font-weight: 400;
    font-size: 0.346667rem;
    padding: 0 0.48rem;
    line-height: 0.666667rem;
}

.wk-conversationselect-content-list {

}

.wk-conversationselect-content-box-data {
    display: flex;
    margin-left: 0.266667rem;
}

.wk-conversationselect-content-box-name {
    margin-left: 0.266667rem;
    display: flex;
    align-items: center;
}


.wk-conversationselect-footer {
    background: var(--wk-color-secondary);
    height: 2.666667rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-conversationselect-okBtn {
    cursor: pointer;
    width: 4.266667rem;
    border-radius: 0.213333rem;
    height: 1.066667rem;
    background-color: var(--wk-color-theme);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}



.wk-userinfo {
    background-color: var(--wk-color-secondary);
    position: relative;
    --wk-height-userInfo-footer: 1.6rem;
    --wk-height-userInfo-nav: 1.173333rem;
    width: 100%;
    height: 100%;
}


.wk-userInfo-footer {
    width: 100%;
    height: var(--wk-height-userInfo-footer);
    background-color: white;
    position: absolute;
    bottom: 0px;
}

body[theme-mode=dark]  .wk-userInfo-footer {
    background-color: var(--wk-color-secondary);
}

.wk-userinfo-user {
    display: flex;
    min-width: 0;
}

.wk-userinfo-content {
    width: 100%;
    height: calc(100% - var(--wk-height-userInfo-footer));
    overflow: auto;
}

.wk-userinfo-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wk-userinfo-user-avatar {
    margin-left: 0.533333rem;
    border-radius: 40%;
    background-color: var(--wk-color-item);
    width: 1.44rem;
    height: 1.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-userinfo-user-avatar  img{
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 40%;
}

.wk-userinfo-user-info-name {
    font-size: 0.426667rem;
    color: var(--wk-text-item);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-userinfo-user-info-others  ul {
    margin-bottom: 0px;
    margin-top: 0.053333rem;
}

.wk-userinfo-user-info-others li {
    color: var(--wk-color-font-tip);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-userinfo-copy-row {
    cursor: pointer;
}

.wk-userinfo-copy-row:hover {
    color: var(--wk-color-theme);
}

.wk-userinfo-footer-sendbutton {
    width: 100%;
    height: 100%;
    padding: 0.266667rem 0.4rem 0.4rem 0.4rem;
}

.wk-userinfo-footer-sendbutton button {
    width: 100%;
    height: 1.066667rem;
}


.wk-userinfo-sections{
    margin-top: 0.533333rem;
}

.wk-userinfo-loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.533333rem;
}


.wk-friendapply {
    width: 100%;
    height: 100%;
    background-color:white;
}

body[theme-mode=dark] .wk-friendapply {
    background-color:var(--wk-color-secondary);
}

.wk-friendapply-content {
    padding: 0.4rem;
}

.wk-friendapply-content-tip {
    color: gray;
}

.wk-friendapply-content-message {
    margin-top: 0.133333rem;
}
/* Figma: Chat APP / Badge / copy success (node 3994:72219). */
.wk-copy-success-toast {
  margin-top: -0.8rem;
}

.wk-copy-success-toast .semi-toast-content {
  margin: 0.32rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wk-copy-success-toast .semi-toast-content-text {
  margin: 0;
  max-width: none !important;
}

.wk-copy-success-toast-badge {
  box-sizing: border-box;
  width: 3.093333rem;
  height: 0.96rem;
  padding: 0.08rem 0.24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  overflow: hidden;
  border-radius: 0.213333rem;
  background: rgba(217, 249, 230, 0.5);
  box-shadow: 0 0.106667rem 0.106667rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(0.048347rem);
  backdrop-filter: blur(0.048347rem);
}

.wk-copy-success-toast-icon {
  width: 0.586667rem;
  height: 0.522667rem;
  flex: 0 0 0.586667rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-copy-success-toast-icon img {
  width: 0.586667rem;
  height: 0.522667rem;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-copy-success-toast-label {
  color: #2f9461;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.588507rem;
  text-align: center;
  white-space: nowrap;
}

.wk-base {
  width: 100%;
  height: 100%;
}

.wk-base-modal .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.wk-base-modal .semi-modal-close {
  display: none;
}

.wk-base-modal .semi-modal-body-wrapper {
  margin: 0px;
}

.wk-base-alert-modal {
  width: 7.52rem !important;
  max-width: calc(100vw - 1.28rem);
}

.wk-base-alert-content {
  box-sizing: border-box;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0.373333rem !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 0.373333rem 1.066667rem rgba(15, 23, 42, 0.18) !important;
  text-align: center;
}

.wk-base-alert-content .semi-modal-close {
  display: none;
}

.wk-base-alert-content .semi-modal-header {
  display: flex !important;
  width: 100%;
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0.48rem 0.533333rem 0.186667rem !important;
  text-align: center !important;
}

.wk-base-alert-content .semi-modal-title {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  color: #1f2937;
  font-size: 0.453333rem;
  font-weight: 600;
  line-height: 0.586667rem;
  text-align: center !important;
}

.wk-base-alert-content .semi-modal-body-wrapper {
  margin: 0 !important;
}

.wk-base-alert-content .semi-modal-body {
  padding: 0 0.533333rem 0.48rem !important;
  color: #4b5563;
  font-size: 0.346667rem;
  font-weight: 400;
  word-break: break-word;
  line-height: 0.506667rem;
  text-align: center;
}

.wk-base-alert-content .semi-modal-footer {
  display: flex !important;
  width: 100%;
  min-height: 1.173333rem;
  box-sizing: border-box;
  flex-direction: row !important;
  align-items: center;
  justify-content: stretch !important;
  border-top: 0.026667rem solid #e5e7eb;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
}

/* Semi 会在两个按钮外再包一层无 class 的 div；这一层不铺满时，
   即使按钮本身设为 50%，也只会在左侧按内容宽度收缩。 */
.wk-base-alert-content .semi-modal-footer > * {
  display: flex !important;
  width: 100% !important;
  min-width: 0;
  flex: 1 1 100% !important;
  align-items: stretch;
}

.wk-base-alert-content .semi-modal-footer .semi-button {
  height: 1.173333rem;
  min-width: 0;
  width: 50% !important;
  max-width: none !important;
  flex: 1 1 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 0.213333rem !important;
  background: transparent !important;
  color: #3478f6 !important;
  font-size: 0.426667rem;
  font-weight: 400;
  line-height: 1.173333rem;
  text-align: center;
}

.wk-base-alert-content .semi-modal-footer .semi-button:only-child {
  width: 100% !important;
  flex-basis: 100% !important;
}

.wk-base-alert-content .semi-modal-footer .semi-button-content {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.wk-base-alert-content .semi-modal-footer .semi-button + .semi-button {
  border-left: 0.026667rem solid #e5e7eb !important;
}

.wk-base-alert-modal.is-danger .semi-modal-footer .semi-button-primary {
  color: #e5232a !important;
  font-weight: 600;
}

.wk-base-alert-content .semi-modal-footer .semi-button:active {
  background: rgba(15, 23, 42, 0.05) !important;
}

.wk-base-modal-userinfo .semi-modal-body {
  height: 13.333333rem;
}

.wk-base-modal-userinfo {
  max-width: 10.666667rem;
}

/* 加入组织 */
.wk-base-modal-join-org .semi-modal-content {
  border: none !important;
  padding: 0.32rem !important;
}
.wk-base-modal-join-org .semi-modal-header {
  margin: 0.32rem !important;
}
.wk-base-modal-join-org .semi-modal-body-wrapper {
  margin: 0px;
}
.wk-base-modal-join-org .semi-modal-body {
  height: 11.2rem;
}

.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
  outline: none;
}

@media (max-width: 480px) {
  .wk-base-alert-modal {
    width: 7.52rem !important;
    max-width: calc(100vw - 1.28rem);
    margin: 0 auto;
  }
}

body[theme-mode="dark"] .wk-base-alert-content {
  background: rgba(38, 45, 58, 0.97) !important;
}

body[theme-mode="dark"] .wk-base-alert-content .semi-modal-title {
  color: #ffffff;
}

body[theme-mode="dark"] .wk-base-alert-content .semi-modal-body {
  color: rgba(255, 255, 255, 0.58);
}

body[theme-mode="dark"] .wk-base-alert-content .semi-modal-footer,
body[theme-mode="dark"] .wk-base-alert-content .semi-modal-footer .semi-button + .semi-button {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.wk-inapp-notification-host {
  position: fixed;
  z-index: 3000;
  top: max(0.213333rem, env(safe-area-inset-top));
  left: 0.266667rem;
  right: 0.266667rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.wk-inapp-notification-banner {
  position: relative;
  width: min(100%, 11.2rem);
  min-height: 1.92rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 0.266667rem;
  border: 0;
  border-radius: 0.48rem;
  padding: 0.266667rem 0.32rem;
  background: #DADADA;
  box-shadow: 0 0.133333rem 0.266667rem rgba(0, 0, 0, .16);
  color: #1d1d1f;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-x;
  animation: wk-inapp-notification-enter .34s cubic-bezier(.22, .82, .31, 1.12) both;
}

.wk-inapp-notification-banner.is-closing {
  animation: wk-inapp-notification-exit .22s ease-in both;
  pointer-events: none;
}

.wk-inapp-notification-icon {
  width: 1.386667rem;
  height: 1.386667rem;
  flex: 0 0 1.386667rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-inapp-notification-copy {
  min-width: 0;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0.133333rem;
}

.wk-inapp-notification-group-name,
.wk-inapp-notification-body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-inapp-notification-title {
  container-type: inline-size;
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-size: 0.426667rem;
  font-weight: 600;
  line-height: 0.533333rem;
}

.wk-inapp-notification-group-name {
  flex: 0 1 auto;
  min-width: 0;
}

.wk-inapp-notification-prompt {
  flex: 0 0 auto;
  white-space: nowrap;
  /* 为完整提示留出空间，其余宽度优先给群名。 */
  font-size: inherit;
}

.wk-inapp-notification-body {
  color: #5a6069;
  font-size: 0.346667rem;
  font-weight: 400;
  line-height: 0.453333rem;
}

.wk-inapp-notification-stack {
  --wk-inapp-stack-tail: 0.213333rem;
  position: relative;
  width: min(100%, 11.2rem);
  padding-bottom: var(--wk-inapp-stack-tail);
  box-sizing: border-box;
  pointer-events: none;
}

.wk-inapp-notification-stack.has-back {
  --wk-inapp-stack-tail: 0.426667rem;
}

.wk-inapp-notification-stack > .wk-inapp-notification-banner {
  width: 100%;
  z-index: 3;
}

.wk-inapp-notification-stack .wk-inapp-notification-title {
  box-sizing: border-box;
  padding-right: 1.173333rem;
}

.wk-inapp-notification-stack-card {
  position: absolute;
  top: 0;
  bottom: var(--wk-inapp-stack-tail);
  overflow: hidden;
  border-radius: 0.48rem;
  background: #DADADA;
  pointer-events: none;
  transition: transform .22s ease, left .22s ease, right .22s ease;
}

.wk-inapp-notification-stack-card.is-back {
  z-index: 1;
  left: 8%;
  right: 8%;
  background: #c9c9c9;
  transform: translateY(0.426667rem);
  box-shadow: 0 0.133333rem 0.266667rem rgba(0, 0, 0, .08);
}

.wk-inapp-notification-stack-card.is-middle {
  z-index: 2;
  left: 5%;
  right: 5%;
  background: #d2d2d2;
  transform: translateY(0.213333rem);
}

.wk-inapp-notification-stack-card .wk-inapp-notification-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  opacity: .55;
  filter: blur(0.08rem);
  animation: none;
  pointer-events: none;
}

.wk-inapp-notification-count {
  position: absolute;
  z-index: 4;
  top: 0.16rem;
  right: 0.16rem;
  height: 0.586667rem;
  display: flex;
  align-items: center;
  border-radius: 0.293333rem;
  padding: 0 0.186667rem;
  background: #858585;
  color: #fff;
  font-size: 0.32rem;
  font-weight: 600;
  pointer-events: none;
}

.wk-inapp-notification-center {
  width: min(100%, 11.2rem);
  max-height: min(11.52rem, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 0.426667rem));
  max-height: min(11.52rem, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 0.426667rem));
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  border: 0.026667rem solid rgba(255, 255, 255, .73);
  border-radius: 0.54048rem;
  background: rgba(238, 241, 246, .85);
  box-shadow: 0 0 0 .8px rgba(156, 184, 238, .3), 0 0.300267rem 0.780693rem rgba(17, 24, 39, .27);
  backdrop-filter: blur(0.420373rem);
  -webkit-backdrop-filter: blur(0.420373rem);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  pointer-events: auto;
  animation: wk-inapp-notification-enter .3s cubic-bezier(.22, .82, .31, 1.05) both;
}

.wk-inapp-notification-host.is-expanded {
  left: 0.48rem;
  right: 0.48rem;
}

.wk-inapp-notification-center-header {
  flex: 0 0 1.44128rem;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 0.210187rem;
  border-bottom: 0.030027rem solid rgba(65, 67, 74, .08);
  padding: 0 0.36032rem;
  color: #17191d;
}

.wk-inapp-notification-center-header > strong {
  font-size: 0.373333rem;
  font-weight: 700;
  line-height: 0.533333rem;
  white-space: nowrap;
}

.wk-inapp-notification-center-header > span {
  padding-top: 0.04504rem;
  color: #62666c;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.453333rem;
  white-space: nowrap;
}

.wk-inapp-notification-center-spacer {
  flex: 1 1 auto;
}

.wk-inapp-notification-center-header button {
  height: 0.746667rem;
  display: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.210187rem;
  padding: 0.106667rem 0.213333rem;
  background: #e1e4e9;
  color: #454950;
  font-family: inherit;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.533333rem;
  cursor: pointer;
}

.wk-inapp-notification-center-header button.is-clear {
  width: 0.747093rem;
  height: 0.6736rem;
  flex: 0 0 0.747093rem;
  padding: 0;
  background: #fff;
  color: #e24e4e;
  font-family: Arial, sans-serif;
  font-size: 0.4504rem;
  font-weight: 400;
  line-height: 0.36032rem;
}

.wk-inapp-notification-center-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.wk-inapp-notification-center-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.24rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.213333rem 0.266667rem;
  scrollbar-width: none;
}

.wk-inapp-notification-center-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.wk-inapp-notification-scrollbar {
  position: absolute;
  top: 0.133333rem;
  right: 0.08rem;
  bottom: 0.266667rem;
  width: 0.106667rem;
  pointer-events: none;
}

.wk-inapp-notification-scrollbar::before {
  content: "";
  position: absolute;
  inset: 0 0.026667rem;
  border-radius: 0.026667rem;
  background: #e3e4e6;
}

.wk-inapp-notification-scrollbar > span {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 0.053333rem;
  background: #929ba8;
}

.wk-inapp-notification-center-list .wk-inapp-notification-banner {
  width: 100%;
  flex: 0 0 auto;
  height: 1.6rem;
  min-height: 1.6rem;
  border-radius: 0.373333rem;
  padding: 0.213333rem 0.32rem;
  overflow: hidden;
  box-shadow: 0 0.060053rem 0.18016rem rgba(29, 36, 48, .05);
  font-family: inherit;
}

.wk-inapp-notification-center-list .wk-inapp-notification-icon {
  width: 1.066667rem;
  height: 1.066667rem;
  flex-basis: 1.066667rem;
}

.wk-inapp-notification-center-list .wk-inapp-notification-copy {
  gap: 0.106667rem;
}

.wk-inapp-notification-center-list .wk-inapp-notification-title {
  color: #17191d;
  font-size: 0.32rem;
  line-height: 0.48rem;
}

.wk-inapp-notification-center-list .wk-inapp-notification-body {
  color: #555a61;
  font-size: 0.293333rem;
  font-weight: 500;
  line-height: 0.373333rem;
}

@keyframes wk-inapp-notification-enter {
  from { opacity: 0; transform: translate3d(0, -115%, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes wk-inapp-notification-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, -115%, 0) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-inapp-notification-banner,
  .wk-inapp-notification-center {
    animation-duration: .01ms;
  }
  .wk-inapp-notification-stack-card {
    transition: none;
  }
}

.wk-message-card {
    background-color: white;
    width: 8rem;
    cursor: pointer;
    border-radius: 0.213333rem;
}

body[theme-mode=dark] .wk-message-card {
    background-color: var(--wk-color-secondary);
}


.wk-message-card-content {
    display: flex;
    padding: 0.266667rem;
    align-items: center;
}

.wk-message-card-content-name {
    margin-left: 0.533333rem;
    color: var(--wk-text-item);

}

.wk-message-card-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0.266667rem 0.133333rem 0.266667rem;
} 

.wk-message-card-bottom-flag {
    font-size: 0.32rem;
    color: #999;
}

.wk-message-card-bottom-time {
    position: absolute;
    right: 0.266667rem;
    top: -0.133333rem;
    color: #999 !important;
}
.wk-expired-media {
    box-sizing: border-box;
    display: flex;
    min-width: 2.133333rem;
    min-height: 1.6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    color: #999;
}

.wk-expired-media-icon {
    margin-bottom: 0.106667rem;
}

.wk-expired-media-label {
    font-size: 0.32rem;
    line-height: 1.4;
    color: #999;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

body.wk-image-preview-open .react-viewer-navbar {
    display: none !important;
}

.wk-join-oraganization {
  background-color: white;
  cursor: pointer;
  border-radius: 0.213333rem;
  width: 100%;
}

body[theme-mode=dark] .wk-join-oraganization {
  background-color: var(--wk-color-secondary);
}


.wk-join-oraganization-content {
  display: flex;
  padding: 0.266667rem;
  align-items: center;
}

.wk-join-oraganization-content-name {
  margin-left: 0.533333rem;
  color: var(--wk-text-item);
}

.wk-join-oraganization-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0.266667rem 0.133333rem 0.266667rem;
}

.wk-join-oraganization-bottom-flag {
  font-size: 0.32rem;
  color: #999;
}

.wk-join-oraganization-bottom-time {
  position: absolute;
  right: 0.266667rem;
  top: -0.133333rem;
  color: #999 !important;
}

.wk-message-system {
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 1.28rem);
    margin: 0 auto;
    padding: 0.08rem 0.266667rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.426667rem;
    color: rgb(120, 130, 146);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 26.64rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* 系统消息和群公告不使用浏览器文字选择，避免长按时出现原生蓝色选区。 */
.wk-message-system,
.wk-message-group-announcement,
.wk-message-group-announcement * {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-touch-callout: none;
}

body[theme-mode=dark] .wk-message-system  {
    color: #b4bdca;
    background: rgba(255, 255, 255, 0.12);
}

.wk-message-group-announcement-wrap {
    width: 100%;
    padding: 0 0.64rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.wk-message-group-announcement {
    width: 100%;
    min-width: 0;
    max-width: 8.533333rem;
    padding: 0.32rem 0.373333rem;
    box-sizing: border-box;
    text-align: left;
    background: rgba(255, 255, 255, 0.82);
    border: 0.026667rem solid rgba(41, 97, 242, 0.1);
    border-radius: 0.426667rem;
}

.wk-message-group-announcement-title {
    display: flex;
    align-items: center;
    gap: 0.186667rem;
    color: rgb(41, 97, 242);
    font-size: 0.346667rem;
    font-weight: 600;
    line-height: 0.48rem;
}

.wk-message-group-announcement-icon {
    width: 0.426667rem;
    height: 0.426667rem;
    flex: 0 0 0.426667rem;
    fill: currentColor;
}

.wk-message-group-announcement-content {
    margin-top: 0.24rem;
    color: rgb(31, 41, 55);
    font-size: 0.346667rem;
    font-weight: 400;
    line-height: 0.48rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wk-message-group-announcement-actor {
    margin-top: 0.24rem;
    color: rgb(120, 130, 146);
    font-size: 0.293333rem;
    font-weight: 400;
    line-height: 0.4rem;
}

body[theme-mode=dark] .wk-message-group-announcement {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(76, 125, 250, 0.22);
}

body[theme-mode=dark] .wk-message-group-announcement-content {
    color: #eef2f7;
}

body[theme-mode=dark] .wk-message-group-announcement-actor {
    color: #b4bdca;
}

.wk-message-text {
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

.wk-message-text  pre {
    margin-bottom: 0;
    white-space: pre-wrap; /*css-3*/
    white-space: -moz-pre-wrap; /*Mozilla,since1999*/
    white-space: -pre-wrap; /*Opera4-6*/
    white-space: -o-pre-wrap; /*Opera7*/
    word-wrap: break-word; /*InternetExplorer5.5+*/
    font-family: inherit;
}

.wk-message-text-richtext {
    
}

.wk-message-text-richmention {
    cursor: pointer;
    text-decoration: underline;
}

.wk-message-text-send {
    color: white;
}

.wk-message-text-recv {
    color: #1f2937;
}

body[theme-mode=dark] .wk-message-text-recv {
    color: white;
}

.wk-message-text-richemoji {

}

.wk-message-text-richemoji img {
    width: 0.533333rem;
    height: 0.533333rem;
    vertical-align: -0.106667rem;
}

.wk-message-text-reply {
    display: flex;
    color: rgb(255, 255, 255,0.5);
    font-size: 0.373333rem;
    flex-direction: column;
    cursor: pointer;
}

.wk-message-text-reply.wk-message-text-reply-recv {
    color: rgb(0, 0, 0,0.5);
}


.wk-message-text-reply-author {
    display: flex;
    align-items: center;
}

.wk-message-text-reply-authoravatar {
    margin-right: 0.106667rem;
}

.wk-message-text-reply-content { 
    width:100%;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.wk-message-text-content {
    margin: 0;
    word-break: break-word;
    line-height: 0.533333rem;
    text-align: left;
    text-align: initial;
    display: flow-root;
    unicode-bidi: plaintext;
    font-size: 0.373333rem;
}

.wk-message-base-bubble-box.voiceBubble .wk-message-base-bubble {
    padding: 0;
    max-width: none;
}

.wk-message-voice {
    box-sizing: border-box;
    height: 1.386667rem;
    padding: 0.213333rem 0.32rem 0.16rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wk-message-voice-main {
    height: 0.613333rem;
    display: flex;
    align-items: center;
    gap: 0.186667rem;
}

.wk-message-voice .voicePlay {
    position: relative;
    flex: 0 0 0.613333rem;
    width: 0.613333rem;
    height: 0.613333rem;
    display: grid;
    place-items: center;
    background: transparent;
    cursor: pointer;
}

.wk-message-base-bubble-box.recv .wk-message-voice .voicePlay {
    background: transparent;
}

.wk-message-voice .voicePlay i {
    position: absolute;
    display: grid;
    place-items: center;
}

.wk-message-voice .icon-play::before,
.wk-message-voice .icon-pause::before {
    color: currentColor;
    font-size: 0.373333rem;
}

.wk-message-voice .icon-play::before {
    content: "";
}

.wk-message-voice .icon-pause::before {
    content: "";
}

.wk-message-voice .voicePlay .icon-play {
    opacity: 1;
    transition: opacity .18s ease;
}

.wk-message-voice .voicePlay .icon-pause {
    opacity: 0;
    transition: opacity .18s ease;
}

.wk-message-voice .voicePlaying .icon-play,
.wk-message-voice .voiceDownloading .icon-play,
.wk-message-voice .voiceDownloading .icon-pause {
    opacity: 0;
}

.wk-message-voice .voicePlaying .icon-pause {
    opacity: 1;
}

.wk-message-voice .mediaLoading {
    position: absolute;
    inset: 0.08rem;
    display: grid;
    place-items: center;
}

.wk-message-voice .progressSpinner svg {
    display: block;
    animation: voiceSpinnerRotation .9s linear infinite;
}

@keyframes voiceSpinnerRotation {
    to { transform: rotate(360deg); }
}

.wk-message-voice-waveform {
    position: relative;
    flex: 0 0 auto;
    height: 0.586667rem;
}

.wk-message-voice-bars {
    width: 100%;
    height: 0.586667rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wk-message-voice-bar {
    flex: 0 0 0.053333rem;
    width: 0.053333rem;
    border-radius: 26.64rem;
    background: rgba(17, 24, 39, .28);
}

.wk-message-base-bubble-box.send .wk-message-voice-bar {
    background: rgba(255, 255, 255, .48);
}

.wk-message-voice-lightWavform {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    overflow: hidden;
    transition: width 100ms ease-in-out;
}

.wk-message-voice-lightWavform .wk-message-voice-bar {
    background: #457afa;
}

.wk-message-base-bubble-box.send .wk-message-voice-lightWavform .wk-message-voice-bar {
    background: #fff;
}

.wk-message-voice-info-time {
    margin-left: -0.053333rem;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.293333rem;
    line-height: 0.373333rem;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.wk-message-voice-info-tail {
    align-self: flex-end;
    height: 0.293333rem;
    line-height: 0.293333rem;
}

.wk-message-base-bubble-box.voiceBubble.send .wk-message-voice-info-tail {
    align-self: flex-start;
}

.wk-message-base-bubble-box.voiceBubble .wk-message-voice-info-tail .messageMeta {
    width: auto;
    height: 0.293333rem;
    min-height: 0;
    margin: 0;
    justify-content: flex-end;
}

.wk-message-base-bubble-box.voiceBubble.send .wk-message-voice-info-tail .messageMeta {
    justify-content: flex-start;
}

.wk-message-base-bubble-box.voiceBubble .wk-message-voice-info-tail .messageTime {
    margin: 0;
    font-size: 0.24rem;
    line-height: 0.293333rem;
    font-weight: 500;
}

.wk-message-base-bubble-box.voiceBubble.send .wk-message-voice-info-tail .messageTime {
    color: rgba(255, 255, 255, .76);
}

.wk-message-base-bubble-box.voiceBubble.recv .wk-message-voice-info-tail .messageTime {
    color: rgb(196, 202, 211);
}

.wk-message-voice-expired {
    width: auto;
    height: 1.28rem;
    padding: 0 0.32rem;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.186667rem;
    opacity: .9;
}

.wk-message-voice-expired-icon {
    flex-shrink: 0;
}

.wk-message-voice-expired-label {
    font-size: 0.373333rem;
    line-height: 1.4;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.wk-message-video {
    position: relative;
    overflow: hidden;
    border-radius: 0.32rem;
    background: #dfe6ef;
}

.wk-message-video-content {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

.wk-message-video-content-time {
    position: absolute;
    top: 0.16rem;
    left: 0.186667rem;
    z-index: 3;
    display: flex;
    height: 0.48rem;
    align-items: center;
    padding: 0 0.16rem;
    border-radius: 0.32rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.48);
    font-size: 0.293333rem;
    font-weight: 600;
    line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: none;
}

.wk-message-video-content-video,
.wk-message-video-content-video video {
    display: block;
    width: 100%;
    height: 100%;
}

.wk-message-video-content-video video {
    border-radius: 0.32rem;
    background: #dfe6ef;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-message-video-content-video video:fullscreen,
.wk-message-video-content-video video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #000;
    object-fit: contain;
}

.wk-message-video-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: 0.32rem;
    outline: none;
    background: transparent;
    cursor: pointer;
}

.wk-message-video-open:focus-visible {
    box-shadow: inset 0 0 0 0.053333rem rgba(255, 255, 255, 0.9);
}

.wk-message-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 1.386667rem;
    height: 1.386667rem;
    margin: -0.693333rem 0 0 -0.693333rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.48);
    cursor: pointer;
}

.wk-message-video-play .semi-icon {
    font-size: 0.586667rem;
}

.wk-message-video-play:hover {
    background: rgba(0, 0, 0, 0.58);
}

.wk-message-video-meta {
    position: absolute;
    left: 0.186667rem;
    bottom: 0.133333rem;
    z-index: 3;
    pointer-events: none;
}

.wk-message-video-meta-send {
    right: 0.186667rem;
    left: auto;
}

.wk-message-video-meta .messageMeta {
    width: auto;
    min-height: 0;
    margin: 0;
    color: #fff;
    text-shadow: 0 0.026667rem 0.106667rem rgba(0, 0, 0, 0.72);
}

.wk-message-video-meta .messageTime {
    margin: 0;
    color: #fff !important;
    font-size: 0.293333rem;
    font-weight: 600;
}

.wk-message-video-meta .messageStatus {
    margin-left: 0.053333rem;
}


.wk-message-location {
    cursor: pointer;
}

.wk-message-location-content {
    width: 6.666667rem;
    background-color: white;
    border-radius: 0.106667rem;
}

body[theme-mode=dark] .wk-message-location-content{
    background-color: var(--wk-color-secondary);
}


.wk-message-location-content-title {
    color: var(--wk-text-item);
    font-size: 0.426667rem;
    padding: 0.133333rem 0.133333rem 0px 0.133333rem;
}

.wk-message-location-content-address {
    color: #666;
    font-size: 0.32rem;
    padding: 0px 0.133333rem 0.133333rem 0.133333rem;
}

.wk-message-location-content-locationimg {
    width: 6.666667rem;
    height: 2.666667rem;
    overflow: hidden;
    background-size: cover;
}

.wk-imagetoolbar {
    width: 0.8rem;
    height: 0.8rem;
    position: relative;
    flex: 0 0 0.8rem;
}

.wk-imagetoolbar-content {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0.133333rem;
    box-sizing: border-box;
}

.wk-imagetoolbar-content-icon img {
    width: 0.533333rem;
    height: 0.533333rem;
}

.wk-imagetoolbar-content-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.wk-media-preview-dialog,
.wk-media-preview-dialog * {
    box-sizing: border-box;
}

.wk-media-preview-dialog {
    position: fixed;
    z-index: 1300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0.32rem;
    -webkit-app-region: no-drag;
}

.wk-media-preview-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    -webkit-backdrop-filter: blur(0.133333rem);
    backdrop-filter: blur(0.133333rem);
}

.wk-media-preview-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(13.866667rem, 100%);
    max-height: calc(100dvh - 0.64rem);
    overflow: hidden;
    border: 0.026667rem solid rgba(255, 255, 255, 0.8);
    border-radius: 0.533333rem;
    background: #fff;
    box-shadow: 0 0.64rem 1.92rem rgba(15, 23, 42, 0.3), 0 0.053333rem 0.32rem rgba(15, 23, 42, 0.12);
    color: #172033;
}

.wk-media-preview-header {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.48rem 0.533333rem 0.373333rem;
}

.wk-media-preview-type-icon {
    display: grid;
    place-items: center;
    width: 1.066667rem;
    height: 1.066667rem;
    flex: 0 0 1.066667rem;
    border-radius: 0.32rem;
    color: #fff;
    box-shadow: 0 0.16rem 0.48rem rgba(56, 119, 255, 0.22);
}

.wk-media-preview-type-icon.is-image {
    background: linear-gradient(145deg, #55a2ff, #3777ff);
}

.wk-media-preview-type-icon.is-video {
    background: linear-gradient(145deg, #806bff, #5367f5);
}

.wk-media-preview-type-icon svg {
    width: 0.586667rem;
    height: 0.586667rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wk-media-preview-type-icon.is-video svg path:last-child {
    fill: currentColor;
    stroke: none;
}

.wk-media-preview-heading {
    display: flex;
    min-width: 0;
    flex: 1 1;
    flex-direction: column;
    gap: 0.053333rem;
}

.wk-media-preview-heading strong {
    font-size: 0.453333rem;
    font-weight: 650;
    line-height: 0.64rem;
    color: #172033;
}

.wk-media-preview-heading span {
    overflow: hidden;
    color: #8c99ae;
    font-size: 0.32rem;
    line-height: 0.48rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-media-preview-close {
    display: grid;
    place-items: center;
    width: 0.96rem;
    height: 0.96rem;
    flex: 0 0 0.96rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f6fa;
    color: #718096;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.wk-media-preview-close:hover {
    background: #e9eef5;
    color: #344054;
}

.wk-media-preview-close:active {
    transform: scale(0.94);
}

.wk-media-preview-close svg {
    width: 0.506667rem;
    height: 0.506667rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.wk-media-preview-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(6.4rem, 46dvh, 11.466667rem);
    min-height: 0;
    margin: 0 0.533333rem;
    overflow: hidden;
    border-radius: 0.426667rem;
    background: radial-gradient(circle at 75% 18%, rgba(91, 119, 183, 0.22), transparent 40%), linear-gradient(145deg, #182338, #0b1220);
}

.wk-media-preview-stage.is-image::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.025) 75%);
    background-position: 0 0, 0 0.266667rem, 0.266667rem -0.266667rem, -0.266667rem 0;
    background-size: 0.533333rem 0.533333rem;
    content: "";
}

.wk-media-preview-stage img,
.wk-media-preview-stage video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-media-preview-stage video {
    background: #05080f;
}

.wk-media-preview-kind {
    position: absolute;
    z-index: 2;
    top: 0.32rem;
    left: 0.32rem;
    padding: 0.133333rem 0.24rem;
    border: 0.026667rem solid rgba(255, 255, 255, 0.16);
    border-radius: 26.64rem;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 0.293333rem;
    line-height: 0.426667rem;
    -webkit-backdrop-filter: blur(0.213333rem);
    backdrop-filter: blur(0.213333rem);
    pointer-events: none;
}

.wk-media-preview-footer {
    padding: 0.373333rem 0.533333rem 0.533333rem;
}

.wk-media-preview-file {
    min-width: 0;
}

.wk-media-preview-file-name {
    overflow: hidden;
    color: #263248;
    font-size: 0.373333rem;
    font-weight: 600;
    line-height: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-media-preview-file-detail {
    min-height: 0.48rem;
    margin-top: 0.026667rem;
    color: #95a1b3;
    font-size: 0.32rem;
    line-height: 0.48rem;
}

.wk-media-preview-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 0.266667rem;
    gap: 0.266667rem;
    margin-top: 0.373333rem;
}

.wk-media-preview-actions button {
    height: 1.173333rem;
    padding: 0 0.48rem;
    border: 0;
    border-radius: 0.32rem;
    font-size: 0.373333rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.wk-media-preview-actions button:active:not(:disabled) {
    transform: scale(0.98);
}

.wk-media-preview-cancel {
    background: #f1f4f8;
    color: #526077;
}

.wk-media-preview-cancel:hover {
    background: #e9eef5;
}

.wk-media-preview-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.213333rem;
    background: linear-gradient(135deg, #4f8cff, #3777ff);
    box-shadow: 0 0.213333rem 0.48rem rgba(55, 119, 255, 0.24);
    color: #fff;
}

.wk-media-preview-send:hover:not(:disabled) {
    filter: brightness(1.04);
}

.wk-media-preview-send:disabled {
    background: #bec8d7;
    box-shadow: none;
    cursor: default;
    opacity: 0.78;
}

.wk-media-preview-send svg {
    width: 0.48rem;
    height: 0.48rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[theme-mode=dark] .wk-media-preview-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: #1d2533;
    color: #f5f7fb;
}

body[theme-mode=dark] .wk-media-preview-heading strong,
body[theme-mode=dark] .wk-media-preview-file-name {
    color: #f5f7fb;
}

body[theme-mode=dark] .wk-media-preview-close,
body[theme-mode=dark] .wk-media-preview-cancel {
    background: #2a3445;
    color: #cbd5e1;
}

body[theme-mode=dark] .wk-media-preview-heading span,
body[theme-mode=dark] .wk-media-preview-file-detail {
    color: #98a6ba;
}

@media (max-width: 480px) {
    .wk-media-preview-dialog {
        padding: 0.266667rem;
    }

    .wk-media-preview-card {
        max-height: calc(100dvh - 0.533333rem);
        border-radius: 0.48rem;
    }

    .wk-media-preview-header {
        gap: 0.266667rem;
        padding: 0.373333rem 0.373333rem 0.32rem;
    }

    .wk-media-preview-type-icon {
        width: 1.013333rem;
        height: 1.013333rem;
        flex-basis: 1.013333rem;
        border-radius: 0.293333rem;
    }

    .wk-media-preview-heading strong {
        font-size: 0.426667rem;
    }

    .wk-media-preview-stage {
        height: min(44dvh, 9.6rem);
        margin: 0 0.32rem;
        border-radius: 0.373333rem;
    }

    .wk-media-preview-footer {
        padding: 0.32rem 0.373333rem 0.373333rem;
    }

    .wk-media-preview-actions {
        margin-top: 0.293333rem;
    }
}

@media (max-height: 620px) {
    .wk-media-preview-header {
        padding-top: 0.32rem;
        padding-bottom: 0.266667rem;
    }

    .wk-media-preview-stage {
        height: min(40dvh, 6.666667rem);
    }

    .wk-media-preview-footer {
        padding-top: 0.266667rem;
        padding-bottom: 0.32rem;
    }

    .wk-media-preview-actions {
        margin-top: 0.213333rem;
    }
}


.wk-message-system {
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 1.28rem);
    margin: 0 auto;
    padding: 0.08rem 0.266667rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.32rem;
    font-weight: 500;
    line-height: 0.426667rem;
    color: rgb(120, 130, 146);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 26.64rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.wk-message-approve {
    margin-left: 0.266667rem;
    color: #f65835;
}
body[theme-mode=dark] .wk-message-system  {
    color: #b4bdca;
    background: rgba(255, 255, 255, 0.12);
}



.wk-iconlistitem {
    background-color: white;
    height: 1.866667rem;
    width: 100%;
    cursor: pointer;
    position: relative;
}

.wk-iconlistitem-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 0.533333rem;
}

.wk-iconlistitem-content-icon img {
    width: 0.853333rem;
    height: 0.853333rem;
}

.wk-iconlistitem-content-title {
    display: inline-flex;
    align-items: center;
    gap: 0.213333rem;
    font-size: 0.373333rem;
    font-weight: 500;
    margin-left: 0.4rem;
    min-width: 0;
}

body[theme-mode=dark] .wk-iconlistitem-content-title {
    color: white;
}

.wk-iconlistitem-content-badge {
    min-width: 0.426667rem;
    height: 0.426667rem;
    padding: 0 0.106667rem;
    box-sizing: border-box;
    border-radius: 26.64rem;
    background-color: #ff3b30;
    color: #fff;
    font-size: 0.266667rem;
    font-weight: 600;
    line-height: 0.426667rem;
    text-align: center;
    flex: 0 0 auto;
}

.wk-icon-preview {
  min-height: 100%;
  padding: 0.746667rem;
  background: #f5f6f8;
  color: #1f2933;
  overflow-y: auto;
}

.wk-icon-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.64rem;
  margin-bottom: 0.746667rem;
}

.wk-icon-preview-header h1 {
  margin: 0;
  font-size: 0.693333rem;
  font-weight: 700;
  line-height: 1.3;
}

.wk-icon-preview-header p {
  margin: 0.16rem 0 0;
  color: #6b7280;
}

.wk-icon-preview-header input {
  width: 7.466667rem;
  max-width: 40vw;
  height: 1.013333rem;
  padding: 0 0.32rem;
  border: 0.026667rem solid #d8dee8;
  border-radius: 0.16rem;
  background: #fff;
  color: #1f2933;
}

.wk-icon-preview section {
  margin-bottom: 0.906667rem;
}

.wk-icon-preview-section-title {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  margin-bottom: 0.32rem;
}

.wk-icon-preview-section-title h2 {
  margin: 0;
  font-size: 0.48rem;
  font-weight: 700;
}

.wk-icon-preview-section-title span {
  min-width: 0.746667rem;
  padding: 0.053333rem 0.213333rem;
  border-radius: 26.64rem;
  background: #e6e9ef;
  color: #4b5563;
  font-size: 0.32rem;
  text-align: center;
}

.wk-icon-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr));
  grid-gap: 0.266667rem;
  gap: 0.266667rem;
}

.wk-icon-preview-grid-small {
  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
}

.wk-icon-preview-bottom-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 13.866667rem;
  border: 0.026667rem solid #e1e5ec;
  border-radius: 0.16rem;
  background: #fff;
}

.wk-icon-preview-bottom-tab {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 2.186667rem;
  padding: 0.266667rem 0.16rem;
  gap: 0.106667rem;
}

.wk-icon-preview-bottom-tab span {
  color: currentColor;
  font-size: 0.346667rem;
  line-height: 1.2;
}

.wk-icon-preview-bottom-tab em {
  max-width: 100%;
  overflow: hidden;
  color: #9ca3af;
  font-size: 0.266667rem;
  font-style: normal;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-icon-preview-item {
  min-width: 0;
  padding: 0.32rem;
  border: 0.026667rem solid #e1e5ec;
  border-radius: 0.16rem;
  background: #fff;
}

.wk-icon-preview-symbol {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  height: 0.906667rem;
  color: #e46342;
  color: var(--wk-color-theme, #e46342);
  font-size: 0.64rem;
}

.wk-icon-preview-symbol img {
  width: 0.64rem;
  height: 0.64rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-icon-preview-name {
  margin-top: 0.213333rem;
  overflow: hidden;
  color: #111827;
  font-size: 0.32rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-icon-preview-group {
  margin-top: 0.053333rem;
  color: #9ca3af;
  font-size: 0.293333rem;
}

@media (max-width: 720px) {
  .wk-icon-preview {
    padding: 0.48rem;
  }

  .wk-icon-preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .wk-icon-preview-header input {
    width: 100%;
    max-width: none;
  }

  .wk-icon-preview-bottom-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.wk-indextable {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wk-indextable-section-title {
    background-color: var(--wk-color-secondary);
    margin-left: 0.4rem;
}

.wk-indextable-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.4rem 0.4rem 0px;
    cursor: pointer;
}

body[theme-mode=dark] .wk-indextable-item {
    background-color: var(--wk-color-secondary);
}

.wk-indextable-item:hover {
    background-color: var(--wk-color-hover);
}

.wk-indextable-item-avatar img {
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 50%;
}

.wk-indextable-item-name {
    margin-left: 0.4rem;
}

body[theme-mode=dark]  .wk-indextable-item-name {
    color: white;
}

.wk-indextable-search {
    padding: 0.266667rem 0px;
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: #f4f4f5;
    z-index: 10;
}

body[theme-mode=dark] .wk-indextable-search  {
    background-color: var(--wk-color-secondary-2);
}

.wk-indextable-item-index {
    width: 1.333333rem;
    text-align: center;
    font-size: 0.48rem;
    font-weight: 500;
}

body[theme-mode=dark] .wk-indextable-item-index {
    color: white;
}

.wk-indextable-checkbox {
    margin-right: 0.266667rem;
}

.wk-indextable-search-box {
    display: flex;
    min-width: 2.666667rem;
    height: 1.333333rem;
    background-color: #f4f4f5;
}

body[theme-mode=dark] .wk-indextable-search-box  {
    background-color: var(--wk-color-secondary-2);
}

.wk-indextable-selected-box {
    display: flex;
    overflow-x: scroll;
}

.wk-indextable-search-icon {
    display: flex;
    align-items: center;
    margin-left: 0.533333rem;
}

.wk-indextable-search-input {
    margin-left: -0.533333rem;
    max-width: 2.666667rem;
}

.wk-indextable-search-input input {
    flex: 1 1;
    height: 0.853333rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    background-color: transparent;
    color: #1f2329;
    outline: none;
    border: none;
    height: 100%;
    padding-left: 0.666667rem;
}

body[theme-mode=dark] .wk-indextable-search-input input {
    color: white;
}

.wk-indextable-select-user {
    padding: 0px 0.133333rem;
    cursor: pointer;
}

.wk-indextable-search .wk-indextable-select-user img{
    border-radius: 50%;
}

.wk-indextable-contacts {
    width: 100%;
    height: calc(100% - 1.866667rem);
    overflow-y: auto;
}

.wk-meinfo {
    background-color: var(--wk-color-secondary);
    position: relative;
    --wk-height-userInfo-footer: 1.6rem;
    --wk-height-userInfo-nav: 1.173333rem;
    width: 100%;
    height: 100%;
}

.wk-meinfo-sections {
    
}

.wk-meinfo-center {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fcff 0px, #e8f6ff 4.266667rem, #d7eeff 6.613333rem, #f4f7fb 8.8rem, #f4f7fb 100%);
    color: #111827;
    scrollbar-width: none;
}

.wk-meinfo-desktop-name {
    display: none;
}

.wk-meinfo-center::-webkit-scrollbar {
    display: none;
}

.wk-meinfo-center-hero {
    width: 100%;
    height: 5.866667rem;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 1.493333rem;
    background: transparent;
}

.wk-meinfo-center-hero::before {
    content: "";
    width: 132%;
    height: 4.693333rem;
    position: absolute;
    left: -38%;
    top: -1.92rem;
    border-radius: 0 0 58% 58%;
    background: rgba(255, 255, 255, 0.55);
    transform: rotate(6deg);
}

.wk-meinfo-center-hero::after {
    content: "";
    width: 88%;
    height: 4.213333rem;
    position: absolute;
    right: -34%;
    top: -0.64rem;
    border-radius: 0 0 0 72%;
    background: rgba(118, 194, 255, 0.2);
    transform: rotate(13deg);
}

.wk-meinfo-center-avatar {
    width: 1.973333rem;
    height: 1.973333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    margin: 0 auto;
    border: 0.08rem solid #ffffff;
    border-radius: 0.426667rem;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 0.213333rem 0.533333rem rgba(70, 135, 188, 0.18);
    cursor: pointer;
}

.wk-meinfo-center-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.346667rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-meinfo-center-avatar.is-static {
    cursor: default;
}

.wk-meinfo-center-title {
    max-width: calc(100% - 0.853333rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin: 0.426667rem auto 0;
    color: #40506a;
    font-size: 0.426667rem;
    font-weight: 600;
    line-height: 0.586667rem;
    text-align: center;
}

.wk-meinfo-center-shortno {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 0.133333rem;
    margin: 0.106667rem auto 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: #8b96a8;
    cursor: pointer;
    font: inherit;
    font-size: 0.426667rem;
    line-height: 0.533333rem;
}

.wk-meinfo-center-shortno img {
    width: 0.586667rem;
    height: 0.586667rem;
    color: #2f6df6;
}

.wk-meinfo-center-menus {
    display: flex;
    flex-direction: column;
    gap: 0.266667rem;
    box-sizing: border-box;
    margin-top: -0.053333rem;
    padding: 0 0.48rem 0.586667rem;
}

.wk-meinfo-center-menu-item {
    width: 100%;
    min-height: 1.6rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 0;
    border-radius: 0.32rem;
    padding: 0 0.32rem 0 0.373333rem;
    background: #ffffff;
    box-shadow: 0 0.213333rem 0.48rem rgba(38, 72, 116, 0.04);
    color: #111827;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.wk-meinfo-center-menu-icon {
    width: 0.96rem;
    height: 0.96rem;
    flex: 0 0 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-meinfo-center-menu-icon img {
    width: 0.96rem;
    height: 0.96rem;
    display: block;
}

.wk-meinfo-center-menu-title {
    min-width: 0;
    flex: 1 1;
    margin-left: 0.32rem;
    color: #111827;
    font-size: 0.426667rem;
    font-weight: 400;
    line-height: 0.586667rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-meinfo-center-menu-item.is-logout .wk-meinfo-center-menu-title {
    color: #EF4444;
}

.wk-meinfo-center-menu-arrow {
    width: 0.64rem;
    height: 0.64rem;
    flex: 0 0 0.64rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3c7cf;
    font-size: 0.48rem;
}

body[theme-mode=dark] .wk-meinfo-center {
    background: linear-gradient(180deg, #1f2937 0px, #24364a 4.266667rem, #275478 6.613333rem, var(--wk-color-secondary-2) 8.8rem, var(--wk-color-secondary-2) 100%);
    color: #ffffff;
}

body[theme-mode=dark] .wk-meinfo-center-hero {
    background: transparent;
}

body[theme-mode=dark] .wk-meinfo-center-hero::before {
    background: rgba(255, 255, 255, 0.08);
}

body[theme-mode=dark] .wk-meinfo-center-hero::after {
    background: rgba(77, 163, 255, 0.16);
}

body[theme-mode=dark] .wk-meinfo-center-title,
body[theme-mode=dark] .wk-meinfo-center-menu-title {
    color: #ffffff;
}

body[theme-mode=dark] .wk-meinfo-center-shortno {
    color: #a3adbd;
}

body[theme-mode=dark] .wk-meinfo-center-menu-item {
    background: var(--wk-color-secondary);
    box-shadow: none;
}

body[theme-mode=dark] .wk-meinfo-center-menu-item.is-logout .wk-meinfo-center-menu-title {
    color: #EF4444;
}

.wk-meinfo-settings {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f8fafc;
    color: #111827;
}

.wk-meinfo-settings-content {
    width: 100%;
    height: calc(100% - var(--wk-page-header-height));
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.533333rem 0.4rem;
    scrollbar-width: none;
}

.wk-meinfo-settings-content::-webkit-scrollbar {
    display: none;
}

.wk-meinfo-settings-section-title {
    display: flex;
    align-items: center;
    height: 0.746667rem;
    margin-bottom: 0.213333rem;
    color: #40506a;
    font-size: 0.426667rem;
    font-weight: 500;
    line-height: 0.746667rem;
}

.wk-meinfo-settings-section-title::before {
    content: "";
    width: 0.053333rem;
    height: 0.426667rem;
    display: block;
    flex: 0 0 0.053333rem;
    margin-right: 0.106667rem;
    border-radius: 26.64rem;
    background: #4b82ff;
}

.wk-meinfo-settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.213333rem;
}

.wk-meinfo-settings-item {
    width: 100%;
    min-height: 1.6rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 0.32rem;
    padding: 0 0.32rem;
    background: #ffffff;
}

.wk-meinfo-settings-item-icon {
    width: 0.96rem;
    height: 0.96rem;
    flex: 0 0 0.96rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-meinfo-settings-item-icon img {
    width: 0.96rem;
    height: 0.96rem;
    display: block;
}

.wk-meinfo-settings-item-main {
    min-width: 0;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.32rem;
}

.wk-meinfo-settings-item-title {
    color: #111827;
    font-size: 0.4rem;
    font-weight: 400;
    line-height: 0.586667rem;
}

.wk-meinfo-settings-item-subtitle {
    margin-top: 0;
    color: #9aa3b2;
    font-size: 0.346667rem;
    line-height: 0.48rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-meinfo-settings-switch {
    width: 1.52rem;
    height: 1.173333rem;
    flex: 0 0 1.52rem;
    position: relative;
    box-sizing: border-box;
    border: 0;
    border-radius: 26.64rem;
    margin-left: 0.213333rem;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.wk-meinfo-settings-switch::before {
    content: "";
    position: absolute;
    inset: 0.24rem 0;
    border-radius: 26.64rem;
    background: #c5c6ca;
    transition: background-color 180ms ease;
}

.wk-meinfo-settings-switch span {
    width: 0.906667rem;
    height: 0.586667rem;
    position: absolute;
    left: 0.053333rem;
    top: 0.293333rem;
    border-radius: 26.64rem;
    background: #ffffff;
    box-shadow: 0 0.053333rem 0.16rem rgba(15, 23, 42, 0.18);
    transition: transform 180ms ease;
}

.wk-meinfo-settings-switch.checked {
    background: transparent;
}

.wk-meinfo-settings-switch.checked::before {
    background: #00c853;
}

.wk-meinfo-settings-switch.checked span {
    transform: translateX(0.506667rem);
}

body[theme-mode=dark] .wk-meinfo-settings,
body[theme-mode=dark] .wk-meinfo-settings-content {
    background: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-meinfo-settings-item {
    background: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-meinfo-settings-item-title {
    color: #ffffff;
}

body[theme-mode=dark] .wk-meinfo-settings-section-title {
    color: #d8dee9;
}

body[theme-mode=dark] .wk-meinfo-settings-item-subtitle {
    color: #a3adbd;
}

.wk-desktop .wk-layout-section-me {
    --wk-desktop-list-width: 9.066667rem;
}

.wk-desktop .wk-meinfo-center {
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    background: linear-gradient(180deg, #e3ecff 0, #f4f6fa 6.4rem);
}

.wk-desktop .wk-meinfo-center::-webkit-scrollbar {
    display: block;
    width: 0.16rem;
}

.wk-desktop .wk-meinfo-center::-webkit-scrollbar-thumb {
    border-radius: 0.213333rem;
    background: #cbd5e1;
}

.wk-desktop .wk-meinfo-center::-webkit-scrollbar-track {
    background: transparent;
}

.wk-desktop .wk-meinfo-center-hero {
    height: 5.013333rem;
    flex: 0 0 5.013333rem;
    padding-top: 0.693333rem;
}

.wk-desktop .wk-meinfo-center-hero::before,
.wk-desktop .wk-meinfo-center-hero::after {
    display: none;
}

.wk-desktop .wk-meinfo-center-avatar {
    width: 1.866667rem;
    height: 1.866667rem;
    border-radius: 0.426667rem;
    box-shadow: 0 0.106667rem 0.32rem rgba(74, 122, 245, 0.2);
}

.wk-desktop .wk-meinfo-desktop-name {
    display: block;
    margin: 0.266667rem 0.426667rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: #1e293b;
    font-size: 0.426667rem;
    line-height: 0.586667rem;
    font-weight: 500;
}

.wk-desktop .wk-meinfo-center-title {
    display: none;
}

.wk-desktop .wk-meinfo-center-shortno {
    margin-top: 0.106667rem;
    font-size: 0.346667rem;
    line-height: 0.533333rem;
}

.wk-desktop .wk-meinfo-center-shortno img {
    width: 0.426667rem;
    height: 0.426667rem;
}

.wk-desktop .wk-meinfo-center > .wk-audit-card {
    flex-shrink: 0;
    margin: 0 0.426667rem 0.373333rem;
    box-shadow: 0 0.106667rem 0.426667rem rgba(30, 41, 59, 0.06);
}

.wk-desktop .wk-meinfo-center-menus {
    flex: 1 0 auto;
    gap: 0.213333rem;
    min-height: 7.466667rem;
    margin: 0;
    padding: 0 0.426667rem 0.426667rem;
}

.wk-desktop .wk-meinfo-center-menu-item {
    flex: 0 0 1.28rem;
    min-height: 1.28rem;
    padding: 0 0.373333rem;
    box-shadow: none;
}

.wk-desktop .wk-meinfo-center-menu-item:hover {
    background: #f2f6ff;
}

.wk-desktop .wk-meinfo-center-menu-item.is-selected {
    background: #e8effe;
    box-shadow: inset 0 0 0 0.026667rem #bfd0fb;
}

.wk-desktop .wk-meinfo-center-menu-item.is-selected .wk-meinfo-center-menu-title {
    color: #2563eb;
    font-weight: 500;
}

.wk-desktop .wk-meinfo-center-menu-icon,
.wk-desktop .wk-meinfo-center-menu-icon img {
    width: 0.8rem;
    height: 0.8rem;
    flex-basis: 0.8rem;
}

.wk-desktop .wk-meinfo-center-menu-title {
    font-size: 0.373333rem;
}

.wk-desktop .wk-meinfo-center-menu-arrow {
    width: 0.48rem;
    height: 0.48rem;
    flex-basis: 0.48rem;
    font-size: 0.426667rem;
}

.wk-desktop .wk-meinfo-center-menu-item.is-logout {
    margin-top: auto;
}

.wk-desktop .wk-meinfo-settings-content {
    padding: 0.64rem 0.746667rem;
    background: #f4f6fa;
}

.wk-desktop .wk-meinfo-settings-section-title {
    font-size: 0.373333rem;
    margin: 0 0 0.32rem;
}

.wk-desktop .wk-meinfo-settings-list {
    max-width: 19.2rem;
    gap: 0;
    padding: 0 0.48rem;
    border-radius: 0.32rem;
    background: #fff;
}

.wk-desktop .wk-meinfo-settings-item {
    min-height: 1.92rem;
    padding: 0;
    border-radius: 0;
}

.wk-desktop .wk-meinfo-settings-item + .wk-meinfo-settings-item {
    border-top: 0.026667rem solid #edf1f8;
}

.wk-desktop .wk-meinfo-settings-item-subtitle {
    white-space: normal;
    font-size: 0.32rem;
}

.wk-desktop .wk-meinfo-settings-switch {
    width: 1.28rem;
    flex-basis: 1.28rem;
}

.wk-desktop .wk-meinfo-settings-switch::before {
    top: 0.213333rem;
    bottom: 0.213333rem;
}

.wk-desktop .wk-meinfo-settings-switch span {
    width: 0.64rem;
    height: 0.64rem;
    top: 0.266667rem;
}

.wk-desktop .wk-meinfo-settings-switch.checked span {
    transform: translateX(0.533333rem);
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-center {
    background: linear-gradient(180deg, #24364a 0, var(--wk-color-secondary-2) 6.4rem);
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-desktop-name {
    color: #fff;
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-center-menu-item:hover,
.wk-desktop body[theme-mode=dark] .wk-meinfo-center-menu-item.is-selected {
    background: #24364a;
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-center-menu-item.is-selected .wk-meinfo-center-menu-title {
    color: #8ab5ff;
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-settings-content {
    background: var(--wk-color-secondary-2);
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-settings-list {
    background: var(--wk-color-secondary);
}

.wk-desktop body[theme-mode=dark] .wk-meinfo-settings-item + .wk-meinfo-settings-item {
    border-color: rgba(255, 255, 255, 0.08);
}

/*
 * 「选择头像」页（AvatarPicker）—— 2026-09-04 按 Figma「1更换头像」系列整页重写。
 * 几何 / 色值 / 阴影全部来自 get_design_context 实测（主屏 3463:68635、加载 3463:69570、
 * 空态 3463:69828、失败 3463:70048）。Figma 基准宽 375，内容宽 343；头像网格列数随宽变，
 * 横纵间距相等，**格子铺满内容宽、右侧不留白**（余宽灌进格子，勿 space-between）。
 * ≥375：间距 12.2，`auto-fit + minmax(76px,1fr)`（375 约 76；更宽格子略放大）。
 * ≤374：固定 4 列、间距 8px（360 内容宽 328 时格≈76），更窄只缩格子、不掉列。
 *
 * ★ 结构铁律（新稿）：只有 header 与底栏固定，**其余整页滚动**（预览卡片会滚出视野）。
 * ★ 暗色分支在文件末尾 body[theme-mode=dark] 段；稿是纯浅色，暗色只做底色/文字的最小对应。
 */

.wk-avatarpicker {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f8ff 0%, #f8faff 34%, #ffffff 100%);
  color: #202a3c;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  /* 窄屏 4 列按「本页宽度」切，不只看视口：全屏 overlay 与嵌在右栏时同一套 */
  container: avatarpicker / inline-size;
}

/* ---------- header 46：左返回 / 居中标题 / 右侧等宽空位 ---------- */

/* ---------- 整页滚动区 ---------- */
.wk-avatarpicker-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/*
 * 固定底栏的预留必须是一个真实的 flex item，不能放在滚动容器自己的 padding 上。
 * iOS WebView 在「正文刚好接近一屏」（例如头像只有 3 排）时会压缩 flex 子项，并忽略
 * overflow 容器的尾部 padding，结果是最后一排被底栏盖住、页面却被判定为不可滚动。
 */
.wk-avatarpicker-scroll::after {
  content: "";
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(2.4rem + env(safe-area-inset-bottom, 0px));
  width: 100%;
  pointer-events: none;
}

/* Main（3463:68647）：padding 14/16，段间距 20 */
.wk-avatarpicker-main {
  /* 按内容真实高度参与滚动，禁止 flex 在短列表临界高度下把正文压回一屏。 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.533333rem;
  padding: 0.373333rem 0.426667rem 0;
}

/* ---------- 当前选择预览卡片（3467:75809）---------- */
.wk-avatarpicker-hero {
  position: relative;
  min-height: 3.871733rem;
  display: flex;
  align-items: center;
  gap: 0.4872rem;
  padding: 0.426667rem 0.4872rem;
  border: 0.96px solid #ffffff;
  border-radius: 0.589867rem;
  background:
    linear-gradient(134.67deg, rgba(174, 183, 255, 0.5) 73.02%, rgba(216, 236, 255, 0.5) 97.6%),
    linear-gradient(126.31deg, #eaf1ff 0%, #f9fbff 62%, #edf3ff 100%);
  box-shadow: 0 0.333333rem 0.717867rem rgba(52, 96, 181, 0.1);
  overflow: hidden;
  box-sizing: border-box;
}

/* 两个装饰同心圆（Border + Overlay+Shadow）：纯装饰，pointer-events 关掉 */
.wk-avatarpicker-hero-ring {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.wk-avatarpicker-hero-ring-a {
  width: 3.466667rem;
  height: 3.466667rem;
  left: -1.306667rem;
  top: 1.466667rem;
  border: 0.42px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 0 0.355467rem rgba(212, 224, 252, 0.5), 0 0 0 0.722133rem rgba(255, 255, 255, 0.25);
}

.wk-avatarpicker-hero-ring-b {
  width: 4.213333rem;
  height: 4.213333rem;
  right: -2.16rem;
  top: -1.813333rem;
  border: 0.51px solid rgba(190, 226, 255, 0.38);
  box-shadow: 0 0 0 0.432rem rgba(180, 197, 255, 0.15), 0 0 0 0.877867rem rgba(180, 197, 255, 0.08);
}

/* 大头像 103.85（3467:75384）：白描边 + 蓝渐变底 + 投影，图片 cover 填满 */
.wk-avatarpicker-hero-avatar {
  position: relative;
  flex-shrink: 0;
  width: 2.769333rem;
  height: 2.769333rem;
  border: 0.96px solid #ffffff;
  border-radius: 0.426667rem;
  background: linear-gradient(140deg, #50aaf6 0%, #4b5ddd 100%);
  box-shadow: 0 0.307733rem 0.564rem rgba(42, 91, 208, 0.23), inset 0 0.96px 0.96px rgba(255, 255, 255, 0.4);
  overflow: hidden;
  box-sizing: border-box;
}

.wk-avatarpicker-hero-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.4rem;
}

.wk-avatarpicker-hero-text {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.106667rem;
}

.wk-avatarpicker-hero-kicker {
  font-size: 0.282133rem;
  font-weight: 900;
  letter-spacing: 0.039467rem;
  color: #6b86ba;
  white-space: nowrap;
}

.wk-avatarpicker-hero-title {
  font-size: 0.5128rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.wk-avatarpicker-hero-sub {
  font-size: 0.333333rem;
  color: #5f6982;
  white-space: nowrap;
}

.wk-avatarpicker-hero-pill {
  margin-top: 0.106667rem; /* 文字组 gap 4 + 组到胶囊 8 */
  padding: 0.16rem 0.333333rem;
  border-radius: 0.213333rem;
  font-size: 0.32rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(131.35deg, #a4c5ff 26.4%, #5d9eff 42.71%, #488aff 99.25%);
  white-space: nowrap;
}

/* ---------- 区块（切换系列 / 精选头像）---------- */
.wk-avatarpicker-section {
  display: flex;
  flex-direction: column;
  gap: 0.266667rem;
}

.wk-avatarpicker-section-title {
  margin: 0;
  font-size: 0.373333rem;
  font-weight: 600;
  color: #121b38;
}

.wk-avatarpicker-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0.533333rem;
}

.wk-avatarpicker-count {
  font-size: 0.32rem;
  font-weight: 500;
  color: #7f89a3;
}

/* 系列栏（3467:75470）：横向滚动，52px 方块，gap 10；选中态蓝描边 #4b73ff */
.wk-avatarpicker-series {
  display: flex;
  align-items: center;
  gap: 0.266667rem;
  /* 给选中项的外描边预留空间，同时用负 margin 保持首项原来的对齐位置。 */
  margin: -0.053333rem;
  padding: 0.106667rem 0.08rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.wk-avatarpicker-series::-webkit-scrollbar {
  display: none;
}

.wk-avatarpicker-series-item {
  flex-shrink: 0;
  width: 1.386667rem;
  height: 1.386667rem;
  padding: 0;
  border: 0.032267rem solid #ffffff;
  border-radius: 0.32rem;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.wk-avatarpicker-series-item.is-selected {
  border-color: #4b73ff;
  outline: 0.04rem solid #4b73ff;
  outline-offset: 0;
}

.wk-avatarpicker-series-item img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.266667rem;
}

/* 网格（3463:68702）：间距横纵同值。用 auto-fit + minmax(76,1fr) 算列数并把余宽均摊进格子，
   避免 auto-fill 定死 76 后右侧空一截。★ 不要 space-between（列距≠行距）。骨架与真网格共用。 */
.wk-avatarpicker-grid {
  list-style: none;
  /* 外扩 3px，避免首末列的选中外框被内容区裁掉；内部有效宽度保持不变。 */
  margin: -0.08rem;
  padding: 0.08rem;
  display: grid;
  width: calc(100% + 0.16rem);
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fit, minmax(2.026667rem, 1fr));
  grid-gap: 0.325333rem;
  gap: 0.325333rem;
}

.wk-avatarpicker-grid li {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* 格子（Button2）：随轨道铺满、白底、白描边 1.3、投影；选中：蓝描边 1.5 + 2px 浅蓝环 + 蓝投影 */
.wk-avatarpicker-cell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0.034667rem solid #ffffff;
  border-radius: 0.32rem;
  background: #ffffff;
  box-shadow: 0 0.1192rem 0.3576rem rgba(40, 50, 81, 0.09);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

/*
 * 窄屏不得掉成 3 列。内容宽 328（360 屏）放 4 列时，列距只能是 8px：4×76 + 3×8 = 328。
 * 去掉 max-width:328——否则 361~374 内容宽 >328 时右侧又空一截；格子随 100% 宽铺满。
 * ★ li 必须 min-width: 0：grid item 默认 min-width:auto，128 缩略图固有宽会把轨道顶住、横向溢出。
 * ★ @media 保真机视口；@container 保非全宽宿主（1200 视口 + 360 面板时视口 MQ 进不去）。
 */
@media (max-width: 374px) {
  .wk-avatarpicker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.213333rem;
  }
}

@container avatarpicker (max-width: 374px) {
  .wk-avatarpicker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.213333rem;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .wk-avatarpicker-grid li {
    height: 2.026667rem;
  }
}

.wk-avatarpicker-cell.is-selected {
  border-color: #4b72ff;
  outline: 0.04rem solid #4b72ff;
  outline-offset: 0;
  box-shadow: 0 0.200267rem 0.500533rem rgba(49, 87, 224, 0.17);
}

.wk-avatarpicker-cell img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.266667rem;
}

.wk-avatarpicker-broken img {
  visibility: hidden;
}

/* 角标（标签 3409:105275）：左下角贴边，高 15、最小宽 29，右上角圆角 3.81，9px 白字 */
.wk-avatarpicker-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.4rem;
  min-width: 0.773333rem;
  padding: 0 0.106667rem 0 0.08rem;
  border-top-right-radius: 0.1016rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.24rem;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
}

/* 选中勾：贴近右下角的蓝圆 + 白色细勾，避免字体 ✓ 的字形与平台基线差异。 */
.wk-avatarpicker-check {
  position: absolute;
  right: 0.08rem;
  bottom: 0.08rem;
  width: 0.533333rem;
  height: 0.533333rem;
  border: 0.04rem solid #ffffff;
  border-radius: 50%;
  background: #3567f3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
}

.wk-avatarpicker-check::after {
  width: 0.186667rem;
  height: 0.106667rem;
  border-left: 0.042667rem solid #ffffff;
  border-bottom: 0.042667rem solid #ffffff;
  content: "";
  transform: translateY(-0.026667rem) rotate(-45deg);
}

/* ---------- 骨架（3463:69570）：统一 #e4e6eb ---------- */
.wk-avatarpicker-skeleton {
  display: block;
  background: #e4e6eb !important;
  cursor: default;
}

.wk-avatarpicker-skeleton-title {
  width: 1.706667rem;
  height: 0.373333rem;
  border-radius: 0.106667rem;
}

/* ---------- 空态 / 失败态（3463:69910 / 3463:70130）：卡片下方剩余空间居中 ---------- */
.wk-avatarpicker-tip {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  padding: 0.64rem 0.426667rem;
}

.wk-avatarpicker-tip-icon {
  width: 1.173333rem;
  height: 1.173333rem;
  display: block;
}

.wk-avatarpicker-tip-text {
  font-size: 0.32rem;
  color: #8a93a3;
}

.wk-avatarpicker-retry {
  padding: 0.16rem 0.426667rem;
  border: 0.026667rem solid #ff491b;
  border-radius: 0.4rem;
  background: transparent;
  font-size: 0.32rem;
  line-height: normal;
  color: #ff491b;
  cursor: pointer;
}

/* ---------- 固定底栏（3463:68716）+ 保存按钮（3463:68717）---------- */
.wk-avatarpicker-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.373333rem 0.5128rem calc(0.266667rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(0.179467rem);
  backdrop-filter: blur(0.179467rem);
  border-top: 0.96px solid #edf0f5;
  box-shadow: 0 -0.205067rem 0.615467rem rgba(31, 47, 78, 0.06);
  box-sizing: border-box;
}

.wk-avatarpicker-save {
  width: 100%;
  height: 1.384533rem;
  border: 0;
  border-radius: 0.410133rem;
  background: #4a7af5;
  box-shadow: 0 0.282133rem 0.256533rem rgba(37, 91, 220, 0.25);
  font-size: 0.436rem;
  font-weight: 600;
  letter-spacing: 0.034933rem;
  color: #ffffff;
  cursor: pointer;
}

.wk-avatarpicker-save:disabled {
  background: #c7cbd2; /* 空态/失败屏实测 #C7CBD2 */
  box-shadow: 0 0.282133rem 0.256533rem rgba(71, 85, 105, 0.2);
  cursor: default;
}

/* ---------- D6 竖屏兜底 ---------- */
.wk-avatarpicker-rotate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #8a93a3;
  font-size: 0.373333rem;
}

/* ★★ `max-height: 500px` 这个条件**不能省**：只写 orientation:landscape 会把桌面浏览器
   （宽 > 高，天然算 landscape）也一起盖住。 */
@media (orientation: landscape) and (max-height: 500px) {
  .wk-avatarpicker-rotate {
    display: flex;
  }
}

/* ---------- 暗色分支（最小对应，与 MeInfo/MyRecords 同一套底色变量）---------- */
body[theme-mode="dark"] .wk-avatarpicker {
  background: var(--wk-color-secondary);
  color: var(--wk-text-item);
}

body[theme-mode="dark"] .wk-avatarpicker-rotate {
  background: var(--wk-color-secondary);
}

body[theme-mode="dark"] .wk-avatarpicker-section-title,
body[theme-mode="dark"] .wk-avatarpicker-hero-title {
  color: var(--wk-text-item);
}

body[theme-mode="dark"] .wk-avatarpicker-hero {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--wk-color-secondary-2);
  box-shadow: none;
}

body[theme-mode="dark"] .wk-avatarpicker-series-item,
body[theme-mode="dark"] .wk-avatarpicker-cell {
  border-color: var(--wk-color-secondary-2);
  background: var(--wk-color-secondary-2);
  box-shadow: none;
}

body[theme-mode="dark"] .wk-avatarpicker-skeleton {
  background: var(--wk-color-secondary-2) !important;
}

body[theme-mode="dark"] .wk-avatarpicker-footer {
  background: rgba(30, 33, 40, 0.9);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.mentions {
    margin: 1em 0;
  }
  
  .mentions--singleLine .mentions__control {
    display: inline-block;
    width: 3.466667rem;
  }
  .mentions--singleLine .mentions__highlighter {
    padding: 0.026667rem;
    border: 0.053333rem inset transparent;
  }
  .mentions--singleLine .mentions__input {
    padding: 0.026667rem;
    border: 0.053333rem inset;
  }
  
  .mentions--multiLine .mentions__control {
    font-family: monospace;
    font-size: 14pt;
  }
  .mentions--multiLine .mentions__highlighter {
    border: 0.026667rem solid transparent;
    padding: 0.24rem;
    min-height: 1.68rem;
  }
  .mentions--multiLine .mentions__input {
    border: 0.026667rem solid silver;
    padding: 0.24rem;
    outline: 0;
  }
  
  .mentions__suggestions__list {
    background-color: white;
    border: 0.026667rem solid rgba(0, 0, 0, 0.15);
    font-size: 10pt;
    /* box-shadow: 15px 0px 15px -15px #eee, -15px 0px 15px -15px #eee; */
  }
  
  .mentions__suggestions__item {
    padding: 0.133333rem 0.4rem;
    border-bottom: 0.026667rem solid rgba(0, 0, 0, 0.15);
  }
  
  .mentions__suggestions__item--focused {
    background-color: #cee4e5;
  }
  
.mentions__mention {
    position: relative;
    z-index: 1;
    color: transparent;
    text-shadow: none;
    /* text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
      -1px -1px 1px white; */
    /* text-decoration: underline; */
    pointer-events: none;
  }



.wk-search-box {
    display: flex;
    min-width: 5.333333rem;
    height: 1.2rem;
    background-color: #f4f4f5;
    border-radius: 0.666667rem;
}

body[theme-mode=dark] .wk-search-box {
    background-color: var(--wk-color-secondary-2);
}

.wk-search-icon {
    display: flex;
    align-items: center;
    margin-left: 0.533333rem;
}

.wk-search-input {
    margin-left: 0.266667rem;
    max-width: 2.666667rem;
}

.wk-search-input input {
    flex: 1 1;
    height: 0.853333rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    background-color: transparent;
    color: #1f2329;
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

body[theme-mode=dark] .wk-search-input input {
    color: white;
}


.wk-search-input .semi-input-wrapper{
    height: 100%;
    background-color: white;
}

body[theme-mode=dark] .wk-search-input .semi-input-wrapper {
    background-color: var(--wk-color-secondary-2);
}

.wk-search-input .semi-input-wrapper-focus {
    border: none !important;
}

.wk-search-input .semi-input-wrapper-focus:active {
    border-color: none !important;
}

.wk-userselect {
    width: 100%;
    height: 100%;
}

.wk-contactsselect {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wk-contactsselect-content {
    width: 100%;
    height: calc(100% - var(--wk-height-viewqueueheader));

}

.wk-layout {
    --wk-width-layout-tab: 1.6rem;
    --wk-height-layout-tab: 1.706667rem;
    --wk-height-layout-tab-min: 1.6rem;
    --wk-layer-transition: 300ms cubic-bezier(0.33,1,0.68,1);
    --wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wk-layout-tab {
    order: 2;
    width: 100%;
    height: var(--wk-height-layout-tab);
    flex: 0 0 var(--wk-height-layout-tab);
}

.wk-layout-content {
    order: 1;
    width: 100%;
    height: calc(100% - var(--wk-height-layout-tab));
    min-height: 0;
    display: flex;
}

.wk-layout-content-left {
    width: 100%;
    height: 100%;
}

.wk-layout-content-right {
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    z-index: 30;
    background-color: #fff;
    transform: translate3d(0, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-layout-content:not(.wk-layout-open) .wk-layout-content-right {
    transform: translate3d(100vw, 0, 0);
}






.wk-blacklist {

}

.wk-blacklist-content ul li {
    height: 2.133333rem;
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}


.wk-blacklist-content-avatar {
    margin-left: 0.4rem;
}

.wk-blacklist-content-avatar img{
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 50%;
}

.wk-blacklist-content-title {
    margin-left: 0.4rem;
    font-size: 0.4rem;
    font-weight: 500;
    color: var(--wk-text-item);
}
.wk-friendadd .wk-search-box {
  border-radius: 0px;
  background-color: white;
}

.wk-friendadd .wk-search-input {
  max-width: 100%;
}

.wk-friendadd .wk-search-input input {
  width: 6.666667rem;
}

.wk-friendadd-content-account {
  margin-top: 0.266667rem;
  padding: 0 5%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

body[theme-mode="dark"] .wk-friendadd-content-account {
  color: white;
}

.wk-friendadd-apply {
  width: 100%;
  height: 100%;
  background-color: #f5f6fa;
}

.wk-friendadd-apply-content {
  padding: 0.426667rem;
}

.wk-friendadd-apply-user {
  display: flex;
  align-items: center;
  padding: 0.373333rem 0 0.48rem;
}

.wk-friendadd-apply-avatar {
  width: 1.28rem;
  height: 1.28rem;
  margin-right: 0.32rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e5e7eb;
  flex: 0 0 1.28rem;
}

.wk-friendadd-apply-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-friendadd-apply-info {
  min-width: 0;
}

.wk-friendadd-apply-name {
  color: #111827;
  font-size: 0.426667rem;
  font-weight: 500;
}

.wk-friendadd-apply-short {
  margin-top: 0.106667rem;
  color: #9ca3af;
  font-size: 0.346667rem;
  word-break: break-all;
}

.wk-friendadd-apply-label {
  margin-bottom: 0.213333rem;
  color: #6b7280;
  font-size: 0.373333rem;
}

.wk-friendadd-apply-button {
  width: 100%;
  height: 1.12rem;
  margin-top: 0.48rem;
}



.wk-groupsave {
    width: 100%;
    height: 100%;
    border-right: var(--wk-line);
}

.wk-groupsave-content {
    height: calc(100% - var( --wk-height-viewqueueheader));
    width: 100%;
}

.wk-groupsave-content li {
    height: 2.133333rem;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-groupsave-content-avatar {
    margin-left: 0.4rem;
}

.wk-groupsave-content-avatar img{
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 50%;
}

.wk-groupsave-content-title {
    margin-left: 0.4rem;
    font-size: 0.4rem;
    font-weight: 500;
    color: var(--wk-text-item);
}


.wk-newfriend {
    width: 100%;
    height: 100%;
    border-right: var(--wk-line);
}

.wk-newfriend-content {
    height: calc(100% - var( --wk-height-viewqueueheader));
    width: 100%;
    overflow-y: auto;
}

.wk-newfriend-content  li {
    display: flex;
    width: 100%;
    height: 2.133333rem;
    background-color: var(--wk-color-item);
    align-items: center;
}


.wk-newfriend-content-avatar {
   margin-left: 0.4rem;
}

.wk-newfriend-content-avatar img{
    width: 1.333333rem;
    height: 1.333333rem;
    border-radius: 50%;
}

.wk-newfriend-content-title {
    margin-left: 0.4rem;
    font-size: 0.4rem;
    font-weight: 500;
    color: var(--wk-text-item);
}

.wk-newfriend-content-title-remark {
    font-size: 0.32rem;
    color: #666;
    margin-top: 0.133333rem;
}

.wk-newfriend-content-action {
    display: flex;
    gap: 0.213333rem;
    margin-right: 0.266667rem;
    margin-left: auto;
}

.wk-main-modal-organizational-group-new .semi-modal-body-wrapper {
  margin: 0;
}
.wk-main-modal-organizational-group-new .semi-modal-close {
  display: none;
}
.wk-main-modal-organizational-group-new .semi-modal-body {
  height: 13.333333rem;
  display: flex;
}
.wk-main-modal-organizational-group-new .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.wk-organizational-group-new-left {
  width: 100%;
  height: 100%;
  background-color: var(--wk-color-secondary);
  padding: 0.32rem;
  display: flex;
  flex-direction: column;
}

.wk-organizational-group-new-left .group-new-left-main {
  flex: 1 1 auto;
  overflow-y: auto;
}

.wk-organizational-group-new-left .group-new-left-search {
  margin-bottom: 0.32rem;
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.wk-organizational-group-new-left .group-new-left-search .group-new-left-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.wk-organizational-group-new-left .group-new-left-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.32rem;
}

.wk-organizational-group-new-left .group-new-left-actions .semi-button {
  flex: 0 0 auto;
  width: 2.346667rem;
  height: 1.013333rem;
  border-radius: 0.213333rem;
  font-size: 0.4rem;
  font-weight: 600;
}
.wk-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus {
  border: var(--wk-color-theme) solid 0.026667rem;
}
.wk-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus:active {
  border: var(--wk-color-theme) solid 0.026667rem;
}
/* 好友选择 */
.group-new-left-main .friend-opt .organization-name {
  display: flex;
  align-items: center;
  padding: 0.32rem 0.213333rem;
  color: var(--semi-color-text-0);
  cursor: pointer;
}
.group-new-left-main .friend-opt .organization-name:hover {
  background-color: var(--semi-color-fill-0);
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
  display: flex;
  align-items: center;
  padding: 0.32rem 0.213333rem;
  font-size: 0.373333rem;
  line-height: 0.533333rem;
  color: var(--semi-color-text-0);
  row-gap: 0;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item:hover {
  background-color: var(--semi-color-fill-0);
}

.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item.disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item.disabled:hover {
  background-color: transparent;
}

/* 组织架构选择 */
.group-new-left-main .organizational-opt {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-new-left-main .organizational-opt-header {
  height: var(--wk-page-header-height);
  flex-shrink: 0;
  margin-bottom: 0.32rem;
  border-radius: 0.106667rem;
}
.group-new-left-main .organizational-opt-main {
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree {
  width: 100%;
  height: 100%;
}
.organizational-tree .semi-input-wrapper-focus {
  border: var(--wk-color-theme) solid 0.026667rem;
}
.organizational-tree .semi-input-wrapper-focus:active {
  border: var(--wk-color-theme) solid 0.026667rem;
}
.organizational-tree .semi-tree-option-list {
  padding-top: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree .semi-tree-option-list li.semi-tree-option {
  box-sizing: border-box;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}

.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
  box-shadow: inset 0 0 0 0.026667rem var(--wk-color-theme);
}

.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--wk-color-theme);
  border-color: var(--wk-color-theme);
  color: var(--semi-color-white);
}

.organizational-tree .semi-tree-option-list-block .department-icon {
  color: var(--wk-color-theme);
}
.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .department-icon {
  color: #fff;
}

.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--wk-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected:hover {
  background-color: var(--wk-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .semi-tree-option-expand-icon {
  color: #fff;
}

.wk-organizational-group-new-left .wk-group-member-cancel {
  opacity: 1 !important;
  background: #f5f6f8 !important;
  color: var(--wk-color-theme) !important;
}

.wk-organizational-group-new-left .wk-group-member-cancel:hover,
.wk-organizational-group-new-left .wk-group-member-cancel:active,
.wk-organizational-group-new-left .wk-group-member-cancel:focus {
  opacity: 1 !important;
}

.wk-but-ok:hover {
  background-color: var(--wk-color-theme) !important;
}

.wk-group-join-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #f6f8fb;
  color: #111827;
}





.wk-group-join-content {
  padding: 1.333333rem 1.28rem 0;
}

.wk-group-join-field-label {
  position: relative;
  display: block;
  margin-bottom: 0.266667rem;
  padding-left: 0.213333rem;
  color: #25324a;
  font-size: 0.346667rem;
  font-weight: 500;
  line-height: 0.48rem;
}

.wk-group-join-field-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 0.053333rem;
  height: 0.346667rem;
  border-radius: 0.053333rem;
  background: #4d7cff;
}

.wk-group-join-input {
  display: block;
  width: 100%;
  height: 1.386667rem;
  padding: 0 0.32rem;
  border: 0.026667rem solid #dce2ec;
  border-radius: 0.293333rem;
  outline: none;
  background: #fff;
  color: #111827;
  font-size: 0.346667rem;
  line-height: 1.386667rem;
  box-sizing: border-box;
}

.wk-group-join-input::-moz-placeholder {
  color: #b8c0cf;
}

.wk-group-join-input::placeholder {
  color: #b8c0cf;
}

.wk-group-join-input:focus {
  border-color: #4d7cff;
}

.wk-group-join-submit {
  width: 100%;
  height: 1.386667rem;
  margin-top: 0.853333rem;
  border: 0;
  border-radius: 0.266667rem;
  background: #4d7cff;
  color: #fff;
  cursor: pointer;
  font-size: 0.373333rem;
  font-weight: 700;
  line-height: 1.386667rem;
}

.wk-group-join-submit:disabled {
  background: #9fb8f7;
  cursor: not-allowed;
}

.wk-group-join-dialog-mask {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.64rem 0.906667rem;
  background: rgba(0, 0, 0, 0.68);
  box-sizing: border-box;
}

.wk-group-join-dialog {
  width: min(8rem, 100%);
  min-height: 3.68rem;
  padding: 1.226667rem 0.32rem 0.426667rem;
  border-radius: 0.16rem;
  background: #f7f9fc;
  box-sizing: border-box;
}

.wk-group-join-dialog-message {
  min-height: 0.533333rem;
  color: #25324a;
  font-size: 0.373333rem;
  font-weight: 600;
  line-height: 0.533333rem;
  text-align: center;
  word-break: break-word;
}

.wk-group-join-dialog-actions {
  display: flex;
  gap: 0.266667rem;
  margin-top: 0.906667rem;
}

.wk-group-join-dialog-actions-single {
  margin-top: 0.906667rem;
}

.wk-group-join-dialog-button {
  flex: 1 1;
  height: 0.96rem;
  padding: 0;
  border: 0;
  border-radius: 0.213333rem;
  cursor: pointer;
  font-size: 0.346667rem;
  font-weight: 600;
}

.wk-group-join-dialog-button-cancel {
  background: #e8efff;
  color: #4d7cff;
}

.wk-group-join-dialog-button-primary {
  background: #4d7cff;
  color: #fff;
}

@media (max-width: 320px) {
  .wk-group-join-content {
    padding-right: 0.906667rem;
    padding-left: 0.906667rem;
  }
}

body[theme-mode="dark"] .wk-group-join-page {
  background: #f6f8fb;
  color: #111827;
}

.wk-contacts {
    width: 100%;
    height: 100%;
    --wk-height-contacts-header: 1.706667rem;
    border-right: none;
    background: #f4f7fb;
    color: #111827;
    overflow: hidden;
}

.wk-contacts-header {
    width: 100%;
    height: var(--wk-height-contacts-header);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 0.48rem;
    background: #ffffff;
    border-bottom: 0.026667rem solid #eef1f5;
}

.wk-contacts-header-title {
    color: #111827;
    font-size: 0.48rem;
    font-weight: 600;
    line-height: 0.64rem;
}

.wk-contacts-desktop-search,
.wk-contacts-desktop-empty {
    display: none;
}

.wk-contacts-content {
    width: 100%;
    height: calc(100% - var(--wk-height-contacts-header));
    overflow-x: hidden;
    overflow-y: auto;
    background: #f4f7fb;
    scrollbar-width: none;
}

.wk-contacts-content::-webkit-scrollbar {
    display: none;
}

.wk-contacts-content-inner {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 0.533333rem;
}

.wk-contacts-list {
    width: 100%;
}

.wk-contacts-list-item {
    min-height: 1.653333rem;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 0.48rem 0 0.533333rem;
    cursor: pointer;
}

.wk-contacts-list-item::after {
    content: "";
    height: 0.026667rem;
    position: absolute;
    right: 0.533333rem;
    bottom: 0;
    left: 2.08rem;
    background: #d9dee7;
    transform: scaleY(0.5);
    transform-origin: bottom;
}

.wk-contacts-list-item:first-child::before {
    content: "";
    height: 0.026667rem;
    position: absolute;
    top: 0;
    right: 0.533333rem;
    left: 2.08rem;
    background: #d9dee7;
    transform: scaleY(0.5);
    transform-origin: top;
}

.wk-contacts-list-item:active {
    border-radius: 0.266667rem;
    background: #e5e5ea;
}

.wk-contacts-list-item-avatar {
    width: 1.173333rem;
    height: 1.173333rem;
    flex: 0 0 1.173333rem;
    position: relative;
}

.wk-contacts-list-item-avatar img {
    width: 1.173333rem !important;
    height: 1.173333rem !important;
    display: block;
    border-radius: 0.213333rem;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-contacts-online-dot {
    width: 0.24rem;
    height: 0.24rem;
    position: absolute;
    right: -0.026667rem;
    bottom: 0.026667rem;
    box-sizing: content-box;
    border: 0.053333rem solid #f4f7fb;
    border-radius: 50%;
    background: #22c55e;
}

.wk-contacts-list-item-main {
    min-width: 0;
    flex: 1 1;
    box-sizing: border-box;
    margin-left: 0.373333rem;
    padding: 0.213333rem 0 0.186667rem;
}

.wk-contacts-list-item-main-single-line {
    padding: 0;
}

.wk-contacts-list-item-name {
    display: flex;
    min-width: 0;
    align-items: center;
    color: #111827;
    font-size: 0.4rem;
    font-weight: 600;
    line-height: 0.48rem;
}

.wk-contacts-list-item-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-contacts-list-item-identity {
    display: block;
    width: 0.48rem;
    height: 0.48rem;
    margin-left: 0.053333rem;
    flex: 0 0 0.48rem;
    -o-object-fit: contain;
       object-fit: contain;
}

.wk-contacts-list-item-status {
    margin-top: 0.106667rem;
    color: #8b96a8;
    font-size: 0.346667rem;
    line-height: 0.533333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-contacts-list-item-status-online {
    color: #1683ff;
}

body[theme-mode=dark] .wk-contacts,
body[theme-mode=dark] .wk-contacts-content {
    background: var(--wk-color-secondary-2);
}

body[theme-mode=dark] .wk-contacts-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: var(--wk-color-secondary);
}

body[theme-mode=dark] .wk-contacts-header-title,
body[theme-mode=dark] .wk-contacts-list-item-name {
    color: #ffffff;
}

body[theme-mode=dark] .wk-contacts-list-item::after,
body[theme-mode=dark] .wk-contacts-list-item:first-child::before {
    background: rgba(255, 255, 255, 0.1);
}

body[theme-mode=dark] .wk-contacts-list-item-status {
    color: #a3adbd;
}

body[theme-mode=dark] .wk-contacts-list-item-status-online {
    color: #4da3ff;
}

body[theme-mode=dark] .wk-contacts-online-dot {
    border-color: var(--wk-color-secondary-2);
}

.wk-desktop .wk-contacts {
    --wk-height-contacts-header: 2.72rem;
    background: #fff;
}

.wk-desktop .wk-contacts-header {
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.48rem 0.426667rem 0.32rem;
    border: 0;
}

.wk-desktop .wk-contacts-header-title {
    flex-shrink: 0;
    text-align: left;
}

.wk-desktop .wk-contacts-desktop-search {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 0.906667rem;
    flex: 0 0 0.906667rem;
    border: 0.026667rem solid transparent;
    border-radius: 0.213333rem;
    padding: 0 0.266667rem;
    background: #f4f6fa;
    color: #2c2d3a;
    font: inherit;
    font-size: 0.346667rem;
    outline: none;
}

.wk-desktop .wk-contacts-desktop-search:focus {
    border-color: #bfd0fb;
    background: #f2f6ff;
}

.wk-desktop .wk-contacts-content {
    background: #fff;
}

.wk-desktop .wk-contacts-content-inner {
    padding: 0 0.213333rem 0.426667rem;
}

.wk-desktop .wk-contacts-list-item {
    min-height: 1.813333rem;
    gap: 0.32rem;
    padding: 0.266667rem;
    border-radius: 0.266667rem;
    outline: none;
}

.wk-desktop .wk-contacts-list-item::before,
.wk-desktop .wk-contacts-list-item::after {
    display: none;
}

.wk-desktop .wk-contacts-list-item:hover,
.wk-desktop .wk-contacts-list-item:focus-visible {
    background: #f2f6ff;
}

.wk-desktop .wk-contacts-list-item.is-selected {
    background: #e8effe;
}

.wk-desktop .wk-contacts-list-item-main {
    margin: 0;
    padding: 0;
}

.wk-desktop .wk-contacts-list-item-name {
    font-weight: 500;
}

.wk-desktop .wk-contacts-list-item-status {
    font-size: 0.32rem;
    line-height: 0.48rem;
}

.wk-desktop .wk-contacts-list-item-status-online {
    color: #22c55e;
}

.wk-desktop .wk-contacts-online-dot {
    border-color: #fff;
}

.wk-desktop .wk-contacts-desktop-empty {
    display: flex;
    min-height: 4.266667rem;
    align-items: center;
    justify-content: center;
    color: #9a9bb1;
    font-size: 0.346667rem;
}

.wk-desktop body[theme-mode=dark] .wk-contacts,
.wk-desktop body[theme-mode=dark] .wk-contacts-content {
    background: var(--wk-color-secondary-2);
}

.wk-desktop body[theme-mode=dark] .wk-contacts-list-item:hover,
.wk-desktop body[theme-mode=dark] .wk-contacts-list-item:focus-visible,
.wk-desktop body[theme-mode=dark] .wk-contacts-list-item.is-selected,
.wk-desktop body[theme-mode=dark] .wk-contacts-desktop-search {
    background: #24364a;
}

.wk-desktop body[theme-mode=dark] .wk-contacts-desktop-search {
    color: #fff;
}

.wk-desktop body[theme-mode=dark] .wk-contacts-online-dot {
    border-color: var(--wk-color-secondary-2);
}


#root {
  width: 100%;
  height: 100%;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(0.266667rem + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:root {
  --sider-width: 1.6rem
}

.wk-main {
    width: 100%;
    height: 100%;
    display: flex;
}

.wk-main-content {
    width: calc(100% - 1.6rem
);
    width: calc(100% - var(--sider-width));
    height: 100%;
    background-color: white;
}

.wk-main-tab {
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
  border-top: 0.026667rem solid rgb(0 0 0 / 5%);
}
.wk-main-tab-content {
  width: 100%;
  height: 100%;
}
.wk-main-tab-content ul {
  margin-bottom: 0px;
  display: flex;
  width: 100%;
  height: 100%;
}

.wk-main-tab-content ul li {
  min-width: 0;
}

.wk-main-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  gap: 0.08rem;
  cursor: pointer;
  color: #9aa3b2;
  font-size: 0.32rem;
  line-height: 1.1;
  position: relative;
}

.wk-main-tab-item.selected {
  color: #4a7af5;
}

/* 切换导航时给选中图标一个接近 iOS TabBar 的轻量弹性反馈。 */
.wk-main-tab-item.selected .wk-main-tab-icon {
  transform-origin: center bottom;
  animation: wk-main-tab-bounce 360ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes wk-main-tab-bounce {
  0% {
    transform: translateY(0.5px) scale(0.92);
  }
  42% {
    transform: translateY(-0.026667rem) scale(1.08);
  }
  66% {
    transform: translateY(0) scale(0.98);
  }
  84% {
    transform: translateY(-0.5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wk-main-tab-item.selected .wk-main-tab-icon {
    animation: none;
  }
}

.wk-main-tab-img {
  width: auto;
  height: auto;
  max-width: 0.533333rem;
  max-height: 0.533333rem;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.wk-main-tab-return {
  color: #ff3b3b;
}

.wk-main-tab-return .wk-main-tab-img {
  max-width: 0.506667rem;
  max-height: 0.506667rem;
}

.wk-main-tab-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.64rem;
  height: 0.586667rem;
  flex: 0 0 0.586667rem;
}

.wk-main-tab-badge {
  position: absolute;
  top: -0.186667rem;
  right: -0.266667rem;
  min-width: 0.426667rem;
  height: 0.426667rem;
  padding: 0 0.106667rem;
  box-sizing: border-box;
  border-radius: 26.64rem;
  background-color: #ff3b30;
  color: #fff;
  font-size: 0.266667rem;
  font-weight: 600;
  line-height: 0.426667rem;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  pointer-events: none;
}

.wk-main-tab-content ul li > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-main-tab-content ul li img.wk-main-tab-img {
  width: auto;
  height: auto;
}

.wk-main-tab-content ul li img.wk-main-tab-img-hall {
  width: 0.666667rem;
  height: 0.533333rem;
  max-width: 0.666667rem;
  max-height: 0.533333rem;
}

.wk-main-sider-modal .semi-modal-content {
  border: none !important;
  padding: 0 !important;
}

.wk-main-sider-modal .semi-modal-close {
  display: none;
}

.wk-main-sider-modal .semi-modal-body-wrapper {
  margin: 0;
}

.wk-main-sider-meinfo .semi-modal-body {
  height: 13.333333rem;
}

.wk-hall {
  --wk-hall-header-height: 1.546667rem;
  --wk-hall-blue: #4a7af5;
  --wk-hall-list-background: #f7fafc;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    sans-serif;
}

.wk-hall .wk-hall-header {
  height: var(--wk-hall-header-height);
  padding: 0 0.373333rem;
  border-bottom: 0;
}

.wk-hall .wk-hall-header .wk-chat-title {
  color: #1f293b;
  font-size: 0.453333rem;
  font-weight: 600;
  line-height: 0.453333rem;
}

.wk-hall .wk-hall-header .wk-chat-search-add {
  width: 0.986667rem;
  height: 0.986667rem;
  padding: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #1a1a1a;
}

.wk-hall .wk-hall-header .wk-chat-header-plus-icon {
  width: 0.666667rem;
  height: 0.666667rem;
  flex-basis: 0.666667rem;
}

.wk-hall-content {
  width: 100%;
  height: calc(100% - var(--wk-hall-header-height));
  overflow-y: auto;
  background-color: var(--wk-hall-list-background);
}

.wk-hall-list {
  width: 100%;
  min-height: 100%;
  padding: 0.266667rem 0.4rem 0.48rem;
  background-color: var(--wk-hall-list-background);
}

.wk-hall-content ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.213333rem;
}

.wk-hall-segmented {
  width: 100%;
  height: 1.28rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.16rem;
  border-radius: 0.266667rem;
  background-color: rgba(74, 122, 245, 0.08);
  overflow: hidden;
  margin-bottom: 0.266667rem;
}

.wk-hall-segmented::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0.16rem;
  bottom: 0.16rem;
  left: 0.16rem;
  width: calc((100% - 0.32rem) / 3);
  box-sizing: border-box;
  border: 0.026667rem solid #e7e7ef;
  border-radius: 0.213333rem;
  background-color: var(--wk-hall-blue);
  box-shadow: 0 0.026667rem 0.053333rem rgba(65, 65, 85, 0.07);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.34, 1.25, 0.64, 1);
  will-change: transform;
}

.wk-hall-segmented[data-selected-index="1"]::before {
  transform: translateX(100%);
}

.wk-hall-segmented[data-selected-index="2"]::before {
  transform: translateX(200%);
}

.wk-hall-segmented-option {
  flex: 1 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 0.96rem;
  padding: 0 0.106667rem;
  border: 0;
  border-radius: 0.213333rem;
  background-color: transparent;
  color: var(--wk-hall-blue);
  font-size: 0.373333rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 0.96rem;
  text-align: center;
  cursor: pointer;
  transition: color 180ms ease, transform 120ms ease;
}

.wk-hall-segmented-option.selected {
  color: #fff;
}

.wk-hall-segmented-option:active {
  transform: scale(0.96);
}

.wk-hall-item {
  display: flex;
  align-items: center;
  gap: 0.213333rem;
  width: 100%;
  height: 1.76rem;
  min-height: 1.76rem;
  padding: 0 0.213333rem;
  background-color: #fff;
  border-radius: 0.426667rem;
  box-shadow: 0 0.026667rem 0.053333rem rgba(209, 222, 240, 0.16);
}

.wk-hall-item-avatar {
  width: 1.12rem;
  height: 1.12rem;
  flex: 0 0 1.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-item-avatar .wk-avatar {
  width: 1.013333rem;
  height: 1.013333rem;
  border-radius: 0.16rem;
  display: block;
  object-fit: cover;
}

.wk-hall-item-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
}

.wk-hall-item-groupno,
.wk-hall-item-joined {
  display: none;
}

.wk-hall-item-name {
  width: 100%;
  min-width: 0;
  color: #1f2938;
  font-size: 0.373333rem;
  font-weight: 500;
  line-height: 0.533333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-item-subline {
  display: flex;
  align-items: center;
  gap: 0.133333rem;
  height: 0.533333rem;
  color: #64789c;
  font-size: 0.373333rem;
  font-weight: 400;
  line-height: 0.533333rem;
}

.wk-hall-item-member-icon {
  width: 0.426667rem;
  height: 0.426667rem;
  flex: 0 0 0.426667rem;
  display: block;
  object-fit: contain;
}

.wk-hall-item-action {
  flex: 0 0 2.613333rem;
}

.wk-hall-item-button {
  width: 2.613333rem;
  height: 0.8rem;
  padding: 0;
  border: 0;
  border-radius: 0.213333rem;
  background-color: var(--wk-hall-blue);
  color: #fff;
  font-size: 0.346667rem;
  font-family: inherit;
  font-weight: 400;
  line-height: 0.8rem;
  text-align: center;
  cursor: pointer;
}

.wk-hall-item-level {
  display: inline-flex;
  width: 0.8rem;
  height: 0.426667rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.106667rem;
  background: #eaf2ff;
  color: var(--wk-hall-blue);
  font-size: 0.32rem;
  line-height: 0.426667rem;
  box-sizing: border-box;
}

.wk-hall-item-button:disabled {
  cursor: default;
}

.wk-hall-item-button-ghost {
  border: 0;
  background-color: rgba(74, 122, 245, 0.08);
  color: var(--wk-hall-blue);
}

.wk-hall-item-button-disabled {
  background-color: #ededed;
  color: #9fa8b6;
}

.wk-hall-loading,
.wk-hall-empty {
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.373333rem;
  color: #8b95aa;
}

body[theme-mode="dark"] .wk-hall {
  background-color: var(--wk-color-secondary-2);
}

body[theme-mode="dark"] .wk-hall-content,
body[theme-mode="dark"] .wk-hall-list,
body[theme-mode="dark"] .wk-hall .wk-hall-header {
  background-color: var(--wk-color-secondary-2);
}

body[theme-mode="dark"] .wk-hall-item {
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body[theme-mode="dark"] .wk-hall .wk-hall-header .wk-chat-title,
body[theme-mode="dark"] .wk-hall .wk-hall-header .wk-chat-search-add,
body[theme-mode="dark"] .wk-hall-item-name {
  color: #fff;
}

body[theme-mode="dark"] .wk-hall-segmented {
  background-color: rgba(74, 122, 245, 0.16);
}

body[theme-mode="dark"] .wk-hall-segmented::before {
  border-color: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .wk-hall-segmented::before,
  .wk-hall-segmented-option {
    transition: none;
  }
}

/* The installed desktop client uses the full workspace, not a stretched phone list. */
.wk-desktop .wk-hall {
  --wk-hall-header-height: 1.92rem;
  position: relative;
  background: #f4f6fa;
}

.wk-desktop .wk-hall .wk-hall-header {
  display: flex;
  height: var(--wk-hall-header-height);
  min-height: var(--wk-hall-header-height);
  box-sizing: border-box;
  padding: 0 0.853333rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.746667rem;
  border-bottom: 0.026667rem solid #edf1f8;
  background: #fff;
}

.wk-desktop .wk-hall .wk-hall-header .wk-chat-title {
  position: static;
  transform: none;
  font-size: 0.533333rem;
  line-height: 0.746667rem;
}

.wk-desktop .wk-hall-content,
.wk-desktop .wk-hall-list {
  background: #f4f6fa;
}

.wk-desktop .wk-hall-list {
  box-sizing: border-box;
  padding: 0.64rem 0.853333rem;
}

.wk-desktop .wk-hall-segmented {
  position: relative;
  width: 8.533333rem;
  flex: 0 0 8.533333rem;
  height: 1.12rem;
  margin: 0;
  padding: 0.106667rem;
}

.wk-desktop .wk-hall-segmented::before {
  top: 0.106667rem;
  bottom: 0.106667rem;
  left: 0.106667rem;
  width: calc((100% - 0.213333rem) / 3);
}

.wk-desktop .wk-hall-segmented-option {
  height: 0.906667rem;
  line-height: 0.906667rem;
}

.wk-desktop .wk-hall-content ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0.426667rem;
  gap: 0.426667rem;
}

.wk-desktop .wk-hall-item {
  min-width: 0;
  height: auto;
  min-height: 2.88rem;
  gap: 0.32rem;
  padding: 0.426667rem;
  border: 0.026667rem solid #edf1f8;
  border-radius: 0.373333rem;
  box-shadow: 0 0.08rem 0.32rem rgba(30, 41, 59, 0.025);
}

.wk-desktop .wk-hall-item-avatar,
.wk-desktop .wk-hall-item-avatar .wk-avatar {
  width: 1.226667rem;
  height: 1.226667rem;
  flex-basis: 1.226667rem;
}

.wk-desktop .wk-hall-item-groupno {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9a9bb1;
  font-size: 0.293333rem;
  line-height: 0.426667rem;
}

.wk-desktop .wk-hall-item-subline {
  flex-wrap: wrap;
  height: auto;
  min-height: 0.48rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
}

.wk-desktop .wk-hall-item-member-icon {
  width: 0.373333rem;
  height: 0.373333rem;
  flex-basis: 0.373333rem;
}

.wk-desktop .wk-hall-item-joined {
  display: inline-flex;
  align-items: center;
  padding: 0 0.133333rem;
  border-radius: 0.106667rem;
  background: #e8effe;
  color: #4a7af5;
  font-size: 0.293333rem;
  line-height: 0.48rem;
}

.wk-desktop .wk-hall-item-action {
  flex-basis: 2.24rem;
}

.wk-desktop .wk-hall-item-button {
  width: 2.24rem;
  height: 0.906667rem;
  line-height: 0.906667rem;
}

.wk-desktop .wk-hall-item-button:not(:disabled):hover {
  filter: brightness(0.96);
}

@media (min-width: 1440px) {
  .wk-desktop .wk-hall-content ul {
    grid-template-columns: repeat(auto-fill, minmax(10.133333rem, 1fr));
  }
}

.wk-desktop body[theme-mode="dark"] .wk-hall,
.wk-desktop body[theme-mode="dark"] .wk-hall-content,
.wk-desktop body[theme-mode="dark"] .wk-hall-list {
  background: var(--wk-color-secondary-2);
}

.wk-desktop body[theme-mode="dark"] .wk-hall .wk-hall-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: var(--wk-color-secondary);
}

.wk-desktop body[theme-mode="dark"] .wk-hall-item {
  border-color: rgba(255, 255, 255, 0.08);
}

body[theme-mode="dark"] .wk-hall-item-subline,
body[theme-mode="dark"] .wk-hall-empty {
  color: rgba(255, 255, 255, 0.56);
}

/* 独立下线页按设计的 CSS 像素渲染，桌面不随全站 rem 放大。 */
.no-rem-session-offline {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100%;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: none;
  background: #f5f7fa;
  color: #1f304f;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.no-rem-session-offline-card {
  position: relative;
  flex: 0 1 327px;
  width: 100%;
  max-width: 327px;
  min-width: 0;
  min-height: 362px;
  margin: auto;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.no-rem-session-offline-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(87.627566deg, #60ccff 9.5023%, #398ff2 91.654%, #2857db 119.04%);
}

.no-rem-session-offline-surface {
  position: absolute;
  inset: 40px 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.no-rem-session-offline-illustration {
  position: absolute;
  top: 0.4px;
  left: 10.4%;
  width: 79.51%;
  height: 254.947px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.no-rem-session-offline-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 187px 24px 24px;
  text-align: center;
}

.no-rem-session-offline-content h1 {
  margin: 0;
  color: #1f304f;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  outline: none;
}

.no-rem-session-offline-copy {
  margin-top: 18px;
  color: #63738c;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.no-rem-session-offline-copy p { margin: 0; }
.no-rem-session-offline-copy .no-rem-session-offline-guidance {
  margin-top: 6px;
  font-size: 12px;
  line-height: 18px;
}

.no-rem-session-offline-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.no-rem-session-offline-actions button {
  flex: 1 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #4fb8fa, #3d6be8);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
}

.no-rem-session-offline-actions button:focus-visible {
  outline: 2px solid #2857db;
  outline-offset: 3px;
}

.no-rem-session-checking {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  color: #63738c;
  font-size: 14px;
}



.wk-login {
    display: table;
    height: 100%;
    width: 100%;
    min-height: 16rem;
    padding-bottom: 1.333333rem;
    position: absolute;
    background-color: rgb(255, 255, 255);
}

.wk-login-content {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.wk-login-content-logo {
    align-items: center;
    display: flex;
    height: 3.2rem;
    justify-content: center;
    min-width: 100%;
    width: 3.2rem;
}

.wk-login-content-logo img {
    width: 2rem;
    height: 2rem;
}

.wk-login-content-slogan {
    color: rgba(0, 0, 0, 1);
    font-size: 0.96rem;
    font-weight: 450;
    line-height: 1.066667rem;
    margin-bottom: 1.2rem;
    margin-top: 0.64rem;
    text-align: center;
}

.wk-login-content-form {
    margin-top: 0.853333rem;
}

.wk-login-content-form input {
    border: 0.026667rem solid rgba(0, 0, 0, .20);
    border-radius: 0.106667rem;
    color: rgba(0, 0, 0, 1);
    display: block;
    font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
    font-size: 0.48rem;
    height: 1.12rem;
    margin-bottom: 0.32rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.426667rem;
    width: 7.626667rem;
}

.wk-login-content-form-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}


.wk-login-content-form-ok {
    border-radius: 1.333333rem;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.426667rem;
    padding: 0.253333rem 0.533333rem;
    margin-top: 0.64rem;
}

.wk-login-content-form-others {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.066667rem;
    width: 8.533333rem;
}

.wk-login-content-form-scanlogin {
    color: #929292;
    font-size: 0.4rem;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
}

.wk-login-footer {
    color: #262626;
    font-size: 0.426667rem;
    font-weight: 400;

    bottom: 0;
    margin-bottom: 1.76rem;
    position: absolute;
    text-align: center;
    width: 100%;
}

.wk-login-footer ul {
    display: flex;
    justify-content: center;
    margin-bottom: 0px;
}

.wk-login-footer ul li {
    margin-left: 1.066667rem;
}

.wk-login-content-phonelogin {
    margin: 0 auto;
}

.wk-login-content-scanlogin {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wk-login-content-scanlogin-show {
    display: flex;
}

.wk-login-content-scanlogin-qrcode {
    width: 7.466667rem;
    height: 7.466667rem;
    position: relative;

    opacity: 0;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),opacity 300ms;
   
}

.wk-login-content-scanlogin-show .wk-login-content-scanlogin-qrcode{
    opacity: 1;
    transform: scale(1);
}

.wk-login-content-scanlogin-qrcode-avatar {
   
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -0.8rem;
   margin-left: -0.8rem;

   opacity: 0;
   transform: scale(0);
   transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),opacity 300ms;
}


.wk-login-content-scanlogin-qrcode-avatar-show {
    opacity: 1;
    transform: scale(1);
}

.wk-login-content-scanlogin-qrcode-avatar img {
    width: 1.6rem;
    height: 1.6rem;
   border-radius: 50%;
}

.wk-login-content-scanlogin-qrcode-title {
    margin-top: 0.8rem;
    color: rgba(9,30,66,.87);
}

.wk-login-content-scanlogin-qrcode-desc li {
    counter-increment: item;
    text-align: left;
    margin: 0.32rem 0;
    display: flex;
    color: rgba(9,30,66,.87);
}

.wk-login-content-scanlogin-qrcode-desc li::before {
    content: counter(item);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0.586667rem;
    height: 0.586667rem;
    padding: 0;
    margin: 0 0.32rem 0 0;
    background: var(--wk-color-theme);
    border-radius: 50%;
    font-size: smaller;
    color: #fff;
}

.wk-login-footer-buttons button{
    background-color: transparent;
    color: var(--wk-color-theme);
    outline: none !important;
    border: 0;
    height: 1.493333rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.266667rem;
    cursor: pointer;
}

.wk-login-content-scanlogin-qrcode-expire {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(255, 255,255,0.95);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.wk-login-content-scanlogin-qrcode-expire img {
    width: 1.333333rem;
    height: 1.333333rem;
    cursor: pointer;
}